[v-cloak] { display: none; }

/* ---------- tokens ---------- */
:root {
  --bg: #000;
  --plate: #121212;
  --plate-edge: #050505;
  --text: #fafafa;          /* body text */
  --muted: #8d92a6;
  --title: #a8981a;         /* olive-gold post titles, as on the 2009 site */
  --olive: #9c8a14;         /* sidebar labels */
  --amber: #e3b61a;
  --amber-bright: #ffd229;
  --blue-glow: #9fd2ff;
  --font: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;   /* the 2009 design used a Tahoma-style face at 12px */
  --orange: #d7b413;        /* post dates, sampled from the design */
  --design-w: 1369;         /* artwork width in px; wall/nav sizes below are px / 1369 */
  /* fine dirt: alpha-only noise, laid over bars and panels */
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { background: var(--bg); overflow-y: scroll; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--font);
}

a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--amber-bright); }

:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 8px 12px; background: #000; color: var(--amber-bright); border: 1px solid var(--amber);
}
.skip:focus { top: 8px; }

/* faint scanlines over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .14;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.35) 50%) 0 0 / 100% 3px;
}

/* ---------- page frame ---------- */
.page {
  max-width: 1369px;
  margin: 0 auto;
  position: relative;
}

/* ---------- masthead: header art + nav scale as one unit ---------- */
.masthead__art { position: relative; }

.masthead__hdr {
  position: relative;
  aspect-ratio: 1369 / 194;
  overflow: hidden;
  background: url(assets/header.jpg) center / 100% 100% no-repeat;
}

/* nav-row.jpg's bottom 36px is cross-faded into the wall tiles, so the join is continuous */
.main-nav {
  position: relative;
  aspect-ratio: 1369 / 76;
  background: url(assets/nav-row.jpg) center / 100% 100% no-repeat;
}

