/* giorgetti-furniture.com
   Graphite ground, steel panels with a chamfer on two opposite corners, steel cyan accent,
   Archivo expanded in caps over Public Sans. Written mobile first: everything below is the
   360 px layout until a min-width query widens it.

   Four causes of horizontal scroll were found on the previous build of the network and each
   is fixed on purpose here, marked "overflow:" in the comments. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* overflow 1: the closed mobile sheet sits past the right edge. Clipping the root stops it
     from widening the page, and `clip` (unlike `hidden`) keeps position: sticky working. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }
b, strong { font-weight: 600; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; font: 600 var(--fs-body)/1 var(--text);
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* ── type ────────────────────────────────────────────────────────────────── */

.d-xl {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 16px;
  /* the expanded face is wide: measured at 1440 the hero column is 589 px, and a ten letter
     word at 62 px fills 520 of it. Anything larger broke words down the middle. */
  overflow-wrap: break-word;
}
.h2 {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.h3 {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 46ch; }
.kicker, .panel__label, .spec-list__k, .tbl th, .field__label, .hd__link, .btn, .sheet__title,
.acc__btn, .frame__cap-t, .specs dt, .src {
  font-family: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.3;
}
.kicker { color: var(--accent); margin: 0 0 12px; }
.src { text-transform: none; letter-spacing: 0.01em; font-weight: 400; font-size: var(--fs-small); color: var(--muted); }
.sec__note { color: var(--muted); max-width: 62ch; font-size: var(--fs-body); }

/* ── shared shapes ───────────────────────────────────────────────────────── */

/* The panel: the layout device of the site. A chamfer on the top left and bottom right,
   never a radius. Painted with a clip-path so the cut is exact at every size. */
.panel {
  position: relative;
  background: var(--panel);
  clip-path: var(--cut);
  padding: calc(var(--panel-pad) + 36px) var(--panel-pad) calc(var(--panel-pad) + 16px);
  /* overflow 2: a grid column holding a table refuses to shrink without this */
  min-width: 0;
}
/* The spec label is the header of a drawing sheet, not a second kicker: muted, wider tracked,
   with the rule of the sheet frame running under it across the panel. */
.panel__label {
  position: absolute;
  top: calc(var(--panel-pad) - 6px);
  left: var(--panel-pad);
  right: var(--panel-pad);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--outline);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
}
.panel__dim {
  position: absolute;
  right: var(--panel-pad);
  bottom: calc(var(--panel-pad) - 6px);
  color: var(--muted);
  font: 500 var(--fs-label)/1 var(--text);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
/* the dimension dot itself, the mark a drawing puts at the end of a leader */
.panel__dim::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 8px;
  background: var(--accent);
  vertical-align: 1px;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  position: relative;               /* overflow 4: keeps inner absolute spans inside the button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  clip-path: var(--cut-sm);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.btn__t { position: relative; z-index: 2; transition: color var(--t-mid) var(--ease-in); }
/* hover: the fill runs down from the top and the text inverts */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(-100%);
  transition: transform var(--t-mid) var(--ease-in);
  z-index: 1;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover .btn__t, .btn:focus-visible .btn__t { color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--ghost:hover .btn__t, .btn--ghost:focus-visible .btn__t { color: var(--on-accent); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn[disabled]::after { transform: translateY(-100%); }

/* link: on hover the tracking opens and a cyan dot lights up on the right */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--outline);
  transition: letter-spacing var(--t-fast) var(--ease-out), border-color var(--t-fast) linear;
}
.lnk__dot {
  width: 7px; height: 7px;
  background: var(--outline-strong);
  transition: background var(--t-fast) linear, transform var(--t-fast) var(--ease-in);
  flex: none;
}
.lnk:hover, .lnk:focus-visible {
  letter-spacing: 0.06em;
  border-color: var(--accent);
  transition-duration: var(--t-mid);
}
.lnk:hover .lnk__dot, .lnk:focus-visible .lnk__dot { background: var(--accent); transform: scale(1.4); }

/* ── header ──────────────────────────────────────────────────────────────── */

/* The header keeps one height whatever it does, and the panel inside it moves. If the header
   itself changed height on scroll, every section below would jump by that amount: measured at
   768 and 1440 that was a layout shift of 0.07, well over the 0.05 the network allows. */
.hd {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  height: calc(var(--head-h) + 16px);
}
.hd__panel {
  position: absolute;
  top: 16px;
  left: var(--margin);
  right: var(--margin);
  max-width: var(--container);
  margin-inline: auto;
  background: var(--panel);
  clip-path: var(--cut);
  transition: top var(--t-mid) var(--ease-in), left var(--t-mid) var(--ease-in),
              right var(--t-mid) var(--ease-in), clip-path var(--t-mid) var(--ease-in);
}
/* on scroll the panel sits down on the edge: the top chamfers go, the bottom ones stay */
.hd.is-stuck .hd__panel { top: 0; left: 0; right: 0; max-width: none; clip-path: var(--cut-bottom); }
.hd__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--head-h);
  padding-inline: var(--panel-pad);
  max-width: var(--container);
  margin-inline: auto;
  transition: height var(--t-mid) var(--ease-in);
}
.hd.is-stuck .hd__row { height: 56px; }
.hd__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
  min-height: 44px;
}
.hd__mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.hd__word {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hd__nav { display: none; }
.hd__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 10px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: letter-spacing var(--t-fast) var(--ease-out);
}
.hd__link .lnk__dot { width: 6px; height: 6px; background: transparent; transition: background var(--t-fast) linear; }
.hd__link:hover, .hd__link:focus-visible { letter-spacing: 0.18em; }
.hd__link:hover .lnk__dot, .hd__link:focus-visible .lnk__dot, .hd__link[aria-current="page"] .lnk__dot { background: var(--accent); }
.hd__trigger[aria-expanded="true"] { letter-spacing: 0.18em; }
.hd__trigger[aria-expanded="true"] .lnk__dot { background: var(--accent); }
.hd__ask { display: none; }
.hd__index {
  min-height: 44px;
  min-width: 72px;
  padding: 10px 14px;
  background: transparent;
  color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--accent);
  clip-path: var(--cut-sm);
  font: 600 var(--fs-label)/1 var(--text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* ── collections submenu (desktop only) ──────────────────────────────────── */

.mega { display: none; }
@media (min-width: 1080px) {
  .hd__nav { display: flex; align-items: center; gap: 4px; }
  .hd__ask { display: inline-flex; min-height: 44px; padding: 10px 18px; }
  .hd__index { display: none; }
  .mega {
    display: block;
    position: absolute;
    left: var(--margin); right: var(--margin);
    top: calc(100% - 6px);
    background: var(--panel);
    clip-path: var(--cut);
    z-index: var(--z-mega);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity var(--t-mid) var(--ease-in), transform var(--t-mid) var(--ease-in), visibility 0s linear var(--t-mid);
  }
  .hd.is-stuck .mega { left: 0; right: 0; }
  .mega.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .mega__in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gutter) 32px;
    padding-block: 32px 28px;
  }
  .mega__foot { grid-column: 1 / -1; margin: 0; }
}
.mega__col { min-width: 0; }
.mega__h { font-family: var(--display); font-variation-settings: var(--wide); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.mega__list { display: grid; gap: 2px; }

/* the row with a dot leader: name, leader, value. Used in the menu, the footer and the site map. */
.lead-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  padding-block: 6px;
}
.lead-row__n { flex: none; max-width: 70%; }
.lead-row__l {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  align-self: center;
  background-image: radial-gradient(circle, var(--outline-strong) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}
.lead-row__v {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
}
a.lead-row:hover .lead-row__n, a.lead-row:focus-visible .lead-row__n { color: var(--accent); }
.ft__led a, .lead-row a { text-decoration: none; }
.ft__led a:hover, .lead-row a:hover { color: var(--accent); }

/* ── mobile index sheet ──────────────────────────────────────────────────── */

.sheet-dock {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  pointer-events: none;
  /* overflow 1 again, locally: the closed sheet lives past the right edge of this dock */
  overflow: hidden;
}
.sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--outline);
  padding: 16px var(--margin) 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-in);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sheet.is-open { transform: none; }
.scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  z-index: calc(var(--z-sheet) - 1);
  transition: opacity var(--t-mid) linear, visibility 0s linear var(--t-mid);
}
.scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.html-lock, .html-lock body { overflow: hidden; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.sheet__title { color: var(--accent); }
.sheet__close {
  min-height: 44px; padding: 10px 16px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--outline-strong);
  clip-path: var(--cut-sm);
  font: 600 var(--fs-label)/1 var(--text); letter-spacing: var(--track-label); text-transform: uppercase;
}
.sheet__stack { display: grid; gap: 10px; }
/* the mobile menu: accordion panels in a column, each opening in place */
.acc { padding: 0; background: var(--panel); clip-path: var(--cut-sm); }
.acc__h { margin: 0; }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
}
.acc__btn[aria-expanded="true"] { color: var(--accent); }
.acc__n { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.acc__body { padding: 0 18px 16px; }
.acc__list { display: grid; gap: 2px; margin-bottom: 8px; }
.sheet__nav { display: grid; gap: 2px; margin-top: 4px; }
.sheet__ask { width: 100%; margin-top: auto; }
@media (min-width: 1080px) { .sheet-dock { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding-top: 24px; }
/* three flavours of first screen: a collection sheet, an index, and a page with no photograph */
.hero--coll .lead { max-width: 52ch; }
.hero--index .sec__note, .hero--index .lead { max-width: 54ch; }
.hero--plain .hero__panel { padding-bottom: calc(var(--panel-pad) + 16px); }
.hero__panel { padding-bottom: calc(var(--panel-pad) + 24px); }
.hero__grid { display: grid; gap: 28px; }
.hero__text { min-width: 0; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.hero__acts .btn { flex: 1 1 200px; }
.crumbs { padding-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--outline-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
  .hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
}

/* ── the photograph frame ────────────────────────────────────────────────── */

/* The frame never grows past the photograph behind it: --maxw is the width of the file and
   --ar its own proportion, both written by the build. A narrow catalogue shot therefore sits
   centred in its panel at its own scale instead of being stretched across it. */
.frame { margin: 0 auto; min-width: 0; max-width: min(100%, var(--maxw, 100%)); }
.frame__box {
  position: relative;
  clip-path: var(--cut-sm);
  background: var(--panel-2);
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
}
/* Four fifths of the Giorgetti catalogue is photographed as a cut-out on white, so the white
   is not an accident to hide but the sheet the piece is drawn on. The frame takes exactly that
   white, the photograph sits on it with a margin, and the chamfer and the corner brackets make
   it read as a plate. No mat, no grey border: a visible seam between two whites would only look
   like a mistake, and the mounted-mat device belongs to another system in the network anyway. */
.frame--studio .frame__box, .card__frame.frame--studio { background: var(--plate); }
.frame--studio .frame__box img, .card__frame.frame--studio img {
  object-fit: contain;
  padding: 4%;
}
.frame--studio .visir::before, .frame--studio .visir::after { border-color: var(--on-light); }
.frame__mask { display: block; width: 100%; height: 100%; }
.frame__mask picture { display: block; width: 100%; height: 100%; }
.frame__box img { width: 100%; height: 100%; object-fit: cover; }
/* hover: four corner brackets step out of the edges. The photograph itself does not move. */
.visir { position: absolute; inset: 10px; pointer-events: none; }
.visir::before, .visir::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-in), transform var(--t-mid) var(--ease-in);
}
.visir::before { top: 0; left: 0; border-right: 0; border-bottom: 0; transform: translate(6px, 6px); }
.visir::after { right: 0; bottom: 0; border-left: 0; border-top: 0; transform: translate(-6px, -6px); }
.frame:hover .visir::before, .frame:hover .visir::after,
.card:hover .visir::before, .card:hover .visir::after,
.card:focus-visible .visir::before, .card:focus-visible .visir::after { opacity: 1; transform: none; }
.hero__frame { align-self: center; }
.frame__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 10px;
  color: var(--muted);
}
.frame__cap-t { color: var(--ink); }
.frame__cap-d { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* ── sections ────────────────────────────────────────────────────────────── */

.sec { padding-top: var(--section); }
.sec--tight { padding-top: calc(var(--section) * 0.7); }
.band { padding-top: 40px; }
.sec__head { margin-bottom: 32px; max-width: 900px; }
.sec__panel { margin-top: 20px; }
.sec__more { margin-top: 24px; }
.prose { max-width: var(--text-col); }
.two { display: grid; gap: 32px; }
.two__col { min-width: 0; }
.two--text .two__col:first-child { max-width: var(--text-col); }
@media (min-width: 900px) {
  .two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
}

/* the ledger of factory facts */
.facts { display: grid; gap: 10px; margin: 0; }
.facts__cell { padding: 26px var(--panel-pad) 34px; }
.facts__cell dt { color: var(--accent); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; }
.facts__cell dd {
  margin: 8px 0 0;
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); } }

