/* The Classics Department — site styles
   Colours and fonts are tokens: change them here to retheme the whole site. */

:root {
  --night: #070b1a;        /* deep midnight blue page background */
  --night-2: #0c1230;      /* tinted bands */
  --night-3: #121a3e;
  --bone: #eeeae4;
  --mist: #a9adc4;
  --rule: #1d2650;

  --violet: #4437c9;       /* brand violet, from the emblems */
  --violet-lit: #8b80ff;   /* violet for text on black */
  --gold: #d9b25e;         /* primary accent: gold leaf */
  --gold-lit: #f2d68f;
  --gold-deep: #a97c2e;
  /* Gold leaf: a burnished gradient with a fine speckled texture laid over it */
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .06 0 0 0 .7 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(105deg, #b48530 0%, #f3dc98 18%, #c99b42 34%, #fbe9b0 50%, #b8873a 66%, #ecd08a 82%, #a97c2e 100%);
  --alien: #9cc4ff;        /* secondary accent: pale blue */

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-label: "Tenor Sans", "Optima", "Gill Sans", sans-serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Optima", system-ui, sans-serif;

  --max: 1240px;
  /* Every page's first section (photo banner or title block) is this tall, so nothing jumps between pages */
  --banner-h: clamp(460px, calc(100vh - 68px), 880px);
  --banner-h: clamp(460px, calc(100svh - 68px), 880px);   /* svh: the height with the phone's browser bars showing, so titles at the foot of a banner are never hidden behind them */
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--gold-lit); }
::selection { background: var(--gold); color: var(--night); }

/* Gold-leaf text: the gradient and texture show through the letters */
.label:not(.alien), .nav a[aria-current="page"] {
  color: var(--gold); background: var(--leaf); background-size: 140px 140px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--bone); color: var(--night); padding: 8px 12px; z-index: 50; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--night) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }

.logo { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .08em; text-decoration: none; line-height: 1.1; }
.logo:hover { color: var(--bone); }

.nav { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.nav a { font-family: var(--font-label); font-size: .8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 6px 0; }


.nav-toggle { display: none; background: none; border: 1px solid var(--rule); color: var(--bone); font-family: var(--font-label);
  font-size: .75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--night); border-bottom: 1px solid var(--rule); }
  .nav.open { display: flex; }
  .nav a { padding: 16px var(--gutter); border-top: 1px solid var(--rule); }
}

/* ---------- Type ---------- */

.label { font-family: var(--font-label); font-size: .78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 16px; }
.label.alien { color: var(--alien); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 8.5vw, 7rem); text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h3 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
h4 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

.lede { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.8vw, 2.25rem); line-height: 1.3; text-wrap: balance; }
.muted { color: var(--mist); }
.small { font-size: .9rem; }

/* ---------- Sections ---------- */

section { padding: clamp(64px, 10vw, 128px) 0; }
.rule-top { border-top: 1px solid var(--rule); }
.tint { background: var(--night-2); }

.btn {
  display: inline-block; padding: 14px 26px; border: 1px solid var(--bone);
  font-family: var(--font-label); font-size: .8rem; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn { border: 1px solid transparent; border-image: linear-gradient(105deg, #b48530, #f3dc98 25%, #c99b42 45%, #fbe9b0 60%, #a97c2e) 1;
  color: var(--gold); background: transparent; font-weight: 400; transition: background-color .3s; }
.btn > span { background: var(--leaf); background-size: 140px 140px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* hover: the body takes on a very faint dark lavender */
.btn:hover { color: var(--gold); background-color: rgba(160, 140, 235, .1); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero */
.hero { position: relative; height: var(--banner-h); min-height: min-content; display: grid; align-items: end; padding: 0; overflow: hidden; isolation: isolate; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,11,26,.25) 0%, rgba(7,11,26,.15) 40%, rgba(7,11,26,.93) 100%); }
.hero .wrap { width: 100%; padding-bottom: clamp(48px, 8vw, 96px); }
.hero h1 { margin-bottom: .2em; }
.hero .tagline { font-family: var(--font-label); font-size: clamp(.85rem, 1.6vw, 1.1rem); letter-spacing: 0.18em; text-transform: uppercase; }
.hero > img.focus-right { object-position: 62% 35%; }
/* Keep the top of the photo in view */
.hero.top > img, .hero > img.top { object-position: center top; }
.hero > img.low { object-position: center 85%; }

.page-head { min-height: var(--banner-h); display: grid; align-content: end; padding: 0 0 clamp(48px, 8vw, 96px); }
.page-head > .wrap, .hero > .wrap { width: 100%; }
.page-head.centered { align-content: center; text-align: center; padding-top: clamp(48px, 8vw, 96px); }

/* Split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Fact list */
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts li > span:first-child { font-family: var(--font-label); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); padding-top: 3px; }

/* Quotes */
.quote { margin: 0; }
.quote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; margin: 0 0 .6em; text-wrap: pretty; }
.quote footer, .quote cite { font-family: var(--font-label); font-style: normal; font-size: .78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alien); }
.quote.big p { font-size: clamp(1.7rem, 3.8vw, 3rem); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); margin-top: 40px; }
.quotes .quote { border-top: 1px solid var(--rule); padding-top: 24px; }
.quotes .quote p { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* Image mosaic + gallery */
.gallery { columns: 3 280px; column-gap: 12px; margin-top: 40px; }
.gallery a { display: block; margin-bottom: 12px; break-inside: avoid; overflow: hidden; }
.gallery img { width: 100%; transition: transform .5s ease, filter .5s ease; filter: saturate(.9); }
.gallery a:hover img { transform: scale(1.03); filter: saturate(1.1); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(4,3,6,.95); display: none; align-items: center; justify-content: center; padding: 56px 16px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--bone); font-size: 2rem; cursor: pointer; padding: 12px 18px; font-family: var(--font-label); }
.lightbox .close { top: 8px; right: 8px; }
.lightbox .prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 4px; top: 50%; transform: translateY(-50%); }

/* Project index */
.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li + li { border-top: 1px solid var(--rule); }
.project-list a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center;
  padding: clamp(32px, 5vw, 56px) 0; text-decoration: none; }
.project-list .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--night-2); }
.project-list .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.project-list a:hover .thumb img { transform: scale(1.04); }
.project-list a:hover h2 { color: var(--gold-lit); }
.project-list h2 { text-transform: uppercase; transition: color .2s; }
.project-list p { color: var(--mist); margin: 0; }
.project-list .more { display: inline-block; margin-top: 20px; font-family: var(--font-label); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); }
@media (max-width: 820px) { .project-list a { grid-template-columns: 1fr; } }

/* Cards (characters, people) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: 40px; }
.card { margin: 0; }
.card .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-2); margin-bottom: 14px; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-size: 1.25rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .02em; }
.card p { margin: 0; font-family: var(--font-label); font-size: .76rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--alien); }

.person { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.person + .person { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--rule); }
.person .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-2); }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person h2 { text-transform: uppercase; margin-bottom: .2em; }
@media (max-width: 720px) { .person { grid-template-columns: 1fr; } .person .ph { max-width: 340px; } }

/* Emblem tiles (services) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 48px; }
.tile { background: var(--night); padding: clamp(28px, 4vw, 44px); }
.tile img { width: 112px; height: 112px; margin-bottom: 24px; }
.tile h3 { margin-bottom: .5em; }
.tile p { color: var(--mist); margin: 0; }

.endorse { display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; }
.endorse + .endorse { margin-top: 56px; }
.endorse img { width: 96px; height: 96px; border-radius: 50%; }
.endorse .quote p { font-size: clamp(1.25rem, 2.1vw, 1.65rem); }
.testimonials .quote p { font-style: normal; }
@media (max-width: 560px) { .endorse { grid-template-columns: 64px 1fr; gap: 18px; } .endorse img { width: 64px; height: 64px; } }

.wishlist { list-style: none; padding: 0; margin: 24px 0 0; }
.wishlist li { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; padding: 10px 0 10px 32px; position: relative; }
.wishlist li::before { content: "✦"; color: var(--alien); position: absolute; left: 0; font-size: .8em; top: 14px; }

/* Credits */
.credits { columns: 2 280px; column-gap: 48px; }
.credits div { break-inside: avoid; padding: 8px 0; }
.credits dt { font-family: var(--font-label); font-size: .74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alien); }
.credits dd { margin: 2px 0 0; }

/* Stat banner */
.stat { font-family: var(--font-display); font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.15; text-wrap: balance; }
.stat em { color: var(--alien); font-style: normal; white-space: nowrap; }

/* Sign-up band */
.signup { text-align: center; background:
  radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--violet) 55%, transparent), transparent 65%), var(--night); }
