/* Ostrander & Quill: layout and craft. Every value comes from assets/tokens.css (--s-*).
   Media queries repeat the token breakpoints (CSS cannot read a custom property inside @media):
   phone < 768 (--s-bp-tablet), desktop >= 1024 (--s-bp-desktop), inline nav >= 1360 (--s-bp-nav-inline).
   Per-element shapes arrive as --oq-clip / --oq-clip-p on the element, generated by lib.php. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-nav-h); font-synthesis: none; }
body {
    margin: 0;
    color: var(--s-text);
    background-color: var(--s-bg);
    font: var(--s-weight-regular) var(--s-step-body)/var(--s-leading-body) var(--s-font-text);
    overflow-x: clip;
}
/* The drafting grid lies only under the sections where drafting happens (the arrival, eight weeks):
   a full-bleed layer behind the section, whatever its max-width. */
.oq-ruled { position: relative; isolation: isolate; }
.oq-ruled::before {
    content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(var(--s-grid-major) var(--s-hairline), transparent var(--s-hairline)),
        linear-gradient(90deg, var(--s-grid-major) var(--s-hairline), transparent var(--s-hairline)),
        linear-gradient(var(--s-grid) var(--s-hairline), transparent var(--s-hairline)),
        linear-gradient(90deg, var(--s-grid) var(--s-hairline), transparent var(--s-hairline));
    background-size:
        calc(var(--s-grid-cell) * var(--s-grid-major-every)) calc(var(--s-grid-cell) * var(--s-grid-major-every)),
        calc(var(--s-grid-cell) * var(--s-grid-major-every)) calc(var(--s-grid-cell) * var(--s-grid-major-every)),
        var(--s-grid-cell) var(--s-grid-cell),
        var(--s-grid-cell) var(--s-grid-cell);
}
/* The grid fades in and out at its edges, so drafting paper gives way to plain manila without a seam. */
.oq-arrival.oq-ruled::before { -webkit-mask-image: linear-gradient(black calc(100% - var(--s-grid-fade)), transparent); mask-image: linear-gradient(black calc(100% - var(--s-grid-fade)), transparent); }
.oq-weeks.oq-ruled::before { -webkit-mask-image: linear-gradient(transparent, black var(--s-grid-fade), black calc(100% - var(--s-grid-fade)), transparent); mask-image: linear-gradient(transparent, black var(--s-grid-fade), black calc(100% - var(--s-grid-fade)), transparent); }
.oq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.oq-chip-flood { flood-color: var(--s-ink); }
/* Every `font:` shorthand resets ligatures, so the long-s 'st' is switched off on every element. */
*, *::before, *::after { font-variant-ligatures: var(--s-ligatures) !important; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: var(--s-focus-ring) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.oq-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oq-skip { position: absolute; left: var(--s-gutter); top: var(--s-gap-s); z-index: var(--s-z-menu); padding: var(--s-gap-s) var(--s-gap-m); background: var(--s-ink); color: var(--s-tacking); transform: translateY(calc(-100% - var(--s-gap-l))); }
.oq-skip:focus { transform: none; }

/* ── Type ──────────────────────────────────────────────────────────── */
.oq-kicker, .oq-tag, .oq-note, .oq-count, .oq-caption, .oq-fact-label, .oq-hint, .oq-ruler, .oq-ledger-note {
    font-family: var(--s-font-mono);
    font-size: var(--s-step-note);
    line-height: var(--s-leading-note);
    letter-spacing: var(--s-track-note);
}
.oq-kicker { font-weight: var(--s-weight-medium); text-transform: uppercase; letter-spacing: var(--s-track-caps); margin-bottom: var(--s-gap-m); display: flex; align-items: center; gap: var(--s-gap-s); }
.oq-kicker::before { content: ""; width: var(--s-gap-l); border-top: var(--s-hairline) solid currentColor; }
.oq-h2 { font: var(--s-weight-regular) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display); letter-spacing: var(--s-track-display); max-width: var(--s-measure-narrow); text-wrap: balance; }
.oq-h3 { font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.oq-h4 { font: var(--s-weight-medium) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text); text-transform: uppercase; letter-spacing: var(--s-track-caps); margin-bottom: var(--s-gap-s); }
.oq-lede { font: italic var(--s-weight-regular) var(--s-step-lede)/var(--s-leading-body) var(--s-font-text); color: var(--s-muted); max-width: var(--s-measure); }
.oq-hint { color: var(--s-muted); }

/* ── Buttons and links ─────────────────────────────────────────────── */
.oq-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-btn-h); padding: 0 var(--s-btn-pad-x);
    background: var(--s-btn-bg); color: var(--s-btn-text);
    border: 0; border-radius: var(--s-radius);
    outline: var(--s-stitch-width) dashed var(--s-btn-stitch); outline-offset: var(--s-stitch-inset);
    font: var(--s-weight-medium) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text);
    letter-spacing: var(--s-track-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--s-dur-ui) var(--s-ease-ui);
}
/* The marching stitch: four dashed edges drawn with gradients, so they can move on hover. */
.oq-btn::after {
    content: ""; position: absolute; inset: calc(var(--s-stitch-inset) * -1); pointer-events: none; opacity: 0;
    background:
        linear-gradient(90deg, var(--s-btn-stitch) var(--s-stitch-dash), transparent 0) repeat-x,
        linear-gradient(90deg, var(--s-btn-stitch) var(--s-stitch-dash), transparent 0) repeat-x,
        linear-gradient(0deg, var(--s-btn-stitch) var(--s-stitch-dash), transparent 0) repeat-y,
        linear-gradient(0deg, var(--s-btn-stitch) var(--s-stitch-dash), transparent 0) repeat-y;
    background-size:
        calc(var(--s-stitch-dash) + var(--s-stitch-gap)) var(--s-stitch-width),
        calc(var(--s-stitch-dash) + var(--s-stitch-gap)) var(--s-stitch-width),
        var(--s-stitch-width) calc(var(--s-stitch-dash) + var(--s-stitch-gap)),
        var(--s-stitch-width) calc(var(--s-stitch-dash) + var(--s-stitch-gap));
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.oq-btn:hover { background: var(--s-btn-bg-hover); }
.oq-btn:focus-visible { outline: var(--s-focus-ring) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.oq-btn:focus-visible::after { opacity: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .oq-btn:hover { outline-color: transparent; }
    .oq-btn:hover::after { opacity: 1; animation: oq-march var(--s-dur-stitch) linear infinite; }
}
@keyframes oq-march {
    to {
        background-position:
            calc(var(--s-stitch-dash) + var(--s-stitch-gap)) 0,
            calc((var(--s-stitch-dash) + var(--s-stitch-gap)) * -1) 100%,
            0 calc((var(--s-stitch-dash) + var(--s-stitch-gap)) * -1),
            100% calc(var(--s-stitch-dash) + var(--s-stitch-gap));
    }
}
.oq-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--s-ink);
    font: italic var(--s-weight-regular) var(--s-step-lede)/var(--s-leading-tight) var(--s-font-text);
    text-decoration: underline; text-decoration-color: var(--s-link-underline);
    text-decoration-thickness: var(--s-ruler-w); text-underline-offset: var(--s-gap-xs);
    transition: text-decoration-thickness var(--s-dur-ui) var(--s-ease-ui), text-underline-offset var(--s-dur-ui) var(--s-ease-ui);
}
.oq-link:hover { text-decoration-thickness: var(--s-ruler-fill); text-underline-offset: var(--s-gap-s); }

