/* Stimpill — the timber yard's stock mark.
 *
 * Planks in a yard carry their facts stamped on the end: species, size, lot,
 * the maker's mark. This page stamps SJ's one promise the same way, "Smíðað
 * eftir máli", in the blue that is painted on their own building, and every
 * product after it is a lot in the yard: its name stamped, what can be chosen
 * marked against it, and the work that shows it pinned alongside.
 *
 * The flair is the yard's own: real rubber-stamp ink (a rough edge, the odd
 * speck where the ink did not take), stamps that press down as you reach them,
 * boards with sawn ends that slide onto the stack, blue bands cut at an angle
 * like board ends, the phone on a lumber tag with a punched hole, prints of the
 * work pinned over each other, and the enquiry on an order ticket.
 *
 * The phone is the most findable thing without being the biggest: header, tag,
 * a call bar on a phone screen. The biggest thing is the promise, so this does
 * not become the Baugsbót page, whose whole idea is a phone number in a field
 * of colour.
 *
 * Industrial lettering stays on the stamped marks only. Everything a person
 * reads is sentence case in Schibsted Grotesk; no monospace anywhere. "Still
 * feels to roboty" was the verdict on uppercase technical labels everywhere.
 */

@font-face { font-family: 'Big Shoulders Display'; src: url('fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900; font-display: swap; }

:root {
  /* Off their building: cladding white, and the blue of the lettering on it
     (#3868a0, measured off Hjalti's photo of the sign). */
  --ground: #f3f5f7;
  --paper: #ffffff;
  --print: #ffffff;
  --ink: #0b1b2e;
  --muted: #41536a;
  --stamp: #3868a0;
  --stamp-deep: #1d4f8c;
  --yard: #163e70;
  --board: #1d4f8c;
  --on-blue: #ffffff;
  --on-blue-muted: #d6e3f3;
  --rule: #c9d3df;
  --rule-strong: #74869c;
  --bad: #a3301a;
  --shade: 11 27 46;
  --tag-bg: #ffffff;
  --tag-ink: #1d4f8c;
  --tag-quiet: #41536a;
  --print-ink: #22344a;
  --nail: radial-gradient(circle at 35% 30%, #f6f8fa 0 18%, #a7b2be 45%, #55616e 100%);

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(18px, 5vw, 64px);
  --cut: clamp(18px, 3vw, 46px);   /* how far a sawn end runs off square */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --press: cubic-bezier(0.3, 1.45, 0.5, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0a1626;
    --paper: #0f2038;
    --print: #dfe7f1;
    --ink: #e8eef5;
    --muted: #9fb0c4;
    --stamp: #82b0ea;
    --stamp-deep: #82b0ea;
    --yard: #0f2744;
    --board: #173d69;
    --on-blue: #e8eef5;
    --on-blue-muted: #b9cce3;
    --rule: #1f3552;
    --rule-strong: #5f7b9e;
    --bad: #ff9a80;
    --shade: 0 0 0;
    --tag-bg: #e8eef5;
    --tag-ink: #0f2744;
    --tag-quiet: #3a5578;
    --print-ink: #1b2a3d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--stamp) var(--ground); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--text); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--stamp);
}
::selection { background: var(--stamp); color: var(--ground); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; }
p, dl, dd, figure { margin: 0; }
section[id] { scroll-margin-top: 72px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stamps: ink, tilt, and the press ---------- */
.inked { display: inline-block; filter: url(#ink); }
.claim-ink, .lot-name .inked, .offcut-stamp .inked {
  padding: 0.12em 0.2em 0.08em; border: 0.06em double currentColor;
  transform: rotate(var(--tilt, -2deg)); transform-origin: left center;
}
.reveal-ready [data-reveal="stamp"]:not(.is-in) .inked { opacity: 0; }
.reveal-ready [data-reveal="stamp"].is-in .inked { animation: press 560ms var(--press) both; }
@keyframes press {
  from { opacity: 0; transform: rotate(calc(var(--tilt, -2deg) - 6deg)) scale(1.32); }
  45%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(var(--tilt, -2deg)) scale(1); }
}

/* ---------- Header: stays put, so the number is always one tap away ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--gutter); background: var(--ground); border-bottom: 1px solid var(--rule);
}
.brand { display: block; color: var(--ink); text-decoration: none; line-height: 0; }
/* The mark is their door logo: SJ stacked over Tréverk, so it is sized by height. */
.logo { display: block; height: 100%; width: auto; fill: currentColor; }
.brand .logo { height: 44px; }
.bar-nav { display: none; gap: 28px; margin-left: auto; }
.bar-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--muted); padding: 6px 0; }
.bar-nav a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 980px) { .bar-nav { display: flex; } }
.bar-call {
  font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--stamp-deep);
  text-decoration: none; font-variant-numeric: tabular-nums; padding: 6px 2px;
}
.bar-call:hover { text-decoration: underline; }

/* ---------- The yard: one field of their blue, the promise stamped on it in white ink ---------- */
.yard { position: relative; overflow: clip; display: grid; background: var(--board); color: var(--on-blue);
  /* The blue runs edge to edge; what is on it stays in a frame, so a wide
     screen does not pull the promise and the door a room apart. */
  padding-inline: max(0px, calc((100% - 1640px) / 2)); }
@media (min-width: 900px) {
  .yard { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: calc(100svh - 61px); }
  /* In Fullt the first screen also holds the band of words. */
  [data-haus="fullt"] .yard { min-height: calc(100svh - 61px - 62px); }
}
@media (min-width: 1200px) {
  .yard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.yard-copy { position: relative; z-index: 2; align-self: center; padding: clamp(36px, 7vw, 96px) var(--gutter) clamp(44px, 6vw, 88px); }
.claim { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.9;
  font-size: clamp(4rem, 15vw, 7rem); color: var(--on-blue); }
@media (min-width: 900px) { .claim { font-size: clamp(5rem, 8.6vw, 9.5rem); white-space: nowrap; } }
/* The headline's own ink takes as it lands, and the copy round it takes the knock. */
.claim .inked { filter: url(#ink-hero); }
.reveal-ready .yard-copy:has(.claim.is-in) { animation: thud 440ms var(--ease) 230ms; }
@keyframes thud { 0%, 100% { transform: none; } 28% { transform: translateY(3px); } }
.claim-sub { margin-top: 30px; max-width: 34ch; font-size: clamp(18px, 1.7vw, 21px); color: var(--on-blue-muted); }

/* The phone on a lumber tag: clipped corners, nailed through its hole, swung
   into place when the page arrives, and it straightens when you reach for it. */
.tag {
  position: relative; display: inline-flex; align-items: baseline; gap: 14px; margin-top: 34px;
  padding: 16px 28px 14px 56px; min-height: 60px;
  background: var(--tag-bg); color: var(--tag-ink); text-decoration: none;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  transform: rotate(2.5deg); transform-origin: 26px 50%;
  transition: transform 420ms var(--press), background-color 220ms var(--ease);
}
.tag::before {
  content: ''; position: absolute; left: 21px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--nail); box-shadow: 0 0 0 3px var(--board), 0 2px 4px 3px rgb(var(--shade) / 0.3);
}
.reveal-ready .tag { animation: swing 1800ms ease-in-out 450ms backwards; }
@keyframes swing {
  0%   { transform: rotate(19deg); }
  24%  { transform: rotate(-9deg); }
  46%  { transform: rotate(5.5deg); }
  66%  { transform: rotate(-1.5deg); }
  84%  { transform: rotate(3.4deg); }
  100% { transform: rotate(2.5deg); }
}
.tag:hover { transform: rotate(-0.5deg); background: var(--on-blue-muted); }
.tag:active { transform: rotate(-0.5deg) translateY(1px); }
.tag-label { font-size: 16px; font-weight: 600; color: var(--tag-quiet); }
.tag-number { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3rem);
  line-height: 1; font-variant-numeric: tabular-nums; }
.tag-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; font-size: 15px; color: var(--on-blue-muted); }
.yard-alt { margin-top: 10px; font-size: 15px; color: var(--on-blue-muted); }
.yard-alt a { color: var(--on-blue); font-weight: 600; }

/* Stock marks stamped faintly all over the blue. */
.yard-ghosts { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ghost {
  position: absolute; white-space: nowrap; font-family: var(--display); font-weight: 800; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-blue); opacity: 0.075;
  padding: 0.12em 0.3em 0.06em; border: 0.06em double currentColor;
}
.g1 { top: 4%;  left: 34%; font-size: clamp(3rem, 7vw, 7rem);  transform: rotate(-7deg); }
.g2 { top: 46%; left: 38%; font-size: clamp(6rem, 14vw, 13rem); transform: rotate(5deg); }
.g3 { top: 74%; left: -1%; font-size: clamp(3rem, 6vw, 6rem);  transform: rotate(-4deg); }
.g4 { top: 1%;  left: 72%; font-size: clamp(1.6rem, 3vw, 3rem); transform: rotate(4deg); }
.g5 { top: 88%; left: 44%; font-size: clamp(1.8rem, 3.4vw, 3.4rem); transform: rotate(-2deg); }
.g6 { top: 30%; left: 86%; font-size: clamp(1.6rem, 2.8vw, 2.8rem); transform: rotate(-11deg); }
.g7 { top: 20%; left: -3%; font-size: clamp(2rem, 4vw, 4rem);  transform: rotate(8deg); }
.yard-copy, .yard-show { position: relative; z-index: 1; }
/* The stamped stock marks and the band of words belong to Fullt only. */
.yard-ghosts, .ticker { display: none; }
[data-haus="fullt"] .yard-ghosts, [data-haus="fullt"] .ticker { display: block; }

/* The three things SJ stands behind, stamped in a row under the tag. */
.yard-marks { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 30px 0 0; padding: 0; list-style: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1; color: var(--on-blue-muted); }
.yard-marks .inked { padding: 0.24em 0.42em 0.18em; border: 0.08em double currentColor; transform: rotate(-2deg); }
.yard-marks li:nth-child(2) .inked { transform: rotate(1.5deg); }
.yard-marks li:nth-child(3) .inked { transform: rotate(-1deg); }

/* Open or shut, worked out from the hours on the page. */
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--on-blue); }
.status:empty { display: none; }
.status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; }
.status[data-state="open"] { color: var(--on-blue); }
.status[data-state="open"]::before { background: currentColor; }

