/* FAVUS — "Ink & Gold Leaf" design system, v2 (Phase 2b: marble + architecture)
   Hand-drawn Roman temple as page structure. Ornament = SVG tiles; marble = generated seamless textures in the A style;
   set pieces = drawn cut-outs (webp). House rules: text only on calm marble/cream fields, no runtime blur,
   motion is compositor-only (transform/opacity), scroll-driven with IO fallback, reduced-motion safe, phone-first. */

/* ---------- fonts ---------- */
@font-face{font-family:"Cinzel";src:url("fonts/cinzel.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --parchment:#F3E9D2; --cream:#FBF5E6; --field:#F8F0DE;
  --stone:#E9DEC6; --stone-deep:#D3C3A1; --stone-dark:#B9A67F; --trav:#E4CFA8; --trav-deep:#C9AD7E;
  --ink:#4A3321; --ink-2:#5E4530; --sepia:#7A5A3A; --rule:#C7B38F; --rule-soft:#DDD0B4;
  --gold:#C9A227; --gold-deep:#9A7418; --gold-ink:#6E520F; --terracotta:#B9644A; --verde:#4F6B5B; --bronze:#8A5A2B;
  --display:"Cinzel",Georgia,"Times New Roman",serif; --body:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --gutter:16px; --max:1180px; --nav-h:64px;
  --fs-0:.9375rem; --fs-1:1.125rem; --fs-2:1.375rem; --fs-3:1.75rem; --fs-4:2.25rem; --fs-5:3rem;
  --carrara:url("img/arch/tex_carrara-512.webp"); --carrara-lg:url("img/arch/tex_carrara-1024.webp");
  --travertine:url("img/arch/tex_travertine-512.webp"); --verde-tex:url("img/arch/tex_verde-512.webp"); --basalt:url("img/arch/tex_basalt-512.webp");
  --goldleaf:url("img/gold-tile.jpg"); --hatch:url("img/orn/hatch.svg");
  --hilite:rgba(255,250,236,.9); --shade:rgba(74,51,33,.28);
}
@media (min-width:720px){:root{--gutter:24px;--fs-1:1.1875rem;--fs-3:2rem;--fs-4:2.75rem;--fs-5:3.75rem}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--body);font-size:var(--fs-1);line-height:1.55;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--ink);text-decoration-color:var(--gold-deep);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--gold-ink)}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* back planes: the temple wall (travertine, faint) + grain. Fixed = free parallax. */
.plane{position:fixed;inset:0;pointer-events:none;z-index:0}
.plane--wall{background:var(--travertine) center/512px;opacity:.28}
.plane--grain{background:url("img/orn/grain.svg") 0 0/240px;opacity:.18;mix-blend-mode:multiply}
.page{position:relative;z-index:1}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;color:var(--ink);letter-spacing:.01em;text-wrap:balance}
h1{font-size:var(--fs-5);font-weight:700}h2{font-size:var(--fs-4)}h3{font-size:var(--fs-3)}h4{font-size:var(--fs-2)}
p{margin:0}
.lead{font-size:var(--fs-2);line-height:1.45}
.small{font-size:var(--fs-0)}.muted{color:var(--sepia)}
.caps{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem}
.wordmark{font-family:var(--display);font-weight:700;letter-spacing:.08em}
.gold-leaf{background:var(--goldleaf) center/240px 180px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px var(--gold-ink);filter:drop-shadow(0 1px 0 rgba(74,51,33,.45))}
.num{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.interpunct{display:inline-block;width:.45em;height:.45em;margin:0 .35em;vertical-align:middle;background:url("img/orn/interpunct.svg") center/contain no-repeat}
/* incised lettering (carved into stone): light catches the lower edge */
.incised{text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.35)}

/* ---------- marble materials ---------- */
.m-carrara{background:var(--carrara) center/512px}
.m-travertine{background:var(--travertine) center/512px}
.m-verde{background:var(--verde-tex) center/512px;color:var(--cream)}
.m-basalt{background:var(--basalt) center/512px;color:var(--cream)}
/* a slab: chiselled bevel (inset light top-left, shade bottom-right) + thickness + ground shadow */
.slab{position:relative;border:2px solid var(--ink);
  box-shadow:inset 0 2px 0 var(--hilite),inset 2px 0 0 rgba(255,250,236,.55),inset 0 -3px 0 rgba(74,51,33,.22),inset -2px 0 0 rgba(74,51,33,.14),
             0 6px 0 var(--stone-deep),0 8px 0 var(--ink),0 12px 0 var(--shade)}
.slab--thin{box-shadow:inset 0 2px 0 var(--hilite),inset 0 -2px 0 rgba(74,51,33,.2),0 3px 0 var(--stone-deep),0 4px 0 var(--ink)}
/* calm field for text inside a marble frame */
.field{background:var(--field);border:1px solid var(--rule);box-shadow:inset 0 2px 0 rgba(74,51,33,.08)}

/* ---------- ornament utilities (SVG tiles) ---------- */
.orn{height:18px;background:url("img/orn/meander-ink.svg") center/36px 18px repeat-x}
.orn--gold{background-image:url("img/orn/meander-gold.svg")}
.orn--eggdart{height:14px;background-image:url("img/orn/eggdart-ink.svg");background-size:24px 14px}
.orn--eggdart.orn--gold{background-image:url("img/orn/eggdart-gold.svg")}
.orn--beadreel{height:8px;background-image:url("img/orn/beadreel-ink.svg");background-size:24px 8px}
.orn--rope{height:8px;background-image:url("img/orn/rope-ink.svg");background-size:12px 8px}
.orn--dentil{height:8px;background-image:url("img/orn/dentil-ink.svg");background-size:14px 8px}
.cornice{position:relative;height:22px;margin:0}
.cornice::before,.cornice::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
.cornice::before{top:0}.cornice::after{bottom:0}
.cornice>i{position:absolute;left:0;right:0;top:7px;height:8px;background:url("img/orn/dentil-ink.svg") left center/14px 8px repeat-x}
.rule-hex{display:flex;align-items:center;gap:14px;margin:0}
.rule-hex::before,.rule-hex::after{content:"";flex:1;height:1px;background:var(--sepia)}
.rule-hex>i{width:20px;height:23px;background:url("img/orn/hex-gold.svg") center/contain no-repeat}

/* ---------- tabula ansata (inscription header) — now a carved Carrara plaque ---------- */
.tabula{position:relative;display:inline-block;margin:0 22px;max-width:calc(100% - 44px);padding:.6em 1.2em .55em;border:2px solid var(--ink);
  background:var(--carrara) center/512px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.18em;line-height:1.15;color:var(--ink);text-align:center;
  font-size:clamp(1.125rem,4.6vw,var(--fs-4));text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.3);
  box-shadow:inset 0 0 0 3px rgba(251,245,230,.7),inset 0 0 0 4px var(--sepia),0 4px 0 var(--stone-deep),0 5px 0 var(--ink)}
.tabula::before,.tabula::after{content:"";position:absolute;top:-2px;bottom:-2px;width:22px;background:url("img/orn/ansa-l.svg") center/100% 100% no-repeat}
.tabula::before{left:-22px}.tabula::after{right:-22px;background-image:url("img/orn/ansa-r.svg")}
.tabula--sm{font-size:.8125rem;letter-spacing:.16em;padding:.5em .9em .45em}
.tabula--lg{font-size:clamp(1.375rem,5.4vw,var(--fs-5))}
.section-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.section-head .kicker{font-family:var(--body);font-style:italic;font-size:var(--fs-2);color:var(--sepia)}
/* title inside a laurel wreath */
.wreath-head{position:relative;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:700/673;margin-inline:auto;background:url("img/arch/wreath-700.webp") center/contain no-repeat}
.wreath-head .tabula{margin:0;max-width:none;font-size:clamp(.95rem,2.6vw,1.5rem);letter-spacing:.14em;padding:.5em .9em .45em}
.law-band .section-head .kicker{display:inline-block;background:var(--field);color:var(--ink);text-shadow:none;padding:.35em 1em;border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--stone-deep),0 4px 0 var(--ink)}

