/* Huruhouse shop. Direction: "Contact Sheet" (DESIGN.md).
   The shop is laid out as Huruhouse's own 120-film (6x6) contact sheet: square flat-lays exposed edge
   to edge in black film strips, each frame edge-printed with real data (frame number = SKU, photo
   count), the film's own print along the strip borders (decorative), the newest drop looped in yellow
   grease pencil, pieces checked under a 2.5x loupe. 120 film has no sprocket holes, so there are none.
   Rules: film black covers no more than about half of any screen; grease-pencil yellow (<5%) only
   marks new-drop frames, the chosen filter, the loupe and the primary Buy button. Archivo variable,
   self-hosted. Frames (exposures) have square corners; only buttons and inputs keep the 3px radius. */

/* ---------- font (self-hosted Archivo, SIL OFL: static/fonts/Archivo-OFL.txt) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial resized to Archivo's metrics (measured: Archivo sets 98.8% of Arial's width; ascent .88,
   descent .21), so the swap moves nothing */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 98.8%;
  ascent-override: 89%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */
:root {
  /* colour roles */
  --paper: #FFFFFF;     /* page + every exposure: matches the white cut-outs */
  --film: #141312;      /* film-base black: strips, header strip, buy bar */
  --on-film: #F7F6F2;   /* titles and prices on the film edge, 17.2:1 */
  --edge: #BFB9AE;      /* edge print that carries data: frame numbers, counters, Sold, 9.5:1 */
  --print: #6E6A63;     /* the film's own decorative print (aria-hidden), 3.4:1: there, not loud */
  --ink: #141312;       /* text on paper */
  --muted: #5C5A55;     /* secondary text on paper, 6.9:1 */
  --pencil: #FFC414;    /* grease pencil. Never text on white */
  --rule: #DCD9D3;      /* table rules on paper */
  --expo: inset 0 0 0 1px rgba(20, 19, 18, .2), inset 0 0 18px rgba(20, 19, 18, .07); /* print edge of an exposure */

  --font: "Archivo", "Archivo Fallback", Arial, sans-serif;

  /* frame geometry */
  --fgap: 6px;          /* black between frames in a strip (and between the two rows of a phone strip) */
  --sgap: 28px;         /* white paper between strips, where the strip number is printed */
  --r: 3px;             /* buttons and inputs only; exposures are square-cornered */
  --cols: 2;
  --sheet: 0px;         /* white sheet margin (full-bleed strips on phones) */
  --gutter: 16px;
  --sec: 72px;
  --k: 8.62;            /* masthead fit: HURUHOUSE at wdth 125 / wght 900, -0.02em, is 8.50em wide */
  --k2: 4.75;           /* phones set it on two lines: HOUSE is 4.65em wide */

  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (min-width: 760px) { :root { --cols: 3; --sheet: 24px; --gutter: 20px; --sec: 96px; } }
/* sheet.strip_slots() mirrors these three layouts (2 / 3 / 4 across, switching at 760 and 1100px) */
@media (min-width: 1100px) { :root { --cols: 4; --sheet: 48px; --gutter: 24px; --sec: 120px; } }

/* ---------- page transitions: the frame you open grows into the product frame ---------- */
@view-transition { navigation: auto; }
.card__link:focus .card__media,
.page-product:not(:has(.card__link:focus)) .gallery__window { view-transition-name: frame-main; }
::view-transition-group(frame-main) { animation-duration: 300ms; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .card__link:focus .card__media, .page-product .gallery__window { view-transition-name: none; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
svg { display: block; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.film :focus-visible, .card :focus-visible, .facts__cell :focus-visible, .zoom :focus-visible { outline-color: var(--pencil); }
::selection { background: var(--pencil); color: var(--ink); }
.film { background: var(--film); color: var(--on-film); }

.skip-link {
  position: absolute; left: 8px; top: -80px; z-index: 60;
  background: var(--paper); color: var(--ink); padding: 12px 16px; border-radius: var(--r); font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* edge print that carries information: narrow Archivo caps, never monospace, 14px+. One type rule
   for everything printed like the film's edge (DESIGN.md: the edge-print caps decision) */
.edge, .proof__txt, .chip, .select select, .toggle__txt, .card__price--held, .foot__aux, .grid--sheet > .card::before {
  font-stretch: 62%; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.edge { font-size: 14px; line-height: 1; color: var(--muted); }
.film .edge, .card .edge, .facts__cell .edge, .zoom .edge { color: var(--edge); }
/* the film's own print along a strip's border, like the brand and frame numbers on 120 roll film.
   Decorative and aria-hidden: subtle on purpose (the data lives in .edge) */
.print {
  display: flex; align-items: center; gap: 0 22px; height: 20px; padding: 0 6px; overflow: hidden;
  contain: inline-size; /* as wide as its strip, never wider: the run of print is cut at the edge */
  white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none;
  font-stretch: 62%; font-weight: 600; font-size: 12px; letter-spacing: .16em; line-height: 1;
  text-transform: uppercase; color: var(--print);
}
.print__no { letter-spacing: .04em; }
.print__no--a::before {
  content: ""; display: inline-block; margin-right: 3px; vertical-align: .05em;
  border-style: solid; border-width: 3.5px 0 3.5px 5px; border-color: transparent transparent transparent currentColor;
}
/* [TK]: something Adi still has to supply. Rendered in development only (the tk() helper). */
.tk { font-stretch: 62%; font-weight: 650; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.film .tk, .card .tk { color: var(--edge); }

.hint-coarse { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-coarse { display: inline; } }

/* ---------- grease pencil (paths drawn per piece in services/sheet.py) ---------- */
.frame-no { position: relative; display: inline-block; }
.frame-no--drop { margin-left: 5px; }
.pencil-loop {
  position: absolute; left: -9px; top: -7px; width: calc(100% + 18px); height: calc(100% + 14px);
  overflow: visible; pointer-events: none;
}
.pencil-loop path, .pencil-tick path, .pencil-box path {
  fill: none; stroke: var(--pencil); stroke-linecap: round; stroke-linejoin: round;
}
.pencil-loop path { stroke-width: 3px; vector-effect: non-scaling-stroke; }
.pencil-tick { overflow: visible; }
.pencil-tick path { stroke-width: 3; }
/* the cross on sold frames is a white chinagraph mark, not yellow: yellow stays for what is new and
   what you can buy */
.pencil-cross { width: 22px; height: 22px; overflow: visible; }
.pencil-cross path { fill: none; stroke: var(--edge); stroke-width: 2.6; stroke-linecap: round; }
.pencil-mark { position: relative; display: inline-block; color: var(--on-film); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--r); border: 1.5px solid var(--ink);
  font-size: 17px; font-weight: 600; line-height: 1.1; text-decoration: none; text-align: center;
  cursor: pointer; background: var(--paper); color: var(--ink);
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--buy { background: var(--pencil); border-color: var(--pencil); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--ghost-film { background: transparent; border-color: var(--on-film); color: var(--on-film); }
.btn--held { border-style: dashed; border-color: var(--muted); color: var(--muted); cursor: not-allowed; }
.btn--held:active { transform: none; }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 15px; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--buy:hover { box-shadow: inset 0 0 0 2px var(--ink); }
  .btn--offer:hover, .btn--plain:hover { background: var(--ink); color: var(--paper); }
  .btn--ink:hover { background: var(--paper); color: var(--ink); }
  .btn--ghost-film:hover { background: var(--on-film); color: var(--film); }
  .btn--paper:hover { background: transparent; border-color: var(--on-film); color: var(--on-film); }
}

/* ---------- navigation (on film) ---------- */
.site-nav ul { display: flex; margin-right: -8px; }
.site-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 10px; color: var(--on-film); text-decoration: none; white-space: nowrap;
}
.site-nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; text-underline-offset: .4em;
}
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { text-decoration: underline; text-underline-offset: .4em; } }
@media (max-width: 599px) { .site-nav a { padding: 0 7px; } }

/* ---------- the Depop proof (masthead and beside Buy, nowhere else) ---------- */
.proof a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.proof__score { font-stretch: 125%; font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.proof__txt {
  font-size: 14px; line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
@media (hover: hover) and (pointer: fine) { .proof a:hover .proof__txt { text-decoration-color: var(--pencil); text-decoration-thickness: 2px; } }

/* ---------- masthead (home): the sheet's header strip ---------- */
.mast {
  margin: 0 var(--sheet); padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 32px; align-items: center;
  grid-template-areas: "tag tag nav" "word word word" "stock proof legend" "print print print";
}
@media (min-width: 760px) { .mast { margin-top: var(--sheet); } }
.mast__tag { grid-area: tag; display: flex; align-items: center; min-height: 48px; white-space: nowrap; }
.mast .site-nav { grid-area: nav; justify-self: end; }
.mast__word {
  grid-area: word;
  font-stretch: 125%; font-weight: 900;
  font-size: min(220px, calc((100vw - 2 * var(--sheet) - 2 * var(--gutter)) / var(--k)));
  line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  padding-top: .06em; overflow: hidden;
}
.mast__stock { grid-area: stock; min-width: 0; padding: 16px 0 12px; line-height: 1.4; }
.mast__proof { grid-area: proof; padding: 6px 0 2px; }
.mast .proof a { color: var(--on-film); }
.mast .proof__txt { text-decoration-color: var(--edge); }
.mast a { color: var(--on-film); text-decoration-color: var(--edge); }
.legend { grid-area: legend; display: inline-flex; align-items: center; gap: 0; white-space: nowrap; padding: 16px 0 12px; }
.legend .pencil-mark { margin: 0 12px 0 5px; }
.legend__long { margin-right: .4em; }
.mast__print { grid-area: print; margin: 0 -6px; }
@media (hover: hover) and (pointer: fine) { .mast a:hover { text-decoration-color: var(--pencil); } }
/* phones and small tablets: the proof goes up beside the nav (prominent, in the first screen); the
   data row keeps to Last listed (one line, cut with an ellipsis) and the drop */
@media (max-width: 899px) {
  .mast { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; grid-template-areas: "proof nav" "word word" "stock legend" "print print"; }
  .mast__tag { display: none; }
  .mast__proof { padding: 4px 0; min-width: 0; }
  .mast .proof a { gap: 8px; }
  .mast .proof__txt > span { display: block; white-space: nowrap; }
}
@media (max-width: 599px) {
  .mast__word { font-size: calc((100vw - 2 * var(--gutter)) / var(--k2)); line-height: .78; padding-top: .08em; }
  .mast__word span { display: block; }
  .mast .proof__score { font-size: 24px; }
  .mast__count, .legend__long { display: none; }
  .mast__stock { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 0 8px; }
  .legend { padding: 8px 0 8px; }
}
/* small phones (320-379px): no room beside the nav, so the proof gets its own line under the name */
@media (max-width: 379px) {
  .mast { grid-template-areas: "nav nav" "word word" "proof proof" "stock legend" "print print"; }
  .mast__proof { padding: 6px 0 0; }
}

/* ---------- page bar (every other page) ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  margin: 0 var(--sheet); padding: 0 var(--gutter);
}
@media (min-width: 760px) { .site-header { margin-top: var(--sheet); } }
.site-logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-stretch: 125%; font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase; text-decoration: none; color: var(--on-film); white-space: nowrap;
}
@media (max-width: 379px) { .site-logo { font-size: 20px; } .site-header .site-nav a { padding: 0 5px; } }

/* ---------- flashes and notices ---------- */
.flashes { margin: 12px var(--sheet) 0; padding: 0 var(--gutter); display: grid; gap: 8px; }
.flash, .notice { padding: 12px 16px; border: 1.5px solid var(--ink); border-radius: var(--r); }
.notice { margin: 12px var(--sheet) 0; border-style: dashed; }

/* ---------- filters (paper, sticky): printed like the film edge ----------
   Boxed narrow caps. The chosen size is inked in film black and looped in grease pencil (the way a
   frame is picked off a contact sheet); a chosen type and Hide sold get a grease-pencil tick on
   black. The state never rests on yellow alone: the black fill carries it (3:1+ against paper). */
.filters-bar {
  position: sticky; top: 0; z-index: 20; background: var(--paper);
  margin: 0 var(--sheet); padding: 12px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.filters__lbl { margin-right: 6px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.chip {
  position: relative; display: inline-grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 18px; letter-spacing: .08em; text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.chip__txt { position: relative; display: inline-block; min-width: 1.3em; text-align: center; line-height: 1; padding-left: .08em; }
.chip:active { transform: scale(.95); }
.chip[aria-current="true"] { background: var(--film); border-color: var(--film); color: var(--on-film); }
.chip .pencil-loop { left: -9px; top: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }
.filters { display: contents; }
.select { display: inline-flex; align-items: center; }
.select__box { position: relative; display: block; min-width: 0; flex: 1 1 auto; }
.select select {
  appearance: none; -webkit-appearance: none; display: block; min-height: 44px; max-width: 100%;
  padding: 0 36px 0 12px; border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6c1.7 1.5 3.4 3.3 5.1 5 1.6-1.8 3.2-3.5 4.9-5.1' fill='none' stroke='%23141312' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat;
  font-weight: 700; font-size: 18px;
}
.select option { background: var(--paper); color: var(--ink); text-transform: none; letter-spacing: 0; font-stretch: 100%; font-weight: 500; }
.select--on select {
  padding-left: 36px; background-color: var(--film); border-color: var(--film); color: var(--on-film);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6c1.7 1.5 3.4 3.3 5.1 5 1.6-1.8 3.2-3.5 4.9-5.1' fill='none' stroke='%23F7F6F2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.select .pencil-tick { position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.toggle {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 6px;
  cursor: pointer; white-space: nowrap;
}
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle__box { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink); background: var(--paper); }
.toggle__box .pencil-tick { width: 20px; height: 20px; opacity: 0; }
.toggle input:checked + .toggle__box { background: var(--film); border-color: var(--film); }
.toggle input:checked + .toggle__box .pencil-tick { opacity: 1; }
.toggle input:focus-visible + .toggle__box { outline: 2px solid var(--ink); outline-offset: 3px; }
.toggle__txt { font-weight: 700; font-size: 18px; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: var(--ink); color: var(--paper); }
  .select select:hover, .toggle:hover .toggle__box { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .select--on select:hover { box-shadow: inset 0 0 0 1.5px var(--edge); }
}
@media (min-width: 760px) { .filters-bar { padding-block: 16px; } }
/* phones: sizes and type share one row. A select is as wide as its longest option, so it takes the
   room the chips leave instead (a long type name is cut short; the count line below prints it whole) */
@media (max-width: 759px) {
  .filters-bar { padding-block: 6px; gap: 8px; }
  .filters__lbl { display: none; }
  .chip { min-width: 44px; padding: 0 6px; }
  .filters-bar .select { flex: 1 1 100px; min-width: 100px; }
  .select select { width: 100%; padding: 0 28px 0 10px; background-position: right 10px center; }
  .select--on select { padding-left: 32px; }
  .select .pencil-tick { left: 8px; }
}

/* the sheet's own header: what is on it, in which order, and Hide sold */
.sheet-head {
  margin: 0 var(--sheet); padding: 0 var(--gutter) 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
}
.sheet-head .edge { line-height: 1.35; }
.sheet-head__count { grid-column: 1; grid-row: 1; }
.sheet-head__hint { grid-column: 1; grid-row: 2; }
.sheet-head .toggle { grid-column: 2; grid-row: 1 / span 2; margin-right: -2px; }
.sheet-head a { color: var(--ink); margin-left: 4px; display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
@media (max-width: 759px) {
  .sheet-head { padding-bottom: 2px; }
  .sheet-head .toggle { grid-row: 1; }
  .sheet-head__hint { display: none; } /* "Check the marks yourself" shows the loupe instead */
}
@media (min-width: 760px) { .sheet-head { padding-top: 4px; padding-bottom: 16px; } }

/* ---------- the sheet: rows of frames read as film strips ---------- */
.grid {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--fgap); row-gap: var(--sgap);
  padding: 0 var(--fgap); margin: 0 var(--sheet);
}
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--film); color: var(--on-film);
  box-shadow: calc(-1 * var(--fgap)) 0 0 var(--film), var(--fgap) 0 0 var(--film);
}
.card__link {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
  color: var(--on-film); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* focus: a yellow ring with an ink ring inside it, so it shows on the film and on the white exposure */
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 3px solid var(--pencil); box-shadow: inset 0 0 0 2px var(--ink);
}
.card__edge { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 6px; }
.card__count-b { display: none; }
.card__state { position: relative; white-space: nowrap; }
.card__state--sold { padding-right: 28px; }
.card__state--sold .pencil-cross { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* the exposure: the photo fills its square edge to edge, square corners, a faint print edge */
.card__media { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.card__media::after, .gallery__frame::after, .look__win::after, .facts__expo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: var(--expo);
}
.card__track { display: flex; width: 100%; height: 100%; }
.card__photo { flex: 0 0 100%; width: 100%; height: 100%; }
.card__photo img, .product__image img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.card__placeholder, .product__placeholder { display: block; width: 100%; height: 100%; background: var(--rule); }
.card__dots { display: none; }
.card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px 6px 2px; }
.card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; line-height: 1.25; font-weight: 500; color: var(--on-film);
}
/* the size and price line sits at the foot of the frame, so a strip's prices line up */
.card__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: auto; padding-top: 8px; font-size: 16px; line-height: 1.2; font-weight: 600;
}
.card__size { font-stretch: 125%; font-weight: 800; margin-right: auto; }
.card__cond { color: var(--edge); font-size: 14px; font-weight: 600; white-space: nowrap; }
.card__price { white-space: nowrap; }
.card--sold .card__price { color: var(--edge); }
/* on hold: no price in full white, just until when (edge print) */
.card__price--held { color: var(--edge); font-size: 14px; }
.card__print { justify-content: space-between; margin-top: 6px; }
/* phones: titles run to three lines before the ellipsis */
@media (max-width: 759px) { .card__title { -webkit-line-clamp: 3; } }

/* phones: swipe through the set, the counter and the dots follow */
@media (hover: none), (pointer: coarse) {
  .card__track:has(.card__photo + .card__photo) {
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .card__track::-webkit-scrollbar { display: none; }
  .card__photo { scroll-snap-align: start; scroll-snap-stop: always; }
  .card__dots {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none;
  }
  .card__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(20, 19, 18, .28); }
  .card__dots span.is-on { background: var(--ink); }
}
/* desktop: hover winds the frame on to photo 2 */
@media (hover: hover) and (pointer: fine) {
  .card__track { transition: transform .2s var(--ease); }
  .card__link:is(:hover, :focus-visible) .card__track:not([data-n="1"]) { transform: translateX(-100%); }
  .card__link:is(:hover, :focus-visible) .card__count-a { display: none; }
  .card__link:is(:hover, :focus-visible) .card__count-b { display: inline; }
  .card__link:hover .card__title { text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: .2em; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .card__track { transition: none; }
  .card__link:is(:hover, :focus-visible) .card__track:not([data-n="1"]) .card__photo { animation: hh-fade .18s var(--ease); }
}
@keyframes hh-fade { from { opacity: .35; } to { opacity: 1; } }

/* ---------- film-sheet rhythm ----------
   sheet.strip_slots() marks where each strip starts at each layout (data-s2/-s3/-s4 = its number),
   printed in ink on the paper above it. Every strip is full; blank leader frames pad only the end of
   the sheet. On phones a strip is two rows of two: the film runs on between its rows (6px), and
   strips sit 28px apart. */
.grid--sheet > .card::before {
  position: absolute; bottom: 100%; margin-bottom: 8px;
  left: max(calc(-1 * var(--fgap)), calc(var(--gutter) - var(--fgap) - var(--sheet)));
  font-size: 14px; line-height: 1; color: var(--ink); white-space: pre; pointer-events: none;
}
.card--leader { display: none; }
.card--leader .card__print { margin-top: auto; }
.leader__win, .facts__expo--blank { display: grid; place-items: center; background: var(--film); box-shadow: inset 0 0 0 1px rgba(247, 246, 242, .16); }
.leader__win::after { display: none; }
.leader__note { color: var(--edge); }
@media (max-width: 759px) {
  .grid { row-gap: var(--fgap); }
  .grid > [data-m2] { margin-top: calc(var(--sgap) - var(--fgap)); }
  .grid > [data-t2] {
    box-shadow: calc(-1 * var(--fgap)) 0 0 var(--film), var(--fgap) 0 0 var(--film), 0 var(--fgap) 0 var(--film),
                calc(-1 * var(--fgap)) var(--fgap) 0 var(--film), var(--fgap) var(--fgap) 0 var(--film);
  }
  .grid--sheet > [data-s2]::before { content: "Huruhouse 120   Strip " attr(data-s2); }
  .card--leader.leader--2 { display: flex; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .grid--sheet > [data-s3]::before { content: "Huruhouse 120   Strip " attr(data-s3); }
  .grid--sheet > .card--leader.leader--3 { display: flex; }
}
@media (min-width: 1100px) {
  .grid--sheet > [data-s4]::before { content: "Huruhouse 120   Strip " attr(data-s4); }
  .card--leader.leader--4 { display: flex; }
}
/* "More in size" and the 404's frames: one strip of four from 760px up (strip_slots(..., (2, 4))),
   padded with leaders like the sheet; on phones, two rows of two */
@media (min-width: 760px) {
  .grid--more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--more > .card--leader.leader--4 { display: flex; }
}

/* load more + empty */
.grid__more {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 20px calc(var(--gutter) - var(--fgap)) 0;
}
.grid__more-link { min-width: 200px; }
.grid__more-link[aria-busy="true"] { cursor: progress; opacity: .7; }
.grid__more-count { color: var(--muted); }
.empty { margin: 0 var(--sheet); padding: 32px var(--gutter); display: grid; gap: 16px; justify-items: start; }
.empty p { font-size: 17px; max-width: 40ch; }

.more__head h2, .about__buy h2, .reviews__title, .policy h2 {
  font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.015em; font-stretch: 112%; text-wrap: balance;
}

/* ---------- check the marks yourself: the loupe on a real piece ---------- */
.look { margin: var(--sec) var(--sheet) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.look__frame { margin: 0; padding: 0 var(--fgap); }
.look__edge { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 6px; }
.look__win { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.look__photo, .look__photo img { width: 100%; height: 100%; object-fit: cover; }
.look__photo img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.look__print { margin-top: 2px; }
/* the lens at rest: a 2.5x view of the point under it (centre 50% / 38% of the photo). The image
   inside is 2.5 / 0.4 = 625% of the lens, shifted so that point sits in the middle */
.look__lens {
  position: absolute; left: 50%; top: 38%; z-index: 2; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden; pointer-events: none; background: var(--paper);
  border: 3px solid var(--pencil); box-shadow: 0 0 0 1px rgba(20, 19, 18, .55), 0 10px 24px rgba(20, 19, 18, .22);
  transition: opacity .15s var(--ease);
}
.look__lens-img { position: absolute; left: -262.5%; top: -187.5%; width: 625%; max-width: none; }
.look__lens-img img { width: 100%; max-width: none; height: auto; }
.is-looking .look__lens { opacity: 0; }
.look__copy { padding: 0 var(--gutter); display: grid; gap: 18px; justify-items: start; align-content: center; }
.look__title { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.015em; font-stretch: 112%; text-wrap: balance; }
.look__lede { font-size: 17px; max-width: 46ch; }
.look__cond { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border: 1.5px solid var(--ink); border-radius: var(--r); width: 100%; max-width: 46ch; }
.look__grade { font-size: 17px; }
.look__cond .inspect { margin: 2px 0 -6px -2px; }
.grades { width: 100%; max-width: 46ch; border-collapse: collapse; font-size: 15px; }
.grades caption { text-align: left; padding-bottom: 4px; }
.grades th, .grades td { padding: 7px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 500; }
.grades th { color: var(--muted); font-weight: 500; width: 45%; }
@media (max-width: 759px) { .look__frame { margin-inline: 0; } }
@media (min-width: 760px) {
  .look { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; padding-inline: 0; }
  .look__copy { padding: 0 var(--gutter) 0 0; }
}
@media (min-width: 1100px) {
  .look { grid-template-columns: 452px minmax(0, 1fr); gap: 0 64px; }
  .look__title { font-size: 56px; }
  /* the note you check against, and the scale it is graded on, side by side */
  .look__copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .look__title, .look__lede { grid-column: 1 / -1; }
  .look__cond, .grades { max-width: none; }
}

/* ---------- reviews (REVIEW_QUOTES; hidden while empty) ---------- */
.reviews { margin: var(--sec) var(--sheet) 0; padding: 0 var(--gutter); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 24px; }
.reviews__head a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.reviews__list { display: grid; gap: 28px; }
.reviews__item { border-top: 1.5px solid var(--ink); padding-top: 16px; display: grid; gap: 12px; align-content: start; }
.reviews__quote p { font-size: 20px; line-height: 1.35; font-weight: 500; max-width: 38ch; text-wrap: pretty; }
@media (min-width: 760px) { .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* ---------- sell or trade: one full-width strip, its title in the edge print ---------- */
.sell { margin: var(--sec) var(--sheet) 0; padding: 0 var(--fgap); }
.sell__edge { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 6px; }
.sell__title { font: inherit; color: var(--on-film); letter-spacing: .06em; }
.sell__row { display: grid; gap: var(--fgap); }
.shoot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fgap); }
.shoot__win { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--paper); }
.shoot__win svg { width: 54%; height: auto; }
.shoot__line { fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.shoot__pencil { fill: none; stroke: var(--pencil); stroke-width: 4; }
.shoot__handle { stroke: var(--muted); stroke-width: 5; stroke-linecap: round; }
.shoot__dot { fill: var(--muted); }
.film .shoot__no { position: absolute; left: 8px; bottom: 8px; color: var(--muted); }
/* the how-to sits on the film itself, beside the four frames to send */
.sell__copy { display: grid; align-content: center; gap: 18px; padding: 18px 6px 10px; color: var(--on-film); }
.sell__lede { font-size: 17px; max-width: 52ch; }
.sell__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sell__print { margin-top: 4px; }
@media (max-width: 759px) { .sell { margin-inline: 0; } .film .shoot__no { left: 6px; bottom: 6px; } }
@media (min-width: 1100px) {
  .sell__row { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); align-items: center; }
  .sell__copy { padding: 6px 18px 6px 24px; gap: 16px; }
  .sell__lede { font-size: 17px; }
}

/* ---------- footer: the end of the roll, one slim strip ---------- */
.site-footer { margin-top: var(--sec); padding-bottom: calc(max(24px, var(--sheet)) + env(safe-area-inset-bottom)); }
.foot { margin: 0 var(--sheet); padding: 0 var(--gutter); }
.foot__print { margin: 0 -6px; }
.foot__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 24px; padding: 14px 0 18px; }
/* Adi's sign-off, as he writes it under every listing: the words, then a small candle */
.foot__sign { grid-column: 1 / -1; font-size: 18px; font-weight: 650; line-height: 1.25; }
.foot__sign .candle { display: inline-block; width: .62em; height: .95em; margin-left: .3em; vertical-align: -.08em; }
.candle__flame { fill: var(--pencil); }
.candle__line { fill: none; stroke: var(--on-film); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.foot__lbl { margin-bottom: 4px; }
.foot__links { display: flex; flex-wrap: wrap; column-gap: 18px; }
.foot__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--on-film); }
.foot__aux { font-size: 14px; color: var(--edge); white-space: nowrap; }
.foot__ship { grid-column: 1 / -1; }
.foot__ship dl { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot__ship dl > div { display: flex; align-items: baseline; gap: 8px; min-height: 30px; }
.foot__ship dt { color: var(--edge); }
.foot__ship dd { font-weight: 650; }
.foot__ship a { color: var(--on-film); }
.foot__note { color: var(--edge); font-size: 14px; line-height: 1.35; }
.site-footer__small { margin: 16px var(--sheet) 0; padding: 0 var(--gutter); color: var(--muted); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--pencil); text-underline-offset: .3em; }
}
@media (min-width: 1100px) {
  .foot__row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 40px; align-items: start; padding: 18px 0 20px; }
  .foot__sign { grid-column: auto; align-self: center; font-size: 22px; max-width: 16ch; }
  .foot__ship { grid-column: auto; }
}

/* ---------- loupe (live) ---------- */
.loupe {
  position: fixed; left: 0; top: 0; z-index: 50; width: var(--loupe, 184px); height: var(--loupe, 184px);
  border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0;
  background: var(--paper); border: 3px solid var(--pencil);
  box-shadow: 0 0 0 1px rgba(20, 19, 18, .55), 0 12px 30px rgba(20, 19, 18, .28);
  transition: opacity .12s var(--ease); will-change: transform;
}
.loupe.is-on { opacity: 1; }
.loupe img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; }
@media (pointer: coarse) { .loupe { --loupe: 148px; } }
html.is-looking { -webkit-user-select: none; user-select: none; }

/* ---------- product page ---------- */
.product__top { display: grid; margin: 0 var(--sheet); }
.gallery { padding: 0 var(--fgap) 4px; min-width: 0; }
.gallery__edge { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 6px; }
.gallery__state { position: relative; white-space: nowrap; }
.gallery__state .pencil-cross { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); }
.gallery__state:has(.pencil-cross) { margin-right: 28px; }
.gallery__count { margin-left: auto; }
.gallery__frame { position: relative; }
.gallery__window {
  position: relative; aspect-ratio: 1; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; background: var(--paper); cursor: zoom-in;
}
.gallery__window::-webkit-scrollbar { display: none; }
.gallery__window--empty { cursor: default; }
.gallery__track { display: flex; height: 100%; }
.product__image { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
/* every photo has a thumbnail in view: up to 7 share one row, 8 to 10 wrap to two rows */
.thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 88px); justify-content: start;
  gap: 10px 8px; padding: 12px 0 2px;
}
.thumbs--rows { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 88px)); }
.thumbs--rows[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 88px)); }
.thumbs li { min-width: 0; }
.thumbs__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left; color: var(--edge);
}
.thumbs__img img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--paper); }
.thumbs__no { display: block; padding: 7px 0 2px; }
.thumbs__btn[aria-current="true"] .thumbs__no { color: var(--on-film); }
.pencil-box { position: absolute; left: -5px; top: -5px; width: calc(100% + 10px); aspect-ratio: 1; opacity: 0; pointer-events: none; overflow: visible; }
.pencil-box path { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.thumbs__btn[aria-current="true"] .pencil-box { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .thumbs__btn:hover .thumbs__no { color: var(--on-film); text-decoration: underline; } }
.gallery__hint { padding: 10px 2px 2px; color: var(--edge); font-size: 14px; }
.gallery__print { margin: 6px -6px 0; }

.product__info { padding: 22px var(--gutter) 8px; display: grid; gap: 28px; align-content: start; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.product__title { margin-top: 10px; font-size: 26px; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
/* phones: size, price and grade straight under the title */
.product__key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 10px; font-size: 20px; font-weight: 700; line-height: 1.1; }
.product__key-size { font-stretch: 125%; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.product__key-cond { color: var(--muted); font-size: 16px; font-weight: 600; }
.product__prov { margin-top: 10px; color: var(--muted); font-size: 15px; }
.fit__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; }
@media (min-width: 400px) { .fit__row { gap: 24px; } }
.fit__size { display: grid; gap: 10px; }
.lbl { font-size: 14px; font-weight: 650; color: var(--muted); }
/* the size, printed as big as a phone allows: one letter, two letters (XS, XL), or words */
.fit__size b { font-stretch: 125%; font-weight: 900; font-size: clamp(104px, 30vw, 184px); line-height: .74; letter-spacing: -.04em; }
.fit__size--wide b { font-size: clamp(76px, 20vw, 136px); }
.fit__size--long b { font-size: clamp(48px, 14vw, 88px); line-height: .85; }
.meas { width: 100%; border-collapse: collapse; font-size: 17px; }
.meas caption { text-align: left; padding-bottom: 6px; }
.meas th, .meas td { padding: 9px 0; border-bottom: 1px solid var(--rule); font-weight: 500; text-align: left; }
.meas th[scope="row"] { white-space: nowrap; padding-right: 8px; }
.meas thead th { font-size: 14px; font-weight: 650; color: var(--muted); padding-top: 0; }
.meas td, .meas thead th:not(:first-child) { text-align: right; width: 2.8em; }
.meas td { font-weight: 650; }
.how { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.measure-tee { width: 72px; height: auto; }
.measure-tee path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.measure-tee .measure-tee__length { stroke: var(--muted); stroke-dasharray: 4 4; }
.cond { display: grid; gap: 10px; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--r); }
.cond__grade, .product__notes { font-size: 17px; }
.cond strong { font-weight: 700; }
.inspect {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px;
  margin: -4px 0 -8px -2px; padding: 0 4px; border: 0; background: none; font-size: 15px; font-weight: 650;
  text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 3px; text-underline-offset: .3em; cursor: pointer;
}
.icon-loupe { width: 20px; height: 20px; flex: none; }
.icon-loupe__rim { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.icon-loupe__ring { fill: none; stroke: var(--pencil); stroke-width: 2.6; }
.icon-loupe__handle { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }

.buy-box { display: grid; gap: 14px; }
.buy-box__price { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.buy-box__actions { display: grid; gap: 10px; align-items: start; }
.buy-box__actions > .btn, .offer > summary { width: 100%; }
.buy-box__actions > :only-child { grid-column: 1 / -1; }
.buy-box__note, .buy-box__ship { font-size: 14px; color: var(--muted); }
.buy-box__ship a { color: var(--ink); }
.buy-box__note--setup { color: var(--ink); border-left: 3px solid var(--pencil); padding-left: 10px; }
.buy-box__state { font-size: 15px; }
.buy-box__proof { margin: -6px 0 -8px; }
.buy-box__proof a { color: var(--ink); }
.buy-box__proof .proof__score { font-size: 24px; }
.buy-box__proof .proof__txt { text-decoration-color: var(--muted); }
.offer[open] > summary { background: var(--ink); color: var(--paper); }
.offer__form { display: grid; gap: 8px; padding-top: 14px; }
.offer__label { font-size: 14px; font-weight: 650; color: var(--muted); }
.offer__row { display: flex; gap: 8px; }
.offer__input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font-size: 17px; font-weight: 600;
  border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--paper);
}
.offer__note { font-size: 14px; color: var(--muted); }
.offer__input[aria-invalid="true"] { border-width: 2px; box-shadow: inset 4px 0 0 var(--ink); }
.offer__error { font-size: 15px; font-weight: 600; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--ink); }
/* on hold: the disabled Buy across the top, then next in line and the same size */
.buy-box__actions--held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.buy-box__actions--held > .btn--held { grid-column: 1 / -1; }
.buy-box__actions--held > .btn { padding-inline: 12px; }
@media (max-width: 479px) { .buy-box__long { display: none; } }

.after { margin: 0 var(--sheet); padding: 44px var(--gutter) 0; display: grid; gap: 32px; align-items: start; }
.after h2 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.steps { counter-reset: s; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.steps li::before { counter-increment: s; content: counter(s); font-stretch: 125%; font-weight: 800; font-size: 17px; line-height: 1.3; }
.more { margin-top: var(--sec); }
.more__head {
  margin: 0 var(--sheet); padding: 0 var(--gutter) 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
}
.more__head a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); transition: transform .2s var(--ease);
}
.buybar.is-away { transform: translateY(110%); }
.buybar__meta { display: flex; align-items: baseline; gap: 14px; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; }
.buybar__meta span { overflow: hidden; text-overflow: ellipsis; }
.buybar__meta b { font-stretch: 125%; font-weight: 900; font-size: 24px; line-height: 1; }
.buybar .btn { min-height: 48px; padding: 0 20px; font-size: 16px; flex: none; }
.page-product { padding-bottom: 76px; }
/* phones and tablets: the title, then size and price, straight under the gallery (inside the first
   844px screen, above the buy bar, even for a 4-line title); the crumbs drop below them */
