/* Musaics of the Bay — site stylesheet. Palette: #1A1A1C #201E1F #7A7173 #BFB6B5 #F0EBE8.
   P22 Stickley Pro (Display regular, Text italic): body. Rennie Mackintosh Bold: nav and every heading except h4. P22 Salon Inner: h4. Alexander Quill: buttons. Rennie Mackintosh Ornaments: program ornaments. Cormorant Garamond: checkout popup and guest wall. */
@font-face { font-family: "Stickley"; src: url("/assets/fonts/p22stickleyprodisplay.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Stickley"; src: url("/assets/fonts/p22stickleyprotext-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Rennie"; src: url("/assets/fonts/rennie-mackintosh-itc-bold.otf") format("opentype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Quill"; src: url("/assets/fonts/alexander-quill-w01-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rennie Ornaments"; src: url("/assets/fonts/rennie-mackintosh-ornaments-itc-regular.otf") format("opentype"); font-weight: 200 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Salon"; src: url("/assets/fonts/p22-salon-inner-regular.ttf") format("truetype"); font-weight: 300 400; font-style: normal; font-display: swap; }
:root { --ink: #1A1A1C; --ink-2: #201E1F; --stone: #7A7173; --ash: #BFB6B5; --paper: #F0EBE8;
        --body: "Stickley", "Cormorant Garamond", Georgia, serif; --head: "Rennie", "Stickley", Georgia, serif; --small-head: "Salon", "Stickley", Georgia, serif; --button: "Quill", "Stickley", Georgia, serif;
        --gutter: 5vw; --fs: clamp(1.3rem, 1.272rem + 0.194vw, 1.5rem); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; } /* a fast scroll that hits the end of the page no longer stretches or bounces the content (Chrome, Edge and Android squash the page for a moment otherwise) */
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: var(--fs); line-height: 1.6; letter-spacing: 0.7136px; /* fixed, as on Squarespace: tracking must not grow with the text size */ -webkit-font-smoothing: antialiased; font-synthesis: none; }
/* Every page fades in on load. CSS only: nothing intercepts links, and the page still shows if scripts fail. */
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
body { animation: pagein 2s ease both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }
/* Moving between pages of the site: where the browser can (Chrome, Edge, recent Safari) the browser itself fades the old page out to black and the new one in from black as one smooth sequence, so there is no sudden cut in between.
   The small script in the page head marks those arrivals (html.vt) and the ordinary fade-in is skipped for them; a first visit, and other browsers, still get the fade-in. */
@view-transition { navigation: auto; }
/* out to black, then in from black: the old page fades away over 0.7s, and only then does the new one fade up over 1.6s */
::view-transition { background: #1A1A1C; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root) { animation: vt-out 0.7s ease both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-in 1.6s ease 0.7s both; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; } }
html.vt body { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* A link was clicked: the page darkens at once while the next one loads. A veil over the page, not the page's own opacity: changing body opacity fought with the fade-in animation and flickered in Chrome. */
body::after { content: ""; position: fixed; inset: 0; z-index: 9000; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.is-leaving::after { opacity: 0.35; }
img { max-width: 100%; display: block; } picture { display: contents; } picture > source { display: none; } /* a picture drawn as contents would otherwise hand its two source tags to a grid or flex parent as empty items, scattering a gallery (the donate page, 2026-09-22) */ img[data-full] { cursor: zoom-in; }
/* ---- Full-screen view of a picture (2026-09-22): img[data-full] names the untouched original; SITE_JS opens it over the page ---- */
/* A film opened over the page from a button or a picture (2026-09-24). The page behind it is locked, as
   the films pages lock theirs; the player is our own, so the archive file plays rather than a Vimeo embed. */
.fplb { position: fixed; inset: 0; z-index: 1200; background: #000; display: none; } .fplb.is-open { display: flex; align-items: center; justify-content: center; } html.fplb-open { overflow: hidden; }
.fplb-stage { width: 100%; max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; }
.fplb-stage .fev, .fplb-stage .fe-vid { width: 100%; max-height: 100vh; }
.fplb-x { position: absolute; top: 22px; left: 28px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.28; transition: opacity 0.25s; display: flex; align-items: center; justify-content: center; }
.fplb-x:hover, .fplb-x:focus-visible { opacity: 1; } .fplb-x svg { pointer-events: none; }
.lbx { position: fixed; inset: 0; z-index: 1200; background: #000; color: #fff; display: none; } .lbx.is-open { display: block; } html.lbx-open { overflow: hidden; }
.lbx-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; } .lbx-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lbx.is-actual .lbx-stage { display: block; } .lbx.is-actual .lbx-stage img { max-width: none; max-height: none; cursor: zoom-out; margin: auto; } .lbx.no-zoom .lbx-stage img { cursor: default; }
.lbx button { position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font: 28px/44px system-ui, sans-serif; text-align: center; cursor: pointer; opacity: 0.85; } .lbx button:hover { opacity: 1; }
.lbx-x { top: 14px; right: 14px; } .lbx-prev, .lbx-next { top: 50%; transform: translateY(-50%); } .lbx-prev { left: 14px; } .lbx-next { right: 14px; } .lbx.is-alone .lbx-prev, .lbx.is-alone .lbx-next { display: none; }
.lbx-note { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 13px/1.4 system-ui, sans-serif; letter-spacing: 0.04em; opacity: 0.7; pointer-events: none; }
a { color: inherit; text-underline-offset: 4px; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
h1, h2, h3, h5, h6 { font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.14; margin: 0 0 0.3em; }
h1 { font-size: clamp(2.9rem, 2.873rem + 0.451vw, 3.5rem); } h2 { font-size: clamp(2.4rem, 1.9rem + 1.3vw, 3rem); } h3 { font-size: clamp(1.9rem, 1.6rem + 0.9vw, 2.3rem); }
h4 { font-family: var(--small-head); font-weight: 300; font-style: italic; font-synthesis: style; font-size: clamp(1.4rem, 1.387rem + 0.217vw, 1.65rem); line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.6em; }
.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 14px; }
.arch { border-radius: 50% 50% 0 0 / 33.6% 33.6% 0 0; overflow: hidden; } /* Squarespace's arch: the curve takes the top third of the box, however wide it is */ .arch img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons */
.btn { display: inline-block; font-family: var(--button); font-size: 1.115rem; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 0.86rem 1.34rem; border: 0; border-radius: 0; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.btn-dark { background: rgba(27, 27, 29, 0.74); color: var(--paper); } .btn-dark:hover { background: var(--paper); color: var(--ink); }
.btn-light { background: #F1ECE9; color: #1B1B1D; padding: 0.56rem 1.22rem; } .btn-light:hover { opacity: 0.82; }
.cp-cancelled { margin-top: 14px; font-size: 0.92em; font-style: italic; } .btn.is-off { cursor: default; opacity: 0.7; } .btn.is-off:hover { background: rgba(27, 27, 29, 0.74); color: var(--paper); }

/* Header: sits over the first section */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 3.4vw; padding: 5px var(--gutter); min-height: 77px; }
@media (min-width: 901px) { .site-header { padding: 5px 2.75vw; } } /* the same bar on every page, whatever margins the page below uses */
/* the subtle drop shadow under the bar, as on Squarespace: black 0 4px 15px 1px at 15% */
.site-header::after { content: ""; position: absolute; inset: 0; box-shadow: 0 4px 15px 1px #000; opacity: 0.15; pointer-events: none; }
.site-logo img { width: 67px; height: 67px; } .site-logo { transition: opacity .35s ease; } .site-logo:hover, .site-logo:focus-visible { opacity: 0.6; }
.site-nav { display: flex; align-items: center; gap: 3.9vw; flex: 1 1 auto; justify-content: center; min-width: 0; }
.site-nav a:not(.btn) { font-family: var(--head); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.02rem); line-height: 1.03; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--paper); padding: 3px 0; transition: opacity .35s ease; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible, .site-nav a.is-current, .site-nav a.is-here { opacity: 0.6; }
.site-header a.is-current { cursor: default; pointer-events: none; } .site-header .btn.is-current, .site-header .btn.is-here { opacity: 0.6; }
.site-give-m, .site-burger { display: none; }
.site-burger { background: none; border: 0; width: 44px; height: 44px; padding: 0; cursor: pointer; margin-left: auto; position: relative; z-index: 31; }
.site-burger span { display: block; width: 30px; height: 1px; background: var(--paper); margin: 9px auto; transition: transform .25s; }
body.nav-open .site-burger span:first-child { transform: translateY(5px) rotate(45deg); } body.nav-open .site-burger span:last-child { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 900px) {
  .site-give { display: none; } .site-burger { display: block; }
  .site-nav { position: fixed; inset: 0; z-index: 30; background: var(--ink); flex-direction: column; justify-content: center; gap: 28px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .site-nav a:not(.btn) { font-size: 2.4rem; } .site-give-m { display: inline-block; margin-top: 14px; }
  body.nav-open .site-nav { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; }
}

/* Footer */
.site-footer { background: var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 34px var(--gutter) 38px; font-size: 1.05em; line-height: 1.6; }
.sf-left { text-align: left; } .sf-mid { text-align: center; } .sf-right { text-align: right; }
.sf-social { display: flex; gap: 18px; justify-content: center; margin-top: 16px; } .sf-social a { opacity: 0.9; } .sf-social a:hover { opacity: 0.6; }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr; text-align: center; } .sf-left, .sf-right { text-align: center; } .sf-mid { order: -1; } }
@media (max-width: 767px) { .site-footer { font-size: 13px; letter-spacing: 0.4px; line-height: 1.55; gap: 16px; padding: 28px var(--gutter) 30px; } .site-footer .btn { font-size: 0.85rem; } }

/* Concert calendar: full-width alternating bands */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-calendar main { padding-top: 78px; }
.cal-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 5vw; align-items: center; padding: 5vw; background: var(--ink); }
.cal-row:nth-child(even) { background: var(--ink-2); }
.cal-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 45% 45% 0 0 / 28% 28% 0 0; transition: opacity .25s; } .cal-img:hover img { opacity: 0.88; }
.cal-text h3 { font-size: clamp(1.8rem, 1.6rem + 0.95vw, 2.9rem); line-height: 1.15; letter-spacing: 0.14em; margin: 0 0 0.35em; } .cal-text h3 a { text-decoration: none; }
.cal-text h4 { font-size: clamp(1.2rem, 1.1rem + 0.37vw, 1.5rem); margin: 0 0 0.6em; }
.cal-text { padding: 14px 0 12px; } .cal-text p { margin: 0 0 1.6em; }
.cal-act { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; }
.btn-lg { padding: 0.86rem 1.34rem; }
.cal-soldout { color: var(--stone); font-size: 0.95em; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-empty { padding: 120px var(--gutter); text-align: center; opacity: 0.7; }
@media (max-width: 767px) { .cal-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 10vw 6vw; } }

/* Plain pages */
.plain { padding: 180px 0 120px; text-align: center; }

/* Concert page: a little wider than the Squarespace grid (side margins 3.5vw instead of 5vw on desktop; header and footer follow) */
@media (min-width: 901px) {
  .page-concert, .page-home, .page-projects, .page-about, .page-album { --gutter: 2.75vw; }
  .page-concert .wrap, .page-home .wrap, .page-projects .wrap, .page-about .wrap, .page-album .wrap { max-width: 1640px; } .page-concert .cp-program-card { max-width: 980px; }
  .page-home .offers-panel, .page-projects .proj-hero-panel { max-width: 1640px; } .page-home .offers-grid { grid-template-columns: repeat(3, minmax(0, 322px)); }
  .page-about .about-col, .page-about .about-mission p { max-width: 1080px; }
}
.cp-hero { position: relative; background: #3A3330 center / cover no-repeat; padding: 153px 0 84px; }
.cp-hero-shade { position: absolute; inset: 0; background: rgba(58, 51, 48, 0.71); }
.cp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 528fr) minmax(0, 576fr); column-gap: 3.75vw; grid-template-areas: ". img" "card img" "reserve img" ". img" "guests guests"; grid-template-rows: minmax(var(--img-over, 0px), 1fr) auto auto minmax(var(--img-over, 0px), 1fr) auto; align-items: start; }
.cp-hero-img { grid-area: img; aspect-ratio: 576 / 672; } .cp-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) { /* beside the text: as tall as the card and its button, cropped to fit, never shorter than 430px */
  .cp-hero-grid:not(.is-centered) { --img-over: 40px; } /* the image stands this much taller than the text, above and below */
  .cp-hero-grid:not(.is-centered) .cp-hero-img { aspect-ratio: auto; position: relative; align-self: stretch; min-height: 430px; } .cp-hero-grid:not(.is-centered) .cp-hero-img img { position: absolute; inset: 0; object-position: 50% 25%; }
}
.cp-card { grid-area: card; background: rgba(22, 19, 14, 0.32); padding: 31px 37px 18px; text-align: center; }
.cp-card h1 { margin: 0 0 15px; }
@media (max-width: 480px) { .cp-card h1 { font-size: min(2.98rem, 11.2vw); letter-spacing: 0.09em; } .cp-hero-grid > * { min-width: 0; } } /* a long single word ("Conversations") pushed the page 5 px wider than a phone */
.cp-card h4 { margin: 0 0 15px; }
.cp-text { font-size: 0.92em; } .cp-text.is-long { text-align: justify; } .cp-text p { margin-bottom: 0.75em; }
.cp-sugg { margin: 1.05em 0 0.45em; font-size: 0.92em; } .cp-note { font-size: 0.92em; }
.cp-hero-grid.is-mirrored { grid-template-columns: minmax(0, 576fr) minmax(0, 528fr); grid-template-areas: "img ." "img card" "img reserve" "img ." "guests guests"; }
.cp-hero-grid.is-centered { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "reserve" "guests"; grid-template-rows: auto; } .cp-hero-grid.is-centered .cp-card { width: 100%; max-width: 680px; margin: 0 auto; }
.cp-reserve { grid-area: reserve; text-align: center; padding: 46px 0 10px; align-self: start; }
.cp-hero-grid > .rd-guests { grid-area: guests; margin-top: 87px; }
.cp-program { background: var(--ink); padding: 63px var(--gutter) 60px; }
.cp-program-card { max-width: 861px; margin: 0 auto; background: var(--ink-2); border-radius: 5px; padding: 43px 40px 40px; text-align: center; }
.cp-program-card h4 { margin-bottom: 14px; }
.pg-orn { font-family: "Rennie Ornaments"; font-size: 3.345rem; line-height: 1.3; font-weight: 200; letter-spacing: 0.013em; color: var(--paper); margin: 0 0 12px; } .pg + .pg-orn { margin: 12px 0 0; }
.pg { font-size: 1em; line-height: 1.6; } .pg > div { margin: 0 0 0.72em; } .pg > div:last-child { margin-bottom: 0; }
.pg-composer { letter-spacing: 0.04em; text-transform: uppercase; } .pg-entry + .pg-entry, .pg-int + .pg-entry { margin-top: 1.5em; } .pg-entry > div { margin: 0 0 0.72em; } .pg-entry > div:last-child { margin-bottom: 0; }
.pg-perf { font-size: 0.9em; color: var(--ash); } .pg-note { font-size: 0.9em; font-style: italic; color: var(--ash); max-width: 34em; margin-left: auto !important; margin-right: auto !important; }
.pg-int { margin: 1.5em 0 0 !important; font-family: var(--small-head); font-style: italic; font-synthesis: style; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } .pg-mvt { font-style: italic; } .pg-gap { display: none; }
.cp-artists { background: var(--ink-2); padding: 64px 0 65px; }
.cp-artist { display: grid; grid-template-columns: minmax(0, 280fr) minmax(0, 813fr); column-gap: 4.6vw; align-items: center; } .cp-artist + .cp-artist { margin-top: 47px; }
.cp-artist-img { aspect-ratio: 280 / 410; }
.cp-artist-text { text-align: justify; }
@media (min-width: 901px) { /* the portrait is as tall as the words beside it plus 40px above and below, cropped to fit; between 330 and 620px */
  .cp-artist-text { padding: 40px 0; } .cp-artist-img { aspect-ratio: auto; position: relative; align-self: center; height: 100%; min-height: 330px; max-height: 620px; } .cp-artist-img img { position: absolute; inset: 0; object-position: 50% 20%; }
} .cp-artist-text h4 { text-align: left; margin-bottom: 0.65em; } .cp-artist-text p { margin-bottom: 0.6em; font-size: 0.92em; } /* the same size as the concert description */ .cp-artist-inst { text-align: left; } .cp-artist-links { text-align: left; font-size: 0.92em; color: var(--ash); margin-top: 1em; }
.fe-sec-artists .cp-artists { background: transparent; position: relative; width: 100%; }
.fe-sec-program .cp-program { background: transparent; position: relative; width: 100%; } .fe-sec-program .cp-program.is-over .cp-program-card { background: var(--pcard, rgba(0, 0, 0, 0.45)); } .fe-sec-program .cp-program:not(.is-over) .cp-program-card { background: var(--pcard, rgba(0, 0, 0, 0.12)); } .fe-sec.is-light .cp-program-card { background: rgba(0, 0, 0, 0.06); } /* a site page's Program section (2026-09-23): the concert page's card on the section's own colour, translucent over a background picture, a faint tint on a light section */ /* a site page's Musicians section (2026-09-23): the same block as a concert page's, on the section's own theme colour, above the section's background and overlay like every other section body */
@media (max-width: 900px) {
  .cp-hero { padding: 120px 0 60px; }
  .cp-hero-grid, .cp-hero-grid.is-mirrored { grid-template-columns: 1fr; grid-template-areas: "img" "card" "reserve" "guests"; grid-template-rows: auto; row-gap: 12px; }
  .cp-hero-img { aspect-ratio: 330 / 264; } .cp-card { padding: 26px 22px 22px; }
  .cp-reserve { padding: 34px 0 6px; }
  .cp-program { padding: 50px var(--gutter); } .cp-program-card { padding: 34px 18px; }
  .cp-artists { padding: 70px 0 64px; } .cp-artist { grid-template-columns: 1fr; } .cp-artist + .cp-artist { margin-top: 70px; } .cp-artist-img { width: 245px; max-width: 75%; } .cp-artist-text { padding-top: 10px; }
}

/* Guest wall */
.rd-guests { text-align: center; padding: 30px 40px 32px; width: 100%; background: rgba(26, 26, 28, 0.72); font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif; letter-spacing: 0.05em; font-weight: 600; opacity: 0; transition: opacity .6s ease; }
.rd-guests[hidden] { display: none !important; } .rd-guests.rd-in { opacity: 1; } .rd-guests.is-ssr { transition: none; } .rd-guests.is-ssr .rd-g { opacity: 1; transform: none; animation: none; }
.rd-guests-title { font-size: 16px; letter-spacing: 0.28em; text-transform: uppercase; color: #F0EBE8; margin-bottom: 22px; font-weight: 400; }
.rd-guests-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; }
.rd-guests-grid .rd-g { width: 96px; text-align: center; font-size: 16px; color: #F0EBE8; line-height: 1.3; opacity: 0; transform: translateY(6px); animation: rdguest .5s ease forwards; }
@keyframes rdguest { to { opacity: 1; transform: none; } }
.rd-av { position: relative; width: 88px; height: 88px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid #1A1A1C; background: #201E1F; color: #BFB6B5; display: flex; align-items: center; justify-content: center; font-size: 26px; letter-spacing: 0.05em; }
.rd-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rd-av.rd-anon { background: transparent; border: 1px dashed #7A7173; }
.rd-plus { position: absolute; right: -6px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #F0EBE8; color: #1A1A1C; font-size: 13px; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #1A1A1C; }
.rd-role { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #BFB6B5; margin-top: 3px; font-weight: 400; }
@media (max-width: 600px) { .rd-guests { padding: 26px 14px 28px; } .rd-guests-grid { gap: 20px 12px; } }

/* Album player (same player as the Squarespace block, first-party now) */
.rd-album { padding: 64px var(--gutter) 70px; background: var(--ink-2); color: #F7F3F0; font-size: 1.115rem; line-height: 1.6; }
.rd-album h2.rd-album-title { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.75rem); margin-top: 15px; }
.rd-album-inner { max-width: 960px; margin: 0 auto; }
.rd-album-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; align-items: start; }
.rd-album-title { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.15; }
.rd-album-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #201E1F; }
.rd-album-title { margin: 0 0 6px; }
.rd-album-artist { margin: 0 0 4px; font-size: 0.95em; color: #E6E0DC; line-height: 1.5; font-style: italic; }
.rd-album-date { margin: 0 0 22px; font-style: italic; color: #D9D2CE; }
.rd-album-now { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 8px; }
.rd-album-transport { display: flex; align-items: center; gap: 6px; margin-left: -7px; }
.rd-album-play, .rd-album-skip { width: 48px; height: 48px; border: 0; background: transparent; color: #F0EBE8; cursor: pointer; padding: 0;
                                 display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: opacity .15s; }
.rd-album-play:hover, .rd-album-skip:hover { opacity: 0.6; }
.rd-album-play svg, .rd-album-skip svg { display: block; }
.rd-album-tip { margin-top: 14px; }
.rd-album-tiplink { background: transparent; border: 1px solid #F0EBE8; border-radius: 2px; padding: 9px 18px; font: inherit; font-size: 1em; color: #F7F3F0; cursor: pointer; transition: background .15s, color .15s; }
.rd-album-tiplink:hover { background: #F0EBE8; color: #1A1A1C; }
.rd-album-tiplink span { font-size: 0.9em; margin-left: 4px; }
.rd-album-tipnote { font-size: 0.85em; color: #D9D2CE; margin-top: 8px; }
.rd-album-more { margin-top: 2vw; }
.rd-album-more[hidden] { display: none; }
.rd-album-more-h { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: #D9D2CE; margin-bottom: 16px; }
.rd-album-row { display: flex; gap: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; }
.rd-album-card { flex: 0 0 160px; text-decoration: none; color: #F7F3F0; }
.rd-album-card img, .rd-album-card-blank { width: 160px; height: 160px; object-fit: cover; display: block; background: #262626; transition: opacity .2s; }
.rd-album-card:hover img { opacity: 0.85; }
.rd-album-card-t { font-size: 1em; line-height: 1.25; margin-top: 10px; }
.rd-album-card-a { font-size: 0.85em; color: #D9D2CE; font-style: italic; margin-top: 2px; }
@media (max-width: 700px) { .rd-album-card { flex-basis: 130px; } .rd-album-card img, .rd-album-card-blank { width: 130px; height: 130px; } }
.rd-album-give { margin-top: 28px; text-align: left; }
.rd-album-give-note { margin: 14px 0 0; color: #E6E0DC; font-size: 0.95em; line-height: 1.6; }
.rd-album-current { width: 100%; min-width: 0; }
.rd-album-current .t { font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-album-bar { position: relative; height: 3px; background: rgba(240,235,232,0.18); cursor: pointer; margin: 8px 0 6px; }
.rd-album-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #F0EBE8; width: 0; }
.rd-album-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; } /* an unseen, taller place to click: the line itself is only 3 px (Christos, 2026-09-21) */
.rd-album-time { display: flex; justify-content: space-between; font-size: 0.9em; color: #D9D2CE; font-variant-numeric: tabular-nums; }
.rd-album-tracks { list-style: none; margin: 2.5vw 0 0; padding: 0; border-top: 1px solid rgba(240,235,232,0.15); }
.rd-album-tracks li { display: flex; align-items: baseline; gap: 14px; padding: 14px 8px; border-bottom: 1px solid rgba(240,235,232,0.15); cursor: pointer; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); }
.rd-album-tracks li:hover { background: rgba(240,235,232,0.05); }
.rd-album-tracks li.on { background: rgba(240,235,232,0.08); color: #F7F3F0; }
.rd-album-tracks li.on .n { color: #F7F3F0; }
.rd-album-tracks .n { width: 2.2em; color: #D9D2CE; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rd-album-tracks .t { flex: 1 1 auto; }
.rd-album-tracks .d { color: #D9D2CE; font-variant-numeric: tabular-nums; }
.rd-album-notes { margin-top: 28px; color: #E6E0DC; font-size: 0.95em; line-height: 1.6; white-space: pre-line; }
@media (max-width: 700px) { .rd-album-head { grid-template-columns: 1fr; gap: 24px; } .rd-album-cover { max-width: 420px; margin: 0 auto; } }

@media (max-width: 700px) { .rd-album-head { grid-template-columns: minmax(0, 1fr); } .rd-album-head > div { min-width: 0; } } /* a long track title must not push the cover past the screen edge */

/* Recordings: header band + grid of covers */
.rec-hero { position: relative; background: #3C3634 center / cover no-repeat; padding: 117px var(--gutter) 24px; text-align: center; }
.rec-hero::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 28, 0.8); }
.rec-hero > * { position: relative; } .rec-hero h1 { margin: 0 0 14px; } .rec-hero p { font-size: 0.92em; margin: 0 0 14px; } .rec-hero .pg-orn { margin: 0; }
.rec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 7.3vw; padding: 56px var(--gutter) 90px; background: var(--ink); }
.rec-item { text-decoration: none; text-align: center; } .rec-item img, .rec-blank { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #262626; transition: opacity .25s; } .rec-item:hover img { opacity: 0.85; }
.rec-item h3 { font-size: 1.56rem; letter-spacing: 0.07em; text-transform: none; line-height: 1.3; margin: 20px 0 0; }
@media (max-width: 900px) { .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 6vw; } .rec-item h3 { font-size: 1.3rem; } }
.page-album main { padding-top: 78px; background: var(--ink-2); } .page-album .cp-artists { background: var(--ink); }

/* White text over photographs gets a soft black backing, as on Squarespace (there: black rectangles behind the text, blurred 73-100px) */
.glow { position: relative; z-index: 0; } .glow::before { content: ""; position: absolute; z-index: -1; inset: var(--glow-inset, -36px 0); background: rgba(0, 0, 0, var(--glow, 1)); filter: blur(var(--glow-blur, 73px)); pointer-events: none; }
.home-words { --glow: 0.56; --glow-blur: 100px; } .home-words::before { inset: 37px auto auto 50%; width: 570px; max-width: 92vw; height: 432px; transform: translateX(-50%); }
.rdband-words { max-width: 667px; margin: 0 auto; --glow-inset: 0 -48px; }

/* Home */
.home-hero { background: #3A3330 center / cover no-repeat; text-align: center; padding: 233px var(--gutter) 150px; }
.home-logo { width: 147px; height: auto; margin: 0 auto 11px; }
.home-hero h1 { font-size: clamp(3.6rem, 2.9rem + 3vw, 5.4rem); letter-spacing: 0.1em; line-height: 1.16; color: var(--ash); margin: 0 0 6px; }
.home-hero h2 { color: var(--ash); margin: 0 0 22px; }
.home-hero p { max-width: 570px; margin: 0 auto; font-size: 0.92em; }
.scroll-cue { margin-top: 22px; } .scroll-cue span { display: block; width: 2px; height: 60px; margin: 0 auto; background: var(--paper); transform-origin: top; animation: cue 2.4s ease-in-out infinite; }
.scroll-cue small { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }
.offers { background: var(--ink); padding: 23px var(--gutter) 40px; }
.offers-panel { background: rgba(32, 30, 31, 0.41); padding: 14px 3.75vw 50px; text-align: center; max-width: 1400px; margin: 0 auto; }
.offers-panel h2 { margin: 0 0 48px; } .offers-panel h2 em { font-style: italic; font-synthesis: style; }
.offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 288px)); justify-content: space-between; gap: 40px 24px; }
.offer-img { display: block; aspect-ratio: 288 / 347; } .offer h3 { margin: 22px 0 10px; } .offer p { margin: 0 0 18px; font-size: 0.88em; }
.rdband { position: relative; background: #36302F center / cover no-repeat; text-align: center; overflow: hidden; padding: 150px var(--gutter) 155px; }
.rdband-logo { width: 92px; height: auto; margin: 0 auto 22px; } .rdband h2 { margin: 0 0 8px; } .rdband .pg-orn { margin: 0 0 8px; }
.rdband p { max-width: 667px; margin: 0 auto 0.9em; font-size: 0.92em; } .rdband .btn { margin-top: 22px; }
@media (max-width: 900px) { .home-hero { padding: 150px var(--gutter) 70px; } .offers-grid { grid-template-columns: minmax(0, 320px); justify-content: center; } .rdband { padding: 90px var(--gutter) 70px; } }

/* Pages converted from Squarespace: its 24-column (desktop) / 8-column (phone) layout grid, blocks placed by grid-area */
.fe-sec { position: relative; padding: min(var(--pad, 3.3vw), 3.3vw) 0; min-height: var(--minh, 0); display: flex; flex-direction: column; justify-content: center; } .fe-sec > .fe, .fe-sec > .slider, .fe-sec > .fe-sgrid, .fe-sec > .fe-masonry, .fe-sec > .fe-list { width: 100%; position: relative; } .fe-sec.is-first { padding-top: calc(77px + var(--pad, 3.3vw)); } .fe-sec.is-light { color: var(--ink); }
.fe-sec.fe-sec-gallery, .fe-sec.fe-sec-list { padding: 0; } .fe-sec.fe-sec-gallery.is-first, .fe-sec.fe-sec-list.is-first { padding-top: 77px; }
.fe-bg, .fe-ov { position: absolute; inset: 0; } .fe-bg { background-size: cover; background-repeat: no-repeat; }
.fe { position: relative; display: grid; column-gap: var(--cgap, var(--gap, 11px)); row-gap: var(--gap, 11px); --gg: calc(var(--gutter) - var(--cgap, var(--gap, 11px))); --cw: min(1500px, calc(100vw - var(--gutter) * 2)); /* --cgap: Squarespace sometimes sets the column gap apart from the row gap (the Films page: 30 / 0) */
      grid-template-columns: minmax(var(--gg), 1fr) repeat(8, minmax(0, calc((1500px - var(--cgap, var(--gap, 11px)) * 7) / 8))) minmax(var(--gg), 1fr); grid-template-rows: repeat(var(--rm), minmax(24px, auto)); overflow-x: clip; }
.fe-b { grid-area: var(--m); position: relative; z-index: var(--z); min-width: 0; display: flex; flex-direction: column; justify-content: var(--vm); } /* z-index does nothing on a static box: without this only image blocks honoured Squarespace's own layering, so text laid over a picture was painted out (2026-09-23) */
@media (min-width: 768px) {
  .fe { grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, calc((1500px - var(--cgap, var(--gap, 11px)) * 23) / 24))) minmax(var(--gg), 1fr); grid-template-rows: repeat(var(--rd), minmax(calc(var(--cw) * var(--rs)), auto)); }
  .fe-b { grid-area: var(--d); justify-content: var(--vd); }
}
.fe-b.has-bg > .fe-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: inherit; } .fe-panel { flex: 1 1 auto; filter: blur(var(--pblur, 1px)); border-radius: var(--prad, 0); } /* a text block with its own ground fills its cell; a panel lies behind other blocks */
.dropcap { float: left; font-size: 3.6em; line-height: 1.02; padding: 0.04em 0.14em 0 0; }
.fe-sub { text-align: center; width: 100%; } .fe-sub h2 { margin: 0 0 0.35em; } .fe-sub p { margin: 0 0 1.1em; } .fe-signup-row { display: flex; justify-content: center; gap: 13px; flex-wrap: wrap; } .fe-sub input[type="email"] { flex: 0 1 350px; min-width: 0; font: inherit; color: #000; background: #fff; border: 1px solid #000; border-radius: 0; padding: 0 20px; height: 66px; } .fe-sub .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fe-sub .btn { height: 66px; padding-top: 0; padding-bottom: 0; } .fe-signup-msg { min-height: 1.6em; margin-top: 14px; font-size: 0.86em; }
.fe-text { padding: 0; } .fe-text > :first-child { margin-top: 0; } .fe-text > :last-child { margin-bottom: 0; }
.fe-text h1, .fe-text h2, .fe-text h3, .fe-text h4 { margin: 0 0 0.45em; } .fe-text p { margin: 0 0 0.75em; } .fe-text p.t-large { font-size: 0.92em; } .fe-text p.t-note { font-size: 0.7em; line-height: 1.5; color: var(--ash); letter-spacing: 0.03em; } .is-light .fe-text p.t-note { color: var(--stone); } /* small print: acknowledgements, credits */ .fe-text p.t-small { font-family: "Rennie Ornaments"; font-size: 3.345rem; line-height: 1.3; font-weight: 200; margin: 0 0 0.2em; overflow-wrap: anywhere; }
.fe-text h3 { font-size: clamp(1.8rem, 1.6rem + 0.95vw, 2.9rem); letter-spacing: 0.14em; } .fe-text ul, .fe-text ol { padding-left: 1.6em; margin: 0 0 0.75em; } .fe-text li { margin-bottom: 0.4em; }
.ta-center { text-align: center; } .ta-right { text-align: right; } .ta-justify { text-align: justify; } .ta-left { text-align: left; }
.fe-image { position: relative; min-height: 0; } .fe-imgbox { position: absolute; inset: 0; overflow: hidden; } .fe-imgbox img, .fe-imgbox a { display: block; width: 100%; height: 100%; }
.fe-imgbox.is-arch { border-radius: 50% 50% 0 0 / 33.6% 33.6% 0 0; } .fe-imgbox.is-oval, .fe-imgbox.is-round { border-radius: 50%; }
/* round pictures are true circles, all one size (Christos, 2026-09-21): the largest circle the grid cell allows, never more than 420 px, centred in the cell */
.fe-image:has(> .is-oval), .fe-image:has(> .is-round) { container-type: size; } .fe-imgbox.is-oval, .fe-imgbox.is-round { inset: auto; top: 50%; left: 50%; width: min(100cqw, 100cqh, 420px); height: min(100cqw, 100cqh, 420px); transform: translate(-50%, -50%); }
.fe-btn { padding: 17px; }
.fe-vid { position: relative; width: 100%; background: #000; } .fe-vid.is-fill { aspect-ratio: auto !important; height: 100%; min-height: 320px; background: transparent; } .fe-vid iframe, .fe-vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .fe-vid video { object-fit: contain; background: #000; }
/* ---- Film player: our own controls over the picture, in the manner of a streaming service: a thin line for progress that thickens under the pointer, a quiet row of controls on a soft gradient, everything fading away while the film plays ---- */
.vp { position: absolute; inset: 0; color: #F0EBE8; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.vp-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0)); pointer-events: none; transition: opacity .35s; }
.vp-top { display: none; position: absolute; left: 0; right: 0; top: 0; padding: 18px 22px 40px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; line-height: 1.2; pointer-events: none; transition: opacity .35s; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.vp-big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: rgba(20, 19, 20, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s, opacity .3s; padding: 0; }
.vp-big:hover { transform: scale(1.06); background: rgba(20, 19, 20, 0.68); } .vp-big svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.vp.is-playing .vp-big, .vp.is-started.is-idle .vp-big { opacity: 0; pointer-events: none; } .vp.is-waiting .vp-big { opacity: 0; }
.vp-spin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid rgba(240, 235, 232, 0.25); border-top-color: #F0EBE8; border-radius: 50%; opacity: 0; pointer-events: none; animation: vp-spin .9s linear infinite; } .vp.is-waiting .vp-spin { opacity: 1; } @keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 10px; transition: opacity .35s, transform .35s; }
.vp-line { position: relative; height: 18px; cursor: pointer; touch-action: none; } .vp-track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(240, 235, 232, 0.28); border-radius: 2px; transition: height .15s, top .15s; overflow: hidden; }
.vp-buf, .vp-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; } .vp-buf { background: rgba(240, 235, 232, 0.35); } .vp-played { background: #F0EBE8; }
.vp-dot { position: absolute; top: 9px; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #F0EBE8; transform: scale(0); transition: transform .15s; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.vp-line:hover .vp-track, .vp.is-scrubbing .vp-track { height: 4px; top: 7px; } .vp-line:hover .vp-dot, .vp.is-scrubbing .vp-dot { transform: scale(1); }
.vp-tip { position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); background: rgba(20, 19, 20, 0.85); padding: 5px 8px; border-radius: 4px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; } .vp-line:hover .vp-tip, .vp.is-scrubbing .vp-tip { opacity: 1; }
.vp-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .vp-gap { flex: 1; }
.vp-btn { appearance: none; border: 0; background: none; color: inherit; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; opacity: 0.88; transition: opacity .15s, transform .15s, background .15s; } .vp-btn:hover { opacity: 1; transform: scale(1.12); } .vp-btn:focus-visible, .vp-big:focus-visible { outline: 2px solid rgba(240, 235, 232, 0.8); outline-offset: 2px; }
.vp-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .vp-btn svg .f { fill: currentColor; stroke: none; } .vp-btn text { fill: currentColor; stroke: none; font: 600 7.5px "Inter", system-ui, sans-serif; }
.vp-qwrap { position: relative; margin-right: 2px; } .vp-qwrap[hidden] { display: none; } .vp-q svg { width: 22px; height: 22px; } /* the quality control is a gear among the other buttons (2026-09-23; it was a bordered box reading Auto or 1080p) */
.vp-qmenu { position: absolute; right: 0; bottom: 34px; min-width: 132px; background: rgba(20, 19, 20, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 8px; padding: 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .vp-qmenu[hidden] { display: none; }
.vp-qmenu button { appearance: none; display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: 500 13px/1 "Inter", system-ui, sans-serif; padding: 9px 10px 9px 26px; border-radius: 5px; cursor: pointer; position: relative; opacity: 0.85; } .vp-qmenu button:hover { background: rgba(240, 235, 232, 0.1); opacity: 1; } .vp-qmenu button[aria-checked="true"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #F0EBE8; }
.vp-time { font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0.9; padding: 0 8px; white-space: nowrap; } .vp-time i { font-style: normal; opacity: 0.55; }
.vp-vol { display: flex; align-items: center; } .vp-volbar { width: 0; opacity: 0; height: 18px; position: relative; cursor: pointer; transition: width .2s, opacity .2s, margin .2s; touch-action: none; } .vp-vol:hover .vp-volbar, .vp-vol:focus-within .vp-volbar, .vp.is-voling .vp-volbar { width: 72px; opacity: 1; margin: 0 8px 0 2px; }
.vp-volbar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(240, 235, 232, 0.28); border-radius: 2px; } .vp-volfill { position: absolute; left: 0; top: 8px; height: 2px; background: #F0EBE8; border-radius: 2px; } .vp-volfill::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #F0EBE8; }
.vp.is-started.is-playing.is-idle { cursor: none; } .vp.is-started.is-playing.is-idle .vp-bottom { opacity: 0; transform: translateY(6px); pointer-events: none; } .vp.is-started.is-playing.is-idle .vp-shade, .vp.is-started.is-playing.is-idle .vp-top { opacity: 0; }
.vp:not(.is-started) .vp-bottom, .vp:not(.is-started) .vp-shade { opacity: 0; pointer-events: none; }
.fe-vid:fullscreen { aspect-ratio: auto !important; width: 100vw; height: 100vh; background: #000; } .fe-vid:-webkit-full-screen { aspect-ratio: auto !important; width: 100vw; height: 100vh; background: #000; }
.fe-vid:fullscreen .vp-top { font-size: 28px; padding: 28px 36px 60px; } .fe-vid:fullscreen .vp-bottom { padding: 0 32px 20px; } .fe-vid:fullscreen .vp-btn { width: 48px; height: 48px; } .fe-vid:fullscreen .vp-btn svg { width: 28px; height: 28px; } .fe-vid:fullscreen .vp-time { font-size: 15px; }
@media (max-width: 767px) { .vp-bottom { padding: 0 8px 4px; } .vp-btn { width: 36px; height: 36px; } .vp-btn svg { width: 21px; height: 21px; } .vp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .vp-big svg { width: 26px; height: 26px; } .vp-top { font-size: 16px; padding: 12px 14px 30px; } .vp-vol .vp-volbar { display: none; } .vp-time { font-size: 12px; padding: 0 4px; } .vp-skip { display: none; } .vp-track { height: 3px; } }
@media (prefers-reduced-motion: reduce) { .vp *, .vp { transition: none !important; } }
/* The audio player (2026-09-23): the same language as the film player, in the page's own colour, on no background at all; the browser's pill is hidden once ours is built. */
.fe-aud audio[data-ap] { display: none; }
.ap { display: flex; align-items: center; gap: 6px; color: inherit; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ap-btn { appearance: none; border: 0; background: none; color: inherit; width: 40px; height: 40px; margin-left: -8px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; opacity: 0.88; transition: opacity .15s; } .ap-btn:hover { opacity: 1; }
.ap-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ap-btn svg .f { fill: currentColor; stroke: none; }
.ap-line { position: relative; flex: 1 1 auto; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.ap-track, .ap-buf, .ap-played { position: absolute; left: 0; top: 8px; height: 2px; border-radius: 2px; background: currentColor; transition: height .15s, top .15s; } .ap-track { right: 0; opacity: 0.28; } .ap-buf { width: 0; opacity: 0.22; } .ap-played { width: 0; }
.ap-line:hover .ap-track, .ap-line:hover .ap-buf, .ap-line:hover .ap-played, .ap.is-scrubbing .ap-track, .ap.is-scrubbing .ap-buf, .ap.is-scrubbing .ap-played { height: 4px; top: 7px; }
.ap-dot { position: absolute; top: 9px; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .15s; pointer-events: none; } .ap-line:hover .ap-dot, .ap.is-scrubbing .ap-dot, .ap-line:focus-visible .ap-dot { transform: scale(1); }
.ap-tip { position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); background: rgba(20, 19, 20, 0.85); color: #F0EBE8; padding: 5px 8px; border-radius: 4px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .15s; } .ap-line:hover .ap-tip, .ap.is-scrubbing .ap-tip { opacity: 1; }
.ap-time { font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0.9; padding: 0 0 0 8px; white-space: nowrap; } .ap-time i { font-style: normal; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .ap * { transition: none !important; } }
.vp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; } .fe-vid[data-yt][data-vp] iframe { pointer-events: none; }
.fev { width: 100%; } .fev-list { display: flex; gap: 10px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: thin; }
/* the playlist chooser at the player's top left (Christos, 2026-09-28): the list of films moves in here from under the player */
.vp-plwrap { position: absolute; left: 14px; top: 14px; z-index: 4; transition: opacity .35s ease; }
.vp-plwrap[hidden] { display: none; }
.vp.is-started.is-playing.is-idle .vp-plwrap { opacity: 0; pointer-events: none; }
:root.is-watching .vp-plwrap { left: 84px; top: 22px; } /* a locked player carries a round close at left 28, 44 px wide: the chooser stands beside it, not under it */
.vp-pl { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 0 11px; }
.vp-plnum { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; opacity: 0.85; }
.vp-plmenu { position: absolute; left: 0; top: calc(100% + 8px); width: min(330px, 74vw); max-height: min(58vh, 430px); overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 0, 0, 0.86); border-radius: 8px; padding: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.vp-plmenu[hidden] { display: none; }
.vp-plmenu .fev-list { display: block; gap: 0; overflow: visible; padding: 0; }
.vp-plmenu .fev-item { display: flex; align-items: center; gap: 10px; flex: none; width: 100%; padding: 6px; border-radius: 6px; opacity: 0.75; }
.vp-plmenu .fev-item:hover, .vp-plmenu .fev-item:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.vp-plmenu .fev-item.on { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.vp-plmenu .fev-item img { flex: 0 0 84px; width: 84px; margin: 0; border-radius: 4px; }
.vp-plmenu .fev-item.on img { outline: 0; }
.vp-plmenu .fev-item span { flex: 1 1 auto; min-width: 0; font-family: Inter, system-ui, sans-serif; font-size: 12.5px; line-height: 1.4; }
.vp-plmenu::-webkit-scrollbar { width: 4px; } .vp-plmenu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 640px) { .vp-plwrap { left: 10px; top: 10px; } .vp-plmenu { width: min(280px, 82vw); } .vp-plmenu .fev-item img { flex-basis: 64px; width: 64px; } }
.fev-item { appearance: none; flex: 0 0 168px; background: none; border: 0; padding: 0; color: var(--paper); font: inherit; font-size: 0.78em; line-height: 1.35; text-align: left; cursor: pointer; opacity: 0.6; transition: opacity .2s; } .fev-item:hover, .fev-item.on { opacity: 1; }
.fev-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; } .fev-item.on img { outline: 1px solid rgba(240, 235, 232, 0.8); outline-offset: -1px; }
.fe-aud { padding: 17px; } .fe-audio-t { margin-bottom: 10px; } .fe-aud audio { width: 100%; }
.fe-acc { padding: 17px; } .fe-acc details { border-top: 1px solid rgba(240, 235, 232, 0.25); } .fe-acc details:last-child { border-bottom: 1px solid rgba(240, 235, 232, 0.25); }
.fe-acc summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative; font-family: var(--small-head); font-style: italic; font-synthesis: style; letter-spacing: 0.14em; text-transform: uppercase; } .fe-acc summary::-webkit-details-marker { display: none; }
.fe-acc summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--body); font-style: normal; font-size: 1.5em; } .fe-acc details[open] summary::after { content: "–"; } .fe-acc .fe-text { padding: 0 0 22px; }
.fe-sec.is-light .fe-acc details { border-color: rgba(26, 26, 28, 0.25); }
.fe-ggrid, .fe-sgrid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--g, 11px); } .fe-ggrid { padding: 17px; } .fe-ggrid img, .fe-sgrid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* height:auto matters: the width/height attributes (kept so the page doesn't jump while loading) would otherwise fix each picture at its file's height */ .fe-sgrid img { aspect-ratio: var(--ar, 1/1); }
.fe-masonry { columns: var(--n); column-gap: var(--g, 0px); } .fe-masonry img { width: 100%; height: auto; margin-bottom: var(--g, 0px); break-inside: avoid; }
.fe-gslider .slider-track img, .fe-sslider .slider-track img { width: 100%; flex: 0 0 100%; object-fit: cover; } .fe-sslider .slider-track img { height: var(--vh, min(86vh, 900px)); } .fe-sslider.is-fit .slider-track img { object-fit: contain; }
/* a reel (Squarespace's gallery reel): pictures at their own proportions side by side, 85% of the section's height, the first one centred by the slider script */
.fe-sslider.is-reel .slider-track { padding: calc(var(--vh, 75vh) * 0.075) 0; gap: var(--g, 0px); } .fe-sslider.is-reel .slider-track img { width: auto; height: calc(var(--vh, 75vh) * 0.85); flex: 0 0 auto; }
/* ---- The old site's gallery finish (2026-09-22): rounded corners (--r), gaps (--g) and padding (--gp) measured on Squarespace; the strips layout fills each row edge to edge at the pictures' own proportions ---- */
.fe-sslider .slider-track img, .fe-sgrid img, .fe-masonry img { border-radius: var(--r, 0px); } .fe-sgrid, .fe-masonry { padding: var(--gp, 0px); }
.fe-strips { display: flex; flex-direction: column; gap: var(--g, 20px); width: 100%; padding: var(--gp, 0px); box-sizing: border-box; } .fe-strip { display: flex; gap: var(--g, 20px); } .fe-strip-i { flex-basis: 0; min-width: 0; } .fe-strip-i img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r, 0px); }
@media (max-width: 767px) { .fe-strip { flex-direction: column; } .fe-strip-i { flex-basis: auto; } }
/* ---- Section dividers (2026-09-22): a band straddling the bottom edge, or a stroke along a clipped shape; a background marked data-parallax is a little taller so it can drift ---- */
.fe-div { position: absolute; left: 0; right: 0; bottom: calc(var(--dt, 6px) / -2); height: var(--dt, 6px); background: var(--dc, #000); pointer-events: none; z-index: 3; } .fe-divs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.fe-bgc { position: absolute; inset: 0; overflow: hidden; view-timeline: --fe-sec block; } .fe-bg[data-parallax] { top: -14%; bottom: -14%; will-change: transform; } /* the drifting background is clipped by its own section, so it never spills over the one below */
@supports (animation-timeline: view()) { .fe-bg[data-parallax] { animation: fe-drift linear both; animation-timeline: --fe-sec; animation-range: entry 0% exit 100%; } @keyframes fe-drift { from { transform: translateY(calc(6vh + 4.7%)); } to { transform: translateY(calc(-6vh - 4.7%)); } } } /* the same drift driven by the browser's own scroll timeline where it exists (Chrome, Edge, Safari 26): frame-exact and smooth; SITE_JS steps aside then */
@media (prefers-reduced-motion: reduce) { .fe-bg[data-parallax] { animation: none; } }
/* a slideshow block fills its box on the grid, as Squarespace's does: every slide (a picture, or a link around one) is the box; "content-fit" slides show the whole picture */
.fe-b > .fe-gslider { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } .fe-gslider .slider-track { flex: 1 1 auto; min-height: 0; height: 100%; } .fe-gslider .slider-track > a { flex: 0 0 100%; scroll-snap-align: center; display: block; height: 100%; }
.fe-gslider .slider-track img { height: 100%; aspect-ratio: auto; } .fe-gslider.is-fit .slider-track img { object-fit: contain; }
.fe-banner { position: relative; } .fe-banner .fe-li { background: center / cover no-repeat; min-height: var(--bh, 70vh); flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 70px 80px; } .fe-banner .fe-li-text { max-width: 640px; text-align: center; background: rgba(26, 26, 28, 0.55); padding: 34px 40px; } .fe-banner .fe-text { padding: 0; font-size: 0.92em; }
.fe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 28px; padding-top: 50px; padding-bottom: 60px; text-align: center; } .fe-list .fe-li img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 16px; } .fe-list h3 { font-size: 1.5rem; letter-spacing: 0.08em; margin: 0 0 8px; } .fe-list .fe-text { padding: 0; font-size: 0.85em; }
.fe-b.is-bleed { grid-column: 1 / -1; } .fe-cal .cal-row:nth-child(odd) { background: var(--ink); } .fe-cal .cal-row:nth-child(even) { background: var(--ink-2); }
@media (max-width: 767px) { .fe-ggrid, .fe-sgrid { grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); } .fe-masonry { columns: 2; } .fe-banner .fe-li { padding: 50px 56px; } .fe-banner .fe-li-text { padding: 24px 20px; } }

/* Simple sections made in the Pages tab */
.al-films { background: var(--ink-2); padding: 10px 0 60px; } .al-films .wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.ps-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; } .ps-split.is-flip .ps-split-img { order: 2; } .ps-split-img { overflow: hidden; } .ps-split-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .ps-split-img.is-arch { border-radius: 50% 50% 0 0 / 33.6% 33.6% 0 0; } .ps-split-img.is-oval { border-radius: 50%; } .ps-split-img.is-oval img { aspect-ratio: 1; }
.ps-cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); align-items: start; }
@media (max-width: 767px) { .ps-split, .ps-cols { grid-template-columns: minmax(0, 1fr); } .ps-split.is-flip .ps-split-img { order: 0; } }
.ps-filmcap { text-align: center; font-size: 0.85em; font-style: italic; color: #BFB6B5; margin-top: 14px; }
.ps > .ps-in, .ps > figure { position: relative; width: 100%; max-width: 958px; margin: 0 auto; padding: 0 var(--gutter); } .ps > .ps-in.is-wide { max-width: 1240px; }
.ps h1, .ps h2, .ps h3, .ps h4 { margin: 0.3em 0; }
.ps-fig.is-wide { max-width: 1240px; } .ps-fig.is-full { max-width: none; padding: 0; } .ps-img { overflow: hidden; } .ps-img img { width: 100%; } .ps-img.is-arch { border-radius: 50% 50% 0 0 / 33.6% 33.6% 0 0; } .ps-img.is-oval { border-radius: 50%; }
.ps-fig figcaption { margin-top: 12px; text-align: center; font-style: italic; font-size: 0.85em; color: var(--ash); } .is-light .ps-fig figcaption { color: var(--stone); }
.ps-quote { margin: 0.6em auto; max-width: 760px; text-align: center; font-style: italic; font-size: 1.12em; } .ps-quote p { margin: 0 0 0.6em; } .ps-quote cite { display: block; font-style: normal; font-family: var(--small-head); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8em; color: var(--ash); }
.ps-spacer.is-small { height: 24px; } .ps-spacer.is-medium { height: 64px; } .ps-spacer.is-large { height: 130px; }

/* /pay */
.pay-page { background: var(--ink); padding: 162px var(--gutter) 200px; min-height: 70vh; font-size: 1.115rem; }
#rd-pay { text-align: center; font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif; }
.rd-pay-kicker { font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: #BFB6B5; margin: 0 0 14px; }
.rd-pay-title { margin: 0 0 6px; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.15; }
.rd-pay-date { margin: 0 0 26px; color: #BFB6B5; }
.rd-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(240,235,232,0.15); text-align: left; }
.rd-pay-row em { display: block; color: #BFB6B5; font-size: 0.95em; }
.rd-pay-other { margin: 26px 0 8px; font-size: 1.05em; } .rd-pay-other a { color: #BFB6B5; text-decoration: underline; text-underline-offset: 4px; }
#rd-pay-list[hidden], .rd-pay-other[hidden] { display: none; }
@media (max-width: 640px) { .rd-pay-row { flex-direction: column; align-items: stretch; text-align: center; } }
.rd-pay-title { font-size: 2.1rem; font-family: "Cormorant Garamond", Garamond, serif; letter-spacing: 0.02em; } .rd-pay-date { font-family: "Cormorant Garamond", Garamond, serif; }
.rd-reserve-wrap { text-align: center; }

/* Patrons' rehearsal calendar */
.reh-hero { position: relative; background: var(--ink) center / cover no-repeat; padding: 117px var(--gutter) 24px; text-align: center; }
.reh-hero::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 28, 0.57); } .reh-hero > * { position: relative; }
.reh-hero h1 { margin: 0 0 14px; } .reh-hero p { max-width: 860px; margin: 0 auto 14px; font-size: 0.92em; } .reh-hero .pg-orn { margin: 0; }
#rd-rehearsals { background: var(--ink); min-height: 30vh; font-size: 1.115rem; }
#rd-rehearsals > :not(.rd-reh) { max-width: 760px; margin: 0 auto; padding: 44px var(--gutter) 0; text-align: center; } #rd-rehearsals > .rd-reh-form { padding-bottom: 60px; border-top: 0; }
.rd-reh { padding: 5vw 5vw; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 5vw; align-items: center; background: #1a1a1c; }
.rd-reh:nth-child(even) { background: #201e1f; }
.rd-reh-img { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; overflow: hidden; background: #201E1F; justify-self: end; }
.rd-reh-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-reh-body h3 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.15; margin: 0 0 0.8rem; }
.rd-reh-body h4 { font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.6rem); margin: 0 0 0.8rem; } .rd-reh-body h4 em { font-style: italic; }
.rd-reh-desc, .rd-reh-desc p { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.6; margin: 1rem 0 2rem; }
.rd-reh-desc p + p { margin-top: -1rem; }
.rd-reh-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rd-reh-act .sqs-block-button-container { text-align: left; }
.rd-reh-go { cursor: pointer; font-family: inherit; }
.rd-reh-quiet { font: inherit; font-size: 0.95em; background: none; border: 0; color: #BFB6B5; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 0; }
.rd-reh-left { color: #BFB6B5; font-style: italic; } .rd-reh-going { color: #F0EBE8; font-style: italic; }
.rd-reh-note { color: #BFB6B5; font-style: italic; }
.rd-reh-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(240,235,232,0.15); }
.rd-reh-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-reh-row input { flex: 1 1 240px; font: inherit; font-size: 17px; background: #201E1F; color: #F0EBE8; border: 1px solid #7A7173; padding: 11px 14px; border-radius: 2px; }
.rd-reh-btn { font: inherit; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; background: #F0EBE8; color: #1A1A1C; border: 1px solid #F0EBE8; padding: 12px 22px; cursor: pointer; border-radius: 2px; }
@media (max-width: 700px) { .rd-reh { grid-template-columns: 1fr; gap: 24px; } .rd-reh-img { max-width: 220px; justify-self: start; } }
.rd-reh-go { font-family: var(--button); font-size: 1.115rem; letter-spacing: 0.2em; text-transform: uppercase; background: #F1ECE9; color: #1B1B1D; border: 0; padding: 0.86rem 1.34rem; }

/* Sign-up popup */
.su label { display: block; font-size: var(--fs, 1.17rem); font-weight: 500; margin: 18px 0 8px; }
.su .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Projects */
h4.is-plain { font-style: normal; }
.proj-hero { position: relative; background: var(--ink) center / cover no-repeat; padding: calc(77px + 34px) var(--gutter) 34px; }
.proj-hero::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 28, 0.42); }
.proj-hero-panel { position: relative; background: rgba(27, 27, 29, 0.28); text-align: center; padding: 39px 24px 22px; max-width: 1400px; margin: 0 auto; }
.proj-hero-panel h1 { margin: 0 0 14px; } .proj-hero-panel p { font-size: 0.92em; margin: 0 0 14px; } .proj-hero-panel .pg-orn { margin: 0; }
.proj { background: var(--ink-2); padding: 42px 0; } .proj.is-dark { background: var(--ink); }
.proj-grid { display: grid; grid-template-columns: minmax(0, 474fr) minmax(0, 522fr); column-gap: 8.4vw; align-items: center; padding: 0 calc(var(--gutter) + 3.75vw) 0 calc(var(--gutter) + 3.75vw); }
.proj-grid { padding-right: var(--gutter); } .proj.is-flip .proj-grid { padding-right: calc(var(--gutter) + 3.75vw); padding-left: var(--gutter); grid-template-columns: minmax(0, 522fr) minmax(0, 474fr); }
.proj.is-flip .proj-img { order: -1; }
.proj-text { text-align: center; } .proj-text h2, .proj-text h3 { margin: 0 0 18px; } .proj-text h3 { font-size: clamp(1.8rem, 1.6rem + 0.95vw, 2.9rem); letter-spacing: 0.14em; } .proj-text h4 { margin: 0 0 14px; } .proj-text p { font-size: 0.92em; margin: 0 0 0.8em; } .proj-text .btn { margin-top: 22px; }
.proj-img { display: block; aspect-ratio: 1; width: min(100%, 460px); justify-self: center; border-radius: 50%; overflow: hidden; } .proj-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; } .proj-img:hover img { opacity: 0.9; }
@media (max-width: 900px) { .proj { padding: 50px 0; } .proj-grid, .proj.is-flip .proj-grid { grid-template-columns: 1fr; row-gap: 30px; padding: 0 var(--gutter); } .proj-img, .proj.is-flip .proj-img { order: -1; width: min(100%, 320px); margin: 0 auto; } }

/* The Red Door's own page */
.rd-top { padding: 227px var(--gutter) 150px; } .rd-top h1 { font-size: clamp(2.4rem, 1.9rem + 1.3vw, 3.23rem); margin: 0 0 6px; } .rd-top h4 { margin: 0 0 4px; } .rd-top .pg-orn { margin: 0 0 10px; }
.rd-sec { position: relative; background: var(--ink) center / cover no-repeat; padding: 85px 0; } .rd-sec::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 28, var(--shade, 0.5)); }
.rd-grid { position: relative; display: grid; align-items: center; column-gap: 4.6vw; }
.rd-grid.is-setting { grid-template-columns: minmax(0, 716fr) minmax(0, 377fr); } .rd-grid.is-piano { grid-template-columns: minmax(0, 474fr) minmax(0, 619fr); } .rd-grid.is-gear { grid-template-columns: minmax(0, 619fr) minmax(0, 474fr); }
.rd-img img { width: 100%; height: 100%; object-fit: cover; } .is-setting .rd-img { aspect-ratio: 716 / 604; } .is-piano .rd-img { aspect-ratio: 619 / 683; }
.rd-text { text-align: justify; } .rd-text h3 { font-size: clamp(1.4rem, 1.387rem + 0.217vw, 1.65rem); letter-spacing: 0.14em; text-align: center; margin: 0 0 18px; } .rd-text p { font-size: 0.92em; margin: 0 0 0.8em; }
.rd-text ul { font-size: 0.8em; text-align: left; margin: 0; padding-left: 2.2em; } .rd-text li { margin: 0 0 0.7em; padding-left: 0.3em; }
.rd-reel { background: var(--ink-2); padding: 0; }
.slider { position: relative; } .slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .slider-track::-webkit-scrollbar { display: none; }
.slider-track img { flex: 0 0 auto; scroll-snap-align: center; } .rd-gear-slider .slider-track img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.rd-reel .slider-track img { height: min(74vh, 592px); width: auto; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(26, 26, 28, 0.55); color: var(--paper); font-size: 30px; line-height: 40px; cursor: pointer; padding: 0 0 4px; transition: background .2s; } .slider-btn:hover { background: rgba(26, 26, 28, 0.85); }
.slider-btn.is-prev { left: 14px; } .slider-btn.is-next { right: 14px; }
@media (max-width: 900px) { .rd-top { padding-top: 150px; } .rd-sec { padding: 56px 0; } .rd-grid.is-setting, .rd-grid.is-piano, .rd-grid.is-gear { grid-template-columns: 1fr; row-gap: 30px; } .is-piano .rd-img { order: -1; } .rd-reel .slider-track img { height: 300px; } }

/* About */
.page-about main { padding-top: 77px; }
.about-strip { display: grid; grid-template-columns: repeat(4, 1fr); } .about-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-mission { background: var(--ink); text-align: center; padding: 25px var(--gutter) 40px; } .about-mission h1, .about-directors h2 { font-size: clamp(2.4rem, 1.9rem + 1.3vw, 3.23rem); }
.about-mission p { max-width: 958px; margin: 0 auto; font-size: 0.92em; }
.about-directors { background: var(--ink-2); padding: 56px 0 50px; } .about-directors h2 { text-align: center; margin: 0 0 40px; }
.about-directors .cp-artist { grid-template-columns: minmax(0, 183fr) minmax(0, 861fr); column-gap: 4.7vw; padding: 0 3.75vw; } .about-portrait { aspect-ratio: 183 / 230; }
.about-board { background: var(--ink); padding: 55px var(--gutter) 30px; } .about-col { max-width: 958px; margin: 0 auto; text-align: justify; }
.about-col h3 { text-align: center; margin: 0 0 26px; } .about-col p + h3 { margin-top: 56px; } .about-nds { text-align: center; margin-top: 50px; } .about-nds p { font-size: 0.92em; }
@media (max-width: 900px) { .about-strip { grid-template-columns: repeat(2, 1fr); } .about-directors .cp-artist { grid-template-columns: 1fr; padding: 0; } .about-portrait { width: 183px; } }

/* Donate */
.don-hero { position: relative; background: var(--ink) center / cover no-repeat; padding: 130px var(--gutter) 60px; text-align: center; }
.don-hero::before { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 28, 0.73); }
.don-hero > * { position: relative; } .don-hero h1 { margin: 0 0 14px; } .don-hero p { margin: 0 0 36px; }
.don-patron { display: grid; grid-template-columns: minmax(0, 635fr) minmax(0, 645fr); background: var(--ink); align-items: center; }
.don-patron-img { aspect-ratio: 635 / 639; } .don-patron-img img { width: 100%; height: 100%; object-fit: cover; }
.don-patron-text { text-align: center; padding: 36px var(--gutter) 36px 4.6vw; } .don-patron-text h3 { margin: 0 0 22px; font-size: clamp(1.8rem, 1.6rem + 0.95vw, 2.9rem); letter-spacing: 0.14em; } .don-patron-text .btn { margin-top: 24px; }
.don-thanks { background: var(--ink-2); padding: 34px var(--gutter) 36px; text-align: center; } .don-thanks p { max-width: 861px; margin: 0 auto 26px; font-size: 0.92em; } .don-thanks img { max-width: 861px; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 900px) { .don-patron { grid-template-columns: 1fr; } .don-patron-img { aspect-ratio: 4 / 3; } .don-patron-text { padding: 40px var(--gutter) 50px; } }

/* Reserve popup (same checkout as before, first-party now) */
.rd-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(26, 26, 28, 0.88); display: flex; align-items: center; justify-content: center; padding: 6vh 3vw; letter-spacing: 0; }
.rd-modal-box { position: relative; width: min(560px, 100%); height: min(760px, 94vh); background: #201e1f; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.rd-modal-box iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 0.35s ease; }
.rd-modal-box iframe.rd-ready { opacity: 1; }
.rd-modal-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #BFB6B5; font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif; font-style: italic; font-size: 1.25em; letter-spacing: 0.06em; }
.rd-modal-box.rd-loaded .rd-modal-spinner { display: none; }
.rd-modal-close { position: absolute; top: 8px; right: 10px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 20px; line-height: 34px; text-align: center; cursor: pointer; padding: 0; }
body.rd-modal-open { overflow: hidden; }
.rd-co-box { --bg:#1A1A1C; --content:#201E1F; --surface:#262626; --surface-sel:#404040; --border-subtle:#404040; --border:#525252; --focus:#737373;
             --t1:#f5f5f5; --t2:#d4d4d4; --t3:#a3a3a3; --ph:#b0b0b0; --ph-pwyw:#d4d2d2; --desc:#ded7d7; --btn:#1A1A1C; --btn-hover:#010102;
             --r-checkout:8px; --r-card:8px; --r-input:4px; --r-btn:4px;
             --fs-xs:.91rem; --lh-xs:1.5; --fs:1.17rem; --lh:1.4625; --fs-sm:1.04rem; --lh-sm:1.5; --fs-lg:1.3rem; --lh-lg:1.425; --fs-h2:2.34rem; --lh-h2:1.235; }
.rd-modal-box.rd-co-box { width: min(600px, 100%); height: auto; max-height: 84vh; display: flex; flex-direction: column; background: transparent; border-radius: var(--r-checkout); box-shadow: none; padding: 0; box-sizing: border-box; overflow-y: auto; }
.rd-co { padding: 34px 45px 28px; color: var(--t1); box-shadow: 0 0 0 1px rgba(245,245,245,0.05), 0 30px 70px rgba(0,0,0,0.7), 0 0 50px rgba(0,0,0,0.45); font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 300; font-size: var(--fs); line-height: var(--lh); background: var(--content); border-radius: var(--r-checkout); box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
.rd-co * { font-family: inherit !important; box-sizing: border-box; }
.rd-co.rd-in { animation: rdfade .3s ease both; }
@keyframes rdfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rd-co .ttl { margin: 0 0 12px; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); color: var(--t1); }
.rd-co .meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--t1); margin: 0 0 6px; }
.rd-co .meta svg { width: 22px; height: 22px; flex: 0 0 auto; }
.rd-co .intro { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--t1); margin: 24px 0 16px; }
.rd-co .card { border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: var(--surface); }
.rd-co .card .step, .rd-co .card input { background: var(--surface); }
.rd-co .card .tname { font-size: var(--fs-lg); line-height: var(--lh-lg); padding-top: 8px; font-weight: 500; }
.rd-co .card.give { display: block; }
.rd-co .card.give .chips { margin: 0 0 12px; } .rd-co .card.give .chips button { flex: 1 1 auto; text-align: center; }
.rd-co .card.give .amt input { width: 100%; text-align: left; padding-left: 34px; }
.rd-co .card.give .tname { margin-bottom: 12px; }
.rd-co .card .col { width: 140px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.rd-co .step { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-input); height: 50px; background: var(--surface); }
.rd-co .step button { width: 36px; height: 100%; background: transparent; border: 0; color: var(--t1); font: inherit; font-size: 24px; cursor: pointer; border-radius: var(--r-input); }
.rd-co .step button:hover { background: var(--surface-sel); } .rd-co .step span { flex: 1; text-align: center; font-size: var(--fs-lg); }
.rd-co .amt { position: relative; }
.rd-co .amt::before { content: "$"; position: absolute; left: 12px; top: 11px; color: var(--ph-pwyw); font-size: var(--fs-lg); }
.rd-co .amt::after { content: "USD"; position: absolute; right: 12px; top: 15px; color: var(--t2); font-size: var(--fs-xs); }
.rd-co input[type=text], .rd-co input[type=email], .rd-co input[type=tel], .rd-co input[type=number] { width: 100%; background: var(--surface); color: var(--t1); border: 1px solid var(--border); padding: 12px 16px; font: inherit; font-weight: 300; font-size: var(--fs); border-radius: var(--r-input); height: 56px; transition: border-color .15s; -webkit-appearance: none; -moz-appearance: textfield; color-scheme: dark; }
.rd-co input::-webkit-outer-spin-button, .rd-co input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-co .amt input { height: 50px; padding-left: 26px; padding-right: 40px; font-size: var(--fs-lg); text-align: center; }
.rd-co .amt input::placeholder { color: var(--ph-pwyw); }
.rd-co input:focus { outline: none; border-color: var(--focus); }
.rd-co input::placeholder { color: var(--ph); }
.rd-co .rule { border-top: 1px solid var(--border-subtle); margin: 26px -45px 6px; }
.rd-co label { display: block; font-size: var(--fs); line-height: var(--lh); font-weight: 500; color: var(--t1); margin: 22px 0 10px; text-transform: none; letter-spacing: 0; }
.rd-co label i { font-style: normal; color: var(--t2); margin-left: 3px; }
.rd-co .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rd-co .addr3 { display: grid; grid-template-columns: minmax(0, 1fr) 84px 118px; gap: 10px; margin-top: 10px; } .rd-co #rd-state { text-transform: uppercase; }
.rd-co .phone { display: flex; }
.rd-co .phone .cc { flex: 0 0 auto; border: 1px solid var(--border); border-right: 0; border-radius: var(--r-input) 0 0 var(--r-input); padding: 0 14px; display: flex; align-items: center; color: var(--t1); font-size: var(--fs-sm); height: 56px; background: var(--surface); }
.rd-co .phone input { border-radius: 0 var(--r-input) var(--r-input) 0; }
.rd-co .help { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--desc); margin: 8px 0 0; }
.rd-co .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rd-co .chips button { background: var(--surface); border: 1px solid var(--border); color: var(--t2); font: inherit; font-size: var(--fs-sm); padding: 7px 16px; border-radius: 18px; cursor: pointer; transition: all .15s; }
.rd-co .chips button.on, .rd-co .chips button:hover { border-color: var(--t1); color: var(--t1); background: var(--surface-sel); }
.rd-co .check { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs); line-height: var(--lh); color: var(--t1); margin-top: 22px; cursor: pointer; }
.rd-co .check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: 0 0 auto; margin-top: 3px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); cursor: pointer; position: relative; }
.rd-co .check input:checked { background: var(--t1); border-color: var(--t1); } .rd-co .check input:checked::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rd-co .total { text-align: right; font-size: var(--fs); color: var(--t1); margin-top: 26px; }
.rd-co .go { display: block; width: 100%; margin-top: 18px; padding: 18px; background: var(--btn); color: #ffffff; border: 1px solid var(--btn); font: inherit; font-weight: 300; font-size: var(--fs-lg); cursor: pointer; border-radius: var(--r-btn); transition: background .15s; }
.rd-co .go:hover { background: var(--btn-hover); border-color: var(--btn-hover); } .rd-co .go[disabled] { opacity: 0.5; cursor: default; }
.rd-co .lock { text-align: center; color: var(--t1); font-size: var(--fs-xs); margin: 18px 0 0; }
.rd-co .lock svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.rd-co .err { color: #E8B4A6; margin-top: 12px; min-height: 22px; font-size: var(--fs-sm); }
.rd-co .sum { border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 20px; margin: 0 0 22px; display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs); }
.rd-co .sum b { font-weight: 400; font-size: var(--fs-lg); }
.rd-co #rd-pe { margin-top: 4px; min-height: 120px; }
.rd-co .back { background: none; border: 0; color: var(--t3); font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: 0; margin: 18px auto 0; display: block; text-decoration: underline; text-underline-offset: 4px; }
.rd-co .spin { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--t2); font-style: italic; font-size: var(--fs); }
.rd-modal-box.rd-co-box .rd-conf { width: 100%; height: min(720px, 80vh); border: 0; display: block; border-radius: var(--r-checkout); background: var(--content); opacity: 1 !important; }
.rd-modal-box.rd-co-box .rd-modal-close { top: 12px; right: 12px; background: var(--surface); color: var(--t1); z-index: 2; }
@media (max-width: 600px) { .rd-modal { padding: 0; align-items: flex-end; } .rd-modal-box.rd-co-box { width: 100%; max-height: 92vh; border-radius: var(--r-checkout) var(--r-checkout) 0 0; padding: 0; } .rd-co { border-radius: var(--r-checkout) var(--r-checkout) 0 0; } .rd-co { padding: 28px 22px 24px; } .rd-co .ttl { font-size: 2rem; } .rd-co .rule { margin-left: -22px; margin-right: -22px; } .rd-co .grid { grid-template-columns: 1fr; } .rd-co .card { flex-direction: column; } .rd-co .card .col { width: 100%; } .rd-co .rule { margin-left: -20px; margin-right: -20px; } }

/* ---- Vinyl record page (/rite-of-spring, /rachmaninov-record) and the note on its album page ---- */
.page-record main { padding-top: 78px; background: var(--ink); } .page-record { --gutter: 5vw; }
.vin { padding: 26px 0 90px; } .vin-rule { border: 0; border-top: 1px solid rgba(240, 235, 232, 0.75); margin: 0; }
.vin-grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 49fr); gap: 5%; align-items: start; padding: 34px 0 140px; }
.vin-main img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .vin-thumbs { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
.vin-thumb { appearance: none; border: 0; padding: 0; background: none; width: 62px; height: 62px; cursor: pointer; opacity: 0.7; transition: opacity .2s; } .vin-thumb.on, .vin-thumb:hover { opacity: 1; } .vin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vin-info { padding-top: 22px; } .vin-h { font-size: 1.55rem; letter-spacing: 0.12em; margin: 0 0 18px; } .vin-info p { margin: 0 0 0.75em; } .vin-text p { text-align: justify; }
.vin-price { margin: 18px 0 22px; font-size: 0.92em; } .vin-buy { display: flex; gap: 6px; align-items: stretch; max-width: 520px; }
.vin-qty { display: flex; align-items: center; border: 1px solid rgba(240, 235, 232, 0.8); } .vin-qty button { appearance: none; background: none; border: 0; color: var(--paper); font: inherit; font-size: 1.3rem; width: 46px; height: 100%; cursor: pointer; } .vin-qty button:hover { opacity: 0.6; } .vin-n { min-width: 34px; text-align: center; font-size: 0.85em; }
.vin-go { flex: 1; padding: 0.95rem 1.2rem; } .vin-go[disabled] { opacity: 0.6; cursor: default; } .vin-err { color: #E8B4A6; font-size: 0.85em; min-height: 1.4em; margin-top: 8px; } .vin-ship, .vin-listen { font-size: 0.8em; color: var(--mute-2, #BFB6B5); margin-top: 6px; } .vin-listen a { color: inherit; }
.vin-note { background: var(--ink-2); text-align: center; padding: 10px 0 70px; } .vin-note p { margin: 0 0 22px; }
.vin-note-card { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--paper); transition: opacity .25s; } .vin-note-card:hover { opacity: 0.75; } .vin-note-card img { width: 300px; max-width: 70vw; height: auto; display: block; margin-bottom: 10px; } .vin-note-t { font-size: 1.05em; } .vin-note-p { font-size: 0.9em; color: #BFB6B5; }
@media (max-width: 900px) { .vin-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 0 60px; } .vin-info { padding-top: 0; } .vin-text p { text-align: left; } }
@media (max-width: 767px) { .fe-imgbox.is-oval, .fe-imgbox.is-round { width: min(100cqw, 100cqh, 270px); height: min(100cqw, 100cqh, 270px); } }

/* The Autumn Salon */
@font-face { font-family: "Garamond Premier"; src: url("/assets/fonts/garamond-premier-pro-light-display.otf") format("opentype"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond Premier"; src: url("/assets/fonts/garamond-premier-pro-italic-display.otf") format("opentype"); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Rivanna"; src: url("/assets/fonts/rivanna-nf-7yp4.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Goudy Initials"; src: url("/assets/fonts/goudy-ini.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --ink: #0E0304; --ink-2: #1F0708; --stone: #8A7A7C; --ash: #CFC6C6; --paper: #FFFFFF; --wine: #5C0002; --body: "Garamond Premier", "Cormorant Garamond", Georgia, serif; --head: "Rivanna", "Garamond Premier", Georgia, serif; --small-head: "Salon", "Garamond Premier", Georgia, serif; --button: "Salon", "Garamond Premier", Georgia, serif; }
/* The Autumn Salon, site-wide: the look of theautumnsalon.com (measured at 1440 px, 2026-09-21). Text in Garamond Premier Light at 22 px / 1.8 with no tracking; titles in Rivanna capitals;
   small headings and buttons in P22 Salon Inner; drop capitals in Goudy Initials. */
body { font-weight: 300; letter-spacing: 0; line-height: 1.8; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.385rem); }
em, i, cite { font-family: "Garamond Premier", "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; } h1 em, h2 em, h3 em, h4 em, h5 em, .pf-title em { font-family: inherit; font-weight: inherit; font-synthesis: style; } /* emphasis inside a heading keeps the heading's face, and slants: Rivanna and Swaak have no italic file, so the oblique is synthesised as the old site synthesised it. Without this the body's font-synthesis:none is inherited and the em draws upright (found 2026-09-28 on musical-harvest, evening-intermezzi and salon-automne) (the salons page's "Past Salons" and its dates are h4s in the Salon face wrapped in em; Christos, 2026-09-23) */
/* An audio block's title and its composer, as the old Squarespace player set them: the work in
   Trajan Sans 15.5/18.2 and the name on its own line beneath in the italic at half strength
   (measured on currents-of-creativity and winter-schubertiade, 2026-09-28). The markup is shared
   with Musaics, so the stack is done here in CSS rather than by changing the element. */
/* A first section whose picture runs to the top of the window, behind the mark and the burger
   (Christos, 2026-09-24). The old site's header is position:absolute with nothing inside it painting a
   ground, so what shows behind the nav is whatever the page puts there. Measured over all 38 event pages:
   on 36 of them that is the body's own near-black and our opaque bar reproduces it exactly (the top 80 px
   differ by 1.5, which is the anti-aliasing of the nav's own glyphs); on **two** it is the section's
   picture -- /of-sky-sea and /currents-of-creativity. So this is a per-page flag, not a site-wide rule:
   floating the header everywhere made the band worse on average (mean 6.2 -> 15.5) because our first
   section is already 80 px shorter to compensate for a bar that takes space. */
.page-bleed .site-header { background: transparent; box-shadow: none; }
.page-bleed .fe-sec.is-first > .fe-bg, .page-bleed .fe-sec.is-first > .fe-bgc, .page-bleed .fe-sec.is-first > .fe-ov { top: -80px; }
@media (max-width: 767px) { .page-bleed .fe-sec.is-first > .fe-bg, .page-bleed .fe-sec.is-first > .fe-bgc, .page-bleed .fe-sec.is-first > .fe-ov { top: -62px; } }
/* Squarespace's "stacked" gallery: one picture a row at the block's full width, each at its own proportions
   and never cropped. Ours drew the four on /salons/sacred-voices as 461x308 thumbnails three across from the
   475 px copies, where the old site draws them 1440 wide at 810 and 1080 tall. One block on the whole site. */
.fe-ggrid.is-stacked, .pb-grid.is-stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fe-ggrid.is-stacked img, .pb-grid.is-stacked img, .fe-ggrid.is-stacked figure > picture > img, .pb-grid.is-stacked figure > picture > img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
/* The old site's own per-page code injection, which the conversion could not carry (measured 2026-09-24).
   Eleven pages painted the whole page neutral black and their footer band #1B1B1B; two painted the footer #19141E. */
body.pg-chorale, body.pg-classical-jazz, body.pg-nocturne, body.pg-not-allowed, body.pg-not-allowed-gallery, body.pg-owczarek, body.pg-portrait-of-an-artist, body.pg-reflections, body.pg-sarabande, body.pg-steps, body.pg-verso-la-luce { background: #0E0E0E; }
body.pg-chorale .site-footer.is-links, body.pg-classical-jazz .site-footer.is-links, body.pg-nocturne .site-footer.is-links, body.pg-not-allowed .site-footer.is-links, body.pg-not-allowed-gallery .site-footer.is-links, body.pg-owczarek .site-footer.is-links, body.pg-portrait-of-an-artist .site-footer.is-links, body.pg-reflections .site-footer.is-links, body.pg-sarabande .site-footer.is-links, body.pg-steps .site-footer.is-links, body.pg-verso-la-luce .site-footer.is-links { background: #1B1B1B; }
body.pg-of-sky-sea .site-footer.is-links, body.pg-currents-of-creativity .site-footer.is-links { background: #19141E; }
/* The programme heading on a black section: the old pages set it in Swaak at 60px, not the Salon face at half that. */
.fe-sec-program.th-black .cp-program-card h4 { font-family: "Swaak", var(--head); font-size: 60px; font-weight: 500; letter-spacing: 0.6px; line-height: 1.316; margin-bottom: 40px; }
/* The zigzag on /prisms-of-sound is dashed on the old site; the stroke colour is what identifies it, a converted page carrying no slug in its divider markup. */
.page-converted .fe-divs path[stroke="rgb(148, 96, 96)"] { stroke-dasharray: 15px 21px; }
.fe-audio-t { font-family: var(--trajan); font-size: 15.5px; font-weight: 400; line-height: 18.2px; }
.fe-audio-t em { display: block; font-family: inherit; font-size: 15.6px; font-weight: 300; font-style: italic; font-synthesis: style; line-height: 21.84px; opacity: 0.5; }
h1, h2 { font-family: var(--head); font-weight: 300; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.28; } h3, h4, h5, h6 { font-family: var(--small-head); font-weight: 300; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }
h1 { font-size: clamp(2.5rem, 1.7rem + 3.1vw, 4.06rem); } h2 { font-size: clamp(2.05rem, 1.5rem + 2.1vw, 3.125rem); } h3, .fe-text h3 { font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.32; letter-spacing: 0.01em; } h4 { font-size: clamp(1.4rem, 1.15rem + 0.95vw, 1.875rem); line-height: 1.34; letter-spacing: 0.057em; }
.dropcap { font-family: "Goudy Initials", var(--body); font-weight: 400; } .page-writing .dropcap { color: #610000; } /* the initials of the blog entries in dark red, not black (Christos, 2026-09-23); nowhere else */
/* header: the menu button on the left, the mark in the middle, nothing else; the menu covers the window (Writings, Salons, Films, Vinyl in Rivanna, Donate beneath) */
.site-header { position: relative; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; /* above the sections (dividers give them z-indexes up to 29): the menu lives inside the header and must cover the page */ align-items: center; background: #240001; min-height: 80px; padding: 10px 14px; gap: 0; box-shadow: 0 12px 113px rgba(0, 0, 0, 0.15); } .site-header::after { display: none; } /* the old header: #240001, a soft shadow (black at 15%, 12 px down, 113 px blur) */
.site-logo { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 31; } .site-logo img { width: 68px; height: 60px; object-fit: contain; }
.site-burger { display: block; grid-column: 1; grid-row: 1; justify-self: start; margin: 0; width: 35px; height: 39px; } .site-burger span { width: 35px; height: 2px; margin: 0; position: absolute; left: 0; } .site-burger span:first-child { top: 14px; } .site-burger span:last-child { top: 25px; } .site-give { display: none; } /* the old burger: two 35 × 2 lines, 11 px apart */
body.nav-open .site-burger span:first-child { transform: translateY(5.5px) rotate(45deg); } body.nav-open .site-burger span:last-child { transform: translateY(-5.5px) rotate(-45deg); } body.nav-open .site-header { box-shadow: none; }
.site-nav { position: fixed; inset: 0; z-index: 30; background: #380001 url("/assets/img/menu-flower.jpg") center / cover; flex-direction: column; justify-content: center; gap: 45px; padding: 80px 0 154px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; } /* the old menu: the flower drawing over wine at full strength, the links 105 px apart (60 px lines) centred above a 210 px band that holds the Donate button */
body.nav-open .site-nav { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; }
.site-nav a:not(.btn) { font-family: var(--head); font-size: 60px; font-weight: 400; letter-spacing: 0.018em; line-height: 60px; padding: 0; text-transform: uppercase; } @media (max-width: 600px) { .site-nav a:not(.btn) { font-size: 40px; line-height: 40px; } }
.site-nav .site-give-m { display: inline-block; position: absolute; left: 50%; top: calc(100% - 152px); transform: translateX(-50%); margin: 0; background: none; border: 2px solid rgba(255, 255, 255, 0.7); padding: 16px 20px; min-width: 210px; font-size: 30px; line-height: 30px; letter-spacing: 0.6px; } .site-nav .site-give-m:hover { background: #fff; color: var(--ink); }
/* buttons: filled wine, P22 Salon capitals */
.btn { font-family: var(--button); font-weight: 300; font-size: 1.4375rem; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } .btn-light, .btn-lg, .fe-sub .btn { background: #290000; color: #fff; padding: 14px 36px; border: 0; transition: background .3s ease; } .btn-light:hover, .fe-sub .btn:hover { opacity: 0.7; }
.btn-light, .btn-lg { transition: opacity 0.3s ease; } .btn-light:hover, .btn-lg:hover, .fe-btn .btn:hover, .pb-button .btn:hover, .fe-li .btn:hover { opacity: 0.7; } /* under the pointer a dark red button simply fades to 70 %, its colour unchanged, wherever it is on the site (Christos, 2026-09-23: not a brighter red); the white buttons of bright sections keep their own hover below */
.th-bright .btn-light, .th-bright-inverse .btn-light { background: #fff; color: #000; } .th-bright .btn-light:hover, .th-bright-inverse .btn-light:hover { background: #DFE0E1; } /* the old site's "bright" sections had a white button */ .th-black .fe-text a { color: #DFE0E1; }
.page-converted .fe-btn { padding: 0; } /* blocks on Squarespace's fluid grid have no padding of their own */
.fe-sub .btn { background: #480000; border: 1px solid #000; padding: 0 21px; transition: opacity 0.3s ease; } .fe-sub .btn:hover { opacity: 0.7; }
/* footer: one row of four */
.site-footer.is-links { display: flex; align-items: center; background: #1A0202; padding: 0 var(--gutter, 3.5vw); min-height: 9vh; text-align: center; box-shadow: 0 0 26px 3px rgba(0, 0, 0, 0.2); } .site-footer.is-links nav { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: 100%; } /* the old site's footer: one fluid section 9vh tall, four h4 links on its grid, nothing else; hidden on phones there */
.site-footer.is-links nav a { font-family: var(--small-head); font-size: 30px; letter-spacing: 1.7px; line-height: 1.34; text-transform: uppercase; /* all four in capitals (Christos, 2026-09-22; the old site had only FILMS so) */ text-decoration: none; color: #DFE0E1; transition: opacity .3s; } .site-footer.is-links nav a:hover, .site-footer.is-links nav a.is-current, .site-footer.is-links nav a.is-here { opacity: 0.6; }
/* pages laid out on Squarespace's grid: its gutter (50 px at 1440), no room kept for an overlaid header */
.page-converted { --gutter: 3.5vw; } .page-converted .fe-sec, .page-converted .fe-sec.fe-sec-gallery.is-first, .page-converted .fe-sec.fe-sec-list.is-first { padding: 0; } .page-converted .fe-sec.is-first { min-height: calc(var(--minh, 0vh) - 80px); } /* the old site zeroed every section's padding; its first section held the header's 80 px inside its minimum height */
.fe-text p { margin: 0 0 1em; }
/* Large body text as the old site sized it: .sqsrte-large is calc((large-text-size-value - 1) * .7vw + 1rem) there,
   and its root is 20px above Squarespace's 991px breakpoint and 16px below, which comes to 0.315vw + 20px and
   0.315vw + 16px. Measured on the old pages: 24.536px at 1440, 23.2256 at 1024, 18.205 at 700 and 22.4 on a phone,
   where every paragraph is forced to one size. Ours was a flat 1.25em, 12.9% too big at 1440. (2026-09-24) */
.fe-text p.t-large { font-size: calc(0.315vw + 16px); line-height: 1.8; }
@media (min-width: 992px) { .fe-text p.t-large { font-size: calc(0.315vw + 20px); } }
/* the old posts' hand-written captions (a "blogquote" around a styled heading): a small white line on a wine band pulled up under the picture, or plain black, or a name in wine */
.pb-text .fe-text p.t-cap { font-family: var(--small-head); font-weight: 200; font-size: 15.5px; letter-spacing: 0.01em; line-height: 1.316; text-transform: uppercase; text-align: center; color: #fff; background: #510000; padding: 10px 0 0; margin: -35px 0 0; } .pb-text .fe-text p.t-cap.is-plain { color: #000; background: none; font-size: 17px; padding: 0; margin-top: -15px; } .pb-text .fe-text p.t-cap.is-name { color: #590000; background: none; font-family: var(--head); font-size: 34px; text-transform: none; padding: 0; margin: 0 0 0.5em; } .fe-text a { color: inherit; text-decoration: none; } .fe-text a:hover { text-decoration: underline; }
.fe-sub { padding: 40px 0 0; } .fe-sub h2 { margin: 25px 50px 20px; padding-top: 10px; line-height: 70px; } .fe-sub p { margin: 20px 50px 0; } .fe-signup-row { margin-top: 20px; gap: 10px; padding: 0 5px; } .fe-sub input[type="email"] { height: 66px; padding: 20px; margin: 10px 0; font-size: 22.16px; line-height: 24px; } .fe-sub .btn { height: 68px; margin: 9px 0 11px; padding: 21px; line-height: 24px; } .fe-signup-msg { min-height: 22px; margin: 37px 0 0; font-size: 12px; line-height: 22px; } /* the old site's newsletter block: header 40 px down and 50 px in, the row 20 px below it, the field and button 10 px apart, a 22 px footnote line */
/* the banner slideshow: a dark veil of a card in the middle, the title in Rivanna, a translucent wine button, thin arrows */
.fe-banner .fe-li { padding: 40px 9vw; } .fe-banner .fe-li-text { width: 100%; max-width: 720px; background: rgba(10, 0, 0, 0.3); padding: 20px 30px 30px; text-shadow: 1px 0 20px #000; } .fe-banner .fe-li-text h3 { text-shadow: 2px 1px 10px #000; } .fe-banner .fe-text p { text-shadow: 2px 1px 20px #000; }
.fe-banner .fe-li-text h3 { font-family: var(--head); font-size: 65px; font-weight: 300; letter-spacing: 1.7px; line-height: 1.28; text-transform: none; margin: 0 0 20px; } .fe-banner .fe-text { margin: 0 0 27px; } .fe-banner .fe-text p { margin: 0; }
.fe-banner .btn { background: rgba(59, 0, 0, 0.5); padding: 13px 35px; } .fe-banner .btn:hover { opacity: 0.7; } /* the banner buttons fade like the rest (Christos, 2026-09-23) */
.fe-banner .slider-btn { width: 60px; height: 60px; background: none; font-size: 0; left: 43px; } .fe-banner .slider-btn.is-next { left: auto; right: 43px; } .fe-banner .slider-btn::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1px solid #fff; } .fe-banner .slider-btn::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; border-top: 1px solid #fff; border-left: 1px solid #fff; left: 12px; transform: translateY(-50%) rotate(-45deg); transform-origin: center; margin-top: 0; } .fe-banner .slider-btn.is-next::after { left: auto; right: 12px; transform: translateY(-50%) rotate(135deg); }
.page-calendar main { padding-top: 0; } .plain { padding-top: 110px; }
/* page to page as on musaics.org (Christos, 2026-09-23): the whole page, header included, fades out to a colour over 0.7 s, then the next fades in from it over 1.6 s; the colour is the old site's ground mid-load (#0F0305, sampled from his screenshot; B.fade sets the transition's ground in brandCss), and the click veil is that colour too */
/* Exactly musaics.org's loading (Christos, 2026-09-23: "copy exactly how the musaics site is built to handle the loading"): the SITE_CSS rules stand as they are (the veil at 35 % on the click, the old page out over 0.7 s, the new one in over 1.6 s after it, the 2 s fade-in on a first visit); only the colour is the Salon's */
body::after { background: #0F0305; }
/* except on the black pages: the ground of the fade and the click veil are black there. :root.is-black::view-transition is (0,2,1) against the plain rule's (0,0,1), so it wins although brandCss appends that one after this whole block.
   Coming into the films page or a film page from anywhere is black, and so is one film page to the next; leaving a film page for a wine page still fades through #0F0305, because the arriving page's ground is the one that runs. */
:root.is-row { overscroll-behavior-x: none; } /* the films page is scrolled sideways, so the window must not read a sideways swipe as back or forward; a film's own page keeps the gesture */
:root.is-black::view-transition { background: #000; }
:root.is-black body::after { background: #000; }
/* phones, as the old site had them (measured at 375 px): 6vw gutters, a 62 px header with a 55 × 48 mark, body text 17.35 px but every paragraph 22.4 px (its custom CSS), no newsletter title, no footer */
@media (max-width: 767px) { .page-converted { --gutter: 6vw; } .site-header { min-height: 62px; padding: 8px 4px; } .site-logo img { width: 55px; height: 48px; } .site-burger { width: 47px; height: 37px; } .site-burger span { left: 6px; } .site-burger span:first-child { top: 13px; } .site-burger span:last-child { top: 24px; } .page-converted .fe-sec.is-first { min-height: calc(var(--minh, 0vh) - 62px); } }
@media (max-width: 640px) { body { font-size: 17.35px; } p { font-size: 22.4px; } .fe-text p.t-large { font-size: 22.4px; } .fe-sub h2 { display: none; } .fe-sub p { margin: 16px 24px 0; } }
@media (max-width: 767px) { .page-converted .btn-light, .page-converted .btn-lg { padding: 11.2px 28.8px; } .site-header { padding: 7px 4px; } } /* Squarespace shrinks its medium buttons to 0.8 on phones */
@media (max-width: 768px) { .site-footer.is-links { display: none; } .fe-banner .fe-li { padding: 30px 22px; } .fe-banner .slider-btn { display: none; } .fe-sub input[type="email"] { flex: 1 1 100%; } .dropcap { font-size: 3.3em; } }

body { overflow-wrap: break-word; } /* the old site's own reset: Squarespace sets overflow-wrap:break-word on body, so a word too long for its line breaks instead of running off the page. Without it seven h3 headings on five writing pages (an nbsp-joined pair, a solidus, plain long words) pushed the page sideways by up to 90 px on a phone (2026-09-28) */
/* The old site's own fonts, beyond the four already declared: Swaak for the salon pages' headings, Trajan Sans for labels and captions, Bolton and Tango for drop capitals, Saveur Sans and Bohemian Border where the old pages used them. */
@font-face { font-family: "Swaak"; src: url("/assets/fonts/swaak-centennial-mn-regular.otf") format("opentype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Trajan Sans"; src: url("/assets/fonts/trajansanspro-light.otf") format("opentype"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Bolton"; src: url("/assets/fonts/bdrenais.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Tango"; src: url("/assets/fonts/tango-2ox8.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Saveur"; src: url("/assets/fonts/saveur-sans-regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Bohemian"; src: url("/assets/fonts/bohemianborder.otf") format("opentype"); font-display: swap; }
/* Open Sans, the descriptions on the films pages (Christos, 2026-09-22: "lets use open sans"). A variable font, so one file carries every weight. */
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-variable-font-wdth-wght.ttf") format("truetype-variations"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-italic-variable-font-wdth-wght.ttf") format("truetype-variations"); font-weight: 300 800; font-style: italic; font-display: swap; }
:root { --trajan: "Trajan Sans", "Salon", "Cinzel", serif; --wine: #5C0002; --films-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* headings as the old site set them everywhere: h1 Rivanna 65, h2 Rivanna 50 (1.7 px tracking), h3 Swaak 60, h4 Salon 30 */
h1 { font-family: var(--head); font-size: 65px; letter-spacing: 0.06em; } h2 { font-family: var(--head); font-size: 50px; letter-spacing: 1.7px; line-height: 1.28; }
h3, .fe-text h3 { font-family: "Swaak", var(--head); font-weight: 500; font-size: 60px; letter-spacing: 0.01em; line-height: 1.316; text-transform: uppercase; } h4 { font-family: var(--small-head); font-size: 30px; letter-spacing: 1.7px; line-height: 1.34; font-style: normal; margin: 0; }
:where(.page-converted) p { text-align: justify; } /* the old site justified every paragraph; an alignment class or a themed section still wins */
.th-dark-bold .fe-text p, .th-dark-bold p { font-size: 25px; font-weight: 400; text-align: center; }
.fe-sec-artists .cp-artist-text p { font-size: 0.92em; text-align: justify; }
/* The past salons (2026-09-23): the bands as the old page laid them out, measured at 1440 (the picture 502 × 423 in an arch at the page gutter, the words 56 px to its right, the title 50 px down, 522 px a band, two grounds alternating; on a phone the picture 330 × 339 above the words), then the tiles edge to edge on the section's black, the title in Swaak with the month in the Salon face under it */
.sl-band { display: grid; grid-template-columns: minmax(0, 502fr) minmax(0, 781fr); column-gap: 56px; align-items: start; padding: 50px var(--gutter) 49px; background: rgb(28, 3, 3); } .sl-band:nth-child(even) { background: rgb(34, 13, 14); }
.sl-pic { aspect-ratio: 502 / 423; overflow: hidden; } .sl-pic.is-arch { border-radius: 50% 50% 0 0 / 33.6% 33.6% 0 0; } .sl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-text { padding-top: 50px; } .sl-text h3 { margin: 0 0 21px; } .sl-text h4 { margin: 0 0 13px; text-transform: uppercase; } .sl-text .btn { margin-top: 16px; }
.sl-head { font-family: var(--small-head); font-size: 30px; font-weight: 400; letter-spacing: 1.7px; line-height: 1.34; text-transform: uppercase; text-align: center; margin: 0; padding: 14px var(--gutter) 15px; background: rgb(26, 2, 2); } /* the old page's "Past Salons" heading section, measured: an h4 in the Salon face in a 69 px band */
/* The slideshow of chosen salons as the Venetian page's reel (Christos, 2026-09-23: "more padding, black background, rounded edges, with the text and button still inside over the image"; the reel measured at 1440: a black band 88vh tall, pictures 85 % of it high with 10 px corners, 42 px apart, 7.5 % of the height above and below, the first centred with the next peeking): each salon a 3:2 card with its picture cropped to fit at its focus point, the writings banner's translucent panel over it with the title in Swaak, the month • place in the Salon face, the words in Garamond at the banner's 25 px, a button */
.sl-reel { --vh: 88vh; --g: 42px; --r: 10px; background: #000; padding-top: var(--g); } /* the space above the slideshow matches the space below it (Christos, 2026-09-23): the track pads 7.5 % of the reel above and below, but under the reel the grid adds its own --g before the first tile, so the reel carries that same --g at its top */ .sl-reel .slider-track { padding: calc(var(--vh) * 0.075) 0; gap: var(--g); align-items: center; }
.sl-reel .fe-li { position: relative; flex: 0 0 auto; height: calc(var(--vh) * 0.85); aspect-ratio: 3 / 2; width: auto; max-width: 93vw; border-radius: var(--r); overflow: hidden; background-size: cover; background-repeat: no-repeat; background-color: #1A0202; display: flex; align-items: center; justify-content: center; padding: 30px; scroll-snap-align: center; }
.sl-reel .fe-li::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.6; pointer-events: none; transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1); } .sl-reel .fe-li.is-centre::after { opacity: 0; } .sl-reel .slider-track.is-jump .fe-li::after { transition: none; } /* the slides away from the centre under a black veil at 60 % (Christos, 2026-09-23: "the images not centered on the slider are dimmer", then "make the sides a little darker": 50 % at first); the slider script marks the centred slide (is-centre) as a glide begins, so the veil lifts and falls with the motion (the same 1.2 s and easing as the glide); is-jump = the mark moved without a fade, when a copy is swapped for its slide */
.sl-reel .fe-li-text { width: 100%; max-width: 640px; background: rgba(10, 0, 0, 0.48); padding: 18px 28px 26px; text-align: center; text-shadow: 1px 0 20px #000; }
.sl-reel .fe-li-text h3 { font-family: "Swaak", var(--head); font-weight: 500; font-size: 48px; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; margin: 0 0 9px; text-shadow: 2px 1px 10px #000; } .sl-reel .fe-li-text h4 { font-family: var(--small-head); font-size: 28px; letter-spacing: 1.7px; line-height: 1.34; text-transform: uppercase; margin: 0 0 15px; text-shadow: 2px 1px 10px #000; } /* a little above the tiles' sizes (Swaak 48 over the tiles' 44, Salon 28 over 26; Christos, 2026-09-23: "closer to the size of the text on the grid images", then "just a little larger") */
.sl-reel .fe-text { margin: 0 0 22px; } .sl-reel .fe-text p { margin: 0; font-size: 21px; line-height: 1.7; text-align: center; text-shadow: 2px 1px 20px #000; } .sl-reel .btn { background: rgba(59, 0, 0, 0.5); padding: 11px 28px; font-size: 19px; letter-spacing: 1.9px; }
/* the grid of past salons in the reel's own language (Christos, 2026-09-22): the same 10 px corners and black spacing, still three across; it was edge to edge with square corners until now. */
.sl-grid, .page-converted .sl-grid { --r: 10px; --g: 42px; gap: var(--g); padding: var(--g) var(--gutter); background: #000; }
.sl-tile { border-radius: var(--r); }
/* dark at rest, brighter under the pointer: the reel's veil the other way round (Christos: "have the ones that are not selected dark, and when you hover over, they become brighter"). The title stays legible in both states, so the grid can be read without pointing at anything. */
.sl-tile::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.55; pointer-events: none; transition: opacity .45s ease; }
.sl-tile:hover::after, .sl-tile:focus-visible::after { opacity: 0.12; }
.sl-tile .pf-text { flex-direction: column; opacity: 1; background: none; z-index: 1; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.6); } .pf-title.sl-title { font-family: "Swaak", var(--head); font-style: normal; font-weight: 500; font-size: 44px; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; } .sl-when { display: block; margin-top: 14px; font-family: var(--small-head); font-size: 26px; letter-spacing: 1.7px; line-height: 1.34; text-transform: uppercase; } /* larger words on the tiles (Christos, 2026-09-23) */
@media (max-width: 767px) { .sl-grid, .page-converted .sl-grid { --g: 12px; padding: 12px 6vw; } .sl-band { grid-template-columns: minmax(0, 1fr); row-gap: 39px; padding: 45px 6vw; } .sl-pic { aspect-ratio: 330 / 339; } .sl-text { padding-top: 0; } .pf-title.sl-title { font-size: 32px; } .sl-when { font-size: 20px; } .sl-reel { padding-top: 12px; } .sl-reel .slider-track { padding: 24px 0; gap: 16px; } .sl-reel .fe-li { height: auto; aspect-ratio: auto; width: 92vw; min-height: 460px; padding: 24px 14px; } .sl-reel .fe-li-text { padding: 16px 14px 20px; } .sl-reel .fe-li-text h3 { font-size: 34px; } .sl-reel .fe-li-text h4 { font-size: 21px; } .sl-reel .fe-text p { font-size: 18px; } .sl-reel .btn { font-size: 17px; padding: 9px 23px; letter-spacing: 1.7px; } .sl-reel .slider-btn { display: none; } }
.pg-orn { font-family: "Bohemian"; font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: 0; padding: 30px 0 79px; } .pg-orn[data-g="m"] { padding: 49px 0 46px; } .pg + .pg-orn { padding-bottom: 43px; } .pg + .pg-orn[data-g="m"] { padding-bottom: 10px; } /* the ornaments as the old site drew them (Christos, 2026-09-23, from a screenshot of theautumnsalon.com/evening-impromptu): 38 px glyphs with about 46 px clear above and 58 px below, as much as a paragraph's spacing. The Bohemian glyphs' ink reaches far outside the line box (at 38 px "e" 7 px above and 43 below, "m" 26 above and 10 below, from canvas measureText), so the padding carries both that overflow and the clear space; the closing ornament keeps only the overflow below */
/* the body here is 300, and the browser's own bolder keyword resolves to 400 from a 300 parent, so a bold run
   came out at the same weight as the text around it; the old site sets 700 outright (2026-09-23) */
.page-converted strong, .page-converted b, .page-writing strong, .page-writing b { font-weight: 700; }
/* Squarespace gives a primary button its colour from the section's theme, where ours had one wine for all;
   measured across every in-content button on the 38 salon pages, only these four themes differ (2026-09-23) */
.page-converted .th-black .btn-light { background: #fff; color: #000; }
.page-converted .th-white .btn-light { background: #fff; color: #1E0000; }
.page-converted .th-white-bold .btn-light { background: #490002; color: #fff; }
.page-converted .th-light .btn-light { background: transparent; color: #fff; border: 1px solid #fff; }
.cp-program-card { border-radius: 0; background: var(--pcard, rgba(0, 0, 0, 0.12)); } .fe-sec-program .cp-program.is-over .cp-program-card { background: var(--pcard, rgba(0, 0, 0, 0.12)); } /* the panel behind the programme is a slightly transparent black, as on the old site (its panel measured 12 % darker than the page), over a picture too */ /* the Program section (2026-09-23): the old site's Bohemian Border ornaments, square corners as everywhere on this site */ /* the Musicians block (2026-09-23): the concert page's size and justification, whatever the section's theme says of paragraphs */
.tc-white { color: #fff; } .tc-black { color: #000; } .tc-accent { color: #5C0002; } /* the old site's text colours: white, black, accent */ /* Squarespace's "dark bold" sections: larger, centred text (the writings banner, some salon pages) */
.fe-text p.t-small, .pb-text p.t-small { font-family: "Bohemian"; font-size: 50px; line-height: 1; margin: 50px 0 5px; letter-spacing: 0; } /* the ornaments between a page's sections were set as small runs in the Bohemian Border font */
.dropcap, .pb-text .dropcap { float: left; font-family: "Bolton", "Goudy Initials", var(--body); font-size: 360%; line-height: 108%; margin: -10px 5px 0 0; padding: 0; font-weight: 400; } .dropcap.is-tango { font-family: "Tango"; font-size: 440%; line-height: 95%; width: 0.9em; margin: 0 -20px -20px 0; } .dropcap.is-bolton { color: #610000; font-size: 380%; margin-top: -13px; }
/* the writings: the category bar in Trajan Sans capitals, then three across with hairlines, each 480 wide with 65 px of room, a 3:4 picture, the title in Garamond 30 on wine, the category under it */
/* ---- The giving popup (the same flow as Musaics) in the Salon's colours and type (Christos, 2026-09-22) ---- */
.rd-co-box { --bg: #0E0304; --content: #1A0202; --surface: #240001; --surface-sel: #380001; --border-subtle: #3a1a1a; --border: #5a2a2a; --focus: #DFE0E1; --t1: #DFE0E1; --t2: #cfc6c6; --t3: #a89c9c; --ph: #9a8d8d; --ph-pwyw: #cfc6c6; --desc: #cfc6c6; --btn: #290000; --btn-hover: #290000; --r-checkout: 0px; --r-card: 0px; --r-input: 0px; --r-btn: 0px; }
.rd-co { font-family: var(--body) !important; font-weight: 400; } .rd-co .go { transition: opacity 0.3s ease; } .rd-co .go:hover { opacity: 0.7; } .rd-co .ttl { font-family: var(--head) !important; font-weight: 400; letter-spacing: 0.02em; } .rd-modal { background: rgba(14, 3, 4, 0.9); }
.fe-writings { grid-column: 1 / -1; } .fe-sub h2, .fe-sub p { text-align: center; } /* the newsletter block's words are centred (Christos, 2026-09-22); the page-wide justify rule had left its one line at the left */ .wr-grid { transition: opacity 1.1s ease; } .fe-writings.is-loading .wr-grid { opacity: 0; transition-duration: 0.6s; } .wr-item { transition: background-color 0.4s ease; } .wr-item:hover { background-color: #fff8f8; } /* the old site: a faint red on the item under the pointer, over 0.4 s */ .wr-cats { padding: 10px 0 0; } .wr-cats ul { list-style: none; margin: 0; padding: 0; text-align: center; font-size: 0; } .wr-cats li { display: inline-block; vertical-align: top; margin: 8px 6px 6px 0; } .wr-cats li:last-child { margin-right: 0; } .wr-cats-btn { display: none; } /* the old site's archive block: inline links centred in one row */
.wr-cats a { display: block; font-family: var(--trajan); font-size: 18px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; color: #333; text-decoration: none; padding: 4px 30px 16px; line-height: 1.6; } .wr-cats a:hover, .wr-cats a.on { color: #610000; }
.wr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0.5px solid rgba(0, 0, 0, 0.1); border-left: 0.5px solid rgba(0, 0, 0, 0.1); }
.wr-item { display: block; padding: 65px; text-align: center; color: inherit; text-decoration: none; border-right: 0.5px solid rgba(0, 0, 0, 0.1); border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); background: #fff; }
.wr-thumb { aspect-ratio: 3 / 4; overflow: hidden; margin: 0 0 15px; background: #f2f2f2; } .wr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wr-title { font-family: var(--body); font-size: 30px; font-weight: 300; letter-spacing: 1px; line-height: 1.2; color: var(--wine); padding: 21px 0 25px; margin: 0 0 2px; } /* 21 px above the title (Christos, 2026-09-23): the picture then stands as far from the title's letters (41 px) as the category does below them; the old site had 20 px there */ .wr-cat { font-family: var(--trajan); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: #000; line-height: 18.2px; padding-top: 2px; }
.wr-pages { display: flex; justify-content: center; gap: 20px; padding: 44px 0 48px; } .wr-pages a { width: 32px; height: 32px; border: 1px solid #000; color: #000; background: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 22.16px; line-height: 1; } .wr-pages a.on { background: #610000; border-color: #610000; color: #fff; }
.wr-grid.is-related { border: 0; } .wr-grid.is-related .wr-item { padding: 65px; border: 0; background: none; } .wr-grid.is-related .wr-thumb { margin: 0 0 15px; } .wr-grid.is-related .wr-title { font-size: 24px; color: #790000; }
/* a list a page kept (the films page's stills, a film page's related films): so many across, with the old block's gutter and proportion */
.fc-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--g, 0); } .fc-item { position: relative; display: block; min-width: 0; overflow: hidden; background: rgba(255, 255, 255, 0.04); } .fc-grid:not(.is-auto) .fc-item { aspect-ratio: var(--ar, 1.7778); }
.fc-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .fc-grid.is-auto { display: block; columns: var(--n, 3); column-gap: var(--g, 20px); } .fc-grid.is-auto .fc-item { break-inside: avoid; margin-bottom: 18px; } .fc-grid.is-auto .fc-item img { height: auto; } .fc-item .fc-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; color: #fff; font-family: var(--small-head); text-transform: uppercase; letter-spacing: 1.7px; font-size: 18px; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
/* the portfolio of the older salons: square, three across with no gutter, the title in Salon italics over a veil under the hand */
.fe-sec-portfolio, .page-converted .fe-sec-portfolio { padding: 1vw 0; } .pf-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; padding: 0 var(--gutter, 3.5vw); } /* Squarespace's "grid overlay" portfolio at full width: inset by the page padding, 1vw above and below */ .pf-item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: #fff; text-decoration: none; } .pf-item img { width: 100%; height: 100%; object-fit: cover; }
.pf-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7%; background: rgba(0, 0, 0, var(--ov, 0.65)); opacity: 0; transition: opacity .3s ease; } .pf-item:hover .pf-text, .pf-item:focus-visible .pf-text { opacity: 1; } .pf-title { width: 100%; font-family: var(--small-head); font-weight: 500; font-style: italic; font-size: 35px; letter-spacing: 0.06em; line-height: 1.6; text-transform: uppercase; margin: 0; color: #fff; } @media (max-width: 1150px) { .pf-title { font-size: 30px; } } @media (hover: none) { .pf-text { opacity: 1; } }
/* a post: the column of the old blog (951 px with 17 px around each block, so 917 px of text), the poster across the window with its title band */
.page-post main { padding-top: 0; } .post { width: 100%; } .post-draft { text-align: center; font-size: 14px; color: #b8860b; margin: 0; padding: 14px 24px 0; } .post-plainhead { text-align: center; padding: 40px 24px 10px; }
.pb-text.has-ground { background: var(--pb-bg); padding: var(--pb-pad, 17px); margin: var(--pb-mt, 0px) max(calc(-1 * var(--pb-bleed, 0px)), calc(50% - 50vw)) var(--pb-mb, 0px); } .pb-text.has-ground > .fe-text { padding: var(--pb-inset, 0px); } .pb-text.is-cap .fe-text p { font-family: var(--trajan); font-weight: 200; font-size: 17px; text-transform: lowercase; } @media (max-width: 868px) { .pb-text.has-ground { margin-left: max(calc(-1 * var(--pb-bleed-sm, var(--pb-bleed, 0px))), calc(50% - 50vw)); margin-right: max(calc(-1 * var(--pb-bleed-sm, var(--pb-bleed, 0px))), calc(50% - 50vw)); } } @media (max-width: 640px) { .pb-text.is-cap .fe-text p { font-size: 22.4px; } } /* the old site keeps 17 px only above 640; its own phone rule wins there (measured 2026-09-28: 17 px at 767, 22.4 at 640) */
.post-body { width: min(1150px, 80vw); margin: 0 auto; } .post-body::after { content: ""; display: block; clear: both; } @media (min-width: 768px) { .post-body .pb.is-fl-left, .post-body .pb.is-fl-right { width: calc(var(--span, 12) / 12 * 100%); } .post-body .pb.is-fl-right { float: right; margin-left: 17px; } .post-body .pb.is-fl-left { float: left; margin-right: 17px; } .post-body .pb:not(.pb-text) { clear: both; } } .pb { padding: 17px; } /* the post column: the old site had 15vw margins and 951 px at most; Christos wanted the text wider (2026-09-23): 10vw margins, 1150 px at most */ .pb-text .fe-text p { margin: 0 0 1em; text-align: justify; } .pb-text .fe-text p.ta-right { text-align: right; } .pb-text .fe-text p.ta-left { text-align: left; } .pb-text .fe-text p.ta-justify { text-align: justify; } .pb-text .fe-text p.ta-center { text-align: center; } .pb-text .fe-text p:last-child { margin-bottom: 0; } .pb-text .fe-text p.t-large { font-size: 1.25em; line-height: 1.8; }
.pb-rule hr { border: 0; height: 1.5px; background: rgba(77, 76, 76, 0.78); margin: 11px 0; } .pb-spacer { height: calc(var(--n, 1) * 34px); padding: 0; } .pb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0; } .pb-col { grid-column: span var(--span, 12); min-width: 0; }
.pb-image figure { margin: 0; } .pb-image img { display: block; width: 100%; height: auto; } .pb-caption { font-family: var(--trajan); font-size: 15px; font-weight: 300; line-height: 1.8; letter-spacing: 0; text-transform: uppercase; text-align: center; color: #fff; background: #380000; padding: 8px 20px; margin: 0; } div.pb-caption { padding: 1px 20px; } .pb-caption p { margin: 0; } /* the old site's caption band, flush under the picture, the same design as the gallery band below (measured 2026-09-28 over all 44 writing pages that carry one: 138 of 140 image captions and 56 of 56 video captions are white Trajan Sans 15/27 uppercase on rgb(56,0,0), padding 8px 20px and 1px 20px; it had been inheriting the page's 22px near-black Garamond on white) */
.pb-image.is-poster { padding: 0 0 17px; } .pb-poster { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; } .pb-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-poster .pb-card { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 2% 8%; text-align: center; color: #fff; } .pb-poster .pb-card-title { background: rgba(10, 0, 0, 0.3); padding: 25px 0 60px; margin-bottom: -75px; position: relative; } .pb-poster .pb-card-sub { position: relative; } @media (max-width: 1240px) { .pb-poster .pb-card-title { padding-bottom: 20px; margin-bottom: 0; } } .pb-poster .pb-card-title h2 { margin: 0; color: #fff; font-size: 50px; font-weight: 300; letter-spacing: 1.7px; line-height: 1.28; text-shadow: 1px 1px 12px #000; }
.pb-poster .pb-card-sub { font-size: 26px; font-weight: 300; line-height: 1.8; margin: 4px 0 0; text-shadow: 1px 1px 12px #000; } .pb-poster .pb-card-sub p { margin: 0; } .pb-poster .pb-card-btn { margin-top: 18px; }
.pb-image.is-overlap, .pb-image.is-card { padding: 0 0 17px; } .pb-image.is-overlap .pb-fig { position: relative; width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: 35% 65%; align-items: center; min-height: 40vw; } .pb-image.is-card .pb-fig { position: relative; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); align-items: stretch; } .pb-image.is-card.is-left .pb-fig { grid-template-columns: minmax(0, 66%) minmax(0, 34%); } /* minmax(0, ...) or the picture's own min-content width blows the track out below about 900 px */ /* 2026-09-28: the card was torn out to the whole window on a 35/65 grid, and because the picture took whichever track its side put it in, two cards on one page came out 504 and 936 px wide. The old site keeps it in the text column with the picture always the 66 */
.pb-image.is-overlap .pb-pic, .pb-image.is-card .pb-pic { grid-column: 2; grid-row: 1; } .pb-image.is-card .pb-pic, .pb-image.is-card .pb-card { min-width: 0; } .pb-image.is-card .pb-pic { align-self: start; } /* the picture keeps its own shape and is never stretched to the row: with an aspect-ratio a stretched height sets the WIDTH, which pushed the picture out of its track and the page sideways. The panel stretches instead, as the old site has it (measured at 900: picture 378x454, panel 195x604) */ .pb-image.is-overlap.is-left .pb-pic, .pb-image.is-card.is-left .pb-pic { grid-column: 1 / span 1; } .pb-image.is-overlap .pb-pic img { position: relative; height: 100%; object-fit: contain; } .pb-image.is-card .pb-pic img { height: 100%; object-fit: cover; }
.pb-image.is-card .pb-card { grid-column: 1; grid-row: 1; padding: 2% 8%; text-align: center; display: flex; flex-direction: column; justify-content: center; } .pb-image.is-card.is-left .pb-card { grid-column: 2; } @media (max-width: 591px) { .pb-image.is-card .pb-fig, .pb-image.is-card.is-left .pb-fig { grid-template-columns: minmax(0, 1fr); } .pb-image.is-card .pb-pic, .pb-image.is-card.is-left .pb-pic { grid-column: 1; grid-row: 1; } .pb-image.is-card .pb-card, .pb-image.is-card.is-left .pb-card { grid-column: 1; grid-row: 2; } } /* the old site keeps the two tracks down to its own breakpoint and goes to one column below it (measured on theautumnsalon.com: side by side at 595, one column at 590), the picture the full column wide with the panel under it */
.pb-image.is-overlap .pb-card { grid-column: 1 / span 2; grid-row: 1; width: 50%; padding: 0; position: relative; z-index: 1; } .pb-image.is-overlap .pb-card-in { width: 70%; margin-left: 40px; padding: 0 25px; } .pb-image.is-overlap.is-left .pb-card { justify-self: end; } .pb-image.is-overlap.is-left .pb-card-in { margin: 0 40px 0 auto; } .pb-card-title h2 { margin: 0; } .pb-card-sub { margin: 13.6px 0 0; } .pb-card-sub p { margin: 0; } .pb-card-btn { margin-top: 32px; }
.pb-image.is-stack .pb-card { padding: 20px 0 0; text-align: center; } .page-writing .pb-image.is-card .pb-card { background: #380000; color: #fff; } .page-writing .pb-image.is-stack .pb-card { background: #380000; color: #fff; padding: 2% 8%; } /* #610000 here was wrong: measured rgb(56,0,0) on the old site, the same wine as the card (2026-09-28) */ .page-writing .pb-image.is-card .pb-card-title h2, .page-writing .pb-image.is-stack .pb-card-title h2 { color: #fff; font-weight: 300; } .page-writing .pb-image.is-card .pb-card-title h3, .page-writing .pb-image.is-stack .pb-card-title h3 { font-family: var(--small-head); font-size: 44px; font-weight: 200; line-height: 1.316; letter-spacing: normal; color: #fff; text-transform: none; } /* measured on the old site: Salon 44/57.9 at weight 200, where ours fell to the salon pages' Swaak 60 (2026-09-28) */ .page-writing .pb-image.is-card .pb-card-sub, .page-writing .pb-image.is-overlap .pb-card-sub { font-size: 19px; } .pb-image.is-stack .pb-card-sub { font-size: 22px; margin-top: -28px; }
.pb-gallery .pb-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 1px; } .pb-grid figure { margin: 0; display: flex; flex-direction: column; } .pb-grid a { display: block; aspect-ratio: var(--ar, 1); overflow: hidden; } .pb-grid img { width: 100%; height: 100%; object-fit: cover; } .pb-grid figure > img, .pb-grid figure > picture > img { aspect-ratio: var(--ar, 1); height: auto; } /* 707 of the 713 gallery pictures have no link of their own, and the aspect was carried by the anchor alone, so each kept its own shape and the rows came out ragged (2026-09-28); height:auto beats the 100% above, and the linked path figure>a>picture>img is deliberately not matched. This also gives the tile its space before the picture arrives, which is what made the page jump */
.pb-grid figcaption { font-family: var(--trajan); font-size: 15px; letter-spacing: 0; text-transform: uppercase; text-align: center; color: #fff; background: #380000; padding: 7px 0; line-height: 1.8; } .pb-grid figcaption span { display: block; font-family: var(--body); font-size: 15px; text-transform: none; }
.pb-slides .slider-track img { width: 100%; aspect-ratio: var(--ar, 3/2); object-fit: cover; } .pb-slides figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; } .pb-slides figcaption { text-align: center; font-family: var(--trajan); font-size: 15px; text-transform: uppercase; padding: 8px 0; }
.pb-video { padding: 17px; } .pb-video .fe-vid { width: 100%; } .pb-audio .fe-aud { padding: 0; }
/* a writing stands on white */
.page-writing { background: #fff; color: rgba(0, 0, 0, 0.88); } .page-writing .pb-text .fe-text h2 { color: var(--wine); text-align: center; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.125rem); margin: 0 0 20px; } /* a heading stands as far from its paragraph as one paragraph from the next (Christos, 2026-09-23): 39 px of clear space, measured in ink; the old site had 34, 19 and about 20 px under h2, h3 and h4 */
.page-writing .pb-text .fe-text h3 { font-family: var(--small-head); font-weight: 200; font-size: 44px; letter-spacing: 0.44px; color: var(--wine); text-align: center; margin: 0 0 15px; } .page-writing .pb-text .fe-text h4 { font-family: var(--small-head); font-size: 30px; letter-spacing: 1.7px; color: var(--wine); text-align: center; margin: 0 0 19px; }
.page-writing .fe-text a { color: var(--wine); } .page-writing .pb-image.is-overlap .pb-card { color: rgba(0, 0, 0, 0.88); } .page-writing .pb-image:not(.is-poster):not(.is-card):not(.is-stack) .pb-card-title h2 { color: var(--wine); } /* the card and stack panels have a wine ground of their own and set color:#fff above; these two rules had the same specificity, came later and won, so the poems were near-black on wine (2026-09-28) */ .page-writing .btn-light { background: #290000; color: #fff; }
/* a film's own page, after the Amazon Prime app's detail screen on a television (Christos, 2026-09-22, from a video of it): black; the film's still full bleed, the picture killed by two gradients, the title at the top left, one Play button at the lower left, the summary and what the film is about beside it, the credits at the far right; Related Films below the fold. Nothing plays until Play is pressed (Christos: "I dont want the videos to auto play as they do in amazon"). */
.page-film, .page-film main { background: #000; color: #fff; --gutter: 3.5vw; } .page-film .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; }
.page-film .site-header, .page-films .site-header { pointer-events: none; } .page-film .site-header > *, .page-films .site-header > * { pointer-events: auto; } /* the bar is transparent and lies over the picture, so its empty width must not swallow clicks meant for the film: it covered the player's playlist button at the top left (2026-09-28) */ .page-film .site-footer { display: none; }
.fp-hero { position: relative; overflow: hidden; background: #000; }
:root.is-watching, :root.is-watching body { overflow: hidden; }
:root.is-watching .site-header { display: none; }
:root.is-watching .fp-hero { position: fixed; inset: 0; z-index: 60; }
.fp-close { display: none; position: absolute; left: 28px; top: 22px; z-index: 5; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; transition: opacity .3s ease; }
.fp-close svg { width: 21px; height: 21px; fill: currentColor; pointer-events: none; }
.fp-close:hover { opacity: 0.7; }
:root.is-watching .fp-close { display: flex; }
:root.is-watching .fp-hero:has(.vp.is-started.is-playing.is-idle) .fp-close { opacity: 0.28; } /* it recedes with the player's own controls when the pointer has been still, but never out of reach: it keeps its pointer-events and comes back to full under the pointer. Taking it to 0 with pointer-events:none trapped the viewer — the button sits outside the player's box, so resting the pointer on it stopped the player seeing movement, it went idle, and the button faded out from under the cursor and stopped taking clicks (2026-09-28) */
:root.is-watching .fp-close:hover, :root.is-watching .fp-close:focus-visible { opacity: 1; }
/* the still is the player's own poster, so the page fetches it once and a browser without scripts still gets a film it can play; preload="none" means nothing of the film itself is asked for until Play */
.fp-stage { position: absolute; inset: 0; z-index: 1; } .fp-stage .fev { height: 100%; margin: 0; } .fp-stage .fe-vid { aspect-ratio: auto !important; height: 100%; }
.fp-stage .fe-vid video { object-fit: cover; object-position: var(--fp-pos, 50% 35%); }
.fp-hero:not(.is-on) .fp-stage .vp { opacity: 0; pointer-events: none; } /* our player's own controls wait until Play has been pressed; the page's own button stands in their place */
.fp-hero.is-on .fp-stage .fe-vid video { object-fit: contain; object-position: 50% 50%; } /* the work itself is never cropped: once it plays it lies in the black at its own proportions */
.fp-hero.is-on .fp-say { display: none; }
.fp-fade { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .5s ease; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.94) 10%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.38) 30%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0) 46%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.36) 36%, rgba(0, 0, 0, 0) 64%); }
.fp-title { position: absolute; left: var(--gutter); right: var(--gutter); top: 8vh; z-index: 3; margin: 0; font-family: "Saveur", var(--body); font-size: 65px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.165; text-transform: uppercase; color: #fff; pointer-events: none; transition: opacity .5s ease; }
.fp-body { position: relative; z-index: 3; min-height: clamp(520px, 62vw, 86vh); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 620px) minmax(0, 1fr); column-gap: 56px; align-items: end; padding: calc(8vh + 100px) var(--gutter) 7vh; pointer-events: none; transition: opacity .5s ease; }
.fp-body a, .fp-body button, .fp-body .fp-credits, .fp-body .fp-summary { pointer-events: auto; } /* the credits and the opened summary scroll inside themselves, so the wheel has to reach them; everything else in the band lets a click through to the film */
.fp-hero.is-on .fp-body, .fp-hero.is-on .fp-fade { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } /* once it has been started the summary, the credits and the gradients are done with: only the title comes back when it is paused (Christos, 2026-09-22). They go in .12 s, not the .5 s they arrive in: measured in Chrome, the first frame paints about 160 ms after Play, so a half-second fade leaves the words standing legibly over the moving film — the 'ghost text' Christos saw. */
.fp-title:has(img), .fv-name:has(img) { font-size: 0; line-height: 0; } /* a lockup brings its own leading; the heading must add none */
.fp-logo, .fv-logo { display: block; width: auto; height: auto; max-width: 100%; } /* the poster's own lettering: bounded by width and by height, since a lockup may be wide (NOCTURNE) or tall (CLASSICAL JAZZ) */
.fp-logo { max-width: min(100%, 620px); max-height: clamp(84px, 15vh, 180px); }
.fv-logo { max-height: clamp(64px, 12vh, 140px); }
/* where the record knows the lockup's own type size, the box is measured per film so a stacked lockup is not squashed */
.fp-logo[style*="--lw"], .fv-logo[style*="--lw"] { max-width: min(100%, calc(var(--lw) * 1px)); max-height: calc(var(--lh) * 1px); }
.fv-logo[style*="--lw"] { max-height: min(calc(var(--lh) * 1px), 22vh); } /* the hero is only what the film row leaves, so a tall lockup shrinks rather than being clipped by its overflow */
.fp-hero.is-playing .fp-title { transition: none; } /* out at once while it plays, and back over the base .5 s when it is paused */
.fp-hero.is-on .fp-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85); } /* with the gradients gone the title carries its own ground */
.fp-hero.is-playing .fp-title { opacity: 0; } /* while it plays the film has the page to itself */
.fp-start, .fv-watch { display: inline-flex; align-items: center; background: #DFE0E1; color: #1A0202; border: 0; padding: 12px 34px 12px 28px; cursor: pointer; font-family: "Saveur", var(--body); font-size: 21px; font-weight: 400; letter-spacing: 0.08em; text-decoration: none; transition: opacity .3s ease; } .fp-start:hover, .fv-watch:hover { opacity: 0.7; }
.fp-tri { flex: none; width: 1.35em; height: 1.35em; margin-right: 0.36em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } /* the play mark at the button's own scale, not the text's (Christos, 2026-09-22): drawn, because the glyph's ink is a fraction of its em and no type size makes it big */ /* these two pages use Saveur and Garamond Premier only (Christos, 2026-09-22): no P22 Salon, no Trajan Sans */
.fp-summary { margin: 0; max-width: 614px; font-family: var(--films-sans); font-weight: 400; font-size: 17px; line-height: 1.8; color: #DFE0E1; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.fp-summary.is-open { display: block; overflow: visible; }
.fp-open[hidden] { display: none; } /* an author rule beats the browser's own [hidden], so it has to be said here or "More" shows when nothing was cut */
.fp-open { display: inline-block; margin: 12px 0 0; font-family: "Saveur", var(--body); font-size: 16px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.6; text-transform: uppercase; color: #DFE0E1; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .3s ease; } .fp-open:hover { opacity: 0.7; }
.fp-facts { margin: 20px 0 0; font-family: "Saveur", var(--body); font-size: 20px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.34; text-transform: uppercase; color: #DFE0E1; }
.fp-credits { display: block; padding: 0; max-height: min(52vh, 480px); overflow-y: auto; overscroll-behavior: contain; padding-right: 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.32) transparent; } /* a film with forty names in its crew would otherwise make the hero three screens tall (Christos, 2026-09-22): the column scrolls inside itself */
.fp-credits.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 52px), transparent); mask-image: linear-gradient(#000 calc(100% - 52px), transparent); } /* the last names fade out while there are more, so the column reads as one that goes on */
.fp-credits::-webkit-scrollbar { width: 4px; } .fp-credits::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); border-radius: 2px; } .fp-credits::-webkit-scrollbar-track { background: none; }
.fp-summary.is-open { max-height: min(40vh, 360px); overflow-y: auto; overscroll-behavior: contain; padding-right: 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.32) transparent; }
.fp-credit { margin: 0 0 20px; }
.fp-label { font-family: "Saveur", var(--body); font-size: 18px; font-weight: 300; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: #DFE0E1; margin: 0 0 4px; text-align: left; }
.fp-name { font-family: var(--films-sans); font-weight: 400; font-size: 15px; line-height: 1.6; margin: 0 0 6px; text-align: left; }
.fp-credits.is-old { display: block; } .fp-credits.is-old h2 { font-family: "Saveur", var(--body); font-size: 18px; font-weight: 300; letter-spacing: 0.04em; line-height: 1.5; text-transform: uppercase; margin: 0 0 4px; } .fp-credits.is-old p { margin: 0 0 6px; text-align: left; font-family: var(--films-sans); font-weight: 400; font-size: 15px; line-height: 1.6; }
/* a film the archive does not hold keeps the page it had: its still as a background with the round play button to the old address */
.fp-hero.is-still { aspect-ratio: 1440 / 706; background-size: cover; background-position: var(--fp-pos, 50% 50%); } .fp-hero.is-still .fp-title { top: auto; bottom: 33px; }
.fp-play { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.25); transition: background .2s; z-index: 3; } .fp-play:hover { background: rgba(0, 0, 0, 0.5); } .fp-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.fp-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.65); margin: 18px var(--gutter) 28px; } .fp-desc { width: min(614px, 100%); margin: 0 var(--gutter) 60px; font-size: 22.16px; line-height: 1.8; text-align: justify; }
.fp-more { padding: 60px 0 80px; } .fp-relh { font-family: "Saveur", var(--body); font-size: 26px; font-weight: 400; letter-spacing: 1.7px; text-transform: uppercase; text-align: left; margin: 0 var(--gutter) 24px; }
.fp-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px; padding: 0 calc(var(--gutter) + 57px); } .fp-rel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #141414; transition: opacity .3s; } .fp-rel:hover { opacity: 0.8; } .fp-rel img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .fp-body { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); row-gap: 34px; column-gap: 40px; } .fp-credits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; } .fp-title { font-size: 44px; } .fp-logo { max-height: clamp(70px, 12vh, 130px); } .fp-logo[style*="--lw"] { max-width: min(100%, calc(var(--lw) * 0.8px)); max-height: calc(var(--lh) * 0.8px); } .fp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 var(--gutter); } }
@media (max-width: 760px) { .page-film, .page-film main { --gutter: 6vw; } /* on a phone nothing is laid over anything: the picture, then the title, then the words */
  .fp-stage { position: relative; inset: auto; aspect-ratio: 16 / 9; } .fp-fade { display: none; }
  .fp-title { position: static; padding: 20px var(--gutter) 0; font-size: 30px; }
  .fp-logo { max-height: 62px; }
  .fp-logo[style*="--lw"] { max-width: min(100%, calc(var(--lw) * 0.5px)); max-height: calc(var(--lh) * 0.5px); }
  .fp-hero.is-still .fp-title { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; padding: 0; }
  .fp-body { min-height: 0; display: block; padding: 22px var(--gutter) 40px; } .fp-summary { font-size: 16px; text-align: left; } .fp-facts { font-size: 17px; } .fp-info { margin-top: 24px; } .fp-credits { display: block; margin-top: 28px; max-height: none; overflow: visible; padding-right: 0; } .fp-summary.is-open { max-height: none; overflow: visible; padding-right: 0; } .fp-label { font-size: 20px; } .fp-name { font-size: 15px; }
  .fp-hero.is-playing .fp-title, .fp-hero.is-on .fp-title, .fp-hero.is-on .fp-body { opacity: 1; pointer-events: auto; } /* on a phone nothing is laid over the picture, so nothing has to get out of its way */
  /* …except while the player is locked to the window: there the phone's own stacked layout would leave the film in a 16:9 band with the credits cut off below it and no way to scroll (found 2026-09-23) */
  :root.is-watching .fp-stage { position: absolute; inset: 0; aspect-ratio: auto; }
  :root.is-watching .fp-hero.is-on .fp-body { opacity: 0; visibility: hidden; }
  :root.is-watching .fp-hero.is-on .fp-title { position: absolute; left: var(--gutter); right: var(--gutter); top: auto; bottom: 22px; padding: 0; }
  :root.is-watching .fp-hero.is-playing .fp-title { opacity: 0; }
  .fp-relh { font-size: 22px; } .fp-related { gap: 12px; } .fp-more { padding: 30px 0 60px; } }
@media (max-width: 1000px) { .wr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wr-item { padding: 40px; } .fc-grid { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); } .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-image.is-overlap .pb-fig { grid-template-columns: 1fr; } .pb-image.is-overlap .pb-pic, .pb-image.is-overlap .pb-card { grid-column: 1 !important; grid-row: auto; } .pb-image.is-overlap .pb-card { padding: 24px; } }
@media (max-width: 767px) { .pf-grid { padding: 0 6vw; } }
@media (max-width: 640px) { .wr-grid { grid-template-columns: 1fr; } .wr-item { padding: 41px; } .wr-title { font-size: 30px; } .wr-cats { padding: 0; } .wr-cats-btn { display: block; margin: 10px auto 0; padding: 25px 0 0; border: 0; background: #fff; color: #000; font-family: var(--trajan); font-size: 18px; font-weight: 300; letter-spacing: 1.5px; line-height: 1.6; text-transform: uppercase; cursor: pointer; } .wr-cats ul { display: none; padding: 10px 0; } .wr-cats.is-open ul { display: block; } .wr-cats li { display: block; margin: 0; } .wr-pages { padding: 11px 0; } .fe-banner .fe-li { padding: 30px 3.5vw; } .fc-grid, .pf-grid, .pb-gallery .pb-grid { grid-template-columns: 1fr; } .pb-row { grid-template-columns: 1fr; } .pb-col { grid-column: auto; } .pb-poster .pb-card { padding: 4% 6%; } .pb-poster .pb-card-title { padding: 14px 0 26px; } .pb-poster .pb-card-sub { display: none; } }
/* ---- /films: the films as the Amazon Prime app lays them out on a television (Christos, 2026-09-22, from a video of it, measured frame by frame): black; a hero pinned at the top of the window that shows whichever film is being pointed at, over one grid of every listed film. The tiles stay pictures alone; the words are all in the hero. ---- */
.page-films, .page-films main { background: #000; color: #fff; --gutter: 3.5vw; } .page-films .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; } .page-films .site-footer { display: none; } /* no footer here (Christos, 2026-09-22): the films page is one screenful, as the television screen is */
.page-films main { display: flex; flex-direction: column; min-height: 100vh; } /* the header is 80 px, so the hero and the row divide the rest of the window between them and no black is left over */
/* the hero takes the top half of the window and the row of films the rest, as the screen is divided there; the page is one screenful, so the hero does not need pinning */
.fv-hero { position: relative; z-index: 2; flex: 1 1 auto; min-height: clamp(280px, 46vh, 560px); overflow: hidden; background: #000; } /* a floor, not a height: the hero takes whatever the row leaves, so a tall window has no black space under it. The floor is under the half it wants, or a short window would push the row past the bottom. */
.fv-slides, .fv-slide { position: absolute; inset: 0; } .fv-slide { display: block; opacity: 0; transition: opacity .9s ease; } .fv-slide.is-on { opacity: 1; }
.fv-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* two gradients, as measured there: the left third solid black so the words sit on true black, and a scrim carrying the picture down into the grid */
.fv-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.68) 12%, rgba(0, 0, 0, 0.54) 26%, rgba(0, 0, 0, 0.34) 40%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.04) 64%, rgba(0, 0, 0, 0) 72%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.62) 16%, rgba(0, 0, 0, 0.26) 34%, rgba(0, 0, 0, 0) 62%); } /* the whole picture stays visible (Christos, 2026-09-22): no solid black anywhere, the veil easing off by 72 % of the width. The reference has a solid slab for its left third; his pictures are worth seeing, so the words carry a shadow instead. */ /* the stops are eased by hand: a straight alpha ramp interpolates in sRGB and leaves a visible knee where it leaves solid black */
.fv-say { position: absolute; left: var(--gutter); bottom: 12%; z-index: 2; width: min(46%, 640px); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8), 0 0 3px rgba(0, 0, 0, 0.5); transition: opacity .34s ease; }
.fv-hero.is-changing .fv-say { opacity: 0; transition-duration: .16s; }
.fv-name { margin: 0; font-family: "Saveur", var(--body); font-size: 56px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.165; text-transform: uppercase; color: #fff; }
.fv-line { margin: 18px 0 0; font-family: "Saveur", var(--body); font-size: 20px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.34; text-transform: uppercase; color: #DFE0E1; }
.fv-sum { margin: 14px 0 0; font-family: var(--films-sans); font-weight: 400; font-size: 15.4px; line-height: 1.8; color: #DFE0E1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fv-acts { margin: 26px 0 0; } .fv-watch { display: inline-flex; align-items: center; text-shadow: none; } /* the hero's words carry a shadow so they read over the picture; the button does not need it, its label being dark on pale grey (Christos, 2026-09-22) */ /* a way into the film from the hero itself (Christos, 2026-09-22), the same button the film's own page carries */
/* the films travel left to right in one row, as they do there: a strip passing through rather than a page of tiles (Christos, 2026-09-22) */
.fv-strip { position: relative; z-index: 1; flex: 0 0 auto; padding: 40px 0 34px; background: #000; }
.fv-row { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.fv-row.is-held, .fv-row.is-held .fv-tile { cursor: grabbing; } .fv-row.is-held { scroll-snap-type: none; } /* the browser pulls any position set by script to the nearest snap point, so snapping is off while a hand is on the row (the same trick the salons reel needs) */
.fv-row img { -webkit-user-drag: none; user-select: none; }
.fv-row::-webkit-scrollbar { display: none; }
.fv-arrow { position: absolute; top: calc(40px + (100% - 74px) / 2); transform: translateY(-50%); left: calc(var(--gutter) / 3); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s, opacity .3s; } .fv-arrow.is-next { left: auto; right: calc(var(--gutter) / 3); } .fv-arrow:hover { background: rgba(255, 255, 255, 0.26); } .fv-arrow[disabled] { opacity: 0; pointer-events: none; }
.fv-arrow::after { content: ""; width: 11px; height: 11px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(-45deg); margin-left: 4px; } .fv-arrow.is-next::after { transform: rotate(135deg); margin: 0 4px 0 0; }
.fv-tile { position: relative; flex: 0 0 clamp(200px, min(20vw, 32vh), 420px); scroll-snap-align: start; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #141414; color: #fff; text-decoration: none; }
.fv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the film being pointed at is marked by a hairline and nothing else: measured off the video, the focused tile there does not grow and its neighbours are not dimmed */
.fv-tile.is-lit, .fv-tile:focus-visible { outline: 1px solid #DFE0E1; outline-offset: -1px; }
.fv-cards, .fv-films { display: none; }
/* Watch opens the film here, locked to the window, instead of going to its own page (Christos, 2026-09-28: "nothing repeats through using the individual player page"). About slides the credits in on the right. */
.fv-play[hidden] { display: none; }
.fv-play { position: fixed; inset: 0; z-index: 60; background: #000; }
.fv-stage { position: absolute; inset: 0; z-index: 1; } .fv-stage .fev { height: 100%; margin: 0; } .fv-stage .fe-vid { aspect-ratio: auto !important; height: 100%; } .fv-stage .fe-vid video { object-fit: contain; }
.fv-close, .fv-panel-x { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; transition: opacity .3s ease; }
.fv-close { left: 28px; top: 22px; } .fv-close svg, .fv-panel-x svg { width: 21px; height: 21px; fill: currentColor; pointer-events: none; }
.fv-about { position: absolute; right: 28px; top: 22px; z-index: 5; padding: 11px 26px; border: 0; border-radius: 22px; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; font-family: "Saveur", var(--body); font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity .3s ease; }
.fv-close:hover, .fv-about:hover, .fv-panel-x:hover { opacity: 0.7; }
.fv-play:has(.vp.is-started.is-playing.is-idle) .fv-close, .fv-play:has(.vp.is-started.is-playing.is-idle) .fv-about { opacity: 0.28; } /* they recede with the player own controls but keep their pointer-events, so the pointer resting on one never traps the viewer */
.fv-play .fv-close:hover, .fv-play .fv-about:hover, .fv-play .fv-close:focus-visible, .fv-play .fv-about:focus-visible { opacity: 1; }
.fv-panel[hidden] { display: none; }
.fv-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; width: min(400px, 88vw); background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); overflow-y: auto; overscroll-behavior: contain; padding: 78px 30px 36px; text-align: left; }
.fv-panel-x { right: 16px; top: 18px; }
.fv-play:has(.fv-panel:not([hidden])) .fv-about { opacity: 0; pointer-events: none; } /* the panel own close stands where About did, so About steps aside while it is open */
.fv-panel .fp-credits { display: block; max-height: none; overflow: visible; padding-right: 0; margin: 0; mask-image: none; }
.fv-panel .fp-credit { margin: 0 0 22px; } .fv-panel .fp-credit.is-cast { margin-top: 6px; }
.fv-cred-sum { font-family: var(--films-sans); font-size: 15px; line-height: 1.7; color: #DFE0E1; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); text-align: left; }
.fv-panel::-webkit-scrollbar { width: 4px; } .fv-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 640px) { .fv-panel { width: 100%; padding: 70px 22px 30px; } .fv-about { right: 16px; top: 16px; padding: 9px 18px; font-size: 15px; } .fv-close { left: 16px; top: 16px; } }
@media (max-width: 899px) { .fv-tile { flex-basis: clamp(220px, 34vw, 340px); } .fv-row { gap: 14px; } .fv-hero { height: clamp(300px, 46vh, 520px); } .fv-name { font-size: 40px; } .fv-logo { max-height: clamp(54px, 10vh, 104px); } .fv-logo[style*="--lw"] { max-width: min(100%, calc(var(--lw) * 0.78px)); max-height: min(calc(var(--lh) * 0.78px), 22vh); } .fv-say { width: min(62%, 560px); } .fv-line { font-size: 18px; } }
@media (max-width: 640px) { .page-films, .page-films main { --gutter: 6vw; } .page-films main { min-height: 100vh; } .fv-strip { padding: 20px 0 22px; } .fv-row { gap: 10px; } .fv-tile { flex-basis: 74vw; } .fv-arrow { display: none; } .fv-hero { height: clamp(260px, 42vh, 420px); } .fv-say { width: calc(100% - var(--gutter) * 2); bottom: 9%; } .fv-name { font-size: 28px; } .fv-logo { max-height: clamp(40px, 8vh, 74px); } .fv-logo[style*="--lw"] { max-width: min(100%, calc(var(--lw) * 0.55px)); max-height: min(calc(var(--lh) * 0.55px), 22vh); } .fv-line { font-size: 15px; margin-top: 10px; } .fv-sum { font-size: 15px; margin-top: 8px; -webkit-line-clamp: 2; } .fv-shade { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.72) 32%, rgba(0, 0, 0, 0) 78%); } }
@media (prefers-reduced-motion: reduce) { .fv-slide, .fv-say { transition: none; } }
/* Linked words (Christos, 2026-09-23): the site's pale grey on a dark ground, the wine on white, never underlined; they fade a little under the pointer like the buttons. Buttons, the menu, the footer, cards and tiles keep their own rules. */
.fe-text a:not(.btn), .pb-text a:not(.btn), .cp-artist-text a, .pg a, .fe-li-text a:not(.btn), .ps-in a:not(.btn), figcaption a, .pb-caption a, .fp-summary a, .fp-credits a, .fp-credits.is-old a { color: #DFE0E1; text-decoration: none; transition: opacity 0.3s ease; }
.fe-sec.is-light .fe-text a:not(.btn), .fe-sec.is-light .cp-artist-text a, .fe-sec.is-light .pg a, .fe-sec.is-light .ps-in a:not(.btn), .fe-sec.is-light figcaption a, .page-writing .pb-text a:not(.btn), .page-writing .fe-text a:not(.btn), .page-writing .pb-slides figcaption a { color: var(--wine); }
.fe-text a:not(.btn):hover, .pb-text a:not(.btn):hover, .cp-artist-text a:hover, .pg a:hover, .fe-li-text a:not(.btn):hover, .ps-in a:not(.btn):hover, figcaption a:hover, .pb-caption a:hover, .fp-summary a:hover, .fp-credits a:hover { opacity: 0.7; }
@media (max-width: 600px) { .wr-grid.is-related .wr-item { padding: 40px; } } /* the old site's related cards pad 40 px below 601 (measured 2026-09-28 across 13 widths), where ours kept 65 at every width and left the thumbnail 148 px on a phone against its 255 */

::view-transition { background: #0F0305; }
.site-wordmark { font-family: var(--head); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.site-logo { text-decoration: none; }