/* Gable & Oak — design system.
   Phone first. One stylesheet, no build step.
   Palette: paper, timber, charcoal and one accent. Since the owner's logo (14 October 2026) the accent
   (--redline, the name kept) is the logo's barn green; --alarm keeps the red for errors.
   Type: Newsreader for headlines, Instrument Sans for everything measured. */

@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-roman.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f3eee4;
  --paper-deep: #e9e1d2;
  --sheet: #fbf8f2;
  --charcoal: #24221f;
  --ink-soft: #5b554c;
  --rule: #cdc3b0;
  --timber: #a9743f;
  --timber-deep: #7a4f24;
  --redline: #3d4a33;
  --redline-deep: #2b3524;
  --alarm: #b8391f;
  --alarm-deep: #962c16;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --step-3: clamp(2.25rem, 1.3rem + 4.4vw, 4rem);
  --step-4: clamp(2.75rem, 1.2rem + 7vw, 5.75rem);

  --gutter: 1.25rem;
  --measure: 34rem;
  --wrap: 75rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --line: 1px solid var(--rule);
  --line-ink: 1px solid var(--charcoal);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--charcoal); font: 400 var(--step-0)/1.55 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--redline-deep); }
button, input, select { font: inherit; color: inherit; }
em { font-style: italic; }
p + p { margin-top: 0.75em; }
:focus-visible { outline: 2px solid var(--redline); outline-offset: 3px; }
main:focus { outline: none; }

.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 10; padding: 0.75rem 1rem; background: var(--charcoal); color: var(--sheet); }
.skip:focus { top: 0.5rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 44rem; }
.section { padding-block: 0 var(--space-section); }
.grid-2, .grid-3 { display: grid; gap: 2rem var(--gutter); }

/* Type */
.lettering { font: 500 0.75rem/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.display { font: 400 var(--step-4)/0.98 var(--serif); letter-spacing: -0.022em; text-wrap: balance; }
.display--2 { font-size: var(--step-3); line-height: 1.02; }
.display em { color: var(--timber-deep); }
.h3 { font: 500 var(--step-1)/1.2 var(--serif); letter-spacing: -0.005em; }
.small { font-size: var(--step--1); color: var(--ink-soft); }

/* Wordmark: the logo's emblem and lettering as two pictures, so the footer reuses the header's files */
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; }
.wordmark__emblem { height: 2.75rem; width: auto; flex: none; }
.wordmark__type { height: 1.5rem; width: auto; flex: none; }
.wordmark--stacked { flex-direction: column; gap: 0.35rem; }
.wordmark--stacked .wordmark__emblem { height: 5.5rem; }
.wordmark--stacked .wordmark__type { height: 1.625rem; }

/* Masthead: wordmark over a ruled row of three links on a phone, one line from 40rem */
.masthead { border-bottom: var(--line-ink); }
.masthead__in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.masthead__mark { display: flex; align-items: center; min-height: 3.75rem; padding-block: 0.4rem; text-decoration: none; color: inherit; width: fit-content; }
.masthead__nav { display: flex; gap: 1.5rem; border-top: var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.masthead__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.masthead__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--redline); }

