/* ==========================================================================
   Fumé design layer (2026-10-26)
   The page wears the selected dial: html[data-dial] sets --ink (the page base)
   and --dial (the glow), which fade when the color changes. Headings and
   figures are Bodoni Moda, text is Hanken Grotesk. Gold is kept for the
   emblem, the main button and selected states. The older layers this design
   was built on are merged into it, one rule per selector where possible.
   Order: base rules by page section, then the max-width media queries from
   widest to narrowest, then reduced motion.
   ========================================================================== */

/* Tokens and base ----------------------------------------------------------- */

:root {
  color-scheme: dark;
  --page: 1280px;
  --ink: #07111c;
  --dial: #143e68;
  --paper: #efebe3;
  --steel: #b7bec6;
  --gold: #d9b474;
  --hair: rgba(205,212,220,.14);
  --bg: var(--ink);
  --text: var(--paper);
  --muted: var(--steel);
  --line: var(--hair);
  --surface: color-mix(in srgb,var(--dial) 18%,var(--ink));
  --display: 'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans: 'Hanken Grotesk',Arial,Helvetica,sans-serif;
}
[data-dial=green] {
  --ink: #06130e;
  --dial: #11503a;
}
[data-dial=red] {
  --ink: #13080b;
  --dial: #5c1828;
}
[data-dial=purple] {
  --ink: #0e0a13;
  --dial: #43245c;
}
[data-dial=black] {
  --ink: #0a0b0c;
  --dial: #2c3137;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.65 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  background: var(--ink);
  transition: background-color .7s ease;
}
body.gallery-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a,
button {
  touch-action: manipulation;
}
a:hover {
  color: var(--gold);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h3 {
  font-weight: 400;
}
h1,
h2 {
  line-height: 1.12;
}
h2 {
  font-size: clamp(2rem,3.5vw,3rem);
}
h1,
h2,
.product-info h3,
.preorder-product h2,
.detail-row h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.015em;
}
.eyebrow {
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
}
.eyebrow span {
  color: #70767b;
  margin: 0 10px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  min-height: 52px;
  padding-inline: 28px;
  transition: background .2s,color .2s,border-color .2s;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
.gold {
  color: #111519;
  background: var(--gold);
}
.gold:hover {
  background: #e9bc76;
  color: #111519;
}
.sheet-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
  background: radial-gradient(ellipse at 45% 30%,#282f36,#15191e 75%);
}
.sheet-frame img,
.product-image #selected-image,
.detail-crop img {
  max-height: none;
}
.text-link {
  display: inline-block;
  border-bottom: 1px solid #8f9398;
  padding-bottom: 3px;
  transition: color .2s,border-color .2s;
  font-size: 15px;
  border-bottom-color: color-mix(in srgb,var(--steel) 60%,transparent);
}
.skip {
  position: fixed;
  top: -100px;
  left: 15px;
  background: var(--gold);
  color: #111;
  padding: 12px;
  z-index: 20;
}
.skip:focus {
  top: 15px;
}
.form-note {
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}
[hidden] {
  display: none !important;
}
.text-link:hover {
  border-color: var(--gold);
}
/* Individual CAD renders replace the cropped contact sheets. */
.sheet-frame img,
.product-image #selected-image,
.detail-crop img,
.color-card .card-frame img,
.preorder-frame img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  top: auto;
  left: auto;
  aspect-ratio: 1;
  transform: none;
}
.status-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 10px;
}
/* The glow behind the top of the page, in the selected dial's color */
main {
  position: relative;
  isolation: isolate;
}
main:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -140px;
  height: 1150px;
  pointer-events: none;
  background-color: var(--dial);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 72% 40%,#000 0%,rgba(0,0,0,.42) 42%,transparent 76%);
  mask-image: radial-gradient(ellipse 58% 52% at 72% 40%,#000 0%,rgba(0,0,0,.42) 42%,transparent 76%);
  transition: background-color .7s ease;
}

/* Header: the wordmark is the one place tracked capitals stay --------------- */

header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 18px max(5%,calc((100% - var(--page))/2));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #ffffff0d;
  padding-block: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
}
.brand small {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: .44em;
  margin-top: 7px;
}
nav {
  display: flex;
  font-size: 14px;
  gap: 32px;
}
nav a {
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  font-size: 14px;
  letter-spacing: .01em;
}
nav a[aria-current] {
  border-color: var(--gold);
  color: var(--gold);
}
nav a:last-child {
  padding-inline: 17px;
  border: 1px solid var(--line);
}
.brand span {
  font-size: 20px;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .16em;
}
.brand img {
  object-fit: contain;
}
header,
header.header-hidden {
  background: color-mix(in srgb,var(--ink) 86%,transparent);
  border-bottom-color: var(--hair);
  transition: background-color .7s ease,transform .25s ease;
}

/* Hero: the watch floats unframed in the glow ------------------------------- */

