/* ═══════════════════════════════════════════════════════════════════════
   DARK TIDES LEGENDS — the shared attraction system
   Loaded after styles.css. Everything here is namespaced `lg-` or `ev-` so
   it can sit on any page without colliding with the shop or the vault.

   This file is the *system*: navigation, atmosphere, section furniture, the
   evidence badge, and the eight rooms of a legend page. The four deep
   experiences live in legend-scenes.css so a visitor who never opens one
   never downloads it.
   ═══════════════════════════════════════════════════════════════════════ */

.legend-page{
  /* ── palette ──────────────────────────────────────────────────────── */
  --lg-ink:      #05060a;
  --lg-deep:     #080a10;
  --lg-navy:     #0a0f17;
  --lg-storm:    #0e141d;
  --lg-panel:    #0c0e13;
  --lg-panel-2:  #11141a;
  --lg-timber:   #14110c;

  --lg-brass:    #c9a961;
  --lg-brass-hi: #e3c88a;
  --lg-brass-lo: #8b7440;
  --lg-copper:   #a8703f;
  --lg-ember:    #d1592c;
  --lg-oxblood:  #6d1d17;
  --lg-teal:     #0c2b34;

  --lg-parch:    #ddd3bb;
  --lg-text:     #b9b2a4;
  --lg-mute:     #8a8478;

  --lg-hair:     rgba(201,169,97,.20);
  --lg-hair-2:   rgba(201,169,97,.10);
  --lg-glass:    rgba(9,11,15,.82);

  --lg-nav-h:    68px;
  --lg-gut:      clamp(20px, 4.4vw, 84px);
  --lg-max:      1560px;

  --lg-ease:     cubic-bezier(.22,.61,.36,1);
  --lg-ease-out: cubic-bezier(.16,.84,.44,1);

  background:var(--lg-ink);
  color:var(--lg-text);
}

.legend-page h1,.legend-page h2,.legend-page h3,.legend-page h4{
  font-family:var(--display); color:var(--cream);
  font-weight:600; letter-spacing:.02em; line-height:1.06;
  text-transform:uppercase; margin:0;
}

html.is-locked{ overflow:hidden; padding-right:var(--scrollbar-gap,0); }

.legend-page ::selection{ background:rgba(201,169,97,.28); color:#fff; }

.legend-page :focus-visible{
  outline:2px solid var(--lg-brass-hi);
  outline-offset:3px;
  border-radius:1px;
}

/* ═══ ATMOSPHERE ══════════════════════════════════════════════════════
   Three cheap layers. Nothing here paints on every frame except the ember
   canvas, which stops itself when the hero leaves the viewport. */

.lg-atmos{ position:fixed; inset:0; z-index:2; pointer-events:none; }

.lg-fog{
  position:absolute; inset:-20%;
  background:
    radial-gradient(60% 40% at 18% 22%, rgba(120,150,170,.055), transparent 68%),
    radial-gradient(52% 46% at 84% 68%, rgba(150,120,80,.045), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(10,20,28,.55), transparent 62%);
  animation:lgDrift 46s var(--lg-ease) infinite alternate;
  will-change:transform;
}
.lg-fog.is-b{ animation-duration:71s; animation-direction:alternate-reverse; opacity:.7; }
@keyframes lgDrift{
  from{ transform:translate3d(-2.5%,1.5%,0) scale(1.04); }
  to  { transform:translate3d(3%,-2%,0) scale(1.11); }
}

.lg-embers{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }

.lg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 92% at 50% 46%, transparent 42%, rgba(3,4,6,.62) 100%);
}

/* ═══ NAVIGATION ═════════════════════════════════════════════════════ */

.lg-nav{
  position:fixed; inset:0 0 auto; z-index:60;
  height:var(--lg-nav-h);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,40px);
  padding:0 var(--lg-gut);
  color:var(--lg-parch);
  background:linear-gradient(to bottom, rgba(4,5,8,.72), rgba(4,5,8,0));
  transition:background .5s var(--lg-ease), box-shadow .5s var(--lg-ease),
             height .5s var(--lg-ease), backdrop-filter .5s var(--lg-ease);
}
.lg-nav.is-stuck{
  height:56px;
  background:var(--lg-glass);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--lg-hair-2), 0 18px 40px -30px #000;
}

.lg-brand{
  display:flex; flex-direction:column; line-height:1; gap:4px;
  font-family:var(--display); color:var(--cream);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(12px,1.15vw,15px);
}
.lg-brand small{
  font-family:var(--ui); font-size:8.5px; letter-spacing:.44em;
  color:var(--lg-brass-lo); font-weight:300;
}

.lg-links{ display:flex; align-items:center; gap:clamp(12px,1.9vw,30px); margin-inline:auto; }
.lg-links a{
  position:relative; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--lg-text); padding:8px 2px; transition:color .35s var(--lg-ease);
}
.lg-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--lg-brass); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--lg-ease);
}
.lg-links a:hover,.lg-links a[aria-current]{ color:var(--cream); }
.lg-links a:hover::after,.lg-links a[aria-current]::after{ transform:scaleX(1); }

.lg-util{ display:flex; align-items:center; gap:6px; }
.lg-util button,.lg-util a{
  display:grid; place-items:center; width:38px; height:38px;
  color:var(--lg-text); position:relative;
  transition:color .35s var(--lg-ease);
}
.lg-util button:hover,.lg-util a:hover{ color:var(--lg-brass-hi); }
.lg-util svg{ width:19px; height:19px; }
.lg-util .cart-count{
  position:absolute; top:4px; right:2px; min-width:15px; height:15px;
  display:grid; place-items:center; padding:0 3px;
  font-size:9px; letter-spacing:0; border-radius:8px;
  background:var(--lg-brass); color:#0a0a0c;
}

.lg-burger{ display:none; width:40px; height:40px; place-items:center; }
.lg-burger span{ display:block; width:20px; height:1px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor; }

/* mobile drawer */
.lg-drawer{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(4,5,8,.96);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:calc(var(--lg-nav-h) + 22px) var(--lg-gut) 40px;
  flex-direction:column; gap:6px;
}
.lg-drawer[data-open]{ display:flex; animation:lgFade .35s var(--lg-ease); }
.lg-drawer a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--lg-hair-2);
  font-family:var(--display); font-size:20px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cream);
}
.lg-drawer a i{ font-style:normal; font-family:var(--ui); font-size:10px; letter-spacing:.3em; color:var(--lg-brass-lo); }
.lg-drawer__close{ position:absolute; top:14px; right:var(--lg-gut); width:44px; height:44px; display:grid; place-items:center; color:var(--lg-parch); }
@keyframes lgFade{ from{ opacity:0 } to{ opacity:1 } }

/* ═══ PROGRESS RAIL ══════════════════════════════════════════════════ */

.lg-rail{
  position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; transition:opacity .6s var(--lg-ease);
}
.lg-rail.is-on{ opacity:1; }
.lg-rail a{
  display:flex; align-items:center; gap:10px; padding:5px 4px;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-mute);
  transition:color .35s var(--lg-ease);
}
.lg-rail i{
  width:16px; height:1px; background:currentColor; opacity:.5;
  transition:width .45s var(--lg-ease), opacity .45s var(--lg-ease);
}
.lg-rail b{ font-weight:400; font-variant-numeric:tabular-nums; opacity:.75; }
.lg-rail span{
  max-width:0; overflow:hidden; white-space:nowrap;
  transition:max-width .5s var(--lg-ease), opacity .4s var(--lg-ease); opacity:0;
}
.lg-rail:hover span,.lg-rail a:focus-visible span{ max-width:180px; opacity:1; }
.lg-rail a:hover,.lg-rail a[aria-current]{ color:var(--lg-brass-hi); }
.lg-rail a[aria-current] i{ width:28px; opacity:1; }

/* ═══ SECTION FURNITURE ══════════════════════════════════════════════ */

.lg-main{ position:relative; z-index:3; }