/* Lede */
.lede { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.lede--short { padding-bottom: 2.5rem; }
.lede > * + * { margin-top: 1.25rem; }
.lede__text { font: 400 var(--step-1)/1.4 var(--serif); max-width: var(--measure); color: var(--charcoal); }

/* Section head: a sheet number, a label, a rule */
.section-head { border-top: var(--line-ink); padding-top: 0.75rem; margin-bottom: 2rem; }
.section-head__label { display: flex; gap: 0.75rem; color: var(--charcoal); }
.section-head__no { color: var(--redline); }
.section-head__title { font: 400 var(--step-2)/1.1 var(--serif); letter-spacing: -0.015em; margin-top: 1rem; max-width: 22ch; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.7rem 1.4rem; border: 1px solid var(--redline); border-radius: 0; background: var(--redline); color: #fff; font: 500 1rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; }
.button:hover { background: var(--redline-deep); border-color: var(--redline-deep); color: #fff; }
.button--secondary { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
.button--secondary:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--sheet); }
.button--quiet { background: transparent; border-color: transparent; color: var(--charcoal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; padding-inline: 0.75rem; }
.button--quiet:hover { background: transparent; border-color: transparent; color: var(--redline-deep); }
.button[disabled] { background: var(--paper-deep); border-color: var(--rule); color: var(--ink-soft); cursor: not-allowed; }
.arrow-link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--redline); text-decoration-thickness: 2px; text-underline-offset: 0.3em; display: inline-flex; align-items: center; min-height: 2.75rem; }
.arrow-link::after { content: "\2192"; margin-left: 0.4em; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Media frame: the picture sits on a sheet with a drawn border; the caption carries the release */
.frame__sheet { position: relative; background: var(--sheet); border: var(--line-ink); padding: 0.5rem; }
.frame__sheet::after { content: ""; position: absolute; inset: 0.5rem; border: var(--line); pointer-events: none; }
.frame__sheet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame--wide .frame__sheet img { aspect-ratio: 16 / 9; }
.frame__sheet .footprint { width: 100%; aspect-ratio: 4 / 3; padding: 6%; }
.frame--wide .frame__sheet .footprint { aspect-ratio: 16 / 9; padding: 3%; }
.frame__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.6rem; font-size: var(--step--1); color: var(--ink-soft); }
.frame__caption .lettering { flex: none; }

.footprint__slab { fill: var(--paper-deep); stroke: var(--charcoal); stroke-width: 3; }
.footprint__dim path { fill: none; stroke: var(--timber-deep); stroke-width: 1.5; }
.footprint__dim .footprint__tick { stroke: var(--redline); stroke-width: 2.5; }
.footprint__label { font: 500 24px var(--sans); fill: var(--charcoal); letter-spacing: 0.02em; }

/* Design card: one design per screen */
.design-card { display: grid; gap: 1.5rem; padding-bottom: 3.5rem; }
.design-card + .design-card { border-top: var(--line); padding-top: 3.5rem; }
.design-card:last-child { padding-bottom: 0; }
.design-card__media { display: block; text-decoration: none; color: inherit; }
.design-card__text > * + * { margin-top: 0.9rem; }
.design-card__name { font: 400 var(--step-3)/1 var(--serif); letter-spacing: -0.02em; }
.design-card__name a { text-decoration: none; }
.design-card__line { font: 400 var(--step-1)/1.4 var(--serif); max-width: 28ch; }
.design-card__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: var(--line-ink); padding-top: 1.1rem; margin-top: 1.4rem; }

.fact-line { display: flex; flex-wrap: wrap; gap: 0.35rem 0; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--ink-soft); }
.fact-line li { padding-right: 0.8rem; margin-right: 0.8rem; border-right: var(--line); }
.fact-line li:last-child { border: 0; margin: 0; padding: 0; }
.fact-line b { font-weight: 600; color: var(--charcoal); font-size: var(--step-0); }

.price__amount { font: 400 var(--step-2)/1 var(--serif); letter-spacing: -0.01em; }

/* Title block, as on the corner of a drawing */
.titleblock { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--line-ink); background: var(--sheet); margin-top: 1.5rem; }
.titleblock__cell { padding: 0.5rem 0.6rem 0.55rem; border-right: var(--line); min-width: 0; }
.titleblock__cell:last-child { border-right: 0; }
.titleblock__cell--wide { grid-column: 1 / -1; border-right: 0; border-bottom: var(--line); }
.titleblock dt { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.titleblock dd { font: 500 0.9375rem/1.3 var(--sans); overflow-wrap: anywhere; }
.titleblock__cell--wide dd { font: 400 1.5rem/1.15 var(--serif); }

.sheet-index li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 0.75rem; align-items: baseline; padding-block: 0.6rem; border-bottom: var(--line); }
.sheet-index li:first-child { border-top: var(--line); }
.sheet-index__no { color: var(--charcoal); }

