/* ============================================================
   Kingdom Ark — Site Stylesheet
   Built on the Kingdom Ark v3 "Maritime" design system.
   Tokens mirror colors_and_type.css exactly. No build step.
   ============================================================ */



:root{
  /* Grounds */
  --ink:#0D1219; --midnight:#0B1D2C; --ivory:#F3EDE5; --parchment:#E6DAC9;
  --bg-well:#EFE9DB; --bg-darker:#08131D;
  /* Verdigris — primary accent */
  --verdigris:#3A706A; --verdigris-deep:#255049; --verdigris-soft:#6BA49B;
  --verdigris-dim:rgba(58,112,106,.10);
  /* Heritage accents (ornament only) */
  --bronze:#8A6838; --bronze-deep:#5A4222; --gold-leaf:#C4983A; --oxblood:#6E1F23;
  /* Neutral scale */
  --stone-1:#1C2535; --stone-2:#394A5C; --stone-3:#697788; --stone-4:#99A0AC; --stone-5:#C8CDD5;
  /* Semantic */
  --positive:#3A5C38; --negative:#7A2A20; --info:#1B5068;
  /* Foreground */
  --fg-1:var(--ink); --fg-2:var(--stone-2); --fg-3:var(--stone-3); --fg-mute:var(--stone-4);
  --fg-onDark-1:var(--ivory); --fg-onDark-2:rgba(243,237,229,.72); --fg-onDark-3:rgba(243,237,229,.48);
  /* Lines */
  --line:rgba(13,18,25,.12); --line-strong:rgba(13,18,25,.22);
  --line-onDark:rgba(243,237,229,.12); --line-onDark-s:rgba(243,237,229,.22);
  /* Type */
  --display:"Cormorant Garamond","Garamond","EB Garamond",Georgia,serif;
  --sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --tr-eyebrow:.18em; --tr-nav:.14em;
  /* Spacing (8pt-forward, 4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --measure:62ch; --container:1120px; --header-h:72px;
  --ease:cubic-bezier(.2,.6,.2,1); --dur:280ms; --dur-slow:560ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--fg-1);
  background:var(--ivory); -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on,"cv11" on;
}
::selection{background:var(--verdigris); color:var(--ivory);}
img{max-width:100%; display:block}
a{color:var(--verdigris-deep); text-decoration:none}

/* Focus — verdigris ring, never blue */
a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--ivory),0 0 0 4px var(--verdigris); border-radius:0;
}
.on-dark a:focus-visible,.on-dark button:focus-visible{
  box-shadow:0 0 0 2px var(--midnight),0 0 0 4px var(--verdigris-soft);
}
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:100;
  background:var(--ink); color:var(--ivory); padding:10px 16px; border-radius:0; font-size:13px;
}
.skip-link:focus{left:16px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--s-5)}
.narrow{max-width:760px; margin:0 auto}
.section{padding:var(--s-9) 0}
@media(max-width:640px){.section{padding:var(--s-8) 0}}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase; color:var(--fg-2);
}
.eyebrow--accent{color:var(--verdigris-deep)}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-.01em; margin:0; text-wrap:balance; color:var(--ink)}
.display{font-weight:300; font-size:clamp(52px,8vw,84px); line-height:1.04}
h1{font-size:clamp(40px,6vw,64px); line-height:1.08}
h2{font-size:clamp(30px,4.4vw,44px); line-height:1.12}
h3{font-size:clamp(23px,3vw,30px); line-height:1.18}
.lede{font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(20px,3vw,28px); line-height:1.4; color:var(--fg-2)}
.body{font-size:18px; line-height:1.75; color:var(--fg-1); max-width:var(--measure)}
.body-2{font-size:16px; line-height:1.7; color:var(--fg-2)}
.meta{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--verdigris-deep)}

