/* ─────────────────────────────────────────────────────────────
   YFIRE.org V2 — skeleton
   Palette D-002 · Accents D-026 · Typography D-003
   Governed by yfireim/yfire-live-broadcast docs/DECISIONS.md
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#08090B;              /* Near Black   D-002 */
  --fire:#F25C05;             /* Fire Orange  D-002 */
  --gold:#D99B3D;             /* Warm Gold    D-002 */
  --warm:#F4F4F2;             /* Warm White   D-002 — replaces pure #fff */
  --body:rgba(244,244,242,.68);
  --mute:rgba(244,244,242,.52);
  --line:rgba(244,244,242,.12);
  /* Expression accents — identity signals only, never section grounds (D-026) */
  --a-broadcast:#8652E0; --a-watch:#58AEE4; --a-teal:#15C1BB;
  --a-worship:#C63ADF;   --a-mission:#5371EA;
  --pace:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--warm);font-family:'Inter',system-ui,sans-serif;
  font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(1180px,92vw);margin:0 auto}
section{position:relative;padding:calc(120px * var(--pace)) 0}
@media(max-width:760px){section{padding:calc(78px * var(--pace)) 0}}

/* ── type ─────────────────────────────────────────────── */
.dsp{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;line-height:.94}
h1.dsp{font-size:clamp(44px,8.2vw,104px)}
h2.dsp{font-size:clamp(32px,5vw,62px)}
h3.dsp{font-size:clamp(22px,2.6vw,32px)}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:13px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--body);font-size:clamp(16px,1.5vw,19px);max-width:62ch;text-wrap:pretty}
.small{font-size:14px;color:var(--mute)}
.fire{color:var(--fire)}
.gold{color:var(--gold)}

/* ── buttons ──────────────────────────────────────────── */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;padding:14px 30px;border-radius:2px;line-height:1.3;
  text-align:center;max-width:100%;border:1px solid transparent;
  transition:.28s cubic-bezier(.2,.7,.2,1);cursor:pointer}
.btn-fire{background:var(--fire);color:var(--ink);font-weight:700}
.btn-fire:hover{filter:brightness(1.12);box-shadow:0 0 30px rgba(242,92,5,.34)}
.btn-line{border-color:var(--line);color:var(--warm)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}

/* ── reveal (contract shared with yfire-shared.js: .rv + data-d → .in) ── */
.rv{opacity:0;transform:translateY(20px);filter:blur(8px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}

/* ── nav ──────────────────────────────────────────────── */
nav.yf{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:10px clamp(18px,4vw,44px);
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
nav.yf.scrolled{background:rgba(8,9,11,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center}
.brand img{height:72px;width:auto}
.brand-stack{display:none}
@media(max-width:700px){
  .brand-lockup{display:none}
  .brand-stack{display:block}
  .brand-stack img{height:52px;width:auto;display:block}
  .brand-strap{display:block;margin-top:4px;font-family:'Barlow Condensed',sans-serif;
    font-weight:500;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--gold);white-space:nowrap;line-height:1}
  .brand-strap i{font-style:normal;color:var(--fire)}
}
.nav-links{display:flex;gap:28px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;font-weight:500;color:var(--body)}
.nav-links a:hover,.nav-links a.on{color:var(--gold)}
.os-btn{border:1px solid var(--gold);color:var(--gold);padding:9px 20px;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;border-radius:2px;transition:.28s}
.os-btn:hover{background:var(--gold);color:var(--ink)}
@media(max-width:900px){.nav-links,.os-btn{display:none}}

/* ── hero — built to the approved mock-up ─────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px 0 96px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% center}
/* left scrim: the declaration sits on real darkness, never on the crowd */
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(96deg, var(--ink) 0%, var(--ink) 26%, rgba(8,9,11,.86) 42%,
                    rgba(8,9,11,.45) 56%, rgba(8,9,11,.08) 72%, transparent 88%),
    linear-gradient(to bottom, rgba(8,9,11,.55) 0%, transparent 22%,
                    transparent 62%, var(--ink) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:56%}
.hero h1{font-size:clamp(44px,7.4vw,104px);line-height:.86;margin:0 0 26px;
  letter-spacing:-.005em}
.hero h1 .w{color:var(--warm);display:block}
.hero h1 .f{color:var(--fire);display:block}
.hero .eyebrow{margin-bottom:14px}
.hero .lede{font-size:clamp(15px,1.35vw,17.5px);max-width:46ch;color:var(--body)}
.hero .btns{margin-top:32px}
.hero .btn{display:inline-flex;align-items:center;gap:14px}
.hero .btn::after{content:'→';font-size:16px;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.hero .btn:hover::after{transform:translateX(4px)}

/* the journey progression along the bottom edge — the first scroll reads
   as continuation, not as a new section beginning */
.hero-journey{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(18px,4vw,44px) 30px}
.hj{display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:1180px;margin:0 auto}
.hj span{font-family:'Barlow Condensed',sans-serif;font-weight:500;
  font-size:clamp(10px,1vw,13.5px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;opacity:.9}
.hj i{flex:1;height:1px;background:linear-gradient(90deg,
  rgba(217,155,61,0), rgba(217,155,61,.42), rgba(217,155,61,0))}
@media(max-width:1000px){
  .hero-copy{max-width:100%}
  .hero-bg img{object-position:center 30%}
  .hero-bg::after{background:
    linear-gradient(to bottom, rgba(8,9,11,.86) 0%, rgba(8,9,11,.6) 34%,
                    rgba(8,9,11,.72) 62%, var(--ink) 100%)}
  .hj{justify-content:center;flex-wrap:wrap;gap:6px 14px}
  .hj i{display:none}
  .hj span{font-size:10.5px;letter-spacing:.22em}
}

/* ── who we are ───────────────────────────────────────── */
.who{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,6vw,90px);align-items:start}
.anchors{display:flex;flex-direction:column;gap:30px;margin-top:8px}
.anchor{border-top:1px solid var(--line);padding-top:20px;max-width:44ch}
/* staggered, so the right column reads as a descent rather than a row */
.anchor:nth-child(2){margin-left:clamp(0px,3vw,44px)}
.anchor:nth-child(3){margin-left:clamp(0px,6vw,88px)}
@media(max-width:900px){
  .who{grid-template-columns:1fr;gap:34px}
  .anchor:nth-child(2),.anchor:nth-child(3){margin-left:0}
}
.anchor h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.anchor p{color:var(--body);font-size:15.5px}
.values{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}
.value{border:1px solid var(--line);border-radius:2px;padding:12px 22px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-size:14px;font-weight:500;transition:.3s}
.value:hover{border-color:var(--fire);color:var(--fire)}
@media(max-width:800px){.anchors{grid-template-columns:1fr;gap:26px}}

/* ── movement journey ─────────────────────────────────── */
/* the journey is one continuous move across the viewport, not five cells */
.journey{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(48px,7vw,86px);
  position:relative;padding-top:34px}
.journey::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(242,92,5,0),rgba(242,92,5,.5) 12%,
    rgba(217,155,61,.5) 88%,rgba(217,155,61,0))}
.stage{position:relative;padding:0 20px 0 0}
.stage::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--fire);transform:scale(0);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 14px rgba(242,92,5,.65)}
.stage:nth-child(n+4)::before{background:var(--gold);box-shadow:0 0 14px rgba(217,155,61,.6)}
.stage.in::before{transform:scale(1)}
.stage .no{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.26em;
  color:var(--mute);margin-bottom:12px}