/* Facts table */
.facts { width: 100%; border-collapse: collapse; }
.facts caption { text-align: left; padding-bottom: 0.6rem; }
.facts th, .facts td { padding: 0.7rem 0; border-top: var(--line); vertical-align: baseline; text-align: left; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: var(--line); }
.facts th { font-weight: 400; color: var(--ink-soft); padding-right: 1rem; width: 46%; }
.facts td { font-weight: 500; }
.facts--money td { text-align: right; }
.facts--money th { width: auto; }
.facts tfoot th, .facts tfoot td { border-top: var(--line-ink); border-bottom: 0; font: 400 var(--step-1)/1.2 var(--serif); color: var(--charcoal); padding-top: 0.9rem; }
.quote__note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.75rem; }

/* Handoff: what arrives, and what local professionals add */
.filelist li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-block: 0.6rem; border-bottom: var(--line); }
.filelist li:first-child { border-top: var(--line); }
.filelist__size { flex: none; font-size: var(--step--1); color: var(--ink-soft); }
.filelist--links a { display: inline-flex; align-items: center; min-height: 2rem; }
.plainlist li { padding-left: 1.1rem; position: relative; }
.plainlist li + li { margin-top: 0.5rem; }
.plainlist li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; border-top: 1.5px solid var(--timber-deep); }

/* Forms */
.form > * + * { margin-top: 1.5rem; }
.form__small { font-size: var(--step--1); color: var(--ink-soft); }
.field__label, .choices__legend { display: block; font-weight: 500; margin-bottom: 0.4rem; }
.field__hint { font-size: var(--step--1); color: var(--ink-soft); margin: -0.2rem 0 0.5rem; }
.field__input { display: block; width: 100%; min-height: 3rem; padding: 0.6rem 0.8rem; background: var(--sheet); border: 1px solid var(--ink-soft); border-radius: 0; appearance: none; -webkit-appearance: none; }
.field__input:hover { border-color: var(--charcoal); }
.field__input--select { padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; }
.field--error .field__input { border-color: var(--alarm); box-shadow: inset 3px 0 0 var(--alarm); }
.field__error { color: var(--alarm-deep); font-weight: 500; font-size: var(--step--1); margin-top: 0.45rem; }

.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; cursor: pointer; min-height: 2.75rem; padding-block: 0.4rem; }
.check input, .choice input { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; border: 1px solid var(--ink-soft); background: var(--sheet); display: grid; place-content: center; flex: none; }
.check input::after { content: ""; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--sheet); border-bottom: 2px solid var(--sheet); transform: translateY(-0.1rem) rotate(-45deg); opacity: 0; }
.check input:checked { background: var(--charcoal); border-color: var(--charcoal); }
.check input:checked::after { opacity: 1; }

.choices { border: 0; min-width: 0; }
.choice { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.75rem; align-items: center; min-height: 3.25rem; padding: 0.7rem 0.8rem; border: 1px solid var(--ink-soft); background: var(--sheet); cursor: pointer; }
.choice + .choice { border-top: 0; }
.choice input { border-radius: 50%; margin: 0; }
.choice input::after { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--redline); opacity: 0; }
.choice input:checked { border-color: var(--charcoal); }
.choice input:checked::after { opacity: 1; }
.choice:has(input:checked) { box-shadow: inset 3px 0 0 var(--redline); background: #fff; }
.choice__effect { font-size: var(--step--1); color: var(--ink-soft); }

.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; max-width: 14rem; }
.stepper__btn { min-height: 3rem; border: 1px solid var(--ink-soft); background: var(--paper-deep); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 0; }
.stepper__btn:hover { background: var(--charcoal); color: var(--sheet); border-color: var(--charcoal); }
.stepper__input { text-align: center; border-inline: 0; font-weight: 500; -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Notice */
.notice { border-left: 3px solid var(--charcoal); background: var(--sheet); padding: 1rem 1.1rem; }
.notice--done { border-color: var(--timber-deep); }
.notice--attention { border-color: var(--timber); background: var(--paper-deep); }
.notice--problem { border-color: var(--alarm); }
.notice__title { font: 500 var(--step-1)/1.25 var(--serif); }
.notice__body { margin-top: 0.3rem; }
.notice__action { margin-top: 0.35rem; }
.notice__list { margin-top: 0.5rem; }
.notice__list a { display: inline-flex; min-height: 2rem; align-items: center; }

/* Empty and error states */
.state { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); border-bottom: var(--line); }
.state > * + * { margin-top: 0.9rem; }
.state__code { color: var(--alarm-deep); }
.state__title { font: 400 var(--step-2)/1.1 var(--serif); letter-spacing: -0.015em; max-width: 20ch; }
.state__body { max-width: var(--measure); color: var(--ink-soft); }
.state__action { margin-top: 1.4rem; }
.grid-2 > .state { padding-block: 1.75rem; }
.grid-2 > .state .state__title { font-size: var(--step-1); letter-spacing: 0; font-weight: 500; }

