/*
 * site.css — all authored styles for the Purser marketing site (Direction A,
 * "bright blocks on a white desk, and every block is a receipt", 2026-09-08).
 * Loads after tokens-doctrine.css and tokens-brand.css; every color is
 * consumed via var(--role-*), every motion via doctrine duration/easing
 * tokens. Shadows are hard offsets in ink: a block sits on a desk, it does
 * not float. The receipt strip is the page's material and is fed by every
 * demo on the page.
 */

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { background: var(--role-ground); color: var(--role-ink); font-family: var(--font-body); font-weight: 450; font-size: var(--type-1); line-height: 1.55; font-variation-settings: 'wght' 450; overflow-x: clip; padding-bottom: 58px }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'wght' 600; letter-spacing: -0.02em; line-height: 1.02 }
.mono { font-family: var(--font-mono); font-size: var(--type--1); letter-spacing: .04em }
.label { font-family: var(--font-display); font-weight: 600; font-size: var(--type--2); letter-spacing: .12em; text-transform: uppercase; color: var(--role-muted) }
a { color: inherit }
img, video { max-width: 100%; height: auto; display: block }
section { position: relative }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, var(--space-7)) }
:focus-visible { outline: var(--focus-width) solid var(--role-focus); outline-offset: 2px; border-radius: 2px }
button { font: inherit; color: inherit }
.skip { position: absolute; left: -999px; top: 12px; z-index: var(--z-ghost); background: var(--role-ink); color: var(--role-deep-ink); padding: 10px 14px; border-radius: var(--radius-1); font-family: var(--font-display); font-weight: 600; text-decoration: none }
.skip:focus-visible { left: 12px }
.sr { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden }

@font-face { font-family: 'Fredoka'; src: url(assets/fonts/fredoka-var-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap }
@font-face { font-family: 'Inter V'; src: url(assets/fonts/inter-var.woff2) format('woff2'); font-weight: 100 900; font-display: swap }
@font-face { font-family: 'JetBrains Mono'; src: url(assets/fonts/jetbrains-mono.woff2) format('woff2'), url(assets/fonts/jetbrains-mono.ttf) format('truetype'); font-weight: 400; font-display: swap }

/* ---------- material: the isometric block grid (G4) ----------
 * Drawn once as an SVG tile in currentColor, laid at 6% over the ground. */
.grid-ground { position: relative }
.grid-ground::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; color: var(--role-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='37' viewBox='0 0 64 37'%3E%3Cpath d='M32 0 64 18.5 32 37 0 18.5Z M32 0v37 M0 18.5h64' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 64px 37px }
@keyframes gridslide { from { background-position: 0 0 } to { background-position: 64px 37px } }
.hero.grid-ground::before { animation: gridslide 12s var(--ease-linear) infinite }

/* ---------- block primitives ---------- */
.blk-shadow { box-shadow: 4px 4px 0 var(--role-ink) }
.cta { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); letter-spacing: .01em; text-decoration: none; text-align: center;
  background: var(--role-cta-ground); color: var(--role-cta-ink); border: 2px solid var(--role-ink); border-radius: var(--radius-1);
  padding: 12px 20px; min-height: 44px; box-shadow: 4px 4px 0 var(--role-ink); display: inline-block; text-wrap: nowrap; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-house), box-shadow var(--dur-2) var(--ease-house), background var(--dur-2) var(--ease-house) }
.cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--role-ink) }
.cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--role-ink) }
.cta.ghost { background: var(--role-surface); color: var(--role-ink) }
.cta.ghost:hover { background: var(--role-sky) }
.cta.stamp { position: relative }

/* ---------- header: block-tab strip ---------- */
header.top { position: sticky; top: 0; z-index: var(--z-nav); background: var(--role-clear); border-bottom: 2px solid var(--role-clear); transition: background var(--dur-2) var(--ease-house), border-color var(--dur-2) var(--ease-house), box-shadow var(--dur-2) var(--ease-house) }
header.top.scrolled, html:not(.js) header.top { background: var(--role-glass); backdrop-filter: blur(14px); border-bottom-color: var(--role-ink); box-shadow: 0 2px 7px var(--role-shadow-soft) }
header.top .wrap { display: flex; align-items: center; gap: var(--space-3); min-height: 64px }
.brand { font-family: var(--font-display); font-weight: 600; font-size: var(--type-2); letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; gap: 9px; margin-right: auto; min-height: 44px }
.brand .seal { width: 22px; height: 22px; border-radius: 4px; background: var(--role-pink); box-shadow: 3px 3px 0 var(--role-ink); display: inline-block }
.tabs { display: flex; gap: var(--space-2); align-items: flex-end }
.tabs a { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); text-decoration: none; color: var(--role-ink);
  padding: 9px 14px; border: 2px solid var(--role-ink); border-bottom: 0; border-radius: var(--radius-1) var(--radius-1) 0 0; background: var(--role-ground-2);
  transform: translateY(2px); transition: transform var(--dur-2) var(--ease-house), background var(--dur-2) var(--ease-house) }
.tabs a:active { transform: translateY(1px) }
.tabs a:hover, .tabs a.on { transform: translateY(-2px); background: var(--role-studio-tab, var(--role-surface)); color: var(--role-studio-tab-ink, var(--role-ink)) }
.tabs a[href="#board"] { --role-studio-tab: var(--role-pink); --role-studio-tab-ink: var(--role-ink) }
.tabs a[href="#brands"] { --role-studio-tab: var(--role-teal); --role-studio-tab-ink: var(--role-cta-ink) }
.tabs a[href="#agents"] { --role-studio-tab: var(--role-studio-agent); --role-studio-tab-ink: var(--role-cta-ink) }
.tabs a[href="#trust"] { --role-studio-tab: var(--role-deep); --role-studio-tab-ink: var(--role-deep-ink) }
.tabs a[href="redesign/"] { border-color: transparent; background: none; color: var(--role-muted); font-family: var(--font-mono); font-weight: 400; font-size: var(--type--1) }
.tabs a.signin { border-color: transparent; background: none; color: var(--role-ink); font-family: var(--font-mono); font-weight: 400; font-size: var(--type--1); text-decoration: underline; text-underline-offset: 3px }
/* The strip is at capacity once Sign In joins it (measured 1074px at every width):
   never let a door wrap inside its own tab. Below 1280 the tabs tighten and the
   Technical Version link leaves the strip; it stays in the menu and in the body. */