/* ── Nav ───────────────────────────────────────────────────────────── */
.oq-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-gap-m);
    height: var(--s-nav-h-mobile); padding: 0 var(--s-page-inline);
    background: var(--s-bg); border-bottom: var(--s-hairline) solid var(--s-rule);
}
.oq-wordmark {
    display: inline-flex; align-items: center; min-height: var(--s-tap); margin-right: auto;
    font: var(--s-weight-medium) var(--s-step-wordmark)/var(--s-leading-tight) var(--s-font-text);
    letter-spacing: var(--s-track-wordmark); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.oq-links { display: none; }
.oq-links ul { display: flex; gap: var(--s-links-gap); white-space: nowrap; }
.oq-links a, .oq-sheet a:not(.oq-btn) {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font: var(--s-weight-regular) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text);
    letter-spacing: var(--s-track-caps); text-transform: uppercase; text-decoration: none;
    background: linear-gradient(var(--s-chalk), var(--s-chalk)) no-repeat;
    background-position: 0 calc(100% - var(--s-gap-s)); background-size: 0 var(--s-ruler-w);
    transition: background-size var(--s-dur-ui) var(--s-ease-ui);
}
.oq-links a { font-size: var(--s-step-nav); letter-spacing: var(--s-track-nav); }
.oq-links a:hover, .oq-links a[aria-current="true"] { background-size: 100% var(--s-ruler-w); }
.oq-nav-cta { display: none; min-height: var(--s-tap); }
.oq-menu { position: static; }
/* The sheet starts under the nav wherever the nav is (below the ribbon at the top of the page); site.js measures it. */
.oq-nav { --oq-sheet-top: var(--s-nav-h-mobile); }
.oq-menu > summary { list-style: none; }
.oq-menu > summary::-webkit-details-marker { display: none; }
.oq-menu-btn {
    display: inline-flex; align-items: center; gap: var(--s-gap-s); min-height: var(--s-tap); min-width: var(--s-tap); cursor: pointer;
    font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-tight) var(--s-font-mono); letter-spacing: var(--s-track-caps); text-transform: uppercase;
}
.oq-menu-close, .oq-menu[open] .oq-menu-open { display: none; }
.oq-menu[open] .oq-menu-close { display: inline; }
.oq-burger, .oq-burger::before { display: block; width: var(--s-gap-m); border-top: var(--s-ruler-w) solid var(--s-ink); }
.oq-burger { position: relative; }
.oq-burger::before { content: ""; position: absolute; top: var(--s-gap-xs); left: 0; border-top-style: dashed; }
.oq-sheet {
    position: fixed; inset: var(--oq-sheet-top) 0 0; z-index: var(--s-z-menu);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-gap-l);
    padding: var(--s-gap-l) var(--s-gutter) calc(var(--s-gap-l) + env(safe-area-inset-bottom));
    background-color: var(--s-bg); overflow-y: auto;
    border-top: var(--s-hairline) solid var(--s-rule);
}
.oq-sheet ol { counter-reset: oq-sheet; }
.oq-sheet li { counter-increment: oq-sheet; border-bottom: var(--s-hairline) dashed var(--s-rule); }
.oq-sheet li a:not(.oq-btn) {
    width: 100%; min-height: var(--s-btn-h); gap: var(--s-gap-m);
    font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); text-transform: none; letter-spacing: 0;
}
.oq-sheet li a::before { content: counter(oq-sheet, decimal-leading-zero); font: var(--s-weight-regular) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); }
.oq-sheet-cta { width: 100%; }

/* ── 1. Arrival ────────────────────────────────────────────────────── */
.oq-arrival { padding: var(--s-gap-m) var(--s-gutter) var(--s-gap-l); }
.oq-hero-title {
    font: var(--s-weight-regular) var(--s-step-hero)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display); margin-bottom: var(--s-gap-m);
}
.oq-hero-title span { display: block; }
.oq-sub { font: italic var(--s-weight-regular) var(--s-step-sub)/var(--s-leading-tight) var(--s-font-text); color: var(--s-muted); max-width: var(--s-measure-sub); margin-bottom: var(--s-gap-m); padding-inline-start: var(--s-sub-optical); }
.oq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-gap-s) var(--s-gap-l); }
.oq-facts {
    display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: auto auto; justify-content: start;
    column-gap: var(--s-gap-l); row-gap: var(--s-gap-xs); margin-top: var(--s-gap-xl);
    padding-top: var(--s-gap-m); border-top: var(--s-hairline) solid var(--s-rule);
}
.oq-facts li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.oq-fact-fig { font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-tight) var(--s-font-display); font-variant-numeric: var(--s-numeric); white-space: nowrap; align-self: end; }
.oq-fact-label { color: var(--s-muted); max-width: var(--s-measure-label); }

.oq-swatch { filter: var(--s-drop-paper); }
.oq-swatch-cut { position: relative; aspect-ratio: var(--s-swatch-shape); clip-path: var(--oq-clip); background: var(--s-manila-deep); overflow: hidden; }
.oq-swatch-cut img { width: 100%; height: 100%; object-fit: var(--s-photo-fit); }
.oq-swatch:nth-child(1) img { object-position: var(--s-pos-cloth); }
.oq-swatch:nth-child(2) img { object-position: var(--s-pos-thread); }
.oq-swatch:nth-child(3) img { object-position: var(--s-pos-shears); }
.oq-note { margin-top: var(--s-gap-s); max-width: var(--s-measure-note); position: relative; }
.oq-note-no { font-weight: var(--s-weight-medium); }
.oq-count { font-variant-numeric: var(--s-numeric); }
/* The grain line chalked on swatch 1: a double-headed arrow parallel to the selvedge, as drafted. */
.oq-grain {
    position: absolute; left: 50%; top: var(--s-grain-inset); bottom: var(--s-grain-inset); width: var(--s-arrow);
    translate: -50% 0; filter: var(--s-line-halo);
    clip-path: inset(0); transition: clip-path var(--s-dur-draw) var(--s-ease-draft);
}
.oq-grain::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; border-left: var(--s-rule-weight) solid var(--s-tacking); }
/* Two open arrowheads (the line is drafted with a head at each end). */
.oq-grain i {
    position: absolute; left: 50%; width: var(--s-arrow); height: var(--s-arrow);
    border-top: var(--s-rule-weight) solid var(--s-tacking); border-left: var(--s-rule-weight) solid var(--s-tacking);
}
.oq-grain i:first-child { top: 0; translate: -50% 0; rotate: var(--s-arrow-turn); transform-origin: 50% 50%; margin-top: var(--s-hairline); }
.oq-grain i:last-child { bottom: 0; translate: -50% 0; rotate: calc(var(--s-arrow-turn) + 180deg); margin-bottom: var(--s-hairline); }

