/* ═══════════════════════════════════════════════════════════════════════
   DARK TIDES LEGENDS — the index
   Loaded only by /legends. Depends on legends.css for the palette, the nav,
   the evidence badge and the shared frame; everything here is `lgx-`.
   ═══════════════════════════════════════════════════════════════════════ */

.lgx-index .lg-nav{ position:sticky; }
/* An SVG sprite must never take up space. The one in the markup is inert by
   attribute; one built in script needs this. */
.lgx-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.lgx-index .lg-main{ padding-bottom:clamp(40px,5vw,80px); }

/* ═══ HEADER ═════════════════════════════════════════════════════════ */

.lgx-head{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(360px, 30vw, 520px);
  display:grid; place-items:center; text-align:center;
  padding:clamp(56px,6vw,92px) var(--lg-gut);
  border-bottom:1px solid var(--lg-hair);
}
.lgx-head__media{ position:absolute; inset:0; z-index:-2; }
.lgx-head__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  transform:scale(1.04);
}
.lgx-head__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(72% 84% at 50% 46%, rgba(5,6,10,.34), rgba(5,6,10,.9) 78%),
    linear-gradient(to bottom, rgba(5,6,10,.86), rgba(5,6,10,.34) 34%, rgba(5,6,10,.55) 68%, var(--lg-ink));
}
.lgx-head__body{ position:relative; z-index:2; max-width:940px; }
.lgx-head h1{
  font-size:clamp(40px,6.6vw,96px); letter-spacing:.03em; line-height:.98;
  text-shadow:0 4px 40px rgba(0,0,0,.8);
}
.lgx-head__lede{
  margin:20px auto 0; max-width:44ch;
  font-size:clamp(14px,1.25vw,18px); line-height:1.68; color:var(--lg-parch);
  text-shadow:0 2px 16px rgba(0,0,0,.85);
}
.lgx-head__lede b{ display:block; font-weight:400; color:var(--cream); }
.lgx-meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 14px; margin-top:24px;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--lg-brass);
}
.lgx-meta i{ font-style:normal; width:4px; height:4px; background:currentColor; transform:rotate(45deg); opacity:.7; }
.lgx-head .lg-btn{ margin-top:30px; }

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

.lgx-sec{ padding:clamp(52px,6vw,104px) var(--lg-gut) 0; }
.lgx-sec:last-of-type{ padding-bottom:clamp(40px,5vw,80px); }
/* On a sub-page the first section carries the whole opening, so it needs less
   air above it than a section arriving after the roster. */
.lgx-sec.is-first{ padding-top:clamp(18px,2vw,34px); }
.lgx-crumb{ padding:clamp(20px,2.4vw,34px) var(--lg-gut) 0; }
.lgx-crumb .lgx-wrap{ display:flex; }
.lgx-crumb a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--ui); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--lg-mute); transition:color .3s var(--lg-ease);
}
.lgx-crumb a:hover{ color:var(--lg-brass-hi); }
.lgx-crumb svg{ width:15px; height:15px; }
.lgx-onward{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px 32px; padding:clamp(22px,2.4vw,36px) clamp(22px,2.6vw,40px);
}
.lgx-onward h2{ margin:0; font-size:clamp(17px,1.9vw,25px); letter-spacing:.08em; }
.lgx-onward p{ margin:10px 0 0; font-size:13px; line-height:1.7; color:var(--lg-mute); max-width:56ch; }
.lgx-wrap{ max-width:var(--lg-max); margin-inline:auto; }
.lgx-sechead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px; margin-bottom:clamp(22px,2.4vw,40px); }
.lgx-sechead h2,.lgx-sechead h1{ font-size:clamp(20px,2.6vw,34px); letter-spacing:.09em; }
.lgx-sechead p{ margin:0; font-size:13px; line-height:1.7; color:var(--lg-mute); max-width:56ch; }
.lgx-sechead.is-centred{ flex-direction:column; align-items:center; text-align:center; }
/* Centred, a 56ch measure leaves an orphan on the last line. Wider plus
   `balance` gives two even lines instead. */
.lgx-sechead.is-centred p{ max-width:68ch; text-wrap:balance; }
/* a crest over a centred heading, with a hairline under it. Only where the
   section is the page's own argument rather than a list of things. */
.lgx-sechead--crest{ gap:0; margin-bottom:clamp(20px,2.2vw,34px); }
.lgx-sechead__crest{ width:28px; height:28px; color:var(--lg-brass); opacity:.75; margin-bottom:13px; }
.lgx-sechead--crest h2,.lgx-sechead--crest h1{ font-size:clamp(24px,3.4vw,44px); }
.lgx-sechead--crest h2::after,.lgx-sechead--crest h1::after{
  content:''; display:block; width:min(240px,60vw); height:1px; margin:16px auto 0;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.5),transparent);
}
.lgx-sechead--crest p{ margin-top:16px; }

/* ═══ THE ROSTER ═════════════════════════════════════════════════════ */

/* ── the filter bar ──────────────────────────────────────────────────
   Era is the primary sort and the sections never move; a filter hides what
   does not match and any section left empty, so the chronology survives the
   filtering instead of collapsing into one undifferentiated grid. */
.lgx-filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(18px,2vw,30px) 0 clamp(6px,.7vw,10px);
}
.lgx-filter{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; min-height:42px; border:1px solid var(--lg-hair); background:rgba(12,14,19,.5);
  font-family:var(--ui); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lg-mute); cursor:pointer;
  transition:border-color .35s var(--lg-ease), color .35s var(--lg-ease),
             background .35s var(--lg-ease);
}
.lgx-filter i{
  font-style:normal; font-size:8.5px; letter-spacing:.06em; color:var(--lg-brass-lo);
  padding:1px 5px; border:1px solid var(--lg-hair-2); font-variant-numeric:tabular-nums;
}
.lgx-filter:hover{ border-color:rgba(201,169,97,.44); color:var(--lg-parch); }
.lgx-filter[aria-pressed="true"]{
  border-color:var(--lg-brass); color:var(--cream);
  background:linear-gradient(180deg, rgba(109,29,23,.42), rgba(52,14,11,.5));
}
.lgx-filter[aria-pressed="true"] i{ color:var(--lg-brass-hi); border-color:rgba(201,169,97,.4); }
.lgx-filters__status{
  margin:0 0 clamp(16px,1.8vw,26px); font-size:11.5px; letter-spacing:.04em;
  color:var(--lg-mute);
}
/* A hidden card is still display:flex from .lgx-card, which beats the UA
   sheet's [hidden] rule — so it has to be said explicitly. */
.lgx-card[hidden],.lgx-era-block[hidden],.lgx-era-note[hidden]{ display:none !important; }

/* Three era blocks, each its own heading and grid. The Golden Age comes first
   rather than chronologically: it is the material people came for and it holds
   the one door that opens. */