.signup h2 { text-transform: uppercase; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 48px 0 64px; color: var(--mist); font-size: .92rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: end; }
.site-footer .logo { font-size: 1.3rem; color: var(--bone); display: block; margin-bottom: 6px; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-label); font-size: .78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer nav a { text-decoration: none; }
a.email { color: var(--violet-lit); text-decoration: underline; text-decoration-color: currentColor; }
a.email:hover { color: var(--gold-lit); }

/* ---------- Home ---------- */

.manifesto { font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1.02; max-width: 15em; margin-bottom: .5em; }
.intro { max-width: 30em; }

/* ---------- Carousel ---------- */

.carousel { position: relative; }
.carousel .track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track:focus-visible { outline: 2px solid var(--alien); outline-offset: 4px; }
.carousel a { flex: 0 0 auto; scroll-snap-align: start; height: var(--car-h); background: var(--night-2); }
.carousel img { height: 100%; width: auto; max-width: none; transition: filter .4s; }
.carousel a:hover img { filter: brightness(1.12); }
.carousel.large { --car-h: min(72vh, 680px); }
.carousel.medium { --car-h: min(62vh, 540px); }
@media (max-width: 600px) { .carousel.large { --car-h: 60vh; } .carousel.medium { --car-h: 340px; } }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bone) 50%, transparent); background: color-mix(in srgb, var(--night) 70%, transparent);
  color: var(--bone); font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.car-btn:hover { background: var(--bone); color: var(--night); }
.car-btn.prev { left: 12px; }
.car-btn.next { right: 12px; }
.car-btn[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .car-btn { display: none; } }

/* ---------- Project panels ---------- */

.panels { list-style: none; margin: 0; padding: 0; }
.panel { position: relative; display: grid; align-items: end; min-height: min(72vh, 680px); overflow: hidden; text-decoration: none; isolation: isolate; }
.panel > img, .panel > .placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); }
.panel h2, .panel p { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.panel:hover > img { transform: scale(1.03); }
.panel .wrap { width: 100%; padding-bottom: clamp(40px, 7vw, 88px); }
.panel h2 { font-size: clamp(2.6rem, 8.2vw, 7.2rem); text-transform: uppercase; letter-spacing: .01em; line-height: .95; margin-bottom: .2em; transition: color .3s; }
.panel p { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(.85rem, 1.5vw, 1.15rem); max-width: 36em; margin: 0; color: var(--bone); }
.panel:hover h2 { color: var(--gold); background: var(--leaf); background-size: 140px 140px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }


/* Stand-in artwork until a photo exists */
.placeholder-art { background:
  radial-gradient(ellipse at 50% 30%, rgba(232,184,74,.45), transparent 55%),
  radial-gradient(ellipse at 20% 90%, rgba(233,38,104,.25), transparent 50%),
  linear-gradient(160deg, #2a1d0a, #0a0f24 70%); }
.hero > .placeholder-art { position: absolute; inset: 0; z-index: -2; }

/* ---------- Events page ---------- */

.serif-prose p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.45; }
.serif-prose h2, .serif-prose h3 { color: var(--alien); }
.gallery.four { columns: 4 220px; }

/* ---------- Psychomagic 9 ---------- */

/* The Nine: always three across, tighter, taller cards with softly rounded corners */
.cards.nine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(4px, .7vw, 8px); }
.cards.nine .card .ph { aspect-ratio: 3 / 4; border-radius: 5px; }
.cards.nine .card h3 { margin-top: 4px; }
@media (max-width: 600px) { .cards.nine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Quote set over a full-width photo */
/* The whole photo shows; the quote sits in the dark space above the dancer */
.photo-quote { position: relative; display: grid; align-items: start; aspect-ratio: 16 / 9; max-height: 900px; overflow: hidden; isolation: isolate;
  padding-top: clamp(40px, 5vw, 72px); }
.photo-quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: -2; }
.photo-quote::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,11,26,.7) 0%, rgba(7,11,26,.25) 32%, rgba(7,11,26,0) 45%); }
.photo-quote .quote p { font-size: clamp(1.6rem, 3vw, 2.6rem); }
@media (max-width: 760px) {
  .photo-quote { display: block; aspect-ratio: auto; padding: 56px 0 0; }
  .photo-quote > img { position: static; height: auto; margin-top: 24px; }
  .photo-quote::after { display: none; }
}
.photo-quote .wrap { width: 100%; }
.photo-quote .quote p { max-width: 22em; }



/* Mailing-list band: romantic script heading */
:root { --font-script: "Imperial Script", "Snell Roundhand", "Apple Chancery", cursive; }
.signup { padding-top: clamp(24px, 4vw, 56px); }
.signup .script, .script, .script-quote p { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0;
  color: #8e2232;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .02 0 0 0 0 .04 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(ellipse 30% 70% at 20% 45%, rgba(214,86,100,.85), transparent 70%),
    radial-gradient(ellipse 26% 80% at 60% 55%, rgba(200,70,86,.7), transparent 70%),
    radial-gradient(ellipse 20% 60% at 86% 40%, rgba(208,78,92,.65), transparent 70%),
    linear-gradient(90deg, #7c1e2c 0%, #a52a3c 14%, #b3304a 50%, #a52a3c 86%, #7c1e2c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: clamp(3rem, 7.6vw, 6.6rem); line-height: 1.15; max-width: 13em; margin-inline: auto; }

/* Lynchian blue velvet curtain behind "Don't see what you want?" */
.velvet { background:
  linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.45) 24%, rgba(7,11,26,.35) 50%, rgba(7,11,26,.45) 76%, var(--night) 100%),
  url("img/velvet.webp") center / cover no-repeat, var(--night); }

/* Large two-up photo grid (MIRI book launch) */
.gallery.two { columns: 2 340px; column-gap: 16px; }
.gallery.two a { margin-bottom: 16px; }

/* ---------- Psychomagic 9 extras ---------- */

:root { --p9: #0f0b27; }   /* a touch more purple than the page, to meet the banner photo */
.hero.fade-p9::after { background: linear-gradient(180deg, rgba(15,11,39,.2) 0%, rgba(15,11,39,.1) 40%, rgba(15,11,39,.75) 80%, var(--p9) 100%); }
.p9-intro { background: var(--p9); padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 80px); }

/* Rainbow arc behind "Every show is unique" */
.rainbow-bg { background:
  linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.25) 14%, rgba(7,11,26,.25) 86%, var(--night) 100%),
  linear-gradient(90deg, rgba(7,11,26,.82) 0%, rgba(7,11,26,.55) 50%, rgba(7,11,26,.5) 100%),
  url("img/rainbow-night.webp") center / cover no-repeat, var(--night); }

/* Weathered enneagram behind the stats line */
.enneagram { position: relative; overflow: hidden; isolation: isolate; }
.enneagram > .wrap { position: relative; }
.ennea { position: absolute; z-index: -1; height: 150%; aspect-ratio: 1; right: -6%; top: 50%; transform: translateY(-50%) rotate(-6deg);
  stroke: #e3d7bb; fill: #e3d7bb; opacity: .34; }
.ennea .nums { font-family: var(--font-display); font-size: 6.4px; font-weight: 500; text-anchor: middle; stroke: none; letter-spacing: .02em; }
@media (max-width: 760px) { .ennea { height: 120%; right: -30%; opacity: .26; } }


/* Footer tagline in the secondary blue */
.foot-tag { color: var(--violet-lit); }

/* Jodorowsky quote in the script lettering */
.script-quote p { font-style: normal; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.2; }

/* Quote set over a full-bleed photo (D.S. over the man in the white hat) */
.photo-bg { position: relative; display: grid; align-items: center; min-height: min(78vh, 760px); overflow: hidden; isolation: isolate; }
.photo-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; z-index: -2; }
.photo-bg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,11,26,.9) 0%, rgba(7,11,26,.7) 40%, rgba(7,11,26,.1) 75%); }
.photo-bg > .wrap { width: 100%; }
.photo-bg .quote p { max-width: 15em; }
@media (max-width: 760px) { .photo-bg::after { background: rgba(7,11,26,.72); } }

/* Panel whose title sits on the right, clear of a face at the left edge */
.panel.right .wrap { text-align: right; }
.panel.right p { margin-left: auto; }

/* Jodorowsky quote: a vintage rainbow through the script, with the same grain and soft ends */
.rainbow-script p {
  color: #e0a050;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .02 0 0 0 0 .04 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(7,11,26,.3) 0%, transparent 10%, transparent 90%, rgba(7,11,26,.3) 100%),
    linear-gradient(100deg, #f07a52 0%, #f5a94e 18%, #f7d36e 34%, #c8dc7a 50%, #7fcbb0 66%, #7fa2f0 82%, #b98ae6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Four quadrants with the quote running across the middle */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(32px, 6vw, 88px); align-items: start; }
.quad .q-mid { grid-column: 1 / -1; text-align: center; margin: clamp(24px, 4vw, 56px) auto; width: 100%; }
.quad .q-mid p { font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.15; max-width: 15em; margin-inline: auto; }
.quad .q-bl, .quad .q-br { margin: 0; }
@media (max-width: 820px) { .quad { grid-template-columns: 1fr; } }

/* Per-photo zoom and shift on project panels (wide screens only) */
@media (min-width: 761px) {
  .panel > img { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1)); }
  .panel:hover > img { transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--z, 1) * 1.03)); }
}

