/* ==========================================================================
   SAGA — styles
   Clean, minimal, light: white page, one soft surface colour, ink type.
   The whole look is driven by the tokens in :root.
   ========================================================================== */

/* Fonts are kept by browsers for a year (vercel.json): a changed font needs
   a new file name. (They aren't preloaded: measured on a slow phone
   connection, preloading them held up the stylesheet and the hero photo.) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --surface: #F6F5F2;       /* behind every piece, and quiet panels */
  --ink: #151413;
  --ink-hover: #3A3733;
  --muted: #6F6A64;         /* secondary text — 5.3:1 on white */
  --line: #E8E5E0;
  --line-strong: #D3CEC7;

  --serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1360px;
  --header-h: 4.5rem;
  --control-h: 3.25rem;     /* every button shares this height */
  --icon-btn: 3rem;         /* every round icon button shares this size */
}

/* ---------- base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
::selection { background: #ECE8E1; color: var(--ink); }

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 70;
  padding: .75rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- shared pieces ------------------------------------------------- */

.eyebrow {
  font: 500 .72rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* One button family: same height, same shape, same type. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  height: var(--control-h);
  padding: 0 1.9rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--icon-btn);
  height: var(--icon-btn);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.icon-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.text-link { position: relative; padding: .45rem 0; font: 500 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: .16em;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.text-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- header -------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* equal sides keep the name dead centre */
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: rgb(255 255 255 / .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.masthead.is-scrolled { border-bottom-color: var(--line); }
.masthead__side { display: flex; align-items: center; gap: 2.25rem; }
.masthead__side--end { justify-content: flex-end; }

/* ---------- the menu: ≡ at the top left, a panel from the left (site.js) ---- */

.menu-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 -.9rem 0 -.65rem; /* the lines sit on the gutter; Archive keeps its spacing */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease);
}
.menu-btn:hover { background: var(--surface); }
.menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.menu-btn svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
html.has-menu { overflow: hidden; }

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.menu::backdrop { background: rgb(21 20 19 / 0); transition: background-color .34s var(--ease); }
.menu.is-open::backdrop { background: rgb(21 20 19 / .3); }
.menu__panel {
  display: flex;
  flex-direction: column;
  width: min(25rem, 100%);
  height: 100%;
  padding: 0 var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  box-shadow: 0 0 60px rgb(21 20 19 / .14);
  transform: translateX(-104%);
  transition: transform .34s var(--ease);
}
.menu.is-open .menu__panel { transform: none; }
.menu__head { display: flex; align-items: center; flex: none; height: var(--header-h); }
.menu__close { margin-right: 0; }
.menu__nav { display: grid; align-content: start; padding: .75rem 0 0 .1rem; }
.menu__eyebrow { margin-bottom: .55rem; font: 500 .66rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.menu__list { margin: 0; padding: 0; list-style: none; }
.menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  font: 300 1.6rem/1.2 var(--serif);
  color: var(--ink);
}
.menu__label {
  position: relative;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; /* the underline, drawn on hover */
  transition: background-size .35s var(--ease);
}
.menu__link:hover .menu__label, .menu__link:focus-visible .menu__label { background-size: 100% 1px; }
.menu__link:focus-visible { outline: none; }
.menu__link[aria-current="page"] .menu__label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -.9rem;
  width: .38rem;
  height: .38rem;
  margin-top: -.19rem;
  border-radius: 50%;
  background: #9B1B30; /* the red dot of the contact page: you are here */
}
.menu__count { font: 400 .72rem/1 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); }
.menu__note { padding: .5rem 0; font-size: .84rem; color: var(--muted); }
.menu__list--pages { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.menu__list--pages .menu__link { padding: .62rem 0; font: 500 .74rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.menu__foot { margin-top: auto; padding-top: 2rem; font-size: .84rem; color: var(--muted); }
.menu__foot a { transition: color .2s var(--ease); }
.menu__foot a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .menu__panel, .menu::backdrop { transition: none; }
}

.wordmark { display: block; line-height: 0; }
.wordmark img { width: auto; height: 2.4rem; }

/* ---------- hero ---------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--max);
  min-height: calc(100svh - var(--header-h));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}
.hero__copy { max-width: 34rem; }
.hero__copy > * { animation: rise .9s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__logo { margin: 0; font: inherit; line-height: 0; }
.hero__logo-img { width: min(100%, 22rem); height: auto; }
.hero__logo-text { display: inline-block; font: 400 clamp(2.4rem, 4.5vw, 3.6rem)/1 var(--serif); letter-spacing: .02em; }
.hero__by { margin-top: .9rem; padding-left: .1em; font: 400 .78rem/1 var(--sans); letter-spacing: .32em; color: var(--ink); } /* Jost, spaced like the MADE in the logo */
.hero__title { margin-top: clamp(1.5rem, 3vw, 2.25rem); font: 300 clamp(2rem, 3.4vw, 3.1rem)/1.12 var(--serif); letter-spacing: -.01em; }
.hero__sub { margin-top: .75rem; font: italic 300 clamp(1.15rem, 1.7vw, 1.45rem)/1.3 var(--serif); color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.hero__figure { justify-self: center; width: min(100%, 31rem); margin: 0; animation: fade .9s var(--ease) both .15s; }
.hero__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }

/* Pavé stage: two photos cross-fade underneath a canvas of dots (assets/pave.js). */
.pave__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.pave__photo.is-front { opacity: 1; }
.pave__photo.is-first { transition-duration: .35s; } /* the very first photo: no long wait to appear */
.pave__dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__caption { display: grid; gap: .2rem; margin-top: .9rem; font-size: .82rem; color: var(--muted); }
.placard__no { font: 500 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.placard__name { font: 400 1.25rem/1.2 var(--serif); color: var(--ink); }
.placard__materials { font-size: .8rem; }
.hero__caption-name { color: var(--ink); }

@keyframes rise { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- collection ---------------------------------------------------- */

.collection {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(4rem, 8vw, 6.5rem);
}
.section-head { text-align: center; }
.section-title { margin-top: .9rem; font: 300 clamp(2.3rem, 4.2vw, 3.5rem)/1.08 var(--serif); letter-spacing: -.01em; }
.section-title em { font-style: italic; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.25rem; }
/* Category buttons — built by gallery.js as .chapter (numeral · label · count). */
.chapter {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 2.5rem;
  padding: 0 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 500 .7rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chapter:hover { border-color: var(--ink); }
.chapter__numeral { display: none; }
.chapter__count {
  min-width: 1.35rem;
  padding: .2rem .35rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: .62rem;
  letter-spacing: 0;
  text-align: center;
  color: var(--muted);
}
.chapter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chapter[aria-pressed="true"] .chapter__count { background: rgb(255 255 255 / .16); color: #fff; }

/* Year menu: an invisible <select> over a pill that matches the category buttons. */
.year-filter { position: relative; cursor: pointer; }
.chapter.year-filter { padding-right: 2.2rem; } /* room for the chevron (beats the phone .chapter padding) */
.year-filter::after { /* chevron */
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .38rem;
  height: .38rem;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
.year-filter__select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px; /* stops iOS zooming in when it's tapped */
  cursor: pointer;
}
.year-filter.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.year-filter__short { display: none; }
.chapter.is-empty:not([aria-pressed="true"]) { opacity: .4; }
.year-filter:focus-within { outline: 1px solid var(--ink); outline-offset: 3px; }
.tile__year::before { content: "·"; margin-right: .6rem; }

.collection__count { margin-top: 1.1rem; text-align: center; font-size: .8rem; letter-spacing: .04em; color: var(--muted); }

/* ---------- grid + tiles -------------------------------------------------- */

.grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(.75rem, 1.6vw, 1.5rem);
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
}
/* Holds the space while the pieces load, so the footer doesn't start on
   screen and then jump away. */
.grid:empty { min-height: 75vh; }
@media (min-width: 760px) { .grid { --cols: 3; } }
@media (min-width: 1100px) { .grid { --cols: 4; } }

.grid__note {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px dashed var(--line-strong);
  text-align: center;
  color: var(--muted);
}
.grid__note code { color: var(--ink); }

.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--stagger, 0ms);
}
.tile.is-in, .grid.is-settled .tile { opacity: 1; transform: none; }
.grid.is-settled .tile { transition: none; }

.tile__link { display: flex; flex: 1; flex-direction: column; }
.tile__link:focus-visible { outline-offset: 5px; }
.tile__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .6s var(--ease);
}
.tile__img--alt { opacity: 0; }
@media (hover: hover) {
  .tile__link:hover .tile__img { transform: scale(1.035); }
  .tile__link:hover .tile__img--alt { opacity: 1; }
}

.tile__info { display: grid; gap: .15rem; padding-top: 1rem; }
.tile__label { display: grid; gap: .25rem; padding-top: .85rem; }
.tile__meta { display: flex; flex-wrap: wrap; gap: 0 .6rem; font: 500 .66rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tile__chapter::before { content: "·"; margin-right: .6rem; }
.tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.tile__name { font: 500 1.18rem/1.2 var(--serif); letter-spacing: .005em; }
.tile__materials { font-size: .78rem; line-height: 1.45; color: var(--muted); }
.tile__price { margin-top: .1rem; font-size: .82rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tile__price.is-ask { font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
/* A sold piece stays in the archive, marked with the one red dot. */
.tile__price.is-sold { font: 500 .66rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.tile__price.is-sold::before, .viewer__price.is-sold::before {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: #9B1B30;
  vertical-align: .1em;
}

/* Colour dots for pieces with colorways (tiles + viewer). */
.swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatches--small { margin-top: .6rem; }
.swatch {
  position: relative;
  width: .95rem;
  height: .95rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(21 20 19 / .18);
  cursor: pointer;
}
.swatch::after { /* ring around the chosen colour */
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .25s var(--ease);
}
.swatch[aria-checked="true"]::after { border-color: var(--ink); }
.swatch:hover::after { border-color: var(--line-strong); }
.swatch[aria-checked="true"]:hover::after { border-color: var(--ink); }
.swatches--large { gap: .7rem; margin-top: .6rem; }
.swatches--large .swatch { width: 1.35rem; height: 1.35rem; }
.swatch:focus-visible { outline-offset: 5px; }
/* Fingers need more room than the dot: on touch screens each dot answers
   taps across ~26px, and the dots sit further apart so those don't overlap. */
@media (pointer: coarse) {
  .swatches--small { gap: .7rem; }
  .swatch::before { content: ""; position: absolute; inset: -.35rem; border-radius: 50%; }
}
.viewer__ways { margin-top: 1.1rem; }
.viewer__way-name { font-size: .78rem; letter-spacing: .06em; color: var(--muted); }

/* Feature tiles (see isFeatureTile in gallery.js): 2 × 2 on larger screens, full width on phones. */
.tile--feature { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .tile--feature { grid-column: span 2; grid-row: span 2; }
  .tile--feature .tile__media { flex: 1 1 auto; }
  .tile--feature .tile__name { font-size: 1.6rem; }
}

/* ---------- about --------------------------------------------------------- */

.about { background: var(--surface); }
.about__inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
  text-align: center;
}
.about__quote { max-width: 36rem; margin: 1rem auto 0; font: 300 clamp(1.5rem, 2.6vw, 2.2rem)/1.25 var(--serif); }
.about__quote em { font-style: italic; }
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: clamp(3rem, 6vw, 4.25rem) 0 0;
  padding: clamp(2.25rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}
.value h3 { font: 500 .7rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.value p { max-width: 16rem; margin: .5rem auto 0; font-size: .84rem; line-height: 1.6; color: var(--muted); }

/* ---------- process page: one piece per chapter, in four panels ----------- */

.process { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.process__intro { text-align: center; }
.process__lede { max-width: 30rem; margin: .9rem auto 0; font-size: .95rem; color: var(--muted); }
.process__nav { margin-top: 1.75rem; }
.process__pick { gap: .5rem; }
.process__pick-no { color: var(--muted); }
.process__pick[aria-pressed="true"] .process__pick-no { color: rgb(255 255 255 / .6); }
.process__pick-name { text-transform: none; letter-spacing: .02em; font: 400 .92rem/1 var(--serif); }

.process__stage { width: min(100%, 34rem); margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; }
.process__stage.is-in { animation: fade .6s var(--ease) both; }
/* While the chapters load, the stage holds a screen's height, so the footer
   doesn't start on screen and then jump ~1500px down when they arrive. */
.process__stage.is-loading { min-height: 100svh; }
.process__head { margin-bottom: 1.4rem; text-align: center; }
.process__title { margin-top: .5rem; font: 300 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--serif); }
.process__note { padding: 2.5rem 1rem; border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); }

/* the strip: four stacked panels with ink borders and gutters, like a comic */
.strip { display: grid; gap: .7rem; margin: 0; padding: .7rem; border: 1.5px solid var(--ink); list-style: none; background: #fff; }
.strip__panel { position: relative; aspect-ratio: 1; /* square: fits sketches (wide) and bench shots (tall) alike */ overflow: hidden; border: 1.5px solid var(--ink); background: var(--surface); }
.strip__panel img { width: 100%; height: 100%; object-fit: cover; }

.process__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: min(100%, 34rem);
  margin: 1.75rem auto 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.process__next:hover { border-color: var(--ink); background: var(--surface); }
.process__next-label { font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.process__next-name { font: 400 1.2rem/1.2 var(--serif); }
.process__next svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.masthead .text-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- bridal: Yes (engagement rings) and I do (wedding bands) -------- */

.bridal { max-width: 60rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 6.5rem); }
.bridal__choices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 3rem); margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.bridal__choice { display: grid; justify-items: center; gap: clamp(.75rem, 2vw, 1.1rem); color: var(--ink); text-decoration: none; }
.bridal__word { font: italic 300 clamp(1.7rem, 4.5vw, 2.8rem)/1 var(--serif); }
.bridal__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color .35s var(--ease);
}
/* the sketch is a transparent PNG: the frame's beige shows through, and the
   whole drawing stays in view */
.bridal__sketch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.bridal__label { font: 500 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .25s var(--ease); }
.bridal__choice:hover .bridal__frame { border-color: var(--ink); }
.bridal__choice:hover .bridal__sketch { transform: scale(1.03); }
.bridal__choice:hover .bridal__label { color: var(--ink); }
.bridal__choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

/* the engagement-rings and wedding-bands pages */
.bridal__back { text-decoration: none; transition: color .25s var(--ease); }
.bridal__back:hover { color: var(--ink); }
.bridal__other { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: clamp(3rem, 6vw, 4.5rem); }

@media (max-width: 560px) {
  .bridal__label { font-size: .66rem; letter-spacing: .12em; text-align: center; }
}

/* ---------- about page: the maker's bio ----------------------------------- */

.bio { max-width: 44rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.bio__head { text-align: center; }
.bio__title { margin-top: 1rem; font: 300 clamp(2.2rem, 5vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.01em; }
.bio__title em { font-style: italic; }
/* The photo runs wider than the text column on larger screens. */
.bio__photo { width: min(100vw - 2 * var(--gutter), 64rem); margin: clamp(2.25rem, 5vw, 3.25rem) 0 0 50%; transform: translateX(-50%); }
.bio__photo picture { display: block; }
.bio__photo img { width: 100%; height: auto; aspect-ratio: 2000 / 1155; object-fit: cover; background: #1a1d22; }
.bio__body { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.bio__body > p { font-size: 1.02rem; line-height: 1.85; color: #3A3733; }
.bio__body > p + p { margin-top: 1.35rem; }
.bio__body strong { font-weight: 500; color: var(--ink); }
.bio__quote { position: relative; margin: 2.5rem 0; padding: 2rem 0 2rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); text-align: center; }
.bio__quote::before { /* the one red dot */
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9B1B30;
  transform: translateX(-50%);
}
.bio__quote p { font: 300 clamp(1.5rem, 3vw, 2.1rem)/1.25 var(--serif); }
.bio__quote em { font-style: italic; }
.bio__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: clamp(2.5rem, 5vw, 3.25rem); }
.bio__sign { display: grid; justify-items: center; gap: .45rem; margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); text-align: center; }
.bio__sign-name { font: 500 .95rem/1 var(--sans); letter-spacing: .42em; padding-left: .42em; }
.bio__sign-meaning { font: italic 300 1.2rem/1.3 var(--serif); color: var(--muted); }
.bio__sign-meaning [lang="ja"] { font: 400 1.05rem/1 "Hiragino Mincho ProN", "Yu Mincho", var(--serif); font-style: normal; color: var(--ink); }
.bio__sign-link { margin-top: .35rem; font-size: .76rem; letter-spacing: .06em; color: var(--muted); transition: color .25s var(--ease); }
.bio__sign:hover .bio__sign-link { color: var(--ink); }

.about__more { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- footer -------------------------------------------------------- */

.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter) 2rem;
  text-align: center;
}
.footer__title { margin-top: 1rem; font: 300 clamp(2.3rem, 4.2vw, 3.5rem)/1.08 var(--serif); }
.footer__text { max-width: 28rem; margin: 1rem auto 0; color: var(--muted); }
.footer__actions { margin-top: 2.25rem; }
.footer__email { display: inline-block; margin-top: 1rem; font-size: .88rem; color: var(--muted); transition: color .3s var(--ease); }
.footer__email:hover { color: var(--ink); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.footer__base a:hover { color: var(--ink); }
.footer__links { display: flex; gap: 1.5rem; }
/* contact.html: the page is the inquiry, so its footer is just the base line */
.footer--plain { padding-top: 0; }
.footer--plain .footer__base { margin-top: 0; }

/* ---------- viewer (the piece detail dialog) ----------------------------- */

.viewer {
  width: min(100vw - 2rem, 72rem);
  max-width: none;
  height: min(100dvh - 2rem, 46rem);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2rem 5rem -1.5rem rgb(20 18 15 / .28), 0 0 0 1px rgb(20 18 15 / .05);
}
.viewer::backdrop {
  background: rgb(250 249 247 / .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer[open] { animation: viewer-in .5s var(--ease); }
.viewer[open]::backdrop { animation: fade .5s var(--ease); }
/* when the photo flies in from the grid, the page cross-fade does the rest */
.viewer--morph[open], .viewer--morph[open]::backdrop { animation: none; }
@keyframes viewer-in { from { opacity: 0; transform: translateY(.75rem); } }

.viewer__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); height: 100%; }

.viewer__stage { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); }
/* photos of any shape sit on a soft blur of themselves instead of flat bars */
.viewer__ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(36px) saturate(1.05);
  transform: scale(1.25);
  opacity: .8;
  pointer-events: none;
}
.viewer__media { position: relative; flex: 1; width: 100%; min-height: 0; margin: 0; overflow: hidden; cursor: zoom-in; touch-action: pan-y; }
.viewer__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.viewer__media img.is-new { animation: fade .45s var(--ease); }
.viewer__media.is-zoomed { cursor: zoom-out; }
.viewer__media.is-zoomed img { transform: scale(2.2); }
@media (hover: none) { .viewer__media { cursor: auto; } }

/* A strip under the photo. Each thumbnail takes its photo's own shape, so the
   whole picture shows — nothing is cropped. */
.viewer__thumbs {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; justify-content: center; gap: .6rem;
  padding: .25rem 1rem 1.1rem;
  overflow-x: auto; scrollbar-width: none;
}
.viewer__thumbs::-webkit-scrollbar { display: none; }
.viewer__thumb {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(20 18 15 / .1);
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.viewer__thumb img { display: block; width: auto; height: 3.75rem; min-width: 2.5rem; max-width: 6rem; object-fit: contain; }
.viewer__thumb:hover { opacity: .9; }
.viewer__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--ink); }
.viewer__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.viewer__info {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem);
}
/* when the text is taller than the panel it scrolls instead of squashing */
.viewer__info > * { flex-shrink: 0; }
/* the details sit centred in the panel, with the arrows held at the bottom */
.viewer__info > :first-child { margin-top: auto; }
.viewer__title { margin-top: .8rem; padding-right: calc(var(--icon-btn) + .5rem); font: 300 clamp(2.1rem, 3.4vw, 3rem)/1.05 var(--serif); letter-spacing: -.01em; }
.viewer__materials { margin-top: .7rem; font-size: .92rem; color: var(--muted); }
.viewer__price { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.viewer__desc { margin-top: 1.75rem; line-height: 1.75; color: var(--muted); }
.viewer__details { margin: 1.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); font-size: .88rem; }
.viewer__details li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.viewer__inquire { margin-top: 2rem; }
.viewer__nav { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2rem; }
.viewer__count { font-size: .75rem; letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--muted); }
.viewer__close { position: absolute; top: 1rem; right: 1rem; z-index: 3; }

