@font-face{font-family:'Archivo Expanded';font-weight:100 900;font-style:normal;font-display:swap;src:url('/fonts/archivo-exp.woff2') format('woff2')}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/open-sauce-one-400.woff2') format('woff2')}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/open-sauce-one-600.woff2') format('woff2')}
@font-face{font-family:'Open Sauce One';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/open-sauce-one-700.woff2') format('woff2')}
@font-face{font-family:'Open Sauce One';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/open-sauce-one-400-italic.woff2') format('woff2')}


/* ============ Fonts (self-hosted, embedded) ============
   Body: Open Sauce One (the specified body typeface, embedded).
   Display: Archivo pinned to its Expanded width, standing in for CY Grotesk V3 Wide Bold.
   To use the real CY Grotesk, host its files and uncomment the @font-face below;
   it sits first in --display so it takes priority automatically. */

/* ---- OPTIONAL: drop in licensed CY Grotesk V3 Wide Bold to replace the substitute ----
@font-face{font-family:'CY Grotesk V3 Wide';font-weight:700;font-display:swap;src:url(assets/fonts/CYGroteskV3Wide-Bold.woff2) format('woff2')}
-------------------------------------------------------------------------------------- */

:root{
  --ink:#0A0908;
  --ink-2:#131110;
  --ink-3:#1b1815;
  --brass:#C4A15A;
  --brass-lite:#DcBd83;
  --brass-deep:#9C7C3C;
  --cream:#EFE9DD;
  --paper:#F5F3ED;
  --muted:#A79F90;
  --muted-dim:#7d766a;
  --hair:rgba(196,161,90,.30);
  --hair-soft:rgba(196,161,90,.16);
  --blue:#5E86A6;
  --red:#B4494B;

  --display:'CY Grotesk V3 Wide','Archivo Expanded',sans-serif;
  --body:'Open Sauce One',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --h2:clamp(30px,5vw,60px);
  --track:-0.05em;

  --nav-h:76px;
  --edge:clamp(20px,5vw,84px);
  --maxw:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
::selection{background:var(--brass);color:var(--ink)}

/* ---- Display type ---- */
.d{
  font-family:var(--display);font-weight:800;font-stretch:125%;
  text-transform:uppercase;letter-spacing:var(--track);line-height:.92;
  color:var(--cream);
}
.d.brass{color:var(--brass)}
/* Consistent primary section heading size across the site */
.sec-title{font-size:var(--h2)}
/* Label / eyebrow (used only where the source deck uses one) */
.label{
  font-family:var(--body);font-weight:600;text-transform:uppercase;
  letter-spacing:.20em;font-size:12.5px;color:var(--brass);
}
.label.pale{color:var(--paper)}
.standfirst{font-style:normal;color:var(--muted);font-size:clamp(17px,2vw,20px);line-height:1.5;max-width:60ch}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
section{position:relative}
.rule{height:1px;background:var(--hair);border:0;margin:0}
.hair-top{border-top:1px solid var(--hair-soft)}

/* ---- Buttons ---- */
.btn{
  --bg:var(--brass);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:13px;line-height:1;
  padding:16px 26px;background:var(--bg);color:var(--fg);
  border:1px solid var(--brass);cursor:pointer;
  transition:background .35s ease,color .35s ease,transform .2s ease;
}
.btn:hover{background:transparent;color:var(--brass)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--brass-lite);outline-offset:3px;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--ink);padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---- Decorative diamond motif ---- */
.diamond{position:absolute;pointer-events:none;opacity:.5;z-index:0;
  background:url('/img/diamonds.webp') center/contain no-repeat;
  width:min(38vw,420px);aspect-ratio:1281/1481;}

/* =================== HEADER =================== */
header{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;transition:background .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;}
header.scrolled{background:rgba(10,9,8,.86);backdrop-filter:blur(10px);border-bottom-color:var(--hair-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.brandmark{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  letter-spacing:-.02em;font-size:16px;line-height:.9;color:var(--paper)}
.brandmark span{display:block}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{font-size:12.5px;letter-spacing:.04em;color:var(--muted);position:relative;padding:6px 0;transition:color .3s;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .35s ease}
.navlinks a:hover{color:var(--paper)}
.navlinks a:hover::after{width:100%}
.nav-cta{display:inline-flex}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;padding:8px}
.burger span{display:block;height:1.6px;background:var(--paper);margin:6px 0;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:calc(var(--nav-h) + 12px) var(--edge) 28px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  letter-spacing:var(--track);font-size:clamp(21px,5.4vw,34px);color:var(--cream);padding:11px 0;border-bottom:1px solid var(--hair-soft)}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu .mm-cta{margin-top:26px;font-family:var(--body);font-size:13px;letter-spacing:.13em;color:var(--brass)}
@media(max-width:1080px){
  .navlinks,.nav-cta{display:none}
  .burger{display:block}
}

/* =================== HERO =================== */
/* vertical rhythm is height-aware so the hero always resolves to one screen */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(16px,3.4svh,64px));padding-bottom:clamp(42px,7.5svh,120px)}
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:120%;object-fit:cover;object-position:center 35%}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.15) 38%,rgba(10,9,8,.72) 82%,var(--ink) 100%);}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 15% 30%,transparent 40%,rgba(10,9,8,.5) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.hero-eyebrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-eyebrow .dot{display:inline-block;width:5px;height:5px;background:var(--brass);border-radius:50%;vertical-align:middle;margin:0 10px}
.hero h1{margin:.16em 0 0}
.hero h1 .l1,.hero h1 .l2{display:block;font-size:clamp(44px,min(13vw,16.5svh),178px);line-height:.9;white-space:nowrap}
.hero h1 .at{color:var(--brass)}
/* keeps the normal size on tall/mobile screens, eases down only on short desktop viewports */
.hero .standfirst{margin-top:clamp(10px,1.9svh,22px);font-size:min(clamp(17px,2vw,20px),max(15px,2.6svh))}