/* Hairline rule with verdigris pip */
.rule{display:flex; align-items:center; justify-content:center; gap:10px; margin:var(--s-6) 0}
.rule::before,.rule::after{content:""; height:1px; width:120px; background:var(--line)}
.rule i{width:5px; height:5px; background:var(--verdigris); transform:rotate(45deg); display:block}
.on-dark .rule::before,.on-dark .rule::after{background:var(--line-onDark)}
.on-dark .rule i{background:var(--verdigris-soft)}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s-5); background:rgba(243,237,229,.86); backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.wordmark{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.18em; color:var(--ink); white-space:nowrap}
.wordmark .dot{color:var(--verdigris); margin:0 .18em}
.nav{display:flex; align-items:center; gap:var(--s-6)}
.nav a{
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:var(--tr-nav); text-transform:uppercase;
  color:var(--fg-2); position:relative; padding:6px 0;
}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--verdigris); transition:right var(--dur) var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink)}
.lang{display:flex; gap:4px; margin-left:var(--s-2)}
.lang button{
  font-family:var(--sans); font-size:11px; letter-spacing:.03em; background:none;
  border:1px solid var(--line-strong); color:var(--fg-3); padding:5px 10px; border-radius:0; cursor:pointer; line-height:1;
}
.lang button.on{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); border-radius:0; padding:8px; cursor:pointer}
.nav-toggle svg{display:block; width:18px; height:18px; stroke:var(--ink); stroke-width:1.4; fill:none}

@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ivory); border-bottom:1px solid var(--line); padding:0 var(--s-5);
    max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease);
  }
  .nav.open{max-height:70vh; padding-top:var(--s-2); padding-bottom:var(--s-4)}
  .nav a{padding:14px 0; font-size:13px; width:100%; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .lang{margin:var(--s-4) 0 0}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.03em;
  height:48px; padding:0 26px; border-radius:0; border:1px solid transparent; cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn--primary{background:var(--verdigris); color:var(--ivory); border-color:var(--verdigris)}
.btn--primary:hover{background:var(--verdigris-deep); border-color:var(--verdigris-deep)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--parchment); border-color:var(--ink)}
.btn--sovereign{background:var(--oxblood); color:var(--ivory); border-color:var(--oxblood)}
.btn--sovereign:hover{background:#571619; border-color:#571619}
.on-dark .btn--ghost{color:var(--ivory); border-color:var(--line-onDark-s)}
.on-dark .btn--ghost:hover{background:rgba(243,237,229,.08); border-color:var(--ivory)}
.textlink{color:var(--verdigris-deep); border-bottom:1px solid rgba(37,80,73,.35); padding-bottom:1px}
.textlink:hover{border-bottom-color:var(--verdigris-deep)}

/* ---------- Bands ---------- */
.band--parchment{background:var(--parchment)}
.band--well{background:var(--bg-well)}
.band--midnight{background:var(--midnight); color:var(--fg-onDark-1)}
.band--midnight h1,.band--midnight h2,.band--midnight h3{color:var(--ivory)}
.band--midnight .body,.band--midnight .body-2{color:var(--fg-onDark-2)}

/* ---------- Hero ---------- */
.hero{text-align:center; padding:var(--s-10) 0 var(--s-8)}
.hero .eyebrow{display:block; margin-bottom:var(--s-4)}
.hero .lede{max-width:30ch; margin:var(--s-5) auto 0}
.hero .actions{margin-top:var(--s-7)}
@media(max-width:640px){.hero{padding:var(--s-8) 0 var(--s-6)}}

.actions{display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap}

/* ---------- Prose (story) ---------- */
.prose{max-width:var(--measure); margin:0 auto}
.prose p{font-size:18px; line-height:1.78; margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}

/* ---------- Quote band ---------- */
.pullquote{text-align:center; max-width:24ch; margin:0 auto}
.pullquote p{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(26px,4.2vw,40px); line-height:1.3; color:var(--ivory); margin:0}
.pullquote cite{display:block; margin-top:var(--s-5); font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-onDark-3)}

/* ---------- Feature (image/text split) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center}
.split--narrow{display:grid; grid-template-columns:260px 1fr; gap:var(--s-7); align-items:start}
@media(max-width:760px){.split,.split--narrow{grid-template-columns:1fr; gap:var(--s-5)}}

.portrait{aspect-ratio:3/4; background:var(--parchment); border:1px solid var(--line); overflow:hidden}
.portrait picture,.gallery picture{display:contents}
.portrait img{width:100%; height:100%; object-fit:cover}

/* ---------- Cards / teasers ---------- */
.grid{display:grid; gap:var(--s-4)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid--3{grid-template-columns:1fr}}
.card{
  background:var(--ivory); border:1px solid var(--line); border-radius:0; padding:var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-3); transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.card .eyebrow{color:var(--verdigris-deep)}
.card h3{font-size:24px}
.card p{margin:0; font-size:15px; line-height:1.65; color:var(--fg-2)}
.card .textlink{margin-top:auto; align-self:flex-start; font-size:13px}