/* ---------- contact page (contact.html, assets/contact.js) -------------- */

.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; }

.contact { max-width: 48rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.contact__head { text-align: center; }
.contact__title { margin-top: 1rem; font: 300 clamp(2.3rem, 5vw, 3.6rem)/1.06 var(--serif); letter-spacing: -.01em; }
.contact__title em { font-style: italic; }
.contact__lede { max-width: 31rem; margin: 1.1rem auto 0; color: var(--muted); }

.inquiry { display: grid; margin-top: clamp(2.5rem, 6vw, 3.75rem); }
.inquiry__step { display: grid; gap: 1.1rem; min-width: 0; margin: 0; padding: clamp(1.9rem, 5vw, 2.6rem) 0 0; border: 0; border-top: 1px solid var(--line); }
.inquiry__step + .inquiry__step, .inquiry__step + .field + .inquiry__step { margin-top: clamp(1.9rem, 5vw, 2.6rem); }
.inquiry__legend { display: flex; align-items: baseline; gap: .8rem; float: left; width: 100%; margin-bottom: .3rem; padding: 0; font: 400 clamp(1.4rem, 3vw, 1.65rem)/1.2 var(--serif); }
.inquiry__legend + * { clear: both; }
.inquiry__num { font: 500 .68rem/1 var(--sans); letter-spacing: .16em; color: var(--muted); }
.inquiry__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.1rem 1rem; }