/* Phone: headline, sub, button, then the swatch strip (scroll-snap, a 14% slice of the next + count). */
@media (max-width: 767px) {
    .oq-arrival { display: flex; flex-direction: column; padding-top: var(--s-gap-s); }
    .oq-arrival-copy { display: contents; }
    .oq-actions { display: contents; }
    .oq-hero-title { margin-bottom: var(--s-gap-s); }
    .oq-sub { margin-bottom: var(--s-gap-xs); font-size: var(--s-step-lede); }   /* one step tighter: the facts clear Safari's fold */
    .oq-hero-title { font-size: var(--s-step-hero-phone); }
    .oq-actions .oq-btn { width: 100%; }
    .oq-actions .oq-link { justify-self: start; font-size: var(--s-step-body); }
    .oq-card { position: relative; margin: var(--s-gap-s) calc(var(--s-gutter) * -1) 0; }
    .oq-swatches {
        display: flex; gap: var(--s-gap-s); overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 0 var(--s-gutter) var(--s-gap-xs); scroll-padding: 0 var(--s-gutter); scrollbar-width: none;
    }
    .oq-swatches::-webkit-scrollbar { display: none; }
    .oq-swatch { flex: 0 0 var(--s-strip-item); scroll-snap-align: start; }
    .oq-swatch-cut { aspect-ratio: auto; height: var(--s-strip-h); height: var(--s-strip-h-svh); clip-path: var(--oq-clip-p); }
    .oq-note { margin-top: var(--s-gap-xs); transition: opacity var(--s-dur-ui) var(--s-ease-ui); }
    /* Only the swatch in view carries its label; the slice of the next stays a slice. */
    html.oq-js .oq-swatch:not(.is-current) .oq-note { opacity: 0; }
    /* The count shares the label's line, at the right margin. */
    .oq-strip-count { position: absolute; right: var(--s-gutter); bottom: var(--s-gap-xs); }
    /* One row of four tabular figures directly under the strip's count; the text link closes the screen. */
    .oq-facts { order: 3; grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: var(--s-gap-s); padding-top: var(--s-gap-s); column-gap: var(--s-gap-s); }
    .oq-actions .oq-link { order: 4; margin-top: var(--s-gap-m); }
    .oq-fact-fig { font-size: var(--s-facts-phone-fig); }
    .oq-fact-label { font-size: var(--s-step-note); }
}

/* Desktop: the headline column (5/12) and the swatch card share one floor: the facts row and the
   swatch notations sit on the same line at the foot of the first screen. */
@media (min-width: 768px) {
    .oq-arrival {
        display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); align-content: center;
        column-gap: var(--s-grid-gap); align-items: stretch; max-width: var(--s-max); margin: 0 auto;
        min-height: calc(100vh - var(--s-ribbon-h) - var(--s-nav-h));
        min-height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
        padding-block: var(--s-gap-m);
    }
    .oq-arrival-copy { grid-column: 1 / span var(--s-hero-cols-text); grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
    /* The statement at the top line; the actions and the figures at the floor. */
    .oq-actions { margin-top: auto; }
    .oq-facts { margin-top: var(--s-gap-l); align-self: stretch; }   /* one step under the text link: no dead grid row */
    .oq-card { grid-column: calc(var(--s-hero-cols-text) + 1) / -1; grid-row: 1; align-self: end; }
    .oq-swatches { display: flex; align-items: flex-end; }
    .oq-swatch { flex: 1 1 0; min-width: 0; }
    .oq-swatch-cut { aspect-ratio: auto; height: var(--s-swatch-h-vh); height: var(--s-swatch-h); }
    .oq-swatch + .oq-swatch { margin-left: var(--s-swatch-overlap); }
    .oq-swatch:nth-child(1) { transform: rotate(var(--s-swatch-tilt-1)); }
    .oq-swatch:nth-child(2) { transform: rotate(var(--s-swatch-tilt-2)); }
    .oq-swatch:nth-child(3) { transform: rotate(var(--s-swatch-tilt-3)); }
    .oq-swatch:nth-child(2) .oq-swatch-cut { height: calc(var(--s-swatch-h-vh) - var(--s-swatch-stagger-2)); height: calc(var(--s-swatch-h) - var(--s-swatch-stagger-2)); }
    .oq-swatch:nth-child(3) .oq-swatch-cut { height: calc(var(--s-swatch-h-vh) - var(--s-swatch-stagger-3)); height: calc(var(--s-swatch-h) - var(--s-swatch-stagger-3)); }
    .oq-strip-count { display: none; }
    /* A swatch label: the number over the description (two lines at 1440; narrower screens may wrap). */
    .oq-note { max-width: none; }
    .oq-note-no { display: block; }
    .oq-swatch:not(:last-child) .oq-note { padding-right: calc(var(--s-swatch-overlap) * -1 + var(--s-gap-s)); }
}

/* ── Sections ──────────────────────────────────────────────────────── */
.oq-section { max-width: var(--s-max); margin: 0 auto; padding: var(--s-section) var(--s-gutter) 0; }
.oq-head { margin-bottom: var(--s-gap-l); }
.oq-head .oq-lede { margin-top: var(--s-gap-m); }
.oq-caption { color: var(--s-muted); margin-top: var(--s-gap-s); max-width: var(--s-measure-narrow); }
@media (min-width: 1024px) {
    .oq-section { display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: start; }
    .oq-head { grid-column: 1 / span 7; }
}

