/* ============================================================
   SITE SHELL   bands, navigation, heroes, tiles, footer,
   and the two interactive modules that live on their own pages.
   ============================================================ */

/* ---------- bands and navigation --------------------------- */
.band {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: 0.55rem var(--gutter);
  background: var(--stamp); color: #fff;
  font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-ui); text-transform: uppercase; font-weight: 500;
}
.band b { font-weight: 700; letter-spacing: var(--track-wide); }
.band--foot { background: var(--ink-900); color: var(--bone-3); }
.band--foot b { color: var(--warm); }

.nav {
  position: sticky; top: 0; z-index: 70;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.7rem var(--gutter);
  background: rgba(41,45,51,0.95); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--f-ui); font-size: var(--t-label);
  letter-spacing: var(--track-tight); text-transform: uppercase;
}
.nav__id {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--bone); font-weight: 700; letter-spacing: var(--track-ui);
  text-decoration: none; white-space: nowrap;
}
.nav__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--stamp);
  box-shadow: 0 0 10px var(--stamp); animation: blip 2.4s var(--e-soft) infinite;
}
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .nav__dot { animation: none } }
.nav__links { display: flex; gap: clamp(.7rem,1.6vw,1.6rem); align-items: center; flex-wrap: wrap; }
.nav__links a {
  color: var(--bone-2); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color var(--d-1), border-color var(--d-1);
}
.nav__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav__links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 760px) {
  .nav { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav__links { font-size: var(--t-micro); gap: .7rem 1rem; }
}

/* ---------- heroes ----------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62vh; display: grid; align-items: end;
  padding: clamp(4rem,12vh,9rem) var(--gutter) clamp(2.5rem,6vh,4.5rem);
  background: #14171b;
}
.hero--home { min-height: 88vh; }
.hero__bg {
  position: absolute; inset: -3%; z-index: -2;
  background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(1.05);
  transform: scale(1.04);
  animation: drift 30s var(--e-soft) infinite alternate;
}
@keyframes drift { from { transform: scale(1.04) } to { transform: scale(1.13) translate3d(-1.5%,-1%,0) } }
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none } }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(16,19,22,.95) 0%, rgba(16,19,22,.45) 42%, rgba(16,19,22,.10) 78%),
    linear-gradient(to right, rgba(16,19,22,.72) 0%, rgba(16,19,22,0) 62%);
}
.hero__in { position: relative; z-index: 1; max-width: 54rem; }
.hero__kick {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-ui); font-size: var(--t-label);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: var(--s4);
}
.hero__kick::before { content: ''; width: 2.4rem; height: 2px; background: var(--accent); }
.hero h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -.025em;
  margin: 0 0 var(--s3); color: #f6f3ec;
}
/* the title on the home page is the loudest thing on the site */
.hero--home h1 {
  display: flex; flex-direction: column; gap: .1em;
  font-size: clamp(3rem, 10.5vw, 8rem);
  line-height: .84; letter-spacing: -.045em; text-transform: uppercase;
  margin-bottom: var(--s4);
}
.hero--home h1 .t3 { color: var(--warm); }
.hero--home .hero__sub {
  font-family: var(--f-ui); font-size: clamp(.85rem, 1.6vw, 1.15rem);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--bone-2); font-weight: 500;
  padding-top: var(--s3); border-top: 1px solid rgba(240,238,232,.28);
  max-width: 32rem; margin: 0 0 var(--s4);
}
.hero__sub {
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--warm); margin: 0 0 var(--s3);
}
.hero__lede { font-size: var(--t-md); color: #d6d1c7; max-width: 40rem; margin: 0; }
.hero__cue {
  position: absolute; right: var(--gutter); bottom: 1.6rem; z-index: 2;
  font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--bone-3);
}

