/* Reference Nexus · v3.css: the content pages (every page except the home page), 2026-10-22 rebuild.
   Self-sufficient with tokens.css (the one token source, brand/final/tokens.css): site.min.css is no longer
   loaded on these pages. Hand-written; the build never touches it. Rules: .claude/rules/rn-design.md v3.

   Scope. Content pages carry <body class="v3 pg-*">; everything page-level is scoped to .v3, so the client
   portal (which still loads site.min.css, then this file, then portal.css) only takes the shared header and
   footer from here.

   System, in one place:
   - Grounds, darkest first: Night (each page's opening) · Ink (chapters) · Ink deep (closing band and footer)
     · Bone (reading). Paper (Letter) is laid on any of them. Every change of ground is crossed by an object.
   - Type: six display steps (--rn-step-1..6 in tokens.css); running text 18/30 in the ground's full ink.
   - Numerals: two styles only, the outlined chapter numeral (.numeral) and the 14px mono index (.idx).
   - Buttons: one .btn, square, 56px (44px in the header), primary filled or secondary 2px outline, one arrow.
   - Motion: assets/js/pages.js (GSAP + ScrollTrigger). Without it, or with reduced motion, every object
     rests at its final frame. Pages crossfade (view transitions) behind reduced motion. */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 400; font-display: swap; src: url(fonts/newsreader-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); }

:root {
  --serif: var(--rn-font-display);
  --sans: var(--rn-font-text);
  --mono: var(--rn-font-mono);
  --night: var(--rn-c-night);
  --ink: var(--rn-c-ink);
  --ink-deep: var(--rn-c-ink-deep);
  --bone: var(--rn-c-bone);
  --letter: var(--rn-c-letter);
  --vellum: var(--rn-c-vellum);
  --brass: var(--rn-c-brass);
  --brass-lit: var(--rn-c-brass-lit);
  --burnished: var(--rn-c-burnished);
  --mist: var(--rn-c-mist);
  --slate: var(--rn-c-slate);
  --rule-light: var(--rn-c-rule);
  --rule-dark: var(--rn-c-rule-dark);
  --gutter: var(--rn-gutter);
  --max: var(--rn-max);
  --nav-h: 72px;
  --ease: var(--rn-ease);
  --ease-out: var(--rn-ease-out);
  --grain-ink: url(texture/grain-on-ink.svg);
  --grain-paper: url(texture/grain-on-paper.svg);
  --cols: repeat(12, minmax(0, 1fr));
  --colgap: var(--rn-col-gap);
  --sec: clamp(96px, 10vw, 160px);
}

/* ======================================================================================
   Base (content pages)
   ====================================================================================== */
.v3, .v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }
html:has(body.v3) { scrollbar-color: var(--rule-dark) var(--ink-deep); scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
body.v3 {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--night) var(--grain-ink); color: var(--bone);
  font: 400 var(--rn-text-body)/var(--rn-lh-body) var(--sans);
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; caret-color: var(--brass);
}
.v3 main { flex: 1 0 auto; display: block; }
/* no section may push the page sideways; clip (not hidden) keeps the vertical overhangs that cross seams */
.v3 .op, .v3 .pr, .v3 .ch, .v3 .seam, .v3 .close, .v3 .inquiry { overflow-x: clip; }
.v3 main:focus { outline: none; }
.v3 ::selection { background: var(--brass); color: var(--ink); }
.v3 img, .v3 svg { display: block; max-width: 100%; height: auto; }
.v3 :where(p, h1, h2, h3, ol, ul, dl, dd, figure, address, fieldset, legend, blockquote) { margin: 0; padding: 0; }
.v3 :where(ol, ul) { list-style: none; }
.v3 address { font-style: normal; }
.v3 fieldset { border: 0; min-width: 0; }
.v3 strong { font-weight: 500; }
.v3 table { border-collapse: collapse; }
.v3 a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.v3 a:hover { text-decoration-thickness: 2px; }
.v3 a[href^="tel:"], .v3 a[href^="mailto:"] { white-space: nowrap; }
.v3 :focus-visible { outline: 2px solid var(--focus, var(--brass)); outline-offset: 3px; }
.v3 [hidden] { display: none !important; }
.v3 p { text-wrap: pretty; }
.v3 .mono { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0; }
.v3 .rn-data { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
.v3 .nowrap { white-space: nowrap; }
.v3 .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.js .nojs-only { display: none; }
html:not(.js) .js-only { display: none; }
.rn-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3 .skip { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 12px 16px; background: var(--bone); color: var(--ink); font: 500 14px/20px var(--sans); }
.v3 .skip:focus { top: 16px; }
.v3 .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Grounds: each sets its own ink, quiet text, rule, index and button colours ---------- */
.g-night, .g-ink, .g-deep { --fg: var(--bone); --muted: var(--mist); --rule: var(--rule-dark); --idx: var(--brass); --focus: var(--brass); --on: var(--ink); --btn-hover: var(--brass-lit); --btn-hover-fg: var(--ink); color: var(--bone); }
.g-night { background: var(--night) var(--grain-ink); }
.g-ink { background: var(--ink) var(--grain-ink); }
.g-deep { background: var(--ink-deep) var(--grain-ink); }
.g-bone, .paper { --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); --idx: var(--burnished); --focus: var(--burnished); --on: var(--bone); --btn-hover: var(--rule-dark); --btn-hover-fg: var(--bone); color: var(--ink); }
.g-bone { background: var(--bone) var(--grain-paper); }

/* ======================================================================================
   Type: the six-step ladder, running text, the two numerals
   ====================================================================================== */
.v3 .op-title { font: 300 var(--rn-step-2)/.96 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.03em; text-wrap: balance; }
.v3 .ch-title { font: 300 var(--rn-step-3)/1.04 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.022em; text-wrap: balance; max-width: 16ch; }
.v3 .ch-sub { font: 300 var(--rn-step-4)/1.06 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
.v3 .item-name { font: 400 var(--rn-step-5)/1.2 var(--serif); font-variation-settings: 'opsz' 36; letter-spacing: -0.008em; text-wrap: balance; }
.v3 .lede { font: 400 clamp(19px, .5vw + 15px, 22px)/1.5 var(--sans); max-width: 40ch; color: var(--fg, inherit); }
.v3 .lede-ink { font: 400 var(--rn-step-5)/1.36 var(--serif); font-variation-settings: 'opsz' 24; letter-spacing: -0.005em; max-width: 34ch; color: var(--fg); }
.v3 .body { font: 400 var(--rn-text-body)/var(--rn-lh-body) var(--sans); max-width: 62ch; color: var(--fg, inherit); }
.v3 .statement { font: 400 var(--rn-step-5)/1.36 var(--serif); font-variation-settings: 'opsz' 24; max-width: 40ch; color: var(--fg); }
.v3 .statement-xl { font: 300 var(--rn-step-4)/1.12 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; text-wrap: balance; max-width: 28ch; color: var(--fg); }
.v3 .cap { font: 400 14px/20px var(--sans); color: var(--muted, var(--mist)); max-width: 52ch; text-wrap: pretty; }
.v3 .micro { font: 400 14px/24px var(--sans); color: var(--muted); }

/* the index numeral: 14px mono, brass on the dark grounds, burnished on Bone and paper */
.v3 .idx { display: block; font: 400 14px/20px var(--mono); font-variant-numeric: tabular-nums slashed-zero; color: var(--idx); letter-spacing: 0; }
/* the chapter numeral: outlined, at the top step */
.v3 .numeral { display: block; font: 300 var(--rn-step-1)/.8 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--burnished); font-variant-numeric: lining-nums; }
.g-night .numeral, .g-ink .numeral, .g-deep .numeral { -webkit-text-stroke-color: var(--brass-lit); }

/* the label every specimen carries: legible, never faint (12px, the ground's full ink) */
.v3 .tag { display: inline-block; font: 500 12px/16px var(--sans); padding: 3px 7px; box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap; letter-spacing: 0; }

/* status: a square and a word, never a coloured pill */
.v3 .status { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.v3 .status::before { content: ""; flex: none; width: .72em; height: .72em; border: 1.5px solid currentColor; }
.v3 .status[data-state="ok"]::before { background: currentColor; }
.v3 .status[data-state="attention"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.v3 .rn-status { display: inline-flex; align-items: flex-start; gap: 10px; }
.v3 .rn-status::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border: 1.5px solid currentColor; }
.v3 .rn-status[data-state="ok"]::before { background: currentColor; }
.v3 .rn-status[data-state="attention"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ---------- Footnotes: the brass node, bound to the last word (layout.js puts a word joiner before it) ---------- */
.v3 .rn-fn { position: relative; top: -.62em; display: inline-flex; margin-left: .12em; line-height: 0; text-decoration: none; color: inherit; }
.v3 .rn-fn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.v3 .rn-fn-node { display: inline-block; width: clamp(6px, .3em, 11px); height: clamp(6px, .3em, 11px); border-radius: 50%; background: var(--brass); }
.g-bone .rn-fn-node, .paper .rn-fn-node { background: var(--burnished); }
.v3 .rn-notes { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--rule); max-width: 62ch; font: 400 14px/24px var(--sans); color: var(--muted); }
.v3 .rn-notes li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.v3 .rn-notes a { color: var(--fg); }
.v3 .rn-note-back { position: relative; display: inline-flex; text-decoration: none; }
.v3 .rn-note-back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.v3 .rn-note-back .rn-fn-node { width: 7px; height: 7px; transform: translateY(-.1em); }

/* ======================================================================================
   Buttons: one square button, one arrow
   ====================================================================================== */
.v3 .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 0 24px 0 26px; border: 0; border-radius: 0; cursor: pointer;
  font: 500 17px/24px var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
.v3 .btn .arrow { width: 20px; height: 20px; flex: none; transition: transform 180ms var(--ease); }
.v3 .btn:hover .arrow, .v3 .btn:focus-visible .arrow { transform: translateX(4px); }
.v3 .btn:active { transform: scale(.97); }
.v3 .btn-primary { background: var(--fg); color: var(--on); }
.v3 .btn-primary:hover { background: var(--btn-hover); color: var(--btn-hover-fg); }
.v3 .btn-secondary { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px currentColor; }
.v3 .btn-secondary:hover { background: var(--fg); color: var(--on); box-shadow: inset 0 0 0 2px var(--fg); }
.v3 .btn[aria-disabled="true"] { cursor: progress; opacity: .8; }
.v3 .btn-quiet { min-height: 48px; padding-inline: 20px; font-size: 15px; }
.v3 .link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 17px/24px var(--sans); color: var(--fg); }
.v3 .link-arrow .arrow { width: 18px; height: 18px; transition: transform 180ms var(--ease); }
.v3 .link-arrow:hover .arrow { transform: translateX(4px); }

/* ======================================================================================
   Header (shared with the portal shell, which keeps it sticky; content pages float it over Night)
   ====================================================================================== */
