/* ══ HYYRYN RECORDS: THE THIRD PASS ═══════════════════════════════ 2 Oct 2026 ══
   Loaded last on records, records-watch and records-sources, so it wins by
   order and not by weight. Sir, by voice:
     "the layout needs work ... the shape of the containers ... things need to
      be very intuitive ... you should be able to differentiate sections ...
      use as much of the real estate on the screen as possible. Right now it
      feels like you're using maybe two thirds of the centre of the screen."
     "if you just had the arch, which is the logo, and Records spelled out
      next to it ... a slightly different font to signify authority."
     "black and that mahogany colour with hints or accents of gold ... I'll
      let you decide the ratio."
   The ratio: the room is black (about 60), the record and its bands are
   mahogany (about 30), gold is the rule, the mark and the one action (about
   10). Every part has its own shape, so a section is told apart by what it
   is, not by a heading alone:
     the counter  cream paper in a gold frame (the one action)
     the record   the arched mahogany panel (unchanged shape)
     the key      a ruled legend, no box
     the side     a cream notice and a mahogany card
     the limits   a full-width mahogany band
   Width: the page runs to 1720px with a 64px margin at most, so at 1440 it
   uses 1312px of 1440 instead of 1132. */
:root { --rw: clamp(20px, 4.4vw, 64px); --rmax: 1720px; --cinzel: 'Cinzel', 'Libre Caslon Display', Georgia, serif; }

/* ── the masthead: the arch, and RECORDS cut in stone ─────────────────── */
.rec-head { height: 76px; }
.rec-head-in { padding: 0 var(--rw); }
.rec-brand { gap: 12px; }
.rec-brand .mark { width: 24px; height: 22px; fill: var(--gold-soft); transition: fill 200ms ease; }
.rec-word { font-family: var(--cinzel); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .2em; color: var(--ink-2); padding-top: 2px; }
.rec-brand:hover .mark { fill: var(--gold-ink); }
.rec-nav { gap: 34px; }
.rec-nav > a { font-size: 11.5px; letter-spacing: .16em; opacity: .78; }
.rec-nav > a::after { background: var(--gold-soft); bottom: -8px; }
.rec-right { gap: 14px; }
.rec-back { font-size: 11px; letter-spacing: .16em; opacity: .9; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--head-line-2); transition: box-shadow 180ms ease, color 180ms ease; }
.rec-back:hover { box-shadow: inset 0 0 0 1px var(--gold-soft); color: var(--gold-ink); }
@media (max-width: 620px) { .rec-word { font-size: 16px; } .rec-back { padding: 9px 10px; } }

/* ── the bay: the words on the left, the counter on the right ─────────── */
.rec-bay { max-width: var(--rmax); margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--rw) 0; }
.rec-bay:has(> .rec-counter) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.rec-bay-tx .rec-eyebrow { color: var(--gold-ink); }
.rec-bay-tx .rec-title { font-size: clamp(40px, 4.8vw, 72px); margin-bottom: 22px; }
.rec-bay-tx .rec-stand { font-size: clamp(16.5px, 1.25vw, 19px); max-width: 58ch; }

/* The counter. Cream paper in a gold frame: the one bright thing on a black
   page, because it is the one thing the page asks you to do. */
.rec-counter { position: relative; padding: clamp(26px, 2.6vw, 40px); border-radius: 2px; background: var(--block); color: var(--block-ink);
  box-shadow: inset 0 0 0 1px rgba(131,99,44,.45), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.28), 0 30px 60px -30px rgba(0,0,0,.85); }
