/* ============================================================
   TIMELINE — Level 1 (index) · Level 2 (gallery) · Levels 3-5 (chapter)
   ============================================================ */

body.timeline-page{ height:100%; overflow:hidden; }
html.timeline-page{ height:100%; overflow:hidden; }
body.is-dragging{ cursor:grabbing; }

.stage{
  position:fixed; inset:0; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
}

.plane{
  position:absolute; top:0; left:0; height:100%; width:0;
  will-change:transform;
}
.plane--dust   { z-index:1; pointer-events:none; }
.plane--arcs   { z-index:2; pointer-events:none; }
.plane--decades{ z-index:3; pointer-events:none; }
.plane--grid   { z-index:4; pointer-events:none; }
.plane--eras   { z-index:5; pointer-events:none; }
.plane--spine  { z-index:6; }
.plane--fg     { z-index:7; pointer-events:none; }

/* ---------- atmosphere ------------------------------------- */

.mk{ position:absolute; display:block; }
.mk--dot { width:2px; height:2px; background:var(--ink-12); }
.mk--ring{ border:var(--hair) solid var(--ink-06); border-radius:50%;
           transform:translate(-50%,-50%); }
.mk--bar { width:var(--hair); height:9px; background:var(--ink-12); }
.mk--sq  { width:4px; height:4px; background:var(--red-30); }

.decade{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  font-weight:700; font-size:300px; letter-spacing:-.06em; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--ink-06);
  white-space:nowrap; transition:font-size .5s var(--ease);
}

/* ---------- year grid -------------------------------------- */

.gridline{
  position:absolute; top:50%; height:264px; transform:translateY(-50%);
  width:var(--hair); background:var(--ink-06);
}
.gridline.is-lustrum{ background:var(--ink-12); height:344px; }
.gridline .yr{
  position:absolute; top:calc(100% + 12px); left:0;
  font-family:var(--mono); font-size:9px; letter-spacing:.10em;
  color:var(--ink-22); white-space:nowrap;
}

/* ---------- era bands -------------------------------------- */

.era{
  position:absolute; top:50%; height:600px; transform:translateY(-50%);
  border-left:var(--hair) solid var(--ink-12);
  border-right:var(--hair) solid var(--ink-12);
}
.era .era-name{
  position:absolute; top:-30px; left:var(--era-x,50%); white-space:nowrap;
  color:var(--ink-38); transform:translateX(-50%);
  transition:color .5s var(--ease), font-size .5s var(--ease);
}
.era .era-note{
  position:absolute; bottom:-28px; left:var(--era-x,50%); white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  color:var(--ink-22); transform:translateX(-50%);
}

/* ---------- the spine -------------------------------------- */

.spine-rule{
  position:absolute; top:50%; height:var(--hair);
  background:var(--ink-22); transform:translateY(-50%);
}
/* the open-ended tail that runs on toward The Future */
.spine-tail{
  position:absolute; top:50%; height:var(--hair);
  transform:translateY(-50%);
  background:repeating-linear-gradient(to right,
    var(--ink-22) 0 5px, transparent 5px 12px);
}

/* ============================================================
   STATIONS
   ============================================================ */

.station{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:212px; height:0; cursor:pointer;
}
.station:focus{ outline:0; }
/* far from the camera: invisible and inert, but still laid out so Safari
   keeps the decoded images instead of tearing them on the way back in */
.station.is-far{ visibility:hidden; pointer-events:none; }

.station .hit{
  position:absolute; left:50%; top:50%; width:196px; height:250px;
  transform:translate(-50%,-50%);
}
.station .stalk{
  position:absolute; left:50%; top:50%; width:var(--hair); height:52px;
  background:var(--ink-22); transform:translateX(-50%) translateY(-100%);
  transition:height .5s var(--ease), background .35s var(--ease);
}
.station .node{
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border:var(--hair) solid var(--ink-22); border-radius:50%; background:var(--paper);
  transition:transform .45s var(--ease-out), background .35s var(--ease),
             border-color .35s var(--ease);
}
.station .halo{
  position:absolute; left:50%; top:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border:var(--hair) solid var(--red-30); border-radius:50%;
  opacity:0; transform:scale(.55);
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
}

