/* Rud Rack. Direction: the split stage (taste-skill seed 1294499295).
   Imbue for display (uppercase), Albert Sans for text. Colours from the brand and the finishes:
   bone ground (Cedro Areia lightened), navy-black ink, the logo's navy for the action and one field. */

:root {
  --bg: #f0efeb;
  --surface: #e5e3de;
  --paper: #ffffff;
  --ink: #0e1a33;
  --muted: #4a5266;
  --accent: #1c387e;
  --accent-ink: #f0efeb;
  --navy: #1c387e;
  --navy-ink: #f0efeb;
  --on-ink-muted: #b8bfcf;   /* secondary text on the navy and ink fields */
  --cedro: #ad8556;
  --cedro-ink: #0e1a33;
  --error: #9a2a1f;

  --font-display: 'Imbue', 'Times New Roman', serif;
  --font-text: 'Albert Sans', system-ui, sans-serif;

  /* five sizes: small, body, lead, head, display */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --step-head: clamp(2rem, 1.4rem + 1.6vw, 2.875rem);
  --step-display: clamp(2.75rem, 1rem + 4.6vw, 5.75rem);

  --m: clamp(1rem, 1.2vw, 1.25rem);          /* page margin and the gap between the two halves */
  --pad: clamp(1rem, 1.6vw, 1.5rem);         /* inner margin of the reading column */
  --section: clamp(5rem, 11vw, 11rem);
  --radius: 0px;
  --bar: 3.5rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; touch-action: manipulation; }
mark { background: var(--surface); color: inherit; padding: 0 0.15em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field-ink :focus-visible, .field-navy :focus-visible { outline-color: var(--navy-ink); }
[hidden] { display: none !important; }
.skip { position: absolute; left: var(--m); top: -4rem; z-index: 50; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); }
.skip:focus { top: var(--m); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
.display, .head, .block__h { font-family: var(--font-display); font-optical-sizing: auto; text-transform: uppercase; letter-spacing: -0.01em; }
.display { font-size: var(--step-display); line-height: 0.92; }
.head, .block__h { font-size: var(--step-head); line-height: 0.98; }
.nums { font-variant-numeric: tabular-nums; }
p { max-width: 62ch; text-wrap: pretty; }
.br { display: none; }
@media (min-width: 40em) { .br { display: inline; } }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-weight: 500; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.6; cursor: progress; }
.button--paper { background: var(--navy-ink); color: var(--ink); }
.link-plain { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-thickness var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--ink); }
  .button--paper:hover { background: var(--paper); color: var(--ink); }
  .link-plain:hover { text-decoration-thickness: 0.14em; }
}

/* ---------- navigation ---------- */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; font-size: 0.9375rem; }
.nav__side { display: flex; gap: 1.15rem; white-space: nowrap; }
.nav__side--l { justify-content: flex-end; }
.nav__side a, .nav__menu { text-decoration: none; padding-block: 0.6rem; transition: opacity var(--t-hover) ease; }
.nav__side a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.07em; }
.nav__logo { display: block; width: clamp(8.5rem, 13vw, 13.5rem); transition: transform var(--t-press) var(--ease-out); }
.nav__logo:active { transform: scale(0.98); }
.nav__logo img { width: 100%; height: auto; }
.nav__menu { display: none; justify-self: end; min-height: 2.75rem; padding-inline: 0.25rem; align-items: center; }
.nav--light { color: var(--navy-ink); }
@media (hover: hover) and (pointer: fine) { .nav__side a:hover { opacity: 0.62; } }
@media (max-width: 74.99em) {
  .nav__side { display: none; }
  .nav__logo { grid-column: 2; }
  .nav__menu { display: inline-flex; grid-column: 3; }
}

.menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--m) var(--pad); border: 0; background: var(--bg); color: var(--ink); }
.menu::backdrop { background: rgb(14 26 51 / 0.4); }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__logo { width: 9rem; }
.menu__close { min-height: 2.75rem; padding-inline: 0.25rem; }
.menu__links { margin-top: 10vh; }
.menu__links a { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-display); line-height: 1.12; text-decoration: none; }
.menu__facts { margin-top: 2.5rem; line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in 260ms var(--ease-out); }
  .menu[open] .menu__links li { animation: menu-in 420ms var(--ease-out) backwards; }
  .menu[open] .menu__links li:nth-child(2) { animation-delay: 40ms; }
  .menu[open] .menu__links li:nth-child(3) { animation-delay: 80ms; }
  .menu[open] .menu__links li:nth-child(4) { animation-delay: 120ms; }
  .menu[open] .menu__links li:nth-child(5) { animation-delay: 160ms; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- the split: a reading column and a stage that stays ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m); padding: var(--m); align-items: start; }
.reading { min-width: 0; }
.stage { position: sticky; top: var(--m); height: calc(100svh - 2 * var(--m)); overflow: hidden; background: var(--surface); }
.stage__item { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease-soft); }
.stage.is-quick .stage__item { transition-duration: 300ms; transition-timing-function: var(--ease-out); }
.stage__item.is-on { opacity: 1; }
.stage__item img { width: 100%; height: 100%; object-fit: cover; }
.stage__item.is-cutout { background: var(--paper); }
.stage__item.is-cutout img { object-fit: contain; padding: 9% 9% calc(var(--bar) + 9%); }
.stage__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem; background: var(--paper); font-size: 0.9375rem; }
.stage__caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.stage__hint { color: var(--muted); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { a.stage__caption:hover { text-decoration: underline; text-underline-offset: 0.22em; } }

.finishes { display: flex; gap: 0.25rem; }
.finish { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.6rem; color: var(--muted); transition: color var(--t-hover) ease; }
.finish[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.finish:active .dot { transform: scale(0.86); }
@media (hover: hover) and (pointer: fine) { .finish:hover { color: var(--ink); } .finish:hover .dot { transform: scale(1.12); } }

/* a finish swatch: one colour, or the two of a two-tone finish */
.dot { position: relative; display: inline-block; flex: none; width: 1rem; height: 1rem; border-radius: 50%; overflow: hidden; background: var(--a); box-shadow: inset 0 0 0 1px rgb(14 26 51 / 0.2); /* taste-skill-ignore: the edge that keeps the white swatch visible on white */ transition: transform var(--t-ui) var(--ease-out); }
.dot::after { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--b); }

/* thumbnails on the product stage */
.stage__bar--thumbs { flex-wrap: wrap; padding-block: 0.5rem; }
.thumbs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.thumb { width: 2.75rem; height: 2.75rem; background: var(--surface); transition: transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease; opacity: 0.72; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.thumb:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .thumb:hover { opacity: 1; } }

/* ---------- the reading column of inner pages ---------- */
.top { padding: 1.25rem var(--pad) 0; }
.top h1 { margin-top: clamp(4rem, 16svh, 10rem); }
.top__lead { margin-top: 1.75rem; max-width: 36ch; font-size: var(--step-lead); line-height: 1.3; }
.product__name { overflow-wrap: anywhere; }
.product__actions { margin-top: 2.25rem; }
.block { padding: 0 var(--pad); margin-top: clamp(4.5rem, 9vw, 7.5rem); }
.block > p { margin-top: 1.25rem; max-width: 52ch; }
.block__note { color: var(--muted); }
.reading > .block:last-child { padding-bottom: clamp(3rem, 6vw, 6rem); }
.block__h + * { margin-top: 1.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 2.5rem; }
.filters a { display: inline-flex; gap: 0.35rem; min-height: 2.75rem; align-items: center; text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.filters a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.filters .nums { font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .filters a:hover { color: var(--ink); } }

.entries { margin-top: clamp(3.5rem, 7vw, 6rem); padding: 0 var(--pad) clamp(3rem, 6vw, 6rem); }
.entry { display: block; padding-block: 1.1rem 1.4rem; text-decoration: none; }
.entry__pic { display: none; }
.entry__name { font-family: var(--font-display); font-optical-sizing: auto; text-transform: uppercase; font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.01em; transition: transform 240ms var(--ease-out); }
.entry__meta { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 0.6rem; max-width: none; color: var(--muted); }
.entry__meta .row__dots { align-self: center; min-width: 0; }
.entry__w { margin-left: auto; white-space: nowrap; }
.entry.is-on .entry__name { transform: translateX(0.6rem); }
@media (hover: hover) and (pointer: fine) { .entry:hover .entry__name { transform: translateX(0.6rem); } }

.variants { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.75rem; }
.variant { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.variant[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.variant:active .dot { transform: scale(0.86); }
@media (hover: hover) and (pointer: fine) { .variant:hover { color: var(--ink); } }

.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 34rem; }
.dims div { display: flex; flex-direction: column-reverse; }
.dims dt { color: var(--muted); font-size: var(--step-small); }
.dims dd { font-family: var(--font-display); font-size: var(--step-head); line-height: 1; margin-bottom: 0.4rem; }
.feats { display: grid; gap: 0.6rem; max-width: 46ch; }
.feats li { position: relative; padding-left: 1.25rem; }
.feats li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; background: var(--accent); }
.docs { display: grid; gap: 0.6rem; }
.map { margin-top: 1.5rem; max-width: 40rem; }
.map a { display: block; overflow: clip; }
.map img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--ease-out); }
.map figcaption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .map a:hover img { transform: scale(1.02); } }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m); max-width: 38rem; }
.plate { display: grid; gap: 0.6rem; text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.plate__pic { display: block; aspect-ratio: 1; padding: 10%; background: var(--paper); transition: transform var(--t-press) var(--ease-out); }
.plate__pic img { width: 100%; height: 100%; object-fit: contain; }
.plate__name { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step-small); }
.plate[aria-current] { color: var(--ink); }
.plate[aria-current] .plate__pic { outline: 2px solid var(--ink); outline-offset: -2px; }
.plate:active .plate__pic { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .plate:hover { color: var(--ink); } }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--m); }
.other { display: grid; gap: 0.2rem; text-decoration: none; }
.other__pic { display: block; aspect-ratio: 4 / 3; overflow: clip; margin-bottom: 0.6rem; background: var(--surface); }
.other__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.other__val { color: var(--muted); font-size: var(--step-small); }
.other:active .other__pic img { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .other:hover .other__pic img { transform: scale(1.03); } .other:hover .other__name { text-decoration: underline; text-underline-offset: 0.25em; } }
.docs__size { color: var(--muted); font-size: var(--step-small); margin-left: 0.4rem; }
.facts { display: grid; gap: 0.4rem; max-width: 40rem; }
.facts li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.4rem; }
.facts li > span:first-child { color: var(--muted); }
.values { display: grid; gap: 1.25rem; margin-top: 2rem; max-width: 52ch; }
.values dt { font-weight: 500; }
.values dd { margin-top: 0.25rem; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; max-width: 36rem; }
.figs div { display: flex; flex-direction: column-reverse; }
.figs dt { color: var(--muted); }
.figs dd { font-family: var(--font-display); font-size: var(--step-display); line-height: 1; }

