/* The Last $20 — the archive page, round 6.
   Scene: the tavern wall from Elias's "original 16" poster. Dark wood, black name plates, cream slab
   lettering, cream speech bubbles, one neon tube. Everything is scoped under body.archive so nothing
   leaks to the other four pages.
   Rules this file keeps:
   - every surface that carries text is solid and near-neutral (black plate or cream paper); the planks
     only ever sit BEHIND scenes, never behind a sentence;
   - nothing here is under 14px, nothing loops, nothing shifts layout. */

body.archive {
  --board: #0b0c0e;                        /* black plate: the near-neutral text surface */
  --edge: rgba(233, 222, 195, .34);        /* the thin cream line on every plate */
  --brass: #b8933f;
  --neon-c: #7ff0ff;
  --neon-p: #ff7ad9;
  /* a rivet: a lit dome on a dark washer */
  --rivet: radial-gradient(circle at 36% 32%, #f0e4bd 0 13%, #a29573 32%, #3d3827 66%, #15130d 72%, transparent 76%);
  /* the wall: dark planks, vertical, low contrast, with a lamp glow at the top */
  background:
    radial-gradient(100% 46% at 50% 0, rgba(242, 169, 59, .10), transparent 70%),
    repeating-linear-gradient(90deg,
      #18140f 0 91px,  #0a0806 91px 93px,
      #1b1611 93px 199px, #0a0806 199px 201px,
      #16120e 201px 288px, #0a0806 288px 290px,
      #1a150f 290px 389px, #0a0806 389px 391px,
      #171310 391px 483px, #0a0806 483px 485px),
    #120e0b;
}

/* keyboard focus: 2px amber, 2px off */
body.archive main a:focus-visible,
body.archive main .btn:focus-visible,
body.archive .poster:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* ── the title board ─────────────────────────────────────────────────── */
body.archive .marquee {
  position: relative; z-index: 1; margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(22px, 3.4vw, 40px) clamp(22px, 3.6vw, 46px) clamp(22px, 3vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px clamp(24px, 4vw, 56px);
  background-color: var(--board);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet),
    linear-gradient(180deg, #151618, #090a0b);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto;
  background-position: left 11px top 11px, right 11px top 11px, left 11px bottom 11px, right 11px bottom 11px, 0 0;
  background-repeat: no-repeat;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #050506, inset 0 0 0 1px var(--edge), inset 0 0 0 8px #0a0b0c,
    inset 0 0 0 9px rgba(233, 222, 195, .12), 0 28px 50px -24px rgba(0, 0, 0, .95);
}
body.archive .marquee .kicker { grid-column: 1 / -1; color: #9fd06f; text-shadow: none; }
body.archive .marquee h1 {
  grid-column: 1; margin: 4px 0 0; color: var(--cream);
  font: 900 clamp(40px, 7.2vw, 88px)/.96 var(--display); letter-spacing: -.035em;
  /* the poster's title: cream slab, dark brown extrusion */
  text-shadow: 1px 1px 0 #6f5730, 2px 2px 0 #5d4827, 3px 3px 0 #4b3a1e, 4px 4px 0 #3b2d17, 6px 8px 14px rgba(0, 0, 0, .75);
}
body.archive .marquee p:not(.kicker) {
  grid-column: 1; align-self: end; margin: 14px 0 0; max-width: 52ch; color: #ece6d8; text-shadow: none;
}
body.archive .marquee p a { color: var(--amber); text-underline-offset: 3px; }
body.archive .marquee .rule { display: none; }
@media (min-width: 900px) {
  body.archive .marquee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  body.archive .marquee h1 { grid-column: 1; grid-row: 2; margin-top: 8px; font-size: clamp(38px, 4.9vw, 68px); }
  body.archive .marquee p:not(.kicker) { grid-column: 2; grid-row: 2; margin: 8px 0 0; font-size: 18px; line-height: 1.58; }
}

/* ── the poster: the centrepiece ────────────────────────────────────── */
body.archive .poster {
  --pad: clamp(10px, 1.5vw, 18px);
  position: relative; isolation: isolate; margin: clamp(34px, 4.4vw, 54px) 0 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
/* the warm pool of light from above: CSS only, no image */
body.archive .poster::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * min(80px, 4vw)); right: calc(-1 * min(80px, 4vw)); top: -76px; bottom: -30px;
  background:
    radial-gradient(50% 80% at 50% 0, rgba(255, 206, 122, .46), rgba(255, 176, 82, .17) 46%, transparent 76%),
    radial-gradient(92% 100% at 50% 0, rgba(255, 160, 60, .12), transparent 72%);
}
body.archive .poster-frame {
  position: relative; grid-column: 1 / -1; padding: var(--pad);
  background-color: #101113;
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2b2e33 0%, #16171a 12%, #0d0e10 60%, #070708 100%);
  background-size: calc(var(--pad) - 4px) calc(var(--pad) - 4px), calc(var(--pad) - 4px) calc(var(--pad) - 4px),
    calc(var(--pad) - 4px) calc(var(--pad) - 4px), calc(var(--pad) - 4px) calc(var(--pad) - 4px), auto, auto;
  background-position: left 2px top 2px, right 2px top 2px, left 2px bottom 2px, right 2px bottom 2px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 -3px 0 rgba(0, 0, 0, .65), 0 36px 64px -24px rgba(0, 0, 0, .95), 0 0 80px -8px rgba(255, 190, 100, .24);
}
/* the picture lamp bolted to the top of the frame */
body.archive .poster-frame::before {
  content: ""; position: absolute; left: 50%; top: -13px; width: min(34%, 360px); height: 12px;
  transform: translateX(-50%); border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #ecd28a 0%, #b8933f 46%, #6f531c 100%);
  box-shadow: 0 0 0 1px #2b1f08, 0 8px 22px 6px rgba(255, 196, 110, .55), 0 22px 48px 14px rgba(255, 170, 70, .24);
}
body.archive .poster-scroll { position: relative; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(255, 255, 255, .08); }
body.archive .poster-stage { position: relative; width: 100%; background: #0a0a0b; line-height: 0; }
body.archive .poster-stage picture { display: block; }
body.archive .poster-stage img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* the loupe: a brass-ringed lens, fine pointers only (see @media below) */
body.archive .loupe {
  display: none; position: absolute; left: 0; top: 0; z-index: 3; box-sizing: border-box;
  width: 220px; height: 220px; border-radius: 50%; border: 4px solid var(--brass);
  border-color: #dcc077 #b8933f #8a6a25 #c9a850;
  background-color: #0a0a0b; background-repeat: no-repeat; pointer-events: none;
  box-shadow: 0 0 0 1px #2b1f08, inset 0 0 0 1px rgba(255, 236, 170, .6), inset 0 0 26px rgba(0, 0, 0, .45),
    0 16px 36px rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .12s ease; will-change: transform;
}
body.archive .loupe::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .16), transparent 36%);
}
body.archive .poster.is-looking .loupe { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.archive .loupe { display: block; }
  body.archive .poster-stage { cursor: zoom-in; }
}

/* the brass plaque, mounted under the frame */
body.archive .plaque {
  grid-column: 2; grid-row: 2; margin: 22px 0 0; padding: 11px 34px 12px; text-align: center;
  color: #1d1a12; text-shadow: 0 1px 0 rgba(255, 238, 180, .45);
  font: 800 16px/1.25 var(--type); letter-spacing: .05em;
  background-color: #c4a04a;
  background-image:
    radial-gradient(circle, #5f4718 0 2px, #2b1f08 2.5px, transparent 3.5px),
    radial-gradient(circle, #5f4718 0 2px, #2b1f08 2.5px, transparent 3.5px),
    linear-gradient(180deg, #ecd48e 0%, #dcbb68 50%, #cfa953 100%);   /* Round 7: the page's scanline overlay darkens every 3rd row 20%, which took the old darker bottom stop to 3.6:1 under the ink */
  background-size: 9px 9px, 9px 9px, auto; background-repeat: no-repeat;
  background-position: left 11px center, right 11px center, 0 0;
  border-radius: 3px; box-shadow: 0 0 0 1px #3a2a0a, inset 0 1px 0 rgba(255, 244, 200, .7),
    inset 0 -2px 0 rgba(90, 64, 16, .55), 0 14px 22px -10px rgba(0, 0, 0, .9);
}
body.archive .poster-hint {
  grid-column: 3; grid-row: 2; justify-self: end; margin: 22px 0 0; padding: 7px 14px;
  background: var(--board); border: 1px solid var(--edge); border-radius: 3px;
  color: #e9e2cf; text-shadow: none; font: 600 15px/1.3 var(--type);
}
body.archive .poster-hint .h-touch { display: none; }

/* touch and coarse pointers: the poster is ~260px tall in a strip you swipe along, so the plates
   are big enough to read. Wider than 780px it simply fills the frame and needs no strip. */
@media (hover: none), (pointer: coarse) {
  body.archive .poster-scroll {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--brass) #0b0c0e;
  }
  body.archive .poster-stage { width: max(780px, 100%); }
  body.archive .loupe { display: none; }
  body.archive .poster-hint .h-fine { display: none; }
  body.archive .poster-hint .h-touch { display: inline; }
  body.archive .poster.no-pan .poster-hint { display: none; }
}
/* below ~1040px the plaque and the hint no longer fit on one line side by side, so they stack */
@media (max-width: 1040px) {
  body.archive .poster { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  body.archive .poster-frame { justify-self: stretch; }
  body.archive .plaque { grid-column: 1; grid-row: 2; margin-top: 18px; padding-inline: 30px; }
  body.archive .poster-hint { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 12px; text-align: center; }
}

/* ── section signs: each heading is a black plate, each lede sits on one ─ */
body.archive .block h2 {
  display: flex; align-items: baseline; gap: 14px; width: fit-content; max-width: 100%;
  padding: 10px 26px 12px; background: linear-gradient(180deg, #17181b, #09090a); border-radius: 3px;
  text-shadow: none;
  box-shadow: 0 0 0 1px #050506, inset 0 0 0 1px var(--edge), inset 0 0 0 5px #09090a,
    inset 0 0 0 6px rgba(233, 222, 195, .12), 0 18px 30px -16px rgba(0, 0, 0, .95);
}
/* the one neon tube: the section numerals */
body.archive .block h2 .num {
  margin: 0; color: var(--neon-c);
  text-shadow: 0 0 5px rgba(127, 240, 255, .95), 0 0 14px rgba(60, 214, 255, .7), 0 0 30px rgba(30, 170, 255, .45);
}
body.archive .block .lede {
  width: fit-content; max-width: 54ch; margin-top: var(--s-3); padding: 14px 20px 15px;
  background: var(--board); border-left: 3px solid var(--amber); border-radius: 0 3px 3px 0;
  box-shadow: 0 0 0 1px rgba(233, 222, 195, .14), 0 16px 26px -16px rgba(0, 0, 0, .9);
  color: #ece6d8; text-shadow: none;
}
body.archive .lede a { color: var(--amber); text-underline-offset: 3px; }

/* ── the wall: pinned prints, masonry, natural aspect ratios ─────────── */
body.archive .wall {
  display: block; margin-top: var(--s-5); columns: 3 300px; column-gap: clamp(28px, 3.4vw, 46px);
}
body.archive .pin {
  display: block; position: relative; width: 100%; margin: 0 0 clamp(34px, 3.6vw, 48px); padding: 18px 0 0;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transform: rotate(var(--tilt, -.6deg)); transform-origin: 50% 0; transition: transform .2s ease;
}
body.archive .pin:nth-child(odd)  { --tilt: -.6deg; }
body.archive .pin:nth-child(even) { --tilt: .6deg; }
body.archive .pin:hover, body.archive .pin:focus-within { transform: rotate(0deg); }

/* the print: the art at its own shape, on a cream paper edge */
body.archive .pin img {
  display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; box-sizing: border-box;
  padding: clamp(7px, .8vw, 10px); background: var(--paper); border: 0; filter: none;
  box-shadow: 0 20px 26px -14px rgba(0, 0, 0, .95), 0 3px 6px rgba(0, 0, 0, .55);
}
/* tape on the odd ones, a red pin on the even ones */
body.archive .pin:not(.empty)::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 4px; width: 92px; height: 26px; margin-left: -46px;
  background: linear-gradient(180deg, rgba(243, 229, 176, .72), rgba(214, 196, 132, .62));
  transform: rotate(-3deg);
  clip-path: polygon(0 10%, 3% 0, 8% 12%, 13% 0, 18% 12%, 82% 12%, 87% 0, 92% 12%, 97% 0, 100% 10%,
    100% 90%, 97% 100%, 92% 88%, 87% 100%, 82% 88%, 18% 88%, 13% 100%, 8% 88%, 3% 100%, 0 90%);
}
body.archive .pin:not(.empty):nth-child(even)::before {
  width: 22px; height: 22px; margin-left: -11px; top: 6px; border-radius: 50%; transform: none; clip-path: none;
  background: radial-gradient(circle at 34% 30%, #ffb09c, #d9452b 46%, #6f180b 100%);
  box-shadow: 0 7px 8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(60, 10, 4, .6);
}
/* the cameo number, a small black plate on the print's corner */
body.archive .pin .no {
  top: 6px; left: -12px; width: auto; min-width: 46px; height: 34px; padding: 0 10px; border-radius: 3px;
  background: linear-gradient(180deg, #1a1b1d, #08090a); color: #f6efdb; font: 900 18px/1 var(--display);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--edge), 0 8px 12px -4px rgba(0, 0, 0, .8);
}
body.archive .pin .meta { display: block; padding: 0; }
/* the name plate: black, white handle, thin cream edge, like the poster's */
body.archive .pin .by {
  margin: 14px 0 0; padding: 0 16px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #1a1b1e, #08090a); color: #fff; text-shadow: none;
  font: 800 17px/1.2 var(--type); border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--edge), inset 0 0 0 4px #08090a, inset 0 0 0 5px rgba(233, 222, 195, .12);
}
body.archive .pin .by a { color: #fff; text-decoration: none; }
body.archive .pin .by a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* "official cameo #00X", a small link under the plate */
body.archive .pin .src {
  margin: 0; padding: 0 16px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: #0d0e10; color: var(--smoke); text-shadow: none; font: 700 15px/1.2 var(--type);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(233, 222, 195, .26), 0 14px 20px -10px rgba(0, 0, 0, .95);
}
body.archive .pin .src a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.archive .pin .src a:hover { text-decoration-thickness: 2px; }
/* the quote: a cream speech bubble, tail up at the print */
body.archive .pin blockquote {
  position: relative; margin: 22px 0 0; padding: 16px 18px 18px; border-radius: 16px;
  background: var(--paper); color: var(--ink); text-shadow: none;
  font: 600 17.5px/1.5 var(--type); text-wrap: pretty;
  box-shadow: 0 14px 22px -12px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(29, 26, 18, .1);
}
body.archive .pin blockquote::before {
  content: ""; position: absolute; left: 26px; top: -18px; width: 30px; height: 20px; background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 22% 0);
}

/* the full story: closed by default (a short pull-quote reads faster on a wall of 12), one tap away.
   <details> so it works with no JS and is reachable by keyboard/screen reader for free. */
body.archive .pin-more { margin: 10px 0 0; }
body.archive .pin-more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font: 700 14.5px/1.2 var(--type); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
body.archive .pin-more summary::-webkit-details-marker { display: none; }
body.archive .pin-more summary::before { content: "+"; text-decoration: none; font-weight: 900; }
body.archive .pin-more[open] summary::before { content: "\2212"; }
body.archive .pin-more[open] summary { margin-bottom: 8px; }
body.archive .pin-more p {
  margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(9, 10, 11, .55);
  color: var(--cream); text-shadow: none; font: 500 15.5px/1.55 var(--type); text-wrap: pretty;
  box-shadow: inset 0 0 0 1px var(--edge);
}

/* the two placeholders: dark frames, same language */
body.archive .pin.empty {
  display: block; min-height: 0; padding: clamp(26px, 3vw, 34px) clamp(24px, 2.8vw, 32px); text-align: left;
  color: var(--cream);
  background-color: var(--board);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet), linear-gradient(180deg, #18191c, #09090a);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto;
  background-position: left 11px top 11px, right 11px top 11px, left 11px bottom 11px, right 11px bottom 11px, 0 0;
  background-repeat: no-repeat; border-radius: 4px;
  box-shadow: 0 0 0 2px #050506, inset 0 0 0 1px var(--edge), inset 0 0 0 8px #0a0b0c,
    inset 0 0 0 9px rgba(233, 222, 195, .12), 0 24px 34px -18px rgba(0, 0, 0, .95);
}
body.archive .pin.empty > div { display: block; }
body.archive .pin.empty p { margin: 0; }
body.archive .pin.empty p + p { margin-top: 10px; }
body.archive .pin.empty strong { font: 800 20px/1.3 var(--type); color: #f6efdb; text-shadow: none; }
body.archive .pin.empty .small { color: var(--smoke); text-shadow: none; }
body.archive .pin.empty .small a { color: var(--amber); text-underline-offset: 3px; }
/* "yours": the empty spot, lit by a neon tube */
body.archive .pin.yours {
  box-shadow: 0 0 0 2px #050506, inset 0 0 0 2px var(--neon-p), inset 0 0 14px rgba(255, 122, 217, .32),
    0 0 10px rgba(255, 122, 217, .6), 0 0 36px rgba(255, 90, 200, .32), 0 24px 34px -18px rgba(0, 0, 0, .95);
}
body.archive .pin.yours strong {
  font: 900 clamp(30px, 3.4vw, 40px)/1.05 var(--display); letter-spacing: -.02em; color: #ffe4f6;
  text-shadow: 0 0 6px rgba(255, 150, 224, .95), 0 0 18px rgba(255, 100, 210, .65), 0 0 40px rgba(255, 80, 200, .4);
}

/* ── how a story gets on this wall: the cabinet, matched ─────────────── */
body.archive .cab {
  background: linear-gradient(180deg, #18191c, #0b0c0e);
  box-shadow: 0 0 0 2px #050506, inset 0 0 0 1px var(--edge), inset 0 -3px 0 rgba(0, 0, 0, .62),
    0 28px 50px -22px rgba(0, 0, 0, .95);
}
body.archive .cab .cab-head {
  background: #0a0b0c; color: var(--amber); text-shadow: none;
  box-shadow: inset 0 -1px 0 rgba(233, 222, 195, .26);
}
body.archive .cab ol.steps a { color: var(--amber); }

/* ── the floor: the footer keeps a solid surface; the planks stop above it ─ */
body.archive .foot {
  background: #0a0b0c; box-shadow: 0 0 0 100vmax #0a0b0c; clip-path: inset(0 -100vmax);
}