.stage h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(17px,1.7vw,23px);letter-spacing:.08em;text-transform:uppercase}
.stage p{display:none}
@media(max-width:900px){.journey{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.journey{grid-template-columns:1fr}}

/* ── experience ───────────────────────────────────────── */
.exp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:54px}
.ecard{border:1px solid var(--line);border-radius:3px;padding:28px 24px;
  background:linear-gradient(170deg,rgba(244,244,242,.035),transparent);transition:.35s cubic-bezier(.2,.7,.2,1)}
.ecard:hover{border-color:var(--gold);transform:translateY(-4px)}
.ecard .k{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.ecard h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:21px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ecard p{font-size:14.5px;color:var(--body)}
@media(max-width:1000px){.exp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.exp{grid-template-columns:1fr}}

/* ── seven families — compact grid (ChatGPT ruling: option A) ────────
   Tiles carry the identity as type until the transparent family lockups
   are commissioned. Do NOT reintroduce the cinematic portrait composites
   here — they are page-header artwork for each family destination.
   ASSET RULE: where a governed YF-ID asset exists for an identity, use it
   rather than reconstructing that identity in CSS/HTML. ───────────────── */
.fams{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.famart{margin:-24px -22px 18px;overflow:hidden;background:var(--ink);
  border-bottom:1px solid var(--line)}
/* the art is landscape now — show it whole rather than cropping the tagline off */
.famart img{width:100%;height:auto;display:block;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.fam:hover .famart img{transform:scale(1.035)}
.fam{--acc:var(--gold);position:relative;display:block;border:1px solid var(--line);
  border-radius:3px;padding:24px 22px 22px;overflow:hidden;
  transition:.38s cubic-bezier(.2,.7,.2,1)}
.fam::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--acc);opacity:.5;transition:opacity .4s}
.fam:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent);transform:translateY(-3px)}
.fam:hover::before{opacity:1}
.fam .nm{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:21px;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.05;margin-bottom:7px}
.fam .sig{color:var(--acc);font-size:13.5px;font-weight:400;line-height:1.45}
.fam .seg{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--mute);line-height:1.5}
.fam .seg b{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a-watch);font-size:12.5px}
a.fam::after{content:'→';position:absolute;right:18px;bottom:16px;color:var(--acc);
  opacity:.6;transition:transform .35s,opacity .35s;font-size:15px}
a.fam:hover::after{transform:translateX(4px);opacity:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:1040px){.fams{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fams{grid-template-columns:1fr}}

/* ── come closer — the second photographic peak ───────────────────────
   ChatGPT: the entry points should float alongside the imagery rather
   than sit in identical cards. The plate holds usable darkness on the
   left third, so the heading lands on real shadow, never on the group. */
#comecloser,#mission{padding-top:0}
#mission .cc-band{margin-bottom:0}
#mission .cc-copy{padding-bottom:clamp(46px,6vw,74px)}
.cc-band{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;margin-bottom:clamp(28px,4vw,52px)}
.cc-band picture,.cc-band img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% center;z-index:-2}
.cc-band::after{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(92deg, var(--ink) 0%, rgba(8,9,11,.9) 24%, rgba(8,9,11,.4) 46%,
                    rgba(8,9,11,.05) 66%, transparent 82%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 26%, transparent 54%, var(--ink) 100%)}
.cc-copy{position:relative;padding:clamp(60px,9vw,110px) 0 clamp(34px,5vw,56px);max-width:52%}
@media(max-width:1000px){
  .cc-copy{max-width:100%}
  .cc-band{min-height:min(86vh,640px)}
  .cc-band img{object-position:center 28%}
  .cc-band::after{background:linear-gradient(to bottom,
    rgba(8,9,11,.55) 0%, rgba(8,9,11,.35) 30%, rgba(8,9,11,.9) 72%, var(--ink) 100%)}
}
.eng{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.ecard{display:block;border:1px solid var(--line);border-radius:3px;padding:28px 24px;
  background:linear-gradient(170deg,rgba(244,244,242,.035),transparent);
  transition:.36s cubic-bezier(.2,.7,.2,1)}
.ecard:hover{border-color:var(--gold);transform:translateY(-4px)}
.ecard .k{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fire);margin-bottom:14px}
.ecard h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:22px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ecard p{font-size:14.5px;color:var(--body)}
.archive{margin-top:22px;font-size:14px;color:var(--mute)}
.archive a{color:var(--body);border-bottom:1px solid var(--line)}
.archive a:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:900px){.eng{grid-template-columns:1fr}}

