/* Hallmark · shape: Feature Stack (from draw 285f15, the design library as the sticky stack; the quote tool kept as its own section) · genre: editorial · theme: Atelier (deal 3/3, seed wall-printing-studio-image-ee69·db763818·2026-10-29·r0) · redesign: full · draw: 285f15
 * hero: Ledge, the wall as the tall field, the head resting at its base · nav: floating pill · footer: mast · imagery: the product built (the wall preview), public-domain artworks hung as matted prints, wall-surface photographs · signature: the live wall preview, the customer's picture multiplied into a real wall surface at true scale, shown on a cotton mat
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: R, the quote tool is a long working form; kept on one cotton card with the matted preview pinned beside it, so it reads as a booking card, not a wizard */
/* Hallmark · waive 39b · button.day 104px in the open-days rail · each open day is a card-stock tag with its weekday set in the serif over the date, tapped like a calendar cell, not a text button */
/* Hallmark · dismissed 58 · the quote section is a working form of six fieldsets whose labels are the job itself, counted as an app screen */
/* Hallmark · dropped the banner line "Printing walls in Toronto, the GTA and Montréal." · the floating pill has no banner row; the cities are in the hero caption's page, the area section and the footer sign-off */
/* Hallmark · dropped the SF and DS codes (SF-01, DS-101) · the owner asked for a less technical look; the codes were labels only, no script reads them */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-wall: oklch(95.5% 0.006 85);
  --color-wall-glass: oklch(90% 0.012 220);
  --air-1: oklch(94.5% 0.010 76);
  --air-2: oklch(97.4% 0.012 86);
  --air-3: oklch(90.5% 0.032 68);
  --pill-h: 64px;
  --mast-h: 96px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.12' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* the air: a slow field behind the page, with grain; paper sheets cover it */
body { color: var(--color-ink-2); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; z-index: 1; background-image: var(--grain); background-size: 180px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }
.air { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.air.is-on { opacity: 1; }
main, .foot { position: relative; z-index: 2; }
.sheet { background: var(--color-paper); }
.sheet--2 { background: var(--color-paper-2); }

h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); }
h3 { font-weight: var(--serif-small); color: var(--color-ink); letter-spacing: 0; }
.lead { color: var(--color-ink-2); }

/* card stock: cotton, fibre, one light from the top left, an inner hairline frame */
.stock { position: relative; border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); }
.stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }

/* chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.masthead { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); padding-inline: var(--gutter); pointer-events: none; transition: transform var(--dur-short) var(--ease-out); }
.masthead.is-tucked { transform: translateY(calc(-100% - var(--space-lg))); }
.pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-xl); max-width: calc(var(--container) - 2 * var(--gutter)); min-height: var(--pill-h); margin-inline: auto; padding: 0 var(--space-xs) 0 var(--space-lg); }
.pill::before { inset: 5px; }
.wordmark { position: relative; font: var(--serif-small) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.pill__links { position: relative; display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.pill a { text-decoration: none; }
.pill__links a, .pill__lang { position: relative; color: var(--color-ink-2); }
.pill__links a:hover, .pill__lang:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.pill__cta { position: relative; min-height: 48px; }

/* controls: a hairline outline in ink, filled on hover; links underlined in slate */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: scale(0.97); }
.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:disabled:hover { background: transparent; color: var(--color-ink); }
.btn[aria-busy="true"] { cursor: progress; }
.link { padding: 0; border: 0; white-space: nowrap; background: none; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-accent); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-lg); }

