/* ==========================================================================
   Fonts — self-hosted, subset to Latin and to the weights this site uses.
   Variable weight axes, so 300/400/500 all come from one file per family.
   Cormorant Garamond and Archivo are SIL Open Font Licence 1.1;
   the licences ship alongside the files in assets/fonts/.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/cormorant-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   SERIMONT — design system
   Palette sampled directly from the wordmark:
     ground  #241717   letterform  #C7A673
   Type: Cormorant Garamond (matches the wordmark) + Archivo (functional)
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --espresso:      #241717;   /* logo ground */
  --espresso-deep: #170E0E;   /* full-bleed / footer */
  --espresso-mid:  #33221F;   /* raised surface on dark */
  --brass:         #C7A673;   /* logo letterform */
  --brass-deep:    #AB8D63;
  --chalk:         #E7E1D7;   /* warm limestone, light ground */
  --chalk-deep:    #DAD2C5;
  --ink:           #241717;
  --ink-soft:      #5B4843;
  --line-dark:     rgba(199, 166, 115, 0.26);
  --line-light:    rgba(36, 23, 23, 0.16);

  /* ---- type ---- */
  --serif: "Cormorant Garamond", "Cormorant", "Times New Roman", Times, serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-hero:    clamp(2.55rem, 5vw, 7rem);
  --t-display: clamp(2.45rem, 5.6vw, 5rem);
  --t-section: clamp(1.95rem, 3.4vw, 3.05rem);
  --t-title:   clamp(1.35rem, 1.9vw, 1.8rem);
  --t-body:    clamp(1rem, 0.42vw + 0.9rem, 1.1rem);
  --t-small:   0.8125rem;
  --t-label:   0.6875rem;

  /* ---- layout ---- */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 70ch;
  --bay: clamp(5rem, 10.5vw, 10.5rem);
  --rule: 1px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 200;
  background: var(--espresso); color: var(--brass);
  padding: 0.9rem 1.4rem; font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   Typography primitives
   ========================================================================== */
.serif   { font-family: var(--serif); font-weight: 300; }
.hero-type {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.005em;
}
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-section);
  line-height: 1.08;
}
.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.2;
}
.lede {
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  line-height: 1.6;
}
p { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
.muted { color: var(--ink-soft); }
.dim   { color: rgba(231, 225, 215, 0.62); }

/* Functional label: used only for navigation, controls and form fields. */
.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1;
}
.meta {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* ==========================================================================
   Grid & sections
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
}
.bay { padding-block: var(--bay); }
.bay-t { padding-top: var(--bay); }
.bay-b { padding-bottom: var(--bay); }

.on-dark { background: var(--espresso); color: var(--chalk); }
.on-dark .muted { color: rgba(231, 225, 215, 0.66); }
.on-dark .meta  { color: rgba(231, 225, 215, 0.6); }
.on-deep { background: var(--espresso-deep); color: var(--chalk); }

.rule { border: 0; border-top: var(--rule) solid var(--line-light); margin: 0; }
.on-dark .rule { border-top-color: var(--line-dark); }

/* Section marker: a hairline plus the section's own name — structural, not decorative */
.marker {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-top: 0.9rem;
  border-top: var(--rule) solid var(--line-light);
  color: var(--ink-soft);
}
.on-dark .marker { border-top-color: var(--line-dark); color: var(--brass-deep); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.15em 2.5em;
  border: var(--rule) solid currentColor;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.btn--brass { color: var(--brass); }
.btn--brass:hover, .btn--brass:focus-visible { background: var(--brass); color: var(--espresso); }
.btn--ink { color: var(--ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--ink); color: var(--chalk); }
.btn--solid { background: var(--espresso); color: var(--chalk); border-color: var(--espresso); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--espresso); }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.ulink {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
  position: relative;
}
.ulink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.ulink:hover::after, .ulink:focus-visible::after { opacity: 1; }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--chalk);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
              border-color 0.5s var(--ease);
  border-bottom: var(--rule) solid transparent;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: clamp(66px, 7vw, 92px);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--brass);
  white-space: nowrap;
}
.masthead--solid { background: var(--espresso); border-bottom-color: var(--line-dark); }
.masthead--light, .masthead--light.masthead--solid {
  background: var(--chalk); color: var(--ink); border-bottom-color: var(--line-light);
}
.masthead--light .wordmark { color: var(--espresso); }
.masthead--light .btn--brass { color: var(--ink); }
.masthead--light .btn--brass:hover { background: var(--ink); color: var(--chalk); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav a { position: relative; padding-block: 0.4rem; }
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: 0.95em 1.6em; }

