/* Shelf's landing page: the captain's locked design (the locked page and
   redesign B, combined). B's world throughout: grey binder's board, Bookends
   cloths with named roles, pasted paper labels. Type is the locked page's.
     Hero, Questions, footer: B's.
     What Shelf does: the locked page's sideways strip, laid on B's green cloth.
     Built with readers in mind: the locked page's section, on B's board.
   Every value comes from tokens.css; `npm run lint:css` rejects a raw colour,
   font, length, duration or effect here. When to use which token or
   component: docs/design/ (start at DESIGN.md). Full-bleed cloth bands (hero
   swatch, the green band, the endpaper) are page edges, not boxes, and stay
   square. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: var(--height-screen); background: var(--color-board); color: var(--color-ink); font-family: var(--font-text); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: var(--color-selection); }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; touch-action: manipulation; }
/* Controls, not content: a long press shouldn't select their labels. */
button, .colophon a.act { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; touch-action: manipulation; }
:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-width); }
.cloth :focus-visible { outline-color: var(--color-on-cloth); }
/* With the tap highlight off, text controls dim while pressed. */
.faq summary:active .q, .faq .answer a:active, .colophon a:not(.act):active, .join-again:active { opacity: var(--opacity-pressed); }
.sr-only { position: absolute; width: var(--size-hidden); height: var(--size-hidden); padding: 0; margin: calc(-1 * var(--size-hidden)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Held while the page first styles itself and while the theme changes, so nothing animates from one look to the other. */
.hold-transitions *, .hold-transitions *::before, .hold-transitions *::after { transition: none !important; }

/* ---------- Materials ----------
   Cloth: the colour with a fine plain weave over it. Label: white paper with a
   ruled border, pasted flat. The rule is an outline drawn inside the edge; an
   outline follows the box's corners less its offset, so its radius is the
   label's less the inset by itself. */
.cloth { color: var(--color-on-cloth); background-image: var(--texture-linen); }
.cloth.blue { background-color: var(--color-cloth-blue); }
.cloth.green { background-color: var(--color-cloth-green); }
.label { background: var(--color-label); color: var(--color-ink); box-shadow: var(--shadow-paper); border-radius: var(--radius-card); }
.label.ruled { outline: var(--stroke) solid var(--color-hairline); outline-offset: calc(-1 * var(--inset-rule)); }

/* ---------- Type ---------- */
.display { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.name { font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: var(--leading-title); text-wrap: balance; }
.lede { font-size: var(--text-lede); line-height: var(--leading-body); text-wrap: pretty; }
.small { font-size: var(--text-small); }

/* ---------- Hero (B) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); }
.copy { display: grid; align-content: start; gap: 0; background-image: var(--texture-grain), var(--texture-wash-copy); padding: var(--space-16) max(var(--gutter), env(safe-area-inset-left)) var(--space-48); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--size-bar); }
.mark { display: block; width: var(--size-mark); height: var(--size-mark); }
.copy h1 { margin-top: var(--hero-headline-space); font-family: var(--font-headline); font-stretch: 100%; font-size: var(--text-hero); letter-spacing: var(--tracking-headline); }
.copy .lede { margin-top: var(--space-16); color: var(--color-ink-muted); }
.copy .join { margin-top: var(--space-28); }

.seg { display: inline-flex; padding: var(--space-2); gap: var(--space-2); border-radius: var(--radius-pill); background: var(--color-label); box-shadow: var(--shadow-paper); }
.seg button { position: relative; display: grid; place-items: center; width: var(--size-seg); height: var(--size-seg); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-muted); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-fade), background-color var(--duration-fast) var(--ease-fade); }
.seg button::after { content: ""; position: absolute; inset: var(--hit-seg); }
.seg button svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
/* The theme switch reads the choice from <html data-theme>, which the
   pre-paint script sets, so a saved Light or Dark shows pressed from the
   first paint rather than after the script runs. */
.seg.devices button[aria-pressed="true"],
:root:not([data-theme]) [data-theme-choice="system"], :root[data-theme="light"] [data-theme-choice="light"], :root[data-theme="dark"] [data-theme-choice="dark"] { background: var(--color-ink); color: var(--color-label); }
.seg button:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .seg button[aria-pressed="false"]:hover { color: var(--color-ink); } }
@media (pointer: coarse) { .seg button { width: var(--size-tap); height: var(--size-tap); } }

/* The blue swatch and the iPad lying on it. It clips only sideways and sits over the green band, so the iPad's shadow runs on onto the band instead of stopping in a line at the hero's foot. */
.swatch-hero { position: relative; z-index: 1; isolation: isolate; display: grid; justify-items: center; padding: var(--space-96) var(--gutter) var(--space-40); overflow-x: clip; background-image: var(--texture-bleed-swatch); }
/* A cloth that meets the board (the swatch, the green band, the endpaper): its weave fades in from the edge on ::before, and the board's grain fades out under it on ::after, so nothing changes at the edge itself. Both sit under the content. */
.swatch-hero::before, .story::before, .endpaper::before, .swatch-hero::after, .story::after, .endpaper::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.swatch-hero::before, .story::before { background-image: var(--texture-linen); mask-composite: intersect; }
.swatch-hero::after, .story::after, .endpaper::after { background-image: var(--texture-grain); }
.swatch-hero::before { mask-image: var(--texture-weave-in-swatch); }
.swatch-hero::after { mask-image: var(--texture-grain-out-swatch); }
.story::before { mask-image: var(--texture-weave-in-story); }
.story::after { mask-image: var(--texture-grain-out-story); }
.endpaper::before { background-image: var(--texture-endpaper); background-size: var(--texture-endpaper-tile); mask-image: var(--texture-weave-in-endpaper); }
.endpaper::after { mask-image: var(--texture-grain-out-endpaper); }
/* The tag holds the pill-shaped switch 6px in: a capsule around it. */
.swatch-tag { position: absolute; top: var(--gutter); right: max(var(--gutter), env(safe-area-inset-right)); display: flex; align-items: center; gap: var(--space-12); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-20); border-radius: var(--radius-pill); }
.swatch-tag .small { font-weight: var(--weight-semibold); font-size: var(--text-small); color: var(--color-ink); }
.swatch-tag .seg { box-shadow: none; background: transparent; }

/* ---------- The join form (B) ---------- */
.join { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: var(--width-join); }
.join > * { grid-area: 1 / 1; min-width: 0; }
.join[data-state="done"] .join-form, .join:not([data-state="done"]) .join-done { visibility: hidden; }
.join-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); container-type: inline-size; }
.join-box { display: flex; align-items: center; gap: var(--space-6); padding: calc(var(--inset-field) - var(--stroke)); min-height: var(--size-field); cursor: text; background: var(--color-label); border: var(--stroke) solid var(--color-field-edge); border-radius: var(--radius-field); transition: border-color var(--duration-fast) var(--ease-fade), box-shadow var(--duration-fast) var(--ease-fade); }
.join-box:focus-within { border-color: var(--color-ink); box-shadow: var(--ring-field-focus); }
.join-box:has(input[aria-invalid="true"]) { border-color: var(--color-critical); box-shadow: var(--ring-field-critical); }
.join-box input { flex: 1; min-width: 0; height: var(--size-control); padding: 0 var(--space-12); border: 0; background: transparent; outline: none; font-size: var(--text-body); color: var(--color-ink); caret-color: var(--color-ink); }
.join-box input::placeholder { color: var(--color-ink-muted); opacity: 1; }
.join-box input:-webkit-autofill { -webkit-box-shadow: var(--ring-autofill); -webkit-text-fill-color: var(--color-ink); caret-color: var(--color-ink); }
/* Brass is the action, and only the action. Its corners sit inside the
   field's by the field's inset, so they stay concentric. */