/* the wall: a surface photo at true scale with the print multiplied into it */
.wall { position: relative; overflow: hidden; background-color: var(--color-wall); background-size: var(--wall-scale, 640px) auto; background-position: center; }
.wall[data-surface="glass"] { background-color: var(--color-wall-glass); }
.wall__print { position: absolute; mix-blend-mode: multiply; }
.wall__layer { position: absolute; inset: 0; background-image: var(--print, none); background-size: var(--print-size, cover); background-position: center; background-repeat: var(--print-repeat, no-repeat); mix-blend-mode: multiply; transition: opacity var(--dur-short) var(--ease-out); }
.wall__layer.is-swapping { opacity: 0; }
/* bare brick and glass get a white base under the ink, as the printer lays one */
.wall__base { position: absolute; inset: 0; background: var(--color-card); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.wall.has-print[data-surface="brick"] .wall__base, .wall.has-print[data-surface="glass"] .wall__base { opacity: 0.72; }

/* the mat a print hangs on */
.mat { padding: var(--space-lg); }
.mat::before { inset: 0.625rem; }
.mat--deep { padding: var(--space-xl); }
.mat--deep::before { inset: 1.25rem; }

/* hero: the wall as a tall field, the head resting on its ledge */
.hero { display: grid; grid-template-rows: max(360px, min(64svh, 100svh - 300px)) auto; }
.hero__field { position: relative; margin: 0; background-size: cover; background-repeat: no-repeat; background-position: center 40%; }
.hero__field .wall__print { left: 50%; top: 56%; height: 64%; width: auto; max-width: 72%; object-fit: contain; transform: translate(-50%, -50%); filter: contrast(1.04) saturate(0.92); }
.tag { position: absolute; background: var(--color-card); box-shadow: 0 1px 3px color-mix(in oklch, var(--color-ink) 25%, transparent); right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: var(--space-lg); max-width: 30ch; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); text-shadow: 0 1px 0 var(--lit); }
.hero__ledge { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; padding-block: var(--space-xl); }
.hero h1 { max-width: 16ch; font-size: clamp(2.75rem, 3.6vw + 1rem, 5rem); letter-spacing: var(--tracking-statement); line-height: 1.02; }
.hero__side { padding-bottom: var(--space-2xs); }

/* sections */
.split-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.quote, .designs, .how { padding-block: var(--section-gap); }
.surfaces, .where { padding-block: var(--section-gap-s); }
.days { padding-block: var(--section-gap-s) 0; }
.days + .quote { padding-top: var(--section-gap-s); }
.days .split-head { margin-bottom: var(--space-xl); }