.lgx-era-block + .lgx-era-block{ margin-top:clamp(34px,4vw,66px); }
.lgx-era-head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px;
  margin-bottom:clamp(14px,1.5vw,24px);
  padding-bottom:12px; border-bottom:1px solid var(--lg-hair-2);
}
.lgx-era-head h3{
  font-family:var(--display); font-size:clamp(15px,1.7vw,23px); letter-spacing:.11em;
  text-transform:uppercase; color:var(--lg-brass); margin:0;
}
.lgx-era-head__n{
  font-family:var(--ui); font-size:9px; letter-spacing:.2em; color:var(--lg-brass-lo);
  padding:3px 8px; border:1px solid var(--lg-hair); font-variant-numeric:tabular-nums;
}
.lgx-era-head p{
  flex:1 1 340px; margin:0; font-size:12.5px; line-height:1.7; color:var(--lg-mute);
  max-width:64ch;
}

/* Flex, not grid, so the closing note can take exactly the space the cards
   left on the last row without anyone computing a column span. The card basis
   steps down at the same widths the old grid did. */
.lgx-grid{
  display:flex; flex-wrap:wrap; gap:clamp(10px,1vw,16px);
  --cols:4;
}
.lgx-grid > .lgx-card{
  flex:0 0 calc((100% - (var(--cols) - 1) * clamp(10px,1vw,16px)) / var(--cols));
}
.lgx-era-note{
  flex:1 1 clamp(200px,22vw,300px); align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,1.6vw,26px);
  border:1px dashed var(--lg-hair); background:rgba(12,14,19,.4);
}
.lgx-era-note p{
  margin:0; font-size:12.5px; line-height:1.8; color:var(--lg-mute); max-width:46ch;
}

.lgx-card{
  position:relative; display:flex; flex-direction:column; text-align:left;
  border:1px solid var(--lg-hair); background:var(--lg-panel);
  overflow:hidden; width:100%;
  transition:border-color .45s var(--lg-ease), transform .5s var(--lg-ease), box-shadow .5s var(--lg-ease);
}
.lgx-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.lgx-card__media img{
  width:100%; height:100%; object-fit:cover; opacity:.78;
  transition:transform 1.2s var(--lg-ease), opacity .6s var(--lg-ease);
}
.lgx-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,7,10,.96) 4%, rgba(6,7,10,.3) 52%, rgba(6,7,10,.42));
}
.lgx-card__body{ position:absolute; z-index:2; inset:auto 0 0; padding:0 clamp(12px,1.1vw,18px) clamp(12px,1.1vw,17px); }
.lgx-card h3{ font-size:clamp(13px,1.15vw,17px); letter-spacing:.1em; line-height:1.2; }
.lgx-card .real{ display:block; margin-top:6px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lgx-card .yrs{ display:block; margin-top:5px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lg-parch); font-variant-numeric:tabular-nums; }
.lgx-card .sea{ display:block; margin-top:3px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lg-mute); }
/* Two or three per card: what they were, where they worked, any theme. These
   are exactly what the filter bar reads, so a card always shows why it
   survived a filter. */
.lgx-card__tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.lgx-card__tags i{
  font-style:normal; padding:3px 6px; border:1px solid var(--lg-hair);
  font-size:7.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lg-brass-lo); white-space:nowrap;
}
.lgx-card.is-open .lgx-card__tags i{ border-color:rgba(201,169,97,.34); color:var(--lg-brass); }
.lgx-card__foot{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:13px; padding:10px 12px;
  border:1px solid var(--lg-hair-2);
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-mute);
  transition:background .4s var(--lg-ease), color .4s var(--lg-ease), border-color .4s var(--lg-ease);
}
.lgx-card__foot svg{ width:11px; height:11px; flex:none; }

/* the one that is open */
.lgx-card.is-open{ border-color:rgba(201,169,97,.5); }
.lgx-card.is-open .lgx-card__media img{ opacity:.92; }
.lgx-card.is-open .lgx-card__foot{
  border-color:rgba(201,169,97,.5); color:var(--cream);
  background:linear-gradient(180deg, rgba(109,29,23,.42), rgba(52,14,11,.5));
}
.lgx-card.is-open:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -50px #000; border-color:var(--lg-brass); }
.lgx-card.is-open:hover .lgx-card__media img{ transform:scale(1.06); }
.lgx-card.is-open:hover .lgx-card__foot{ background:linear-gradient(180deg, rgba(140,40,30,.6), rgba(70,20,15,.62)); gap:14px; }
.lgx-ribbon{
  position:absolute; z-index:3; top:11px; left:11px;
  padding:5px 10px; background:var(--lg-brass); color:#0a0a0c;
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
}

/* the ones that are not */
.lgx-card.is-soon{ cursor:default; }
.lgx-card.is-soon .lgx-card__media img{ filter:grayscale(.24); }
.lgx-card.is-soon:hover{ border-color:rgba(201,169,97,.3); }
.lgx-card.is-soon:hover .lgx-card__media img{ opacity:.9; filter:grayscale(0); }
.lgx-card.is-soon:hover .lgx-card__foot{ color:var(--lg-parch); border-color:var(--lg-hair); }
.lgx-card__hook{
  position:absolute; z-index:2; inset:auto 0 0; padding:0 clamp(12px,1.1vw,18px) clamp(12px,1.1vw,17px);
  background:linear-gradient(to top, rgba(6,7,10,.97) 40%, rgba(6,7,10,.86));
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--lg-ease), transform .45s var(--lg-ease);
  display:flex; flex-direction:column; justify-content:flex-end;
  inset:0; padding-top:40%;
}
.lgx-card__hook p{ margin:0; font-size:12px; line-height:1.65; color:var(--lg-parch); }
.lgx-card__hook span{ display:block; margin-top:10px; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass-lo); }
/* the kindLabel line, where a captain needs one — Drake was not a pirate,
   Barbarossa was a serving admiral, Zheng Yi Sao ran a federation */
.lgx-card__hook em{
  display:block; margin-top:9px; font-style:normal; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lg-brass);
}
.lgx-card:hover .lgx-card__hook,.lgx-card:focus-visible .lgx-card__hook{ opacity:1; transform:none; }
.lgx-card:hover .lgx-card__body,.lgx-card:focus-visible .lgx-card__body{ opacity:0; transition:opacity .3s var(--lg-ease); }

/* ═══ FEATURED ═══════════════════════════════════════════════════════
   The hall's one open door, built to John's mock (17 Aug 2026).

   Two of the layers are his painted plates — the portrait and the backdrop,
   which already carries the compass watermark and the chart linework. Every
   line of type, the gilt frame, the seven room cards and the button are drawn
   here rather than baked into a picture, because this panel is *navigation*:
   eight real links that have to stay sharp on a retina screen, selectable by
   a search engine, and re-flowable on a phone. A flat banner loses all three.
   ═══════════════════════════════════════════════════════════════════════ */