.join-btn { position: relative; flex: none; height: var(--size-control); padding: 0 var(--space-22); border: 0; border-radius: var(--radius-button); background: var(--color-brass); color: var(--color-on-brass); font-size: var(--text-body); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-fade); }
.join-btn:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .join-btn:hover { background: var(--color-brass-hover); } }
.join-btn .spinner { position: absolute; inset: 0; margin: auto; width: var(--size-icon-md); height: var(--size-icon-md); border-radius: 50%; border: var(--spinner-width) solid currentColor; border-right-color: transparent; opacity: 0; animation: spin var(--duration-spin) var(--ease-spin) infinite; animation-play-state: paused; }
.join-btn[aria-busy="true"] .join-btn-text { opacity: 0; }
.join-btn[aria-busy="true"] .spinner { opacity: 1; animation-play-state: running; }
.join-btn[aria-busy="true"] { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
@container (max-width: 280px) { .join-box { flex-direction: column; align-items: stretch; } .join-box input { flex: none; height: var(--size-control-stacked); } .join-btn { width: 100%; } }
.join-check { display: inline-flex; align-items: center; gap: var(--space-10); min-height: var(--size-tap); justify-self: start; font-size: var(--text-small); cursor: pointer; user-select: none; }
.join-check input { flex: none; width: var(--size-checkbox); height: var(--size-checkbox); margin: 0; accent-color: var(--color-ink); cursor: pointer; }
.join-hint { display: flex; align-items: flex-start; gap: var(--space-8); min-height: var(--size-hint); font-size: var(--text-small); line-height: var(--leading-snug); color: var(--color-ink-muted); }
.join-hint svg { display: none; flex: none; width: var(--size-icon-sm); height: var(--size-icon-sm); margin-top: var(--optical-nudge); }
.join-form[data-error] .join-hint { color: var(--color-critical); }
.join-form[data-error] .join-hint svg { display: block; }
.join-done { display: grid; align-content: center; gap: var(--space-4); outline: none; }
.join-done-title { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: var(--leading-status); }
.join-done-title svg { width: var(--size-icon-lg); height: var(--size-icon-lg); flex: none; }
.join-done-body { font-size: var(--text-small); color: var(--color-ink-muted); overflow-wrap: anywhere; text-wrap: pretty; }
.join-done-body b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.join-again { position: relative; justify-self: start; margin-top: var(--space-4); padding: 0; border: 0; background: none; font-size: var(--text-small); font-weight: var(--weight-semibold); cursor: pointer; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: var(--underline-offset); }
.join-again::after { content: ""; position: absolute; inset: var(--hit-text); }
@media (prefers-reduced-motion: reduce) {
  .join-btn, .seg button { transition: opacity var(--duration-fast) var(--ease-fade); }
  .join-btn:active, .seg button:active { transform: none; opacity: var(--opacity-pressed); }
  .join-btn .spinner { animation-duration: calc(2 * var(--duration-spin)); }
}

/* ---------- Devices (B) ----------
   Drawings of the real hardware: their proportions are percentages and
   multiples of the drawing's own unit, measured from Apple's device art. */
.device { position: relative; background: var(--color-bezel); box-shadow: var(--shadow-device); }
.device .shot { position: relative; overflow: hidden; background: var(--color-glass); }
.device video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
[data-tour][data-device="ipad"] .device { aspect-ratio: 1668 / 2420; width: min(100%, var(--width-device-ipad)); padding: 3.2%; border-radius: 5.4% / 3.7%; }
[data-tour][data-device="ipad"] .device .shot { height: 100%; border-radius: 2.6% / 1.8%; }
[data-tour][data-device="iphone"] .device { aspect-ratio: 425 / 897; width: min(100%, var(--width-device-iphone)); container-type: inline-size; border-radius: 18.0% / 8.53%; background: var(--color-glass); }
[data-tour][data-device="iphone"] .device .shot { position: absolute; inset: calc(100cqw * 11.5 / 425); border-radius: 15.42% / 7.094%; }
@supports (corner-shape: superellipse(1.3)) {
  [data-tour][data-device="iphone"] .device { border-radius: 20.94% / 9.92%; corner-shape: superellipse(1.3); }
  [data-tour][data-device="iphone"] .device .shot { border-radius: 19.53% / 8.98%; corner-shape: superellipse(1.4); }
}
.device .hw { display: none; }
[data-tour][data-device="iphone"] .hw { --_u: calc(100cqw / 425); display: block; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none; }
[data-tour][data-device="iphone"] .hw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; box-shadow: inset 0 0 0 var(--_u) var(--color-hw-edge), inset 0 0 0 calc(6 * var(--_u)) var(--color-hw-frame); }
.hw .island { position: absolute; left: 50%; top: calc(25.25 * var(--_u)); width: calc(94.83 * var(--_u)); height: calc(37.17 * var(--_u)); translate: -50% 0; border-radius: var(--radius-pill); background: var(--color-glass); }
.hw .btn { position: absolute; width: calc(4 * var(--_u)); background: var(--color-hw-frame); box-shadow: inset 0 0 0 calc(0.5 * var(--_u)) var(--color-hw-edge); }
.hw .l { left: calc(-3 * var(--_u)); border-radius: calc(2 * var(--_u)) 0 0 calc(2 * var(--_u)); }
.hw .r { right: calc(-3 * var(--_u)); border-radius: 0 calc(2 * var(--_u)) calc(2 * var(--_u)) 0; }
.hw .action { top: calc(158 * var(--_u)); height: calc(30 * var(--_u)); }
.hw .vol-up { top: calc(219 * var(--_u)); height: calc(60 * var(--_u)); }
.hw .vol-down { top: calc(298 * var(--_u)); height: calc(60 * var(--_u)); }
.hw .side { top: calc(260 * var(--_u)); height: calc(97 * var(--_u)); }
.hw .cam { top: calc(540 * var(--_u)); height: calc(64 * var(--_u)); right: calc(-1.5 * var(--_u)); width: calc(2.5 * var(--_u)); background: var(--color-hw-lens); }
.tour-toggle { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.tour-toggle:focus-visible { outline: none; }
.device:has(.tour-toggle:focus-visible) { outline: var(--focus-width-device) solid var(--color-on-cloth); outline-offset: var(--space-4); }
.tour-toggle span { display: grid; place-items: center; width: var(--size-play); height: var(--size-play); border-radius: 50%; background: var(--color-scrim); color: var(--color-on-scrim); opacity: 0; transition: opacity var(--duration-fast) var(--ease-fade); }
.tour-toggle span svg { width: var(--size-icon-xl); height: var(--size-icon-xl); margin-left: var(--optical-nudge); }
[data-tour][data-playing="false"] .tour-toggle span { opacity: 1; }

/* ---------- The entrance ----------
   On a visit's first load the hero's pieces rise into place one after another
   (--_step): down the copy column, then the device's tag and the device. On the
   desktop hero the device stands beside the copy, so it comes in with the
   headline and the swatch never stands empty. The board and the cloths are the
   page, so they are there from the first frame. Only opacity and translate
   move, and each piece already sits where it ends, so the page can be read and
   used from the start, and if the animation never runs it is simply there. On
   later loads of the visit the head script sets html.entered. */
:root:not(.entered) :is(.copy .bar, .copy h1, .copy .lede, .copy .join, .device, .swatch-tag) { animation: enter var(--duration-enter) var(--ease-out) calc(var(--_step) * var(--stagger-enter)) backwards; }
.copy .bar { --_step: 0; }
.copy h1 { --_step: 1; }
.copy .lede { --_step: 2; }
.copy .join { --_step: 3; }
.swatch-tag { --_step: 4; }
.device { --_step: 5; }
@keyframes enter { from { opacity: 0; translate: 0 var(--distance-enter); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root:not(.entered) :is(.copy .bar, .copy h1, .copy .lede, .copy .join, .device, .swatch-tag) { --_step: 0; animation-name: fade-in; animation-duration: var(--duration-enter-reduced); animation-timing-function: var(--ease-fade); }
}

/* ---------- Sections: one rhythm and one measure for all three ---------- */
.sec { padding: var(--section-space) max(var(--gutter), env(safe-area-inset-left)); }
.sec-in { max-width: var(--width-content); margin-inline: auto; }
.sec h2.display { font-size: var(--text-section); }

/* ---------- What Shelf does: the locked page's strip, on B's green cloth ---------- */
.story { position: relative; isolation: isolate; background-image: var(--texture-bleed-story); }
.story .strip-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; }
.story .lede { margin-top: var(--space-16); max-width: var(--measure-lede); color: var(--color-on-cloth-muted); }
.story .arrows { display: flex; gap: var(--space-8); }
.story .arrow {
  position: relative; display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: 50%;
  background: var(--color-label); color: var(--color-ink); box-shadow: var(--shadow-paper); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-fade), background-color var(--duration-fast) var(--ease-fade);
}
.story .arrow svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.story .arrow:active { transform: scale(var(--scale-press-arrow)); }
.story .arrow[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; }
.story .arrow[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .story .arrow:not([aria-disabled="true"]):hover { background: var(--color-label-hover); } }
.story .strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(var(--width-strip-card), 86%); gap: var(--space-20); margin-top: var(--space-48);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-bottom: var(--space-4); scroll-padding-inline: 0;
}
.story .strip::-webkit-scrollbar { display: none; }
.story .strip:focus-visible { outline-offset: var(--space-6); border-radius: var(--radius-card); }
@media (prefers-reduced-motion: no-preference) { .story .strip { scroll-behavior: smooth; } }
.story .moment { scroll-snap-align: start; display: grid; align-content: start; gap: var(--space-14); }
/* Each feature's frame is a paper card pasted on the cloth: a collage of the
   app's screens, placed by percentages of the card. */