/* Order: timeline, next step */
.timeline { border-left: var(--line-ink); margin-left: 0.4rem; }
.timeline__step { position: relative; padding: 0 0 1.4rem 1.5rem; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before { content: ""; position: absolute; left: -0.4rem; top: 0.15rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--charcoal); border: 1px solid var(--charcoal); }
.timeline__step--current::before { background: var(--paper); border: 3px solid var(--redline); width: 0.9rem; height: 0.9rem; left: -0.48rem; }
.timeline__label { font-weight: 500; margin-top: 0.15rem; }
.timeline__step--current .timeline__label { font: 500 var(--step-1)/1.2 var(--serif); }
.timeline__line { color: var(--ink-soft); margin-top: 0.25rem; }
.next { border: var(--line-ink); background: var(--sheet); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.next--yours { border-color: var(--redline); box-shadow: inset 3px 0 0 var(--redline); }
.next__text { font: 500 var(--step-1)/1.25 var(--serif); margin-top: 0.3rem; }
.revisions { margin-block: 1rem; font-size: var(--step--1); color: var(--ink-soft); }
.revisions b { color: var(--charcoal); font-size: var(--step-0); }
.order .notice, .specimen--order .notice { margin-bottom: 1.25rem; }
.order > .titleblock { margin-bottom: var(--space-section); }

.downloads__version { padding-block: 1.5rem; border-top: var(--line-ink); }
.downloads__version > * + * { margin-top: 1rem; }
.downloads__title { font: 500 var(--step-1)/1.2 var(--serif); margin-top: 0.3rem; }
.downloads__version--older { color: var(--ink-soft); }

/* Dialog */
.dialog { width: min(32rem, calc(100vw - 2 * var(--gutter))); max-width: none; padding: 0; border: var(--line-ink); border-radius: 0; background: var(--sheet); color: var(--charcoal); }
.dialog::backdrop { background: rgb(36 34 31 / 0.6); }
.dialog__in { padding: 1.5rem; }
.dialog__in > * + * { margin-top: 0.9rem; }
.dialog__title { font: 400 var(--step-2)/1.1 var(--serif); letter-spacing: -0.015em; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Colophon */
/* Colophon: on the paper the logo was drawn on, under a ruled line */
.colophon { background: var(--paper-deep); color: var(--charcoal); border-top: var(--line-ink); margin-top: var(--space-section); }
.colophon__in { max-width: var(--wrap); margin-inline: auto; padding: 2.5rem var(--gutter) 3rem; display: grid; gap: 1.5rem; justify-items: start; }
.colophon__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: var(--step--1); }
.colophon__nav a, .colophon__nav button { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--charcoal); }

/* Design page */
.design__head { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 1.75rem; }
.design__head > * + * { margin-top: 1rem; }
.design__line { font: 400 var(--step-1)/1.4 var(--serif); max-width: 30ch; }
.design__buy { border-top: var(--line-ink); padding-top: 1rem; margin-top: 1.4rem; }
.design__media { margin-bottom: var(--space-section); }
.section--split { display: grid; gap: var(--space-section); }