.lg-sec{ position:relative; padding:clamp(64px,7.4vw,124px) var(--lg-gut); }
.lg-sec > *{ position:relative; z-index:2; }
.lg-inner{ max-width:var(--lg-max); margin-inline:auto; }

.lg-ground{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.lg-ground img{
  width:100%; height:100%; object-fit:cover; opacity:.34;
  transform:scale(1.06); will-change:transform;
}
.lg-ground::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--lg-ink), rgba(6,7,10,.55) 22%,
             rgba(6,7,10,.6) 76%, var(--lg-ink));
}

.lg-head{ max-width:var(--lg-max); margin:0 auto clamp(38px,4.6vw,72px); text-align:center; }
.lg-head.is-left{ text-align:left; }
.lg-eyebrow{
  font-size:10px; letter-spacing:.44em; text-transform:uppercase;
  color:var(--lg-brass-lo); margin-bottom:16px;
}
.lg-title{ font-size:clamp(28px,4.4vw,62px); }
.lg-title em{ font-style:normal; display:block; color:var(--lg-brass); font-size:.52em; letter-spacing:.16em; margin-top:14px; }
.lg-standfirst{
  max-width:62ch; margin:20px auto 0; font-size:clamp(14px,1.1vw,16px);
  line-height:1.78; color:var(--lg-text);
}
.lg-head.is-left .lg-standfirst{ margin-inline:0; }

/* the ornament that separates the rooms */
.lg-orn{ display:flex; align-items:center; justify-content:center; gap:16px; margin:18px auto 0; color:var(--lg-brass-lo); }
.lg-orn::before,.lg-orn::after{ content:''; height:1px; width:min(120px,16vw); background:linear-gradient(to right, transparent, currentColor); }
.lg-orn::after{ background:linear-gradient(to left, transparent, currentColor); }
.lg-orn svg{ width:16px; height:16px; opacity:.85; }

/* transitions between rooms — a brass rail and a breath of fog */
.lg-seam{ position:relative; height:0; }
.lg-seam::before{
  content:''; position:absolute; left:var(--lg-gut); right:var(--lg-gut); top:0; height:1px;
  background:linear-gradient(to right, transparent, var(--lg-hair) 18%, var(--lg-hair) 82%, transparent);
}
.lg-seam::after{
  content:''; position:absolute; left:50%; top:-5px; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid var(--lg-hair); background:var(--lg-ink);
}

/* buttons */
.lg-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; border:1px solid rgba(201,169,97,.42);
  background:linear-gradient(180deg, rgba(109,29,23,.42), rgba(52,14,11,.5));
  color:var(--cream); font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
  transition:background .45s var(--lg-ease), border-color .45s var(--lg-ease),
             color .45s var(--lg-ease), transform .45s var(--lg-ease);
}
.lg-btn:hover{ background:linear-gradient(180deg, rgba(140,40,30,.6), rgba(70,20,15,.62)); border-color:var(--lg-brass); color:#fff; }
.lg-btn:active{ transform:translateY(1px); }
.lg-btn.is-ghost{ background:rgba(12,14,19,.5); border-color:var(--lg-hair); }
.lg-btn.is-ghost:hover{ background:rgba(20,24,32,.75); border-color:var(--lg-brass); }
.lg-btn svg{ width:14px; height:14px; }

.lg-more{
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--lg-brass);
  padding-bottom:5px; border-bottom:1px solid rgba(201,169,97,.34);
  transition:color .35s var(--lg-ease), border-color .35s var(--lg-ease), gap .35s var(--lg-ease);
}
.lg-more:hover{ color:var(--lg-brass-hi); border-color:var(--lg-brass-hi); gap:16px; }

/* the reusable frame — square corners, thin brass, inner shadow */
.lg-frame{
  position:relative;
  background:linear-gradient(180deg, var(--lg-panel-2), var(--lg-panel));
  border:1px solid var(--lg-hair);
  box-shadow:inset 0 1px 0 rgba(233,226,212,.045), inset 0 -30px 60px -40px #000;
}
.lg-frame::before,.lg-frame::after{
  content:''; position:absolute; width:11px; height:11px; pointer-events:none;
  border:1px solid rgba(201,169,97,.5);
}
.lg-frame::before{ top:5px; left:5px; border-right:0; border-bottom:0; }
.lg-frame::after{ bottom:5px; right:5px; border-left:0; border-top:0; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--lg-ease), transform .95s var(--lg-ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s }
[data-reveal][data-delay="2"]{ transition-delay:.2s }
[data-reveal][data-delay="3"]{ transition-delay:.3s }
[data-reveal][data-delay="4"]{ transition-delay:.4s }
[data-reveal][data-delay="5"]{ transition-delay:.5s }

/* ═══ EVIDENCE BADGE ═════════════════════════════════════════════════ */

.ev-wrap{ position:relative; display:inline-flex; }
.ev-row{ display:flex; flex-wrap:wrap; gap:8px; }

.ev-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 9px;
  border:1px solid rgba(201,169,97,.3);
  background:rgba(9,11,15,.7);
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lg-parch); white-space:nowrap; cursor:help;
  transition:border-color .3s var(--lg-ease), background .3s var(--lg-ease);
}
.ev-badge:hover{ border-color:var(--lg-brass); background:rgba(18,21,28,.9); }
.ev-badge.is-compact{ padding:3px 8px; font-size:8.5px; letter-spacing:.18em; }
.ev-dot{ width:6px; height:6px; flex:none; transform:rotate(45deg); background:currentColor; }
.ev-solid .ev-dot{ color:#8fae7a; }
.ev-mid   .ev-dot{ color:var(--lg-brass); }
.ev-warn  .ev-dot{ color:#c8813d; }
.ev-weak  .ev-dot{ color:#9a6a63; }
.ev-solid{ border-color:rgba(143,174,122,.32); }
.ev-warn { border-color:rgba(200,129,61,.34); }
.ev-weak { border-color:rgba(154,106,99,.34); }

.ev-pop{
  position:absolute; z-index:80; left:0; top:calc(100% + 9px);
  width:min(280px,72vw); padding:14px 15px;
  background:rgba(8,10,14,.98); border:1px solid var(--lg-hair);
  box-shadow:0 30px 60px -30px #000;
  display:flex; flex-direction:column; gap:7px;
  font-size:12px; line-height:1.62; color:var(--lg-text); text-transform:none; letter-spacing:0;
  animation:lgPop .24s var(--lg-ease-out);
}
.ev-pop b{ font-family:var(--display); font-size:11px; letter-spacing:.16em; color:var(--lg-brass-hi); text-transform:uppercase; }
.ev-pop em{ font-style:italic; color:var(--lg-mute); }
@keyframes lgPop{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ═══ 01 · HERO ══════════════════════════════════════════════════════ */

.lg-hero{
  /* Height tracks the hero clip's 2.1:1 aspect rather than the viewport.
     `cover` scales to whichever edge needs more, so every pixel of box height
     past width/2.1 is pure magnification of the source — which is what made
     the footage look soft at 100svh on a wide screen. The svh cap keeps it off
     the bottom of a short laptop screen; the px floor stops the headline and
     the card crowding on a narrow one. */
  position:relative; min-height:clamp(560px, 48vw, 92svh); display:grid;
  grid-template-columns:1fr; align-items:end;
  padding:calc(var(--lg-nav-h) + 40px) var(--lg-gut) clamp(96px,13vh,150px);
  overflow:hidden; isolation:isolate;
}
.lg-hero__media{ position:absolute; inset:0; z-index:-2; }
.lg-hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:52% 42%;
  transform:scale(1.06); will-change:transform;
}
.lg-hero__video{
  /* z-index 1, not -2: this sits inside .lg-hero__media, which is itself at
     -2, so a negative index here would bury the clip behind its own poster
     still. The page scrim is a sibling of the media wrapper and stays on top
     of both. */
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:52% 42%;
  opacity:0; transition:opacity 1.5s var(--lg-ease);
  pointer-events:none;
}
.lg-hero__video.is-ready{ opacity:1; }

.lg-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(4,5,8,.94) 0%, rgba(4,5,8,.72) 26%, rgba(4,5,8,.16) 52%, rgba(4,5,8,.42) 100%),
    linear-gradient(to top, rgba(4,5,8,.95), transparent 42%);
}
.lg-hero__body{ max-width:640px; }
.lg-hero__kicker{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--lg-brass);
}
.lg-hero__kicker::before{ content:''; width:44px; height:1px; background:currentColor; }
.lg-hero h1{
  font-size:clamp(46px,8.6vw,124px); line-height:.92; letter-spacing:.015em;
  color:var(--cream);
  text-shadow:0 4px 40px rgba(0,0,0,.7);
}
.lg-hero__sub{
  display:block; margin-top:14px; font-size:clamp(15px,2.3vw,30px);
  letter-spacing:.19em; color:var(--lg-brass); font-weight:500;
}
.lg-hero__lede{ margin:26px 0 0; max-width:40ch; font-size:clamp(14px,1.15vw,17px); line-height:1.7; color:var(--lg-parch); }
.lg-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:34px; }

