:root{
  --navy:#0b1727; --navy-2:#12263c; --navy-3:#1b3450;
  --cream:#f5efe2; --cream-dim:#ded5c3;
  --gold:#c9a24d; --gold-soft:#e3c684; --gold-deep:#8a6b28;
  --white:#ffffff;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',Arial,system-ui,sans-serif;
  --maxw:1180px;
  --rule:1px solid rgba(201,162,77,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;background:var(--navy);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold-soft)}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.15}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;font-weight:600;
}
.rule{width:74px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:22px 0}
.rule.center{margin:22px auto}

/* ---------- NAV ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(8,18,31,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,162,77,.18);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;gap:22px}
.brand{font-family:var(--serif);font-size:1.12rem;color:var(--cream);text-decoration:none;white-space:nowrap}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  color:var(--cream-dim);text-decoration:none;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:.25s;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-soft);border-bottom-color:var(--gold)}
.nav-toggle{display:none;margin-left:auto;background:none;border:var(--rule);color:var(--gold);
  border-radius:4px;padding:7px 12px;font-size:.9rem;cursor:pointer}
@media(max-width:1040px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:64px;left:0;right:0;background:rgba(8,18,31,.98);
    flex-direction:column;gap:0;padding:8px 28px 20px;display:none;
    border-bottom:1px solid rgba(201,162,77,.2);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid rgba(201,162,77,.1)}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 0 70px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background:var(--navy-2)}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.82;filter:saturate(.85) contrast(1.08)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(11,23,39,.2),rgba(11,23,39,.72) 82%),
             linear-gradient(180deg,rgba(11,23,39,.72),rgba(11,23,39,.16) 45%,rgba(11,23,39,.96));
}
.hero h1,.hero .sub{text-shadow:0 2px 24px rgba(5,11,19,.85),0 1px 3px rgba(5,11,19,.7)}
.hero .hero-lede{text-shadow:0 1px 12px rgba(5,11,19,.9)}
blockquote.ccc{backdrop-filter:blur(3px);background:rgba(11,23,39,.62)}
.hero-list li{backdrop-filter:blur(2px);background:rgba(11,23,39,.6)}
.hero .wrap{position:relative;z-index:2;text-align:center}
.hero h1{font-size:clamp(2.6rem,7vw,5.1rem);margin:0 0 14px;color:var(--white)}
.hero h1 em{font-style:normal;color:var(--gold-soft);display:block}
.hero .sub{
  font-family:var(--serif);font-size:clamp(1.05rem,2.3vw,1.5rem);color:var(--cream-dim);
  max-width:760px;margin:0 auto;font-style:italic;
}
blockquote.ccc{
  max-width:820px;margin:52px auto 0;padding:34px 30px;
  border-top:var(--rule);border-bottom:var(--rule);
  background:rgba(18,38,60,.45);
}
blockquote.ccc p{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.4;margin:0;color:var(--white)}
blockquote.ccc cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hero-lede{max-width:760px;margin:38px auto 0;color:var(--cream-dim)}
.hero-list{
  list-style:none;padding:0;margin:26px auto 0;max-width:860px;
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));text-align:left;
}
.hero-list li{
  border-left:2px solid var(--gold-deep);padding:8px 14px;font-size:.93rem;color:var(--cream-dim);
  background:rgba(18,38,60,.35);
}
.hero-credit{
  position:absolute;bottom:14px;left:0;right:0;z-index:3;margin:0;text-align:center;
  font-size:.68rem;letter-spacing:.06em;color:rgba(222,213,195,.55);padding:0 28px;line-height:1.6;
}
.hero-credit a{color:rgba(227,198,132,.75)}
@media(max-width:700px){.hero-credit{position:static;margin-top:34px;font-size:.64rem}}
.scroll-cue{margin-top:46px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}

/* ---------- JOURNEY STRIP ---------- */
.journey{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:46px auto 0;max-width:980px}
.journey .step{
  font-family:var(--serif);font-size:.98rem;color:var(--cream);text-decoration:none;
  border:1px solid rgba(201,162,77,.35);border-radius:999px;padding:7px 17px;
  background:rgba(18,38,60,.5);transition:.3s;
}
.journey .step:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.journey .arrow{color:var(--gold);font-size:.85rem}

