/* Veyravel homepage. Tokens follow clients/car/design.md. */

:root {
  /* Colour */
  --graphite: #171B1D;
  --chalk: #F1EEE7;
  --silver: #AFB8B9;
  --clay: #80543F;
  --brass: #D7B98E;

  /* Type */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Manrope", Arial, sans-serif;
  --h1-size: clamp(2.5rem, 1.786rem + 3.571vw, 5rem);       /* 40 → 80 px */
  --h1-line: 1.1;                                             /* 44 / 40 */
  --h2-size: clamp(2rem, 1.714rem + 1.429vw, 3rem);           /* 32 → 48 px */
  --h2-line: 1.2;                                             /* 38.4 / 32 */
  --figure-size: var(--h2-size);
  --h3-size: 1.25rem;                                         /* 20 / 28 */
  --h3-line: 1.4;
  --body-size: 1.125rem;                                      /* 18 / 28.8 */
  --body-line: 1.6;
  --ui-size: 1rem;                                            /* 16 / 24 */
  --ui-line: 1.5;
  --caption-size: 1rem;                                       /* 16 / 25.6 */
  --caption-line: 1.6;
  --eyebrow-size: 0.875rem;                                   /* 14 / 21 */
  --eyebrow-line: 1.5;
  --heading-tracking: -0.02em;
  --eyebrow-tracking: 0.14em;

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

  /* Grid */
  --columns: 4;
  --gutter: var(--space-2);
  --margin: var(--space-3);
  --content: 80rem;    /* 1280 */
  --section-pad: var(--space-6);
  --invite-pad: var(--space-6);

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

@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gutter: var(--space-3);
    --margin: var(--space-4);
  }
}

@media (min-width: 1024px) {
  :root {
    --h1-line: 1.05;                                          /* 84 / 80 */
    --h2-line: 1.1;                                           /* 52.8 / 48 */
    --columns: 12;
    --margin: clamp(2rem, -5.385rem + 11.538vw, 5rem);  /* 32 px at 1024 → 80 px at 1440 */
    --section-pad: var(--space-7);
    --invite-pad: var(--space-8);
  }
}

/* Surfaces: each section sets its own ink, ring and secondary colours from the permitted pairs. */
.dark {
  --surface: var(--graphite);
  --ink: var(--chalk);
  --secondary: var(--silver);
  --ring: var(--brass);
  --link-hover: var(--brass);
  --rule: var(--silver);
  background: var(--surface);
  color: var(--ink);
}

.light {
  --surface: var(--chalk);
  --ink: var(--graphite);
  --secondary: var(--clay);
  --ring: var(--clay);
  --link-hover: var(--graphite);
  --rule: var(--graphite);
  background: var(--surface);
  color: var(--ink);
}

.dark ::selection { background: var(--chalk); color: var(--graphite); }
.light ::selection { background: var(--graphite); color: var(--chalk); }

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

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

body {
  margin: 0;
  background: var(--graphite);
  color: var(--chalk);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 400;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

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

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: var(--heading-tracking);
}

h1 { font-size: var(--h1-size); line-height: var(--h1-line); max-width: 20ch; }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); max-width: 22ch; }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: 500; }

p { max-width: 55ch; }
.lead { max-width: 62ch; }

.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--secondary);
}

.dark .eyebrow { color: var(--silver); }

.helper,
.caption,
figcaption,
.detail {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}

.dark .helper,
.dark .caption,
.dark figcaption,
.dark .detail { color: var(--silver); }

.light .helper { color: var(--clay); }
.light figcaption { color: var(--graphite); }

/* Links, focus and the skip link */
a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.wordmark,
.wordmark:hover,
.wordmark:focus-visible { text-decoration: none; color: var(--ink); }