.main-nav__item {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(var(--x) / var(--design-w) * 100%);
  width: calc(var(--w) / var(--design-w) * 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* --x/--w: plate position and width in art px.  --tx/--tw: where the sprite's light tube sits inside the plate. */
.main-nav__item--hq  { --x: 262; --w: 148; --tx: 46; --tw: 57; background-image: url(assets/nav/headquarters-base.png); }
.main-nav__item--ar  { --x: 410; --w: 191; --tx: 59; --tw: 74; background-image: url(assets/nav/archives-base.png); }
.main-nav__item--st  { --x: 601; --w: 183; --tx: 57; --tw: 70; background-image: url(assets/nav/storage-base.png); }
.main-nav__item--ca  { --x: 784; --w: 186; --tx: 58; --tw: 71; background-image: url(assets/nav/caravan-base.png); }
.main-nav__item--hub { --x: 970; --w: 166; --tx: 51; --tw: 65; background-image: url(assets/nav/hub-base.png); }

.main-nav__item--hq:hover,  .main-nav__item--hq:focus-visible  { background-image: url(assets/nav/headquarters-hover-blue.png); }
.main-nav__item--ar:hover,  .main-nav__item--ar:focus-visible  { background-image: url(assets/nav/archives-hover-blue.png); }
.main-nav__item--st:hover,  .main-nav__item--st:focus-visible  { background-image: url(assets/nav/storage-hover-blue.png); }
.main-nav__item--ca:hover,  .main-nav__item--ca:focus-visible  { background-image: url(assets/nav/caravan-hover-blue.png); }
.main-nav__item--hub:hover, .main-nav__item--hub:focus-visible { background-image: url(assets/nav/hub-hover-blue.png); }

.main-nav__item--hq.is-current { background-image: url(assets/nav/headquarters-selected-amber.png); }
.main-nav__item--ar.is-current { background-image: url(assets/nav/archives-selected-amber.png); }
.main-nav__item--st.is-current { background-image: url(assets/nav/storage-selected-amber.png); }
.main-nav__item--ca.is-current { background-image: url(assets/nav/caravan-selected-amber.png); }
.main-nav__item--hub.is-current { background-image: url(assets/nav/hub-selected-amber.png); }

/* the light tube under each label is a lamp: give it a halo that spills onto the plate */
.main-nav__item::after {
  content: "";
  position: absolute;
  left: calc(var(--tx) / var(--w) * 100%);
  width: calc(var(--tw) / var(--w) * 100%);
  top: calc(63 / 76 * 100%);
  height: calc(3 / 76 * 100%);
  border-radius: 2px;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .18s;
}
.main-nav__item.is-current::after {
  opacity: 1;
  background: #ffe08a;
  box-shadow:
    0 0 4px 1px rgba(255, 214, 90, .95),
    0 0 12px 4px rgba(255, 170, 30, .6),
    0 -7px 16px 5px rgba(255, 160, 30, .32),
    0 6px 16px 3px rgba(255, 150, 20, .22);
  animation: tube-hum 6s linear infinite;
}
.main-nav__item:not(.is-current):hover::after,
.main-nav__item:not(.is-current):focus-visible::after {
  opacity: 1;
  background: #d4ecff;
  box-shadow:
    0 0 4px 1px rgba(150, 210, 255, .95),
    0 0 12px 4px rgba(70, 160, 255, .55),
    0 -7px 16px 5px rgba(70, 160, 255, .28),
    0 6px 16px 3px rgba(60, 150, 255, .2);
}
@keyframes tube-hum {
  0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .82; } 50% { opacity: 1; } 91% { opacity: .9; } 92% { opacity: 1; }
}

/* ---------- logo lamps ----------
   Each lamp is a bullet-shaped housing with a round bulb at its inner end, facing the logo.
   (bx, by) is the bulb centre in header.jpg px (1369 x 194). Light is a one-way beam, like a torch. */
.lamp {
  position: absolute;
  left: calc(var(--bx) / 1369 * 100%);
  top: calc(var(--by) / 194 * 100%);
  width: calc(190 / 1369 * 100%);
  height: calc(110 / 194 * 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lamp-flicker var(--dur) linear var(--delay) infinite;
}
.lamp--left  { --bx: 327; --by: 153; --ox: 0%;   --origin: 0% 50%;   transform: translate(0, -50%); --dur: 4.1s; --delay: -1.3s; }
.lamp--right { --bx: 839; --by: 154; --ox: 100%; --origin: 100% 50%; transform: translate(-100%, -50%); --dur: 5.7s; --delay: -3.1s; }

.lamp::after {   /* the beam on the plate */
  content: "";
  position: absolute; inset: 0;
  filter: blur(3px);
  background: radial-gradient(ellipse 100% 46% at var(--origin),
    rgba(255, 238, 190, .5), rgba(255, 196, 96, .22) 32%, rgba(255, 150, 40, .07) 62%, transparent 100%);
}
.lamp::before {  /* the bulb */
  content: "";
  position: absolute; z-index: 1;
  left: var(--ox); top: 50%;
  width: calc(15 / 190 * 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 24%, rgba(255, 228, 150, .95) 40%, rgba(255, 170, 60, .5) 64%, transparent 100%);
}

@keyframes lamp-flicker {
  0%, 100% { opacity: 1; }
  6%  { opacity: .15; } 8%  { opacity: 1; }  10% { opacity: .3; } 12% { opacity: .95; }
  40% { opacity: 1; }   41% { opacity: 0; }  43% { opacity: .8; } 44% { opacity: .08; } 47% { opacity: 1; }
  78% { opacity: .9; }  82% { opacity: .2; } 84% { opacity: 1; }
}

/* ---------- body grid: widths are artwork px / 1369 so walls scale with the header ----------
   earth 145 | frame 151 | content 540 | hazard 15 | sidebar 252 | frame 151 | earth 115 */
.body {
  display: grid;
  grid-template-columns: 10.59% 11.03% minmax(0, 1fr) 1.1% 18.41% 11.03% 8.4%;
  grid-template-rows: 1fr auto;     /* the content row takes any spare height; the base slab keeps its size */
  min-height: 100vh;                /* always taller than the window, so the scrollbar is always there and the width never jumps */
  container-type: inline-size;
  position: relative;
}
/* Explicit placement: one content row, then a concrete base slab (same slab texture as the roof) under the bunker.
   The earth columns run past the slab and fade to black, so the page ends with the content instead of the viewport. */
.wall--earth-left  { grid-column: 1; grid-row: 1 / span 2; }
.wall--frame-left  { grid-column: 2; grid-row: 1; }
.content           { grid-column: 3; grid-row: 1; }
.hazard            { grid-column: 4; grid-row: 1; }
.side              { grid-column: 5; grid-row: 1; }
.wall--frame-right { grid-column: 6; grid-row: 1; }
.wall--earth-right { grid-column: 7; grid-row: 1 / span 2; }
.wall--earth-left, .wall--earth-right {
  -webkit-mask-image: linear-gradient(#000 calc(100% - clamp(36px, 7cqw, 96px)), transparent);
          mask-image: linear-gradient(#000 calc(100% - clamp(36px, 7cqw, 96px)), transparent);
}
/* ---------- exhaust fans on the right wall (components/VentFans.js draws them on a canvas) ---------- */
.wall--frame-right { position: relative; }
.vents { position: absolute; z-index: 2; top: calc(520 / 1369 * 100cqw);   /* 520px down the wall at full size, scaling with the page */ right: calc(2 / 151 * 100%); width: calc(138 / 151 * 100%); }
.vents canvas { display: block; width: 100%; aspect-ratio: 138 / 262; }

/* the roof casts a little shadow onto whatever sits under it */
.wall { box-shadow: inset 0 10px 10px -6px rgba(0, 0, 0, .65); }

.base {
  grid-column: 2 / 7; grid-row: 2;
  height: calc(44 / 1369 * 100cqw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.45) 2px 3px, transparent 3px),   /* lit top edge, then a seam */
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6)),                                     /* underside falls into shadow */
    linear-gradient(90deg, rgba(0,0,0,.6), transparent 3.5%, transparent 96.5%, rgba(0,0,0,.6)),    /* ends turn away from the light */
    url(assets/concrete.jpg) left top / auto 100% repeat-x;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .75);
}