/* ---------- carved marble buttons ---------- */
.btn{--face:var(--carrara);--txt:var(--ink);--thick:var(--stone-deep);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;flex-wrap:nowrap;min-height:50px;padding:.9em 1.7em .85em;
  font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;text-decoration:none;color:var(--txt);
  background:var(--face) center/512px;border:2px solid var(--ink);cursor:pointer;user-select:none;
  border-radius:3px 6px 4px 7px / 6px 3px 7px 4px;
  text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.35);
  box-shadow:inset 0 2px 0 var(--hilite),inset 2px 0 0 rgba(255,250,236,.6),inset 0 -3px 0 rgba(74,51,33,.22),inset -2px 0 0 rgba(74,51,33,.15),
             0 4px 0 var(--thick),0 5px 0 var(--ink),0 8px 0 var(--shade);
  transition:transform .12s ease,box-shadow .12s ease,color .12s ease}
.btn::after{content:"";position:absolute;inset:4px;border:1px solid rgba(74,51,33,.4);border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--hilite)}
.btn:hover,.btn.is-hover{transform:translateY(-1px);color:var(--gold-ink);box-shadow:inset 0 2px 0 var(--hilite),inset 2px 0 0 rgba(255,250,236,.6),inset 0 -3px 0 rgba(74,51,33,.22),inset -2px 0 0 rgba(74,51,33,.15),0 5px 0 var(--thick),0 6px 0 var(--ink),0 10px 0 var(--shade)}
.btn:hover::after,.btn.is-hover::after{border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px var(--gold),inset 0 1px 0 var(--hilite)}
.btn:active,.btn.is-active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(74,51,33,.28),inset 0 0 12px rgba(74,51,33,.12),inset 0 -1px 0 var(--hilite),0 1px 0 var(--thick),0 1px 0 var(--ink),0 2px 0 var(--shade)}
.btn:focus-visible,.btn.is-focus{outline:3px solid var(--gold-deep);outline-offset:4px}
/* primary: basalt with gold-leaf lettering */
.btn--primary{--face:var(--basalt);--txt:var(--gold);--thick:#2A1C10;text-shadow:0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,220,120,.18);
  box-shadow:inset 0 1px 0 rgba(255,245,220,.25),inset 0 -3px 0 rgba(0,0,0,.45),0 4px 0 var(--thick),0 5px 0 #150E07,0 8px 0 var(--shade)}
.btn--primary::after{border-color:rgba(201,162,39,.55)}
.btn--primary:hover,.btn--primary.is-hover{color:#F0D078;box-shadow:inset 0 1px 0 rgba(255,245,220,.25),inset 0 -3px 0 rgba(0,0,0,.45),0 5px 0 var(--thick),0 6px 0 #150E07,0 10px 0 var(--shade)}
.btn--primary:hover::after,.btn--primary.is-hover::after{box-shadow:inset 0 0 0 1px var(--gold)}
.btn--primary:active,.btn--primary.is-active{box-shadow:inset 0 3px 0 rgba(0,0,0,.5),inset 0 0 12px rgba(0,0,0,.3),0 1px 0 var(--thick),0 1px 0 #150E07,0 2px 0 var(--shade)}
.btn--sm{min-height:42px;padding:.7em 1.1em .65em;font-size:.75rem}
.btn--lg{min-height:58px;padding:1.05em 2.1em 1em;font-size:1rem}
/* disabled: still fully legible stone, just not pressable; "at launch" seal in terracotta */
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{cursor:not-allowed;transform:none;color:var(--ink);text-shadow:0 1px 0 var(--hilite);
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -2px 0 rgba(74,51,33,.18),0 2px 0 var(--thick),0 3px 0 var(--ink)}
.btn[disabled]::after,.btn.is-disabled::after,.btn[aria-disabled="true"]::after{border-color:rgba(74,51,33,.3);box-shadow:none}
.btn--primary[disabled],.btn--primary.is-disabled{color:var(--stone)}
.btn .seal{font-family:var(--display);font-size:.6em;letter-spacing:.14em;padding:.35em .55em .3em;border:1.5px solid var(--terracotta);color:var(--terracotta);
  background:var(--cream);border-radius:2px;text-shadow:none;transform:rotate(-3deg);margin-left:.2em}
.btn--primary .seal{background:transparent;color:#E9B77A;border-color:#E9B77A}
.btn-row{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:center}

/* ---------- marble plaque (panel) & stela ---------- */
.plaque{position:relative;padding:14px;background:var(--carrara) center/512px;border:2px solid var(--ink);
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.2),0 8px 0 var(--stone-deep),0 10px 0 var(--ink),0 14px 0 var(--shade)}
.plaque>.field{padding:clamp(18px,3vw,30px)}
/* bronze corner fittings (drawn), rotated per corner */
.plaque .fit{position:absolute;width:38px;height:30px;background:url("img/arch/bronze_corner-120.webp") center/contain no-repeat;pointer-events:none;z-index:2}
.plaque .fit.tl{top:-6px;left:-6px}.plaque .fit.tr{top:-6px;right:-6px;transform:scaleX(-1)}
.plaque .fit.bl{bottom:-6px;left:-6px;transform:scaleY(-1)}.plaque .fit.br{bottom:-6px;right:-6px;transform:scale(-1)}
.plaque--basalt{background:var(--basalt) center/512px}
.plaque--trav{background:var(--travertine) center/512px}
.plaque__kicker{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia);margin-bottom:.6em}
.plaque h3{margin-bottom:.45em}
/* stela: a tall standing tablet with a rounded (pedimented) head */
.stela{position:relative;padding:14px 14px 18px;background:var(--carrara) center/512px;border:2px solid var(--ink);border-radius:46% 46% 0 0 / 70px 70px 0 0;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.2),0 8px 0 var(--stone-deep),0 10px 0 var(--ink)}
.stela::before{content:"";position:absolute;inset:6px 6px 8px;border:1px solid var(--sepia);border-radius:inherit;pointer-events:none}
.stela__head{display:grid;place-items:center;height:64px}
.stela__head .numeral{display:grid;place-items:center;width:46px;height:52px;background:url("img/orn/hex-gold.svg") center/contain no-repeat;font-family:var(--display);font-weight:700;color:var(--ink)}
.stela>.field{padding:clamp(18px,2.6vw,26px);border-radius:0}
.stela .art{margin:0 0 18px;border:1.5px solid var(--ink);padding:6px;background:var(--cream);box-shadow:inset 0 0 0 3px var(--cream),inset 0 0 0 4px var(--sepia)}
.stela .art img{width:100%;height:auto;mix-blend-mode:multiply}

/* ---------- framed illustration sheet (hero) ---------- */
.sheet{position:relative;background:var(--cream);padding:10px;border:2px solid var(--ink);box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 5px var(--sepia),0 10px 0 -5px var(--stone-deep),0 11px 0 -5px var(--sepia)}
.sheet img{width:100%;height:auto;border:1px solid var(--rule)}
.sheet figcaption{font-style:italic;color:var(--sepia);font-size:var(--fs-0);padding:10px 6px 2px;text-align:center}

/* ---------- stat plaques (inscribed, bronze fittings) ---------- */
.stat{position:relative;background:var(--carrara) center/512px;border:2px solid var(--ink);padding:8px;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.16),0 5px 0 var(--stone-deep),0 6px 0 var(--ink);min-width:0}
.stat>.field{padding:18px 12px 16px;text-align:center;background:var(--field)}
.stat .fit{position:absolute;width:30px;height:24px;background:url("img/arch/bronze_corner-120.webp") center/contain no-repeat;z-index:2;pointer-events:none}
.stat .fit.tl{top:-5px;left:-5px}.stat .fit.tr{top:-5px;right:-5px;transform:scaleX(-1)}.stat .fit.bl{bottom:-5px;left:-5px;transform:scaleY(-1)}.stat .fit.br{bottom:-5px;right:-5px;transform:scale(-1)}
.stat__label{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia)}
.stat__value{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,6vw,2.5rem);letter-spacing:-.01em;white-space:nowrap;line-height:1.1;margin:.3em 0 .15em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.3)}
.stat__value.is-empty{color:var(--sepia)}
.stat__unit{font-style:italic;font-size:var(--fs-0);color:var(--sepia)}
.stat__note{margin-top:10px;font-family:var(--display);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:6px}
.stat__note::before{content:"";width:11px;height:13px;background:url("img/orn/hex-gold.svg") center/contain no-repeat}
.stat-grid{display:grid;gap:22px 20px}
@media (min-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.stat-grid{grid-template-columns:repeat(3,1fr)}.stat__value{font-size:clamp(1.25rem,2.2vw,2.25rem)}}