.hero,
.section {
  max-width: calc(var(--page) + 10%);
  margin: auto;
  padding-inline: 5%;
}
.hero {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 4%;
  padding-block: 36px 28px;
  min-height: min(80vh,780px);
}
.intro {
  max-width: 390px;
  color: var(--muted);
  margin: 28px 0 30px;
  font-size: 17px;
}
.hero-price span,
.price span {
  color: var(--muted);
  margin-left: 7px;
  font-family: var(--sans);
  font-size: 13px;
}
.hero-watch figcaption {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0 0;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
}
.hero h1 em {
  font-weight: 400;
  color: var(--gold);
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero .eyebrow:before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.hero .eyebrow span {
  margin-inline: 2px;
}
.hero-watch figcaption b {
  font-weight: 400;
  color: var(--gold);
}
.hero-price {
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
}
.hero h1 {
  font-size: clamp(3.4rem,6.2vw,6.4rem);
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 11ch;
}
.hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--steel);
}
.hero-status .status-dot {
  margin: 0;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px rgba(217,180,116,.16);
}
.hero .intro {
  max-width: 34ch;
  margin: 30px 0 28px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--steel);
}
.hero .swatches {
  gap: 10px;
  margin: 0 0 34px;
}
.hero .swatch {
  width: 38px;
  height: 38px;
  border-width: 5px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.hero-watch {
  padding: 0;
  border: 0;
  background: none;
  margin-right: -3%;
}
.hero .hero-frame {
  background: none;
  overflow: visible;
}
.hero .hero-frame img {
  transform: scale(1.06);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
#hero-color-name {
  font-family: var(--display);
  font-size: 20px;
  color: var(--paper);
}

/* Key facts ----------------------------------------------------------------- */

.facts {
  max-width: var(--page);
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 30px 0;
  border-block: 1px solid var(--line);
  border-top-color: var(--hair);
  border-bottom-color: var(--hair);
  padding-block: 30px;
}
.facts>div {
  border-left: 1px solid var(--line);
  padding-left: 38px;
  border-color: var(--hair);
}
.facts>div:first-child {
  padding-left: 0;
  border: 0;
}
.facts strong {
  font-weight: 400;
  display: block;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.3;
}
.facts span {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--steel);
}

/* Sections ------------------------------------------------------------------ */

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 44px;
}
.section-heading .eyebrow {
  margin-bottom: 12px;
}
.section-heading>p {
  max-width: 330px;
  text-align: right;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}
.section {
  padding-block: 104px;
}
.section h2 {
  font-size: clamp(2.3rem,3.9vw,3.5rem);
  line-height: 1.04;
}
.section .account-panel h2,
.section .order-summary h2,
.section .preorder-policy h2 {
  font-size: clamp(1.7rem,6vw,2rem);
  line-height: 1.15;
}

/* Product ------------------------------------------------------------------- */

.product-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 8%;
  align-items: center;
  scroll-margin-top: 120px;
}
.product-image {
  min-width: 0;
}
.product-image #zoom {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 80%,transparent),transparent);
}
.zoom-hint {
  position: absolute;
  border: 1px solid #ffffff20;
  text-align: left;
  display: flex;
  justify-content: space-between;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  font-size: 13px;
  letter-spacing: 0;
  background: color-mix(in srgb,var(--ink) 78%,transparent);
  border-color: var(--hair);
}
.product-image figcaption {
  color: var(--muted);
  margin-top: 16px;
  font-size: 13px;
}
.product-info>.eyebrow {
  margin-bottom: 14px;
}
.price {
  margin-top: 18px;
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
  font-size: 34px;
}
.field-label {
  margin-top: 28px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
}
.swatches {
  display: flex;
  margin: 12px 0 22px;
  gap: 17px;
  margin-block: 16px 24px;
}
.swatch {
  width: 44px;
  height: 44px;
  background: var(--swatch);
  border: 6px solid var(--bg);
  border-radius: 50%;
  outline: 1px solid #626971;
  transition: outline-color .2s;
  outline-color: #515960;
}
.swatch[aria-pressed=true] {
  outline: 2px solid var(--gold);
  outline-color: var(--gold);
  box-shadow: 0 0 0 4px #d9b4740c;
}
#color-description {
  color: var(--muted);
  font-size: 14px;
  min-height: 0;
}
.availability {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  margin-top: 26px;
  padding-block: 22px;
  border-color: var(--hair);
}
.availability strong {
  color: var(--gold);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.availability p {
  color: var(--muted);
  margin-top: 6px;
  max-width: 400px;
  font-size: 13px;
  line-height: 1.8;
}
.product-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.selection-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
  justify-content: flex-end;
}
.selection-tools button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
#share-status {
  font-size: 13px;
  color: var(--gold);
}
.color-name {
  margin-top: 10px;
  font-size: 18px;
  color: var(--steel);
}
.product-info>.form-note {
  margin-top: 4px;
}
.availability strong:before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
/* Product browsing: visible views and a readable fit guide. */
.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}
.product-thumbnails button {
  min-width: 0;
  padding: 0 0 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb,var(--dial) 22%,var(--ink));
  border-color: var(--hair);
  font-size: 12px;
}
.product-thumbnails button img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 5px;
}
.product-thumbnails button[aria-pressed=true] {
  border-color: var(--gold);
  color: var(--gold);
}
.product-thumbnails button:hover {
  border-color: var(--gold);
}
.product-at-a-glance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  border-block: 1px solid var(--line);
  padding: 14px 0;
  margin-top: 24px;
  color: var(--muted);
  font-size: 14px;
  border-color: var(--hair);
}
.product-at-a-glance a {
  color: var(--gold);
  margin-left: auto;
}
.purchase-note {
  color: var(--muted);
  margin-top: 18px;
}
.product-actions .button {
  order: -1;
}
.comparison-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-top: 48px;
}
.comparison-heading .eyebrow {
  margin-bottom: 8px;
}
.comparison-heading h3 {
  font: 28px Georgia,serif;
  letter-spacing: -.02em;
}
.comparison-switch,
.auth-switch {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  gap: 4px;
  background: color-mix(in srgb,var(--ink) 70%,#000);
  border-color: var(--hair);
}
.comparison-switch button,
.account-panel .auth-switch button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 10px 16px;
  min-height: 44px;
  font-size: 14px;
}
.comparison-switch button[aria-pressed=true],
.account-panel .auth-switch button[aria-pressed=true] {
  color: var(--gold);
  border-color: #d9b47440;
  background: color-mix(in srgb,var(--dial) 40%,var(--ink));
}
.product-thumbnails button:focus-visible,
.swatch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.product-info {
  min-width: 0;
}
.product-info h3 {
  font-size: 46px;
  line-height: 1.05;
}
.product-info>.form-note,
.purchase-note {
  font-size: 13px;
}