.site-header { position: sticky; top: 0; z-index: 40; color: var(--rn-c-bone); background: var(--rn-c-ink-deep) url(texture/grain-on-ink.svg); border-bottom: 0; transition: background-color 240ms var(--rn-ease), box-shadow 240ms var(--rn-ease); }
.site-header .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.site-header .brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.site-header .brand img { width: 196px; height: auto; }
.site-header .nav { margin-left: auto; display: flex; align-items: center; }
.site-header .nav-list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; font: 400 14px/20px var(--rn-font-text); }
.site-header .nav-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rn-c-bone); text-decoration: none; white-space: nowrap; font: inherit; }
.site-header .nav-list a:hover, .site-header .nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.site-header .nav-list a[aria-current="page"] { font-weight: 500; }
.site-header .nav-list .nav-cta { min-height: 44px; padding: 0 18px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--rn-c-bone); transition: background-color 180ms var(--rn-ease), color 180ms var(--rn-ease); }
.site-header .nav-list .nav-cta::before, .site-header .nav-list .nav-cta::after { display: none; }
.site-header .nav-list .nav-cta:hover { background: var(--rn-c-bone); color: var(--rn-c-ink); text-decoration: none; }
.site-header .nav-list .nav-cta:active { transform: scale(.97); }
.site-header .nav-cta-item { margin-left: 4px; }
.site-header :focus-visible { outline: 2px solid var(--rn-c-brass); outline-offset: 3px; }
/* the phone "Inquire" button beside Menu; shown only while the menu is collapsed into the toggle */
.site-header .nav-inquire { display: none; align-items: center; min-height: 44px; margin-right: 10px; padding: 0 14px; background: var(--rn-c-bone); color: var(--rn-c-ink); font: 500 14px/20px var(--rn-font-text); text-decoration: none; }
.site-header .nav-inquire:active { transform: scale(.97); }
.site-header .nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--rn-c-bone); box-shadow: inset 0 0 0 1px var(--rn-c-bone); font: 500 14px/20px var(--rn-font-text); cursor: pointer; }
.site-header .nav-toggle-icon { position: relative; width: 16px; height: 8px; border-block: 1.5px solid currentColor; background: none; }
.site-header .nav-toggle-icon::before, .site-header .nav-toggle-icon::after { display: none; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon { border: 0; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before, .site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { content: ""; display: block; position: absolute; left: 0; top: 3px; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: rotate(-45deg); }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgb(58 62 71 / .6); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: rgb(17 19 24 / .88); backdrop-filter: saturate(1.4) blur(16px); }
}
/* content pages: the bar floats over the Night opening, then frosts once the page moves */
.v3 .site-header { position: fixed; inset: 0 0 auto 0; background: transparent; }
.v3 .site-header.is-scrolled { background: rgb(17 19 24 / .96); }
@supports (backdrop-filter: blur(1px)) { .v3 .site-header.is-scrolled { background: rgb(17 19 24 / .86); } }
.v3 .site-header .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

@media (max-width: 71.24em) {
  html:not(.js) .site-header .header-bar { flex-wrap: wrap; row-gap: 0; padding-block: 8px; }
  html:not(.js) .site-header .nav { width: 100%; }
  html:not(.js) .site-header .nav-list { flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
  html:not(.js) .v3 .site-header { position: absolute; background: var(--ink-deep); }
  .js .site-header .nav-toggle { display: inline-flex; }
  .js .site-header .nav-inquire { display: inline-flex; }
  .js .site-header .nav-list { display: none; }
  .js .site-header .nav[data-open="true"] .nav-list {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 8px var(--rn-gutter) 24px; background: var(--rn-c-ink-deep); border-top: 1px solid var(--rn-c-rule-dark); font-size: 17px; line-height: 28px;
  }
  .js .site-header .nav[data-open="true"] .nav-list a { display: flex; padding-block: 8px; border-bottom: 1px solid var(--rn-c-rule-dark); min-height: 48px; }
  .js .site-header .nav[data-open="true"] .nav-cta-item { margin: 16px 0 0; }
  .js .site-header .nav[data-open="true"] .nav-list .nav-cta { justify-content: center; border-bottom: 0; }
  .js .v3 .site-header:has(.nav[data-open="true"]) { background: var(--ink-deep); }
}
@media (max-width: 400px) {
  .site-header .brand img { width: 152px; }
  .site-header .header-bar { gap: 12px; }
}

/* ======================================================================================
   Opening: Night, the title rising word by word, the page's object
   ====================================================================================== */
.v3 .op { position: relative; z-index: 2; padding: calc(var(--nav-h) + clamp(56px, 7vw, 112px)) 0 clamp(88px, 9vw, 144px); isolation: isolate; }
.v3 .op-lamp { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse min(560px, 46vw) min(620px, 70vh) at 76% 34%, var(--rn-brass-glow), rgb(196 165 108 / .05) 55%, transparent 100%); pointer-events: none; }
.v3 .op-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 48px; align-items: start; }
.v3 .op-text { grid-column: 1 / -1; display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 40px; }
.v3 .op-title { grid-column: 1 / span 10; max-width: 13ch; }
.v3 .op-body { grid-column: 7 / span 6; display: grid; gap: 24px; align-content: start; padding-top: 28px; border-top: 1px solid var(--rule); }
.v3 .op-body .body { color: var(--mist); }
.v3 .op-actions { margin-top: 8px; }
.v3 .op-short { padding-bottom: clamp(72px, 7vw, 112px); }

/* the object to the right of the title (What we build) */
.v3 .op-wide .op-text { grid-column: 1 / span 6; grid-template-columns: minmax(0, 1fr); }
.v3 .op-wide .op-title, .v3 .op-wide .op-body { grid-column: 1; }
.v3 .op-wide .op-object { grid-column: 7 / span 6; margin-right: calc(-1 * var(--gutter)); margin-top: -24px; }
/* the object under the title, full width (Law firms) */
.v3 .op-stacked { padding-bottom: 0; }
.v3 .op-stacked .op-object { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 80px); }

/* words rise in (pages.js wraps each word; without it the title simply shows) */
.v3 .w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.v3 .w > span { display: inline-block; will-change: transform; }

/* ======================================================================================
   Chapters
   ====================================================================================== */
.v3 .ch { position: relative; padding-block: var(--sec); }
.v3 .ch-head { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 24px; align-items: end; }
.v3 .ch-head .ch-title { grid-column: 1 / span 7; }
.v3 .ch-head .ch-lede { grid-column: 8 / span 5; color: var(--fg); }
.v3 .ch-title-wide { max-width: 22ch; }

/* What we build: four steps across, each opening on its index numeral */
.v3 .ch-kicker { grid-column: 1 / -1; font: 400 13px/20px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-lit); }
.pg-wwb .ch-visibility { background: var(--ink) var(--grain-ink); }
.v3 .ch-law-vis .split-main { grid-column: 7 / span 6; display: grid; gap: 20px; padding-top: 12px; }
.v3 .ch-digitize { padding-bottom: clamp(48px, 5vw, 80px); }
.pg-wwb .ch-digitize, .pg-wwb .seam { background: var(--night) var(--grain-ink); }
.v3 .four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--colgap); margin-top: clamp(56px, 6vw, 96px); }
.v3 .four-item { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1.5px solid var(--fg); }
.v3 .four-item .body { font-size: 17px; line-height: 28px; color: var(--fg); }
.v3 .ch-digitize .rn-notes { max-width: 52ch; }

/* a seam: Ink above, Bone below, the screen across it */
.v3 .seam { position: relative; z-index: 1; background: var(--ink) var(--grain-ink); padding: 0 0 clamp(64px, 7vw, 112px); isolation: isolate; --seam-at: clamp(180px, 20vw, 280px); }
.v3 .seam-ground { position: absolute; z-index: -1; inset: var(--seam-at) 0 0 0; background: var(--bone) var(--grain-paper); }
.v3 .seam-ground::before { content: ""; position: absolute; right: 0; top: -56px; width: 38%; height: 56px; background: inherit; }

/* the screen (home page's morning dashboard) */
.v3 .screen { position: relative; margin-inline: 0 clamp(0px, 4vw, 64px); }
.v3 .screen-body { padding: 10px; background: #0C0D10; box-shadow: inset 0 0 0 1px #4A4E57, var(--rn-shadow-object), 30px 50px 100px -40px rgb(0 0 0 / .5); }
.v3 .screen-body > * { background: var(--bone); color: var(--ink); }
.v3 .sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--rule-light); }
.v3 .sc-firm { font: 500 14px/20px var(--sans); }
.v3 .sc-sep { margin: 0 6px; color: var(--slate); }
.v3 .sc-main { display: grid; grid-template-columns: 170px minmax(0, 1.25fr) minmax(0, 1fr); min-height: 360px; }
.v3 .sc-rail { background: var(--vellum); padding: 20px 16px; font: 400 14px/20px var(--sans); color: var(--slate); }
.v3 .sc-rail li { padding: 8px 10px; }
.v3 .sc-rail .is-current { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--ink); }
.v3 .sc-col { padding: 24px 28px; }
.v3 .sc-queue { border-left: 1px solid var(--rule-light); }
.v3 .sc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 var(--rn-step-5)/1.2 var(--serif); font-variation-settings: 'opsz' 36; letter-spacing: -0.01em; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.v3 .sc-count { font: 400 14px/20px var(--mono); color: var(--slate); }
.v3 .sc-ledger li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-light); font: 400 17px/24px var(--serif); }
.v3 .sc-ledger .mono { font-size: 13px; color: var(--slate); }
.v3 .sc-ledger .status, .v3 .sc-tasks .status { font: 500 14px/20px var(--sans); }
.v3 .sc-tasks li { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "s t" "s w"; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-light); }
.v3 .sc-tasks .status { grid-area: s; align-self: start; padding-top: 2px; }
.v3 .sc-task { grid-area: t; font: 400 17px/24px var(--serif); }
.v3 .sc-who { grid-area: w; font: 400 14px/20px var(--sans); color: var(--slate); }
.v3 .seam .screen .cap { color: var(--slate); margin-top: 18px; }
.v3 .status::before { transition: background-color 260ms var(--ease); }
.v3 .status.is-pending::before { background: transparent !important; }

/* split: a figure beside the text */
.v3 .split { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 48px; align-items: start; }
.v3 .split-aside { grid-column: 1 / span 5; }
.v3 .split-main { grid-column: 7 / span 6; }
.v3 .split > .ch-title { grid-column: 1 / span 6; }
.v3 .split-sticky .split-aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.v3 .ledger { margin-top: clamp(40px, 4vw, 64px); border-top: 1.5px solid var(--fg); }
.v3 .ledger li { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); column-gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.v3 .ledger .item-name { font-size: 21px; line-height: 28px; }
.v3 .after-list { margin-top: 32px; }
.v3 .ch-build .around-sub { margin-top: clamp(56px, 6vw, 96px); font-size: var(--rn-step-5); line-height: 1.2; max-width: none; }
.v3 .ch-build .around-sub + .ledger { margin-top: clamp(20px, 2vw, 32px); }