/* ---------- home: the sheet ---------- */
.sheet { display: flex; flex-direction: column; min-height: calc(100svh - 2 * var(--m)); padding: 1.25rem var(--pad) 3rem; background: var(--paper); text-align: center; }
.sheet__body { margin-top: calc(34svh - 6rem); display: flex; flex-direction: column; align-items: center; }
.sheet h1 { max-width: 20ch; }
.sheet__lead { max-width: 40ch; margin-top: 2rem; }
.sheet__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

/* ---------- two-ended rows ---------- */
.models { width: min(100%, 34rem); margin: var(--section) auto 0; padding-bottom: calc(var(--section) * 0.6); }
.models__intro { margin-top: 1.25rem; }
.models__group { margin-top: 2.5rem; font-size: var(--step-body); color: var(--muted); }
.rows { margin-top: 0.5rem; max-width: 34rem; }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; min-height: 2.5rem; text-decoration: none; }
.row__dots { display: flex; gap: 0.2rem; min-width: 3.4rem; }
.row__dots .dot { width: 0.875rem; height: 0.875rem; }
.row__val { color: var(--muted); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.row__name { transition: transform var(--t-ui) var(--ease-out); }
.row.is-on .row__name { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .row:hover .row__name { transform: translateX(4px); } }
.models__more { margin-top: 2.5rem; }

/* ---------- the catalogue ---------- */
.field-navy { background: var(--navy); color: var(--navy-ink); }
.field-ink { background: var(--ink); color: var(--bg); }
.catalog { padding: var(--section) var(--m); display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; }
.catalog .flipbook { margin-inline: auto; }
.catalog__head p { margin: 1.25rem auto 0; max-width: 46ch; }
.catalog__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: 2.5rem; max-width: none; }

