/* Hallmark · shape: proof table, the studio's worktable with pieces laid on it · genre: editorial · theme: custom · job: hire · idea: "a design studio's dark worktable, where finished pieces lie at true size beside the studio's own proofs" · vibe: "exact, tactile, workmanlike, quietly confident"
 * paper: oklch(16.9% 0.009 85) · accent: oklch(84% 0.12 92) · display: Clash Grotesk 600 · body: Newsreader · outlier: DM Mono (figures and sizes only) · hero: the headline typeset on a light proof sheet lying among five client pieces at true relative scale · nav: masthead between two hairlines, wordmark, five links, the enquiry button at the right edge (named; the brief asks for these links and one action) · footer: a colophon, wordmark over one line of links, the email and the analytics line · imagery: the 12 concept pieces as finished artwork, no stock photographs on the page · signature: the proof table in the first screen
 * axes: dark/grotesk-sans/chromatic-yellow · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: E, a long page of required content against an 80-word screen; cards cut to about 15 words, the case folded into the cafe line, and every section given its own composition */
/* Hallmark · waive 47c · paper sheets, a 5% speck grain and stamps on the dark table · Brandon asked on 2026-10-31 for paper, hairlines, stamps and marginalia (docs/redesign/brief-print-logic.md) */
/* Hallmark · waive 66 · a rotated running folio naming the section, and the proof sheet's stamp and slug drawn into the opening's picture · Brandon asked for index numbers and stamped marks; the folio persists as chrome and the proof marks are hidden from assistive tech */
/* Hallmark · hero-review: fix · 5 findings · 5 resolved (proof furniture and composition rebuilt, phone signature in the first screen, labels separated, one action name on phones, homepage crop and stray crop mark fixed) */
/* Hallmark · finish-review: fix · 8 findings · 8 resolved (one true scale for paper and one for screens below the opening, a scale key in the margin and interlocking columns; the enquiry set as the job's first sheet on proof stock; example views on the table with crop marks and size notes, the facts as a printed docket; the filters as a typeset index line; the story's size note clear of the rule; the redundant aside cut; the About statement stepped down on phones; captions under their own pictures) · copy: three generic headings rewritten with nouns from this page */
/* Hallmark · dismissed 77 · the 12 example pages at /work/ are single-example detail pages (the piece, its facts, then the footer), reached from the gallery cards */
/* Hallmark · waive 83 · the three brochure spreads on /work/trades-brochure.html cover 45% of that page below its head · on an example page the pictures are the piece itself at its design size; it is a detail view of one example, not a landing strip */
/* Hallmark · dismissed 58 · the nine-word headline and the 19-word supporting line are Brandon's words, supplied verbatim in the brief; the home page carries about 1,500 visible words because the brief requires the services, the quoting terms, the fixed About text, the form and twelve example captions, so each 900 px screen is held to about 80 words instead (render tier); on the example pages the paragraph under the title is that example's two-sentence brief */
/* Hallmark · waive 49b · at 320 px the card title 'Heating tune-up landing page' wraps to two lines inside its card in the phone swipe row · each card is 85% of the column so the next piece peeks in, which is what makes the row read as swipeable; the real piece name is kept rather than shortened */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- ground ---------- */
h1, h2, h3, h4 { font-weight: 600; }
body { position: relative; isolation: isolate; line-height: 1.65; font-synthesis: none; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--texture-opacity); background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
a { color: inherit; }
a:hover { color: var(--color-accent); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }
.mono { font-family: var(--font-outlier); font-size: 0.86em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.note { font-style: italic; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }

/* crop marks: two short strokes outside each corner, as on a trimmed proof */
.crop { position: relative; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--crop-off)); pointer-events: none; z-index: 0;
  background:
    linear-gradient(var(--color-rule), var(--color-rule)) left 0 top var(--crop-off) / var(--crop-len) 1px no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) left var(--crop-off) top 0 / 1px var(--crop-len) no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) right 0 top var(--crop-off) / var(--crop-len) 1px no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) right var(--crop-off) top 0 / 1px var(--crop-len) no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) left 0 bottom var(--crop-off) / var(--crop-len) 1px no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) left var(--crop-off) bottom 0 / 1px var(--crop-len) no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) right 0 bottom var(--crop-off) / var(--crop-len) 1px no-repeat,
    linear-gradient(var(--color-rule), var(--color-rule)) right var(--crop-off) bottom 0 / 1px var(--crop-len) no-repeat; }

