/* Arbitheon - LIGHT / BRUSHED SILVER field.

   Approach: the page IS the metal sheet. Brushed banding in the background,
   the wordmark and rules INCISED into it (dark fill + a white highlight
   directly below reads as engraved), panels recessed, the button raised.
   Electric blue darkens to #0B6FD4 for text-weight contrast; the bright
   #2E9BFF is kept for glows and focus rings only. */

/* ---------- fonts, self-hosted ----------
   Paths resolve against this stylesheet, which sits at the site root, so
   they hold for pages at any depth. Filenames carry a version stamp from
   google-webfonts-helper, so they can be cached hard and forever: a new
   release arrives under a new name rather than overwriting one. */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/marcellus-v14-latin-regular.woff2") format("woff2"),
       url("assets/fonts/marcellus-400.ttf") format("truetype");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/spectral-v15-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/spectral-v15-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
}

:root {
  /* the sheet */
  --steel-hi:   #FDFEFF;
  --steel-1:    #F4F7FA;
  --steel-2:    #E7ECF2;
  --steel-3:    #D6DDE6;
  --steel-4:    #BEC8D4;
  --steel-edge: #9DA9B7;
  --steel-dark: #7C8898;

  /* ink */
  --ink:      #141B26;
  --ink-2:    #33404F;
  --ink-3:    #4E5B6C;
  --ink-faint:#5F6D7E;

  /* electric blue */
  --electric:      #0B6FD4;
  --electric-hot:  #2E9BFF;
  --electric-deep: #08508F;

  /* the Octad */
  --gem-purple:  #6B3FB8;
  --gem-green:   #1E8A5A;
  --gem-blue:    #2B7FB0;
  --gem-yellow:  #C39A12;
  --gem-orange:  #A85A0C;
  --gem-red:     #A31E18;
  --gem-magenta: #B02268;
  --gem-coral:   #C24E38;

  /* Brushed sheet.
     Layer 1 is fractal turbulence with baseFrequency stretched hard in x
     (0.007 vs 0.85), which smears the noise into irregular horizontal
     striations - actual brush marks, varying in width and darkness.
     Layers 2-4 are fine pinstripes at coprime periods (4/7/11px) so they
     beat against each other and never repeat in lockstep. Layer 5 is the
     rolled-metal gradient underneath. */
  /* Brushed sheet. Everything runs HORIZONTALLY - previously the
     pinstripes ran vertical while the turbulence streaked horizontal, and
     the two cross-hatched into a weave instead of reinforcing.

     Two turbulence layers do the real work: a fine one for brush marks,
     a coarse one for broad tonal drift so the sheet isn't evenly lit.
     The pinstripes are now only a faint overlay, and each sits at a
     slightly DIFFERENT angle (179 / 179.4 / 178.7 / 179.2) so they drift
     in and out of phase across the page rather than marching in step. */
  --brush-fine:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.4' numOctaves='5' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1200' height='800' filter='url(%23n)'/%3E%3C/svg%3E");

  --brush-coarse:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.16' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1200' height='800' filter='url(%23c)'/%3E%3C/svg%3E");

  --brushed:
    repeating-linear-gradient(179deg,   rgba(255,255,255,0.11) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(179.4deg, rgba(116,120,127,0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(178.7deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(179.2deg, rgba(116,120,127,0.040) 0 1px, transparent 1px 13px),
    linear-gradient(166deg,
      #F8F9FA 0%,  #E9EBEE 19%, #F3F4F7 33%, #D9DCE1 52%,
      #EFF0F3 68%, #E2E4E9 84%, #F2F3F6 100%);

  /* incised groove */
  --rule: linear-gradient(90deg,
      transparent 0%, var(--steel-edge) 16%, var(--steel-dark) 50%,
      var(--steel-edge) 84%, transparent 100%);

  /* the dark field the plate sits on */
  --void:   #070A11;
  --void-2: #0C111B;

  --measure-prose: 46rem;   /* line length for body copy */
  --plate:         56rem;   /* the plate itself */

  --ff-display: "Marcellus", Georgia, serif;
  --ff-body:    "Spectral", Georgia, serif;
  --ff-util:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 40rem at 50% -8rem, rgba(46,155,255,0.13), transparent 70%),
    radial-gradient(90rem 60rem at 50% 120%, rgba(11,79,148,0.16), transparent 72%),
    var(--void);
  background-attachment: fixed;
  color: var(--ink-2);
  font-family: var(--ff-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* a faint cool wash so the sheet is not uniformly bright */
/* vignette on the dark field so the plate reads as lit from above */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 30%,
      transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* ---------- the plate ----------
   The brushed sheet moved OFF the body and ONTO this element. Content now
   sits on a raised metal plate floating on a dark field, so the surround
   is deliberate rather than leftover. Bevel is inset highlight along the
   top edge, inset shade along the bottom, and a cast shadow underneath. */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--plate);
  margin: clamp(1.25rem, 5vh, 4rem) auto;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 5vw, 3.5rem) clamp(3rem, 6vh, 4rem);

  background-image: var(--brush-fine), var(--brush-coarse), var(--brushed);
  background-size: 1200px 800px, 1200px 800px, auto, auto, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  /* blends the noise into the layers BELOW it only - never touches content */
  background-blend-mode: overlay, soft-light, normal, normal, normal, normal, normal;

  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 1px 0 0 rgba(255,255,255,0.55),
    inset -1px 0 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(138,141,148,0.55),
    0 0 0 1px rgba(168,171,178,0.30),
    0 26px 64px -22px rgba(0,0,0,0.92),
    0 6px 20px -6px rgba(0,0,0,0.55);
}

/* prose keeps a readable line length regardless of how wide the plate is */
.thesis, .lede { max-width: var(--measure-prose); }

/* ---------- masthead ---------- */

.masthead {
  width: auto;
  max-width: none;
  /* at 5rem the lockup nearly fills the plate's content width, so the cutout
     extends a touch past it toward the plate edges (staying centered) to keep
     a buffer around the lockup. */
  margin: 0 -1.75rem clamp(2rem, 5vh, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 1.75rem;
  border-radius: 16px;
  /* a window cut through the plate into the void: the energized mark and the
     wordmark both live on the dark, where the mark can actually glow. */
  background:
    radial-gradient(90% 120% at 50% 30%, rgba(46,155,255,0.10), transparent 62%),
    radial-gradient(130% 130% at 50% 42%, #0C121C 0%, #06090F 88%);
  box-shadow:
    inset 0 5px 15px rgba(0,0,0,0.85),
    inset 0 2px 4px rgba(0,0,0,0.7),
    inset 0 -2px 4px rgba(120,150,190,0.09),
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.95),
    0 -1px 0 rgba(140,150,164,0.45);
}

.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.9rem);
}

.mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(54px, 11vw, 96px);
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.9))
          drop-shadow(0 2px 5px rgba(40,55,75,0.30));
}