.wall {
  background-repeat: repeat-y;
  background-position: top left;
  background-size: 100% auto;     /* tile width == column width, so every tile scales by the same factor */
}
.wall--earth-left  { background-image: url(assets/loop/left-earth-loop.jpg); }
.wall--frame-left  { background-image: url(assets/loop/left-frame-loop.jpg); }
.wall--frame-right { background-image: url(assets/loop/right-frame-loop.jpg); }   /* left frame, mirrored */
.wall--earth-right { background-image: url(assets/loop/right-earth-loop.jpg); }

.content {
  background: var(--plate);
  padding: 1.6rem clamp(16px, 3.2cqw, 40px) 3.5rem;
  box-shadow: inset 0 0 40px rgba(0,0,0,.55);
  outline: none;
}

/* the original narrow painted hazard beam, cut from the 2009 slice and tiled (seamless, 14 x 308) */
.hazard {
  background: #0a0a0a url(assets/hazard.png) repeat-y center top / 100% auto;
  box-shadow: inset 0 0 3px rgba(0,0,0,.9);
}

.side {
  background: #0d0d0d;
  padding: 1rem 14px 2rem;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
  font: 11px/1.4 var(--font);
}

.panel {
  margin: 0 0 14px;
  padding: 7px 9px 5px;
  border: 1px solid #232323;
  background: var(--grit), #0a0a0a;
}
.panel__title { margin: 0 0 7px; font-size: 11px; font-weight: normal; text-transform: uppercase; color: var(--olive); }

.progress-meters { list-style: none; margin: 0; padding: 0; }
.progress-meters__row { margin: 0 0 8px; }
.progress-meters__label { display: block; color: var(--olive); text-transform: uppercase; font-size: 11px; }
.progress-meters__bar {      /* dotted track with a green dotted fill, as on the old site */
  display: block; height: 3px; margin-top: 3px; position: relative;
  background: repeating-linear-gradient(90deg, #3a3a3a 0 1px, transparent 1px 3px);
}
.progress-meters__bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v);
  transition: width 1.6s cubic-bezier(.4, 0, .2, 1);
  background: repeating-linear-gradient(90deg, #3fe03f 0 1px, transparent 1px 3px);
}

