/* 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); }
body.nav-open .rd-edit-mark { display: none; } /* the editor's own "Edit this page" mark steps aside while the menu is open: on a short phone it lay over the last of the marks at the menu's foot and took its tap (found 2026-10-09) */
@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; } }
/* The menu's pages in a plain row at the foot of the page, for a browser with scripts off (it is inside <noscript>): shown only where the burger is, which such a browser cannot open */
.site-plain { display: none; flex-wrap: wrap; justify-content: center; gap: 2px 24px; padding: 18px var(--gutter) 24px; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 15px; letter-spacing: 0.4px; line-height: 2; text-align: center; }
.site-plain a { color: inherit; text-decoration: none; } .site-plain a.is-current { opacity: 0.6; }
@media (max-width: 900px) { .site-plain { display: flex; } }

/* 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; } .ap.is-error .ap-btn { opacity: .3; cursor: default; } .ap.is-error .ap-time { white-space: normal; line-height: 1.25; } /* a recording that cannot be loaded: its button dimmed, its sentence free to wrap */
@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 img[height] { height: auto; } .ps-img > a { display: block; } /* a picture sent with its own width and height keeps its shape, not the attribute's pixel height */ .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 { margin-top: 44px; } /* the list opened by "Choose a different concert": clear of the main button above its first hairline */
#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); } }

/* Tanya Tomkins */