.lg-hero__card{
  position:absolute; right:var(--lg-gut); top:50%; transform:translateY(-50%);
  width:246px; padding:26px 24px; text-align:center;
  background:rgba(7,9,13,.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid var(--lg-hair);
}
.lg-hero__card .yr{ font-family:var(--display); font-size:26px; letter-spacing:.1em; color:var(--cream); text-transform:uppercase; }
.lg-hero__card p{ margin:0; }
.lg-hero__card .k{ font-size:9.5px; letter-spacing:.34em; color:var(--lg-brass-lo); text-transform:uppercase; margin-top:8px; }
.lg-hero__card hr{ border:0; border-top:1px solid var(--lg-hair); margin:18px 0; }
.lg-hero__card .body{ font-size:12.5px; line-height:1.7; color:var(--lg-mute); }
.lg-hero__card .here{ margin-top:18px; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--lg-ember); }
.lg-hero__card .where{ margin-top:6px; font-size:12px; line-height:1.8; color:var(--lg-parch); }

.lg-ambience{
  position:absolute; left:var(--lg-gut); bottom:clamp(16px,3vh,34px);
  display:inline-flex; align-items:center; gap:10px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--lg-mute);
  padding:9px 14px; border:1px solid var(--lg-hair-2); background:rgba(7,9,13,.5);
  transition:color .35s var(--lg-ease), border-color .35s var(--lg-ease);
}
.lg-ambience:hover{ color:var(--lg-parch); border-color:var(--lg-hair); }
.lg-ambience svg{ width:15px; height:15px; }
.lg-ambience .ico-on{ display:none; }
.lg-ambience[aria-pressed="true"] .ico-on{ display:block; }
.lg-ambience[aria-pressed="true"] .ico-off{ display:none; }
.lg-ambience[aria-pressed="true"]{ color:var(--lg-brass); border-color:rgba(201,169,97,.34); }

.lg-scrollcue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(to bottom, transparent, var(--lg-brass));
  opacity:.6;
}
.lg-scrollcue::after{
  content:''; position:absolute; left:50%; top:0; width:1px; height:16px;
  background:var(--lg-brass-hi); transform:translateX(-50%);
  animation:lgCue 2.6s var(--lg-ease) infinite;
}
@keyframes lgCue{ 0%{ top:-16px; opacity:0 } 30%{ opacity:1 } 100%{ top:52px; opacity:0 } }

/* ═══ 02 · WHO WAS EDWARD TEACH ══════════════════════════════════════ */

.lg-profile{ background:linear-gradient(180deg, var(--lg-ink), var(--lg-deep) 40%, var(--lg-ink)); }

/* One engraved plate. The gilt border and the figure are both painted into
   the artwork, so the panel holds the artwork's own aspect ratio rather than
   cropping the border off, and everything inside is sized in `cqw` — a
   fraction of the panel, not of the viewport — so the composition John drew
   holds at every width instead of only at the one he drew it at. */
/* NOTE: a container does not query itself. `cqw` inside .lg-who's own
   declarations resolves against its ancestor, not against the panel, so the
   panel's own grid, gaps and padding are percentages — which mean the same
   thing here — and only the descendants use cqw. */
.lg-who{
  position:relative; container-type:inline-size;
  aspect-ratio:1916/821; display:grid; align-items:center;
  grid-template-columns:31% minmax(0,1fr) 39%;
  gap:2.6%; padding:6% 3.2% 6% 0;
}
.lg-who__plate{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover; object-position:left center;
}
.lg-who__plate.is-narrow{ display:none; }

.lg-who__copy{ grid-column:2; }
.lg-who__copy .lg-eyebrow{ font-size:clamp(8.5px,.7cqw,11px); letter-spacing:.28em; line-height:1.7; }
/* Two sizes in one heading, as John drew it: the question is the small line
   and the name is the big one. */
.lg-who__copy h2{
  margin-top:1cqw; font-size:clamp(19px,2cqw,33px); line-height:1.08;
  letter-spacing:.02em;
}
.lg-who__copy h2 span{
  display:block; font-size:.62em; letter-spacing:.09em; color:var(--lg-parch);
  margin-bottom:.16em;
}
.lg-who__copy p{
  margin:1.6cqw 0 0; font-size:clamp(12.5px,.94cqw,15.5px); line-height:1.74;
  color:var(--lg-parch);
}
.lg-who__cta{
  display:inline-flex; align-items:center; gap:.9cqw;
  margin-top:2.4cqw; padding:1.1cqw 2cqw;
  border:1px solid var(--lg-brass-lo); color:var(--lg-brass-hi);
  font-family:var(--display); font-size:clamp(9.5px,.8cqw,13px);
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  transition:border-color .35s var(--lg-ease), background .35s var(--lg-ease), color .35s var(--lg-ease);
}
.lg-who__cta svg{ width:1.3cqw; min-width:13px; height:auto; transition:transform .35s var(--lg-ease); }
.lg-who__cta:hover{ border-color:var(--lg-brass); background:rgba(201,169,97,.09); color:var(--cream); }
.lg-who__cta:hover svg{ transform:translateX(4px); }

/* the six tiles. Each one is a complete engraving — frame, mark and label —
   so the button holds no text of its own; see mountProfile for why, and what
   it costs. */
.lg-tiles{
  grid-column:3; display:grid; gap:1.5cqw;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.lg-tile{
  display:block; width:100%; cursor:pointer; padding:0; border:0; background:none;
  transition:transform .45s var(--lg-ease), filter .45s var(--lg-ease);
}
.lg-tile img{ display:block; width:100%; height:auto; }
.lg-tile:hover,.lg-tile:focus-visible{ transform:translateY(-3px); filter:brightness(1.16); }
.lg-tile:focus-visible{ outline:1px solid var(--lg-brass); outline-offset:4px; }

/* what the plate cannot hold: the second half of the argument, and the note
   that the face above it is somebody's guess */
.lg-who__under{
  display:grid; gap:clamp(18px,2.4vw,44px); margin-top:clamp(22px,2.4vw,38px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start;
}
.lg-who__more{ margin:0; font-size:14px; line-height:1.85; color:var(--lg-text); }
.lg-who__note{
  margin:0; padding-left:16px; border-left:1px solid var(--lg-hair);
  font-size:11.5px; letter-spacing:.05em; line-height:1.75; color:var(--lg-mute);
}

/* ═══ 03 · THE WORLD HE ENTERED ══════════════════════════════════════ */

.lg-chart{ background:var(--lg-navy); }
.lg-chart .lg-ground img{ opacity:.5; }

.lg-chart__grid{
  display:grid; gap:clamp(20px,2.6vw,44px);
  grid-template-columns:minmax(0,1.42fr) minmax(300px,.58fr);
  align-items:start;
}

.lg-chart__stage{
  position:relative; padding:16px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(18,42,52,.6), rgba(6,12,18,.9)),
    var(--lg-teal);
  border:1px solid var(--lg-hair);
}
.lg-chart__stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px 20px rgba(3,6,9,.75);
}
.lg-chart__svgwrap{ position:relative; aspect-ratio:1000/997; }
.lg-chart__svgwrap .lg-chart__hint{ position:absolute; inset:auto 0 50% 0; text-align:center; }
.lg-chart svg.lg-chart__svg{ display:block; width:100%; height:auto; }