/* Golden Calf: justified photo rows (each photo keeps its proportions; rows share a height) */
.jgrid { display: flex; flex-wrap: wrap; gap: 28px 10px; --row: clamp(170px, 19vw, 280px); }
.jgrid::after { content: ""; flex-grow: 1e4; }
.jgrid figure { margin: 0; flex: var(--ar) 1 calc(var(--ar) * var(--row)); }
.jgrid a { display: block; overflow: hidden; border-radius: 3px; background: var(--night-2); }
.jgrid img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform .6s ease; }
.jgrid a:hover img { transform: scale(1.03); }
.jgrid figcaption { margin-top: 8px; font-family: var(--font-label); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--alien); }
@media (max-width: 600px) { .jgrid { --row: 150px; gap: 20px 8px; } }

/* Mailing-list band over a darkened photo */
.signup.photo-band { position: relative; overflow: hidden; isolation: isolate; background: var(--night);
  padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(96px, 12vw, 160px); }
.photo-band > .band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(7,11,26,.22), rgba(7,11,26,.66) 80%),
              linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 82%, var(--night) 100%); }
.photo-band .muted { color: var(--bone); }

/* Buttons that share one width */
.actions.even { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.actions.even .btn { text-align: center; white-space: nowrap; padding-inline: 18px; }
@media (max-width: 1200px) { .actions.even { grid-auto-flow: row; } }

/* Thin rule used as a section divider inside text */
hr.divider { border: 0; height: 1px; background: var(--rule); margin: 28px 0; }

/* Hidden from view but still read by screen readers and search engines */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Projects page opens straight on the panels; the first one is banner height */
section.flush { padding: 0; }
.panels li:first-child .panel { min-height: var(--banner-h); }

/* Photo numbers on the landing carousel, for easy reference */
.carousel a { position: relative; }
.carousel .num { position: absolute; left: 10px; top: 10px; min-width: 28px; padding: 3px 7px; text-align: center;
  font-family: var(--font-label); font-size: .75rem; letter-spacing: .1em; color: var(--bone);
  background: rgba(7,11,26,.72); border-radius: 3px; }

/* Landing banner: keep the top of the performer's head in frame */
.hero > img.head-in { object-position: 50% 12%; }

/* Option B: the line sits above the girl's head, the button below her face */
.signup.photo-band.v-head { display: grid; grid-template-rows: auto 1fr auto; min-height: min(92vh, 860px);
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.v-head > .band-bg { object-position: 50% 62%; }
.v-head .band-bottom { grid-row: 3; }
.photo-band.v-head::after { background:
  linear-gradient(180deg, rgba(7,11,26,.78) 0%, rgba(7,11,26,.25) 26%, rgba(7,11,26,.12) 55%, rgba(7,11,26,.7) 88%, var(--night) 100%) !important; }
.script.one-line { white-space: nowrap; max-width: none; font-size: clamp(1.7rem, 6.2vw, 5.6rem); }

/* Banner with a deeper shade, for brighter-looking overlay text */
.hero.dim::after { background: linear-gradient(180deg, rgba(7,11,26,.45) 0%, rgba(7,11,26,.35) 40%, rgba(7,11,26,.95) 100%); }

/* Audience quotes over a photo (LoveBot / Omega) */
.quotes-bg { min-height: min(90vh, 860px); padding: clamp(64px, 9vw, 112px) 0; }
.quotes-bg > img { object-position: 75% 35%; }
.quotes-bg::after { background: linear-gradient(90deg, rgba(7,11,26,.82) 0%, rgba(7,11,26,.6) 34%, rgba(7,11,26,0) 62%); }
.quotes.stack { grid-template-columns: 1fr; max-width: 34em; gap: 28px; margin-top: 28px; }
.quotes-bg .quote p { max-width: none; }
@media (max-width: 760px) { .quotes-bg::after { background: rgba(7,11,26,.78); } }
.quotes-bg.on-right .wrap { display: grid; justify-items: end; }
.quotes-bg.on-right .wrap > * { width: min(100%, 560px); }
.quotes-bg.on-right > img { object-position: 30% 35%; transform: translateX(-8%) scale(1.2); }
.quotes-bg.on-right::after { background: linear-gradient(270deg, rgba(7,11,26,.82) 0%, rgba(7,11,26,.6) 34%, rgba(7,11,26,0) 62%); }
.quotes-bg .quotes.stack { max-width: 30em; }
@media (max-width: 760px) { .quotes-bg.on-right::after { background: rgba(7,11,26,.78); } .quotes-bg.on-right .wrap { justify-items: start; } }
.quotes-bg.on-right .quotes.stack { max-width: none; }

/* Option D: full-bleed photo, line and button along the bottom */
.signup.photo-band.v-bottom { display: grid; align-items: end; min-height: min(86vh, 820px); text-align: left;
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.v-bottom > .band-bg { object-position: 50% 45%; }
.photo-band.v-bottom::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.15) 22%, rgba(7,11,26,.2) 55%, rgba(7,11,26,.9) 88%, var(--night) 100%); }
.v-bottom .actions { margin-top: 8px; }

/* Option C: no photo */
.signup.v-glow { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }

/* Option labels while choosing (temporary) */
.signup { position: relative; }
.option-tag { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; padding: 5px 10px; border-radius: 3px;
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--night); background: var(--alien); }

/* Miracle Jones quote in the bottom-right corner; less of the photo's top */
.photo-quote.corner { aspect-ratio: 2 / 1; align-items: end; padding: 0 0 clamp(40px, 5vw, 72px); }
.photo-quote.corner .wrap { display: grid; justify-items: end; }
.photo-quote.corner .quote { width: min(100%, 520px); }
.photo-quote.corner::after { background: linear-gradient(315deg, rgba(7,11,26,.85) 0%, rgba(7,11,26,.5) 30%, rgba(7,11,26,0) 55%); }
@media (max-width: 760px) { .photo-quote.corner .wrap { justify-items: start; } }
.hero > img.right-edge { object-position: 100% 50%; }

/* LoveBot quote sections: no dividers */
.quotes-bg .quotes .quote { border-top: 0; padding-top: 0; }
/* Dating Show: the mime stands centre-right, so the quotes sit on the left */
.quotes-bg.mime > img { object-position: 70% 40%; }

/* Gold-leaf heading */
.gold-leaf { color: var(--gold); background: var(--leaf); background-size: 140px 140px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Miracle Jones photo: 30px less at the top and bottom */
@media (min-width: 761px) {
  .photo-quote.corner { aspect-ratio: auto; height: calc(min(100vw, 1800px) / 2 - 140px); max-height: 760px; }
  .photo-quote.corner > img { inset: auto 0 -60px 0; height: auto; object-fit: fill; }
}

/* Mailing band, big version: the line spans the page on one line, brighter; button centred; 50px off the photo's top */
.big-line { text-align: center; }
.signup.photo-band.v-bottom.big-line { min-height: calc(min(86vh, 820px) - 50px); }
.big-line > .band-bg { top: -50px; height: calc(100% + 50px); }
.big-line .script.one-line { font-size: calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 11.8); line-height: 1.25; filter: none;
  color: #b1201d;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .02 0 0 0 0 .02 0 0 0 2.4 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120px 120px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .3 0 0 0 0 .26 0 0 0 2.2 -1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 90px 90px,
    radial-gradient(ellipse 22% 120% at 30% 50%, rgba(90,10,12,.35), transparent 70%),
    radial-gradient(ellipse 20% 120% at 75% 50%, rgba(90,10,12,.3), transparent 70%),
    #b1201d;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.big-line .actions { justify-content: center; }
/* Option 2: the same, at the top of the photo */
.signup.photo-band.v-bottom.at-top { align-items: start; }
.photo-band.v-bottom.at-top::after { background:
  linear-gradient(90deg, var(--night) 0, transparent calc(50% - min(50vw, 750px) + 160px), transparent calc(50% + min(50vw, 750px) - 160px), var(--night) 100%),
  linear-gradient(180deg, rgba(7,11,26,.55) 0%, rgba(7,11,26,.3) 30%, rgba(7,11,26,.15) 60%, var(--night) 100%); }
.at-top > .band-bg { top: 0; left: 50%; right: auto; width: min(100%, 1500px); height: auto; aspect-ratio: 3 / 2; transform: translateX(-50%); object-fit: cover; }
.signup.photo-band.v-bottom.at-top { min-height: calc(min(100vw, 1500px) * 2 / 3); }

/* 4:06 AM: the lead audience quote */
.lead-quote { max-width: none; margin-bottom: 8px; }
.quote.big.lead-quote p { font-size: calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 16.3); line-height: 1.1; max-width: none; }
@media (min-width: 761px) { .quote.big.lead-quote p { white-space: nowrap; } }
@media (max-width: 760px) { .quote.big.lead-quote p { font-size: clamp(1.9rem, 8vw, 3rem); } }