/* ── final invitation + footer ────────────────────────── */
.invite{text-align:center;padding-bottom:40px}
/* the page narrows and quiets toward the end — light, then nothing else */
.invite .wrap{max-width:min(880px,92vw)}
.resolve h2 span{opacity:0;transform:translateY(14px);
  transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1)}
.resolve h2.in span{opacity:1;transform:none}
.resolve h2.in span:nth-child(2){transition-delay:.13s}
.resolve h2.in span:nth-child(3){transition-delay:.26s}
.resolve h2.in span:nth-child(4){transition-delay:.42s}
@media(prefers-reduced-motion:reduce){
  .resolve h2 span{opacity:1;transform:none;transition:none}
}
.invite .lede{margin:22px auto 0}
.invite .btns{justify-content:center}
.resolve{text-align:center;border-top:1px solid var(--line)}
.resolve h2{line-height:1.06}
.resolve h2 span{display:block}
.resolve h2 .last{color:var(--fire)}
footer{border-top:1px solid var(--line);padding:40px 0;text-align:center}
footer .small{letter-spacing:.06em}
footer a:hover{color:var(--gold)}

/* ── atmosphere ───────────────────────────────────────────────────────
   ChatGPT's direction: the ground should very rarely be perfectly flat —
   the page is a dark physical space, not a stack of black rectangles.
   Two devices, both cheap: a fixed fine-grain overlay, and a soft warm
   falloff placed differently in each section so no two read the same. */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::after{opacity:.03}}

section{isolation:isolate}
section::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at var(--gx,20%) var(--gy,0%),
    rgba(242,92,5,.055), rgba(217,155,61,.022) 42%, transparent 72%)}
#whoweare{--gx:88%;--gy:12%}
#movement{--gx:50%;--gy:110%}
#families{--gx:12%;--gy:0%}
#comecloser{--gx:82%;--gy:96%}
#mission{--gx:24%;--gy:50%}
.invite{--gx:50%;--gy:8%}

/* ── limelight + mobile nav — styles for the components yfire-shared.js injects ── */
.nav-links{position:relative}
.limelight{position:absolute;bottom:-9px;width:26px;height:2px;border-radius:2px;
  background:var(--gold);box-shadow:0 0 14px var(--gold);pointer-events:none;
  left:-999px;opacity:0;transition:left .42s cubic-bezier(.2,.7,.2,1),opacity .3s}
.limelight.ready{opacity:.9}
.nav-burger{display:none;position:relative;z-index:2;width:42px;height:42px;flex:none;
  border:1px solid var(--line);border-radius:3px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;color:var(--gold);transition:border-color .25s}
.nav-burger:hover{border-color:var(--gold)}
.nav-burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:20px}
.nav-burger span:nth-child(3){top:26px}
@media(max-width:900px){.nav-burger{display:flex}}
.nav-overlay{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:88px 24px 40px;
  background:var(--ink);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.nav-overlay.open{opacity:1;visibility:visible}
.nav-overlay a{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(28px,9vw,44px);letter-spacing:.1em;text-transform:uppercase;color:var(--warm);
  padding:9px 0;opacity:0;transform:translateY(16px);filter:blur(8px);
  transition:opacity .5s,transform .5s,filter .5s,color .2s}
.nav-overlay a:hover,.nav-overlay a.on{color:var(--gold)}
.nav-overlay.open a{opacity:1;transform:none;filter:blur(0)}
.nav-ovx{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--gold);cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;transition:.2s}
.nav-ovx:hover{border-color:var(--gold)}
body.nav-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .nav-overlay,.nav-overlay a{transition:opacity .2s,visibility .2s}
  .nav-overlay a{transform:none;filter:none;transition-delay:0s !important}
}

.fireline{margin-top:44px;font-family:'Barlow Condensed',sans-serif;font-weight:500;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--body)}
.fireline i{color:var(--fire);font-style:normal;margin:0 6px}
.invite .resolve{margin-top:clamp(70px,9vw,120px);padding-top:clamp(60px,8vw,100px)}

/* preview chip — delete at cutover */
.pv{position:fixed;left:14px;bottom:14px;z-index:90;font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  background:var(--gold);padding:6px 12px;border-radius:2px}

/* ─────────────────────────────────────────────────────────────
   V2 page components — About, Conference, Give, 404
   ───────────────────────────────────────────────────────────── */
.wrap.narrow{width:min(820px,92vw)}
.hero-short{min-height:min(68vh,620px);padding:150px 0 90px}
.hero-short .hero-bg img{object-position:70% 40%}
.hero-short .hero-bg::after{background:
  linear-gradient(96deg,var(--ink) 0%,rgba(8,9,11,.88) 34%,rgba(8,9,11,.45) 58%,transparent 86%),
  linear-gradient(to bottom,rgba(8,9,11,.6) 0%,transparent 30%,var(--ink) 100%)}
.hero-short h1{font-size:clamp(36px,5.6vw,74px)}

/* identity trio — plates carry atmosphere, the words stay live HTML.
   Replaces the YF-040/041/042 panels, which had their asset-register IDs
   ("YF-040", "MASTER IDENTITY PANEL") burned into the artwork and duplicated
   their own caption underneath. */
.idgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.idcard{position:relative;margin:0;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;isolation:isolate;min-height:clamp(340px,32vw,420px);display:flex;
  align-items:flex-end;transition:.42s cubic-bezier(.2,.7,.2,1)}
.idcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.idplate{position:absolute;inset:0;z-index:-2}
.idplate img{width:100%;height:100%;object-fit:cover;object-position:center 35%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.idcard:hover .idplate img{transform:scale(1.04)}
.idcard::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(8,9,11,.15) 0%,rgba(8,9,11,.55) 42%,
    rgba(8,9,11,.93) 74%,var(--ink) 100%)}
.idcopy{position:relative;padding:26px 24px 26px}
.idcopy h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(21px,2.3vw,27px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.idcopy p{color:var(--body);font-size:14.5px;line-height:1.65}
@media(max-width:900px){.idgrid{grid-template-columns:1fr}
  .idcard{min-height:300px}}

/* FIRE culture — same plate-and-live-type pattern as the identity trio.
   Replaces the crest panels, which baked their name and their meaning line
   into the artwork and then repeated both in the caption underneath. */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}

/* ── the movement journey — five stages, seen together ────────────────
   One mountain across five plates: night at the foot to full light at the
   summit. Shown as a single strip so the whole ascent is visible at once,
   with a hairline running through it so the five read as one climb rather
   than five pictures. */
.ascent{margin-top:clamp(38px,5vw,64px)}
.ascent-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px);
  position:relative}
.ascent-row::before{content:'';position:absolute;left:0;right:0;
  top:calc(clamp(150px,17vw,230px) + 26px);height:1px;
  background:linear-gradient(90deg,rgba(242,92,5,.5),rgba(217,155,61,.5));opacity:.5}
.astage{position:relative}
/* width follows the grid column; height is fixed so the five align exactly */
.aplate{width:100%;height:clamp(150px,17vw,230px);overflow:hidden;
  border:1px solid var(--line);border-radius:3px;background:var(--ink)}
.aplate img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.astage:hover .aplate img{transform:scale(1.06)}
.astage:hover .aplate{border-color:var(--gold)}
.ano{display:block;margin:18px 0 6px;font-family:'Barlow Condensed',sans-serif;
  font-size:12px;letter-spacing:.26em;color:var(--fire)}
.astage h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(16px,1.5vw,21px);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:7px}
.astage p{color:var(--body);font-size:13.5px;line-height:1.55}
@media(max-width:1000px){
  .ascent-row{grid-template-columns:repeat(2,1fr);gap:20px}
  .ascent-row::before{display:none}
}
@media(max-width:560px){.ascent-row{grid-template-columns:1fr}}

/* expressions on About reuse .fam but carry a description */
.fdesc{margin-top:10px;color:var(--body);font-size:14px;line-height:1.55}
#expressions .fams{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){#expressions .fams{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#expressions .fams{grid-template-columns:1fr}}