/* ---------- Lists (who/how) ---------- */
.tick{list-style:none; padding:0; margin:0}
.tick li{position:relative; padding-left:20px; margin:0 0 10px; color:var(--fg-2); line-height:1.6; max-width:52ch}
.tick li::before{content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--verdigris)}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{margin:0; aspect-ratio:3/2; background:var(--parchment); border:1px solid var(--line); overflow:hidden}
.gallery img{width:100%; height:100%; object-fit:cover; object-position:50% 32%; transition:transform var(--dur-slow) var(--ease); filter:saturate(.94)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery-cap{text-align:center; font-size:13px; color:var(--fg-2); margin:var(--s-4) auto 0; max-width:52ch}

/* ---------- Form ---------- */
.formwell{border:1px solid var(--line-strong); border-radius:0; background:var(--bg-well); padding:var(--s-7) var(--s-6); max-width:var(--measure); margin:0 auto}
.formwell .eyebrow{display:block; text-align:center; margin-bottom:var(--s-2)}
.formwell h2{text-align:center; font-size:clamp(26px,3.6vw,34px); margin-bottom:var(--s-2)}
.formwell .sub{text-align:center; color:var(--fg-2); font-size:15px; max-width:44ch; margin:0 auto var(--s-5); line-height:1.6}
.field{margin-bottom:var(--s-4)}
.field label{display:block; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); margin-bottom:7px}
.field input{width:100%; height:48px; padding:0 14px; border:1px solid var(--line-strong); border-radius:0; background:var(--ivory); font-family:var(--sans); font-size:15px; color:var(--ink); transition:border-color var(--dur) var(--ease)}
.field textarea{width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:0; background:var(--ivory); font-family:var(--sans); font-size:15px; color:var(--ink); resize:vertical}
.field textarea:focus{outline:none; border-color:var(--verdigris)}
.field select{width:100%; height:48px; padding:0 10px; border:1px solid var(--line-strong); border-radius:0; background:var(--ivory); font-family:var(--sans); font-size:15px; color:var(--ink)}
.field input:focus,.field select:focus{outline:none; border-color:var(--verdigris)}
.form-btn{width:100%; margin-top:var(--s-1)}
.form-msg{margin-top:var(--s-4); padding:11px 14px; border-radius:0; font-size:13px; display:none; border:1px solid}
.form-msg.ok{display:block; background:rgba(58,92,56,.09); border-color:var(--positive); color:#2c4429}
.form-msg.err{display:block; background:rgba(122,42,32,.08); border-color:var(--negative); color:var(--negative)}
.form-hint{font-size:12px; color:var(--fg-2); text-align:center; margin-top:var(--s-4)}

/* ---------- Updates (dynamic feed) ---------- */
.updates-list{max-width:760px; margin:0 auto}
.update{padding:var(--s-7) 0; border-top:1px solid var(--line)}
.update:first-child{border-top:0; padding-top:0}
.update .u-date{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--verdigris-deep); margin:0 0 8px}
.update h3{margin:0 0 14px}
.update p{font-size:17px; line-height:1.75; color:var(--fg-2); max-width:var(--measure); margin:0 0 1em}
.update p:last-child{margin-bottom:0}
.update .u-img{margin-top:20px; border:1px solid var(--line); border-radius:0; overflow:hidden}
.update .u-img img{width:100%; display:block}
.updates-state{text-align:center; color:var(--fg-2); padding:var(--s-8) 0; font-size:15px}