.lg-chart .cs-sea{ fill:none; }
.lg-chart .cs-grat{ stroke:rgba(201,169,97,.16); stroke-width:.7; fill:none; }
.lg-chart .cs-land{ fill:#161309; stroke:rgba(201,169,97,.5); stroke-width:1.1; stroke-linejoin:round; }
.lg-chart .cs-halo{ fill:none; stroke:rgba(201,169,97,.12); stroke-width:5; }

.lg-chart .cs-route{
  fill:none; stroke:var(--lg-brass); stroke-width:1.7; stroke-linecap:round;
  stroke-dasharray:7 7; opacity:.72;
}
.lg-chart .cs-route.is-adversary{ stroke:#9fb6c4; stroke-dasharray:3 6; }
.lg-chart .cs-route.is-draw{ stroke-dashoffset:0; animation:lgRoute 2.4s var(--lg-ease) forwards; }
@keyframes lgRoute{ from{ stroke-dashoffset:var(--len) } to{ stroke-dashoffset:0 } }
.lg-chart .cs-route-hit{ fill:none; stroke:transparent; stroke-width:16; cursor:pointer; }
.lg-chart .cs-route.is-hot{ opacity:1; stroke-width:2.4; }

.lg-marker{
  position:absolute; transform:translate(-50%,-50%);
  width:34px; height:34px; display:grid; place-items:center;
  color:var(--lg-brass); cursor:pointer; border:0; background:none;
}
.lg-marker::before{
  content:''; position:absolute; inset:9px;
  background:currentColor; transform:rotate(45deg);
  transition:transform .4s var(--lg-ease-out), box-shadow .4s var(--lg-ease);
}
.lg-marker::after{
  content:''; position:absolute; inset:2px; border:1px solid currentColor;
  border-radius:50%; opacity:0; transform:scale(.6);
  transition:opacity .45s var(--lg-ease), transform .45s var(--lg-ease-out);
}
.lg-marker:hover::before,.lg-marker:focus-visible::before,.lg-marker[aria-pressed="true"]::before{
  transform:rotate(45deg) scale(1.32); box-shadow:0 0 16px 3px rgba(201,169,97,.5);
}
.lg-marker:hover::after,.lg-marker:focus-visible::after,.lg-marker[aria-pressed="true"]::after{ opacity:.8; transform:scale(1); }
.lg-marker[data-cat="historic-event"]{ color:var(--lg-ember); }
.lg-marker[data-cat="colonial-site"]{ color:#9fb6c4; }
.lg-marker[data-cat="major-port"]{ color:var(--lg-brass-hi); }
.lg-marker .lg-marker__name{
  position:absolute; left:26px; top:50%; transform:translateY(-50%);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lg-parch); white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 6px #000, 0 0 14px #000;
}
.lg-marker[data-side="left"] .lg-marker__name{ left:auto; right:26px; }
.lg-marker[data-label="off"] .lg-marker__name{ opacity:0; transition:opacity .3s var(--lg-ease); }
.lg-marker[data-label="off"]:hover .lg-marker__name,
.lg-marker[data-label="off"]:focus-visible .lg-marker__name,
.lg-marker[data-label="off"][aria-pressed="true"] .lg-marker__name{ opacity:1; }

.lg-chart__tip{
  position:absolute; z-index:12; width:min(268px,66vw); padding:14px 16px;
  background:rgba(6,9,13,.97); border:1px solid var(--lg-hair);
  box-shadow:0 26px 54px -28px #000; pointer-events:none;
  transform:translate(-50%,-100%); margin-top:-16px;
}
.lg-chart__tip[hidden]{ display:none; }
.lg-chart__tip b{ display:block; font-family:var(--display); font-size:12px; letter-spacing:.14em; color:var(--cream); text-transform:uppercase; }
.lg-chart__tip small{ display:block; margin-top:3px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-chart__tip p{ margin:9px 0 0; font-size:12px; line-height:1.66; }

.lg-chart__panel{ position:sticky; top:calc(var(--lg-nav-h) + 20px); padding:26px 24px; }
.lg-chart__panel h3{ font-size:20px; letter-spacing:.08em; }
.lg-chart__panel .place{ margin-top:5px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-chart__panel .blurb{ margin:16px 0 0; font-size:13.5px; line-height:1.75; color:var(--lg-parch); }
.lg-chart__panel .detail{ margin:12px 0 0; font-size:13px; line-height:1.75; }
.lg-chart__panel .ev-row{ margin-top:16px; }
.lg-chart__panel .lg-btn{ margin-top:20px; }
.lg-chart__hint{ font-size:11.5px; line-height:1.7; color:var(--lg-mute); }

.lg-key{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; }
.lg-key li{ display:flex; align-items:center; gap:9px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--lg-mute); }
.lg-key i{ width:8px; height:8px; transform:rotate(45deg); background:currentColor; }
.lg-key .k-port{ color:var(--lg-brass-hi); }
.lg-key .k-activity{ color:var(--lg-brass); }
.lg-key .k-event{ color:var(--lg-ember); }
.lg-key .k-colonial{ color:#9fb6c4; }
.lg-key .k-route i{ width:20px; height:1px; transform:none; background:repeating-linear-gradient(to right, currentColor 0 5px, transparent 5px 10px); }

.lg-note{
  margin-top:18px; padding-left:14px; border-left:1px solid var(--lg-hair);
  font-size:11.5px; line-height:1.72; color:var(--lg-mute); font-style:italic;
}

/* ═══ 04 · THE RISE ══════════════════════════════════════════════════ */

.lg-time{ background:linear-gradient(180deg, var(--lg-ink), var(--lg-storm) 55%, var(--lg-ink)); }
.lg-time__scroller{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:34px 0 26px; margin:0 calc(var(--lg-gut) * -1); padding-inline:var(--lg-gut);
  scrollbar-width:thin; scrollbar-color:rgba(201,169,97,.4) transparent;
}
.lg-time__scroller::-webkit-scrollbar{ height:3px; }
.lg-time__scroller::-webkit-scrollbar-thumb{ background:rgba(201,169,97,.4); }
.lg-time__rope{
  position:relative; height:1px; margin:0 var(--lg-gut);
  background:linear-gradient(to right, transparent, var(--lg-hair) 8%, var(--lg-hair) 92%, transparent);
}
.lg-time__rope i{
  position:absolute; left:0; top:-1px; height:3px; width:0;
  background:linear-gradient(to right, transparent, var(--lg-brass));
  transition:width .3s linear;
}

.lg-card{
  flex:0 0 clamp(210px,17vw,248px); scroll-snap-align:center;
  position:relative; text-align:left; cursor:pointer;
  border:1px solid var(--lg-hair); background:var(--lg-panel);
  transition:transform .55s var(--lg-ease), border-color .45s var(--lg-ease), box-shadow .55s var(--lg-ease);
}
.lg-card:hover,.lg-card:focus-visible{
  transform:translateY(-8px); border-color:rgba(201,169,97,.45);
  box-shadow:0 40px 70px -50px #000, 0 0 0 1px rgba(201,169,97,.08);
}
.lg-card__node{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; background:var(--lg-brass); rotate:45deg;
  box-shadow:0 0 14px 3px rgba(201,169,97,.35);
}
.lg-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.lg-card__media img{
  width:100%; height:100%; object-fit:cover; opacity:.66;
  transition:transform 1.2s var(--lg-ease), opacity .6s var(--lg-ease);
}
.lg-card:hover .lg-card__media img{ transform:scale(1.07); opacity:.86; }
.lg-card__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,6,9,.96), transparent 58%); }
.lg-card__body{ position:absolute; inset:auto 0 0; padding:0 15px 16px; }
.lg-card__year{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--lg-brass); }
.lg-card h3{ margin-top:7px; font-size:14px; letter-spacing:.1em; line-height:1.24; }
.lg-card p{ margin:9px 0 0; font-size:11.5px; line-height:1.6; color:var(--lg-mute); }
.lg-card__go{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass-hi);
}
.lg-time__foot{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; margin-top:14px; }