.lgx-feature{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  margin-top:clamp(14px,1.6vw,26px);
  background:linear-gradient(180deg,#0b0d12,#07090c);
  border:1px solid rgba(201,169,97,.34);
  overflow:hidden;
}

/* ── the gilt frame ──────────────────────────────────────────────────
   Straight runs are borders on this element and its ::after. The corners
   and the two crests are drawn art, positioned rather than stretched, so
   nothing distorts as the panel changes width. */
.lgx-feature__gilt{
  position:absolute; inset:clamp(7px,.75vw,12px); z-index:5; pointer-events:none;
  color:var(--lg-brass);
  --orn:clamp(38px,4.2vw,72px);
  --crest:clamp(96px,11vw,168px);
}
/* The straight runs stop short of both the corners and the two crests, so the
   drawn art continues the line instead of sitting on top of a square corner. */
.lgx-rule{ position:absolute; }
.lgx-rule--out{ inset:0;   --stop:calc(var(--orn) * .445);        --col:rgba(201,169,97,.52); }
.lgx-rule--in { inset:6px; --stop:calc(var(--orn) * .445 - 6px);  --col:rgba(201,169,97,.20); }
.lgx-rule::before{
  content:''; position:absolute; left:var(--stop); right:var(--stop); top:0; bottom:0;
  border-top:1px solid var(--col); border-bottom:1px solid var(--col);
}
/* Each crest carries the OUTER rule across itself, so that rule steps aside for
   it. The inner rule runs straight through underneath — same as the mock. */
.lgx-rule--out::before{
  border:0;
  --g:calc(var(--crest) / 2);
  --line:linear-gradient(90deg, var(--col) 0 calc(50% - var(--g)), transparent 0
          calc(50% + var(--g)), var(--col) 0 100%);
  background:var(--line) top/100% 1px no-repeat, var(--line) bottom/100% 1px no-repeat;
}
.lgx-rule::after{
  content:''; position:absolute; top:var(--stop); bottom:var(--stop); left:0; right:0;
  border-left:1px solid var(--col); border-right:1px solid var(--col);
}
.lgx-orn{
  position:absolute; width:var(--orn); height:var(--orn); overflow:visible; opacity:.88;
}
.lgx-orn--tl{ top:0; left:0; }
.lgx-orn--tr{ top:0; right:0; transform:scaleX(-1); }
.lgx-orn--bl{ bottom:0; left:0; transform:scaleY(-1); }
.lgx-orn--br{ bottom:0; right:0; transform:scale(-1); }

.lgx-crest{ position:absolute; left:50%; overflow:visible; width:var(--crest); height:auto; }
.lgx-crest--top{ top:0; transform:translate(-50%,-50%); }
.lgx-crest--bot{ bottom:0; transform:translate(-50%,50%); }

/* ── the portrait half ───────────────────────────────────────────────── */

.lgx-feature__media{ position:relative; min-height:clamp(300px,30vw,470px); overflow:hidden; }
.lgx-feature__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 14%;
  transition:transform 1.6s var(--lg-ease);
}
.lgx-feature:hover .lgx-feature__media img{ transform:scale(1.045); }
/* darkens toward the seam so the two plates meet without a visible join */
.lgx-feature__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(4,5,8,.52), rgba(4,5,8,.10) 34%, rgba(4,5,8,.30)),
    radial-gradient(112% 84% at 46% 44%, transparent 20%, rgba(4,5,8,.82) 100%),
    linear-gradient(to right, rgba(5,6,9,.34), rgba(5,6,9,.04) 44%, rgba(5,6,9,.58));
}
/* the seam, with a bead at its midpoint */
.lgx-feature__media::before{
  content:''; position:absolute; z-index:3; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,169,97,.5) 16%,rgba(201,169,97,.5) 84%,transparent);
}

/* ── the body half ───────────────────────────────────────────────────── */

.lgx-feature__body{
  position:relative; display:flex; overflow:hidden;
  /* every size in this half is a share of THIS box, not of the viewport, so
     the panel keeps the mock's proportions at any width */
  container-type:inline-size; container-name:lgxfeat;
}
.lgx-feature__backdrop{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:72% 46%;
}
/* holds the type off the burning ships in the plate's left edge */
.lgx-feature__body::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(6,8,12,.84), rgba(6,8,12,.54) 32%, rgba(6,8,12,.48)),
    radial-gradient(78% 64% at 52% 44%, rgba(6,8,12,.4), transparent 72%);
}
/* The bead on the seam. It hangs on the panel, not on either half — both of
   those clip their overflow, which sliced it into a stray chevron. 41% is the
   grid split, so it tracks the seam without being told where the seam is. */
.lgx-feature::after{
  content:''; position:absolute; z-index:6; left:41%; top:50%; pointer-events:none;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  background:#0b0d12; border:1px solid rgba(201,169,97,.6); transform:rotate(45deg);
}

.lgx-feature__inner{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:4.9cqw 4cqw 5.1cqw;
}

/* ── eyebrow, name, subtitle, lead ───────────────────────────────────── */

.lgx-feature__eyebrow{
  display:flex; align-items:center; gap:1.6cqw; margin:0;
  font-size:max(8px,1.15cqw); letter-spacing:.42em; text-transform:uppercase;
  /* --lg-brass-lo lands at 4.44:1 against this plate — just under AA for text
     this small. Two steps lighter clears it at 5.0:1 and stays in family. */
  color:#977d4b; text-indent:.42em;
}
.lgx-feature__eyebrow i{ flex:none; position:relative; width:3.7cqw; height:7px; }
.lgx-feature__eyebrow i::before{
  content:''; position:absolute; top:3px; left:0; right:5px; height:1px; background:currentColor;
}
.lgx-feature__eyebrow i::after{
  content:''; position:absolute; top:0; right:0;
  border:3.5px solid transparent; border-left-color:currentColor; border-right-width:0;
}
.lgx-feature__eyebrow i:last-child{ transform:scaleX(-1); }

