/* Callover site layout. Spec: docs/SITE.md (1.2 fixes this file's order), docs/DESIGN.md for the
   system itself. Everything shared with the app lives in css/tokens.css and is never duplicated here.
   Order: page head and container; nav and footer; the home page (backdrop, stage, scroll story);
   bento spans; long-read and sticky still; ledger table; the fee card; the figure row; shot figures;
   disclosure list; final band; prose pages; contact; 404; moving photographs; print. */

/* ------------------------------------------------------------------
   1. Page head and container
   ------------------------------------------------------------------ */
main{display:block}
.section{padding:var(--section-y) 0}
.section-rule{border-top:1px solid var(--hairline)}

/* the first section of a page that is not the hero: clear of the nav pill */
.page-head{padding:calc(var(--nav-h) + 16px + clamp(48px, 6vw, 72px)) 0 clamp(32px, 4vw, 48px)}
.page-head h1{max-width:20ch}
.page-head .lede{margin-top:clamp(16px, 2vw, 24px); color:var(--muted); font-size:var(--t-lead); line-height:1.5; max-width:56ch}

.section-head{margin-bottom:clamp(28px, 4vw, 44px)}
.section-head h2{max-width:20ch}
.section-head .sub{margin-top:12px; color:var(--muted); font-size:var(--t-lead); line-height:1.5; max-width:56ch}
.section-head .t-eyebrow{margin-bottom:12px}

.lede,.sub,.prose p{overflow-wrap:break-word}
.stack{display:grid; gap:12px}
.stack p{max-width:62ch; color:var(--muted)}
.stack p.ink{color:var(--ink)}
.section.is-flush-top{padding-top:0}
.gap-sm{margin-top:20px}
.gap-md{margin-top:24px}
.gap-lg{margin-top:28px}

/* ------------------------------------------------------------------
   2. Nav and footer
   ------------------------------------------------------------------ */
.nav .lockup{margin-right:auto}
@media (min-width:720px){
  .nav .lockup{margin-right:0}
  .nav-links{margin-left:auto; margin-right:auto}
}
/* Narrow phones (SITE.md 1.5): the lockup, the toggle and the button need about 353px, so the toggle never
   shrinks, the pill tightens under 390px, and under 360px the lockup keeps its mark and drops its word. */
.nav .toggle{flex:none}
@media (max-width:389px){ .nav{gap:10px; padding-left:14px} }
@media (max-width:359px){ .nav .lockup .word{display:none} }
.site-footer{border-top:1px solid var(--hairline); padding:64px 0 40px}
.footer-cols{display:grid; gap:32px 24px; grid-template-columns:1fr}
@media (min-width:600px){ .footer-cols{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .footer-cols{grid-template-columns:2fr 1fr 1fr 1fr} }
.footer-brand .lockup{font-size:22px}
.footer-brand p{margin-top:14px; color:var(--muted); max-width:42ch}
.footer-col h2{font:500 var(--t-small)/1.4 var(--font-text); letter-spacing:.01em; color:var(--ink)}
.footer-col ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.footer-col a{color:var(--muted); text-decoration:none; overflow-wrap:break-word}
.footer-col a:hover{color:var(--ink); text-decoration:underline}
.footer-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline); color:var(--muted)}
.footer-foot p{font:400 var(--t-small)/1.4 var(--font-text); letter-spacing:.01em}

/* ------------------------------------------------------------------
   3. Home: the backdrop, the stage, and the scroll story
   ------------------------------------------------------------------ */
/* The home page is one story: a square stage that keeps still while six captions pass it, each caption
   swapping the loop on the stage. Everything here is scoped to that page and used nowhere else.
   Spec: docs/SITE.md 2; the loops themselves are docs/MOTION.md. No GSAP on this page: the stage is
   position:sticky and the current step is an IntersectionObserver, so the story survives the CDN. */