.tabs a { white-space: nowrap }
@media (max-width: 1279px) { .tabs { gap: 6px } .tabs a { padding: 9px 10px } .tabs a[href="redesign/"] { display: none } }
.tabs a[href="#math"] { --role-studio-tab: var(--role-brass); --role-studio-tab-ink: var(--role-ink) }
.techlink { font-family: var(--font-mono); font-size: var(--type--1); letter-spacing: .04em; text-decoration: none; color: var(--role-muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-1) }
.techlink .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--role-deep); box-shadow: 2px 2px 0 var(--role-ink-faint) }
.techlink:hover { background: var(--role-ground-2); color: var(--role-ink) }
@media (max-width: 1023px) { .tabs { display: none } header.top { position: static } .techlink { display: none } }
/* mobile menu: native <details>, the full section list the tab strip carries on desktop */
.menu { display: none; position: relative }
.menu summary { list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); min-height: 44px; display: grid; place-items: center; padding: 0 14px; border: 2px solid var(--role-ink); border-radius: var(--radius-1); background: var(--role-surface); box-shadow: 3px 3px 0 var(--role-ink) }
.menu summary::-webkit-details-marker { display: none }
.menu[open] summary { background: var(--role-brass); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--role-ink) }
.menu__list { position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-ghost); display: grid; gap: 6px; min-width: 220px; padding: 10px; background: var(--role-surface); border: 2px solid var(--role-ink); border-radius: var(--radius-2); box-shadow: 6px 6px 0 var(--role-ink) }
.menu__list a { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0); text-decoration: none; color: var(--role-ink); padding: 10px 12px; min-height: 44px; display: flex; align-items: center; border-radius: var(--radius-1) }
.menu__list a { transition: background var(--dur-2) var(--ease-house), padding-left var(--dur-2) var(--ease-house) }
.menu__list a:hover { background: var(--role-ground-2); padding-left: 16px }
.menu__list a.cta { justify-content: center; margin-top: 4px }
@media (max-width: 1023px) { .menu { display: block } }
@media (hover: none) { .cta:hover, .chip:hover, .card:hover, .tabs a:hover, .friend .tcard:hover { transform: none } }

/* ---------- mobile dock (four blocks) ---------- */
.dock { display: none }
@media (max-width: 1023px) {
  .dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-nav) }
  .dock a { font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.1; text-decoration: none; text-align: center; color: var(--role-ink);
    min-height: 48px; display: grid; place-items: center; padding: 6px 4px; border: 2px solid var(--role-ink); border-radius: var(--radius-1); background: var(--role-surface); box-shadow: 3px 3px 0 var(--role-ink) }
  .dock a[href="#board"] { background: var(--role-pink) }
  .dock a[href="#trust"] { background: var(--role-deep); color: var(--role-deep-ink) }
  .dock a[href="#math"] { background: var(--role-brass) }
  .dock a { transition: transform var(--dur-1), box-shadow var(--dur-1) }
  .dock a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--role-ink) }
  .dock a.cta { background: var(--role-cta-ground); color: var(--role-cta-ink); padding: 6px 4px; box-shadow: 3px 3px 0 var(--role-ink) }
  body { padding-bottom: 134px }
}

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 88px) 0 0; overflow: clip }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center }
.hero .kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px }
.hero .kicker .cube { width: 14px; height: 14px; background: var(--role-jade); border: 2px solid var(--role-ink); box-shadow: 2px 2px 0 var(--role-ink); border-radius: 3px; display: inline-block; animation: turn 6s var(--ease-amb) infinite }
@keyframes turn { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(90deg) } }
.hero h1 { font-size: clamp(64px, 6.5vw, 132px); line-height: .94; letter-spacing: -0.02em; text-wrap: balance }
.hero h1 .nb { white-space: nowrap }
.hero h1 .hi { display: inline-block; padding: 0 .12em; background: var(--role-brass); box-shadow: 6px 6px 0 var(--role-ink); border-radius: 6px; line-height: 1.02 }
.hero .sub { font-size: var(--type-1f); color: var(--role-muted); max-width: 46ch; margin: 28px 0 var(--space-6) }
.hero .ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center }
.hero__media { position: relative }
.hero__media .ph { border: 2px solid var(--role-ink); border-radius: var(--radius-3); overflow: hidden; box-shadow: 0 20px 40px var(--role-shadow-deep); background: var(--role-deep) }
.hero__media .ph img, .hero__media .ph video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9 }
.hero__media .ph video { position: absolute; inset: 0 }
.hero__media .ph { position: relative }
.hero__media .tag { position: absolute; left: -10px; bottom: 22px; background: var(--role-surface); border: 2px solid var(--role-ink); box-shadow: 4px 4px 0 var(--role-ink); border-radius: var(--radius-1); padding: 8px 12px; font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s) }
.hero__media .tag small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--type--3); letter-spacing: .06em; color: var(--role-muted); margin-top: 2px }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr } .hero h1 { font-size: clamp(56px, 15vw, 96px) } .hero__media .tag { left: 8px } }

/* ---------- the board (T1) ---------- */
.board-wrap { margin-top: clamp(40px, 5vw, 72px) }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4) }
.chip { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); padding: 10px 16px; min-height: 44px; border-radius: var(--radius-1); border: 2px solid var(--role-ink); cursor: pointer;
  background: var(--role-surface); color: var(--role-ink); box-shadow: 3px 3px 0 var(--role-ink); transition: transform var(--dur-1), box-shadow var(--dur-1) }
.chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--role-ink) }
.chip[data-object="people"] { --role-studio-hue: var(--role-teal); --role-studio-hue-ink: var(--role-cta-ink) }
.chip[data-object="deals"] { --role-studio-hue: var(--role-pink); --role-studio-hue-ink: var(--role-ink) }
.chip[data-object="campaigns"] { --role-studio-hue: var(--role-brass); --role-studio-hue-ink: var(--role-ink) }
.chip[data-object="flows"] { --role-studio-hue: var(--role-jade); --role-studio-hue-ink: var(--role-ink) }
.chip[data-object="agents"] { --role-studio-hue: var(--role-studio-agent); --role-studio-hue-ink: var(--role-cta-ink) }
.chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--role-ink) }
.chip[aria-pressed="true"] { background: var(--role-studio-hue); color: var(--role-studio-hue-ink, var(--role-deep-ink)); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--role-ink) }
.board { --role-studio-hue: var(--role-pink); --role-studio-hue-tint: var(--role-blush); --role-studio-hue-deep: var(--role-pink-deep); --role-studio-hue-ink: var(--role-ink);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: var(--space-3);
  background: var(--role-surface); border: 2px solid var(--role-ink); border-radius: var(--radius-3); box-shadow: 8px 8px 0 var(--role-ink); position: relative }
.board[data-object="people"]    { --role-studio-hue: var(--role-teal);   --role-studio-hue-tint: var(--role-sky);        --role-studio-hue-deep: var(--role-teal-deep); --role-studio-hue-ink: var(--role-cta-ink) }
.board[data-object="deals"]     { --role-studio-hue: var(--role-pink);   --role-studio-hue-tint: var(--role-blush);      --role-studio-hue-deep: var(--role-pink-deep); --role-studio-hue-ink: var(--role-ink) }
.board[data-object="campaigns"] { --role-studio-hue: var(--role-brass);  --role-studio-hue-tint: var(--role-brass-tint); --role-studio-hue-deep: var(--role-ink); --role-studio-hue-ink: var(--role-ink) }
.board[data-object="flows"]     { --role-studio-hue: var(--role-jade);   --role-studio-hue-tint: var(--role-mint);       --role-studio-hue-deep: var(--role-jade-deep); --role-studio-hue-ink: var(--role-ink) }
.board[data-object="agents"]    { --role-studio-hue: var(--role-studio-agent); --role-studio-hue-tint: var(--role-studio-agent-tint); --role-studio-hue-deep: var(--role-studio-agent-deep); --role-studio-hue-ink: var(--role-cta-ink) }
.col { background: var(--role-ground-2); border-radius: var(--radius-2); padding: var(--space-2); min-height: 300px; display: flex; flex-direction: column; gap: var(--space-2); transition: background var(--dur-2), box-shadow var(--dur-2) }
.col[data-over="true"] { background: var(--role-studio-hue-tint); box-shadow: inset 0 0 0 2px var(--role-studio-hue) }
.col h3 { font-size: var(--type--2); letter-spacing: .08em; text-transform: uppercase; margin: var(--space-1) var(--space-1) var(--space-2); display: flex; justify-content: space-between; color: var(--role-muted) }
.col h3 .n { font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2) }
.col .sum { margin-top: auto; font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); padding: var(--space-2) var(--space-1) var(--space-1); border-top: 1px solid var(--role-rule) }
.drop-here { display: none; font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); color: var(--role-studio-hue-deep); background: var(--role-surface); border: 2px dashed var(--role-studio-hue); border-radius: var(--radius-1); padding: 12px; text-align: center; cursor: pointer; min-height: 44px }
.col[data-target="true"] .drop-here { display: block }
.card { position: relative; display: block; width: 100%; text-align: left; border: 0; border-radius: var(--radius-1); padding: var(--space-3);
  background: var(--role-surface); color: var(--role-ink); cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 0 0 2px var(--role-rule), 4px 4px 0 var(--role-studio-hue); transition: transform var(--dur-2) var(--ease-house), box-shadow var(--dur-2) }
.card:hover { transform: translate(-1px, -1px); box-shadow: 0 0 0 2px var(--role-rule), 5px 5px 0 var(--role-studio-hue) }
.card .t { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0); line-height: 1.2; display: block; margin-bottom: 4px }
.card .m { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-studio-hue-deep); display: block }
.card .seal { font-family: var(--font-mono); font-size: var(--type--3); color: var(--role-muted); margin-top: 6px; display: none }
.card[data-sealed] .seal { display: block }
.card[data-grabbed="true"] { cursor: grabbing; z-index: var(--z-ghost); box-shadow: 0 0 0 2px var(--role-rule), 10px 12px 0 var(--role-studio-hue); transition: none }
.card[data-selected="true"] { box-shadow: 0 0 0 3px var(--role-studio-hue), 4px 4px 0 var(--role-studio-hue) }
.card .stampmark { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--role-studio-hue-deep); color: var(--role-studio-hue-deep);
  font-family: var(--font-display); font-weight: 600; font-size: 8px; letter-spacing: .04em; display: none; place-items: center; transform: rotate(-12deg) }
.card[data-sealed] .stampmark { display: grid; animation: stamp var(--dur-3) var(--ease-stamp) forwards }
@keyframes stamp { 0% { transform: rotate(-12deg) scale(1.6); opacity: 0 } 100% { transform: rotate(-12deg) scale(1); opacity: 1 } }
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.status { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); margin-top: var(--space-3); min-height: 1.5em }
.example { display: inline-block; font-family: var(--font-mono); font-size: var(--type--3); letter-spacing: .08em; text-transform: uppercase; color: var(--role-badge-ink); background: var(--role-ground-2); border-radius: 3px; padding: 3px 7px; vertical-align: middle }
@media (max-width: 767px) {
  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-2); -webkit-overflow-scrolling: touch }
  .col { flex: 0 0 78vw; scroll-snap-align: start; min-height: 240px }
  .card { cursor: pointer; touch-action: pan-x }
}

