/* ============================================================
   JWRC — The records

   Eleven entries, in three groups. Eight of them have photographs;
   three do not, and rather than leave those as walls of text they are
   given a drawn plate — a specimen card that renders the number itself,
   one mark at a time. A page about counting ought to show a count.

   Everything here sits on the shared system in style.css: same tokens,
   same type scale, same 44px touch floor on coarse pointers, same focus
   ring. Nothing below invents a colour.
   ============================================================ */

/* ---------- the wall ---------- */

.rec-hero {
  padding-block: clamp(96px, 11vw, 168px) clamp(56px, 7vw, 104px);
  position: relative;
  overflow: hidden;
}
/* Two soft lights rather than a flat field, so the tiles below have
   something to sit against. Both are painted, not images. */
.rec-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 18% 0%, rgba(232, 70, 28, .20), transparent 68%),
    radial-gradient(52% 40% at 88% 22%, rgba(44, 110, 128, .22), transparent 70%);
}
.rec-hero > .wrap { position: relative; z-index: 1; }

.rec-hero h1 {
  font-size: clamp(38px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 16px 0 0;
  max-width: 15ch;
}
.rh-lede { margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 56ch; }

.rh-note {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(252, 248, 240, .5);
  max-width: 54ch;
}
.rh-note a {
  color: var(--acc-gold); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rh-note a:hover { color: var(--ivory); }

/* The tally. Also the page index — every tile is a link to its record,
   so somebody who came for the spoon is one tap from the spoon. */
/* Eleven is prime, so the last row is always ragged. Drawn as one grid with
   hairline gaps, that raggedness came out as two or three empty boxes at the
   end — so each tile carries its own border instead, and a short last row
   simply reads as a short last row. */
.tally {
  margin-top: clamp(34px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}
.tally .tile {
  background: rgba(252, 248, 240, .035);
  border: 1px solid rgba(252, 248, 240, .13);
  border-radius: 3px;
  padding: 16px 15px 15px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: max(104px, var(--tap-min));
  text-decoration: none; color: inherit;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.tally .tile:hover { background: rgba(252, 248, 240, .09); border-color: rgba(252, 248, 240, .3); }
.tally .tile b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 2.3vw, 29px); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
  transition: color .35s var(--ease);
}
.tally .tile:hover b { color: var(--acc-gold); }
.tally .tile em {
  font-style: normal;
  font: 600 10px/1 var(--body); letter-spacing: .17em; text-transform: uppercase;
  color: var(--acc);
  margin-top: 5px;
}
.tally .tile span {
  font-size: 12.5px; line-height: 1.4;
  color: rgba(252, 248, 240, .48);
  margin-top: auto; padding-top: 8px;
}

/* ---------- three kinds ---------- */

.tkinds {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.tkind {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.tkind:nth-child(1) { border-color: var(--flame); }
.tkind:nth-child(2) { border-color: var(--teal); }
.tkind:nth-child(3) { border-color: var(--gold); }
.tk-n {
  font: 600 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tkind h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08;
  margin: 10px 0 12px;
}
.tkind p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.tk-list {
  display: block; margin-top: 16px;
  font: 600 11.5px/1.5 var(--body); letter-spacing: .08em;
  color: var(--ink-faint);
}

/* ---------- the eleven ---------- */

.rec-all { background: var(--bg-2); }

.grp {
  margin: clamp(58px, 7vw, 104px) 0 clamp(26px, 3.4vw, 46px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.rec-all > .wrap > .grp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.grp-n {
  font: 600 10.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc-sm);
}
.grp h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.02em;
  margin: 12px 0 14px;
}
.grp p { font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 48ch; }

/* One record: the picture column and the text column. */
.rrec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-bottom: clamp(54px, 6.5vw, 100px);
}
.rrec.flip > .rfig { order: 2; }

.rfig { margin: 0; }
.rfig img {
  display: block; width: 100%; height: auto;
  border-radius: 3px;
  background: var(--bg-3);
  box-shadow: var(--sh-2);
}

/* The second photograph, laid over the corner of the first. It is a sibling
   in normal flow pulled up by a negative margin rather than an absolutely
   positioned overlay, which is what lets the caption below it stay put: an
   earlier version placed it in its own grid row and it landed squarely on
   top of every caption on the page. */
.rfig .r2 {
  width: 62%;
  margin: -18% 0 0 auto;
  position: relative; z-index: 2;
  border: 4px solid var(--bg-2);
  box-shadow: var(--sh-3);
}
.rrec.flip .rfig .r2 { margin-left: 0; margin-right: auto; }

.rfig figcaption {
  margin-top: 14px;
  font: 500 12.5px/1.5 var(--body); letter-spacing: .04em;
  color: var(--ink-faint);
}

.rkind {
  font: 600 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rnum {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 6px;
}
.rnum b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6vw, 72px); line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--acc-sm);
}
.rnum em {
  font-style: normal;
  font: 600 11.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rrec h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.16;
  margin: 0 0 14px;
  max-width: 22ch;
}
.rbody > p {
  font-size: 16px; line-height: 1.68; color: var(--ink-soft);
  margin: 0; max-width: 46ch;
}
.rbody em { font-style: italic; }

.rfacts {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden;
}
.rfacts li {
  background: var(--bg-2);
  padding: 13px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.rfacts b {
  font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rfacts span {
  font-size: 11.5px; line-height: 1.4; color: var(--ink-faint);
}

/* ---------- the drawn plates ---------- */

/* A specimen card. Five of the eleven have no photograph, and a page about
   counting can show the count instead: the canvas inside is drawn once, at
   the real number where the number is small enough to draw, and at a stated
   ratio where it is not. The key line under each says which. */
.plate {
  position: relative;
  background: linear-gradient(150deg, var(--band) 0%, var(--band-deep) 100%);
  border-radius: 3px;
  box-shadow: var(--sh-2);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}

/* The canvas plates paint their own ground, because the grain has to sit
   under the marks. The screw and the mirror are drawn in SVG and CSS, so
   they get the same warm light and the same paper grain from here — without
   it they read as a different, flatter kind of card sitting in the middle
   of the set. */
.plate[data-plate="screw"]::before,
.plate[data-plate="mirror"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 46% at 26% 12%, rgba(232,70,28,.17), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.plate[data-plate="mirror"]::before {
  background:
    radial-gradient(58% 46% at 26% 12%, rgba(217,164,65,.16), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* the same ruled border and corner ticks the canvas plates draw */
.plate[data-plate="screw"]::after,
.plate[data-plate="mirror"]::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 3;
  border: 1px solid rgba(252,248,240,.16);
}
.plate[data-plate="screw"] svg, .plate.mirror .mir { position: relative; z-index: 1; }
.plate canvas, .plate svg {
  display: block; width: 100%; height: 100%;
}
.plate .plate-key {
  z-index: 4;
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 22px 18px 14px;
  font: 500 11.5px/1.45 var(--body); letter-spacing: .05em;
  color: rgba(252, 248, 240, .62);
  background: linear-gradient(transparent, rgba(11, 16, 27, .82) 42%);
  text-align: center;
}

/* Mirror script, shown as the thing it is: the same five words written
   backwards on the left and read in a mirror on the right, with the mirror
   itself ruled down the middle. A single block of reversed words only said
   "here is some unreadable type"; a column beside it says what the record
   actually was. No canvas — the transform is the whole trick, and CSS does
   it natively at any size. */
.plate.mirror { aspect-ratio: 4 / 5; }
.mir {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-content: center;
  gap: 14px 18px;
  padding: 30px clamp(14px, 2.4vw, 26px) 54px;
  width: 100%;
}
.mir-h {
  font: 600 9.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(252, 248, 240, .45);
  text-align: center;
}
/* the mirror */
.mir-rule {
  background: linear-gradient(rgba(217,164,65,0), rgba(217,164,65,.6) 18%,
                              rgba(217,164,65,.6) 82%, rgba(217,164,65,0));
}
.mir-col {
  display: flex; flex-direction: column; gap: clamp(13px, 2.6vw, 28px);
  align-items: center; text-align: center;
}
.mir-col.flip { transform: scaleX(-1); }
.mir-col span {
  font-family: var(--display);
  font-size: clamp(17px, 2.3vw, 27px); line-height: 1.08;
  color: var(--ivory);
  overflow-wrap: anywhere;
}
.mir-col span:nth-child(2) { color: var(--acc-gold); }
.mir-col span:nth-child(4) { color: var(--acc); }

/* ---------- how it is proved ---------- */

.proof {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
.proof li { border-top: 1px solid var(--line-lt); padding-top: 18px; }
.p-n {
  font: 600 10.5px/1 var(--body); letter-spacing: .22em;
  color: var(--acc-gold);
}
.proof h3 {
  font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15;
  margin: 11px 0 9px;
}
.proof p { font-size: 14.5px; line-height: 1.62; color: rgba(252, 248, 240, .66); margin: 0; }

.ev-head { margin: clamp(56px, 6.5vw, 96px) 0 clamp(20px, 2.4vw, 30px); max-width: 56ch; }
.ev-head h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(23px, 2.8vw, 33px); line-height: 1.12; margin: 0 0 10px;
}
.ev-head p { font-size: 15.5px; line-height: 1.6; color: rgba(252, 248, 240, .62); margin: 0; }

/* A rail rather than a grid: five photographs of wildly different shapes,
   which a grid would either crop or leave holes around. Scrolls on touch,
   and every item stays a real link-sized target. */
.ev-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 268px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  /* the rail runs to the edge of the screen on a phone rather than stopping
     at the gutter, which is what tells a thumb there is more to the right */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: rgba(252, 248, 240, .28) transparent;
}
.ev-rail figure { margin: 0; scroll-snap-align: start; }
.ev-rail img {
  display: block; width: 100%; height: 210px; object-fit: cover;
  border-radius: 3px; background: var(--band-2);
}
.ev-rail figcaption {
  margin-top: 10px;
  font-size: 12px; line-height: 1.45; color: rgba(252, 248, 240, .55);
}
.ev-more { margin: clamp(28px, 3.2vw, 40px) 0 0; }

/* ---------- the twelfth ---------- */

.rec-end { text-align: center; }
.rec-end h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -.02em;
  margin: 14px 0 0;
}
.re-lede { margin: 22px auto 0; max-width: 54ch; }
.re-cta {
  margin-top: clamp(26px, 3.2vw, 40px);
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ---------- narrower ---------- */

@media (max-width: 1024px) {
  body .tkinds { grid-template-columns: 1fr; gap: 26px; }
  body .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* One column. The picture keeps its place above the text on every record,
     flipped or not, because alternating sides means nothing once there is
     only one column to alternate between. */
  body .rrec { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  body .rrec.flip > .rfig { order: 0; }
  body .rfig .r2 { width: 68%; margin-top: -14%; }
  body .rbody > p, body .rrec h3 { max-width: none; }
  body .plate { aspect-ratio: 5 / 4; }
}

@media (max-width: 640px) {
  body .proof { grid-template-columns: 1fr; }
  body .rfacts { grid-template-columns: 1fr; }
  body .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .re-cta .btn { flex: 1 1 100%; justify-content: center; }
  body .ev-rail img { height: 168px; }
}

@media (max-width: 380px) {
  body .tally { grid-template-columns: 1fr; }
  body .plate { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tally .tile, .tally .tile b { transition: none; }
}