/* Maison Talvrenne — homepage. Tokens from clients/watch/design.md. */

:root {
  /* Colour */
  --paper: #F3F0E8;
  --graphite: #232824;
  --slate: #535D56;
  --bench: #314A3D;
  --movement: #171C19;
  --sage: #B9C2B9;
  --brass: #9D845B;
  --mineral: #737A70;

  /* Spacing */
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-176: 11rem;

  /* Grid */
  --content-max: 82rem; /* 1312px */
  --margin: 1.5rem;
  --gutter: 1rem;
  --section-pad: var(--space-64);
  --target: 3rem; /* 48px */

  /* Type: mobile 390px → desktop 1440px */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Public Sans", Arial, sans-serif;
  --h1: clamp(2.75rem, 1.729rem + 4.19vw, 5.5rem);
  --h2: clamp(2rem, 1.629rem + 1.524vw, 3rem);
  --h3: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem);
  --lead: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
  --body: 1rem;
  --small: 0.875rem;
  --eyebrow: 0.75rem;
  --lh-h1: 1.05;
  --lh-h2: 1.15;

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

@media (min-width: 768px) {
  :root { --margin: 2rem; --gutter: 1.5rem; --h1: min(clamp(2.75rem, 1.729rem + 4.19vw, 5.5rem), 4rem); --h2: min(clamp(2rem, 1.629rem + 1.524vw, 3rem), 2.5rem); }
}
@media (min-width: 1024px) {
  :root { --margin: 3rem; --section-pad: var(--space-96); --lh-h1: 1; --lh-h2: 1.08; --h1: clamp(2.75rem, 1.729rem + 4.19vw, 5.5rem); --h2: clamp(2rem, 1.629rem + 1.524vw, 3rem); }
}
@media (min-width: 1440px) {
  :root { --margin: 4rem; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
}
h1 { font-size: var(--h1); line-height: var(--lh-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--h2); line-height: var(--lh-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--h3); line-height: 1.25; }

p, figure, dl, dd, ol, ul { margin: 0; }
p { max-width: 62ch; }

[role="list"] { list-style: none; padding: 0; }

.wrap {
  width: min(100% - 2 * var(--margin), var(--content-max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.grid > * { grid-column: 1 / -1; }

section { padding-block: var(--section-pad); }
.ruled .wrap { border-top: 1px solid var(--mineral); padding-top: var(--section-pad); }
.ruled { padding-top: 0; }

.dark { background: var(--movement); color: var(--paper); }

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

/* Text roles */

.eyebrow {
  font-size: var(--eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-24);
}
.lead { font-size: var(--lead); line-height: 1.6; max-width: 36ch; }
.helper, figcaption { font-size: var(--small); color: var(--slate); }
.dark figcaption, .dark .helper { color: var(--sage); }
h1 + p, h2 + p { margin-top: var(--space-24); }
p + p { margin-top: var(--space-16); }
figure img + figcaption { margin-top: var(--space-16); }

/* Focus: 2px surface separation + 2px outer ring */

:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
.dark :focus-visible {
  outline-color: var(--paper);
  box-shadow: 0 0 0 2px var(--movement);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
}

/* Skip link */

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);
  z-index: 10;
  padding: var(--space-16) var(--space-24);
  background: var(--paper);
  color: var(--bench);
  font-weight: 500;
  font-size: var(--small);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Programmatic focus targets (skip link, section headings, dialog and dossier
   headings) keep the ring, and clear the viewport edge when scrolled to. */
#main:focus, h1:focus, h2:focus, #request-title:focus,
#dossier-bevels:focus, #dossier-corners:focus, #dossier-black-polish:focus {
  outline: 2px solid var(--graphite);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
.dark h2:focus {
  outline-color: var(--paper);
  box-shadow: 0 0 0 2px var(--movement);
}
@media (forced-colors: active) {
  #main:focus, h1:focus, h2:focus, #request-title:focus,
  #dossier-bevels:focus, #dossier-corners:focus, #dossier-black-polish:focus { outline: 2px solid Highlight; }
}
h1, h2, h3, #main { scroll-margin-top: 0.5rem; }

/* Links and buttons */

a { color: var(--bench); }
.dark a { color: var(--sage); }

a, summary {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 400ms var(--ease);
}
a:hover, summary:hover { text-decoration-thickness: 2px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target);
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  background-color: currentColor;
  mask: url("../../clients/watch/assets/arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../../clients/watch/assets/arrow-right.svg") center / contain no-repeat;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--bench);
  border-radius: 0;
  background: var(--bench);
  color: var(--paper);
  font: 500 var(--small) / 1.5 var(--font-sans);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
}
.button:hover, .button:active { background: var(--graphite); border-color: var(--graphite); }
.button:disabled {
  background: var(--paper);
  border-color: var(--mineral);
  color: var(--slate);
  cursor: not-allowed;
}

.text-button {
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--space-16);
  border: 0;
  background: var(--paper);
  color: var(--bench);
  font: 500 var(--small) / 1.5 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
}
.text-button:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 0.25em; }