/* ---------- receipt strip: sticky page material (T5/T10) ---------- */
.strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-status); overflow: hidden; border-top: 2px solid var(--role-ink); background: var(--role-surface) }
.strip .track { display: flex; gap: var(--space-2); padding: 10px 12px; width: max-content; animation: drift var(--dur-marquee) var(--ease-linear) infinite; animation-play-state: paused }
.strip.live .track { animation-play-state: running }
.strip:hover .track, .strip:focus-within .track { animation-play-state: paused }
@keyframes drift { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.blk { flex: none; min-width: 170px; padding: 8px 12px; border-radius: var(--radius-1); background: var(--role-studio-blk, var(--role-pink)); color: var(--role-studio-blk-ink, var(--role-ink));
  box-shadow: 3px 3px 0 var(--role-ink); font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.25 }
.blk { transition: transform var(--dur-2) var(--ease-house), box-shadow var(--dur-2) var(--ease-house) }
.blk:hover { transform: translateY(-3px); box-shadow: 3px 6px 0 var(--role-ink) }
.blk small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; margin-top: 3px; letter-spacing: .02em }
.blk.new { animation: print var(--dur-3) var(--ease-stamp) }
@keyframes print { 0% { transform: translateY(-30px) scale(1.15); opacity: 0 } 100% { transform: none; opacity: 1 } }
.blk[data-kind="people"] { --role-studio-blk: var(--role-teal); --role-studio-blk-ink: var(--role-cta-ink) }
.blk[data-kind="deals"] { --role-studio-blk: var(--role-pink); --role-studio-blk-ink: var(--role-ink) }
.blk[data-kind="campaigns"] { --role-studio-blk: var(--role-brass); --role-studio-blk-ink: var(--role-ink) }
.blk[data-kind="flows"] { --role-studio-blk: var(--role-jade); --role-studio-blk-ink: var(--role-ink) }
.blk[data-kind="agents"] { --role-studio-blk: var(--role-studio-agent); --role-studio-blk-ink: var(--role-cta-ink) }
.blk[data-kind="audit"] { --role-studio-blk: var(--role-deep); --role-studio-blk-ink: var(--role-deep-ink) }
@media (max-width: 1023px) { .strip { bottom: 76px } }

/* ---------- sections ---------- */
.sect { padding: clamp(80px, 9vw, 140px) 0 }
.sect .kicker { margin-bottom: 16px }
.pic { display: block; margin: 0 0 22px; border: 2px solid var(--role-ink); border-radius: var(--radius-1); box-shadow: 6px 6px 0 var(--role-ink); overflow: hidden; background: var(--role-surface) }
.pic img { display: block; width: 100%; height: auto }
h2 { font-size: clamp(38px, 4.6vw, 64px); max-width: 20ch; text-wrap: balance }
.receipt { font-family: var(--font-display); font-weight: 500; font-size: var(--type-2f); color: var(--role-muted); margin-top: 14px; max-width: 40ch; line-height: 1.25 }
.lede { font-size: var(--type-1f); color: var(--role-muted); max-width: 56ch; margin-top: var(--space-5) }
.lede b { color: var(--role-ink); font-weight: 600 }
.two { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: start }
@media (max-width: 900px) { .two { grid-template-columns: 1fr } }
html.js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-pop), transform var(--dur-4) var(--ease-pop) }
html.js .rv.on { opacity: 1; transform: none }

/* ---------- brands (T9) ---------- */
.brands { background: var(--role-ground-2) }
.brandrow { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-5) 0 }
.desk-mini { --role-studio-hue: var(--role-teal); --role-studio-hue-ink: var(--role-cta-ink); --role-studio-hue-tint: var(--role-sky); border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); box-shadow: 8px 8px 0 var(--role-ink); overflow: hidden; transition: --role-studio-hue var(--dur-3) }
.desk-mini .bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--role-studio-hue); color: var(--role-studio-hue-ink, var(--role-ink)); border-bottom: 2px solid var(--role-ink); font-family: var(--font-display); font-weight: 600 }
.desk-mini .bar .k { font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2); margin-left: auto }
.desk-mini .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 }
.desk-mini .cell { padding: 18px 16px; border-right: 1px solid var(--role-rule) }
.desk-mini .cell:last-child { border-right: 0 }
.desk-mini .cell b { font-family: var(--font-display); font-weight: 600; font-size: var(--type-4s); display: block; line-height: 1; color: var(--role-ink); transition: transform var(--dur-3) var(--ease-house) }
.desk-mini .cell span { font-family: var(--font-mono); font-size: var(--type--2); letter-spacing: .06em; text-transform: uppercase; color: var(--role-muted); display: block; margin-top: 8px }
.desk-mini .list { border-top: 1px solid var(--role-rule); padding: 8px 16px 12px }
.desk-mini .list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--role-rule); font-size: var(--type-0) }
.desk-mini .list div:last-child { border-bottom: 0 }
.desk-mini .list div { transition: padding-left var(--dur-2) var(--ease-house) }
.desk-mini .list div:hover { padding-left: 6px }
.desk-mini .list span { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted) }
.desk-mini .list div::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--role-studio-hue); border: 1px solid var(--role-ink); margin-right: 10px; flex: none; align-self: center }
.desk-mini.swap .cell b { animation: bump var(--dur-3) var(--ease-house) }
@keyframes bump { 0% { transform: translateY(6px); opacity: .3 } 100% { transform: none; opacity: 1 } }
@media (max-width: 640px) { .desk-mini .rows { grid-template-columns: 1fr } .desk-mini .cell { border-right: 0; border-bottom: 1px solid var(--role-rule) } }