/* ---------- empty state ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 16px}
.empty__hex{width:56px;height:64px;background:url("img/orn/hex-gold.svg") center/contain no-repeat}
.empty__title{font-family:var(--display);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.875rem}
.empty p{color:var(--sepia);font-style:italic;max-width:46ch}

/* ---------- temple front: pediment + architrave nav ---------- */
.temple-front{position:relative;z-index:40}
.pediment{display:block;width:min(100% - 2*var(--gutter),980px);margin:10px auto -2px;height:auto}
.nav{position:sticky;top:0;z-index:50;background:var(--carrara) center/512px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.18),0 4px 0 var(--stone-deep),0 5px 0 var(--ink)}
.nav::after{content:"";display:block;height:8px;background:url("img/orn/dentil-ink.svg") left center/14px 8px repeat-x;border-top:1px solid var(--ink)}
.nav__in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav__brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.nav__brand img{width:auto;height:44px}
.nav__brand .wordmark{font-size:1.375rem;text-shadow:0 1px 0 var(--hilite)}
.nav__links{display:none;gap:26px;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;text-shadow:0 1px 0 var(--hilite)}
.nav__links a:hover,.nav__links a[aria-current]{border-bottom-color:var(--gold-deep)}
.nav__cta{display:none}
.nav__menu{position:relative}
.nav__menu summary{list-style:none;cursor:pointer;display:inline-flex}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__menu .menu{position:absolute;right:0;top:calc(100% + 16px);min-width:250px;z-index:60}
.nav__menu .menu a{display:block;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav__menu .menu a:last-child{border-bottom:0}
@media (min-width:900px){.nav__links{display:flex}.nav__cta{display:inline-flex}.nav__menu{display:none}}

/* ---------- pronaos (hero between columns) ---------- */
.pronaos{position:relative;padding:40px 0 0;overflow:clip}
.pronaos__grid{position:relative;display:grid;gap:30px;align-items:center}
.column{display:none}
@media (min-width:900px){
  .pronaos{padding:56px 0 0}
  .pronaos__grid{grid-template-columns:130px minmax(0,1fr) 130px;gap:0 22px;align-items:end}
  .column{display:block;position:relative;align-self:end;height:100%;min-height:560px}
  .column img{position:absolute;bottom:0;left:50%;width:130px;height:auto;transform:translateX(-50%);transform-origin:bottom center}
  .pronaos__center{align-self:center;padding-bottom:48px}
}
.pronaos__center{display:grid}
.hero-stela{position:relative;background:var(--carrara) center/512px;border:2px solid var(--ink);padding:12px;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.2),0 8px 0 var(--stone-deep),0 10px 0 var(--ink),0 14px 0 var(--shade)}
.hero-stela>.orn{position:absolute;left:12px;right:12px;top:12px}
.hero-stela h1{font-size:clamp(1.9rem,3vw,2.75rem)}
.hero-field{padding:clamp(22px,3.2vw,36px);padding-top:calc(clamp(22px,3.2vw,36px) + 16px);display:grid;gap:28px;align-items:center}
@media (min-width:1000px){.hero-field{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}}
.hero-copy{display:grid;gap:18px}
.overline{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sepia)}
.overline::before{content:"";flex:none;width:28px;height:2px;background:var(--gold-deep)}
.hero__legal{font-size:var(--fs-0);color:var(--sepia);font-style:italic;border-top:1px solid var(--rule);padding-top:12px}
.hero-art{order:-1;margin:0}
@media (min-width:1000px){.hero-art{order:0}}
/* stylobate steps — approach the temple */
.steps{position:relative;margin-top:40px}
.steps>i{display:block;height:22px;border-top:2px solid var(--ink);border-bottom:1px solid var(--sepia);background:var(--travertine) center/512px;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -4px 0 rgba(74,51,33,.18)}
.steps>i:nth-child(1){width:min(100% - 2*var(--gutter),1180px);margin-inline:auto}
.steps>i:nth-child(2){width:min(100%,1320px);margin-inline:auto}
.steps>i:nth-child(3){width:100%}
.steps>i:nth-child(3){height:30px}

/* ---------- archway (section transition) ---------- */
.archway{position:relative;padding:72px 0 0;text-align:center}
.archway__frame{position:relative;width:min(100% - 2*var(--gutter),640px);margin-inline:auto;aspect-ratio:1200/1203}
.archway__frame img{position:absolute;inset:0;width:100%;height:100%}
.archway__title{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:60%;display:grid;justify-items:center}
.archway__kicker{font-style:italic;color:var(--sepia);font-size:var(--fs-2);margin:-10px auto 22px;max-width:40ch;padding:0 var(--gutter)}
.archway__title .tabula{margin:0;max-width:100%;font-size:clamp(1rem,3.2vw,1.75rem);letter-spacing:.14em}
/* mosaic floor under the arch */
.floor{height:46px;margin-top:-6px;background:url("img/arch/mosaic-900.webp") center/auto 100% repeat-x;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  box-shadow:0 4px 0 var(--stone-deep),0 5px 0 var(--ink)}
@media (min-width:900px){.floor{height:64px;background-image:url("img/arch/mosaic-1800.webp")}}

/* ---------- cella (how it works) ---------- */
.section{position:relative;padding:72px 0}
@media (min-width:900px){.section{padding:96px 0}}
.section--tight{padding-top:40px}
.section-intro{max-width:64ch;margin:18px auto 0;text-align:center;color:var(--ink-2)}
.frieze{display:block;width:min(100% - 2*var(--gutter),1180px);margin:0 auto;height:auto}
.stelae{display:grid;gap:40px 26px;align-items:end;margin-top:48px}
@media (min-width:900px){.stelae{grid-template-columns:repeat(3,1fr)}.stelae>.stela:nth-child(2){margin-bottom:28px}}
.stelae+.floor{margin-top:-10px}
.ledger-slab{margin-top:56px}

/* ---------- treasury: honeycomb wall that lights up ---------- */
.treasury{position:relative;padding:0 0 80px}
.comb-wall{position:relative;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--travertine) center/512px;overflow:hidden;
  box-shadow:inset 0 3px 0 var(--hilite),inset 0 -4px 0 rgba(74,51,33,.2)}