/* Buy: the approved price beside the one way to pay */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.buy .button { flex: 1 1 12rem; max-width: 22rem; }
.design__buy > * + * { margin-top: 0.6rem; }
.design__gets { font-size: var(--step--1); max-width: 34rem; }
.design__notice { margin-top: 1rem; max-width: 34rem; }
.design__soon { font: 500 var(--step-1)/1.2 var(--serif); }
.design__close { border-top: var(--line-ink); padding-top: 2.5rem; }
.design__close > * + * { margin-top: 1.5rem; }
.lede__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.button--small { min-height: 2.75rem; padding: 0.45rem 0.9rem; font-size: var(--step--1); }

/* Handoff, second column */
.plainlist--small { font-size: var(--step--1); }
.filelist__for, .filelist__meta { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }
.filelist__name { font-weight: 500; }
.filelist--files > li { align-items: center; flex-wrap: wrap; }
.filelist--files > li > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.filelist__get { flex: none; }
.filelist__more { flex: 1 1 100%; }
.filelist__more summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.filelist__more li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0.4rem; border-top: var(--line); }
.filelist__more li span { min-width: 0; overflow-wrap: anywhere; }
.downloads__note { margin-top: 0.3rem; }
.order__meta { margin-top: 1.5rem; }
.order__poll { margin-top: 1.25rem; }

/* Catalogue tools: facet chips, the fit check, the comparison */
.finder { padding-bottom: 2.5rem; display: grid; gap: 1.75rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; border: 1px solid var(--ink-soft); background: var(--sheet); text-decoration: none; font-size: var(--step--1); font-weight: 500; }
.chip--on { background: var(--charcoal); border-color: var(--charcoal); color: var(--sheet); }
.chip--on:hover { color: var(--sheet); }
.chip--clear { border-color: transparent; background: transparent; text-decoration: underline; }
.fitform__set { border: 0; min-width: 0; }
.fitform__legend { font: 500 var(--step-1)/1.25 var(--serif); margin-bottom: 0.9rem; padding: 0; }
.fitform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: end; margin-bottom: 0.75rem; }
.fitform__fields .button { grid-column: 1 / -1; }
.fit { font-weight: 500; padding-left: 0.75rem; border-left: 3px solid var(--timber-deep); }
.fit--no_fit { border-color: var(--rule); color: var(--ink-soft); font-weight: 400; }
.tablewrap { overflow-x: auto; margin-top: 1.5rem; }
.facts--compare thead th { font: 500 var(--step-1)/1.2 var(--serif); padding-bottom: 0.6rem; text-align: left; }
.facts--compare th[scope="row"] { width: 34%; }