/* a rubber stamp: double ruled, a few degrees off true, worn ink */
.stamp { display: inline-block; justify-self: start; align-self: start; padding: var(--space-2xs) var(--space-xs); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; color: var(--color-accent);
  font: 600 var(--text-sm)/1.2 var(--font-display); letter-spacing: 0; transform: rotate(-4deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.4 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 120px 60px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.4 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0 / 120px 60px; }
.stamp--ink { color: var(--color-sheet-ink); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink);
  font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: 0.005em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-3); color: var(--color-ink); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.link:active { color: var(--color-accent-press); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: background-color var(--dur-short) linear, color var(--dur-short) linear; } }

/* ---------- masthead ---------- */
.masthead { border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
.masthead__row { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--color-ink); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-md); padding-block: var(--space-xs); transition: color var(--dur-short) var(--ease-out); }
.nav a:hover { color: var(--color-accent); }
.nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav a[aria-current="true"] { color: var(--color-ink); }
.nav__cta { display: none; }
.menu-btn { display: none; }

/* ---------- running folio (desktop margin) ---------- */
.folio { display: none; }
@media (min-width: 75rem) {
  .js .folio { display: flex; position: fixed; left: max(var(--space-lg), calc((100% - var(--container)) / 2 + var(--space-lg))); bottom: var(--space-xl); z-index: var(--z-sticky);
    writing-mode: vertical-rl; transform: rotate(180deg); align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); pointer-events: none; }
  .folio .mono { color: var(--color-accent); }
  .js .folio { transition: opacity var(--dur-short) var(--ease-out); }
  .js .folio.is-quiet { opacity: 0; }
  .folio__rule { width: 1px; height: var(--space-2xl); background: var(--color-rule); }
}

/* ---------- opening: the proof table ----------
   One composition measured in inches: --in is one inch of the table, so every paper keeps its true relative size. */
.opening { padding-block: var(--space-xl) var(--space-2xl); }
.opening__grid { --in: calc(100cqw / 35.2); container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; width: min(100%, calc((100svh - 240px) * 2.19)); }
.table { grid-column: 1 / -1; grid-row: 1; position: relative; height: calc(16.1 * var(--in)); }
.proofsheet { position: absolute; z-index: 1; left: 0; top: calc(1.5 * var(--in)); width: calc(17 * var(--in)); min-height: calc(11 * var(--in));
  --t: calc(0.32 * var(--in)); --tb: calc(0.62 * var(--in)); --g: 3px; --l: calc(0.2 * var(--in));
  padding: calc(0.95 * var(--in)) calc(1 * var(--in)) calc(1.2 * var(--in)); background: var(--color-sheet); color: var(--color-sheet-ink); box-shadow: var(--shadow-paper); transform: rotate(-1deg); }
.proofsheet::before { content: ""; position: absolute; top: var(--t); left: var(--t); right: var(--t); bottom: var(--tb); border: 1px solid var(--color-sheet-rule); pointer-events: none; }
.proofsheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--color-sheet-ink);
  background:
    linear-gradient(var(--c), var(--c)) left calc(var(--t) - var(--g) - var(--l)) top var(--t) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left var(--t) top calc(var(--t) - var(--g) - var(--l)) / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right calc(var(--t) - var(--g) - var(--l)) top var(--t) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right var(--t) top calc(var(--t) - var(--g) - var(--l)) / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left calc(var(--t) - var(--g) - var(--l)) bottom var(--tb) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left var(--t) bottom calc(var(--tb) - var(--g) - var(--l)) / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right calc(var(--t) - var(--g) - var(--l)) bottom var(--tb) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right var(--t) bottom calc(var(--tb) - var(--g) - var(--l)) / 1px var(--l) no-repeat; }