/* prominent, thematic venue / date / time strip */
.hero-info{margin-top:clamp(14px,2.6svh,40px);display:grid;grid-template-columns:repeat(4,auto);gap:0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);width:fit-content;max-width:100%}
.hero-info .cell{padding:clamp(10px,1.5svh,16px) clamp(20px,3vw,38px) clamp(10px,1.5svh,16px) 0;position:relative}
.hero-info .cell + .cell{padding-left:clamp(20px,3vw,38px);border-left:1px solid var(--hair-soft)}
.hero-info .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}
.hero-info .v{font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:var(--track);
  color:var(--paper);font-size:clamp(15px,1.8vw,21px);line-height:1.05;margin-top:clamp(5px,1svh,9px)}
.hero-actions{margin-top:clamp(14px,2.6svh,36px);display:flex;gap:14px;flex-wrap:wrap}
.hero-scroll{position:absolute;left:var(--edge);bottom:22px;z-index:3;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-dim);display:flex;align-items:center;gap:10px}
.hero-scroll .line{width:44px;height:1px;background:var(--brass);transform-origin:left;animation:scrollpulse 2.6s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-scroll .line{animation:none}}
@media(max-width:720px){
  .hero-info{grid-template-columns:1fr 1fr}
  .hero-info .cell{padding:14px 18px 14px 0}
  .hero-info .cell:nth-child(2){border-left:1px solid var(--hair-soft);padding-left:18px}
  .hero-info .cell:nth-child(3),.hero-info .cell:nth-child(4){border-top:1px solid var(--hair-soft)}
  .hero-info .cell:nth-child(3){padding-left:0;border-left:0}
}

/* hero type reveal */
.reveal-mask{overflow:hidden;display:block}
.reveal-mask > *{display:block;transform:translateY(102%);opacity:0}
.hero.loaded .reveal-mask > *{transform:translateY(0);opacity:1;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity 1.05s ease}
.hero.loaded .r1>*{transition-delay:.05s}
.hero.loaded .r2>*{transition-delay:.18s}
.hero.loaded .r3>*{transition-delay:.34s}
.hero.loaded .r4>*{transition-delay:.44s}
.hero.loaded .r5>*{transition-delay:.58s}

/* =================== GENERIC SECTION RHYTHM =================== */
.sec{padding-block:clamp(44px,7svh,104px);position:relative}
.sec-sm{padding-block:clamp(36px,5.5svh,80px)}

/* down-chevron scroll cue linking to the next section */
.sec-next{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;
  width:44px;height:44px;display:grid;place-items:center;color:var(--brass);
  border:1px solid var(--hair);border-radius:50%;background:rgba(10,9,8,.4);
  transition:border-color .3s,color .3s,background .3s;animation:bob 2.4s ease-in-out infinite}