.light a:not(.button) { color: var(--clay); }
.light a:not(.button):hover { color: var(--graphite); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

main:focus { outline: none; }

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

.skip-link {
  position: absolute;
  left: var(--space-1);
  top: var(--space-1);
  transform: translateY(calc(-100% - var(--space-4)));
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  background: var(--chalk);
  color: var(--graphite);
  font-size: var(--ui-size);
  line-height: var(--ui-line);
  font-weight: 500;
  --ring: var(--clay);
}

.skip-link:focus { transform: none; }
.skip-link:focus-visible { box-shadow: 0 0 0 8px var(--chalk); }
.skip-link:hover { color: var(--graphite); }

/* Button-styled links: colours swap instantly, never tweened */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  min-width: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--ui-size);
  line-height: var(--ui-line);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  max-width: 100%;
}

.button:hover,
.button:active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); max-width: 100%; }

@media (max-width: 767px) {
  .cta-group { align-items: stretch; }
}

/* Shared disclosure styling: native details, CSS marker hidden from assistive technology */
summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--ui-size);
  line-height: var(--ui-line);
  font-weight: 500;
}

summary::-webkit-details-marker { display: none; }

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

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-4);
}

.grid > * { grid-column: 1 / -1; min-width: 0; }

.story { padding-block: var(--section-pad); }
.story-invite { padding-block: var(--invite-pad); }

.story-text > * + * { margin-top: var(--space-3); }
.story-text > .eyebrow + * { margin-top: var(--space-2); }
.story-text > .ledger,
.story-text > .detail,
.story-text > .appointment-actions { margin-top: var(--space-4); }

figure img + figcaption { margin-top: var(--space-1); }

.ratio-4-3 { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ratio-4-5 { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ratio-16-9 { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.diagram { object-fit: contain; }

/* Header */
.site-header { padding-block: var(--space-3); }

.header-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.75rem;
}

.wordmark img { width: 13.5rem; height: auto; }

.header-cta { align-items: stretch; }
.header-cta .helper { text-align: left; }

.nav-desktop { display: none; }

.nav-desktop a,
.nav-mobile a,
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  font-size: var(--ui-size);
  line-height: var(--ui-line);
  font-weight: 500;
  text-decoration: none;
}

.nav-desktop a:hover,
.nav-mobile a:hover,
.site-footer nav a:hover,
.nav-desktop a:focus-visible,
.nav-mobile a:focus-visible,
.site-footer nav a:focus-visible,
summary:hover,
summary:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.nav-mobile summary { min-width: 2.75rem; padding-inline: var(--space-2); }
.nav-mobile ul { display: flex; flex-direction: column; padding-top: var(--space-1); }

@media (min-width: 1024px) {
  .site-header { padding-block: var(--space-3); min-height: 6rem; }

  .header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-4);
  }

  .nav-desktop { display: block; }
  .nav-desktop ul { display: flex; gap: var(--space-4); }
  .nav-mobile { display: none; }

  .header-cta { justify-self: end; align-items: flex-end; }
  .header-cta .helper { text-align: right; }
}

/* 1. Arrival */
.arrival { padding-top: var(--space-4); }

.arrival-text { padding-bottom: var(--space-5); align-items: end; }
.arrival-head > h1 { margin-top: var(--space-2); }
.arrival-aside > .cta-group { margin-top: var(--space-4); }

.hero-plate { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 768px) {
  .hero-plate { aspect-ratio: 3 / 1; }
}

@media (min-width: 1024px) {
  .arrival { padding-top: var(--space-5); }
  .arrival-head { grid-column: 1 / span 7; }
  .arrival-aside { grid-column: 9 / span 4; }
}

/* Ledgers */
.ledger { border-top: 1px solid var(--rule); }

.ledger > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.ledger dt { font-weight: 500; }
.ledger dd { font-size: var(--caption-size); line-height: var(--caption-line); align-self: center; }

.stats { display: grid; border-bottom: 1px solid var(--rule); }

.stats > div {
  padding-block: var(--space-3);
  text-align: center;
}

.stats > div + div { border-top: 1px solid var(--rule); }

.stats dt {
  font-family: var(--font-serif);
  font-size: var(--figure-size);
  line-height: var(--h2-line);
  letter-spacing: var(--heading-tracking);
}