.proofsheet h1 { position: relative; font-size: max(2rem, calc(1.52 * var(--in))); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: calc(12.6 * var(--in)); color: var(--color-sheet-ink); }
.proofsheet .lead { position: relative; margin-top: calc(0.42 * var(--in)); font-size: max(1rem, calc(0.5 * var(--in))); line-height: 1.5; color: var(--color-sheet-2); max-width: calc(11.4 * var(--in)); }
.proofsheet__stamp { position: absolute; right: calc(1.5 * var(--in)); top: calc(1.05 * var(--in)); color: var(--color-stamp-ink); font-size: max(0.9375rem, calc(0.42 * var(--in))); transform: rotate(-7deg); }
.proofsheet__slug { position: absolute; left: calc(var(--t) + var(--l)); bottom: calc(var(--tb) / 2 - 0.6em); display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.2; font-style: italic; color: var(--color-sheet-2); }
/* the stamp and the slug are part of the proof picture, drawn as generated text and hidden from assistive tech */
.proofsheet__stamp::before { content: "Approved"; }
.proofsheet__slug::after { content: "Proof 01 for portagefix.ca"; }
.bars { display: inline-flex; gap: 1px; }
.bars i { width: 9px; height: 9px; background: var(--color-bar-c); }
.bars i:nth-child(2) { background: var(--color-bar-m); }
.bars i:nth-child(3) { background: var(--color-bar-y); }
.bars i:nth-child(4) { background: var(--color-bar-k); }
.bars i:nth-child(5) { background: var(--color-bar-k50); }
.bars i:nth-child(6) { background: var(--color-bar-k25); }
.proofsheet__reg { position: absolute; left: 50%; top: calc(var(--t) / 2 - 6px); width: 12px; height: 12px; border: 1px solid var(--color-sheet-ink); border-radius: 50%; pointer-events: none; }
.proofsheet__reg::before, .proofsheet__reg::after { content: ""; position: absolute; background: var(--color-sheet-ink); }
.proofsheet__reg::before { left: 50%; top: -4px; bottom: -4px; width: 1px; }
.proofsheet__reg::after { top: 50%; left: -4px; right: -4px; height: 1px; }
.opening__grid::before { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: start; border-top: var(--rule-heavy) solid var(--color-ink); }
.opening__actions { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-lg); }
.opening__caption { grid-column: 2; grid-row: 2; margin-top: calc(var(--space-lg) + var(--space-2xs)); padding-left: var(--space-xl); text-align: right; }
.opening__caption .list { display: none; }
.piece { position: absolute; display: block; left: calc(var(--x) * var(--in)); top: calc(var(--y) * var(--in)); width: calc(var(--w) * var(--in)); z-index: var(--z, 2); color: var(--color-ink); text-decoration: none; }
.piece img { width: 100%; height: auto; box-shadow: var(--shadow-paper); transform: rotate(var(--r, 0deg)); }
.piece:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.piece__label { position: absolute; white-space: nowrap; font-size: var(--text-xs); line-height: 1.3; color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out); }
.piece:hover .piece__label { color: var(--color-accent); }
.piece__label .mono { color: var(--color-muted); }
.piece--board { --x: 16; --y: 0.8; --w: 11; --r: -0.6deg; --z: 2; }
.piece--menu { --x: 26.6; --y: 0.5; --w: 8.5; --r: 0.8deg; --z: 2; }
.piece--web { --x: 17.6; --y: 8.5; --w: 11.3; --r: 0.4deg; --z: 3; }
.piece--story { --x: 13.8; --y: 10.5; --w: 2.6; --r: -1.5deg; --z: 4; }
.piece--card { --x: 30.6; --y: 12.5; --w: 3.5; --r: 2deg; --z: 4; }
.piece--board .piece__label, .piece--menu .piece__label { bottom: 100%; margin-bottom: var(--space-xs); left: 0; }
.piece--web .piece__label { top: 100%; margin-top: var(--space-xs); left: 0; }
.piece--story .piece__label, .piece--card .piece__label { top: 100%; margin-top: var(--space-xs); right: 0; }
@container (max-width: 64rem) { .piece--card .piece__label { right: auto; left: 0; } }   /* short screens shrink the table, not the label */

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap) 0; }
.section__rule { border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.section__head h2 { grid-column: 1 / 9; font-size: var(--text-section); line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; }
.section__head .aside { grid-column: 9 / -1; align-self: end; }

/* ---------- 01 work ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-lg); margin-top: var(--space-xl); padding-block: var(--space-2xs); border-block: var(--rule-hair) solid var(--color-rule); }
html:not(.js) .filters { display: none; }
.filter { white-space: nowrap; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; color: var(--color-ink-2); font: 400 var(--text-md)/1.2 var(--font-body); text-align: left; text-decoration: underline transparent 2px; text-underline-offset: 0.35em; cursor: pointer; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.filter:hover { color: var(--color-ink); text-decoration-color: var(--color-rule); }
.filter:active { transform: translateY(1px); }
.filter:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.filter[aria-pressed="true"] { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.filter:disabled { opacity: 0.55; cursor: not-allowed; }
.count { margin-left: auto; color: var(--color-muted); font: 400 var(--text-sm)/1.2 var(--font-outlier); }
.section__head .scale-key { line-height: 1.7; }
.scale-key__bar { display: inline-block; height: 0.5em; margin-inline: var(--space-2xs) var(--space-3xs); border: 1px solid var(--color-ink-2); border-top: 0; }
.scale-key__bar--in { width: var(--pin); }
.scale-key__bar--px { width: calc(500 * var(--spx)); }
.scale-key .nowrap { white-space: nowrap; }   /* each bar stays with its measure */
.collection { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.collection[hidden] { display: none; }
.collection__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.collection__head h3 { grid-column: 2 / 7; grid-row: 1; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.02em; }
.collection__head p { grid-column: 7 / 11; grid-row: 1; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; }
.collection__head .stamp { grid-column: 11 / -1; grid-row: 1; justify-self: end; margin-top: var(--space-xs); }
.collection__letter { grid-column: 1 / 2; grid-row: 1; font: 600 var(--text-3xl)/0.8 var(--font-display); color: var(--color-rule); }
#work .section__rule { container-type: inline-size; --pin: calc(100cqw / 27); --spx: calc(100cqw / 5600); }   /* paper: 27 in across; screens: 5600 px across */
.spread { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xl); margin-top: var(--space-2xl); }
.spread__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xl); min-width: 0; margin-top: var(--drop, 0); }
.spread:has(> .spread__col > .card[hidden]) { justify-content: flex-start; }   /* a filter is on: the pieces left start under their head */
.spread:has(> .spread__col > .card[hidden]) > .spread__col { margin-top: 0; }
.spread__col:not(:has(> .card:not([hidden]))) { display: none; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-content: start; width: max(calc(var(--w) + 2 * var(--space-md)), 15rem); max-width: 100%; }
.card--paper { --w: calc(var(--u) * var(--pin)); }
.card--screen { --w: calc(var(--u) * var(--spx)); }
.card--end { align-self: flex-end; }
.card--tuck { margin-top: -16rem; }   /* up beside the caption of the piece above it */
.card[hidden] + .card--tuck { margin-top: 0; }   /* with that piece filtered out there is nothing to tuck beside */
.card__proof { display: block; justify-self: start; width: var(--w); max-width: calc(100% - 2 * var(--space-md)); margin: var(--space-md) var(--space-md) var(--space-lg); }
.card__proof img { display: block; width: 100%; height: auto; }
.card__proof--paper img { box-shadow: var(--shadow-paper); }
.card__proof::before { transition: opacity var(--dur-short) var(--ease-out); opacity: 0.7; }
.card:hover .card__proof::before, .card:focus-within .card__proof::before { opacity: 1; }
.card__title { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.card__title a { text-decoration: none; color: var(--color-ink); }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--color-accent); }
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: var(--space-xs); }
.card__purpose { font-size: var(--text-md); line-height: 1.45; }
.card__size { color: var(--color-muted); font-size: var(--text-sm); }
.card[hidden] { display: none; }