/* the four marked chapters — and The Future */
.station.is-marked .node{
  background:var(--red); border-color:var(--red);
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
}
.station.is-future .node{
  background:var(--paper); border-color:var(--red); border-width:2px;
}

.station .card{
  position:absolute; left:0; right:0; text-align:center;
  transition:transform .5s var(--ease-out), opacity .45s var(--ease);
}
.station .yr{
  display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; color:var(--ink-38); margin-bottom:9px;
}
.station .org{
  display:block; font-size:19px; font-weight:700; letter-spacing:-.028em;
  line-height:1.05; margin-bottom:6px;
}
.station .rolename{
  display:block; font-size:10px; font-weight:500; color:var(--ink-60); line-height:1.35;
}
.station .kick{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  color:var(--ink-22); line-height:1.5;
}
.station .idx{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--ink-22);
}

.station:hover .node, .station.is-active .node{ transform:scale(1.8); }
.station:hover .halo, .station.is-active .halo{ opacity:1; transform:scale(1); }
.station:hover .stalk,.station.is-active .stalk{ height:64px; background:var(--ink-38); }

/* ============================================================
   LEVEL 1 — INDEX
   The whole span at once. Only the station you are on is named.
   ============================================================ */

.stage[data-level="index"] .gal{ display:none; }
.stage[data-level="index"] .station{ width:230px; }
.stage[data-level="index"] .station .hit{ width:26px; height:190px; }
.stage[data-level="index"] .station .card{ pointer-events:auto; }
.stage[data-level="index"] .station{ cursor:pointer; }
/* titles alternate above and below the rail so neighbouring chapters
   can never render on top of each other */
/* the label carries the paper with it, so where two chapters sit close
   together the active one occludes its neighbour cleanly instead of
   overprinting it */
.stage[data-level="index"] .station .card{
  opacity:0; background:var(--paper); padding:7px 10px;
}
.stage[data-level="index"] .station.is-active,
.stage[data-level="index"] .station:hover{ z-index:40; }
.stage[data-level="index"] .station.is-up   .card{
  bottom:calc(50% + 60px); top:auto; transform:translateY(6px);
}
.stage[data-level="index"] .station.is-down .card{
  top:calc(50% + 60px); bottom:auto; transform:translateY(-6px);
}
.stage[data-level="index"] .station.is-active .card,
.stage[data-level="index"] .station:hover .card{ opacity:1; transform:none; }
.stage[data-level="index"] .station.is-down .stalk{
  transform:translateX(-50%) translateY(0);
}
.stage[data-level="index"] .station .rolename,
.stage[data-level="index"] .station .kick,
.stage[data-level="index"] .station .idx{ display:none; }
.stage[data-level="index"] .station.is-active .rolename{ display:block; }
.stage[data-level="index"] .station .org{ font-size:21px; }
.stage[data-level="index"] .station .stalk{ height:40px; }
.stage[data-level="index"] .station.is-active .stalk{ height:52px; }

.stage[data-level="index"] .decade{ font-size:96px; }
.stage[data-level="index"] .gridline:not(.is-lustrum){ display:none; }
.stage[data-level="index"] .gridline.is-lustrum{ height:470px; }
.stage[data-level="index"] .era{ height:520px; }
.stage[data-level="index"] .era .era-name{ color:var(--ink); font-size:15px; letter-spacing:.15em; }
.stage[data-level="index"] .era .era-note{ color:var(--ink-38); }
.stage[data-level="index"] .mk--ring{ opacity:.4; }

/* ============================================================
   LEVEL 2 — GALLERY
   ============================================================ */

.gal{
  position:absolute; left:0; top:0; width:100%; height:0;
  /* contain the multiply blends so they can't interact with the animated
     opacity on the station above them — that pairing is what sliced the
     pictures in half on iOS */
  isolation:isolate;
}