.sec-next:hover{border-color:var(--brass);color:var(--paper);background:rgba(10,9,8,.7)}
.sec-next svg{width:16px;height:16px}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}
@media (prefers-reduced-motion:reduce){.sec-next{animation:none}}
@media(max-width:820px){.sec-next{display:none}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* =================== THE IDEA =================== */
.idea{border-top:1px solid var(--hair-soft);overflow:hidden}
.idea > .wrap > .label{color:var(--muted)}
.idea-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px)}
.idea-statement{font-size:var(--h2)}
.idea-statement .g{color:var(--brass)}
.idea-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:end;margin-top:8px}
.idea-body p{max-width:56ch;color:#d7d0c2}
.idea-body p+p{margin-top:1.1em}
.idea-body strong{color:var(--paper);font-weight:700}
.idea-figure{position:relative}
.idea-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(1.02)}
.idea-figure figcaption{margin-top:10px;font-size:12px;letter-spacing:.04em;color:var(--muted-dim)}
.elements{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hair)}
.elements-title{margin-top:clamp(20px,2.4vw,28px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(18px,2.2vw,26px)}
.pillar{padding:26px clamp(18px,2vw,24px);border-right:1px solid var(--hair-soft)}
.pillar:first-child{padding-left:0}
.pillar:last-child{border-right:0;padding-right:0}
.pillar .n{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:14px;color:var(--brass);letter-spacing:0}
.pillar h4{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(19px,2.4vw,26px);margin-top:10px;color:var(--cream)}
@media(max-width:820px){.idea-lead{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-top:1px solid var(--hair-soft);padding:22px 0}
  .pillar:first-child{border-top:0;padding-top:0}
  /* full-bleed image on narrow screens */
  .idea-figure{margin-inline:calc(var(--edge) * -1)}}

/* =================== THE EXPERIENCE =================== */
.exp{background:var(--ink)}
.exp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.exp-title{font-size:var(--h2)}
.exp-title .stack span{display:block}
.exp-title .g{color:var(--brass)}
.exp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(40px,6vw,72px)}
.exp-figure{position:relative;overflow:hidden}
.exp-figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.exp-figure:hover img{transform:scale(1.045)}
.exp-a{grid-column:1/6;aspect-ratio:3/4}
.exp-b{grid-column:6/13;display:flex;flex-direction:column;justify-content:flex-end;gap:22px}
.exp-b .exp-figure{aspect-ratio:16/9}
.exp-copyblock{grid-column:1/6;padding-top:6px}
.exp-copyblock+.exp-copyblock{grid-column:7/13}
.exp-item h4{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(22px,2.6vw,30px);color:var(--cream)}
.exp-item p{color:#cfc8ba;max-width:46ch;margin-top:12px}
.exp-item .k{color:var(--brass);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:14px}
.exp-copyrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--hair);padding-top:clamp(30px,4vw,48px)}
@media(max-width:860px){
  .exp-a{grid-column:1/13;aspect-ratio:4/5}
  .exp-b{grid-column:1/13}
  .exp-copyrow{grid-template-columns:1fr;gap:34px}
}

/* =================== QUTUB =================== */
.qutub{position:relative;background:var(--ink);overflow:hidden}
.qutub-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch;min-height:min(88vh,760px)}
.qutub-media{position:relative;overflow:hidden}
.qutub-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.qutub-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--ink) 100%)}
.qutub-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,min(6vw,7svh),90px) var(--edge) clamp(38px,min(6vw,7svh),90px) clamp(30px,5vw,70px)}
.qutub-copy .label{margin-bottom:20px}
.qutub-copy h2{font-size:var(--h2)}
.qutub-copy h2 .g{color:var(--brass)}
.qutub-copy p{color:#cfc8ba;max-width:44ch;margin-top:22px}
.qutub-facts{display:flex;gap:36px;margin-top:34px;flex-wrap:wrap}
.qutub-facts div .num{font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(24px,3vw,34px);color:var(--paper)}
.qutub-facts div .cap{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:900px){.qutub-grid{grid-template-columns:1fr}.qutub-media{min-height:56vh}
  .qutub-media::after{background:linear-gradient(180deg,transparent 55%,var(--ink) 100%)}
  .qutub-copy{padding:clamp(40px,7vw,60px) var(--edge)}}

/* =================== PROGRAMME =================== */
.programme{background:var(--ink-2);position:relative;isolation:isolate;border-block:1px solid var(--hair-soft)}
.programme::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:url('/img/pattern_monument.webp') center top/cover;mix-blend-mode:screen}
.prog-head{max-width:70ch}
.flow{display:grid;grid-template-columns:1fr;margin-top:clamp(36px,5vw,56px)}
.flow-item{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--hair-soft);align-items:start}
.flow-item:last-child{border-bottom:1px solid var(--hair-soft)}
.flow-mark{width:34px;height:34px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;color:var(--brass);flex:none;margin-top:2px}
.flow-mark svg{width:14px;height:14px}
.flow-body h4{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(18px,2.2vw,24px);color:var(--cream);display:flex;flex-wrap:wrap;gap:.5em;align-items:baseline}
.flow-body h4 .t{color:var(--brass);font-weight:700;font-size:.78em;letter-spacing:.02em}
.flow-body p{color:var(--muted);margin-top:7px;font-size:15.5px;max-width:74ch}
.flow-body .artists{color:#cfc8ba}
.prog-note{margin-top:18px;font-size:12.5px;color:var(--muted-dim);letter-spacing:.02em}

/* season 1 detail card */
.season1{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);margin-top:clamp(44px,6vw,72px);
  border-top:1px solid var(--hair);padding-top:clamp(34px,4vw,52px)}
.s1-lede .label{margin-bottom:16px}
.s1-lede h3{font-size:var(--h2)}
.s1-lede p{color:var(--muted);margin-top:14px;max-width:40ch}
/* same 2 x 3 box grid as before; type matches the programme flow heading pairing
   (.flow-body h4 / h4 .t) exactly — same faces, sizes, weights, colours, tracking */
.s1-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.s1-facts div{background:var(--ink-2);padding:clamp(10px,1.7svh,16px) 12px}
.s1-facts .k{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  letter-spacing:-.015em;font-size:clamp(18px,2.2vw,24px);line-height:1.1;color:var(--cream);text-wrap:balance}
.s1-facts .v{margin-top:8px;font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;
  letter-spacing:.02em;font-size:calc(clamp(18px,2.2vw,24px) * .78);line-height:1.25;color:var(--brass);text-wrap:balance}