.lgx-feature__name{
  margin:2cqw 0 0; font-weight:400;
  font-size:7.8cqw; letter-spacing:.055em; line-height:1;
  filter:drop-shadow(0 0 clamp(10px,1.4cqw,22px) rgba(201,169,97,.20));
  background:linear-gradient(180deg,#f4e3b0 4%,#dcbc7c 32%,#b08c47 63%,#e9d49c 96%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.lgx-feature__sub{
  display:flex; align-items:center; justify-content:center; width:100%;
  gap:2.2cqw; margin:1.7cqw 0 0;
}
.lgx-feature__sub span{
  font-family:var(--display); font-size:max(12px,2.2cqw);
  letter-spacing:.15em; text-transform:uppercase; color:var(--lg-brass-hi); white-space:nowrap;
}
.lgx-feature__sub i{ flex:1 1 auto; max-width:16cqw; height:8px; position:relative; }
.lgx-feature__sub i::before{
  content:''; position:absolute; top:3.5px; left:0; right:10px; height:1px;
  background:linear-gradient(to right,transparent,rgba(201,169,97,.8));
}
.lgx-feature__sub i::after{
  content:''; position:absolute; right:0; top:.5px; width:7px; height:7px;
  background:var(--lg-brass); transform:rotate(45deg);
}
.lgx-feature__sub i:last-child{ transform:scaleX(-1); }

.lgx-feature__lead{
  margin:2.5cqw 0 0; max-width:52ch;
  font-size:max(12px,1.61cqw); line-height:1.75; color:var(--lg-text);
  text-wrap:balance;
}

/* ── the seven rooms ─────────────────────────────────────────────────── */

.lgx-rooms{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1cqw;
  width:100%; max-width:76cqw; margin:3cqw 0 0;
}
.lgx-rooms a{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:1.1cqw;
  padding:1.5cqw .3cqw 1.1cqw;
  border:1px solid rgba(201,169,97,.26);
  background:linear-gradient(180deg,rgba(17,20,27,.78),rgba(8,10,14,.86));
  transition:border-color .4s var(--lg-ease), background .4s var(--lg-ease),
             transform .4s var(--lg-ease);
}
.lgx-rooms a:hover,.lgx-rooms a:focus-visible{
  border-color:rgba(201,169,97,.62);
  background:linear-gradient(180deg,rgba(32,27,17,.85),rgba(14,12,9,.9));
  transform:translateY(-2px);
}
.lgx-rooms img{
  width:6.1cqw; height:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform .4s var(--lg-ease);
}
.lgx-rooms a:hover img{ transform:scale(1.06); }
.lgx-rooms__label{
  font-family:var(--display); font-size:max(6.8px,.84cqw);
  letter-spacing:.14em; text-transform:uppercase; color:var(--lg-parch);
  line-height:1.55; text-wrap:balance;
}
/* the bead riding each card's top rule */
.lgx-rooms__pip{
  position:absolute; top:-4px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  background:#0e1116; border:1px solid rgba(201,169,97,.5); transform:rotate(45deg);
  transition:border-color .4s var(--lg-ease), background .4s var(--lg-ease);
}
.lgx-rooms a:hover .lgx-rooms__pip{ border-color:var(--lg-brass); background:#1b1710; }

/* ── the way in ──────────────────────────────────────────────────────── */

.lgx-feature__foot{
  width:100%; margin-top:3cqw;
  display:flex; flex-direction:column; align-items:center;
}

.lgx-enter{
  --ch:11px;
  position:relative; display:block; width:min(100%,65.7cqw); padding:1px;
  background:linear-gradient(180deg,rgba(201,169,97,.9),rgba(139,116,64,.62));
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),
                    100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,
                    var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  transition:background .45s var(--lg-ease);
}
.lgx-enter__face{
  --ch:10px;
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:1.7cqw;
  padding:2.3cqw 3cqw;
  background:linear-gradient(180deg,#0d1015,#07090d);
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),
                    100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,
                    var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  font-family:var(--display); font-size:max(9.5px,1.27cqw);
  letter-spacing:.26em; text-transform:uppercase; color:var(--lg-brass-hi);
  transition:background .45s var(--lg-ease), color .45s var(--lg-ease);
}
.lgx-enter__face::before{
  content:''; position:absolute; inset:5px; pointer-events:none;
  border:1px solid rgba(201,169,97,.26);
}
.lgx-enter__face svg{ width:1.8cqw; height:1.8cqw; min-width:12px; min-height:12px; flex:none; }
.lgx-enter:hover{ background:linear-gradient(180deg,#e3c88a,rgba(180,145,76,.8)); }
.lgx-enter:hover .lgx-enter__face{ background:linear-gradient(180deg,#17120b,#0b0907); color:#f4e3b0; }
.lgx-enter:active{ transform:translateY(1px); }
/* the frame already reads as the focus ring; keep it from doubling up */
.lgx-enter:focus-visible{ outline-offset:5px; }

/* the horizon under the button — the one warm thing on the panel */
.lgx-horizon{
  position:relative; display:block; width:min(100%,65.7cqw); height:2px;
  margin-top:.85cqw;
  background:linear-gradient(90deg,transparent,rgba(255,190,112,.15) 26%,
             rgba(255,206,138,.85) 45%,rgba(255,231,180,.95) 50%,
             rgba(255,206,138,.85) 55%,rgba(255,190,112,.15) 74%,transparent);
}
.lgx-horizon::after{
  content:''; position:absolute; left:14%; right:14%; top:-8px; height:24px;
  background:radial-gradient(58% 100% at 50% 42%,rgba(255,168,74,.4),transparent 72%);
  filter:blur(7px); pointer-events:none;
}

/* ── reflow ──────────────────────────────────────────────────────────
   The mock is a 3:1 desktop banner. Below 1100 the seven cards stop
   fitting on one line; below 880 the two plates stack. */

@media (max-width:1100px){
  .lgx-rooms{ display:flex; flex-wrap:wrap; justify-content:center; max-width:640px; }
  .lgx-rooms a{ flex:0 1 calc(25% - 9px); }
}
@media (max-width:880px){
  .lgx-feature{ grid-template-columns:1fr; }
  .lgx-feature__media{ min-height:0; aspect-ratio:16/10; }
  .lgx-feature__media img{ object-position:50% 12%; }
  .lgx-feature__media::after{ background:linear-gradient(to bottom,rgba(5,6,9,.06) 42%,rgba(5,6,9,.72)); }
  .lgx-feature__media::before{
    top:auto; bottom:0; left:0; right:0; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,169,97,.5) 16%,rgba(201,169,97,.5) 84%,transparent);
  }
  /* stacked, the seam is the bottom of the plate — a height this rule cannot
     know, so the bead steps aside and the rule carries the join alone */
  .lgx-feature::after{ display:none; }
  .lgx-feature__body::after{ background:linear-gradient(to bottom,rgba(6,8,12,.8),rgba(6,8,12,.5) 22%,rgba(6,8,12,.46)); }
}
@media (max-width:560px){
  .lgx-filters{ gap:6px; }
  .lgx-filter{ padding:8px 10px; min-height:42px; font-size:8.5px; letter-spacing:.14em; gap:6px; }
  .lgx-rooms a{ flex:0 1 calc(33.333% - 8px); }
  .lgx-feature__eyebrow i{ width:16px; }
  .lgx-feature__sub{ flex-wrap:wrap; }
  .lgx-feature__sub i{ max-width:34px; }
  .lgx-enter__face{ letter-spacing:.18em; }
}

@media (prefers-reduced-motion:reduce){
  .lgx-feature__media img,.lgx-rooms a,.lgx-rooms img{ transition:none; }
  .lgx-feature:hover .lgx-feature__media img,
  .lgx-rooms a:hover img{ transform:none; }
  .lgx-rooms a:hover,.lgx-rooms a:focus-visible{ transform:none; }
}

/* ═══ PANELS THAT EXPAND ═════════════════════════════════════════════ */

.lgx-panel{ position:relative; padding:clamp(22px,2.4vw,36px); display:flex; flex-direction:column; }
.lgx-panel h2{ font-size:clamp(17px,1.9vw,25px); letter-spacing:.08em; }
.lgx-panel > p{ margin:12px 0 0; font-size:13px; line-height:1.75; color:var(--lg-mute); max-width:52ch; }
.lgx-panel__stage{ margin-top:22px; position:relative; }
.lgx-panel .lg-btn{ margin-top:22px; }
.lgx-panel .lg-note{ margin-top:18px; }

/* full-screen state — same box, promoted.
   The class is set on <body> by index-page.js; see the note there for why the
   whole main stacking context has to move rather than just the panel. */
.lgx-panel-open .lg-main{ z-index:120; }

.lgx-panel.is-open{
  position:fixed; inset:0; z-index:100; margin:0; overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg, #0a0d12, #05070a);
  border:0; padding:clamp(16px,2.4vw,40px);
  animation:lgxOpen .45s var(--lg-ease-out);
}
.lgx-panel.is-open::before,.lgx-panel.is-open::after{ display:none; }
/* Full screen has to mean the whole graphic at once. Left to itself the stage
   takes the full width and pushes the bottom of the diagram — the rule and the
   four unconnected captains — under the fold, which is exactly the part the
   expand button was pressed to see. Cap the stage by what is left of the
   viewport after the heading, the deck and the readout, expressed as a width so
   each SVG's own ratio does the sizing. */
/* `width:100%` is load-bearing: the panel is a column flex container, and auto
   inline margins on a flex item make it shrink-to-fit, which collapses the SVG
   to its 300px intrinsic default. */
.lgx-panel.is-open .lgx-panel__stage{ width:100%; margin-inline:auto; }
.lgx-ties.is-open .lgx-panel__stage{ max-width:calc((100svh - 300px) * 1.101); }  /* 760:690 */
.lgx-map.is-open  .lgx-panel__stage{ max-width:calc((100svh - 380px) * 1.876); }  /* 1000:533 */
/* The ties and map diagrams are wider than they are tall, so capping them by
   viewport height is what makes "full screen" show the whole thing. The
   timeline is the opposite: twenty-seven rows deep, and the thing the button
   is pressed for is width. Capping it by height would make full screen
   smaller than the panel it came from, so it takes the full width and the
   page scrolls. */
@keyframes lgxOpen{ from{ opacity:0; transform:scale(.99) } to{ opacity:1; transform:none } }
.lgx-panel__close{
  position:absolute; top:14px; right:16px; width:44px; height:44px;
  display:none; place-items:center; color:var(--lg-parch); z-index:4;
}
.lgx-panel.is-open .lgx-panel__close{ display:grid; }
.lgx-panel__close svg{ width:17px; height:17px; }


/* ═══ THE LEGENDS TIMELINE ═══════════════════════════════════════════
   One chart replaced two. The three era columns are tinted so the reader can
   see at a glance where the scale changes — see js/legends/timeline.js for
   why the axis is piecewise and how that is declared. */

.lgx-tl__stage{ width:100%; }
.lgx-tl__svg{ display:block; width:100%; height:auto; overflow:visible; }

/* the columns — cold sea, brass, rust. Full height, hard edges, because a
   smooth gradient between them would hide the very seam the chart is
   admitting to. */
.tl-col--before{ fill:rgba(38,72,90,.30); }
.tl-col--golden{ fill:rgba(120,88,30,.24); }
.tl-col--after { fill:rgba(96,38,26,.26); }
.tl-coledge{ stroke:rgba(201,169,97,.30); stroke-width:1; }

.tl-watermark{ color:var(--lg-brass); opacity:.05; pointer-events:none; }
.tl-rose{ color:var(--lg-brass); opacity:.13; pointer-events:none; }

/* headers */
.tl-strap{
  fill:var(--lg-brass-lo); font-family:var(--ui); font-size:10px;
  letter-spacing:.42em; text-transform:uppercase;
}
.tl-head use{ color:var(--lg-brass); opacity:.85; }
.tl-head__t{
  fill:var(--cream); font-family:var(--display); font-size:20px;
  letter-spacing:.09em; text-transform:uppercase;
}
.tl-head--golden .tl-head__t{ fill:var(--lg-brass-hi); }
.tl-head__yrs{
  fill:var(--lg-brass); font-family:var(--ui); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase;
}
.tl-head__b{ fill:var(--lg-mute); font-family:var(--ui); font-size:11px; letter-spacing:.04em; }
.tl-orn{ stroke:var(--lg-hair); stroke-width:1; }
.tl-headrule{ stroke:rgba(201,169,97,.26); stroke-width:1; }

/* the six years seven of them shared */
.tl-collide{ fill:rgba(201,169,97,.09); stroke:rgba(227,200,138,.34); stroke-width:1; stroke-dasharray:4 5; }
.tl-collide__t{
  fill:var(--lg-brass-hi); font-family:var(--ui); font-size:9.5px;
  letter-spacing:.22em;
}

/* axis */
.tl-grid{ stroke:rgba(201,169,97,.09); stroke-width:1; stroke-dasharray:2 7; }
.tl-axis{ stroke:rgba(201,169,97,.34); stroke-width:1; }
.tl-tick{ stroke:rgba(201,169,97,.34); stroke-width:1; }
.tl-axlabel{ fill:var(--lg-mute); font-family:var(--ui); font-size:9.5px; letter-spacing:.16em; }
.tl-cart__box{ fill:#0b0e14; stroke:var(--lg-brass); stroke-width:1; }
.tl-cart__t{ fill:var(--lg-brass-hi); font-family:var(--ui); font-size:10px; letter-spacing:.14em; }

/* rows. The hit rect spans the full width so the name, the glyph and the bar
   are one target — a 7px bar is not a thing anyone can point at. */
.tl-row{ cursor:pointer; }
.tl-row__hit{ fill:transparent; }
.tl-row:hover .tl-row__hit,.tl-row:focus-visible .tl-row__hit{ fill:rgba(201,169,97,.05); }
.tl-row:focus{ outline:none; }
.tl-row:focus-visible .tl-row__name{ fill:var(--cream); }
.tl-row__glyph{ color:var(--lg-brass-lo); opacity:.8; transition:color .3s var(--lg-ease), opacity .3s var(--lg-ease); }
.tl-row:hover .tl-row__glyph,.tl-row:focus-visible .tl-row__glyph{ color:var(--lg-brass-hi); opacity:1; }
.tl-row__name{
  fill:var(--lg-parch); font-family:var(--ui); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:fill .3s var(--lg-ease);
}
.tl-row:hover .tl-row__name{ fill:var(--cream); }

/* bars. The gradient is set inline as a paint server; opacity carries the
   hover so the three era colours stay distinct. */
.tl-bar{ opacity:.72; transition:opacity .3s var(--lg-ease); }
.tl-bar.is-open{ opacity:.95; }
.tl-row:hover .tl-bar,.tl-row:focus-visible .tl-bar{ opacity:1; }
.tl-bead{ transition:opacity .3s var(--lg-ease); opacity:.85; }
.tl-bead--before{ fill:#7ea9bd; }
.tl-bead--golden{ fill:#e3c88a; }
.tl-bead--after { fill:#e0a077; }
.tl-row:hover .tl-bead,.tl-row:focus-visible .tl-bead{ opacity:1; }

/* Shown only where a chart stage has to scroll sideways. Shared by the
   timeline and the relationship diagram — one rule, one voice. */
.lgx-scrollhint{ display:none; }

/* the small print that keeps the distorted axis honest */
.lgx-tl__scale{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--lg-hair-2);
  font-size:11px; line-height:1.7; color:var(--lg-mute); max-width:78ch;
}

/* the readout */
.lgx-tl__detail{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,24px);
  margin-top:18px; padding:16px 20px; min-height:118px;
}
.lgx-tl__medal{
  flex:0 0 auto; width:76px; height:76px; border-radius:50%;
  overflow:hidden; border:1px solid var(--lg-hair);
  box-shadow:0 0 0 4px rgba(201,169,97,.06);
}
.lgx-tl__medal img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.lgx-tl__body{ min-width:0; }
.lgx-tl__body b{
  display:block; font-family:var(--display); font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
}
.lgx-tl__yrs{
  display:flex; align-items:center; gap:9px; margin-top:6px;
  font-family:var(--ui); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lg-brass);
}
.lgx-tl__yrs i{ flex:1 1 22px; max-width:30px; height:1px; background:var(--lg-hair); }
.lgx-tl__body p{ margin:9px 0 0; font-size:12.5px; line-height:1.7; color:var(--lg-text); }
.lgx-tl__end{ display:block; margin-top:7px; font-size:11.5px; line-height:1.65; color:var(--lg-mute); }

/* ═══ THE DOOR TO "THEIR PATHS CROSSED" ══════════════════════════════
   One link, two halves: the argument on the left, the fleet on the right.
   Everything inside is inert — the whole band is the target, so there is no
   button inside a link and nothing to mis-tap. */

.lgx-door{
  display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.55fr);
  align-items:center; gap:clamp(24px,3.4vw,64px);
  padding:clamp(28px,3.4vw,60px) clamp(24px,3vw,56px);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:border-color .4s var(--lg-ease);
}
.lgx-door::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 78% 50%, rgba(201,169,97,.05), transparent 70%);
  opacity:0; transition:opacity .5s var(--lg-ease);
}
.lgx-door:hover::after,.lgx-door:focus-visible::after{ opacity:1; }
.lgx-door__body h2{
  margin:0; font-size:clamp(26px,3.4vw,48px); letter-spacing:.05em; line-height:1.04;
  text-transform:uppercase; color:var(--cream);
}
.lgx-door__rule{ display:flex; align-items:center; gap:12px; margin:18px 0 22px; max-width:340px; }
.lgx-door__rule i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,169,97,.55)); }
.lgx-door__rule i:last-child{ background:linear-gradient(90deg,rgba(201,169,97,.55),transparent); }
.lgx-door__rule svg{ flex:0 0 auto; width:18px; height:18px; color:var(--lg-brass); }
.lgx-door__body p{
  margin:0; max-width:34ch;
  font-size:clamp(14px,1.15vw,17px); line-height:1.72; color:var(--lg-parch);
}
/* a button's face, on a span, because a button inside a link is neither */
.lgx-door__cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(22px,2.4vw,36px);
  padding:15px 26px; border:1px solid var(--lg-brass-lo);
  font-family:var(--ui); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lg-brass-hi);
  transition:border-color .35s var(--lg-ease), background .35s var(--lg-ease);
}
.lgx-door__cta svg{ width:17px; height:17px; transition:transform .35s var(--lg-ease); }
.lgx-door:hover .lgx-door__cta,.lgx-door:focus-visible .lgx-door__cta{
  border-color:var(--lg-brass); background:rgba(201,169,97,.07);
}
.lgx-door:hover .lgx-door__cta svg{ transform:translateX(5px); }