/* Shared: a cut photograph with its drafting overlay on top. */
.oq-draft { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oq-baste { fill: none; stroke: var(--s-ink); stroke-width: var(--s-stroke-baste); stroke-dasharray: var(--s-dash-baste); }
.oq-draw-mask { fill: none; stroke: white; stroke-width: var(--s-mask-stroke); stroke-linejoin: round; }
.oq-mark { fill: none; stroke: var(--s-tacking); stroke-width: var(--s-stroke-mark); }
.oq-mark-cf { stroke-dasharray: var(--s-dash-cf); }
.oq-mark-chalk { stroke: var(--s-chalk); stroke-dasharray: var(--s-dash-chalk); }
.oq-notch { stroke: var(--s-ink); stroke-width: var(--s-stroke-baste); }
.oq-draft-label { fill: var(--s-tacking); font: var(--s-weight-medium) var(--s-step-drafting)/var(--s-leading-tight) var(--s-font-mono); letter-spacing: var(--s-track-caps); text-anchor: middle; filter: url(#oq-chip); }
/* Each label sits on an ink chip (an SVG flood behind the text), so its contrast never depends on the photograph. */
.oq-stitch { fill: none; stroke: var(--s-tacking); stroke-width: var(--s-stroke-baste); stroke-dasharray: var(--s-dash-baste); }
.oq-cut-piece { position: relative; }

/* ── 2. The house ──────────────────────────────────────────────────── */
.oq-sleeve { position: relative; margin: 0 auto var(--s-gap-l); aspect-ratio: var(--s-sleeve-ratio-p); width: calc(var(--s-sleeve-h-phone) * var(--s-sleeve-ratio-p)); }
.oq-sleeve-cut { position: absolute; inset: 0; clip-path: var(--oq-clip-p); }
.oq-sleeve-cut img { width: 100%; height: 100%; object-fit: var(--s-photo-fit); object-position: var(--s-pos-house); }
.oq-draft-l { display: none; }
.oq-house-text p + p { margin-top: var(--s-gap-m); }
.oq-house-text { max-width: var(--s-measure); }
.oq-pull { font: italic var(--s-weight-regular) var(--s-step-sub)/var(--s-leading-tight) var(--s-font-text); margin-top: var(--s-gap-l); padding-left: var(--s-gap-m); border-left: var(--s-ruler-w) solid var(--s-chalk); }
/* The house's figures, pencilled in the margin: mono, small, a ruled leader back into the paragraph. */
.oq-annotated { position: relative; }
.oq-margin {
    display: block; margin-top: var(--s-gap-s); padding-left: var(--s-margin-leader); position: relative;
    font: var(--s-weight-regular) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); color: var(--s-muted);
    font-variant-numeric: var(--s-numeric); max-width: var(--s-measure-note);
}
.oq-margin span { display: block; }
.oq-margin::before { content: ""; position: absolute; left: 0; top: var(--s-margin-rule-y); width: calc(var(--s-margin-leader) - var(--s-gap-xs)); border-top: var(--s-hairline) solid var(--s-muted); }
@media (min-width: 768px) {
    .oq-sleeve { width: 100%; aspect-ratio: var(--s-sleeve-ratio); }
    .oq-sleeve-cut { clip-path: var(--oq-clip); }
    .oq-draft-l { display: block; }
    .oq-draft-p { display: none; }
}
@media (min-width: 1024px) {
    .oq-sleeve { grid-column: 1 / -1; margin: var(--s-gap-m) 0 var(--s-gap-l); }
    .oq-house-text { grid-column: 2 / span 6; }
    .oq-house-text p:not(.oq-pull) { font-size: var(--s-step-lede); }
    .oq-pull { margin-top: var(--s-gap-l); }
    /* In the margin beside the paragraph, its leader ruled back across the gutter to the text. */
    .oq-margin { position: absolute; left: 100%; top: 0; margin: 0; padding-left: var(--s-margin-reach); width: var(--s-measure-note); rotate: var(--s-margin-tilt); }
    .oq-margin::before { width: calc(var(--s-margin-reach) - var(--s-gap-s)); left: var(--s-gap-xs); }
}

/* ── 3. Eight weeks (signature) ────────────────────────────────────── */
.oq-weeks { margin-top: var(--s-gap-xl); }   /* margin, not padding: the anchor lands on the composed frame; one step after the house text, not a section */
.oq-weeks-stage { max-width: var(--s-max); margin: 0 auto; padding: 0 var(--s-gutter); }
.oq-weeks-head { margin-bottom: var(--s-gap-l); }
.oq-weeks-head .oq-lede { margin-top: var(--s-gap-m); }
/* The static pattern sheet: no JS, reduced motion, and the designed final state. */
.oq-stages { display: grid; grid-template-columns: 1fr; gap: var(--s-gap-xl); }
.oq-stage figure { display: grid; gap: var(--s-gap-m); }
.oq-piece { position: relative; aspect-ratio: var(--s-stage-ratio); width: min(100%, var(--s-piece-w-sheet)); filter: var(--s-drop-paper); }
.oq-piece-cut { position: absolute; inset: 0; clip-path: var(--oq-clip); background: var(--s-manila-deep); }
.oq-piece-cut img { width: 100%; height: 100%; object-fit: var(--s-photo-fit); object-position: var(--s-pos-stage); }
.oq-stage-cap { max-width: var(--s-measure-narrow); }
.oq-stage-cap .oq-h3 { margin: var(--s-gap-xs) 0 var(--s-gap-s); }
.oq-tag { display: inline-block; padding: var(--s-gap-xs) var(--s-gap-s); background: var(--s-manila-leaf); border: var(--s-hairline) solid var(--s-rule); font-variant-numeric: var(--s-numeric); }
.oq-ruler { display: none; }
@media (min-width: 768px) {
    .oq-weeks-head { display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: end; }
    .oq-weeks-head > :not(.oq-lede) { grid-column: 1 / span 6; }
    .oq-weeks-head .oq-lede { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: 0; }
    .oq-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-grid-gap); }
    .oq-stage figure { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
}

/* Pinned stage (JS + motion): one piece, four stages crossfading as you scroll. */
/* Phones: the section head sits at the top of the sticky frame and scrolls away above it (a negative
   sticky top equal to the head's height, which site.js measures into --oq-head-h), so the pinned frame
   is the piece, its notation and the ruler. */
html.oq-pin .oq-weeks .oq-weeks-track { height: calc(100vh + var(--s-weeks-pin-phone) + var(--oq-head-h)); height: calc(100svh + var(--s-weeks-pin-phone) + var(--oq-head-h)); }
html.oq-pin .oq-weeks .oq-weeks-stage {
    position: sticky; top: calc(var(--s-nav-h-mobile) - var(--oq-head-h));
    height: calc(100vh - var(--s-nav-h-mobile) + var(--oq-head-h)); height: calc(100svh - var(--s-nav-h-mobile) + var(--oq-head-h));
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s-gap-s); padding-block: 0 var(--s-gap-s);
}
html.oq-pin .oq-weeks .oq-weeks-head { margin-bottom: 0; padding-bottom: var(--s-gap-s); }
html.oq-pin .oq-weeks .oq-stages { display: grid; grid-template-areas: "s"; grid-template-columns: minmax(0, 1fr); min-height: 0; }
html.oq-pin .oq-weeks .oq-stage { grid-area: s; min-height: 0; }
html.oq-pin .oq-weeks .oq-stage:not(:first-child) { opacity: 0; visibility: hidden; }
html.oq-pin .oq-weeks .oq-stage figure { height: 100%; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: 1fr; justify-items: center; gap: var(--s-gap-s); }
html.oq-pin .oq-weeks .oq-piece { height: var(--s-stage-h-phone-vh); height: var(--s-stage-h-phone); width: auto; max-width: 100%; }
html.oq-pin .oq-weeks .oq-stage-cap { text-align: center; }
html.oq-pin .oq-weeks .oq-stage-cap p:last-child { font-size: var(--s-step-small); line-height: var(--s-leading-tight); }
html.oq-pin .oq-weeks .oq-ruler { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-gap-s); }
.oq-ruler-bar { position: relative; height: var(--s-ruler-w); background: var(--s-rule); margin-block: var(--s-gap-m); }
.oq-ruler-fill { position: absolute; inset: 0; background: var(--s-chalk); transform-origin: 0 50%; transform: scaleX(var(--oq-fill)); height: var(--s-ruler-fill); top: 50%; translate: 0 -50%; }
.oq-ruler-stop { position: absolute; left: calc(var(--oq-at) * 100%); top: 50%; translate: -50% -50%; display: grid; place-items: center; }
.oq-ruler-week {
    display: grid; place-items: center; width: var(--s-ruler-dot); height: var(--s-ruler-dot); border-radius: 50%;
    background: var(--s-bg); border: var(--s-ruler-w) solid var(--s-ink); font-variant-numeric: var(--s-numeric);
    transition: background-color var(--s-dur-ui) var(--s-ease-ui), color var(--s-dur-ui) var(--s-ease-ui);
}
.oq-ruler-stop.is-on .oq-ruler-week { background: var(--s-ink); color: var(--s-tacking); }
.oq-ruler-name { display: none; }
.oq-ruler-label, .oq-ruler-of { display: none; }
html.oq-pin .oq-weeks .oq-ruler { grid-template-columns: minmax(0, 1fr); padding-inline: calc(var(--s-ruler-dot) / 2); }
@media (min-width: 1024px) {
    html.oq-pin .oq-weeks .oq-weeks-track { height: calc(100vh + var(--s-weeks-pin-desktop)); height: calc(100svh + var(--s-weeks-pin-desktop)); }
    /* Desktop: the whole scene is one composed frame: the section head at the top of the left column,
       the stage's notation at its foot, the forepart in the middle, the week ruler upright on the right. */
    html.oq-pin .oq-weeks .oq-weeks-track { height: calc(100vh + var(--s-weeks-pin-desktop)); height: calc(100svh + var(--s-weeks-pin-desktop)); }
    html.oq-pin .oq-weeks .oq-weeks-stage {
        top: var(--s-nav-h); height: calc(100vh - var(--s-nav-h)); height: calc(100svh - var(--s-nav-h));
        grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--s-grid-gap);
        padding-block: var(--s-gap-l);
    }
    html.oq-pin .oq-weeks .oq-weeks-head { display: block; grid-column: 1 / span 5; grid-row: 1; align-self: start; position: relative; z-index: 1; padding-bottom: 0; }
    html.oq-pin .oq-weeks .oq-weeks-head .oq-h2 { font-size: var(--s-step-h2-pinned); }
    html.oq-pin .oq-weeks .oq-weeks-head .oq-lede { margin-top: var(--s-gap-m); font-size: var(--s-step-body); }
    html.oq-pin .oq-weeks .oq-stages { grid-column: 1 / span 10; grid-row: 1; }
    html.oq-pin .oq-weeks .oq-stage figure {
        grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--s-grid-gap); align-items: center; justify-items: stretch;
    }
    html.oq-pin .oq-weeks .oq-piece { grid-column: 6 / -1; grid-row: 1; justify-self: center; height: var(--s-stage-h-vh); height: var(--s-stage-h); max-height: 100%; }
    html.oq-pin .oq-weeks .oq-stage-cap { grid-column: 1 / span 5; grid-row: 1; text-align: left; align-self: end; }
    html.oq-pin .oq-weeks .oq-stage-cap p:last-child { font-size: var(--s-step-body); line-height: var(--s-leading-body); }
    html.oq-pin .oq-weeks .oq-stage-cap .oq-h3 { margin: var(--s-gap-s) 0; }
    /* The ruler stands upright on desktop: week 1 at the top, week 8 at the foot. */
    html.oq-pin .oq-weeks .oq-ruler { grid-column: 11 / -1; row-gap: var(--s-gap-l); grid-row: 1; grid-template-columns: auto; grid-template-rows: auto minmax(0, 1fr) auto; height: var(--s-ruler-h); align-self: center; justify-items: start; }
    html.oq-pin .oq-weeks .oq-ruler-bar { width: var(--s-ruler-w); height: 100%; margin: 0 0 0 calc(var(--s-ruler-dot) / 2); }
    html.oq-pin .oq-weeks .oq-ruler-fill { transform-origin: 50% 0; transform: scaleY(var(--oq-fill)); width: var(--s-ruler-fill); height: auto; top: 0; left: 50%; translate: -50% 0; }
    html.oq-pin .oq-weeks .oq-ruler-stop { left: 50%; top: calc(var(--oq-at) * 100%); translate: calc(var(--s-ruler-dot) / -2) -50%; grid-template-columns: auto auto; gap: var(--s-gap-s); place-items: center start; }
    html.oq-pin .oq-weeks .oq-ruler-name { display: block; white-space: nowrap; color: var(--s-muted); }
    html.oq-pin .oq-weeks .oq-ruler-label, html.oq-pin .oq-weeks .oq-ruler-of { display: block; }
    html.oq-pin .oq-weeks .oq-ruler { padding-inline: 0; }
    html.oq-pin .oq-weeks .oq-ruler-stop.is-on .oq-ruler-name { color: var(--s-ink); }
}