/* the phone (home page's), here on Bone */
.v3 .phone { width: min(340px, 100%); container-type: inline-size; }
.v3 .phone-body { position: relative; aspect-ratio: 9 / 18.6; padding: 3.4cqw; border-radius: 13cqw; background: #0C0D10; box-shadow: inset 0 0 0 1px #4A4E57, inset 0 0 0 2.2cqw #15171C, inset 1px 1px 0 2.4cqw #2A2D34, var(--rn-shadow-object), 40px 60px 120px -30px rgb(0 0 0 / .45); transform: rotate(-2.4deg); transform-origin: 50% 60%; }
.v3 .phone-screen { position: relative; height: 100%; border-radius: 10cqw; overflow: hidden; background: var(--bone) var(--grain-paper); color: var(--ink); padding: 4cqw 7cqw 6cqw; font-size: max(12px, 4.3cqw); display: flex; flex-direction: column; }
.v3 .ph-status { display: flex; align-items: center; justify-content: space-between; height: 9cqw; font-size: max(12px, 3.9cqw); font-weight: 500; }
.v3 .ph-island { width: 26cqw; height: 7.4cqw; border-radius: 4cqw; background: #0C0D10; }
.v3 .ph-batt { width: 7cqw; height: 3.4cqw; box-shadow: inset 0 0 0 1px var(--ink); position: relative; }
.v3 .ph-batt::after { content: ""; position: absolute; inset: 1.2px 30% 1.2px 1.2px; background: var(--ink); }
.v3 .ph-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-top: 6cqw; padding-bottom: 4cqw; border-bottom: 1.5px solid var(--ink); }
.v3 .ph-firm { font: 500 1em/1.2 var(--sans); }
.v3 .ph-title { margin-top: 5cqw; font: 400 7.4cqw/1.1 var(--serif); font-variation-settings: 'opsz' 36; letter-spacing: -0.01em; }
.v3 .ph-steps { margin-top: 3cqw; }
.v3 .ph-step { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when state" "name state"; column-gap: 3cqw; align-items: center; padding: 3cqw 0; border-bottom: 1px solid var(--rule-light); }
.v3 .ph-when { grid-area: when; font-size: max(12px, .86em); color: var(--slate); }
.v3 .ph-name { grid-area: name; font: 400 1.14em/1.2 var(--serif); font-variation-settings: 'opsz' 24; }
.v3 .ph-step .status { grid-area: state; font-weight: 500; font-size: .92em; }
.v3 .ph-update { margin-top: auto; padding-top: 4cqw; font-size: .92em; line-height: 1.45; }
.v3 .ph-update-label { display: block; font-weight: 500; margin-bottom: 1cqw; }
.v3 .phone .cap { margin-top: 32px; max-width: 34ch; }

/* three across on hairlines */
.v3 .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--colgap); margin-top: clamp(48px, 5vw, 80px); }
.v3 .three li { display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1.5px solid var(--fg); }
.v3 .three-foot { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); margin-top: clamp(48px, 5vw, 80px); }
.v3 .three-foot > * { grid-column: 5 / span 8; }

/* a paper beside text */
.v3 .split-paper { align-items: center; }
.v3 .paper-one { grid-column: 1 / span 5; }
.v3 .sheets-one { position: relative; height: auto; }
.v3 .sheets-one .sheet { position: relative; width: min(400px, 92%); left: auto; right: auto; top: auto; transform: rotate(-3deg); }
.v3 .paper-one .cap { margin-top: 32px; }
.v3 .ch-steward .split-main { grid-column: 7 / span 6; display: grid; gap: 28px; }

/* "what we don't build", "what we are not": a statement row */
.v3 .ch-not { padding-top: clamp(48px, 5vw, 80px); }
.v3 .not-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 32px; padding-top: 40px; border-top: 1.5px solid var(--fg); }
.v3 .not-grid > .ch-title { grid-column: 1 / span 5; }
.v3 .not-grid > :not(.ch-title) { grid-column: 6 / span 7; }
.v3 .never li { position: relative; padding: 18px 0 18px 40px; border-bottom: 1px solid var(--rule); font: 400 var(--rn-step-5)/1.3 var(--serif); font-variation-settings: 'opsz' 24; }
.v3 .never li::before { content: ""; position: absolute; left: 0; top: calc(18px + .55em); width: 18px; height: 1.5px; background: var(--fg); transform: rotate(-45deg); }
.v3 .never li::after { content: ""; position: absolute; left: 0; top: calc(18px + .55em); width: 18px; height: 1.5px; background: var(--fg); transform: rotate(45deg); }

/* ======================================================================================
   Objects
   ====================================================================================== */
/* ---------- the lens: the mark's brass node, as a magnifier ---------- */
.v3 .lens { position: absolute; width: var(--lens, 120px); aspect-ratio: 1; pointer-events: none; }
.v3 .lens-ring { position: absolute; inset: 0; border-radius: 50%; padding: 9%;
  background: conic-gradient(from 210deg, #7A5E2C, #E2C88E 18%, #A5844B 36%, #6B5226 52%, #C4A56C 70%, #8E6F38 86%, #7A5E2C);
  box-shadow: 0 1px 0 rgb(255 240 210 / .4) inset, 18px 30px 40px -14px rgb(0 0 0 / .6), 0 0 60px 6px rgb(196 165 108 / .18); }
.v3 .lens-glass { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .55), rgb(255 255 255 / .08) 34%, rgb(241 239 234 / .06) 60%, rgb(23 26 33 / .18) 100%);
  box-shadow: inset 0 0 0 1px rgb(23 26 33 / .35), inset -6px -10px 18px rgb(23 26 33 / .18);
  backdrop-filter: saturate(1.15) brightness(1.06); }