/* Color cards: no boxes; each watch sits in its own dial's glow ------------- */

.color-cards {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px;
  margin-top: 30px;
}
.color-card {
  text-align: left;
  transition: border-color .2s,background .2s;
  position: relative;
  padding: 0 0 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
}
.color-card>span:last-child {
  display: block;
  text-align: center;
  padding: 0 6px;
  letter-spacing: .02em;
  font-size: 14px;
  color: var(--steel);
}
.color-card[aria-pressed=true]:after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--gold);
  color: var(--bg);
  border-radius: 50%;
  width: 23px;
  height: 23px;
  place-items: center;
  font-size: 12px;
  display: none;
}
.card-frame {
  margin-bottom: 18px;
}
.collection .color-cards {
  margin-top: 20px;
}
.color-card[data-color=blue] {
  --g: #1a4a7c;
}
.color-card[data-color=green] {
  --g: #155c43;
}
.color-card[data-color=red] {
  --g: #6b1d2f;
}
.color-card[data-color=purple] {
  --g: #4d2a69;
}
.color-card[data-color=black] {
  --g: #353b42;
}
.color-card:hover {
  background: none;
  border-color: var(--hair);
}
.color-card[aria-pressed=true] {
  background: none;
  border-color: var(--gold);
}
.color-card .card-frame {
  background: radial-gradient(circle closest-side at 50% 50%,var(--g),transparent);
}
.color-card[aria-pressed=true]>span:last-child {
  color: var(--paper);
}

/* A closer look ------------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 9%;
  align-items: center;
  border-block: 1px solid #ffffff0d;
  background: linear-gradient(110deg,color-mix(in srgb,var(--dial) 30%,var(--ink)),var(--ink) 72%);
  border-color: var(--hair);
}
.detail-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 70%,transparent),transparent);
}
.detail-copy>p:not(.eyebrow) {
  margin: 24px 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--steel);
  max-width: 44ch;
}
.detail-row {
  padding: 17px 0;
  border-top: 1px solid var(--line);
  gap: 20px;
  display: block;
  padding-block: 22px;
  border-color: var(--hair);
}
.detail-copy {
  counter-reset: detail;
}
.detail-row:before {
  counter-increment: detail;
  content: '0' counter(detail);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gold);
  padding-top: 3px;
  display: none;
}
.detail-row h3 {
  font-size: 24px;
  margin-bottom: 6px;
}
.detail-row p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 52ch;
}

/* Size & fit ---------------------------------------------------------------- */

.fit-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.fit-copy>p:not(.eyebrow) {
  color: var(--muted);
  margin-top: 22px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.75;
}
.fit-copy>.text-link {
  margin-top: 24px;
}
.fit-measures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
  padding: 0;
}
.fit-measures>div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  border-color: var(--hair);
}
.fit-measures dd {
  font: 32px Georgia,serif;
  color: var(--text);
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.1;
}
.fit-measures small {
  color: var(--muted);
  font: 14px var(--sans);
}
.fit-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fit-image figcaption {
  padding: 15px 18px;
  color: var(--muted);
  border: 0;
  font-size: 13px;
  text-align: center;
}
.fit-measures dt {
  font-size: 14px;
  letter-spacing: 0;
}
.fit-image {
  border: 0;
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 65%,transparent),transparent);
}

/* Specifications and questions ---------------------------------------------- */

.specifications {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 9%;
  align-items: start;
  border-top: 0;
}
.specifications .section-heading {
  display: block;
}
.specifications .section-heading>p {
  margin-top: 22px;
  text-align: left;
  font-size: 15px;
}
.spec-grid {
  border-top: 1px solid var(--line);
}
.spec-grid details {
  border-bottom: 1px solid var(--line);
}
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 22px 0;
  font-size: 18px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: '+';
  color: var(--gold);
  font-size: 25px;
  font-weight: 300;
}
details[open] summary:after {
  content: '−';
}
dl {
  margin: 0;
  padding-bottom: 22px;
}
dl>div {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 25px;
  padding: 9px 0;
  font-size: 14px;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 9%;
  border-top: 1px solid #ffffff12;
}
.faq-intro {
  color: var(--muted);
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.75;
}
.faq-intro a {
  margin-top: 12px;
}
.faq-list details {
  border-top: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-list p {
  color: var(--muted);
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.75;
}
.faq-list .text-link {
  margin-bottom: 24px;
}
.spec-grid dl>div {
  padding: 13px 0;
  border-top: 1px solid #ffffff07;
  font-size: 15px;
  border-color: rgba(205,212,220,.06);
}
.spec-grid dd {
  color: #e5e3dd;
}
.spec-grid dl {
  padding-bottom: 28px;
}
.spec-grid summary:hover,
.faq-list summary:hover {
  color: var(--gold);
}
.spec-grid,
.spec-grid details,
.faq-list details,
.faq-list details:last-child,
.faq-section,
.specifications,
.fit-section {
  border-color: var(--hair);
}
.spec-grid summary,
.faq-list summary {
  font-family: var(--display);
  font-size: 23px;
  padding-block: 22px;
}

/* Sign-up band -------------------------------------------------------------- */

.signup-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid #d9b47435;
  position: relative;
  background: color-mix(in srgb,var(--dial) 28%,var(--ink));
  border-top-color: var(--hair);
}
.signup-section p:not(.eyebrow) {
  color: var(--muted);
  margin-top: 20px;
  max-width: 540px;
  line-height: 1.85;
  font-size: 16px;
}
.signup-section .button {
  flex-shrink: 0;
  min-width: 190px;
}
.launch-updates {
  width: 100%;
  margin-bottom: 16px;
}

/* Footer -------------------------------------------------------------------- */