/* ── 4. The cloth ──────────────────────────────────────────────────── */
.oq-cloth-head .oq-hint { margin-top: var(--s-gap-m); max-width: var(--s-measure-narrow); }
/* The cloth lies on a navy board: the one dark ground on the page, inset from the page margins. */
.oq-section.oq-cloth { margin-top: var(--s-section); padding: var(--s-cloth-pad) var(--s-gutter); background: var(--s-ink); color: var(--s-tacking); }
.oq-cloth .oq-lede, .oq-cloth .oq-hint, .oq-cloth .oq-sq-notes dt, .oq-cloth .oq-detail-body dt, .oq-cloth .oq-count { color: var(--s-tacking-soft); }
.oq-cloth .oq-link { color: var(--s-tacking); }
.oq-cloth :focus-visible, .oq-cloth .oq-sq-btn:focus-visible .oq-sq-name, .oq-cloth .oq-sq-btn:focus-visible .oq-sq-cut { outline-color: var(--s-tacking); }
.oq-cloth .oq-sq, .oq-cloth .oq-detail-cut { filter: var(--s-shadow-ink); }
.oq-bunch { position: relative; }
.oq-sq { list-style: none; }
.oq-sq-btn { display: grid; gap: var(--s-gap-s); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.oq-sq-cut { display: block; aspect-ratio: 1; clip-path: var(--oq-clip); background: var(--s-manila-deep); }
.oq-sq-cut img { width: 100%; height: 100%; object-fit: var(--s-photo-fit); }
.oq-sq-btn:focus-visible { outline: none; }
.oq-sq-btn:focus-visible .oq-sq-name { outline: var(--s-focus-ring) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.oq-sq-name { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); letter-spacing: var(--s-track-note); }
.oq-sq-title { font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); margin-bottom: var(--s-gap-s); }
.oq-sq-notes dl, .oq-detail-body dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-gap-xs) var(--s-gap-m); font: var(--s-weight-regular) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); }
.oq-sq-notes dl div, .oq-detail-body dl div { display: contents; }
.oq-sq-notes dt, .oq-detail-body dt { color: var(--s-muted); text-transform: uppercase; letter-spacing: var(--s-track-caps); }
.oq-sq-note { margin-top: var(--s-gap-s); font-style: italic; }
.oq-fan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap-l) var(--s-grid-gap); }
.oq-sq-notes { margin-top: var(--s-gap-s); }
.oq-fan-count { display: none; }
@media (min-width: 768px) { .oq-fan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Enhanced (site.js): the bunch fans out; notes move into the brought-forward view. */
html.oq-js .oq-bunch .oq-sq-notes { display: none; }
.oq-detail[hidden] { display: none; }
.oq-detail-title { font: var(--s-weight-regular) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display); margin-bottom: var(--s-gap-m); }
.oq-detail-cut { aspect-ratio: 1; filter: var(--s-drop-paper); }
.oq-detail-cut img { width: 100%; height: 100%; object-fit: var(--s-photo-fit); clip-path: var(--oq-clip); }
.oq-detail-close { margin-top: var(--s-gap-s); font-size: var(--s-step-body); }
.oq-detail-grab { display: none; }
@media (max-width: 767px) {
    html.oq-js .oq-bunch .oq-fan {
        display: flex; gap: var(--s-gap-m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(var(--s-gutter) * -1); padding: var(--s-gap-s) var(--s-gutter); scroll-padding: 0 var(--s-gutter);
    }
    html.oq-js .oq-bunch .oq-fan::-webkit-scrollbar { display: none; }
    html.oq-js .oq-bunch .oq-sq { flex: 0 0 var(--s-bunch-item-phone); scroll-snap-align: start; filter: var(--s-drop-paper); }
    html.oq-js .oq-bunch .oq-fan-count { display: block; margin-top: var(--s-gap-xs); }
    html.oq-js .oq-bunch .oq-sq-name { transition: opacity var(--s-dur-ui) var(--s-ease-ui); }
    html.oq-js .oq-bunch .oq-sq:not(.is-current) .oq-sq-name { opacity: 0; }
    /* The brought-forward cloth is a bottom sheet on phones. */
    .oq-detail {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--s-z-sheet); color: var(--s-ink);
        max-height: var(--s-sheet-max-vh); max-height: var(--s-sheet-max); overflow-y: auto;
        display: grid; grid-template-columns: var(--s-sheet-thumb) minmax(0, 1fr); gap: var(--s-gap-m); align-items: start;
        padding: var(--s-gap-s) var(--s-gutter) calc(var(--s-gap-l) + env(safe-area-inset-bottom));
        background: var(--s-manila-leaf); border-top: var(--s-ruler-w) solid var(--s-ink);
        box-shadow: var(--s-shadow-paper);
        transition: transform var(--s-dur-sheet) var(--s-ease-ui);
    }
    .oq-detail-grab { display: block; grid-column: 1 / -1; justify-self: center; width: var(--s-gap-l); border-top: var(--s-ruler-w) dashed var(--s-ink); margin-bottom: var(--s-gap-s); }
    .oq-detail-close { grid-column: 1 / -1; }
    .oq-veil { position: fixed; inset: 0; z-index: calc(var(--s-z-sheet) - 1); background: var(--s-veil); opacity: 0; transition: opacity var(--s-dur-sheet) var(--s-ease-ui); }
    .oq-veil.is-on { opacity: 1; }
    .oq-detail-title { font-size: var(--s-step-h3); margin-bottom: var(--s-gap-s); }
    .oq-cloth .oq-detail dt { color: var(--s-ink-soft); }
    .oq-cloth .oq-detail .oq-link { color: var(--s-ink); }
    .oq-cloth .oq-detail :focus-visible { outline-color: var(--s-ink); }
    .oq-section.oq-cloth { padding-inline: var(--s-gutter); }
}
@media (min-width: 768px) {
    .oq-section.oq-cloth { width: calc(100% - var(--s-panel-inline) * 2); }
    html.oq-js .oq-bunch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-grid-gap); align-items: center; }
    html.oq-js .oq-bunch .oq-fan { position: relative; display: block; height: var(--s-bunch-stage-h); }
    /* A bunch spread on the board: each square steps along and turns a little about a hinge below. */
    html.oq-js .oq-bunch .oq-sq {
        position: absolute; left: calc(50% - var(--s-bunch-size) / 2); bottom: var(--s-gap-l); width: var(--s-bunch-size);
        transform-origin: 50% var(--s-bunch-pivot);
        transform: translateX(calc((var(--oq-i) - (var(--oq-n) - 1) / 2) * var(--s-bunch-shift))) rotate(calc((var(--oq-i) - (var(--oq-n) - 1) / 2) * var(--s-bunch-fan)));
        transition: transform var(--s-dur-fan) var(--s-ease-settle);
    }
    /* The chosen cloth rises out of the bunch (keeping its place in the stack, so every strip still shows);
       its large cut is brought forward beside it. */
    html.oq-js .oq-bunch .oq-sq.is-chosen {
        transform: translateX(calc((var(--oq-i) - (var(--oq-n) - 1) / 2) * var(--s-bunch-shift))) rotate(calc((var(--oq-i) - (var(--oq-n) - 1) / 2) * var(--s-bunch-fan))) translateY(var(--s-bunch-lift));
    }
    html.oq-js .oq-bunch .oq-sq-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    html.oq-js .oq-bunch .oq-sq-btn:focus-visible .oq-sq-cut { outline: var(--s-focus-ring) solid var(--s-tacking); outline-offset: var(--s-focus-offset); }
    html.oq-js .oq-bunch .oq-sq-btn:hover:not([aria-pressed="true"]) { transform: translateY(var(--s-bunch-peek)); }
    .oq-sq-btn { transition: transform var(--s-dur-ui) var(--s-ease-ui); }
    .oq-detail { display: grid; grid-template-columns: var(--s-detail-img) minmax(0, 1fr); gap: var(--s-gap-m); align-items: end; }
    .oq-detail-cut { display: block; grid-row: 1 / span 2; width: var(--s-detail-img); }
    .oq-detail-body, .oq-detail-close { grid-column: 2; }
    .oq-detail-title { font-size: var(--s-step-h3); margin-bottom: var(--s-gap-s); }
    .oq-detail-body dl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .oq-detail-body dd { margin-bottom: var(--s-gap-s); }
    .oq-veil { display: none; }
    /* The head runs across the board: title left, lede right. */
    .oq-cloth-head { display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: end; }
    .oq-cloth-head > .oq-kicker, .oq-cloth-head > .oq-h2 { grid-column: 1 / span 6; }
    .oq-cloth-head > .oq-lede, .oq-cloth-head > .oq-hint { grid-column: 8 / -1; margin-top: 0; }
    .oq-cloth-head > .oq-lede { grid-row: 1 / span 2; align-self: end; }
    .oq-cloth-head > .oq-hint { grid-row: 3; margin-top: var(--s-gap-s); }
}
@media (min-width: 1024px) {
    .oq-cloth-head { grid-column: 1 / -1; grid-row: 1; }
    .oq-bunch { grid-column: 1 / -1; }
}