/* ---------- sections and tiles ----------------------------- */
.sec { padding: var(--act-pad) var(--gutter); max-width: var(--wide); margin-inline: auto; }
.eyebrow {
  font-family: var(--f-ui); font-size: var(--t-label); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
  display: flex; gap: .8rem; align-items: center; font-weight: 700;
}
.eyebrow i {
  font-style: normal; background: var(--accent); color: #14171b;
  padding: .2rem .5rem; letter-spacing: var(--track-tight);
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); max-width: 12rem; }
h2 { font-size: var(--t-xxl); margin: 0 0 var(--s3); max-width: 24ch; }
.lede { font-size: var(--t-md); color: var(--bone-2); max-width: 40rem; }

.tiles {
  display: grid; gap: clamp(1rem,2vw,1.5rem); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(255px,100%), 1fr));
}
.tile {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  min-height: 16rem; border: 1px solid var(--rule-strong); isolation: isolate;
  transition: transform 380ms var(--e-snap), border-color 300ms var(--e-out);
}
.tile:hover, .tile:focus-visible { transform: translateY(-6px); border-color: var(--tint, var(--accent)); }
.tile:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }
.tile__bg {
  position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
  filter: saturate(.85); transition: transform 800ms var(--e-out), filter 500ms var(--e-out);
}
.tile:hover .tile__bg { transform: scale(1.07); filter: saturate(1.1); }
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,17,20,.96) 12%, rgba(14,17,20,.52) 55%, rgba(14,17,20,.18) 100%);
}
.tile__in { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.2rem 1.15rem; }
.tile__in b { display: block; font-family: var(--f-display); font-size: var(--t-lg); color: #f6f3ec; margin-bottom: .35rem; }
.tile__in i { display: block; font-style: normal; color: #cbc6bb; font-size: var(--t-sm); margin-bottom: .7rem; }
.tile__in em {
  font-style: normal; font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--tint, var(--accent)); font-weight: 700;
}

/* ---------- plates ----------------------------------------- */
.plate__in { max-width: 44rem; position: relative; z-index: 1; }
.plate__kick {
  font-family: var(--f-ui); font-size: var(--t-label); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
  display: flex; gap: .75rem; align-items: center; font-weight: 700;
}
.plate__kick::before { content: ''; width: 2.4rem; height: 2px; background: var(--accent); }

/* ---------- footer ----------------------------------------- */
.foot {
  padding: var(--s6) var(--gutter) var(--s4); font-family: var(--f-ui);
  font-size: var(--t-label); letter-spacing: var(--track-tight); text-transform: uppercase;
  color: var(--bone-3); display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; max-width: var(--wide); margin-inline: auto;
}
.foot a { color: var(--bone-2); text-decoration: none; margin-right: .8rem; border-bottom: 1px solid transparent; }
.foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none } }

/* ============================================================
   MODULE 1  the degradation slider
   ============================================================ */
.odeg {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem,3vw,3rem); align-items: center; margin-top: var(--s5);
  border: 1px solid var(--rule-strong); background: rgba(52,58,66,.5);
  padding: clamp(1.2rem,3vw,2.2rem);
}
@media (max-width: 820px) { .odeg { grid-template-columns: 1fr } }
.odeg__stage { position: relative; overflow: hidden; background: #0f1216; border: 1px solid var(--rule); }
.odeg__stage img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: opacity 340ms var(--e-out), filter 340ms var(--e-out);
}
.odeg__num {
  font-family: var(--f-display); font-size: clamp(3rem,7vw,5.5rem);
  line-height: 1; color: var(--warm); margin-bottom: .2rem;
}
.odeg__label {
  font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--bone); font-weight: 700; margin-bottom: var(--s3);
}
.odeg__note { color: var(--bone-2); font-size: var(--t-body); min-height: 6.5em; margin: 0 0 var(--s4); }
.odeg__ctl { display: block; }
.odeg__ctl input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--ink-700); outline: none; cursor: pointer;
}
.odeg__ctl input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--warm); border: 3px solid #1a1c1f; cursor: grab;
  box-shadow: 0 0 0 4px rgba(240,182,78,.25);
}
.odeg__ctl input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--warm);
  border: 3px solid #1a1c1f; cursor: grab; box-shadow: 0 0 0 4px rgba(240,182,78,.25);
}
.odeg__ctl input:focus-visible { outline: 3px solid var(--warm); outline-offset: 8px; }
.odeg__scale {
  display: flex; justify-content: space-between; margin-top: .7rem;
  font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--bone-4);
}
.odeg__scale span:nth-child(1) { text-align: left }
.odeg__scale span:nth-child(4) { text-align: right }