/* ---------- The header versions. SJ chose Færiband on 28 Oct; it is fixed on
   <html data-haus>. The other two versions' rules stay for the record. ---------- */
.show { display: none; }
:root:not([data-haus]) .show-rolegt, [data-haus="rolegt"] .show-rolegt,
[data-haus="faeriband"] .show-faeriband, [data-haus="fullt"] .show-fullt { display: block; }
.yard-show { align-self: center; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .yard-show { padding: clamp(40px, 5vw, 72px) var(--gutter); } }

/* A print: their photo on white, a nail at the top. */
.pin, .note { display: block; box-shadow: 0 22px 40px -20px rgb(var(--shade) / 0.7); }
.pin { background: var(--print); padding: 7px; }
.pin::before, .note::before, .work-grid figure::before, .offcut-print::before, .offcut-photo::before {
  content: ''; position: absolute; z-index: 1; top: -5px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--nail); box-shadow: 0 3px 5px rgb(var(--shade) / 0.45);
}
.pin img { width: 100%; aspect-ratio: 438 / 350; object-fit: cover; }

/* The words painted on their building, stamped in pale ink. */
.yard-sign { font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-blue-muted); }
.yard-sign .inked { padding: 0.18em 0.4em 0.12em; border: 0.09em double currentColor; transform: rotate(-3deg); }