/* ---------- 02 services: a typographic index ---------- */
.index { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.index__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index__name { grid-column: 1 / 7; font: 600 var(--text-index)/0.98 var(--font-display); letter-spacing: -0.035em; overflow-wrap: break-word; min-width: 0; }
.index__covers { grid-column: 7 / 11; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; }
.index__links { grid-column: 11 / -1; display: flex; flex-direction: column; gap: var(--space-2xs); justify-self: end; text-align: right; }
.index__links a { font-size: var(--text-sm); }
.pull { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.pull p { grid-column: 4 / -1; padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-accent); font: italic 400 var(--text-3xl)/1.15 var(--font-body); letter-spacing: -0.01em; max-width: none; text-wrap: balance; }

/* ---------- 03 process: a proof sign-off sheet ---------- */
.signoff { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.signoff__sheet { grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); background: var(--color-sheet); color: var(--color-sheet-ink); padding: var(--space-2xl) var(--space-2xl) var(--space-xl); box-shadow: var(--shadow-paper); transform: rotate(0.5deg); }
.signoff h3 { font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.01em; padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-sheet-ink); }
.stages { counter-reset: stage; list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.stages li { counter-increment: stage; display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); border-bottom: 1px solid var(--color-sheet-rule); font-size: var(--text-md); line-height: 1.3; text-wrap: pretty; }
.stages li::before { content: counter(stage, decimal-leading-zero); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-sheet-2); }
.stages .stamp { transform: rotate(-6deg); color: var(--color-stamp-ink); }
.terms { margin: var(--space-md) 0 0; display: grid; }
.terms div { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; align-items: baseline; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-sheet-rule); }
.terms dt { font-weight: 600; font-size: var(--text-sm); line-height: 1.5; }
.terms dd { margin: 0; font-size: var(--text-md); line-height: 1.45; text-wrap: pretty; }