/* ── 5. The workroom ───────────────────────────────────────────────── */
.oq-work { margin-bottom: var(--s-gap-xl); filter: var(--s-drop-paper); }
.oq-work-cut { clip-path: var(--oq-clip); background: var(--s-manila-deep); }
.oq-work-cut img { width: 100%; height: auto; }
.oq-ledger-wrap { max-width: var(--s-measure); }
.oq-ledger { width: 100%; border-collapse: collapse; font-variant-numeric: var(--s-numeric); }
.oq-ledger caption { text-align: left; caption-side: top; padding-bottom: var(--s-gap-s); font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.oq-ledger th, .oq-ledger td { padding: var(--s-gap-s) 0; border-bottom: var(--s-hairline) solid var(--s-rule); text-align: left; font-weight: var(--s-weight-regular); }
.oq-ledger thead th { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); border-bottom-color: var(--s-ink); }
.oq-ledger td, .oq-ledger thead th:last-child { text-align: right; white-space: nowrap; font-family: var(--s-font-mono); }
.oq-ledger tfoot th, .oq-ledger tfoot td { border-bottom: 0; border-top: var(--s-ruler-w) solid var(--s-ink); padding-top: var(--s-gap-m); }
.oq-ledger tfoot td { font: var(--s-weight-regular) var(--s-step-figure)/var(--s-leading-display) var(--s-font-display); }
.oq-ledger tfoot th { font: var(--s-weight-medium) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text); text-transform: uppercase; letter-spacing: var(--s-track-caps); vertical-align: bottom; }
.oq-ledger-note { color: var(--s-muted); margin-top: var(--s-gap-m); }
@media (min-width: 768px) and (max-width: 1023px) {
    .oq-workroom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-grid-gap); }
    .oq-workroom .oq-head, .oq-ledger-wrap { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .oq-workroom .oq-head { grid-column: 1 / span 6; }
    /* Two pieces laid on one board: the flap over the facing's shoulder, under the same shadow. */
    .oq-work-a { grid-column: 1 / span 5; grid-row: 2 / span 2; }
    .oq-work-b { grid-column: 6 / -1; grid-row: 2; align-self: start; margin-top: var(--s-work-drop); margin-left: var(--s-work-overlap); position: relative; z-index: 1; }
    .oq-work-b .oq-caption { margin-left: calc(var(--s-work-overlap) * -1); }   /* the caption starts clear of the facing beneath */
    .oq-ledger-wrap { grid-column: 7 / -1; grid-row: 3; }
}