/* the energized web mark, sitting in the cutout on the void (no metal drop-shadow
   here - it glows on its own). Flat arbitheon-mark.svg stays the small/print track. */
.emark {
  display: block;
  flex: 0 0 auto;
  width: 200px;
  height: auto;
}

/* incised: dark metal fill, white highlight dropped directly beneath.
   drop-shadow() follows the glyph alpha, so it works with background-clip:text
   where text-shadow would not. */
.wordmark {
  margin: 0 -0.16em 0 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  background: linear-gradient(178deg,
      #6A7789 0%, #3B4756 26%, #202A36 47%,
      #55616F 53%, #2A3543 78%, #171F29 100%);
  background-size: 100% 260%;
  background-position: 0 22%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(255,255,255,0.95));
  animation: sheen 9s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

@keyframes sheen {
  from { background-position: 0 100%; }
  to   { background-position: 0 22%; }
}

/* inside the cutout the wordmark sits on the void, so it flips from dark-engraved
   to brushed-silver relief catching light, with a faint cool glow to belong there. */
.wordmark.on-void {
  background: linear-gradient(176deg,
      #F4F8FC 0%, #CBD6E4 32%, #93A3B7 52%, #C4D0DE 66%, #8B9BB0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5))
          drop-shadow(0 0 12px rgba(120,165,215,0.16));
  animation: none;
}

.rule {
  height: 2px;
  border: 0;
  margin: clamp(1.8rem, 4.4vh, 2.9rem) 0;
  background: var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95);
}

/* ---------- thesis ---------- */

.thesis {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.32;
  color: var(--ink);
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}

.thesis em {
  font-style: normal;
  color: var(--electric);
}

.lede { margin: 1.5rem 0 0; }
.lede + .lede { margin-top: 1rem; }
.lede strong { font-weight: 400; color: var(--ink); }

/* ---------- capture: recessed into the sheet ---------- */

.capture {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--steel-4);
  border-radius: 3px;
  background: linear-gradient(180deg, #E4EAF1 0%, #F3F6FA 55%, #EAEFF5 100%);
  box-shadow:
    inset 0 2px 6px rgba(60,78,100,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.85),
    0 1px 0 rgba(255,255,255,0.95);
}

.capture h2 {
  margin: 0 0 0.4rem;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}

.capture p { margin: 0 0 1.5rem; font-size: 0.95rem; }

.field { display: flex; gap: 0.65rem; flex-wrap: wrap; }

.field label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ink);
  background: #FDFEFF;
  border: 1px solid var(--steel-edge);
  border-radius: 2px;
  box-shadow: inset 0 2px 4px rgba(60,78,100,0.20);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input[type="email"]::placeholder { color: #92A0B0; }

.field input[type="email"]:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow:
    inset 0 2px 4px rgba(60,78,100,0.16),
    0 0 0 3px rgba(46,155,255,0.30);
}