@media (max-width: 959px) {
  .product__head { display: flex; flex-direction: column; }
  .product__head .crumbs { order: 3; margin-top: 18px; }
  .product__title { margin-top: 0; }
}
@media (max-width: 599px) {
  .product__info { padding-top: 16px; }
  .product__title { font-size: 24px; }
  .thumbs { grid-auto-columns: minmax(0, 56px); }
  .thumbs--rows { grid-template-columns: repeat(5, minmax(0, 56px)); }
  .thumbs--rows[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 56px)); }
  .gallery__print { display: none; } /* the frames on the sheet carry the print; here the room goes to the title */
}
@media (min-width: 600px) { .product__title { font-size: 30px; } }
@media (min-width: 960px) {
  .product__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .gallery { position: sticky; top: 0; padding: 0 24px 8px; }
  .gallery__frame, .gallery__edge, .thumbs, .gallery__hint { width: min(100%, calc(100svh - 320px)); margin-inline: auto; }
  .gallery__print { width: min(100%, calc(100svh - 308px)); margin: 10px auto 0; }
  .product__info { padding: 36px 0 0 48px; gap: 32px; }
  .product__title { margin-top: 12px; }
  .product__key { display: none; } /* desktop: price and Buy follow the title, the big size follows them */
  /* no sticky bar on desktop, so price and Buy come straight after the title (in the first screen
     of a 1366x768 laptop); size, measurements and condition follow. Phones keep the reading order:
     their buy bar is always there. */
  .product__head { order: 0; }
  .buy-box { order: 1; }
  .fit { order: 2; }
  .cond { order: 3; }
  .fit__size:not(.fit__size--wide, .fit__size--long) b { font-size: 120px; }
  .fit__size--wide b { font-size: 104px; }
  .buy-box__actions { grid-template-columns: 3fr 2fr; }
  .buy-box__actions--held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .offer[open] { grid-column: 1 / -1; }
  .buybar { display: none; }
  .page-product { padding-bottom: 0; }
  /* the buying detail runs full width under both columns, its three steps side by side */
  .after { padding: 80px var(--gutter) 0; }
  .after__block { border-top: 1.5px solid var(--ink); padding-top: 18px; }
  .after__block--steps .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .after__block--steps .steps li { max-width: 40ch; }
}
@media (min-width: 1100px) { .product__info { padding: 44px 24px 0 56px; } }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } * { scroll-behavior: auto !important; } }