/* 1 · Rólegt: five prints in a loose cascade on plain blue. Busier than three,
   still nothing but their work: no stamps behind, no moving band. */
.cascade { position: relative; width: min(100%, 640px); margin-inline: auto; aspect-ratio: 1 / 0.98; }
.cascade .pin { position: absolute; }
.c-a { top: 3%; right: 2%; width: 58%; transform: rotate(2.5deg); z-index: 1; }
.c-d { top: 0; left: 2%; width: 36%; transform: rotate(-5deg); z-index: 2; }
.c-b { top: 35%; left: 0; width: 52%; transform: rotate(-3deg); z-index: 3; }
.c-c { top: 52%; right: 4%; width: 38%; transform: rotate(4deg); z-index: 4; }
.c-e { bottom: 11%; left: 34%; width: 30%; transform: rotate(-2deg); z-index: 5; }
.cascade .yard-sign { position: absolute; left: 2%; bottom: 0; z-index: 6; }
@media (max-width: 899px) { .cascade { width: min(100%, 360px); } }

/* 2 · Færiband: the promise across the top, their work running past below. */
@media (min-width: 900px) {
  [data-haus="faeriband"] .yard { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
  [data-haus="faeriband"] .yard-show { display: none; }
  [data-haus="faeriband"] .yard-copy { display: grid; grid-template-columns: auto minmax(0, 520px); gap: 0 clamp(40px, 6vw, 110px);
    align-items: center; justify-content: start; padding-bottom: clamp(28px, 4vw, 52px); }
  [data-haus="faeriband"] .yard-info > .claim-sub { margin-top: 0; }
}
.belt { overflow: hidden; padding: 6px 0 clamp(28px, 4vw, 48px); grid-column: 1 / -1; }
.belt-track { display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; padding: 12px 0 8px; animation: run 80s linear infinite; }
.belt:hover .belt-track { animation-play-state: paused; }
.belt-print { display: block; background: var(--print); padding: 7px; box-shadow: 0 18px 30px -18px rgb(var(--shade) / 0.7); }
.belt-print:nth-child(odd) { transform: rotate(-1.6deg); }
.belt-print:nth-child(even) { transform: rotate(1.4deg) translateY(6px); }
.belt-print img { height: clamp(120px, 15vw, 210px); width: auto; aspect-ratio: 438 / 350; object-fit: cover; }
/* Their Facebook photos keep their own shape: a door is tall, and cropping it
   to the old site's landscape prints would cut it off. */
.belt-print img.own { aspect-ratio: auto; }

/* 3 · Fullt: the busy pinboard. */
.pinboard { position: relative; width: min(100%, 300px); margin-inline: auto; }
.pinboard .pin-main { transform: rotate(-1.5deg); }
.pinboard .pin-1, .pinboard .pin-2, .pinboard .pin-3, .pinboard .pin-4, .pinboard .note { display: none; }
.pinboard .yard-sign { margin-top: 20px; text-align: right; }
.note { background: var(--print); color: var(--print-ink); padding: 14px 14px 12px; }
.note-h { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--tag-ink); }
.note-t { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; max-width: 15ch; }
.note-chips { display: grid; grid-template-columns: repeat(3, 26px); gap: 5px; margin-top: 10px; }
.note-chips i { display: block; aspect-ratio: 1; background: var(--sw); border: 1px solid rgb(0 0 0 / 0.2); }
.note-chips .c1 { --sw: #F7F9EF; } .note-chips .c2 { --sw: #CBD0CC; } .note-chips .c3 { --sw: #373F43; }
.note-chips .c4 { --sw: #703731; } .note-chips .c5 { --sw: #26392F; } .note-chips .c6 { --sw: #44322D; }
.note-icons { display: flex; gap: 8px; color: var(--tag-ink); }
.note-icons svg { width: 30px; height: 30px; }
@media (min-width: 900px) {
  .pinboard { width: 100%; max-width: 700px; aspect-ratio: 1 / 0.9; }
  .pinboard .pin, .pinboard .note { position: absolute; }
  .pinboard .pin-main { right: 0; top: 18%; width: 62%; z-index: 2; }
  .pinboard .pin-1, .pinboard .pin-2 { display: block; }
  .pinboard .pin-1 { left: 0; top: 4%; width: 34%; transform: rotate(-7deg); }
  .pinboard .pin-2 { left: 3%; top: 46%; width: 34%; transform: rotate(4deg); z-index: 3; }
  .pinboard .yard-sign { position: absolute; right: 2%; bottom: 0; margin: 0; }
}
@media (min-width: 1200px) {
  .pinboard .pin-3, .pinboard .pin-4, .pinboard .note { display: block; }
  .pinboard .pin-1 { left: 0; top: 2%; width: 30%; }
  .pinboard .pin-2 { left: 6%; top: 35%; width: 30%; }
  .pinboard .pin-3 { left: 0; top: 66%; width: 28%; transform: rotate(-3deg); }
  .pinboard .pin-4 { right: 3%; top: 63%; width: 29%; transform: rotate(6deg); z-index: 3; }
  .pinboard .note-lock { left: 36%; top: 0; transform: rotate(4deg); z-index: 4; }
  .pinboard .note-ral { left: 33%; top: 72%; transform: rotate(-5deg); z-index: 4; }
}

/* ---------- The band of words under the first screen ---------- */
.ticker { overflow: hidden; background: var(--yard); color: var(--on-blue); border-block: 1px solid rgb(255 255 255 / 0.12); }
.ticker-track { display: flex; align-items: center; gap: 0; width: max-content; padding-block: 12px;
  animation: run 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; white-space: nowrap; padding-inline: 18px;
  font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.ticker-track span::after { content: ''; width: 9px; height: 9px; margin-left: 36px; border-radius: 50%; background: var(--nail); }
.ticker-track .ticker-stamp { color: var(--on-blue-muted); }
.ticker-track .ticker-stamp { padding-block: 0; }
.ticker-stamp::before { content: none; }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- The enquiry: built from their own options, the ticket filling in beside it ---------- */
.order { padding: clamp(56px, 8vw, 104px) var(--gutter); }
.order-head { max-width: 760px; }
.order-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 0.92; }
.order-lead { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }
.order-lead a { color: var(--stamp-deep); font-weight: 600; }
.order-form { display: grid; gap: 36px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) {
  .order-form { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .ticket { position: sticky; top: 84px; }
}

/* Each question a row of the yard's tags; a chosen one is stamped blue. */
.builder { border-top: 2px solid var(--ink); }
.q { margin: 0; padding: 20px 0 22px; border: 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.q[data-for] { animation: unfold 420ms var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-8px); } }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 12px;
  font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1.1; color: var(--stamp-deep); }
.q > :not(legend) { clear: both; }
.q-note { margin-top: 10px; max-width: 52ch; font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px;
  border: 2px solid var(--stamp-deep); color: var(--stamp-deep); font-weight: 600;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 320ms var(--press);
}
.chips label:hover span { background: color-mix(in srgb, var(--stamp-deep) 12%, transparent); }
.chips input:checked + span { background: var(--board); border-color: var(--board); color: var(--on-blue); transform: rotate(-2deg); }
.chips input:focus-visible + span { outline: 3px solid var(--stamp); outline-offset: 3px; }

/* RAL swatches: approximate screen colours from Wikipedia's "List of RAL colours". */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; max-width: 560px; }
@media (min-width: 560px) { .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.sw { position: relative; cursor: pointer; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw span { display: grid; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted); }
.sw span::before {
  content: ''; aspect-ratio: 1; background: var(--sw); border: 1px solid rgb(var(--shade) / 0.3);
  transition: transform 320ms var(--press), box-shadow 200ms var(--ease);
}
.sw:hover span::before { transform: translateY(-2px); }
.sw input:checked + span { color: var(--stamp-deep); }
.sw input:checked + span::before { transform: rotate(-4deg); box-shadow: 0 0 0 3px var(--ground), 0 0 0 6px var(--board); }
.sw input:focus-visible + span::before { outline: 3px solid var(--stamp); outline-offset: 7px; }
.sw-9010 { --sw: #F7F9EF; } .sw-7035 { --sw: #CBD0CC; } .sw-7016 { --sw: #373F43; } .sw-9005 { --sw: #131516; }
.sw-8017 { --sw: #44322D; } .sw-3009 { --sw: #703731; } .sw-6009 { --sw: #26392F; } .sw-5011 { --sw: #232C3F; }
.field-inline { margin-top: 16px; max-width: 220px; }
.size { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; max-width: 380px; }
.size-x { padding-top: 40px; font-size: 20px; color: var(--muted); }

/* The ticket: perforated down the stub, its heading stamped on a blue plate. */
.ticket {
  position: relative; display: grid; gap: 18px; align-content: start;
  background: var(--paper); padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(26px, 3vw, 36px) clamp(46px, 5vw, 62px);
  box-shadow: 0 26px 50px -30px rgb(var(--shade) / 0.45);
}
.ticket::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: clamp(18px, 2vw, 26px); width: 10px;
  background: radial-gradient(circle, var(--ground) 3.5px, transparent 4px) center top / 10px 18px repeat-y;
}
.ticket-head { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; color: var(--on-blue); }
.ticket-head .inked { background: var(--board); padding: 0.14em 0.32em 0.08em; outline: 0.05em double var(--on-blue-muted); outline-offset: -0.16em; transform: rotate(-2deg); }
.ticket-lines { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ticket-lines:empty { display: none; }
.ticket-lines li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--rule-strong); }
.ticket-lines li.is-new { animation: line-in 520ms var(--press); }
@keyframes line-in { from { opacity: 0; transform: translateX(-12px) rotate(-1.5deg); } }
.line-key { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; color: var(--stamp-deep); }
.line-value { font-weight: 600; overflow-wrap: anywhere; }
.ticket-empty { padding: 12px 0; border-top: 2px solid var(--ink); font-size: 15px; color: var(--muted); }

.field-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; font: 400 17px/1.4 var(--text); color: var(--ink); background: var(--ground);
  border: 2px solid var(--rule-strong); border-radius: 0; padding: 12px 14px; min-height: 50px;
  transition: border-color 180ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { border-color: var(--stamp-deep); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--stamp); outline-offset: 0; border-color: var(--stamp-deep); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--bad); }