.action { margin-top: var(--space-32); }
.action .helper { margin-top: var(--space-16); }

/* Disclosures */

.disclosure summary {
  display: list-item;
  min-height: var(--target);
  padding-block: 0.75rem;
  color: var(--bench);
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  cursor: pointer;
}
.dark .disclosure summary { color: var(--sage); }
.disclosure[open] > summary { margin-bottom: var(--space-16); }
.disclosure-body h3 { margin-top: var(--space-24); margin-bottom: var(--space-8); }

/* Header */

.site-header { border-bottom: 0; }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-24);
  min-height: 5rem;
  border-bottom: 1px solid var(--mineral);
}
.wordmark { display: inline-flex; align-items: center; min-height: var(--target); }
.wordmark img { width: 13rem; max-width: 100%; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--graphite);
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left calc(50% + 0.85em) / 0 1px no-repeat;
  transition: background-size 400ms var(--ease);
}
.nav-list a:hover { color: var(--bench); background-size: 100% 1px; }
.nav-list a[aria-current] { color: var(--bench); background-size: 100% 1px; }

.menu-toggle { display: none; }

@media (max-width: 767px) {
  .js-ready .menu-toggle {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    min-width: var(--target);
    padding: 0 var(--space-8);
    border: 0;
    background: var(--paper);
    color: var(--bench);
    font: 500 var(--small) / 1.5 var(--font-sans);
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
  }
  .site-nav { flex: 1 0 100%; }
  .nav-list { flex-direction: column; padding-bottom: var(--space-16); }
  .js-ready .nav-list:not(.is-open) { display: none; }
}

@media (min-width: 1024px) {
  .header-inner { min-height: 6rem; }
  .wordmark img { width: 19rem; }
}

/* 1. Hero */

.hero { padding-top: var(--space-64); }
.hero-copy { margin-bottom: var(--space-32); }
.hero .button { width: 100%; }
.hero-figure figcaption { text-align: center; }

@media (min-width: 768px) {
  .hero-copy { grid-column: 1 / 5; margin: var(--space-48) 0 0; }
  .hero-figure { grid-column: 5 / -1; }
  .hero .button { width: auto; }
}
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / 6; margin-top: var(--space-64); }
  .hero-figure { grid-column: 7 / -1; }
}

/* 2. Calibre */

.calibre .grid { row-gap: var(--space-32); }
.calibre-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.diagram-art { display: flex; gap: var(--space-8); }
.diagram-art img { flex: 1; min-width: 0; }
.diagram-numbers {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  color: var(--sage);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-16);
  margin-top: var(--space-16);
  color: var(--sage);
  font-size: var(--small);
}

.ledger h3 {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--mineral);
  font-family: var(--font-sans);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.5;
}
.ledger dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-16);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--mineral);
}
.ledger dt { color: var(--sage); font-size: var(--small); }
.ledger dd { font-variant-numeric: tabular-nums; }