/* ---------- Footer ---------- */
.site-footer{background:var(--midnight); color:var(--fg-onDark-1)}
.site-footer .inner{max-width:var(--container); margin:0 auto; padding:var(--s-8) var(--s-5) var(--s-6)}
.site-footer .top{display:flex; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap}
.site-footer .wordmark{color:var(--ivory); font-size:22px}
.site-footer .wordmark .dot{color:var(--verdigris-soft)}
.site-footer .cols{display:flex; gap:var(--s-8); flex-wrap:wrap}
.site-footer h4{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-onDark-3); margin:0 0 var(--s-3)}
.site-footer a{display:block; color:var(--fg-onDark-2); font-size:14px; margin-bottom:8px}
.site-footer a:hover{color:var(--ivory)}
.site-footer .blurb{max-width:42ch; color:var(--fg-onDark-2); font-size:13px; line-height:1.6; margin-top:var(--s-3)}
.site-footer .social-links{display:flex; gap:var(--s-3); margin-top:2px}
.site-footer .social-links a{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  margin:0; border:1px solid var(--line-onDark-s); color:var(--fg-onDark-2); border-radius:0;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.site-footer .social-links a:hover{background:var(--verdigris); border-color:var(--verdigris); color:var(--ivory)}
.site-footer .social-links svg{width:18px; height:18px; fill:currentColor}
.site-footer .frule{height:1px; background:var(--line-onDark); margin:var(--s-6) 0 var(--s-4)}
.site-footer .legal{display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:11px; letter-spacing:.05em; color:var(--fg-onDark-3)}

/* ---------- Motion (entrance) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s}

/* ---------- Scroll progress (thin verdigris line, wayfinding on long editorial pages) ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--verdigris); z-index:60; transition:width 120ms linear}

/* ---------- Page-to-page transition (fade out only; incoming page reveals via .reveal) ---------- */
body.leaving{opacity:0; transition:opacity 160ms var(--ease); pointer-events:none}

/* ---------- Photography arrives with a fade, never a pop ---------- */
.fade-img{opacity:0; transition:opacity 640ms var(--ease)}
.fade-img.loaded{opacity:1}

/* ---------- Toolkit icon: the arch hand-draws in on reveal ---------- */
.icon-draw path:nth-of-type(1){stroke-dasharray:620; stroke-dashoffset:620; transition:stroke-dashoffset 1.2s var(--ease) .1s}
.icon-draw path:nth-of-type(2){stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset .7s var(--ease) .9s}
.reveal.in .icon-draw path{stroke-dashoffset:0}

/* ---------- Stat count-up ---------- */
.stat .n{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .gallery img,.card,.nav a::after{transition:none !important}
  .scroll-progress{display:none}
  body.leaving{opacity:1 !important; transition:none !important}
  .fade-img{opacity:1 !important; transition:none !important}
  .icon-draw path{stroke-dashoffset:0 !important; transition:none !important}
}


/* ---------- Generative chart art ("Sounding Lines", seed 8) ---------- */
.hero{position:relative}
.hero>*{position:relative; z-index:1}
.hero-art{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("chart-art.svg") center/cover no-repeat;
}
@media(prefers-reduced-motion:no-preference){
  .hero-art{opacity:0; animation:chartIn 1.4s var(--ease) .2s forwards, chartDrift 80s linear 1.6s infinite alternate}
  @keyframes chartIn{to{opacity:1}}
  @keyframes chartDrift{from{transform:scale(1)}to{transform:scale(1.05) translate(-1.2%,-0.8%)}}
}

/* ---------- FAQ (Give page) ---------- */
.faq details{border-top:1px solid var(--line); padding:var(--s-4) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-family:var(--display); font-size:21px; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--verdigris); font-family:var(--sans); font-size:18px;
  line-height:1; transition:transform var(--dur) var(--ease); flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:var(--s-3) 0 var(--s-1); color:var(--fg-2); font-size:15px; line-height:1.7; max-width:60ch}

/* ---------- Stats (The Need) ---------- */
.stat .n{font-family:var(--display); font-weight:300; font-size:clamp(48px,6vw,76px); line-height:1; color:var(--verdigris-deep); margin:0}
.stat .meta{color:var(--fg-3)}

/* ---------- Photo band (quote over image) ---------- */
.photoband{
  background-image:linear-gradient(rgba(11,29,44,.82),rgba(11,29,44,.82)),url("images/jaranwala-03.jpg");
  background-size:cover; background-position:center 35%;
}

/* ---------- Elevation pass ---------- */
/* cards: verdigris awakening on hover */
.card:hover{border-color:rgba(58,112,106,.45)}
.card:hover .eyebrow{color:var(--verdigris)}
/* gallery: quiet verdigris veil that lifts on hover */
.gallery figure{position:relative}
.gallery figure::after{content:""; position:absolute; inset:0; background:rgba(58,112,106,.13);
  mix-blend-mode:multiply; pointer-events:none; transition:opacity var(--dur-slow) var(--ease)}
.gallery figure:hover::after{opacity:0}
/* photo band: gentle parallax on desktop */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .photoband{background-attachment:fixed}
}
/* hero coordinates marginalia */
.coords{font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute); margin-top:12px}
/* textlink arrow ease */
.textlink{transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease)}
.textlink:hover{color:var(--verdigris)}