.lgx-door__art{ min-width:0; }
.lgx-door__cap{ display:none; }
.lgx-door__svg{ display:block; width:100%; height:auto; overflow:visible; }
.lgx-door__edge{ stroke:rgba(201,169,97,.42); stroke-width:1.4; fill:none; }
.lgx-door__bead{ fill:var(--lg-brass); opacity:.75; }
.lgx-door__disc{ fill:#0b0e13; }
.lgx-door__ring{ fill:none; stroke:var(--lg-brass); stroke-width:1.6; opacity:.85; }
.lgx-door__node.is-hub .lgx-door__ring{ stroke:var(--lg-brass-hi); stroke-width:2.4; }
/* The portraits are night scenes, and a night scene inside a 40px circle
   averages to the colour of the disc behind it. A lift keeps a face a face. */
.lgx-door__node image{ opacity:.94; filter:brightness(1.18) saturate(1.05); }
.lgx-door__name{
  fill:var(--cream); font-family:var(--display); font-size:17px; letter-spacing:.07em;
}
.lgx-door__node.is-hub .lgx-door__name{ font-size:26px; fill:#f2ece0; }
.lgx-door__yrs{ fill:var(--lg-brass-lo); font-family:var(--ui); font-size:12.5px; letter-spacing:.05em; }
.lgx-door__node.is-hub .lgx-door__yrs{ fill:var(--lg-brass); font-size:14px; }

/* ═══ THEIR PATHS CROSSED ════════════════════════════════════════════
   Three stacked boxes at full width. Before this the diagram, its key, the
   selected captain and the caveats shared one surface at half the page width
   and fought each other for it. The panel itself is now an unframed column;
   the frames are on the three children. */

.lgx-ties{ padding:0; gap:clamp(12px,1.2vw,20px); }
.lgx-ties::before,.lgx-ties::after{ display:none; }
.lgx-ties__map{ padding:clamp(18px,2vw,34px) clamp(16px,2vw,32px) clamp(10px,1.2vw,18px); }
.lgx-ties .lgx-panel__stage{ margin-top:0; }
.lgx-ties__stage svg{ display:block; width:100%; height:auto; overflow:visible; }
.lgx-ties > .lg-btn{ margin-top:4px; align-self:center; min-width:min(320px,100%); }

/* the diagram */
.lgx-ties .edge{ stroke:rgba(201,169,97,.34); stroke-width:1.3; fill:none; transition:stroke .3s var(--lg-ease), stroke-width .3s var(--lg-ease); }
.lgx-ties .edge.is-hot{ stroke:var(--lg-brass-hi); stroke-width:2.4; }
.lgx-ties .edge-hit{ stroke:transparent; stroke-width:16; fill:none; cursor:pointer; }
.lgx-ties .edge.k-deposed,.lgx-ties .edge.k-hunted{ stroke-dasharray:5 5; }
.lgx-ties .node circle{ fill:#0d1016; stroke:var(--lg-brass); stroke-width:1.3; transition:stroke-width .3s var(--lg-ease); }
.lgx-ties .node image{ clip-path:circle(50%); opacity:.86; }
.lgx-ties .node .mono{
  fill:var(--lg-brass); font-family:var(--display); font-size:19px;
  letter-spacing:.04em; text-anchor:middle; pointer-events:none;
}
.lgx-ties .node.is-hub .mono{ fill:var(--lg-brass-hi); font-size:23px; }
.lgx-ties .node text{ fill:var(--lg-parch); font-family:var(--ui); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; text-anchor:middle; }
.lgx-ties .node.is-hub circle{ stroke-width:2.2; stroke:var(--lg-brass-hi); }
.lgx-ties .node.is-loose circle{ stroke:var(--lg-brass-lo); }
.lgx-ties .node:hover circle{ stroke-width:2.6; }
.lgx-ties .node{ cursor:pointer; }
.lgx-ties .ax{ stroke:rgba(201,169,97,.24); stroke-width:1; fill:none; }
.lgx-ties .ax.is-faint{ stroke:rgba(201,169,97,.12); }
.lgx-ties .ax-label{ fill:var(--lg-mute); font-family:var(--ui); font-size:8.5px; letter-spacing:1.8px; }
.lgx-ties .ax-label.is-key{ fill:var(--lg-brass); font-size:9.5px; letter-spacing:2.2px; }
/* the six who stand alone get their own shelf, so the eye stops reading the
   diagram before it reaches them */
.lgx-ties .ties-strip{ fill:rgba(201,169,97,.028); }

/* the key. Inside the SVG so it scales with what it explains. */
.lgx-ties .ties-key__line{ stroke:var(--lg-brass); stroke-width:1.4; fill:none; }
.lgx-ties .ties-key__line.is-dash{ stroke-dasharray:5 5; }
.lgx-ties .ties-key__ring{ fill:none; stroke:var(--lg-brass-lo); stroke-width:1.3; }
.lgx-ties .ties-key__sep{ stroke:rgba(201,169,97,.22); stroke-width:1; }
.lgx-ties .ties-key__t{
  fill:var(--lg-mute); font-family:var(--ui); font-size:8.5px; letter-spacing:1.8px;
}

/* ── the card: who is selected ──────────────────────────────────────── */
.lgx-ties__detail{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(300px,.85fr);
  align-items:stretch; gap:clamp(20px,2.4vw,38px);
  padding:clamp(20px,2vw,30px);
}
.lgx-ties__plate{
  margin:0; width:clamp(124px,10.5vw,164px); aspect-ratio:4/5; align-self:start;
  border:1px solid var(--lg-hair); padding:5px; background:#0b0d12;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset;
}
.lgx-ties__plate img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
/* a relationship has two faces, so the plate splits rather than picking one */
.lgx-ties__plate.is-pair{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.lgx-ties__who h3{
  margin:0; font-family:var(--display); font-size:clamp(17px,1.7vw,23px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--lg-brass-hi); font-weight:400;
}
.lgx-ties__yrs{
  display:block; margin-top:7px; font-family:var(--ui); font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--lg-mute);
}
.lgx-ties__who p{ margin:14px 0 0; font-size:13px; line-height:1.78; color:var(--lg-text); }
/* The epithet is one line, and one line under a portrait leaves a hole. These
   three facts are the ones a reader of the diagram wants next: what he was
   really called, where he worked, and how it ended. */
.lgx-ties__meta{ margin:18px 0 0; display:grid; gap:9px; }
.lgx-ties__meta > div{ display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; align-items:baseline; }
.lgx-ties__meta dt{
  font-family:var(--ui); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lg-brass-lo);
}
.lgx-ties__meta dd{ margin:0; font-size:12.5px; line-height:1.6; color:var(--lg-parch); }
.lgx-ties__links{
  padding:clamp(13px,1.3vw,18px) clamp(14px,1.4vw,20px);
  border:1px solid var(--lg-hair-2); background:rgba(201,169,97,.03);
}
.lgx-ties__links b{
  display:block; font-family:var(--display); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lg-brass); font-weight:500;
}
.lgx-ties__links ul{ margin:12px 0 0; padding:0; list-style:none; }
.lgx-ties__links li{
  position:relative; margin-top:9px; padding-left:15px;
  font-size:12.5px; line-height:1.65; color:var(--lg-parch);
}
.lgx-ties__links li::before{
  content:''; position:absolute; left:0; top:8px; width:4px; height:4px;
  background:var(--lg-brass-lo); transform:rotate(45deg);
}
.lgx-ties__links li i{ font-style:normal; color:var(--lg-mute); }
.lgx-ties__links p{ margin:11px 0 0; font-size:12.5px; line-height:1.7; color:var(--lg-text); }
.lgx-ties__links .ev-row{ display:block; margin-top:12px; }

/* ── the notes: what the diagram cannot draw ────────────────────────── */
/* Two columns, because a single 13px measure across 1500px is unreadable and
   an 800px measure with 700px of nothing beside it looks unfinished. The
   heading takes the slack. */
.lgx-ties__notes{
  display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(20px,3vw,52px); padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,34px);
}
.lgx-ties__notehead svg{ display:block; width:22px; height:22px; color:var(--lg-brass); opacity:.8; }
.lgx-ties__notehead h3{
  margin:13px 0 0; font-family:var(--display); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--lg-brass); font-weight:500;
}
.lgx-ties__notehead p{ margin:12px 0 0; font-size:12px; line-height:1.75; color:var(--lg-mute); }
.lgx-ties__asserted{ margin:0; padding:0; list-style:none; }
.lgx-ties__asserted li{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--lg-hair-2);
}
.lgx-ties__asserted li:first-child{ border-top:0; }
.lgx-ties__shield{ flex:0 0 auto; color:var(--lg-brass); }
.lgx-ties__shield svg{ display:block; width:26px; height:28px; }
.lgx-ties__shield .sh{ fill:rgba(201,169,97,.07); stroke:var(--lg-brass-lo); stroke-width:1; }
.lgx-ties__asserted span{ font-size:13px; line-height:1.8; color:var(--lg-text); }
.lgx-ties__asserted i{
  font-style:normal; color:var(--cream); font-family:var(--display);
  font-size:13.5px; letter-spacing:.03em;
}
.lgx-ties__excluded{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--lg-hair-2);
  font-size:12px; line-height:1.8; color:var(--lg-mute);
}