/* Three steps, as still cards */
.steps { display: grid; gap: 1px; background: var(--charcoal); border: var(--line-ink); }
.steps li { background: var(--sheet); padding: 1.25rem; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.steps__no { font: 400 var(--step-2)/1 var(--serif); color: var(--redline); }
.steps p { font: 400 var(--step-1)/1.3 var(--serif); }
.capture__line { font: 400 var(--step-1)/1.4 var(--serif); margin-bottom: 1.5rem; }

/* Good to know */
.faq dt { font: 500 var(--step-1)/1.25 var(--serif); padding-top: 1rem; border-top: var(--line); }
.faq dt:first-child { border-top: var(--line-ink); }
.faq dd { margin: 0.35rem 0 1rem; color: var(--ink-soft); max-width: var(--measure); }
/* Showcase: the set as pictures. The strip runs to the screen's edges and the next sheet shows at the
   right edge, which is the invitation to swipe. A sheet is white paper with an ink line, laid on the page. */
.showcase__head { border-top: var(--line-ink); padding-top: 0.75rem; margin-bottom: 1.75rem; }
.showcase__title { font: 400 var(--step-3)/1.02 var(--serif); letter-spacing: -0.02em; margin-top: 0.9rem; max-width: 14ch; text-wrap: balance; }
.showcase__label { margin: 1.75rem 0 0.9rem; }
.showcase--home .showcase__label { margin-top: 0; border-top: var(--line-ink); padding-top: 0.75rem; }
.showcase__buy { border-top: var(--line-ink); padding-top: 1rem; margin-top: 2.5rem; }
.strip { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.strip__track { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: 0.25rem var(--gutter) 1rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.strip__item { flex: none; width: min(80vw, 30rem); scroll-snap-align: start; }
.strip__sheet { position: relative; display: block; background: #fff; border: var(--line-ink); box-shadow: 0.3rem 0.3rem 0 var(--paper-deep); }
.strip__sheet img { width: 100%; }
/* The corner says a sheet opens: a plus in an ink square, like a detail marker on a drawing. */
.strip__sheet::after { content: "+"; position: absolute; right: -1px; bottom: -1px; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--charcoal); color: var(--sheet); font: 400 1.25rem/1 var(--sans); }
.strip__sheet:hover::after, .strip__sheet:focus-visible::after { background: var(--redline); }
.strip__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.8rem; }
.strip__title { font: 400 var(--step-1)/1.2 var(--serif); }
.strip__caption .lettering { flex: none; }
.strip__item--more { width: auto; display: grid; place-items: center; padding-inline: 1rem 2rem; }
.strip__steps { display: none; }
.strip__step { width: 3rem; height: 3rem; border: var(--line-ink); border-radius: 0; background: var(--sheet); cursor: pointer; font-size: 1.1rem; }
.strip__step:hover { background: var(--charcoal); color: var(--sheet); }
.strip__step[disabled] { border-color: var(--rule); color: var(--rule); background: transparent; cursor: default; }
.parts { display: grid; gap: 1px; background: var(--charcoal); border: var(--line-ink); }
.parts li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: center; padding: 0.75rem; background: var(--sheet); }
.parts img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--line); }
.parts p { font: 400 var(--step-1)/1.25 var(--serif); }
/* Lightbox: the sheet on a dark table, the full screen. Unzoomed, the whole sheet fits the stage both ways
   (placed absolutely, so both limits resolve against the stage). Zoomed, the sheet shows its own pixels and the stage scrolls. */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--charcoal); color: var(--sheet); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: var(--charcoal); }