/* ── 6. Commissions: the cutter's ticket ───────────────────────────── */
.oq-ticket { border: var(--s-hairline) solid var(--s-ink); background: var(--s-manila-leaf); }
.oq-ticket-no {
    display: flex; justify-content: space-between; padding: var(--s-gap-s) var(--s-gap-m);
    background: var(--s-ink); color: var(--s-tacking);
    font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); letter-spacing: var(--s-track-caps); text-transform: uppercase;
}
.oq-ticket-table { width: 100%; border-collapse: collapse; }
.oq-ticket-table th, .oq-ticket-table td { padding: var(--s-gap-m); border-bottom: var(--s-hairline) solid var(--s-rule-strong); text-align: left; vertical-align: baseline; font-weight: var(--s-weight-regular); }
.oq-ticket-table thead th { padding-block: var(--s-gap-s); font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); }
.oq-ticket-table thead th:last-child, .oq-ticket-table td { text-align: right; }
.oq-ticket-item { display: block; font: var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.oq-ticket-detail { display: block; margin-top: var(--s-gap-xs); color: var(--s-muted); font-size: var(--s-step-small); }
.oq-ticket-table td { font: var(--s-weight-regular) var(--s-step-price)/var(--s-leading-tight) var(--s-font-display); font-variant-numeric: var(--s-numeric); white-space: nowrap; }
/* r5 focal point: the two-piece suit is what most clients commission, so its row leads the ticket. */
.oq-ticket-table tbody tr:first-child { background: var(--s-manila-leaf); }
.oq-ticket-table tbody tr:first-child th, .oq-ticket-table tbody tr:first-child td { padding-block: var(--s-gap-l); border-bottom-width: var(--s-rule-lead); }
.oq-ticket-table tbody tr:first-child .oq-ticket-item { font-size: var(--s-step-h2); }
.oq-ticket-table tbody tr:first-child td { font-size: var(--s-step-lead-price); vertical-align: middle; }
.oq-ticket-foot { display: grid; gap: var(--s-gap-l); padding: var(--s-gap-m); }
.oq-included li { padding-left: var(--s-gap-m); position: relative; }
.oq-included li + li { margin-top: var(--s-gap-xs); }
.oq-included li::before { content: ""; position: absolute; left: 0; top: var(--s-bullet-y); width: var(--s-gap-s); border-top: var(--s-hairline) dashed var(--s-ink); }
.oq-terms { display: grid; gap: var(--s-gap-s); }
.oq-terms div { display: grid; grid-template-columns: var(--s-terms-label) minmax(0, 1fr); gap: var(--s-gap-s); padding-top: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule); }
.oq-terms dt { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); }
.oq-kept { margin-top: var(--s-gap-xl); }
.oq-kept-cut { clip-path: var(--oq-clip); background: var(--s-manila-deep); }
.oq-kept-cut img { width: 100%; height: auto; }
.oq-kept { filter: var(--s-drop-paper); }
@media (max-width: 767px) {
    .oq-ticket-table th, .oq-ticket-table td { padding: var(--s-gap-s) var(--s-gap-s); }
    .oq-ticket-table td { font-size: var(--s-step-h3); }
    .oq-kept { width: var(--s-kept-w-phone); margin-left: auto; }
}
@media (min-width: 768px) { .oq-ticket-foot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
@media (min-width: 1024px) {
    .oq-commissions .oq-head { grid-column: 1 / span 7; }
    .oq-ticket { grid-column: 1 / span 8; }
    /* The kept back stands beside the heading and the top of the ticket, filling the corner. */
    .oq-kept { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: start; margin-top: var(--s-gap-l); }
}

/* ── 7. First fitting: the order-book counterfoil ──────────────────── */
.oq-fitting .oq-head { margin-bottom: calc(var(--s-gap-l) + var(--s-band-head)); }
.oq-book { position: relative; isolation: isolate; display: grid; gap: var(--s-gap-xl); }
/* The closing's navy band: the leaf is laid on navy cloth; the band stops above the stub, so the
   torn-off counterfoil lies on manila. */
.oq-book::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--s-ink);
    left: calc(50% - 50vw); right: calc(50% - 50vw); top: calc(var(--s-band-head) * -1); bottom: var(--s-band-foot-phone);
}
.oq-leaf {
    position: relative; isolation: isolate;
    background-color: var(--s-manila-leaf);
    background-image: repeating-linear-gradient(transparent 0, transparent calc(var(--s-leaf-rule) - var(--s-hairline)), var(--s-ruling) calc(var(--s-leaf-rule) - var(--s-hairline)), var(--s-ruling) var(--s-leaf-rule));
    background-position: 0 var(--s-leaf-rule-start);
    border: var(--s-hairline) solid var(--s-rule);
    box-shadow: var(--s-shadow-paper);
}
.oq-carbon {
    position: absolute; inset: 0; z-index: -1; translate: var(--s-carbon-offset);
    background-image: repeating-linear-gradient(transparent 0, transparent calc(var(--s-leaf-rule) - var(--s-hairline)), var(--s-carbon-ghost) calc(var(--s-leaf-rule) - var(--s-hairline)), var(--s-carbon-ghost) var(--s-leaf-rule));
    background-color: var(--s-carbon-paper);
    border: var(--s-hairline) solid var(--s-carbon-ghost);
}
.oq-leaf-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-gap-s); align-items: baseline;
    padding: var(--s-gap-m) var(--s-gap-m) var(--s-gap-s); border-bottom: var(--s-ruler-w) solid var(--s-ink);
    font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps);
}
.oq-docket-no { font-size: var(--s-step-small); }
/* r5 focal point: the docket number is the order book's one large figure, as a cutter would write it. */
.oq-leaf-head .oq-docket-no { font: var(--s-weight-regular) var(--s-step-h2)/var(--s-leading-tight) var(--s-font-display); letter-spacing: 0; }
.oq-form { padding: var(--s-gap-m); }
.oq-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-gap-m) var(--s-grid-gap); }
.oq-field { display: grid; gap: var(--s-gap-xs); }
.oq-field label { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); }
.oq-req { color: var(--s-muted); text-transform: none; letter-spacing: 0; font-weight: var(--s-weight-regular); }
.oq-field input, .oq-field select, .oq-field textarea {
    width: 100%; min-height: var(--s-tap); padding: var(--s-gap-xs) 0;
    border: 0; border-bottom: var(--s-rule-weight) solid var(--s-ink); border-radius: var(--s-radius);
    background: transparent; color: var(--s-ink);
    font: italic var(--s-weight-regular) var(--s-step-input)/var(--s-leading-tight) var(--s-font-text);
    -webkit-appearance: none; appearance: none;
}
.oq-field select {
    background-image: linear-gradient(var(--s-arrow-turn), transparent 50%, var(--s-ink) 50%), linear-gradient(calc(var(--s-arrow-turn) * 3), var(--s-ink) 50%, transparent 50%);
    background-position: calc(100% - var(--s-gap-s) - var(--s-gap-xs)) 50%, calc(100% - var(--s-gap-s)) 50%; background-size: var(--s-gap-xs) var(--s-gap-xs); background-repeat: no-repeat; padding-right: var(--s-gap-l);
}
.oq-field textarea { min-height: calc(var(--s-leaf-rule) * 3); line-height: var(--s-leaf-line); resize: vertical; }
.oq-field input:focus-visible, .oq-field select:focus-visible, .oq-field textarea:focus-visible { outline: var(--s-focus-ring) solid var(--s-focus); outline-offset: var(--s-focus-offset); border-bottom-color: var(--s-chalk); }
.oq-field [aria-invalid="true"] { border-bottom-color: var(--s-error); }
.oq-err { color: var(--s-error); font: var(--s-weight-regular) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text); }
.oq-err:empty { display: none; }
.oq-submit-row { margin-top: var(--s-gap-l); }
.oq-status { margin-top: var(--s-gap-m); font: italic var(--s-weight-regular) var(--s-step-lede)/var(--s-leading-tight) var(--s-font-text); }
.oq-status:empty { display: none; }
.oq-status:not(:empty) { padding: var(--s-gap-s) var(--s-gap-m); border-left: var(--s-ruler-w) solid var(--s-ink); }
.oq-stub {
    position: relative; padding: var(--s-gap-l) var(--s-gap-m) var(--s-gap-m); background: var(--s-ink); color: var(--s-tacking);
    transition: transform var(--s-dur-torn) var(--s-ease-settle);
}
/* The perforation: a row of selvedge-red holes along the tear line. */
.oq-stub::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--s-perf-dot);
    background: radial-gradient(circle, var(--s-selvedge) calc(var(--s-perf-dot) / 2), transparent calc(var(--s-perf-dot) / 2 + var(--s-hairline))) 0 0 / var(--s-perf-gap) var(--s-perf-dot) repeat-x;
    translate: 0 calc(var(--s-perf-dot) * -1.5);
}
.oq-stub-label { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); margin-bottom: var(--s-gap-xs); }
.oq-stub-text { font: italic var(--s-weight-regular) var(--s-step-body)/var(--s-leading-tight) var(--s-font-text); }
.oq-stub .oq-docket-no { color: var(--s-tacking); font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); margin-right: var(--s-gap-s); }
.oq-leaf.is-torn .oq-stub { transform: translate(var(--s-torn-shift), var(--s-torn-shift)) rotate(var(--s-torn-turn)); }
.oq-bring ul { font: var(--s-weight-regular) var(--s-step-small)/var(--s-leading-body) var(--s-font-mono); counter-reset: oq-bring; }
.oq-bring li { counter-increment: oq-bring; display: grid; grid-template-columns: auto 1fr; gap: var(--s-gap-s); padding: var(--s-gap-s) 0; border-top: var(--s-hairline) dashed var(--s-rule); }
.oq-bring li::before { content: counter(oq-bring, decimal-leading-zero); color: var(--s-muted); }
@media (min-width: 768px) {
    .oq-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oq-field:first-child, .oq-field-notes { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .oq-fitting .oq-head { grid-column: 1 / span 7; }
    .oq-book { grid-column: 1 / -1; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: start; }
    .oq-leaf { grid-column: 1 / span 8; }
    .oq-bring { grid-column: 10 / -1; position: sticky; top: calc(var(--s-nav-h) + var(--s-gap-l)); color: var(--s-tacking); }
    .oq-bring li { border-top-color: var(--s-rule-on-ink); }
    .oq-bring li::before { color: var(--s-tacking-soft); }
    .oq-book::before { bottom: var(--s-band-foot); }
}

/* ── Footer: the inside-pocket label ───────────────────────────────── */
/* r5: the page ends inside the coat. A navy lining band; the label is sewn onto it in tacking-white
   (the reverse of the navy button), with the closing line beside it and the credits as quiet mono. */
.oq-foot {
    background: var(--s-ink); color: var(--s-tacking);
    padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)) var(--s-gap-xl);
    display: grid; gap: var(--s-gap-xl);
}
.oq-foot :focus-visible { outline-color: var(--s-tacking); }
.oq-foot-closing { max-width: var(--s-measure-closing); font: var(--s-weight-regular) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display); text-wrap: balance; }
.oq-foot-sub { margin-top: var(--s-gap-m); max-width: var(--s-measure-sub); font: italic var(--s-weight-regular) var(--s-step-lede)/var(--s-leading-body) var(--s-font-text); color: var(--s-tacking-soft); }
.oq-pocket {
    width: min(100%, var(--s-pocket-label-w)); padding: var(--s-gap-l) var(--s-gap-m);
    background: var(--s-tacking); color: var(--s-ink);
    outline: var(--s-stitch-width) dashed var(--s-ink); outline-offset: calc(var(--s-stitch-inset) * 1.6);
    box-shadow: var(--s-label-shadow);
    transform: rotate(var(--s-label-tilt));
    display: grid; gap: var(--s-gap-s); text-align: center;
    font: var(--s-weight-regular) var(--s-step-small)/var(--s-leading-tight) var(--s-font-text);
}
.oq-pocket-title { font: var(--s-weight-regular) var(--s-step-wordmark)/var(--s-leading-tight) var(--s-font-text); letter-spacing: var(--s-track-wordmark); text-transform: uppercase; }
.oq-pocket-motto { font: italic var(--s-weight-regular) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); padding-bottom: var(--s-gap-s); border-bottom: var(--s-hairline) dashed var(--s-ink); }
.oq-pocket-address { font-style: normal; display: grid; }
.oq-pocket-k { font: var(--s-weight-medium) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); text-transform: uppercase; letter-spacing: var(--s-track-caps); }
.oq-pocket-phone a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-ink); text-underline-offset: var(--s-gap-xs); }
.oq-pocket :focus-visible { outline-color: var(--s-ink); }
.oq-credits {
    grid-column: 1 / -1; padding-top: var(--s-gap-m); border-top: var(--s-hairline) solid var(--s-rule-on-ink);
    font: var(--s-weight-regular) var(--s-step-note)/var(--s-leading-note) var(--s-font-mono); color: var(--s-tacking-soft);
    display: grid; gap: var(--s-gap-s);
}
.oq-credits h2 { color: var(--s-tacking); }
.oq-credits ul { display: flex; flex-wrap: wrap; gap: var(--s-gap-xs) var(--s-gap-m); }
.oq-credit-for::before { content: "· "; }
@media (min-width: 768px) {
    .oq-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-section); align-items: center; }
    .oq-pocket { justify-self: end; }
}

