/* ══ ABOUT: THE HOMEPAGE SKELETON ═══════════════════════════════════ 2 Oct 2026 ══
   Loaded after hyyryn-company.css, on about.html only. The hero is the
   homepage's: a full-bleed photograph the bar sits over, the pinned note on
   the left wall at the homepage's own position (top 152px, left
   clamp(26px, 2.8vw, 46px), width clamp(280px, 20vw, 340px)), and the words
   low on the photograph. The note is the homepage's `.rcpt` board and paper,
   copied by value from index.html (board navy .82 with its weave, the pin,
   the paper #FDFBF5 with its grain and its folded corner, -1.4deg at rest,
   straight on hover), not redrawn. */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--on-navy); background: #050B16;
  margin-top: calc(-1 * var(--bar)); min-height: clamp(640px, 88vh, 800px); display: flex; align-items: flex-end;
  padding: calc(var(--bar) + 40px) var(--gut-r) clamp(48px, 6vw, 88px) var(--gut-l); }
/* THE NAME IN THE LIGHTS STAYS WHOLE. The photograph spells HYYRYN across
   0.06 to 0.96 of its width and 0.43 to 0.58 of its height, so under `cover`
   the note covered a letter at every width below about 1,450px (measured:
   the H at 1440 on the left wall, the N at 1440 on the right). Sized to the
   width instead, the letters are pinned 40px under the bar at every width
   and the city below them fades into the night, where the words sit. */
.ab-hero-img { position: absolute; left: 0; right: 0; top: calc(var(--bar) + 40px - 28.9vw); height: 67.4vw; z-index: -2;
  background: url('../bg-fork-night.jpg') 50% 0 / 100% 100% no-repeat;
  background-image: image-set(url('photos/bg-fork-night-1712.webp') type('image/webp'), url('../bg-fork-night.jpg') type('image/jpeg'));   /* rp193: 214KB, not 488 */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.ab-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(5,11,22,.94) 0%, rgba(5,11,22,.72) 30%, rgba(5,11,22,.12) 62%, rgba(5,11,22,.38) 100%); }
.ab-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-soft) 0%, rgba(212,169,67,.55) 40%, rgba(212,169,67,0) 85%); }
.ab-hero-in { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 340px); gap: clamp(28px, 5vw, 96px); align-items: end; }
.ab-hero-tx .co-crumb { margin-bottom: 18px; }
.ab-h1 { margin: 14px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; color: var(--cream); text-wrap: balance; max-width: 17ch; letter-spacing: -.008em; }
.ab-hero .co-lede { max-width: 58ch; }

/* the note: the homepage's board and paper */
.ab-note { position: relative; z-index: 4; width: 100%;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.09 0 0 0 0 0.16 0.70 0 0 0 -0.30'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  --lift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113' height='113'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.00 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='113' height='113' filter='url(%23w)'/%3E%3C/svg%3E"); }
.ab-nboard { position: relative; border-radius: 4px; padding: 26px 14px 18px; background-color: rgba(10,22,40,.82);
  background-image: repeating-linear-gradient(90deg, rgba(250,248,243,.030) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
  box-shadow: 0 1px 1px rgba(10,22,40,.30), 0 14px 24px -10px rgba(10,22,40,.40), 0 34px 52px -18px rgba(10,22,40,.44); }
.ab-pin { position: absolute; z-index: 8; top: 18px; left: 50%; margin-left: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%); box-shadow: 0 1px 0 rgba(250,248,243,.22), 0 6px 9px -3px rgba(0,0,0,.66); }
.ab-pin::after { content: ''; position: absolute; left: 4px; top: 3.5px; width: 6px; height: 5px; border-radius: 50%; background: rgba(250,248,243,.62); rotate: -24deg; }
.ab-paper { position: relative; z-index: 2; width: calc(100% - 26px); margin-left: 6px; rotate: -1.4deg; transform-origin: 50% 16px; transition: rotate 320ms cubic-bezier(.16,1,.3,1);
  padding: 30px 17px 18px; text-align: center; color: var(--ink);
  background-color: #FDFBF5;
  background-image: var(--grain), var(--lift),
    radial-gradient(120% 80% at 14% 2%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(100% 70% at 88% 99%, rgba(10,22,40,.050), transparent 72%);
  background-size: 140px 140px, 113px 113px, auto, auto;
  filter: drop-shadow(0 1px 1px rgba(10,22,40,.34)) drop-shadow(0 12px 18px rgba(10,22,40,.30)); }
.ab-paper::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  background: linear-gradient(135deg, transparent 0 49%, rgba(0,0,0,.30) 50%, transparent 51%), linear-gradient(315deg, #F2EEE2 0 46%, transparent 47%); }
.ab-nboard:hover .ab-paper, .ab-nboard:focus-within .ab-paper { rotate: 0deg; }
.ab-nh { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 7px; font: 600 11px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.ab-nh svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-nt { margin: 0 0 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 500 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.ab-nfig { margin: 0; }
.ab-nfig b { display: block; white-space: nowrap; font: 400 32px/1 var(--serif-display); letter-spacing: .02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.ab-nfig span { display: block; margin-top: 6px; font: 500 9.5px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); }
.ab-npay { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--line-2); font: 400 12.5px/1.55 var(--serif); color: var(--ink); text-align: left; }
.ab-npay b { font-weight: 700; color: var(--navy); }
.ab-nmore { display: inline-block; margin-top: 12px; font: 400 13px/1.4 var(--serif); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color 160ms; }
.ab-nmore:hover { text-decoration-color: var(--navy); }
.ab-nmore::after { content: '\00a0\2192'; }

/* the close: the homepage's two doors, then one quiet line */
.ab-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-door { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 300px; padding: 28px 30px; border-radius: 14px; text-decoration: none; color: var(--cream); background: var(--navy); box-shadow: var(--lift-hi); }
.ab-door .ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 50%; transition: transform 700ms var(--ease-stone); }
.ab-door::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,22,40,.96) 0%, rgba(10,22,40,.86) 55%, rgba(10,22,40,.3) 100%); }
.ab-door:hover .ph { transform: scale(1.04); }
.ab-door .k { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.ab-door b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; max-width: 20ch; }
.ab-door .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.ab-door .go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ab-door:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.ab-wrong { margin: 22px 0 0; text-align: center; font-family: var(--serif); font-size: 15.5px; color: var(--muted-2); }
.ab-wrong a { color: var(--navy); text-underline-offset: 3px; }

/* the mark is drawn set: one expressive moment per page, and it is the note */
.ab-mark .post, .ab-mark .lintel-g { animation: none !important; }

@media (max-width: 1000px) {
  .ab-hero { min-height: 0; display: block; padding-top: calc(var(--bar) + 28px); }
  .ab-note { width: min(340px, 100%); }
  .ab-hero-in { grid-template-columns: minmax(0, 1fr); }
  .ab-note { order: 2; margin: 28px 0 0; }
  .ab-doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .ab-paper { rotate: 0deg; }
  .ab-door { min-height: 240px; padding: 22px; }
  .ab-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-paper { transition: none; }
  .ab-door .ph { transition: none; }
}