.hint { font-size: 14px; color: var(--muted); }
.err { font-size: 14px; font-weight: 600; color: var(--bad); }
.err:empty { display: none; }

.ask-send {
  justify-self: start; font: 800 24px/1 var(--display); letter-spacing: 0.01em; min-height: 56px; padding: 14px 30px; cursor: pointer;
  background: var(--board); color: var(--on-blue); border: 0;
  transition: background-color 200ms var(--ease), transform 120ms var(--ease);
}
.ask-send:hover { background: var(--stamp-deep); }
.ask-send:active { transform: translateY(1px); }
.ask-send:disabled { opacity: 0.6; cursor: progress; }
.form-status { font-weight: 600; padding: 12px 16px; border: 2px solid currentColor; }
.form-status[data-kind="good"] { color: var(--stamp-deep); }
.form-status[data-kind="bad"] { color: var(--bad); }

/* ---------- The stack: boards with sawn ends, loaded one after another ---------- */
.stack {
  display: grid; gap: 10px; background: var(--yard);
  padding: calc(clamp(44px, 7vw, 96px) + var(--cut)) var(--gutter) clamp(52px, 8vw, 104px);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.board {
  display: grid; grid-template-columns: clamp(190px, 24vw, 330px) minmax(0, 1fr); align-items: center; gap: 18px 28px;
  background: var(--board); color: var(--on-blue); padding: 24px clamp(48px, 5vw, 72px) 24px clamp(18px, 3vw, 34px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
  transition: opacity 600ms var(--ease), transform 760ms var(--ease);
}
/* Real stacks are uneven: each board stops at its own length and was sawn at its own angle. */
.board:nth-child(2) { width: 100%; }
.board:nth-child(3) { width: 90%; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 100%, 0 100%); transition-delay: 90ms; }
.board:nth-child(4) { width: 96%; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); transition-delay: 180ms; }
.reveal-ready .stack:not(.is-in) .board { opacity: 0; transform: translateX(-56px); }
.board-text { max-width: 40ch; font-size: clamp(17px, 1.7vw, 20px); }
.board-mark { font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem); color: var(--on-blue-muted); white-space: nowrap; }
.board-mark .inked { transform: rotate(-2deg); }
@media (max-width: 599px) {
  .board:nth-child(n) { width: 100%; }
  .board { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- A lot: one product, stamped, marked, and shown ---------- */
.lot { display: grid; gap: 40px; padding: clamp(64px, 10vw, 136px) var(--gutter); }
.lot + .lot { padding-top: 0; }
@media (min-width: 900px) {
  .lot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
  .lot-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .lot-flip .lot-copy { order: 2; }
}
.lot-name { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.9;
  font-size: clamp(3.4rem, 10vw, 5.75rem); color: var(--on-blue); }
.lot-name .inked { background: var(--board); padding: 0.16em 0.3em 0.24em; line-height: 0.95; outline: 0.05em double var(--on-blue-muted); outline-offset: -0.14em; border: 0; }
.lot-flip .lot-name .inked { --tilt: 1.5deg; }
.lot-lead { margin-top: 26px; max-width: 38ch; font-size: clamp(18px, 1.7vw, 21px); }

/* What can be chosen, marked against the lot. */
.marks { margin-top: 30px; border-top: 2px solid var(--ink); max-width: 620px; }
.mark { display: grid; gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .mark { grid-template-columns: 8.5rem 1fr; align-items: baseline; } }
.mark dt { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--stamp-deep); }
.mark dd { max-width: 48ch; }

.lot-ask {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 30px; padding: 10px 20px;
  border: 2px solid var(--stamp-deep); color: var(--stamp-deep); font-weight: 600; text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lot-ask:hover { background: var(--stamp-deep); color: var(--ground); }
.lot-ask-light { border-color: var(--on-blue); color: var(--on-blue); }
.lot-ask-light:hover { background: var(--on-blue); color: var(--yard); }

/* Prints of the work pinned over each other, the small one askew. */
.lot-side { display: grid; gap: 26px; }
.lot-photos { position: relative; padding-bottom: clamp(56px, 8vw, 104px); }
.lot-main { width: 86%; aspect-ratio: 751 / 600; object-fit: cover; box-shadow: 0 24px 48px -30px rgb(var(--shade) / 0.5); }
.lot-flip .lot-main { margin-left: auto; }
.lot-print {
  position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 438 / 350; object-fit: cover;
  border: 8px solid var(--print); box-shadow: 0 24px 44px -18px rgb(var(--shade) / 0.55);
  transform: rotate(3deg); transition: transform 520ms var(--press);
}
.lot-flip .lot-print { right: auto; left: 0; transform: rotate(-3deg); }
.lot-photos:hover .lot-print { transform: rotate(0.5deg) translateY(-8px); }

/* The lock that opens from a phone: the one option worth a board of its own. */
.lock { background: var(--board); color: var(--on-blue); padding: clamp(24px, 3vw, 36px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.lock-icons { display: flex; gap: 12px; margin-bottom: 16px; color: var(--on-blue-muted); }
.lock-icons svg { width: 40px; height: 40px; }
.lock-big { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 0.96; max-width: 14ch; }
.lock-text { margin-top: 12px; color: var(--on-blue-muted); max-width: 44ch; }

/* ---------- Offcuts: everything else the workshop machines ---------- */
.offcut { display: grid; gap: 40px; align-items: center; padding: clamp(56px, 8vw, 112px) var(--gutter); }
@media (min-width: 900px) { .offcut { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); } }
.offcut-h { margin: 0 0 16px; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 4rem); line-height: 0.95; }
.offcut-copy p { max-width: 42ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.offcut-stamp { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.06; color: var(--on-blue); }
/* This week's sawing from their Facebook, pinned under the words, and the
   Kópavogsskóli window beside the stamp that tells of it. */
.offcut-prints { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 22px); margin-top: 30px; }
.offcut-print { position: relative; margin: 0; width: min(46%, 240px); background: var(--print); padding: 7px;
  box-shadow: 0 18px 30px -18px rgb(var(--shade) / 0.6); transform: rotate(-2deg); }
.offcut-print + .offcut-print { transform: rotate(1.6deg) translateY(10px); }
.offcut-print img, .offcut-photo img { width: 100%; height: auto; }
.offcut-side { display: grid; gap: clamp(28px, 4vw, 44px); justify-items: start; }
.offcut-photo { position: relative; margin: 0; width: min(100%, 380px); background: var(--print); padding: 10px 10px 0;
  box-shadow: 0 22px 40px -22px rgb(var(--shade) / 0.6); transform: rotate(1.8deg); }
.offcut-photo figcaption { padding: 9px 2px 11px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--print-ink); }
.offcut-stamp .inked { --tilt: -2.5deg; background: var(--board); padding: 0.45em 0.6em 0.4em; max-width: 19ch;
  border: 0; outline: 0.05em double var(--on-blue-muted); outline-offset: -0.24em; }

/* ---------- The wall: their job photos pinned to a blue board, a nail each, none quite straight ---------- */
.work {
  background: var(--yard); color: var(--on-blue);
  padding: calc(clamp(64px, 9vw, 120px) + var(--cut)) var(--gutter) calc(clamp(72px, 10vw, 128px) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.work-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(30px, 4vw, 52px); }
.work-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 8vw, 5rem); line-height: 0.92; color: var(--on-blue); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button {
  font: 600 15px/1 var(--text); min-height: 44px; padding: 10px 18px; cursor: pointer;
  background: transparent; color: var(--on-blue); border: 2px solid var(--on-blue-muted);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 320ms var(--press);
}
.filter button:hover { background: rgb(255 255 255 / 0.1); }
.filter button[aria-pressed="true"] { background: var(--on-blue); border-color: var(--on-blue); color: var(--yard); transform: rotate(-2deg); }
/* Their photos are tall doors and wide windows. The wall is laid out as
   justified rows: each print's width grows in proportion to its shape (--a,
   width over height, from its class), so every print in a row comes out the
   same height and every row is full from edge to edge. No holes, whatever the
   mix. */
.work-grid { list-style: none; margin: 0; padding: 0; max-width: 1800px;
  /* Row height per screen band, measured so the last row comes out mostly
     full at common widths (28 Oct sweep, 360 to 2560 px). */
  --rh: clamp(100px, 26vw, 140px);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 3.4vw, 48px) clamp(18px, 2.4vw, 34px); }
