/* Embers of Dawn pages: shared styles (embers.htm and its subpages) */
:root{
  --night:#1b2230;
  --night-2:#232c3d;
  --night-3:#2c3649;
  --umbra:#b9a6ff;
  --umbra-deep:#6d7fb3;
  --ward:#7d8cff;
  --lantern:#f0a23a;
  --lantern-glow:#c59454;
  --paper:#efe7d4;
  --paper-deep:#e4d9bf;
  --rule:#cdbf9f;
  --ink:#2a2622;
  --ink-soft:#5c5448;
  --olive:#848a5c;
  --cliff:#3b383d;
  --water:#7a8d94;
  --snow:#f2f1ea;
  --mist:#92a5ac;
  --text:#e9e3d6;
  --text-soft:#b8b2a6;
  --purple-deep:#1a0b3d;
  --teal:#00e5c7;
  --gutter:clamp(1.25rem, 6vw, 5rem);
  --maxw:1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'DM Sans', sans-serif;
  background:var(--night);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.narrow{ max-width:46rem; }

h1, h2, h3{ font-family:'Playfair Display', serif; line-height:1.12; }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); font-weight:700; }
h3{ font-size:1.3rem; font-weight:600; }

.kicker{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.76rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--lantern);
  margin-bottom:1rem;
}
.kicker::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--lantern); box-shadow:0 0 10px 2px rgba(240,162,58,0.6);
}
.paper .kicker{ color:#a4621c; }
.paper .kicker::before{ background:#c9761f; box-shadow:none; }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  min-height:48px; padding:0.8rem 1.6rem; border-radius:999px;
  font:600 0.95rem/1 'DM Sans', sans-serif; text-decoration:none;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--lantern); outline-offset:3px; }
.btn-lantern{ background:var(--lantern); color:#2a1a08; box-shadow:0 10px 30px rgba(240,162,58,0.35); }
.btn-lantern:hover{ box-shadow:0 14px 36px rgba(240,162,58,0.5); }
.btn-ghost{ border:1.5px solid rgba(233,227,214,0.45); color:var(--text); }
.btn-ghost:hover{ background:rgba(233,227,214,0.08); }

/* ---------- nav ---------- */
.topbar{
  position:fixed; z-index:50; top:0; left:0; right:0;
  transition:background 0.35s ease, box-shadow 0.35s ease;
}
.topbar.scrolled{
  background:rgba(27,34,48,0.82);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(233,227,214,0.08), 0 10px 30px rgba(0,0,0,0.3);
}
.topbar.scrolled .nav{ padding-top:calc(0.7rem + env(safe-area-inset-top, 0px)); padding-bottom:0.7rem; }
section[id], header[id]{ scroll-margin-top:4.5rem; }
.nav{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transition:padding 0.35s ease;
  padding:calc(1.1rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.1rem;
}
.nav-brand{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'Comfortaa', sans-serif; font-weight:700; font-size:1.25rem;
  text-decoration:none; color:#fff;
}
.nav-brand svg{ width:30px; height:30px; }
.tm{ font-family:'DM Sans', sans-serif; font-weight:500; font-size:0.45em; vertical-align:super; margin-left:0.12em; letter-spacing:0; opacity:0.85; align-self:flex-start; line-height:1; margin-top:0.4rem; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; list-style:none; font-size:0.93rem; }
.nav-links a{ text-decoration:none; color:rgba(233,227,214,0.8); transition:color 0.2s ease; }
.nav-links a:hover{ color:#fff; }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:min(86svh, 860px);
  padding-top:calc(5rem + env(safe-area-inset-top, 0px));
  display:flex; align-items:flex-end;
  background:var(--night) url('../img/embers/world-river.jpg') center 45% / cover no-repeat;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,34,48,0.55) 0%, rgba(27,34,48,0.15) 35%, rgba(27,34,48,0.75) 72%, var(--night) 100%),
    radial-gradient(60% 50% at 68% 42%, rgba(240,162,58,0.16), transparent 70%);
}
.hero-body{ position:relative; z-index:1; width:100%; padding-bottom:clamp(3.5rem, 10vh, 7rem); }
.hero h1{
  font-weight:600; font-size:clamp(3rem, 10vw, 6.6rem); letter-spacing:-0.01em;
  text-shadow:0 4px 30px rgba(0,0,0,0.45);
}
.hero .tag{
  margin-top:0.9rem; max-width:34ch;
  font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(1.15rem, 2.6vw, 1.6rem);
  color:var(--text);
}
.hero-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.75rem; }
.status-pill{
  display:inline-block; margin-top:1.5rem;
  padding:0.4rem 0.85rem; border-radius:999px;
  background:rgba(27,34,48,0.6); backdrop-filter:blur(6px);
  border:1px solid rgba(233,227,214,0.2);
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft);
}

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero-body > *{ animation:rise 1.4s cubic-bezier(0.2,0.7,0.15,1) both; }
.hero-body > *:nth-child(2){ animation-delay:0.25s; }
.hero-body > *:nth-child(3){ animation-delay:0.5s; }
.hero-body > *:nth-child(4){ animation-delay:0.75s; }
.hero-body > *:nth-child(5){ animation-delay:1s; }