/* ══ ABOUT, SECOND PASS (Sir's voice notes, 2 Oct 2026) ═══════════════════════
   The mark section fills the width and builds; the six claims become cards;
   the five refusals answer the cursor; "where we are" gains a fourth state,
   being explored, and cards that invite a look; the two doors take half the
   page each. Square corners, like the homepage. */

/* the mark, built */
.ab-build { margin-top: clamp(56px, 7vw, 104px); background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; isolation: isolate; }
.ab-build::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 0%, rgba(212,169,67,.14), transparent 65%); }
.ab-build-in { max-width: var(--wide); margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gut-r) clamp(48px, 6vw, 80px) var(--gut-l); }
.ab-build-head { text-align: center; display: grid; justify-items: center; }
.ab-build .co-sk { color: var(--gold-soft); }
.ab-build .co-h2 { color: var(--cream); max-width: none; }
.ab-build-p { margin: 12px 0 0; max-width: 58ch; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--on-navy-2); }
.ab-stage { margin-top: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-items: end; }
.ab-side { display: grid; gap: 8px; padding-bottom: 18px; }
.ab-side .k { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.ab-side h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); color: var(--cream); }
.ab-side p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--on-navy-2); }
.ab-side p.gets { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--on-navy-line); font-family: var(--sans); font-size: 12.5px; color: var(--cream); }
.ab-side.is-r { text-align: right; justify-items: end; }
.ab-draw2 svg { width: 100%; height: auto; overflow: visible; display: block; }
.ab-draw2 .post { fill: #E9E4D6; transform-box: fill-box; transform-origin: 50% 100%; }
.ab-draw2 .lintel { fill: var(--gold-soft); }
.ab-draw2 .lintel-g { transform-box: fill-box; }
.ab-draw2 .st circle { fill: var(--navy); stroke: var(--navy); stroke-width: 2; transition: fill 400ms; }
.ab-draw2 .st text { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--navy); }
.ab-draw2 .st text.d { font-family: var(--serif-display); font-size: 14px; letter-spacing: 0; fill: var(--gold-soft); text-transform: none; }
.ab-draw2 .lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.ab-draw2 .lbl-m { fill: var(--on-navy-3); }
.ab-draw2 .lbl-c { fill: var(--navy); }
/* the build, when it is reached */
.ab-build.is-armed .post { transform: scaleY(.05); }
.ab-build.is-armed .lintel-g { transform: translateY(-70px); opacity: 0; }
.ab-build.is-armed .st { opacity: .25; }
.ab-build.is-armed .ab-side { opacity: 0; transform: translateY(14px); }
.ab-build.is-in .post { transform: none; transition: transform 800ms var(--ease-stone); }
.ab-build.is-in .post.p2 { transition-delay: 160ms; }
.ab-build.is-in .lintel-g { animation: abFall2 1000ms 520ms both; }
@keyframes abFall2 { 0% { transform: translateY(-70px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .85, .35); } 58% { transform: translateY(5px); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 78% { transform: translateY(-1px); } 100% { transform: none; opacity: 1; } }
.ab-build.is-in .st { opacity: 1; transition: opacity 400ms; transition-delay: calc(1500ms + var(--s) * 380ms); }
.ab-build.is-in .st circle { animation: abLight 600ms both; animation-delay: calc(1500ms + var(--s) * 380ms); }
@keyframes abLight { 0% { fill: var(--navy); } 50% { fill: var(--cream); } 100% { fill: var(--navy); } }
.ab-build.is-in .ab-side { opacity: 1; transform: none; transition: opacity 600ms 300ms, transform 700ms var(--ease-stone) 300ms; }

/* five refusals: they answer the cursor */
.ab-never { border-radius: 4px; }
.ab-nlist li { transition: transform 260ms var(--ease-quick), background-color 260ms, box-shadow 260ms; border-radius: 4px; }
.ab-nlist li:hover { transform: translateY(-5px); background-color: rgba(250,248,243,.08); box-shadow: inset 0 0 0 1px rgba(212,169,67,.45), 0 24px 40px -26px rgba(0,0,0,.7); }
.ab-nlist li .ab-stamp { transition: transform 320ms cubic-bezier(.3, 1.6, .6, 1), background-color 260ms, color 260ms; }
.ab-nlist li:hover .ab-stamp { transform: rotate(-6deg) scale(1.12); background-color: var(--gold-soft); color: var(--navy); }

/* the two doors: half the page each, edge to edge */
.ab-doors2 { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-half { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(380px, 38vw, 560px); text-decoration: none; color: var(--cream); background: var(--navy); }
.ab-half .ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 50%; transition: transform 900ms var(--ease-stone); }
.ab-half::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,22,40,.96) 0%, rgba(10,22,40,.84) 46%, rgba(10,22,40,.2) 82%); transition: background-color 400ms; }
.ab-half:hover .ph { transform: scale(1.05); }
.ab-half .in { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 4vw, 64px); max-width: 560px; }
.ab-half .k { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.ab-half b { font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; }
.ab-half .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; align-self: flex-start; padding: 13px 22px; border-radius: 999px; background: var(--gold-soft); color: var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: background-color 200ms; }
.ab-half .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 220ms; }
.ab-half:hover .go { background: var(--gold-hi); }
.ab-half:hover .go svg { transform: translateX(4px); }
.ab-half.is-trade .go { background: var(--cream); }
.ab-half.is-trade:hover .go { background: #fff; }
.ab-half:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: -6px; }
.ab-half + .ab-half { box-shadow: inset 1px 0 0 rgba(250,248,243,.12); }
.ab-wrong { margin: 26px 0 0; }

@media (max-width: 1100px) {
  .ab-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-draw2 { grid-column: 1 / -1; order: -1; }
  .ab-side.is-r { text-align: left; justify-items: start; }
}
@media (max-width: 680px) {
  .ab-stage { grid-template-columns: minmax(0, 1fr); }
  .ab-doors2 { grid-template-columns: minmax(0, 1fr); }
  .ab-half { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-build *, .ab-nlist li, .ab-half .ph { animation: none !important; transition: none !important; }
}
/* on a phone the lintel is too small to letter: the four steps are read under it instead */
.ab-steps-m { display: none; }
@media (max-width: 680px) {
  .ab-draw2 .st text:not(.d) { display: none; }
  .ab-steps-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: st; }
  .ab-steps-m li { counter-increment: st; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
  .ab-steps-m li::before { content: counter(st); width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--navy); font-family: var(--serif-display); font-size: 13px; }
}

/* ══ ABOUT, THIRD PASS: VARIETY ═══════════════════════════════ 2 Oct 2026 ══
   Sir: "it just lacks creativity ... clustered and compressed in certain
   places ... the six claims, it's just the same type of card repeated six
   times. There should be a variety in design and layout."
   So no two parts of the page share a composition any more:
     the mark      a navy band, drawn and built (unchanged)
     six claims    a mixed grid; each claim drawn as the thing it is about
     five nevers   a stamped register: rows, not cards, beside a held heading
     where we are  a road with three stops; each state drawn in its own form
     the doors     two photographs, half the page each (unchanged)
   And more air between the parts: the sections open further apart. */