.stage[data-level="gallery"] .station .card{
  bottom:calc(50% + 62px); top:auto; opacity:1; transform:none;
}
.stage[data-level="gallery"] .station .stalk{
  transform:translateX(-50%) translateY(-100%);
}
.stage[data-level="gallery"] .station.is-active .card{ transform:translateY(-6px); }
.stage[data-level="gallery"] .station .idx{ top:calc(50% - 18px); left:calc(50% - 36px); transform:none; }
.stage[data-level="gallery"] .station .org{ font-size:22px; }

/* anything that does still arrive late fades in rather than popping */
.gal img{ animation:gal-in .5s var(--ease) both; }
@keyframes gal-in{ from{ opacity:0 } to{ opacity:1 } }

.gal-mark{
  position:absolute; left:50%; bottom:calc(50% + 168px);
  transform:translateX(-50%);
  height:auto; width:auto; max-height:66px; max-width:250px;
  mix-blend-mode:multiply;
}
.gal-clients{
  position:absolute; left:50%; top:calc(50% + 34px);
  transform:translateX(-50%); width:340px; height:auto;
  mix-blend-mode:multiply;
}
.gal-shot{
  position:absolute; margin:0;
  left:calc(50% + var(--x)); top:calc(50% + var(--y)); width:var(--w);
  transform:translate3d(calc(-50% + var(--dx,0px)), -50%, 0);
  will-change:transform;
}
.gal-shot img{
  display:block; width:100%; height:auto;
  border:var(--hair) solid var(--ink-12); background:var(--paper-deep);
  backface-visibility:hidden;          /* stops the half-tile artefact */
  -webkit-transform:translateZ(0);
}
.gal-shot figcaption{
  margin-top:7px; font-family:var(--mono); font-size:8px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-38);
  opacity:0; transition:opacity .4s var(--ease);
}
.station.is-active .gal-shot figcaption{ opacity:1; }

/* colour still arrives on approach — but as one class change per station,
   not a filter recomputed sixty times a second */
.stage[data-level="gallery"] .station .gal{
  filter:saturate(.35);
  transition:filter .45s var(--ease);
}
.stage[data-level="gallery"] .station.is-active .gal{ filter:none; }
.gal-shot:hover img{ border-color:var(--red); }
.stage[data-level="gallery"] .station .hit{ width:280px; height:300px; }
.stage[data-level="gallery"] .gal-shot{ cursor:pointer; }

/* ============================================================
   FIXED FURNITURE
   ============================================================ */

.masthead{
  position:fixed; top:var(--rail); left:var(--rail); z-index:50;
  display:flex; align-items:baseline; gap:14px;
  transition:opacity .5s var(--ease);
}
.masthead .home{
  font-size:15px; font-weight:700; letter-spacing:-.02em;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  font-family:var(--sans);
}
.masthead .home:hover{ color:var(--red); }
.masthead .rule{ width:26px; height:var(--hair); background:var(--ink-22); align-self:center; }
.masthead .role{ color:var(--ink-60); font-size:9px; font-weight:600;
                 letter-spacing:.20em; text-transform:uppercase; }

.meta-tr{
  position:fixed; top:var(--rail); right:calc(var(--rail) + 26px); z-index:50;
  text-align:right; color:var(--ink-38);
  transition:opacity .5s var(--ease);
}
.meta-tr .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--red); margin-right:6px; vertical-align:middle;
}

.rail-bottom{
  position:fixed; bottom:var(--rail); left:var(--rail); right:calc(var(--rail) + 24px);
  z-index:50; display:flex; justify-content:space-between; align-items:flex-end;
  transition:opacity .5s var(--ease);
}
.keys{ display:flex; gap:18px; color:var(--ink-38); }
.keys span{ display:flex; align-items:center; gap:6px; }
.keys kbd{
  font-family:var(--mono); font-size:9px; line-height:1;
  border:var(--hair) solid var(--ink-22); color:var(--ink-60);
  padding:4px 5px; min-width:17px; text-align:center;
}