/* ---------- zoom view (Inspect, keyboard and touch) ---------- */
.zoom {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--on-film); overflow: hidden;
}
.zoom[open] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.zoom::backdrop { background: rgba(20, 19, 18, .92); }
.zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 640px); }
.zoom__close {
  min-height: 44px; padding: 0 16px; border: 1.5px solid var(--on-film); border-radius: var(--r);
  background: transparent; color: var(--on-film); cursor: pointer; font-size: 15px;
}
.zoom__lens {
  --d: min(88vw, calc(100svh - 220px), 512px);
  width: var(--d); height: var(--d); border-radius: 50%; overflow: auto; scrollbar-width: none;
  border: 4px solid var(--pencil); background: var(--paper); overscroll-behavior: contain; cursor: grab;
  box-shadow: 0 0 0 1px rgba(20, 19, 18, .55), 0 18px 40px rgba(0, 0, 0, .4);
}
.zoom__lens::-webkit-scrollbar { display: none; }
.zoom__lens.is-dragging { cursor: grabbing; }
.zoom__lens img { display: block; width: calc(var(--d) * 2.5); max-width: none; height: auto; -webkit-user-drag: none; user-select: none; }
.zoom__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.zoom__nav .btn { min-height: 44px; font-size: 15px; }
.zoom__hint { color: var(--edge); font-size: 14px; }