footer {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 32px max(5%,calc((100% - var(--page))/2));
  color: var(--muted);
  flex-wrap: wrap;
  padding-block: 36px;
  gap: 22px;
}
footer p {
  margin-right: auto;
}
.back-top {
  white-space: nowrap;
}
footer .brand {
  margin-right: 12px;
}
footer .brand span {
  font-size: 14px;
}
footer .brand small {
  font-size: 7px;
}
footer .brand img {
  width: 30px;
  height: 30px;
}
footer a:not(.brand) {
  padding-block: 6px;
}
.site-footer {
  display: grid;
  grid-template-columns: 1.4fr repeat(4,1fr);
  gap: 44px;
  padding-block: 60px 24px;
  background: #0c1013;
}
.site-footer .brand {
  width: auto;
  margin: 0 0 20px;
}
.site-footer .footer-intro p {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}
.site-footer nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.site-footer nav h2 {
  font: 12px Arial,sans-serif;
  color: var(--text);
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.site-footer nav a,
.site-footer nav a:last-child {
  border: 0;
  padding: 3px 0;
  letter-spacing: 0;
  font-size: 12px;
}
.site-footer .footer-bottom {
  display: flex;
  gap: 25px;
  align-items: center;
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 13px;
  border-color: var(--hair);
}
.site-footer .footer-bottom p {
  width: auto;
  order: 0;
  margin-right: auto;
}
.site-footer .footer-bottom a {
  white-space: nowrap;
}
footer,
.site-footer {
  border-color: var(--hair);
  font-size: 14px;
}
.site-footer h2 {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}
.site-footer .footer-bottom span {
  color: var(--steel);
}

/* Gallery and contact panel ------------------------------------------------- */

dialog {
  width: min(780px,94vw);
  max-height: 94dvh;
  padding: 26px;
  border: 1px solid #454b51;
  color: var(--text);
  overflow: auto;
  background: var(--ink);
  border-color: var(--hair);
}
dialog::backdrop {
  background: #030608e8;
  backdrop-filter: blur(8px);
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.gallery-header .eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
}
.gallery-header h2 {
  font-size: 27px;
}
.close,
.gallery-prev,
.gallery-next {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border: 1px solid #656a70;
  background: #101316db;
  line-height: 1;
}
.gallery-stage {
  position: relative;
}
.gallery-frame {
  max-width: min(100%,52dvh);
  margin: auto;
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 75%,transparent),transparent);
}
.gallery-prev,
.gallery-next {
  position: absolute;
  top: calc(50% - 22px);
}
.gallery-prev {
  left: 0;
}
.gallery-next {
  right: 0;
}
#large-caption {
  text-align: center;
  margin: 16px 0;
  font-size: 15px;
}
.gallery-views {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.gallery-views button {
  border: 1px solid var(--line);
  background: none;
  padding: 8px 12px;
  transition: background .2s;
  min-height: 44px;
  font-size: 13px;
}
.gallery-views button[aria-pressed=true] {
  border-color: var(--gold);
  color: var(--gold);
  background: #d9b47410;
}
.gallery-note {
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
}
.close {
  border-color: #ffffff25;
}
.close:hover {
  border-color: var(--gold);
}
/* Contact panel (contact.js) */
.contact-dialog {
  width: min(480px,94vw);
}
.contact-dialog .gallery-header {
  align-items: flex-start;
}
.contact-email {
  margin: 22px 0 4px;
  font: 400 clamp(20px,5.6vw,27px)/1.3 Georgia,serif;
  color: var(--gold);
  overflow-wrap: anywhere;
  user-select: all;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.contact-actions .button {
  margin-top: 18px;
}
.contact-actions .text-link {
  margin: 18px 0 0;
}
#contact-status {
  min-height: 1.6em;
  margin-top: 14px;
}

/* Preorder ------------------------------------------------------------------ */

.preorder-page>.text-link {
  margin-bottom: 40px;
  font-size: 12px;
}
.preorder-page h1 {
  font-size: clamp(2.6rem,4vw,4rem);
}
.preorder-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 8%;
  align-items: start;
}
.preorder-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: center;
  background: #171b20;
  padding: 18px;
  border: 1px solid #ffffff12;
}
.preorder-product .eyebrow {
  font-size: 10px;
}
#preorder-color {
  color: var(--muted);
  margin-top: 10px;
}
.preorder-fields {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}
.preorder-fields label {
  margin-top: 10px;
  font-size: 15px;
}
.preorder-fields select {
  width: 100%;
  font: inherit;
  color: var(--text);
  border: 1px solid #575e65;
  border-radius: 0;
  padding: 12px;
  min-height: 48px;
  cursor: pointer;
}
.preorder-policy {
  margin-top: 45px;
}
.preorder-policy h2 {
  margin-bottom: 20px;
}
.preorder-policy details {
  border-top: 1px solid var(--line);
}
.preorder-policy details p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 18px;
}
.order-summary {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: 32px;
  background: color-mix(in srgb,var(--dial) 20%,var(--ink));
  border-color: var(--hair);
  border-top-color: var(--gold);
}
.order-summary h2 {
  margin-bottom: 25px;
}
.order-summary dl>div {
  grid-template-columns: 1.1fr 1fr;
}
.order-summary dd {
  text-align: right;
}
.order-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 22px 0;
  font-size: 16px;
}
.order-total strong {
  font-weight: 400;
  white-space: nowrap;
}
.order-total small {
  font-size: 11px;
  color: var(--muted);
}
.checkout-button {
  width: 100%;
  margin: 24px 0 12px;
  background: #30373f;
  color: #c2c7cd;
  cursor: not-allowed;
}
.order-summary>.text-link {
  margin-top: 24px;
  font-size: 13px;
}
.preorder-page {
  padding-block: 64px 88px;
}
.preorder-product .price {
  font-size: 24px;
}
.preorder-policy summary {
  font-size: 16px;
}
.preorder-policy p {
  line-height: 1.85;
}
.launch-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 38px;
  padding: 20px 24px;
  border: 1px solid #d9b47435;
  background: color-mix(in srgb,var(--dial) 14%,var(--ink));
}
.launch-banner strong {
  font-size: 14px;
  font-weight: 400;
  color: var(--gold);
}
.launch-banner p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.order-summary .checkout-button {
  margin-top: 20px;
}
.order-summary .form-note {
  font-size: 12px;
}
/* Preorder destination note */
#destination-note {
  color: var(--gold);
}
.preorder-frame {
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 80%,transparent),transparent);
}
.preorder-product h2 {
  font-size: 32px;
}