.tickets{display:flex;gap:14px;margin-top:clamp(16px,3svh,22px);flex-wrap:wrap}
.ticket{border:1px solid var(--hair);padding:clamp(13px,2.4svh,16px) 20px;min-width:180px}
.ticket .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ticket .p{font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(22px,3vw,30px);color:var(--paper);margin-top:6px}
.ticket .p small{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.04em;color:var(--muted);display:block;text-transform:none}
@media(max-width:820px){.season1{grid-template-columns:1fr}.s1-facts{grid-template-columns:1fr}}
/* short desktop viewports: tighten spacing only, so the section clears the fixed header */
@media(min-width:821px) and (max-height:700px){
  .inaugural{padding-block:clamp(28px,5svh,104px)}
  .s1-lede .label{margin-bottom:10px}
  .s1-lede p{margin-top:9px}
  .tickets{margin-top:15px}
}

/* schedule timeline */
.schedule{margin-top:clamp(48px,6vw,80px)}
.sch-title{font-size:var(--h2)}
.sch-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin-top:34px;position:relative}
.sch-track::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;background:var(--hair)}
.sch-col{position:relative;padding-top:46px}
.sch-col::before{content:"";position:absolute;top:13px;left:0;width:13px;height:13px;background:var(--brass);
  transform:rotate(45deg);box-shadow:0 0 0 5px var(--ink-2)}
.sch-tag{position:absolute;top:0;left:22px;font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;
  font-size:12px;letter-spacing:.02em;color:var(--brass)}
.sch-col h4{color:var(--paper);font-weight:700;font-size:15px}
.sch-col ul{list-style:none;margin:12px 0 0;padding:0}
.sch-col li{font-size:13.5px;color:var(--muted);padding:3px 0;border-bottom:1px solid var(--hair-soft)}
.sch-col li b{color:#cfc8ba;font-weight:600}
.sch-foot{margin-top:22px;font-size:12px;letter-spacing:.03em;color:var(--muted-dim);text-transform:uppercase}
@media(max-width:820px){.sch-track{grid-template-columns:1fr;gap:8px}.sch-track::before{display:none}
  .sch-col{padding-top:0;padding-left:26px;border-left:1px solid var(--hair);padding-bottom:26px}
  .sch-col::before{top:4px;left:-7px}.sch-tag{position:static;display:block;margin-bottom:8px}}

/* split standalone sections */
.inaugural{background:var(--ink);padding-block:clamp(34px,6svh,104px)}
.sched-sec{background:var(--ink-2);border-block:1px solid var(--hair-soft)}
#inaugural .season1{margin-top:0;border-top:0;padding-top:0}
#schedule .schedule{margin-top:0}

/* =================== AUDIENCE =================== */
.audience{background:var(--ink)}
.aud-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,84px);align-items:center;margin-top:clamp(34px,5vw,52px)}
.aud-chart{display:flex;flex-direction:column;align-items:center;gap:20px}
.donut{width:min(80vw,360px)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;width:100%;max-width:360px}
.legend div{display:flex;gap:9px;font-size:13px;color:var(--muted);align-items:flex-start;line-height:1.35}
.legend .sw{width:11px;height:11px;flex:none;margin-top:3px}
.legend b{color:var(--paper);font-weight:600}
.aud-list{display:grid;gap:0}
.aud-row{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--hair-soft);align-items:start}
.aud-row:last-child{border-bottom:1px solid var(--hair-soft)}
.aud-row .mk{width:30px;height:30px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;color:var(--brass);flex:none}
.aud-row .mk svg{width:12px;height:12px}
.aud-row h4{font-family:var(--body);font-weight:700;font-size:16px;color:var(--paper);letter-spacing:.01em}
.aud-row p{color:var(--muted);margin-top:5px;font-size:14.5px;max-width:60ch}
@media(max-width:860px){.aud-grid{grid-template-columns:1fr}}

/* =================== PARTNERSHIPS =================== */
.partners{background:var(--ink-2);position:relative;isolation:isolate;border-block:1px solid var(--hair-soft);overflow:hidden}
.partners::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.42;
  background:url('/img/pattern_monument.webp') center/cover;mix-blend-mode:screen}
.part-head{max-width:64ch}
.part-invite{font-size:var(--h2);margin-top:8px}
.part-invite .g{color:var(--brass)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.tier{border:1px solid var(--hair);padding:30px 26px 28px;position:relative;background:rgba(10,9,8,.35);transition:border-color .35s,transform .35s}
.tier:hover{border-color:var(--brass);transform:translateY(-4px)}
.tier .coin{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;
  font-family:var(--display);font-weight:800;font-stretch:125%;color:var(--ink);line-height:.9;text-align:center}
.tier .coin .amt{font-size:24px}
.tier .coin .u{font-size:10px;letter-spacing:.02em}
.tier .coin .rn,.addpart .coin .rn{font-size:30px;letter-spacing:0;line-height:1}
.tier.t1 .coin{background:var(--brass)}
.tier.t2 .coin{background:var(--blue)}
.tier.t3 .coin{background:var(--red)}
.tier .role{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;
  font-size:20px;color:var(--cream)}
.tier .persona{color:var(--brass);font-weight:600;font-size:13px;letter-spacing:.02em;margin-top:12px}
.tier .persona span{color:var(--muted);display:block;font-weight:400;letter-spacing:0;margin-top:3px;text-transform:none}
.tier .price{position:absolute;top:30px;right:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim)}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