/* full timeline list, revealed under the scroller */
.lg-full{ margin-top:34px; border-top:1px solid var(--lg-hair-2); }
.lg-full[hidden]{ display:none; }
.lg-full li{ border-bottom:1px solid var(--lg-hair-2); }
.lg-full button{
  width:100%; display:grid; gap:6px 26px; align-items:baseline; text-align:left;
  grid-template-columns:minmax(120px,.16fr) minmax(0,.34fr) minmax(0,.5fr);
  padding:19px 4px; transition:background .35s var(--lg-ease);
}
.lg-full button:hover{ background:rgba(201,169,97,.045); }
.lg-full .y{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass); }
.lg-full .t{ font-family:var(--display); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); }
.lg-full .d{ font-size:12.5px; line-height:1.65; color:var(--lg-mute); }

/* ═══ 05 · EXPERIENCE THE LEGEND ═════════════════════════════════════ */

.lg-exps{ background:var(--lg-ink); }
.lg-exps__grid{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lg-exp{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  aspect-ratio:3/4; overflow:hidden; border:1px solid var(--lg-hair); background:#000;
}
.lg-exp img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.68; transform:scale(1.02);
  transition:transform 1.4s var(--lg-ease), opacity .7s var(--lg-ease);
}
.lg-exp::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,5,8,.96) 8%, rgba(4,5,8,.24) 58%, rgba(4,5,8,.5));
  transition:background .6s var(--lg-ease);
}
.lg-exp:hover img,.lg-exp:focus-visible img{ transform:scale(1.1); opacity:.86; }
.lg-exp:hover{ border-color:rgba(201,169,97,.46); }
.lg-exp__sigil{
  position:absolute; z-index:2; top:14px; left:14px;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid rgba(201,169,97,.4); color:var(--lg-brass);
  background:rgba(5,7,10,.6);
}
.lg-exp__sigil svg{ width:17px; height:17px; }
.lg-exp__body{ position:absolute; z-index:2; inset:auto 18px 20px; }
.lg-exp__kicker{ font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--lg-brass); }
.lg-exp h3{ margin-top:9px; font-size:clamp(14px,1.3vw,20px); letter-spacing:.08em; line-height:1.16; }
.lg-exp p{ margin:10px 0 0; font-size:12px; line-height:1.62; color:var(--lg-text); max-width:30ch; }
.lg-exp__cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:9px 16px; border:1px solid rgba(201,169,97,.42);
  font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--cream);
  transition:background .4s var(--lg-ease), gap .4s var(--lg-ease);
}
.lg-exp:hover .lg-exp__cta{ background:rgba(201,169,97,.14); gap:14px; }

/* ═══ 06 · MYTH VS FACT ══════════════════════════════════════════════ */

.lg-myths{ background:linear-gradient(180deg, var(--lg-ink), var(--lg-timber) 50%, var(--lg-ink)); }
.lg-myths .lg-ground img{ opacity:.28; }
.lg-myths__grid{ display:grid; gap:clamp(20px,2.4vw,40px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
.lg-myths__stage{ position:sticky; top:calc(var(--lg-nav-h) + 24px); }
.lg-myths__stage img{ width:100%; aspect-ratio:4/5; object-fit:cover; opacity:.8; }
.lg-myths__score{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(to top, rgba(5,6,9,.96), transparent);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.lg-myths__score b{ font-family:var(--display); font-size:22px; letter-spacing:.08em; color:var(--cream); }
.lg-myths__score span{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--lg-brass-lo); }

/* The deck: one question at a time. Ten stacked cards was a list of answers;
   the point of the room is the half-second where you commit before the reveal,
   and a reader who can see the next nine never commits to this one. */

.lg-deck__rail{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--lg-hair-2);
}
.lg-deck__pip{
  --pip:rgba(201,169,97,.28);
  flex:1 1 0; min-width:26px; height:34px; display:grid; place-items:center;
  border:1px solid transparent; border-bottom:2px solid var(--pip);
  color:var(--lg-mute); transition:color .3s var(--lg-ease), border-color .3s var(--lg-ease);
}
.lg-deck__pip i{ font-style:normal; font-size:9px; letter-spacing:.14em; }
.lg-deck__pip:hover{ color:var(--lg-parch); }
.lg-deck__pip.is-right{ --pip:rgba(143,174,122,.75); color:#b9cdae; }
.lg-deck__pip.is-wrong{ --pip:rgba(154,106,99,.75); color:#d3ada7; }
.lg-deck__pip.is-at{ --pip:var(--lg-brass-hi); color:var(--cream); }
.lg-deck__pip.is-at i{ font-family:var(--display); font-size:11.5px; }

.lg-myth{ padding:clamp(22px,2.2vw,32px) clamp(18px,2vw,30px); }
.lg-myth[hidden]{ display:none; }
.lg-myth__q{
  font-family:var(--display); font-size:clamp(17px,1.75vw,24px); letter-spacing:.04em;
  text-transform:none; color:var(--cream); line-height:1.34; outline:none;
}
.lg-myth__q:focus-visible{ outline:1px solid var(--lg-brass); outline-offset:6px; }

/* Three rows, not three columns: the verdicts are a choice between three
   positions, and a row you read left to right is easier to weigh than three
   columns you compare. Each carries its own mark, so the three are told apart
   by shape as well as by tint — the tints are close together in the dark. */
.lg-choices{ display:grid; gap:9px; margin-top:clamp(18px,1.8vw,26px); }
.lg-choice{
  --tint:201,169,97;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:15px;
  padding:14px 18px; text-align:left;
  border:1px solid rgba(var(--tint),.30); background:rgba(var(--tint),.05);
  color:var(--lg-parch);
  transition:background .3s var(--lg-ease), border-color .3s var(--lg-ease), color .3s var(--lg-ease);
}
.lg-choice--fact{ --tint:143,174,122; }
.lg-choice--myth{ --tint:164,86,72; }
.lg-choice--disputed{ --tint:201,169,97; }
.lg-choice__mark{ width:22px; height:22px; color:rgba(var(--tint),.85); }
.lg-choice b{ font-weight:400; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; }
.lg-choice i{
  display:block; margin-top:6px; font-style:normal; font-size:10px;
  letter-spacing:.05em; text-transform:none; color:var(--lg-mute);
}
.lg-choice:hover:not(:disabled){ border-color:rgba(var(--tint),.8); background:rgba(var(--tint),.13); color:var(--cream); }
.lg-choice:disabled{ cursor:default; opacity:.42; }
/* the true answer, whether or not it is the one that was picked */
.lg-choice.is-answer{ opacity:1; border-color:rgba(var(--tint),.9); background:rgba(var(--tint),.17); color:var(--cream); }
.lg-choice.is-answer .lg-choice__mark{ color:rgb(var(--tint)); }
/* picked and wrong: struck through rather than recoloured, so the colour of
   the row still says which verdict it was */
.lg-choice.is-picked:not(.is-answer){ opacity:1; border-color:rgba(154,106,99,.6); }
.lg-choice.is-picked:not(.is-answer) b{ text-decoration:line-through; text-decoration-color:rgba(154,106,99,.85); }

.lg-myth__reveal{ margin-top:clamp(18px,1.8vw,24px); padding-top:18px; border-top:1px solid var(--lg-hair-2); }
.lg-myth__reveal[hidden]{ display:none; }
.lg-myth__verdict{ font-family:var(--display); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--lg-brass-hi); }
.lg-myth__why{ margin:12px 0 0; font-size:13.5px; line-height:1.8; color:var(--lg-parch); }
.lg-myth__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.lg-myth__srcnote{ margin:12px 0 0; font-size:11.5px; line-height:1.7; color:var(--lg-mute); font-style:italic; }

/* the last card */
.lg-myth--end .lg-myth__q{ font-size:clamp(19px,2vw,28px); color:var(--lg-brass-hi); }
.lg-myth__missed{ margin:20px 0 0; padding:0; list-style:none; }
.lg-myth__missed li{
  margin-top:12px; padding-left:14px; border-left:1px solid var(--lg-hair);
  font-size:12.5px; line-height:1.7; color:var(--lg-mute);
}
.lg-myth__missed i{ display:block; font-style:normal; margin-bottom:5px; color:var(--cream); }

.lg-deck__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--lg-hair-2);
}
.lg-deck__nav{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px;
  border:1px solid var(--lg-hair); color:var(--lg-parch);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  transition:border-color .3s var(--lg-ease), color .3s var(--lg-ease), background .3s var(--lg-ease);
}
.lg-deck__nav svg{ width:15px; height:15px; }
.lg-deck__nav:hover:not(:disabled){ border-color:var(--lg-brass); background:rgba(201,169,97,.08); color:var(--cream); }
.lg-deck__nav:disabled{ opacity:.28; cursor:default; }
.lg-deck__step{
  margin:0; flex:1 1 auto; text-align:center;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass-lo);
}

