/* 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 video, .fplb-stage .fe-vid { background: #000; }   /* black until the first frame paints, never a flash of the still */
.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-co-box.is-paying .rd-modal-close, .rd-co-box.is-paying .back { opacity: 0.3; pointer-events: 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); } }

/* Audrey Vardanega */
@font-face { font-family: "Orpheus Pro"; src: url("/assets/fonts/orpheus-pro.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saveur"; src: url("/assets/fonts/saveur-sans-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --ink: #000000; --ink-2: #131313; --stone: #7A7173; --ash: #BFB6B5; --paper: #FFFFFF; --gold: #87682C; --wine: #87682C; --body: "Orpheus Pro", "Cormorant Garamond", Georgia, serif; --head: "Saveur", "Orpheus Pro", Georgia, serif; --small-head: "Saveur", "Orpheus Pro", Georgia, serif; --button: "Orpheus Pro", Georgia, serif; }
body { background: #000; color: #fff; font-family: var(--body); font-weight: 500; font-size: 19.456px; line-height: 1.6; letter-spacing: normal; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; font-feature-settings: "ss01" 1, "onum" 1; letter-spacing: 1.6px; }
h2 { font-size: 36.736px; line-height: 1.2; color: var(--gold); } h4 { font-size: 40.192px; line-height: 1.32; }
em, i { font-style: italic; }
.page-converted p a, .page-converted li a, .fe-text a { color: var(--gold); text-decoration: none; transition: opacity .3s ease; } .page-converted p a:hover, .fe-text a:hover { opacity: .7; }
.btn, .fe-sub .btn, .fe-form .btn, .page-converted .btn-light, .page-converted .btn-lg { font-family: var(--button); font-weight: 500; font-size: 16px; letter-spacing: 3.2px; text-transform: uppercase; background: transparent; color: var(--gold); border: 2px solid var(--gold); border-radius: 0; padding: 22px 30px; transition: opacity .3s ease; }
.btn:hover, .fe-sub .btn:hover, .fe-form .btn:hover { opacity: .7; background: transparent; color: var(--gold); }
/* the bar */
.site-header.is-split { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 90px; padding: 18px 43px; background: transparent; }
.site-header.is-split::after { display: none; }
.site-header.is-split .site-logo { grid-column: 2; grid-row: 1; justify-self: center; } .site-header.is-split .site-logo:hover { opacity: 1; }
.site-header.is-split .site-wordmark { font-family: var(--head); font-size: 48.832px; line-height: 1; letter-spacing: 2.93px; text-transform: uppercase; color: var(--gold); font-feature-settings: "ss01" 1, "onum" 1; text-shadow: 1px 1px 2px #000, 0 0 1em #000, 0 0 .2em #000; white-space: nowrap; }
.site-header.is-split .site-nav { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 16px; flex: none; }
.site-header.is-split .site-nav a:not(.btn), .site-folder-t { font-family: var(--body); font-weight: 500; font-size: 19.456px; line-height: 1.6; letter-spacing: normal; text-transform: none; color: #fff; text-shadow: #000 1px 0 12px; padding: 0; opacity: 1; background: none; border: 0; cursor: pointer; transition: color .3s ease; }
.site-header.is-split .site-nav a:not(.btn):hover, .site-folder-t:hover, .site-folder.is-open .site-folder-t { color: var(--gold); opacity: 1; }
.site-header.is-split .site-nav a.is-current, .site-header.is-split .site-nav a.is-here { opacity: 1; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.site-folder { position: relative; } .site-folder-t { color: var(--gold) !important; }
.site-folder-m { position: absolute; top: 100%; left: -18px; margin-top: 8px; min-width: 210px; padding: 12px 18px; background: #111; border: 2px solid var(--gold); display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 41; }
.site-folder:hover .site-folder-m, .site-folder.is-open .site-folder-m, .site-folder:focus-within .site-folder-m { opacity: 1; visibility: visible; }
.site-folder-m a { white-space: nowrap; }
.site-social { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 16px; align-items: center; } .site-social a { color: #fff; display: flex; transition: opacity .3s ease; } .site-social a:hover { opacity: .7; } .site-social svg { width: 25px; height: 25px; filter: drop-shadow(#000 1px 0 6px); }
.site-header.is-split .site-burger { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 900px) {
  .site-header.is-split { min-height: 70px; padding: 14px 23px; grid-template-columns: 1fr auto; }
  .site-header.is-split .site-logo { grid-column: 1; justify-self: start; } .site-header.is-split .site-wordmark { font-size: min(27px, 6.9vw); letter-spacing: .07em; }
  .site-header.is-split .site-burger { grid-column: 2; } .site-header.is-split .site-burger span { background: #fff; }
  .site-social { display: none; } body.nav-open .site-social { display: flex; position: fixed; left: 0; right: 0; bottom: 60px; justify-content: center; z-index: 31; gap: 26px; }
  .site-header.is-split .site-nav { position: fixed; inset: 0; z-index: 30; background: #000; flex-direction: column; justify-content: center; align-items: center; gap: 22px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .site-header.is-split .site-nav a:not(.btn), .site-folder-t { font-size: 30px; }
  body.nav-open .site-header.is-split .site-nav { opacity: 1; visibility: visible; }
  .site-folder { text-align: center; } .site-folder-m { position: static; margin: 10px 0 0; opacity: 1; visibility: visible; background: none; border: 0; padding: 0; align-items: center; } .site-folder-m a { font-size: 22px !important; }
}
/* sections begin under the bar, as the old site's did: the bar floats over them */
.page-converted .fe-sec.is-first { min-height: var(--minh, auto); }
/* the footer: one band, Subscribe */
.site-footer.is-subscribe { display: block; background: #131313; padding: 30px 24px 64px; text-align: center; }
.site-footer.is-subscribe .fe-sub h2 { font-size: 36.736px; color: var(--gold); margin: 0 0 16px; }
.site-footer.is-subscribe .fe-sub p { max-width: 480px; margin: 0 auto 36px; color: #fff; }
.fe-sub .fe-signup-row { display: flex; justify-content: center; gap: 13px; flex-wrap: wrap; }
.fe-sub input[type="email"] { width: 280px; height: 71px; box-sizing: border-box; border: 0; border-radius: 0; background: #fff; color: #000; padding: 0 32px; font: inherit; font-size: 19.456px; }
.fe-sub .btn { width: 151px; height: 68px; padding: 0; }
.fe-signup-msg, .fe-form-msg { margin-top: 14px; min-height: 1.2em; color: #fff; }
/* the Schedule page */
.page-schedule main { background: linear-gradient(rgba(0,0,0,.86), rgba(0,0,0,.86)), #0a0a0a url("/assets/img/schedule-bg.jpg") center / cover; min-height: 700px; } /* the old page darkened its paper texture to near black (sampled 0–30 there) */
.sch-in { max-width: 1060px; margin: 0 auto; padding: 160px 24px 60px; text-align: center; }
.sch-head { font-size: 52.5px; color: #fff; text-transform: uppercase; letter-spacing: 2.6px; margin: 0 0 88px; }
.sch-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1024px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px 0; }
.sch-date { font-family: var(--body); font-feature-settings: normal; letter-spacing: normal; font-weight: 500; font-size: 24px; color: var(--gold); margin: 0 0 14px; text-transform: none; }
.sch-what { margin: 0 0 12px; font-size: 19.456px; line-height: 1.6; }
.sch-desc { max-width: 400px; margin: 0 auto 14px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); } .sch-desc p { margin: 0 0 10px; } .sch-desc p:last-child { margin-bottom: 0; } /* a short description (2026-09-28): under the place, a step quieter than the name, narrow enough that two columns never meet */
.sch-more { display: inline-block; font-style: italic; font-size: 19.456px; color: var(--gold); text-decoration: none; }
.sch-btn { display: inline-block; margin-top: 6px; font-family: var(--button); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 3.2px; text-transform: uppercase; text-decoration: none; color: var(--gold); -webkit-text-stroke: .45px; background: transparent; border: 2px solid var(--gold); border-radius: 0; padding: 13px 30px; transition: opacity .3s ease; } .sch-btn:hover { opacity: .7; } /* -webkit-text-stroke (Christos, 2026-09-28: "a little heavier"): her Orpheus Pro is one Regular file, so weight 500 draws as 400 and a synthesised bold is far heavier (compared side by side at 2x); a .45px stroke in the text's own colour sits between */ /* Details as an outline button (Christos, 2026-09-28): her site's own button (the Subscribe and Submit ones), a size smaller to sit in a list, as the email's Details button does; "Details Coming Soon" leads nowhere, so it stays words */
.sch-none { font-size: 22px; }
@media (max-width: 700px) { .sch-in { padding: 120px 24px 48px; } .sch-head { font-size: 34px; margin-bottom: 48px; } .sch-list { grid-template-columns: 1fr; gap: 36px; } }
/* a contact form */
.fe-form { display: flex; flex-direction: column; gap: 22px; width: 100%; text-align: left; font-size: 16px; }
.fe-form .ff { display: block; border: 0; margin: 0; padding: 0; } .fe-form legend { padding: 0; margin: 0 0 8px; font-size: 19.456px; }
.fe-form .ff > span, .fe-form .ff-row label > span { display: block; margin: 0 0 6px; font-size: 16px; white-space: nowrap; } .ff-req { display: inline; font-size: 13px; opacity: .7; margin-left: 4px; }
.fe-form .ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fe-form input:not(.hp), .fe-form textarea { width: 100%; box-sizing: border-box; background: #fff; color: #000; border: 1px solid #a9a9a9; border-radius: 0; padding: 12px; font: inherit; font-size: 16px; }
.fe-form textarea { min-height: 100px; resize: vertical; }
.fe-form .is-bad input, .fe-form .is-bad textarea { border-color: #c0392b; }
.fe-form .btn { align-self: flex-start; padding: 20px 38px; }
.fe-form-done { font-size: 22px; padding: 30px 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }/* measured against the old Home (2026-09-28): gold upright headings; bold and italic drawn from the one Orpheus file (SITE_CSS turns synthesis off); links underlined in the text; the press titles a size up */
body { font-synthesis: weight style; }
.page-converted h1, .page-converted h2, .page-converted h3, .page-converted h4 { color: var(--gold); font-style: normal; text-transform: none; }
.page-converted .fe-text strong, .page-converted .fe-text b { font-weight: 700; }
.page-converted .fe-text p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-converted .fe-text p.t-large { font-size: 21.184px; line-height: 1.6; }
.page-converted .fe-ov { background: #000 !important; } /* the old site darkens its section pictures with black, not with the section's own #131313 (measured: 14–22 there against our 37) */
.page-converted .fe-sec.is-first { padding-top: 90px; } @media (max-width: 900px) { .page-converted .fe-sec.is-first { padding-top: 70px; } } /* the bar floats over the first section, which leaves it room, as Squarespace does */
.fe-vcap { margin-top: 14px; text-align: center; } .fe-vcap p { margin: 0; font-size: 16px; }
.fe-sslider.is-reel .slider-track { padding-top: 0; padding-bottom: 0; } .fe-sslider.is-reel .slider-track img { height: var(--vh, 50vh); } /* the photo reel: pictures the full height of the band, the first centred with its neighbours either side (the slides repeat), as the old Media page had it */
@media (max-width: 767px) {
  .page-home .fe-sec.is-first { min-height: 85vh; } /* the hero nearly fills a phone's screen (Christos, 2026-09-28: the new picture, "make it taller"); it was the old site's two thirds */
  .site-footer.is-subscribe .fe-sub p { font-size: 18.16px; line-height: 1.6; margin-bottom: 30px; } .site-footer.is-subscribe .fe-sub h2 { display: block; font-size: 28.96px; }
  .fe-sub input[type="email"] { width: 280px; height: 66px; flex: none; } .fe-sub .fe-signup-row { flex-direction: column; align-items: center; gap: 30px; }
  .fe-form .ff > span, .fe-form .ff-row label > span { font-size: 17px; }
}
.page-home .fe-sec.is-first::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px; background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.28) 45%, rgba(0,0,0,0)); pointer-events: none; } @media (max-width: 900px) { .page-home .fe-sec.is-first::after { height: 170px; } } /* a dark fade behind the bar, so the menu reads over the bright windows of the hero (Christos, 2026-09-28) */
.fe-panel { display: none; } /* the old page's one shape block (behind About) does not show there */
/* the press quotes: one wide line of italic Saveur over the section's own dark ground, the source in gold, round gold arrows */
.fe-banner .fe-li { min-height: 0; padding: 36px 135px 40px; background: none !important; }
.fe-banner .fe-li-text { max-width: 1170px; width: 100%; background: none; padding: 0; }
.fe-banner .fe-li-text h3 { font-size: 28.096px; line-height: 1.3; font-style: italic; letter-spacing: 1.6px; color: #fff; text-transform: none; margin: 0 0 18px; }
.fe-banner .fe-text p { font-size: 21.184px; color: var(--gold); margin: 0; }
.fe-banner .slider-btn { width: 60px; height: 60px; background: var(--gold); color: #000; font-size: 0; line-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .fe-banner .slider-btn:hover { background: var(--gold); opacity: .8; }
.fe-banner .slider-btn::before { content: ""; display: block; width: 30px; height: 12px; margin: 0; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 6h29M24 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 6h29M24 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.fe-banner .slider-btn.is-prev::before { transform: scaleX(-1); } .fe-banner .slider-btn.is-prev { left: 43px; } .fe-banner .slider-btn.is-next { right: 43px; }
@media (max-width: 767px) { .fe-banner .fe-li { padding: 30px 24px 70px; } .fe-banner .fe-li-text h3 { font-size: 22px; } .fe-banner .slider-btn { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; } .fe-banner .slider-btn.is-prev { left: calc(50% - 54px); } .fe-banner .slider-btn.is-next { right: calc(50% - 54px); } }

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