/* ---------- page headers (sold, about, errors) ---------- */
.page-header { margin: 0 var(--sheet); padding: 40px var(--gutter) 28px; display: grid; gap: 16px; justify-items: start; }
.page-title {
  font-stretch: 125%; font-weight: 900; font-size: clamp(72px, 22vw, 220px); line-height: .8;
  letter-spacing: -.03em; text-transform: uppercase;
}
.page-title--long {
  font-size: clamp(38px, 9.4vw, 96px); line-height: .92; letter-spacing: -.025em; text-transform: none;
  font-stretch: 112%; font-weight: 800; max-width: 15ch; text-wrap: balance;
}
.page-intro { font-size: 17px; max-width: 52ch; }
.page-intro a { font-weight: 600; }
@media (min-width: 760px) { .page-header { padding-top: 64px; } }

/* ---------- about: four fact frames, each a whole exposure of a real piece ---------- */
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fgap); row-gap: var(--sgap);
  padding: 0 var(--fgap); margin: 0 var(--sheet);
}
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts__cell {
  min-width: 0; display: flex; flex-direction: column; background: var(--film); color: var(--on-film);
  box-shadow: calc(-1 * var(--fgap)) 0 0 var(--film), var(--fgap) 0 0 var(--film);
}
.facts__edge { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 6px; }
.facts__expo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.facts__photo, .facts__photo img { width: 100%; height: 100%; object-fit: cover; }
.facts__expo:focus-visible { outline-offset: -3px; }
.facts__expo.facts__expo--blank { background: var(--film); }
.facts__expo--blank::after { display: none; }
.facts__body { flex: 1 1 auto; display: grid; align-content: start; gap: 8px; padding: 12px 6px 4px; }
.facts__body b { font-stretch: 125%; font-weight: 900; font-size: clamp(30px, 7.5vw, 52px); line-height: .9; letter-spacing: -.03em; }
.facts__body span { font-size: 15px; line-height: 1.35; max-width: 34ch; }
.facts__body a { color: var(--on-film); text-decoration-color: var(--edge); }
.facts__print { margin-top: 6px; }
@media (min-width: 1100px) { .facts__body { padding: 14px 8px 6px; gap: 10px; } .facts__body span { font-size: 16px; } }
.about__buy { margin: var(--sec) var(--sheet) 0; padding: 0 var(--gutter); display: grid; gap: 20px; max-width: calc(60ch + 2 * var(--gutter)); }
.about__buy .steps { font-size: 17px; }
.about__returns { color: var(--muted); }
@media (min-width: 1100px) {
  /* the heading beside the steps, so the section spans the sheet instead of a narrow left column */
  .about__buy { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .about__buy h2 { grid-row: 1 / span 2; font-size: 56px; }
  .about__buy .steps, .about__returns { grid-column: 2; max-width: 62ch; }
}

/* ---------- returns and cancellations (/returns): one readable column of policy ---------- */
.policy { margin: 8px var(--sheet) var(--sec); padding: 0 var(--gutter); display: grid; gap: 40px; max-width: calc(62ch + 2 * var(--gutter)); }
.policy section { display: grid; gap: 14px; }
.policy p, .policy li { font-size: 17px; line-height: 1.55; }
.policy ol { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; list-style: decimal; }
.policy li::marker { font-weight: 700; }
.policy a { font-weight: 600; text-underline-offset: .2em; }
.policy__updated { color: var(--muted); }

/* ---------- errors: a blank frame, crossed out ---------- */
.error-page {
  margin: 0 var(--sheet); padding: 32px var(--gutter) 0; display: grid; gap: 32px; align-items: center;
}
@media (min-width: 760px) { .error-page { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; padding-top: 56px; } }
.blank { padding: 0 var(--fgap); width: min(62%, 420px); }
@media (min-width: 760px) { .blank { width: min(100%, 420px); } }
.blank__edge { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 6px; }
.blank__win { display: grid; place-items: center; aspect-ratio: 1; background: var(--paper); box-shadow: var(--expo); }
.blank__win .pencil-cross { width: 46%; height: auto; }
.blank__win .pencil-cross path { stroke-width: 2; stroke: var(--muted); }
.blank__print { margin: 4px -6px 0; }
.error-page__copy { display: grid; gap: 16px; justify-items: start; }
.error-page .page-title { font-size: clamp(56px, 14vw, 150px); }
.error-page .page-title--long { font-size: clamp(38px, 8vw, 88px); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }

/* status marks kept for older markup */
.badge { display: inline-block; }