/* the hero and the story keep the dark scheme whatever the page's own is: the six renders are graded
   for #101114 and scene 4 uses the page's own dark as its night sky, so on cream its moon and stars
   disappear (brand/3d/story/STORYBOARD.md section 3). tokens.css keys its dark values on :root, so they
   cannot be inherited by an element below it: this is a verbatim copy of the `:root[data-theme="dark"]`
   block in css/tokens.css and is edited with it, never apart from it. */
.home-dark{
  background:var(--ground); color:var(--ink);
  color-scheme:dark;
  --ground:#101114;
  --surface:#17181D;
  --raised:#1E1F25;
  --ink:#ECEBE6;
  --muted:#9A9DA9;
  --accent:#8FA4EE;
  --accent-ink:#101114;
  --accent-tint:#303445;
  --success:#5CC48C; --success-ink:#5CC48C; --success-tint:#283935;
  --warning:#E3A64A; --warning-ink:#E3A64A; --warning-tint:#3E352B;
  --danger:#F07A6E;  --danger-ink:#F07A6E;  --danger-tint:#402E31;
  --muted-tint:#32333A;
  --hairline:#2A2B33;
  --hairline-strong:#6E727E;
  --input-bg:#101114;
  --focus-ring:0 0 0 3px rgba(143,164,238,.40);
  --nav-bg:rgba(30,31,37,.84);
  --scrim:rgba(4,6,18,.68);
  --shadow-sm:0 1px 2px rgba(4,6,18,.40), 0 2px 6px rgba(4,6,18,.30);
  --shadow-md:0 1px 2px rgba(4,6,18,.35), 0 10px 24px -8px rgba(4,6,18,.50), 0 28px 56px -20px rgba(4,6,18,.55);
  --shadow-lg:0 2px 6px rgba(4,6,18,.40), 0 24px 48px -16px rgba(4,6,18,.60), 0 48px 96px -32px rgba(4,6,18,.60);
  --shadow-frame:0 2px 6px rgba(4,6,18,.40), 0 24px 48px -16px rgba(4,6,18,.60), 0 72px 128px -32px rgba(143,164,238,.16);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --photo-filter:saturate(.80) contrast(1.05) brightness(.90);
  --grain-opacity:.22;
}

/* the backdrop: three blurred colour fields that drift, a technical grid masked to the centre, and a
   slow lean towards the pointer (site.js sets --px and --py). CSS only, no video, no image. */