.side__join {   /* join.png carries its own grey card background from the 2009 site */
  display: block; margin: 0 auto 14px; width: fit-content;
  border: 1px solid #232323; box-shadow: 0 0 0 1px #050505, inset 0 0 14px rgba(0,0,0,.5);
}
.side__join img { display: block; max-width: 100%; height: auto; }
.side__join:hover { border-color: #6d570c; }
.side__legacy { margin: 0 0 14px; text-align: center; font-size: 11px; }

/* ---------- news ---------- */
.news-post { margin: 0 0 2.4rem; }

/* post header: the original scanline gradient (news.png) + dirt, edge highlights and soot */
/* 2009 style: a flat bar that starts at the page colour on the left (no visible left edge) and darkens to near-black
   on the right, crossed by 3px scanlines. The date sits under it, right-aligned. */
.news-post__head {
  display: flex; align-items: center;
  min-height: 31px; margin: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,.22) 1px 3px),
    var(--grit),
    linear-gradient(90deg, var(--plate) 0%, #0b0b0b 38%, #030303 100%);
}
.news-post__title { margin: 0; padding: 0 .75rem 0 0; font: normal 16px/1.3 var(--font); color: var(--title); }
.news-post__date { display: block; margin: 6px 0 .9rem; text-align: right; font-size: 11px; color: var(--orange); }