/* ---------- SECTIONS ---------- */
section{padding:108px 0;position:relative;border-top:1px solid rgba(201,162,77,.12)}
section.alt{background:linear-gradient(180deg,var(--navy-2),var(--navy))}
.sec-head{max-width:840px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 16px;color:var(--white)}
.sec-head p{color:var(--cream-dim);margin:0 0 14px}
.lede{font-size:1.06rem}

/* definition cards */
.defs{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:26px 0}
.def{background:rgba(18,38,60,.6);border:var(--rule);border-left:3px solid var(--gold);padding:24px 26px}
.def h4{margin:0 0 8px;font-size:1.3rem;color:var(--gold-soft)}
.def p{margin:0;color:var(--cream-dim);font-size:.96rem}
.cite-tag{
  display:inline-block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);background:var(--gold);padding:3px 10px;border-radius:2px;font-weight:700;
  margin-right:8px;margin-bottom:8px;
}
.cite-tag.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-deep)}

/* ---------- TYPOLOGY CARDS ---------- */
.type-card{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:64px;
  border:var(--rule);background:rgba(18,38,60,.55);overflow:hidden;
}
.type-card.flip .tc-art{order:2}
.tc-art{position:relative;min-height:440px;background:var(--navy-3);overflow:hidden}
.tc-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.tc-art:hover img{transform:scale(1.045)}
.tc-art .frame{position:absolute;inset:14px;border:1px solid rgba(245,239,226,.22);pointer-events:none}
.tc-num{
  position:absolute;top:0;left:0;z-index:3;background:var(--gold);color:var(--navy);
  font-family:var(--serif);font-size:1.5rem;font-weight:700;width:52px;height:52px;
  display:grid;place-items:center;
}
.tc-body{padding:44px}
.tc-body h3{font-size:clamp(1.5rem,3vw,2.15rem);margin:0 0 6px;color:var(--white)}
.tc-body .scrip{font-family:var(--serif);font-size:1.05rem;color:var(--gold-soft);margin:0 0 18px;font-style:italic}
.tc-body p{color:var(--cream-dim);font-size:.97rem}
.link-box{border-left:2px solid var(--gold);background:rgba(11,23,39,.6);padding:14px 18px;margin:18px 0}
.link-box strong{color:var(--gold-soft);font-family:var(--serif);font-size:1.08rem;display:block;margin-bottom:4px}
.link-box p{margin:0;font-size:.95rem}
@media(max-width:900px){
  .type-card{grid-template-columns:1fr}
  .type-card.flip .tc-art{order:0}
  .tc-art{min-height:300px}
  .tc-body{padding:32px 26px}
}