@media (min-width: 700px) { .work-grid { --rh: 18vw; } }
@media (min-width: 1100px) { .work-grid { --rh: 19vw; } }
@media (min-width: 1500px) { .work-grid { --rh: min(20vw, 320px); } }
@media (min-width: 1750px) { .work-grid { --rh: 280px; } }
.work-grid li { display: flex; padding-top: 6px;
  /* 20px is the print's white border, left and right. */
  flex: var(--a) 1 calc(var(--a) * var(--rh) + 20px); }
/* The closing card soaks up what the last row leaves (its grow factor dwarfs
   the prints'), and takes a row of its own when less than 220px is left. */
.work-grid li.work-more { flex: 60 1 220px; }
.more-card { flex: 1; display: grid; place-content: center; gap: 10px; min-height: 120px; padding: 22px;
  border: 2px dashed rgb(255 255 255 / 0.45); color: var(--on-blue); text-align: center; }
.more-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; }
.more-links { margin: 0; font-size: 15px; color: var(--on-blue-muted); }
.more-links a { color: var(--on-blue); font-weight: 600; }
.work-grid li > figure { flex: 1; }
.a075 { --a: 0.75; } .a125 { --a: 1.25; } .a133 { --a: 1.3333; } .a15 { --a: 1.5; }
.work-grid li { --r: -1.6deg; }
.work-grid li:nth-child(3n+2) { --r: 1.4deg; }
.work-grid li:nth-child(3n) { --r: -0.6deg; }
.work-grid li:nth-child(4n) { --r: 2.2deg; }
.work-grid li:nth-child(5n) { --r: -2.4deg; }
.work-grid li:nth-child(7n) { --r: 0.8deg; }
.work-grid figure {
  position: relative; background: var(--print); padding: 10px 10px 0; transform: rotate(var(--r));
  box-shadow: 0 20px 36px -20px rgb(0 0 0 / 0.6);
  transition: transform 480ms var(--press), box-shadow 300ms var(--ease);
}
.work-grid img { width: 100%; height: auto; aspect-ratio: var(--a); object-fit: cover; }
.work-grid figcaption { padding: 9px 2px 11px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--print-ink); }
.work-grid figure:hover { z-index: 2; transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 34px 54px -24px rgb(0 0 0 / 0.7); }