/* ---------- Nav CTA (harvested from Stitch concept) ---------- */
.nav a.nav-cta{background:var(--verdigris); color:var(--ivory); padding:9px 18px; border-radius:0}
.nav a.nav-cta:hover{background:var(--verdigris-deep); color:var(--ivory)}
.nav a.nav-cta::after{display:none}
@media(max-width:980px){.nav a.nav-cta{padding:14px 12px; width:auto; align-self:flex-start}}

/* ============================================================
   Cinematic hero — "Through the open door"
   Full-viewport arched aperture (the open door of the Ark),
   warm golden-hour photography, a single sanctioned aura bloom,
   a midnight protection gradient, and one gold-leaf hairline as
   the only ornament. Motion is fade + translate only (parallax
   on scroll; the aura breathes in opacity). Imagery is supplied
   by the operator via <image-slot>.
   ============================================================ */
.hero--cinematic{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:calc(var(--header-h) + var(--s-6)) var(--s-5) clamp(84px,12vh,150px);
  text-align:center; background:var(--midnight);
}
.hero--cinematic .lede{max-width:46ch}

/* --- layers --- */
.hero-layer{position:absolute; inset:0; z-index:0; pointer-events:none; will-change:transform}
.hero-sky{top:-12%; bottom:-12%}
/* the painted Ark — fills the frame; Christ stays centred at every width */
.hero-painting{display:block; width:100%; height:100%; object-fit:cover; object-position:center}

/* gentle settle over the painting so ivory text holds AA against the door-light */
.hero-sky::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,19,29,.30) 0%, rgba(8,19,29,.10) 45%, rgba(8,19,29,.04) 100%)}

/* protection gradients */
.hero-topveil{position:absolute; z-index:3; top:0; left:0; right:0; height:210px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,19,29,.72), rgba(8,19,29,0))}
.hero-veil{position:absolute; z-index:3; left:0; right:0; bottom:0; height:72%; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,19,29,.95) 0%, rgba(8,19,29,.84) 28%, rgba(8,19,29,.52) 60%, rgba(8,19,29,0) 100%)}

/* content */
.hero-content{position:relative; z-index:4; max-width:760px; margin:0 auto; pointer-events:none; will-change:transform,opacity}
.hero-content > *{pointer-events:auto}
.hero--cinematic .eyebrow{display:block; color:var(--fg-onDark-2); margin-bottom:var(--s-4)}
.hero--cinematic .display{color:var(--ivory); margin:0}
.hero--cinematic .lede{color:rgba(243,237,229,.92); margin:var(--s-5) auto 0}
.hero--cinematic .actions{margin-top:var(--s-7)}

/* scroll cue */
.hero-cue{position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:44px; display:flex; align-items:flex-start; justify-content:center; padding-top:7px;
  border:1px solid rgba(243,237,229,.35); border-radius:20px}
.hero-cue-line{width:2px; height:9px; background:rgba(243,237,229,.7); border-radius:0}
@media(prefers-reduced-motion:no-preference){
  .hero-painting{animation:paintingIn 1800ms var(--ease) 120ms both}
  @keyframes paintingIn{from{opacity:0; transform:scale(1.045)}to{opacity:1; transform:scale(1)}}
  .hero-cue-line{animation:heroCue 1.9s var(--ease) infinite}
  @keyframes heroCue{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}70%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(11px)}}
}
@media(max-width:640px){
  .hero--cinematic{padding-bottom:clamp(72px,14vh,120px)}
}

/* --- Header: transparent + light over the cinematic hero, docks to ivory once past it.
   Default (pre-JS) is the top-of-hero state, so there is no ivory flash on load. --- */