/* ---------- PLAQUE ---------- */
.plaque{
  background:linear-gradient(180deg,rgba(245,239,226,.07),rgba(245,239,226,.03));
  border:1px solid rgba(201,162,77,.32);padding:18px 20px;margin-top:22px;font-size:.86rem;
}
.plaque .pl-title{font-family:var(--serif);font-size:1.12rem;color:var(--white);margin:0 0 2px;font-style:italic}
.plaque .pl-artist{color:var(--gold-soft);font-size:.9rem;margin:0 0 10px}
.plaque dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px}
.plaque dt{color:var(--gold);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.plaque dd{margin:0;color:var(--cream-dim)}
.btn{
  display:inline-block;background:none;border:1px solid var(--gold);color:var(--gold-soft);
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 20px;cursor:pointer;text-decoration:none;transition:.25s;
}
.btn:hover{background:var(--gold);color:var(--navy)}

/* ---------- TRINITY DIAGRAM ---------- */
.trinity{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:24px 0 10px}
.tri{
  text-align:center;border:var(--rule);padding:34px 22px;background:rgba(18,38,60,.6);transition:.35s;
}
.tri:hover{border-color:var(--gold);transform:translateY(-5px)}
.tri .glyph{font-size:2.4rem;color:var(--gold);line-height:1;margin-bottom:12px}
.tri h4{margin:0 0 4px;font-size:1.45rem;color:var(--white)}
.tri .role{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.tri p{margin:0;font-size:.92rem;color:var(--cream-dim)}

/* ---------- GRACES ---------- */
.graces{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grace{
  border:var(--rule);background:rgba(18,38,60,.55);transition:.3s;overflow:hidden;
}
.grace:hover{border-color:var(--gold)}
.grace.open{background:rgba(27,52,80,.75);border-color:var(--gold)}
.grace-head{display:flex;align-items:center;gap:18px;padding:26px;width:100%;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.grace-num{
  font-family:var(--serif);font-size:2.1rem;color:var(--gold);width:46px;flex:none;text-align:center;
  border-right:1px solid rgba(201,162,77,.3);padding-right:14px;line-height:1;
}
.grace-head h3{margin:0;font-size:1.24rem;color:var(--white);flex:1;font-family:var(--serif)}
.grace-head .ccc-mini{font-size:.66rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;
  display:block;margin-top:6px;font-family:var(--sans);font-weight:600}
.grace-plus{color:var(--gold);font-size:1.4rem;transition:transform .35s;flex:none}
.grace.open .grace-plus{transform:rotate(45deg)}
.grace-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.grace-body-inner{padding:0 26px 28px 90px;color:var(--cream-dim);font-size:.95rem}
.grace-body-inner ul{margin:10px 0 0;padding-left:18px}
.grace-body-inner li{margin-bottom:7px}
.pull{border-left:2px solid var(--gold);padding:10px 16px;margin:16px 0 0;background:rgba(11,23,39,.5);
  font-family:var(--serif);font-size:1.05rem;color:var(--cream)}
@media(max-width:600px){.grace-body-inner{padding-left:26px}}

/* ---------- DEEP DIVE ---------- */
.thumbs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:38px}
.thumb{
  border:1px solid rgba(201,162,77,.25);background:var(--navy-3);cursor:pointer;
  overflow:hidden;position:relative;transition:.3s;padding:0;text-align:left;color:inherit;font:inherit;
}
.thumb img{width:100%;height:150px;object-fit:cover;opacity:.72;transition:.4s}
.thumb:hover img,.thumb.sel img{opacity:1;transform:scale(1.04)}
.thumb.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.thumb .cap{padding:11px 13px;font-size:.78rem;color:var(--cream-dim);line-height:1.4}
.thumb.sel .cap{color:var(--gold-soft)}

.panel{border:var(--rule);background:rgba(18,38,60,.55);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.panel-art{position:relative;background:#07101c;min-height:470px}
.panel-art img{width:100%;height:100%;object-fit:contain}
.panel-info{padding:38px}
.panel-info h3{margin:0 0 4px;font-size:1.85rem;color:var(--white)}
.panel-info .artist{color:var(--gold-soft);margin:0 0 20px;font-size:.95rem}
.analysis dt{
  font-family:var(--serif);font-size:1.2rem;color:var(--gold-soft);margin-top:22px;
  padding-bottom:5px;border-bottom:1px solid rgba(201,162,77,.2);
}
.analysis dd{margin:10px 0 0;color:var(--cream-dim);font-size:.95rem}
.symlist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px}
.symlist li{padding-left:20px;position:relative;font-size:.93rem;color:var(--cream-dim)}
.symlist li::before{content:"\2726";position:absolute;left:0;color:var(--gold);font-size:.8rem}
.symlist b{color:var(--cream)}
@media(max-width:940px){.panel{grid-template-columns:1fr}.panel-art{min-height:320px}.panel-info{padding:30px 24px}}

/* ---------- SOURCES ---------- */
.src-group{margin-bottom:44px}
.src-group h3{font-size:1.5rem;color:var(--gold-soft);border-bottom:var(--rule);padding-bottom:10px;margin:0 0 18px}
.src-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.src-list li{padding-left:30px;text-indent:-30px;color:var(--cream-dim);font-size:.94rem;line-height:1.7}
.src-list a{word-break:break-word}
footer{background:#07101c;padding:48px 0;border-top:1px solid rgba(201,162,77,.2);text-align:center}
footer p{margin:6px 0;color:var(--cream-dim);font-size:.84rem}
footer .mark{font-family:var(--serif);font-size:1.2rem;color:var(--gold)}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,11,19,.96);display:none;
  align-items:center;justify-content:center;padding:40px 20px}
.lb.open{display:flex}
.lb-inner{max-width:1100px;width:100%;max-height:100%;overflow:auto;text-align:center}
.lb img{margin:0 auto;max-height:72vh;width:auto;border:1px solid rgba(201,162,77,.3)}
.lb-cap{margin-top:16px;color:var(--cream-dim);font-size:.88rem}
.lb-cap b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--white);font-style:italic}
.lb-close{position:absolute;top:20px;right:26px;background:none;border:1px solid var(--gold);
  color:var(--gold);width:42px;height:42px;font-size:1.2rem;cursor:pointer}
.lb-close:hover{background:var(--gold);color:var(--navy)}

/* ---------- MOTION ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:70;width:0}
.img-fallback{
  width:100%;height:100%;min-height:260px;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,#14273d,#14273d 12px,#162b43 12px,#162b43 24px);
  color:var(--cream-dim);font-family:var(--serif);font-size:1rem;padding:30px;
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- SALVATION HISTORY FIELD ATLAS ART DIRECTION ---------- */
:root{
  --navy:#f4f0e7;--navy-2:#e8e2d5;--navy-3:#17484a;
  --cream:#183536;--cream-dim:#4a625d;
  --gold:#bd6845;--gold-soft:#a24d35;--gold-deep:#7b523d;
  --white:#173234;--rule:1px solid rgba(23,72,74,.2);
}
body{background:var(--navy);color:var(--cream)}
header.nav{background:rgba(244,240,231,.91);border-bottom:1px solid rgba(23,72,74,.15);backdrop-filter:blur(16px)}
.nav-links a{color:#405b57}.nav-links a:hover,.nav-links a.active{color:var(--gold-soft);border-bottom-color:var(--gold)}
.nav-toggle{color:var(--cream);border-color:rgba(23,72,74,.3)}
.hero{background:#123c40;min-height:94vh}
.hero-bg{background:#123c40}
.hero-bg img{opacity:.56;filter:saturate(.64) contrast(1.04)}
.hero-bg::after{background:linear-gradient(120deg,rgba(10,42,44,.72),rgba(16,59,61,.31) 55%,rgba(10,42,44,.78)),linear-gradient(0deg,rgba(10,42,44,.65),transparent 65%)}
.hero h1,.hero .sub{text-shadow:0 2px 24px rgba(5,22,23,.45)}
.hero h1{color:#fff;font-size:clamp(3.5rem,10vw,8rem);letter-spacing:-.04em;line-height:.88;text-transform:uppercase}
.hero h1 em{font-family:var(--sans);font-size:clamp(.92rem,1.8vw,1.3rem);letter-spacing:.3em;text-transform:uppercase;color:#f2b48d;margin-top:25px}
.hero .sub{font-family:var(--sans);font-style:normal;color:#f2eee4;letter-spacing:.02em}
.hero-lede{color:#e9e6db;text-shadow:none}
blockquote.ccc{background:rgba(10,42,44,.44);border-color:rgba(242,180,141,.54)}
blockquote.ccc p{color:#fff}blockquote.ccc cite{color:#f2b48d}
.journey .step{background:rgba(10,42,44,.38);color:#f6f0e6;border-color:rgba(242,180,141,.44)}
.journey .step:hover,.btn:hover{background:#f2b48d;color:#173234;border-color:#f2b48d}
.journey .arrow{color:#f2b48d}
.hero-cta{margin-top:25px;background:#f2b48d;border-color:#f2b48d;color:#173234;font-weight:700}
.scroll-cue{color:#f2b48d}
section{border-top-color:rgba(23,72,74,.12)}
section.alt{background:linear-gradient(155deg,#e8e2d5,#efe9dc 58%,#e4e8df)}
.sec-head h2,.tc-body h3,.tri h4,.analysis h3{color:#173234}
.sec-head p,.tc-body p,.tri p,.analysis dd{color:#4a625d}
.def{background:#ebe5d8;border-color:rgba(23,72,74,.18);border-left-color:#bd6845}
.type-card{background:#fbf8f0;border-color:rgba(23,72,74,.16);box-shadow:0 20px 50px rgba(39,58,48,.08)}
.tc-art{background:#17484a}.tc-num{background:#f2b48d;color:#173234}
.tc-body .scrip{color:#a24d35}
.link-box{background:#e8e2d5;border-left-color:#bd6845}.link-box strong{color:#8d4932}
.plaque{background:#efe9dc;border-color:rgba(23,72,74,.2)}.plaque .pl-title{color:#173234}.plaque .pl-artist{color:#a24d35}.plaque dd{color:#4a625d}
.btn{border-color:#bd6845;color:#8d4932}.btn:hover{background:#bd6845;color:#fff}
.trinity .tri{font:inherit;color:inherit;cursor:pointer;background:#ebe5d8;border-color:rgba(23,72,74,.2);border-radius:2px}
.trinity .tri:hover,.trinity .tri.selected{border-color:#bd6845;background:#f9f4e9;transform:translateY(-3px)}
.tri .glyph{color:#bd6845}.tri .role{color:#a24d35}
.grace{background:#fbf8f0;border-color:rgba(23,72,74,.19)}.grace.open{background:#e9e2d4;border-color:#bd6845}
.grace-head h3{color:#173234}.grace-body-inner{color:#4a625d}.grace-num{color:#a24d35;border-color:rgba(189,104,69,.38)}
.thumb{background:#e9e2d4;border-color:rgba(23,72,74,.2)}.thumb.sel{border-color:#bd6845}.thumb .cap{color:#405b57}.thumb.sel .cap{color:#8d4932}
.panel{background:#fbf8f0;border-color:rgba(23,72,74,.2)}.panel-art{background:#173234}.panel-info .artist{color:#a24d35}
.analysis dt{color:#8d4932;border-color:rgba(189,104,69,.28)}.analysis dd{color:#4a625d}.symlist li{color:#4a625d}.symlist li::before{color:#bd6845}.symlist b{color:#173234}
.src-group h3{color:#8d4932;border-color:rgba(23,72,74,.2)}.src-list li{color:#4a625d}
footer{background:#173234;border-color:rgba(189,104,69,.4)}footer p{color:#e8e2d5}footer p strong{color:#fff}footer .fine{color:#b9c6bc}
.cite-tag{background:rgba(189,104,69,.1);color:#8d4932;border-color:rgba(189,104,69,.25)}
.reveal{transition-duration:.7s}

/* Journey tracker */
.journey-tracker{position:sticky;top:64px;z-index:50;max-width:950px;margin:0 auto;padding:11px 20px 10px;background:rgba(238,232,219,.96);border:1px solid rgba(23,72,74,.16);border-top:0;color:#173234;backdrop-filter:blur(14px)}
.tracker-heading{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase;letter-spacing:.16em;font-size:.67rem;font-weight:700}.tracker-heading strong{color:#a24d35}
.tracker-rail,.quiz-rail{height:3px;background:rgba(23,72,74,.13);margin:12px 0}.tracker-rail span,.quiz-rail span{display:block;height:100%;background:#bd6845;transition:width .5s}
.tracker-steps{display:flex;justify-content:space-between;gap:8px}.tracker-steps span{font-size:.69rem;color:#89958c;transition:.25s}.tracker-steps span.done{color:#17484a;font-weight:700}.tracker-steps span.done::before{content:'✓ ';color:#bd6845}

/* Interactive timeline and water route */
.timeline{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;position:relative;margin:32px 0 34px}
.timeline::before{content:"";position:absolute;height:1px;background:rgba(189,104,69,.45);top:25px;left:4%;right:4%;pointer-events:none}
.time-stop{z-index:1;min-height:104px;text-align:left;border:1px solid rgba(23,72,74,.16);background:#fbf8f0;padding:12px;color:#4a625d;cursor:pointer;transition:transform .24s,border-color .24s,background .24s}
.time-stop:hover,.time-stop.selected{transform:translateY(-3px);border-color:#bd6845;background:#f7eee0}
.time-index{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#17484a;color:#f7f1e7;font-size:.68rem;margin-bottom:8px}
.selected .time-index{background:#bd6845}.time-name{display:block;color:#173234;font-family:var(--serif);font-size:1.12rem;line-height:1.1}.time-ref{display:block;margin-top:5px;font-size:.68rem}
.info-panel,.water-note{padding:28px 32px;background:#e8e2d5;border-left:3px solid #bd6845;min-height:138px}.info-panel h3,.water-note h3{margin:0 0 8px;font-size:1.7rem;color:#173234}.info-panel p,.water-note p{color:#4a625d}.story-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.story-columns p{margin:8px 0 0;font-size:.9rem}.story-columns b{color:#8d4932;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em}
.water-river{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;margin:50px 0 34px}.water-river::before{content:"";position:absolute;left:2%;right:2%;height:5px;border-radius:50%;background:linear-gradient(90deg,#8ab9ad,#4a9c9a,#17484a,#8ab9ad);opacity:.6}
.water-stop{position:relative;z-index:1;width:118px;min-height:118px;border:1px solid rgba(23,72,74,.2);border-radius:60% 45% 55% 45%;background:#fbf8f0;color:#173234;padding:14px 8px;cursor:pointer;transition:.3s;box-shadow:0 6px 18px rgba(26,62,55,.1)}
.water-stop span{display:block;color:#a24d35;font-size:.7rem;letter-spacing:.15em;margin-bottom:7px}.water-stop b{font-family:var(--serif);font-size:1.06rem;line-height:1.05}.water-stop:hover,.water-stop.selected{background:#17484a;color:#fff;transform:translateY(-7px);border-color:#f2b48d}.water-stop.selected span{color:#f2b48d}.river-link{display:none}
.big-map{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:30px 0}.big-map button{position:relative;min-height:100px;text-align:left;padding:14px 12px;border:1px solid rgba(23,72,74,.18);background:#fbf8f0;color:#173234;cursor:pointer;font-family:var(--serif);font-size:1.05rem;transition:.25s}.big-map button:hover,.big-map button.selected{background:#17484a;color:#fff;border-color:#bd6845}.big-map button span{display:block;font:600 .66rem var(--sans);color:#a24d35;margin-bottom:6px}.big-map button.selected span,.big-map button:hover span{color:#f2b48d}.big-map button i{position:absolute;right:8px;bottom:2px;color:#bd6845;font:normal 1rem var(--sans)}
.connection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.connection-card{background:#fbf8f0;border:1px solid rgba(23,72,74,.16);padding:24px;min-height:270px;transition:.25s}.connection-card:hover{transform:translateY(-4px);border-color:#bd6845}.connection-card h3{color:#173234;font-size:1.45rem;margin:8px 0}.connection-card p{color:#4a625d;font-size:.9rem}.connection-card b{color:#8d4932}.connection-num{font:600 .7rem var(--sans);letter-spacing:.18em;color:#a24d35}
.explorer-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px}.explorer-block{scroll-margin-top:80px}.explorer-block .sec-head{margin-bottom:20px}.explorer-block .sec-head h2{font-size:2.3rem}.reference-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.reference-list button{display:flex;justify-content:space-between;gap:10px;border:1px solid rgba(23,72,74,.16);padding:11px 13px;background:#fbf8f0;color:#173234;text-align:left;cursor:pointer;font:500 .8rem var(--sans);transition:.2s}.reference-list button:hover{background:#17484a;color:#fff}.reference-list button span{color:#bd6845;font-size:1.05rem}.info-panel.compact{min-height:180px;padding:22px}.info-panel.compact h3{font-size:1.4rem}
.did-you-know{max-width:850px;margin:28px auto;padding:0 18px;border:1px solid rgba(189,104,69,.32);background:rgba(189,104,69,.06)}.did-you-know summary{padding:13px 0;color:#8d4932;cursor:pointer;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.did-you-know p{margin:0 0 16px;color:#4a625d;font-size:.92rem}
.trinity .tri{width:100%;font-family:inherit}.trinity-note{background:#e8e2d5;padding:16px 20px;border-left:2px solid #bd6845;color:#4a625d;font-size:.92rem}
.reflection-section{background:#d9e3d9}.reflection-card{max-width:900px;margin:0 auto;padding:clamp(30px,6vw,70px);background:#f4f0e7;border:1px solid rgba(23,72,74,.18);box-shadow:16px 16px 0 rgba(23,72,74,.1)}.reflection-card h2{font-size:clamp(2.4rem,6vw,4.5rem);margin:0;color:#173234}.reflection-prompts{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:30px}.reflection-prompts p{margin:0;padding:15px 0;border-top:1px solid rgba(23,72,74,.18);color:#405b57;font-family:var(--serif);font-size:1.2rem}
.quiz-shell{max-width:810px;margin:0 auto;padding:clamp(22px,5vw,42px);background:#fbf8f0;border:1px solid rgba(23,72,74,.2);box-shadow:0 18px 45px rgba(39,58,48,.08)}.quiz-top{display:flex;justify-content:space-between;color:#a24d35;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700}.quiz-shell h3{font-size:1.7rem;color:#173234}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quiz-options button{display:flex;gap:12px;align-items:center;text-align:left;padding:13px;border:1px solid rgba(23,72,74,.16);background:#f2ede2;color:#405b57;cursor:pointer;font:inherit;font-size:.89rem;line-height:1.35}.quiz-options button:first-letter{color:#bd6845}.quiz-options button:hover:not(:disabled){border-color:#bd6845;background:#fffaf0}.quiz-options button.correct{border-color:#276b52;background:#e2eee3;color:#173c30}.quiz-options button.incorrect{border-color:#ad5344;background:#f2e3dc;color:#642d25}.quiz-options button:disabled{cursor:default}.quiz-feedback{min-height:74px;padding-top:16px;color:#4a625d}.quiz-feedback b{color:#173234}.quiz-feedback span{color:#a24d35;font-size:.83rem}.quiz-next[hidden]{display:none}.quiz-next{margin-top:12px}.quiz-shell>h3:not(:first-child){font-family:var(--serif)}.quiz-shell>p{color:#4a625d}.quiz-shell>p.eyebrow{color:#a24d35}.quiz-shell>h3:first-of-type{font-size:clamp(3rem,10vw,5.5rem);color:#bd6845;margin:8px 0}
.story-finale{background:#17484a;color:#f4f0e7;text-align:center;overflow:hidden}.story-finale::before,.story-finale::after{content:"";position:absolute;border:1px solid rgba(242,180,141,.2);border-radius:50%;width:70vw;height:70vw;left:50%;top:50%;transform:translate(-50%,-40%);pointer-events:none}.story-finale::after{width:48vw;height:48vw}.story-finale .wrap{position:relative;z-index:1;max-width:900px}.story-finale h2{font-size:clamp(3rem,8vw,6rem);line-height:.95;color:#fff;margin:0 0 24px}.story-finale h2 em{font-weight:400;color:#f2b48d}.story-finale p:not(.eyebrow){max-width:700px;margin:0 auto;color:#d7e2d8}.story-finale .eyebrow{color:#f2b48d}.final-sequence{margin:34px 0 26px;font-size:clamp(.72rem,1.5vw,1rem);letter-spacing:.12em;color:#fff}.final-sequence span{color:#f2b48d;padding:0 .4em}.story-finale .btn{color:#fff;border-color:#f2b48d}.story-finale .btn:hover{color:#173234}.back-top{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#17484a;color:#fff;border:1px solid rgba(242,180,141,.7);text-decoration:none;line-height:1}.back-top span{font-size:.48rem;text-transform:uppercase;letter-spacing:.12em;margin-top:3px}
@media(max-width:1000px){.timeline{grid-template-columns:repeat(5,minmax(0,1fr))}.timeline::before{display:none}.big-map{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.journey-tracker{padding:9px 12px}.tracker-steps{overflow:auto}.tracker-steps span{white-space:nowrap}.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}.water-river{flex-wrap:wrap;justify-content:center}.water-river::before{display:none}.water-stop{width:calc(33.333% - 12px);min-height:100px}.big-map{grid-template-columns:repeat(2,1fr)}.connection-grid{grid-template-columns:1fr}.explorer-columns{grid-template-columns:1fr}.reference-list{grid-template-columns:1fr 1fr}.story-columns{grid-template-columns:1fr;gap:5px}.reflection-prompts{grid-template-columns:1fr}.quiz-options{grid-template-columns:1fr}.hero h1{font-size:clamp(3rem,15vw,5.5rem)}}
@media(max-width:440px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.water-stop{width:calc(50% - 8px)}.reference-list{grid-template-columns:1fr}.tracker-heading{font-size:.59rem}.final-sequence{line-height:2}}
.before-after{margin:18px 0;border:1px solid rgba(189,104,69,.32);background:rgba(189,104,69,.05)}.before-after summary{padding:11px 14px;color:#8d4932;cursor:pointer;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.before-after[open] summary{border-bottom:1px solid rgba(189,104,69,.2)}.before-after>div{padding:2px 14px 10px}.before-after p{margin:9px 0;color:#4a625d;font-size:.87rem}.before-after p b{color:#8d4932}
.fulfillment{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease}.connection-card.revealed .fulfillment{max-height:210px;opacity:1;margin:12px 0}.reveal-connection{border:0;border-bottom:1px solid #bd6845;padding:7px 0;background:transparent;color:#8d4932;cursor:pointer;font:700 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase}.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:14px;border-top:1px solid rgba(23,72,74,.18);border-bottom:1px solid rgba(23,72,74,.18);color:#8d4932;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700}.gallery-controls button{border:0;background:none;color:#17484a;cursor:pointer;font:600 .74rem var(--sans);text-transform:uppercase;letter-spacing:.08em}.gallery-controls button:hover{color:#bd6845}

/* ---------- PRESENTATION REFINEMENTS ---------- */
section.tight{padding:80px 0}
section.tight .type-card{margin-bottom:0}
section.tight .eyebrow{text-align:center;margin-bottom:26px}
.h-sm{font-size:clamp(1.6rem,3.4vw,2.3rem)!important}
.def h4 .gr{font-size:.9rem;color:var(--cream-dim)}
.hint{font-size:.88rem;color:var(--gold)!important}
ul.crisp{color:var(--cream-dim);font-size:.96rem;padding-left:20px;margin:16px 0 0}
ul.crisp li{margin-bottom:9px}
ul.crisp b{color:var(--cream)}
footer p strong{color:var(--cream)}
footer .fine{margin-top:14px;font-size:.78rem;color:rgba(222,213,195,.55)}