.flipbook { width: min(100%, 76rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.flipbook__stage { position: relative; width: 100%; height: min(74svh, calc((100vw - 2 * var(--m)) / (2 * var(--ratio)))); display: grid; place-items: center; }
/* before the book starts, the cover stands in the middle, where the closed book will be */
.flipbook__poster { display: block; height: 100%; }
.flipbook__poster img { width: auto; height: 100%; }
.flipbook.is-ready .flipbook__poster { display: none; }
.flipbook__fit { max-width: 100%; transition: transform 700ms var(--ease-in-out); }
.flipbook__page { background: var(--paper); overflow: hidden; }
.flipbook__page img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease; background: var(--paper); }
.flipbook__page img.is-loaded { opacity: 1; }
.flipbook__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.flipbook__count { min-width: 16ch; font-variant-numeric: tabular-nums; max-width: none; }
.flipbook__btn { min-height: 2.75rem; padding: 0 0.75rem; justify-self: end; transition: opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.flipbook__btn[data-fb-next] { justify-self: start; }
.flipbook__btn:disabled { opacity: 0.4; cursor: default; }
.flipbook__btn:not(:disabled):active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .flipbook__btn:not(:disabled):hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.flipbook:fullscreen { display: grid; align-content: center; justify-items: center; width: 100%; margin: 0; padding: 2vh 2vw; background: var(--ink); color: var(--bg); }
.flipbook:fullscreen .flipbook__stage { height: 86vh; }
/* page-flip's own layout rules */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

.book-page { min-height: 100svh; padding: var(--m) var(--m) var(--section); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; text-align: center; }
.book-page .flipbook { margin-inline: auto; }
.book-page__top { width: 100%; padding: 0.25rem var(--pad); }
.book-page__head { margin-top: clamp(2.5rem, 7svh, 5rem); }
.book-page__head p { margin: 1.25rem auto 0; max-width: 40ch; font-size: var(--step-lead); line-height: 1.3; }
.book-page .flipbook { margin-top: 1.75rem; }
.book-page .flipbook__stage { height: max(20rem, min(calc(100svh - 22rem), calc((100vw - 2 * var(--m)) / (2 * var(--ratio))))); }
.book-page__head { margin-top: clamp(1.5rem, 4svh, 3rem); }
.book-page__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; max-width: none; }
.book-page__empty { margin-top: 3rem; }
.jump { margin-top: var(--section); text-align: left; }
.jump__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--m); margin-top: 2.5rem; }
.jump__item { display: grid; gap: 0.25rem; text-decoration: none; }
.jump__pic { display: block; aspect-ratio: 4 / 3; overflow: clip; margin-bottom: 0.75rem; background: var(--muted); }
.jump__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .js .jump [data-reveal] .jump__pic { transform: scale(0.94); transition: transform 1100ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
  .js .jump [data-reveal].is-in .jump__pic { transform: none; }
}
.jump__page { color: var(--on-ink-muted); font-size: var(--step-small); }
.jump__item:active .jump__pic img { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .jump__item:hover .jump__pic img { transform: scale(1.03); } .jump__item:hover .jump__name { text-decoration: underline; text-underline-offset: 0.25em; } }