.backdrop{
  position:absolute; left:50%; transform:translateX(-50%); top:-180px;
  width:100vw; height:min(130vh, 1200px); z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, rgba(0,0,0,.35) 80%, transparent);
  mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.45) 84%, transparent);
}
.backdrop i{
  position:absolute; display:block; border-radius:50%; filter:blur(72px); opacity:.85;
  mix-blend-mode:screen; animation:drift 26s var(--ease-inout) infinite alternate;
}
.backdrop i:nth-child(1){width:58vw; height:58vw; left:-14vw; top:-8vh; background:radial-gradient(circle, #2A4FD0 0%, rgba(42,79,208,0) 68%)}
.backdrop i:nth-child(2){width:56vw; height:56vw; right:-14vw; top:2vh; background:radial-gradient(circle, #6B4FE0 0%, rgba(107,79,224,0) 70%); animation-duration:34s; animation-delay:-8s}
.backdrop i:nth-child(3){width:46vw; height:46vw; left:30vw; top:34vh; background:radial-gradient(circle, #1E9B86 0%, rgba(30,155,134,0) 72%); animation-duration:42s; animation-delay:-16s; opacity:.4}
.backdrop u{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(64% 54% at 52% 26%, #000, transparent 72%);
  mask-image:radial-gradient(70% 62% at 55% 30%, #000, transparent 74%);
}
@keyframes drift{
  from{transform:translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1)}
  to{transform:translate3d(calc(7vw + var(--px, 0px)), calc(-5vh + var(--py, 0px)), 0) scale(1.18)}
}

/* the hero */
.home-hero{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px, 4vw, 56px); align-items:center;
  /* padding-block only: the page gutter comes from .wrap and a padding shorthand here would zero it */
  min-height:100svh; padding-block:calc(var(--nav-h) + 40px) clamp(40px, 6vw, 72px);
}
/* the backdrop is the one child that stays behind: every other child of the hero is lifted over it */
.home-hero > div:not(.backdrop){position:relative; z-index:1}
.home-hero .eyebrow{margin:0 0 14px; color:var(--muted); font:500 15px/1.4 var(--font-text)}
.home-hero h1{margin:0; max-width:14ch}
.home-hero .lede{margin:20px 0 30px; max-width:32ch; color:var(--muted); font-size:var(--t-lead); line-height:1.5}
.home-hero .ctas{display:flex; flex-wrap:wrap; gap:12px}
/* the stage: one square plate, in the hero and again in the story. The renders are graded for the dark
   ground, so the plate carries its own light rather than the page's surface colour. */
.plate{
  position:relative; aspect-ratio:1 / 1; border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--raised) 88%, transparent), color-mix(in srgb, var(--surface) 80%, transparent) 70%);
  border:1px solid var(--hairline);
  box-shadow:0 50px 140px -50px rgba(42, 79, 208, .55), var(--shadow-md);
}
/* the hero's plate alone clips, because it blurs what is behind it; the story's plate must not,
   or it would cut the dots that sit under its foot */
.home-hero .plate{overflow:hidden; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}

/* one loop: a poster that never leaves the markup, and a video painted over it once it is playing.
   Every reason not to play, from reduced motion to a decode failure, leaves the poster. */
.loop{position:absolute; inset:6%}
.loop img,.loop video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.loop video{opacity:0; transition:opacity .4s var(--ease)}
.loop.is-playing video{opacity:1}

/* the story: the stage keeps still, the captions pass it */
.home-story{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 72px); padding-block:40px 80px}
.stage-col{position:relative}
.stage{position:sticky; top:calc(50vh - min(38vw, 440px) / 2); width:min(38vw, 440px); margin-left:auto}
.stage .loop{opacity:0; transform:scale(.92) translateY(12px); transition:opacity .5s var(--ease), transform .7s var(--ease)}
.stage .loop.is-current{opacity:1; transform:none}
.dots{position:absolute; left:0; right:0; bottom:-34px; display:flex; justify-content:center; gap:8px}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--hairline); transition:background .3s var(--ease), width .3s var(--ease)}
.dots i.is-current{width:22px; border-radius:4px; background:var(--accent)}

.home-steps{list-style:none; margin:0; padding:0}
.home-step{min-height:78vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .5s var(--ease)}
.home-step.is-current{opacity:1}
.home-step .n{margin-bottom:14px; color:var(--accent); font:600 14px/1 var(--font-text); letter-spacing:.04em}
.home-step h2{margin:0; max-width:15ch; font:600 clamp(1.9rem, 1.2rem + 2.2vw, 3rem)/1.08 var(--font-display); letter-spacing:-.015em}
.home-step p{margin:16px 0 0; max-width:32ch; color:var(--muted); font-size:var(--t-lead); line-height:1.5}
.home-step .mini{display:none}