/* ---------- bands ---------- */
section.band{ padding:clamp(4.5rem, 11vw, 8rem) 0; position:relative; }
.band-night{ background:var(--night); }
.band-night-2{ background:linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.paper{
  background:var(--paper); color:var(--ink);
  background-image:radial-gradient(rgba(42,38,34,0.035) 1px, transparent 1px);
  background-size:6px 6px;
}
.paper p{ color:var(--ink-soft); }

.lede{ font-size:1.12rem; color:var(--text-soft); margin-top:1.2rem; }
.prose p{ margin-top:1.2rem; font-size:1.08rem; color:var(--text-soft); }
.prose p strong{ color:var(--text); font-weight:600; }
.prose .first::first-letter{
  float:left; font-family:'Playfair Display', serif; font-weight:700;
  font-size:4.2rem; line-height:0.85; padding:0.35rem 0.6rem 0 0; color:var(--lantern);
}

/* premise */
.premise{ text-align:left; }
.premise .signal{
  margin-top:2.5rem; padding:1.4rem 1.6rem; border-radius:16px;
  background:rgba(125,140,255,0.08); border:1px solid rgba(125,140,255,0.25);
  font-family:'Playfair Display', serif; font-style:italic; font-size:1.2rem; color:#d6dbff;
}

/* day and night */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.split .art{
  border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(185,166,255,0.18);
}
.wide-art{
  margin:clamp(2.5rem, 6vw, 4rem) 0 0; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(185,166,255,0.18);
}
.wide-art figcaption{
  padding:0.9rem 1.2rem; background:var(--night-3);
  font-family:'Playfair Display', serif; font-style:italic; font-size:0.98rem; color:var(--text-soft);
}
.four{
  margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem;
}
.four div{
  padding:0.9rem 1rem; border-radius:14px;
  background:rgba(233,227,214,0.05); border:1px solid rgba(233,227,214,0.12);
  font-size:0.95rem; color:var(--text-soft);
}
.four strong{ display:block; color:var(--text); font-weight:600; }
.four .night strong{ color:var(--umbra); }

/* field guide */
.guide-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.guide-head p{ max-width:44ch; }
.guide{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.75rem;
}
.entry{
  background:#f7f1e3; border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 40px rgba(42,38,34,0.1);
  display:flex; flex-direction:column;
}
.entry button.zoom{ all:unset; cursor:zoom-in; display:block; }
.entry button.zoom:focus-visible{ outline:2px solid #c9761f; outline-offset:-4px; }
.entry img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.entry .body{ padding:1.3rem 1.5rem 1.6rem; border-top:1px solid var(--rule); }
.entry h3{ color:var(--ink); }
.entry .kin{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:#8a7a5a; margin-top:0.25rem; }
.entry dl{ margin-top:1rem; display:grid; gap:0.7rem; }
.entry dt{ font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#8a7a5a; }
.entry dt.n{ color:#5b4fa0; }
.entry dd{ color:var(--ink-soft); font-size:0.97rem; }
.entry dd em{ font-family:'Playfair Display', serif; color:var(--ink); }
.entry.more{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; gap:1.5rem;
  padding:1.6rem 1.8rem;
  background:var(--night); color:var(--text); border-color:var(--night-3);
}
.entry.more h3{ color:var(--text); }
.entry.more p{ color:var(--text-soft); margin-top:0.3rem; }
.entry.more .silhouettes{ display:flex; gap:0.6rem; flex:none; }
.entry.more .silhouettes span{
  width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, rgba(185,166,255,0.55), rgba(109,127,179,0.15) 60%, transparent 70%);
  border:1px dashed rgba(185,166,255,0.4);
  display:grid; place-items:center;
  font-family:'Playfair Display', serif; font-style:italic; color:var(--umbra);
}

/* kit */
.turnaround{
  margin-top:clamp(2.5rem, 6vw, 3.5rem);
  border-radius:24px; overflow:hidden; background:#d9d9dc;
}
.turnaround button{ all:unset; cursor:zoom-in; display:block; width:100%; }
.kit{
  margin-top:2rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.kit article{
  padding:1.4rem 1.4rem 1.5rem; border-radius:18px;
  background:var(--night-2); border:1px solid var(--night-3);
}
.kit h3{ font-size:1.12rem; display:flex; align-items:center; gap:0.6rem; }
.kit h3::before{
  content:""; width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--ward); box-shadow:0 0 12px 2px rgba(125,140,255,0.6);
}
.kit p{ margin-top:0.5rem; font-size:0.96rem; color:var(--text-soft); }
.kit .note{ grid-column:1 / -1; font-size:0.95rem; color:var(--text-soft); text-align:center; }

/* gentle peril */
.peril{
  background:
    radial-gradient(55% 60% at 80% 40%, rgba(125,140,255,0.2), transparent 70%),
    linear-gradient(180deg, var(--night-2), #161c28);
}
.rules{ margin-top:1.75rem; display:grid; gap:1rem; }
.rules li{ list-style:none; padding-left:1.6rem; position:relative; color:var(--text-soft); }
.rules li::before{
  content:""; position:absolute; left:0; top:0.55rem; width:9px; height:9px; border-radius:50%;
  background:var(--ward); box-shadow:0 0 10px 2px rgba(125,140,255,0.55);
}
.rules strong{ color:var(--text); font-weight:600; }

/* artbook */
.rules5{
  margin-top:2.5rem; display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem;
  counter-reset:rule;
}
.rules5 li{
  list-style:none; counter-increment:rule;
  padding:1.1rem 1rem 1.2rem; border-radius:14px;
  background:#f7f1e3; border:1px solid var(--rule);
  font-size:0.92rem; color:var(--ink-soft);
}
.rules5 li::before{
  content:counter(rule); display:block;
  font-family:'Playfair Display', serif; font-weight:700; font-size:1.6rem; color:#c9761f; line-height:1;
  margin-bottom:0.5rem;
}
.rules5 strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:0.25rem; }

.palette{ margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:0.6rem; }
.swatch{
  display:flex; align-items:center; gap:0.55rem;
  padding:0.35rem 0.8rem 0.35rem 0.35rem; border-radius:999px;
  background:#f7f1e3; border:1px solid var(--rule); font-size:0.82rem; color:var(--ink-soft);
}
.swatch i{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,0.12); }

.book{
  margin-top:clamp(2.5rem, 6vw, 3.5rem);
  display:grid; grid-template-columns:repeat(6, 1fr); gap:1rem;
}
.book figure{ margin:0; grid-column:span 2; }
.book figure.wide{ grid-column:span 4; }
.book figure.full{ grid-column:1 / -1; }
.book button{ all:unset; cursor:zoom-in; display:block; width:100%; border-radius:14px; overflow:hidden; background:var(--night); }
.book button:focus-visible{ outline:2px solid #c9761f; outline-offset:3px; }
.book img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 0.6s ease; }
.book figure.wide img{ aspect-ratio:16/9; }
.book figure.full img{ aspect-ratio:auto; }
.book button:hover img{ transform:scale(1.03); }
.book .crop-camp img{ object-position:50% 0%; transform-origin:50% 0%; transform:scale(1.16); }
.book .crop-camp button:hover img{ transform:scale(1.2); }
.book figcaption{ margin-top:0.6rem; font-size:0.85rem; color:var(--ink-soft); line-height:1.45; }
.book figcaption b{ display:block; font-family:'Playfair Display', serif; font-style:italic; font-weight:600; font-size:1rem; color:var(--ink); }

/* follow */
.follow{
  text-align:center;
  background:
    radial-gradient(40% 70% at 50% 100%, rgba(240,162,58,0.22), transparent 70%),
    var(--night);
}
.follow p{ margin:1rem auto 0; max-width:48ch; color:var(--text-soft); }
.follow .hero-cta{ justify-content:center; }

/* footer */
footer{
  background:var(--purple-deep); color:rgba(255,255,255,0.7);
  padding:2.5rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
}
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.25rem; }
.foot small{ font-size:0.82rem; color:rgba(255,255,255,0.5); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--teal); }

/* at a glance */
.glance{ background:var(--night); padding:0 0 0.5rem; }
.glance-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:rgba(233,227,214,0.12);
  border:1px solid rgba(233,227,214,0.14); border-radius:20px;
  overflow:hidden;
}
.glance-grid div{ padding:1.15rem 1.4rem 1.25rem; background:var(--night-2); }
.glance dt{ font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--lantern); }
.glance dd{ margin-top:0.3rem; font-size:0.98rem; color:var(--text); line-height:1.4; }