/* ---------- 04 about ---------- */
#about { padding-top: calc(var(--section-gap-l) + var(--space-4xl) + var(--space-3xl)); }   /* its own screen: the process sheet above is dense */
#process { padding-top: calc(var(--section-gap-l) + var(--space-xl)); }
.about { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.about p { grid-column: 3 / 11; font: 400 var(--text-2xl)/1.35 var(--font-body); letter-spacing: -0.01em; max-width: none; }
.about p + p { margin-top: var(--space-lg); }

/* ---------- 05 enquiry: the job ticket ---------- */
.enquiry { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.enquiry__side { grid-column: 1 / 5; display: grid; gap: var(--space-lg); }
.enquiry__side p { color: var(--color-ink-2); font-size: var(--text-md); }
.email-alt { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.email-alt__addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.email-alt__addr a { font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; }
.copy { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.copy:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.copy:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .copy { display: none; }
.ticket { grid-column: 6 / -1; color-scheme: light; background: var(--color-sheet); color: var(--color-sheet-ink); padding: var(--space-2xl) var(--space-2xl) calc(var(--space-2xl) + var(--space-sm)); box-shadow: var(--shadow-paper); }
.ticket::after { content: "Brief 01 for portagefix.ca"; position: absolute; left: var(--space-2xl); bottom: var(--space-md); font: 400 var(--text-xs)/1 var(--font-outlier); color: var(--color-sheet-2); }
.ticket__title { font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.01em; padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-sheet-ink); margin-bottom: var(--space-lg); }
.ticket:not(.is-live) form { display: none; }   /* app.js adds is-live once the form is wired; otherwise the email alternative shows */
.ticket__nojs { display: none; }
.ticket:not(.is-live) .ticket__nojs { display: block; }
.ticket .field label { color: var(--color-sheet-ink); }
.ticket .field label .opt, .ticket .help, .ticket .send p { color: var(--color-sheet-2); }
.ticket .input { border: 0; border-bottom: 1px solid var(--color-sheet-2); border-radius: 0; background-color: transparent; color: var(--color-sheet-ink); padding-inline: var(--space-2xs); }
.ticket textarea.input { border: 1px solid var(--color-sheet-2); padding-inline: var(--space-sm); }
.ticket .input:hover { background-color: var(--color-sheet-hover); }
.ticket input.input { height: 3.25rem; }
.ticket .input:focus-visible { outline-color: var(--color-sheet-ink); outline-offset: 2px; border-color: var(--color-sheet-ink); }
.ticket .input[aria-invalid="true"] { border-color: var(--color-sheet-error); }
.ticket .help.is-error { color: var(--color-sheet-error); }
.ticket select.input { background-image: linear-gradient(45deg, transparent 50%, var(--color-sheet-ink) 50%), linear-gradient(135deg, var(--color-sheet-ink) 50%, transparent 50%); }
.ticket .chip { border-color: var(--color-stamp-ink); color: var(--color-sheet-ink); }
.ticket .chip__remove { color: var(--color-sheet-2); }
.ticket .chip__remove:hover { color: var(--color-sheet-ink); border-color: var(--color-sheet-rule); }
.ticket .chip__remove:focus-visible, .ticket .btn:focus-visible, .ticket .link:focus-visible, .ticket .status:focus-visible, .docket a:focus-visible { outline-color: var(--color-sheet-ink); }
.ticket .link { color: var(--color-sheet-ink); text-decoration-color: var(--color-sheet-2); }
.ticket .link:hover { color: var(--color-stamp-ink); }
.ticket .send { padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-sheet-ink); }
.ticket .status { border-left-color: var(--color-sheet-rule); }
.ticket .status.is-error { border-left-color: var(--color-sheet-error); }
.ticket .status.is-success { border-left-color: var(--color-sheet-success); }
.ticket.is-done .chip, .ticket.is-done .fields, .ticket.is-done .trap, .ticket.is-done .send { display: none; }
.ticket.is-done .status { margin-top: 0; }
.status .another { display: flex; width: fit-content; margin-top: var(--space-md); }
.ticket .btn--quiet { color: var(--color-sheet-ink); border-color: var(--color-sheet-2); }
.ticket .btn--quiet:hover { background: var(--color-sheet-hover); color: var(--color-sheet-ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-lg); }
.field { display: grid; gap: var(--space-2xs); align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.field label .opt { font-weight: 400; color: var(--color-muted); font-style: italic; }
.input { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.4 var(--font-body);
  outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.input:hover { background-color: var(--color-paper-3); }
.input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.input { min-height: 8rem; resize: vertical; }
select.input { appearance: none; padding-right: var(--space-2xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.help { min-height: 1lh; font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }
.help.is-error { color: var(--color-error); }
.chip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border: 1px dashed var(--color-accent); border-radius: var(--radius-input); color: var(--color-ink); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.chip[hidden] { display: none; }
.chip b { font-weight: 600; }
.chip__remove { flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 0 var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-input); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip__remove:hover { color: var(--color-ink); border-color: var(--color-rule); }
.chip__remove:active { transform: translateY(1px); }
.chip__remove:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip__remove:disabled { opacity: 0.55; cursor: not-allowed; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.send .btn { min-width: 12rem; }
.send p { flex: 1 1 16rem; font-size: var(--text-sm); color: var(--color-muted); }
.status { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: var(--rule-heavy) solid var(--color-rule); font-size: var(--text-md); overflow-wrap: anywhere; text-wrap: pretty; }
.status[hidden] { display: none; }
.status.is-error { border-left-color: var(--color-error); }
.status.is-success { border-left-color: var(--color-success); }
.status strong { font-weight: 600; }

/* ---------- footer: a colophon ---------- */
.colophon { margin-top: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl) var(--space-2xl); }
.colophon__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: baseline; }
.colophon .wordmark { grid-column: 1 / 4; }
.colophon nav { grid-column: 4 / 10; }
.colophon nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.colophon nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.colophon nav a:hover { color: var(--color-accent); }
.colophon nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.colophon__contact { grid-column: 10 / -1; justify-self: end; text-align: right; font-size: var(--text-sm); color: var(--color-ink-2); }
.colophon__fine { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- the enlarged view ---------- */
.viewer { width: min(1180px, 100% - 2 * var(--space-xl)); max-height: min(92svh, 1400px); padding: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); overflow: auto; overscroll-behavior: contain; }
.viewer::backdrop { background: var(--color-scrim); }
.viewer[open] { animation: viewer-in var(--dur-long) var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .viewer[open] { animation: none; } }
.viewer__head { position: sticky; top: 0; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-xl); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.viewer__titles { display: grid; gap: var(--space-3xs); min-width: 0; }
.viewer__titles h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; }
.viewer__titles p { color: var(--color-ink-2); font-size: var(--text-sm); }
.viewer__close { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.viewer__close:hover { border-color: var(--color-ink-2); }
.viewer__close:active { transform: translateY(1px); }
.viewer__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.viewer__close:disabled { opacity: 0.55; cursor: not-allowed; }
.viewer__body { padding: var(--space-xl); }

/* example content, shared by the enlarged view and the example pages */
.example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--space-2xl); align-items: start; }
.example__views { display: grid; gap: var(--space-3xl); justify-items: start; padding: var(--crop-off); }
.view { display: grid; gap: var(--space-sm); width: min(100%, var(--view-max, 100%)); margin: 0; }
.view__sheet { display: block; }
.view__sheet img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-paper); }
.view--phone .view__sheet img { border-radius: var(--space-sm); }
.view figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.example__facts { position: sticky; top: calc(72px + var(--space-xl)); display: grid; gap: var(--space-md); justify-items: start; }
.docket { justify-self: stretch; display: grid; gap: var(--space-lg); background: var(--color-sheet); color: var(--color-sheet-ink); padding: var(--space-lg) var(--space-lg) var(--space-xl); box-shadow: var(--shadow-paper); }
.docket dl { margin: 0; display: grid; padding-bottom: var(--space-sm); border-bottom: var(--rule-heavy) solid var(--color-sheet-ink); }
.docket dl div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-sheet-rule); }
.docket dl div:last-child { border-bottom: 0; }
.docket dt { font-size: var(--text-sm); color: var(--color-sheet-2); }
.docket dd { margin: 0; font-size: var(--text-md); text-wrap: pretty; }
.docket ul { margin: 0; padding-left: 1.1em; }
.docket .btn { justify-self: start; }
.docket .btn:focus-visible { outline-color: var(--color-sheet-ink); }
.docket .credits { color: var(--color-sheet-2); }
.credits { font-size: var(--text-xs); color: var(--color-muted); }
.credits a { color: inherit; }
.viewer .example__facts { top: var(--space-xl); }