/* Mobile keeps DOM order: intro, photo, diagram, ledger, link. */
@media (min-width: 768px) {
  .calibre-intro { grid-column: 1 / 5; grid-row: 1; }
  .calibre-link { grid-column: 1 / 5; grid-row: 2; align-self: end; }
  .calibre-photo { grid-column: 5 / -1; grid-row: 1 / span 2; }
  .calibre-diagram { grid-column: 1 / 5; grid-row: 3; }
  .ledger { grid-column: 5 / -1; grid-row: 3; }
}
@media (min-width: 1024px) {
  .calibre-photo { grid-column: 5 / 9; }
  .calibre-diagram { grid-column: 9 / 11; grid-row: 1 / span 2; }
  .ledger { grid-column: 9 / -1; grid-row: 3; }
}

/* 3. Finishing */

.section-intro { margin-bottom: var(--space-48); }
.finishing-grid { display: grid; gap: var(--space-48) var(--gutter); }
@media (min-width: 1024px) { .finishing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.operation img { aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }
.diptych-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.operation h3 { margin-top: var(--space-24); }
.operation h3 + p { margin-top: var(--space-8); }
.operation .link { margin-top: var(--space-8); }

/* 4. Workshop */

.workshop .grid { row-gap: var(--space-32); }
.workshop-eyebrow { margin-bottom: 0; }
.workshop-figure img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

@media (min-width: 768px) {
  .workshop-figure { grid-column: 1 / 5; grid-row: 2 / 4; }
  .workshop-copy { grid-column: 5 / -1; grid-row: 2; }
  .workshop-more { grid-column: 5 / -1; grid-row: 3; }
}
@media (min-width: 1024px) {
  .workshop-figure { grid-column: 1 / 8; }
  .workshop-copy, .workshop-more { grid-column: 9 / -1; }
  .workshop-copy { align-self: center; }
}

/* 5. Dossier and shared ruled rows */

.dossier .grid { row-gap: var(--space-32); }
.dossier-figure img { aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }

.rows { border-top: 1px solid var(--mineral); }
.rows > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-8);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--mineral);
}
.rows .num { color: var(--slate); font-variant-numeric: tabular-nums; }

.dossier-more .disclosure-body { max-width: 62ch; }

@media (min-width: 768px) {
  .dossier-copy, .dossier-rows, .dossier-more { grid-column: 1 / 5; }
  .dossier-figure { grid-column: 5 / -1; grid-row: 1 / span 3; }
}
@media (min-width: 1024px) {
  .dossier-copy, .dossier-rows, .dossier-more { grid-column: 1 / 6; }
  .dossier-figure { grid-column: 6 / -1; }
}

/* 6. Ownership */

.ownership .grid { row-gap: var(--space-32); }
.ownership-figure img { aspect-ratio: 3 / 1; object-fit: cover; width: 100%; }

.stages { display: flex; flex-direction: column; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .stages { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-8); }
  .stages > li + li::before { content: "→"; content: "→" / ""; margin-right: var(--space-8); }
}
.provisions .disclosure { margin-top: var(--space-16); }