.story .duo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; margin: var(--stroke); }
.story .duo .pad { position: absolute; left: 6%; top: 8%; width: 62%; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-collage-pad); }
.story .duo .phone { position: absolute; right: 7%; bottom: -18%; width: 30%; border-radius: var(--radius-collage-phone); overflow: hidden; border: var(--bezel-collage-phone) solid var(--color-bezel); box-shadow: var(--shadow-collage-phone); }
.story .trio .phone { right: auto; bottom: auto; width: 33%; top: 15%; }
.story .trio .phone:nth-child(1) { left: 5%; }
.story .trio .phone:nth-child(2) { left: 33.5%; top: 9%; z-index: 1; box-shadow: var(--shadow-collage-phone-front); }
.story .trio .phone:nth-child(3) { left: 62%; }
/* View As screenshots leave out the Dynamic Island the recordings show; put it back. */
.story .trio .phone::after { content: ""; position: absolute; left: 50%; top: 1.6%; width: 23.47%; height: 4.2%; translate: -50% 0; border-radius: var(--radius-pill); background: var(--color-glass); }
.story .moment h3 { margin-top: var(--space-6); color: var(--color-on-cloth); }
.story .moment p { line-height: var(--leading-snug); color: var(--color-on-cloth-muted); max-width: var(--measure-feature); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .story .arrow { transition: opacity var(--duration-fast) var(--ease-fade); } .story .arrow:active { transform: none; opacity: var(--opacity-pressed); } }