/* ---------- agents (T4) ---------- */
.runlog { border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-deep); color: var(--role-deep-ink); box-shadow: 8px 8px 0 var(--role-ink); overflow: hidden }
.runlog .bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--role-rule-deep); font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s) }
.runlog .bar .cube { width: 12px; height: 12px; border-radius: 3px; background: var(--role-studio-agent); display: inline-block; animation: blink var(--dur-amb-1) var(--ease-amb) infinite }
.runlog .bar .k { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2); color: var(--role-deep-soft) }
.runlog ol { list-style: none; padding: 14px 16px 6px; font-family: var(--font-mono); font-size: var(--type--1); line-height: 1.7 }
.runlog li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 4px 0 }
.runlog li .t { color: var(--role-deep-soft) }
.runlog li .line { overflow: hidden; white-space: nowrap; text-overflow: clip }
html.js .runlog:not(.play) li .line { width: 0 }
html.js .runlog.play li .line { width: 0; animation: typeon var(--dur-count) steps(34, end) forwards; animation-delay: calc(var(--i) * .55s) }
@keyframes typeon { to { width: 100% } }
.runlog .draft { margin: 8px 16px 16px; padding: 14px 16px; background: var(--role-deep-2); border: 1px solid var(--role-rule-deep); border-radius: var(--radius-2); font-size: var(--type-0); color: var(--role-deep-ink) }
.runlog .draft .who { font-family: var(--font-mono); font-size: var(--type--2); color: var(--role-deep-soft); display: block; margin-bottom: 6px }
.decide { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 0 16px 16px; align-items: center }
.decide .cta { padding: 10px 16px }
.decide .cta.reject { background: var(--role-surface); color: var(--role-ink) }
.decide .verdict { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-signal); min-height: 1.5em }
.decide .verdict.bad { color: var(--role-alarm) }
.runlog[data-state="decided"] .decide .cta { pointer-events: none; opacity: .5 }

/* ---------- figures: The Purser Materializes (round 2 signature, the K11 pin chapter) ----------
   The static composition is the default and is complete: purser in colour, six rows, the seal. That is what no-JS,
   reduced motion and every viewport under 901px get. The pin is the enhancement, declared once at the bottom.
   --p is scroll progress 0..1 across the pin, set by JS. Cards scrub paused keyframe animations through a negative
   delay, so the arrival and dock eases are real curves, not calc. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.mz { --p: 1; --fill: clamp(0, calc((var(--p) - .2) / .7), 1) }
.mz__head { text-align: center; position: relative; z-index: 4 }
.mz__head h2 { margin-left: auto; margin-right: auto }
.mz__head .receipt { margin-left: auto; margin-right: auto }
.mz__head .what { font-size: var(--type-0s); color: var(--role-muted); margin: 10px auto 0; max-width: 64ch }
.mz__scene { position: relative; margin-top: var(--space-6); display: grid; justify-items: center }
.mz__purser { position: relative; width: min(60vw, 300px); aspect-ratio: 1792 / 2400; margin: 0; z-index: 2 }
.mz__purser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.mz__line { z-index: 2 }
.mz__fill { z-index: 1; -webkit-mask-image: linear-gradient(to top, var(--role-ink) calc(var(--fill) * 108% - 8%), var(--role-clear) calc(var(--fill) * 108%)); mask-image: linear-gradient(to top, var(--role-ink) calc(var(--fill) * 108% - 8%), var(--role-clear) calc(var(--fill) * 108%)) }
.mz__plinth { order: 2; position: relative; width: 100%; margin-top: -28px; z-index: 3; box-sizing: border-box; padding: 20px 24px; border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); box-shadow: 0 20px 40px var(--role-shadow-deep) }
.mz__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px }
.mz__plinth .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--role-pink-deep) }
.mz__plinth .what { font-size: var(--type-0); color: var(--role-muted) }
.mz__rows { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 2px solid var(--role-ink); font-family: var(--font-mono); font-size: var(--type--1); display: grid; gap: 6px 22px; color: var(--role-ink) }
.mz__rows li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 3px; border-bottom: 1px solid var(--role-rule); --r: calc(.44 + var(--i) * .1) }
.mz__rows li > * { opacity: clamp(0, calc((var(--p) - var(--r)) / .06), 1) }
.mz__rows b { font-weight: 600 }
.mz__seal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; font-family: var(--font-mono); font-size: var(--type--2); color: var(--role-muted); opacity: clamp(0, calc((var(--p) - .9) / .1), 1) }
.mz__seal code { white-space: nowrap }
.mz__seal .stampmark { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--type--1); letter-spacing: .1em; color: var(--role-danger); border: 2px solid var(--role-danger); border-radius: var(--radius-1); padding: 2px 8px; rotate: -8deg }
.mz__orbit { order: 3; display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-5) }
.mz .src__in { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-1); background: var(--role-studio-sk, var(--role-pink)); color: var(--role-studio-sk-ink, var(--role-ink)); border: 2px solid var(--role-ink); box-shadow: 4px 4px 0 var(--role-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--type-0) }
.src small { font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2); letter-spacing: .02em }
.src[data-kind="deals"] { --role-studio-sk: var(--role-pink) } .src[data-kind="people"] { --role-studio-sk: var(--role-teal); --role-studio-sk-ink: var(--role-cta-ink) }
.src[data-kind="campaigns"] { --role-studio-sk: var(--role-brass) } .src[data-kind="audit"] { --role-studio-sk: var(--role-deep); --role-studio-sk-ink: var(--role-deep-ink) }
@media (min-width: 601px) { .mz__rows { grid-template-columns: repeat(3, 1fr) } }
/* the pin: desktop, motion allowed, JS present */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js .mz { --p: 0; padding: 0 }
  html.js .mz__pin { height: 250vh }
  html.js .mz__stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr; padding-top: 88px; padding-bottom: 92px }
  html.js .mz__scene { display: block; margin-top: 0; min-height: 0 }
  html.js .mz__purser { position: absolute; left: 50%; top: 28px; bottom: 168px; width: auto; translate: -50% 0; transform-origin: 50% 100%; scale: calc(1 + .085 * var(--p)) }
  html.js .mz__plinth { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(680px, 92%); margin: 0 }
  html.js .mz__orbit { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; z-index: 1 }
  html.js .mz .src { position: absolute; left: 50%; top: 50%; width: min(272px, 26vw); translate: calc(var(--x) - 50%) calc(var(--y) - 50%); --a: calc(.03 + var(--i) * .07); --d: calc(.3 + var(--i) * .1); animation: mz-arrive 1s var(--ease-enter) both paused; animation-delay: calc((var(--p) - var(--a)) / .14 * -1s) }
  html.js .mz .src__in { animation: mz-dock 1s var(--ease-house) both paused; animation-delay: calc((var(--p) - var(--d)) / .2 * -1s) }
  html.js .mz__seal .stampmark { animation: mz-seal 1s var(--ease-stamp) both paused; animation-delay: calc((var(--p) - .9) / .1 * -1s) }
}
@keyframes mz-arrive { from { opacity: 0; scale: .72; rotate: -4deg } to { opacity: 1; scale: 1; rotate: 0deg } }
@keyframes mz-dock { from { translate: 0 0; scale: 1; opacity: 1 } to { translate: calc(-1 * var(--x)) calc(-1 * var(--y) + 24vh); scale: .28; opacity: 0 } }
@keyframes mz-seal { from { opacity: 0; scale: 1.8 } to { opacity: 1; scale: 1 } }
/* ---------- flows (T3) ---------- */
.flows { background: var(--role-ground-2) }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-6); counter-reset: step }
.step { position: relative; border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); box-shadow: 0 2px 7px var(--role-shadow-soft); padding: 22px 20px 20px; min-height: 200px; display: flex; flex-direction: column; gap: 10px }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: var(--type--2); letter-spacing: .1em; color: var(--role-muted) }
.step { transition: transform var(--dur-2) var(--ease-house), box-shadow var(--dur-2) var(--ease-house) }
.step:hover { transform: translateY(-2px); box-shadow: 0 4px 20px var(--role-shadow-soft) }
.step h3 { font-size: var(--type-2) }
.step p { font-size: var(--type-0); color: var(--role-muted) }
.step .st { margin-top: auto; font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); display: flex; align-items: center; gap: 8px }
.step .st::before { content: ""; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--role-ink); background: var(--role-ink-faint) }
.step[data-state="done"] .st::before { background: var(--role-jade) }
.step[data-state="waiting"] .st::before { background: var(--role-brass); animation: blink var(--dur-amb-1) var(--ease-amb) infinite }
.step[data-state="done"] .st { color: var(--role-jade-deep) }
@keyframes blink { 50% { opacity: .35 } }
.step .stampmark { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--role-jade-deep); color: var(--role-jade-deep); font-family: var(--font-display); font-weight: 600; font-size: 9px; letter-spacing: .04em; display: none; place-items: center; transform: rotate(-12deg) }
.step[data-state="done"] .stampmark { display: grid; animation: stamp var(--dur-3) var(--ease-stamp) forwards }
html.js .step[data-state="done"] .stampmark { opacity: 1; transform: rotate(-12deg) scale(1); animation: none }
html.js .step.fresh[data-state="done"] .stampmark { animation: stamp var(--dur-3) var(--ease-stamp) forwards }
@media (max-width: 767px) { .flow { grid-template-columns: 1fr } .step { min-height: 0 } }