/* Dating Show quotes beside the full mime photo */
.mime-split .split { align-items: center; margin-top: 24px; }
.mime-split .quotes.stack { margin-top: 0; }
.mime-split img { width: 100%; height: auto; border-radius: 3px; }
.mime-split .split { grid-template-columns: 1fr 1.35fr; }
@media (max-width: 820px) { .mime-split .split { grid-template-columns: 1fr; } }
.mime-split .quotes .quote { border-top: 0; padding-top: 0; }

/* Dating Show: widened mime image fills the section; quotes in the dark field on the left */
.quotes-bg.mime-wide { min-height: calc(100vw * 821 / 2430); padding: clamp(56px, 7vw, 112px) 0; }
.quotes-bg.mime-wide > img { object-position: right center; transform: none; }
.quotes-bg.mime-wide::after { background: linear-gradient(90deg, rgba(7,11,26,.5) 0%, rgba(7,11,26,.2) 35%, rgba(7,11,26,0) 50%); }
.quotes-bg.mime-wide .wrap > * { max-width: 30rem; }
@media (max-width: 900px) { .quotes-bg.mime-wide { min-height: 640px; } .quotes-bg.mime-wide > img { object-position: 72% center; } .quotes-bg.mime-wide::after { background: rgba(7,11,26,.55); } }

/* Landing: tighten the gap between the carousel and the mailing band */
section.before-band { padding-bottom: clamp(16px, 2vw, 28px); }
.before-band + .signup.photo-band.at-top { padding-top: clamp(16px, 2.5vw, 32px); }

/* About: names link out without looking like body links */
a.name-link { text-decoration: none; }
a.name-link:hover { color: var(--gold-lit); }
/* Mailing band on phones: taller, photo lower, so the line and button sit above her face */
@media (max-width: 760px) {
  .signup.photo-band.v-bottom.at-top { min-height: 560px; padding-top: 28px; }
  .at-top > .band-bg { top: auto; bottom: 0; width: 100%; height: 72%; aspect-ratio: auto; object-position: 50% 30%; }
}

/* 4:06 AM banner: the whole photo, scaled to the banner height and set at the right; the left fades into the page */
@media (min-width: 761px) {
  .hero.whole > img { object-fit: contain; object-position: right center; }
  .hero.whole::after { background:
    linear-gradient(90deg, var(--night) 0, var(--night) calc(100% - var(--banner-h) * 1.5), rgba(7,11,26,0) calc(100% - var(--banner-h) * 1.5 + 240px)),
    linear-gradient(to top right, rgba(7,11,26,.85) 0%, rgba(7,11,26,0) 42%); }
}
@media (max-width: 760px) { .hero.whole > img { object-position: 55% 50%; } }

/* 4:06 AM: banner fades into the About section */
.hero.whole::after { background: linear-gradient(180deg, rgba(7,11,26,0) 72%, var(--night) 100%), linear-gradient(180deg, rgba(7,11,26,.25) 0%, rgba(7,11,26,.15) 40%, rgba(7,11,26,.8) 100%); }
@media (min-width: 761px) {
  .hero.whole::after { background:
    linear-gradient(180deg, rgba(7,11,26,0) 72%, var(--night) 100%),
    linear-gradient(90deg, var(--night) 0, var(--night) calc(100% - var(--banner-h) * 1.5), rgba(7,11,26,0) calc(100% - var(--banner-h) * 1.5 + 240px)),
    linear-gradient(to top right, rgba(7,11,26,.85) 0%, rgba(7,11,26,0) 42%); }
}

/* 4:06 AM credits over the photo of the hand */
.credits-bg { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 10vw, 140px) 0; }
.credits-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 80%; z-index: -2; }
.credits-bg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.55) 22%, rgba(7,11,26,.55) 78%, var(--night) 100%); }

/* 4:06 AM: less space between the banner and About */
.hero.whole + section { padding-top: clamp(20px, 3vw, 40px); }

/* 4:06 AM audience quotes over a photo */
.quotes-photo { position: relative; overflow: hidden; isolation: isolate; }
.quotes-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.quotes-photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.45) 18%, rgba(7,11,26,.5) 60%, rgba(7,11,26,.8) 85%, var(--night) 100%); }
.quotes-photo .quote p, .quotes-photo .quote footer { text-shadow: 0 2px 18px rgba(0,0,0,.7); }

/* 4:06 AM photo-backed sections: frame each photo on its subject */
.quotes-photo > img { object-position: 30% 75%; }
.credits-photo > img { object-position: 50% 45%; }
.credits-photo { padding: clamp(80px, 10vw, 140px) 0; }
.credits-photo dt, .credits-photo dd, .credits-photo h2 { text-shadow: 0 2px 16px rgba(0,0,0,.75); }

/* 4:06 AM: no dividers in the quotes; both background photos a little more visible */
.quotes-photo .quotes .quote { border-top: 0; padding-top: 0; }
.quotes-photo::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.3) 18%, rgba(7,11,26,.32) 60%, rgba(7,11,26,.65) 86%, var(--night) 100%); }

/* Golden Calf About: a letter from the Herd of God */
.gc-about .letter { max-width: 38em; }
.gc-about h2 { color: var(--bone); }
.gc-about .signoff { font-style: italic; margin-top: 2em; }
.gc-about .postscript { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 1.2em; }

/* Upcoming: each show is a full-height panel */
.panel.tall { min-height: var(--banner-h); }
.panel .btn { margin-top: 24px; }
.panel .label { margin-bottom: 12px; }
@media (max-width: 760px) { .panel.tall::after { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(7,11,26,.6) 62%, rgba(7,11,26,.88) 100%); } }
.gc-about .letter h2 { color: var(--bone); margin-top: 1.4em; }
.gc-about .letter h2:first-child { margin-top: 0; }
.gc-about + .gc-photo { padding-top: 0; }
.gc-photo + .gc-about { padding-top: 0; }
.gc-photo-slot { aspect-ratio: 3 / 2; border-radius: 3px; }
.gc-photo img { width: 100%; height: auto; border-radius: 3px; }

/* Upcoming: two shows side by side on desktop, stacked on phones */
@media (min-width: 900px) {
  .panels.side-by-side { display: grid; grid-template-columns: 1fr 1fr; }
  .panels.side-by-side li + li { border-left: 1px solid var(--night); }
  .panels.side-by-side .panel h2 { font-size: clamp(2.4rem, 4.2vw, 4.6rem); }
  .panels.side-by-side .panel p:not(.label) { font-size: clamp(.78rem, 1.05vw, 1rem); letter-spacing: 0.12em; }
}
/* Placeholder backgrounds until new imagery is made */
.placeholder-art.art-p9 { background:
  radial-gradient(ellipse at 40% 35%, rgba(240,122,82,.42), transparent 55%),
  radial-gradient(ellipse at 75% 70%, rgba(120,86,230,.45), transparent 55%),
  radial-gradient(ellipse at 15% 85%, rgba(95,156,138,.3), transparent 50%),
  linear-gradient(160deg, #1d0f2e, #070b1a 75%); }
.placeholder-art.art-gc { background:
  radial-gradient(ellipse at 50% 30%, rgba(232,184,74,.5), transparent 55%),
  radial-gradient(ellipse at 25% 90%, rgba(169,124,46,.3), transparent 50%),
  linear-gradient(160deg, #2a1d0a, #070b1a 75%); }
/* Golden Calf About: full-width sections, a pair of photos, a centred close */
.gc-about.wide h2 { margin-top: 0; }
.gc-about.wide p { max-width: none; }
.gc-photo + .gc-photo, .gc-about + .gc-about { padding-top: 0; }
.gc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .gc-pair { grid-template-columns: 1fr; } }
.gc-about.centered-letter .letter { max-width: 34em; margin-inline: auto; text-align: center; }

/* Golden Calf: "Are you:" opening */
.gc-are-you .gc-kicker { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: .6em; }
.gc-ills { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(40px, 6vw, 72px); }
.gc-ills h3 { font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2em; }
.gc-ills p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin: 0; }
@media (max-width: 760px) { .gc-ills { grid-template-columns: 1fr; } }
.gc-answer { max-width: 30em; }
.gc-are-you + .gc-photo, .gc-photo + .gc-church, .gc-church + .gc-august, .gc-august + .gc-grid, .gc-grid + .gc-about { padding-top: 0; }
.gc-church p { max-width: 38em; }
.gc-church .gc-call { font-size: clamp(1.4rem, 2.4vw, 2rem); font-style: italic; margin-top: 1.2em; }
.gc-august .lede { max-width: 26em; }
.serif-prose p.lede { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; }
.gc-photo img.lgd { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; border-radius: 0; }
/* The fourth question, set apart below the three */
.gc-ills { margin-bottom: clamp(32px, 4vw, 48px); }
.gc-or { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(24px, 3vw, 36px) 0; margin-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.gc-or-word { display: block; font-family: var(--font-label); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--alien); margin-bottom: 12px; }
.gc-or p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.3; margin: 0 auto; max-width: 24em; }
.gc-or p .gold-leaf { font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-size: 1.25em; }
.gc-church h2 { max-width: 18em; color: var(--bone); }
.gc-photo + .gc-church { padding-top: clamp(40px, 6vw, 72px); }

/* Golden Calf: welcome beside the Little Gold Different image */
.gc-welcome .split { align-items: center; }
.gc-welcome h2 { color: var(--bone); }
.gc-welcome .serif-prose p, .gc-welcome p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.45; }
.gc-welcome img.lgd-white { width: 100%; height: auto; max-width: 520px; justify-self: center; }
.gc-welcome + .gc-church, .gc-church + .gc-join, .gc-join + .gc-grid { padding-top: 0; }
.gc-join { text-align: center; }
.gc-join .gc-call { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; margin: 0 auto 8px; max-width: 22em; }
.centered-letter .actions { margin: 28px 0 8px; }
.gc-are-you .gc-or { margin-bottom: 0; }
.gc-are-you { padding-bottom: clamp(40px, 6vw, 72px); }
.gc-are-you + .gc-welcome { padding-top: clamp(24px, 3vw, 40px); }