/* ---------- plain pages: example pages, privacy, 404 ---------- */
.page { padding-block: var(--space-2xl) 0; }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); }
.page__head { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.page__head h1 { font-size: var(--text-display-s); line-height: 1.04; letter-spacing: -0.03em; max-width: 24ch; }
.page__head p { color: var(--color-ink-2); font-size: var(--text-lead); }
.page__head .page__brief { color: var(--color-ink); font-size: var(--text-md); max-width: 62ch; margin-top: var(--space-xs); }
.page__brief span { display: block; color: var(--color-ink-2); font-size: var(--text-lead); margin-bottom: var(--space-xs); }
.page__body { margin-top: var(--space-2xl); }
.page__credits { margin-top: var(--space-xl); max-width: 72ch; }
.page__credits a { white-space: nowrap; }
.more { margin-top: var(--space-3xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); align-items: baseline; }
.more h2 { font-size: var(--text-lg); letter-spacing: -0.01em; }
.doc { max-width: 68ch; }
.doc h2 { margin-top: var(--space-2xl); font-size: var(--text-xl); letter-spacing: -0.02em; }
.doc p, .doc li { margin-top: var(--space-sm); color: var(--color-ink-2); }
.doc .draft { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: var(--rule-heavy) solid var(--color-accent); color: var(--color-ink); }
.lost { min-height: 60svh; display: grid; align-content: center; gap: var(--space-lg); }
.lost h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 16ch; }
.lost .row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- the one reveal: pieces settle onto the table ---------- */
.js [data-reveal] { opacity: 0; translate: 0 10px; transition: opacity var(--dur-long) var(--ease-out), translate var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; translate: none; transition: none; } .piece__label { transition: none; } }