.lightbox__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem var(--gutter); }
.lightbox__bar--steps { justify-content: space-between; }
.lightbox__caption { flex: 1; font: 400 var(--step-1)/1.2 var(--serif); margin: 0; }
.lightbox__btn { min-height: 2.75rem; padding: 0.5rem 0.9rem; border: 1px solid #8d867a; border-radius: 0; background: transparent; color: var(--sheet); font: 500 0.9375rem/1.2 var(--sans); cursor: pointer; }
.lightbox__btn:not([aria-disabled="true"]):hover, .lightbox__btn[aria-pressed="true"] { background: var(--sheet); color: var(--charcoal); border-color: var(--sheet); }
.lightbox__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.lightbox :focus-visible { outline-color: #ee8e73; }
.lightbox__stage { --edge: clamp(0.25rem, 2vw, 1.5rem); position: relative; overflow: auto; overscroll-behavior: contain; }
.lightbox__stage img { position: absolute; inset: 0 var(--edge); margin: auto; max-width: calc(100% - 2 * var(--edge)); max-height: 100%; width: auto; height: auto; background: #fff; cursor: zoom-in; }
.lightbox--whole .lightbox__stage img { cursor: default; }
.lightbox--zoomed .lightbox__stage img { position: static; display: block; max-width: none; max-height: none; cursor: zoom-out; }

/* Legal pages and guides */
.prose > * + * { margin-top: 1rem; }
.prose p, .prose li { max-width: var(--measure); }
.prose__status { color: var(--redline-deep); }
.prose__h { font: 500 var(--step-1)/1.25 var(--serif); margin-top: 2.25rem; padding-top: 0.75rem; border-top: var(--line); }
.prose__notice { border: var(--line-ink); padding: 0.9rem 1rem; background: var(--sheet); font-weight: 500; }
.prose__list--numbered { list-style: decimal; padding-left: 1.4rem; }
.prose__list--numbered li + li { margin-top: 0.5rem; }
.prose .sheet-index { margin-top: 1rem; }
.guidelist li { padding-block: 1.1rem; border-bottom: var(--line); }
.guidelist li:first-child { border-top: var(--line-ink); }
.guidelist__link { font: 500 var(--step-1)/1.25 var(--serif); display: inline-flex; min-height: 2.75rem; align-items: center; }
.section--after-prose, .section--after-state { margin-top: var(--space-section); }

/* Style page */
.specimen > * + * { margin-top: 1rem; }
.specimen--row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.specimen--row > * { margin: 0; }
.specimen--marks { display: grid; gap: 1px; background: var(--charcoal); border: var(--line-ink); }
.specimen--marks > * { margin: 0; }
.specimen__mark { background: var(--sheet); padding: 2.25rem 1.25rem; display: grid; place-items: center; }
.specimen__mark--paper { background: var(--paper-deep); }
.specimen--order { border-top: var(--line-ink); padding-top: 0.75rem; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; border: var(--line-ink); }
.swatch { min-height: 6.5rem; padding: 0.75rem; display: flex; flex-direction: column; justify-content: flex-end; font-size: var(--step--1); }
.swatch b { font-weight: 500; }
.swatch--paper { background: var(--paper); }
.swatch--sheet { background: var(--sheet); }
.swatch--timber { background: var(--timber); color: #14120f; }
.swatch--charcoal { background: var(--charcoal); color: var(--paper); }
.swatch--redline { background: var(--redline); color: #fff; }
.swatch--alarm { background: var(--alarm); color: #fff; }

/* Account: My plans. One card per plan set, the house first; the files below its name. A returning
   buyer scans pictures and names, so a card stays compact on a phone and the files open on demand. */
.wrap.account { max-width: 66rem; }
.account__head { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 1.25rem; }
.account__head > * + * { margin-top: 0.9rem; }
.account__who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; border-top: var(--line-ink); padding-top: 0.4rem; }
.account__who b { font-weight: 500; color: var(--charcoal); overflow-wrap: anywhere; }
.account__who .button--quiet { padding-inline: 0; }
.account > .notice { margin-bottom: 1.25rem; }
.account__more { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.account__pages { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.plans { border-top: var(--line-ink); }
.plan { padding-block: 1.5rem 1.75rem; border-bottom: var(--line); }
.plan__card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "pic head" "body body" "meta meta"; gap: 1.1rem 1rem; }
.plan__picture { grid-area: pic; align-self: start; background: var(--sheet); border: var(--line-ink); padding: 0.3rem; }
.plan__picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plan__picture .footprint { width: 100%; aspect-ratio: 4 / 3; padding: 6%; }
.plan__head { grid-area: head; min-width: 0; }
.plan__head > * + * { margin-top: 0.4rem; }
.plan__name { font: 400 1.5rem/1.05 var(--serif); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.plan__head .fact-line { gap: 0.1rem 0.75rem; }
.plan__head .fact-line li { border: 0; margin: 0; padding: 0; }
.plan__stamp { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border: 1px solid var(--redline); color: var(--redline-deep); }
.plan__body { grid-area: body; min-width: 0; }
.plan__body > * + * { margin-top: 1rem; }
.plan__contents { margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-soft); border-left: 3px solid var(--timber); padding-left: 0.75rem; }
.plan__contents li { display: inline; }
.plan__contents li + li::before { content: " \00b7  "; color: var(--timber-deep); }
.plan__downloads > * + * { margin-top: 0.75rem; }
.plan__downloads > .plan__get .button { width: 100%; }
.plan__downloads > .plan__zip { margin-top: 0.4rem; }
.plan__inventory summary, .plan__single summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.plan__single .filelist { margin-top: 0.4rem; }
.plan__version { margin-top: 1rem; }
.plan__meta { grid-area: meta; overflow-wrap: anywhere; }
.plan__note { color: var(--ink-soft); }
.plan--refunded .plan__picture { opacity: 0.6; filter: grayscale(1); }
.account__empty { border-top: var(--line-ink); padding-top: 2rem; }
.account__empty > * + * { margin-top: 0.9rem; }
.account__foot { margin-top: 1.5rem; }
.account__foot .button--quiet { padding-inline: 0; }
.signin .form { max-width: 28rem; }
.order__account { margin-top: 1.25rem; }

/* The first download ends the refund option: the notice, then one tap to the files. */
.gate > * + * { margin-top: 0.9rem; }
.gate__summary { list-style: none; width: 100%; }
.gate__summary::-webkit-details-marker { display: none; }
.gate__open > .gate__summary + * { margin-top: 1rem; }
.gate__hide { display: none; }
.gate__open[open] > .gate__summary { width: auto; min-height: 2.75rem; padding-inline: 0; background: transparent; border-color: transparent; color: var(--charcoal); text-decoration: underline; text-underline-offset: 0.25em; }
.gate__open[open] .gate__show { display: none; }
.gate__open[open] .gate__hide { display: inline; }

@media (min-width: 40rem) {
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parts li { grid-template-columns: 1fr; align-items: start; gap: 0.9rem; padding: 1rem; }
  .strip__item { width: min(60vw, 30rem); }
  :root { --gutter: 2rem; }
  .masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 4.75rem; }
  .masthead .wordmark__emblem { height: 3.5rem; }
  .masthead .wordmark__type { height: 1.75rem; }
  .masthead__nav { border-top: 0; margin: 0; padding: 0; gap: 2rem; align-self: stretch; }
  .masthead__nav a { min-height: 100%; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.5rem; }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; }
  .fitform__fields { grid-template-columns: 10rem 10rem auto; justify-content: start; }
  .fitform__fields .button { grid-column: auto; }
  .specimen--marks { grid-template-columns: 1fr 1fr; }
  .colophon__in { grid-template-columns: 1fr auto; align-items: center; }
  .dialog__in { padding: 2rem; }
  .plan__name { font-size: var(--step-2); }
  .plan__card { grid-template-columns: 14rem minmax(0, 1fr); grid-template-areas: "pic head" "pic body" "pic meta"; column-gap: 1.75rem; align-items: start; }
  .plan__downloads > .plan__get .button { width: auto; min-width: 16rem; }
  .gate__summary { width: auto; }
}

@media (min-width: 62rem) {
  :root { --gutter: 3rem; }
  .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5rem; margin-bottom: 3rem; }
  .section-head__title { margin-top: -0.2rem; }
  .design-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: end; padding-bottom: 5rem; }
  .design-card + .design-card { padding-top: 5rem; }
  .design-card:nth-of-type(even) .design-card__media { order: 2; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .design { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: end; }
  .design > .section { grid-column: 1 / -1; }
  .design__media { margin-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
  .showcase__head { display: flex; justify-content: space-between; align-items: end; gap: 2.5rem; padding-top: 1.75rem; }
  .showcase__title { max-width: 20ch; margin-top: 0.75rem; order: -1; }
  .showcase__head .lettering { flex: none; }
  .strip__steps:not([hidden]) { display: flex; gap: 0.5rem; justify-content: flex-end; padding-inline: var(--gutter); }
  .plan { padding-block: 2.25rem 2.5rem; }
  .plan__card { grid-template-columns: 22rem minmax(0, 1fr); column-gap: 2.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .field__input, .stepper__btn, .choice, a { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
  .dialog[open], .lightbox[open] { animation: rise 160ms ease-out; }
  .strip__track { scroll-behavior: smooth; }
  @keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } }
}

@media print { .masthead__nav, .colophon, .skip { display: none; } }