body.has-cinematic-hero .site-header{
  position:fixed; left:0; right:0; top:0;
  background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  transition:background var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
html{scroll-padding-top:var(--header-h)}
body.has-cinematic-hero .site-header .wordmark{color:var(--ivory)}
/* The hero already sets the brand name as its headline; the header wordmark
   would sit redundantly beside it, so it stays hidden until the header docks
   past the hero (kept in the DOM, but out of the tab order while hidden). */
body.has-cinematic-hero .site-header:not(.docked) .wordmark{
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility 0s var(--dur);
}
body.has-cinematic-hero .site-header.docked .wordmark{
  opacity:1; visibility:visible; transition:opacity var(--dur) var(--ease), visibility 0s;
}
body.has-cinematic-hero .site-header .nav a{color:var(--fg-onDark-2)}
body.has-cinematic-hero .site-header .nav a:hover,
body.has-cinematic-hero .site-header .nav a[aria-current="page"]{color:var(--ivory)}
body.has-cinematic-hero .site-header .nav-toggle{color:var(--ivory)}
body.has-cinematic-hero .site-header .nav-toggle svg{stroke:currentColor}

body.has-cinematic-hero .site-header.docked{
  background:rgba(243,237,229,.9); backdrop-filter:saturate(1.1) blur(8px); border-bottom-color:var(--line);
}
body.has-cinematic-hero .site-header.docked .wordmark{color:var(--ink)}
body.has-cinematic-hero .site-header.docked .nav a{color:var(--fg-2)}
body.has-cinematic-hero .site-header.docked .nav a:hover,
body.has-cinematic-hero .site-header.docked .nav a[aria-current="page"]{color:var(--ink)}
body.has-cinematic-hero .site-header.docked .nav-toggle{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .hero-cue-line{animation:none}
}

/* ---------- Full-bleed scripture divider (angel band) ---------- */
.band--divider{position:relative; overflow:hidden; background:var(--midnight); padding:clamp(96px,17vh,190px) 0}
.divider-media{position:absolute; inset:0; z-index:0}
.divider-media image-slot{width:100%; height:100%; background:var(--bg-darker)}
.divider-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(8,19,29,.64),rgba(8,19,29,.64))}
.divider-content{position:relative; z-index:2}
.band--divider .pullquote{max-width:30ch}

/* ============================================================
   Cinematic hero — enhancement pass ("the doors ease open")
   A cosmos backdrop (the long water), a pair of gilded doors
   that swing open on arrival, and a keystone arch on the
   threshold. Cool teal glows only — never purple. Motion is
   fade + rotate/translate and honours prefers-reduced-motion.
   ============================================================ */