/* ---------- Built with readers in mind: the locked page's section, on B's board ---------- */
.readers { text-align: center; background-image: var(--texture-grain), var(--texture-wash-readers); }
.readers .big { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-stat); line-height: var(--leading-stat); letter-spacing: var(--tracking-stat); }
.readers .big-cap { margin-top: var(--space-8); font-size: var(--text-title); color: var(--color-ink-muted); }
.readers h2 { margin-top: var(--space-48); font-family: var(--font-headline); font-stretch: 100%; font-weight: var(--weight-regular); font-size: var(--text-readers); line-height: var(--leading-display); letter-spacing: var(--tracking-headline); text-wrap: balance; }
.readers .lede { margin: var(--space-16) auto 0; max-width: var(--measure-lede); font-size: var(--text-title); line-height: var(--leading-body); color: var(--color-ink-muted); }
.readers .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-48) var(--space-40); margin: var(--space-64) auto 0; max-width: var(--width-board); }
/* The cards are pinned slightly askew, each its own way. */
.readers .board > :nth-child(1) { transform: rotate(-1deg); }
.readers .board > :nth-child(2) { transform: rotate(0.8deg); margin-top: var(--space-48); }
.readers .board > :nth-child(3) { transform: rotate(0.6deg); }
.readers .board > :nth-child(4) { transform: rotate(-0.8deg); margin-top: var(--space-24); }
@media (max-width: 900px) {
  .readers .board { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .readers .board > * { margin-top: 0 !important; transform: none !important; }
}
/* The Reddit captures are 1x shots of Reddit's light UI, so each sits on
   white paper near its own pixel size (--pw, set on the card in the HTML);
   dark mode dims the paper a touch. The capture's corners are the paper's
   less its padding. */
.rcard { width: 100%; display: grid; justify-items: center; gap: var(--space-12); }
.rcard .paper { --_pad: var(--space-14); width: min(100%, calc(var(--pw) + 2 * var(--_pad))); padding: var(--_pad); border-radius: var(--radius-card); background: var(--color-capture-paper); box-shadow: var(--shadow-card); filter: var(--filter-card-dim); }
.rcard .clip { overflow: hidden; border-radius: calc(var(--radius-card) - var(--_pad)); width: 100%; aspect-ratio: var(--w) / var(--hc); }
.rcard img { width: 100%; }
.rcard figcaption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ink-muted); text-wrap: balance; }
.msgs .paper { --_pad: var(--space-16); display: grid; padding-block: var(--space-6); }
.msgs .paper > .clip + .clip { border-top: var(--rule) solid var(--color-capture-rule); }
.msgs .clip { border-radius: 0; margin: var(--space-10) 0; aspect-ratio: auto; }