/* ---------- The workshop: the real building, with the real sign ---------- */
.shop-front img { width: 100%; max-height: 80svh; object-fit: cover; object-position: center 40%; }
.shop-info {
  display: grid; gap: 28px 48px; padding: clamp(36px, 6vw, 64px) var(--gutter) calc(clamp(56px, 8vw, 96px) + var(--cut));
}
@media (min-width: 900px) { .shop-info { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); align-items: start; } }
.shop-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 8vw, 5rem); line-height: 0.92; }
.shop-where { margin-top: 12px; font-size: 20px; font-weight: 500; }
.shop-where-block .lot-ask { margin-top: 22px; }
.shop-hours { display: grid; gap: 30px; }
/* Their door sign: two strings to a nail, Opið on one face and Lokað on the
   other. It turns edge-on until you reach it, then flips to the true face and
   swings a little on its strings. */
.shop-sign { position: relative; width: 230px; height: 150px; perspective: 800px; transform-origin: 50% 6px; }
/* Until the hours have been read, the sign does not say anything it cannot know. */
.shop-sign:not([data-state]) { display: none; }
.shop-sign::before {
  content: ''; position: absolute; z-index: 1; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--nail); box-shadow: 0 3px 5px rgb(var(--shade) / 0.45);
}
.shop-sign::after {
  content: ''; position: absolute; top: 7px; left: 26px; right: 26px; height: 42px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--muted) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--muted) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.sign-card { position: absolute; left: 0; right: 0; top: 48px; height: 100px; transform-style: preserve-3d;
  transition: transform 1000ms var(--press); }