.ab .co-sec { padding-top: clamp(72px, 9vw, 136px); }
.ab .co-head { margin-bottom: clamp(32px, 3.6vw, 52px); }

/* ── six claims ─────────────────────────────────────────────────────── */
.ab-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ab-b { position: relative; display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 2.6vw, 38px); border-radius: 4px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--lift); overflow: hidden; transition: transform 260ms var(--ease-quick), box-shadow 260ms; }
.ab-b:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), var(--lift-hi); }
.ab-b .ab-receipt { margin-top: auto; border-radius: 4px; }
.ab-b-tx { display: grid; gap: 10px; max-width: 46ch; }
.ab-b .n { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.ab-b h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(23px, 2vw, 29px); line-height: 1.14; color: var(--navy); text-wrap: balance; }
.ab-b p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: var(--muted-2); }

.ab-b-reg    { grid-column: 1 / span 5; background: var(--cream-2); }
.ab-b-flow   { grid-column: 6 / span 7; }
.ab-b-fee    { grid-column: 1 / -1; }
.ab-b-seal   { grid-column: 1 / span 7; }
.ab-b-trail  { grid-column: 8 / span 5; }
.ab-b-mirror { grid-column: 1 / -1; background: var(--cream); }
/* the two full-width claims are laid out across, not down */
.ab-b-fee { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "big tx try" "big sp try" "big rc try"; column-gap: clamp(28px, 4vw, 64px); row-gap: 14px; align-items: start; }
.ab-b-fee .ab-b-tx { grid-area: tx; }
.ab-b-fee .ab-fee-big { display: contents; }
.ab-b-fee .ab-fee-big b { grid-area: big; align-self: center; }
.ab-b-fee .ab-fee-big span { grid-area: sp; }
.ab-b-fee .ab-fee-try { grid-area: try; align-self: center; }
.ab-b-fee .ab-receipt { grid-area: rc; align-self: end; margin-top: 8px; }
.ab-b-mirror { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "tx scr" "rc scr"; column-gap: clamp(28px, 4vw, 64px); row-gap: 20px; }
.ab-b-mirror .ab-b-tx { grid-area: tx; }
.ab-b-mirror .ab-mirror { grid-area: scr; align-self: center; }
.ab-b-mirror .ab-receipt { grid-area: rc; align-self: end; }

/* 01 the register entry, on paper */
.ab-slip { position: relative; padding: 0 0 6px; border-radius: 2px; background: var(--paper); rotate: -.8deg; transition: rotate 320ms var(--ease-stone);
  box-shadow: 0 1px 1px rgba(10,22,40,.16), 0 18px 30px -18px rgba(10,22,40,.45); }