/* founders */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,70px);align-items:center}
.storyfig{margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.storyfig img{width:100%;height:auto;display:block}
.storyfig figcaption{padding:16px 20px;font-size:13px;letter-spacing:.06em;color:var(--mute)}
@media(max-width:900px){.story{grid-template-columns:1fr}}

/* connect footer band */
.connect{padding:clamp(70px,9vw,110px) 0 clamp(50px,6vw,70px);border-top:1px solid var(--line)}
.conn{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.cbox h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.cbox p{color:var(--body);font-size:14.5px;line-height:1.75}
.cbox a{border-bottom:1px solid var(--line)}
.cbox a:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:900px){.conn{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.conn{grid-template-columns:1fr}}
.connect + .resolve{border-top:0}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.founders .storyfig{transition:.4s cubic-bezier(.2,.7,.2,1)}
.founders .storyfig:hover{border-color:var(--gold);transform:translateY(-4px)}
.founders figcaption{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.founders figcaption b{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--warm)}
.founders figcaption span{font-size:12.5px;letter-spacing:.08em;color:var(--mute)}

/* conference editions */
.edition{border:1px solid var(--gold-dim,rgba(217,155,61,.3));border-left:2px solid var(--gold);
  border-radius:3px;padding:clamp(26px,4vw,44px);
  background:linear-gradient(150deg,rgba(217,155,61,.07),transparent 62%)}
.etheme{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(18px,2.2vw,26px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.edate{font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}

/* give: carry + ways */
.carry{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ccard{border:1px solid var(--line);border-radius:3px;padding:24px 20px;transition:.35s}
.ccard:hover{border-color:var(--fire);transform:translateY(-3px)}
.ccard h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:18px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ccard p{color:var(--body);font-size:14px}
@media(max-width:1000px){.carry{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.carry{grid-template-columns:1fr}}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wcard{border:1px solid var(--line);border-radius:3px;padding:30px 26px;display:flex;
  flex-direction:column;gap:12px;transition:.35s}
.wcard:hover{border-color:var(--gold)}
.wcard.wfeature{border-color:rgba(242,92,5,.5);
  background:linear-gradient(160deg,rgba(242,92,5,.08),transparent 60%)}
.wcard h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:23px;
  letter-spacing:.08em;text-transform:uppercase}
.wcard p{color:var(--body);font-size:14.5px;flex:1}
.wcard .btn{align-self:flex-start;margin-top:6px}
@media(max-width:900px){.ways{grid-template-columns:1fr}}
.taxnote{margin-top:38px;padding:20px 24px;border:1px solid var(--line);border-radius:3px;
  color:var(--mute);font-size:13.5px;line-height:1.7}
.taxnote span{display:block;margin-top:8px;letter-spacing:.1em;font-size:12.5px}

/* 404 */
.notfound{min-height:78svh;display:flex;align-items:center;padding-top:130px}
.notfound h1{font-size:clamp(34px,5.4vw,68px)}

/* ─────────────────────────────────────────────────────────────
   Homepage — the King, the Kingdom, sonship, serving
   Home proclaims; About explains. No section here duplicates About.
   ───────────────────────────────────────────────────────────── */
.pointer{margin:clamp(46px,7vw,84px) auto 0;max-width:min(900px,92vw);text-align:center;
  padding:clamp(34px,5vw,58px) clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:4px;
  background:radial-gradient(80% 120% at 50% 0%,rgba(242,92,5,.09),transparent 68%)}
.pointer p{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(22px,3.1vw,40px);line-height:1.06;letter-spacing:.02em;text-transform:uppercase;
  color:var(--warm)}
.pointer .pfire{color:var(--fire);margin-top:16px}

.changes{list-style:none;margin:38px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.changes li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--body);
  font-size:clamp(16px,1.7vw,20px)}
.changes li:last-child{border-bottom:0}
.changes b{color:var(--warm);font-weight:500}

.kresolve{margin-top:clamp(38px,5vw,64px);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(20px,2.6vw,34px);line-height:1.14;letter-spacing:.02em;text-transform:uppercase;
  color:var(--warm)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.step{border-top:1px solid var(--line);padding-top:20px}
.step .sn{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.26em;color:var(--fire)}
.step h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:22px;letter-spacing:.12em;
  text-transform:uppercase;margin:10px 0 8px}
.step p{color:var(--body);font-size:14.5px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

.notjoin{margin-top:clamp(40px,5vw,66px);padding:clamp(28px,4vw,46px);border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:4px;
  background:linear-gradient(150deg,rgba(217,155,61,.05),transparent 62%)}
.notjoin h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(20px,2.4vw,30px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.notjoin p{color:var(--body);font-size:15.5px;max-width:62ch}
.notjoin p + p{margin-top:14px}
.notjoin .scripture{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-style:italic;color:var(--gold)}
.notjoin .scripture .ref{display:block;margin-top:8px;font-style:normal;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.trio .tcard{border-top:1px solid var(--line);padding-top:22px}
.trio h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:20px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.trio p{color:var(--body);font-size:14.5px}
@media(max-width:860px){.trio{grid-template-columns:1fr}}

.platform{margin-top:clamp(38px,5vw,60px);padding:clamp(26px,4vw,42px);border:1px solid var(--line);
  border-radius:4px}
.platform h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(19px,2.2vw,28px);letter-spacing:.06em;text-transform:uppercase;color:var(--fire);
  margin-bottom:12px}
.platform p{color:var(--body);font-size:15.5px;max-width:66ch}

.cascade{margin-top:22px;font-family:'Barlow Condensed',sans-serif;font-weight:500;
  font-size:clamp(15px,1.7vw,20px);letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  color:var(--body)}
.onemission{margin-top:26px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.invite .resolve h2 .last{color:var(--fire)}

/* ── About: the generational history ──────────────────────────────────
   Three chapters, not a milestone timeline — a dated corporate strip
   would reduce three generations of ministry to company milestones. */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);margin-top:52px}
.chapter{border-top:1px solid var(--line);padding-top:24px}
.chapter .cno{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--fire);margin-bottom:12px}
.chapter h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(21px,2.3vw,28px);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.chapter .cwho{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px}
.chapter p{color:var(--body);font-size:14.5px;line-height:1.7}
.chapter p + p{margin-top:12px}
.chapter .cline{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--warm);font-style:italic}
.facts{list-style:none;margin:18px 0 0;padding:0}
.facts li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--body);font-size:14px}
.facts li:last-child{border-bottom:0}
.facts b{font-family:'Barlow Condensed',sans-serif;letter-spacing:.14em;color:var(--gold);
  margin-right:10px}
@media(max-width:960px){.chapters{grid-template-columns:1fr}}

.hidden-years{margin-top:clamp(44px,6vw,76px);padding:clamp(32px,5vw,58px);text-align:center;
  border:1px solid var(--line);border-radius:4px;
  background:radial-gradient(70% 120% at 50% 100%,rgba(217,155,61,.07),transparent 70%)}
.hidden-years h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(22px,3vw,38px);letter-spacing:.04em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px}
.hidden-years p{color:var(--body);font-size:15.5px;max-width:60ch;margin:0 auto}

.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.ms{border-top:1px solid var(--line);padding-top:20px}
.ms b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ms p{color:var(--body);font-size:14px}
@media(max-width:1000px){.milestones{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.milestones{grid-template-columns:1fr}}
.pointer .psub{margin-top:20px;font-family:'Inter',sans-serif;font-weight:300;text-transform:none;
  letter-spacing:0;font-size:clamp(14.5px,1.4vw,17px);line-height:1.7;color:var(--body);
  max-width:52ch;margin-left:auto;margin-right:auto}
.beginshere{margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line)}
.beginshere h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:26px}
.beginshere .trio{margin-top:0}
.ending{position:relative;z-index:2;text-align:center;padding-top:clamp(56px,8vw,96px)}
.ending .btns{justify-content:center}
.govern{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(22px,3.2vw,42px);line-height:1.16;letter-spacing:.02em;text-transform:uppercase;
  color:var(--warm)}

/* ── plated sections — artwork behind live type ───────────────────────
   The plates are clean (no baked typography), so every word stays HTML:
   it reflows, scales, translates and is readable by search and screen
   readers. A mock-up with words burned in could not do any of that. */