.comb-wall svg{position:absolute;inset:0;width:100%;height:100%}
.comb-wall .cell{fill:var(--stone);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.comb-wall .cell-in{fill:var(--stone-deep);stroke:var(--sepia);stroke-width:.8}
.comb-wall .g-cell{fill:var(--gold);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.comb-wall .g-in{fill:url(#leafpat);stroke:var(--gold-deep);stroke-width:.9}
.comb-wall .g-core{fill:var(--gold-deep);opacity:.22}
.comb-wall .g-hatch{fill:url(#combhatch);opacity:.28}
.comb-lit{clip-path:inset(100% 0 0 0)}
.treasury__in{margin-top:-56px;position:relative;z-index:2}
@media (min-width:900px){.treasury__in{margin-top:-90px}}
/* scroll-driven: the wall is built row by row from the floor up as the section scrolls into view */
@supports (animation-timeline: view()){
  .comb-lit{animation:light-up steps(8,end) both;animation-timeline:view();animation-range:entry 10% cover 55%}
}
@keyframes light-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.no-scrolltl .comb-lit{transition:clip-path 1.8s steps(8,end)}
.no-scrolltl .comb-wall.in .comb-lit{clip-path:inset(0 0 0 0)}

/* ---------- altar (veteran check) ---------- */
.altar-wrap{display:grid;gap:24px;align-items:end}
@media (min-width:900px){.altar-wrap{grid-template-columns:120px minmax(0,1fr) 120px;gap:28px}}
.brazier{display:none}
@media (min-width:900px){.brazier{display:block;width:120px;height:auto;align-self:end;margin-bottom:-6px}}
.altar{position:relative;background:var(--travertine) center/512px;border:2px solid var(--ink);padding:16px;
  box-shadow:inset 0 3px 0 var(--hilite),inset 0 -4px 0 rgba(74,51,33,.22),0 10px 0 var(--trav-deep),0 12px 0 var(--ink),0 16px 0 var(--shade)}
.altar::before{content:"";position:absolute;left:0;right:0;top:-18px;height:14px;background:url("img/orn/eggdart-ink.svg") center/24px 14px repeat-x,var(--carrara) center/512px;border:2px solid var(--ink);border-bottom:0}
.altar>.field{padding:clamp(20px,3vw,34px)}
.inputrow{display:flex;flex-wrap:wrap;gap:12px}
.input{flex:1 1 260px;min-height:50px;padding:.6em .9em;font:inherit;font-size:var(--fs-1);color:var(--ink);background:var(--cream);border:2px solid var(--ink);
  box-shadow:inset 0 4px 0 rgba(74,51,33,.16),inset 0 0 0 1px var(--rule-soft);border-radius:2px 4px 2px 5px}
.input::placeholder{color:var(--sepia);font-style:italic;opacity:1}
.input:focus{outline:3px solid var(--gold-deep);outline-offset:2px}
.input[disabled]{background:var(--hatch) 0 0/8px 8px,var(--stone);color:var(--sepia);cursor:not-allowed}
.label{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia);display:block;margin-bottom:8px}
.hint{font-size:var(--fs-0);color:var(--sepia);font-style:italic;margin-top:8px}

/* ---------- tablets of law (disclosures) ---------- */
.law-band{position:relative;padding:72px 0 80px;background:var(--verde-tex) center/512px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);box-shadow:inset 0 4px 0 rgba(255,250,236,.25),inset 0 -6px 0 rgba(0,0,0,.25)}
.tablets{display:grid;gap:34px;margin-top:40px}
@media (min-width:900px){.tablets{grid-template-columns:1fr 1fr;gap:40px}}
.tablet-law{position:relative;background:var(--carrara) center/512px;border:2px solid var(--ink);border-radius:40% 40% 0 0 / 60px 60px 0 0;padding:16px 14px 18px;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.2),0 10px 0 var(--stone-deep),0 12px 0 var(--ink)}
.tablet-law::before{content:"";position:absolute;inset:6px 6px 8px;border:1px solid var(--sepia);border-radius:inherit;pointer-events:none}
.tablet-law>.field{padding:clamp(20px,3vw,30px);padding-top:58px}
.tablet-law .roman{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:700;letter-spacing:.3em;color:var(--sepia);font-size:.8125rem}
.list-hex{list-style:none;margin:0;padding:0}
.list-hex li{position:relative;padding-left:30px}
.list-hex li+li{margin-top:.7em}
.list-hex li::before{content:"";position:absolute;left:0;top:.32em;width:16px;height:18px;background:url("img/orn/hex-gold.svg") center/contain no-repeat}

/* ---------- gallery (FAQ with bust) ---------- */
.gallery{display:grid;gap:34px;align-items:start}
@media (min-width:900px){.gallery{grid-template-columns:300px minmax(0,1fr);gap:48px}}
.bust{display:none}
@media (min-width:900px){.bust{display:block;position:sticky;top:calc(var(--nav-h) + 40px)}.bust img{width:280px;height:auto;margin-inline:auto}
  .bust .pedestal{width:220px;height:22px;margin:-6px auto 0;background:var(--travertine) center/512px;border:2px solid var(--ink);box-shadow:0 6px 0 var(--trav-deep),0 7px 0 var(--ink)}}
.bust-mobile{display:block;width:150px;height:auto;margin:0 auto 10px}
@media (min-width:900px){.bust-mobile{display:none}}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:18px 4px;font-family:var(--display);font-weight:600;font-size:var(--fs-1);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mark{position:relative;flex:none;width:30px;height:30px;margin-top:-3px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--carrara) center/512px;
  box-shadow:inset 0 1px 0 var(--hilite),0 2px 0 var(--stone-deep),0 3px 0 var(--ink);border-radius:2px 4px 2px 4px}
.faq summary .mark::before,.faq summary .mark::after{content:"";position:absolute;width:12px;height:2px;background:var(--ink);transition:transform .2s ease}
.faq summary .mark::after{transform:rotate(90deg)}
.faq details[open] summary .mark::after{transform:rotate(0)}
.faq details[open] summary .mark{box-shadow:inset 0 2px 0 rgba(74,51,33,.22);transform:translateY(2px)}
.faq summary:hover{color:var(--gold-ink)}
.faq .answer{padding:0 4px 20px 50px;color:var(--ink-2)}
.faq .answer p+p{margin-top:.6em}

/* ---------- ledger table ---------- */
.ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.ledger caption{text-align:left;font-style:italic;color:var(--sepia);padding:0 0 10px;font-size:var(--fs-0)}
.ledger th{font-family:var(--display);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sepia);text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink)}
.ledger td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger tbody tr:nth-child(even){background:var(--hatch) 0 0/8px 8px}
.ledger th.r,.ledger td.r{text-align:right}
.ledger .num{font-size:1.05em}
@media (max-width:559px){
  .ledger thead{display:none}
  .ledger tbody tr{display:grid;grid-template-columns:1fr auto;padding:10px 4px;border-bottom:1px solid var(--rule)}
  .ledger tbody td{display:block;border:0;padding:2px 4px}
  .ledger tbody td:nth-child(3){grid-column:1/-1;color:var(--sepia);font-style:italic;font-size:var(--fs-0)}
  .ledger tfoot tr{display:block}.ledger tfoot td{display:block}
}
.ledger tfoot td{border-bottom:0;border-top:2px solid var(--ink);font-style:italic;color:var(--sepia);font-size:var(--fs-0)}

/* ---------- footer: crepidoma ---------- */
.footer{position:relative;margin-top:0}
.footer .floor{margin-top:0}
.footer__slab{background:var(--carrara) center/512px;border-bottom:2px solid var(--ink);box-shadow:inset 0 3px 0 var(--hilite)}
.footer__in{padding:44px 0 36px;display:grid;gap:30px}
@media (min-width:900px){.footer__in{grid-template-columns:1.3fr 1fr 1fr}}
.footer h4{font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia);margin-bottom:12px}
.footer ul{list-style:none;margin:0;padding:0}.footer li+li{margin-top:8px}.footer a{text-decoration:none}
.footer .legal{font-size:var(--fs-0);color:var(--sepia);font-style:italic}
.footer .field{padding:18px 20px;min-width:0}
.footer .field .btn{max-width:100%}
.steps--down>i:nth-child(1){width:100%}
.steps--down>i:nth-child(2){width:min(100%,1320px);margin-inline:auto}
.steps--down>i:nth-child(3){width:min(100% - 2*var(--gutter),1180px);margin-inline:auto;height:22px}
.steps--down{margin-top:0}

/* ---------- ToS tablet (modal, must be agreed) ---------- */
dialog.tablet{border:0;padding:0;background:transparent;max-width:min(92vw,640px);width:100%}
dialog.tablet::backdrop{background:rgba(40,26,14,.72)}
.tablet__in{position:relative;background:var(--carrara) center/512px;border:2px solid var(--ink);padding:14px;
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -4px 0 rgba(74,51,33,.2),0 10px 0 var(--stone-deep),0 12px 0 var(--ink),0 18px 0 var(--shade)}
.tablet__in>.orn{position:absolute;left:14px;right:14px;top:14px}
.tablet__in>.field{padding:clamp(22px,4vw,36px);padding-top:calc(clamp(22px,4vw,36px) + 18px)}
.tablet__in h2{text-align:center;margin:0 0 12px;letter-spacing:.12em}
.tablet__in ul{margin:0;padding-left:1.1em}.tablet__in li+li{margin-top:.45em}
.tablet__actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.tablet--inline{max-width:640px;margin-inline:auto}