.ab-b-reg:hover .ab-slip { rotate: 0deg; }
.ab-slip .h:is(*, #ab-slip-h) { margin: 0; padding: 10px 16px; background: var(--navy); color: var(--cream); font: 600 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }  /* rp200: it won by !important; by count now (Mason: never !important) */
.ab-slip dl { margin: 0; padding: 4px 16px 0; }
.ab-slip dl div { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.ab-slip dl div:last-child { border-bottom: 0; }
.ab-slip dt { flex: none; font: 500 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ab-slip dd { margin: 0 0 0 auto; text-align: right; font-family: var(--serif); font-size: 15px; color: var(--navy); }
.ab-slip dd.mono { font-family: var(--serif-display); font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* 02 the path the money takes; Hyyryn stands beside it */
.ab-b-flow { background: var(--navy); color: var(--on-navy); box-shadow: var(--lift-hi); }
.ab-b-flow::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 90% at 100% 0%, rgba(212,169,67,.16), transparent 62%); }
.ab-b-flow > * { position: relative; }
.ab-b-flow:hover { box-shadow: var(--lift-hi), 0 0 0 1px rgba(212,169,67,.4); }
.ab-b-flow .n { color: var(--gold-soft); }
.ab-b-flow h3 { color: var(--cream); }
.ab-b-flow p { color: var(--on-navy-2); }
.ab-flow { display: grid; gap: 18px; }
.ab-flow-hy { justify-self: center; display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border: 1.5px dashed rgba(250,248,243,.32); border-radius: 4px; }
.ab-flow-hy b { font: 400 18px/1.1 var(--serif-display); color: var(--cream); }
.ab-flow-hy small { font: 500 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.ab-flow-row { display: flex; align-items: center; gap: 0; }
.ab-flow .node { flex: none; display: grid; justify-items: center; gap: 3px; min-width: 104px; padding: 12px 10px; border-radius: 4px; background: rgba(250,248,243,.06); box-shadow: inset 0 0 0 1px var(--on-navy-line); }
.ab-flow .node i { font: 400 16px/1.2 var(--serif); font-style: normal; color: var(--cream); }
.ab-flow .node small { font: 500 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.ab-flow .node.is-vault { background: var(--gold-soft); box-shadow: 0 10px 22px -10px rgba(212,169,67,.55); }
.ab-flow .node.is-vault i { color: var(--navy); font-weight: 700; }
.ab-flow .node.is-vault small { color: #3A2A0E; }
.ab-flow .pipe { position: relative; flex: 1; height: 2px; min-width: 24px; background: repeating-linear-gradient(90deg, rgba(250,248,243,.42) 0 6px, transparent 6px 11px); }
.ab-flow .coin { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(221,182,90,.22); }
.ab-bento.is-in .ab-flow .coin, .ab-b-flow:hover .coin { animation: abCoin 1600ms var(--ease-quick) 2 both; }
.ab-bento.is-in .ab-flow .pipe + .node + .pipe .coin, .ab-b-flow:hover .pipe + .node + .pipe .coin { animation-delay: 800ms; }
@keyframes abCoin { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ab-receipt.is-dark { background: rgba(250,248,243,.07); box-shadow: inset 0 0 0 1px rgba(250,248,243,.18); color: #8FD3BE; }
.ab-receipt.is-dark span:last-child { color: var(--cream); }

/* 03 the fee you can try */
.ab-b-fee { background: linear-gradient(180deg, #FBF3DF 0%, var(--paper) 70%); box-shadow: inset 0 0 0 1px rgba(131,99,44,.22), var(--lift); }
.ab-fee-big { display: grid; gap: 10px; }
.ab-fee-big b { font: 400 clamp(104px, 10vw, 156px)/.82 var(--serif-display); color: var(--navy); letter-spacing: -.03em; }
.ab-fee-big span { font-family: var(--serif); font-size: 15.5px !important; line-height: 1.55; color: var(--ink) !important; max-width: 30ch; }
.ab-fee-try { display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(131,99,44,.2); }
.ab-fee-try label { font: 600 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.ab-fee-try input { width: 100%; margin: 4px 0; accent-color: var(--navy); cursor: pointer; }
.ab-fee-try .out { font-family: var(--serif); font-size: 15px !important; line-height: 1.55; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.ab-fee-try .out b { color: var(--navy); }

/* 04 sealed photographs */
.ab-b-seal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 3vw, 44px); row-gap: 20px; }
.ab-b-seal .ab-b-tx { grid-column: 1; grid-row: 1; }
.ab-b-seal .ab-receipt { grid-column: 1; grid-row: 3; }
.ab-photos { grid-column: 2; grid-row: 1 / -1; align-self: center; position: relative; min-height: 270px; }
.ab-photos .ph { position: absolute; top: 8px; width: 46%; aspect-ratio: 4 / 5; max-width: 100%; background-size: cover; background-position: 50% 50%; background-color: var(--cream-3);
  border: 7px solid #fff; border-bottom-width: 26px; box-shadow: 0 1px 1px rgba(10,22,40,.18), 0 16px 26px -14px rgba(10,22,40,.5); rotate: var(--r); transition: rotate 380ms var(--ease-stone), translate 380ms var(--ease-stone); }
.ab-photos .ph:nth-child(1) { left: 0; z-index: 1; }
.ab-photos .ph:nth-child(2) { left: 27%; top: 0; z-index: 2; }
.ab-photos .ph:nth-child(3) { left: 54%; top: 14px; z-index: 3; }
.ab-photos .ph i { position: absolute; left: 0; right: 0; bottom: -21px; text-align: center; font: 500 9.5px/1.2 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.ab-photos .ph:nth-child(-n+2) i { text-align: left; padding-left: 4px; }
.ab-b-seal:hover .ph { rotate: 0deg; }
.ab-b-seal:hover .ph:nth-child(1) { translate: -6px 0; } .ab-b-seal:hover .ph:nth-child(3) { translate: 6px 0; }
.ab-photos .seal { position: absolute; right: -2%; top: -18px; z-index: 4; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px;
  background: var(--green); color: var(--cream); rotate: -12deg; box-shadow: inset 0 0 0 4px var(--green), inset 0 0 0 5.5px rgba(250,248,243,.55), 0 10px 20px -8px rgba(15,90,79,.7); }
.ab-photos .seal b { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.ab-photos .seal small { font: 400 11px/1.2 var(--serif); font-style: italic; color: var(--cream); }
.ab-bento.is-in .ab-photos .seal { animation: abSeal 520ms cubic-bezier(.3, 1.5, .6, 1) 900ms both; }
@keyframes abSeal { 0% { scale: 1.35; } 60% { scale: .96; } 100% { scale: 1; } }

/* 05 one message, seen from both sides */
.ab-mirror { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.ab-mirror .scr { display: grid; gap: 8px; padding: 14px 12px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 5px var(--navy), 0 14px 22px -14px rgba(10,22,40,.5); padding: 18px 16px 14px; }
.ab-mirror .who { font: 600 9.5px/1.3 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; }
.ab-mirror .b { padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--cream-2); font-size: 13.5px !important; line-height: 1.5 !important; color: var(--ink) !important; }
.ab-mirror .t { font: 500 10px/1.2 var(--sans) !important; letter-spacing: .06em; color: var(--green) !important; font-variant-numeric: tabular-nums; }
.ab-mirror .eq { font: 400 34px/1 var(--serif-display); color: var(--gold); }
.ab-b-mirror:hover .scr:first-child { translate: 0 -4px; } .ab-b-mirror:hover .scr:last-child { translate: 0 4px; }
.ab-mirror .scr { transition: translate 320ms var(--ease-stone); }

/* 06 a dated trail */
.ab-trail { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 16px; }
.ab-trail::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.ab-trail li { position: relative; display: grid; gap: 2px; }
.ab-trail li::before { content: ''; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--navy); }
.ab-trail li:last-child::before { background: var(--green); box-shadow: inset 0 0 0 2.5px var(--green); }
.ab-trail b { font: 400 15px/1.35 var(--serif); color: var(--navy); }
.ab-trail span { font: 500 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-bento.is-in .ab-trail li { animation: abEntry 500ms var(--ease-stone) both; animation-delay: calc(700ms + var(--k, 0) * 160ms); }
.ab-trail li:nth-child(2) { --k: 1; } .ab-trail li:nth-child(3) { --k: 2; } .ab-trail li:nth-child(4) { --k: 3; }
@keyframes abEntry { 0% { opacity: 0; translate: -8px 0; } 100% { opacity: 1; translate: 0 0; } }

/* building the grid when it is reached */
.ab-bento.is-armed .ab-b { opacity: 0; transform: translateY(20px); }
.ab-bento.is-in .ab-b { transition: opacity 500ms, transform 650ms var(--ease-stone), box-shadow 260ms; transition-delay: calc(var(--i) * 80ms); }
.ab-bento.is-in .ab-b:hover { transition-delay: 0s; }

/* ── five nevers: a stamped register ───────────────────────────────── */
.ab .ab-never { overflow: clip; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; border-radius: 4px; padding: clamp(40px, 5.5vw, 84px) clamp(24px, 4.5vw, 72px); }
.ab-never-h { position: sticky; top: calc(var(--bar, 64px) + 32px); }
.ab-never-p { margin: 16px 0 0; max-width: 34ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--on-navy-2); }
.ab .ab-nlist { display: block; margin: 0; border-top: 1px solid var(--on-navy-line); }
.ab .ab-nlist li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 32px; align-items: start; padding: 26px 18px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--on-navy-line); }
.ab .ab-nlist li .ab-stamp { grid-column: 1; margin: 0 0 4px; justify-self: start; }
.ab .ab-nlist li h3 { grid-column: 1; font-family: var(--serif-display); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.18; transition: translate 260ms var(--ease-quick); }
.ab .ab-nlist li p { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.ab .ab-nlist li:hover { transform: none; background-color: rgba(250,248,243,.06); box-shadow: inset 3px 0 0 var(--gold-soft); }
.ab .ab-nlist li:hover h3 { translate: 6px 0; }
.ab-nlist.is-armed li { opacity: 0; translate: 0 14px; }
.ab-nlist.is-in li { transition: opacity 500ms, translate 600ms var(--ease-stone), background-color 260ms, box-shadow 260ms; }
.ab-nlist.is-in li:nth-child(2) { transition-delay: 80ms; } .ab-nlist.is-in li:nth-child(3) { transition-delay: 160ms; } .ab-nlist.is-in li:nth-child(4) { transition-delay: 240ms; } .ab-nlist.is-in li:nth-child(5) { transition-delay: 320ms; }
.ab-nlist.is-in li:hover { transition-delay: 0s; }

/* ── where we are: a road with three stops ─────────────────────────── */
.ab-where-p { margin: -18px 0 0; max-width: 64ch; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--muted-2); }
.ab-road { position: relative; margin-top: 40px; padding-top: 92px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ab-road-line { position: absolute; left: 0; right: 0; top: 49px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.ab-road-line .done { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, var(--green) 0 80%, var(--gold-soft)); }
.ab-road.is-armed .ab-road-line .done { width: 0; }
.ab-road.is-in .ab-road-line .done { transition: width 1200ms var(--ease-stone) 200ms; }
.ab-stop { --c: var(--green); position: relative; display: flex; flex-direction: column; gap: 12px; }
.ab-stop .dot { position: absolute; left: 0; top: -52px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 6px var(--cream); }
.ab-stop .when { position: absolute; left: 0; top: -92px; font: 600 10.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.ab-stop .pill { align-self: flex-start; display: inline-flex; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ab-stop h3 { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.ab-stop p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: var(--muted-2); }
.ab-stop .more { margin-top: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--c); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.ab-stop a.more:hover { border-bottom-color: var(--c); }
.ab-stop .more.is-quiet { border: 0; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 14px; }
/* each state drawn in its own form: built is solid, being built is taped off, explored is pencilled */
.ab-stop.is-live { padding: 26px 26px 24px; border-radius: 4px; background: #fff; box-shadow: inset 0 3px 0 var(--green), inset 0 0 0 1px var(--line), var(--lift); }
.ab-stop.is-live .dot { left: 0; animation: abPulse 1.8s ease-out 3; }
@keyframes abPulse { 0% { box-shadow: 0 0 0 6px var(--cream), 0 0 0 6px rgba(15,90,79,.45); } 100% { box-shadow: 0 0 0 6px var(--cream), 0 0 0 18px rgba(15,90,79,0); } }
.ab-stop.is-built { --c: var(--gold); padding: 30px 26px 24px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(131,99,44,.22); }
.ab-stop.is-built::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(135deg, var(--navy) 0 9px, var(--gold-soft) 9px 18px); }
.ab-stop.is-built .dot { overflow: visible; }
.ab-stop.is-explore { --c: #3A4F8C; padding: 26px 26px 24px; border-radius: 4px; border: 1.5px dashed rgba(58,79,140,.38); background: transparent; }
.ab-stop.is-explore .dot { background: var(--cream); box-shadow: 0 0 0 6px var(--cream), inset 0 0 0 2px var(--c); }
.ab-stop.is-live .dot, .ab-stop.is-built .dot, .ab-stop.is-explore .dot { left: 0; }
.ab-stop { transition: transform 260ms var(--ease-quick); }
.ab-stop:hover { transform: translateY(-3px); }
.ab-road.is-armed .ab-stop { opacity: 0; translate: 0 16px; }
.ab-road.is-in .ab-stop { transition: opacity 500ms, translate 600ms var(--ease-stone), transform 260ms; }
.ab-road.is-in .ab-stop:nth-of-type(2) { transition-delay: 400ms; } .ab-road.is-in .ab-stop:nth-of-type(3) { transition-delay: 800ms; }
.ab-road.is-in .ab-stop:hover { transition-delay: 0s; }
/* the size of it: one line under the road, with the mark */
.ab-size { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.ab-size svg { width: 46px; height: auto; fill: var(--navy); }
.ab-size p { margin: 0; max-width: 84ch; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--muted-2); }
.ab-size b { color: var(--navy); }
.ab-size a { color: var(--navy); text-underline-offset: 3px; white-space: nowrap; }

/* ── narrower ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ab-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .ab-b { grid-column: auto !important; grid-row: auto !important; }
  .ab-b-flow, .ab-b-seal, .ab-b-fee, .ab-b-mirror { grid-column: 1 / -1 !important; }
  .ab .ab-never { grid-template-columns: minmax(0, 1fr); }
  .ab-never-h { position: static; }
}
@media (max-width: 760px) {
  .ab-bento { grid-template-columns: minmax(0, 1fr); }
  .ab-b-seal { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ab-b-seal .ab-b-tx, .ab-b-seal .ab-receipt, .ab-photos { grid-column: 1; grid-row: auto; }
  .ab-b-fee, .ab-b-mirror { display: flex; }
  .ab-b-fee .ab-fee-big { display: grid; }
  .ab-b-fee .ab-receipt, .ab-b-mirror .ab-receipt { margin-top: auto; align-self: stretch; }
  .ab-b-fee > *, .ab-b-fee .ab-fee-big > *, .ab-b-mirror > * { grid-area: auto !important; }
  .ab-photos { min-height: 0; height: clamp(200px, 56vw, 260px); }
  .ab-flow .node { min-width: 0; padding: 10px 8px; }
  .ab-flow .node i { font-size: 14px; }
  .ab-flow .node small { font-size: 9px; letter-spacing: .1em; }
  .ab .ab-nlist li { grid-template-columns: minmax(0, 1fr); padding: 22px 6px; }
  .ab .ab-nlist li p { grid-column: 1; grid-row: auto; }
  .ab-road { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 40px; margin-top: 32px; gap: 52px; }
  .ab-road-line { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 14px); }
  .ab-road-line .done { width: 100% !important; height: 42%; bottom: auto; background: linear-gradient(180deg, var(--green) 0 80%, var(--gold-soft)); }
  .ab-stop .dot { left: -40px !important; top: 26px !important; }
  .ab-stop .when { position: static; order: -1; }
  .ab-size { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
  .ab-mirror { grid-template-columns: minmax(0, 1fr); }
  .ab-mirror .eq { justify-self: center; rotate: 90deg; line-height: .6; }
  .ab-flow-row { flex-wrap: nowrap; }
  .ab-flow .pipe { min-width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-b, .ab-slip, .ab-photos .ph, .ab-mirror .scr, .ab-stop, .ab-nlist li, .ab-nlist li h3, .ab-road-line .done { transition: none !important; }
  .ab-flow .coin, .ab-photos .seal, .ab-trail li, .ab-stop .dot { animation: none !important; }
}

/* ══ ABOUT USES THE WIDTH, AND THE GAPS GO ═══════════════════ 2 Oct 2026 (night) ══
   Sir: "use up all the margins, on the left and the right, as much as
   possible, just like the home page ... if that means expanding the
   containers". So every container on About runs to 1720px inside the page
   gutters (the homepage's own gutters) instead of 1320px.
   "There's a white gap right beneath that section [the hero] ... it just
   needs to go": the mark band now meets the hero.
   The two photographs "should blend into the footer ... a golden faint
   gradient line that divides the footer from the images, and remove that
   white border": the closing line moved above the doors, nothing stands
   between the doors and the footer, and a gold hairline fading out at both
   ends divides them. */
.ab { --wide: 1720px; }
.ab .co-in, .ab .ab-hero-in, .ab .ab-build-in { max-width: var(--wide); }
.ab .ab-never { margin-left: var(--gut-l); margin-right: var(--gut-r); }
.ab-build { margin-top: 0; }
.ab-h1 { max-width: 14ch; font-size: clamp(44px, 5.4vw, 80px); }
.ab-wrong.is-above { margin: clamp(56px, 6vw, 96px) auto 0; padding: 0 var(--gut-r) clamp(28px, 3vw, 44px) var(--gut-l); }
.ab-doors2 { margin-top: 0; position: relative; }
.ab-doors2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, rgba(212,169,67,0) 0%, rgba(212,169,67,.75) 30%, rgba(221,182,90,.9) 50%, rgba(212,169,67,.75) 70%, rgba(212,169,67,0) 100%); }
/* the photographs darken towards their foot so they run into the footer's navy */
.ab-half::before { background: linear-gradient(0deg, rgba(10,22,40,1) 0%, rgba(10,22,40,.9) 22%, rgba(10,22,40,.72) 52%, rgba(10,22,40,.18) 86%); }
.ab-half + .ab-half { box-shadow: none; }
.ab-half + .ab-half::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(212,169,67,0), rgba(212,169,67,.45) 60%, rgba(212,169,67,.7)); }
html:has(main.ab) footer.footer { margin-top: 0; border-top: 0; }
/* square, like the rest of Hyyryn (Sir, 2 Oct, night): every container on About. RETIRED rp183 (21 Oct 2026): the
   rest of Hyyryn is now a rounded card with an edge all round (Sir, 20 Oct, for the dashboards: "a clear edge all
   round"; the plans page, How it works and Payment protection since), so the reason for the rule has gone; About's
   cards take that grammar in hyyryn-about-card.css. Only the register's slip stays square: it is the evidence. */
.ab-slip { border-radius: 0; }
.ab-mirror .scr { box-shadow: inset 0 26px 0 var(--navy), inset 0 0 0 2px var(--navy), 0 14px 22px -14px rgba(10,22,40,.5); padding-top: 34px; }
.ab-mirror .who { margin-top: -30px !important; color: var(--cream) !important; }
.ab-mirror .scr { box-shadow: inset 0 0 0 2px var(--navy), 0 14px 22px -14px rgba(10,22,40,.5); padding-top: 0; }
.ab-mirror .who { display: block; margin: 0 -16px 4px !important; padding: 8px 16px; background: var(--navy); }
@media (max-width: 680px) { .ab-half + .ab-half::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(212,169,67,0), rgba(212,169,67,.6) 50%, rgba(212,169,67,0)); } }

/* ══ THE MARK, THIRD DRAWING: TWO CARDS, ONE RECORD, FOUR STEPS ══ 2 Oct 2026 (night) ══
   Sir: "hovering cards for the homeowner and the tradesperson ... differentiating
   with colours ... each card a golden outline ... the job steps need to be
   improved." The homeowner's card is light (cream, as their side of Hyyryn is),
   the tradesperson's is dark (night, as theirs is). Both are framed in gold
   and lift when pointed at. The rows of all three columns share one grid
   (subgrid), so a step and what each person has at it sit on one line. */
.ab-frame { margin-top: clamp(36px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  grid-template-rows: auto auto repeat(4, auto) auto; column-gap: clamp(18px, 2vw, 32px); row-gap: 0; }
.ab-lintel2 { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(-1 * clamp(10px, 1.4vw, 22px)) 16px; padding: 22px 30px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 18px; text-align: center;
  background: linear-gradient(180deg, #DDB65A, var(--gold-soft) 60%, #C99A35); color: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 22px 34px -20px rgba(0,0,0,.7); }
.ab-lintel2 span { font-family: var(--serif-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.ab-lintel2 small { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }

/* the two cards */
.ab-post { --bg: #F6F1E4; --ink2: var(--navy); --mut: #3C4556; --rule: rgba(10,22,40,.12); --hi: #FFF8E3; --k: var(--gold-ink);
  grid-row: 2 / span 6; display: grid; grid-template-rows: subgrid; position: relative; background: var(--bg); color: var(--ink2);
  box-shadow: inset 0 0 0 1px var(--gold-soft), inset 0 0 0 6px var(--bg), inset 0 0 0 7px rgba(212,169,67,.45), 0 24px 44px -26px rgba(0,0,0,.75);
  transition: transform 320ms var(--ease-stone), box-shadow 320ms ease; }
.ab-post.is-home { grid-column: 1; }
.ab-post.is-trade { grid-column: 3; --bg: #15243B; --ink2: var(--cream); --mut: rgba(250,248,243,.78); --rule: rgba(250,248,243,.12); --hi: #1E3352; --k: var(--gold-soft); }
.ab-post:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--gold-hi), inset 0 0 0 6px var(--bg), inset 0 0 0 7px rgba(221,182,90,.8), 0 36px 60px -28px rgba(0,0,0,.85); }
.ab-cap { padding: 28px 30px 22px; }
.ab-cap .k { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--k); }
.ab-cap h3 { margin: 6px 0 8px; font-family: var(--serif-display); font-weight: 400; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.05; color: var(--ink2); }
.ab-cap p:not(.k) { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--mut); }
.ab-post.is-trade .ab-cap, .ab-post.is-trade .ab-c, .ab-post.is-trade .ab-foot { text-align: right; }
.ab-cells { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.ab-c { display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 0 7px; padding: 16px 23px; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink2);
  transition: background-color 220ms ease, box-shadow 220ms ease; }
.ab-c-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-foot { grid-row: 6; margin: 0 7px 7px; padding: 16px 23px 18px; border-top: 2px solid var(--rule); font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--mut); }
.ab-foot b { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--k); }
@media (max-width: 760px) { .ab-foot b { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */

/* the four steps, on one gold line */
.ab-steps { grid-column: 2; grid-row: 2 / span 6; display: grid; grid-template-rows: subgrid; position: relative; }
.ab-steps-h { grid-row: 1; align-self: end; justify-self: center; margin: 0 0 14px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--on-navy-3); }
.ab-steps ol { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; position: relative; }
.ab-steps ol::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -1px 0; background: linear-gradient(180deg, rgba(212,169,67,.15), var(--gold-soft) 20%, var(--gold-soft) 80%, rgba(212,169,67,.15)); }
.ab-st2 { position: relative; z-index: 1; align-self: center; display: grid; justify-items: center; gap: 4px; margin: 8px 0; padding: 14px 14px 12px; text-align: center; cursor: default; outline: none;
  background: #101D33; box-shadow: inset 0 0 0 1px rgba(212,169,67,.4); transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.ab-st2 i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; margin-top: -31px; background: var(--navy); box-shadow: inset 0 0 0 1.5px var(--gold-soft); font-family: var(--serif-display); font-size: 18px; color: var(--gold-soft); transition: background-color 220ms ease, color 220ms ease; }
.ab-st2 b { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.ab-st2 small { font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--on-navy-2); }
.ab-st2.is-end i { background: var(--gold-soft); color: var(--navy); }
.ab-st2:hover, .ab-st2:focus-visible { background: #172947; box-shadow: inset 0 0 0 1px var(--gold-soft), 0 12px 24px -14px rgba(0,0,0,.8); transform: scale(1.03); }
.ab-st2:hover i, .ab-st2:focus-visible i { background: var(--gold-soft); color: var(--navy); }
/* pointing at a step lights that step on both cards */
.ab-frame:has(.ab-st2[data-r="0"]:is(:hover, :focus-visible)) .ab-c[data-r="0"],
.ab-frame:has(.ab-st2[data-r="1"]:is(:hover, :focus-visible)) .ab-c[data-r="1"],
.ab-frame:has(.ab-st2[data-r="2"]:is(:hover, :focus-visible)) .ab-c[data-r="2"],
.ab-frame:has(.ab-st2[data-r="3"]:is(:hover, :focus-visible)) .ab-c[data-r="3"] { background: var(--hi); }   /* rp183: the tint only, no bar down the side */
.ab-post.is-trade .ab-c { box-shadow: none; }
.ab-frame:has(.ab-st2[data-r="0"]:is(:hover, :focus-visible)) .is-trade .ab-c[data-r="0"],
.ab-frame:has(.ab-st2[data-r="1"]:is(:hover, :focus-visible)) .is-trade .ab-c[data-r="1"],
.ab-frame:has(.ab-st2[data-r="2"]:is(:hover, :focus-visible)) .is-trade .ab-c[data-r="2"],
.ab-frame:has(.ab-st2[data-r="3"]:is(:hover, :focus-visible)) .is-trade .ab-c[data-r="3"] { box-shadow: none; }

/* built when reached: the two cards rise, the record is laid across them, then the steps light one by one */
.ab-build.is-armed .ab-post { opacity: 0; transform: translateY(40px); }
.ab-build.is-armed .ab-lintel2 { opacity: 0; transform: translateY(-60px); }
.ab-build.is-armed .ab-st2 { opacity: 0; transform: translateY(10px); }
.ab-build.is-in .ab-post { transition: opacity 600ms, transform 800ms var(--ease-stone), box-shadow 320ms ease; }
.ab-build.is-in .ab-post.is-trade { transition-delay: 140ms, 140ms, 0s; }
.ab-build.is-in .ab-lintel2 { animation: abFall2 1000ms 520ms both; }
.ab-build.is-in .ab-st2 { transition: opacity 450ms, transform 500ms var(--ease-stone), background-color 220ms, box-shadow 220ms; }
.ab-build.is-in .ab-st2[data-r="0"] { transition-delay: 1400ms, 1400ms, 0s, 0s; } .ab-build.is-in .ab-st2[data-r="1"] { transition-delay: 1650ms, 1650ms, 0s, 0s; }
.ab-build.is-in .ab-st2[data-r="2"] { transition-delay: 1900ms, 1900ms, 0s, 0s; } .ab-build.is-in .ab-st2[data-r="3"] { transition-delay: 2150ms, 2150ms, 0s, 0s; }
.ab-build.is-in .ab-st2 i { animation: abLight2 700ms both; }
.ab-build.is-in .ab-st2[data-r="0"] i { animation-delay: 1500ms; } .ab-build.is-in .ab-st2[data-r="1"] i { animation-delay: 1750ms; }
.ab-build.is-in .ab-st2[data-r="2"] i { animation-delay: 2000ms; } .ab-build.is-in .ab-st2[data-r="3"] i { animation-delay: 2250ms; }
@keyframes abLight2 { 0% { background: var(--navy); } 45% { background: var(--gold-soft); color: var(--navy); } 100% { } }

@media (max-width: 900px) {
  .ab-frame { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ab-lintel2 { margin: 0 0 18px; }
  .ab-post, .ab-steps, .ab-cells, .ab-steps ol { grid-row: auto; display: block; }
  .ab-post.is-home, .ab-post.is-trade, .ab-steps { grid-column: 1; }
  .ab-steps { margin: 0 0 22px; }
  .ab-steps-h { display: block; text-align: left; margin: 0 0 12px; }
  .ab-steps ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding-top: 16px; }
  .ab-steps ol::before { display: none; }
  .ab-st2 { margin: 0; }
  .ab-post.is-trade { margin-top: 18px; }
  .ab-post.is-trade .ab-cap, .ab-post.is-trade .ab-c, .ab-post.is-trade .ab-foot { text-align: left; }
  .ab-c-k { position: static; width: auto; height: auto; clip: auto; white-space: normal; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--k); }
@media (max-width: 760px) { .ab-c-k { font-size: 10.5px; } }  /* rp200 phone floor, was 10px */
  .ab-post:hover { transform: none; }
}
@media (max-width: 480px) {
  .ab-cap { padding: 22px 20px 18px; } .ab-c { padding: 14px 16px; } .ab-foot { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .ab-frame *, .ab-post { transition: none !important; animation: none !important; } }

/* ══ FIVE NEVERS: THE MARK, STAMPED ═══════════════════════════ 2 Oct 2026 (night) ══
   Sir: the empty space under the heading wants "a Hyyryn arch logo with a
   striped mark ... to signify never", and the section "feels a little bit
   bland". The mark sits on a hatched square with NEVER stamped across it,
   and the stamp lands when the section is reached. Pointing at a row draws
   a gold line through what it refuses, and its own stamp turns. */
.ab-nvmark { position: relative; margin-top: clamp(32px, 4vw, 56px); width: min(100%, 300px); aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, rgba(212,169,67,.10) 0 2px, transparent 2px 14px); box-shadow: inset 0 0 0 1px rgba(212,169,67,.35); }
.ab-nvmark svg { width: 62%; height: auto; fill: none; stroke: var(--gold-soft); stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
.ab-nvstamp { position: absolute; left: 50%; top: 52%; translate: -50% -50%; rotate: -14deg; padding: 10px 22px 10px 28px; background: var(--navy); border: 3px solid var(--gold-soft);
  box-shadow: 0 0 0 4px var(--navy), 0 0 0 5px rgba(212,169,67,.55), 0 18px 30px -12px rgba(0,0,0,.8);
  font-family: var(--sans); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; }
.ab-nlist.is-in ~ * .ab-nvstamp, .ab-never:has(.ab-nlist.is-in) .ab-nvstamp { animation: abStamp 520ms cubic-bezier(.3, 1.5, .6, 1) 300ms both; }
@keyframes abStamp { 0% { scale: 1.9; opacity: 0; } 60% { opacity: 1; } 100% { scale: 1; opacity: 1; } }
.ab-never:has(.ab-nlist.is-armed) .ab-nvstamp { opacity: 0; }
.ab-stamp, .ab .ab-nlist li .ab-stamp { border-radius: 0 !important; }
/* a gold line drawn through what the row refuses */
.ab .ab-nlist li h3 { background: linear-gradient(var(--gold-soft), var(--gold-soft)) 0 58% / 0% 2px no-repeat; transition: background-size 420ms var(--ease-stone), translate 260ms var(--ease-quick); }
.ab .ab-nlist li:hover h3 { background-size: 100% 2px; }
@media (max-width: 1100px) { .ab-nvmark { width: 200px; margin-top: 24px; } }
@media (max-width: 680px) { .ab-nvmark { width: 160px; } .ab-nvstamp { font-size: 18px; padding: 8px 14px 8px 18px; } }
@media (prefers-reduced-motion: reduce) { .ab-nvstamp { animation: none !important; opacity: 1 !important; } .ab .ab-nlist li h3 { transition: none; } }
.ab-post p.ab-foot { font-family: var(--sans); font-size: 13px; color: var(--mut); }
.ab-post p.ab-foot b { font-family: var(--sans); font-weight: 600; }

/* ══ THE RECORD, POLISHED ═════════════════════════════════ 2 Oct 2026 (night) ══
   Sir: the homeowner's cream card is bland and too much of a contrast
   against the navy; make it navy too, a different shade, and if it carries
   gold, a different gold so it does not overpower the gold already in the
   section. When a step is pointed at, the two rows it lights should lift,
   embossed. And the steps sat compressed in the middle, with space above
   the first and below the fourth: fill the column.
   So the homeowner's post is a lighter, bluer navy trimmed in champagne; the
   tradesperson's stays night navy trimmed in gold. The step column now has a
   head in the cards' head row (what to do: read across), steps that fill
   their rows, and an end in the foot row where the gold line closes on the
   mark. */
.ab-post.is-home { --bg: #22395C; --ink2: var(--cream); --mut: rgba(250,248,243,.82); --rule: rgba(250,248,243,.14); --hi: #2E4B76; --k: #E6CF98;
  box-shadow: inset 0 0 0 1px rgba(230,207,152,.75), inset 0 0 0 6px var(--bg), inset 0 0 0 7px rgba(230,207,152,.35), 0 24px 44px -26px rgba(0,0,0,.75); }
.ab-post.is-home:hover { box-shadow: inset 0 0 0 1px #F0DDB0, inset 0 0 0 6px var(--bg), inset 0 0 0 7px rgba(230,207,152,.7), 0 36px 60px -28px rgba(0,0,0,.85); }
.ab-post.is-home .ab-cap .k, .ab-post.is-home .ab-foot b { color: #E6CF98; }

/* the lit rows lift, embossed: a raised face, a lit top edge, a shadow under. rp183 (21 Oct 2026): and no longer a
   gold bar down the side (a state is a tint, a ring or a dot, Mason 62); the face takes a 10px corner */
.ab-c { position: relative; transition: background-color 220ms ease, box-shadow 220ms ease, transform 260ms var(--ease-stone); }
.ab-frame:has(.ab-st2[data-r="0"]:is(:hover, :focus-visible)) .ab-post .ab-c[data-r="0"],
.ab-frame:has(.ab-st2[data-r="1"]:is(:hover, :focus-visible)) .ab-post .ab-c[data-r="1"],
.ab-frame:has(.ab-st2[data-r="2"]:is(:hover, :focus-visible)) .ab-post .ab-c[data-r="2"],
.ab-frame:has(.ab-st2[data-r="3"]:is(:hover, :focus-visible)) .ab-post .ab-c[data-r="3"] {
  z-index: 1; transform: translateY(-4px); background: var(--hi); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.35), 0 16px 26px -14px rgba(0,0,0,.8); }
.ab-frame:has(.ab-st2[data-r="0"]:is(:hover, :focus-visible)) .ab-post.is-trade .ab-c[data-r="0"],
.ab-frame:has(.ab-st2[data-r="1"]:is(:hover, :focus-visible)) .ab-post.is-trade .ab-c[data-r="1"],
.ab-frame:has(.ab-st2[data-r="2"]:is(:hover, :focus-visible)) .ab-post.is-trade .ab-c[data-r="2"],
.ab-frame:has(.ab-st2[data-r="3"]:is(:hover, :focus-visible)) .ab-post.is-trade .ab-c[data-r="3"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 16px 26px -14px rgba(0,0,0,.85); }

/* the step column fills its rows */
.ab-steps-h { grid-row: 1; align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; padding: 0 6px 22px; text-align: center;
  font: inherit; letter-spacing: 0; text-transform: none; }
.ab-steps-h .k { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); }
.ab-steps-h .t { margin: 0; max-width: 24ch; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--on-navy-2); }
.ab-steps-h::before { content: ''; width: 2px; flex: 1 1 auto; min-height: 24px; max-height: 90px; background: linear-gradient(180deg, rgba(212,169,67,0), rgba(212,169,67,.45)); order: -1; }
.ab-st2 { align-self: stretch; align-content: center; margin: 7px 0; }
.ab-steps-end { grid-row: 6; align-self: stretch; margin: 0; padding: 18px 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; position: relative; }
.ab-steps-end::before { content: ''; width: 2px; height: 18px; background: var(--gold-soft); margin-top: -18px; }
.ab-steps-end svg { width: 34px; height: auto; fill: var(--gold-soft); }
.ab-steps-end span { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--on-navy-2); }
@media (max-width: 900px) {
  .ab-steps-h { align-items: flex-start; text-align: left; padding: 22px 0 12px; }
  .ab-steps-h::before, .ab-steps-h .t { display: none; }
  .ab-steps-end { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ab-c { transition: none; } }

/* THE RECORD, AS A SENTENCE (2 Oct, late). Sir: the gold bar took too much
   room and drew too much attention; make it a simple sentence. It sits in
   the bar's row, across all three columns, between two hairlines. */
.ab-lintel2 { display: none; }
.ab-recline { grid-column: 1 / -1; grid-row: 1; margin: 0 0 22px; display: flex; align-items: center; gap: 20px; }
.ab-recline::before, .ab-recline::after { content: ''; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(212,169,67,0), rgba(212,169,67,.55)); }
.ab-recline::after { background: linear-gradient(90deg, rgba(212,169,67,.55), rgba(212,169,67,0)); }
.ab-recline span { flex: 0 1 auto; max-width: 64ch; text-align: center; font-family: var(--serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--on-navy-2); }
.ab-build.is-armed .ab-recline { opacity: 0; }
.ab-build.is-in .ab-recline { transition: opacity 700ms ease 300ms; }
@media (max-width: 900px) { .ab-recline::before, .ab-recline::after { display: none; } .ab-recline span { text-align: left; } }

/* ══ rp116 (13 Oct 2026): the bar page's margins at every width (Mason 59.1) ══
   --wide (1720px) centred the bands once the window passed about 1800px, so at 1920 every band
   started 96px in while the bar's mark stood at 40. The bands now run gutter to gutter at every
   width; only words keep a measure, in ch. */
.ab .co-in, .ab .ab-hero-in, .ab .ab-build-in { max-width: none; }


/* ── rp200, the phone floor (22 Oct 2026) ─────────────────────────────────────────────────────────────────────────
   On a phone no words under 12px, or 10.5px in capitals. These sizes are set in the font shorthand with a variable,
   which the pass that wrote the floor beside each rule could not read, so they are here, named. */
@media (max-width: 760px) {
  .ab-nfig span, .ab-cells .ab-c-k, .ab-post .ab-foot b, .ab-slip dt, .ab-receipt .k, .ab-fee-try label, .ab-nlist .ab-stamp, .ab-road .pill { font-size: 10.5px; }
  .ab-slip .h:is(*, #ab-slip-h) { font-size: 10.5px; }
  .ab-b .n { font-size: 12px; }
}