.zoomer{
  position:fixed; left:var(--rail); top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column;
  border:var(--hair) solid var(--ink-12);
  transition:opacity .5s var(--ease);
}
.zoomer button{
  appearance:none; background:transparent; border:0;
  border-bottom:var(--hair) solid var(--ink-12);
  width:26px; height:26px; cursor:pointer; padding:0;
  color:var(--ink-38); font-family:var(--mono); font-size:10px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.zoomer button:last-child{ border-bottom:0; }
.zoomer button[aria-current="true"]{ background:var(--ink); color:var(--paper); }
.zoomer button:hover:not([aria-current="true"]){ background:var(--ink-06); color:var(--ink); }

.travel{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--rail) + 34px); z-index:50;
  width:min(420px,40vw); height:var(--hair); background:var(--ink-12);
  transition:opacity .5s var(--ease);
}
.travel i{
  position:absolute; top:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--red); transform:translateX(-50%);
  transition:left .25s linear;
}
body.lvl-index .travel, body.detail .travel{ opacity:0; }

.reticle{
  position:fixed; left:50%; top:50%; z-index:8;
  width:1px; height:1px; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.reticle::before,.reticle::after{
  content:''; position:absolute; left:0; background:var(--ink-22); width:var(--hair);
}
.reticle::before{ height:15px; top:-118px; }
.reticle::after { height:15px; top:103px; }
body.detail .reticle, body.lvl-index .reticle{ opacity:0; }

body.detail .masthead, body.detail .meta-tr,
body.detail .rail-bottom, body.detail .zoomer{ opacity:0; pointer-events:none; }
body:not(.in-timeline) .masthead, body:not(.in-timeline) .meta-tr,
body:not(.in-timeline) .rail-bottom, body:not(.in-timeline) .zoomer,
body:not(.in-timeline) .travel, body:not(.in-timeline) .reticle{ opacity:0; pointer-events:none; }

/* ============================================================
   CHAPTER — Levels 3, 4 and 5
   ============================================================ */

.chapter{
  position:fixed; inset:0; z-index:70; background:var(--paper);
  opacity:0; visibility:hidden; transform:translateY(26px);
  transition:opacity .55s var(--ease), transform .65s var(--ease-out), visibility .55s;
}
body.detail .chapter{ opacity:1; visibility:visible; transform:none; }

.chapter-inner{ height:100%; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
.chapter-inner::-webkit-scrollbar{ width:0; }

.ch-top{
  position:fixed; top:var(--rail); left:var(--rail); right:var(--rail); z-index:8;
  display:flex; justify-content:space-between; align-items:baseline; pointer-events:none;
}
.ch-top .t-mono{ color:var(--ink-38); }
.ch-close{
  pointer-events:auto; appearance:none; background:transparent;
  border:var(--hair) solid var(--ink-22); color:var(--ink-60);
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 12px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ch-close:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.ch-rail{
  position:fixed; right:calc(var(--rail) + 2px); top:22%; bottom:22%;
  width:var(--hair); background:var(--ink-12); z-index:8;
}
.ch-rail i{
  position:absolute; left:-1px; width:3px; background:var(--red);
  top:0; height:0; transition:height .12s linear;
}

.sheet{
  min-height:100vh; padding:calc(var(--rail) * 3) calc(var(--rail) * 2);
  display:flex; flex-direction:column; justify-content:center; position:relative;
}
.sheet + .sheet{ border-top:var(--hair) solid var(--ink-12); }

/* --- LEVEL 3 — text only ---------------------------------- */

.sheet--text{ max-width:1180px; margin:0 auto; width:100%; }
.ch-era{ color:var(--red); margin-bottom:26px; }
.ch-span{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-38); margin-bottom:20px;
}
.ch-org{
  font-size:clamp(46px,7.4vw,104px); font-weight:700;
  letter-spacing:-.045em; line-height:.92; margin:0 0 18px;
}
.ch-role{ font-size:clamp(15px,1.7vw,21px); font-weight:500; margin:0 0 40px; }
.ch-summary{ max-width:40em; }
.ch-summary p{
  font-size:clamp(15px,1.5vw,19px); line-height:1.62; letter-spacing:-.006em;
  margin:0 0 1.4em; color:var(--ink);
}
.ch-summary p:first-child{
  font-size:clamp(17px,2vw,25px); line-height:1.46; color:var(--ink-60);
  letter-spacing:-.012em; margin-bottom:1.5em;
}

.facts{ display:flex; flex-wrap:wrap; border-top:var(--hair) solid var(--ink); margin-top:48px; }
.fact{
  flex:1 1 190px; padding:24px 24px 0 0; min-width:170px;
  border-right:var(--hair) solid var(--ink-12);
}
.fact:last-child{ border-right:0; }
.fact b{
  display:block; font-size:clamp(26px,3.2vw,42px); font-weight:700;
  letter-spacing:-.04em; line-height:1; margin-bottom:10px;
}
.fact span{
  display:block; font-size:10px; font-weight:500; line-height:1.5;
  color:var(--ink-60); max-width:19em;
}

/* --- LEVEL 3b — the long text, one screen down -------------- */

.sheet--desc{ max-width:1180px; margin:0 auto; width:100%; }
.desc-grid{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:0 60px; align-items:start;
}
.desc-grid h3{
  font-size:10px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-38); margin:0; padding-top:9px;
  border-top:var(--hair) solid var(--ink); display:inline-block;
}
.desc-copy p{
  font-size:clamp(14px,1.35vw,17px); line-height:1.68; letter-spacing:-.004em;
  margin:0 0 1.5em; max-width:40em; color:var(--ink);
}
.desc-copy p:last-child{ margin-bottom:0; }

/* a quoted paragraph steps out of the column */
.ch-summary p.pull,
.desc-copy p.pull{
  font-size:clamp(19px,2.2vw,29px); line-height:1.34; letter-spacing:-.022em;
  color:var(--ink); font-weight:400;
  border-left:2px solid var(--red); padding-left:26px;
  margin:1.9em 0 1.9em -28px; max-width:24em;
}
@media (max-width:820px){
  .ch-summary p.pull, .desc-copy p.pull{ margin-left:0; padding-left:18px; font-size:19px; }
}

/* --- LEVEL 4 — one screen per image ------------------------ */

.sheet--plate{ padding-left:var(--rail); padding-right:var(--rail); }
.plate{
  width:100%; max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,.85fr);
  gap:0 56px; align-items:start;
}
.plate.is-bare{ grid-template-columns:minmax(0,1fr); max-width:1180px; }
.plate figure{ margin:0; min-width:0; }
.plate img,
.plate video{
  display:block; width:100%; height:auto; max-height:74vh;
  object-fit:contain; object-position:left center;
}
.plate video{ background:var(--ink); outline:var(--hair) solid var(--ink-12); }
.plate figure.is-film .cap span:last-child{ color:var(--red); }
.plate .cap{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:var(--hair) solid var(--ink-12); padding-top:11px; margin-top:16px;
}
.plate .cap span{ font-family:var(--mono); font-size:9px; letter-spacing:.10em; color:var(--ink-38); }
.plate-text{ padding-top:6px; }
.plate-text h4{
  font-size:clamp(20px,2.1vw,28px); font-weight:700; letter-spacing:-.032em;
  line-height:1.08; margin:0 0 18px; padding-top:14px;
  border-top:var(--hair) solid var(--ink);
}
.plate-text p{
  font-size:clamp(13px,1.2vw,15px); line-height:1.66; color:var(--ink-60);
  margin:0 0 1.3em;
}