.v3 .lens-handle { position: absolute; left: 78%; top: 78%; width: 26%; height: 82%; border-radius: 3px; transform-origin: 50% 0; transform: rotate(-45deg);
  background: linear-gradient(90deg, #5E4820, #C4A56C 40%, #E2C88E 52%, #8E6F38 80%, #5E4820); box-shadow: 14px 20px 26px -10px rgb(0 0 0 / .55); }

/* ---------- the laptop, taken apart (What we build) ---------- */
.v3 .lp { position: relative; }
.v3 .lp-stage { position: relative; aspect-ratio: 1.28; container-type: inline-size; }
.v3 .lp-machine { position: absolute; left: 7%; top: 15%; width: 80%; }
.v3 .lp-lid { position: relative; aspect-ratio: 16 / 10.4; padding: 2.2%; border-radius: 2.4cqw 2.4cqw 0 0; background: #0C0D10; box-shadow: inset 0 0 0 1px #4A4E57, inset 0 0 0 .9cqw #15171C, 0 0 0 1px rgb(196 165 108 / .35), var(--rn-shadow-object); }
.v3 .lp-display { height: 100%; padding: 4% 5%; background: linear-gradient(160deg, #1D212A, #12151B 70%); color: var(--mist); overflow: hidden; }
.v3 .lp-bar { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding-bottom: 2cqw; border-bottom: 1px solid var(--rule-dark); font: 500 max(12px, 1.9cqw)/1.3 var(--sans); color: var(--bone); }
.v3 .lp-bar .tag { font-size: max(12px, 1.6cqw); line-height: 1.3; }
.v3 .lp-h { margin-top: 3cqw; font: 300 max(16px, 4.2cqw)/1.05 var(--serif); font-variation-settings: 'opsz' 48; color: var(--bone); letter-spacing: -0.02em; }
.v3 .lp-rows { display: grid; gap: 2.4cqw; margin-top: 3.4cqw; }
.v3 .lp-rows span { height: 1.4cqw; background: rgb(173 169 161 / .22); }
.v3 .lp-rows .short { width: 60%; }
.v3 .lp-deck { position: relative; width: 116%; margin-left: -8%; height: 4.4cqw; clip-path: polygon(4% 0, 96% 0, 100% 72%, 99% 100%, 1% 100%, 0 72%); background: linear-gradient(180deg, #3A3E47, #1A1D24 40%, #0C0D10); box-shadow: 0 1px 0 rgb(196 165 108 / .5) inset; }
.v3 .lp-keys { position: absolute; left: 14%; right: 14%; top: 10%; height: 34%; background: repeating-linear-gradient(90deg, #0C0D10 0 5%, transparent 5% 6.5%), repeating-linear-gradient(0deg, #0C0D10 0 40%, transparent 40% 50%); opacity: .8; }
.v3 .lp-pad { position: absolute; left: 40%; width: 20%; top: 52%; height: 22%; box-shadow: inset 0 0 0 1px #4A4E57; }
.v3 .gc-set { position: absolute; inset: 0; }
.v3 .gc {
  position: absolute; width: 37%; display: grid; gap: 1.2cqw; padding: 2.4cqw 2.6cqw 2.6cqw;
  background: linear-gradient(160deg, rgb(38 42 51 / .78), rgb(17 19 24 / .86)); color: var(--bone);
  box-shadow: inset 0 0 0 1px rgb(196 165 108 / .6), inset 0 1px 0 rgb(255 255 255 / .06), 16px 26px 40px -16px rgb(0 0 0 / .7);
  backdrop-filter: blur(6px);
}
.v3 .gc-top { display: flex; align-items: baseline; gap: 2cqw; }
.v3 .gc .idx { font-size: 12px; line-height: 16px; }
.v3 .gc-when { font-size: 12px; line-height: 16px; color: var(--mist); }
.v3 .gc-name { font: 400 max(16px, 2.9cqw)/1.15 var(--serif); font-variation-settings: 'opsz' 24; letter-spacing: -0.01em; text-wrap: balance; }
.v3 .gc .status { font: 500 12px/16px var(--sans); color: var(--brass-lit); }
.v3 .gc-1 { left: -2%; top: 0; transform: rotate(-5deg); }
.v3 .gc-2 { left: 1%; top: 42%; transform: rotate(-2deg); }
.v3 .gc-3 { left: 58%; top: -3%; transform: rotate(3.5deg); }
.v3 .gc-4 { left: 64%; top: 30%; transform: rotate(1.5deg); }
.v3 .gc-5 { left: 30%; top: 66%; transform: rotate(-1deg); }
.v3 .lp-lens { --lens: 18cqw; left: 74%; top: 64%; }
.v3 .lp .cap { position: relative; max-width: 44ch; margin-top: 20px; }

/* ---------- paper: specimens (the home page's sheets) ---------- */
.v3 .sheets { position: relative; height: clamp(560px, 50vw, 700px); }
.v3 .sheet { position: absolute; width: 60%; aspect-ratio: 8.5 / 11; container-type: inline-size; background: var(--letter) var(--grain-paper); color: var(--ink); box-shadow: var(--rn-shadow-sheet); }
.v3 .sheet-in { height: 100%; overflow: hidden; padding: 8cqw 8cqw 6cqw; font-size: max(12px, 3.4cqw); line-height: 1.45; display: flex; flex-direction: column; }
.v3 .sheet-a { left: 0; top: 10%; transform: rotate(-6deg); z-index: 1; }
.v3 .sheet-c { right: 0; top: 16%; transform: rotate(5.5deg); z-index: 2; }
.v3 .sheet-b { left: 21%; top: 0; transform: rotate(.8deg); z-index: 3; }
.v3 .sh-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 4cqw; border-bottom: 1px solid var(--ink); }
.v3 .sh-head img { width: 44cqw; height: auto; }
.v3 .sh-ref { font-size: max(12px, 3cqw); color: var(--slate); }
.v3 .sh-kind { margin-top: 5.5cqw; font: 500 max(12px, 3.2cqw)/1.3 var(--sans); color: var(--burnished); }
.v3 .sh-title { font: 300 max(18px, 8.4cqw)/1.05 var(--serif); font-variation-settings: 'opsz' 48; letter-spacing: -0.02em; margin-top: 1.5cqw; }
.v3 .sh-sub { margin-top: 2.4cqw; font: 400 max(12px, 3.8cqw)/1.35 var(--serif); }
.v3 .sh-h { margin-top: 4.6cqw; font: 500 max(12px, 3.2cqw)/1.3 var(--sans); padding-bottom: 1.6cqw; border-bottom: 1px solid var(--rule-light); }
.v3 .sh-p { margin-top: 2cqw; font: 400 max(12px, 3.4cqw)/1.45 var(--serif); }
.v3 .sh-table { width: 100%; margin-top: 1cqw; font: 400 max(12px, 3.3cqw)/1.3 var(--serif); }
.v3 .sh-table td { padding: 1.7cqw 0; border-bottom: 1px solid var(--rule-light); }
.v3 .sh-table td + td { text-align: right; font: 500 max(12px, 3cqw)/1.3 var(--sans); }
.v3 .sh-checks { margin-top: 3cqw; }
.v3 .sh-checks li { display: flex; align-items: center; gap: 2.6cqw; padding: 1.7cqw 0; border-bottom: 1px solid var(--rule-light); font: 400 max(12px, 3.4cqw)/1.3 var(--serif); }
.v3 .sh-checks .status { font-size: max(12px, 3.2cqw); gap: 0; }
.v3 .sh-lines { margin-top: 3.6cqw; display: grid; gap: 2.6cqw; }
.v3 .sh-lines span { height: 1.3cqw; min-height: 4px; background: var(--rule-light); }
.v3 .sh-lines .short { width: 55%; }
.v3 .sh-sign { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; font: 400 max(12px, 2.8cqw)/1.3 var(--sans); color: var(--slate); }
.v3 .sh-sign span { padding-top: 1.6cqw; border-top: 1px solid var(--ink); }
.v3 .sh-spec { margin-top: auto; padding-top: 4cqw; font: 500 max(12px, 2.9cqw)/1.3 var(--sans); color: var(--slate); }
/* the test-data label is pinned to the foot of the paper, so a long specimen can never clip it */
.v3 .sheet .sh-spec { position: absolute; z-index: 1; left: 8cqw; right: 8cqw; bottom: 0; margin: 0; padding: 2.4cqw 0 4.4cqw; background: var(--letter); }
.v3 .sheet-in { padding-bottom: 15cqw; }

/* ---------- the business card (the home page's) ---------- */
.v3 .bcard { position: absolute; width: min(100%, 440px); aspect-ratio: 3.5 / 2; container-type: inline-size; color: var(--ink); }
.v3 .bcard::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #0B0C0F; transform: translate(2px, 3px); box-shadow: inset 0 1px 0 #3A3E47, var(--rn-shadow-object); }
.v3 .bcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bone) var(--grain-paper); box-shadow: inset 0 0 0 .5px rgb(23 26 33 / .1); }
.v3 .bcard-in, .v3 .card-seal { position: relative; z-index: 2; }
.v3 .bcard-in { height: 100%; padding: 6.2cqw 6.6cqw; display: flex; flex-direction: column; }
.v3 .bc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4cqw; font: 400 5.4cqw/1 var(--serif); font-variation-settings: 'opsz' 36; }
.v3 .bc-top em { font-size: max(12px, 3.3cqw); }
.v3 .bc-rule { display: flex; align-items: center; gap: 1.4cqw; margin-top: 4cqw; }
.v3 .bc-rule span { flex: 1; height: 1.5px; background: var(--ink); }
.v3 .bc-rule i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--brass); }
.v3 .bc-person { margin-top: auto; font: 400 7.2cqw/1 var(--serif); font-variation-settings: 'opsz' 48; letter-spacing: -0.01em; }
.v3 .bc-title { font: 400 max(12px, 4.4cqw)/1.3 var(--serif); margin-top: 1cqw; }
.v3 .bc-contact { margin-top: 3.6cqw; font-size: max(12px, 3.6cqw); line-height: 1.5; }
.v3 .bcard-back { display: grid; place-items: center; }
.v3 .card-seal { width: 34cqw; height: 34cqw; }
.v3 .card-seal .foil { fill: var(--brass); }

/* ======================================================================================
   Law firms
   ====================================================================================== */
.v3 .clock { position: relative; }
.v3 .clock-ends { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.v3 .clock-end { font: 300 var(--rn-step-1)/.78 var(--serif); font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.04em; white-space: nowrap; margin-left: -.04em; }
.v3 .clock-end-r { margin-left: 0; margin-right: -.02em; }
.v3 .clock-pm { font-size: .22em; letter-spacing: 0; margin-left: .3em; vertical-align: .2em; font-weight: 400; color: var(--mist); }
.v3 .clock-span { flex: 1; align-self: center; display: flex; align-items: center; gap: 16px; font: 400 14px/20px var(--mono); color: var(--brass); padding-bottom: 8px; }
.v3 .clock-span::before, .v3 .clock-span::after { content: ""; flex: 1; height: 1px; background: var(--rule-dark); }
.v3 .axis { position: relative; height: 56px; margin-top: 40px; }
.v3 .axis-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mist); transform-origin: 0 50%; }
.v3 .tick { position: absolute; top: 0; left: calc(var(--t) / 15 * 100%); width: 1px; height: 10px; }
.v3 .tick::before { content: ""; position: absolute; inset: 0; background: var(--mist); }
.v3 .tick.major { height: 18px; }
.v3 .tick.major::before { background: var(--bone); }
.v3 .tick b { position: absolute; top: 26px; left: 0; transform: translateX(-50%); font: 400 14px/20px var(--mono); color: var(--mist); white-space: nowrap; }
.v3 .axis .tick:nth-child(2) b, .v3 .axis .tick:last-child b { display: none; }
.v3 .track { position: relative; height: 440px; margin-top: -56px; }
.v3 .node { position: absolute; top: -6px; left: calc(var(--t) / 15 * 100%); width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px var(--night); z-index: 2; }
.v3 .lead { position: absolute; top: 0; width: 1px; height: 72px; background: var(--rule-dark); }
.v3 .lead-0 { left: 0; }
.v3 .lead-1 { left: calc(11 / 15 * 100%); }
.v3 .bracket { position: absolute; top: 0; left: calc(14 / 15 * 100%); right: 0; height: 40px; border: 1px solid var(--rule-dark); border-top: 0; }
.v3 .bracket::after { content: ""; position: absolute; right: -1px; top: 40px; width: 1px; height: 32px; background: var(--rule-dark); }
.v3 .events { position: absolute; inset: 0; }
.v3 .event { position: absolute; top: 80px; display: grid; width: max-content; max-width: 290px; }
.v3 .ev-0 { left: 0; padding-left: 20px; }
.v3 .ev-1 { right: calc(4 / 15 * 100%); padding-right: 20px; text-align: right; }
.v3 .ev-c { right: 0; top: calc(80px + var(--row) * 108px); padding-right: 20px; text-align: right; }
.v3 .ev-when { font: 400 14px/20px var(--mono); color: var(--brass); }
.v3 .ev-name { font: 400 21px/28px var(--serif); font-variation-settings: 'opsz' 24; color: var(--bone); text-wrap: balance; }
.v3 .ev-note { font: 400 14px/20px var(--sans); color: var(--mist); text-wrap: pretty; }
.v3 .ev-gap { display: none; }
.v3 .clock-cap { position: absolute; left: 20px; bottom: 24px; max-width: 30ch; }
/* CSP: tick and row positions by class, never inline style */
.tk-0{--t:0}.tk-1{--t:1}.tk-2{--t:2}.tk-3{--t:3}.tk-4{--t:4}.tk-5{--t:5}.tk-6{--t:6}.tk-7{--t:7}.tk-8{--t:8}.tk-9{--t:9}.tk-10{--t:10}.tk-11{--t:11}.tk-12{--t:12}.tk-13{--t:13}.tk-14{--t:14}.tk-15{--t:15}.rw-0{--row:0}.rw-1{--row:1}.rw-2{--row:2}
/* the engagement letter, laid on the night at 9:58, hanging over the edge into the next chapter */
.v3 .eng { position: absolute; z-index: 3; left: 30%; top: 150px; width: clamp(200px, 17vw, 250px); aspect-ratio: 8.5 / 11; container-type: inline-size; background: var(--letter) var(--grain-paper); color: var(--ink); transform: rotate(-3deg); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(0 0 0 / .6); }
.v3 .eng-in { height: 100%; padding: 9cqw 9cqw 7cqw; display: flex; flex-direction: column; overflow: hidden; font-size: max(12px, 4cqw); }
.v3 .eng .sh-head { flex-direction: column; align-items: flex-start; gap: 2cqw; }
.v3 .eng-firm { font: 400 max(15px, 6.4cqw)/1.1 var(--serif); }
.v3 .eng .sh-ref { font-size: 12px; }
.v3 .eng-to { margin-top: 7cqw; font: 400 max(13px, 4.6cqw)/1.3 var(--serif); }
.v3 .eng .sh-h { font-size: max(12px, 4cqw); }
.v3 .eng-sign { margin-top: auto; display: grid; gap: 1cqw; }
.v3 .sig { width: 70%; height: auto; color: var(--ink); }
.v3 .sig path { stroke-dasharray: 520; stroke-dashoffset: 0; }
.v3 .eng-signed { padding-top: 2cqw; border-top: 1px solid var(--ink); font: 500 max(12px, 3.6cqw)/1.3 var(--sans); }
.v3 .eng .sh-spec { margin-top: 3cqw; padding-top: 0; }

/* Sound familiar: the five sentences, set large and staggered */
.v3 .ch-familiar { padding-top: clamp(200px, 20vw, 300px); }
.v3 .familiar-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 40px; }
.v3 .familiar-grid > .ch-title { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
.v3 .familiar { grid-column: 5 / span 8; }
.v3 .familiar li { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.v3 .familiar li:first-child { padding-top: 0; }
.v3 .familiar li:nth-child(even) { padding-left: clamp(0px, 6vw, 96px); }
.v3 .familiar-line { font: 300 var(--rn-step-4)/1.1 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
.v3 .familiar-ask { grid-column: 5 / span 8; }

/* the ledger on a screen, across the Ink-to-Bone seam */
.v3 .seam-ledger { --seam-at: clamp(360px, 34vw, 480px); padding-bottom: var(--sec); }
.v3 .ledger-title { padding-bottom: clamp(40px, 4vw, 64px); max-width: 20ch; }
.v3 .screen-ledger .screen-body > div { background: var(--bone); }
.v3 .lg-rows { padding: 8px 28px 16px; }
.v3 .lg-rows li { display: grid; grid-template-columns: 48px minmax(0, 18ch) minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule-light); }
.v3 .lg-rows li:last-child { border-bottom: 0; }
.v3 .lg-rows .idx { color: var(--burnished); }
.v3 .lg-name { font: 400 21px/28px var(--serif); font-variation-settings: 'opsz' 24; }
.v3 .lg-text { font: 400 17px/26px var(--sans); color: var(--ink); }
.v3 .ledger-foot { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); margin-top: clamp(48px, 5vw, 80px); color: var(--ink); --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); }
.v3 .ledger-foot > * { grid-column: 5 / span 8; }
.v3 .ledger-foot .rn-fn-node { background: var(--burnished); }

/* a pair of short sections, one on a Vellum panel */
.v3 .pair { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 32px; align-items: stretch; }
.v3 .pair > div { display: grid; gap: 24px; align-content: start; }
.v3 .pair-a { grid-column: 1 / span 7; padding: clamp(32px, 4vw, 64px); background: var(--vellum); }
.v3 .pair-b { grid-column: 9 / span 4; padding-top: clamp(32px, 4vw, 64px); }
.v3 .pair-dark .pair-a { background: var(--ink-deep); box-shadow: inset 0 0 0 1px var(--rule-dark); }
.v3 .ch-pair { padding-top: clamp(64px, 6vw, 112px); }
.v3 .ch-policy .split-main { grid-column: 7 / span 6; padding-top: 12px; }
.v3 .record { display: grid; gap: 32px; padding-top: 40px; border-top: 1.5px solid var(--fg); }
.v3 .ch-record { padding-top: 0; }
.v3 .paid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 40px; }
.v3 .paid > .ch-title { grid-column: 1 / span 8; max-width: 20ch; }
.v3 .paid-cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--colgap); }
.v3 .paid > .rn-notes { grid-column: 7 / span 6; margin-top: 0; }
.v3 .ch-paid { padding-top: 0; }

