/* The public catalogue: each piece shown like a specimen, alone on a flat
   field of colour, at the same scale, named by its number. */

:root {
  color-scheme: light;
  --bg: #ebe5e3;
  --surface: #e1dad7;
  --hero-field: #d9d0cc;
  --ink: #2b2622;
  --muted: #645b57;
  --accent: #0f7d45;
  --accent-strong: #0b6537;
  --accent-ink: #ffffff;
  --out: #96402e;

  /* The specimen fields, used in rotation. */
  --field-a: #e1dad7;
  --field-b: #d6ccc7;
  --field-c: #cfd9cf;
  --field-d: #e5d8cc;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1.2rem + 5vw, 5.75rem);

  --margin: clamp(16px, 2.6vw, 32px);
  --gap-section: clamp(88px, 11vw, 168px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
/* Buttons are flex boxes: without this, `hidden` would not hide them. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: var(--step-head); }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
address { font-style: normal; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.link {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-hover) ease;
}

/* ---- Buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button-green { background: var(--accent); color: var(--accent-ink); }
.button-quiet { background: var(--field-b); color: var(--ink); }
.button-small { min-height: 2.75rem; padding: 0 1.1rem; font-size: var(--step-small); }
.button-wide { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #000; }
  .button-green:hover { background: var(--accent-strong); }
  .button-quiet:hover { background: var(--field-a); }
  .link:hover { text-decoration-color: transparent; }
}

/* ---- Bar ---------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 20px var(--margin);
}
.wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.bar-links { display: flex; gap: clamp(16px, 2.4vw, 32px); }
.bar-links a { text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .bar-links a:hover { color: var(--accent); }
}

/* ---- Hero: the statement beside the specimen mosaic --------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(88svh, 980px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 56px) var(--margin) clamp(32px, 4vw, 56px);
}
.hero h1 {
  font-size: var(--step-display);
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 9.5em;
}
.hero-lead {
  max-width: 34rem;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: var(--step-lead);
  line-height: 1.35;
}

.finder {
  display: flex;
  margin-top: auto;
  padding-top: clamp(32px, 5vw, 64px);
  max-width: 40rem;
}
.finder input {
  flex: 1;
  min-width: 0;
  height: 4rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0;
  background: #f7f3f1;
  color: var(--ink);
  font: inherit;
  font-size: var(--step-lead);
  -webkit-appearance: none;
  appearance: none;
}
.finder input::placeholder { color: var(--muted); }
.finder .button { min-height: 4rem; padding: 0 1.8rem; }

.makes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-width: 40rem; }
.make {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.make span { color: var(--muted); font-weight: 400; font-size: var(--step-small); }
.make:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .make:hover { background: var(--field-c); }
}

.hero-field {
  background: var(--hero-field);
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
}
.hero-count { padding-right: var(--margin); font-size: var(--step-lead); }
.hero-count strong { display: block; font-size: var(--step-display); letter-spacing: -0.04em; line-height: 1; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 118%;
}
.mosaic .tile { aspect-ratio: 3 / 4; }
.mosaic .tile-1 { grid-area: 1 / 1 / 3 / 3; aspect-ratio: auto; }
.mosaic .tile-2 { grid-area: 1 / 3; }
.mosaic .tile-3 { grid-area: 2 / 4; }
.mosaic .tile-4 { grid-area: 3 / 2; }
.mosaic .tile-5 { grid-area: 3 / 3; }
.mosaic .tile-6 { grid-area: 1 / 4; }
.mosaic .tile-7 { grid-area: 3 / 1; }

/* ---- The specimen tile, used everywhere --------------------------------- */

.tile, .piece-tile, .done-tile, .stage-tile, .kind-photo, .thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile img, .piece-tile img, .done-tile img, .stage-tile img, .kind-photo img, .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* A white studio background takes the colour of the field. */
  mix-blend-mode: multiply;
}
.tile img { padding: 9%; transition: transform 600ms var(--ease-soft); }
.field-a { background: var(--field-a); }
.field-b { background: var(--field-b); }
.field-c { background: var(--field-c); }
.field-d { background: var(--field-d); }
.tile-code { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; color: var(--muted); padding: 1rem; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  a:hover > .tile img, .mosaic .tile:hover img { transform: scale(1.05); }
}

/* ---- The catalogue ------------------------------------------------------ */

.results { padding: var(--gap-section) var(--margin) 0; scroll-margin-top: 0; }
.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.results-count { color: var(--muted); }

.specimens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 44vw), 1fr));
  grid-auto-flow: dense;
  gap: clamp(28px, 3vw, 44px) clamp(10px, 1vw, 14px);
}
.specimen a { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.specimen .tile { aspect-ratio: 1; margin-bottom: 14px; }
.specimen-wide { grid-column: span 2; }
.specimen-wide .tile { aspect-ratio: 2 / 1; }
.specimen-wide .tile img { padding: 6% 18%; }
.specimen-name {
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.specimen-fact { margin-top: 6px; color: var(--muted); font-size: var(--step-small); }
.in { color: var(--accent); font-weight: 500; }
.out { color: var(--out); font-weight: 500; }
.price-note { margin-top: clamp(32px, 4vw, 56px); color: var(--muted); max-width: 38rem; }
.nothing { padding: clamp(40px, 8vw, 96px) 0; font-size: var(--step-lead); max-width: 30rem; }
.pages { display: flex; align-items: center; gap: 1rem; margin-top: clamp(32px, 4vw, 56px); color: var(--muted); }

/* ---- Kinds of piece: a two-column list with photo bullets --------------- */

.kinds { padding: var(--gap-section) var(--margin) 0; }
.kinds h2 { margin-bottom: clamp(28px, 3.5vw, 48px); }
.kind-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 64px; }
.kind {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  text-decoration: none;
}
.kind-photo { width: 64px; height: 64px; background: var(--field-a); }
.kind-photo img { padding: 8%; }
.kind-name { font-size: var(--step-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.kind-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.kind.is-current .kind-name { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .kind:hover .kind-name { color: var(--accent); }
}

/* ---- How to ask: tiles that grow ---------------------------------------- */

.order { padding: var(--gap-section) var(--margin) 0; position: relative; }
.order h2 { position: absolute; top: var(--gap-section); left: var(--margin); max-width: 6em; }
.stages {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  align-items: end;
  gap: 10px;
}
.stage { display: flex; flex-direction: column; gap: 6px; }
.stage-tile { margin-bottom: 12px; }
.stage-tile img { padding: 10%; }
.stage:nth-child(1) .stage-tile { height: clamp(180px, 30vh, 300px); }
.stage:nth-child(2) .stage-tile { height: clamp(260px, 44vh, 440px); }
.stage:nth-child(3) .stage-tile { height: clamp(360px, 60vh, 600px); }
.stage strong { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.stage span:last-child { color: var(--muted); max-width: 26rem; }

/* ---- Contact: a green field with a strip of pieces ---------------------- */

.contact {
  margin-top: var(--gap-section);
  padding: 48px var(--margin) clamp(56px, 7vw, 96px);
  background: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
}
.strip { margin: 0 calc(var(--margin) * -1) 72px; overflow: hidden; }
.strip-track { display: flex; gap: 8px; width: max-content; }
.strip img { height: 150px; object-fit: cover; background: var(--bg); }
.strip img.r1 { width: 112px; }
.strip img.r3 { width: 225px; }
.contact h2 { max-width: 12em; margin-bottom: 40px; }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cell {
  min-height: 132px;
  padding: 22px 24px;
  background: #13894d;
  color: var(--accent-ink);
  font-size: var(--step-body);
  line-height: 1.4;
}
.cell a { text-decoration: underline; text-underline-offset: 0.2em; }
.cell-name { display: block; margin-bottom: 6px; font-weight: 500; opacity: 0.85; }
.cell-action {
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--step-lead);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.cell-action:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .cell-action:hover { background: #fff; }
}

/* ---- One piece ---------------------------------------------------------- */

.piece {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 8px var(--margin) 0;
  align-items: start;
}
.piece-tile { aspect-ratio: 1; }
.piece-tile img { padding: 8%; }
.piece-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.thumb {
  flex: none;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.thumb img { padding: 10%; }
.thumb.is-current { opacity: 1; outline: 3px solid var(--ink); outline-offset: -3px; }
.thumb:active { transform: scale(0.96); }
.piece-text { padding-top: clamp(0px, 2vw, 24px); }
.back { padding: 4px var(--margin) clamp(16px, 2vw, 24px); }
.piece h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; }
.piece-facts { margin-top: 20px; font-size: var(--step-body); }
.piece-description { margin-top: 18px; max-width: 36rem; }
#ask { margin-top: 32px; }

.ask { margin-top: 32px; padding: clamp(20px, 3vw, 32px); background: var(--surface); scroll-margin-top: 16px; }
.ask h2 { font-size: var(--step-lead); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; }
.ask-form { display: grid; gap: 16px; margin-top: 20px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0;
  background: #f7f3f1;
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field-error { color: var(--out); font-size: var(--step-small); font-weight: 500; }
.alert { padding: 14px 16px; background: #f3dcd5; color: var(--out); font-weight: 500; }
/* Out of sight for people, not for bots. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: not a rule, a field hidden from people */

.related { padding: var(--gap-section) var(--margin) 0; }
.related h2 { margin-bottom: clamp(28px, 3.5vw, 48px); }
.specimens-row { grid-template-columns: repeat(4, 1fr); }

/* ---- Request received --------------------------------------------------- */

.done {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 56px) var(--margin) 0;
  align-items: center;
}
.done h1 { font-size: var(--step-display); letter-spacing: -0.04em; line-height: 0.95; max-width: 8em; }
.done-lead { margin: 28px 0 12px; font-size: var(--step-lead); line-height: 1.35; max-width: 32rem; }
.done .button { margin-top: 28px; max-width: 26rem; }
.done-note { margin: 12px 0 28px; color: var(--muted); max-width: 26rem; }
.done-tile { aspect-ratio: 1; }
.done-tile img { padding: 10%; }

/* ---- The close: the name built from blocks ------------------------------ */

.close { margin-top: var(--gap-section); padding: 0 var(--margin) 28px; }
.blocks {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: clamp(160px, 34svh, 340px);
  text-decoration: none;
}
.block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.08em;
  container-type: inline-size;
  font-weight: 700;
  line-height: 0.8;
  font-size: clamp(22px, 5.4vw, 92px);
  transition: transform 500ms var(--ease-out);
}
.b00 { height: 100%; background: var(--ink); color: var(--bg); }
.b01 { height: 78%; background: var(--field-c); color: var(--ink); }
.b10 { height: 64%; background: var(--field-b); color: var(--ink); }
.b11 { height: 88%; background: var(--field-d); color: var(--ink); }
.block-gap { flex: 0 0 clamp(8px, 2vw, 28px); }
@media (hover: hover) and (pointer: fine) {
  .blocks:hover .block:nth-child(odd) { transform: translateY(-6px); }
}

.close-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
.close-links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.close-links a { text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .close-links a:hover { color: var(--accent); }
}
.close-address { color: var(--muted); }
.close-address a { color: var(--ink); }
.close-last {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 48px;
  color: var(--muted);
  font-size: var(--step-small);
}

/* ---- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* The signature move: the main specimen opens like a shutter. */
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in img { transform: none; }

  /* The rest of the mosaic settles in after it. */
  .js .mosaic .tile:not(.shutter) { opacity: 0; animation: settle 900ms var(--ease-out) forwards; }
  .js .mosaic .tile-2 { animation-delay: 380ms; }
  .js .mosaic .tile-6 { animation-delay: 460ms; }
  .js .mosaic .tile-3 { animation-delay: 540ms; }
  .js .mosaic .tile-5 { animation-delay: 620ms; }
  .js .mosaic .tile-4 { animation-delay: 700ms; }
  .js .mosaic .tile-7 { animation-delay: 780ms; }

  /* The one moving picture: the strip of pieces drifts by. */
  .strip-track { animation: drift 70s linear infinite; }
  .strip:hover .strip-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: translateX(-50%); } }

/* ---- Phone: its own composition ----------------------------------------- */

@media (max-width: 760px) {
  .bar { padding: 16px 20px; }
  .bar-links a:not(:first-child) { display: none; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 12px 20px 40px; }
  .hero h1 { font-size: 10.5vw; max-width: none; }
  .hero-lead { font-size: var(--step-body); }
  .finder { margin-top: 28px; padding-top: 0; }
  .finder input { height: 3.5rem; font-size: 17px; }
  .finder .button { min-height: 3.5rem; padding: 0 1.2rem; }

  .hero-field { padding: 20px 0 0 20px; max-height: 112vw; align-items: flex-start; }
  .mosaic { grid-template-columns: 1fr 1fr; width: calc(100% + 24px); gap: 10px; }
  .mosaic .tile { grid-area: auto !important; aspect-ratio: 3 / 4 !important; }
  .mosaic .tile:nth-child(even) { transform: translateY(48px); }
  .mosaic .tile-6, .mosaic .tile-7 { display: none; }

  .results, .kinds, .order, .related { padding-left: 16px; padding-right: 16px; }
  .specimens { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .specimen-name { font-size: 16px; }
  .specimens-row { grid-template-columns: 1fr 1fr; }

  .kind-list { grid-template-columns: 1fr; }
  .kind { grid-template-columns: 52px 1fr auto; gap: 14px; }
  .kind-photo { width: 52px; height: 52px; }

  .order h2 { position: static; margin-bottom: 28px; }
  .stages { grid-template-columns: 1fr; gap: 28px; }
  .stage:nth-child(1) .stage-tile { height: 34vw; }
  .stage:nth-child(2) .stage-tile { height: 46vw; }
  .stage:nth-child(3) .stage-tile { height: 62vw; }

  .contact { padding-left: 16px; padding-right: 16px; }
  .strip { margin-bottom: 48px; }
  .strip img { height: 110px; }
  .strip img.r1 { width: 82px; }
  .strip img.r3 { width: 165px; }
  .cells { grid-template-columns: 1fr; }
  .cell { min-height: 0; }
  .cell-action { min-height: 64px; }

  .piece { grid-template-columns: 1fr; padding: 0 16px; }
  /* Imported names are long: a smaller size keeps them to three lines. */
  .piece h1 { font-size: 1.5rem; line-height: 1.1; }
  .back { padding: 0 16px 14px; }
  .done { grid-template-columns: 1fr; padding: 16px 20px 0; }
  .done h1 { font-size: 11vw; }
  .done-tile { order: -1; max-width: 70%; }

  .close { padding: 0 16px 24px; }
  .blocks { flex-wrap: wrap; height: auto; row-gap: 4px; }
  .block { height: auto; min-height: 0; flex: 1 1 0; }
  .b00 { height: 18svh; }
  .b01 { height: 14svh; }
  .b10 { height: 11.5svh; }
  .b11 { height: 16svh; }
  .blocks { align-items: flex-end; }
  .block { font-size: 9vw; }
  .block-gap { flex-basis: 100%; height: 0; }
  .close-row { grid-template-columns: 1fr; margin-top: 36px; }
  .close-links { display: grid; grid-template-columns: 1fr 1fr; }
}