.rec-counter-h { margin: 0 0 18px; font-family: var(--cinzel); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #5B4318; }
.rec-counter .rec-find { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rec-counter .rec-field { position: relative; min-width: 0; padding: 16px 18px 10px; border-radius: 2px; background: #fff; border: 1px solid rgba(26,15,14,.18); transition: border-color 200ms ease, box-shadow 200ms ease; }
.rec-counter .rec-field:focus-within { border-color: #83632C; box-shadow: 0 0 0 3px rgba(212,169,67,.25); }
.rec-counter .rec-find .rec-go { margin: 0; width: 100%; justify-content: center; padding: 17px 26px; }
.rec-counter .rec-lab { color: #5E5048; }
.rec-counter .rec-in { color: var(--block-ink); }
.rec-counter .rec-in::placeholder { color: #8A7A70; opacity: 1; }
.rec-counter .rec-go { background: #2C0F12; color: var(--ink-2); }
.rec-counter .rec-go:hover { background: #4B1A1E; }
.rec-counter .rec-help { color: #3A2E28; }
.rec-counter .rec-scope { color: #5E5048; }
.rec-counter .rec-notyet { color: #5E5048; background: rgba(212,169,67,.12); border-left-color: #83632C; }
.rec-counter .rec-notyet b { color: var(--block-ink); }

/* ── the record: the key | the reading | what follows ─────────────────── */
.rec-desk { max-width: var(--rmax); margin: 0 auto; padding: clamp(64px, 7vw, 112px) var(--rw) clamp(64px, 7vw, 104px);
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; grid-template-areas: "tab tab tab" "key main side"; gap: 28px clamp(24px, 2.6vw, 48px); align-items: start; }
.rec-tab { grid-area: tab; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(212,169,67,.32); }
.rec-tab-h { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--ink-2); }
.rec-tab-p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.rec-main { grid-area: main; }

/* the key: a ruled legend, no box */
.rec-key { grid-area: key; position: sticky; top: 104px; padding: 0; border: 0; border-radius: 0; background: none; gap: 16px; }
.rec-key-h { font-size: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rec-key-list { gap: 14px; }
.rec-key-list li { font-size: 13.5px; }
.rec-key-p { font-size: 14px; }

/* the side: what the law gives you, and watching */
.rec-side { grid-area: side; position: sticky; top: 104px; display: grid; gap: 18px; }
.rec-side .rec-window { margin: 0; padding: 26px 24px 24px; border-radius: 2px; }
.rec-side .rec-w-h { font-size: clamp(21px, 1.7vw, 25px); }
.rec-side .rec-w-p { font-size: 14.5px; line-height: 1.62; }
.rec-side .rec-figs { gap: 18px; flex-wrap: wrap; }
.rec-watchcard { display: grid; gap: 8px; padding: 22px 22px 20px; border-radius: 2px; text-decoration: none; background: var(--ground-2);
  box-shadow: inset 0 2px 0 var(--gold-soft), inset 0 0 0 1px rgba(212,169,67,.22); transition: background-color 200ms ease, transform 220ms ease; }
.rec-watchcard:hover { background: var(--ground-3); transform: translateY(-2px); }
.rec-watchcard .k { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.rec-watchcard b { font-family: var(--serif-display); font-weight: 400; font-size: 22px; color: var(--ink-2); }
.rec-watchcard .p { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink); }
.rec-watchcard .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.rec-watchcard .go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 200ms ease; }
.rec-watchcard:hover .go svg { transform: translateX(3px); }
.rec-watchcard:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ── the limits: a band of their own, at full width ───────────────────── */
.rec-band { background: var(--ground-2); border-top: 1px solid rgba(212,169,67,.4); border-bottom: 1px solid rgba(212,169,67,.4); box-shadow: inset 0 3px 0 -2px rgba(212,169,67,.18); }
.rec-band .rec-limits { max-width: var(--rmax); margin: 0 auto; padding: clamp(48px, 5.6vw, 88px) var(--rw) clamp(56px, 6vw, 96px); }
.rec-band .rec-limits summary { cursor: pointer; list-style: none; display: grid; gap: 8px; margin-bottom: clamp(26px, 3vw, 44px); }
.rec-band .rec-limits summary::-webkit-details-marker { display: none; }
.rec-band .rec-limits summary .rec-eyebrow { color: var(--gold-ink); margin: 0; }
.rec-band-h { font-family: var(--serif-display); font-size: clamp(28px, 2.8vw, 42px); line-height: 1.1; color: var(--ink-2); }
.rec-lim-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.rec-lim-row .rec-lim { margin: 0; padding: 0 clamp(20px, 2.6vw, 44px); border-left: 1px solid rgba(212,169,67,.28); }
.rec-lim-row .rec-lim:first-child { padding-left: 0; border-left: 0; }
.rec-lim-row .rec-lim p.rec-eyebrow { font-family: var(--serif-display); font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0; text-transform: none; color: var(--gold-ink); margin: 0 0 12px; line-height: 1.2; }
.rec-lim-row .rec-lim p { font-size: 15.5px; line-height: 1.66; }

/* ── narrower ─────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .rec-desk { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "tab tab" "main key" "main side"; }
  .rec-key { position: static; display: flex; padding: 0; }
  .rec-key-h, .rec-key-list, .rec-key-p { grid-column: auto; }
  .rec-key-list { grid-template-columns: minmax(0, 1fr); }
  .rec-side { position: static; }
}
@media (max-width: 1000px) {
  .rec-bay:has(> .rec-counter) { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .rec-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "key" "main" "side"; }
  .rec-key-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-lim-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rec-lim-row .rec-lim { padding: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .rec-key-list { grid-template-columns: minmax(0, 1fr); }
  .rec-counter { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .rec-watchcard, .rec-watchcard .go svg, .rec-back { transition: none; } }

/* The shared glass paints every masthead navy at .5 (hyyryn-glass.css, with
   !important). Records is black: the same glass, in this room's colour. */
html body header.rec-head { background: rgba(17, 13, 13, .78) !important; }

/* ── the same width on every Records page ─────────────────────────────── */
.rec-wall, .rec-limits { max-width: var(--rmax); padding-left: var(--rw); padding-right: var(--rw); }
.rec-main .rec-wall, .rec-main .rec-results .rec-wall { padding-left: 0; padding-right: 0; max-width: none; }
.rec-bay:has(> .rec-index) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 96px); align-items: end; }

/* a band of its own: the reasons and the basis, in mahogany, edge to edge */
.rec-limits.rec-bandsec { max-width: none; margin: clamp(24px, 3vw, 48px) 0 0; background: var(--ground-2);
  border-top: 1px solid rgba(212,169,67,.4); border-bottom: 1px solid rgba(212,169,67,.4);
  padding: clamp(48px, 5.6vw, 88px) max(var(--rw), calc((100% - var(--rmax)) / 2 + var(--rw))) clamp(56px, 6vw, 96px); }
.rec-bandsec .rec-lim-h { font-size: clamp(28px, 2.8vw, 42px); color: var(--ink-2); margin-bottom: clamp(26px, 3vw, 44px); }
.rec-bandsec .rec-lim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.rec-bandsec .rec-lim { padding: 0 clamp(20px, 2.6vw, 44px); border-left: 1px solid rgba(212,169,67,.28); }
.rec-bandsec .rec-lim:first-child { padding-left: 0; border-left: 0; }
.rec-bandsec .rec-lim p.rec-eyebrow { font-family: var(--serif-display); font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0; text-transform: none; color: var(--gold-ink); margin: 0 0 12px; line-height: 1.2; }

/* ruled columns on the black: each opens under a short gold rule */
.rec-ruled { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(72px, 8vw, 120px); }
.rec-ruled .rec-lim { padding-top: 18px; border-top: 2px solid var(--gold-soft); }

/* Watch: the list wide, what a reading covers beside it */
.rec-wdesk { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "tab tab" "main covers"; }
.rec-covers { grid-area: covers; position: sticky; top: 104px; display: grid; gap: 0; }
.rec-covers .rec-key-h { margin: 0 0 4px; font-family: var(--serif-display); font-weight: 400; font-size: 20px; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rec-covers .rec-course { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0 14px 14px; margin: 0; border-left: 2px solid var(--gold-soft); border-bottom: 1px solid var(--line); background: none; }
.rec-covers .rec-fact { font-size: 14.5px; line-height: 1.55; }
.rec-covers .rec-when { order: 0; font-size: 11.5px; }
.rec-wdesk .rec-wl .rec-panel { min-height: 220px; }
.rec-wdesk .rec-weg { margin-top: 22px; }

/* Sources: the index beside the words, and the two sources as plaques */
.rec-index { padding: 22px 0 0; border-top: 2px solid var(--gold-soft); }
.rec-index-h { margin: 0 0 12px; font-family: var(--cinzel); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.rec-index .rec-toc { display: grid; gap: 0; margin: 0; }
.rec-index .rec-toc a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink); }
.rec-index .rec-toc a::after { content: '\2192'; color: var(--gold-ink); transition: transform 200ms ease; }
.rec-index .rec-toc a:hover { color: var(--ink-2); border-bottom-color: var(--gold-soft); }
.rec-index .rec-toc a:hover::after { transform: translateX(4px); }
.rec-plaques .rec-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
.rec-plaques .rec-panel > h2 { grid-column: 1 / -1; }
.rec-plaques .rec-course { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: 24px 0 26px 22px; border-top: 0; }
.rec-plaques .rec-course .rec-when { order: -1; }

@media (max-width: 1100px) {
  .rec-wdesk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "main" "covers"; }
  .rec-covers { position: static; }
}
@media (max-width: 1000px) {
  .rec-bay:has(> .rec-index) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .rec-bandsec .rec-lim-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rec-bandsec .rec-lim { padding: 0; border-left: 0; }
  .rec-plaques .rec-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ══ FOURTH PASS: SQUARE, AND THE KEY BECOMES THE SUMMARY ══════ 2 Oct 2026 (night) ══
   Sir: "the rounded edges ... the one shown in records, needs to go. It needs
   to be sharp edges, for professionalism ... Hyyryn uses squares for the most
   part." So every container on Records is square: the record panel lost its
   arched corner, the counter, the field, the dropdown, the pick list, the
   watched rows. Buttons stay as the site's pills; markers stay round.
   The record is now drawn as a register extract: a gold rule along its top
   edge (the document's head), a summary of its lines before the lines, and
   ruled column heads over the ledger. */
.rec-desk { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "tab tab" "main side"; }
.rec-panel, .rec-results .rec-panel, .rec-main .rec-panel { border-radius: 0 !important; }
.rec-main .rec-panel { position: relative; box-shadow: inset 0 3px 0 var(--gold-soft), inset 0 0 0 1px rgba(212,169,67,.16), var(--sh-2);
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 48px) 12px; }
.rec-counter, .rec-counter .rec-field, .rec-find, .rec-window, .rec-watchcard, .rec-drop, .rec-opt, .rec-pick, .rec-weg .rec-list, .rec-key { border-radius: 0 !important; }
.rec-stamp { border-radius: 0; }

/* at a glance: four square tiles */
.rec-glance { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); background: rgba(255,240,220,.02); }
.rec-g { --c: var(--checked); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: start;
  padding: 18px 18px 16px; border-left: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--c); cursor: default; transition: background-color 180ms ease; }
.rec-g:first-child { border-left: 0; }
.rec-g.is-waiting { --c: var(--gold-soft); } .rec-g.is-notice { --c: var(--danger); }
.rec-g.is-open { --c: var(--line-2); box-shadow: inset 0 3px 0 var(--c), inset 0 6px 0 -3px transparent; background-image: repeating-linear-gradient(-45deg, rgba(246,240,222,.035) 0 2px, transparent 2px 6px); }
.rec-g b { grid-row: 1 / span 2; font-family: var(--serif-display); font-weight: 400; font-size: clamp(34px, 3vw, 46px); line-height: .82; margin-top: 2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rec-g .w { padding-top: 3px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rec-g .m { font-family: var(--serif); font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.rec-g.is-zero b, .rec-g.is-zero .w { color: var(--muted); opacity: .7; }
.rec-g:hover { background-color: rgba(255,240,220,.05); }
/* point at a kind of line and the others step back */
.rec-main:has(.rec-g.is-clear:hover) .rec-course:not(.is-clear),
.rec-main:has(.rec-g.is-waiting:hover) .rec-course:not(.is-waiting),
.rec-main:has(.rec-g.is-notice:hover) .rec-course:not(.is-notice),
.rec-main:has(.rec-g.is-open:hover) .rec-course:not(.is-open) { opacity: .28; }
.rec-main .rec-course { transition: opacity 200ms ease; }

/* the ledger's column heads */
.rec-ledger-h { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; padding: 0 0 10px 22px; border-bottom: 1px solid rgba(212,169,67,.32);
  font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.rec-main .rec-course:first-of-type { border-top: 0; }

@media (max-width: 1279px) {
  .rec-desk { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "tab tab" "main side"; }
  .rec-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-g:nth-child(3) { border-left: 0; }
  .rec-g:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .rec-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "main" "side"; }
}
@media (max-width: 720px) {
  .rec-ledger-h { display: none; }
}
@media (max-width: 420px) {
  .rec-g { padding: 14px 12px 12px; column-gap: 10px; }
  .rec-g .m { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rec-main .rec-course, .rec-g { transition: none; } }
/* Watch keeps its own two columns: the list, and what a reading covers */
.rec-desk.rec-wdesk { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "tab tab" "main covers"; }
@media (max-width: 1100px) { .rec-desk.rec-wdesk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "main" "covers"; } }
/* every panel on Records is a document: square, with the gold rule along its head */
.rec-panel { box-shadow: inset 0 3px 0 var(--gold-soft), inset 0 0 0 1px rgba(212,169,67,.16), var(--sh-2); }

/* ══ FOURTH PASS, SECOND LOOP: a fresh review of the render ══ 2 Oct 2026 (night) ══ */
/* The words and the counter (or the index) start on the same line. */
.rec-bay:has(> .rec-counter), .rec-bay:has(> .rec-index) { align-items: start; }
.rec-bay:has(> .rec-index) .rec-index { margin-top: 6px; }
/* The example's name in the field was read as a filled-in answer: lighter. */
.rec-counter .rec-in::placeholder { color: #B5A79E; }
.rec-counter .rec-notyet { max-width: none; }
/* The record leads; the law's minimum periods sit beside it, dark, framed in
   gold. (Before: a cream block, "the only heavy thing on the page". With the
   cream counter above, two cream blocks competed and the record came third.) */
.rec-side .rec-window { background: #0B0808; color: var(--ink); box-shadow: inset 0 3px 0 var(--gold-soft), inset 0 0 0 1px rgba(212,169,67,.3); }
.rec-side .rec-window .rec-eyebrow { color: var(--gold-ink); }
.rec-side .rec-w-h { color: var(--ink-2); }
.rec-side .rec-w-p { color: var(--ink); }
.rec-side .rec-figs { border-top-color: var(--line) !important; }
.rec-side .rec-fig { align-items: flex-start; }
.rec-side .rec-fig-n { color: var(--gold-ink); }
.rec-side .rec-fig-l { color: var(--muted); padding-top: 4px; }
/* every line names its source under its date */
.rec-main .rec-when .rec-src { display: block; margin-top: 4px; color: var(--muted); }
/* Watch: the signed-out box is as tall as what it says; the example is solid, tagged */
.rec-wdesk .rec-wl .rec-panel { min-height: 0; padding-bottom: clamp(26px, 3vw, 40px); }
.rec-weg .rec-list { border: 1px solid var(--line-2) !important; }
/* What we read: the anatomy reads across, not 900px apart */
.rec-anat .rec-course { max-width: 900px; }
.rec-plaques .rec-course .rec-when { order: 1; }
/* phones: the glance keeps its meanings; long names fit the field */
@media (max-width: 420px) {
  .rec-g .m { display: block; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .rec-counter .rec-in { font-size: 20px; }
  .rec-panel { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ══ THE CHEQUE, THE FILTER, THE CLAUSES ══════════════════════ 2 Oct 2026 (night) ══
   Sir: the counter should "look like a cheque, to give it that financial
   feel", with "a watermark of the Hyyryn arch", and "pop slightly" under the
   cursor; the glance tiles should be pressable "and only show what's in
   order"; and "the basis" band "needs to be a bit more polished". Records
   keeps the register that money decisions rest on, so it borrows small,
   exact details from financial paper: a security tint, a watermark, the date
   line, a coded strip, roman-numbered clauses. Nothing added that does not
   carry something already on the page. */

/* the cheque */
.rec-cheque { overflow: hidden; isolation: isolate; padding: clamp(22px, 2.2vw, 32px) clamp(24px, 2.6vw, 38px) 0;
  background-color: #F6F0DE;
  background-image:
    repeating-linear-gradient(115deg, rgba(131,99,44,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(65deg, rgba(42,13,16,.035) 0 1px, transparent 1px 9px),
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.7), transparent 60%);
  transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease; }
.rec-cheque:hover, .rec-cheque:focus-within { transform: translateY(-4px) scale(1.012);
  box-shadow: inset 0 0 0 1px rgba(131,99,44,.6), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.4), 0 44px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(212,169,67,.35); }
.rec-cq-wm { position: absolute; z-index: -1; right: -4%; top: 50%; translate: 0 -50%; width: 46%; height: auto; fill: rgba(131,99,44,.075); pointer-events: none; }
.rec-cq-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid rgba(131,99,44,.35); }
.rec-cq-bank { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cinzel); font-weight: 600; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #2A0D10; }
.rec-cq-bank svg { width: 22px; height: 20px; fill: #83632C; }
.rec-cq-date { display: inline-flex; align-items: baseline; gap: 10px; }
.rec-cq-date small { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6B5A4E; }
.rec-cq-date b { min-width: 150px; padding: 0 4px 2px; border-bottom: 1px solid rgba(42,13,16,.45); font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 15px; color: #2A0D10; text-align: center; }
.rec-cheque .rec-counter-h { margin-bottom: 10px; font-size: 11.5px; }
/* the field is the line you write on */
.rec-cheque .rec-field { background: rgba(255,255,255,.55); border: 0; border-bottom: 1.5px solid #2A0D10; padding: 10px 4px 8px; }
.rec-cheque .rec-field:focus-within { box-shadow: none; border-bottom-color: #83632C; background: rgba(255,255,255,.8); }
.rec-cheque .rec-in { font-size: clamp(22px, 2vw, 28px); }
/* the signature corner */
.rec-cheque .rec-find { grid-template-columns: minmax(0, 1fr); }
.rec-cheque .rec-find .rec-go { justify-self: end; width: auto; min-width: 260px; }
.rec-cheque .rec-help { margin-top: 16px; }
/* the coded strip along the foot */
.rec-cq-micr { margin: 18px calc(-1 * clamp(24px, 2.6vw, 38px)) 0; padding: 10px clamp(24px, 2.6vw, 38px) 12px; border-top: 1px dashed rgba(42,13,16,.25); background: rgba(131,99,44,.06);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .22em; color: #5E5048; white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 560px) {
  .rec-cq-top { flex-direction: column; align-items: flex-start; }
  .rec-cheque .rec-find .rec-go { width: 100%; min-width: 0; justify-self: stretch; }
  .rec-cq-micr { font-size: 10px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .rec-cheque { transition: none; } .rec-cheque:hover, .rec-cheque:focus-within { transform: none; } }

/* the glance tiles, pressable */
.rec-g[role="button"] { cursor: pointer; outline: none; }
.rec-g[role="button"]:focus-visible { box-shadow: inset 0 3px 0 var(--c), inset 0 0 0 2px var(--gold-soft); }
.rec-g.is-zero[role="button"] { cursor: default; }
.rec-g[aria-pressed="true"] { background: rgba(255,240,220,.08); box-shadow: inset 0 4px 0 var(--c), inset 0 0 0 1px var(--c); }
.rec-g[aria-pressed="true"] .w::after { content: ' \00b7  only'; color: var(--gold-ink); }
.rec-main[data-filter="is-clear"] .rec-course:not(.is-clear),
.rec-main[data-filter="is-waiting"] .rec-course:not(.is-waiting),
.rec-main[data-filter="is-notice"] .rec-course:not(.is-notice),
.rec-main[data-filter="is-open"] .rec-course:not(.is-open) { display: none; }
.rec-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: -8px 0 18px; padding: 10px 14px; background: rgba(212,169,67,.08); box-shadow: inset 3px 0 0 var(--gold-soft);
  font-family: var(--sans); font-size: 13px; color: var(--ink); }
.rec-filter b { color: var(--ink-2); }
.rec-filter button { border: 0; background: none; cursor: pointer; padding: 4px 0; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid rgba(231,195,106,.5); }
.rec-filter button:hover { border-bottom-color: var(--gold-ink); }

/* the basis: three roman-numbered clauses, ruled */
.rec-band .rec-limits summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 48px; cursor: default; }
.rec-band .rec-limits summary .rec-eyebrow { grid-column: 1; }
.rec-band .rec-limits summary .rec-band-h { grid-column: 1; }
.rec-band-p { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; max-width: 46ch; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); text-align: right; }
.rec-lim-row { counter-reset: clause; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(212,169,67,.45); }
.rec-lim-row .rec-lim, .rec-lim-row .rec-lim:first-child { counter-increment: clause; position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.7fr); column-gap: clamp(20px, 3vw, 48px); align-items: baseline;
  padding: 26px 0 26px; border-left: 0; border-bottom: 1px solid rgba(212,169,67,.22); transition: background-color 220ms ease; }
.rec-lim-row .rec-lim::before { content: counter(clause, upper-roman); grid-row: 1 / span 2; font-family: var(--cinzel); font-weight: 600; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; color: var(--gold-soft); padding-left: 6px; }
.rec-lim-row .rec-lim p.rec-eyebrow { grid-column: 2; margin: 0; }
.rec-lim-row .rec-lim p:not(.rec-eyebrow) { grid-column: 3; grid-row: 1; }
.rec-lim-row .rec-lim:hover { background: rgba(0,0,0,.12); }
.rec-lim-row .rec-lim:hover::before { color: var(--gold-ink); }
@media (max-width: 900px) {
  .rec-band .rec-limits summary { grid-template-columns: minmax(0, 1fr); }
  .rec-band-p { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .rec-lim-row .rec-lim, .rec-lim-row .rec-lim:first-child { grid-template-columns: 56px minmax(0, 1fr); row-gap: 8px; }
  .rec-lim-row .rec-lim p:not(.rec-eyebrow) { grid-column: 2; grid-row: 2; }
  .rec-lim-row .rec-lim::before { font-size: 26px; }
}
/* the watermark: an outline, faint, low on the paper, behind the small print */
.rec-cq-wm { top: auto; bottom: 34px; translate: 0 0; right: 3%; width: 30%; fill: none; stroke: rgba(131,99,44,.16); stroke-width: 1.2; }
.rec-cheque .rec-field { background: rgba(255,255,255,.4); }
@media (max-width: 560px) { .rec-cq-wm { width: 46%; bottom: 40px; } }
.rec-cq-micr { color: #4A3D35; }

/* ══ THE ACCOUNT MENU, IN THE RECORDS ROOM ═══════════════════ 2 Oct 2026 (night) ══
   Sir: "improve this popup". The shared menu is drawn for the cream
   marketplace; Records remaps --cream to black and --navy to cream, so it
   arrived half mahogany and half cream, its two links cream on cream (unread-
   able), rounded, and with a GREEN eyebrow, which on this site means money.
   Here it is one square panel in the room's own materials: black, a gold rule
   along its head, the gold mark and RECORDS cut in Cinzel, the cheque's cream
   for the one decisive action, a gold ring for the other, and two quiet rows
   that read at 11:1 with a gold arrow that moves on hover. */
.rec-head .nm-menu { width: 312px; top: calc(100% + 12px); border-radius: 0; border: 0; overflow: hidden;
  background: #120E0E; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 3px 0 var(--gold-soft), inset 0 0 0 1px rgba(212,169,67,.32), 0 30px 60px -24px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.5); }
.rec-head .nm-menu-top { position: relative; padding: 22px 22px 20px; border-bottom: 1px solid rgba(212,169,67,.22);
  background: #2C0F12 radial-gradient(120% 120% at 100% 0%, rgba(212,169,67,.10), transparent 60%); }
.rec-head .nm-menu-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--cinzel); font-weight: 600; font-size: 12.5px; letter-spacing: .22em; color: var(--ink-2); }
.rec-head .nm-menu-eyebrow::before { width: 18px; height: 16px; margin: 0; vertical-align: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2073'%3E%3Cpath%20fill='%23D4A943'%20d='M10%2063%20L10%2021%20Q10%2017%2014%2017%20L25%2017%20L25%2063%20Z'/%3E%3Cpath%20fill='%23D4A943'%20d='M55%2063%20L55%2017%20L66%2017%20Q70%2017%2070%2021%20L70%2063%20Z'/%3E%3Cpath%20fill='%23D4A943'%20d='M2%2016%20L2%206%20Q2%201%207%201%20L73%201%20Q78%201%2078%206%20L78%2016%20Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rec-head .nm-menu-top::after { content: 'Sign in to see your list of watched companies.'; display: block; margin: 0 0 18px;
  font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--muted); order: 1; }
.rec-head .nm-menu-top { display: flex; flex-direction: column; }
.rec-head .nm-menu-eyebrow { order: 0; }
.rec-head .nm-menu-cta { order: 2; } .rec-head .nm-menu-alt { order: 3; }
.rec-head .nm-menu-cta, .rec-head .nm-menu-alt { padding: 13px 16px; font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.rec-head .nm-menu-cta { background: var(--block); color: #2A0D10; border: 1px solid var(--block); }
.rec-head .nm-menu-cta:hover { background: #FFF8E6; box-shadow: 0 0 0 3px rgba(212,169,67,.35); }
.rec-head .nm-menu-alt { margin-top: 10px; background: transparent; color: var(--gold-ink); border: 1px solid rgba(212,169,67,.55); }
.rec-head .nm-menu-alt:hover { border-color: var(--gold-ink); background: rgba(212,169,67,.08); }
.rec-head .nm-menu-group { padding: 6px 0; }
.rec-head .nm-menu-group + .nm-menu-group { border-top-color: rgba(212,169,67,.18); }
.rec-head .nm-menu-group a, .rec-head .nm-menu-quiet a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 13px 22px; border-radius: 0;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); opacity: 1; transform: none; }
.rec-head .nm-menu-group a::after { content: '\2192'; color: var(--gold-soft); transition: transform 180ms ease; }
.rec-head .nm-menu-group a + a { border-top: 1px solid rgba(246,240,222,.07); }
.rec-head .nm-menu-group a:hover, .rec-head .nm-menu-group a:focus-visible { background: rgba(212,169,67,.07); color: var(--ink-2); box-shadow: inset 3px 0 0 var(--gold-soft); transform: none; }
.rec-head .nm-menu-group a:hover::after { transform: translateX(4px); }
.rec-head .nm-menu a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -2px; }
/* the account button itself: the room's gold ring, not a white disc */
.rec-head .nm-right { background: transparent !important; border: 1px solid rgba(212,169,67,.5) !important; }
.rec-head .nm-right svg { stroke: var(--ink-2) !important; }
.rec-head .nm-right[aria-expanded="true"] { background: var(--gold-soft) !important; border-color: var(--gold-soft) !important; }
.rec-head .nm-right[aria-expanded="true"] svg { stroke: #2A0D10 !important; }
@media (max-width: 640px) { .rec-head .nm-menu { width: calc(100vw - 32px); right: -4px; } }

/* ══ THE CHEQUE TAKES TWO THIRDS ═════════════════════════════ 2 Oct 2026 (night) ══
   Sir: the search "is the main thing people will be doing when they come
   here ... in terms of size it needs to be emphasised ... on the right side
   of the screen ... taking up two-thirds of the page". The words take the
   first third; the cheque takes two, set larger, with the field and its
   button on one line, the way the amount and the signature share a line. */
@media (min-width: 1001px) {
  .rec-bay:has(> .rec-counter) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
  .rec-bay:has(> .rec-counter) .rec-bay-tx .rec-title { font-size: clamp(36px, 3.6vw, 56px); }
  .rec-bay:has(> .rec-counter) .rec-bay-tx .rec-stand { font-size: clamp(16px, 1.15vw, 17.5px); }
  .rec-cheque { padding: clamp(28px, 2.8vw, 44px) clamp(30px, 3.2vw, 52px) 0; }
  .rec-cheque .rec-cq-top { margin-bottom: 24px; }
  .rec-cheque .rec-cq-bank { font-size: 18px; } .rec-cheque .rec-cq-bank svg { width: 28px; height: 25px; }
  .rec-cheque .rec-cq-date b { font-size: 17px; min-width: 190px; }
  .rec-cheque .rec-counter-h { font-size: 13px; margin-bottom: 14px; }
  .rec-cheque .rec-find { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; }
  .rec-cheque .rec-field { padding: 14px 6px 12px; }
  .rec-cheque .rec-lab { font-size: 10.5px; }
  .rec-cheque .rec-in { font-size: clamp(28px, 2.5vw, 38px); }
  .rec-cheque .rec-find .rec-go { min-width: 0; padding: 20px 30px; font-size: 12.5px; }
  .rec-cheque .rec-help { margin-top: 20px; font-size: 14px; max-width: 70ch; }
  .rec-cheque .rec-scope { font-size: 13px; max-width: 80ch; }
  .rec-cheque .rec-cq-micr { margin-top: 24px; margin-left: calc(-1 * clamp(30px, 3.2vw, 52px)); margin-right: calc(-1 * clamp(30px, 3.2vw, 52px)); padding-left: clamp(30px, 3.2vw, 52px); font-size: 13px; }
  .rec-cq-wm { width: 22%; bottom: 46px; }
}
@media (min-width: 1001px) { .rec-bay:has(> .rec-counter) .rec-title br { display: none; } }
@media (min-width: 1001px) and (max-width: 1279px) {
  .rec-cheque .rec-find { grid-template-columns: minmax(0, 1fr); }
  .rec-cheque .rec-find .rec-go { justify-self: end; }
}

/* ══ RECORD FIRST ══════════════════════════════════════════════  5 Oct 2026 ══
   Sir: Records "may need a slight uplift in placement and structure, in a way
   that better suits its mission". He chose Record first. The mission is the
   reading, so once there is one the page is built around it:
     no lookup yet   the cheque and the words lead, as before
     a lookup made   (or arriving with ?q=, set in the head before first
                     paint) the words step back, the cheque becomes a slim
                     strip, the reading takes the top, Watch sits in the
                     record's own header, and the side notes become a band
                     under the reading instead of a column beside it
   The html class is rec-is-reading, NOT rec-reading: .rec-reading is already
   the age-and-retake row inside a record, and a class on <html> that matched
   it would have turned the whole document into that flex row. */

/* [hidden] loses to a class that sets display, so every such class says it
   (Mason ch05). The filter bar showed "Showing only lines in order" at rest. */
.rec-filter[hidden], .rec-onhy[hidden], .rec-watch-note[hidden] { display: none; }

/* the strip */
html.rec-is-reading .rec-bay { display: block; padding-top: clamp(20px, 2.2vw, 32px); }
html.rec-is-reading .rec-bay-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.rec-is-reading .rec-cheque { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px;
  padding: 12px 14px 12px clamp(20px, 2vw, 30px); transform: none; }
html.rec-is-reading .rec-cheque:hover, html.rec-is-reading .rec-cheque:focus-within { transform: none; }
html.rec-is-reading .rec-cheque .rec-cq-top, html.rec-is-reading .rec-cheque .rec-help, html.rec-is-reading .rec-cheque .rec-scope,
html.rec-is-reading .rec-cheque .rec-cq-micr, html.rec-is-reading .rec-cq-wm, html.rec-is-reading .rec-cheque .rec-notyet { display: none; }
html.rec-is-reading .rec-cheque .rec-counter-h { margin: 0; white-space: nowrap; font-size: 11.5px; }
html.rec-is-reading .rec-cheque .rec-find { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
html.rec-is-reading .rec-cheque .rec-field { padding: 4px 6px 6px; }
html.rec-is-reading .rec-cheque .rec-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.rec-is-reading .rec-cheque .rec-in { font-size: clamp(19px, 1.5vw, 22px); }
html.rec-is-reading .rec-cheque .rec-find .rec-go { padding: 14px 24px; font-size: 12px; }

/* the reading takes the top, the notes a band beneath it */
html.rec-is-reading .rec-desk:not(.rec-wdesk) { padding-top: clamp(26px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "main" "side"; }
html.rec-is-reading .rec-main .rec-course { grid-template-columns: minmax(0, 1fr) 250px; }
html.rec-is-reading .rec-side { position: static; grid-template-columns: minmax(0, 1fr); }
html.rec-is-reading .rec-watchcard { display: none; }
html.rec-is-reading .rec-side .rec-window { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); align-items: center;
  padding: clamp(26px, 2.6vw, 40px) clamp(26px, 3vw, 48px); }
html.rec-is-reading .rec-side .rec-window > :not(.rec-figs) { grid-column: 1; }
html.rec-is-reading .rec-side .rec-w-p { max-width: 72ch; }
html.rec-is-reading .rec-side .rec-figs { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 4px 0 4px clamp(24px, 3vw, 48px);
  border-top: 0 !important; border-left: 1px solid var(--line); flex-wrap: nowrap; justify-content: space-around; gap: 32px; }

/* the record's own header: who, and the one standing action */
.rec-co-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 28px; flex-wrap: wrap; margin: 0 0 6px; }
.rec-co-row .rec-co { margin: 0; }
.rec-co-act { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.rec-co-act .rec-watch { padding: 11px 20px; font-size: 13px; border-color: rgba(212,169,67,.6); color: var(--ink-2); }
.rec-co-act .rec-watch:hover { border-color: var(--gold-ink); }
.rec-co-act .rec-watch[aria-pressed="true"] { border-color: var(--checked); background: rgba(255,255,255,.03); }
.rec-watch.is-working svg { animation: none; }
.rec-watch.is-working { opacity: .6; cursor: progress; }
.rec-onhy { margin: -26px 0 30px; padding: 10px 14px; max-width: 78ch; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink);
  background: rgba(255,240,220,.03); box-shadow: inset 2px 0 0 var(--line-2); }
.rec-onhy a { color: var(--ink-2); text-underline-offset: 3px; }
.rec-onhy a:hover { color: var(--gold-ink); }

@media (max-width: 900px) {
  html.rec-is-reading .rec-cheque { grid-template-columns: minmax(0, 1fr); }
  html.rec-is-reading .rec-main .rec-course { grid-template-columns: minmax(0, 1fr) 190px; }
  html.rec-is-reading .rec-side .rec-window { grid-template-columns: minmax(0, 1fr); }
  html.rec-is-reading .rec-side .rec-figs { grid-column: 1; grid-row: auto; margin-top: 24px; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line) !important; justify-content: flex-start; }
}
@media (max-width: 620px) {
  html.rec-is-reading .rec-cheque .rec-counter-h { display: none; }
  html.rec-is-reading .rec-cheque .rec-find { grid-template-columns: minmax(0, 1fr); }
  html.rec-is-reading .rec-main .rec-course { grid-template-columns: minmax(0, 1fr); }
  .rec-co-act { padding-top: 0; }
}
/* the watch page's strip carries the pick list under the field */
html.rec-is-reading .rec-cheque .rec-pick { grid-column: 1 / -1; margin-top: 4px; }
html.rec-is-reading .rec-desk.rec-wdesk { padding-top: clamp(26px, 3vw, 44px); }

/* ══ THE CHEQUE IN THE HAND ═══════════════════════════════════  5 Oct 2026 ══
   Sir: "give the cheque search a 3D effect". He chose both kinds:
     a stack   the cheque sits on two more, each with its own paper edge, and
               the top sheet has a thickness (a darker sliver on its lower
               right). Drawn with outer shadows, which the cheque's own
               overflow (it clips the watermark) does not clip.
     a tilt    with a mouse, it leans towards the pointer, at most 5 degrees,
               with a soft sheen where the light would catch the paper
               (assets/hyyryn-cheque.js sets four custom properties). It holds
               still while you type in it, on touch screens, for anybody who
               has asked for less motion, and as the slim strip over a record.
   One transform carries the perspective, the tilt and the lift, so no rule
   further up can half-apply (chapter 05: half a rule landing is the tell). */
.rec-cheque {
  --cq-rx: 0deg; --cq-ry: 0deg; --cq-lift: 0px; --cq-scale: 1; --cq-mx: 50%; --cq-my: 0%;
  transform: perspective(1100px) rotateX(var(--cq-rx)) rotateY(var(--cq-ry)) translateY(var(--cq-lift)) scale(var(--cq-scale));
  transition: transform 420ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease;
  box-shadow:
    inset 0 0 0 1px rgba(131,99,44,.45), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.28),
    0 1px 0 0 #E4D6B3, 1px 2px 0 0 #CDBB90,
    7px 8px 0 -1px #EEE4CA, 7px 8px 0 0 rgba(131,99,44,.45),
    14px 16px 0 -1px #E4D8BA, 14px 16px 0 0 rgba(131,99,44,.38),
    0 38px 64px -26px rgba(0,0,0,.9);
}
.rec-cheque:hover, .rec-cheque:focus-within {
  --cq-lift: -4px; --cq-scale: 1.008;
  transform: perspective(1100px) rotateX(var(--cq-rx)) rotateY(var(--cq-ry)) translateY(var(--cq-lift)) scale(var(--cq-scale));
  box-shadow:
    inset 0 0 0 1px rgba(131,99,44,.6), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.4),
    0 1px 0 0 #E4D6B3, 1px 2px 0 0 #CDBB90,
    9px 11px 0 -1px #EEE4CA, 9px 11px 0 0 rgba(131,99,44,.45),
    18px 21px 0 -1px #E4D8BA, 18px 21px 0 0 rgba(131,99,44,.38),
    0 52px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(212,169,67,.35);
}
.rec-cheque.is-tilting { transition: transform 140ms linear, box-shadow 320ms ease; }
.rec-cheque::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(560px circle at var(--cq-mx) var(--cq-my), rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 320ms ease; }
.rec-cheque.is-tilting::after { opacity: 1; }

/* the strip over a record: one sheet under it, flat, still */
html.rec-is-reading .rec-cheque, html.rec-is-reading .rec-cheque:hover, html.rec-is-reading .rec-cheque:focus-within {
  transform: none;
  box-shadow:
    inset 0 0 0 1px rgba(131,99,44,.45), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.28),
    0 1px 0 0 #E4D6B3, 1px 2px 0 0 #CDBB90,
    5px 6px 0 -1px #EEE4CA, 5px 6px 0 0 rgba(131,99,44,.42),
    0 22px 40px -24px rgba(0,0,0,.85);
}
html.rec-is-reading .rec-cheque::after { display: none; }
@media (max-width: 560px) {
  .rec-cheque { box-shadow:
    inset 0 0 0 1px rgba(131,99,44,.45), inset 0 0 0 7px var(--block), inset 0 0 0 8px rgba(131,99,44,.28),
    0 1px 0 0 #E4D6B3, 1px 2px 0 0 #CDBB90,
    5px 6px 0 -1px #EEE4CA, 5px 6px 0 0 rgba(131,99,44,.45),
    10px 12px 0 -1px #E4D8BA, 10px 12px 0 0 rgba(131,99,44,.38),
    0 30px 50px -24px rgba(0,0,0,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-cheque, .rec-cheque:hover, .rec-cheque:focus-within { transform: none; transition: none; }
  .rec-cheque::after { display: none; }
}

/* ══ THE CHEQUE IS THE TOP OF THE PAGE ═════════════════════════  5 Oct 2026 ══
   Sir: the cheque "should take up most of the top of the screen since it's the
   search bar", with "the What the register says section" on it, and more of
   Records written in the cheque's own parts. A counterfoil stub behind a
   perforation (with the two half-moon notches a torn stub leaves), the
   heading as the cheque's line of type, the field as the payee line, "the sum
   of" as the amount box, the page's promise as the memo, and the code strip
   at the foot. Paper and ink stay the cheque's: cream, maroon ink, gold rule. */
.rec-bay.rec-bay--cheque { display: block; padding-top: clamp(26px, 3vw, 44px); padding-bottom: 0; }
.rec-cheque--full { display: grid; grid-template-columns: clamp(220px, 18vw, 270px) minmax(0, 1fr); padding: 0;
  min-height: clamp(560px, calc(100vh - 150px), 820px); }
.rec-cheque--full:hover, .rec-cheque--full:focus-within { --cq-scale: 1.003; }

/* the counterfoil */
.rec-cq-stub { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 2.6vw, 40px) 26px 28px;
  background: rgba(131,99,44,.05); border-right: 2px dashed rgba(131,99,44,.42); }
.rec-cq-stub::before, .rec-cq-stub::after { content: ''; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ground); }
.rec-cq-stub::before { top: -9px; } .rec-cq-stub::after { bottom: -9px; }
.rec-cq-stub-k { margin: 0 0 6px; font-family: var(--cinzel); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #2A0D10; }
.rec-cq-stub-h { margin: 14px 0 0; padding-bottom: 6px; border-bottom: 1px solid rgba(42,13,16,.25); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6B5A4E; }
.rec-cq-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec-cq-recent a { display: grid; gap: 2px; text-decoration: none; color: #2A0D10; }
.rec-cq-recent a b { font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 1.25; }
.rec-cq-recent a span { font-family: var(--sans); font-size: 11.5px; color: #6B5A4E; letter-spacing: .02em; }
.rec-cq-recent a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rec-cq-none, .rec-cq-watching { margin: 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: #5E5048; }
.rec-cq-watching a { color: #2A0D10; font-weight: 600; text-underline-offset: 3px; }

/* the face */
.rec-cq-main { display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 2.6vw, 40px) clamp(30px, 3.2vw, 52px) 0; }
.rec-cheque--full .rec-cq-top { margin-bottom: 0; }
.rec-cq-eyebrow { margin: clamp(18px, 2vw, 28px) 0 8px; color: #83632C; }
.rec-cheque .rec-cq-title { margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 24ch; font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(34px, 3.6vw, 58px); line-height: 1.05; letter-spacing: -.01em; color: #2A0D10; text-wrap: balance; }
.rec-cq-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 21vw, 320px); gap: clamp(24px, 2.6vw, 44px); align-items: start; }
.rec-cq-pay { min-width: 0; }
.rec-cheque--full .rec-help { margin-top: 16px; }
.rec-cq-try { margin: 10px 0 0; font-family: var(--sans); font-size: 13px; color: #5E5048; }
.rec-cq-eg { margin: 0 2px; padding: 0 1px; border: 0; border-bottom: 1px dashed #83632C; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: #2A0D10; }
.rec-cq-eg:hover { border-bottom-style: solid; }
.rec-cq-eg:focus-visible { outline: 2px solid #83632C; outline-offset: 2px; }

/* the sum of */
.rec-cq-sum { padding: 16px 18px 14px; border: 1.5px solid #2A0D10; border-radius: 2px; background: rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 4px rgba(42,13,16,.18); }
.rec-cq-sum-k { margin: 0 0 10px; font-family: var(--cinzel); font-weight: 600; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #2A0D10; }
.rec-cq-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rec-cq-sum-list li { position: relative; padding-left: 16px; font-family: var(--serif); font-size: 14.5px; line-height: 1.35; color: #2A0D10; }
.rec-cq-sum-list li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; rotate: 45deg; background: #83632C; }
.rec-cq-sum-not { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed rgba(42,13,16,.3); font-family: var(--sans); font-size: 12px; line-height: 1.5; color: #5E5048; }
.rec-cq-sum-not b { color: #2A0D10; }

/* the memo, and the small print beside it */
.rec-cq-foot { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: end; }
.rec-cq-memo { margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(42,13,16,.35); font-family: var(--serif); font-size: 15px; line-height: 1.55; color: #3A2E28; }
.rec-cq-memo-k { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6B5A4E; }
.rec-cq-memo em { color: #2A0D10; }
.rec-cheque--full .rec-scope { margin: 0; font-size: 12.5px; }
.rec-cheque--full .rec-cq-micr { margin-top: 22px; }

@media (max-width: 1100px) {
  .rec-cq-body { grid-template-columns: minmax(0, 1fr); }
  .rec-cq-sum { max-width: 520px; }
}
@media (max-width: 900px) {
  .rec-cheque--full { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rec-cq-stub { order: 2; border-right: 0; border-top: 2px dashed rgba(131,99,44,.42); }
  .rec-cq-stub::before, .rec-cq-stub::after { display: none; }
  .rec-cq-foot { grid-template-columns: minmax(0, 1fr); }
}

/* over a record it is the slim strip again: the field and its button */
html.rec-is-reading .rec-cheque--full { display: block; min-height: 0; padding: 12px 14px 12px clamp(20px, 2vw, 30px); }
html.rec-is-reading .rec-cq-stub, html.rec-is-reading .rec-cq-eyebrow, html.rec-is-reading .rec-cq-sum,
html.rec-is-reading .rec-cq-try, html.rec-is-reading .rec-cq-foot, html.rec-is-reading .rec-cheque--full .rec-cq-top { display: none; }
html.rec-is-reading .rec-cq-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
html.rec-is-reading .rec-cq-main { display: block; padding: 0; }
html.rec-is-reading .rec-cq-body { display: block; }
html.rec-is-reading .rec-cq-pay { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; }
@media (max-width: 620px) { html.rec-is-reading .rec-cq-pay { grid-template-columns: minmax(0, 1fr); } }
/* the arch watermark sits in the open paper right of the heading, clear of the sum box */
.rec-cheque--full .rec-cq-wm { top: clamp(84px, 7vw, 100px); bottom: auto; right: 7%; left: auto; width: clamp(140px, 12.5vw, 190px); translate: 0 0; }
.rec-cheque--full .rec-cq-micr { white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 1100px) { .rec-cheque--full .rec-cq-wm { width: 120px; top: 110px; } }
@media (max-width: 620px) { .rec-cheque--full .rec-cq-wm { display: none; } }

/* ══ THE BUTTON IS PART OF THE CHEQUE ═════════════════════════  5 Oct 2026 ══
   Sir: "the read the record button needs to be changed to match the cheque
   style". The pill was the marketplace's button laid on a piece of paper. On
   the cheque it is the amount box beside the payee line: square, as tall as
   the line, the cheque's own ink, the paper's security print, an engraved
   inner rule in gold, a printed frame around it like the sum box, and the
   cheque's capitals. Pressed, it goes down like a stamp. The same on the
   Watch page's cheque ("Add to the list"). */
.rec-cheque .rec-find .rec-go {
  position: relative; isolation: isolate; border-radius: 0; gap: 14px; justify-content: center;
  background-color: #2A0D10; color: #F6F0DE;
  box-shadow: inset 0 0 0 4px #2A0D10, inset 0 0 0 5px rgba(212,169,67,.6),
              0 0 0 3px #F6F0DE, 0 0 0 4.5px rgba(42,13,16,.7);
  font-family: var(--cinzel); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
/* the security print sits on its own layer, under the words, so the button's
   own colour stays a plain one any contrast check can read */
.rec-cheque .rec-find .rec-go::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(246,240,222,.075) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(65deg, rgba(212,169,67,.07) 0 1px, transparent 1px 8px); }
.rec-cheque .rec-find .rec-go:hover {
  background-color: #4B1A1E;
  box-shadow: inset 0 0 0 4px #4B1A1E, inset 0 0 0 5px rgba(212,169,67,.95),
              0 0 0 3px #F6F0DE, 0 0 0 4.5px #2A0D10;
}
.rec-cheque .rec-find .rec-go:active { transform: translateY(1px); }
.rec-cheque .rec-find .rec-go:focus-visible { outline: 2px solid #83632C; outline-offset: 7px; }
.rec-cheque .rec-find .rec-go svg { width: 20px; height: 20px; stroke-width: 1.25; transition: transform 200ms ease; }
.rec-cheque .rec-find .rec-go:hover svg { transform: translateX(3px); }
/* beside the field, as tall as the line it stands on */
@media (min-width: 1280px) {
  .rec-cheque .rec-find .rec-go { align-self: stretch; padding: 0 34px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .rec-cheque .rec-find .rec-go { padding: 0 24px; gap: 10px; letter-spacing: .16em; }
}
/* under the field, a box of its own on the right */
@media (max-width: 1279px) {
  .rec-cheque .rec-find .rec-go { padding: 22px 32px; margin-top: 10px; }
}
@media (max-width: 560px) {
  .rec-cheque .rec-find .rec-go { padding: 20px 24px; font-size: 12.5px; }
}
/* over a record, the strip: the same box, as tall as the slim line */
html.rec-is-reading .rec-cheque .rec-find .rec-go { align-self: stretch; margin-top: 0; padding: 12px 24px; font-size: 12px; }
@media (max-width: 620px) { html.rec-is-reading .rec-cheque .rec-find .rec-go { padding: 16px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .rec-cheque .rec-find .rec-go, .rec-cheque .rec-find .rec-go svg { transition: none; }
  .rec-cheque .rec-find .rec-go:active, .rec-cheque .rec-find .rec-go:hover svg { transform: none; }
}

/* ══ THE TOUR, IN THE RECORDS ROOM ═════════════════════════════  5 Oct 2026 ══
   Sir: "we also need a tour for records". The site's one tour component
   (hyyryn-tour.js, Mason ch 50), with each Records page marking its own steps,
   dressed for this room instead of the marketplace: the launcher is the
   room's gold-ringed pill, like Marketplace beside it; the offer and the step
   card are cheque paper with its security print, the room's capitals and
   oxblood ink; the ring is square, gold, on the dark. The cheque holds still
   while a tour is on, so the ring stays on what it names. */
body .hy-tour-launch, body .hy-tour-dock {
  border: 1px solid rgba(212,169,67,.55); background: #110D0D;
  box-shadow: 0 10px 28px rgba(0,0,0,.55); color: var(--ink-2);
}
body .hy-tour-launch { font: 500 10.5px/1 var(--sans); letter-spacing: .18em; }
body .hy-tour-launch:hover { box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 0 3px rgba(212,169,67,.18); }
body .hy-tour-launch svg { stroke: var(--gold-soft); }
/* the launcher carries the dock's colour itself, so the words sit on a colour
   of their own (a check walking up from them stops at the fixed dock) */
body .hy-tour-dock .hy-tour-launch { color: var(--ink-2); background: #110D0D; }
body .hy-tour-dock .hy-tour-launch:hover { background: #2A2116; }

body .hy-tour-offer, body .hy-tour-card {
  border-radius: 2px; color: #2A0D10;
  background-color: #F6F0DE;
  background-image:
    repeating-linear-gradient(115deg, rgba(131,99,44,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(65deg, rgba(42,13,16,.035) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 0 1px rgba(131,99,44,.5), inset 0 0 0 6px #F6F0DE, inset 0 0 0 7px rgba(131,99,44,.3),
              0 24px 56px -12px rgba(0,0,0,.85);
}
body .hy-tour-offer { padding: 20px 22px 18px; }
body .hy-tour-offer p { color: #3A2E28; }
body .hy-tour-offer b, body .hy-tour-k {
  font-family: var(--cinzel); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #83632C;
}
body .hy-tour-n { color: #6B5A4E; font-family: var(--sans); }
body .hy-tour-t { font-family: var(--serif-display, var(--serif)); color: #2A0D10; }
body .hy-tour-x { color: #3A2E28; }

/* the buttons: the cheque's own, square */
body .hy-tour-go, body .hy-tour-nav .hy-tour-next {
  border-radius: 0; border: 0; background: #2A0D10; color: #F6F0DE;
  box-shadow: inset 0 0 0 3px #2A0D10, inset 0 0 0 4px rgba(212,169,67,.6);
  font: 600 10.5px/1 var(--cinzel); letter-spacing: .18em; text-transform: uppercase;
}
body .hy-tour-go:hover, body .hy-tour-nav .hy-tour-next:hover {
  background: #4B1A1E; box-shadow: inset 0 0 0 3px #4B1A1E, inset 0 0 0 4px rgba(212,169,67,.95);
}
body .hy-tour-no, body .hy-tour-nav .hy-tour-back {
  border-radius: 0; background: transparent; color: #2A0D10; border: 1px solid rgba(42,13,16,.4);
  font: 600 10.5px/1 var(--cinzel); letter-spacing: .18em; text-transform: uppercase;
}
body .hy-tour-no:hover, body .hy-tour-nav .hy-tour-back:hover { border-color: #2A0D10; background: rgba(42,13,16,.05); }
body .hy-tour-nav .hy-tour-close { color: #6B5A4E; }
body .hy-tour-nav .hy-tour-close:hover { color: #2A0D10; }
body .hy-tour-launch:focus-visible, body .hy-tour-card button:focus-visible, body .hy-tour-offer button:focus-visible { outline: 2px solid #83632C; outline-offset: 3px; }
body .hy-tour-launch:focus-visible { outline-color: var(--gold-soft); }

body .hy-tour-ring { border-radius: 2px; box-shadow: 0 0 0 2px var(--gold-soft), 0 0 0 9999px rgba(6,4,4,.66); }

/* the cheque holds still under a tour */
html.hy-touring .rec-cheque, html.hy-touring .rec-cheque:hover, html.hy-touring .rec-cheque:focus-within { transform: none !important; }

/* ══ THE SEAL IN THE CORNER ═══════════════════════════════════  5 Oct 2026 ══
   Sir: "put the ico badge on the bottom left of the check". The bottom of the
   counterfoil, where a cheque book prints its small print. In the cheque's own
   ink and words, not the ICO's logo (its logos need its express approval): a
   roundel with a padlock, "Registered with the ICO", and the public register
   one press away. */
.rec-cq-seal { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 12px; }
.rec-cq-seal-mark { flex: none; width: 46px; height: 46px; fill: none; stroke: #2A0D10; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rec-cq-seal-mark circle { stroke: #83632C; }
.rec-cq-seal-mark circle.in { stroke: rgba(131,99,44,.55); stroke-dasharray: 1.2 2.2; }
.rec-cq-seal-t { margin: 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.45; color: #5E5048; }
.rec-cq-seal-t b { display: block; margin-bottom: 2px; font-family: var(--cinzel); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #2A0D10; }
.rec-cq-seal-t a { color: #2A0D10; text-decoration: underline; text-decoration-color: rgba(42,13,16,.35); text-underline-offset: 3px; }
.rec-cq-seal-t a:hover { text-decoration-color: #83632C; }
/* The tour's launcher sits at the bottom left of the screen on every page.
   Where the cheque fits the screen its foot is 31px above the screen's, so a
   seal on the very foot met the launcher's top edge; it stands 44px up, clear
   of it, and still in the corner. */
@media (min-width: 901px) { .rec-cq-seal { margin-bottom: 44px; } }
@media (max-width: 900px) { .rec-cq-seal { padding-top: 8px; } }

/* ══ THE TOUR'S FILMS, IN THE RECORDS ROOM ═════════════════════  5 Oct 2026 ══
   Sir: "the tour may need some animations for records where you think it
   seems necessary". The stage of hyyryn-tour-anim.js, dressed like the room:
   the dark ground with a warm light, cheque paper for the cheque, the
   cheque's ink for its box, and each line's coloured edge as on a record. */
body .hy-tour-anim { border-radius: 2px; background: radial-gradient(120% 90% at 80% 0%, #2E1C14 0%, #110D0D 62%); box-shadow: inset 0 0 0 1px rgba(131,99,44,.4); }
body .hy-tour-anim .ta-scene { color: #F1E6D2; }
body .hy-tour-anim .ta-ptr svg { fill: #F6F0DE; stroke: #110D0D; }
body .hy-tour-anim .ta-badge { background: #D4A943; color: #110D0D; }
.ta-rcq { position: absolute; border-radius: 2px; background: #F6F0DE;
  background-image: repeating-linear-gradient(115deg, rgba(131,99,44,.06) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 0 1px rgba(131,99,44,.55), 0 2px 0 -1px #E9DDC0, 0 3px 0 -1px rgba(131,99,44,.4); }
.ta-rfield { position: absolute; height: 26px; padding: 0 6px; overflow: hidden; white-space: nowrap;
  background: rgba(255,255,255,.6); border-bottom: 1.5px solid #2A0D10; color: #2A0D10; font: 400 11px/26px 'Libre Caslon Text', Georgia, serif; }
.ta-rfield .ta-ph { left: 6px; color: rgba(42,13,16,.42); }
.ta-rgo { position: absolute; height: 26px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: #2A0D10; color: #F6F0DE; font: 600 6.6px/1.1 'Cinzel', 'Libre Caslon Text', serif; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #2A0D10, inset 0 0 0 2.6px rgba(212,169,67,.65); transition: transform .15s ease, filter .15s ease; }
.ta-rdrop { position: absolute; z-index: 3; padding: 3px; background: #FFFDF6; border: 1px solid rgba(42,13,16,.25); box-shadow: 0 8px 18px rgba(0,0,0,.45); transform-origin: top left; }
.ta-ropt { display: flex; justify-content: space-between; align-items: center; height: 18px; padding: 0 6px; color: #2A0D10; font-size: 9px; }
.ta-ropt b { font-weight: 600; letter-spacing: .02em; } .ta-ropt em { color: #6B5A4E; }
.ta-ropt.is-lit { background: rgba(212,169,67,.28); }
.ta-ropt i, .ta-rline i, .ta-rname i, .ta-rnotice i, .ta-rrow i { display: block; height: 5px; border-radius: 3px; background: rgba(241,230,210,.28); }
.ta-ropt i { background: rgba(42,13,16,.18); }
.ta-rrec { position: absolute; padding: 6px 8px 4px; border-top: 1.5px solid #D4A943; background: rgba(246,240,222,.04); }
.ta-rhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.ta-rhead b { font: 400 11px/1.2 'Libre Caslon Text', Georgia, serif; letter-spacing: .04em; color: #F8EEDC; }
.ta-rhead em { font-size: 8px; color: rgba(241,230,210,.6); }
.ta-rline { display: flex; justify-content: space-between; align-items: center; height: 13px; margin-top: 2px; padding: 0 2px 0 8px;
  border-left: 2px solid #3E9C82; transition: opacity .35s ease; }
.ta-rline em { font-size: 7.5px; color: rgba(241,230,210,.65); }
.ta-rline.is-waiting { border-left-color: #D4A943; } .ta-rline.is-notice { border-left-color: #C0392B; }
.ta-rline.is-open { border-left: 2px dashed rgba(241,230,210,.45); }
.ta-rline.is-dim { opacity: .15; }
.hy-tour-anim .ta-scene > .ta-rline { position: relative; margin-left: 14px; width: 284px; }
.ta-rtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 14px 5px; }
.ta-rtile { display: flex; align-items: baseline; gap: 5px; height: 26px; padding: 0 6px; border-top: 2px solid #3E9C82; background: rgba(246,240,222,.05);
  font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(241,230,210,.8); transition: background .25s ease, box-shadow .25s ease, transform .15s ease; }
.ta-rtile b { font: 400 15px/24px 'Libre Caslon Text', Georgia, serif; color: #F8EEDC; }
.ta-rtile.is-waiting { border-top-color: #D4A943; } .ta-rtile.is-notice { border-top-color: #C0392B; }
.ta-rtile.is-open { border-top: 2px dashed rgba(241,230,210,.5); }
.ta-rtile.is-lit { background: rgba(212,169,67,.18); box-shadow: inset 0 0 0 1px rgba(212,169,67,.7); }
.ta-rstub { position: absolute; padding: 8px 8px; background: #F6F0DE; border-right: 1.5px dashed rgba(131,99,44,.55); color: #2A0D10;
  background-image: repeating-linear-gradient(115deg, rgba(131,99,44,.06) 0 1px, transparent 1px 5px); }
.ta-rk { margin: 0 0 5px; font: 600 7.5px/1 'Cinzel', 'Libre Caslon Text', serif; letter-spacing: .18em; text-transform: uppercase; color: #83632C; }
.ta-rk-d { color: #D4A943; }
.ta-rsh { margin: 6px 0 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(42,13,16,.25); font-size: 6.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6B5A4E; }
.ta-rnone { margin: 0; font-size: 8px; line-height: 1.35; color: #5E5048; transition: opacity .25s ease; }
.ta-rli { position: absolute; left: 8px; right: 8px; top: 40px; display: flex; justify-content: space-between; align-items: baseline; font-size: 8px; color: #2A0D10; }
.ta-rli b { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(42,13,16,.35); text-underline-offset: 2px; } .ta-rli em { color: #6B5A4E; }
.ta-rhead2 { position: absolute; left: 14px; right: 14px; top: 10px; height: 26px; display: flex; align-items: center; gap: 10px; }
.ta-rname { display: flex; flex-direction: column; gap: 4px; }
.ta-rwatch { margin-left: auto; height: 22px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(212,169,67,.7);
  font-size: 8.5px; color: #F8EEDC; transition: background .25s ease, border-color .25s ease, transform .15s ease; }
.ta-rwatch.is-on { background: rgba(62,156,130,.18); border-color: #3E9C82; }
.ta-rbell { position: absolute; right: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(212,169,67,.5); transition: transform .15s ease; }
.hy-tour-anim .ta-scene > .ta-rbell { right: 14px; }
.ta-rhead2 .ta-rbell { position: relative; right: auto; top: auto; flex: none; }
.ta-rbell .ta-badge { position: absolute; right: -7px; top: -6px; }
.ta-rmorn { position: absolute; left: 14px; top: 44px; margin: 0; font: italic 400 9.5px/1.2 'Libre Caslon Text', Georgia, serif; color: rgba(241,230,210,.75); }
.ta-rnotice { position: absolute; left: 14px; right: 14px; top: 62px; padding: 8px 10px; background: #1C1513; border: 1px solid rgba(212,169,67,.35); border-left: 2px solid #D4A943;
  box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.ta-rnotice .ta-rk { color: #D4A943; margin-bottom: 4px; }
.ta-rnotice b { display: block; font: 400 10.5px/1.2 'Libre Caslon Text', Georgia, serif; color: #F8EEDC; }
.ta-rnotice em { display: block; margin-top: 3px; font-size: 8.5px; color: rgba(241,230,210,.75); }
.ta-rrow { position: absolute; left: 14px; width: 284px; height: 20px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-left: 2px solid #3E9C82; background: rgba(246,240,222,.05); font-size: 8.5px; }
.ta-rrow b { font-weight: 600; color: #F8EEDC; } .ta-rrow em { color: rgba(241,230,210,.6); } .ta-rrow span { margin-left: auto; font-size: 7.5px; color: rgba(241,230,210,.6); }
.ta-rrow-q { opacity: .45; }
.ta-rclock { position: absolute; left: 14px; top: 10px; margin: 0; font: 400 20px/1 'Libre Caslon Text', Georgia, serif; color: #F8EEDC; }
.ta-rbar { position: absolute; left: 70px; right: 44px; height: 4px; border-radius: 2px; background: rgba(241,230,210,.12); overflow: hidden; }
.ta-rfill { display: block; width: 0; height: 100%; background: #D4A943; transition: width 1.2s ease; }
.ta-rfill.is-full { width: 100%; }
.ta-scene .ta-rgo.press, .ta-scene .ta-rtile.press, .ta-scene .ta-rwatch.press, .ta-scene .ta-rbell.press { transform: scale(.94); filter: brightness(1.15); }
.ta-rfield:has(.ta-ty:not(:empty)) .ta-ph { opacity: 0; }
.ta-rfield .ta-ty { font-weight: 400; }

/* the points of a paragraph, in the room's gold (Watch a company, 5 Oct 2026) */
.rec-stand .rec-hl { font-weight: 400; color: var(--gold-ink); }

/* ══ THE SEARCH FOLDS INTO THE HEADER ═════════════════════════  5 Oct 2026 ══
   Sir: "when scrolling past the searchbar in check a company, compact the
   searchbar into the header ... and revert it when back onto the searchbar".
   Once the cheque's search has gone up under the header the same form sits
   in the header's middle, where the links were, as a slip of the cheque:
   paper, a baseline to write on, the cheque's ink box. Its place on the
   cheque keeps its height (records.html moves it). */
.rec-find-slot { min-width: 0; }
.rec-dock { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(640px, calc(100% - 500px)); transform: translate(-50%, -50%); }
.rec-dock[hidden] { display: none; }
html.rec-docked .rec-nav { visibility: hidden; }
.rec-dock .rec-find { margin: 0; padding: 5px 5px 5px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border-radius: 2px; background-color: #F6F0DE;
  background-image: repeating-linear-gradient(115deg, rgba(131,99,44,.05) 0 1px, transparent 1px 7px), repeating-linear-gradient(65deg, rgba(42,13,16,.03) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 0 1px rgba(131,99,44,.6), 0 2px 0 -1px #E9DDC0, 0 12px 26px -14px rgba(0,0,0,.9);
  animation: recDockIn 260ms cubic-bezier(.16,1,.3,1); }
@keyframes recDockIn { from { opacity: 0; transform: translateY(-6px); } }
.rec-dock .rec-field { flex: none; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(42,13,16,.55); box-shadow: none; }
.rec-dock .rec-field:focus-within { border-bottom-color: #83632C; }
.rec-dock .rec-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rec-dock .rec-in { padding: 4px 2px 3px; border: 0; font-family: var(--serif); font-size: 17px; line-height: 1.25; color: #1A0F0E; }
.rec-dock .rec-in::placeholder { color: rgba(42,13,16,.42); opacity: 1; }
.rec-dock .rec-find .rec-go { align-self: stretch; margin: 0; padding: 0 16px; gap: 10px; border-radius: 0; background-color: #2A0D10; color: #F6F0DE;
  font: 600 10.5px/1 var(--cinzel); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 0 0 0 3px #2A0D10, inset 0 0 0 4px rgba(212,169,67,.6); min-height: 36px; }
.rec-dock .rec-find .rec-go:hover { background-color: #4B1A1E; box-shadow: inset 0 0 0 3px #4B1A1E, inset 0 0 0 4px rgba(212,169,67,.95); }
.rec-dock .rec-find .rec-go svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.25; fill: none; }
.rec-dock .rec-find .rec-go:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.rec-dock .rec-drop { left: -14px; right: auto; width: calc(100% + 14px); min-width: 320px; top: calc(100% + 10px); }
/* Below 1100px the header's links are a strip under the bar: the slip takes
   that strip's place, the width of the page. */
@media (max-width: 1100px) {
  .rec-dock { top: auto; bottom: 4px; left: var(--rw); right: var(--rw); width: auto; transform: none; }
  .rec-dock .rec-find { padding: 3px 3px 3px 12px; }
  .rec-dock .rec-find .rec-go { min-height: 32px; }
  .rec-dock .rec-in { font-size: 16px; padding: 3px 2px 2px; }
  .rec-dock .rec-drop { min-width: 0; }
}
@media (max-width: 620px) {
  .rec-dock .rec-find .rec-go { padding: 0 12px; font-size: 0; gap: 0; }
  .rec-dock .rec-find .rec-go svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .rec-dock .rec-find { animation: none; } }

/* ══ THE LEGAL LINE ═════════════════════════════════════════════  12 Oct 2026 (rp100) ══
   Records had no foot at all, so none of its three pages linked the Terms or the
   privacy notice. Not the site footer, which is not Records' look: one line in the
   room's own light, under a gold hairline. */
.rec-legal { padding: 22px var(--rw) 30px; background: rgb(17, 13, 13); border-top: 1px solid rgba(212,169,67,.28); font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-size: 12.5px; line-height: 1.6; color: rgba(250,248,243,.66); }
.rec-legal p { max-width: var(--rmax); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; }
.rec-legal a { color: rgba(250,248,243,.9); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(212,169,67,.55); }
.rec-legal a:hover { text-decoration-color: currentColor; }
.rec-legal a:focus-visible { outline: 2px solid rgba(212,169,67,.9); outline-offset: 2px; }
@media (forced-colors: active) { .rec-legal { border-top: 1px solid CanvasText; } }

/* rp118, 13 Oct 2026: each limit names its source under its words (Mason 59.27: a figure carries its
   source). The two figures were checked again on 13 Oct: the Insolvency Service's August 2026 release
   (one in 200, England and Wales; the page had said one UK company in 194) and Citizens Advice's
   release of 11 August 2025 (19,281 of 36,534 complaints about the quality of the work). */
.rec-lim-row .rec-lim p.rec-lim-src { grid-column: 3; grid-row: 2; margin: 10px 0 0; font-family: var(--sans, 'Inter', sans-serif); font-size: 12px; line-height: 1.5; color: var(--ink); opacity: .82; }
.rec-lim-row .rec-lim p.rec-lim-src a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(212,169,67,.6); }
@media (max-width: 900px) { .rec-lim-row .rec-lim p.rec-lim-src { grid-column: 2; grid-row: 3; } }


/* ══ RECORDS' ACCOUNT MENU, ROUNDED; ITS ROWS READ FROM THE LEFT ═══  20 Oct 2026 (rp168) ══
   Sir, 20 Oct: the menu under the profile picture is "still squared off ... I
   want the corners to just be rounded, just like the settings page and the
   plans page". The marketplace's menu was rounded in rp164; Records' kept its
   square paper. It keeps its colours (the wine head, the night body, the gold)
   and takes the same shape: a 24px panel with an 8px margin, the head its own
   rounded plate, the rows rounded inside the margin, lit by a tint and not a
   bar down a side.
   Two faults found on the way and put right: each row was laid out
   space-between with three parts (the mark, the name, the arrow), which put
   the name in the middle of the row ("Dashboard" centred, "Notifications"
   not); and the line "Sign in to keep your own list of companies to watch"
   was written by the sheet onto every head, so a person signed in was told to
   sign in. It shows only when nobody is (the head holds no face then). */
.rec-head .nm-menu { padding: 8px; border-radius: 24px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.30), 0 44px 80px -30px rgba(0,0,0,.85), 0 4px 12px rgba(0,0,0,.45); }
.rec-head .nm-menu-top { margin-bottom: 6px; border-radius: 18px; border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.rec-head .nm-menu-top:has(.nm-menu-me)::after { content: none; display: none; }
.rec-head .nm-menu-top:has(.nm-menu-me) .nm-menu-me { margin-bottom: 16px; }
.rec-head .nm-menu-top .nm-menu-cta, .rec-head .nm-menu-top .nm-menu-alt { border-radius: 999px; }
.rec-head .nm-menu-group { padding: 4px 0; }
.rec-head .nm-menu-group + .nm-menu-group { position: relative; border-top: 0; margin-top: 4px; padding-top: 8px; }
.rec-head .nm-menu-group + .nm-menu-group::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,169,67,0), rgba(212,169,67,.26), rgba(212,169,67,0)); }
.rec-head .nm-menu-group a, .rec-head .nm-menu-quiet a { justify-content: flex-start; gap: 12px; margin: 1px 0; padding: 11px 14px; border-radius: 14px; }
.rec-head .nm-menu-group a::after { margin-left: auto; }
.rec-head .nm-menu-group a + a { border-top: 0; }
.rec-head .nm-menu-group a:hover, .rec-head .nm-menu-group a:focus-visible { box-shadow: none; background: rgba(212,169,67,.10); }
.rec-head .nm-menu-group a .nm-menu-n, .rec-head .nm-menu-group a .nm-chev { margin-left: auto; }
.rec-head .nm-menu-group a:has(.nm-menu-n)::after, .rec-head .nm-menu-group a:has(.nm-chev)::after { margin-left: 0; }
.rec-head .nm-menu-out { display: block; width: 100%; margin: 1px 0; padding: 11px 14px; border-radius: 14px; text-align: left; }
.rec-head .nm-menu-out:hover { background: rgba(212,169,67,.10); }
.rec-head .nm-right[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(212,169,67,.20) !important; }
@media (max-width: 640px) { .rec-head .nm-menu { border-radius: 22px; } }

/* ── THE READING'S LINE IS A SENTENCE (rp181, 21 Oct 2026, the footer pass) ───────────────────────────────
   "Read on 5 October 2026. A real public company, shown to explain ... Open its record" was a flex row, so the
   words between the date and the link became a third column: on a phone "Read on / 5 / October" stacked in a
   column 60px wide beside them. It reads as one sentence, the dot leading it. */
html body .rec-read { display: block; line-height: 1.6; }
html body .rec-read .rec-dot { display: inline-block; vertical-align: middle; margin: -2px 9px 0 0; }
html body .rec-read > a { white-space: nowrap; }

/* ══ THE RECORDS FINAL CHECK (rp199, 21 Oct 2026) ═════════════════════════════════════════════════════════════
   Sir's order of 21 Oct: "finish hyyryn marketplace and records first". Every Records page walked in every state the
   register can give it (at rest, a list to pick from, nothing matching, no such company, in order, overdue, a notice
   in force, the example), signed out, as a trade on Free and as a homeowner who has hired, at 1440, 767 and 390,
   with Tab. What it found, and what each rule below answers. Mason 61.12. */

/* 1. The tour's launcher has its place in the masthead (hyyryn-tour.js, data-tour-dock). In the corner it sat on
      the page's own words at the top of every page: on a record, the company's facts and "Watch this company". */
html body .rec-tour-slot { display: inline-flex; }
html body .rec-tour-slot .hy-tour-dock.is-slotted {
  position: static; left: auto; bottom: auto; z-index: auto; height: auto; border: 0; border-radius: 50%;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
  opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
html body .rec-tour-slot .hy-tour-dock.is-slotted .hy-tour-launch {
  width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1px var(--head-line-2); color: var(--head-ink);
  transition: box-shadow 180ms ease; }
html body .rec-tour-slot .hy-tour-dock.is-slotted .hy-tour-launch:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--gold-soft); }
html body .rec-tour-slot .hy-tour-dock.is-slotted .hy-tour-launch svg { width: 17px; height: 17px; stroke: var(--gold-soft); }
html body .rec-tour-slot .hy-tour-launch-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 2. The four kinds of line count a record's lines; with no record on screen (a list to pick from, nothing
      matching, no such company) the script hides them, and the sheet's display: grid drew them anyway as 0 0 0 0. */
html body .rec-glance[hidden] { display: none; }

/* 3. Finding a company: the field says it has the focus. Its underline only changed shade (oxblood to brown). */
html body .rec-cheque .rec-field:focus-within:is(*, #rec-f) {
  border-bottom-color: #83632C; background: #FFFFFF;
  box-shadow: 0 0 0 2px #83632C, 0 0 0 5px rgba(212,169,67,.28); }

/* 4. Targets. The masthead's four questions are the height of their letters (14px): each is now the height of its
      row, the rule under the one you are on where it was. Records' own mark likewise. */
html body .rec-head .rec-nav > a { padding-block: 12px; }
html body .rec-head .rec-nav > a::after { bottom: 4px; }
/* the press area grows, the row does not: the search folds into this row (rp51_ui), so its height holds */
html body .rec-head .rec-brand { padding-block: 7px; margin-block: -7px; }
@media (max-width: 1100px) {
  html body .rec-head .rec-nav { padding-block: 0; }
  html body .rec-head .rec-nav > a { padding-block: 14px 12px; }
}
/*    The two names to try, the sources' links, "You tell us": the same look, a press area of 24px or more. */
html body .rec-cq-try .rec-cq-eg { padding-block: 6px; margin-block: -6px; border-bottom: 0;
  text-decoration: underline dashed #83632C; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html body .rec-cq-try .rec-cq-eg:hover { text-decoration-style: solid; }
html body .rec-src a, html body .ws-src-a { display: inline-block; padding-block: 5px; margin-block: -5px; }
html body .ws-steps li:has(> a) { padding: 0; }
html body .ws-steps li > a { display: block; padding: 16px 18px; }

/* 5. On a phone: the masthead's three rounds alike at 36px (the back was 33 by 31), the words a phone can read, the stamp off the line it
      stamps, and the cheque's coded line fading where it runs out of paper rather than cut through a word. */
@media (max-width: 620px) {
  /* 36px, the account's own size: the row is the masthead's first 36px, and the search folds in under it (rp51_ui) */
  html body .rec-head .rec-right { gap: 10px; }
  html body .rec-head .rec-back { width: 36px; height: 36px; padding: 0; justify-content: center; }
  html body :is(.rec-eyebrow:not(.rec-lim .rec-eyebrow), .rec-lab, .rec-cq-stub-h, .rec-cq-memo-k, .rec-watchcard .k, .ws-lane-k, .ws-meta dt, .rec-cq-date small):is(*, #rec-t#rec-t) { font-size: 10.5px; }
  /* a floor names what it raises and raises it to the largest size the pages already give it (12.5px on a record):
     a floor of 12px brought the record's own 12.5px dates down (Mason 61.9, measured both ways) */
  html body :is(.rec-when, .rec-when b, .rec-src, .rec-src a):is(*, #rec-t#rec-t) { font-size: 12.5px; }
  html body .rec-cq-seal-t:is(*, #rec-t#rec-t) { font-size: 12px; }
  html body .rec-panel .rec-eyebrow.is-eg { padding-right: 118px; }
}
@media (max-width: 760px) {
  html body .rec-cq-micr { white-space: nowrap; overflow: hidden; text-overflow: clip;
    -webkit-mask-image: linear-gradient(to right, black 78%, transparent); mask-image: linear-gradient(to right, black 78%, transparent); }
}

/* 6. On a record, a company watched because its tradesperson was hired says so, and is not a button (records.html,
      paintHired): it stops on its own a year after the job, and the platform refuses to stop it sooner. */
html body .rec-co-act .rec-watch.is-hired, html body .rec-co-act .rec-watch.is-hired:hover { cursor: default; border-color: var(--checked); background: rgba(255,255,255,.03); color: var(--ink-2); }
html body .rec-co-act .rec-watch.is-hired svg { stroke: var(--checked); }