.plated{position:relative;isolation:isolate;overflow:hidden}
.plated .plate{position:absolute;inset:0;z-index:-2}
.plated .plate img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.plated::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,var(--ink) 0%,rgba(8,9,11,.94) 30%,rgba(8,9,11,.6) 52%,
                    rgba(8,9,11,.12) 74%,transparent 90%),
    linear-gradient(to bottom,var(--ink) 0%,transparent 18%,transparent 74%,var(--ink) 100%)}
/* keep the copy inside the page gutter and on the dark half, never on the stair */
#king.plated .wrap.narrow{width:min(760px,92vw);margin-left:max(calc((100vw - 1180px)/2),4vw);
  margin-right:auto}
#king.plated .pointer{margin-left:max(calc((100vw - 1180px)/2),4vw);margin-right:auto;
  max-width:min(700px,88vw);text-align:left;
  background:linear-gradient(100deg,rgba(8,9,11,.92),rgba(8,9,11,.72) 70%,transparent),
    radial-gradient(80% 120% at 0% 0%,rgba(242,92,5,.1),transparent 70%);
  backdrop-filter:blur(2px)}
#king.plated .pointer .psub{margin-left:0;margin-right:0}
#king.plated .btns{margin-left:max(calc((100vw - 1180px)/2),4vw);justify-content:flex-start}
@media(max-width:1000px){
  #king.plated .wrap.narrow,#king.plated .pointer,#king.plated .btns{
    margin-left:auto;margin-right:auto}
  #king.plated .pointer{text-align:center}
}
@media(max-width:1000px){
  .plated .plate img{object-position:center 30%}
  .plated::before{background:linear-gradient(to bottom,
    rgba(8,9,11,.92) 0%,rgba(8,9,11,.8) 40%,rgba(8,9,11,.92) 78%,var(--ink) 100%)}
}

/* the generational line of light, behind the three chapters */
.histband{margin:44px 0 -30px;position:relative}
.histband img{width:100%;height:auto;display:block;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
@media(max-width:960px){.histband{margin-bottom:8px}}

/* the master declaration used as a section headline (About / expressions) */
.dsp.declare{line-height:1.02;margin:16px 0 22px}
.dsp.declare span{display:block}
.dsp.declare .last{color:var(--fire)}

/* scripture block — the verse carries its translation, because the KJV
   rendering here is a deliberate choice made with the alternatives known */
.verse{margin:clamp(30px,4vw,46px) 0;padding:22px 0 22px 26px;
  border-left:2px solid var(--gold);font-family:'Inter',sans-serif;font-weight:300;
  font-style:italic;font-size:clamp(17px,2vw,23px);line-height:1.5;color:var(--warm)}
.verse cite{display:block;margin-top:14px;font-style:normal;font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.verse cite span{color:var(--mute);margin-left:8px}

/* ── meet yeshua ─────────────────────────────────────────────────── */
.wrap.narrow{width:min(820px,92vw)}
.pagetop{padding-top:clamp(140px,16vh,210px)}
.pagetop h1{font-size:clamp(38px,5.4vw,68px);line-height:.98}
.prayer{margin:30px 0 0;padding:clamp(28px,4vw,46px) clamp(24px,4vw,44px);
  border:1px solid var(--gold-dim,rgba(217,155,61,.34));border-left:3px solid var(--gold);
  border-radius:3px;background:linear-gradient(180deg,rgba(217,155,61,.07),rgba(217,155,61,.02))}
.prayer p{color:var(--warm);font-size:clamp(17px,1.7vw,21px);line-height:1.62;max-width:52ch}
.prayer p + p{margin-top:16px}
.prayer .amen{color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.06em;margin-top:22px}
.declare{margin-top:8px;padding:clamp(28px,4vw,46px);border:1px solid var(--line);border-radius:3px}
.declare p{color:var(--body);font-size:16px;max-width:60ch}
.declare p + p{margin-top:14px}
.declare .scripture{margin:20px 0;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-style:italic;color:var(--warm)}
.declare .scripture .ref{display:block;margin-top:8px;font-style:normal;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
#next .steps{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){
  .steps,#next .steps{grid-template-columns:1fr}
  .pagetop{padding-top:120px}
}

/* ── the five tribes ─────────────────────────────────────────────── */
.pull{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(26px,3.4vw,44px);line-height:1.06;letter-spacing:.01em;
  color:var(--warm);margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.tribes-wrap{padding-top:clamp(30px,5vw,60px)}
.tribe{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,62px);
  align-items:center;padding:clamp(38px,5vw,74px) 0;border-top:1px solid var(--line)}
.tribe:first-child{border-top:0}
.tribe-r .tribe-art{order:2}
.tribe-art{overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--ink)}
.tribe-art img{width:100%;height:auto;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tribe:hover .tribe-art img{transform:scale(1.03)}
.tnum{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fire)}
.tname{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(32px,4vw,54px);line-height:1;margin:12px 0 6px;color:var(--warm)}
.ttag{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.tlead{color:var(--warm);font-size:clamp(17px,1.6vw,20px);line-height:1.55;margin-bottom:16px}
.tribe-copy p{color:var(--body);font-size:15.5px;line-height:1.65;max-width:56ch}
.tribe-copy p + p{margin-top:13px}
@media(max-width:860px){
  .tribe{grid-template-columns:1fr;gap:22px}
  .tribe-r .tribe-art{order:0}
}
.tseal{font-size:12.5px;letter-spacing:.06em;color:var(--mute);margin:-12px 0 20px}
.tquote{margin:18px 0;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-style:italic;color:var(--warm);font-size:16.5px}
.tquote .ref{display:block;margin-top:8px;font-style:normal;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.rule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}
.rule-grid span{border:1px solid var(--line);border-radius:3px;padding:18px 10px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);transition:.3s}
.rule-grid span:hover{border-color:var(--gold);color:var(--warm)}
@media(max-width:640px){.rule-grid{grid-template-columns:repeat(2,1fr)}}

/* ── dawn walker ─────────────────────────────────────────────────── */
.dw{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.dwfig{margin:0 0 26px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ink)}
.dwfig img{width:100%;height:auto;display:block}
.dw p{color:var(--body);font-size:16px;line-height:1.68;max-width:62ch}
.dw p + p{margin-top:14px}
.dw em{color:var(--warm);font-style:italic}
.months{display:grid;gap:16px;margin-top:30px}
.mo{border:1px solid var(--line);border-radius:3px;padding:24px 26px}
.mo h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.04em;color:var(--gold);margin-bottom:14px}
.mo h4 span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-weight:500;margin-top:5px}
.mo ol{margin:0;padding-left:22px;color:var(--body);font-size:15px;line-height:1.6}
.mo li{margin-bottom:9px}
.mo li b{color:var(--warm)}
.repair{margin:24px 0 0;padding-left:22px;color:var(--body);font-size:16px;line-height:1.65}
.repair li{margin-bottom:12px}
.repair li b{color:var(--warm)}
#ninety,#repair,#mine{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.tlink{color:inherit;transition:color .3s}
.tlink:hover{color:var(--gold)}
.tmore{margin-top:22px}