/* open days: card-stock tags on a rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: max(9rem, calc((min(100%, var(--container)) - 2 * var(--gutter) - 7 * var(--space-md)) / 8)); gap: var(--space-md); margin: 0; padding: var(--space-xs) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-2xl); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.day { position: relative; display: grid; align-content: space-between; gap: var(--space-sm); width: 100%; min-height: 104px; padding: var(--space-md) var(--space-lg); border: 0; border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); color: var(--color-ink); text-align: left; cursor: pointer; transition: transform var(--dur-short) var(--ease-out); }
.day b { font: var(--serif-small) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.day span { font-size: var(--text-sm); color: var(--color-muted); }
.day:active { transform: scale(0.97); }
.day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.day[aria-pressed="true"] { box-shadow: var(--shadow-card), 0 0 0 1px var(--color-ink), inset 0 0 0 4px var(--color-card), inset 0 0 0 5px var(--color-ink); }
@media (hover: hover) and (pointer: fine) { .day:hover { transform: translateY(-3px); } }

/* quote: the booking as a cotton card */
.quote__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.quote__form { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
.step { position: relative; margin: 0; padding: 0 0 var(--space-xl); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.step + .step { padding-top: var(--space-xl); }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step > legend { display: flex; align-items: baseline; gap: var(--space-md); float: left; width: 100%; margin-bottom: var(--space-lg); padding: 0; font: var(--serif-small) var(--text-title)/1.2 var(--font-display); color: var(--color-ink); }
.step > legend + * { clear: both; }
.step__n { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-accent); }
.row { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row--size { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; margin-bottom: var(--space-xs); }
.field { display: grid; gap: var(--space-3xs); align-content: start; }
.field label, .seg > legend { font-size: var(--text-sm); color: var(--color-muted); }
input:not([type="radio"]):not([type="file"]) { width: 100%; min-height: 48px; padding: 0 var(--space-3xs); border: 0; border-bottom: var(--rule-hair) solid var(--color-ink-2); border-radius: 0; background: transparent; color: var(--color-ink); font-size: var(--text-lg); outline: 2px solid transparent; outline-offset: 2px; }
input:not([type="radio"]):focus-visible { outline-color: var(--color-focus); }
input[aria-invalid="true"] { border-bottom-color: var(--color-error); }
input:disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder { color: var(--color-muted); opacity: 0.7; }
.help { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.help.is-error { color: var(--color-error); }
.help.is-ok { color: var(--color-success); }

/* engraved choices: pressed in when chosen, with an ink ring */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.seg > legend { width: 100%; margin-bottom: var(--space-2xs); padding: 0; float: left; }
.seg > legend + * { clear: both; }
.seg input, .cells input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label, .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.seg label:hover, .chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
.seg input:checked + label { border-color: var(--color-ink); background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink), inset 2px 2px 4px var(--color-paper-3); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.seg + .seg, .help + .seg, .cells + .seg { margin-top: var(--space-lg); }

.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-sm); }
.cells label { display: grid; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.cells label:hover { border-color: var(--color-ink); }
.cells input:checked + label { border-color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-ink), inset 2px 2px 4px var(--color-paper-3); }
.cells input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cell__name { padding-inline: var(--space-2xs); font-size: var(--text-sm); line-height: 1.3; color: var(--color-ink); }
.swatch { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1px; background: var(--color-wall); }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch--glass { background: var(--color-wall-glass); }
.swatch--drywall { box-shadow: inset 0 0 0 1px var(--color-rule); }
.swatch--sm { display: inline-block; width: 56px; vertical-align: middle; margin-right: var(--space-md); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.chip { font-size: var(--text-sm); transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:disabled { opacity: 0.55; cursor: not-allowed; }

.drop { display: grid; justify-items: start; gap: var(--space-xs); padding: var(--space-lg); border: var(--rule-hair) dashed var(--color-muted); border-radius: var(--radius-pill); }
.drop.is-over { background: var(--color-paper-2); border-color: var(--color-ink); }
.drop:has(#file:focus-visible) label.btn { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.or { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--text-sm); }
.or a { text-decoration-color: var(--color-accent); }

/* the day picker: a blind impression rings the chosen day */
.cal { margin-bottom: var(--space-lg); }
.cal__month { margin: var(--space-lg) 0 var(--space-xs); font: var(--serif-small) var(--text-lg)/1.2 var(--font-display); color: var(--color-ink); }
.cal__month:first-child { margin-top: 0; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: var(--space-3xs); }
.cal__wd { padding-bottom: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.cal__d { display: grid; place-items: center; width: 44px; height: 44px; margin-inline: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-rule); font: var(--serif-small) var(--text-md)/1 var(--font-display); }
button.cal__d { color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
button.cal__d:hover { background: var(--color-paper-2); }
button.cal__d:active { transform: scale(0.94); }
button.cal__d:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
button.cal__d[aria-pressed="true"] { background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-ink), inset 2px 2px 5px var(--color-paper-3), 0 1px 0 var(--lit); }
button.cal__d:disabled { opacity: 0.55; cursor: not-allowed; }

.submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.btn--submit { min-width: 16rem; }
.help--status { margin-top: var(--space-sm); color: var(--color-ink-2); }
.help--status:not(:empty) { padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-accent); background: var(--color-paper-2); }
.save { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.save__h { margin: 0; font: var(--serif-small) var(--text-xl)/1.25 var(--font-display); color: var(--color-ink); }
.save__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); }
.save__row .field { flex: 1 1 14rem; min-width: 0; }
.save a { overflow-wrap: anywhere; }
.done { padding: var(--space-2xl) var(--space-xl); align-self: start; }
.done h3 { margin: 0 0 var(--space-md); font: var(--serif-small) var(--text-title)/1.2 var(--font-display); color: var(--color-ink); }
.done p { max-width: 52ch; margin: 0 0 var(--space-xl); }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* the quote beside it: a matted preview and a ruled bill */
.summary { position: sticky; top: calc(var(--mast-h) + var(--space-md)); display: grid; gap: var(--space-lg); }
.summary h3 { font-size: var(--text-2xl); font-weight: var(--display-weight); }
.preview { margin: 0; }
.preview__wall { width: min(100%, calc(320px * var(--ar, 1.25))); margin-inline: auto; aspect-ratio: var(--ar, 1.25); box-shadow: 0 0 0 1px var(--color-card-edge); --wall-scale: 50%; }
.preview__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
#dims { font: var(--serif-small) var(--text-md)/1.4 var(--font-display); color: var(--color-ink); }
.preview__cap .is-soft { color: var(--color-error); }
.summary__zone { color: var(--color-ink); }
.summary__zone:empty, .summary__time:empty { display: none; }
.lines { display: grid; margin: 0; border-top: var(--rule-head) solid var(--color-ink); }
.lines > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.lines dt { color: var(--color-ink-2); }
.lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
.lines .is-total { align-items: baseline; padding-block: var(--space-md); border-bottom-color: var(--color-ink); }
.lines .is-total dt, .lines .is-total dd { font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); letter-spacing: var(--tracking-display); }
.lines .is-due dt, .lines .is-due dd { font: var(--serif-small) var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.lines__empty dt { color: var(--color-muted); }
.summary__time { font-size: var(--text-sm); color: var(--color-ink-2); }

/* designs: the head held still, the prints hung down the wall beside it */
.designs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.designs__wall { min-width: 0; }
.designs__pane { position: sticky; top: calc(var(--mast-h) + var(--space-xl)); display: grid; gap: var(--space-lg); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-head) solid var(--color-ink); }
.tabs button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-muted); font: var(--serif-small) var(--text-lg)/1.2 var(--font-display); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em; cursor: pointer; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.tabs button:hover { color: var(--color-ink); }
.tabs button[aria-selected="true"] { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
html:not(.js) .tabs { display: none; }
.js [data-hide] { display: none; }
[role="tabpanel"] + [role="tabpanel"] { margin-top: var(--space-3xl); }
.js [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
/* a salon hang: two to a row at unequal sizes, the smaller one dropped */
.hang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; margin: 0; padding: 0; list-style: none; }
.hang > li { display: flex; grid-column: span 7; }
.hang > li:nth-child(4n+2), .hang > li:nth-child(4n+3) { grid-column: span 5; }
.hang > li:nth-child(4n+2) { margin-top: var(--space-3xl); }
.hang > li:nth-child(4n+3) { justify-content: flex-end; }
.design { display: grid; gap: var(--space-md); width: min(100%, calc(52svh * var(--arn, 1.3) + 3rem)); padding: 0; border: 0; background: none; color: var(--color-ink); text-align: left; cursor: pointer; }
.design__mat { display: block; padding: var(--space-lg); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.design__mat { position: relative; border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); }
.design__img { display: block; aspect-ratio: var(--ar, 4 / 3); box-shadow: 0 0 0 1px var(--color-card-edge); }
.design__img > img { filter: none; }
.design__label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-lg); align-items: baseline; }
.design__name { font: var(--serif-small) var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.design__by { grid-row: 2; font-size: var(--text-sm); color: var(--color-muted); }
.design__act { grid-row: 1 / span 2; align-self: center; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; white-space: nowrap; }
.design:active .design__mat { transform: scale(0.99); }
.design:focus-visible { outline: none; }
.design:focus-visible .design__mat { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.design[aria-pressed="true"] .design__mat { box-shadow: var(--shadow-card), 0 0 0 1px var(--color-ink); }
.design[aria-pressed="true"] .design__act { text-decoration: none; color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .design:hover .design__mat { transform: translateY(-4px); } }

/* surfaces: a ruled table */
.table-wrap { overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; border-top: var(--rule-head) solid var(--color-ink); }
.spec th, .spec td { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: middle; }
.spec thead th { padding-block: var(--space-sm); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.spec tbody th { font: var(--serif-small) var(--text-title)/1.2 var(--font-display); color: var(--color-ink); white-space: nowrap; }
.spec td { color: var(--color-ink-2); }
.spec .num { text-align: right; white-space: nowrap; color: var(--color-ink); }

/* how a print day runs: a ruled list, one row a step */
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: var(--rule-head) solid var(--color-ink); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(step); font: var(--display-weight) var(--text-3xl)/1 var(--font-display); color: var(--color-accent); }

/* where the printer goes */
.where__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.where__grid h2 { grid-column: 1 / -1; }
.area h3 { margin-bottom: var(--space-md); font-size: var(--text-2xl); }
.area dl, .where__facts { margin: 0; }
.area dl > div, .where__facts > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.area dd, .where__facts dd { margin: 0; white-space: nowrap; color: var(--color-ink); }
.where__facts { align-self: end; }
.where__facts dt { color: var(--color-muted); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); }

/* close: one more print, matted, with its line pencilled under it */
.close { padding-block: var(--section-gap) var(--section-gap-l); }
.close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.close__fig { margin: 0; }
.close__wall { aspect-ratio: 3 / 2; box-shadow: 0 0 0 1px var(--color-card-edge); --wall-scale: 420px; }
.close__wall .wall__print { left: 12%; top: 14%; width: 76%; height: auto; }
.pencil { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-pencil); }
.pencil__rule { flex: none; width: 4.5rem; border-bottom: var(--rule-hair) solid var(--color-pencil); }
.close__text { display: grid; gap: var(--space-lg); justify-items: start; }
.close__text h2 { letter-spacing: var(--tracking-statement); }