.menu-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem 0;
  cursor: pointer; color: inherit;
  letter-spacing: 0.17em; text-transform: uppercase;
  font-size: var(--t-label); font-weight: 500;
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--espresso);
  color: var(--chalk);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0.6s;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer a:not(.btn) {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.5;
  border-bottom: var(--rule) solid var(--line-dark);
}
.drawer .btn { margin-top: 2.5rem; width: 100%; }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
}

/* ==========================================================================
   Hero — split field: motto on the logo ground, garment full-bleed
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--espresso);
  color: var(--chalk);
  isolation: isolate;
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(7rem, 14vh, 11rem) clamp(1.25rem, 4vw, 4.5rem) clamp(2.75rem, 6vh, 4.5rem) var(--gutter);
}
.hero__motto { max-width: 15ch; }
.hero__motto span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.hero__motto span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  animation: rise 1.15s var(--ease) forwards;
}
.hero__motto span:nth-child(1) > i { animation-delay: 0.15s; }
.hero__motto span:nth-child(2) > i { animation-delay: 0.27s; }
.hero__motto span:nth-child(3) > i { animation-delay: 0.39s; }
.hero__motto span:nth-child(4) > i { animation-delay: 0.51s; }
@keyframes rise { to { transform: translateY(0); } }

.hero__foot {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  opacity: 0;
  animation: fade 1s var(--ease) 0.95s forwards;
}
.hero__origin {
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
  opacity: 0;
  animation: fade 1s var(--ease) 0.2s forwards;
  color: var(--brass-deep);
}
@keyframes fade { to { opacity: 1; } }

.hero__figure { position: relative; overflow: hidden; }
.hero__figure picture { position: absolute; inset: 0; }
.hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 42%;
  transform: scale(1.06);
  animation: settle 2.2s var(--ease) 0.05s forwards;
}
@keyframes settle { to { transform: scale(1); } }
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(36, 23, 23, 0.55) 0%, rgba(36, 23, 23, 0) 38%);
  pointer-events: none;
}
.hero__caption {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 2;
  text-align: right;
  color: rgba(231, 225, 215, 0.78);
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 14px rgba(23, 14, 14, 0.7);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 54svh auto;
    min-height: auto;
  }
  .hero__figure { order: -1; }
  .hero__figure::after {
    background: linear-gradient(180deg, rgba(36, 23, 23, 0.5) 0%, rgba(36, 23, 23, 0) 30%, rgba(36, 23, 23, 0.35) 100%);
  }
  .hero__text { padding: clamp(2.5rem, 7vw, 3.5rem) var(--gutter) clamp(3rem, 9vw, 4rem); }
  .hero__origin { margin-bottom: 1.5rem; }
  .hero__motto { max-width: 20ch; font-size: clamp(2.55rem, 10.5vw, 4.5rem); }
  .hero__foot .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.pagehead {
  background: var(--espresso);
  color: var(--chalk);
  padding-top: clamp(9rem, 16vh, 13rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
.pagehead .display { max-width: 24ch; }
.pagehead .lede { color: rgba(231, 225, 215, 0.72); }

/* ==========================================================================
   Statement / intro
   ========================================================================== */
.statement__head { grid-column: 1 / span 6; }
.statement__body { grid-column: 7 / span 6; align-self: end; }
@media (max-width: 900px) {
  .statement__head, .statement__body { grid-column: 1 / -1; }
  .statement__body { margin-top: 2.5rem; }
}

/* ==========================================================================
   Ledger — the sourcing network, set as a bill of origins
   ========================================================================== */