/* ── the collection ledger ───────────────────────────────────────────────── */

.led { border-top: 1px solid var(--outline); }
.led__item { border-bottom: 1px solid var(--outline); }
.led__row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "no name meta" ". kind kind";
  align-items: center;
  gap: 4px 12px;
  min-height: 64px;
  padding: 14px 4px;
  background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  transition: color var(--t-fast) linear;
}
.led__no { grid-area: no; color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-small); }
.led__name {
  grid-area: name;
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 22px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: letter-spacing var(--t-mid) var(--ease-in);
}
.led__leader { display: none; }
.led__meta { grid-area: meta; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.led__kind { grid-area: kind; color: var(--muted); font-size: var(--fs-small); }
.led__row:hover .led__name, .led__row:focus-visible .led__name { letter-spacing: 0.07em; color: var(--accent); }
.led__row[aria-expanded="true"] .led__name { color: var(--accent); }
.led__open { padding: 4px 0 28px; }
.led__grid { display: grid; gap: 20px; }
.led__body { min-width: 0; }
.led__lead { color: var(--muted); }
@media (min-width: 720px) {
  .led__row {
    grid-template-columns: 44px minmax(0, auto) minmax(40px, 1fr) auto auto;
    grid-template-areas: "no name leader kind meta";
    gap: 16px;
  }
  .led__leader {
    display: block;
    grid-area: leader;
    height: 1px;
    align-self: center;
    background-image: radial-gradient(circle, var(--outline-strong) 1px, transparent 1px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
  .led__grid { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; }
}

/* ── panels of photographs ───────────────────────────────────────────────── */

.plates { display: grid; gap: 12px; }
.plate { padding-bottom: calc(var(--panel-pad) + 20px); }
@media (min-width: 720px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1080px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cards { display: grid; gap: 12px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: block;
  text-decoration: none;
  padding-bottom: calc(var(--panel-pad) + 20px);
  transition: transform var(--t-slow) var(--ease-in);
}
/* hover: the panel lifts and a drawing grid shows through beneath it */
.card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--outline) 1px, transparent 1px), linear-gradient(90deg, var(--outline) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-in);
  pointer-events: none;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); }
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card__frame {
  position: relative;
  display: block;
  max-width: min(100%, var(--maxw, 100%));
  margin-inline: auto;
  clip-path: var(--cut-sm);
  background: var(--panel-2);
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  margin-bottom: 16px;
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: block; position: relative; }
.card__name {
  display: block;
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card__line { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 6px; }
.card__ask { display: block; color: var(--accent); font-size: var(--fs-small); margin-top: 4px; }

/* ── spec lists, definition lists ────────────────────────────────────────── */

.spec-list { display: grid; gap: 2px; border-top: 1px solid var(--outline); }
.spec-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--outline);
  min-height: 48px;
}
.spec-list__k { flex: none; max-width: 48%; color: var(--accent); }
.spec-list__l {
  flex: 1 1 auto; min-width: 10px; height: 1px; align-self: center;
  background-image: radial-gradient(circle, var(--outline-strong) 1px, transparent 1px);
  background-size: 6px 2px; background-repeat: repeat-x; background-position: 0 50%;
}
.spec-list__v { flex: none; text-align: right; max-width: 52%; font-variant-numeric: tabular-nums; }