.hero-cosmos{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(150% 105% at 50% 3%, rgba(37,80,73,.22), rgba(11,29,44,0) 52%),
    radial-gradient(120% 95% at 84% 80%, rgba(58,112,106,.14), rgba(11,29,44,0) 58%),
    var(--midnight);
}
.hero-stars{position:absolute; inset:0; background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 16%, rgba(243,237,229,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 15% 62%, rgba(243,237,229,.7), transparent 60%),
    radial-gradient(1px 1px at 22% 34%, rgba(196,152,58,.8), transparent 60%),
    radial-gradient(1.3px 1.3px at 29% 82%, rgba(243,237,229,.72), transparent 60%),
    radial-gradient(1px 1px at 35% 12%, rgba(243,237,229,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 54%, rgba(243,237,229,.85), transparent 60%),
    radial-gradient(1px 1px at 47% 26%, rgba(196,152,58,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 53% 76%, rgba(243,237,229,.7), transparent 60%),
    radial-gradient(1px 1px at 59% 40%, rgba(243,237,229,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 65% 18%, rgba(243,237,229,.82), transparent 60%),
    radial-gradient(1px 1px at 71% 66%, rgba(196,152,58,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 77% 44%, rgba(243,237,229,.72), transparent 60%),
    radial-gradient(1px 1px at 83% 24%, rgba(243,237,229,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(243,237,229,.85), transparent 60%),
    radial-gradient(1px 1px at 92% 50%, rgba(196,152,58,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 32%, rgba(243,237,229,.7), transparent 60%),
    radial-gradient(1px 1px at 6% 88%, rgba(243,237,229,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 44% 92%, rgba(243,237,229,.64), transparent 60%),
    radial-gradient(1px 1px at 68% 90%, rgba(243,237,229,.55), transparent 60%);
}
@media(prefers-reduced-motion:no-preference){
  .hero-stars{animation:starTwinkle 6s var(--ease) infinite alternate}
  @keyframes starTwinkle{from{opacity:.72}to{opacity:1}}
}

/* ============================================================
   Refinement pass — quiet luxury (2026-07-17)
   Ported from the design-system pass: sharp geometry, editorial
   ornament, calmer motion. Token-true — verdigris speaks,
   gold-leaf ornaments only, no shadows, no rounded corners.
   ============================================================ */

/* Buttons take the brand's lettered register */
.btn{font-size:12px; letter-spacing:.08em; text-transform:uppercase}

/* Cards: the lift retires; a verdigris hairline dawns across the top instead */
.card{position:relative}
.card:hover{transform:none}
.card::before{content:""; position:absolute; top:-1px; left:0; right:100%; height:1px;
  background:var(--verdigris); transition:right var(--dur-slow) var(--ease)}
.card:hover::before{right:0}

/* Accented eyebrows carry the navigational pip */
.eyebrow--accent::before{content:""; display:inline-block; width:5px; height:5px;
  background:var(--verdigris); transform:rotate(45deg); margin-right:10px; vertical-align:2px}

/* Story prose opens with a drop cap — the annual-letter voice */
.prose--drop > p:first-of-type::first-letter{
  font-family:var(--display); font-weight:400; font-size:3.35em; line-height:.8;
  float:left; padding:5px 10px 0 0; color:var(--verdigris-deep)}

/* Pullquotes carry a gold-leaf mark */
.pullquote{position:relative; padding-top:40px}
.pullquote::before{content:"\201C"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-size:88px; line-height:1; color:var(--gold-leaf);
  opacity:.38; pointer-events:none}

/* More air between movements on wide screens */
@media(min-width:900px){.section{padding:var(--s-10) 0}}

/* FAQ warms on approach */
.faq summary{transition:color var(--dur) var(--ease)}
.faq summary:hover{color:var(--verdigris-deep)}

/* Gallery photography moves statelier */
.gallery img{transition:transform 900ms var(--ease), filter 900ms var(--ease)}

@media(prefers-reduced-motion:reduce){
  .card::before{transition:none}
}

/* Hero picture wrapper + quiet Give path (finishing pass) */
.hero-sky picture{display:block; width:100%; height:100%}
.hero-give{display:inline-block; margin-top:var(--s-4); font-family:var(--sans); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-onDark-2);
  border-bottom:1px solid rgba(243,237,229,.28); padding-bottom:3px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.hero-give:hover{color:var(--ivory); border-bottom-color:var(--verdigris-soft)}

/* Short viewports: the hero packs tighter and the scroll cue steps aside */
@media(max-height:700px){
  .hero--cinematic{padding-bottom:56px}
  .hero--cinematic .display{font-size:clamp(44px,6.5vw,64px)}
  .hero--cinematic .lede{font-size:clamp(17px,2.4vw,21px)}
  .hero--cinematic .actions{margin-top:var(--s-5)}
  .hero-give{margin-top:var(--s-3)}
  .hero-cue{display:none}
}

/* The painting keeps its doorway in frame at every crop */
.hero-painting{object-position:68% center}

/* Wide screens: the word takes the open water on the left; the door answers on the right */
@media(min-width:960px){
  .hero--cinematic{align-items:flex-start; text-align:left}
  .hero-content{margin:0 0 0 max(var(--s-6), calc((100vw - 1120px)/2)); max-width:560px}
  .hero--cinematic .lede{margin-left:0}
  .hero--cinematic .actions{justify-content:flex-start}
  .hero-veil{background:linear-gradient(to top, rgba(8,19,29,.85) 0%, rgba(8,19,29,.55) 30%, rgba(8,19,29,.18) 60%, rgba(8,19,29,0) 100%)}
  .hero-cue{left:50%}
}

/* ============================================================
   The documented record — hand-drawn map + register (The Need)
   The map is our own SVG, not a mapping library. Editorial, not
   dashboard: no frames, no scrollbars, no embedded-widget look.
   ============================================================ */
.record__intro{max-width:52ch}

/* Map left, figures right. Asymmetric on purpose. */
.record__field{
  display:grid; grid-template-columns:minmax(0,auto) minmax(220px,1fr);
  gap:var(--s-9); align-items:center; margin:var(--s-8) 0 0;
}
@media(max-width:860px){
  .record__field{grid-template-columns:1fr; gap:var(--s-6)}
}

#record-map{position:relative}
.pkmap{width:100%; max-width:440px; height:auto; display:block; overflow:visible}
.pkmap__country{
  fill:rgba(243,237,229,.045);
  stroke:var(--verdigris-soft); stroke-width:1.1; stroke-opacity:.5;
  stroke-linejoin:round;
}
.pkmap__pin{cursor:pointer; outline:none}
.pkmap__hit{fill:transparent}
.pkmap__halo{
  fill:none; stroke:var(--verdigris-soft); stroke-width:1;
  opacity:0; transform-box:fill-box; transform-origin:center;
  transform:scale(.55); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.pkmap__dot{
  stroke-width:2; transition:r var(--dur) var(--ease);
}
.pkmap__pin--fatal .pkmap__dot{fill:#6E1F23; stroke:#B8474B}
.pkmap__pin--property .pkmap__dot{fill:#8A6838; stroke:var(--gold-leaf)}
.pkmap__label{
  font-family:var(--sans); font-size:13px; fill:var(--fg-onDark-3);
  opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none;
}
.pkmap__pin:hover .pkmap__halo,
.pkmap__pin:focus-visible .pkmap__halo,
.pkmap__pin.is-active .pkmap__halo{opacity:.85; transform:scale(1)}
.pkmap__pin:hover .pkmap__label,
.pkmap__pin:focus-visible .pkmap__label,
.pkmap__pin.is-active .pkmap__label{opacity:1; fill:var(--ivory)}
.pkmap__pin.is-active .pkmap__dot{r:9}
@media(prefers-reduced-motion:reduce){
  .pkmap__halo,.pkmap__label,.pkmap__dot{transition:none}
}

/* Figures: a line of type, not a row of cards. */
.record__figures{display:flex; flex-direction:column; gap:var(--s-6)}
@media(max-width:860px){.record__figures{flex-direction:row; flex-wrap:wrap; gap:var(--s-6) var(--s-7)}}
.record-figure{display:flex; align-items:baseline; gap:var(--s-3)}
.record-figure__n{
  font-family:var(--display); font-weight:300; font-size:clamp(38px,4.4vw,54px);
  line-height:.9; color:var(--verdigris-soft); margin:0;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;
}
.record-figure__label{
  font-size:12px; line-height:1.5; color:var(--fg-onDark-2); margin:0; max-width:20ch;
}

.record__mapnote{
  font-size:11px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase;
  color:var(--fg-onDark-3); margin:var(--s-5) 0 0;
}
.record__stamp{
  font-size:12px; line-height:1.65; color:var(--fg-onDark-3);
  max-width:70ch; margin:var(--s-7) 0 0; padding-top:var(--s-5);
  border-top:1px solid var(--line-onDark);
}

/* The register. Hairline rules, no boxes, no scrollbar. */
.record__register{
  margin:var(--s-8) 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-8);
  border-top:1px solid var(--line-onDark-s);
}
@media(max-width:860px){.record__register{grid-template-columns:1fr}}

.record-entry{
  padding:var(--s-6) 0 var(--s-6) var(--s-5);
  border-bottom:1px solid var(--line-onDark);
  border-left:1px solid transparent;
  cursor:pointer; outline:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.record-entry:hover{background:rgba(243,237,229,.035); border-left-color:var(--line-onDark-s)}
.record-entry:focus-visible{border-left-color:var(--verdigris-soft); background:rgba(243,237,229,.05)}
.record-entry.is-active{border-left-color:var(--verdigris-soft); background:rgba(58,112,106,.10)}

.record-entry__year{
  display:flex; align-items:center; gap:var(--s-3);
  font-size:11px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase;
  color:var(--verdigris-soft); margin:0 0 var(--s-3);
}
.record-entry__dot{width:6px; height:6px; border-radius:50%; flex:none}
.record-entry__dot--fatal{background:#B8474B}
.record-entry__dot--property{background:var(--gold-leaf)}
.record-entry__toll{color:var(--fg-onDark-3); letter-spacing:.06em}

.record-entry__place{
  font-family:var(--display); font-size:clamp(21px,2.2vw,26px); line-height:1.15;
  color:var(--ivory); margin:0 0 var(--s-2);
}
.record-entry__where{font-size:12px; color:var(--fg-onDark-3); margin:0 0 var(--s-4)}
.record-entry__tag{
  display:inline-block; margin-left:var(--s-3); font-family:var(--sans); font-size:10px;
  letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--verdigris-soft);
  border:1px solid var(--verdigris); padding:2px 6px; vertical-align:middle;
}
.record-entry__summary{
  font-size:14px; line-height:1.7; color:var(--fg-onDark-2); margin:0 0 var(--s-4); max-width:52ch;
}
.record-entry__src{font-size:12px; line-height:1.7; color:var(--fg-onDark-3); margin:0; max-width:52ch}
.record-entry__src .textlink{color:var(--verdigris-soft)}
.record-entry__src .textlink:hover{color:var(--ivory)}