.ledger { border-top: var(--rule) solid var(--line-dark); margin-top: clamp(2.5rem, 6vw, 4rem); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.6rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
  border-bottom: var(--rule) solid var(--line-dark);
  align-items: baseline;
}
.ledger__place {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.05;
  color: var(--chalk);
}
.ledger__what { color: var(--brass); margin-bottom: 0.55rem; }
.ledger__note { color: rgba(231, 225, 215, 0.68); font-size: 0.98rem; }
@media (max-width: 720px) {
  .ledger__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Editorial image blocks
   ========================================================================== */
figure.plate { position: relative; }
figure.plate img { width: 100%; }
figure.plate figcaption {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  border-top: var(--rule) solid var(--line-light);
  padding-top: 0.75rem;
}
.on-dark figure.plate figcaption { color: rgba(231, 225, 215, 0.66); border-top-color: var(--line-dark); }

/* ruled index: what is made, set as text — the pieces themselves are photographed
   in the collection, so this run carries no plates */
.lines { border-top: var(--rule) solid var(--line-light); }
.line {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 4vw, 5rem);
  row-gap: 0.45rem;
  padding-block: clamp(1.7rem, 3.4vw, 2.4rem);
  border-bottom: var(--rule) solid var(--line-light);
}
.line__d { grid-column: 2; max-width: 56ch; }
.line__m { grid-column: 2; color: rgba(36, 23, 23, 0.5); }
@media (max-width: 900px) {
  .line { grid-template-columns: minmax(0, 1fr); }
  .line__d, .line__m { grid-column: 1; }
}

/* ==========================================================================
   Process — a genuine sequence, so it is numbered
   ========================================================================== */
.process { column-gap: clamp(1.5rem, 4vw, 5rem); }
.process__aside { grid-column: 1 / span 4; }
.process__list { grid-column: 5 / span 8; border-top: var(--rule) solid var(--line-light); }
.on-dark .process__list { border-top-color: var(--line-dark); }
.step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: var(--rule) solid var(--line-light);
}
.on-dark .step { border-bottom-color: var(--line-dark); }
.step__n {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--brass-deep);
  font-weight: 400;
}
.step__t { grid-column: 2; }
.step__d { grid-column: 2; color: var(--ink-soft); margin-top: 0.35rem; }
.on-dark .step__d { color: rgba(231, 225, 215, 0.68); }
@media (max-width: 900px) {
  .process__aside, .process__list { grid-column: 1 / -1; }
  .process__list { margin-top: 2.5rem; }
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* sticky aside on tall screens */
@media (min-width: 901px) {
  .process__aside { position: sticky; top: clamp(7rem, 12vh, 10rem); }
}

/* ==========================================================================
   Full-bleed band
   ========================================================================== */
.band {
  position: relative;
  min-height: clamp(380px, 62vh, 620px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--espresso-deep);
}
.band__media { position: absolute; inset: 0; }
.band__media picture { height: 100%; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 14, 14, 0.5) 0%, rgba(23, 14, 14, 0.15) 45%, rgba(23, 14, 14, 0.82) 100%);
}
.band__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vh, 5rem); color: var(--chalk); }

/* ==========================================================================
   Drawn media — the hero panel and the full-bleed bands carry pencil studies on
   cream paper, so the scrims and the caption invert against the photographic case
   ========================================================================== */
.hero__figure--drawn { background: var(--chalk); }
.hero__figure--drawn img { object-position: 50% 44%; }
.hero__figure--drawn .hero__caption {
  color: rgba(36, 23, 23, 0.62);
  text-shadow: 0 1px 12px rgba(231, 225, 215, 0.9);
}
@media (max-width: 900px) {
  .hero__figure--drawn img { object-position: 50% 42%; }
  .hero__figure--drawn::after {
    background: linear-gradient(180deg, rgba(36, 23, 23, 0.4) 0%, rgba(36, 23, 23, 0) 34%);
  }
}

.band--drawn { background: var(--chalk); }
.band--drawn .band__media img { object-position: center 44%; }
.band--drawn .band__media::after {
  background: linear-gradient(180deg, rgba(23, 14, 14, 0.6) 0%, rgba(23, 14, 14, 0.32) 38%, rgba(23, 14, 14, 0.88) 100%);
}