.specs { display: grid; gap: 2px; margin: 20px 0 0; }
.specs > div { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--outline); }
.specs dt { flex: none; width: 96px; color: var(--accent); }
.specs dd { margin: 0; font-variant-numeric: tabular-nums; }
.specs--hero { margin-top: 24px; max-width: 420px; }

/* ── tables ──────────────────────────────────────────────────────────────── */

/* The table and the scale both run wider than a phone. They scroll inside their panel, never
   the page, and the scroll is signposted: a fade on the right edge while there is more to see,
   and the first column of the table pinned so a row never loses its name. */
.tbl-wrap, .infographic__plot {
  /* overflow 2: the table scrolls inside the panel, it never widens the page */
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(43, 49, 55, 0)) left center / 44px 100% no-repeat,
    linear-gradient(to left, var(--panel) 30%, rgba(43, 49, 55, 0)) right center / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(127, 179, 191, 0.35), rgba(127, 179, 191, 0)) left center / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(127, 179, 191, 0.35), rgba(127, 179, 191, 0)) right center / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tbl-wrap:focus-visible, .infographic__plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbl tbody th, .tbl thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}
.tbl { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 16px; }
.tbl caption { text-align: left; color: var(--muted); font-size: var(--fs-small); padding-bottom: 14px; max-width: 70ch; }
.tbl th, .tbl td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--outline); }
.tbl thead th { color: var(--accent); border-bottom: 1px solid var(--outline-strong); white-space: nowrap; }
.tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl td { color: var(--muted); }
.tbl .n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl a { color: var(--accent); }