/* ── tribes hero ─────────────────────────────────────────────────── */
.tribetop .tt-grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,70px);align-items:center}
.tt-art{margin:0}
.tt-art img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px}
.tt-art figcaption{margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-align:center}
@media(max-width:900px){
  .tribetop .tt-grid{grid-template-columns:1fr;gap:32px}
  .tt-art{max-width:420px;margin:0 auto}
}

/* ── dna page ────────────────────────────────────────────────────── */
.lesson{margin-top:18px;padding:16px 20px;border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(217,155,61,.09),transparent);
  color:var(--warm);font-size:17px;line-height:1.55;font-style:italic}
.cmp{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;border-collapse:collapse;min-width:520px}
.cmp th,.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--body);text-align:left;vertical-align:top}
.cmp thead th{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom-color:var(--gold-dim,rgba(217,155,61,.4))}
.cmp tbody td:first-child{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--mute);white-space:nowrap}
.cmp tr.tog td{color:var(--warm);border-bottom:0;padding-top:18px}
.cmp tr.tog td:first-child{color:var(--fire)}
#fire .months{grid-template-columns:repeat(2,1fr)}
#fire .mo p{color:var(--body);font-size:15px;line-height:1.6;margin:0}
@media(max-width:700px){#fire .months{grid-template-columns:1fr}}

/* ── the watch ───────────────────────────────────────────────────── */
.wsec{padding:clamp(46px,6vw,86px) 0;border-top:1px solid var(--line);position:relative}
.wsec p{color:var(--body);font-size:16px;line-height:1.7;max-width:62ch}
.wsec p + p{margin-top:15px}
.wsec em{color:var(--warm);font-style:italic}
.wsec strong{color:var(--warm)}
.bgsec{position:relative;isolation:isolate}
.whero{padding-top:clamp(150px,18vh,230px);padding-bottom:clamp(60px,8vh,110px);border-top:0}
.whero h1{font-size:clamp(40px,6vw,86px);line-height:.94}
}

.famlink{display:block;text-decoration:none}
.famlink:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.famgo{margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);transition:.3s}
.famlink:hover .famgo{color:var(--warm)}
.famlink:hover .famgo span{margin-left:5px}
.famgo span{display:inline-block;transition:margin .3s}

/* ── the watch: pacing refinements ───────────────────────────────── */
.q-tall{min-height:62vh;display:flex;align-items:center}
/* localised scrim behind the copy only, so the breakthrough survives */
.q-climax .wrap{position:relative;z-index:1}
/* governing self — copy right, the lamp left */
.q-right .wrap{margin-left:auto;margin-right:max(calc((100vw - 1180px)/2),4vw);
  width:min(560px,54vw)}
@media(max-width:900px){
  .q-tall{min-height:auto;display:block}
  .q-right .wrap{margin:0 auto;width:min(820px,92vw)}
}
.pullline{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:.01em;color:var(--warm);
  margin:34px 0 8px;padding-top:28px;border-top:1px solid var(--line);max-width:none}

/* ── background plates: ONE dimming mechanism, not two ────────────
   The image renders at full opacity; the scrim alone decides how much
   of it survives. Dimming in both places was leaving 3-8% visible. */
.bgsec{position:relative;isolation:isolate}
.bgsec::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--bg);background-size:cover;background-position:center;opacity:1}
.bgsec::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.80) 46%,rgba(8,9,11,.62) 100%)}
/* restrained — the image reads, the writing leads */
.q-low.bgsec::after{background:
  linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.84) 44%,rgba(8,9,11,.60) 100%)}
/* present — carries weight */
.q-high.bgsec::after{background:
  linear-gradient(90deg,rgba(8,9,11,.90) 0%,rgba(8,9,11,.70) 42%,rgba(8,9,11,.34) 100%)}
/* the climax — the page changes state here */
.q-climax.bgsec::after{background:
  radial-gradient(130% 100% at 20% 52%, rgba(8,9,11,.93) 0%, rgba(8,9,11,.78) 30%, rgba(8,9,11,.30) 62%, rgba(8,9,11,.06) 100%)}
.whero.bgsec::after{background:
  linear-gradient(90deg,rgba(8,9,11,.88) 0%,rgba(8,9,11,.62) 40%,rgba(8,9,11,.24) 100%)}