/* ---------- Questions (B) ---------- */
.faq { background-image: var(--texture-grain), var(--texture-wash-faq); }
.faq-list { margin-top: var(--space-32); padding: var(--space-10) calc(var(--inset-rule) + var(--space-20)); }
.faq details + details { border-top: var(--rule) solid var(--color-hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: var(--size-question); padding: var(--space-14) 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { border-radius: var(--radius-focus); }
.faq summary .q { font-weight: var(--weight-semibold); font-size: var(--text-title); line-height: var(--leading-question); text-wrap: balance; }
.faq summary .faq-mark { flex: none; width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-ink-muted); }
.faq details[open] summary .faq-mark { rotate: 45deg; }
.faq .answer { padding: 0 var(--space-40) var(--space-22) 0; color: var(--color-ink-muted); max-width: var(--measure-answer); text-wrap: pretty; }
.faq .answer a { color: var(--color-ink); text-decoration-thickness: from-font; text-underline-offset: var(--underline-offset); }

/* ---------- Foot: the endpaper (B) ---------- */
.endpaper { position: relative; isolation: isolate; padding: var(--space-56) var(--gutter) var(--space-64); background-color: var(--color-cloth-blue); background-image: var(--texture-bleed-endpaper); padding-bottom: calc(var(--space-64) + env(safe-area-inset-bottom)); }
.colophon { max-width: var(--width-colophon); margin-inline: auto; display: grid; gap: var(--space-16); justify-items: center; padding: var(--space-24); text-align: center; }
.colophon .who { display: flex; align-items: center; gap: var(--space-12); font-size: var(--text-small); color: var(--color-ink-muted); text-align: start; }
.colophon .who b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.colophon .mark { width: var(--size-mark-sm); height: var(--size-mark-sm); flex: none; }
.colophon nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8) var(--space-24); }
.colophon a { position: relative; font-size: var(--text-small); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: var(--underline-offset); }
.colophon a::after { content: ""; position: absolute; inset: var(--hit-text); }
/* The colophon's Sign up wears the form button's corners, so the two brass buttons match. */
.colophon a.act { display: inline-grid; place-items: center; min-height: var(--size-tap); padding: 0 var(--space-20); border-radius: var(--radius-button); background: var(--color-brass); color: var(--color-on-brass); font-size: var(--text-body); font-weight: var(--weight-semibold); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out); }
.colophon a.act::after { inset: 0; }
.colophon a.act:active { transform: scale(var(--scale-press)); }
@media (hover: hover) and (pointer: fine) { .colophon a.act:hover { background: var(--color-brass-hover); } }
@media (prefers-reduced-motion: reduce) { .colophon a.act { transition: opacity var(--duration-fast) var(--ease-fade); } .colophon a.act:active { transform: none; opacity: var(--opacity-pressed); } }

@media (min-width: 960px) {
  .sec { padding-inline: var(--gutter-wide); }
  .split { display: grid; grid-template-columns: minmax(0, var(--width-column-side)) minmax(0, var(--width-column-faq)); gap: var(--space-64); align-items: start; }
  .split .side { position: sticky; top: var(--space-40); }
  .faq-list { margin-top: 0; }
}
/* Desktop hero: the copy column at the margin, the swatch to the edge, the iPad larger than the viewport. */
@media (min-width: 960px) and (min-height: 620px) {
  .hero { grid-template-columns: minmax(var(--width-column-side), 30fr) minmax(0, 70fr); min-height: var(--height-hero); }
  .copy { padding: var(--space-20) var(--space-40) var(--space-40) var(--gutter-wide); align-content: start; }
  .swatch-hero { padding: var(--space-96) 0 0; align-content: start; }
  .swatch-tag { top: var(--space-24); right: max(var(--space-24), env(safe-area-inset-right)); }
  [data-tour][data-device="ipad"] .device { width: auto; height: var(--height-device-ipad); max-width: none; }
  [data-tour][data-device="iphone"] .device { width: auto; height: var(--height-device-iphone); }
  .device { --_step: 1; }
  .swatch-tag { --_step: 2; }
}