/* footer: the name large over the links */
.foot { padding-block: var(--space-3xl) var(--space-2xl); }
.foot__mast { margin-bottom: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-head) solid var(--color-ink); font: var(--display-weight) clamp(4rem, 10vw + 1rem, 10rem)/0.95 var(--font-display); letter-spacing: var(--tracking-statement); color: var(--color-ink); }
.foot__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-lg) var(--gap-columns); }
.foot__sign { font: var(--serif-small) var(--text-lg)/1.4 var(--font-display); color: var(--color-ink); }
.foot__sign time { color: var(--color-muted); }
.foot__links { display: flex; flex-wrap: wrap; align-content: start; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot__links a { white-space: nowrap; text-decoration-color: var(--color-accent); }
.foot__legal, .foot__credits { grid-column: 1 / -1; font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); max-width: none; }
.foot__credits { max-width: 110ch; }

/* mobile total bar */
.mbar { position: fixed; inset: auto var(--space-xs) var(--space-xs); z-index: var(--z-sticky); display: none; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); }
.mbar::before { inset: 5px; }
.mbar > * { position: relative; }
.mbar b { font: var(--serif-small) var(--text-xl)/1 var(--font-display); color: var(--color-ink); }
.mbar__label { color: var(--color-muted); font-size: var(--text-sm); }
.mbar .btn { min-height: 48px; }