/* ---------- home: Domus, square plate and spare text ---------- */
.show { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--paper); }
.show__plate { position: relative; align-self: center; aspect-ratio: 1; margin: 2.5rem; }
.show__img { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transform: scale(0.985); }
.show__img.is-on { opacity: 1; transform: none; }
.show__img img { width: 100%; height: 100%; object-fit: contain; }
.show__text { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: clamp(2.5rem, 5vw, 5rem) var(--m) var(--m) 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.tab { min-height: 2.75rem; color: var(--muted); transition: color var(--t-hover) ease; }
.tab[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink); } }
.show__mid p { max-width: 38ch; margin-top: 2rem; }
.show__mid .show__dims { margin-top: 1rem; color: var(--muted); }
.show__cells { display: grid; grid-template-columns: 1fr 1fr; }
.cell { display: flex; align-items: center; padding: 0 1.25rem; min-height: 4.5rem; text-decoration: none; font-weight: 500; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cell:active { transform: scale(0.99); }
.cell--ink { background: var(--ink); color: var(--bg); }
.cell--tone { background: var(--surface); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .cell--ink:hover { background: var(--navy); } .cell--tone:hover { background: #dcd6cb; } }

/* ---------- home: the letter ---------- */
.letter { padding: calc(var(--section) * 1.1) var(--m); }
.letter__col { width: min(100%, 34rem); margin: 0 auto; }
.letter__face { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: 40% 50%; }
.letter .head { margin-top: 1.75rem; }
.letter p:not(.letter__sign) { margin-top: 1.4rem; }
.letter p.letter__sign { margin-top: 2.5rem; font-style: italic; font-size: 1.375rem; }
.letter p.letter__role { margin-top: 0.25rem; font-size: var(--step-small); color: var(--muted); }

/* ---------- home: the factory mosaic ---------- */
.mosaic { padding: 0 var(--m); }
.mosaic__head { padding-bottom: 2.5rem; }
.mosaic__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: min(66vw, 92svh); }
.mosaic__photo { grid-row: 1 / 3; overflow: clip; }
.mosaic__photo img { width: 100%; height: 100%; object-fit: cover; }
.tile { min-width: 0; padding: 1.75rem; }
.tile p { max-width: 20ch; }
.tile p.tile__fig { max-width: none; font-family: var(--font-display); font-size: var(--step-display); line-height: 1; margin-bottom: 0.75rem; }
.tile--navy { background: var(--navy); color: var(--navy-ink); }
.tile .link-plain { display: inline-block; margin-top: 1.25rem; min-height: 1.5rem; }
.tile--cedro { background: var(--cedro); color: var(--cedro-ink); }

/* ---------- home: closing band ---------- */
.band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); align-items: start; padding: calc(var(--section) * 1.1) var(--m) calc(var(--section) * 0.4); }
.band__sentence { grid-column: 1 / 7; font-size: var(--step-lead); line-height: 1.2; max-width: 24ch; }
.band__photo { grid-column: 8 / 10; width: 100%; max-width: 10.5rem; aspect-ratio: 1; object-fit: cover; }
.band__links { grid-column: 10 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.band__q { font-size: var(--step-body); font-weight: 500; margin-bottom: 0.85rem; }
.band__note { margin-top: 0.85rem; font-size: var(--step-small); color: var(--muted); }

/* ---------- the factory page: a wide closing photo ---------- */
.wide { display: grid; grid-template-columns: 7fr 5fr; margin: var(--section) var(--m) 0; }
.wide__photo { overflow: clip; }
.wide__photo img { width: 100%; height: 100%; min-height: 70svh; object-fit: cover; }
.wide__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.5rem); }
.wide__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ---------- text pages ---------- */
.text-page { padding: 1.25rem var(--pad) 0; }
.text-page__col { width: min(100%, 44rem); margin: clamp(4rem, 14svh, 9rem) auto 0; }
.text-page__col .block__h { margin-top: 3.5rem; }
.text-page__col > p { margin-top: 1.1rem; }
.text-page__col .top__lead { margin-top: 1.75rem; }
.text-page__col .rows { margin-top: 2rem; }