/* ---------- smaller screens ---------- */
@media (min-width: 60.0625rem) and (max-width: 77rem) {
  .collection__head .stamp { grid-column: 7 / -1; grid-row: 2; justify-self: start; margin-top: var(--space-sm); white-space: nowrap; }
}
@media (min-width: 60.0625rem) and (max-width: 70rem) {
  .terms div { grid-template-columns: minmax(0, 6rem) 1fr; }   /* 961 to 1120 px: a wider value column, so no quote row ends on one word */
  .terms dd { text-wrap: balance; }
}
@media (max-width: 60rem) {
  .nav { display: none; }
  .js .nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .js .nav.is-open ul { flex-direction: column; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-md); }
  .js .nav.is-open a { display: block; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-faint); }
  html:not(.js) .nav { display: block; margin-left: 0; width: 100%; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  html:not(.js) .masthead__row { flex-wrap: wrap; padding-block: var(--space-sm); }
  .masthead { position: relative; }
  .masthead__row { gap: var(--space-sm); }
  .masthead__cta { display: none; }
  .js .menu-btn { margin-left: auto; }
  .js .nav.is-open .nav__cta, html:not(.js) .nav__cta { display: list-item; }
  .nav__cta a { color: var(--color-accent); }
  .js .menu-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
  .menu-btn:hover { border-color: var(--color-ink-2); }
  .menu-btn:active { transform: translateY(1px); }
  .menu-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .opening { padding-block: var(--space-lg) var(--space-xl); }
  .opening__grid { --in: calc(100cqw / 22); width: 100%; grid-template-columns: minmax(0, 1fr); }
  .proofsheet { position: relative; grid-row: 1; left: auto; top: auto; width: auto; min-height: 0; --t: 10px; --tb: 30px; --l: 8px; padding: var(--space-xl) var(--space-lg) var(--space-2xl); transform: rotate(-0.6deg); }
  .proofsheet h1 { font-size: var(--text-display-s); max-width: 18ch; }
  .proofsheet .lead { font-size: var(--text-lead); max-width: 40ch; margin-top: var(--space-md); }
  .proofsheet__stamp { top: auto; right: var(--space-md); bottom: calc(var(--tb) + var(--space-xs)); font-size: var(--text-xs); }
  .opening__grid::before { display: none; }
  .opening__actions { grid-row: 2; margin-top: var(--space-lg); padding-top: 0; }
  .table { grid-row: 3; margin-top: var(--space-xl); height: calc(15.7 * var(--in)); }
  .opening__caption { grid-column: 1; grid-row: 4; padding: 0; text-align: left; margin-top: var(--space-md); }
  .opening__caption .list { display: inline; }
  .piece--board { --x: 0.9; --y: 1.1; }
  .piece--menu { --x: 12.5; --y: 1.1; }
  .piece--web { --x: 3.1; --y: 8.1; }
  .piece--story { --x: 15.3; --y: 10.1; }
  .piece--card { --x: 18.5; --y: 12.4; }
  .piece--web .piece__label, .piece--story .piece__label, .piece--card .piece__label { display: none; }
  .section__head h2, .section__head .aside { grid-column: 1 / -1; }
  .section__head .aside { margin-top: var(--space-md); }
  .collection__letter { display: none; }
  .collection__head h3 { grid-column: 1 / -1; }
  .collection__head p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-sm); }
  .collection__head .stamp { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: var(--space-md); }
  #work .section__rule { --pin: calc(100cqw / 11.2); --spx: calc(100cqw / 1700); }
  .spread { flex-direction: column; align-items: stretch; gap: var(--space-2xl); }
  .spread__col, .card--tuck { margin-top: 0; }
  .card--end { align-self: flex-start; }
  .scale-key { display: none; }
  .index__name { grid-column: 1 / -1; }
  .index__covers { grid-column: 1 / 9; margin-top: var(--space-sm); }
  .index__links { grid-column: 9 / -1; }
  .pull p { grid-column: 1 / -1; }
  .signoff__sheet { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-xl) var(--space-lg); transform: none; }
  .about p { grid-column: 1 / -1; }
  .enquiry__side, .ticket { grid-column: 1 / -1; }
  .ticket { margin-top: var(--space-xl); }
  .colophon .wordmark, .colophon nav, .colophon__contact { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .example { grid-template-columns: minmax(0, 1fr); }
  .example__facts { position: static; }
  #process, #about { padding-top: var(--section-gap); }   /* the desktop's extra room around the process sheet is dead space here */
  .collection { margin-top: var(--space-2xl); }
}
@media (max-width: 40rem) {
  .masthead__row { gap: var(--space-xs); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .ticket { padding: var(--space-lg) var(--space-md) calc(var(--space-xl) + var(--space-sm)); }
  .ticket::after { left: var(--space-md); }
  .about p { font-size: var(--text-xl); }
  .index__covers, .index__links { grid-column: 1 / -1; }
  .index__links { justify-self: start; text-align: left; flex-direction: row; gap: var(--space-lg); margin-top: var(--space-sm); }
  .terms div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .viewer__head, .viewer__body { padding-inline: var(--space-md); }
  .proofsheet h1 { font-size: 2.375rem; }
  .pull p { font-size: var(--text-2xl); }
  :root { --section-gap: 56px; }   /* phones: a tighter rhythm between sections */
  .opening { padding-bottom: var(--space-md); }
  .collection { margin-top: var(--space-xl); }
  .index__row { padding-bottom: var(--space-lg); }
  .pull { margin-top: var(--space-xl); }
  /* phones: each business's pieces in one row that swipes sideways and snaps piece by piece, the next one peeking in;
     the row runs to the screen edges. True scale stays on wider screens. */
  .spread { flex-direction: row; align-items: flex-start; gap: var(--space-md); margin: var(--space-xl) calc(-1 * var(--gutter)) 0;
    padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .spread__col { display: contents; }
  .card { flex: 0 0 85%; width: auto; min-width: 0; scroll-snap-align: start; }
  .card__proof { width: min(calc(100% - 2 * var(--space-md)), calc(56svh * var(--ar, 1))); }
  .index__links a, .colophon nav a { display: inline-flex; align-items: center; min-height: 44px; }
}