/* Golden Calf questions: plain descriptions, no dividers, a larger italic "Or perhaps" */
.gc-ills p, .gc-or p { font-style: normal; }
.gc-or { border: 0; padding: 0; margin-top: clamp(8px, 2vw, 24px); }
.gc-or-word { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--bone); margin-bottom: 6px; }

/* Sections with a photo behind them */
.photo-section { position: relative; overflow: hidden; isolation: isolate; }
.photo-section > img.section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-section::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.5) 22%, rgba(7,11,26,.5) 78%, var(--night) 100%); }
.photo-section h2, .photo-section p { text-shadow: 0 2px 18px rgba(0,0,0,.65); }

/* Welcome header: centred, between the questions and the next section */
.gc-welcome-head { text-align: center; padding: clamp(96px, 12vw, 180px) 0; }
.gc-welcome-head h2 { color: var(--bone); font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: .3em; }
.gc-welcome-head .gc-sub { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .24em; font-size: clamp(.85rem, 1.4vw, 1.1rem); max-width: 40em; margin: 0 auto; }
.gc-are-you + .gc-welcome-head { margin-top: 0; }
.gc-welcome-head + .gc-welcome { padding-top: clamp(56px, 8vw, 104px); }
.gc-welcome .lede { margin: 0; }
.gc-welcome img.lgd-white { border-radius: 3px; }
.gc-welcome + .gc-photo { padding-top: 0; }
.gc-photo .gc-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; border-radius: 3px; }

/* "Reality is changing fast" over the white-line seal */
.gc-church.seal-white { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0; }
.gc-church.seal-white::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(820px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url("img/herd-seal-white.png") center / contain no-repeat; opacity: .16; }
.gc-photo + .gc-church.seal-white { padding-top: clamp(96px, 12vw, 160px); }
.gc-church.seal-white .wrap { text-align: center; }
.gc-church.seal-white h2 { margin-inline: auto; }
.gc-church.seal-white p { margin-inline: auto; }

/* Join us over a photo */
.gc-join.photo-section { padding: clamp(96px, 12vw, 160px) 0; }
.gc-church + .gc-join { padding-top: clamp(96px, 12vw, 160px); }
.gc-join + .gc-grid { padding-top: clamp(56px, 8vw, 96px); }
.gc-welcome p.lede { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; }
.gc-join.photo-section::after { background:
  radial-gradient(ellipse 60% 55% at 50% 50%, rgba(7,11,26,.62), rgba(7,11,26,.3) 100%),
  linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.2) 22%, rgba(7,11,26,.2) 78%, var(--night) 100%); }

/* Golden Calf, round 2 */
.hero.fade-down::after { background: linear-gradient(180deg, rgba(7,11,26,.25) 0%, rgba(7,11,26,.15) 35%, rgba(7,11,26,.45) 60%, rgba(7,11,26,.78) 80%, rgba(7,11,26,.94) 92%, var(--night) 100%); }
/* questions back to their earlier look (no dividers) */
.gc-ills p, .gc-or p { font-style: italic; }
.gc-or-word { font-family: var(--font-label); font-style: normal; text-transform: uppercase; letter-spacing: .26em; font-size: .78rem; color: var(--alien); margin-bottom: 12px; }
/* one section: questions and the welcome header, over the seal set off to the right */
.gc-are-you.seal-side { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(80px, 10vw, 140px); }
.gc-are-you.seal-side::before { content: ""; position: absolute; z-index: -1; width: min(760px, 95vw); aspect-ratio: 1;
  right: max(-260px, -22vw); top: 50%; transform: translateY(-50%) rotate(8deg);
  background: url("img/herd-seal-white.png") center / contain no-repeat; opacity: .2; }
@media (max-width: 760px) { .gc-are-you.seal-side::before { right: -45vw; opacity: .14; } }
.gc-are-you .gc-welcome-head { text-align: center; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
/* welcome line on its own, centred */
.gc-welcome { text-align: center; }
.gc-welcome p.lede { margin-inline: auto; max-width: 24em; }
/* two church photos with Little Gold Different between them */
.gc-trio { display: grid; grid-template-columns: 1fr minmax(0, .82fr) 1fr; gap: 12px; align-items: center; }
.gc-trio img { width: 100%; height: auto; border-radius: 3px; }
.gc-trio > img:not(.lgd-white) { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 760px) { .gc-trio { grid-template-columns: 1fr; } .gc-trio > img:not(.lgd-white) { aspect-ratio: 3 / 2; } }
/* closing letter over a photo */
.centered-letter.photo-section { padding: clamp(96px, 12vw, 160px) 0; }
.gc-grid + .centered-letter.photo-section { padding-top: clamp(96px, 12vw, 160px); }
.centered-letter.photo-section::after { background:
  radial-gradient(ellipse 50% 60% at 50% 50%, rgba(7,11,26,.7), rgba(7,11,26,.35) 100%),
  linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.2) 20%, rgba(7,11,26,.2) 80%, var(--night) 100%); }

/* Upcoming: illustrated Golden Calf panel; deeper shade at the bottom so the title reads on the bright art */
.panel > img.upc-art { object-position: 50% 62%; }
/* Psychomagic 9: the poster art, cropped to its picture so no lettering can show */
.panel > img.upc-art.upcoming-psychomagic-9 { object-position: 50% 30%; }
.panel:has(> img.upc-art)::after { background: linear-gradient(180deg, rgba(7,11,26,0) 30%, rgba(7,11,26,.55) 58%, rgba(7,11,26,.94) 100%); }
.panel:has(> img.upc-art)::after { background: linear-gradient(180deg, rgba(7,11,26,0) 24%, rgba(7,11,26,.36) 46%, rgba(7,11,26,.78) 66%, rgba(7,11,26,.93) 100%) !important; }