/* ---------- forms ---------- */
.form { position: relative; display: grid; gap: 1.25rem; margin-top: 1.75rem; max-width: 40rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
.form__city { display: grid; grid-template-columns: 1fr 5.5rem; gap: 0.75rem; }
.field { display: grid; gap: 0.45rem; align-content: start; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label, .field legend { font-size: 0.9375rem; font-weight: 500; padding: 0; }
.field__opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.95rem; background: var(--paper); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); transition: outline-color var(--t-hover) ease; }
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.field select { appearance: none; background-image: none; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.field [aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 0; }
.field__error { color: var(--error); font-size: var(--step-small); }
.form__alert { padding: 0.9rem 1rem; background: var(--paper); color: var(--error); font-weight: 500; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; background: var(--paper); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { background: var(--ink); color: var(--bg); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 0.9375rem; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--accent); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* taste-skill-ignore: hidden spam trap, not a rule */
.form .button { justify-self: start; }
.sent { margin-top: 1.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); max-width: 40rem; }
.sent p { margin-top: 1rem; }

/* ---------- footer: one quiet line ---------- */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1.5rem; padding: 16svh var(--m) 1.9rem; font-size: 0.9375rem; }
.foot p { color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; }
.foot__links a, .foot__legal a { text-decoration: none; color: var(--ink); }
.foot__legal { justify-self: end; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration: underline; text-underline-offset: 0.22em; } }

/* ---------- motion. Content is in place on the first paint; the hidden states exist only with
   script and without a reduced-motion request, and every move is transform, opacity or clip-path. ---------- */