/* Account ------------------------------------------------------------------- */

.account-page {
  min-height: 70vh;
  max-width: 790px;
  padding-block: 68px 84px;
}
.account-intro {
  color: var(--muted);
  font-size: 15px;
  margin-top: 16px;
}
.account-panel {
  border: 1px solid var(--line);
  margin: 24px 0;
  padding: 36px;
  border-top: 2px solid #d9b47470;
  margin-top: 30px;
  background: color-mix(in srgb,var(--dial) 14%,var(--ink));
  border-color: var(--hair);
}
.account-panel h2 {
  margin-bottom: 18px;
  letter-spacing: -.025em;
}
.account-panel p {
  color: var(--muted);
  margin-bottom: 20px;
  font-size: 14px;
}
.account-panel form {
  display: grid;
  gap: 14px;
}
.account-panel input:not([type=checkbox]) {
  width: 100%;
  min-height: 50px;
  padding: 12px;
  color: var(--text);
  font: inherit;
  border: 1px solid #68717a;
  border-radius: 0;
  font-size: 16px;
}
.account-panel button {
  border: 0;
}
.account-panel button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.account-panel .form-note {
  margin: 22px 0 0;
  font-size: 12px;
}
.account-panel .text-link {
  background: none;
  text-align: left;
  padding: 8px 0;
}
.account-heading {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: start;
}
.account-heading p {
  overflow-wrap: anywhere;
  font-size: 13px;
}
.account-panel fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.consent {
  display: flex;
  gap: 14px;
  margin: 20px 0 26px;
  cursor: pointer;
  padding: 18px;
  border: 1px solid #ffffff12;
  background: #10131650;
  margin-block: 16px;
}
.consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
}
.consent strong {
  font-weight: 400;
}
.consent small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.account-privacy p {
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 20px;
}
#account-status:not(:empty) {
  border-left: 2px solid var(--gold);
  padding: 12px 18px;
  margin-top: 24px;
  background: var(--surface);
}
.password-input {
  display: flex;
  position: relative;
  margin-top: 8px;
}
.password-input input {
  padding-right: 76px !important;
}
.account-panel .password-input button {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  padding: 0 16px;
  background: var(--bg);
  color: var(--gold);
  font-size: 13px;
}
.auth-options {
  display: flex;
  flex-wrap: wrap;
  margin-top: 18px;
  gap: 4px 20px;
}
.account-panel #back-signin {
  margin-top: 18px;
}
.account-panel #new-password-help {
  margin: 0;
}
.account-panel input:focus {
  border-color: var(--gold);
}
.account-panel #preferences-state {
  color: var(--gold);
  margin-top: 12px;
}
.account-page>.eyebrow {
  margin-bottom: 16px;
}
.account-page h1 {
  font-size: 48px;
}
.consent:has(input:checked) {
  border-color: #d9b47480;
  background: #d9b47408;
}
.account-privacy summary {
  font-size: 14px;
}
.auth-options .text-link {
  font-size: 12px;
}
.account-panel .button {
  border: 1px solid transparent;
}
.account-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 28px 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.account-benefits span:before {
  content: '✓';
  color: var(--gold);
  margin-right: 8px;
}
.account-panel .auth-switch {
  margin: 0 0 30px;
}
.account-panel .auth-switch button {
  flex: 1;
}
.account-panel label {
  font-size: 14px;
}
.account-panel input:focus-visible {
  outline-offset: 2px;
}
.account-panel[aria-busy=true] {
  border-top-color: #f0d5a5;
}
.account-panel[aria-busy=true] button {
  cursor: progress;
}
.account-support {
  font-size: 13px;
  color: var(--muted);
  margin-top: 28px;
}
.account-support a {
  margin-left: 8px;
}
.account-panel #code {
  font-size: 24px;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
}
.account-panel #code-help {
  margin: 0;
  font-size: 12px;
}
.auth-options button:last-child {
  flex-basis: auto;
}
.account-panel #caps-lock {
  color: var(--gold);
  margin-top: 12px;
}
.account-privacy {
  border-bottom: 1px solid var(--line);
}
/* Account service notice (account.js) */
.service-notice {
  margin-top: 28px;
}
.service-notice .text-link {
  font-size: inherit;
  padding-bottom: 1px;
}
.preorder-fields select,
.account-panel input:not([type=checkbox]) {
  background: color-mix(in srgb,var(--ink) 70%,#000);
  border-color: color-mix(in srgb,var(--steel) 40%,transparent);
}

/* Legal pages (generated by tools/build-pages.py) -------------------------- */

.legal-page {
  max-width: 860px;
}
.legal-page h1 {
  font-size: clamp(40px,6vw,60px);
  line-height: 1.05;
}
.legal-updated {
  margin-top: 14px;
  font-size: 14px;
  color: var(--steel);
}
.legal-intro {
  margin-top: 24px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--steel);
}
.legal-toc {
  display: block;
  margin: 36px 0 8px;
  padding: 20px 24px;
  border: 1px solid var(--hair);
  background: color-mix(in srgb,var(--dial) 12%,var(--ink));
}
.section .legal-toc h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 36px;
}
.legal-page .legal-toc li {
  padding: 3px 0;
  font-size: 15px;
  break-inside: avoid;
}
.legal-page section {
  padding-top: 40px;
  scroll-margin-top: 100px;
}
.section.legal-page section h2 {
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 1.15;
}
.legal-page p,
.legal-page li {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--steel);
}
.legal-page p + p {
  margin-top: 12px;
}
.legal-page ul {
  margin: 12px 0 0;
  padding-left: 20px;
}
.legal-page li + li {
  margin-top: 6px;
}
.legal-page strong {
  font-weight: 500;
  color: var(--paper);
}
.legal-page a:not(.button):not(.brand),
.reserve-page .form-note a {
  color: var(--paper);
  border-bottom: 1px solid color-mix(in srgb,var(--steel) 60%,transparent);
}
.legal-page dl.legal-table {
  margin-top: 8px;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.legal-page .legal-table > div {
  display: grid;
  grid-template-columns: minmax(150px,1fr) 2.6fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
  line-height: 1.7;
}
.legal-table dd {
  color: var(--paper);
}
.todo {
  padding: 0 4px;
  background: rgba(217,180,116,.2);
  color: var(--gold);
}

/* The contents list is a <nav>, so undo the site menu link styles */
.legal-page .legal-toc a:not(.button) {
  padding: 0;
  border: 0;
  font-size: 15px;
  color: var(--paper);
}
.legal-page .legal-toc a:not(.button):hover {
  color: var(--gold);
}

/* Newsletter sign-up (newsletter.js) -------------------------------------- */

.newsletter-form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}
.newsletter-page .newsletter-form,
.newsletter-page .newsletter-fallback {
  margin-top: 32px;
}
.newsletter-label {
  font-size: 15px;
  color: var(--paper);
}
.newsletter-row {
  display: flex;
  gap: 10px;
}
.newsletter-row input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb,var(--ink) 70%,#000);
  border: 1px solid color-mix(in srgb,var(--steel) 40%,transparent);
  border-radius: 0;
}
.newsletter-row input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.newsletter-row .button {
  margin: 0;
  border: 0;
}
.newsletter-row .button:disabled {
  opacity: .6;
  cursor: progress;
}
.newsletter-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.newsletter-status {
  min-height: 1.6em;
}
.newsletter-form.is-sent .newsletter-status {
  color: var(--gold);
}
.newsletter-fallback .form-note {
  margin-top: 10px;
}
.signup-section .signup-form {
  flex: 0 1 460px;
  min-width: 0;
}
.newsletter-result {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb,var(--dial) 14%,var(--ink));
}
.section .newsletter-result h2 {
  font-size: 26px;
  margin-bottom: 6px;
}
.newsletter-state {
  max-width: 520px;
  padding: 18px 20px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb,var(--dial) 18%,var(--ink));
}
.newsletter-page .newsletter-state {
  margin-top: 32px;
}
.newsletter-state .newsletter-state-title,
.signup-section .newsletter-state p.newsletter-state-title {
  font: 400 22px/1.2 var(--display);
  color: var(--paper);
}
.section .newsletter-state .form-note {
  margin-top: 6px;
  max-width: none;
}
.newsletter-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 10px;
}
.newsletter-state-actions .text-link {
  margin: 0;
  padding: 2px 0;
  background: none;
  border-top: 0;
  border-inline: 0;
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
}
.newsletter-privacy {
  margin-top: 24px;
}