/* ======================================================================================
   Other professions: the pile of intake forms
   ====================================================================================== */
.v3 .ch-stack { padding-top: 0; z-index: 3; }
.v3 .stack-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); align-items: start; }
.v3 .pile { grid-column: 1 / span 6; position: sticky; top: calc(var(--nav-h) + 24px); margin-top: calc(-1 * clamp(64px, 7vw, 112px)); }
.v3 .pile-sheets { position: relative; height: min(660px, calc(100vh - var(--nav-h) - 120px)); }
.v3 .pile-sheets:focus-visible { outline-offset: 8px; }
.v3 .fsheet { position: absolute; left: 50%; top: 2%; height: 92%; aspect-ratio: 8.5 / 11; container-type: inline-size; margin-left: calc(-0.5 * 92% * 8.5 / 11 * 1.2); background: var(--letter) var(--grain-paper); color: var(--ink); box-shadow: var(--rn-shadow-sheet), 24px 44px 70px -30px rgb(0 0 0 / .55); transition: transform 800ms var(--ease-out), opacity 500ms var(--ease-out); }
.v3 .fsheet-1 { transform: translate(-10%, 2%) rotate(-6deg); }
.v3 .fsheet-2 { transform: translate(6%, 1%) rotate(4deg); }
.v3 .fsheet-3 { transform: translate(-4%, -1%) rotate(-2.5deg); }
.v3 .fsheet-4 { transform: translate(8%, 2%) rotate(3deg); }
.v3 .fsheet-5 { transform: translate(-6%, 1%) rotate(2deg); }
.v3 .fsheet-6 { transform: translate(0, 0) rotate(-.6deg); }
.v3 .fsheet-in { height: 100%; overflow: hidden; padding: 8cqw 8cqw 6cqw; display: flex; flex-direction: column; font-size: max(12px, 3.4cqw); }
.v3 .fs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 3.6cqw; border-bottom: 1.5px solid var(--ink); }
.v3 .fs-firm { font: 400 max(15px, 5.6cqw)/1.1 var(--serif); font-variation-settings: 'opsz' 36; }
.v3 .fs-head .tag { flex: none; }
.v3 .fs-kind { margin-top: 5cqw; font: 300 max(18px, 8cqw)/1.05 var(--serif); font-variation-settings: 'opsz' 48; letter-spacing: -0.02em; }
.v3 .fs-fields { margin-top: 5cqw; display: grid; gap: 3cqw; }
.v3 .fs-fields div { display: grid; gap: .6cqw; }
.v3 .fs-fields dt { font: 500 max(12px, 2.9cqw)/1.3 var(--sans); color: var(--slate); }
.v3 .fs-fields dd { padding: 1.6cqw 2.4cqw; box-shadow: inset 0 0 0 1px var(--rn-c-control); background: var(--bone); font: 400 max(12px, 3.8cqw)/1.3 var(--serif); }
.v3 .fs-checks { margin-top: 5cqw; }
.v3 .fs-checks li { display: flex; align-items: center; gap: 2.6cqw; padding: 1.8cqw 0; border-bottom: 1px solid var(--rule-light); font: 400 max(12px, 3.5cqw)/1.3 var(--serif); }
.v3 .fs-checks .status { gap: 0; }
.v3 .fs-sign { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding-top: 2cqw; border-top: 1px solid var(--ink); font: 500 max(12px, 3cqw)/1.3 var(--sans); }
.v3 .fs-sign .mono { font-weight: 400; }
.v3 .fsheet .sh-spec { padding-top: 2.6cqw; margin-top: 0; }
.v3 .pile .cap { margin-top: 28px; }
/* with pages.js: the current form comes up onto the pile; the ones still to come wait below the desk */
.v3 .pile-sheets[data-active] .fsheet { transition: transform 800ms var(--ease-out), opacity 500ms var(--ease-out); }
.v3 .pile-sheets[data-active] .fsheet.is-waiting { opacity: 0; transform: translate(0, 40%) rotate(4deg); }
.v3 .pile-sheets[data-active] .fsheet.is-current { transform: translate(0, -1%) rotate(-.6deg); }
.v3 .stack-text { grid-column: 8 / span 5; }
.v3 .prof { display: grid; gap: 20px; align-content: center; min-height: 82vh; padding-block: 56px; }
.v3 .prof-title { font: 300 var(--rn-step-3)/1.04 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.022em; text-wrap: balance; }
.v3 .pain { font: 400 var(--rn-step-5)/1.36 var(--serif); font-variation-settings: 'opsz' 24; color: var(--bone); }
.v3 .facts { display: grid; gap: 0; margin-top: 8px; }
.v3 .facts > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.v3 .facts dt { font: 500 14px/20px var(--sans); color: var(--brass-lit); }
.v3 .facts dd { margin-top: 6px; font: 400 17px/28px var(--sans); color: var(--bone); }
.v3 .ch-record-prof { padding-top: clamp(48px, 5vw, 96px); }
.v3 .pair-actions { margin-top: 8px; }

/* ======================================================================================
   How we work: the papers come forward as each stage scrolls
   ====================================================================================== */
.v3 .ch-first { padding-top: 0; padding-bottom: clamp(48px, 5vw, 80px); }
.v3 .first-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 28px; padding-top: 40px; border-top: 1px solid var(--rule); }
.v3 .first-grid > .ch-sub { grid-column: 1 / span 5; }
.v3 .first-body { grid-column: 7 / span 6; }
.v3 .ch-stages { padding-top: 0; isolation: isolate; }
.v3 .stages-ground { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: clamp(160px, 16vw, 240px); background: var(--night) var(--grain-ink); }
.v3 .stages-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); align-items: start; }
.v3 .desk { grid-column: 1 / span 6; position: sticky; top: calc(var(--nav-h) + 32px); padding-top: 24px; }
.v3 .desk .cap { margin-top: 24px; color: var(--slate); }
.v3 .sheets[data-active] .sheet { transition: transform 800ms var(--ease-out), box-shadow 800ms var(--ease-out); }
.v3 .sheets[data-active="1"] .sheet-a { transform: translate(14%, -4%) rotate(-1deg) scale(1.04); z-index: 5; box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -30px rgb(23 26 33 / .45); }
.v3 .sheets[data-active="2"] .sheet-b { transform: translate(0, -4%) rotate(0) scale(1.04); z-index: 5; box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -30px rgb(23 26 33 / .45); }
.v3 .sheets[data-active="3"] .sheet-c { transform: translate(-14%, -4%) rotate(1deg) scale(1.04); z-index: 5; box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -30px rgb(23 26 33 / .45); }
.v3 .sheets[data-active="1"] .sheet:not(.sheet-a), .v3 .sheets[data-active="2"] .sheet:not(.sheet-b), .v3 .sheets[data-active="3"] .sheet:not(.sheet-c) { filter: brightness(.96); }
.v3 .stages-text { grid-column: 8 / span 5; padding-top: calc(clamp(160px, 16vw, 240px) + 64px); }
.v3 .stage { display: grid; gap: 24px; padding-bottom: clamp(96px, 10vw, 160px); }
.v3 .stage .ch-title { margin-top: -8px; }
.v3 .stage .item-name { margin-top: 16px; }
.v3 .stage .body { color: var(--ink); }
.v3 .ch-terms { padding-top: 0; }
.v3 .terms { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 64px; align-items: start; }
.v3 .ask { grid-column: 1 / span 5; padding: clamp(32px, 4vw, 56px); background: var(--vellum); display: grid; gap: 24px; }
.v3 .ask-list li { padding: 14px 0; border-top: 1px solid var(--rule-light); font: 400 var(--rn-text-body)/var(--rn-lh-body) var(--sans); }
.v3 .nevers { grid-column: 7 / span 6; display: grid; gap: 32px; }
.v3 .never-grid li { font-size: 21px; line-height: 28px; }

/* ======================================================================================
   Principal: the letter, and the card laid on the night beside it
   ====================================================================================== */