/* Golden Calf, round 3: the questions as a compact comic strip */
.gc-comic { padding: clamp(40px, 5vw, 64px) 0; }
.comic-strip { display: grid; grid-template-columns: .8fr 1fr 1fr 1fr; gap: 10px; }
.cpanel { position: relative; border: 3px solid var(--bone); padding: 44px 18px 18px; min-height: 170px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(rgba(217,178,94,.22) 1.1px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(160deg, #141a36, #090d1f); }
.cpanel:nth-child(2) { transform: rotate(-.6deg); }
.cpanel:nth-child(4) { transform: rotate(.6deg); }
.cpanel h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.cpanel .caption { position: absolute; top: -3px; left: -3px; max-width: calc(100% - 20px);
  background: var(--bone); color: var(--night); padding: 5px 10px 4px;
  font-family: var(--font-label); font-weight: 400; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; }
.cpanel-title { justify-content: center; background: var(--gold); border-color: var(--gold);
  background: radial-gradient(rgba(7,11,26,.18) 1.1px, transparent 1.6px) 0 0 / 7px 7px, var(--leaf); background-size: 7px 7px, 140px 140px, 100% 100%; }
.cpanel-title h2 { color: var(--night); font-family: var(--font-label); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; margin: 0; }
.cpanel-wide { grid-column: 1 / -1; min-height: 0; padding: 40px 22px 18px; transform: rotate(-.25deg); }
.cpanel-wide p { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.3; }
.cpanel-wide p .gold-leaf { text-transform: uppercase; letter-spacing: .03em; font-size: 1.3em; }
@media (max-width: 760px) {
  .comic-strip { grid-template-columns: 1fr 1fr; }
  .cpanel-title { grid-column: 1 / -1; min-height: 0; padding: 18px; }
  .cpanel-title h2 br { display: none; }
  .cpanel { min-height: 140px; }
  .cpanel:nth-child(4) { grid-column: 1 / -1; }
}

/* Welcome: heading and subheading left, the creed right, over a photo */
.gc-welcome.photo-section { text-align: left; padding: clamp(96px, 12vw, 160px) 0; }
.gc-welcome.photo-section .split { align-items: center; }
.gc-welcome.photo-section h2 { color: var(--bone); font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: .35em; }
.gc-welcome.photo-section .gc-sub { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .22em; font-size: clamp(.8rem, 1.2vw, 1rem); line-height: 1.6; margin: 0; max-width: 26em; }
.gc-welcome.photo-section p.lede { margin: 0; max-width: none; }
.gc-comic + .gc-welcome { margin-top: 0; }
.gc-welcome + .gc-photo { padding-top: clamp(56px, 8vw, 96px); }

/* three church photos */
.gc-trio { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.gc-trio > img, .gc-trio > img:not(.lgd-white) { aspect-ratio: 3 / 4; object-fit: cover; height: 100%; }

/* Reality: text left, Little Gold Different right */
.gc-church .split { align-items: center; text-align: left; }
.gc-church img.lgd-white { width: 100%; max-width: 460px; height: auto; justify-self: center; border-radius: 3px; }
.gc-photo + .gc-church { padding-top: clamp(64px, 8vw, 104px); }
@media (min-width: 761px) { .cpanel-title h2 span { display: block; } }
@media (max-width: 760px) { .cpanel { min-height: 104px; } .cpanel-title { padding: 14px 18px; } }

/* Golden Calf, round 4 */
/* questions: a short, clean list; the gold word leads each question */
.gc-questions { position: relative; z-index: 2; padding: clamp(48px, 6vw, 80px) 0 clamp(16px, 2vw, 24px); }
.gc-questions h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .4em; }
.gc-questions ul { list-style: none; margin: 0; padding: 0; }
.gc-questions li { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.35; padding: 4px 0; }
.gc-questions li strong { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 1.12em; margin-right: .2em; }
.gc-questions li.or { font-style: italic; color: var(--mist); font-size: clamp(1.1rem, 1.8vw, 1.4rem); padding-top: 14px; }

/* welcome: the cow's head shows in full and its photo rises softly behind the questions */
.gc-welcome.photo-section { overflow: visible; margin-top: clamp(-200px, -14vw, -120px); padding-top: calc(clamp(96px, 12vw, 160px) + clamp(120px, 14vw, 200px)); }
.gc-welcome.photo-section > img.section-bg { object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 82%, transparent 100%); }
.gc-welcome.photo-section::after { background: linear-gradient(90deg, rgba(7,11,26,.55) 0%, rgba(7,11,26,.25) 50%, rgba(7,11,26,.55) 100%); }
.gc-welcome.photo-section .gc-sub { font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.3; max-width: none; }

/* three photos in a justified row: same height, nothing cropped */
.gc-row { display: flex; gap: 12px; }
.gc-row > div { flex: var(--ar) 1 0; }
.gc-row img { width: 100%; height: auto; display: block; border-radius: 3px; }
@media (max-width: 700px) { .gc-row { flex-direction: column; } }

/* Reality: the seal behind, off to the right */
.gc-church.seal-right { position: relative; isolation: isolate; overflow: hidden; }
.gc-church.seal-right::before { content: ""; position: absolute; z-index: -1; width: min(900px, 110vw); aspect-ratio: 1;
  right: max(-300px, -24vw); top: 50%; transform: translateY(-50%);
  background: url("img/herd-seal-white.png") center / contain no-repeat; opacity: .14; }
@media (max-width: 760px) { .gc-welcome.photo-section > img.section-bg { object-position: 36% 0%; } }

/* Golden Calf, round 5 */
/* questions in their earlier three-column format, at the current (larger) sizes */
.gc-questions .gc-kicker { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .5em; }
.gc-questions .gc-ills { margin-bottom: clamp(24px, 3vw, 36px); }
.gc-questions .gc-ills h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.gc-questions .gc-ills p { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-style: italic; line-height: 1.3; }
.gc-questions .gc-or { margin: 0; }
.gc-questions .gc-or p { font-size: clamp(1.3rem, 2.4vw, 2rem); font-style: italic; }
/* welcome: title centred above the two paragraphs */
.gc-welcome-title { text-align: center; color: var(--bone); font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: .7em; }
.gc-welcome.photo-section .split { align-items: start; }
/* the cow mask: mirrored, dimmer, and reaching further into the sections above and below */
.gc-welcome.photo-section { margin-top: clamp(-320px, -22vw, -180px); padding-top: calc(clamp(96px, 12vw, 160px) + clamp(180px, 22vw, 320px));
  margin-bottom: clamp(-200px, -14vw, -110px); padding-bottom: calc(clamp(96px, 12vw, 160px) + clamp(110px, 14vw, 200px)); }
.gc-welcome.photo-section > img.section-bg { transform: scaleX(-1); filter: brightness(.72);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }
.gc-welcome + .gc-photo { position: relative; z-index: 2; }
@media (max-width: 760px) { .gc-welcome.photo-section > img.section-bg { object-position: 34% 0%; } }

/* ---------- Golden Calf: the Herd of God (prompts over the calf, welcome, creed, call) ---------- */
.gc-herd { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3vw, 40px) 0 clamp(80px, 10vw, 140px); }
.gc-herd > img.gc-herd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; z-index: -2; transform: scaleX(-1); filter: brightness(.48);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.4) 18%, rgba(0,0,0,.75) 28%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,.4) 18%, rgba(0,0,0,.75) 28%, #000 40%); }
.gc-herd::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,11,26,.75) 0%, rgba(7,11,26,.35) 60%, rgba(7,11,26,.15) 100%),
              linear-gradient(180deg, rgba(7,11,26,0) 35%, rgba(7,11,26,.8) 70%, rgba(7,11,26,.95) 100%); }
.prompts { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.95rem, 1.65vw, 1.3rem); line-height: 1.9;
  color: #ece6e2; text-shadow: 0 1px 6px rgba(0,0,0,.8); max-width: 46em; }
.prompts p { margin: 0; padding-left: 1.4em; text-indent: -1.4em; }
.pr-gt { color: #9a8f8c; }
.pr-w { font-weight: 600; }
.cli-cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.15em; background: #e4e6ea; animation: cli-blink 1s steps(1) infinite; }
@keyframes cli-blink { 50% { opacity: 0; } }
.gc-herd h2.gc-herd-title { margin: clamp(56px, 8vw, 110px) 0 .3em; font-size: clamp(2.2rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.gc-herd-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.95rem); line-height: 1.35; color: #fff; max-width: 30em; margin: 0; }
.gc-herd-church { margin-top: clamp(56px, 8vw, 110px); gap: clamp(40px, 7vw, 120px); }
.gc-herd-church h2 { color: var(--bone); font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-top: 0; }
.gc-herd-church p { margin-top: 0; }
.gc-herd-call { text-align: center; margin-top: clamp(56px, 8vw, 110px); }
.gc-herd-call p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; color: var(--bone); margin: 0 0 .9em; }
.gc-herd + .gc-grid { padding-top: clamp(40px, 6vw, 72px); }
/* closing: the call above the photo, larger letter text */
.gc-waiting { text-align: center; padding-bottom: clamp(20px, 2.5vw, 32px); }
.gc-grid + .gc-waiting { padding-top: clamp(72px, 10vw, 140px); }
.gc-waiting h2 { color: var(--bone); font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.1; max-width: 16em; margin: 0 auto; text-wrap: balance; }
.gc-waiting + .gc-about.centered-letter.photo-section { padding-top: clamp(96px, 12vw, 160px); }
.gc-about.centered-letter .letter { max-width: 38em; }
.gc-about.centered-letter .letter p { font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.35; }
.gc-about.centered-letter .letter p.postscript { font-size: clamp(2rem, 3.6vw, 2.9rem); }
/* full-width photo sections between the grids */
.gc-feature { position: relative; isolation: isolate; overflow: hidden; padding: 0; }
.gc-feature + .gc-grid { padding-top: clamp(28px, 4vw, 48px); }
/* 2: full width, quote centred over a darkened middle */
.gc-centered { display: flex; align-items: center; justify-content: center; text-align: center;
  height: min(calc(100vw / var(--ar)), 92vh); min-height: 460px; }
.gc-centered > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gc-centered::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(7,11,26,.82) 0%, rgba(7,11,26,.55) 55%, rgba(7,11,26,0) 100%),
              linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,0) 14%, rgba(7,11,26,0) 86%, var(--night) 100%); }