@media(max-width:900px){
  .bgsec::after,.q-low.bgsec::after{background:linear-gradient(180deg,rgba(8,9,11,.70) 0%,rgba(8,9,11,.86) 55%,rgba(8,9,11,.92) 100%)}
  .q-high.bgsec::after{background:linear-gradient(180deg,rgba(8,9,11,.58) 0%,rgba(8,9,11,.80) 55%,rgba(8,9,11,.88) 100%)}
  .q-climax.bgsec::after{background:linear-gradient(180deg,rgba(8,9,11,.40) 0%,rgba(8,9,11,.74) 50%,rgba(8,9,11,.88) 100%)}
  .whero.bgsec::after{background:linear-gradient(180deg,rgba(8,9,11,.52) 0%,rgba(8,9,11,.78) 60%,rgba(8,9,11,.90) 100%)}
}

/* ── the watch: website-native teaching models ───────────────────── */
.vmodel{margin:34px 0 8px;max-width:none}
.vrow{display:grid;gap:10px}
.vrow.three{grid-template-columns:repeat(3,1fr)}
.vrow.four{grid-template-columns:repeat(4,1fr)}
.vrow span{border:1px solid var(--line);border-radius:3px;padding:20px 8px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);background:rgba(8,9,11,.42);transition:.4s}
.vrow span:hover{border-color:var(--gold);color:var(--warm)}
.vresolve{margin-top:22px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(21px,2.5vw,32px);line-height:1.14;color:var(--warm);max-width:none}
.vcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vcol{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;
  padding:22px 22px;background:rgba(8,9,11,.46)}
.vcol h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.vcol p{color:var(--body);font-size:14.5px;margin:0;letter-spacing:.04em}
.vcol-cold{border-left-color:#4a5a6e}
.vcol-cold h4{color:#8fa3b8}
.vstages{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vstages li{position:relative;padding:15px 18px 15px 46px;border:1px solid var(--line);border-radius:3px;
  background:rgba(8,9,11,.42);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--warm);counter-increment:vs}
.vstages{counter-reset:vs}
.vstages li::before{content:counter(vs);position:absolute;left:18px;color:var(--gold);font-size:13px}
.vstages.fall li{color:var(--body)}
.vstages.fall li:last-child{color:var(--fire);border-color:rgba(242,92,5,.4)}
.vtri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vtri div{border:1px solid var(--line);border-radius:3px;padding:20px 14px;background:rgba(8,9,11,.46);text-align:center}
.vtri b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.vtri span{display:block;margin-top:7px;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}
@media(max-width:700px){
  .vrow.three,.vrow.four,.vcols,.vtri{grid-template-columns:1fr}
  .vrow span{padding:14px 8px}
}

/* ── editorial interruptions: the page's hinge lines, given room ─── */
.interrupt{background:var(--ink);border-top:1px solid var(--line);
  min-height:64vh;display:flex;align-items:center;padding:clamp(60px,10vh,120px) 0}
.intline{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(34px,6vw,80px);line-height:1.02;letter-spacing:.005em;
  color:var(--warm);max-width:none;margin:14px 0 0}
.intsub{margin-top:30px;color:var(--mute);font-size:15.5px;line-height:1.7;max-width:56ch}
@media(max-width:820px){.interrupt{min-height:auto;padding:clamp(54px,9vh,90px) 0}}

/* ── timekeepers: seasons + the four rhythms ─────────────────────── */
.seasons,.rhythms{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--line)}
.seasons p{color:var(--body);font-size:16px;line-height:1.7;max-width:62ch}
.seasons p + p{margin-top:15px}
.seasons em{color:var(--warm);font-style:italic}
.seasons strong{color:var(--warm)}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.rcard{border:1px solid var(--line);border-radius:3px;padding:28px 28px 26px;
  background:linear-gradient(180deg,rgba(217,155,61,.05),transparent);transition:.4s}
.rcard:hover{border-color:rgba(217,155,61,.44);transform:translateY(-3px)}
.rn{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fire)}
.rcard h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(23px,2.3vw,30px);color:var(--warm);margin:10px 0 14px;letter-spacing:.01em}
.rcard p{color:var(--body);font-size:15px;line-height:1.65;margin:0}
.rcard p + p{margin-top:13px}
.rcard strong{color:var(--warm)}
.rguard{padding-top:13px;border-top:1px solid var(--line);color:var(--mute)!important;font-size:14px!important}
@media(max-width:820px){.rgrid{grid-template-columns:1fr}}

/* ── toast ───────────────────────────────────────────────────────
   Entry is instant, exit fades. A transition on the way in was being
   stalled by main-thread work on the heavier pages — a notice that
   arrives a second late is worse than one that simply appears. */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:200;max-width:min(520px,92vw);padding:15px 24px;border-radius:3px;
  background:rgba(12,13,16,.96);border:1px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.55);color:var(--warm);
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:15.5px;
  letter-spacing:.06em;text-align:center;pointer-events:none;
  visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .45s}
.toast.on{visibility:visible;opacity:1;transition:none}

/* ── conference: the three nights ────────────────────────────────── */
.nights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.night{border:1px solid var(--line);border-radius:3px;padding:24px 24px 22px;
  background:linear-gradient(180deg,rgba(217,155,61,.05),transparent)}
.nn{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fire)}
.night h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:clamp(20px,1.9vw,25px);color:var(--warm);margin:10px 0 10px;line-height:1.15}
.night p{color:var(--body);font-size:14px;line-height:1.6;margin:0}
.tx{color:var(--gold);border-bottom:1px solid rgba(217,155,61,.4);transition:.3s}
.tx:hover{color:var(--warm);border-bottom-color:var(--warm)}
@media(max-width:760px){.nights{grid-template-columns:1fr}}
.nightlink{display:block;text-decoration:none;transition:.35s}
.nightlink:hover{border-color:rgba(217,155,61,.5);transform:translateY(-3px)}
.nightlink .famgo{color:var(--gold)}