.v3 .pr { position: relative; isolation: isolate; padding: calc(var(--nav-h) + clamp(56px, 7vw, 112px)) 0 var(--sec); }
.v3 .pr .op-lamp { background: radial-gradient(ellipse min(520px, 44vw) min(620px, 70vh) at 22% 40%, var(--rn-brass-glow), rgb(196 165 108 / .05) 55%, transparent 100%); }
.v3 .pr-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 64px; align-items: start; }
.v3 .pr-side { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: clamp(40px, 5vw, 72px); }
.v3 .pr-title { grid-column: 1 / -1; max-width: 9ch; }
.v3 .pr-side > * { grid-column: 1 / -1; }
.v3 .pr-cards { position: relative; }
.v3 .pr-flip { position: relative; height: clamp(300px, 27vw, 380px); }
.v3 .pr-flip .bcard { width: 82%; }
.v3 .pr-flip .bcard-back { right: 0; top: 0; transform: rotate(-7deg); }
.v3 .pr-flip .bcard-face { left: 0; top: 30%; transform: rotate(3.5deg); }
.v3 .pr-cards .cap { margin-top: 24px; }
.v3 .pr-letter { grid-column: 6 / span 7; }
.v3 .letter-sheet { --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); --focus: var(--burnished); position: relative; background: var(--letter) var(--grain-paper); color: var(--ink); padding: clamp(28px, 5vw, 72px); transform: rotate(1.1deg); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(0 0 0 / .65); }
.v3 .letter-sheet .rn-fn-node { background: var(--burnished); }
.v3 .lt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.v3 .lt-head img { width: min(196px, 45%); }
.v3 .lt-from { text-align: right; font: 400 14px/22px var(--serif); }
.v3 .lt-from .mono { font-size: 13px; }
.v3 .lt-rule { display: flex; align-items: center; gap: 8px; margin: 32px 0 40px; }
.v3 .lt-rule span { flex: 1; height: 1px; background: var(--ink); }
.v3 .lt-rule::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.v3 .lt-body { display: grid; gap: 20px; font: 400 20px/32px var(--serif); font-variation-settings: 'opsz' 18; max-width: 62ch; }
.v3 .lt-body p:first-child::first-line { font-variant-caps: normal; }
.v3 .signature { display: grid; gap: 2px; margin-top: 40px; }
.v3 .signature-name { font: 400 var(--rn-step-5)/1.2 var(--serif); font-style: italic; }
.v3 .signature-title { font: 400 14px/20px var(--sans); color: var(--slate); }
.v3 .letter-contact { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule-light); font: 400 14px/24px var(--sans); }
.v3 .pr-actions { margin-top: 56px; }

/* ======================================================================================
   Discretion: the clause register under the lens; the handover list
   ====================================================================================== */
.v3 .ch-register { padding-top: 0; padding-bottom: clamp(120px, 12vw, 180px); z-index: 3; }
.v3 .register { --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); --idx: var(--burnished); --focus: var(--burnished); position: relative; margin: calc(-1 * clamp(64px, 7vw, 112px)) 0 0 clamp(0px, 8vw, 120px); padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px) clamp(32px, 4vw, 56px) clamp(64px, 9vw, 136px); background: var(--letter) var(--grain-paper); color: var(--ink); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(0 0 0 / .6); }
.v3 .register .rn-fn-node { background: var(--burnished); }
.v3 .reg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); font: 500 14px/20px var(--sans); }
.v3 .reg-kind { font: 300 var(--rn-step-5)/1.2 var(--serif); }
.v3 .reg-group { padding-top: clamp(40px, 4vw, 56px); }
.v3 .reg-title { font: 300 var(--rn-step-4)/1.06 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; }
.v3 .reg-rows { margin-top: 20px; border-top: 1px solid var(--rule-light); }
.v3 .reg-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--rule-light); transition: background-color 400ms var(--ease); }
.v3 .reg-row .idx { transition: transform 500ms var(--ease-out); transform-origin: 20% 60%; }
.v3 .reg-text { font: 400 20px/31px var(--serif); font-variation-settings: 'opsz' 18; max-width: 56ch; }
.v3 .reg-row.is-under { background: rgb(196 165 108 / .14); }
.v3 .reg-row.is-under .idx { transform: scale(1.7); }
/* The magnifier (change list item 5, 2026-10-23): a rendered brass lens (assets/img/lens-cutout, glass left out)
   resting on the row in focus, its glass showing that row's own words enlarged. pages.js places it and fills the
   glass; in the picture the glass is centred at 30.4 % across and down, with an opening of 21.5 % radius. */
.v3 .mag { --size: clamp(190px, 15vw, 240px); position: absolute; left: 0; top: 0; z-index: 4; width: var(--size); height: var(--size); pointer-events: none; opacity: 0; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 700ms var(--ease-out), opacity 500ms var(--ease); filter: drop-shadow(12px 20px 14px rgb(23 26 33 / .26)); }
.v3 .mag.is-set { opacity: 1; }
.v3 .mag-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3 .mag-view { position: absolute; left: 8.9%; top: 8.9%; width: 43%; height: 43%; border-radius: 50%; overflow: hidden; background: #EDE7DC; }
.v3 .mag-view::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 34%), radial-gradient(circle at 70% 78%, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 30%); box-shadow: inset 0 0 14px rgb(255 255 255 / .6), inset 0 -4px 10px rgb(23 26 33 / .10); }
.v3 .mag-content { position: absolute; left: var(--cl, 0px); top: var(--ct, 0px); width: var(--tw, 300px); transform-origin: var(--ox, 0px) var(--oy, 0px); transform: scale(1.45); font: 400 20px/31px var(--serif); font-variation-settings: 'opsz' 18; color: var(--ink); transition: opacity 200ms var(--ease); }
.v3 .mag-content.is-hidden { opacity: 0; }
.v3 .mag-content .rn-fn { display: none; }

.v3 .ch-leave { padding-top: 0; }
.v3 .leave-grid { align-items: start; }
.v3 .leave-text { grid-column: 1 / span 5; display: grid; gap: 28px; padding-top: clamp(96px, 10vw, 160px); }
.v3 .handover { --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); grid-column: 7 / span 6; position: relative; z-index: 3; margin-top: calc(-1 * clamp(80px, 9vw, 140px)); padding: clamp(28px, 4vw, 56px); background: var(--letter) var(--grain-paper); color: var(--ink); transform: rotate(-1.2deg); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(23 26 33 / .45); }
.v3 .handover .rn-fn-node { background: var(--burnished); }
.v3 .ho-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.v3 .ho-kind { font: 300 var(--rn-step-4)/1 var(--serif); letter-spacing: -0.02em; }
.v3 .ho-ref { font-size: 14px; color: var(--slate); }
.v3 .ho-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-light); font: 400 20px/30px var(--serif); }
.v3 .ho-list .status { font-size: 20px; gap: 0; transform: translateY(2px); }

/* ======================================================================================
   Inquiry: the form set on a letter sheet; what happens next beside it
   ====================================================================================== */
.v3 .inquiry { position: relative; z-index: 3; padding-bottom: var(--sec); }
.v3 .inquiry-grid { display: grid; grid-template-columns: var(--cols); grid-template-rows: auto 1fr; grid-template-areas: "main main main main main main main main . next next next" "main main main main main main main main . direct direct direct"; column-gap: var(--colgap); row-gap: 48px; align-items: start; }
.v3 .inquiry-main { grid-area: main; min-width: 0; }
.v3 .next { grid-area: next; padding-top: 40px; }
.v3 .direct { grid-area: direct; display: grid; gap: 16px; align-content: start; }
.v3 .form-sheet { --fg: var(--ink); --muted: var(--slate); --rule: var(--rule-light); --focus: var(--burnished); --on: var(--bone); --btn-hover: var(--rule-dark); --btn-hover-fg: var(--bone); position: relative; margin-top: calc(-1 * clamp(48px, 6vw, 96px)); padding: clamp(24px, 5vw, 72px); background: var(--letter) var(--grain-paper); color: var(--ink); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(0 0 0 / .65); }
.v3 .form-sheet::before { content: ""; position: absolute; left: clamp(24px, 5vw, 72px); right: clamp(24px, 5vw, 72px); top: clamp(16px, 2.4vw, 32px); height: 1px; background: var(--ink); }
.v3 .form-sheet::after { content: ""; position: absolute; right: calc(clamp(24px, 5vw, 72px) - 4px); top: calc(clamp(16px, 2.4vw, 32px) - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.v3 .form-sheet .rn-fn-node { background: var(--burnished); }
.v3 .form-note { font: 400 var(--rn-step-5)/1.36 var(--serif); font-variation-settings: 'opsz' 24; max-width: 34ch; margin: 16px 0 40px; }
.v3 .next-title { font: 300 var(--rn-step-5)/1.2 var(--serif); color: var(--bone); }
.v3 .next-steps { position: relative; margin-top: 28px; display: grid; gap: 32px; }
.v3 .next-steps::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--rule-dark); }
.v3 .next-steps li { position: relative; padding-left: 36px; font: 400 17px/28px var(--sans); color: var(--bone); }
.v3 .next-steps li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px var(--ink); }
.v3 .next-when { display: block; font: 500 14px/20px var(--sans); color: var(--brass-lit); margin-bottom: 4px; }
.v3 .direct .contact-stack { font-size: 0; line-height: 0; }
.v3 .direct .contact-stack span, .v3 .direct .contact-stack a { display: block; width: fit-content; font: 400 17px/28px var(--sans); color: var(--bone); }
.v3 .letter-line { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule-dark); font: 400 15px/24px var(--sans); color: var(--mist); }
.v3 .letter-line a { color: var(--bone); white-space: normal; }