/* below the story */
.film{border-radius:var(--r-lg); overflow:hidden; background:#000; aspect-ratio:16 / 9; box-shadow:var(--shadow-md)}
.film video{display:block; width:100%; height:100%}
.home-start{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.home-start .core{display:grid; gap:6px; height:100%}
.home-start b{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.home-start span{color:var(--muted)}
.doors{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px, 3vw, 32px)}

/* phones: the hero stacks, the sticky stage goes, and every step carries its own loop (SITE.md 2.2) */
@media (max-width:820px){
  .home-hero{grid-template-columns:1fr; min-height:0; padding-block:calc(var(--nav-h) + 32px) 48px}
  .home-hero .plate{order:2; width:100%; max-width:360px; margin:8px auto 0}
  .home-story{grid-template-columns:1fr; padding-block-end:40px}
  .stage-col{display:none}
  .home-step{min-height:0; opacity:1; padding-block:28px; border-top:1px solid var(--hairline)}
  .home-step .mini{display:block; position:relative; width:180px; aspect-ratio:1 / 1; margin-bottom:18px; border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
  .home-start{grid-template-columns:1fr}
}

/* asked for less motion: the posters, every caption at full strength, and nothing that moves */
@media (prefers-reduced-motion:reduce){
  .backdrop i{animation:none}
  .loop video{display:none}
  .loop,.stage .loop,.home-step,.dots i{transition:none}
  .home-step{opacity:1}
  .stage .loop{opacity:0; transform:none}
  .stage .loop.is-current{opacity:1}
}

/* ------------------------------------------------------------------
   4. Bento spans
   ------------------------------------------------------------------ */
.bento .cell-copy h3{margin-top:2px}
.cell-plain > .core{display:flex; flex-direction:column; gap:20px; height:100%}
.cell-plain .cell-copy{padding:0; margin-top:auto}
.cell-photo .cell-copy > *:first-child{margin-bottom:10px}
/* flex-basis 0, so a 16:9 photograph does not set the row's height and leave its neighbour bare */
.cell-photo .photo{flex:1 1 0; min-height:220px}
.cell-tint .pill-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cell-tint .pill-step{display:inline-flex; align-items:center; gap:8px}
.cell-tint .pill-row > svg,.cell-tint .pill-step > svg{width:13px; height:13px; color:var(--muted); flex:none}
.quoted{display:grid; gap:4px}
.quoted .dt{font:500 var(--t-small)/1.4 var(--font-text); letter-spacing:.01em; color:var(--muted)}
.quoted .figure{font:600 var(--t-headline)/1.05 var(--font-display); letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.quoted .of{color:var(--muted); font-size:var(--t-small)}
.reg-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.reg-row .who{font-weight:500}
.reg-row .when{color:var(--muted); font-size:var(--t-small); font-variant-numeric:tabular-nums}
.reg-row .seg{margin-left:auto}
/* The Stripe cell's component is a dashboard row (DESIGN 10.10), not a lone pill: the payer and the
   product above, the status and the money beneath. As one 24px pill row it left a third of a span-3 cell
   bare beside a neighbour carrying a whole field group. */
.money-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--hairline)}
.money-head .who{display:flex; flex-direction:column; gap:2px; font:500 15px/1.4 var(--font-text); color:var(--ink)}
.money-head .who .sub{font:400 13px/1.4 var(--font-text); color:var(--muted)}
.money-head .what{font:400 13px/1.4 var(--font-text); color:var(--muted); text-align:right}
.money-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

/* ------------------------------------------------------------------
   5. Long-read and sticky still
   ------------------------------------------------------------------ */
.longread{display:grid; gap:clamp(24px, 4vw, 48px)}
@media (min-width:1024px){ .longread{grid-template-columns:7fr 5fr; align-items:start} }
.longread-still{order:-1}
@media (min-width:1024px){ .longread-still{order:0; position:sticky; top:calc(var(--nav-h) + 32px)} }
.longread-still .photo{aspect-ratio:16/10}
@media (min-width:1024px){ .longread-still .photo{aspect-ratio:4/5} }
.longread-still .photo img{object-position:50% 42%}
.lesson{padding:32px 0; border-top:1px solid var(--hairline)}
.lesson:first-child{padding-top:0; border-top:0}
.lesson h3{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.lesson dl{display:grid; gap:4px; margin-top:14px}
.lesson dt{font:500 var(--t-small)/1.4 var(--font-text); letter-spacing:.01em; color:var(--muted)}
.lesson dd{margin:0 0 12px; max-width:62ch}
.lesson dd:last-child{margin-bottom:0}
.longread .closing{margin-top:32px; padding-top:32px; border-top:1px solid var(--hairline); font-size:var(--t-lead); line-height:1.5; max-width:56ch}

/* ------------------------------------------------------------------
   6. Ledger table (the comparison, and the monthly table on /pricing)
   ------------------------------------------------------------------ */
.ledger .table{min-width:720px}
.ledger th,.ledger td{white-space:normal; vertical-align:top; padding:14px 16px; height:auto; font-size:15px}
.ledger tbody th{font:500 15px/1.5 var(--font-text); color:var(--ink); border-bottom:1px solid var(--hairline); text-align:left; min-width:160px}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}
.ledger thead th{white-space:nowrap}
.ledger .col-ours{background:var(--accent-tint); color:var(--ink)}
.ledger thead .col-ours{color:var(--ink)}
@media (max-width:719px){
  .ledger tbody th{position:sticky; left:0; background:var(--raised); z-index:1}
  .ledger tbody tr:hover th{background:var(--surface)}
}
/* Only where the table actually overflows: the ledger's own min-width is 720px (above), so above that
   plus the shell's bezel the four columns are all on screen and the line would be a lie. */
.ledger-hint{display:none}
@media (max-width:759px){ .ledger-hint{display:block; margin-top:12px; color:var(--muted); font-size:15px} }
.ledger-note{margin-top:20px; max-width:62ch}
.ledger-note a{color:var(--accent)}

.table-figures .table{min-width:640px}
.table-figures td,.table-figures th{white-space:nowrap}
.table-figures tbody th{font:400 15px/1.5 var(--font-text); color:var(--ink); text-align:left; border-bottom:1px solid var(--hairline); padding:0 16px; height:52px}
.table-figures tbody tr:last-child th,.table-figures tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------
   7. The fee card: one card, three figures, the same on five pages
   ------------------------------------------------------------------ */
.fee-card{max-width:900px; margin-left:auto; margin-right:auto}
.fee-figures{display:grid; grid-template-columns:1fr}
.fee-figure{padding:16px 0}
.fee-figure:first-child{padding-top:0}
.fee-figure + .fee-figure{border-top:1px solid var(--hairline)}
.fee-figure .fig{display:block; font:600 var(--t-headline)/1.05 var(--font-display); letter-spacing:-.025em}
.fee-figure p{margin-top:8px; color:var(--muted); font-size:var(--t-small); line-height:1.45; max-width:28ch}
@media (min-width:768px){
  .fee-figures{grid-template-columns:repeat(3, 1fr)}
  .fee-figure{padding:0 24px}
  .fee-figure:first-child{padding-left:0}
  .fee-figure:last-child{padding-right:0}
  .fee-figure + .fee-figure{border-top:0; border-left:1px solid var(--hairline)}
}
.fee-notes{display:grid; gap:10px; margin-top:24px; padding-top:24px; border-top:1px solid var(--hairline); max-width:62ch}
.fee-notes p{color:var(--muted)}
.fee-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(24px, 3vw, 32px)}

/* ------------------------------------------------------------------
   8. The figure row (who pays the fees)
   ------------------------------------------------------------------ */
.figure-pair{display:grid; gap:24px; grid-template-columns:1fr}
@media (min-width:768px){ .figure-pair{grid-template-columns:1fr 1fr} }
.figure-pair > .shell > .core{height:100%; display:flex; flex-direction:column}
.card-tint > .core{background:var(--accent-tint)}
.figure-card h3{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.figure-card .badge{display:block; margin-top:4px; color:var(--muted); font-size:var(--t-small)}
.figure-rows{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); flex:1 1 auto; align-content:space-between}
.figure-rows dt{color:var(--muted); font-size:13px; line-height:1.4}
.figure-rows dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; line-height:1.4}
.figure-rows dd.strong{font-weight:500}
.breakdown{max-width:420px; margin-top:16px}
.breakdown .figure{font:600 var(--t-heading)/1.15 var(--font-display); letter-spacing:-.02em}
.breakdown .t-small{display:block; margin-top:6px; color:var(--muted); line-height:1.45}
.rule-pairs{display:grid; gap:20px; margin-top:28px}
@media (min-width:768px){ .rule-pairs{grid-template-columns:1fr 1fr; gap:24px 32px} }
.rule-pairs .ink{font-weight:500; color:var(--ink)}
.rule-pairs p + p{margin-top:6px; color:var(--muted)}