/* fields */
.field { display: grid; align-content: start; gap: .45rem; min-width: 0; }
.field__label { font: 500 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.field__optional { margin-left: .35rem; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.field__input {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans); /* 16px: phones don't zoom in on tap */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: #A39D96; }
/* the search box's clear button, in the site's colours (not the browser's blue) */
.field__input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6A64' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") no-repeat center / 1rem;
}
.field__input:hover { border-color: #BDB6AD; }
.field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(21 20 19 / .08); }
textarea.field__input { min-height: 10rem; resize: vertical; }
select.field__input {
  appearance: none;
  padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151413' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .85rem center / 1rem;
  cursor: pointer;
}
.field__hint { font-size: .8rem; color: var(--muted); }
.field__error { font-size: .84rem; color: #A13A2B; }
.is-invalid .field__input, .field__input[aria-invalid="true"] { border-color: #A13A2B; }

/* what it's about: three cards, the chosen one marked with the red dot */
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.choice {
  position: relative;
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.choice:hover { border-color: #BDB6AD; }
.choice input, .pill input, .pick input { position: absolute; opacity: 0; pointer-events: none; }
.choice__title { padding-right: 1.2rem; font: 400 1.18rem/1.2 var(--serif); }
.choice__text { font-size: .82rem; line-height: 1.45; color: var(--muted); }
.choice::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 1.1rem;
  width: .8rem;
  height: .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.choice:has(input:checked)::after { border-color: #9B1B30; background: #9B1B30; box-shadow: inset 0 0 0 2px var(--surface); }
.choice:has(input:focus-visible), .pill:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 3px; }
.is-invalid .choice { border-color: #D9A49B; }

/* kinds of piece */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill > span {
  display: inline-flex;
  align-items: center;
  height: 2.6rem;
  padding: 0 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font: 500 .7rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pill { position: relative; }
.pill:hover > span { border-color: var(--ink); }
.pill:has(input:checked) > span { border-color: var(--ink); background: var(--ink); color: #fff; }
.is-invalid .pill > span { border-color: #D9A49B; }

/* the piece being asked about (and a commission's inspiration) */
.picked {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: .8rem 1rem .8rem .8rem;
  border: 1px solid var(--ink);
  border-radius: 16px;
  background: var(--surface);
}
.picked__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #fff; }
.picked__img img { width: 100%; height: 100%; object-fit: cover; }
.picked__text { display: grid; gap: .2rem; min-width: 0; }
.picked__no { font: 500 .62rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.picked__name { font: 400 1.25rem/1.2 var(--serif); }
.picked__materials { font-size: .82rem; color: var(--muted); }
.picked__change { min-width: 0; height: 2.5rem; padding: 0 1.2rem; }
.picked--small { grid-template-columns: 3.2rem minmax(0, 1fr) auto; padding: .6rem .8rem .6rem .6rem; border-color: var(--line-strong); }
.picked--small .picked__name { font-size: 1.05rem; }
.picked__remove { width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.picked__remove:hover { background: #fff; color: var(--ink); }

/* picking from the archive */
.picker { display: grid; gap: .75rem; }
.picker__bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); gap: .6rem; }
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr));
  align-content: start;
  gap: 1.1rem .75rem;
  max-height: 30rem;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #FCFBF9;
  scrollbar-width: thin;
}
.is-invalid .picker__grid { border-color: #D9A49B; }
.picker__note { grid-column: 1 / -1; padding: 1.5rem .5rem; text-align: center; font-size: .88rem; color: var(--muted); }
.pick { position: relative; display: grid; align-content: start; gap: .3rem; cursor: pointer; }
.pick__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--surface); transition: box-shadow .2s var(--ease); }
.pick__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick:hover .pick__img img { transform: scale(1.04); }
.pick__sold { position: absolute; left: .4rem; bottom: .4rem; padding: .2rem .45rem; border-radius: 999px; background: rgb(255 255 255 / .92); font: 500 .55rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pick__no { margin-top: .2rem; font: 500 .58rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pick__name { font: 400 .95rem/1.2 var(--serif); }
.pick:has(input:checked) .pick__img { box-shadow: 0 0 0 2px #FCFBF9, 0 0 0 3px var(--ink); }
.pick:has(input:focus-visible) .pick__img { outline: 2px solid var(--ink); outline-offset: 4px; }

/* sending */
.inquiry__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry__send { display: grid; gap: .9rem; margin-top: clamp(2rem, 5vw, 2.75rem); padding-top: clamp(1.9rem, 5vw, 2.6rem); border-top: 1px solid var(--line); }
.inquiry__send .btn { height: 3.5rem; font-size: .76rem; }
.inquiry__send .btn:disabled { opacity: .55; cursor: progress; }
.inquiry__status { min-height: 1.4em; text-align: center; font-size: .88rem; color: var(--muted); }
.inquiry__status.is-error { color: #A13A2B; }
.inquiry__status a, .inquiry__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inquiry__note { text-align: center; font-size: .84rem; color: var(--muted); }

/* sent */
.inquiry-done { position: relative; margin-top: clamp(2.5rem, 6vw, 3.75rem); padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-align: center; }
.inquiry-done:focus { outline: none; }
.inquiry-done::before { /* the one red dot */
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: #9B1B30;
}
.inquiry-done__title { margin-top: .8rem; font: 300 clamp(2rem, 4.5vw, 2.8rem)/1.1 var(--serif); }
.inquiry-done__text { max-width: 28rem; margin: .9rem auto 0; color: var(--muted); }
.inquiry-done__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .55rem 1.25rem; max-width: 26rem; margin: 2rem auto 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line-strong); text-align: left; font-size: .9rem; }
.inquiry-done__summary dt { font: 500 .66rem/1.9 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inquiry-done__summary dd { margin: 0; }
.inquiry-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }

@media (max-width: 760px) {
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choice { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
}
@media (max-width: 560px) {
  .contact { padding-top: 2.5rem; }
  .contact__title { font-size: 2.2rem; }
  .contact__lede { font-size: .94rem; }
  .inquiry__pair { grid-template-columns: minmax(0, 1fr); }
  .picker__bar { grid-template-columns: minmax(0, 1fr); }
  .picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .55rem; max-height: 26rem; padding: .75rem; }
  .pick__name { font-size: .84rem; }
  .pick__no { font-size: .54rem; letter-spacing: .1em; }
  .pill > span { height: 2.4rem; padding: 0 .95rem; font-size: .64rem; }
  .picked { grid-template-columns: 3.8rem minmax(0, 1fr); }
  .picked__change { grid-column: 1 / -1; width: 100%; }
  .inquiry-done__actions .btn { width: 100%; }
}

/* ---------- view transitions --------------------------------------------- */

::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
/* stepping between pieces: the photo slides the way you're heading */
html[data-step]::view-transition-group(piece) { overflow: clip; }
html[data-step="next"]::view-transition-old(piece) { animation: .4s var(--ease) both slide-to-left; }
html[data-step="next"]::view-transition-new(piece) { animation: .55s var(--ease) both slide-from-right; }
html[data-step="prev"]::view-transition-old(piece) { animation: .4s var(--ease) both slide-to-right; }
html[data-step="prev"]::view-transition-new(piece) { animation: .55s var(--ease) both slide-from-left; }
@keyframes slide-to-left { to { opacity: 0; transform: translateX(-5%); } }
@keyframes slide-to-right { to { opacity: 0; transform: translateX(5%); } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(5%); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-5%); } }

/* ---------- smaller screens ----------------------------------------------- */

@media (max-width: 959px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 2.5rem; }
  .hero__copy { max-width: none; text-align: center; }
  .hero__logo-img { margin-inline: auto; } /* images are blocks: centre them explicitly */
  .hero__actions { justify-content: center; }
  .hero__figure { width: min(100%, 28rem); }
}

@media (max-width: 759px) {
  .values { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .viewer { width: 100vw; height: 100dvh; margin: 0; box-shadow: none; }
  .viewer__inner { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .viewer__stage { display: block; }
  .viewer__media { height: auto; aspect-ratio: 4 / 5; max-height: 68dvh; }
  .viewer__info { overflow: visible; padding: 1.75rem 1.25rem 0; }
  .viewer__title { padding-right: 0; }
  .viewer__close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .8rem); right: .8rem; }
  .viewer__nav {
    position: sticky;
    bottom: 0;
    margin: 1.5rem -1.25rem 0;
    padding: 1.25rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    background: linear-gradient(rgb(255 255 255 / 0), #fff 35%);
  }
}

@media (max-width: 560px) {
  :root { --header-h: 3.5rem; --gutter: 1.1rem; }

  /* header: everything fits on one line */
  .masthead { gap: .5rem; }
  .masthead__side { gap: 1rem; }
  .masthead__side .text-link { font-size: .66rem; letter-spacing: .14em; }
  .masthead__extra { display: none; }
  .wordmark img { height: 2rem; }
  .menu-btn { margin-right: -.4rem; }

  /* the menu fills the screen */
  .menu__panel { width: 100%; box-shadow: none; }
  .menu__link { font-size: 1.75rem; }

  /* hero: smaller, calmer type */
  .hero { gap: 1.75rem; padding-top: 1.75rem; padding-bottom: 1.5rem; }
  .hero__logo-img { width: min(68%, 15rem); }
  .hero__logo-text { font-size: 2.3rem; }
  .hero__by { margin-top: .7rem; font-size: .7rem; letter-spacing: .3em; }
  .hero__title { margin-top: 1.25rem; font-size: 1.75rem; line-height: 1.15; }
  .hero__sub { margin-top: .5rem; font-size: 1.1rem; }
  .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.6rem; }
  .hero__actions .btn { min-width: 0; height: 2.75rem; padding: 0 .75rem; font-size: .68rem; letter-spacing: .14em; }

  /* collection */
  .collection { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .section-title { font-size: 1.9rem; }

  /* Archive filters: every button stays in view, wrapping into centred rows
     with the year menu at the end. */
  .filters { gap: .45rem .35rem; margin-top: 1.5rem; }

  /* Process: eight long chapter names would stack too high, so that row
     swipes sideways instead, fading at the edges; scroll-padding keeps a
     snapped chip clear of the fade. */
  .process__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 1.4rem calc(var(--gutter) * -1) 0;
    padding: .1rem var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .process__nav::-webkit-scrollbar { display: none; }
  .process__nav::after { content: ""; flex: 0 0 .1rem; } /* room after the last pill */
  .process__nav .chapter { scroll-snap-align: start; }

  /* process + about pages */
  .process { padding-top: 2.25rem; }
  .process__lede { font-size: .86rem; }
  .process__pick-name { font-size: .84rem; }
  .process__stage { margin-top: 1.75rem; }
  .process__head { margin-bottom: 1rem; }
  .process__title { font-size: 1.6rem; }
  .strip { gap: .5rem; padding: .5rem; }
  .process__next { margin-top: 1.25rem; padding: .95rem 1rem; }
  .process__next-name { font-size: 1.05rem; }
  .bio { padding-top: 2.5rem; }
  .bio__title { font-size: 2.1rem; }
  .bio__photo img { aspect-ratio: 4 / 3; object-position: 40% 50%; } /* a little taller on phones, face kept in frame */
  .bio__body > p { font-size: .94rem; line-height: 1.8; }
  .bio__quote { margin: 2rem 0; padding: 1.6rem 0; }
  .bio__quote p { font-size: 1.4rem; }
  .bio__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .bio__actions .btn { min-width: 0; padding: 0 .6rem; height: 2.9rem; font-size: .68rem; }
  .bio__sign-name { font-size: .85rem; }
  .bio__sign-meaning { font-size: 1.05rem; }

  .year-filter__text { display: none; }
  .year-filter__short { display: inline; }
  .chapter { flex: none; height: 2.25rem; padding: 0 .8rem; gap: .35rem; font-size: .64rem; letter-spacing: .1em; }
  /* Counts would add a row of buttons; the line under them ("Showing 27 of
     108") gives the number once a category is picked. */
  .chapter__count { display: none; }
  .chapter.year-filter { padding-right: 1.65rem; }
  .year-filter::after { right: .75rem; width: .32rem; height: .32rem; }
  .collection__count { font-size: .72rem; }

  .grid { gap: 1.75rem .75rem; margin-top: 1.5rem; }
  .tile__label { padding-top: .65rem; gap: .18rem; }
  .tile__meta { column-gap: .45rem; font-size: .66rem; letter-spacing: .12em; }
  .tile__chapter { display: none; } /* the filters above already say it; keeps the line short */
  .tile__chapter::before, .tile__year::before { margin-right: .45rem; }
  .tile__name { font-size: 1.04rem; }
  .tile__materials { font-size: .72rem; line-height: 1.4; }
  .tile__price { font-size: .76rem; }
  .tile__price.is-ask { font-size: .68rem; }
  .swatches--small { margin-top: .45rem; }

  /* story + footer */
  .about__inner { padding-top: 3rem; padding-bottom: 3rem; }
  .about__quote { margin-top: .75rem; font-size: 1.4rem; line-height: 1.3; }
  .values { gap: 1.4rem; margin-top: 1.75rem; padding-top: 1.6rem; }
  .value h3 { font-size: .66rem; }
  .value p { margin-top: .35rem; font-size: .8rem; }
  .footer { padding-top: 3rem; }
  .footer__title { margin-top: .75rem; font-size: 1.75rem; }
  .footer__text { margin-top: .6rem; font-size: .86rem; }
  .footer__actions { margin-top: 1.5rem; }
  .footer__actions .btn { min-width: 0; width: 100%; max-width: 16rem; height: 2.9rem; }
  .footer__email { font-size: .8rem; }
  .footer__base { margin-top: 2.5rem; font-size: .7rem; }
}

@media (max-width: 380px) {
  .masthead__side:first-child .text-link { display: none; } /* small phones: ≡, the mark and Process */
}

/* ---------- motion preferences -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .tile { opacity: 1; transform: none; }
}