/* Reservation page --------------------------------------------------------- */

.reserve-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 7%;
  align-items: start;
  margin-top: 32px;
}
.reserve-page h1 {
  font-size: clamp(40px,5.4vw,64px);
  line-height: 1.04;
}
.reserve-pick {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}
.sheet-frame.reserve-frame {
  background: radial-gradient(circle closest-side at 50% 50%,color-mix(in srgb,var(--dial) 85%,transparent),transparent);
  overflow: visible;
}
.reserve-dials {
  margin: 0;
  padding: 0;
  border: 0;
}
.reserve-dials legend {
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--paper);
}
.reserve-dial {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--steel);
  cursor: pointer;
}
.reserve-dial input {
  position: absolute;
  opacity: 0;
}
.reserve-dial .swatch {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-width: 5px;
}
.reserve-dial input:checked + .swatch {
  outline: 2px solid var(--gold);
}
.reserve-dial input:checked ~ span:last-child {
  color: var(--paper);
}
.reserve-dial input:focus-visible + .swatch {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.reserve-dials .form-note {
  margin-top: 10px;
}
.section .reserve-steps-title {
  margin-top: 48px;
  font-size: 30px;
}
.reserve-steps {
  margin: 18px 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.reserve-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
  counter-increment: step;
}
.reserve-steps li::before {
  content: counter(step);
  grid-row: span 2;
  font: 30px/1 var(--display);
  color: var(--gold);
}
.reserve-steps h3 {
  font: 400 22px/1.2 var(--display);
}
.reserve-steps p {
  margin-top: 4px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}
.reserve-layout .order-summary {
  grid-row: auto;
}
.reserve-button,
.reserve-page .checkout-button {
  width: 100%;
  margin: 24px 0 10px;
}
.reserve-page .text-button {
  width: 100%;
  border: 1px solid var(--hair);
  color: var(--paper);
}
.reserve-page .text-button:hover {
  border-color: var(--gold);
}
.order-summary .form-note {
  margin-top: 16px;
}

/* Not found (404) ----------------------------------------------------------- */

.not-found {
  max-width: 700px;
  padding: 70px 6%;
  margin: auto;
  min-height: 100vh;
}
.not-found .brand {
  margin-bottom: 90px;
}
.not-found h1 {
  font-size: clamp(42px,7vw,68px);
}
.not-found>p:not(.eyebrow) {
  margin: 25px 0 32px;
  color: var(--muted);
}
.not-found>.text-link {
  margin-left: 24px;
}
/* ---------------------------------------------------------------------- */
@media (max-width: 1000px) {

  /* Hero: the watch floats unframed in the glow */
  .hero {
    min-height: 0;
  }
  .hero h1 {
    font-size: clamp(3rem,7vw,5rem);
  }

  /* Key facts */
  .facts>div {
    padding-left: 24px;
  }
  .facts strong {
    font-size: 26px;
  }

  /* Sections */
  .section {
    padding-block: 76px;
  }

  /* Product */
  .product-actions {
    gap: 18px;
  }

  /* A closer look */
  .details {
    gap: 6%;
  }

  /* Specifications and questions */
  .specifications {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .specifications .section-heading {
    display: flex;
  }
  .specifications .section-heading>p {
    text-align: right;
  }

  /* Footer */
  footer p {
    margin-right: 0;
  }

  /* Account */
  .account-page {
    padding-block: 54px 64px;
  }
}

/* ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Reservation page */
  .reserve-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Footer */
  .site-footer {
    grid-template-columns: repeat(4,1fr);
    gap: 32px;
  }
  .site-footer .footer-intro {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer .footer-intro .brand {
    margin: 0;
  }
  .site-footer .footer-intro p {
    text-align: right;
  }
  .site-footer .footer-bottom {
    flex-wrap: wrap;
  }

  /* Preorder */
  .preorder-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .order-summary {
    position: static;
    grid-row: 1;
  }
  .preorder-product {
    max-width: 580px;
  }
  .preorder-page .section-heading {
    display: block;
  }
  .preorder-page .section-heading>p {
    margin-top: 20px;
    max-width: none;
  }
  .preorder-layout .order-summary {
    grid-row: auto;
    position: static;
  }
}

/* ---------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* Specifications and questions */
  .faq-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Newsletter sign-up */
  .newsletter-row {
    flex-direction: column;
  }
  .signup-section .signup-form {
    flex-basis: auto;
    width: 100%;
    margin-top: 24px;
  }
  /* Legal and reservation pages */
  .legal-toc ol {
    columns: 1;
  }
  .legal-page .legal-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .reserve-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .reserve-pick {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reserve-frame {
    max-width: 320px;
    margin: auto;
  }

  /* Tokens and base */
  html {
    scroll-padding-top: 140px;
  }
  main:before {
    height: 900px;
    -webkit-mask-image: radial-gradient(ellipse 90% 40% at 50% 34%,#000 0%,rgba(0,0,0,.4) 45%,transparent 78%);
    mask-image: radial-gradient(ellipse 90% 40% at 50% 34%,#000 0%,rgba(0,0,0,.4) 45%,transparent 78%);
  }

  /* Phone header: slimmer, and it slides away while scrolling down (header.js) */
  header {
    flex-direction: column;
    padding: 14px 5% 0;
    padding-block: 10px 0;
    gap: 4px;
  }
  .brand img {
    width: 32px;
    height: 32px;
  }
  .brand small {
    font-size: 8px;
    margin-top: 4px;
  }
  nav {
    width: 100%;
    font-size: 12px;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .brand span {
    font-size: 17px;
  }
  nav a:last-child {
    border: 0;
    padding-inline: 0;
  }
  header.header-hidden {
    transform: translateY(-100%);
  }
  header .brand img {
    width: 28px;
    height: 28px;
  }
  header .brand span {
    font-size: 16px;
  }
  header .brand small {
    margin-top: 3px;
  }
  nav a {
    padding: 6px 0 9px;
  }

  /* Phone hero: headline, then the watch, then the words and buttons */
  .hero-copy {
    width: 100%;
    display: contents;
  }
  .hero .eyebrow {
    margin-bottom: 18px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  .intro {
    font-size: 16px;
    margin: 20px 0;
    max-width: none;
  }
  .hero .eyebrow:before {
    width: 20px;
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 26px 8px;
    /* The watch bleeds past the text column (and is scaled up); clip it at the screen edge
       so the page doesn't scroll sideways. clip, unlike hidden, leaves vertical overflow alone. */
    overflow-x: clip;
  }
  .hero-status {
    order: 1;
    margin-bottom: 18px;
  }
  .hero h1 {
    order: 2;
    font-size: clamp(3rem,13.5vw,4.4rem);
    max-width: none;
  }
  .hero-watch {
    order: 3;
    margin: 6px -4% 0;
    width: 108%;
  }
  .hero .intro {
    order: 4;
    margin: 18px 0 22px;
    font-size: 16px;
  }
  .hero .swatches {
    order: 5;
    margin-bottom: 26px;
  }
  .hero-actions {
    order: 6;
    gap: 20px;
  }
  .hero-price {
    display: block;
    margin: 0;
    font-size: 23px;
  }

  /* Key facts */
  .facts {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .facts>div {
    border-width: 0;
    border-style: none;
    padding: 0;
  }
  .facts strong {
    font-size: 25px;
  }
  .facts span {
    font-size: 13px;
  }

  /* Sections */
  .section-heading .eyebrow {
    font-size: 10px;
  }
  .section {
    padding-block: 56px;
  }
  .section-heading {
    display: block;
    margin-bottom: 30px;
  }
  .section-heading>p {
    margin-top: 16px;
    text-align: left;
    font-size: 15px;
  }
  .section h2 {
    font-size: clamp(2.2rem,10vw,2.8rem);
  }

  /* Product */
  .product-layout,
  .details {
    grid-template-columns: 1fr;
  }
  .product-info>.eyebrow {
    font-size: 11px;
  }
  .price {
    margin-top: 12px;
  }
  .product-layout {
    gap: 30px;
    scroll-margin-top: 130px;
  }
  .product-actions {
    gap: 18px;
  }
  .product-actions .button {
    padding-inline: 22px;
  }
  .selection-tools {
    justify-content: flex-start;
  }
  .product-thumbnails {
    gap: 6px;
  }
  .product-at-a-glance {
    gap: 10px;
  }
  .comparison-heading {
    display: block;
    margin-top: 32px;
  }
  .comparison-heading h3 {
    font-size: 26px;
  }
  .comparison-switch {
    margin-top: 20px;
    width: 100%;
  }
  .comparison-switch button {
    flex: 1;
  }
  .product-info h3 {
    font-size: 38px;
  }

  /* Color cards: no boxes; each watch sits in its own dial's glow */
  .color-cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 24px;
  }
  .color-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    justify-self: center;
  }

  /* A closer look */
  .detail-copy>.eyebrow {
    font-size: 10px;
  }
  .detail-copy>p:not(.eyebrow) {
    margin-block: 20px;
  }
  .details {
    gap: 30px;
  }
  .detail-row {
    gap: 16px;
  }
  .detail-row h3 {
    font-size: 22px;
  }

  /* Size & fit */
  .fit-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fit-measures {
    gap: 20px;
  }
  .fit-image {
    grid-row: 2;
  }
  .fit-measures dd {
    font-size: 36px;
  }

  /* Specifications and questions */
  .specifications .section-heading {
    display: block;
  }
  .specifications .section-heading>p {
    margin-top: 16px;
    text-align: left;
  }
  dl>div {
    gap: 16px;
    font-size: 14px;
  }
  .spec-grid dl>div {
    gap: 16px;
    font-size: 14px;
  }
  .spec-grid summary,
  .faq-list summary {
    font-size: 20px;
  }

  /* Sign-up band */
  .signup-section {
    display: block;
  }
  .signup-section .button {
    width: 100%;
    margin-top: 26px;
  }

  /* Footer */
  footer p {
    width: 100%;
    order: 5;
  }
  .back-top {
    margin-left: auto;
  }
  footer {
    gap: 12px 20px;
    padding-block: 28px;
  }
  footer .brand {
    width: 100%;
    margin: 0 0 12px;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding-block: 40px 24px;
  }
  .site-footer .footer-intro {
    display: block;
  }
  .site-footer .footer-intro p {
    text-align: left;
    margin-top: 16px;
  }
  .site-footer nav {
    gap: 9px;
    justify-content: flex-start;
  }
  .site-footer .footer-bottom {
    gap: 10px 20px;
    font-size: 13px;
  }
  .site-footer .footer-bottom p {
    width: 100%;
    margin: 0;
  }
  .site-footer .footer-bottom a {
    margin-left: auto;
  }

  /* Gallery and contact panel */
  .gallery-header h2 {
    font-size: 23px;
  }
  dialog {
    padding: 16px;
    max-height: 96dvh;
  }
  .gallery-frame {
    max-width: 100%;
  }
  .gallery-views {
    gap: 6px;
  }
  .gallery-views button {
    padding: 7px 9px;
  }
  .gallery-note {
    margin-top: 12px;
  }

  /* Preorder */
  .preorder-product .eyebrow {
    font-size: 9px;
    letter-spacing: .06em;
  }
  .preorder-page>.text-link {
    margin-bottom: 28px;
  }
  .preorder-page {
    padding-block: 40px 54px;
  }
  .preorder-product {
    padding: 12px;
    gap: 14px;
  }
  .order-summary {
    padding: 24px;
  }
  .preorder-product .price {
    font-size: 21px;
  }
  .launch-banner {
    padding: 18px;
    margin-bottom: 28px;
  }
  .preorder-page .section-heading {
    margin-bottom: 24px;
  }

  /* Account */
  .account-heading {
    display: block;
  }
  .account-page {
    padding-block: 42px 54px;
  }
  .account-page h1 {
    font-size: 40px;
  }
  .account-panel {
    padding: 24px 20px;
  }
  .consent {
    padding: 14px;
    gap: 12px;
  }
  .account-panel .consent strong {
    font-size: 13px;
  }
  .account-panel .consent small {
    font-size: 12px;
  }
  .account-page+footer a:first-child {
    width: 100%;
    color: var(--gold);
  }
  .account-benefits {
    gap: 10px 18px;
    font-size: 11px;
  }
  .account-panel .auth-switch {
    margin-bottom: 24px;
  }

  /* Not found (404) */
  .not-found .brand {
    margin-bottom: 70px;
  }
  .not-found>.text-link {
    display: block;
    margin: 24px 0;
    width: max-content;
  }
}

/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  /* Tokens and base */
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  body,
  main:before,
  header {
    transition: none;
  }
}

/* Language switch and the Japanese pages (dist/ja/, built by tools/translate.py) ------- */
nav a.lang-switch {
  color: var(--steel);
  letter-spacing: .04em;
}
nav a.lang-switch:hover,
nav a.lang-switch:focus-visible {
  color: var(--gold);
}
.not-found .lang-switch {
  margin-top: 6px;
}
html[lang=ja] {
  --display: 'Bodoni Moda','Noto Serif JP',Georgia,serif;
  --sans: 'Hanken Grotesk','Noto Sans JP',Arial,sans-serif;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}
html[lang=ja] body {
  line-height: 1.8;
}
html[lang=ja] h1,
html[lang=ja] h2,
html[lang=ja] h3 {
  letter-spacing: .02em;
  line-height: 1.35;
}
html[lang=ja] .site-footer .footer-bottom {
  flex-wrap: wrap;
}
.site-footer .footer-bottom .footer-legal-note {
  order: 5;
  flex-basis: 100%;
  margin: 0;
  color: var(--steel);
}
@media (max-width: 640px) {
  header nav a.lang-switch {
    position: absolute;
    top: 14px;
    right: 5%;
    padding: 4px 0;
  }
}