/* split prose: the heading on the left, the paragraphs on the right, no card and no border */
.split{display:grid; gap:24px}
@media (min-width:900px){ .split{grid-template-columns:4fr 7fr; gap:clamp(32px, 4vw, 56px)} }
.split h2{max-width:14ch}
.split .sub{margin-top:12px; color:var(--muted); max-width:38ch}

/* the quietest construction on the site, for the sentence a studio most wants to hear */
.note-band{max-width:62ch; margin-left:auto; margin-right:auto; padding:48px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.note-band h2{max-width:22ch}
.note-band .stack{margin-top:16px}

/* where the money goes: a long read beside the barre photograph */
.money-split{display:grid; gap:clamp(24px, 4vw, 48px)}
@media (min-width:900px){ .money-split{grid-template-columns:7fr 5fr; align-items:center} }
.money-split .photo{aspect-ratio:3/4}
.money-split .photo img{object-position:50% 30%}
.money-caption{padding:18px 24px 20px}
.money-caption h3{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.money-caption p{margin-top:4px; color:var(--muted)}

/* more than one venue: one compact row, the ask on the right */
.venue-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.venue-row .copy{max-width:56ch}
.venue-row h3{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.venue-row p{margin-top:4px; color:var(--muted)}

/* ------------------------------------------------------------------
   9. Shot figures (screenshots captured from the running demo)
   ------------------------------------------------------------------ */
.shot{margin:clamp(24px, 3vw, 40px) 0 0}
.shot > .core{padding:0; overflow:hidden}
.shot img{display:block; width:100%; height:auto}
.shot .shot-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .shot .shot-light{display:none}
  :root:not([data-theme="light"]) .shot .shot-dark{display:block}
}
:root[data-theme="dark"] .shot .shot-light{display:none}
:root[data-theme="dark"] .shot .shot-dark{display:block}
.shot figcaption{padding:12px 8px 4px; color:var(--muted); font-size:var(--t-small); line-height:1.45}
/* the capture is not in the tree yet (docs/SITE.md 1.13, item 9): keep the space, keep the caption,
   and show a quiet panel rather than a broken image. site.js sets the attribute on a failed load. */
.shot[data-missing] > .core{aspect-ratio:16/10; background:var(--muted-tint)}
.shot[data-missing] img{display:none}

/* ------------------------------------------------------------------
   10. Disclosure list
   ------------------------------------------------------------------ */
.qa{max-width:760px}
.qa details{border-bottom:1px solid var(--hairline)}
.qa summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; cursor:pointer; list-style:none; font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.qa summary svg{width:20px; height:20px; flex:none; color:var(--muted); transition:transform var(--dur-2) var(--ease)}
.qa details[open] summary svg{transform:rotate(180deg)}
.qa .answer{display:grid; gap:10px; max-width:62ch; padding-bottom:20px; color:var(--muted)}
.qa details[open] .answer{animation:qa-in var(--dur-2) var(--ease) both}
.qa .answer ul{margin:0; padding-left:20px; display:grid; gap:8px}
.qa .answer a{color:var(--accent)}
@keyframes qa-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.qa-more{margin-top:24px; max-width:62ch; color:var(--muted)}
.qa-more a{color:var(--accent)}

/* ------------------------------------------------------------------
   11. Final band
   ------------------------------------------------------------------ */
.band{--band-gap:24px; display:grid; gap:var(--band-gap); align-items:center}
@media (min-width:1024px){
  .band{grid-template-columns:5fr 7fr}
  /* SITE 2.8 wants 40px of the panel over the print. The grid gap closes before any overlap begins, so
     the margin has to carry the gap as well or the panel only just touches the photograph. */
  .band-panel{position:relative; z-index:1; margin-right:calc(-40px - var(--band-gap))}
}
.band-panel h2{max-width:16ch}
.band-panel .sub{margin-top:12px; color:var(--muted); max-width:44ch}
.band-panel .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.band-photo{margin:0}
.band-photo .photo{aspect-ratio:3/2; border-radius:var(--r-md)}
.band-photo .photo img{object-position:62% 50%}

/* ------------------------------------------------------------------
   12. Prose pages (/terms, /privacy)
   ------------------------------------------------------------------ */
.prose{max-width:66ch}
.prose h2{font:600 var(--t-heading)/1.2 var(--font-display); letter-spacing:-.015em; margin-top:40px}
.prose h3{font:600 var(--t-title)/1.3 var(--font-text); letter-spacing:-.01em; margin-top:24px}
.prose p,.prose li{margin-top:12px; max-width:66ch}
.prose ul,.prose ol{padding-left:20px}
.contents{margin:32px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.contents a{color:var(--accent)}

/* ------------------------------------------------------------------
   13. Contact
   ------------------------------------------------------------------ */
.narrow{max-width:720px}
.address-row{display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between}
/* The address is 21 characters with no space in it, so it can only wrap mid-word. At --t-heading it needs
   about 11.2 times its font size across; under about 360px that is more than the card's core has, and at
   320px it broke as "calloverapp@gmail." over "com". 5.8vw keeps it on one line down to 320px and leaves
   it at --t-heading from 380px up. break-word stays as the last resort for a narrower window. */
.address-row a.address{font:600 var(--t-heading)/1.2 var(--font-display); font-size:min(var(--t-heading), 5.8vw); letter-spacing:-.015em; color:var(--accent); text-decoration:none; word-break:break-word}
.address-row a.address:hover{text-decoration:underline}
.steps-list{margin:14px 0 0; padding-left:20px; display:grid; gap:10px}
.steps-list li{max-width:62ch}

/* ------------------------------------------------------------------
   14. 404
   ------------------------------------------------------------------ */
/* padding-block only: the page gutter comes from .wrap and a padding shorthand here would zero it */
.notfound{display:grid; align-content:center; justify-items:start; gap:16px; min-height:60vh; padding-top:calc(var(--nav-h) + 64px); padding-bottom:96px}
.notfound h1{max-width:18ch}
.notfound .mark{width:32px; height:32px}
.notfound p{color:var(--muted); max-width:52ch}
.notfound .links{display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:8px}
.notfound .links a:not(.btn){color:var(--accent); text-decoration:none; font-weight:500}
.notfound .links a:not(.btn):hover{text-decoration:underline}

/* ------------------------------------------------------------------
   15. Moving photographs (docs/MOTION.md)
   ------------------------------------------------------------------ */
/* The loop is painted over its own still, which never leaves the markup: every reason not to play it, from
   a reduced-motion setting to a failed fetch, simply leaves the photograph as it was. Only opacity moves.
   The grain overlay is .photo::after, the last child in paint order, so it still sits over the video. */
.photo > .motion{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:var(--photo-filter); opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.photo.is-moving > .motion{opacity:1}
@media (prefers-reduced-motion: reduce){ .photo > .motion{display:none} }

/* ------------------------------------------------------------------
   16. Print: the two pages people print keep their words and lose the furniture
   ------------------------------------------------------------------ */
@media print{
  .nav,.toggle,.site-footer .footer-cols,.band,.shot,.skip{display:none !important}
  :root{--ground:#FFFFFF; --surface:#FFFFFF; --raised:#FFFFFF; --ink:#000000; --muted:#333333}
  body{background:#FFFFFF; color:#000000}
  .photo > .motion{display:none}
  .page-head{padding-top:0}
  .shell{box-shadow:none; border:1px solid #CCCCCC}
  .core{box-shadow:none}
  a{color:#000000}
}

/* a heading jumped to by an anchor clears the floating nav (nav height plus its own top gap) */
:target, section[id], h2[id], h3[id]{scroll-margin-top:calc(var(--nav-h, 64px) + 28px)}