.addpart{margin-top:clamp(38px,5vw,58px);border:1px solid var(--hair);padding:clamp(24px,3vw,36px);display:grid;
  grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.addpart .coin{width:96px;height:96px;border-radius:50%;background:var(--brass);display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-stretch:125%;color:var(--ink);text-align:center;line-height:.9}
.addpart .coin .amt{font-size:30px}
.addpart .coin .u{font-size:11px}
.addpart-body .label{margin-bottom:12px}
.addpart-body p{color:#cfc8ba;font-size:15.5px;line-height:1.7}
.addpart-body p b{color:var(--paper);font-weight:600}
.addpart-body{min-width:0}
.addpart-body .sep{color:var(--brass)}
@media(max-width:640px){.addpart{grid-template-columns:1fr;text-align:center}.addpart .coin{margin-inline:auto}}

/* marketing reach */
.reach{margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--hair);padding-top:clamp(32px,4vw,48px)}
.reach-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,20px);margin-top:26px}
.stat .fig{font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(26px,3.4vw,42px);color:var(--brass);line-height:1}
.stat .cap{font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:10px;line-height:1.35}
@media(max-width:820px){.reach-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:480px){.reach-grid{grid-template-columns:1fr 1fr}}

/* backed by */
.backed{margin-top:clamp(46px,6vw,74px);border-top:1px solid var(--hair);padding-top:clamp(32px,4vw,48px)}
.backed-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:clamp(26px,4vw,52px);margin-top:26px}
.backed-col .label{margin-bottom:16px}
.backed-col h4{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;
  font-size:19px;color:var(--cream)}
.backed-col p{color:var(--muted);font-size:14px;margin-top:10px;max-width:42ch}
.backed-col p b{color:#cfc8ba;font-weight:600}
.advisors{display:grid;gap:14px}
.advisor{border-top:1px solid var(--hair-soft);padding-top:12px}
.advisor h5{margin:0;font-family:var(--body);font-weight:700;color:var(--paper);font-size:15px}
.advisor p{margin-top:4px;font-size:13px;color:var(--muted);max-width:46ch}
.part-cta{margin-top:clamp(40px,5vw,60px);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
@media(max-width:860px){.backed-grid{grid-template-columns:1fr}}

/* =================== FINAL CTA / FORM =================== */
.final{position:relative;overflow:hidden;background:var(--ink)}
.final-hero{position:relative;padding-block:clamp(80px,12vh,150px);overflow:hidden}
.final-bg{position:absolute;inset:0;z-index:0}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.5}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(10,9,8,.55) 40%,rgba(10,9,8,.75) 100%)}
.final-hero .wrap{position:relative;z-index:2}
.final-eyebrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.final-eyebrow .dot{display:inline-block;width:5px;height:5px;background:var(--brass);border-radius:50%;vertical-align:middle}
.final h2{font-size:clamp(38px,10.5vw,150px)}
.final h2 .fl{display:block;white-space:nowrap;line-height:.92}
.final h2 .at{color:var(--brass)}
.final-sub{margin-top:22px;color:#cfc8ba;font-size:clamp(17px,2vw,20px);max-width:52ch}
.final-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* form + contacts */
.engage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);padding-block:clamp(64px,9vh,120px);border-top:1px solid var(--hair-soft)}
.form-head .label{margin-bottom:14px}
.form-head h3{font-size:var(--h2)}
.form-head p{color:var(--muted);margin-top:12px;max-width:44ch}
form.ei{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/3}
.field label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--brass)}
.field input,.field select,.field textarea{
  background:var(--ink-2);border:1px solid var(--hair-soft);color:var(--paper);
  font-family:var(--body);font-size:15.5px;padding:14px 15px;border-radius:0;transition:border-color .3s,background .3s}