/* raised chrome */
.btn {
  flex: 0 0 auto;
  padding: 0.85rem 1.6rem;
  font-family: var(--ff-util);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #17202B;
  cursor: pointer;
  border: 1px solid var(--steel-edge);
  border-radius: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F6 44%, #CBD4DF 56%, #E9EEF4 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(90,105,125,0.35),
    0 1px 2px rgba(60,78,100,0.30);
  transition: filter 140ms ease, transform 90ms ease;
}

.btn:hover { filter: brightness(1.04); }
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(60,78,100,0.30);
}

.fineprint {
  margin: 1rem 0 0;
  font-family: var(--ff-util);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.status {
  margin: 0.9rem 0 0;
  font-family: var(--ff-util);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--electric);
  min-height: 1.2em;
}

.status[data-state="error"] { color: #A3231C; }

/* ---------- the ledger ---------- */

.ledger { margin: 0; }

.ledger h2 {
  margin: 0 0 1.75rem;
  font-family: var(--ff-util);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.work {
  position: relative;
  display: flow-root;
  padding: 0 0 1.6rem 2.1rem;
  border-left: 1px solid var(--steel-4);
  margin-left: 0.32rem;
}

.work:last-of-type { padding-bottom: 0; border-left-color: transparent; }

.work::before {
  content: "";
  position: absolute;
  left: -0.34rem;
  top: 0.42rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
      var(--jewel-hi, var(--steel-2)), var(--jewel, var(--steel-edge)));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.30),
    0 1px 2px rgba(40,55,75,0.45),
    0 0 0 3px rgba(255,255,255,0.55);
}

/* Jewel pairs, in the mark's own clockwise order. --jewel is that dot's
   STROKE colour in arbitheon-mark.svg, --jewel-hi its lit centre.

   These were named --gem-lit / --gem-lit-hi, which collided with the
   --gem-lit that .maprow sets from --gem-* further down: same token,
   same named hue, two different values depending on which component read
   it. The two components do want different values - a lit jewel and a
   flat 3px edge are not the same object - so the fix is the rename, not
   a merge. Nothing here changes what renders.

   All eight are now defined. Only five existed, so lighting a sixth work
   per the README meant orange, red or coral, and those three resolved to
   nothing - the gradient would have dropped entirely. */