.lines .line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* load: the title rises out of its lines, the stage opens, then the sentence and the action (done by 1.2 s) */
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
  .js [data-load] { opacity: 0; transform: translateY(14px); animation: rise 560ms var(--ease-out) forwards; animation-delay: var(--d, 420ms); }
  .js .stage { clip-path: inset(0 0 100% 0); animation: open 1000ms var(--ease-in-out) 100ms forwards; }
  .js .stage__item.is-on img { animation: settle 1300ms var(--ease-expo) 100ms backwards; }
  .js .stage__bar { opacity: 0; transform: translateY(100%); animation: rise 520ms var(--ease-out) 700ms forwards; }

  /* scroll: each section's parts arrive once, in reading order */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="row"] { transform: translateY(12px); transition-duration: 480ms, 600ms; transition-delay: calc(var(--i, 0) * 45ms); }
  .js [data-reveal="settle"] { transform: scale(0.97); transition-duration: 700ms, 1100ms; }
  .js [data-reveal="shutter"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js [data-reveal="shutter"] img { transform: scale(1.1); transition: transform 1500ms var(--ease-soft); }
  .js [data-reveal="shutter"].is-in { clip-path: inset(0); }
  .js [data-reveal="shutter"].is-in img { transform: none; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes open { to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .js .stage--drift .stage__item img { animation: drift-slow 26s var(--ease-soft) infinite alternate; }
}
@keyframes drift-slow { from { transform: scale(1.06); } to { transform: scale(1) translateX(-1.5%); } }

/* the aerial photograph drifts a little against the scroll (browsers without scroll timelines keep it still) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift img { height: 112%; animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: translateY(-10%); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage__item, .show__img, .flipbook__fit { transition-duration: 1ms !important; }
}

/* ---------- below 1000px the stage goes on top and the reading column slides over it ---------- */
@media (max-width: 62.49em) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage { order: -1; height: 56svh; z-index: 0; }
  .reading { position: relative; z-index: 1; margin-top: -3.5rem; background: var(--bg); }
  .stage__bar { bottom: 3.5rem; }
  .stage__item.is-cutout img { padding-bottom: calc(var(--bar) + 3.5rem + 8%); }
  .split--home .reading { background: none; }
  .sheet { min-height: 0; padding: 1rem 1.25rem 3rem; }
  .sheet__body { margin-top: 3rem; }
  .models { margin-top: 0; padding: 4.5rem 0.25rem 4rem; width: auto; background: var(--bg); }
  .top { padding-top: 1rem; }
  .top h1 { margin-top: 3rem; }
  .split--list .stage { display: none; }
  .split--list .reading { margin-top: 0; }
  .entry__pic { display: block; aspect-ratio: 4 / 3; margin-bottom: 1rem; overflow: hidden; background: var(--surface); }
  .entry__pic img { width: 100%; height: 100%; object-fit: cover; }
  .entry { padding-block: 1.25rem 2rem; }
  .wide { grid-template-columns: 1fr; }
  /* tablets: the reading column becomes one centred measure under the picture */
  .reading > .top, .reading > .block, .reading > .entries { max-width: 46rem; margin-inline: auto; }
  .foot { grid-template-columns: 1fr; gap: 0.5rem; }
  .foot__links { justify-content: flex-start; }
  .foot__legal { justify-self: start; }
  .band { grid-template-columns: 6rem 1fr; gap: 2rem 1.25rem; }
  .band__sentence { grid-column: 1 / 3; }
  .band__photo { grid-column: 1; max-width: 6rem; }
  .band__links { grid-column: 2; }
  .wide__photo img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 47.99em) {
  /* on a phone the picture keeps its inset, and the reading sheet runs edge to edge with text on the same margin */
  .split { padding: var(--m) 0 0; }
  .stage { margin: 0 var(--m); }
  .sheet { padding: 1rem var(--pad) 3rem; }
  .models { padding-inline: var(--pad); }
  .nav__logo { width: 46vw; max-width: 11rem; }
  .finish { padding: 0 0.45rem; }
  .finish__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .finish .dot { width: 1.375rem; height: 1.375rem; }
  .stage__bar { padding: 0 0.75rem; font-size: 0.875rem; }
  .stage__caption { white-space: normal; line-height: 1.25; }
  /* the phone gallery: one row of small thumbs; the picture itself takes a tap or a swipe */
  .stage__bar--thumbs { padding-block: 0.4rem; }
  .stage__bar--thumbs .stage__caption { display: none; }
  .thumbs { flex-wrap: nowrap; justify-content: flex-start; gap: 0.25rem; }
  .thumb { width: 1.75rem; height: 1.75rem; }
  .sheet h1 { font-size: 9.6vw; }
  .sheet__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .sheet__actions .button { width: 100%; }
  .row { min-height: 2.75rem; }
  .entry__meta { flex-wrap: wrap; gap: 0.25rem 0.6rem; }
  .entry__meta > span:nth-child(2) { order: 3; flex-basis: 100%; }
  .dims dd { font-size: 2rem; }
  .others { grid-template-columns: 1fr 1fr; }
  .facts li { grid-template-columns: 1fr; gap: 0.1rem; }
  .form__row { grid-template-columns: 1fr; }
  .product__actions .button { width: 100%; }
  .flipbook__stage { height: min(68svh, calc((100vw - 2 * var(--m)) / var(--ratio))); }
  .book-page .flipbook__stage { height: min(72svh, calc((100vw - 2 * var(--m)) / var(--ratio))); }
  .flipbook__count { min-width: 0; }
  .flipbook__controls { gap: 0.25rem; }
  .flipbook__btn { padding: 0 0.5rem; }
  .jump__list { grid-template-columns: 1fr 1fr; gap: 2rem var(--m); }
  .tile p { max-width: 100%; }
  .show { grid-template-columns: 1fr; min-height: 0; }
  .show__plate { margin: 1.5rem 1rem 0; }
  .show__text { padding: 1.5rem var(--m) var(--m); gap: 2rem; }
  .tabs { gap: 0 1.25rem; }
  .show__cells { grid-template-columns: 1fr; }
  .cell { min-height: 3.75rem; }
  .mosaic__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .mosaic__photo { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 4 / 3; }
  .tile { aspect-ratio: 1; padding: 1rem; }
  .tile p { font-size: 0.9375rem; }
  .tile p.tile__fig { font-size: 10vw; }
  .foot { padding: 18svh var(--m) 1.5rem; font-size: 0.875rem; }
}