/* planetfall filmstrip */
.filmstrip{
  list-style:none; margin-top:clamp(2.5rem, 6vw, 3.5rem);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0.75rem;
  counter-reset:frame;
}
.filmstrip li{
  position:relative; border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(233,227,214,0.1);
}
.filmstrip img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.filmstrip span{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.9rem 0.7rem;
  background:linear-gradient(180deg, transparent, rgba(10,12,18,0.85));
  font-family:'Playfair Display', serif; font-style:italic; font-size:0.98rem; color:var(--text);
}
.filmstrip-cap{ margin-top:0.9rem; text-align:center; font-size:0.85rem; color:var(--text-soft); }
.premise .episode{
  margin-top:1.5rem; font-size:1.05rem; color:var(--text-soft);
  padding-left:1.1rem; border-left:3px solid var(--lantern);
}
.premise .episode strong{ color:var(--lantern); }

/* listen buttons */
.listen{
  margin-top:1.1rem;
  display:inline-flex; align-items:center; gap:0.55rem;
  min-height:40px; padding:0.45rem 1rem 0.45rem 0.55rem;
  border-radius:999px; border:1px solid var(--rule); background:#fffaf0; color:var(--ink);
  font:600 0.85rem/1 'DM Sans', sans-serif; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.listen:hover{ background:#fff; border-color:#c9761f; }
.listen:focus-visible{ outline:2px solid #c9761f; outline-offset:2px; }
.listen .ico{
  width:28px; height:28px; border-radius:50%; flex:none; position:relative;
  background:#c9761f;
}
.listen .ico::before{
  content:""; position:absolute; left:11px; top:8px;
  border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.listen.playing .ico{ background:#5b4fa0; animation:ping 1.1s ease-out infinite; }
.listen.playing .ico::before{
  left:9px; top:9px; border:0; width:10px; height:10px; background:#fff; border-radius:2px;
}
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(91,79,160,0.45); } 100%{ box-shadow:0 0 0 10px rgba(91,79,160,0); } }
.credit{ margin-top:2rem; font-size:0.85rem; text-align:center; color:var(--ink-soft); }

/* slate */
.slate-band{
  background:
    radial-gradient(50% 60% at 15% 30%, rgba(125,140,255,0.16), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.slate-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.slate-hero{ margin:0; }
.slate-hero button, .screens button{ all:unset; cursor:zoom-in; display:block; width:100%; }
.slate-hero img{
  width:100%; border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(125,140,255,0.25);
}
.slate-list{ list-style:none; margin-top:1.5rem; display:grid; gap:0.85rem; }
.slate-list li{ padding-left:1.4rem; position:relative; color:var(--text-soft); }
.slate-list li::before{
  content:""; position:absolute; left:0; top:0.6rem; width:10px; height:7px;
  border:1.5px solid #e9e3d6; border-radius:2px; opacity:0.75;
}
.slate-list strong{ color:var(--text); font-weight:600; }
.screens{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.screens figure{ margin:0; }
.screens img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 0%;
  border-radius:14px; background:#e9e5dc;
  box-shadow:0 18px 50px rgba(0,0,0,0.4);
  transition:transform 0.5s ease;
}
.screens button:hover img{ transform:translateY(-4px); }
.screens button:focus-visible img{ outline:2px solid var(--lantern); outline-offset:3px; }
.screens figcaption{ margin-top:0.75rem; font-size:0.9rem; color:var(--text-soft); }
.screens figcaption b{ display:block; font-family:'Playfair Display', serif; font-style:italic; font-size:1.05rem; color:var(--text); }

/* kit additions */
.kit p strong{ color:var(--text); font-weight:600; }
.kit-shot{
  margin:2rem 0 0; border-radius:24px; overflow:hidden;
  display:grid; grid-template-columns:minmax(220px, 380px) 1fr; align-items:center;
  background:
    radial-gradient(60% 80% at 0% 50%, rgba(240,162,58,0.1), transparent 70%),
    var(--night-2);
  box-shadow:0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(233,227,214,0.1);
}
.kit-shot button{ all:unset; cursor:zoom-in; display:block; height:100%; background:#dcdcdd; }
.kit-shot button:focus-visible{ outline:2px solid var(--lantern); outline-offset:-4px; }
.kit-shot img{ width:100%; height:100%; max-height:520px; object-fit:cover; object-position:50% 20%; }
.kit-shot figcaption{ padding:clamp(1.5rem, 4vw, 2.75rem); }
.kit-shot-kicker{ font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--lantern); }
.kit-shot h3{ margin-top:0.4rem; font-size:clamp(1.5rem, 3vw, 2rem); }
.kit-shot ul{ list-style:none; margin-top:1.1rem; display:grid; gap:0.85rem; }
.kit-shot li{ color:var(--text-soft); font-size:0.98rem; }
.kit-shot li b{ color:var(--text); font-weight:600; }

/* weather row */
.weather{ margin-top:clamp(2.5rem, 6vw, 4rem); display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.weather figure{ margin:0; }
.weather img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,0.4);
}
.weather figcaption{ margin-top:0.7rem; font-family:'Playfair Display', serif; font-style:italic; color:var(--text-soft); }

/* engine */
.engine{
  background:
    radial-gradient(45% 55% at 90% 10%, rgba(125,140,255,0.14), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, rgba(240,162,58,0.1), transparent 70%),
    var(--night);
}
.engine-head{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 4rem; align-items:end; }
.engine-head .lede{ margin-top:0; }
.engine-grid{
  margin-top:clamp(2.5rem, 6vw, 3.5rem);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem;
}
.engine-grid article{
  padding:1.4rem 1.35rem 1.5rem; border-radius:18px;
  background:linear-gradient(180deg, var(--night-2), rgba(35,44,61,0.6));
  border:1px solid var(--night-3);
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.engine-grid article:hover{ border-color:rgba(240,162,58,0.45); transform:translateY(-3px); }
.spec{
  display:inline-block; padding:0.28rem 0.6rem; border-radius:999px;
  font:600 0.68rem/1.2 ui-monospace, Consolas, monospace; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--lantern); background:rgba(240,162,58,0.1); border:1px solid rgba(240,162,58,0.3);
}
.engine-grid h3{ margin-top:0.85rem; font-size:1.15rem; }
.engine-grid p{ margin-top:0.5rem; font-size:0.93rem; color:var(--text-soft); }
.engine-foot{ margin-top:2rem; text-align:center; font-size:0.88rem; color:var(--text-soft); }
@media (max-width:1100px){ .engine-grid{ grid-template-columns:repeat(2, 1fr); } }

.eng-stats{
  list-style:none; margin-top:clamp(2.2rem, 5vw, 3rem);
  display:grid; grid-template-columns:repeat(6, 1fr);
  border-top:1px solid var(--night-3); border-bottom:1px solid var(--night-3);
}
.eng-stats li{ padding:1.3rem 1rem; font-size:0.86rem; color:var(--text-soft); line-height:1.4; }
.eng-stats li + li{ border-left:1px solid var(--night-3); }
.eng-stats b{
  display:block; margin-bottom:0.35rem;
  font-family:'Playfair Display', serif; font-size:clamp(1.7rem, 2.6vw, 2.2rem); font-weight:600; line-height:1;
  color:var(--lantern);
}

.eng-block{
  margin-top:clamp(3rem, 7vw, 5rem);
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.eng-block.flip{ grid-template-columns:6fr 6fr; }
.eng-copy h3, .director h3, .moments-head h3{ margin-top:0.85rem; font-size:clamp(1.5rem, 2.6vw, 1.95rem); }
.eng-copy p{ margin-top:0.9rem; color:var(--text-soft); }
.eng-list{ list-style:none; margin-top:1rem; display:grid; gap:0.7rem; }
.eng-list li{ position:relative; padding-left:1.3rem; color:var(--text-soft); font-size:0.97rem; }
.eng-list li::before{
  content:""; position:absolute; left:0; top:0.62em; width:7px; height:7px; border-radius:50%;
  background:var(--lantern); box-shadow:0 0 8px 1px rgba(240,162,58,0.55);
}

.skies{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0.6rem; }
.skies figure{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--night-3); }
.skies img{ width:100%; height:auto; display:block; }
.skies figcaption{
  position:absolute; left:0.55rem; bottom:0.5rem; padding:0.2rem 0.55rem; border-radius:999px;
  font-size:0.74rem; font-weight:600; color:var(--text); background:rgba(27,34,48,0.72);
}

.compare{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--night-3); aspect-ratio:4 / 3; }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.compare-top{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.compare-line{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; pointer-events:none;
  background:var(--lantern); box-shadow:0 0 12px rgba(240,162,58,0.7);
}
.compare-line::after{
  content:"\2194"; position:absolute; top:50%; left:50%; width:38px; height:38px; margin:-19px 0 0 -19px;
  display:grid; place-items:center; border-radius:50%;
  font-size:1.1rem; color:var(--night); background:var(--lantern);
}
.compare-tag{
  position:absolute; top:0.7rem; padding:0.2rem 0.6rem; border-radius:999px; pointer-events:none;
  font-size:0.74rem; font-weight:600; color:var(--text); background:rgba(27,34,48,0.72);
}
.compare-tag.l{ left:0.7rem; }
.compare-tag.r{ right:0.7rem; }
.compare input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
}
.compare input:focus-visible ~ .compare-line::after{ outline:2px solid #fff; outline-offset:2px; }
.compare figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.9rem 0.7rem; pointer-events:none;
  font-size:0.82rem; color:var(--text); background:linear-gradient(transparent, rgba(27,34,48,0.85));
}

.director{
  margin-top:clamp(3rem, 7vw, 5rem); padding:clamp(1.6rem, 4vw, 2.6rem); border-radius:22px;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(185,166,255,0.12), transparent 70%),
    linear-gradient(180deg, var(--night-2), rgba(35,44,61,0.55));
  border:1px solid var(--night-3);
}
.director-copy{ max-width:52rem; }
.director-copy p{ margin-top:0.9rem; color:var(--text-soft); }
.ladder{
  list-style:none; counter-reset:step; margin-top:1.8rem;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
}
.ladder li{
  counter-increment:step; position:relative;
  padding:1.1rem 1.1rem 1.2rem; border-radius:14px;
  background:rgba(27,34,48,0.6); border:1px solid var(--night-3);
  font-size:0.9rem; color:var(--text-soft);
}
.ladder li::before{
  content:counter(step); display:grid; place-items:center; width:30px; height:30px; margin-bottom:0.7rem;
  border-radius:50%; font-weight:700; font-size:0.85rem; color:var(--night); background:var(--lantern);
}
.ladder li:nth-child(2)::before{ background:#7d8cff; }
.ladder li:nth-child(4)::before{ background:var(--umbra); }
.ladder b{ display:block; margin-bottom:0.3rem; color:var(--text); font-size:1rem; }
.director-foot{ margin-top:1.4rem; font-family:'Playfair Display', serif; font-style:italic; color:var(--text-soft); }

.moments-head{ margin-top:clamp(3rem, 7vw, 5rem); max-width:46rem; }
.moments-head p{ margin-top:0.7rem; color:var(--text-soft); }
.moments{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.moment{
  all:unset; box-sizing:border-box; cursor:zoom-in; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; background:var(--night-2); border:1px solid var(--night-3);
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.moment:hover{ border-color:rgba(240,162,58,0.45); transform:translateY(-3px); }
.moment:focus-visible{ outline:2px dashed var(--lantern); outline-offset:3px; }
.moment img{ width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; display:block; }
.moment .m-tag{
  margin:0.85rem 1rem 0; align-self:flex-start; padding:0.15rem 0.5rem; border-radius:999px;
  font:600 0.64rem/1.3 ui-monospace, Consolas, monospace; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mist); border:1px solid rgba(146,165,172,0.4);
}
.moment .m-tag.umbra{ color:var(--umbra); border-color:rgba(185,166,255,0.45); }
.moment b{ margin:0.45rem 1rem 0; font-size:1.02rem; color:var(--text); }
.moment b + span{ margin:0.3rem 1rem 1.1rem; font-size:0.86rem; line-height:1.45; color:var(--text-soft); }
.engine-grid{ margin-top:1.6rem; }

@media (max-width:1100px){
  .eng-stats{ grid-template-columns:repeat(3, 1fr); }
  .eng-stats li:nth-child(4){ border-left:0; }
  .eng-stats li:nth-child(n+4){ border-top:1px solid var(--night-3); }
  .moments{ grid-template-columns:repeat(3, 1fr); }
  .ladder{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:900px){
  .eng-block, .eng-block.flip{ grid-template-columns:1fr; }
  .moments{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .eng-stats{ grid-template-columns:repeat(2, 1fr); }
  .eng-stats li:nth-child(n){ border-left:0; border-top:1px solid var(--night-3); }
  .eng-stats li:nth-child(-n+2){ border-top:0; }
  .eng-stats li:nth-child(even){ border-left:1px solid var(--night-3); }
  .ladder{ grid-template-columns:1fr; }
  .moments{ gap:0.7rem; }
  .moment b, .moment .m-tag{ margin-left:0.75rem; margin-right:0.75rem; }
  .moment b + span{ margin:0.3rem 0.75rem 0.9rem; font-size:0.82rem; }
}

/* nib */
.nib{
  --mood:#7d8cff;
  background:
    radial-gradient(45% 55% at 25% 35%, color-mix(in srgb, var(--mood) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, #1e2436 100%);
  transition:background 0.6s ease;
}
.nib-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.nib-art{ position:relative; }
.nib-art::before{
  content:""; position:absolute; inset:-14% -12%; border-radius:50%;
  background:radial-gradient(circle, var(--mood) 0%, transparent 62%);
  opacity:0.6; filter:blur(36px); z-index:0;
  transition:background 0.6s ease;
}
.nib-art button{ all:unset; cursor:zoom-in; display:block; position:relative; z-index:1; }
.nib-art img{
  width:100%; border-radius:28px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--mood) 45%, transparent);
  transition:box-shadow 0.6s ease;
}
.nib-art button:focus-visible img{ outline:2px solid var(--lantern); outline-offset:4px; }
.nib-copy h2{ font-size:clamp(2.6rem, 6vw, 4.2rem); }
.nib-copy .lede strong{ color:var(--text); font-weight:600; }
.nib-copy .lede em{ font-family:'Playfair Display', serif; color:#d6dbff; }

.moods{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.mood{
  display:inline-flex; align-items:center; gap:0.5rem;
  min-height:40px; padding:0.4rem 0.9rem 0.4rem 0.5rem; border-radius:999px;
  border:1px solid rgba(233,227,214,0.2); background:rgba(233,227,214,0.05);
  color:var(--text-soft); font:500 0.85rem/1 'DM Sans', sans-serif; cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mood i{ width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,0.12); }
.mood:hover, .mood[aria-pressed="true"]{ color:var(--text); border-color:rgba(233,227,214,0.55); background:rgba(233,227,214,0.1); }
.mood:focus-visible{ outline:2px solid var(--lantern); outline-offset:2px; }

.nib-ways{
  margin-top:clamp(3rem, 7vw, 4.5rem);
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.nib-ways figure{ margin:0; }
.nib-ways figure > button{ all:unset; cursor:zoom-in; display:block; width:100%; }
.nib-ways figure > button img{ width:100%; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.nib-ways figcaption{ margin-top:0.75rem; font-family:'Playfair Display', serif; font-style:italic; color:var(--text-soft); }
.nib-ways h3{ font-size:1.5rem; }
.ways{ list-style:none; margin-top:1rem; display:grid; gap:0.7rem; }
.ways li{ position:relative; padding-left:1.4rem; color:var(--text-soft); }
.ways li::before{
  content:""; position:absolute; left:0; top:0.55rem; width:9px; height:9px; border-radius:50%;
  background:var(--mood); box-shadow:0 0 10px 2px color-mix(in srgb, var(--mood) 60%, transparent);
  transition:background 0.6s ease;
}
.night-note{
  margin-top:1.5rem; padding:1rem 1.2rem; border-radius:14px;
  background:rgba(185,166,255,0.08); border:1px solid rgba(185,166,255,0.25); color:#d6d0f5;
}
.night-note strong{ color:var(--umbra); }
.naming{ margin-top:1.5rem !important; display:flex; gap:1rem; align-items:center; }
.naming img{ width:min(280px, 55%); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,0.35); }
.naming figcaption{ margin-top:0 !important; font-size:0.95rem; }

.evolution{ margin-top:clamp(3rem, 7vw, 4.5rem); }
.evolution h3{ font-size:1.5rem; text-align:center; }
.evo-kicker{ text-align:center; font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--lantern); margin-bottom:0.4rem; }
.ways-intro{ margin-top:0.4rem; font-family:'Playfair Display', serif; font-style:italic; color:var(--text-soft); }
.ways strong{ color:var(--text); font-weight:600; }
.evo{
  list-style:none; margin-top:1.75rem; position:relative;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem;
}
.evo li{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--night-2); border:1px solid var(--night-3);
}
.evo li + li::before{
  content:"\2192"; position:absolute; left:-1.05rem; top:4.2rem; z-index:2;
  width:1.6rem; height:1.6rem; margin-left:-0.3rem; display:grid; place-items:center; border-radius:50%;
  background:var(--mood); color:#fff; font-size:0.9rem; line-height:1;
  box-shadow:0 0 12px color-mix(in srgb, var(--mood) 70%, transparent);
}
.evo li{ overflow:visible; }
.evo img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#e6e3dc; border-radius:17px 17px 0 0; }
.evo li:nth-child(1) img{ object-position:50% 60%; }
.evo li:nth-child(2) img{ object-fit:contain; background:#dcdcdd; }
.evo li:nth-child(3) img{ object-fit:contain; background:#e9e5de; }
.evo .step{
  display:block; padding:0.9rem 1rem 0; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--lantern);
}
.evo p{ padding:0.35rem 1rem 1.1rem; font-size:0.93rem; color:var(--text-soft); }
.evo-foot{ margin-top:1.5rem; text-align:center; font-family:'Playfair Display', serif; font-style:italic; font-size:1.1rem; color:var(--text); }

.inline-link{ color:var(--lantern); font-weight:600; text-decoration:none; white-space:nowrap; }
.inline-link::after{ content:" \2191"; }
.inline-link:hover{ text-decoration:underline; }

/* lightbox */
dialog.lightbox{
  border:0; padding:0; background:transparent; color:var(--text);
  max-width:min(96vw, 1400px); max-height:94vh; margin:auto;
}
dialog.lightbox::backdrop{ background:rgba(10,12,18,0.9); }
dialog.lightbox img{ max-width:min(96vw, 1400px); max-height:84vh; margin:0 auto; border-radius:10px; }
dialog.lightbox p{ margin-top:0.75rem; text-align:center; font-size:0.92rem; color:var(--text-soft); }
dialog.lightbox .close{
  position:fixed; top:calc(1rem + env(safe-area-inset-top, 0px)); right:1rem;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(233,227,214,0.35);
  background:rgba(27,34,48,0.8); color:var(--text); font-size:1.4rem; cursor:pointer;
}

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.7,0.15,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-body > *{ animation:none; }
}

@media (max-width:980px){
  .rules5{ grid-template-columns:repeat(2, 1fr); }
  .rules5 li:last-child{ grid-column:1 / -1; }
  .kit{ grid-template-columns:repeat(2, 1fr); }
  .glance-grid, .filmstrip, .engine-grid, .evo{ grid-template-columns:repeat(2, 1fr); }
  .evo li + li::before{ display:none; }
  .engine-head{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .split, .slate-grid, .nib-grid, .nib-ways{ grid-template-columns:1fr; }
  .nib-art{ max-width:520px; }
  .slate-hero{ max-width:480px; }
  .screens{ grid-template-columns:1fr; max-width:520px; }
  .weather{ grid-template-columns:1fr; }
  .kit-shot{ grid-template-columns:1fr; }
  .kit-shot img{ max-height:420px; }
  .guide{ grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .entry.more{ flex-direction:column; text-align:center; }
  .book{ grid-template-columns:1fr; }
  .book figure, .book figure.wide{ grid-column:auto; }
  .book figure.wide img{ aspect-ratio:4/3; }
}
@media (max-width:640px){
  .kit, .four{ grid-template-columns:1fr; }
  .filmstrip span{ font-size:0.8rem; padding:1rem 0.6rem 0.45rem; }
  .engine-grid, .evo{ grid-template-columns:1fr; }
  .naming{ flex-direction:column; align-items:flex-start; }
  .naming img{ width:100%; max-width:320px; }
  .rules5{ grid-template-columns:1fr; }
}
.social-link{ display:inline-flex; align-items:center; gap:0.45rem; vertical-align:middle; }
.social-ico{ width:15px; height:15px; flex:none; display:inline-block; }

/* ---------- subpages ---------- */
.nav-links a[aria-current="page"]{ color:#fff; box-shadow:0 2px 0 var(--lantern); }
.hero.sub{ min-height:min(64svh, 620px); background-position:center 40%; }
.hero.sub h1{ font-size:clamp(2.8rem, 8vw, 5.2rem); }
.crumb{ display:block; width:max-content; margin-bottom:1rem; font-size:0.86rem; color:var(--text-soft); text-decoration:none; }
.crumb:hover{ color:#fff; }
.crumb::before{ content:"\2190\00a0"; }

.figs{ display:grid; gap:1rem; }
.fig{ margin:0; border-radius:18px; overflow:hidden; background:var(--night-3); box-shadow:0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(185,166,255,0.16); }
.fig img{ width:100%; height:auto; display:block; }
.fig figcaption{ padding:0.75rem 1rem; font-family:'Playfair Display', serif; font-style:italic; font-size:0.94rem; color:var(--text-soft); }
.paper .fig{ background:#e6dfcf; box-shadow:0 20px 50px rgba(42,38,34,0.18); }
.paper .fig figcaption{ color:var(--ink-soft); }
.aside-note{
  margin-top:1.3rem; padding:0.9rem 1.1rem; border-left:3px solid var(--lantern); border-radius:0 12px 12px 0;
  background:rgba(240,162,58,0.07); font-size:0.93rem; color:var(--text-soft);
}
.aside-note b{ color:var(--text); }
.pull{
  margin-top:1.6rem; font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(1.25rem, 2.4vw, 1.6rem); line-height:1.4; color:var(--text);
}
.pull cite{ display:block; margin-top:0.5rem; font-family:'DM Sans', sans-serif; font-style:normal; font-size:0.82rem; color:var(--text-soft); }

.steps{ list-style:none; counter-reset:step; margin-top:clamp(2rem, 5vw, 3rem); display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.steps li{
  counter-increment:step; padding:1.3rem 1.3rem 1.4rem; border-radius:18px;
  background:linear-gradient(180deg, var(--night-2), rgba(35,44,61,0.55)); border:1px solid var(--night-3);
  color:var(--text-soft); font-size:0.95rem;
}
.steps li::before{
  content:counter(step); display:grid; place-items:center; width:32px; height:32px; margin-bottom:0.8rem;
  border-radius:50%; font-weight:700; font-size:0.88rem; color:var(--night); background:var(--lantern);
}
.steps li:nth-child(5)::before, .steps li:nth-child(6)::before{ background:var(--umbra); }
.steps b{ display:block; margin-bottom:0.3rem; color:var(--text); font-size:1.08rem; }

.weights{ margin-top:1.4rem; display:grid; gap:0.55rem; }
.weights div{ display:grid; grid-template-columns:7.5rem 1fr; gap:0.8rem; align-items:start; font-size:0.9rem; }
.weights dt{ font-weight:600; color:var(--ink); line-height:1.6rem; }
.weights dd{ margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; }
.weights .bar{
  flex:none; width:calc(var(--w) * 0.4rem); height:1.6rem; border-radius:6px;
  display:grid; place-items:center; font-weight:700; font-size:0.8rem; color:#2a1a08; background:var(--lantern);
}
.weights .why{ color:var(--ink-soft); }
.chips{ list-style:none; margin-top:0.9rem; display:flex; flex-wrap:wrap; gap:0.45rem; }
.chips li{ padding:0.3rem 0.7rem; border-radius:999px; font-size:0.82rem; border:1px solid rgba(164,98,28,0.35); color:var(--ink); background:rgba(240,162,58,0.1); }
.chips li i{ font-style:normal; color:#a4621c; font-weight:600; }

.prize-list{ list-style:none; margin-top:1.4rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:0.8rem 1.6rem; }
.prize-list li{ padding-left:1rem; border-left:2px solid rgba(240,162,58,0.5); font-size:0.92rem; color:var(--text-soft); }
.prize-list b{ display:block; font-family:'Playfair Display', serif; font-style:italic; font-weight:600; font-size:1.05rem; color:var(--text); }
.prize-list li.sky{ border-left-color:rgba(185,166,255,0.6); }

.impact{ margin-top:clamp(2rem, 5vw, 3rem); display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.impact article{ padding:1.3rem 1.3rem 1.4rem; border-radius:18px; background:var(--night-2); border:1px solid var(--night-3); }
.impact h3{ font-size:1.12rem; }
.impact p{ margin-top:0.5rem; font-size:0.92rem; color:var(--text-soft); }

.next-pages{ margin-top:2rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; text-align:left; }
.next-page{
  display:block; padding:1.4rem 1.5rem; border-radius:18px; text-decoration:none;
  background:var(--night-2); border:1px solid var(--night-3); transition:border-color 0.3s ease, transform 0.3s ease;
}
.next-page:hover{ border-color:rgba(240,162,58,0.5); transform:translateY(-3px); }
.next-page small{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--lantern); }
.next-page b{ display:block; margin-top:0.3rem; font-family:'Playfair Display', serif; font-size:1.4rem; color:var(--text); }
.next-page span{ display:block; margin-top:0.3rem; font-size:0.9rem; color:var(--text-soft); }

/* hub teasers */
.teaser-thumbs{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:0.7rem; }
.teaser-thumbs img{ width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; display:block; border-radius:12px; border:1px solid var(--night-3); }
.teaser .hero-cta{ margin-top:1.6rem; }

@media (max-width:1100px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .impact{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:780px){
  .steps, .impact, .next-pages, .prize-list{ grid-template-columns:1fr; }
  .teaser-thumbs{ grid-template-columns:repeat(2, 1fr); }
  .weights div{ grid-template-columns:1fr; gap:0.3rem; }
  .weights dd{ align-items:flex-start; }
  .weights .bar{ width:calc(var(--w) * 0.25rem); min-width:2.2rem; }
}

/* valley: land figures */
.land-figs{ margin-top:1.2rem; display:grid; grid-template-columns:3fr 2fr; gap:1rem; align-items:start; }
@media (max-width:780px){ .land-figs{ grid-template-columns:1fr; } }

/* photography: views */
.views-grid{ margin-top:1.2rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.views-grid figure{ margin:0; border-radius:14px; overflow:hidden; background:var(--night-2); border:1px solid var(--night-3); }
.views-grid img{ width:100%; height:auto; display:block; }
.views-grid figcaption{ padding:0.7rem 0.85rem 0.85rem; font-size:0.84rem; line-height:1.45; color:var(--text-soft); }
.views-grid figcaption b{ display:block; margin-bottom:0.2rem; font-family:'Playfair Display', serif; font-style:italic; font-weight:600; font-size:1rem; color:var(--text); }
.views-h3{ font-size:clamp(1.3rem, 2.2vw, 1.6rem); }
@media (max-width:1100px){ .views-grid{ grid-template-columns:repeat(2, 1fr); } }

/* hub hero: the 62 key art, pinned right, its left edge fading into the night */
.hero.hero-62{ background:var(--night) url('../img/embers/hero-62-camp.jpg') right 38% / auto 100% no-repeat; }
.hero.hero-62::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(27,34,48,0.7) 0%, rgba(27,34,48,0) 40%); }
.hero.hero-62 .hero-body{ z-index:2; }
.hero.hero-62 h1{ font-size:clamp(3rem, 7.4vw, 6.2rem); }
@media (max-width:780px){
  .hero.hero-62{ background-size:auto 56%; background-position:70% 0; }
  .hero.hero-62::after{ background:linear-gradient(180deg, rgba(27,34,48,0) 30%, rgba(27,34,48,0.8) 50%, var(--night) 64%); }
}

/* mobile menu (Embers pages): a Menu button opens the links in a panel */
.nav{ position:relative; }
.nav-toggle{ display:none; }
@media (max-width:820px){
  .nav-toggle{
    display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer;
    padding:0.5rem 0.95rem; border-radius:999px;
    font:600 0.88rem/1 'DM Sans', sans-serif; color:var(--text);
    background:rgba(27,34,48,0.55); border:1px solid rgba(233,227,214,0.28);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .nav-toggle:focus-visible{ outline:2px solid var(--lantern); outline-offset:3px; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{
    display:block; width:16px; height:2px; border-radius:2px; background:currentColor; transition:transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-toggle-bars{ position:relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after{ content:""; position:absolute; left:0; }
  .nav-toggle-bars::before{ top:-5px; }
  .nav-toggle-bars::after{ top:5px; }
  .nav.open .nav-toggle-bars{ background:transparent; }
  .nav.open .nav-toggle-bars::before{ transform:translateY(5px) rotate(45deg); }
  .nav.open .nav-toggle-bars::after{ transform:translateY(-5px) rotate(-45deg); }
  .nav-links{
    display:none; position:absolute; top:calc(100% - 0.4rem); left:var(--gutter); right:var(--gutter);
    flex-direction:column; align-items:stretch; gap:0.1rem; padding:0.5rem;
    background:rgba(27,34,48,0.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--night-3); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.45);
  }
  .nav.open .nav-links{ display:flex; }
  .nav-links li{ display:block; }
  .nav-links a{ display:block; padding:0.8rem 1rem; border-radius:10px; font-size:1rem; color:var(--text); }
  .nav-links a:hover, .nav-links a:focus-visible{ background:rgba(233,227,214,0.07); }
  .nav-links a[aria-current="page"]{ box-shadow:none; color:var(--lantern); }
}