.field textarea{resize:vertical;min-height:110px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--hair)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass);background:var(--ink-3);outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C4A15A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form-actions{grid-column:1/3;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form-note{font-size:12.5px;color:var(--muted-dim)}
.form-msg{grid-column:1/3;font-size:14px;padding:14px 16px;border:1px solid var(--brass);color:var(--brass);display:none}
.form-msg.show{display:block}

.contacts{display:flex;flex-direction:column;gap:0}
.contacts .label{margin-bottom:20px}
.contact{border-top:1px solid var(--hair-soft);padding:22px 0}
.contact:last-of-type{border-bottom:1px solid var(--hair-soft)}
.contact h4{font-family:var(--body);font-weight:700;color:var(--paper);font-size:18px}
.contact a{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:15px;margin-top:11px;transition:color .3s}
.contact a:hover{color:var(--brass)}
.contact a svg{width:15px;height:15px;color:var(--brass);flex:none}
.contacts-tail{margin-top:26px}
.contacts-tail a{font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(18px,2.4vw,24px);color:var(--paper);transition:color .3s}
.contacts-tail a:hover{color:var(--brass)}
@media(max-width:860px){.engage{grid-template-columns:1fr}form.ei{grid-template-columns:1fr}
  .field.full,.form-actions,.form-msg{grid-column:1/2}}

/* footer */
footer{padding-block:40px;border-top:1px solid var(--hair-soft)}
/* Three columns rather than space-between: with items of unequal width,
   space-between only equalises the gaps, so the middle block drifts off centre
   by half the difference between the brandmark and the copyright. Equal 1fr
   side tracks put the credit line on the page's true centre line instead. The
   outer items are placed explicitly so the middle track stays the middle one
   even when the credit line is blank and only two items render. */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.foot .brandmark{grid-column:1;justify-self:start;font-size:14px}
.foot .foot-copy{grid-column:3;justify-self:end}
.foot .meta{font-size:12.5px;color:var(--muted-dim);letter-spacing:.03em;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.foot .meta .dot{width:3px;height:3px;background:var(--brass);transform:rotate(45deg)}
/* Studio credits in the meta line. Underlined on the hairline rather than
   coloured, so they read as links without pulling focus from the copy beside
   them; brass on hover matches every other link on the page. */
.foot .meta a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair-soft);
  text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
.foot .meta a:hover,.foot .meta a:focus-visible{color:var(--brass);text-decoration-color:var(--brass)}

/* Legal links (Privacy Policy, Terms & Conditions, anything else ticked for
   the footer in the CMS). Their own centred row: .foot is a three-column grid
   with its tracks already spoken for, and these belong to the site rather than
   to any one of the three. */
.foot-legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.03em}
.foot-legal a{color:var(--muted);transition:color .3s}
.foot-legal a:hover,.foot-legal a:focus-visible{color:var(--brass)}
.foot-legal .dot{width:3px;height:3px;background:var(--brass);transform:rotate(45deg);flex:0 0 auto}

/* Credit row, under the main footer line. Centred and a step dimmer than
   .meta so it reads as a sign-off rather than a fourth piece of site data. */
.foot-credit{margin-top:14px;font-size:12px;letter-spacing:.03em;color:var(--muted-dim);text-align:center}
/* Only when it is the row directly under .foot does the credit carry the
   hairline — otherwise the legal row above it already drew one, and two rules
   a line apart read as a mistake. */
.foot + .foot-credit{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair-soft)}

/* Clearing the back-to-top ring.

   The ring is fixed to the bottom-right of the viewport, so when the page is
   scrolled all the way down it floats over whatever the last footer row is.
   Two different problems, solved two different ways.

   On a wide screen the rows are a three-column grid and the ring sits over the
   right-hand track, so only that one item is nudged aside — the footer keeps
   its height, which padding it out did not. `max()` so the nudge applies only
   when the page gutter is narrower than the ring needs; on a wide screen
   --edge already clears it and this is 0. The two centred rows below take the
   clearance on both sides so they stay on the page's centre line. */
.foot .foot-copy{padding-right:max(0px,calc(74px - var(--edge)))}
.foot-legal,.foot-credit{padding-inline:calc(var(--edge) + max(0px,calc(74px - var(--edge))))}

/* Stacked and centred once the three columns no longer fit side by side.

   Here every row is full-width and centred, and a side padding inside a centred
   row is the thing that pushed the copyright half a ring's width off the centre
   line in the first place. So the clearance stops being horizontal: the footer
   simply ends above the ring instead of beside it, and every row is free to sit
   exactly in the middle. The extra height is only on a phone, and only at the
   very bottom of the page. */
@media(max-width:860px){
  .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .foot .brandmark,.foot .foot-copy{grid-column:1;justify-self:center}
  .foot .meta{justify-content:center}
  .foot .foot-copy{padding-right:0}
  footer{padding-bottom:76px}
  .foot-legal,.foot-credit{padding-inline:var(--edge)}
}

/* One line per row on a phone, for the meta list only — not the copyright,
   which is a single node and must never be split.

   Wrapped inline, the separator dot between two items is left stranded at the
   end of a line, which reads as an off-centre line even though the row itself
   is centred. Stacking retires the dots along with the wrapping. */
@media(max-width:560px){
  .foot > .meta:not(.foot-copy){flex-direction:column;gap:8px}
  .foot > .meta:not(.foot-copy) .dot{display:none}
}

/* utility */
.pipe{color:var(--brass);padding:0 .35em;font-weight:400}
@media(max-width:400px){ .d{letter-spacing:-.045em} }

/* =================== BACK TO TOP =================== */
/* A hairline brass ring on ink, the same treatment as .btn.ghost and the
   section rules. It sits inside --edge, the same gutter the page content uses,
   so it lines up with the columns rather than floating at an arbitrary inset. */
.ie-fab{
  position:fixed;bottom:16px;z-index:90;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--hair);border-radius:50%;
  color:var(--brass);background:var(--ink-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-decoration:none;cursor:pointer;padding:0;
  transition:border-color .35s ease,color .35s ease,background .35s ease,transform .2s ease,opacity .35s ease,visibility .35s;
}
.ie-fab svg{width:18px;height:18px;display:block}
.ie-fab:hover,.ie-fab:focus-visible{border-color:var(--brass);color:var(--brass-lite);background:var(--ink-3)}
.ie-fab:active{transform:translateY(1px)}