/* ---------- trust band (T8) ---------- */
.trust { background: var(--role-deep); color: var(--role-deep-ink); overflow: clip }
.trust .label { color: var(--role-signal) }
.trust h2 { color: var(--role-deep-ink) }
.trust .receipt, .trust .lede { color: var(--role-deep-soft) }
.trust .lede b { color: var(--role-deep-ink) }
.chainrow { display: flex; align-items: center; gap: 0; margin: 48px 0 20px; overflow-x: auto; padding: 6px 0 12px }
.chainrow .cb { flex: 0 0 auto; min-width: 190px; border: 2px solid var(--role-deep-ink); border-radius: var(--radius-1); background: var(--role-studio-cb, var(--role-deep-2)); color: var(--role-studio-cb-ink, var(--role-deep-ink)); padding: 12px 14px; box-shadow: 4px 4px 0 var(--role-deep-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--type-0s); transition: transform var(--dur-2) var(--ease-house) }
.chainrow .cb .h { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2); margin-top: 6px; transition: color var(--dur-2) }
.chainrow .cb[data-kind="deals"] { --role-studio-cb: var(--role-pink); --role-studio-cb-ink: var(--role-ink) }
.chainrow .cb[data-kind="people"] { --role-studio-cb: var(--role-teal); --role-studio-cb-ink: var(--role-cta-ink) }
.chainrow .cb[data-kind="campaigns"] { --role-studio-cb: var(--role-brass); --role-studio-cb-ink: var(--role-ink) }
.chainrow .lnk { flex: 0 0 34px; height: 2px; background: var(--role-signal); position: relative; overflow: hidden }
.chainrow .lnk::after { content: ""; position: absolute; inset: -2px auto -2px 0; width: 10px; background: var(--role-deep-ink); animation: pulse var(--dur-amb-1) var(--ease-linear) 3 }
@keyframes pulse { from { transform: translateX(-12px) } to { transform: translateX(40px) } }
.chainrow.broken .cb.tampered { transform: rotate(-2deg) translateY(4px); outline: 3px solid var(--role-alarm); outline-offset: 2px }
.chainrow.broken .cb.downstream .h { color: var(--role-alarm) }
.chainrow.broken .lnk { background: var(--role-alarm) }
.tamper { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 8px 0 12px }
.refusal { font-family: var(--font-mono); font-size: var(--type--1); line-height: 1.6; color: var(--role-signal); background: var(--role-deep-2); border: 1px solid var(--role-rule-deep); border-radius: var(--radius-1); padding: 12px 14px; min-height: 3.2em; white-space: pre-wrap }
.refusal.bad { color: var(--role-alarm) }
.verify { margin-top: 40px; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 24px; align-items: start }
.verify .rows { font-family: var(--font-mono); font-size: var(--type--1); border: 1px solid var(--role-rule-deep); border-radius: var(--radius-2); overflow: hidden; background: var(--role-deep-2) }
.verify .rows div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--role-rule-deep); color: var(--role-deep-soft) }
.verify .rows div:first-child { border-top: 0; background: var(--role-deep-3); color: var(--role-deep-ink) }
.verify .rows div .ok { color: var(--role-signal) }
.verify .rows div .bad { color: var(--role-alarm) }
.verify .rows input { font: inherit; font-size: 16px; min-height: 44px; color: var(--role-deep-ink); background: var(--role-deep); border: 1px solid var(--role-rule-deep); border-radius: 3px; padding: 2px 6px; width: 7ch; text-align: right }
.verify .rows input:focus-visible { outline: 2px solid var(--role-signal); outline-offset: 1px }
.guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: 56px }
.guarantees .g { border: 2px solid var(--role-deep-ink); border-radius: var(--radius-2); padding: 20px 18px; background: var(--role-studio-gg, var(--role-deep-2)); color: var(--role-studio-gg-ink, var(--role-deep-ink)); box-shadow: 5px 5px 0 var(--role-deep-ink) }
.guarantees .g { transition: transform var(--dur-2) var(--ease-house) }
.guarantees .g:hover { transform: rotate(-0.6deg) }
.guarantees .g h3 { font-size: var(--type-2); margin-bottom: 8px }
.guarantees .g p { font-size: var(--type-0) }
.guarantees .g:nth-child(1) { --role-studio-gg: var(--role-teal); --role-studio-gg-ink: var(--role-cta-ink) }
.guarantees .g:nth-child(2) { --role-studio-gg: var(--role-jade); --role-studio-gg-ink: var(--role-ink) }
.guarantees .g:nth-child(3) { --role-studio-gg: var(--role-brass); --role-studio-gg-ink: var(--role-ink) }
.admission { margin-top: 44px; max-width: 64ch; color: var(--role-deep-soft); font-size: var(--type-0); border-left: 3px solid var(--role-signal); padding-left: 18px }
.admission b { color: var(--role-deep-ink); font-weight: 600 }
@media (max-width: 900px) { .verify { grid-template-columns: 1fr } .guarantees { grid-template-columns: 1fr } .tamper { grid-template-columns: 1fr } }