/* ── Desktop chrome ────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .oq-nav { height: var(--s-nav-h); }
    .oq-nav-cta { display: inline-flex; }
}
@media (min-width: 1360px) {
    .oq-nav { gap: var(--s-nav-gap); }
    .oq-links { display: block; }
    .oq-wordmark { letter-spacing: var(--s-track-caps); }
    .oq-nav-cta { padding-inline: var(--s-nav-cta-pad); font-size: var(--s-step-nav); }
    .oq-menu { display: none; }
}

/* ── Motion states (only with JS, only when motion is welcome) ─────── */
html.oq-motion .oq-drawable:not(.is-drawn) .oq-draw-mask { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.oq-motion .oq-drawable .oq-draw-mask { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--s-dur-line) var(--s-ease-draft); }
html.oq-motion .oq-arrival:not(.is-loaded) .oq-grain { clip-path: inset(0 0 100% 0); }
html.oq-motion .oq-arrival:not(.is-loaded) .oq-swatch-cut { translate: 0 var(--s-settle-shift); }
html.oq-motion .oq-swatch-cut { transition: translate var(--s-dur-settle) var(--s-ease-settle); }
html.oq-motion .oq-swatch:nth-child(2) .oq-swatch-cut { transition-delay: var(--s-stagger); }
html.oq-motion .oq-swatch:nth-child(3) .oq-swatch-cut { transition-delay: calc(var(--s-stagger) * 2); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}