.news-post__body { overflow-wrap: anywhere; }
.news-post__body p { margin: 0 0 1em; }
.news-post__body img, .news-post__body iframe, .news-post__body video { max-width: 100%; height: auto; }
.news-post__body img { border: 1px solid #2a2a2a; margin: .5rem 0; cursor: zoom-in; }

/* long sections collapse to a preview; Read more expands them in place */
.read-more__inner { position: relative; }
.read-more.is-collapsed .read-more__inner {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 4.5rem), transparent);
          mask-image: linear-gradient(#000 calc(100% - 4.5rem), transparent);
}
.read-more__toggle {
  display: block; margin: .4rem 0 0; padding: .3rem .9rem; cursor: pointer;
  font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber); background: #17150b; border: 1px solid #6f5a0d;
}
.read-more__toggle:hover { background: #211d0d; color: var(--amber-bright); }

.news-page__status { color: var(--muted); font-family: "Courier New", Courier, monospace; }
.news-page__more {
  display: block; margin: 0 auto; padding: .55rem 1.2rem; cursor: pointer;
  background: #17150b; color: var(--amber); border: 1px solid #6f5a0d; font: inherit; text-transform: uppercase; letter-spacing: .06em;
}
.news-page__more:hover { background: #211d0d; color: var(--amber-bright); }

.info-page__title { margin: 0 0 1rem; font: normal 1.3rem/1.3 var(--font); color: var(--title); }
.info-page__title small { color: var(--muted); font-size: .7em; }
.info-page__body { overflow-wrap: anywhere; }
.info-page__body p { margin: 0 0 1em; }
.info-page__body h2 { margin: 1.6rem 0 .6rem; padding-bottom: .3rem; font: normal 1.05rem/1.3 var(--font); color: var(--title); border-bottom: 1px solid #222; }
.info-page__body h2:first-child { margin-top: 0; }
.info-page__body h3 { margin: 1.4rem 0 .3rem; font: bold 1rem/1.3 var(--font); color: var(--amber); }
.info-page__body h4 { margin: 1.2rem 0 .3rem; font: bold .95rem/1.3 var(--font); color: var(--amber); }
.info-page__body em { font-style: normal; color: var(--olive); }       /* role line under a name */
.info-page__body ul { margin: .4rem 0 1rem; padding-left: 1.1rem; }
.info-page__body li { margin: 0 0 .3rem; }
.info-page__body img[src$="site_logo.gif"] { float: right; margin: 0 0 .6rem 1rem; }

/* ---------- editor (#/admin) ---------- */
.admin label { display: block; margin: 0 0 .8rem; color: var(--muted); font-size: 12px; }
.admin input, .admin select, .admin textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .45rem .55rem; font: inherit; font-size: 13px;
  color: var(--text); background: #0a0a0a; border: 1px solid #333;
}
.admin textarea { font-family: Consolas, "Courier New", monospace; line-height: 1.45; resize: vertical; }
.admin input[type="file"] { padding: .35rem; }
.admin input:focus-visible, .admin select:focus-visible, .admin textarea:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 1px; }
.admin__login { max-width: 22rem; }
.admin__bar { margin: 0 0 .8rem; color: var(--muted); }
.admin__tabs { display: flex; gap: 6px; margin: 0 0 1rem; flex-wrap: wrap; }
.admin__tab, .admin__btn {
  padding: .4rem 1rem; cursor: pointer; font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber); background: #17150b; border: 1px solid #6f5a0d;
}
.admin__tab.is-on { background: #3a3008; color: var(--amber-bright); }
.admin__btn:hover, .admin__tab:hover { background: #211d0d; color: var(--amber-bright); }
.admin__btn:disabled { opacity: .5; cursor: default; }
.admin__btn--quiet { color: var(--text); background: #151515; border-color: #3a3a3a; }
.admin__btn--danger { color: #ff8a7a; background: #1d0e0b; border-color: #6a2a20; margin-left: auto; }
.admin__link { padding: 0; font: inherit; color: var(--amber); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.admin__row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; }
.admin__row label { flex: 1 1 14rem; margin: 0; }
.admin__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.admin__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #1c1c1c; }
.admin__meta, .admin__hint { color: var(--muted); font-size: 12px; }
.admin__ok { color: #7fe07f; }
.admin__error { color: #ff8a7a; }
.admin__help { margin: 0 0 1rem; color: var(--muted); font-size: 12px; }
.admin__help code, .admin__hint code { color: var(--text); background: #1a1a1a; padding: 0 .25rem; }
.admin__preview { margin-top: 1rem; padding: 1rem; border: 1px dashed #444; }
.admin__upload { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #222; }
.admin__upload h2 { margin: 0 0 .8rem; font: normal 1.05rem/1.3 var(--font); color: var(--title); }

/* ---------- gallery ---------- */
.gallery { margin: 0 0 2rem; }
.gallery__heading { margin: 0 0 .7rem; font: normal 1.05rem/1.3 var(--font); color: var(--title); border-bottom: 1px solid #222; padding-bottom: .3rem; }
.gallery__heading small { color: var(--muted); font-size: .75em; }
.gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gallery__item {
  display: block; width: 100%; padding: 0; cursor: zoom-in; text-align: left;
  background: #0a0a0a; border: 1px solid #262626; color: var(--muted); font: inherit;
}
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__item:hover, .gallery__item:focus-visible { border-color: #8a7110; color: var(--amber); }
.gallery__caption { display: block; padding: 4px 6px; font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- image viewer ---------- */
.viewer-open { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: rgba(0,0,0,.94); outline: none;
}
.viewer__bar {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: #0b0b0b; border-bottom: 1px solid #2a2a2a; font-size: 13px;
}
.viewer__count { color: var(--muted); }
.viewer__title { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__btn {
  flex: none; padding: 6px 12px; cursor: pointer; text-decoration: none; font: inherit;
  color: var(--amber); background: #17150b; border: 1px solid #6f5a0d;
}
.viewer__btn:hover { background: #211d0d; color: var(--amber-bright); }
.viewer__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.viewer__stage.is-zoomed { overflow: auto; display: block; }
.viewer__stage.is-zoomed .viewer__img { max-width: none; max-height: none; cursor: zoom-out; margin: auto; }
.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 72px;
  font-size: 2.4rem; line-height: 1; cursor: pointer; color: var(--amber); background: rgba(0,0,0,.55); border: 1px solid #3a2f08;
}
.viewer__nav:hover { background: rgba(23,21,11,.9); color: var(--amber-bright); }
.viewer__nav--prev { left: 8px; }
.viewer__nav--next { right: 8px; }
@media (max-width: 600px) { .viewer__btn { padding: 6px 8px; } .viewer__nav { width: 40px; height: 60px; } }

.foot { padding: 1rem 1rem 2rem; text-align: center; font-size: .75rem; color: #8f8f8f; }
.foot p { margin: 0; }

/* ---------- mobile menu (hidden on desktop) ---------- */
.mobile-menu { display: none; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1000px) {
  .main-nav, .lamp { display: none; }

  .masthead__hdr {
    aspect-ratio: auto;
    height: clamp(96px, 26vw, 200px);
    background-size: cover;
    background-position: 36% 50%;
  }

  .mobile-menu { display: block; background: #111; border-block: 1px solid #2a2a2a; }
  .mobile-menu__bar {
    min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; cursor: pointer; list-style: none;
    color: var(--amber); text-transform: uppercase; letter-spacing: .04em; font-weight: bold;
    border-left: 4px solid #9b7809;
    background: radial-gradient(circle at 18% 100%, rgba(235,189,6,.2), transparent 34%), linear-gradient(90deg, rgba(152,124,14,.2), transparent 55%);
  }
  .mobile-menu__bar::-webkit-details-marker { display: none; }
  .mobile-menu__current small { display: block; margin-top: 2px; color: var(--muted); font-weight: normal; font-size: .7rem; text-transform: lowercase; letter-spacing: 0; }
  .mobile-menu__toggle {
    flex: none; padding: 6px 9px; font-size: .7rem; color: var(--blue-glow);
    border: 1px solid #254762; background: rgba(12,24,34,.82); box-shadow: 0 0 10px rgba(57,160,255,.22);
  }
  .mobile-menu[open] .mobile-menu__toggle::after { content: " \25B2"; }
  .mobile-menu:not([open]) .mobile-menu__toggle::after { content: " \25BC"; }

  .mobile-menu__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 14px;
    background: linear-gradient(180deg, rgba(16,18,18,.96), rgba(4,5,5,.98)); box-shadow: inset 0 10px 22px rgba(0,0,0,.6);
  }
  .mobile-menu__link {
    display: block; min-height: 48px; padding: 9px 12px 8px 14px; text-decoration: none;
    color: #c8980d; text-transform: uppercase; letter-spacing: .045em; font-weight: bold; line-height: 1.2; font-size: .85rem;
    border: 1px solid #272313; border-left: 3px solid #6d570c;
    background: linear-gradient(90deg, rgba(152,124,14,.16), transparent 58%), #121313;
  }
  .mobile-menu__link small { display: block; margin-top: 3px; color: var(--muted); font-weight: normal; font-size: .7rem; text-transform: lowercase; letter-spacing: 0; }
  .mobile-menu__link:hover, .mobile-menu__link:focus-visible {
    color: #d9edff; border-color: #315b78; border-left-color: #4ea8e8;
    background: linear-gradient(90deg, rgba(41,105,150,.28), transparent 70%), #11171b;
    box-shadow: 0 0 14px rgba(57,160,255,.22);
  }
  .mobile-menu__link.is-current {
    color: var(--amber-bright); border-color: #6f5a0d; border-left-color: #ebbd06;
    background: linear-gradient(90deg, rgba(152,124,14,.34), transparent 68%), #17150b;
  }

  .body { grid-template-columns: 14px minmax(0, 1fr) 14px; grid-template-rows: auto 1fr auto; }
  .wall--earth-left, .wall--earth-right, .hazard, .vents { display: none; }
  .wall--frame-left  { grid-column: 1; grid-row: 1 / span 2; background-size: auto; background-position: -88px 0; }
  .wall--frame-right { grid-column: 3; grid-row: 1 / span 2; background-size: auto; background-position: -35px 0; }
  .content { grid-column: 2; grid-row: 1; padding: 1.2rem 1rem 2rem; }
  .side    { grid-column: 2; grid-row: 2; }
  .base    { grid-column: 1 / -1; grid-row: 3; height: 22px; }
}

@media (max-width: 480px) {
  .mobile-menu__list { grid-template-columns: 1fr; }
  body { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-meters__bar::before { transition: none; }
  .lamp { animation: none; opacity: .85; }
  .main-nav__item.is-current::after { animation: none; }
}