/* ═══ 07 · RECONSTRUCTING BLACKBEARD ════════════════════════════════ */

.lg-recon{scroll-margin-top:calc(var(--lg-nav-h) + 10px);background:radial-gradient(circle at 24% 44%,rgba(201,169,97,.09),transparent 34%),linear-gradient(135deg,#07090d,#0d0b08 54%,#050609)}
.lg-recon__grid{display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(340px,.95fr);gap:clamp(28px,4vw,68px);align-items:center;padding:clamp(22px,3vw,46px)}
.lg-recon__viewer{--recon-split:50%;position:relative;isolation:isolate;width:min(620px,100%);aspect-ratio:4/5;margin:auto;overflow:hidden;border:1px solid rgba(201,169,97,.55);background:#090909;box-shadow:0 28px 80px rgba(0,0,0,.7),inset 0 0 0 6px rgba(6,7,9,.7)}
.lg-recon__viewer::after{content:'';position:absolute;z-index:3;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.58),inset 0 0 0 7px rgba(201,169,97,.08)}
.lg-recon__viewer figure{position:absolute;inset:0;margin:0}.lg-recon__viewer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lg-recon__source img{filter:grayscale(1) sepia(.13) contrast(1.08) brightness(.83)}
.lg-recon__result{z-index:1;clip-path:inset(0 calc(100% - var(--recon-split)) 0 0)}.lg-recon__result img{filter:saturate(.74) contrast(1.04) brightness(.88)}
.lg-recon__divider{position:absolute;z-index:5;top:0;bottom:0;left:var(--recon-split);width:1px;background:#e1bd74;box-shadow:0 0 16px rgba(217,172,91,.7);pointer-events:none}
.lg-recon__divider i{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid #c89a55;border-radius:50%;background:#090a0c;color:#e7c98d;font:normal 17px var(--ui);box-shadow:0 8px 22px #000}
.lg-recon__range{position:absolute;z-index:6;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.lg-recon__tag{position:absolute;z-index:4;top:17px;padding:9px 11px;border:1px solid rgba(201,169,97,.3);background:rgba(5,6,8,.84);color:#dec18b;font-size:8px;letter-spacing:.18em;text-transform:uppercase}.lg-recon__tag.is-source{left:17px}.lg-recon__tag.is-result{right:17px}
.lg-recon__evidence{padding-right:clamp(0px,2vw,20px)}.lg-recon__evidence h3{margin:10px 0 25px;font-size:clamp(25px,3vw,43px);line-height:1.08}
.lg-recon__evidence dl{margin:0;border-block:1px solid var(--lg-hair)}.lg-recon__evidence dl>div{display:grid;grid-template-columns:145px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--lg-hair-2)}.lg-recon__evidence dl>div:last-child{border-bottom:0}
.lg-recon__evidence dt{color:var(--lg-brass-hi);font:500 9px/1.5 var(--ui);letter-spacing:.16em;text-transform:uppercase}.lg-recon__evidence dd{margin:0;color:var(--lg-mute);font-size:12.5px;line-height:1.65}
.lg-recon__tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border:1px solid var(--lg-hair)}.lg-recon__tabs button{padding:12px 8px;border:0;border-right:1px solid var(--lg-hair);background:#090b0f;color:var(--lg-mute);font-size:8px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.lg-recon__tabs button:last-child{border-right:0}.lg-recon__tabs button[aria-selected="true"]{background:linear-gradient(#b88b4c,#735127);color:#090909}
.lg-recon__status{margin:11px 0 0;color:var(--lg-brass);font-size:8px;letter-spacing:.17em;text-transform:uppercase}.lg-recon__note{margin:22px 0 0;padding:16px 18px;border-left:2px solid var(--lg-brass);background:rgba(201,169,97,.055);color:var(--lg-mute);font-size:11.5px;line-height:1.7}.lg-recon__note b{color:var(--cream-dim);font-weight:500}
.lg-recon[data-recon-view="source"] .lg-recon__result{clip-path:inset(0 100% 0 0)!important}.lg-recon[data-recon-view="result"] .lg-recon__result{clip-path:inset(0)!important}
.lg-recon[data-recon-view="source"] .lg-recon__range,.lg-recon[data-recon-view="source"] .lg-recon__divider,.lg-recon[data-recon-view="result"] .lg-recon__range,.lg-recon[data-recon-view="result"] .lg-recon__divider{display:none}
.lg-recon[data-recon-view="source"] .lg-recon__tag.is-result,.lg-recon[data-recon-view="result"] .lg-recon__tag.is-source{display:none}

/* ═══ 08 · THE EVIDENCE ROOM ═════════════════════════════════════════ */

.lg-arch{ background:var(--lg-timber); }
.lg-arch .lg-ground img{ opacity:.4; }
.lg-arch__shelves{ display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lg-shelf{
  position:relative; text-align:left; cursor:pointer; width:100%;
  border:1px solid var(--lg-hair); background:var(--lg-panel); overflow:hidden;
}
.lg-shelf__media{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.lg-shelf__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; transition:opacity .6s var(--lg-ease), transform 1.2s var(--lg-ease); }
.lg-shelf:hover .lg-shelf__media img{ opacity:.72; transform:scale(1.06); }
.lg-shelf__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(9,7,4,.94), rgba(9,7,4,.2)); }
.lg-shelf__plate{
  position:absolute; z-index:2; left:12px; right:12px; bottom:11px;
  padding:8px 10px; background:rgba(6,7,10,.72); border:1px solid rgba(201,169,97,.28);
}
.lg-shelf__plate b{ display:block; font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lg-brass-hi); }
.lg-shelf__plate i{ display:block; font-style:normal; margin-top:4px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lg-mute); }

.lg-doc{ padding:22px 24px; }
.lg-doc + .lg-doc{ margin-top:10px; }
.lg-doc h4{ font-size:14px; letter-spacing:.06em; text-transform:none; line-height:1.36; }
.lg-doc__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:9px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-doc__notes{ margin:14px 0 0; font-size:13px; line-height:1.78; }
.lg-doc__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.lg-doc__flag{
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px;
  border:1px dashed rgba(200,129,61,.5); color:#d5a06a;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
}

/* ═══ 08 · THE LEGEND CONTINUES ══════════════════════════════════════ */

.lg-vault{ background:linear-gradient(180deg, var(--lg-ink), #0b0906 60%, var(--lg-ink)); }
.lg-vault .lg-ground img{ opacity:.3; }

.lg-book{
  display:grid; gap:clamp(24px,3.4vw,64px); align-items:center;
  grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  padding:clamp(24px,3vw,50px);
}
.lg-book__cover{ position:relative; width:100%; max-width:440px; margin-inline:auto; }
.lg-book__cover img{
  display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  box-shadow:24px 30px 70px -34px #000, 0 0 0 1px rgba(201,169,97,.14);
  transform:perspective(1400px) rotateY(-9deg); transform-origin:left center;
  transition:transform 1s var(--lg-ease);
}
.lg-book:hover .lg-book__cover img{ transform:perspective(1400px) rotateY(-4deg); }
.lg-book h2{ font-size:clamp(26px,3.4vw,48px); }
.lg-book__sub{ margin-top:12px; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--lg-brass); }
.lg-book p{ margin:20px 0 0; font-size:14px; line-height:1.82; max-width:52ch; }
.lg-book__ladder{ display:grid; gap:1px; margin-top:26px; background:var(--lg-hair-2); border:1px solid var(--lg-hair-2); }
.lg-book__ladder li{ display:grid; grid-template-columns:minmax(120px,.34fr) 1fr; gap:16px; padding:13px 16px; background:rgba(9,11,15,.7); }
.lg-book__ladder b{ font-family:var(--display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lg-brass-hi); }
.lg-book__ladder span{ font-size:12.5px; line-height:1.6; color:var(--lg-mute); }
.lg-book__cta{ display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:28px; }

.lg-coll{ display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(30px,3.6vw,58px); }
.lg-coll a{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--lg-hair); background:var(--lg-panel);
}
.lg-coll img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.46; transition:opacity .6s var(--lg-ease), transform 1.2s var(--lg-ease); }
.lg-coll a:hover img{ opacity:.68; transform:scale(1.07); }
.lg-coll a::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,6,9,.94), rgba(5,6,9,.18) 66%); }
.lg-coll span{ position:absolute; z-index:2; inset:auto 14px 14px; }
.lg-coll b{ display:block; font-family:var(--display); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
.lg-coll i{ display:block; font-style:normal; margin-top:5px; font-size:10.5px; line-height:1.5; color:var(--lg-mute); }
.lg-coll a:hover{ border-color:rgba(201,169,97,.42); }

/* ═══ FOOTER ═════════════════════════════════════════════════════════ */

.lg-foot{
  position:relative; z-index:3; padding:clamp(46px,5vw,80px) var(--lg-gut) 34px;
  border-top:1px solid var(--lg-hair-2); background:#040509; text-align:center;
}
.lg-foot__mark{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--lg-brass); }
.lg-foot__mark svg{ width:22px; height:22px; }
.lg-foot h2{ font-size:clamp(15px,1.9vw,26px); letter-spacing:.18em; }
.lg-foot__sub{ margin:14px 0 0; font-size:12px; letter-spacing:.16em; color:var(--lg-mute); text-transform:uppercase; }
.lg-foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; margin-top:34px; }
.lg-foot__nav a{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--lg-text); transition:color .35s var(--lg-ease); }
.lg-foot__nav a:hover{ color:var(--lg-brass-hi); }
.lg-foot__social{ display:flex; justify-content:center; gap:12px; margin-top:26px; }
.lg-foot__social a{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--lg-hair-2); color:var(--lg-mute); transition:color .35s var(--lg-ease), border-color .35s var(--lg-ease); }
.lg-foot__social a:hover{ color:var(--lg-brass); border-color:var(--lg-hair); }
.lg-foot__social svg{ width:16px; height:16px; }
.lg-foot__legal{ margin-top:28px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#5f5a52; }

/* ═══ THE SHARED PANEL (exhibit drawers, timeline events, documents) ══ */

.lg-panel{ position:fixed; inset:0; z-index:90; display:none; }
.lg-panel[data-open]{ display:block; }
.lg-panel__veil{
  position:absolute; inset:0; background:rgba(3,4,7,.82);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  animation:lgFade .4s var(--lg-ease);
}
.lg-panel__sheet{
  position:absolute; top:0; right:0; bottom:0; width:min(620px,100vw);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #0c0f14, #07090d);
  border-left:1px solid var(--lg-hair);
  box-shadow:-40px 0 90px -50px #000;
  animation:lgSlide .55s var(--lg-ease-out);
}
@keyframes lgSlide{ from{ transform:translateX(46px); opacity:0 } to{ transform:none; opacity:1 } }

.lg-panel__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--lg-hair-2); flex:none;
}
.lg-panel__bar span{ font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-panel__close{ width:40px; height:40px; display:grid; place-items:center; color:var(--lg-parch); }
.lg-panel__close svg{ width:16px; height:16px; }
.lg-panel__scroll{ overflow-y:auto; overscroll-behavior:contain; padding:0 clamp(20px,3vw,38px) 44px; }

.lg-panel__hero{ margin:0 calc(clamp(20px,3vw,38px) * -1) 26px; position:relative; }
.lg-panel__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.8; }
.lg-panel__hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, #0a0d12, transparent 62%); }