@media (min-width: 768px) {
  .ownership-copy, .ownership-figure { grid-column: 1 / 5; }
  .provisions { grid-column: 5 / -1; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 1024px) {
  .ownership-copy { grid-column: 1 / 7; }
  .ownership-figure { grid-column: 1 / 8; }
  .provisions { grid-column: 8 / -1; }
}

/* 7. Appointment */

.appointment .grid { row-gap: var(--space-32); }
.appointment .button { width: 100%; }
.appointment-figure img { aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }

@media (min-width: 768px) {
  .appointment-figure { grid-column: 1 / 5; grid-row: 1; }
  .appointment-copy { grid-column: 5 / -1; grid-row: 1; align-self: center; }
  .appointment .button { width: auto; }
}
@media (min-width: 1024px) {
  .appointment-figure { grid-column: 1 / 8; }
  .appointment-copy { grid-column: 8 / -1; }
}

/* Appointment request: modal with JavaScript, inline without */

html:not(.js-ready) .request-trigger,
html:not(.js-ready) .close-request { display: none; }
.js-ready .nojs-only { display: none; }

.request {
  max-width: none;
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--mineral);
  background: var(--paper);
  color: var(--graphite);
}
.request:not(:modal) { position: static; width: auto; margin: var(--space-32) 0 0; }
.js-ready .request:not(:modal) { display: none; }
.request:modal {
  width: min(40rem, calc(100% - 3rem));
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
}
.request::backdrop { background: var(--movement); }
.request h3 { margin-bottom: var(--space-16); }
.request .notice { margin-top: var(--space-16); font-weight: 500; }
.status:empty { margin: 0; }
.status { margin-top: var(--space-16); font-weight: 500; }

.request-form { margin-top: var(--space-24); }
.field { margin: 0 0 var(--space-24); padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
  padding: 0;
  margin-bottom: var(--space-8);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.5;
}
.field label { display: block; }
/* Legend keeps its native display so it stays the group's accessible name. */
.field legend { float: left; width: 100%; }
.field input:not([type="radio"]), .field textarea {
  display: block;
  width: 100%;
  min-height: var(--target);
  padding: 0.75rem var(--space-16);
  border: 1px solid var(--mineral);
  border-radius: 0;
  background: var(--paper);
  color: var(--graphite);
  font: 400 var(--body) / 1.6 var(--font-sans);
}
.field input:hover, .field textarea:hover { border-color: var(--bench); }
.field [aria-invalid="true"]:not([type="radio"]) { border: 2px solid var(--graphite); }

.field .radio {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--target);
  margin: 0;
  font-weight: 400;
  font-size: var(--body);
  cursor: pointer;
}
.radio input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--bench); }

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  color: var(--graphite);
  font-size: var(--small);
  font-weight: 500;
}
.field-error[hidden] { display: none; }
.field-error::before {
  content: "!" / "";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--paper);
  font-size: 0.75rem;
  line-height: 1;
}
@media (forced-colors: active) {
  .field-error::before { border: 1px solid CanvasText; }
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
.request .nojs-only { margin-top: var(--space-16); }

.preview-list { margin-top: var(--space-24); }
.preview-list > div { padding-block: var(--space-8); border-bottom: 1px solid var(--mineral); }
.preview-list dt { color: var(--slate); font-size: var(--small); }
.preview-list dd { overflow-wrap: anywhere; white-space: pre-line; }

/* Footer */

.site-footer { padding-block: var(--space-48); }
.footer-top, .footer-bottom { display: flex; flex-direction: column; gap: var(--space-32); }
.footer-bottom { margin-top: var(--space-32); color: var(--sage); font-size: var(--small); }
.footer-identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.monogram { width: 3rem; height: 3rem; }
/* The wordmark asset is drawn in graphite; on movement dark render it light. */
.footer-wordmark { width: 13rem; filter: brightness(0) invert(0.95); }

.footer-nav ul { display: flex; flex-direction: column; margin: 0; }
.site-footer a, .site-footer summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.site-footer summary { display: list-item; padding-block: 0.75rem; }
.footer-policies p { max-width: 48ch; color: var(--sage); font-size: var(--small); margin-bottom: var(--space-16); }

@media (min-width: 768px) {
  .site-footer { padding-block: var(--space-64); }
  .footer-top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  .footer-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-32); }
  .footer-policies { display: flex; flex-wrap: wrap; gap: 0 var(--space-32); max-width: 100%; }
  .footer-bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16); }
}
@media (min-width: 1024px) {
  .footer-top { justify-content: flex-end; column-gap: var(--space-32); }
  .footer-identity { margin-right: auto; }
}

/* Motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}