.stats dd { margin-top: var(--space-1); font-size: var(--caption-size); line-height: var(--caption-line); }

.dark .stats dd { color: var(--silver); }

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats > div { padding: var(--space-2) var(--space-3) var(--space-4); }
  .stats > div + div { border-top: 0; border-left: 1px solid var(--rule); }
}

/* Evidence disclosures */
.evidence > .caption { max-width: none; }

.disclosures {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-2);
}

.disclosure summary {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 400;
}

.disclosure summary:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.disclosure summary::after { content: "+"; content: "+" / ""; text-decoration: none; display: inline-block; width: 1ch; }
.disclosure[open] summary::after { content: "\2212"; content: "\2212" / ""; }

.disclosure p { padding-block: var(--space-1) var(--space-3); max-width: 62ch; }

@media (min-width: 768px) {
  .disclosures { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-4); }
}

/* Story placement: tablet 4 + 4, desktop per design.md */
@media (min-width: 768px) {
  .touring > .story-media,
  .ownership > .story-media,
  .house > .story-media,
  .appointment > .story-media { grid-column: 1 / span 4; grid-row: 1; }

  .touring > .story-text,
  .ownership > .story-text,
  .house > .story-text,
  .appointment > .story-text { grid-column: 5 / span 4; grid-row: 1; }

  .fit > .story-text { grid-column: 1 / span 4; }
  .fit > .story-media { grid-column: 5 / span 4; }

  .materials > .figure-left { grid-column: 1 / span 4; }
  .materials > .figure-right { grid-column: 5 / span 4; }

  .touring, .ownership, .house, .appointment, .fit { align-items: center; }
}

@media (min-width: 1024px) {
  .touring > .story-media { grid-column: 1 / span 7; }
  .touring > .story-text { grid-column: 8 / span 5; }

  .fit > .story-text { grid-column: 1 / span 5; }
  .fit > .story-media { grid-column: 7 / span 6; }

  .materials > .story-text { grid-column: 1 / span 9; }
  .materials > .figure-left { grid-column: 1 / span 6; }
  .materials > .figure-right { grid-column: 7 / span 6; }

  .engineering > .story-text { grid-column: 1 / span 9; }

  .ownership > .story-media { grid-column: 1 / span 7; }
  .ownership > .story-text { grid-column: 8 / span 5; }

  .house > .story-media { grid-column: 1 / span 7; }
  .house > .story-text { grid-column: 9 / span 4; }

  .appointment > .story-media { grid-column: 1 / span 6; }
  .appointment > .story-text { grid-column: 7 / span 6; }
}

.caption-line { display: block; max-width: 55ch; }
.caption-line + .caption-line { margin-top: var(--space-1); }

/* 8. Private appointment */
.appointment-actions { display: grid; gap: var(--space-4); }

.contact { border-top: 1px solid var(--graphite); padding-top: var(--space-4); }
.contact > * + * { margin-top: var(--space-1); }
.contact p { font-size: var(--caption-size); line-height: var(--caption-line); }

.contact-email {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .appointment-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .contact { border-top: 0; padding-top: 0; border-left: 1px solid var(--graphite); padding-left: var(--space-4); }
}

/* Footer */
.site-footer { padding-block: var(--space-5); }

.footer-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-logo { width: 13.5rem; height: auto; }

.site-footer nav ul { display: flex; flex-wrap: wrap; column-gap: var(--space-3); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-3);
}

.footer-details summary { font-weight: 500; }
.footer-details[open] { flex-basis: 100%; }
.footer-details p { padding-block: var(--space-1) var(--space-2); max-width: 62ch; color: var(--silver); font-size: var(--caption-size); line-height: var(--caption-line); }

.legal { color: var(--silver); font-size: var(--caption-size); line-height: var(--caption-line); }

@media (min-width: 1024px) {
  .site-footer { padding-block: var(--space-6); }
  .footer-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-5); }
}

/* Motion: only underline geometry animates, and only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  a:not(.button),
  .disclosure summary {
    transition: text-decoration-thickness 400ms var(--ease);
  }
}

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