.gc-centered .quote { max-width: 26em; margin: 0 auto; }
.gc-centered .quote p { font-size: clamp(1.6rem, 3vw, 2.6rem); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* three quotes in a row */
.gc-quotes { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(16px, 3vw, 32px); }
.quotes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 860px) { .quotes.three { grid-template-columns: 1fr; } }
.gc-quotes + .gc-grid { padding-top: clamp(48px, 7vw, 88px); }

/* ---------- Golden Calf: Rapture section, full-width photo with the title over its dark side ---------- */
.rv { position: relative; isolation: isolate; overflow: hidden; padding: 0; }
.rv .rv-text h2 { margin: 0 0 .5em; font-size: clamp(1.7rem, 3.4vw, 2.8rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.rv .rv-text p { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; color: var(--bone); margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.rv-bleed { display: flex; height: min(calc(100vw / var(--ar)), 92vh); min-height: 520px; }
.rv-bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rv-bleed::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.rv-bleed .wrap { width: 100%; display: flex; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(48px, 7vw, 96px); }
.rv-bleed .rv-text { max-width: 32em; }
.rv-top-left .wrap { align-items: flex-start; }
.rv-top-left::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.55) 22%, rgba(7,11,26,0) 50%, rgba(7,11,26,0) 82%, var(--night) 100%); }
.rv-top-right .wrap { align-items: flex-start; justify-content: flex-end; }
.rv-top-right .rv-text { max-width: 26em; }
.rv-top-right::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.5) 22%, rgba(7,11,26,0) 50%),
  linear-gradient(270deg, rgba(7,11,26,.6) 0%, rgba(7,11,26,0) 45%); }
.rv-middle-left .wrap { align-items: center; }
.rv-middle-left .rv-text { max-width: 24em; }
.rv-middle-left::after { background: linear-gradient(90deg, rgba(7,11,26,.85) 0%, rgba(7,11,26,.45) 38%, rgba(7,11,26,0) 60%),
  linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,0) 14%, rgba(7,11,26,0) 86%, var(--night) 100%); }
.rv-bottom-left .wrap { align-items: flex-end; }
.rv-bottom-left::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,0) 14%, rgba(7,11,26,0) 45%, rgba(7,11,26,.85) 82%, var(--night) 100%); }
.rv-split { padding: clamp(64px, 8vw, 110px) 0; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.rv-pic img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; border-radius: 3px; }
@media (max-width: 760px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-grid > .rv-pic { order: 2; }
  .rv-bleed { min-height: 0; height: auto; flex-direction: column; }
  .rv-bleed > img { position: static; height: auto; order: 2; }
  .rv-bleed::after { display: none; }
  .rv-bleed .wrap { padding-bottom: 24px; }
}
.rv-bleed + .gc-grid { padding-top: clamp(28px, 4vw, 48px); }
/* Golden Calf: full-width carousels, about three landscape photos across */
.carousel.thirds { --car-h: calc((100vw - 20px) / 3.75); }
.carousel.thirds .track { gap: 10px; padding: 0; scroll-padding: 0; }
@media (max-width: 760px) { .carousel.thirds { --car-h: 230px; } }
.gc-car { padding-bottom: clamp(40px, 6vw, 80px); }
.gc-car + .gc-waiting { padding-top: clamp(16px, 2vw, 28px); }


/* Home: a smaller carousel that drifts on its own */
.carousel.home { --car-h: min(54vh, 500px); }
@media (max-width: 600px) { .carousel.home { --car-h: 300px; } }
.carousel.auto .track { scroll-snap-type: none; scroll-behavior: auto; }

/* Home: closing call centred over the howling girl, photo shown as it is with a light film grain */
.home-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: start; justify-items: center; text-align: center;
  --w: min(100vw, 940px); height: calc(var(--w) * 2 / 3 * .96 - 100px + clamp(48px, 7vw, 96px)); min-height: 440px; padding: 0;
  /* the photo's own charcoal (#111) behind it, melting into the page navy at the top and bottom */
  background: linear-gradient(180deg, var(--night) 0%, #111 16%, #111 78%, var(--night) 100%); }
.home-cta > .cta-bg { position: absolute; left: 50%; top: calc(clamp(48px, 7vw, 96px) - var(--w) * 0.04); width: var(--w); height: auto; transform: translateX(-50%); z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-composite: intersect; }
.home-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
.home-cta .wrap { width: 100%; padding-top: clamp(48px, 7vw, 96px); }
.home-cta h2.cta-line { font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: 0; color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.15; margin: 0 0 .8em; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.home-cta .actions { justify-content: center; margin-top: 0; }
@media (max-width: 600px) { .home-cta { --w: 130vw; height: auto; min-height: 500px; } .home-cta > .cta-bg { top: 210px; } }

/* Herd of God: the Rapture title as the section's headline */
.rapture-head { padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); }
.rapture-head h2.rapture-title { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .98; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.rapture-head + .rv-bleed .wrap { padding-top: clamp(40px, 5vw, 72px); }
.rv-top-right .rv-text { max-width: 30em; }

/* Services: one-line title; plain "Don't see what you want" with the wishlist in a callout */
h1.one-line-title { white-space: nowrap; font-size: min(clamp(2.6rem, 8.2vw, 7.2rem), calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 15.6)); }
.callout { border: 1px solid var(--rule); border-radius: 4px; background: var(--night-2); padding: clamp(24px, 3.5vw, 44px); }
.callout h3 { font-family: var(--font-display); font-weight: 500; font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--bone); margin: 0; }
.callout .wishlist { margin-top: 16px; }

/* About and Contact: on phones the heading sits near the top instead of at the foot of a full-height banner */
@media (max-width: 760px) {
  .page-head.about-head, .page-head.contact-head { min-height: 0; align-content: start; padding-top: 40px; }
}

/* Front-page title only: Cinzel Decorative, Roman capitals with playful swashes (self-hosted, SIL OFL).
   Its lowercase letters are plain capitals and its capitals are the swash forms, so the C and the D are typed
   as capitals (the flourished ones) and set a little larger than the rest. */
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 400; font-display: block;
  src: url("fonts/cinzel-decorative-400-latin.woff2") format("woff2"); }
h1.home-title { font-family: "Cinzel Decorative", var(--font-display); font-weight: 400; text-transform: none;
  font-variant-ligatures: none; letter-spacing: -.01em; line-height: 1.02; }