/* ============================================================
   MODULE 2  build a case
   ============================================================ */
.case {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: clamp(1.2rem,2.5vw,2.2rem); margin-top: var(--s5); align-items: start;
}
@media (max-width: 900px) { .case { grid-template-columns: 1fr } }
.case__grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(190px,100%),1fr)); }
.card-ev {
  position: relative; text-align: left; cursor: pointer; font: inherit;
  background: rgba(52,58,66,.62); border: 1px solid var(--rule-strong); color: var(--bone);
  padding: .85rem .9rem; min-height: 6.4rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color var(--d-1), background var(--d-1), transform 260ms var(--e-snap);
}
.card-ev:hover { border-color: var(--warm); transform: translateY(-3px); }
.card-ev:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }
.card-ev b {
  padding-right: 1.6rem;
  font-family: var(--f-ui); font-size: var(--t-label); letter-spacing: var(--track-tight);
  text-transform: uppercase; color: var(--bone); font-weight: 700; line-height: 1.35;
}
.card-ev i { font-style: normal; font-size: var(--t-micro); color: var(--bone-3); line-height: 1.5; }
.card-ev span.tick {
  position: absolute; top: .55rem; right: .55rem; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--rule-strong); display: grid; place-items: center;
  font-size: .7rem; color: transparent; transition: all var(--d-1);
}
.card-ev[aria-pressed="true"] { background: rgba(240,182,78,.16); border-color: var(--warm); }
.card-ev[aria-pressed="true"] span.tick { background: var(--warm); border-color: var(--warm); color: #1a1c1f; }
.card-ev[aria-pressed="true"] b { color: var(--warm); }

.case__panel {
  position: sticky; top: 5.5rem;
  border: 1px solid var(--rule-strong); background: rgba(52,58,66,.62);
  padding: clamp(1rem,2vw,1.4rem);
}
.case__meter { height: 10px; background: var(--ink-800); overflow: hidden; margin-bottom: var(--s3); }
.case__meter span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--stamp), var(--warm) 55%, var(--clinic));
  transition: width 420ms var(--e-out);
}
.case__verdict {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--warm); margin-bottom: .4rem;
}
.case__note { font-size: var(--t-sm); color: var(--bone-2); margin: 0 0 var(--s3); min-height: 5.2em; }
.case__list { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.case__list li {
  font-family: var(--f-ui); font-size: var(--t-micro); color: var(--bone-2);
  padding: .34rem 0; border-bottom: 1px dotted var(--rule);
  display: flex; gap: .5rem; align-items: baseline;
}
.case__list li::before { content: '✓'; color: var(--clinic); font-weight: 700; }
.case__reset {
  font-family: var(--f-ui); font-size: var(--t-micro); letter-spacing: var(--track-ui);
  text-transform: uppercase; font-weight: 700; cursor: pointer;
  background: none; border: 1px solid var(--rule-strong); color: var(--bone-2);
  padding: .5rem .9rem; transition: all var(--d-1);
}
.case__reset:hover { border-color: var(--warm); color: var(--warm); }

/* ============================================================
   HIDDEN THINGS
   Type 21, wildfire or lantern. None of it is load-bearing.
   ============================================================ */

/* ---------- redaction ------------------------------------- */
.redact {
  background: #14171b; color: transparent; padding: 0 .18em;
  border-radius: 1px; user-select: none;
  box-shadow: 0 0 0 1px rgba(20,23,27,.9);
  transition: background 520ms var(--e-out), color 520ms var(--e-out), box-shadow 520ms var(--e-out);
}
body.is-declassified .redact {
  background: rgba(240,182,78,.16); color: var(--warm);
  user-select: auto; box-shadow: inset 0 -1px 0 rgba(240,182,78,.6);
}
/* the blanked fields on the reverse of a file answer too */
body.is-declassified .rev__row i.is-blank::after,
body.is-declassified .lb__fields dd.is-blank::after { content: none; }
body.is-declassified .rev__row i.is-blank::before,
body.is-declassified .lb__fields dd.is-blank::before {
  content: 'Undecided'; color: #a3701a; font-style: normal;
}

/* ---------- shared overlay -------------------------------- */
.egg {
  position: fixed; inset: 0; z-index: 98; display: grid; place-items: center;
  padding: clamp(1rem,4vw,3rem); background: rgba(12,14,17,.9);
  backdrop-filter: blur(10px);
}
.egg[hidden] { display: none; }
.egg__x {
  position: absolute; top: .7rem; right: .7rem; z-index: 6;
  width: 2.6rem; height: 2.6rem; cursor: pointer;
  background: rgba(20,23,27,.75); border: 2px solid var(--rule-strong);
  color: var(--bone); font-family: var(--f-ui); font-size: 1rem;
}
.egg__x:hover { background: var(--stamp); border-color: var(--stamp); color: #fff; }

/* ---------- 21: restricted holdings ------------------------ */
.egg__sheet {
  position: relative; width: min(640px,100%); max-height: 88vh; overflow-y: auto;
  background: var(--paper); color: var(--paper-ink);
  border: 1px solid rgba(26,28,31,.4);
  box-shadow: 0 50px 110px -30px rgba(0,0,0,.9);
  padding: clamp(1.4rem,3vw,2.4rem);
  animation: eggin .5s var(--e-out) both;
}
@keyframes eggin { from { opacity:0; transform: translateY(18px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) { .egg__sheet { animation: none } }
.egg__slip {
  font-family: var(--f-ui); font-size: var(--t-micro); letter-spacing: var(--track-tight);
  text-transform: uppercase; color: #6b7078;
  padding-bottom: .8rem; margin-bottom: 1.1rem; border-bottom: 3px double rgba(26,28,31,.3);
}
.egg__slip b { display: block; color: #b23a20; font-weight: 700; letter-spacing: var(--track-ui); margin-top: .2rem; }
.egg__sheet h2 { font-size: var(--t-xl); color: var(--paper-ink); margin-bottom: .7rem; max-width: none; }
.egg__lede { font-size: var(--t-sm); color: #3c4045; margin: 0 0 var(--s4); }
.egg__rows { border-top: 2px solid rgba(26,28,31,.25); margin-bottom: var(--s4); }
.egg__row {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .6rem 0; border-bottom: 1px dotted rgba(26,28,31,.28);
  font-family: var(--f-ui); font-size: var(--t-micro);
}
.egg__row b { color: #6b7078; letter-spacing: var(--track-tight); text-transform: uppercase; font-weight: 600; }
.egg__row em {
  font-style: normal; color: #b23a20; font-weight: 700;
  letter-spacing: var(--track-tight); text-transform: uppercase; text-align: right;
}
.egg__row i { grid-column: 1 / -1; font-style: normal; font-family: var(--f-doc); color: var(--paper-ink); }
.egg__foot {
  font-family: var(--f-display); font-size: var(--t-md); color: #2f3236;
  border-left: 3px solid #a3701a; padding-left: 1rem; margin: 0;
}

/* ---------- lantern: the postcard -------------------------- */
.pc {
  position: relative; width: min(680px,100%); perspective: 1800px;
  animation: eggin .5s var(--e-out) both;
}
@media (prefers-reduced-motion: reduce) { .pc { animation: none } .pc__inner { transition: none } }
.pc__inner {
  display: grid; width: 100%; aspect-ratio: 3/2; padding: 0; border: 0; background: none;
  cursor: pointer; transform-style: preserve-3d;
  transition: transform 900ms var(--e-out);
}
.pc[data-turned="true"] .pc__inner { transform: rotateY(180deg); }
.pc__face {
  grid-area: 1/1; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.95); overflow: hidden;
}
.pc__front { background: #efe9da; padding: .6rem .6rem 2.4rem; position: relative; }
.pc__pic { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.pc__cap {
  position: absolute; left: .9rem; bottom: .7rem;
  font-family: var(--f-doc); font-size: var(--t-label); color: #3c352a;
}
.pc__back {
  transform: rotateY(180deg); background: #f3eee1;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem;
  padding: 1.3rem 1.2rem; position: relative;
}
.pc__back::before {
  content: ''; position: absolute; top: 12%; bottom: 12%; left: 52%; width: 1px; background: rgba(26,28,31,.25);
}
.pc__note {
  font-family: var(--f-doc); font-size: clamp(.82rem,1.45vw,1.02rem);
  color: #23201a; line-height: 1.75; align-self: center;
}
.pc__addr { align-self: end; display: grid; gap: 1.15rem; padding-bottom: .4rem; }
.pc__addr i { display: block; height: 1px; background: rgba(26,28,31,.3); }
.pc__stamp {
  position: absolute; top: 1rem; right: 1.2rem; width: 3.1rem; height: 3.7rem;
  border: 2px dashed rgba(26,28,31,.35); background: rgba(178,58,32,.09);
}
.pc__hint {
  text-align: center; margin: 1rem 0 0; font-family: var(--f-ui);
  font-size: var(--t-micro); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--bone-3);
}

/* ---------- the counter ------------------------------------ */
.egg-count {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 130%);
  z-index: 80; pointer-events: none;
  background: rgba(20,23,27,.94); border: 1px solid var(--warm);
  color: var(--bone-2); font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  padding: .6rem 1rem; transition: transform 520ms var(--e-out), opacity 520ms var(--e-out);
  opacity: 0;
}
.egg-count.is-on { transform: translate(-50%, 0); opacity: 1; }
.egg-count b { color: var(--warm); font-weight: 700; }
.egg-count.is-all { border-color: var(--clinic); }
.egg-count.is-all b { color: var(--clinic); }
/* the close control belongs beside the postcard, not on its stamp */
.egg--card .egg__x { top: -3.6rem; right: 0; }
@media (max-width: 520px) { .egg--card .egg__x { top: -3.2rem; width: 2.3rem; height: 2.3rem; } }

/* ---------- notification list ------------------------------ */
.notify { max-width: 46rem; text-align: center; }
.notify .eyebrow::after { content: none; }
.notify h2 { margin-inline: auto; }
.notify .lede { margin-inline: auto; }
.notify form { display: flex; gap: .6rem; margin-top: var(--s4); flex-wrap: wrap; justify-content: center; }
.notify input {
  flex: 1 1 17rem; background: var(--paper); border: 2px solid var(--rule-strong);
  color: var(--paper-ink); font-family: var(--f-doc); font-size: var(--t-ui); padding: .85rem 1rem;
}
.notify input:focus { outline: none; border-color: var(--warm); }
.notify button {
  background: var(--warm); border: 2px solid var(--warm); color: #1a1c1f;
  font-family: var(--f-ui); font-size: var(--t-label); letter-spacing: var(--track-ui);
  text-transform: uppercase; font-weight: 700; padding: .85rem 1.8rem; cursor: pointer;
  transition: background var(--d-1), border-color var(--d-1);
}
.notify button:hover { background: var(--highlight); border-color: var(--highlight); }


/* each gateway tile carries its destination's ink */
.tile { --tint: var(--accent); }
.tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: var(--tint); opacity: .85; transition: height 300ms var(--e-out);
}
.tile:hover::before { height: 7px; opacity: 1; }
.tile[href="/people/"]   { --tint: #7cb2ec; }
.tile[href="/evidence/"] { --tint: #3fcfb4; }
.tile[href="/map/"]      { --tint: #b49ae8; }
.tile[href="/archive/"]  { --tint: #ef7a52; }

/* ---------- what this is, and what to do about it ---------- */
.hero__what {
  font-family: var(--f-ui); font-size: var(--t-label);
  letter-spacing: .06em; color: #e6e1d6; margin: 0 0 var(--s3);
  padding-left: .9rem; border-left: 3px solid var(--accent);
}
.hero__act { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--s4); }
.hero__act-note {
  font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: .04em; color: #b9b4a9;
}
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--accent); color: #14171b; text-decoration: none;
  font-family: var(--f-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--track-ui); text-transform: uppercase;
  padding: .85rem 1.5rem; border: 2px solid var(--accent);
  transition: transform 240ms var(--e-snap), box-shadow 240ms var(--e-out), background 200ms;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9);
}
.btn:hover { transform: translateY(-2px); background: var(--highlight); border-color: var(--highlight); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn::after { content: '\2192'; font-size: 1.05em; }

/* ---------- the letter, driven by the scroll --------------- */
.odeg {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem,3vw,3rem); align-items: center; margin-top: var(--s5);
  border: 1px solid var(--rule-strong); background: rgba(52,58,66,.5);
  padding: clamp(1.2rem,3vw,2.2rem);
}
@media (max-width: 820px) { .odeg { grid-template-columns: 1fr } }
.odeg__stage { position: relative; overflow: hidden; background: #0f1216; border: 1px solid var(--rule); aspect-ratio: 1/1; }
.odeg__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 420ms var(--e-out);
}
.odeg__stage img.is-on { opacity: 1; }
.odeg__track {
  display: flex; gap: 4px; margin-top: var(--s4);
}
.odeg__track span {
  flex: 1; height: 4px; background: var(--ink-700); position: relative; overflow: hidden;
}
.odeg__track span i {
  position: absolute; inset: 0 100% 0 0; background: var(--accent);
  transition: right 260ms linear;
}
.odeg__scale {
  display: flex; justify-content: space-between; margin-top: .6rem;
  font-family: var(--f-ui); font-size: var(--t-micro);
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--bone-4);
}
.odeg__scale b { color: var(--accent); font-weight: 700; }
.odeg__num { font-family: var(--f-display); font-size: clamp(2.6rem,5vw,4rem); line-height: 1; color: var(--accent); }
.odeg__label {
  font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--bone); font-weight: 700; margin: .2rem 0 var(--s3);
}
.odeg__note { color: var(--bone-2); font-size: var(--t-body); min-height: 7.5em; margin: 0; }
.odeg__cue {
  font-family: var(--f-ui); font-size: var(--t-micro); letter-spacing: var(--track-ui);
  text-transform: uppercase; color: var(--accent); margin-top: var(--s3);
  display: flex; align-items: center; gap: .5rem;
}
.odeg__cue::before { content: '\2193'; animation: nudge 1.8s var(--e-soft) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }
@media (prefers-reduced-motion: reduce) { .odeg__cue::before { animation: none } }

/* the map deserves the width of the page, not a text column */
:root:has(.nav__links a[href="/map/"][aria-current]) .sec#map { max-width: 96rem; }
/* the contact board is a wide photograph; stop cropping the people out of it */
:root:has(.nav__links a[href="/map/"][aria-current]) .hero__bg { background-size: contain; background-repeat: no-repeat; background-color: #0e1114; }
@media (max-width: 900px) { :root:has(.nav__links a[href="/map/"][aria-current]) .hero__bg { background-size: cover; } }
.odeg__scale span, .odeg__scale b { font-weight: 400; color: var(--bone-4); font-style: normal; transition: color 300ms var(--e-out); }
.odeg__scale .is-now { color: var(--accent); font-weight: 700; }