/* ==========================================================================
   Collection grid + lightbox
   ========================================================================== */
.pieces { row-gap: clamp(3rem, 7vw, 6rem); }
.piece { grid-column: span 6; }
/* Two per row, on the same two columns all the way down the page. */
.piece--p1, .piece--p3, .piece--p5 { grid-column: 1 / span 6; }
.piece--p2, .piece--p4, .piece--p6 { grid-column: 7 / span 6; }
.piece button {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden;
}
.piece img { transition: transform 1.1s var(--ease); width: 100%; }
.piece button:hover img, .piece button:focus-visible img { transform: scale(1.035); }
@media (max-width: 900px) {
  .piece,
  .piece--p1, .piece--p2, .piece--p3, .piece--p4, .piece--p5, .piece--p6 { grid-column: 1 / -1; }
}

.lightbox {
  border: 0; padding: 0; margin: 0; inset: 0;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--espresso-deep);
  color: var(--chalk);
}
.lightbox::backdrop { background: rgba(23, 14, 14, 0.94); }
.lightbox__stage {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(1.25rem, 3vw, 2rem);
  gap: 1rem;
}
.lightbox__stage img { max-height: 100%; max-width: 100%; margin-inline: auto; object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__nav { display: flex; gap: 0.5rem; }
.lightbox__nav button, .lightbox__close {
  background: none; border: var(--rule) solid var(--line-dark); color: var(--brass);
  width: 2.75rem; height: 2.75rem; cursor: pointer; line-height: 1;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.lightbox__nav button:hover, .lightbox__close:hover { background: var(--brass); color: var(--espresso); }

/* ==========================================================================
   Materials
   ========================================================================== */
.material {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: var(--rule) solid var(--line-light);
}
.material:first-of-type { border-top: var(--rule) solid var(--line-light); }
.material__spec { margin-top: 1.75rem; border-top: var(--rule) solid var(--line-light); }
.material__spec div {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem;
  padding-block: 0.7rem; border-bottom: var(--rule) solid var(--line-light);
  font-size: var(--t-small);
}
.material__spec dt { color: var(--ink-soft); letter-spacing: 0.04em; }
.material__spec dd { margin: 0; }
@media (max-width: 800px) {
  .material__spec div { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ==========================================================================
   Placeholder plate — used where real photography is not yet supplied
   ========================================================================== */
.placeholder {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(135deg, rgba(36,23,23,0.045) 0 2px, transparent 2px 9px),
    var(--chalk-deep);
  border: var(--rule) solid var(--line-light);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--ink-soft);
}
.on-dark .placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(199,166,115,0.07) 0 2px, transparent 2px 9px),
    var(--espresso-mid);
  border-color: var(--line-dark);
  color: rgba(231, 225, 215, 0.6);
}
.placeholder--wide { aspect-ratio: 16 / 10; }

/* ==========================================================================
   Booking funnel
   ========================================================================== */
.booking { padding-top: clamp(8rem, 15vh, 11rem); padding-bottom: var(--bay); }
.booking__shell { grid-column: 1 / span 8; }
@media (max-width: 1100px) { .booking__shell { grid-column: 1 / span 10; } }
@media (max-width: 800px)  { .booking__shell { grid-column: 1 / -1; } }

.progress { display: flex; gap: 0; margin-block: clamp(2rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem); }
.progress li {
  flex: 1;
  border-top: 2px solid var(--line-light);
  padding-top: 0.85rem;
  font-size: var(--t-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.progress li[data-state="done"] { border-top-color: var(--brass-deep); color: var(--ink-soft); }
.progress li[data-state="current"] { border-top-color: var(--ink); color: var(--ink); }

.panel { display: none; }
.panel[data-active="true"] { display: block; animation: panelIn 0.5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; margin-top: 2rem; background: var(--line-light); border: var(--rule) solid var(--line-light); }
.choice { position: relative; background: var(--chalk); }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: block; padding: 1.6rem 1.4rem;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.choice small { display: block; font-family: var(--sans); font-size: var(--t-small); color: var(--ink-soft); margin-top: 0.35rem; transition: color 0.35s var(--ease); }
.choice input:hover + span { background: var(--chalk-deep); }
.choice input:checked + span { background: var(--espresso); color: var(--chalk); }
.choice input:checked + span small { color: var(--brass); }
.choice input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: -4px; }

.fields { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); margin-top: 2rem; }
.fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .fields--2 { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 0.7rem; }
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--rule) solid var(--line-light);
  padding: 0.75rem 0;
  font-size: 1.05rem;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ink); border-bottom-width: 1px;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.err { display: block; margin-top: 0.5rem; font-size: var(--t-small); color: #8C3A2B; min-height: 1.2em; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select { border-bottom-color: #8C3A2B; }
fieldset[data-invalid="true"] .choices, fieldset[data-invalid="true"] .slots { box-shadow: 0 0 0 1px #8C3A2B; }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slot span {
  display: block; text-align: center; padding: 0.95rem 0.5rem;
  border: var(--rule) solid var(--line-light);
  font-size: var(--t-small); letter-spacing: 0.06em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.slot input:hover + span { border-color: var(--ink); }
.slot input:checked + span { background: var(--espresso); color: var(--chalk); border-color: var(--espresso); }
.slot input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); align-items: center; }
.summary { margin-top: 2rem; border-top: var(--rule) solid var(--line-light); }
.summary div {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem;
  padding-block: 0.85rem; border-bottom: var(--rule) solid var(--line-light);
}
.summary dt { color: var(--ink-soft); font-size: var(--t-small); letter-spacing: 0.04em; }
.summary dd { margin: 0; }
@media (max-width: 600px) { .summary div { grid-template-columns: 7rem minmax(0, 1fr); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--espresso-deep); color: var(--chalk); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; }
.foot__cols { row-gap: 2.5rem; }
.foot__brand { grid-column: 1 / span 4; }
.foot__nav   { grid-column: 5 / span 4; }
.foot__cont  { grid-column: 9 / span 4; }
.foot a:hover { color: var(--brass); }
.foot li + li { margin-top: 0.7rem; }
.foot__base {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: var(--t-small);
  color: rgba(231, 225, 215, 0.55);
}
@media (max-width: 900px) {
  .foot__brand, .foot__nav, .foot__cont { grid-column: 1 / -1; }
}