/* Hidden until there is something to return from. visibility, not display, so
   the fade actually runs and the button leaves the tab order while it is off
   screen. The ring never moves and the footer keeps its height — the footer row
   nudges its copyright clear of it instead. */
.ie-fab-top{right:16px;width:44px;height:44px;opacity:0;visibility:hidden;transform:translateY(12px)}
.ie-fab-top.is-visible{opacity:1;visibility:visible;transform:none}

/* The full-screen menu owns the viewport while it is open. Matched off the menu
   itself, not a body class: this page toggles `.open` on #mobileMenu. The menu
   is z-index 99 against this 90 and covers it anyway; fading stops it showing
   through the slide. */
#mobileMenu.open ~ .ie-fab{opacity:0;visibility:hidden}

@media(max-width:600px){
  .ie-fab-top{width:40px;height:40px}
  .ie-fab svg{width:16px;height:16px}
}

@media(prefers-reduced-motion:reduce){
  /* The lift stays — it is layout, not decoration; only the easing goes. */
  .ie-fab{transition:opacity .01ms,visibility .01ms}
}

/* =================== CMS PAGES (privacy, terms, …) =================== */
/* A legal page is still an Indian Echoes page: the same ink ground, the same
   brass hairlines, the same display face and reveal timing as every section of
   the home page. What changes is the rhythm — these are read top to bottom
   rather than scanned, so the measure is tighter and the type a step calmer. */

.page-hero{
  position:relative;overflow:hidden;background:var(--ink);
  padding-top:calc(var(--nav-h) + clamp(44px,7vh,96px));
  padding-bottom:clamp(36px,6vh,72px);
  border-bottom:1px solid var(--hair-soft);
}
/* A single wash from the top-left, so the masthead has some depth without an
   image behind it — these pages have no photography of their own. */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,rgba(196,161,90,.10) 0%,transparent 58%);
}
.page-hero-diamond{top:-8%;right:-10%;width:min(44vw,460px);opacity:.14}
.page-hero-inner{position:relative;z-index:1}

/* Breadcrumb. Small, muted, and the only place on the page that names where
   the visitor came from. */
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);
  margin-bottom:clamp(20px,3.4vh,34px)}
.crumbs a{color:var(--muted);transition:color .3s}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--brass)}
.crumbs .dot{width:4px;height:4px;background:var(--brass);transform:rotate(45deg);flex:0 0 auto}
.crumbs [aria-current]{color:var(--cream)}

.page-hero-eyebrow{margin:0 0 16px}
.page-hero h1{font-size:clamp(34px,6.4vw,76px);max-width:16ch}
.page-hero-intro{margin:22px 0 0;max-width:62ch}

/* Last-updated stamp. A legal page is only as useful as its date, so it is
   stated plainly under the heading rather than buried at the foot. */
.page-updated{display:flex;align-items:center;gap:10px;margin:26px 0 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim)}
.page-updated .dot{width:4px;height:4px;background:var(--brass);transform:rotate(45deg);flex:0 0 auto}
.page-updated time{color:var(--muted)}

.page-body{padding-block:clamp(48px,8vh,104px);background:var(--ink)}

/* One column by default. The index column is added by the script only once it
   has headings to put in it, so a page without any keeps the full measure. */
.page-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px)}
@media(min-width:1000px){
  .page-grid.has-toc{grid-template-columns:232px minmax(0,1fr)}
}

/* ---- On this page ---- */
/* A <details>: collapsed on a phone, where the index sits above the copy, and
   open in its own sticky column once there is room for one. */
.page-toc{align-self:start}
.page-toc summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  list-style:none;cursor:pointer;padding:14px 0;
  border-block:1px solid var(--hair-soft);
}
.page-toc summary::-webkit-details-marker{display:none}
.page-toc summary:hover .label,.page-toc summary:focus-visible .label{color:var(--brass-lite)}
.page-toc-chev{width:18px;height:18px;flex:0 0 auto;color:var(--brass);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.page-toc[open] .page-toc-chev{transform:rotate(180deg)}
.page-toc nav{padding-top:14px}

@media(min-width:1000px){
  /* Clears the fixed header, which is var(--nav-h) tall. */
  .page-toc{position:sticky;top:calc(var(--nav-h) + 28px)}
  /* In its own column it is always open, so the control is noise — and a
     pointer on a heading that does nothing is worse than no control at all. */
  .page-toc summary{cursor:default;border:0;padding:0 0 14px;pointer-events:none}
  .page-toc-chev{display:none}
  .page-toc nav{padding-top:0}
}
@media(prefers-reduced-motion:reduce){.page-toc-chev{transition:none}}
.page-toc .label{margin:0}
.page-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair-soft)}
.page-toc li{margin:0}
.page-toc li.is-sub a{padding-left:28px;font-size:12.5px;color:var(--muted-dim)}
.page-toc a{
  display:block;padding:7px 0 7px 16px;margin-left:-1px;
  border-left:1px solid transparent;
  font-size:13.5px;line-height:1.4;color:var(--muted);
  transition:color .3s ease,border-color .3s ease;
}
.page-toc a:hover,.page-toc a:focus-visible{color:var(--cream);border-left-color:var(--hair)}
.page-toc a.is-current{color:var(--brass);border-left-color:var(--brass)}