:root { --ink: #352D28; --ink-2: #584D45; --stone: #75685E; --ash: #9C8B7E; --paper: #FFFFFF; --gold: #9C8B7E; --wine: #726053; --body: "Garamond Premier", "Cormorant Garamond", Garamond, Georgia, serif; --head: "Baskerville Display", Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, serif; --small-head: "Baskerville Display", Baskerville, "Baskerville Old Face", Georgia, serif; --button: "Baskerville Display", Baskerville, "Baskerville Old Face", Georgia, serif; --name: "Pouty", "Baskerville Display", Baskerville, "Cormorant Garamond", Georgia, serif; }
:root { --u: calc(min(100vw, 1695px) * 0.012); --hh: calc((16px + 1.7 * var(--u)) * 1.4 + 2vw); } @media (max-width: 900px) { :root { --hh: 92px; } } @media (max-width: 767px) { :root { --u: calc(min(100vh, 900px) * 0.012); } } /* the old site's own scale, measured from 1280 to 2400 wide (2026-10-09): a size is 16px plus so many units, a unit 1.2% of the window's width up to 1695px (on a phone, of its height up to 900px); --hh is the bar's height */
body { background: #fff; color: #564F4A; font-family: var(--body); font-weight: 300; font-size: calc(16px + 0.4 * var(--u)); line-height: 1.8; letter-spacing: normal; font-synthesis: weight style; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 500; font-style: normal; letter-spacing: normal; text-transform: none; }
h1 { font-size: calc(16px + 3 * var(--u)); line-height: 1.4; } h2 { font-size: calc(16px + 1.8 * var(--u)); line-height: 1.2992; } h3 { font-size: calc(16px + 0.8 * var(--u)); line-height: 1.2992; } h4 { font-size: calc(16px + 0.6 * var(--u)); line-height: 1.3664; }
em, i { font-style: italic; }
::selection { background: #9C8B7E; color: #fff; }
/* a section's words follow its ground */
.page-converted .fe-sec { color: #fff; } .page-converted .fe-sec h1, .page-converted .fe-sec h2, .page-converted .fe-sec h3, .page-converted .fe-sec h4 { color: #fff; }
.page-converted .fe-sec.is-light { color: #000; } .page-converted .fe-sec.is-light h1, .page-converted .fe-sec.is-light h2, .page-converted .fe-sec.is-light h3 { color: #9C8B7E; } .page-converted .fe-sec.is-light h4 { color: #000; }
.page-converted .fe-text p { margin: 0 0 0.7em; } .page-converted .fe-text p:last-child { margin-bottom: 0; } .page-converted .fe-text h1, .page-converted .fe-text h2, .page-converted .fe-text h3, .page-converted .fe-text h4 { margin: 0 0 0.68em; }
.page-converted .fe-text p.t-large { font-size: calc(16px + 0.5 * var(--u)); line-height: 1.8; }
/* The text face in use (Cormorant Garamond, until Christos names her faces) sets wider than the old site's Garamond Premier Display: at the measured size a paragraph ran a line or two longer, which stretched the grid's rows and opened the space round the pictures (Press: a quote 532px tall against 399).
   Fitted so the lines break as the old ones do (About and Press measured block by block against the old site at 1280, 1440, 1680 and 1920, 2026-10-09): 92% of the size, letters 0.04em closer, the line's height kept. A text shorter than the old one shortens its section as surely as a longer one lengthens it, so this is the nearest fit, not the tightest. Fit again when the face changes. */
.page-converted .fe-text p, .page-converted .fe-text li { font-size: calc((16px + 0.4 * var(--u)) * 0.92); letter-spacing: -0.04em; line-height: calc((16px + 0.4 * var(--u)) * 1.8); }
.page-converted .fe-text p.t-large { font-size: calc((16px + 0.5 * var(--u)) * 0.92); line-height: calc((16px + 0.5 * var(--u)) * 1.8); } .page-converted .fe-text strong, .page-converted .fe-text b { font-weight: 700; }
.page-converted p a, .page-converted li a, .fe-text a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: opacity .3s ease; } .page-converted p a:hover, .fe-text a:not(.btn):hover { opacity: .7; }
.page-converted .fe-sec.th-light-bold .fe-text a:not(.btn), .page-converted .fe-sec.th-black .fe-text a:not(.btn), .page-converted .fe-sec.th-black .fe-text strong { color: #9C8B7E; }
/* buttons: no border, square, Baskerville; white on brown by default, and by their section */
.btn, .fe-sub .btn, .fe-form .btn, .page-converted .btn-light, .page-converted .btn-lg, .sch-btn { font-family: var(--button); font-weight: 400; font-size: calc(16px + 0.1 * var(--u)); line-height: 1.2; letter-spacing: 0.02em; text-transform: none; background: #9C8B7E; color: #fff; border: 0; border-radius: 0; padding: 0.8em 1.336em; text-decoration: none; transition: opacity .3s ease; }
.btn:hover, .fe-sub .btn:hover, .fe-form .btn:hover, .page-converted .btn-light:hover, .sch-btn:hover { opacity: .7; background: #9C8B7E; color: #fff; }
.page-converted .fe-sec.th-bright .btn, .page-converted .fe-sec.th-bright .btn:hover { background: #fff; color: #9C8B7E; }
.page-converted .fe-sec.th-white .btn, .page-converted .fe-sec.th-white-bold .btn, .page-converted .fe-sec.th-white .btn:hover, .page-converted .fe-sec.th-white-bold .btn:hover { background: #352D28; color: #fff; }
/* the bar */
.site-header.is-split { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; min-height: var(--hh); box-sizing: border-box; padding: 0 1vw; background: transparent; box-shadow: none; }
.site-header.is-split::after { display: none; }
.site-header.is-split .site-logo { grid-column: 2; grid-row: 1; justify-self: center; text-decoration: none; } .site-header.is-split .site-logo:hover { opacity: 1; }
.site-header.is-split .site-wordmark { font-family: var(--name); font-weight: 400; font-style: italic; font-size: calc(16px + 1.7 * var(--u)); line-height: 1.4; letter-spacing: normal; text-transform: none; color: #75685E; white-space: nowrap; }
.site-header.is-split .site-nav { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 19px; flex: none; }
.site-header.is-split .site-nav a:not(.btn), .site-folder-t { font-family: var(--body); font-weight: 400; font-size: calc(16px + 0.4 * var(--u)); line-height: 1.5; letter-spacing: normal; text-transform: none; color: #584D45; padding: 0; opacity: 1; background: none; border: 0; cursor: pointer; text-decoration: none; transition: opacity .3s ease; }
.site-header.is-split .site-nav a:not(.btn):hover, .site-folder-t:hover { opacity: .7; }
.site-header.is-split .site-nav a.is-current, .site-header.is-split .site-nav a.is-here, .site-header.is-split .site-folder-t.is-here { opacity: 1; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.site-header.is-split .site-nav .site-give-m { display: none; }
.site-folder { position: relative; }
.site-folder-m { position: absolute; top: 100%; left: -22.912px; margin-top: 6px; min-width: 200px; box-sizing: border-box; padding: 11.456px 22.912px; background: #fff; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 41; text-align: left; }
.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-header.is-split .site-nav .site-folder-m a:not(.btn) { color: #584D45; white-space: nowrap; line-height: 1.3; }
.site-header.is-split > .site-give { grid-column: 3; grid-row: 1; justify-self: end; box-sizing: border-box; width: 106px; text-align: center; font-size: 14px; padding: 15px 0; margin: 0; } /* the marks and Contact share the third column, so the two outer columns are equal and her name stands in the middle of the window (it stood 55px to the left while Contact had a column of its own) */
.site-social { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 18.5px; align-items: center; } .site-header.is-split > .site-social { margin-right: 124px; } .site-social a { color: #584D45; display: flex; transition: opacity .3s ease; } .site-social a:hover { opacity: .7; } .site-social svg { width: 29px; height: 29px; }
.site-header.is-split .site-burger { grid-column: 3; grid-row: 1; justify-self: end; } .site-header.is-split .site-burger span { background: #584D45; }
body.top-dark .site-header.is-split .site-wordmark, body.top-dark .site-header.is-split .site-nav > a:not(.btn), body.top-dark .site-folder-t, body.top-dark .site-header .site-social a { color: #fff; }
body.top-dark .site-header.is-split .site-burger span { background: #fff; }
body.top-ink .site-header.is-split .site-wordmark, body.top-ink .site-header.is-split .site-nav > a:not(.btn), body.top-ink .site-folder-t, body.top-ink .site-header .site-social a { color: #000; } body.top-light .site-header.is-split > .site-give { background: #7B6F66; } body.top-ink .site-header.is-split > .site-give { background: #352D28; } body.top-ink .site-header.is-split .site-burger span { background: #000; } /* over a plain white section (Albums) the old bar is black, its button dark */
@media (max-width: 900px) {
  .site-header.is-split { min-height: 92px; padding: 23px; grid-template-columns: 1fr auto; column-gap: 12px; }
  .site-header.is-split .site-logo { grid-column: 1; justify-self: start; position: relative; z-index: 32; }
  .site-header.is-split .site-burger { grid-column: 2; position: relative; z-index: 32; } .site-header.is-split > .site-give { display: none; }
  .site-header.is-split > .site-social { margin-right: 0; } .site-header .site-social { display: none; } body.nav-open .site-header .site-social { display: flex; position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 16px 0 56px; background: #fff; justify-self: stretch; justify-content: center; z-index: 31; gap: 26px; } /* the marks stand on a band of the menu's own white at its foot, and the list scrolls beneath it: on a short window the Contact button lay under the marks */
  body.nav-open .site-header.is-split::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 92px; background: #fff; z-index: 31; } /* the open menu's bar on white, between the list (30) and her name and the close mark (32): scrolled to its end on a small upright phone the list ran through her name */
  body:not(.nav-open) .site-header.is-split .site-nav .site-folder-m { visibility: hidden; } /* with the menu closed its three Media links were unseen but took taps and the Tab key in the middle of the window ("visibility: visible" on a child shows it inside a hidden parent): a tap on Purchase could open Videos (review of 2026-10-09) */
  .site-header.is-split .site-nav { position: fixed; inset: 0; z-index: 30; box-sizing: border-box; padding: 96px 0 120px; overflow-y: auto; overscroll-behavior: contain; background: #fff; flex-direction: column; justify-content: safe center; align-items: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } /* on a short window (a phone held sideways) the open menu starts under the bar and scrolls, where its first and last items were cut off */
  .site-header.is-split .site-nav a:not(.btn), .site-folder-t { font-size: 30px; }
  .site-header.is-split .site-nav .site-give-m { display: inline-block; position: static; transform: none; margin: 14px 0 0; min-width: 0; font-size: 20px; padding: 14px 30px; background: #9C8B7E; color: #fff; border: 0; }
  body.nav-open .site-header.is-split .site-nav { opacity: 1; visibility: visible; }
  body.nav-open .site-header.is-split .site-wordmark, body.nav-open .site-header.is-split .site-nav > a:not(.btn), body.nav-open .site-folder-t, body.nav-open .site-header .site-social a { color: #584D45; } body.nav-open .site-header.is-split .site-burger span { background: #584D45; }
  .site-folder { text-align: center; } .site-folder-m { position: static; margin: 8px 0 0; min-width: 0; opacity: 1; visibility: visible; background: none; box-shadow: none; padding: 0; align-items: center; gap: 6px; } .site-header.is-split .site-nav .site-folder-m a:not(.btn) { font-size: 22px; }
  @media (max-height: 648px) { .site-header.is-split .site-nav { gap: 10px; padding-bottom: 96px; } .site-header.is-split .site-nav a:not(.btn), .site-folder-t { font-size: 24px; } .site-header.is-split .site-nav .site-folder-m a:not(.btn) { font-size: 19px; } .site-header.is-split .site-nav .site-give-m { margin-top: 8px; font-size: 18px; padding: 11px 26px; } body.nav-open .site-header .site-social { padding: 12px 0 22px; } } /* a short window (a phone held sideways, a small phone's visible part): smaller words and a lower band; written after the sizes it changes, which had been winning over it. 648px is the height the larger sizes need: from 621 to 628 the Contact button rested partly under the band */
}
/* the old site's measure (2026-10-09): the grid stands 1vw from the window's edges (6vw on a phone), not the 5vw of the other sites; a section's room above and below is its own (--pad, measured per section on the old pages, a little over twice that on a phone) */
.page-converted .fe { --gutter: 1vw; --cw: min(1695px, calc(100vw - var(--gutter) * 2)); }
@media (min-width: 768px) { .page-converted .fe { grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, calc((1695px - var(--cgap, var(--gap, 11px)) * 23) / 24))) minmax(var(--gg), 1fr); } } /* the old site's content stops growing at 1695px and is centred beyond (measured to 2400) */ .page-converted .fe-sec { padding: var(--pad, 3.3vw) 0; }
@media (max-width: 767px) { .page-converted .fe { --gutter: 6vw; } .page-converted .fe-sec { padding: calc(var(--pad, 3.3vw) * 2.15) 0; } }
/* sections begin under the bar, which floats over the first and leaves it room, as Squarespace does */
.page-converted .fe-sec.is-first { min-height: var(--minh, auto); padding-top: calc(var(--hh) + var(--pad, 0vw)); }
.page-converted .fe-sec[style*="clip-path"] { padding-bottom: calc(var(--pad, 3.3vw) + 2vw) !important; } @media (max-width: 767px) { .page-converted .fe-sec[style*="clip-path"] { padding-bottom: calc(var(--pad, 3.3vw) * 2.15 + 2vw) !important; } } /* a section that ends in a shaped edge keeps its own room under its content as well as the edge's 2vw (the renderer writes the edge's height alone, inline; both of her shaped edges are 2vw); measured on About: 1511px there, 1462 here without this */
/* the press quotes: one line each, italic, with its paper under it */
.fe-banner { --bh: 0vh; } .fe-banner .slider-track { min-height: 0; } .fe-banner .fe-li { min-height: 155px; box-sizing: border-box; padding: calc(2vw + 40px) 98px 34px; /* the curve of the section above lies 2vw over this band: the words begin clear of it */ text-align: center; display: flex; align-items: center; justify-content: center; } .fe-banner .fe-li-text { background: none; box-shadow: none; padding: 0; max-width: none; width: 100%; } .page-converted .fe-sec .fe-banner .fe-li h3 { font-style: italic; font-size: calc(16px + 0.8 * var(--u)); color: #4A3D33; margin: 0 0 12px; } .page-converted .fe-sec .fe-banner .fe-li .fe-text, .page-converted .fe-sec .fe-banner .fe-li .fe-text p { color: #352D28; margin: 0; } .page-converted .fe-sec .fe-banner .fe-li .fe-text a:not(.btn) { color: inherit; } /* darker than the old site's #726053 and #564F4A (Christos, 2026-10-09: "the text needs to be darker") */
.fe-banner .slider-btn { width: 60px; height: 60px; border-radius: 50%; background: #9C8B7E; color: #fff; border: 0; opacity: 1; }
/* a grid of pictures with their names under them (the essays on Writings, the four Collaborations on About) */
.fc-grid, .fc-grid.is-auto { display: grid; columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--g, 60px); width: 100%; } .fc-item { display: block; min-width: 0; text-decoration: none; color: inherit; transition: opacity .3s ease; } .fc-item:hover { opacity: .8; }
.fc-item img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; } .fc-title { display: block; margin-top: 15px; font-size: 20px; line-height: 1.2; text-align: center; }
@media (max-width: 767px) { .fc-grid, .fc-grid.is-auto { grid-template-columns: 1fr; } }
/* a recording, in the design of the Musaics album player without its list (Christos, 2026-10-09): the cover is part of the player; under it the piece and who plays, then the play button at the left of a 3px line with the time at the line's two ends. No box.
   The player script's row (.ap) is laid out by this block's own grid (display: contents). Without scripts the browser's own player shows under the name. */
.fe-aud { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 6px; row-gap: 0; align-items: center; padding: 0; background: none; border: 0; text-align: left; color: inherit; }
.fe-aud-cover { grid-column: 1 / -1; grid-row: 1; margin: 0 0 16px; } .fe-aud-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } /* a cover is drawn square: three of the six files are a few thousandths off, which stepped the words under them by up to 5px between neighbours */
.fe-audio-t { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: 0 0 4px; font-size: 1em; line-height: 1.35; overflow-wrap: anywhere; } .fe-audio-t em { display: block; margin-top: 2px; font-size: 0.82em; font-style: italic; opacity: .7; } /* the piece and who plays are shown whole, on as many lines as they need (they were cut with an ellipsis on five cards of six) */
.fe-b.fe-audio > .fe-aud.has-cover { flex: 1 1 auto; grid-template-rows: auto 1fr auto auto; } /* the cards of one row share their rows, so the play buttons stand on one line whatever the names' lengths */
.fe-aud .ap { display: contents; }
.fe-aud .ap-btn { grid-column: 1; grid-row: 3; width: 48px; height: 48px; margin: 0 0 0 -11px; opacity: 1; transition: opacity .15s; } .fe-aud .ap-btn:hover { opacity: .6; } .fe-aud .ap-btn svg { width: 30px; height: 30px; }
.fe-aud .ap-line { grid-column: 2; grid-row: 3; height: 31px; margin: 0; } .fe-aud .ap-track, .fe-aud .ap-buf, .fe-aud .ap-played { top: 14px; height: 3px; border-radius: 0; } .fe-aud .ap-track { opacity: 0.18; } .fe-aud .ap-line:hover .ap-track, .fe-aud .ap-line:hover .ap-buf, .fe-aud .ap-line:hover .ap-played, .fe-aud .ap.is-scrubbing .ap-track, .fe-aud .ap.is-scrubbing .ap-buf, .fe-aud .ap.is-scrubbing .ap-played { top: 14px; height: 3px; } .fe-aud .ap-dot { top: 15.5px; } .fe-aud .ap-tip { bottom: 26px; }
.fe-aud .ap-time { grid-column: 2; grid-row: 4; display: flex; justify-content: space-between; padding: 0; margin-top: -6px; font-family: var(--body); font-size: 16px; line-height: 1.2; opacity: .75; } .fe-aud .ap-time i { display: none; }
.fe-aud audio:not([data-ap]) { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 8px; }
.fe-aud .ap-line:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .fe-aud .ap.is-error .ap-btn, .fe-aud .is-error .ap-btn { opacity: .3; cursor: default; } .fe-aud .is-error .ap-time { display: block; grid-column: 1 / -1; margin-top: 2px; white-space: normal; font-style: italic; } /* across the card and wrapping: on a tablet it ran out of its card and into the next */
/* a card: a block may stand in from its cell's sides (--inset, from the page's record) so that its words lie inside a panel laid behind them; a recording's cover runs to the card's edges all the same */
.fe-b.has-inset { box-sizing: border-box; padding-left: var(--inset); padding-right: var(--inset); } .fe-b.has-inset .fe-aud-cover { margin-left: calc(-1 * var(--inset)); margin-right: calc(-1 * var(--inset)); }
@media (min-width: 768px) and (max-width: 900px) { .fe-b.has-inset { --inset: 10px !important; } } /* three cards across on a tablet leave little room: the words stand in 10px there, not 22 (the 22 is written on the block from the page's record, hence !important) */
.fe-b.fe-button.has-inset { padding-bottom: 20px; } /* a card's button: as much room under it, to the panel's foot, as over it to the last line of the words (11px of grid, the button's own 17, and the line's leading: 37 to 39px from a phone to 2000px). The card's rows are as tall as what they hold (import/tanya/conv/finish.py), so that holds on the longest card of a line; a shorter card's button keeps level with its neighbours' */
/* films and their lines */
.fe-vcap { margin-top: 0; text-align: center; } .page-converted .fe-text.fe-vcap p { margin: 0; font-size: calc(24px * 0.92); line-height: 43.2px; letter-spacing: -0.04em; font-weight: 500; } /* the old page's 24px at every width, through the same fit as the other text (92%, letters 0.04em closer, the line's height kept): at the full 24px most captions took two lines in the stand-in face where the old ones take one. Fit again when the face changes */
/* the footer: one line, as the bar is one line (Christos, 2026-10-09: smaller words, less room; it stood 262px tall at 1440 and 509 on a phone, two captions each over its own row). Follow Tanya and the marks at the left, the sign-up line with its field and button at the right, the same 1vw from the window's edges as the bar; under 1100px the sign-up line stands over the marks, and on a phone the field and button share a line */
.site-footer.is-follow { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 16px 48px; background: #D5D2CD; color: #352D28; padding: 22px 1vw; text-align: left; font-size: calc(16px + 0.2 * var(--u)); line-height: 1.4; }
.site-plain { background: #D5D2CD; color: #352D28; border-top: 1px solid rgba(53, 45, 40, 0.18); padding: 18px 23px 24px; font-size: 18px; letter-spacing: normal; } /* the menu's pages with scripts off: the footer's ground and ink */
.site-footer.is-follow p { margin: 0; font-size: inherit; line-height: inherit; color: #352D28; white-space: nowrap; }
.site-footer.is-follow .sf-follow { display: flex; align-items: center; gap: 18px; }
.site-footer.is-follow .site-social { grid-column: auto; grid-row: auto; justify-self: auto; display: flex; justify-content: center; gap: 14px; margin: 0; } .site-footer.is-follow .site-social a { display: flex; color: #352D28; } .site-footer.is-follow .site-social svg { width: 22px; height: 22px; }
.site-footer.is-follow .sf-news { position: relative; min-width: 0; }
.site-footer.is-follow .fe-sub { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 12px 22px; width: auto; padding: 0; }
.site-footer.is-follow .fe-sub h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-footer.is-follow .fe-sub .fe-signup-row { flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 0; padding: 0; }
.site-footer.is-follow .fe-sub input[type="email"] { flex: 0 1 232px; width: 232px; min-width: 0; height: 46px; margin: 0; padding: 0 16px; font-size: inherit; line-height: 1.2; }
.site-footer.is-follow .fe-sub .btn { flex: none; width: 104px; height: 46px; margin: 0; padding: 0 6px; font-size: 14px; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; } .site-footer.is-follow .fe-sub .btn:disabled { font-size: 11px; letter-spacing: 0.02em; opacity: 1; } /* one width, at rest and while the address is sent: "One moment…" is 124px of ink at the button's own size and ran past it on a narrow phone, or widened it and moved the row; while it waits (the button is disabled) its words are set smaller */
.site-footer.is-follow .fe-signup-msg { position: absolute; right: 0; top: 100%; margin: 3px 0 0; min-height: 0; font-size: 14px; line-height: 1.2; white-space: nowrap; } /* what the form answers stands under the field, in the footer's own foot, so nothing moves when it arrives */
.fe-sub .fe-signup-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.fe-sub input[type="email"] { width: 252px; height: 68px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0; background: #fff; color: #000; padding: 0 32px; font: inherit; font-size: calc(16px + 0.5 * var(--u)); }
.fe-sub input[type="email"]::placeholder { color: rgba(0, 0, 0, 0.35); }
.fe-sub .btn { width: 115px; height: 58px; padding: 0; font-size: 16px; letter-spacing: 0.32px; text-transform: uppercase; }
.fe-signup-msg, .fe-form-msg { margin-top: 14px; min-height: 1.2em; color: inherit; font-size: 18px; }
@media (max-width: 1099px) { .site-footer.is-follow { flex-direction: column; justify-content: center; gap: 16px; padding: 24px 23px 26px; text-align: center; } .site-footer.is-follow .sf-news { order: -1; max-width: 100%; }
  .site-footer.is-follow { reading-flow: flex-visual; } /* the Tab key meets the field before the marks, as they are drawn (Chrome; elsewhere the marks come first) */
  .site-footer.is-follow .fe-sub { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 22px; } /* the line and its field side by side; what the form answers on a line of its own beneath, which is no line at all while it is empty */
  .site-footer.is-follow .fe-signup-msg { position: static; grid-column: 1 / -1; margin: 0; white-space: normal; text-align: center; } .site-footer.is-follow .fe-signup-msg:not(:empty):not(:has(> noscript)) { margin-top: 8px; } .site-footer.is-follow .fe-signup-msg noscript { display: block; margin-top: 8px; } } /* the line holds a <noscript> sentence for a browser with scripts off (2026-10-09), so it is never :empty: with scripts on that sentence draws nothing and must cost no room (the footer stood 8px taller) */
@media (max-width: 767px) { .site-footer.is-follow { gap: 20px; padding: 28px 23px 30px; } .site-footer.is-follow .sf-news { width: 100%; max-width: 420px; } .site-footer.is-follow .fe-sub { grid-template-columns: minmax(0, 1fr); } /* minmax(0, …): the field's own width must not set the column's (it ran 7px past a 320px window) */
  .site-footer.is-follow .fe-sub p { margin: 0 0 14px; white-space: normal; text-align: center; } .site-footer.is-follow .fe-sub input[type="email"] { flex: 1 1 auto; width: auto; } }
/* the Concerts page: her performances on a panel over the photograph */
.page-schedule main { min-height: max(700px, 78vh); display: flex; align-items: center; }
.page-schedule main::before { content: ""; position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background: #171310 url("/assets/img/schedule-bg.jpg") 28% 30% / cover no-repeat; } /* the photograph stays steady, the size of the window, and the listings scroll over it (Christos, 2026-10-09: "the background on the concerts page needs to stay steady, and the concerts listings need to scroll down"). It was the ground of the whole list, so with eight performances it was stretched over 2,900px and moved with them. A layer of its own rather than background-attachment: fixed, which an iPhone does not keep steady; 100lvh, so it does not jump when a phone's address bar hides; under everything (-1), so the footer slides up over it */
.sch { width: 100%; } .sch-in { box-sizing: border-box; width: min(44.4vw, 760px); margin: 0 5.2vw 0 auto; padding: 60px 40px 64px; text-align: center; background: rgba(110, 92, 80, 0.32); border-radius: 22px; color: #fff; } .page-schedule main { padding: 150px 0 90px; box-sizing: border-box; }
.sch-head { font-style: italic; color: #C9B9AC; margin: 0 0 40px; }
.sch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 38px; }
.sch-date { font-family: var(--body); font-weight: 600; font-size: 1em; line-height: 1.8; color: #fff; margin: 0; }
.sch-what { margin: 0 0 12px; color: #fff; } .sch-desc { max-width: 520px; margin: 0 auto 14px; font-size: 0.86em; line-height: 1.6; color: rgba(255, 255, 255, .85); } .sch-desc p { margin: 0 0 10px; } .sch-desc p:last-child { margin-bottom: 0; }
.sch-more { display: inline-block; font-style: italic; color: #C9B9AC; } .sch-btn { display: inline-block; margin-top: 4px; font-size: 16px; padding: 12px 26px; } .sch-none { margin: 0; }
@media (max-width: 900px) { .page-schedule main { padding: 120px 0 60px; } .page-schedule main::before { background-position: 40% 20%; } .sch-in { width: auto; margin: 0 23px; padding: 40px 22px 46px; background: rgba(60, 48, 42, 0.62); } }
/* a contact form: lines to write on */
.fe-form { display: flex; flex-direction: column; gap: 22px; width: 100%; text-align: left; color: #000; font-size: calc(16px + 0.1 * var(--u)); line-height: 1.8; } /* the old form's sizes: field names 17.7px at 1440 (17 on a phone), the two under-labels 16px, the message box about 100px */
.fe-form .ff { display: block; border: 0; margin: 0; padding: 0; min-width: 0; } .fe-form legend { padding: 0; margin: 0 0 2px; }
.fe-form .ff > span { display: block; margin: 0; } .fe-form .ff-row label > span { display: block; margin: 0 0 2px; font-size: 16px; line-height: 1.6; white-space: nowrap; } .ff-req { display: inline; font-size: 16px; opacity: .7; margin-left: 4px; } .fe-form .ff-row .ff-req { font-size: 1em; }
.fe-form .ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fe-form input:not(.hp):not([type="checkbox"]), .fe-form textarea { width: 100%; box-sizing: border-box; background: transparent; color: #000; border: 0; border-bottom: 1px solid #000; border-radius: 0; padding: 4px 1px; min-height: 52px; font: inherit; }
.fe-form textarea { min-height: 100px; height: 100px; resize: vertical; } .fe-form input:focus, .fe-form textarea:focus { outline: none; border-bottom-color: #9C8B7E; box-shadow: 0 1px 0 #9C8B7E; }
.fe-form input:not(.hp):not([type="checkbox"]), .fe-form textarea { font-size: calc(16px + 0.4 * var(--u)); } .fe-form .is-bad input, .fe-form .is-bad textarea { border-bottom-color: #c0392b; }
.fe-form .ff-check { display: flex; align-items: center; gap: 10px; margin-top: -12px; font-size: 16px; cursor: pointer; } .fe-form .ff-check input { width: 15px; height: 15px; margin: 0; accent-color: #9C8B7E; flex: none; } .fe-form .ff.ff-check > span { margin: 0; }
.fe-form .btn, .page-converted .fe-sec .fe-form .btn, .page-converted .fe-sec .fe-form .btn:hover { align-self: flex-start; background: #9C8B7E; color: #fff; } .fe-form-done { padding: 30px 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* an essay: the brown ground, one column, the title over it; Previous and Next at its foot */
.page-essay main { background: #9C8B7E; } .page-essay .fe-sec.ps { --pad: 0vw; padding: 0; color: #fff; }
.page-essay .ps-in, .page-essay .ps-in.is-wide, .page-essay figure.ps-in { width: min(73.5vw, 1695px); max-width: none; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 0; padding-right: 0; }
.page-essay .fe-sec.ps.fe-sec-heading { padding-top: 107px; } .page-essay .fe-sec-heading h1 { margin: 0 0 0.5em; }
.page-essay .fe-sec.ps.fe-sec-text { padding: 17px 0; } .page-essay .fe-sec.ps.fe-sec-image { padding: 17px 0; } .page-essay .fe-sec.ps.fe-sec-text:has(+ .es-turns), .page-essay .fe-sec.ps.fe-sec-text:last-child { padding-bottom: 34px; } /* Squarespace's own 17px a block: 34px between two blocks and under the opening picture, as measured on the old pages (ours stood 68 and 50 apart) */ .page-essay .ps-img img { width: 100%; height: auto; display: block; }
.page-essay .ps-fig figcaption { margin-top: 14px; text-align: center; font-style: italic; font-size: 0.8em; color: #fff; }
.page-essay .ps-fig .ps-img { max-width: var(--pw, none); margin-left: auto; margin-right: auto; } /* a picture is never drawn past its own pixels (--pw, from the page's record) */
.ps-in.has-aside::after { content: ""; display: block; clear: both; } .ps-aside { margin: 0 0 22px; } .ps-aside .ps-img { max-width: var(--pw, none); margin: 0 auto; } .ps-aside img { display: block; width: 100%; height: auto; } .ps-aside figcaption { margin-top: 10px; text-align: center; font-style: italic; font-size: 0.8em; }
@media (min-width: 768px) { .ps-aside { width: calc((100% + 34px) * var(--span, 6) / 12 - 34px); max-width: var(--pw, none); margin-top: 0.5em; margin-bottom: 14px; } .ps-aside.is-left { float: left; margin-right: 34px; } .ps-aside.is-right { float: right; margin-left: 34px; } } /* a picture the old page set into the text: so many twelfths of the column (239px for three, 512 for six, of 1058 at 1440, as measured there), the words that follow running beside it; on a phone it stands above them */
.page-essay .fe-sec.ps.fe-sec-button { padding: 20px 0 40px; } .page-essay .fe-sec-button .btn { background: #fff; color: #9C8B7E; }
.es-turns { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: #9C8B7E; padding: 46px 5vw 40px; }
.es-turn { display: flex; flex-direction: column; max-width: 46%; color: #fff; text-decoration: none; transition: opacity .3s ease; } a.es-turn:hover { opacity: .7; } .es-turn.is-next { text-align: right; margin-left: auto; }
.es-turn span { font-size: 0.7em; line-height: 1.6; opacity: .85; } .es-turn b { font-family: var(--head); font-weight: 500; font-size: calc(16px + 1.2 * var(--u)); line-height: 1.1; }
@media (max-width: 767px) { .page-essay .ps-in, .page-essay .ps-in.is-wide, .page-essay figure.ps-in { width: calc(100% - 46px); } .page-essay .fe-sec.ps.fe-sec-heading { padding-top: 115px; } .es-turns { padding: 30px 23px 34px; align-items: flex-start; } }
/* Not found, and the other plain pages */
body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } /* every page fills the window and the footer rests at its foot: with the footer 90px tall, Concerts and (on a tall window) Contact ended short and showed the page's white under it */
.page-plain main { background: #fff; color: #564F4A; } .plain { padding: 170px 0 110px; text-align: center; } .plain h1 { color: #726053; } .plain a { color: inherit; }

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