/* ==========================================================================
   Scroll reveal — applied only to editorial plates, not to every element
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__motto span > i, .hero__foot, .hero__origin, .hero__figure img { transform: none; opacity: 1; }
}

/* ==========================================================================
   LAYOUT SYSTEM
   Every section uses the same 12-column grid and the same named columns, so
   headings, body copy and images start at the same horizontal positions all
   the way down the site. Text blocks are halves or thirds of the field and
   always run to column 12, so no row stops short of the right edge. Nothing
   is centred except the hero-scale statements deliberately composed that way.
   ========================================================================== */
.col-title { grid-column: 1 / span 6; }
.col-note  { grid-column: 7 / span 6; }
.col-wide  { grid-column: 1 / span 8; }
.col-lead  { grid-column: 1 / span 7; }
.col-a     { grid-column: 1 / span 6; }
.col-b     { grid-column: 7 / span 6; }
.col-c     { grid-column: 8 / span 5; }
.col-third { grid-column: span 4; }
.col-t2    { grid-column: 5 / span 4; }
.col-t3    { grid-column: 9 / span 4; }
.col-doc   { grid-column: 1 / -1; }
.col-full  { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .col-title, .col-note, .col-wide, .col-lead,
  .col-a, .col-b, .col-c, .col-third,
  .col-t2, .col-t3, .col-doc, .col-full { grid-column: 1 / -1; }
}

/* Section header: hairline, name, title, and an optional note in the side
   column. One component, so the rhythm never drifts between sections. */