.lg-panel h2{ font-size:clamp(22px,2.6vw,32px); margin-top:22px; }
.lg-panel__kicker{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--lg-brass); }
.lg-panel .ev-row{ margin-top:16px; }
.lg-panel__body p{ margin:18px 0 0; font-size:14px; line-height:1.86; color:var(--lg-parch); }
.lg-panel__body strong{ color:var(--cream); font-weight:500; }

.lg-facts{ margin-top:26px; border-top:1px solid var(--lg-hair-2); }
.lg-facts li{ display:grid; gap:4px 20px; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--lg-hair-2); }
.lg-facts .fl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lg-mute); }
.lg-facts .fv{ font-family:var(--display); font-size:14px; letter-spacing:.06em; color:var(--cream); text-align:right; }
.lg-facts .ev-wrap{ grid-column:1/-1; margin-top:4px; }

.lg-quote{
  margin-top:28px; padding:24px 26px; border-left:2px solid var(--lg-brass);
  background:rgba(201,169,97,.05);
}
.lg-quote p{ margin:0; font-family:var(--display); font-size:clamp(16px,1.7vw,21px); line-height:1.5; color:var(--cream); text-transform:none; letter-spacing:.01em; }
.lg-quote cite{ display:block; margin-top:14px; font-style:normal; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-quote .note{ margin-top:12px; font-size:12px; line-height:1.7; color:var(--lg-mute); font-style:italic; }

.lg-caution{
  margin-top:26px; padding:18px 20px;
  border:1px solid rgba(200,129,61,.28); background:rgba(200,129,61,.06);
  font-size:12.5px; line-height:1.76; color:#dcc2a4;
}
.lg-caution b{ display:block; font-family:var(--display); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#d5a06a; margin-bottom:8px; }

.lg-compare{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:26px; }
.lg-compare figure{ border:1px solid var(--lg-hair); background:var(--lg-panel); }
.lg-compare img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.lg-compare figcaption{ padding:12px 13px 14px; }
.lg-compare b{ display:block; font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); }
.lg-compare span{ display:block; margin:7px 0 10px; font-size:11.5px; line-height:1.6; color:var(--lg-mute); }

.lg-srclist{ margin-top:30px; padding-top:22px; border-top:1px solid var(--lg-hair-2); }
.lg-srclist h3{ font-size:10px; letter-spacing:.34em; color:var(--lg-brass-lo); }
.lg-srclist li{ padding:13px 0; border-bottom:1px solid var(--lg-hair-2); font-size:12.5px; line-height:1.66; }
.lg-srclist b{ display:block; font-family:var(--ui); font-weight:400; color:var(--lg-parch); }
.lg-srclist small{ display:block; margin-top:4px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lg-srclist a{ color:var(--lg-brass); border-bottom:1px solid rgba(201,169,97,.3); }

/* a discovery, when someone finds one */
.lg-toast{
  position:fixed; z-index:95; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  background:rgba(8,10,14,.96); border:1px solid rgba(201,169,97,.34);
  box-shadow:0 30px 60px -34px #000;
  animation:lgToast .5s var(--lg-ease-out);
}
.lg-toast b{ font-family:var(--display); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass-hi); }
.lg-toast span{ font-size:12px; line-height:1.6; color:var(--lg-parch); max-width:44ch; }
@keyframes lgToast{ from{ opacity:0; transform:translate(-50%,14px) } to{ opacity:1; transform:translate(-50%,0) } }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */

@media (max-width:1240px){
  /* Below this the plate's own proportions stop working as a layout: the copy
     column is down to about twenty-five characters and the tiles to the size
     of a postage stamp. The panel unlocks its aspect ratio, the artwork
     switches to the narrow cut, and the three parts stack. */
  .lg-who{
    display:block; aspect-ratio:auto; padding:0;
    border:1px solid var(--lg-hair); background:var(--lg-panel);
  }
  .lg-who__plate{ position:static; z-index:auto; display:none; }
  .lg-who__plate.is-narrow{
    display:block; width:100%; height:clamp(260px,42vw,440px);
    object-fit:cover; object-position:50% 12%;
  }
  .lg-who__copy{ padding:clamp(22px,3vw,38px) clamp(20px,2.8vw,36px) 0; }
  .lg-who__copy h2{ font-size:clamp(26px,4.4vw,40px); }
  .lg-who__copy .lg-eyebrow{ font-size:10px; }
  .lg-who__copy p{ font-size:15px; max-width:56ch; margin-top:18px; }
  .lg-who__cta{ margin-top:26px; padding:14px 24px; font-size:11px; gap:11px; }
  .lg-who__cta svg{ width:16px; }
  .lg-tiles{ gap:12px; padding:clamp(22px,3vw,34px) clamp(20px,2.8vw,36px) clamp(22px,3vw,34px); }
  .lg-who__under{ grid-template-columns:1fr; }

  .lg-exps__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg-coll{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg-arch__shelves{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg-rail{ display:none; }
}

@media (max-width:1040px){
  .lg-links{ display:none; }
  .lg-burger{ display:grid; }
  .lg-chart__grid,.lg-myths__grid,.lg-book,.lg-recon__grid{ grid-template-columns:1fr; }
  .lg-chart__panel{ position:static; }
  /* Stacked, a sticky 4:5 portrait pins most of the viewport while the reader
     is trying to read the question underneath it. */
  .lg-myths__stage{ position:static; }
  .lg-deck__rail{ margin-top:6px; }
  .lg-hero__card{ position:static; transform:none; width:auto; max-width:420px; margin-top:30px; }
  .lg-hero{ align-items:end; }
  .lg-book__cover{ max-width:300px; }
  .lg-book__cover img{ transform:none; }
  .lg-recon__viewer{ max-width:580px; }
  .lg-recon__evidence{ padding:0; }
}

@media (max-width:760px){
  .legend-page{ --lg-nav-h:58px; }
  /* the phone files are a square re-cut, so the portrait box is already the
     right shape and the aspect rule above does not apply */
  .lg-hero{ min-height:92svh; padding-bottom:96px; }
  .lg-hero__media img{ object-position:56% 34%; }
  /* the mobile files are re-cut square in make_legend_video.sh, so they only
     need centring — no CSS crop on top of an ffmpeg one */
  .lg-hero__video{ object-position:50% 42%; }
  .lg-hero h1{ font-size:clamp(40px,13vw,64px); }
  .lg-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg-exps__grid,.lg-arch__shelves,.lg-coll{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg-exp{ aspect-ratio:4/5; }
  .lg-deck__pip i{ font-size:8px; letter-spacing:.06em; }
  .lg-deck__nav{ padding:11px 13px; letter-spacing:.16em; }
  .lg-deck__step{ letter-spacing:.14em; }
  .lg-full button{ grid-template-columns:1fr; gap:4px; }
  .lg-full .d{ display:none; }
  .lg-panel__sheet{ top:auto; width:100%; height:min(88svh,880px); border-left:0; border-top:1px solid var(--lg-hair); }
  @keyframes lgSlide{ from{ transform:translateY(60px); opacity:0 } to{ transform:none; opacity:1 } }
  .lg-compare{ grid-template-columns:1fr; }
  .lg-facts li{ grid-template-columns:1fr; }
  .lg-facts .fv{ text-align:left; }
  .lg-book__ladder li{ grid-template-columns:1fr; gap:6px; }
  .lg-recon__grid{ padding:14px; }
  .lg-recon__tag{ top:10px; padding:7px; font-size:6px; letter-spacing:.1em; }
  .lg-recon__tag.is-source{ left:10px; }.lg-recon__tag.is-result{ right:10px; }
  .lg-recon__divider i{ width:40px; height:40px; }
  .lg-recon__evidence{ padding:18px 10px 10px; }
  .lg-recon__evidence dl>div{ grid-template-columns:1fr; gap:5px; }
  .lg-recon__tabs button{ padding-inline:4px; font-size:6.5px; letter-spacing:.08em; }
  .lg-ambience{ left:auto; right:var(--lg-gut); }
  /* the "you are here" card becomes a compact strip so the artwork keeps the
     top of the screen instead of being buried under a panel */
  .lg-hero__card{ display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline; padding:16px 18px; }
  .lg-hero__card .yr{ grid-row:1; font-size:20px; }
  .lg-hero__card .k{ grid-row:1; margin-top:0; text-align:left; }
  .lg-hero__card hr,.lg-hero__card .body{ display:none; }
  .lg-hero__card .here{ grid-column:1; grid-row:2; margin-top:12px; }
  .lg-hero__card .where{ grid-column:2; grid-row:2; margin-top:12px; text-align:left; font-size:11.5px; line-height:1.55; }
  /* On a phone the artwork fills the whole width, so the diagonal scrim that
     works on desktop leaves the headline sitting on burning rigging. */
  .lg-hero__video{
  /* z-index 1, not -2: this sits inside .lg-hero__media, which is itself at
     -2, so a negative index here would bury the clip behind its own poster
     still. The page scrim is a sibling of the media wrapper and stays on top
     of both. */
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:52% 42%;
  opacity:0; transition:opacity 1.5s var(--lg-ease);
  pointer-events:none;
}
.lg-hero__video.is-ready{ opacity:1; }

/* Tuned against the night clip, which is already very dark — the heavier
     gradient this replaced was built for the brighter still and buried it. */
  .lg-hero__scrim{
    background:linear-gradient(to bottom,
      rgba(4,5,8,.74) 0%, rgba(4,5,8,.4) 22%, rgba(4,5,8,.54) 52%, rgba(4,5,8,.95) 100%);
  }
  .lg-hero h1{ text-shadow:0 3px 26px rgba(0,0,0,.9); }
  .lg-hero__lede{ text-shadow:0 2px 14px rgba(0,0,0,.9); }
  .lg-scrollcue{ display:none; }
}

@media (max-width:420px){
  .lg-tiles{ grid-template-columns:1fr; }
  .lg-coll,.lg-arch__shelves{ grid-template-columns:1fr; }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  .legend-page *,.legend-page *::before,.legend-page *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .lg-fog,.lg-embers,.lg-hero__video{ display:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .lg-hero__media img,.lg-ground img{ transform:none; }
}

@media (prefers-contrast:more){
  .legend-page{ --lg-text:#d3ccbd; --lg-mute:#b0a99c; --lg-hair:rgba(201,169,97,.42); }
  .lg-tile img,.lg-exp img,.lg-coll img{ opacity:.3; }
}

@media print{
  .lg-nav,.lg-rail,.lg-atmos,.lg-ambience,.lg-scrollcue,.lg-panel{ display:none !important; }
  .legend-page{ background:#fff; color:#111; }
}