/* ---------- honest math (T7) ---------- */
.math .calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); align-items: stretch }
.pane { border: 2px solid var(--role-ink); border-radius: var(--radius-3); padding: 24px; background: var(--role-surface); box-shadow: 8px 8px 0 var(--role-ink) }
.pane.rent { --role-studio-p: var(--role-brass) }
@keyframes climb { 0%, 100% { box-shadow: 8px 8px 0 var(--role-ink) } 50% { box-shadow: 8px 12px 0 var(--role-ink) } } .pane.own { --role-studio-p: var(--role-jade) }
.pane h3 { font-size: var(--type-2); display: flex; align-items: center; gap: 10px }
.pane h3::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--role-studio-p); border: 2px solid var(--role-ink); box-shadow: 2px 2px 0 var(--role-ink) }
.pane .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 }
.pane label { display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--type--2); letter-spacing: .06em; text-transform: uppercase; color: var(--role-muted) }
.pane input { transition: background var(--dur-1), transform var(--dur-2) var(--ease-house); font: 600 var(--type-2) var(--font-display); color: var(--role-ink); background: var(--role-ground-2); border: 2px solid var(--role-ink); border-radius: var(--radius-1); padding: 8px 12px; width: 100%; min-height: 48px }
.pane .out { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.02em; margin-top: 6px }
.pane .out small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--type--2); letter-spacing: .04em; color: var(--role-muted); margin-top: 10px }
.pane p { font-size: var(--type-0); color: var(--role-muted); margin-top: 14px }
.pane input:focus-visible { background: var(--role-surface); transform: scale(1.02) }
.pane.own .out { color: var(--role-jade-deep) }
.pane.rent .out { color: var(--role-ink) }
.math .note { font-size: var(--type-0); color: var(--role-muted); margin-top: 22px; max-width: 64ch }
@media (max-width: 767px) { .math .calc { grid-template-columns: 1fr } }

/* ---------- manifest ---------- */
.manifest-s { background: var(--role-ground-2) }
.manifest { margin-top: 48px; border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); box-shadow: 8px 8px 0 var(--role-ink); overflow: hidden }
.manifest .mrow { display: grid; grid-template-columns: 56px 240px 1fr; border-top: 1px solid var(--role-rule); align-items: start; transition: background var(--dur-2) }
.manifest .mrow:first-child { border-top: 0; background: var(--role-deep); color: var(--role-deep-ink) }
.manifest .mrow:not(:first-child):hover { background: var(--role-sky) }
.manifest .mrow .no { transition: transform var(--dur-2) var(--ease-house) }
.manifest .mrow:hover .no { transform: translateX(4px) }
.manifest .mrow > div { padding: var(--row-pad-y) var(--cell-pad); font-family: var(--font-mono); font-size: var(--type--1); letter-spacing: .03em; line-height: 1.55 }
.manifest .mrow .no { color: var(--role-teal-deep) }
.manifest .mrow:first-child .no { color: var(--role-signal) }
.manifest .mrow .item { font-family: var(--font-display); font-weight: 600; font-size: var(--type-0); letter-spacing: 0 }
.manifest .mrow .what { font-family: var(--font-body); font-size: var(--type-0); letter-spacing: 0; color: var(--role-muted) }
.manifest .mrow:first-child .item, .manifest .mrow:first-child .what { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-deep-ink) }
@media (max-width: 760px) { .manifest .mrow { grid-template-columns: 44px 1fr } .manifest .mrow .what { grid-column: 1 / -1; border-top: 1px dashed var(--role-rule) } }

/* ---------- technical friend ---------- */
.friend .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: 48px }
.friend .tcard { border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); padding: 24px 22px 22px; box-shadow: 0 2px 7px var(--role-shadow-soft); transition: transform var(--dur-2) var(--ease-house), box-shadow var(--dur-2) var(--ease-house) }
.friend .tcard:hover { transform: translateY(-2px); box-shadow: 0 4px 20px var(--role-shadow-soft) }
.friend .tcard .mono { display: block; margin-bottom: 8px; color: var(--role-teal-deep) }
.friend .tcard h3 { font-size: var(--type-2); margin-bottom: 8px }
.friend .tcard p { font-size: var(--type-0); color: var(--role-muted) }
.friend .tcard .receipt { margin-bottom: var(--space-3) }
.friend .tcard code { font-family: var(--font-mono); font-size: var(--type--1); background: var(--role-ground-2); padding: 1px 5px; border-radius: 3px }
.friend .more { margin-top: 32px }
@media (max-width: 860px) { .friend .grid { grid-template-columns: 1fr } }