/* ═══ THE WORLD ══════════════════════════════════════════════════════ */

.lgx-map__stage{ position:relative; }
.lgx-map__stage svg{ display:block; width:100%; height:auto; }
.lgx-map__stage{ align-self:stretch; }
.lgx-map .sea{ fill:#08161e; }
.lgx-map .land{ fill:#191509; stroke:rgba(201,169,97,.4); stroke-width:.9; stroke-linejoin:round; }
.lgx-map .grat{ stroke:rgba(201,169,97,.1); stroke-width:.6; fill:none; }
.lgx-pin{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; display:grid; place-items:center;
  color:var(--lg-brass); background:none; border:0; cursor:pointer;
}
.lgx-pin::before{
  content:''; position:absolute; inset:9px; background:currentColor; transform:rotate(45deg);
  transition:transform .35s var(--lg-ease-out), box-shadow .35s var(--lg-ease);
}
.lgx-pin:hover::before,.lgx-pin:focus-visible::before,.lgx-pin[aria-pressed="true"]::before{
  transform:rotate(45deg) scale(1.5); box-shadow:0 0 14px 3px rgba(201,169,97,.5);
}
.lgx-pin[data-kind="battle"]{ color:var(--lg-ember); }
.lgx-pin[data-kind="gallows"]{ color:#c07b7b; }
.lgx-pin[data-kind="wreck"]{ color:#7fb8c4; }
.lgx-pin[data-kind="prize"]{ color:var(--lg-brass-hi); }
.lgx-map__read{ margin-top:16px; padding:15px 17px; min-height:82px; }
.lgx-map__read b{ font-family:var(--display); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--cream); }
.lgx-map__read small{ display:block; margin-top:4px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--lg-brass-lo); }
.lgx-map__read p{ margin:9px 0 0; font-size:12.5px; line-height:1.7; color:var(--lg-text); }
.lgx-map__read .who{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.lgx-map__read .who i{ font-style:normal; padding:3px 8px; border:1px solid var(--lg-hair-2); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lg-mute); }

/* ═══ COMING NEXT ════════════════════════════════════════════════════ */

.lgx-next{ display:grid; gap:clamp(10px,1vw,16px); grid-template-columns:minmax(0,.44fr) repeat(2,minmax(0,.28fr)); align-items:stretch; margin-top:clamp(14px,1.6vw,26px); }
.lgx-next__intro{ padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; justify-content:center; }
.lgx-next__intro h2{ font-size:clamp(17px,1.9vw,25px); letter-spacing:.08em; }
.lgx-next__intro p{ margin:12px 0 0; font-size:13px; line-height:1.7; color:var(--lg-mute); }
.lgx-next__card{ display:block; position:relative; overflow:hidden; border:1px solid var(--lg-hair); min-height:190px; }
/* A 4:5 portrait in a landscape box centres on the torso. Bias up to the face. */
.lgx-next__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; opacity:.6; }
.lgx-next__card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(6,7,10,.95) 30%, rgba(6,7,10,.35)); }
.lgx-next__card span{ position:absolute; z-index:2; inset:auto 16px 16px; }
.lgx-next__card b{ display:block; font-family:var(--display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); }
.lgx-next__card em{ display:block; margin-top:7px; font-style:normal; font-size:11px; line-height:1.5; color:var(--lg-parch); }
.lgx-next__card i{ display:block; margin-top:11px; font-style:normal; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--lg-brass-lo); }

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