/* ---------- notes ---------- */
.note{position:relative;padding:14px 18px 14px 22px;border-left:4px solid var(--gold-deep);background:var(--cream)}
.note--warn{border-left-color:var(--terracotta)}
.note strong{font-family:var(--display);font-size:.8em;letter-spacing:.12em;text-transform:uppercase}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* passing between the columns: as the pronaos scrolls out, the columns drift outward and grow (compositor-only) */
@supports (animation-timeline: view()){
  @media (min-width:900px){
    .column--l img{animation:col-l linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .column--r img{animation:col-r linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .archway__frame{animation:arch-grow linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    .hero-art{animation:art-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes col-l{to{transform:translateX(-50%) translateX(-60px) scale(1.12)}}
@keyframes col-r{to{transform:translateX(-50%) translateX(60px) scale(1.12)}}
@keyframes arch-grow{from{transform:scale(.9)}to{transform:scale(1)}}
@keyframes art-rise{from{transform:translateY(24px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .comb-lit{clip-path:none!important}
}

/* ---------- kit helpers ---------- */
.kit-section{padding:48px 0;border-bottom:1px solid var(--rule)}
.kit-section h2{margin-bottom:6px}.kit-section .desc{color:var(--sepia);font-style:italic;margin-bottom:26px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.swatch{border:1px solid var(--sepia);background:var(--cream);padding:6px;font-size:var(--fs-0)}
.swatch i{display:block;height:72px;border:1px solid var(--rule);margin-bottom:6px}
.swatch b{display:block;font-family:var(--display);font-size:.75rem;letter-spacing:.1em}
.specimen{display:grid;gap:14px}
.states{display:flex;flex-wrap:wrap;gap:22px 24px;align-items:flex-end}
.states figure{margin:0;display:grid;gap:10px;justify-items:center}
.states figcaption,.orn-demo figcaption{font-family:var(--display);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sepia)}
.orn-demo{display:grid;gap:18px}.orn-demo figure{margin:0;display:grid;gap:8px}
.kit-nav{position:sticky;top:calc(var(--nav-h) + 10px);display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 14px;background:var(--field);border:1px solid var(--rule);z-index:5}
.kit-nav a{text-decoration:none;font-family:var(--display);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.kit-demo-scroll{overflow-x:auto}
.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px;align-items:end}
.pieces figure{margin:0;display:grid;gap:8px;justify-items:center}
.pieces img{max-height:260px;width:auto}

/* ---------- Round 3 additions (spec §8, backlog 1–2) ---------- */
/* hero facts strip under the drawing (backlog 1) */
.hero-right{display:grid;gap:16px;align-content:start}
.hero-facts{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
@media (max-width:559px){.hero-facts{grid-template-columns:1fr 1fr}.hero-facts .fact:last-child{grid-column:1/-1}}
.fact{background:var(--carrara) center/512px;border:1.5px solid var(--ink);padding:5px;box-shadow:inset 0 1px 0 var(--hilite),0 3px 0 var(--stone-deep),0 4px 0 var(--ink)}
.fact>.field{padding:10px 10px 9px;text-align:center;min-height:100%}
.fact__k{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sepia)}
.fact__v{font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:.04em;margin-top:4px;text-shadow:0 1px 0 var(--hilite)}
/* docs: sticky TOC plaque + content */
.docs{display:grid;gap:34px;align-items:start;grid-template-columns:minmax(0,1fr)}
.docs>*{min-width:0}
.doc-section .plaque>.field{overflow-x:auto}
@media (min-width:900px){.docs{grid-template-columns:260px minmax(0,1fr);gap:40px}}
.toc{position:sticky;top:calc(var(--nav-h) + 24px)}
.toc .field{padding:14px 16px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li+li{margin-top:2px}
.toc a{display:block;padding:7px 8px;text-decoration:none;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-left:2px solid transparent}
.toc a:hover{color:var(--gold-ink)}
.toc a.is-current{border-left-color:var(--gold-deep);background:var(--cream)}
.toc summary{list-style:none;cursor:pointer}
.toc summary::-webkit-details-marker{display:none}
@media (max-width:899px){.toc{position:static}.toc .field{padding:10px 16px}.toc ol{padding:8px 0 4px}}
.doc-section{scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc-section+.doc-section{margin-top:34px}
.doc-section .plaque>.field{padding:clamp(20px,3vw,34px)}
.doc-section h2.tabula{display:inline-block;margin:0 22px 18px;font-size:clamp(1rem,2.4vw,1.25rem)}
.doc-section .field>p+p,.doc-section .field>p+ul,.doc-section .field>ul+p{margin-top:.8em}
.doc-section .pending{margin-top:14px}
.doc-section .glossary{display:grid;gap:10px 22px;margin:0}
@media (min-width:600px){.doc-section .glossary{grid-template-columns:max-content 1fr}}
.doc-section .glossary dt{font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:.04em}
.doc-section .glossary dd{margin:0;color:var(--ink-2)}
code,.mono{font-family:ui-monospace,"DejaVu Sans Mono",Menlo,monospace;font-size:.85em;background:var(--cream);border:1px solid var(--rule-soft);padding:.05em .35em;border-radius:2px}
/* disclaimer: one tall tablet with run-in numbered heads */
.law-long{max-width:860px;margin-inline:auto}
.law-long .field{padding:clamp(22px,3.4vw,40px);padding-top:64px}
.law-long section+section{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.law-long h2{font-size:var(--fs-2);display:flex;gap:14px;align-items:baseline;margin-bottom:.5em}
.law-long h2 .n{font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.3em;color:var(--sepia);flex:none;min-width:3.2em}
.law-long p+p{margin-top:.7em}
.law-long .updated{font-style:italic;color:var(--sepia);font-size:var(--fs-0);margin-top:28px;border-top:2px solid var(--ink);padding-top:14px}
/* 404 */
.lost{min-height:60vh;display:grid;place-items:center;padding:56px 0}
.lost .stela{max-width:460px;width:100%}
.lost .stela .field{text-align:center}
.page-head{padding:44px 0 0}
.page-head .archway{padding-top:0}
.page-head .archway__frame{width:min(100% - 2*var(--gutter),440px)}

/* =====================================================================================================
   V3 — "lit temple" pass (Fable 5.2). Same Ink & Gold Leaf system; what changes is light, scale and motion.
   One sun (upper left). Gold leaf answers the scroll. Stone moves like stone. Everything still reduced-motion safe.
   ===================================================================================================== */
:root{--paper:#FAEBD1;--nav-h:60px;--ease-stone:cubic-bezier(.16,.84,.3,1);
  --mosaic:url("img/v2/mosaic-strip.webp")}
@media (min-width:900px){:root{--nav-h:64px}}

/* light: a warm pool from above and a soft ink vignette at the edges, so the wall reads as lit, not papered */
.plane--light{background:radial-gradient(120% 70% at 30% -10%,rgba(255,248,226,.6),transparent 60%),radial-gradient(140% 120% at 50% 40%,transparent 55%,rgba(74,51,33,.17) 100%)}

/* gold leaf, darker cut for lettering on pale stone */
.gold-leaf--dark{background:linear-gradient(rgba(96,66,8,.34),rgba(96,66,8,.34)),var(--goldleaf) center/240px 180px;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px var(--gold-ink);filter:drop-shadow(0 1.5px 0 rgba(74,51,33,.55))}

/* ---------- gilt: gold leaf that catches the light as the page moves ---------- */
.gilt{position:relative}
.gilt__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask:var(--gm) center/100% 100% no-repeat;mask:var(--gm) center/100% 100% no-repeat}
.gilt__sheen::before{content:"";position:absolute;inset:-10% -70%;background:linear-gradient(104deg,transparent 43%,rgba(255,250,224,.0) 44%,rgba(255,250,224,.9) 50%,rgba(255,250,224,0) 56%,transparent 57%);transform:translateX(-42%);will-change:transform}
@supports (animation-timeline: view()){
  .gilt__sheen::before{animation:sheen linear both;animation-timeline:view();animation-range:cover 5% cover 95%}
  .vista .gilt__sheen::before{animation-range:cover 35% cover 100%}
}
@keyframes sheen{from{transform:translateX(-42%)}to{transform:translateX(42%)}}
.no-scrolltl .gilt__sheen::before{animation:sheen 9s ease-in-out infinite alternate}
.vista__art{--gm:url("img/v2/hero-m-gold-450.webp")}
@media (min-width:1000px){.vista__art{--gm:url("img/v2/hero-gold-960.webp")}}
.pediment-wrap{--gm:url("img/v2/pediment-gold-900.webp")}
.archway__frame{--gm:url("img/v2/arch-gold-600.webp")}

/* ---------- architrave nav: pinned for the whole temple, with five room cells ---------- */
.temple-front{display:contents}
.nav{z-index:50}
.nav__brand img{width:auto;height:40px}
.nav__in{position:relative}
.rooms{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);display:flex;gap:7px;padding:0 10px;z-index:2}
.rooms i{width:16px;height:18px;background:var(--stone);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative;transition:transform .5s var(--ease-stone)}
.rooms i::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,50% 0,50% 12%,10% 31%,10% 69%,50% 88%,90% 69%,90% 31%,50% 12%)}
.rooms i::after{content:"";position:absolute;inset:2px;background:var(--goldleaf) center/60px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:0;transition:opacity .6s ease}
.rooms i.is-lit::after{opacity:1}
.rooms i.is-here{transform:translateY(2px) scale(1.18)}
/* sub-pages keep their pediment above the pinned architrave */
.pediment{width:min(100% - 2*var(--gutter),760px)}

/* ---------- vista: the opening frame ---------- */
.vista{--vh:clamp(600px,calc(100svh - var(--nav-h) - 12px),980px);position:relative;background:var(--paper);overflow:clip;isolation:isolate}
.vista__art{margin:0;position:relative;aspect-ratio:900/703;z-index:0}
.vista__art img{width:100%;height:100%;object-fit:cover;display:block}
.vista__in{position:relative;z-index:2}
.vista__copy{display:grid;gap:14px;padding:18px 0 34px}
.vista h1{font-size:clamp(2.05rem,9.6vw,2.6rem);line-height:1.04;letter-spacing:.005em}
.vista h1 .ln{display:block}
.vista h1 .gold-leaf{background:linear-gradient(rgba(96,66,8,.3),rgba(96,66,8,.3)),var(--goldleaf) center/300px 225px;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.75px var(--gold-ink);filter:drop-shadow(0 1.5px 0 rgba(74,51,33,.6));display:inline-block;padding-bottom:.06em}
.vista .lead{font-size:1.1875rem;line-height:1.42;max-width:34em}
.vista .overline{font-size:.6875rem;letter-spacing:.2em}
.vista .hero__legal{border-top:0;padding-top:0;border-left:3px solid var(--terracotta);padding-left:12px;color:var(--ink-2);max-width:30em}
.vista .btn-row{margin-top:6px}
@media (max-width:999px){
  .vista .overline{order:5;margin-top:8px}
  .vista__art img{object-position:50% 70%}
  .vista__art{-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent);margin-bottom:-18px;max-height:44svh;width:100%}
}
@media (min-width:700px) and (max-width:999px){.vista__copy{padding:26px 0 44px;max-width:620px}.vista h1{font-size:3.1rem}}
@media (min-width:1000px){
  .vista{height:var(--vh)}
  .vista__art{position:absolute;right:-5%;bottom:0;aspect-ratio:1920/1072;width:min(116vw,calc(var(--vh) * 1.791));
    -webkit-mask:linear-gradient(90deg,transparent 3%,#000 40%),linear-gradient(0deg,#000 8.2%,transparent 8.4%);mask:linear-gradient(90deg,transparent 3%,#000 40%),linear-gradient(0deg,#000 8.2%,transparent 8.4%)}
  .vista__in{height:100%;display:grid;align-items:center}
  .vista__copy{width:min(47%,560px);gap:18px;padding:0 0 12vh}
  .vista h1{font-size:clamp(2.4rem,4.5vw,4.3rem)}
  .vista .lead{font-size:clamp(1.1875rem,1.5vw,1.4375rem);max-width:22.5em}
  .vista .overline{font-size:.75rem}
  .vista .hero__legal{max-width:26em}
}
/* the stylobate under the vista carries the drawing's caption as a riser inscription */
.steps--vista{margin-top:0;background:var(--paper)}
.steps--vista>i:nth-child(3){height:auto;min-height:34px;display:grid;place-items:center;padding:7px var(--gutter);background:var(--field)}
.steps--vista span{font-style:italic;font-size:var(--fs-0);color:var(--ink-2);text-align:center;text-shadow:0 1px 0 var(--hilite)}

/* bees: small, slow, hovering near the comb */
.bees{position:absolute;inset:0;pointer-events:none;z-index:1}
.bee{position:absolute;width:26px;offset-rotate:0deg;animation:bee-fly 24s linear infinite}
.bee img{width:100%;height:auto;animation:bee-bob 1.7s ease-in-out infinite alternate}
.bee--a{left:58%;top:30%;offset-path:path("M0,0 C70,-46 170,-30 190,14 C205,52 90,70 40,40 C10,22 -30,24 0,0")}
.bee--b{left:86%;top:52%;width:24px;animation-duration:31s;animation-direction:reverse;offset-path:path("M0,0 C-50,-30 -120,-10 -130,30 C-136,62 -50,60 -20,34 C0,16 20,14 0,0")}
.bee--c{display:none;left:47%;top:60%;width:22px;animation-duration:37s;offset-path:path("M0,0 C40,-60 120,-70 150,-30 C170,0 100,26 60,10 C30,-2 10,16 0,0")}
@media (max-width:999px){.bee--a{left:10%;top:9%}.bee--b{left:78%;top:20%}.bee--c{display:none}}
@keyframes bee-fly{to{offset-distance:100%}}
@keyframes bee-bob{from{transform:translateY(-3px) rotate(-5deg)}to{transform:translateY(3px) rotate(4deg)}}

/* opening sequence: runs once, when the visitor has agreed and the page opens */
.js .vista__art{opacity:0;transform:scale(1.035);transform-origin:70% 80%}
.js .vista h1 .ln{clip-path:inset(-10% 100% -20% 0)}
.js .vista .overline,.js .vista .lead,.js .vista .hero__legal,.js .vista .btn-row,.js .vista .bees{opacity:0}
.js.entered .vista__art{opacity:1;transform:none;transition:opacity 1.4s ease .1s,transform 2.4s var(--ease-stone) .1s}
.js.entered .vista h1 .ln{clip-path:inset(-10% 0 -20% 0);transition:clip-path .8s cubic-bezier(.5,0,.3,1)}
.js.entered .vista h1 .ln:nth-child(1){transition-delay:.35s}.js.entered .vista h1 .ln:nth-child(2){transition-delay:.7s}
.js.entered .vista h1 .ln:nth-child(3){transition-delay:1.15s}.js.entered .vista h1 .ln:nth-child(4){transition-delay:1.5s}
.js.entered .vista .overline{opacity:1;transition:opacity .8s ease .2s}
.js.entered .vista .lead{opacity:1;transition:opacity .9s ease 2s}
.js.entered .vista .hero__legal{opacity:1;transition:opacity .9s ease 2.25s}
.js.entered .vista .btn-row{opacity:1;transition:opacity .9s ease 2.45s}
.js.entered .vista .bees{opacity:1;transition:opacity 1.6s ease 2.2s}

/* ---------- facade: pediment · inscription · columns · door ---------- */
.facade{position:relative;padding:64px 0 0;overflow:clip}
.facade__in{width:min(100% - 2*var(--gutter),1100px);margin-inline:auto}
.pediment-wrap .pediment{width:100%;margin:0 auto -2px}
.epistyle{position:relative;z-index:2;width:89%;margin-inline:auto;background:var(--carrara) center/512px;border:2px solid var(--ink);
  box-shadow:inset 0 2px 0 var(--hilite),inset 0 -3px 0 rgba(74,51,33,.2),0 5px 0 var(--stone-deep),0 6px 0 var(--ink)}
.epistyle::after{content:"";display:block;height:8px;background:url("img/orn/dentil-ink.svg") left center/14px 8px repeat-x;border-top:1px solid var(--ink)}
.epistyle .hero-facts{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:12px 10px 10px}
.epistyle .fact{white-space:nowrap;display:flex;gap:.7em;align-items:baseline;background:none;border:0;box-shadow:none;padding:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem;line-height:1.5}
.epistyle .fact__k{font-size:inherit;letter-spacing:inherit;font-weight:600;color:var(--sepia)}
.epistyle .fact__v{margin:0;font-size:inherit;letter-spacing:inherit;font-weight:700;color:var(--ink);text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.35)}
@media (min-width:900px){
  .epistyle .hero-facts{flex-direction:row;justify-content:center;gap:0;padding:17px 16px 15px}
  .epistyle .fact{flex:none;letter-spacing:.13em;font-size:clamp(.6875rem,.92vw,.8125rem)}
  .epistyle .fact+.fact::before{content:"";align-self:center;width:15px;height:17px;flex:none;margin:0 .9em;background:url("img/orn/hex-gold.svg") center/contain no-repeat}
}
.epistyle.reveal{opacity:1;transform:none}
.epistyle.reveal .fact{clip-path:inset(0 100% 0 0)}
.epistyle.reveal.in .fact{clip-path:inset(0 -2em 0 0);transition:clip-path 1s cubic-bezier(.5,0,.3,1)}
.epistyle.reveal.in .fact:nth-child(2){transition-delay:.45s}.epistyle.reveal.in .fact:nth-child(3){transition-delay:.9s}
.bay{width:89%;margin-inline:auto;display:grid;grid-template-columns:clamp(40px,10.5vw,118px) minmax(0,1fr) clamp(40px,10.5vw,118px);gap:0 clamp(2px,2vw,24px);align-items:end}
.bay .column{display:block;position:static;height:auto;min-height:0}
.bay .column img{position:static;width:100%;height:auto;transform:none;transform-origin:50% 100%}
.facade .archway{padding:0;align-self:end}
.facade .archway__frame{width:min(100%,510px)}
.archway__frame>img{z-index:1}
.archway__glow{position:absolute;left:25%;right:25%;top:21%;bottom:1%;border-radius:50% 50% 0 0 / 36% 36% 0 0;z-index:0;
  background:radial-gradient(80% 70% at 50% 100%,rgba(255,236,170,.95),rgba(246,214,130,.55) 45%,rgba(243,233,210,0) 100%),linear-gradient(rgba(250,235,209,.2),rgba(250,235,209,.9))}
.archway__title{z-index:3;top:auto;bottom:9%;transform:translateX(-50%);width:46%;gap:10px}
.archway__title.reveal,.archway__title.reveal.in{opacity:1;transform:translateX(-50%)}
.archway__title a.tabula{text-decoration:none}
.archway__title .tabula{font-size:clamp(.6875rem,2.5vw,1.25rem);letter-spacing:.12em;padding:.55em .7em .5em}
.facade .archway__kicker{margin:0;padding:0;font-size:clamp(.8125rem,1.9vw,1.25rem);line-height:1.25;color:var(--ink-2)}
@media (max-width:520px){.archway__title{width:50%;bottom:6%}.archway__title .tabula{margin:0 12px;max-width:calc(100% - 24px)}.archway__title .tabula::before,.archway__title .tabula::after{width:12px}.archway__title .tabula::before{left:-12px}.archway__title .tabula::after{right:-12px}}
.facade .steps{margin-top:0}
@supports (animation-timeline: view()){
  .facade .column--l img{animation:colv-l linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .facade .column--r img{animation:colv-r linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .facade .archway__frame{animation:arch-grow linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  .archway__glow{animation:glow-in linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
  .pediment-wrap{animation:ped-set linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@keyframes colv-l{to{transform:translateX(-34px) scale(1.1)}}
@keyframes colv-r{to{transform:translateX(34px) scale(1.1)}}
@keyframes glow-in{from{opacity:.25}to{opacity:1}}
@keyframes ped-set{from{transform:translateY(-26px)}to{transform:none}}

/* chiselled lettering: inscriptions are cut left to right */
.reveal .chisel{display:inline-block;clip-path:inset(-20% 100% -20% 0)}
.reveal.in .chisel{clip-path:inset(-20% -5% -20% 0);transition:clip-path 1s cubic-bezier(.5,0,.3,1) .25s}

/* mosaic floor: light strip */
.floor{background-image:var(--mosaic)}
@media (min-width:900px){.floor{background-image:var(--mosaic)}}

/* ---------- cella ---------- */
.frieze-wrap{width:min(100% - 2*var(--gutter),1180px);margin-inline:auto}
.frieze-wrap .frieze{width:100%}
@media (max-width:699px){
  /* the frieze as a procession: taller, and it walks past as you scroll */
  .frieze-wrap{width:100%;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--field)}
  .frieze-wrap .frieze{height:168px;width:auto;max-width:none;transform:translateX(0)}
  .no-scrolltl .frieze-wrap{overflow-x:auto}
  @supports (animation-timeline: view()){.frieze-wrap .frieze{animation:procession linear both;animation-timeline:view();animation-range:entry 30% exit 70%}}
}
@keyframes procession{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100vw))}}
/* stelae rise from behind the floor line */
.stelae{clip-path:inset(-300px -60px -14px -60px)}
.stela.reveal{opacity:1;transform:translateY(calc(100% + 40px));transition:transform 1.25s var(--ease-stone)}
.stela.reveal.in{transform:none}
.stelae>.stela:nth-child(2){transition-delay:.16s}.stelae>.stela:nth-child(3){transition-delay:.32s}
@media (max-width:899px){.stelae{clip-path:none}.stela.reveal{transform:translateY(60px);opacity:0;transition:transform 1s var(--ease-stone),opacity .5s ease}.stela.reveal.in{opacity:1}.stelae>.stela{transition-delay:0s!important}}

/* ---------- ripeness: five cells of the comb ---------- */
.ripe-title{text-align:center;font-family:var(--display);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:var(--fs-2);margin-bottom:6px;text-shadow:0 1px 0 var(--hilite),0 -1px 0 rgba(74,51,33,.3)}
.ripe-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px 0;margin:10px auto 30px;max-width:420px}
.ripe{grid-column:span 2;display:grid;justify-items:center;text-align:center;gap:1px;line-height:1.2}
.ripe:nth-child(4){grid-column:2/span 2}
.ripe .cell{width:86%;margin-bottom:6px}
.ripe b{font-size:1.25rem}
.ripe span{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia)}
.ripe em{font-size:var(--fs-0);color:var(--ink-2)}
.ripe--reset .cell{opacity:.8}
@media (min-width:760px){.ripe-row{grid-template-columns:repeat(5,1fr);max-width:none;gap:0 10px;margin:14px 0 34px}.ripe,.ripe:nth-child(4){grid-column:auto}.ripe .cell{width:min(100%,168px)}.ripe b{font-size:1.5rem}.ripe span{font-size:.75rem}}
.cell{position:relative;aspect-ratio:420/483}
.cell>img{width:100%;height:100%}
.cell__honey{position:absolute;inset:0;filter:drop-shadow(0 -2px 0 var(--gold-ink));clip-path:polygon(50% 16.5%,82% 35%,82% 65%,50% 83.5%,18.5% 65%,18.5% 35%)}
.cell__honey img{width:100%;height:100%;clip-path:inset(calc(18% + (1 - var(--p,0)) * 64.5%) 0 0 0);transition:clip-path 1.9s cubic-bezier(.3,.7,.2,1)}
.reveal:not(.in) .ripe .cell__honey img{clip-path:inset(82.5% 0 0 0)}
.ripe:nth-child(2) .cell__honey img{transition-delay:.15s}.ripe:nth-child(3) .cell__honey img{transition-delay:.3s}.ripe:nth-child(4) .cell__honey img{transition-delay:.45s}
.ledger-slab .ledger caption{caption-side:top}

/* ---------- treasury vault: bare stone until the first buy ---------- */
.vault{position:relative;margin:0;height:clamp(300px,41.4vw,600px);overflow:hidden;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:#6b4a30}
.vault__stone,.vault__gilt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vault__gilt{position:absolute;inset:0;clip-path:inset(calc(100% - var(--level,0%)) 0 0 0);transition:clip-path 2.4s steps(1)}
.vault__light{position:absolute;inset:0;background:radial-gradient(90% 120% at 22% -10%,rgba(255,246,214,.34),rgba(255,246,214,0) 55%),radial-gradient(120% 110% at 50% 45%,transparent 50%,rgba(46,28,14,.5) 100%),linear-gradient(rgba(46,28,14,.28),transparent 14%,transparent 80%,rgba(46,28,14,.38))}
.vault__mark{position:absolute;left:0;right:0;top:79.5%;display:block}
.vault__line{display:block;height:0;border-top:2px dashed rgba(251,245,230,.85);filter:drop-shadow(0 1px 0 rgba(46,28,14,.8))}
.vault__tag{position:absolute;left:max(var(--gutter),calc(50% - 590px));top:0;transform:translateY(-50%);background:var(--field);border:1.5px solid var(--ink);padding:.4em .9em .35em;font-style:italic;font-size:var(--fs-0);line-height:1.25;box-shadow:0 3px 0 var(--stone-deep),0 4px 0 var(--ink);max-width:calc(100% - 2*var(--gutter))}
.vault__tag b{font-family:var(--display);font-style:normal;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;margin-right:.5em}
.vault[data-courses]:not([data-courses="0"]) .vault__mark{display:none}
@supports (animation-timeline: view()){.vault__stone,.vault__gilt img{animation:vault-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}}
@keyframes vault-drift{from{transform:scale(1.08) translateY(-2.5%)}to{transform:scale(1.08) translateY(2.5%)}}
.treasury__in{margin-top:-44px}
@media (min-width:900px){.treasury__in{margin-top:-64px}}
/* plaques: five waiting for data in a row; supply is the one true number and gets the basalt */
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
.stat-grid>.stat:nth-child(5),.stat--supply{grid-column:1/-1}
.stat>.field{padding:14px 8px 12px}
.stat__unit{line-height:1.25}
@media (min-width:900px){.stat-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px}.stat-grid>.stat:nth-child(5){grid-column:auto}.stat>.field{padding:18px 10px 16px;height:100%}}
.stat--supply{background:var(--basalt) center/512px;box-shadow:inset 0 1px 0 rgba(255,245,220,.25),inset 0 -3px 0 rgba(0,0,0,.45),0 5px 0 #2A1C10,0 6px 0 #150E07}
.stat--supply>.field{background:transparent;border-color:rgba(201,162,39,.5);box-shadow:none;display:grid;gap:2px;padding:20px 14px 18px}
.stat--supply .stat__label{color:#D9C79E}
.stat--supply .stat__unit{color:#E9DEC6}
.stat--supply .stat__value{font-size:clamp(1.75rem,8vw,3.75rem);letter-spacing:.02em;text-shadow:none;margin:.15em 0 .1em}
.stat--supply .gold-leaf{background:linear-gradient(rgba(255,236,170,.25),rgba(255,236,170,.25)),var(--goldleaf) center/520px 390px;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7))}
@media (min-width:900px){.stat--supply>.field{grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 30px}.stat--supply .stat__label{text-align:left}.stat--supply .stat__unit{text-align:right}}
/* plaques are set down, one after another, and land */
.setdown.reveal{opacity:1;transform:none}
.setdown.reveal>.stat{opacity:0;transform:translateY(-22px) scale(1.035)}
.setdown.reveal.in>.stat{opacity:1;transform:none;transition:transform .42s cubic-bezier(.55,0,.9,.45),opacity .25s ease}
.setdown.in>.stat:nth-child(2){transition-delay:.11s}.setdown.in>.stat:nth-child(3){transition-delay:.22s}.setdown.in>.stat:nth-child(4){transition-delay:.33s}.setdown.in>.stat:nth-child(5){transition-delay:.44s}.setdown.in>.stat:nth-child(6){transition-delay:.62s}

/* ---------- altar: braziers that burn, and the ripening curve you can hold ---------- */
.brazier{display:none;position:relative}
@media (min-width:900px){.brazier{display:block;width:120px;align-self:end;margin-bottom:-6px}.brazier img{width:100%;height:auto;position:relative}}
.brazier::before{content:"";position:absolute;left:50%;top:-4%;width:260%;aspect-ratio:1;transform:translate(-50%,-30%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,120,.55),rgba(255,200,110,.22) 45%,rgba(255,200,110,0));animation:flicker 3.1s ease-in-out infinite}
.brazier:last-child::before{animation-delay:-1.3s;animation-duration:2.7s}
@keyframes flicker{0%,100%{opacity:.75;transform:translate(-50%,-30%) scale(1)}22%{opacity:1;transform:translate(-50%,-31%) scale(1.06)}41%{opacity:.6;transform:translate(-50%,-30%) scale(.96)}63%{opacity:.95;transform:translate(-50%,-31%) scale(1.04)}80%{opacity:.7;transform:translate(-50%,-30%) scale(.98)}}
.ripen{display:grid;gap:18px 30px;align-items:center}
.ripen__cell{width:min(56%,210px);margin-inline:auto}
.ripen__cell .cell__honey img{transition-duration:.5s}
@media (min-width:700px){.ripen{grid-template-columns:210px minmax(0,1fr)}.ripen__cell{width:100%}}
.ripen__body h3{margin-bottom:.6em}
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:12px;background:var(--hatch) 0 0/8px 8px,var(--stone);border:2px solid var(--ink);border-radius:2px;box-shadow:inset 0 3px 0 rgba(74,51,33,.2)}
.range::-moz-range-track{height:8px;background:var(--stone);border:2px solid var(--ink);border-radius:2px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:38px;margin-top:-15px;border:0;background:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-image:linear-gradient(var(--ink),var(--ink)),var(--goldleaf);background-size:100% 100%,80px;background-position:center;background-clip:border-box;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 40px rgba(201,162,39,.0)}
.range::-webkit-slider-thumb{background:radial-gradient(closest-side,transparent 68%,var(--ink) 70%),var(--goldleaf) center/90px}
.range::-moz-range-thumb{width:30px;height:34px;border:2px solid var(--ink);border-radius:4px;background:var(--goldleaf) center/90px}
.range:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.ripen__curve{display:block;width:100%;height:70px;overflow:visible;margin-top:2px}
.ripen__axis{stroke:var(--rule);stroke-width:1;fill:none}
.ripen__path{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ripen__dot{fill:var(--gold);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.ripen__out{margin-top:10px;font-size:var(--fs-1)}
@media (min-width:700px){.ripen__out{font-size:var(--fs-2)}}
.ripen__out b{font-size:1.2em}

/* ---------- law band: the breccia shown larger and calmer, so the tablets lead ---------- */
.law-band{background:linear-gradient(rgba(38,56,46,.5),rgba(38,56,46,.5)),var(--verde-tex) center/860px}
.tablet-law.reveal{transform:translateY(40px)}
.tablet-law.reveal.in{transform:none;transition:transform 1.1s var(--ease-stone),opacity .6s ease}
.tablets>.tablet-law:nth-child(2){transition-delay:.15s}

/* ---------- closing inscription ---------- */
.closing{position:relative;margin-top:24px;text-align:center;overflow:clip}
.closing__ins{position:relative;z-index:2;padding:0 var(--gutter)}
.closing h2{font-size:clamp(2.1rem,10.5vw,6.5rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;margin-right:-.14em}
.closing h2 .gold-leaf{display:inline-block;background-size:auto,420px 315px;padding:.05em 0 .08em}
.closing p{font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);color:var(--ink-2);margin-top:.35em}
.closing__art{display:block;width:100%;height:auto;margin-top:-17%;-webkit-mask:linear-gradient(transparent,#000 34%);mask:linear-gradient(transparent,#000 34%);mix-blend-mode:multiply}
@media (min-width:700px){.closing{margin-top:0}.closing__ins{position:absolute;left:0;right:0;top:13%}.closing__art{margin-top:0;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}}
.closing__ins.reveal{opacity:1;transform:none}
.closing__ins.reveal h2{clip-path:inset(-10% 100% -20% 0)}
.closing__ins.reveal.in h2{clip-path:inset(-10% 0 -20% 0);transition:clip-path 1.8s cubic-bezier(.5,0,.3,1)}
.closing__ins.reveal p{opacity:0}.closing__ins.reveal.in p{opacity:1;transition:opacity 1s ease .9s}
.bee--d{left:22%;top:62%;width:20px;animation-duration:34s;offset-path:path("M0,0 C90,-40 220,-20 300,20 C340,40 200,60 120,40 C60,26 -20,30 0,0")}
.bee--e{left:90%;top:58%;width:18px;animation-duration:29s;offset-path:path("M0,0 C-60,-30 -150,-20 -190,16 C-210,40 -110,50 -60,30 C-20,16 14,18 0,0")}
.footer .floor--foot{margin-top:-2px;position:relative;z-index:2}

/* reveal: quieter default, the special cases above do the talking */
.reveal{transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}

@media (prefers-reduced-motion:reduce){
  .js .vista__art,.js .vista .overline,.js .vista .lead,.js .vista .hero__legal,.js .vista .btn-row,.js .vista .bees,.setdown.reveal>.stat,.closing__ins.reveal p{opacity:1!important;transform:none!important}
  .js .vista h1 .ln,.reveal .chisel,.epistyle.reveal .fact,.closing__ins.reveal h2{clip-path:none!important}
  .stela.reveal,.tablet-law.reveal{transform:none!important;opacity:1!important}
  .gilt__sheen,.bees{display:none}
  .reveal:not(.in) .ripe .cell__honey img{clip-path:inset(calc(18% + (1 - var(--p,0)) * 64.5%) 0 0 0)}
  .vault__stone,.vault__gilt img{transform:none}
}

#tos-title:focus{outline:none}
#veteran{overflow:clip}
/* architrave links only when they fit on one line */
@media (min-width:900px) and (max-width:1139px){.nav__links,.nav__cta{display:none}.nav__menu{display:block}}
@media (min-width:900px){.epistyle .fact{font-size:clamp(.6875rem,1.02vw,.9375rem)}}