.sign-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
  font-family: var(--display); font-weight: 800; font-size: 2.8rem; line-height: 1; box-shadow: 0 16px 28px -16px rgb(var(--shade) / 0.5); }
.sign-face .inked { padding: 0.06em 0.3em 0.02em; border: 0.07em double currentColor; }
.sign-open { background: var(--board); color: var(--on-blue); }
.sign-shut { background: var(--print); color: var(--tag-ink); outline: 2px solid var(--board); outline-offset: -2px; transform: rotateY(180deg); }
.shop-sign[data-state="shut"] .sign-card { transform: rotateY(180deg); }
.reveal-ready .shop-sign:not(.is-in) .sign-card { transform: rotateY(90deg); }
.reveal-ready .shop-sign.is-in { animation: sign-swing 1700ms ease-in-out 700ms backwards; }
@keyframes sign-swing { 0% { transform: rotate(7deg); } 30% { transform: rotate(-4deg); } 55% { transform: rotate(2.2deg); } 78% { transform: rotate(-0.8deg); } 100% { transform: none; } }

.hours { width: 100%; border-collapse: collapse; }
.hours th { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 32px 8px 0; border-bottom: 1px solid var(--rule); }
.hours td { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.hours tr[data-today="true"] th, .hours tr[data-today="true"] td { color: var(--stamp-deep); font-weight: 700; }

/* ---------- Foot: a last band of yard blue, sawn at the top ---------- */
.yard-foot {
  margin-top: calc(-1 * var(--cut)); background: var(--yard); color: var(--on-blue);
  padding: calc(clamp(44px, 6vw, 80px) + var(--cut)) var(--gutter) 120px; display: grid; gap: 22px;
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 900px) { .yard-foot { padding-bottom: 56px; } }
.foot-name { line-height: 0; }
.foot-name .logo { height: clamp(92px, 11vw, 132px); }
.foot-tag { color: var(--on-blue-muted); }
.foot-cols { display: grid; gap: 18px; }
@media (min-width: 700px) { .foot-cols { grid-template-columns: repeat(3, auto); justify-content: start; gap: 56px; } }
.legal { font-size: 14px; color: var(--on-blue-muted); }

/* ---------- The call bar on a phone: calling stays big, writing is one tap away ---------- */
.dock {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; box-shadow: 0 10px 28px rgb(var(--shade) / 0.32);
}
.dock a { display: flex; align-items: center; justify-content: center; min-height: 56px; text-decoration: none; }
.dock-call { flex: 1; background: var(--board); color: var(--on-blue);
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.dock-write { padding: 0 22px; background: var(--ground); color: var(--stamp-deep); border: 2px solid var(--board); font-weight: 600; }
.dock { transition: transform 420ms var(--ease), opacity 300ms var(--ease), visibility 0s linear 0s; }
.dock-ready .dock:not(.is-shown) { transform: translateY(calc(100% + 28px)); opacity: 0; visibility: hidden;
  transition: transform 420ms var(--ease), opacity 300ms var(--ease), visibility 0s linear 420ms; }
@media (min-width: 900px) { .dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}