.head { row-gap: clamp(1.5rem, 3vw, 2rem); margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.head__marker { grid-column: 1 / -1; }
.head__title  { grid-column: 1 / span 7; }
.head__note   { grid-column: 8 / span 5; align-self: end; }
.head--wide .head__title { grid-column: 1 / span 7; }
/* A page header's lede is the note column: title left, lede right, both
   sitting on the same baseline, so every page opens the same way. */
.head .lede { grid-column: 8 / span 5; align-self: end; }
@media (max-width: 900px) {
  .head__title, .head__note, .head--wide .head__title { grid-column: 1 / -1; }
  .head .lede { grid-column: 1 / -1; margin-top: 1.5rem; }
  .head { margin-bottom: clamp(2.25rem, 8vw, 3rem); }
}

/* Body copy keeps one measure everywhere it appears. */
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: 1.15em; }
.stack > * + .btn, .stack > * + .ulink { margin-top: 2rem; }

/* ==========================================================================
   Sourcing map
   ========================================================================== */
.worldmap { width: 100%; height: auto; display: block; }
.worldmap__land path {
  fill: rgba(199, 166, 115, 0.085);
  stroke: rgba(199, 166, 115, 0.34);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.mapmark circle { fill: var(--brass); stroke: none; }
.mapmark line { stroke: var(--brass-deep); stroke-width: 0.7; }
.mapmark text {
  fill: var(--brass);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
}
.mapmark__halo { fill: none !important; stroke: var(--brass-deep); stroke-width: 0.7; opacity: 0.45; }
/* Switzerland is where the client actually stands, so it reads a shade louder. */
.mapmark--home circle:first-child { r: 4.4; }
.mapmark--home .mapmark__halo { opacity: 0.85; stroke: var(--brass); }
.mapfig { margin: 0; }
.mapfig figcaption {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: var(--rule) solid var(--line-dark);
  font-size: var(--t-small);
  color: rgba(231, 225, 215, 0.6);
}

/* numeral keying the ledger rows to the map */
.ledger__row { position: relative; }
.ledger__n {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--brass-deep);
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   Appointment — location panel and what the visit covers
   ========================================================================== */
.where {
  border: var(--rule) solid var(--line-light);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.on-dark .where { border-color: var(--line-dark); }
.where__city {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.05;
}
.where__country { color: var(--brass-deep); margin-top: 0.5rem; }
.includes { margin-top: clamp(1.75rem, 4vw, 2.25rem); border-top: var(--rule) solid var(--line-light); }
.on-dark .includes { border-top-color: var(--line-dark); }
.includes li {
  padding-block: 0.8rem;
  border-bottom: var(--rule) solid var(--line-light);
  font-size: 0.98rem;
}
.on-dark .includes li { border-bottom-color: var(--line-dark); }

/* A request, not a reservation — said plainly wherever the form appears. */
.notice {
  border-left: 2px solid var(--brass-deep);
  padding: 0.15rem 0 0.15rem 1.15rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.on-dark .notice { color: rgba(231, 225, 215, 0.66); }

/* ==========================================================================
   Remote service — deliberately quieter than the Lausanne appointment
   ========================================================================== */
.remote { background: var(--chalk-deep); }
.remote__inner { padding-block: clamp(3.5rem, 8vw, 6rem); }
.remote .title { margin-bottom: 1rem; }
.remote__form { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Map on small screens.
   The SVG scales to roughly a quarter of its drawn size on a phone, which
   makes 15-unit numerals and hairline leaders unreadable. Rather than shrink
   an unreadable diagram, the map drops to marked points only and the ledger
   below carries the naming. The Swiss mark stays emphasised either way.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .mapmark text, .mapmark line { display: none; }
  .mapmark circle { r: 9; }
  .mapmark__halo { r: 22; stroke-width: 2; }
  .mapmark--home circle:first-child { r: 12; }
  .ledger__n { display: none; }
  .worldmap__land path { stroke-width: 1.1; }
}

/* --------------------------------------------------------------------------
   Closing statement.
   The only centred composition on the site. Everything else is left-aligned
   editorial; this one moment is centred deliberately so the page resolves
   rather than simply stopping.
   -------------------------------------------------------------------------- */
.closing { text-align: center; }
.closing__motto {
  margin-inline: auto;
  max-width: 20ch;
}
.closing__rule {
  width: 64px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  border: 0;
  border-top: var(--rule) solid var(--line-dark);
}
.closing__where {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  color: rgba(231, 225, 215, 0.62);
}
.closing .btn { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); }