/* ---------- win together ---------- */
.final { padding: clamp(80px, 9vw, 140px) 0; overflow-x: clip }
.final .two { align-items: center }
.final h2 { font-size: clamp(48px, 6vw, 96px) }
.final p { color: var(--role-muted); max-width: 44ch; margin: 22px 0 32px; font-size: var(--type-1f) }
.final .ph { border: 2px solid var(--role-ink); border-radius: var(--radius-3); overflow: hidden; box-shadow: 0 20px 40px var(--role-shadow-deep); background: var(--role-deep) }
.final .ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }
.final .blocks { display: flex; gap: 8px; margin-top: 20px }
.final .blocks i { width: 28px; height: 28px; border-radius: 4px; border: 2px solid var(--role-ink); box-shadow: 3px 3px 0 var(--role-ink); display: block }
.final .blocks i:nth-child(1) { background: var(--role-teal) } .final .blocks i:nth-child(2) { background: var(--role-pink) } .final .blocks i:nth-child(3) { background: var(--role-brass) }
.final .blocks i:nth-child(4) { background: var(--role-jade) } .final .blocks i:nth-child(5) { background: var(--role-studio-agent) } .final .blocks i:nth-child(6) { background: var(--role-deep) }

/* ---------- footer ---------- */
footer { border-top: 2px solid var(--role-ink); padding: 34px 0 40px; color: var(--role-muted); font-size: var(--type-0s) }
footer .row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline }
footer .legal { display: flex; gap: 18px; flex-wrap: wrap }
footer .legal a { color: var(--role-ink); text-decoration: none; border-bottom: 1px solid var(--role-rule); display: inline-block; padding: 12px 0 }
footer .legal a { transition: border-color var(--dur-2), color var(--dur-2) }
footer .legal a:hover { border-bottom-color: var(--role-ink) }
footer .house { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--role-rule) }
.house__kicker { font-size: var(--type-0s); letter-spacing: .08em; text-transform: uppercase; color: var(--role-muted) }
.house__link { color: var(--role-accent); text-decoration: none; border-bottom: 1px solid var(--role-rule); display: inline-block; padding: 11px 0 10px }
.house__link:hover { border-bottom-color: var(--role-accent) }

/* ---------- legal pages ---------- */
.doc { max-width: 72ch; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, var(--space-7)); margin: 0 auto }
.doc h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 8px }
.doc .meta { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); margin-bottom: 32px }
.doc h2 { font-size: var(--type-3); margin: 40px 0 10px }
.doc p, .doc li { color: var(--role-muted); font-size: var(--type-0); margin-bottom: 12px }
.doc ul { padding-left: 22px }
.doc a { color: var(--role-teal-deep) }

/* ---------- field notes (home list, blog index, post pages) ---------- */
.notes { list-style: none; padding: 0; margin-top: 40px; border-top: 2px solid var(--role-ink) }
.notes li { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px dashed var(--role-rule) }
.notes .no { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted) }
.notes a { font-family: var(--font-display); font-weight: 600; font-size: var(--type-2); color: var(--role-ink); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--dur-2) var(--ease-house) }
.notes a:hover { border-bottom-color: var(--role-ink) }
.notes p { color: var(--role-muted); font-size: var(--type-0); margin: 4px 0 0; max-width: 60ch }
.notes .when { font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); white-space: nowrap }
@media (max-width: 760px) { .notes li { grid-template-columns: 44px 1fr } .notes .when { grid-column: 2 } }
.doc .label a { color: inherit; text-decoration: none }
.doc .lede { color: var(--role-ink); font-size: var(--type-1f); margin: 0 0 28px; max-width: none }
.doc ol { padding-left: 22px }
.doc .tile { border: 2px solid var(--role-ink); border-radius: var(--radius-3); background: var(--role-surface); box-shadow: 4px 4px 0 var(--role-ink); padding: 22px 24px; margin: 30px 0 }
.doc .tile b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--type-4); line-height: 1; color: var(--role-ink); letter-spacing: -0.02em }
.doc .tile small { display: block; font-family: var(--font-mono); font-size: var(--type--1); color: var(--role-muted); margin-top: 10px }
.doc .close { border-left: 4px solid var(--role-brass); padding-left: 18px; color: var(--role-ink); margin-top: 32px }
.doc .ctas { margin-top: 28px }
.doc a.cta { color: var(--role-cta-ink) }
.doc .next { margin-top: 56px }
.doc .next .notes { margin-top: 12px }

/* ---------- reduced motion: final states, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  html.js .rv { opacity: 1; transform: none }
  html.js .src, html.js .figures:not(.lit) .src { opacity: 1; transform: none; animation: none }
  html.js .runlog.play li .line, html.js .runlog:not(.play) li .line { width: 100%; animation: none }
  .card[data-sealed] .stampmark, .step[data-state="done"] .stampmark { transform: rotate(-12deg) scale(1); opacity: 1 }
  html { scroll-behavior: auto }
}

/* ---------- M4: the close arrives with the scroll (monday's scroll-linked headline: X from +480 px to 0 across its entry); the block row at half speed ---------- */
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .final h2 { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100% }
    .final .blocks { animation: slide-in-half linear both; animation-timeline: view(); animation-range: entry 0% entry 100% }
  }
}
@keyframes slide-in { from { transform: translateX(480px) } to { transform: none } }
@keyframes slide-in-half { from { transform: translateX(240px) } to { transform: none } }
/* ---------- M5: hover reveals provenance — a ledger row shows its own seal ---------- */
.mz__rows li { position: relative; transition: background var(--dur-2) var(--ease-house) }
.mz__rows li:hover { background: var(--role-ground-2) }
.mz__rows li[data-seal]:hover::after { content: attr(data-seal); position: absolute; right: 0; top: -1.25em; font-size: var(--type--3); letter-spacing: .04em; color: var(--role-muted); background: var(--role-surface); padding: 0 4px }
@media (prefers-reduced-motion: reduce) { .strip .track, .final h2, .final .blocks { animation: none } }