/* the form */
.v3 .form { display: grid; gap: 32px; }
.v3 .form-required { margin-top: -8px; }
.v3 .field { display: grid; gap: 8px; min-width: 0; }
.v3 .field > label, .v3 .field > legend { font: 500 16px/24px var(--sans); color: var(--ink); }
.v3 .field > legend { padding: 0; margin-bottom: 8px; }
.v3 .optional { font-weight: 400; color: var(--slate); }
.v3 .field-help, .v3 .field-count { font: 400 14px/22px var(--sans); color: var(--slate); max-width: 62ch; }
.v3 .field-count .rn-data { color: var(--ink); }
.v3 .field-count.is-over { color: var(--ink); font-weight: 500; }
.v3 .input { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--rn-c-control); border-radius: 0; background: var(--bone); color: var(--ink); font: 400 17px/24px var(--sans); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.v3 .input:hover { border-color: var(--ink); }
.v3 .input:focus-visible { outline: 2px solid var(--burnished); outline-offset: 2px; border-color: var(--ink); }
.v3 .textarea { min-height: 168px; resize: vertical; }
.v3 .select { appearance: none; padding-right: 48px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.v3 .choices { display: grid; gap: 4px; }
.v3 .choice { display: flex; align-items: center; gap: 14px; min-height: 44px; font: 400 17px/26px var(--sans); cursor: pointer; }
.v3 .choice input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--rn-c-control); border-radius: 0; background: var(--bone); cursor: pointer; transition: border-color 160ms var(--ease); }
.v3 .choice input::before { content: ""; width: 12px; height: 12px; background: var(--ink); transform: scale(0); transition: transform 160ms var(--ease-out); }
.v3 .choice input:checked { border-color: var(--ink); }
.v3 .choice input:checked::before { transform: scale(1); }
.v3 .choice:hover input { border-color: var(--ink); }
.v3 .choice input:focus-visible { outline: 2px solid var(--burnished); outline-offset: 3px; }
.v3 .field.is-error { border-left: 2px solid var(--ink); padding-left: 16px; }
.v3 .field-error { color: var(--ink); font: 500 15px/24px var(--sans); max-width: 62ch; }
.v3 .field-error.rn-status, .v3 .summary-title.rn-status, .v3 .notice-text.rn-status, .v3 .success-title.rn-status { display: flex; align-items: flex-start; }
.v3 .input[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.v3 .choice input[aria-invalid="true"] { border-color: var(--ink); }
.v3 .summary { padding: 24px; background: var(--vellum); border-left: 2px solid var(--ink); }
.v3 .summary:focus-visible { outline-offset: 4px; }
.v3 .summary-title { font: 500 17px/26px var(--sans); }
.v3 .summary-list { margin-top: 12px; display: grid; gap: 8px; }
.v3 .summary-list a { font: 400 15px/24px var(--sans); color: var(--ink); }
.v3 .notice { padding: 16px 24px; background: var(--vellum); border-left: 2px solid var(--ink); font: 400 15px/24px var(--sans); color: var(--ink); }
.v3 .form-sheet > noscript .notice { margin-bottom: 24px; }
.v3 .notice-error .notice-text { font-weight: 500; }
.v3 .notice-text.rn-status > span { flex: 1 1 auto; min-width: 0; }
.v3 .notice a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
.v3 .notice-text:focus:not(:focus-visible) { outline: none; }
.v3 .notice-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.v3 .notice-copy:not(:empty) { margin-top: 12px; }
.v3 .copy-fallback { margin-top: 12px; min-height: 168px; }
.v3 .form-actions { margin-top: 8px; }
.v3 .form-fine { max-width: 62ch; }
.v3 .form-fine + .micro { margin-top: -20px; }
.v3 .success { display: grid; gap: 16px; }
.v3 .success-title { font: 400 var(--rn-step-5)/1.3 var(--serif); gap: 14px; }
.v3 .success-title.rn-status::before { margin-top: 12px; }
.v3 .success-title:focus { outline: none; }
.v3 .success-title:focus-visible { outline: 2px solid var(--burnished); outline-offset: 3px; }
.v3 .success-sub { margin-top: 16px; font: 500 14px/20px var(--sans); }
.v3 .success-list { border-top: 1px solid var(--ink); }
.v3 .success-list div { padding-block: 12px; border-bottom: 1px solid var(--rule-light); display: grid; gap: 4px; }
.v3 .success-list dt { font: 500 14px/20px var(--sans); }
.v3 .success-list dd { white-space: pre-wrap; overflow-wrap: anywhere; }

/* the opening intake: five steps and a check-and-send page (inquiry.js shows one at a time) */
.v3 .steps-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; counter-reset: none; }
.v3 .steps-bar li { display: grid; gap: 8px; align-content: start; padding-top: 12px; border-top: 2px solid var(--rule-light); font: 400 13px/18px var(--sans); color: var(--slate); }
.v3 .steps-bar li.is-done { border-top-color: var(--ink); color: var(--ink); }
.v3 .steps-bar li[aria-current="step"] { border-top-color: var(--burnished); color: var(--ink); font-weight: 500; }
.v3 .steps-n { font: 400 12px/16px var(--mono); letter-spacing: .04em; }
.v3 .steps-bar li[aria-current="step"] .steps-n { color: var(--burnished); }
.v3 .step { display: grid; gap: 32px; min-width: 0; }
.v3 .step-title { display: grid; gap: 6px; font: 300 var(--rn-step-5)/1.2 var(--serif); color: var(--ink); }
.v3 .step-title:focus { outline: none; }
.v3 .step-title:focus-visible { outline: 2px solid var(--burnished); outline-offset: 4px; }
.v3 .step-n { font: 400 13px/18px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--burnished); }
.v3 .step-nav, .v3 .send-area .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v3 .step-nav [data-next] { margin-left: auto; }
.v3 .send-area { display: grid; gap: 32px; }
.v3 .send-area .form-actions [type="submit"] { margin-left: auto; }
.v3 .textarea-short { min-height: 104px; }
.v3 .choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.v3 .link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v3 .link-button:hover { text-decoration-thickness: 2px; }
.v3 .link-button:focus-visible { outline: 2px solid var(--burnished); outline-offset: 3px; }
.v3 .draft-notice p { display: block; }
.v3 .review { display: grid; gap: 32px; }
.v3 .review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; }
.v3 .review-title { font: 500 16px/24px var(--sans); }
.v3 .review-head .link-button { font: 400 15px/24px var(--sans); }
.v3 .review-empty { color: var(--slate); }

/* ======================================================================================
   Privacy: a reading column with a sticky contents rail
   ====================================================================================== */
.v3 .ch-read { padding-top: 0; z-index: 3; }
.v3 .read-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); align-items: start; }
.v3 .rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 16px; padding-top: clamp(48px, 5vw, 80px); }
.v3 .rail-title { font: 500 14px/20px var(--sans); color: var(--mist); }
.v3 .rail-list { border-top: 1.5px solid var(--bone); }
.v3 .rail-list a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--rule-dark); font: 400 15px/22px var(--sans); color: var(--mist); text-decoration: none; transition: color 200ms var(--ease); }
.v3 .rail-list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--brass); transform: scale(0); transition: transform 300ms var(--ease-out); }
.v3 .rail-list a:hover { color: var(--bone); text-decoration: underline; }
.v3 .rail-list a[aria-current="true"] { color: var(--bone); font-weight: 500; }
.v3 .rail-list a[aria-current="true"]::before { transform: scale(1); }
.v3 .rail-updated { font: 400 14px/20px var(--sans); color: var(--mist); }
.v3 .read { grid-column: 5 / span 8; display: grid; gap: clamp(48px, 5vw, 72px); margin-top: calc(-1 * clamp(56px, 6vw, 96px)); padding: clamp(32px, 5vw, 72px); background: var(--letter) var(--grain-paper); box-shadow: var(--rn-shadow-sheet), 30px 60px 90px -40px rgb(0 0 0 / .6); }
.v3 .read .rn-fn-node { background: var(--burnished); }
.v3 .read-sec { display: grid; gap: 20px; }
.v3 .read-title { font: 400 var(--rn-step-5)/1.2 var(--serif); font-variation-settings: 'opsz' 36; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.v3 .read .body { max-width: 64ch; }
/* Notes: the numbered checks a reader can do alone, and the date under each note's title on the index */
.v3 .read-steps { display: grid; gap: 0; max-width: 64ch; border-top: 1px solid var(--rule); }
.v3 .read-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.v3 .read-steps .idx { padding-top: 4px; }
.v3 .read-steps p { font: 400 var(--rn-text-body)/var(--rn-lh-body) var(--sans); }
.v3 .read-steps .mono, .v3 .read .body .mono { font-family: var(--mono); font-size: .9em; background: var(--bone); padding: 1px 5px; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
@media (max-width: 600px) { .v3 .read-steps .mono, .v3 .read .body .mono { white-space: normal; overflow-wrap: anywhere; } }
.v3 .read .note-date { font: 400 14px/20px var(--mono); color: var(--slate); }
.v3 .read .link-row { margin-top: 4px; }

/* ======================================================================================
   Closing band (continuous with the footer) and the card across its edge
   ====================================================================================== */
.v3 .close { position: relative; z-index: 2; padding: clamp(128px, 13vw, 200px) 0 clamp(64px, 6vw, 96px); }
.v3 .close-card { right: max(var(--gutter), calc((100vw - var(--max)) / 2)); top: 0; width: clamp(260px, 27vw, 400px); transform: translateY(-62%) rotate(-5deg); z-index: 3; }
.v3 .close-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--colgap); row-gap: 40px; }
.v3 .close-title { grid-column: 1 / span 8; font: 300 var(--rn-step-2)/.98 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.03em; text-wrap: balance; max-width: 13ch; }
.v3 .close-body { grid-column: 1 / span 7; display: grid; gap: 28px; }
.v3 .close-alt { font: 400 17px/28px var(--sans); color: var(--mist); max-width: 52ch; }
.v3 .close-alt strong { color: var(--bone); }
.v3 .close-alt a { color: var(--bone); }

/* ======================================================================================
   Footer (shared with the portal shell)
   ====================================================================================== */