.work[data-gem="purple"]  { --jewel: #5A3399; --jewel-hi: #B48FEE; }
.work[data-gem="green"]   { --jewel: #166F48; --jewel-hi: #6CDFAE; }
.work[data-gem="blue"]    { --jewel: #22688F; --jewel-hi: #86CFF2; }
.work[data-gem="yellow"]  { --jewel: #9E7C0C; --jewel-hi: #F6DC7C; }
.work[data-gem="orange"]  { --jewel: #8A4808; --jewel-hi: #F1AE67; }
.work[data-gem="red"]     { --jewel: #851612; --jewel-hi: #F0776E; }
.work[data-gem="magenta"] { --jewel: #8F1A53; --jewel-hi: #F17FB8; }
.work[data-gem="coral"]   { --jewel: #A13F2C; --jewel-hi: #F4A28C; }

/* Floated white disc behind the artwork; body copy wraps around it.

   Two things to not re-break here:
   1. NO percentage padding. Percentage padding resolves against the
      CONTAINING BLOCK's inline size, not the element's own width, so 8%
      here was ~48px per side off .work, not ~15px off the disc. Sizing
      the image directly avoids the whole trap.
   2. closest-side on the gradient. The default is farthest-corner, which
      puts the 100% stop at the half-DIAGONAL - outside the circle that
      border-radius clips to, so the entire fade lands in the discarded
      corners and never renders. */
.work .inset-disc {
  float: right;
  display: grid;
  place-items: center;
  width: clamp(112px, 30%, 190px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side at 64% 34%,
        rgba(46,155,255,0.075) 0%,
        rgba(46,155,255,0.035) 52%,
        rgba(46,155,255,0) 92%),
    radial-gradient(circle closest-side at 37% 63%,
        rgba(11,111,212,0.055) 0%,
        rgba(11,111,212,0.025) 56%,
        rgba(11,111,212,0) 94%),
    radial-gradient(circle closest-side at 50% 50%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 53%,
        rgba(255,255,255,0.72) 71%,
        rgba(255,255,255,0.36) 84%,
        rgba(255,255,255,0) 95%);
  margin: 0.2rem 0 0.7rem 1.15rem;
}

/* the disc image is a button now, but must not look like one */
.work .inset-zoom {
  display: block;
  width: 84%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.work .inset-zoom:focus-visible {
  outline: 2px solid var(--electric-hot);
  outline-offset: 4px;
}

.work .inset {
  display: block;
  width: 100%;
  height: auto;
}

.work h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.kind {
  display: block;
  margin: 0 0 0.3rem;
  font-family: var(--ff-util);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.work p { margin: 0.4rem 0 0; font-size: 0.95rem; }

.unspoken {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 2rem 0 0 0.32rem;
  font-family: var(--ff-util);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.unspoken i {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #C4CDD8, #DCE3EB);
  box-shadow:
    inset 0 1px 2px rgba(60,78,100,0.45),
    0 1px 0 rgba(255,255,255,0.9);
}

/* ---------- lightbox ----------
   <dialog> handles Esc, the backdrop, and focus trapping on its own. The
   dialog is position:absolute per UA stylesheet, so it is already the
   containing block for the close button. */
.lightbox {
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.lightbox::backdrop { background: rgba(4,7,12,0.86); }

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 4px;
}

.lightbox-close {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--steel-edge);
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F6 44%, #CBD4DF 56%, #E9EEF4 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  color: var(--ink);
  font: 400 1.15rem/1 var(--ff-body);
  cursor: pointer;
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--electric-hot);
  outline-offset: 2px;
}

/* ---------- map pages ---------- */

.backlink {
  display: inline-block;
  margin: 0 0 clamp(1.3rem, 3vh, 1.9rem);
  font-family: var(--ff-util);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}

.backlink:hover { color: var(--electric); }

.map-head { margin: 0 0 clamp(1.1rem, 3vh, 1.7rem); }

.map-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}

/* the plate is cut into the sheet, same recess as the capture panel */
.mapframe {
  margin: 0;
  padding: clamp(0.55rem, 2vw, 0.95rem);
  border: 1px solid var(--steel-edge);
  border-radius: 3px;
  background: #FDFEFF;
  box-shadow: inset 0 2px 5px rgba(60,78,100,0.22);
}

.map-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.map-zoom:focus-visible {
  outline: 2px solid var(--electric-hot);
  outline-offset: 3px;
}

.map-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.mapframe figcaption {
  margin: 0.8rem 0 0.1rem;
  font-family: var(--ff-util);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.map-note {
  max-width: var(--measure-prose);
  margin: clamp(1.3rem, 3vh, 1.9rem) 0 0;
}

.credit {
  margin: 0.9rem 0 0;
  font-family: var(--ff-util);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- map index ---------- */

.maplist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.8rem, 2vh, 1.15rem);
}

.maprow a {
  display: block;
  padding: clamp(0.85rem, 2.4vw, 1.2rem) clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--steel-4);
  border-left: 3px solid var(--gem-lit, var(--steel-edge));
  border-radius: 3px;
  background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.maprow a:hover {
  border-color: var(--steel-edge);
  border-left-color: var(--gem-lit, var(--electric));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 10px -4px rgba(40,55,75,0.35);
}

.maprow h2 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.maprow p { margin: 0.3rem 0 0; font-size: 0.92rem; }

.maprow[data-gem="purple"]  { --gem-lit: var(--gem-purple); }
.maprow[data-gem="green"]   { --gem-lit: var(--gem-green); }
.maprow[data-gem="blue"]    { --gem-lit: var(--gem-blue); }
.maprow[data-gem="yellow"]  { --gem-lit: var(--gem-yellow); }
.maprow[data-gem="orange"]  { --gem-lit: var(--gem-orange); }
.maprow[data-gem="red"]     { --gem-lit: var(--gem-red); }
.maprow[data-gem="magenta"] { --gem-lit: var(--gem-magenta); }
.maprow[data-gem="coral"]   { --gem-lit: var(--gem-coral); }

/* ---------- footer ---------- */

.foot {
  margin: clamp(3rem, 8vh, 4.5rem) 0 0;
  font-family: var(--ff-util);
  font-size: 0.64rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.foot a {
  color: var(--electric);
  text-decoration: none;
  border-bottom: 1px solid var(--steel-4);
}
.foot a:hover { border-bottom-color: var(--electric); }

/* ---------- floors ---------- */

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

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; background-position: 0 22%; }
  * { transition-duration: 1ms !important; }
}

/* tablet: plate keeps a margin but tightens up */
@media (max-width: 58rem) {
  .wrap {
    margin: clamp(0.75rem, 3vh, 1.75rem) auto;
    border-radius: 3px;
  }
}

/* phone: plate goes full-bleed. Side edges and radius drop away, the
   top and bottom bevels survive, and the dark field still shows above
   and below so it still reads as a plate on a sheet. */
@media (max-width: 46rem) {
  .wrap {
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.98),
      inset 0 -1px 0 rgba(120,138,162,0.55),
      0 14px 34px -14px rgba(0,0,0,0.85);
  }
  /* full-bleed: cancel the cutout's negative side margins so it can't spill past the plate */
  .masthead { margin-inline: 0; }
}

@media (max-width: 30rem) {
  .btn { flex: 1 1 100%; }
  .wordmark { letter-spacing: 0.08em; margin-right: -0.08em; }
  .work .inset-disc { width: 96px; margin-left: 0.85rem; }
}

/* masthead: below where the mark + word stop fitting side by side, stack them
   and let the cutout fill the content width. */
@media (max-width: 40rem) {
  .masthead {
    width: auto;
    margin-inline: 0;
    padding: clamp(1.4rem, 6vw, 2rem) clamp(1.1rem, 5vw, 1.8rem);
  }
  .lockup { flex-direction: column; gap: 1rem; }
  .emark { width: min(200px, 52vw); }
}