/* ---- Prose (CKEditor output) ----
   Everything here styles HTML this file never sees written down — an editor
   types it in CKEditor and it lands in the page body. So every element the
   editor can produce is given a home, rather than only the ones the two seeded
   pages happen to use today. */
.prose{max-width:74ch;color:#cfc8ba;font-size:clamp(16px,1.15vw,17.5px);line-height:1.75}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose p{margin:0 0 1.25em}

.prose h2{
  font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  letter-spacing:var(--track);line-height:1.02;color:var(--cream);
  font-size:clamp(22px,2.6vw,32px);
  margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid var(--hair-soft);
  /* So a heading jumped to from the index is not left under the fixed bar. */
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{
  font-family:var(--body);font-weight:600;color:var(--paper);
  font-size:clamp(16px,1.5vw,19px);letter-spacing:.01em;line-height:1.35;
  margin:2em 0 .6em;scroll-margin-top:calc(var(--nav-h) + 20px);
}
.prose h4,.prose h5,.prose h6{
  font-family:var(--body);font-weight:600;color:var(--muted);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  margin:1.8em 0 .5em;scroll-margin-top:calc(var(--nav-h) + 20px);
}

.prose a{color:var(--brass);text-decoration:underline;text-decoration-color:var(--hair);
  text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
.prose a:hover,.prose a:focus-visible{color:var(--brass-lite);text-decoration-color:var(--brass)}
.prose strong,.prose b{color:var(--cream);font-weight:600}
.prose em,.prose i{font-style:italic}
.prose mark{background:rgba(196,161,90,.22);color:var(--cream);padding:0 .2em}
.prose sub,.prose sup{font-size:.72em}

/* Lists. The bullet is the brass diamond the rest of the site uses, rather
   than a disc. */
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin:0 0 .6em}
.prose ul > li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:5px;height:5px;background:var(--brass);transform:rotate(45deg);
}
.prose ol{counter-reset:prose-ol}
.prose ol > li{counter-increment:prose-ol}
.prose ol > li::before{
  content:counter(prose-ol) ".";position:absolute;left:0;top:0;
  font-variant-numeric:tabular-nums;color:var(--brass);font-weight:600;font-size:.92em;line-height:1.75;
}
.prose li > ul,.prose li > ol{margin:.6em 0 0}

.prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:1px solid var(--brass);
  color:var(--muted);font-size:1.02em;
}
.prose blockquote p:last-child{margin-bottom:0}

.prose hr{height:1px;border:0;background:var(--hair-soft);margin:2.4em 0}

.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--ink-2);border:1px solid var(--hair-soft);padding:.12em .42em;color:var(--brass-lite)}
.prose pre{background:var(--ink-2);border:1px solid var(--hair-soft);padding:16px 18px;
  overflow-x:auto;margin:0 0 1.25em}
.prose pre code{background:none;border:0;padding:0;color:inherit}

.prose figure{margin:1.8em 0}
.prose img{margin-inline:auto}
.prose figcaption{margin-top:10px;font-size:12.5px;letter-spacing:.03em;color:var(--muted-dim);text-align:center}

/* Tables scroll inside their own box rather than widening the page — a fee or
   data-retention table is the one thing an editor will paste that does not fit
   a phone. */
.prose .table,.prose figure.table{margin:1.8em 0;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.94em}
.prose th,.prose td{border:1px solid var(--hair-soft);padding:11px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--ink-2);color:var(--brass);font-weight:600;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.prose caption{caption-side:bottom;padding-top:10px;font-size:12.5px;color:var(--muted-dim);text-align:left}

/* CKEditor carries alignment and image placement as classes, so what an editor
   sees in the panel is what the page renders. */
.prose .text-center{text-align:center}
.prose .text-right{text-align:right}
.prose .text-justify{text-align:justify}
.prose .image{margin:1.8em 0}
.prose .image-style-align-left{float:left;max-width:50%;margin:.4em 1.6em 1.2em 0}
.prose .image-style-align-right{float:right;max-width:50%;margin:.4em 0 1.2em 1.6em}
.prose .image-style-side{float:right;max-width:46%;margin:.4em 0 1.2em 1.6em}
@media(max-width:700px){
  .prose .image-style-align-left,.prose .image-style-align-right,.prose .image-style-side{
    float:none;max-width:100%;margin:1.8em 0}
}

/* Closing actions. The same pair of buttons as the final block on the home
   page, so the way on from a legal page is the way on from anywhere else. */
.page-foot{margin-top:clamp(44px,7vh,88px);padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--hair-soft);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:560px){
  .page-foot{flex-direction:column;align-items:stretch}
  .page-foot .btn{justify-content:center}
}