/* ── the infographic: a linear specification scale ───────────────────────── */

.infographic { margin: 0; min-width: 0; }

.infographic figcaption { color: var(--muted); font-size: var(--fs-small); padding-top: 14px; max-width: 70ch; }
.scale { width: 100%; min-width: 540px; height: auto; display: block; }
.scale__axis { stroke: var(--outline-strong); stroke-width: 1; }
.scale__track { stroke: var(--outline); stroke-width: 1; }
.scale__bar { stroke: var(--ink); stroke-width: 3; }
.scale__tick { stroke: var(--accent); stroke-width: 2; }
.scale__label, .scale__value, .scale__unit {
  font-family: var(--text);
  font-size: 16px;
  fill: var(--muted);
}
.scale__label { fill: var(--ink); }
.scale__value { fill: var(--accent); font-variant-numeric: tabular-nums; }
.scale__unit { font-size: 14px; letter-spacing: var(--track-label); text-transform: uppercase; }

/* ── designers ───────────────────────────────────────────────────────────── */

.dl-grid { display: grid; gap: 10px; }
.dl-grid__cell { padding-bottom: calc(var(--panel-pad) + 20px); }
.dl-grid__name {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.dl-grid__line { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.dl-grid__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
@media (min-width: 720px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1080px) { .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dl-grid--full { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── ready to ship ───────────────────────────────────────────────────────── */

.ready { display: grid; gap: 12px; }
.ready__row { padding-bottom: calc(var(--panel-pad) + 20px); }
.ready__grid { display: grid; gap: 20px; }
.ready__body { min-width: 0; }
.ready__name {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.ready__line { color: var(--muted); margin: 0; }
.ready__body .btn { margin-top: 20px; }
@media (min-width: 720px) { .ready__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; } }

/* ── request form ────────────────────────────────────────────────────────── */

.req { padding-top: var(--section); padding-bottom: var(--section); }
.req__grid { display: grid; gap: 32px; }
.req__intro { min-width: 0; }
.req__after { margin-top: 28px; padding: 20px; background: var(--panel); clip-path: var(--cut-sm); }
.req__after-t { display: block; color: var(--accent); margin-bottom: 8px; }
.req__after p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.req__form { min-width: 0; }
@media (min-width: 900px) { .req__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } }

.form { display: block; }
.form__grid { display: grid; gap: 12px; }
@media (min-width: 620px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field.wide { grid-column: 1 / -1; } }
.field { min-width: 0; }
.field__label {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field__no { color: var(--accent); font-variant-numeric: tabular-nums; }
.field__label i { color: var(--accent); font-style: normal; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--panel-2);
  color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--outline);
  clip-path: var(--cut-sm);
  font: 400 var(--fs-input)/1.4 var(--text);
}
textarea.field__input { min-height: 120px; resize: vertical; }
.field--area textarea.field__input { min-height: 150px; }
select.field__input { appearance: none; padding-right: 40px; }
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--accent); }
.field.is-bad .field__input { box-shadow: inset 0 0 0 2px var(--error); }
.field__err { display: none; color: var(--error); font-size: var(--fs-small); padding-top: 6px; }
.field.is-bad .field__err { display: block; }
.form__err { margin-bottom: 20px; padding: 16px 20px; background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--error); clip-path: var(--cut-sm); }
.form__err b { display: block; margin-bottom: 8px; }
.form__err ul { display: grid; gap: 4px; }
.form__err a { color: var(--error); }
.form__hint { color: var(--muted); font-size: var(--fs-small); margin: 16px 0 0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.form__foot .btn { flex: 1 1 200px; }
.ts { min-height: 65px; min-width: 300px; max-width: 100%; }
.form__status { margin: 16px 0 0; font-size: var(--fs-small); color: var(--muted); min-height: 1.4em; }
.form__status.is-ok { color: var(--ok); }
.form__status.is-bad { color: var(--error); }
.form__status a { color: var(--accent); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── footer colophon ─────────────────────────────────────────────────────── */

.ft { padding: var(--section) 0 40px; }
.ft__panel { padding-bottom: calc(var(--panel-pad) + 28px); }
.ft__word {
  font-family: var(--display);
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: clamp(30px, 8.5vw, 92px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 32px;
  color: var(--ink);
  overflow-wrap: break-word;
}
.ft__cols { display: grid; gap: 4px 48px; }
.ft__led { margin: 0; display: grid; gap: 2px; align-content: start; }
.ft__led .lead-row { min-height: 44px; }
.ft__led dt, .ft__led dd { margin: 0; }
.ft__ask { margin-top: 28px; }
.ft__legal {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-top: 24px;
  color: var(--muted);
  font-size: var(--fs-small);
}
.ft__legal a { text-decoration: none; border-bottom: 1px solid var(--outline); }
.ft__legal a:hover { color: var(--accent); border-color: var(--accent); }
@media (min-width: 720px) { .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__ask { margin-top: 32px; } }

/* ── motion: initial states live here, never in JS, or the content flashes ── */

.mo [data-wipe] { clip-path: inset(100% 0 0 0); }
.mo-off [data-wipe] { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  [data-wipe] { clip-path: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}