/* --- LEVEL 5 — the end plate ------------------------------- */

.sheet--end{ align-items:center; text-align:center; }
.sheet--end .t-mono{ color:var(--ink-38); margin-bottom:20px; }
.sheet--end .nextname{
  font-size:clamp(30px,5vw,64px); font-weight:700;
  letter-spacing:-.045em; margin:0 0 34px;
}
.btn-line{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.close-mail{
  display:inline-block; margin-top:30px; color:var(--ink-38);
  text-decoration:none; border-bottom:var(--hair) solid var(--ink-12);
  padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.close-mail:hover{ color:var(--ink); border-color:var(--red); }

/* ============================================================
   MOBILE INDEX — Level 1 on a phone
   ============================================================ */

.m-index{ display:none; }

@media (max-width:700px){
  .m-index{
    position:fixed; inset:0; z-index:20; background:var(--paper);
    overflow-y:auto; overscroll-behavior:contain;
    padding:calc(var(--rail) * 3.6) var(--rail) calc(var(--rail) * 4);
    transition:opacity .5s var(--ease), visibility .5s;
  }
  body.lvl-index.in-timeline .m-index{ display:block; opacity:1; visibility:visible; }
  body:not(.lvl-index) .m-index,
  body:not(.in-timeline) .m-index,
  body.detail .m-index{ opacity:0; visibility:hidden; pointer-events:none; }

  .m-era{
    padding:26px 0 12px; border-bottom:var(--hair) solid var(--ink);
    margin-bottom:2px;
  }
  .m-era:first-child{ padding-top:0; }
  .m-era .t-label{ color:var(--red); }

  .m-row{
    display:grid; grid-template-columns:26px 1fr auto; gap:0 12px;
    align-items:baseline; width:100%; text-align:left;
    appearance:none; background:transparent; cursor:pointer; color:inherit;
    border:0; border-bottom:var(--hair) solid var(--ink-12);
    padding:15px 0; font-family:var(--sans);
  }
  .m-num{ font-family:var(--mono); font-size:9px; color:var(--ink-22); }
  .m-org{ display:block; font-size:17px; font-weight:600; letter-spacing:-.026em; }
  .m-role{ display:block; font-size:11px; color:var(--ink-60); margin-top:3px; line-height:1.35; }
  .m-yr{ font-family:var(--mono); font-size:9px; color:var(--ink-38); white-space:nowrap; }
  .m-row.is-marked .m-org{ font-weight:700; }
  .m-row.is-marked .m-num{ color:var(--red); }
  .m-row:active{ background:var(--ink-06); }

  /* the stage is still there behind — just quiet */
  body.lvl-index.in-timeline .stage,
  body.lvl-index.in-timeline .zoomer,
  body.lvl-index.in-timeline .reticle,
  body.lvl-index.in-timeline .meta-tr,
  body.lvl-index.in-timeline .rail-bottom,
  body.lvl-index.in-timeline .travel{ opacity:0; pointer-events:none; }

  /* the masthead needs a ground to sit on while the index scrolls */
  .masthead{
    left:0; right:0; top:0; padding:var(--rail) var(--rail) 14px;
    background:linear-gradient(var(--paper) 66%, rgba(245,244,240,0));
  }

  .m-foot{
    display:flex; gap:18px; flex-wrap:wrap;
    padding-top:26px; margin-top:6px;
    border-top:var(--hair) solid var(--ink-22);
  }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */

@media (max-width:820px){
  .decade{ font-size:120px; }
  .station{ width:190px; }
  .station .org{ font-size:16px; }
  .stage[data-level="index"] .station .org{ font-size:17px; }
  .stage[data-level="gallery"] .station .org{ font-size:17px; }
  .sheet{ padding:calc(var(--rail) * 4) var(--rail); min-height:100svh; }
  .fact{ flex:1 1 100%; border-right:0;
         border-bottom:var(--hair) solid var(--ink-12); padding:20px 0; }
  .plate{ grid-template-columns:1fr; gap:26px; }
  .desc-grid{ grid-template-columns:1fr; gap:16px; }
  .plate img{ max-height:52vh; }
  .plate-text h4{ font-size:20px; }
  .keys{ display:none; }
  .era .era-name, .era .era-note{ display:none; }
  .masthead .rule, .masthead .role{ display:none; }
  .meta-tr{ top:auto; bottom:calc(var(--rail) + 24px); right:auto;
            left:var(--rail); text-align:left; }
  .rail-bottom{ justify-content:flex-start; }
  .reticle::before{ top:-96px; }
  .reticle::after { top:84px; }
  .station .hit{ width:150px; height:210px; }
  .mk--ring{ opacity:.5; }
  .travel{ width:60vw; bottom:calc(var(--rail) + 96px); }
  .gal-shot{ --w:200px !important; }
  .gal-clients{ width:230px; }
  .btn-line{ flex-direction:column; width:100%; max-width:280px; }
  .btn-line .btn{ width:100%; }
}