@media (max-width: 75rem) {
  .pill__links { display: none; }
  .pill__lang { margin-left: auto; }
}
@media (max-width: 60rem) {
  :root { --pill-h: 56px; --mast-h: 80px; }
  .masthead { inset: var(--space-xs) 0 auto; padding-inline: var(--space-xs); }
  .pill { gap: var(--space-md); padding-left: var(--space-md); }
  .hero { min-height: 0; grid-template-rows: auto auto; }
  .hero__field { height: 58svh; min-height: 380px; }
  .hero__field .wall__print { top: 46%; height: auto; width: 84%; max-width: none; max-height: 52%; }
  .tag { left: var(--gutter); right: var(--gutter); bottom: var(--space-md); max-width: none; padding: var(--space-sm) var(--space-md); }
  .hero__ledge, .split-head, .quote__grid, .designs__grid, .how__grid, .close__grid, .where__grid, .foot__in { grid-template-columns: minmax(0, 1fr); }
  .hero__ledge { gap: var(--space-md); padding-block: var(--space-lg) var(--space-xl); }
  .split-head { gap: var(--space-md); }
  .summary, .designs__pane { position: static; }
  .quote__form { padding: var(--space-xl) var(--space-lg); }
  .quote__form::before { inset: 0.5rem; }
  .row--2, .row--3 { grid-template-columns: minmax(0, 1fr); }
  .hang { gap: var(--space-2xl); }
  .designs__grid, .how__grid, .close__grid { row-gap: var(--space-xl); }
  .hang { grid-template-columns: minmax(0, 1fr); }
  .hang > li, .hang > li:nth-child(4n+2), .hang > li:nth-child(4n+3) { grid-column: 1 / -1; margin-top: 0; justify-content: flex-start; }
  .design { width: 100%; }
  .quote-in:not(.summary-seen) .mbar:not([hidden]) { display: flex; }
  .quote-in { padding-bottom: 88px; }
  html:has(.quote-in) { scroll-padding-bottom: 104px; }
  .foot__links { justify-content: flex-start; }
  .foot { padding-bottom: var(--space-3xl); }
}
@media (max-width: 40rem) {
  .pill__cta { padding-inline: var(--space-md); }
  .wordmark { font-size: var(--text-lg); }
  .row--size { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row--size .seg { grid-column: 1 / -1; }
  .rail { grid-auto-columns: minmax(9rem, 40%); }
  .steps li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .steps li p { grid-column: 2; }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec th, .spec td { padding: 0; border: 0; }
  .spec tbody th { white-space: normal; }
  .spec tbody td:not(.num) { grid-column: 1 / -1; grid-row: 2; padding: var(--space-2xs) 0 0 calc(56px + var(--space-md)); }
  .spec .num { grid-column: 2; grid-row: 1; }
  .seg label { padding: 0 var(--space-sm); }
  .mat--deep { padding: var(--space-lg); }
  .mat--deep::before { inset: 0.625rem; }
  .design__mat { padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .masthead, .wall__layer, .wall__base, .air { transition: none; }
  .masthead.is-tucked { transform: none; }
  .btn, .day, .chip, .design__mat, button.cal__d, .seg label, .cells label { transition: background-color var(--dur-short) linear; }
  .btn:active, .day:active, .chip:active, .design:active .design__mat, button.cal__d:active, .day:hover, .design:hover .design__mat { transform: none; }
}

@media print {
  .masthead, .air, .hero, .days, .designs, .surfaces, .how, .where, .close, .foot, .mbar, .split-head, .submit, .drop, .or, .chips, #step-you .seg { display: none !important; }
  body::before { display: none; }
  .quote { padding: 0; }
  .quote__grid { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; order: -1; }
  .stock { box-shadow: none; }
}