@media (max-width:1240px){
  .lgx-grid{ --cols:3; }
}
@media (max-width:1040px){
  .lgx-next{ grid-template-columns:1fr 1fr; }
  .lgx-next__intro{ grid-column:1/-1; }
}
@media (max-width:1040px){
  /* the door stacks: the fleet reads better wide than squeezed beside prose */
  .lgx-door{ grid-template-columns:1fr; gap:clamp(20px,3vw,34px); }
  .lgx-door__body p{ max-width:56ch; }
  .lgx-door__rule{ max-width:none; }
  /* three columns of card is one too many once the portrait is 120px wide */
  .lgx-ties__detail{ grid-template-columns:auto minmax(0,1fr); }
  .lgx-ties__links{ grid-column:1/-1; }
  .lgx-ties__notes{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:760px){
  /* A 1000-unit viewBox inside 390px makes a seventeen-unit caption seven
     pixels tall. Drop the captions and let the medallions be a picture; the
     line underneath says what the picture is. */
  .lgx-door__name,.lgx-door__yrs{ display:none; }
  .lgx-door__node image{ filter:brightness(1.6) saturate(1.15); }
  .lgx-door__cap{
    display:block; margin-top:16px; text-align:center;
    font-family:var(--ui); font-size:10px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--lg-brass-lo);
  }
  .lgx-ties__detail{ grid-template-columns:1fr; }
  .lgx-ties__plate{ width:118px; }
  .lgx-ties__asserted li{ gap:11px; }
  .lgx-grid{ --cols:2; }
  .lgx-head{ min-height:auto; }
  .lgx-sechead{ flex-direction:column; align-items:flex-start; gap:8px; }
  .lgx-sechead.is-centred{ align-items:center; }
  /* the hook is a hover reveal, and there is no hover here — the card body
     carries the same information, so the hook is simply dropped */
  .lgx-card__hook{ display:none; }
  /* Below this the chart cannot shrink further and stay readable — 11px
     labels at 380px wide are 3px. Let it scroll instead. */
  .lgx-tl__stage{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .lgx-tl__svg{ min-width:1080px; }
  .lgx-scrollhint{
    display:block; margin:10px 0 0; font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--lg-brass-lo);
  }
  /* 760 diagram units inside 390px is a five-pixel label. Scroll instead. */
  .lgx-ties__stage{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .lgx-ties__stage svg{ min-width:700px; }
  .lgx-tl__detail{ flex-direction:column; align-items:flex-start; text-align:left; }
  .lgx-pin{ width:34px; height:34px; }
  .lgx-pin::before{ inset:12px; }
}
@media (max-width:420px){
  /* Eleven full-width cards is a very long scroll for a page whose job is
     "choose one". Two up keeps the roster surveyable; the open exhibit spans
     both columns so it still reads as the one you can walk into today. */
  .lgx-grid{ gap:10px; }
  .lgx-grid > .lgx-card.is-open{ flex-basis:100%; }
  .lgx-era-note{ flex-basis:100%; }
  .lgx-card h3{ font-size:12.5px; letter-spacing:.07em; }
  .lgx-card .real,.lgx-card .sea{ font-size:8.5px; letter-spacing:.14em; }
  .lgx-card .yrs{ font-size:9px; letter-spacing:.1em; }
  .lgx-card__body{ padding:0 10px 11px; }
  .lgx-next{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .lgx-head__media img,.lgx-card__media img{ transform:none; }
  .lgx-card__hook{ transition:none; }
}