.site-footer { position: relative; background: var(--rn-c-ink-deep) url(texture/grain-on-ink.svg); color: var(--rn-c-mist); border-top: 0; padding: clamp(56px, 7vw, 104px) 0 48px; }
.site-footer::before { display: none; }
.site-footer .wrap { width: 100%; max-width: calc(var(--rn-max) + 2 * var(--rn-gutter)); margin-inline: auto; padding-inline: var(--rn-gutter); }
/* the wordmark fits the measure at every width: "Reference Nexus" in Newsreader Light, tracked -0.035em, is 6.8em wide */
.site-footer .footer-word { margin: 0 0 0 -.05em; font: 300 min(184px, calc((min(100vw, calc(var(--rn-max) + 2 * var(--rn-gutter))) - 2 * var(--rn-gutter)) / 6.9))/.9 var(--rn-font-display); font-variation-settings: 'opsz' 72; letter-spacing: -0.035em; color: var(--rn-c-bone); white-space: nowrap; }
.site-footer .footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rn-col-gap); row-gap: 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rn-c-rule-dark); font: 400 14px/24px var(--rn-font-text); color: var(--rn-c-mist); }
.site-footer .footer-grid > * { grid-column: 5 / span 8; margin: 0; }
.site-footer .footer-tag { grid-column: 1 / span 4; grid-row: 1 / span 3; font: 400 21px/28px var(--rn-font-display); color: var(--rn-c-bone); }
.site-footer address { font-style: normal; }
.site-footer .contact-line span, .site-footer .contact-line a { white-space: nowrap; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer .footer-links a, .site-footer .contact-line a { color: var(--rn-c-bone); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer .footer-legal { max-width: 70ch; }
.site-footer :focus-visible { outline: 2px solid var(--rn-c-brass); outline-offset: 3px; }
@media (max-width: 59.99em) {
  .site-footer .footer-grid > *, .site-footer .footer-tag { grid-column: 1 / -1; grid-row: auto; }
}

/* ======================================================================================
   Motion: the static final frame is the default; pages.js adds the travel
   ====================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--rn-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ======================================================================================
   Tablet
   ====================================================================================== */
@media (max-width: 1099px) {
  .v3 .four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .v3 .sc-main { grid-template-columns: 140px minmax(0, 1.3fr) minmax(0, 1fr); }
  .v3 .stack-text { grid-column: 7 / span 6; }
  .v3 .event { max-width: 230px; }
  .v3 .eng { left: 30%; }
}

/* ======================================================================================
   Phone and small tablet: every chapter gets its own single-column composition
   ====================================================================================== */
@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .site-header .header-bar { min-height: 64px; }
  .site-header .brand img { width: 168px; }
  .v3 .op { padding-top: calc(var(--nav-h) + 48px); }
  .v3 .op-text { row-gap: 32px; }
  .v3 .op-title, .v3 .op-body { grid-column: 1 / -1; }
  .v3 .op-wide .op-text, .v3 .op-wide .op-object { grid-column: 1 / -1; margin-right: 0; margin-top: 0; }
  .v3 .op-actions .btn, .v3 .close-actions .btn, .v3 .pr-actions .btn, .v3 .form-actions .btn { width: 100%; }
  .v3 .step-nav .btn { flex: 1 1 0; justify-content: center; }
  .v3 .send-area .form-actions [type="submit"] { order: -1; margin-left: 0; }
  .v3 .steps-bar .steps-t { display: none; }
  .v3 .steps-bar li[aria-current="step"] .steps-t { display: block; position: absolute; left: 0; right: 0; bottom: 0; }
  .v3 .steps-bar { position: relative; padding-bottom: 22px; }
  .v3 .choices-2 { grid-template-columns: minmax(0, 1fr); }
  .v3 .lede { font-size: 19px; line-height: 28px; }

  .v3 .lp-stage { aspect-ratio: .92; }
  .v3 .lp-machine { left: 6%; top: 24%; width: 82%; }
  .v3 .gc { width: 50%; padding: 10px 12px 12px; gap: 6px; }
  .v3 .gc-name { font-size: 16px; }
  .v3 .gc-1 { left: 0; top: 0; }
  .v3 .gc-2 { left: 0; top: 30%; }
  .v3 .gc-3 { left: 50%; top: 6%; }
  .v3 .gc-4 { left: 48%; top: 38%; }
  .v3 .gc-5 { left: 16%; top: 62%; }
  .v3 .lp-lens { --lens: 22cqw; left: 74%; top: 70%; }

  .v3 .ch-head .ch-title, .v3 .ch-head .ch-lede { grid-column: 1 / -1; }
  .v3 .four { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .v3 .seam { --seam-at: 140px; }
  .v3 .seam-ground::before { display: none; }
  .v3 .screen { margin-inline: calc(-1 * var(--gutter) + 8px); }
  .v3 .sc-main { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .v3 .sc-rail, .v3 .sc-queue { display: none; }
  .v3 .sc-bar { padding: 10px 14px; flex-wrap: wrap; }
  .v3 .sc-col { padding: 16px 16px 8px; }
  .v3 .sc-ledger li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w s" "n s"; gap: 0 12px; font-size: 16px; }
  .v3 .sc-ledger li > :nth-child(1) { grid-area: w; }
  .v3 .sc-ledger li > :nth-child(2) { grid-area: n; }
  .v3 .sc-ledger li > :nth-child(3) { grid-area: s; }
  .v3 .seam .screen .cap { padding-inline: calc(var(--gutter) - 8px); }

  .v3 .split-aside, .v3 .split-main, .v3 .split > .ch-title, .v3 .paper-one, .v3 .ch-steward .split-main, .v3 .ch-policy .split-main, .v3 .ch-law-vis .split-main { grid-column: 1 / -1; }
  .v3 .split-sticky .split-aside { position: static; order: 2; }
  .v3 .split-sticky .split-main { order: 1; }
  .v3 .phone { margin-inline: auto; width: min(300px, 78vw); }
  .v3 .ledger li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .v3 .three { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .v3 .three-foot > * { grid-column: 1 / -1; }
  .v3 .sheets-one .sheet { width: 84%; margin-inline: auto; }
  .v3 .not-grid > .ch-title, .v3 .not-grid > :not(.ch-title) { grid-column: 1 / -1; }

  .v3 .clock-ends { gap: 8px; }
  .v3 .clock-end { font-size: clamp(48px, 15vw, 76px); }
  .v3 .clock-span, .v3 .axis, .v3 .node, .v3 .lead, .v3 .bracket { display: none; }
  .v3 .track { height: auto; margin-top: 40px; }
  .v3 .events { position: relative; inset: auto; margin-left: 6px; border-left: 1px solid var(--mist); }
  .v3 .event, .v3 .ev-0, .v3 .ev-1, .v3 .ev-c { position: relative; top: auto; left: auto; right: auto; width: auto; max-width: none; text-align: left; padding: 0 0 0 24px; margin-top: 36px; }
  .v3 .event:first-child { margin-top: 0; }
  .v3 .event::before { content: ""; position: absolute; left: -7px; top: 26px; width: 13px; height: 13px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px var(--night); }
  .v3 .ev-gap { display: block; font-size: 14px; line-height: 20px; color: var(--mist); }
  .v3 .event:first-child .ev-gap { visibility: hidden; }
  .v3 .eng { position: relative; left: auto; top: auto; margin: 56px auto 0; width: min(300px, 76vw); transform: rotate(-2.5deg); }
  .v3 .clock-cap { position: static; margin-top: 32px; }
  .v3 .ch-familiar { padding-top: clamp(200px, 50vw, 240px); }
  .v3 .familiar-grid > .ch-title { position: static; grid-column: 1 / -1; }
  .v3 .familiar, .v3 .familiar-ask { grid-column: 1 / -1; }
  .v3 .familiar li:nth-child(even) { padding-left: 0; }
  .v3 .seam-ledger { --seam-at: 300px; }
  .v3 .lg-rows { padding: 4px 16px 8px; }
  .v3 .lg-rows li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  .v3 .lg-text { grid-column: 2; font-size: 16px; line-height: 24px; }
  .v3 .ledger-foot > * { grid-column: 1 / -1; }
  .v3 .pair-a, .v3 .pair-b { grid-column: 1 / -1; }
  .v3 .pair-a { padding: 28px 20px; margin-inline: calc(-1 * var(--gutter) + 8px); }
  .v3 .pair-b { padding-top: 16px; }
  .v3 .paid > .ch-title, .v3 .paid > .rn-notes { grid-column: 1 / -1; }
  .v3 .paid-cols { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }

  .v3 .pile { position: relative; top: auto; grid-column: 1 / -1; margin: calc(-1 * clamp(48px, 10vw, 72px)) calc(-1 * var(--gutter)) 0; }
  .v3 .pile-sheets { display: flex; gap: 16px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px var(--gutter) 40px; scrollbar-width: thin; }
  .v3 .fsheet { position: relative; left: auto; top: auto; height: auto; width: min(78vw, 340px); flex: none; margin: 0; scroll-snap-align: center; transform: none !important; opacity: 1 !important; }
  .v3 .fsheet:nth-child(odd) { transform: rotate(-1deg) !important; }
  .v3 .pile .cap { padding-inline: var(--gutter); margin-top: 8px; }
  .v3 .stack-text { grid-column: 1 / -1; }
  .v3 .prof { min-height: 0; padding-block: 48px 8px; }

  .v3 .first-grid > .ch-sub, .v3 .first-body { grid-column: 1 / -1; }
  .v3 .desk { position: relative; top: auto; grid-column: 1 / -1; padding-top: 16px; }
  .v3 .desk .sheets { height: 116vw; }
  .v3 .desk .sheet { width: 66%; }
  .v3 .stages-text { grid-column: 1 / -1; padding-top: 64px; }
  .v3 .ask, .v3 .nevers { grid-column: 1 / -1; }
  .v3 .ask { margin-inline: calc(-1 * var(--gutter) + 8px); padding: 28px 20px; }

  .v3 .pr-side, .v3 .pr-letter { grid-column: 1 / -1; }
  .v3 .pr-side { position: static; }
  .v3 .pr-flip { height: 72vw; }
  .v3 .letter-sheet { transform: none; margin-inline: calc(-1 * var(--gutter) + 6px); padding: 28px 20px; }
  .v3 .lt-head { flex-direction: column; }
  .v3 .lt-from { text-align: left; }
  .v3 .lt-body { font-size: 18px; line-height: 29px; }

  .v3 .register { margin: calc(-1 * clamp(48px, 10vw, 72px)) calc(-1 * var(--gutter) + 6px) 0; padding: 28px 20px 28px 20px; }
  .v3 .mag { --size: 156px; }
  .v3 .mag-content { font-size: 18px; line-height: 29px; }
  .v3 .mag-view { background: var(--letter); }
  .v3 .reg-row { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding-right: 0; }
  .v3 .reg-row.is-under { background: none; }
  .v3 .reg-row.is-under .idx { transform: none; }
  .v3 .reg-text { font-size: 18px; line-height: 29px; }
  .v3 .leave-text, .v3 .handover { grid-column: 1 / -1; }
  .v3 .handover { margin: 0 calc(-1 * var(--gutter) + 8px); transform: none; padding: 24px 20px; }
  .v3 .leave-text { padding-top: 64px; }
  .v3 .ho-list li { font-size: 18px; line-height: 28px; }

  .v3 .inquiry-grid { grid-template-areas: "next" "main" "direct"; grid-template-columns: minmax(0, 1fr); }
  .v3 .next { padding-top: 0; }
  .v3 .form-sheet { margin: 0 calc(-1 * var(--gutter) + 6px); padding: 40px 20px 32px; }
  .v3 .form-sheet::before { left: 20px; right: 20px; top: 18px; }
  .v3 .form-sheet::after { right: 16px; top: 15px; }
  .v3 .inquiry { padding-top: 8px; }

  .v3 .read-grid { row-gap: 48px; }
  .v3 .rail { position: static; grid-column: 1 / -1; }
  .v3 .read { grid-column: 1 / -1; margin: 40px calc(-1 * var(--gutter) + 6px) 0; padding: 28px 20px; }
  .v3 .rail { padding-top: 48px; }

  .v3 .close { padding-top: clamp(176px, 50vw, 230px); }
  .v3 .close-card { right: var(--gutter); width: min(300px, 70vw); transform: translateY(-50%) rotate(-4deg); }
  .v3 .close-title, .v3 .close-body { grid-column: 1 / -1; }
  .site-footer .footer-grid > * { grid-column: 1 / -1 !important; }
}
@media (max-width: 400px) {
  .v3 .gc-name { font-size: 15px; }
  .v3 .gc-when { display: none; }
}