h1.home-title .big { font-size: 1.3em; line-height: 0; }
/* Front page: email box beside the Join button */
.list-form { display: flex; justify-content: center; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.list-form input { width: min(320px, 100%); padding: 0 18px; min-height: 48px; border: 1px solid rgba(242,236,224,.45); border-radius: 0;
  background: rgba(7,11,26,.55); color: var(--bone); font: inherit; font-size: 1rem; }
.list-form input::placeholder { color: rgba(242,236,224,.6); }
.list-form input:focus { outline: none; border-color: var(--gold); }
.list-form .btn { cursor: pointer; }
@media (max-width: 600px) { .list-form input, .list-form .btn { width: 100%; justify-content: center; } }
/* Herd of God carousels: bigger, solid arrows that stand out on any photo, shown on phones too */
.carousel.thirds .car-btn { width: 60px; height: 60px; font-size: 1.6rem; font-weight: 600; border: 1px solid var(--gold);
  background: rgba(7,11,26,.88); color: var(--gold); box-shadow: 0 4px 18px rgba(0,0,0,.55); }
.carousel.thirds .car-btn:hover { background: var(--gold); color: var(--night); }
.carousel.thirds .car-btn.prev { left: 16px; }
.carousel.thirds .car-btn.next { right: 16px; }
@media (hover: none) { .carousel.thirds .car-btn { display: block; width: 46px; height: 46px; font-size: 1.3rem; } }
/* a thick chevron instead of the thin arrow glyph */
.carousel.thirds .car-btn { font-size: 0; }
.carousel.thirds .car-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  border-top: 3px solid currentColor; border-right: 3px solid currentColor; }
.carousel.thirds .car-btn.next::before { transform: translate(-65%, -50%) rotate(45deg); }
.carousel.thirds .car-btn.prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
@media (hover: none) { .carousel.thirds .car-btn { font-size: 0; } .carousel.thirds .car-btn::before { width: 11px; height: 11px; } }
/* Contact: two equal halves, working with us and joining the list; stacked on phones */
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(24px, 4vw, 48px); }
.contact-pair > div { border-top: 1px solid var(--rule); padding-top: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.contact-pair h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: .35em; }
.contact-pair .lede { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.4; margin: 0 0 24px; max-width: none; }
.contact-pair .lede { margin-bottom: 20px; }
.contact-pair .list-form { justify-content: flex-start; flex-wrap: nowrap; }
.contact-pair .list-form input { width: auto; flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) { .contact-pair { grid-template-columns: 1fr; } .contact-pair .list-form { flex-wrap: wrap; } }
/* sign-up feedback */
.list-form .list-msg { flex: 1 0 100%; margin: 6px 0 0; min-height: 0; font-size: 1rem; text-align: inherit; }
.list-form .list-msg:empty { display: none; }
.list-form .list-msg.ok { color: var(--bone); }
.list-form .list-msg.err { color: #f2a08a; }
.list-form.done input, .list-form.done .btn { display: none; }
.list-form.done .list-msg { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.signup-page-form { margin-top: 28px; }
.signup-page-form .list-form { justify-content: center; }
.contact-pair .list-form { flex-wrap: wrap; }
.contact-pair .list-form input { flex: 1 1 200px; }
/* Contact: the LoveBot / Omega ring photo behind the whole first section, darkened like that page's banner */
.page-head.contact-head { position: relative; isolation: isolate; overflow: hidden; }
.contact-head > img.contact-bg { position: absolute; left: 0; right: 0; top: -6%; width: 100%; height: 106%; object-fit: cover; object-position: 40% 100%; z-index: -2; }
.contact-head::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,11,26,.45) 0%, rgba(7,11,26,.38) 35%, rgba(7,11,26,.8) 62%, rgba(7,11,26,.93) 100%); }
@media (max-width: 760px) {
  .contact-head > img.contact-bg { object-position: 78% 0%; }
  .contact-head::after { background: linear-gradient(180deg, rgba(7,11,26,.6) 0%, rgba(7,11,26,.72) 40%, rgba(7,11,26,.9) 70%, rgba(7,11,26,.96) 100%); }
}
/* thank-you line: an endless, even drift of white light through the words, with sparkles that breathe.
   The light pattern repeats exactly once across a 200%-wide background, so moving it by one width loops seamlessly;
   the negative delay starts it mid-sweep, so the light is already on the words when they appear. */
.list-form .list-msg.shimmer { flex: 0 0 auto; width: fit-content; max-width: 100%; position: relative; color: transparent; -webkit-text-fill-color: transparent;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  background: linear-gradient(100deg, #aeb4d2 0%, #aeb4d2 18%, #e9ecff 26%, #ffffff 32%, #fff6e0 35%, #ffffff 38%, #e9ecff 44%, #aeb4d2 52%,
                                       #aeb4d2 68%, #f4f5ff 76%, #ffffff 80%, #f4f5ff 84%, #aeb4d2 92%, #aeb4d2 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  animation: shimmer-wave 5s linear -1.6s infinite, shimmer-in .5s ease-out both;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.16)); will-change: background-position; }
.list-form .list-msg.shimmer::after { content: "✦  ·  ✧"; position: absolute; left: 50%; top: -1.1em; transform: translateX(-50%); font-style: normal;
  font-size: .55em; letter-spacing: .6em; color: #fff; -webkit-text-fill-color: #fff; opacity: 0; pointer-events: none;
  animation: glints 5s ease-in-out -1.6s infinite; }
@keyframes shimmer-wave { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@keyframes shimmer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes glints { 0%, 100% { opacity: .15; } 25% { opacity: .7; } 50% { opacity: .25; } 75% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .list-form .list-msg.shimmer { animation: none; color: var(--bone); -webkit-text-fill-color: currentColor; background: none; } .list-form .list-msg.shimmer::after { display: none; } }
/* About: the two jesters under the moon behind the opening section; the empty dark left holds the text */
.page-head.about-head { position: relative; isolation: isolate; overflow: hidden; }
.about-head > img.about-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; z-index: -2; }
.about-head::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,11,26,.55) 0%, rgba(7,11,26,.2) 45%, rgba(7,11,26,0) 70%),
              linear-gradient(180deg, rgba(7,11,26,0) 55%, rgba(7,11,26,.6) 85%, var(--night) 100%); }
@media (max-width: 760px) {
  .about-head > img.about-bg { object-position: 88% 0%; }
  .about-head::after { background: linear-gradient(180deg, rgba(7,11,26,.55) 0%, rgba(7,11,26,.7) 40%, rgba(7,11,26,.9) 75%, var(--night) 100%); }
}
@media (min-width: 761px) { .about-head .lede { max-width: min(34em, 50%) !important; } }

/* Herd of God: sign-up boxes centred where the Join buttons were */
.herd-form .list-form { justify-content: center; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  /* Projects: each project about three-quarters of the screen, title in view */
  .panels:not(.side-by-side) .panel, .panels:not(.side-by-side) li:first-child .panel { min-height: 0; height: 75svh; }
  /* Upcoming: both shows on one screen */
  .panels.side-by-side .panel.tall { min-height: 0; height: calc((100svh - 70px) / 2); }
  .panels.side-by-side .panel .wrap { padding-bottom: 20px; }
  .panels.side-by-side .panel h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); margin-bottom: .1em; }
  .panels.side-by-side .panel .label { margin-bottom: 4px; }
  .panels.side-by-side .panel p:not(.label) { font-size: .72rem; letter-spacing: .1em; }
  .panels.side-by-side .panel .btn { margin-top: 12px; padding: 9px 18px; }
  .panels.side-by-side .panel > img.upc-art.upcoming-psychomagic-9 { object-position: 50% 30%; }
  /* Psychomagic 9: the blue dancer shown whole, with the M.J. quote above her */
  .photo-quote.corner { aspect-ratio: auto; height: auto; display: block; padding: 0 0 48px; overflow: visible; }
  .photo-quote.corner > img { position: static; display: block; width: 100%; height: auto; margin: 0 0 20px; object-fit: contain; }
  .photo-quote.corner::after { display: none; }
  .photo-quote.corner .quote { width: 100%; }
  /* About and Contact: plain title area, no picture */
  .about-head > img.about-bg, .contact-head > img.contact-bg, .about-head::after, .contact-head::after { display: none; }
}

/* Herd of God, closing run: the call over the girl in white, the invitation and sign-up, then the last carousel over the purple photo */
.gc-centered h2.gc-call-title { color: var(--bone); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.1; max-width: 15em; margin: 0 auto; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.gc-gifts { text-align: center; padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.gc-gifts p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.35; color: var(--bone);
  max-width: 30em; margin: 0 auto; text-wrap: balance; }
.gc-car-over { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 140px) 0; }
.gc-car-over > img.section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gc-car-over::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,0) 12%, rgba(7,11,26,0) 88%, var(--night) 100%); }
.gc-car-over > .gc-car { padding: 0; background: none; }
@media (max-width: 760px) { .gc-car-over { padding: 120px 0; } .gc-car-over .carousel.thirds { --car-h: 150px; } .gc-car-over > img.section-bg { object-position: 40% 80%; } }
/* the purple photo rises up behind the invitation and sign-up box */
.gc-gifts { position: relative; z-index: 1; }
/* the purple photo now sits behind the whole closing pair: the line and the carousel */
.gc-car-over { margin-top: 0; padding-top: clamp(48px, 6vw, 88px); }
.gc-closing { position: relative; isolation: isolate; overflow: hidden; }
.gc-closing > img.section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.gc-closing::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.45) 10%, rgba(7,11,26,.3) 30%, rgba(7,11,26,.3) 88%, var(--night) 100%); }
.gc-closing .gc-gifts p { text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.gc-car-over::after { background: linear-gradient(180deg, var(--night) 0%, rgba(7,11,26,.7) 16%, rgba(7,11,26,.3) 36%, rgba(7,11,26,.3) 86%, var(--night) 100%); }
@media (max-width: 760px) { .gc-car-over { padding-top: 24px; } .gc-car-over > img.section-bg { object-position: 40% 70%; } }
.gc-closing .gc-car-over::after { display: none; }
.gc-closing .gc-car-over { overflow: visible; }
.gc-closing .gc-gifts { padding-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 760px) { .gc-closing .gc-car-over { padding: 16px 0 120px; } .gc-closing > img.section-bg { object-position: 40% 75%; } }
/* Rapture section: the "8th day" line larger */
.rv .rv-text p { font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.32; }
.rv-top-right .rv-text { max-width: 34em; }