:root {
  /* Ivory and antique gold: warm ivory pages, white surfaces and photo wells, warm near-black type, and antique
     gold (#86672B, the lightest gold white text stays readable on) only as the accent: buttons, links, figures. */
  --paper: #F8F6F1;
  --surface: #FFFFFF;
  --well: #FFFFFF;
  --mist: #F1EEE7;
  --ink: #1D1B18;
  --ink-2: #6E5320;
  --text: #4D4943;
  --steel: #77716A;
  --rule: #E6E1D7;
  --accent: #86672B;
  /* Flat design, on every page: solid colours only (no gradients, gloss or drop shadows), and one
     corner size for every button, field, card and panel. Circles only for dials and watch plates. */
  --radius: 2px;
  --gilt: #A6895A;
  --gilt-soft: #F3EEE4;
  --blue: var(--ink);
  --blue-deep: var(--ink-2);
  --signal: var(--accent);
  --display: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 1280px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D1B18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Chinese pages: Latin text keeps the site's faces; Chinese falls back to the reader's system face. */
:root:lang(zh-Hans) {
  --display: "Jost", "Futura", "Avenir Next", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}
:root:lang(zh-Hant) {
  --display: "Jost", "Futura", "Avenir Next", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 500; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type: Jost for headings, a clean geometric face; Hanken Grotesk for everything else. */
.display { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; letter-spacing: -0.01em; color: var(--ink); }

/* Masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.masthead-inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); height: 68px; display: flex; align-items: center; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; flex: none; color: var(--accent); }
.logo-pip { fill: currentColor; }
.masthead .logo-mark { color: var(--accent); }
.primary-nav { display: flex; gap: 28px; margin-left: auto; }
.primary-nav a, .account-link { position: relative; text-decoration: none; font-size: 15px; color: var(--text); padding: 6px 0; white-space: nowrap; transition: color .2s ease; }
.primary-nav a:hover, .account-link:hover { color: var(--accent); }
.primary-nav a[aria-current], .account-link[aria-current] { color: var(--ink); }
.primary-nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.account-link { padding-left: 24px; border-left: 1px solid var(--rule); color: var(--ink); }
@media (max-width: 640px) {
  .masthead-inner { height: 58px; gap: 16px; }
  .wordmark { font-size: 12.5px; gap: 9px; letter-spacing: 0.2em; }
  .logo-mark { width: 24px; height: 24px; }
  .primary-nav { gap: 16px; }
  .primary-nav a, .account-link { font-size: 14px; }
  .primary-nav a[href="/markets"] { display: none; }
  .account-link { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) {
  .masthead-inner { gap: 12px; }
  .wordmark { font-size: 12px; letter-spacing: 0.16em; }
  .primary-nav { gap: 12px; }
  .primary-nav a, .account-link { font-size: 13.5px; }
}
/* 360px Android phones keep every link: the type tightens a little first. */
@media (max-width: 380px) {
  .masthead-inner { gap: 10px; }
  .wordmark { font-size: 11px; gap: 7px; letter-spacing: 0.14em; }
  .logo-mark { width: 22px; height: 22px; }
  .primary-nav { gap: 10px; }
  .primary-nav a, .account-link { font-size: 13px; }
}
/* The narrowest phones (320px): the home page search and links lead to the catalogue. */
@media (max-width: 345px) { .primary-nav a[href="/catalogue"] { display: none; } }
/* Phones: header links get a finger-sized target without changing the header's height. */
@media (max-width: 640px) { .primary-nav a, .account-link { padding: 12px 0; min-width: 32px; text-align: center; } }
/* Phones: the links fold into a menu under the header. */
.menu-toggle { display: none; }
.site-menu[hidden] { display: none; }
@media (max-width: 640px) {
  .primary-nav, .account-link { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; color: var(--ink); }
  .menu-toggle span, .menu-toggle span::before { display: block; width: 22px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
  .menu-toggle span { position: relative; transform: translateY(-3.5px); }
  .menu-toggle span::before { content: ""; position: absolute; left: 0; top: 7px; }
  .menu-toggle[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::before { transform: translateY(-7px) rotate(-90deg); }
  .site-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 58px); overflow-y: auto; display: grid; padding: 8px var(--gutter) 24px; background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(29, 27, 24, 0.06); }
  .site-menu > a:not(.button) { padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--ink); text-decoration: none; }
  .site-menu > a[aria-current]:not(.button) { color: var(--accent); }
  .site-menu-account { margin-top: 20px; width: 100%; }
  .site-menu.is-open { animation: menuIn .28s cubic-bezier(.22, .61, .36, 1); }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }

/* Buttons and fields */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: 0.005em; border-radius: var(--radius); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.button:hover { background: var(--ink); color: #fff; }
.button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.button-quiet { border-color: #CED2D6; }
.button-quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.button[disabled] { opacity: .55; cursor: progress; }
.text-link { color: var(--accent); text-decoration-color: currentColor; text-underline-offset: 4px; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--steel); }
.field input, .field select, .toolbar select, .field-currency { width: 100%; min-height: 46px; border: 1px solid var(--rule); background-color: var(--surface); padding: 0 14px; border-radius: var(--radius); color: var(--ink); font-size: 15px; transition: border-color .2s ease; }
.field input:focus, .field select:focus, .toolbar select:focus { border-color: var(--ink); outline: none; }
/* Every dropdown: native arrow replaced by a chevron with room on both sides. */
select { -webkit-appearance: none; appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 42px !important; cursor: pointer; }
select::-ms-expand { display: none; }
.field-pair { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text); }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.tag { font-size: 12px; color: var(--ink); border: 1px solid currentColor; padding: 0 8px; border-radius: var(--radius); }
.hp { position: absolute; left: -9999px; }
.form-message { min-height: 20px; margin-top: 12px; font-size: 14px; color: var(--steel); }
.form-message.is-error { color: #9B2C2C; }
.form-message.is-success { color: var(--signal); }
.weekly-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: center; padding: 40px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.weekly { scroll-margin-top: 80px; }
.weekly h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 32; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--ink); }
.weekly p { margin-top: 8px; color: var(--text); max-width: 52ch; }
.weekly-fields { display: flex; gap: 10px; }
.weekly-fields input { flex: 1; min-width: 0; min-height: 48px; border: 1px solid var(--rule); background: var(--surface); padding: 0 14px; border-radius: var(--radius); color: var(--ink); font-size: 15px; }
.weekly-fields input:focus { border-color: var(--ink); outline: none; }
.weekly-fields .button { flex: none; min-height: 48px; }
.weekly .form-message { margin-top: 8px; }
.weekly .form-message:empty { display: none; }
@media (max-width: 760px) { .weekly-inner { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; } .weekly-fields { flex-direction: column; } .weekly-fields .button { width: 100%; } }

/* Hero: porcelain, the headline and search on the left, a 3D watch on the right (drawn by /assets/hero3d-*.js) */
.hero { position: relative; overflow: hidden; background: var(--paper); }
/* Studio light: two soft pools of light (white, and a touch of gold) drift slowly behind the hero, like light moving across a backdrop. Both stay
   high enough to fade out before the hero's bottom edge, so no seam shows against the next section. */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.hero::before { width: 72vmax; height: 72vmax; right: -18vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
.hero::after { width: 50vmax; height: 50vmax; left: -20vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(134, 103, 43, 0.07), rgba(134, 103, 43, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroLight 24s ease-in-out infinite alternate; }
  .hero::after { animation: heroLightLow 30s ease-in-out infinite alternate; }
}
@keyframes heroLight { to { transform: translate(-16vmax, 4vmax) scale(1.08); } }
@keyframes heroLightLow { to { transform: translate(18vmax, 3vmax) scale(1.1); } }
.hero-inner { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.025em; color: var(--ink); }
.hero-lede { margin-top: 22px; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--text); }
.hero-search { margin-top: clamp(28px, 3.2vw, 40px); display: flex; align-items: center; gap: 6px; max-width: 540px; padding: 6px; background: var(--surface); border-radius: var(--radius); }
.hero-search:focus-within { outline: 2px solid var(--accent); outline-offset: 0; }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 50px; padding: 0 14px; font-size: 17px; outline: none; color: var(--ink); }
.hero-search input::placeholder { color: var(--steel); }
.hero-search button { flex: none; height: 50px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font-weight: 600; padding: 0 24px; cursor: pointer; transition: background-color .2s ease; }
.hero-search button:hover { background: var(--ink-2); }
.hero-alerts { margin-top: 12px; max-width: 540px; }
.hero-alerts .button { width: 100%; min-height: 56px; }
.hero-alerts .button[aria-busy] { opacity: .6; cursor: progress; }
.hero-alerts .button { border-color: var(--accent); color: var(--accent); }
.hero-alerts .button:hover { background: var(--accent); color: #fff; }
html:has(#alerts) { scroll-behavior: smooth; }
#alerts { scroll-margin-top: 72px; }
.hero-show { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.hero-stage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.hero-stage:active { cursor: grabbing; }
/* A sunray dial finish behind the watch: fine rays that fade out with no edge, turning about once in four minutes. */
.hero-stage::before { content: ""; position: absolute; inset: -22%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(134, 103, 43, 0.075) 0deg 0.6deg, rgba(134, 103, 43, 0) 0.6deg 3deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.55) 46%, transparent 72%);
  mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.55) 46%, transparent 72%); }
/* A soft sheen crossing the rays, the way light moves over a brushed dial. */
.hero-stage::after { content: ""; position: absolute; inset: -22%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.7) 28deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.5) 208deg, rgba(255, 255, 255, 0) 240deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%); mask: radial-gradient(closest-side, #000 20%, transparent 70%); mix-blend-mode: soft-light; }
@media (prefers-reduced-motion: no-preference) {
  .hero-stage::before { animation: dialTurn 240s linear infinite; }
  .hero-stage::after { animation: dialTurn 36s linear infinite reverse; }
}
@keyframes dialTurn { to { transform: rotate(1turn); } }
/* The drawing reaches past the stage so a watch turned side-on (its bracelet loop behind it) is never cut off;
   it ignores the pointer, which the stage handles, so the copy beside it stays usable. */
.hero-stage canvas { position: absolute; inset: -18%; width: 136%; height: 136%; display: block; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1s ease; }
.hero-stage.ready canvas { opacity: 1; }
.hero-fallback { position: absolute; inset: 12%; display: none; border-radius: 50%; overflow: hidden; background: var(--surface); }
.hero-fallback img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.hero-stage.no-webgl .hero-fallback, html:not(.js) .hero-fallback { display: block; }
.hero-caption { margin-top: 4px; min-height: 92px; text-align: center; }
.hero-caption > * { transition: opacity .45s ease, transform .45s ease; }
.hero-caption.swap > * { opacity: 0; transform: translateY(6px); }
.hero-cap-name { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.hero-cap-ref { margin-left: 8px; font-family: var(--sans); font-size: 15px; color: var(--steel); letter-spacing: .02em; }
.hero-cap-meta { margin-top: 2px; font-size: 15px; color: var(--text); }
.hero-cap-link { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--accent); text-underline-offset: 4px; }
@media (min-width: 901px) { .reveal-lines > span { white-space: nowrap; } }
@media (max-width: 900px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .hero-lede { order: 2; margin-top: 16px; font-size: 17px; }
  /* The search comes before the watch, so a phone shows it without scrolling. */
  .hero-search { order: 3; margin-top: 22px; }
  .hero-alerts { order: 4; }
  .hero-show { order: 5; margin-top: 12px; }
  .hero-stage { max-width: 360px; align-self: center; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(38px, 11vw, 46px); }
  .hero-search input { font-size: 16px; }
}
/* Phones: the headline, then the watch straight under it, then the search; the counts become a note below. The
   stage loses some of the room around the watch so the search still shows on the first screen. */
@media (max-width: 640px) {
  .hero-inner { padding-top: 28px; padding-bottom: 36px; }
  .hero-show { order: 2; margin-top: 0; }
  .hero-stage { max-width: 300px; margin: -12px auto -24px; }
  .hero-caption { min-height: 80px; }
  .hero-search { order: 3; margin-top: 16px; }
  .hero-alerts { order: 4; }
  .hero-lede { order: 5; margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--steel); }
}

/* Entrance, once: the headline rises out of a mask, then the copy follows. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-lines > span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .reveal-lines > span > span { display: inline-block; transform: translateY(105%); animation: lineUp 1.1s cubic-bezier(.2, .7, .1, 1) .15s forwards; }
  .reveal-lines > span:nth-child(2) > span { animation-delay: .3s; }
  .rise { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2, .7, .1, 1) forwards; animation-delay: var(--d, 0s); }
}
@keyframes lineUp { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.section-note { margin: -12px 0 24px; max-width: 60ch; font-size: 15px; color: var(--steel); }

/* Alert preview */
.preview { margin-top: clamp(64px, 9vw, 120px); background: var(--surface); color: var(--text); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); overflow: hidden; }
.preview-inner { max-width: var(--measure); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.preview h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 48; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); }
.preview-copy > p { margin-top: 18px; max-width: 40ch; font-size: 17px; }
.preview-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; max-width: 44ch; }
.preview-points li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.preview-points li:last-child { border-bottom: 1px solid var(--rule); }
.preview-points strong { color: var(--accent); font-weight: 600; }
.preview-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.preview-terms { flex-basis: 100%; font-size: 14px; color: var(--steel); }
/* The alerts preview: an iPhone lock screen. A dark, warm wallpaper with the date and a large clock, frosted
   notifications from the app, the torch and camera buttons and the home bar. */
.device { justify-self: center; width: min(100%, 320px); aspect-ratio: 71.6 / 146.6; border-radius: 54px; padding: 11px; background: #1c1b19; box-shadow: inset 0 0 0 1.5px #4a4743, inset 0 0 0 3px #0e0d0c; }
.device-screen { position: relative; height: 100%; overflow: hidden; border-radius: 44px; padding: 14px 12px 0; color: #fff; font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #6e5320 0%, #3a2c16 45%, #15110c 100%); }
.device-status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 14px 0 20px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.device-island { position: absolute; left: 50%; top: 11px; width: 92px; height: 28px; margin-left: -46px; border-radius: 20px; background: #000; }
.device-icons { display: inline-flex; align-items: center; gap: 5px; }
.device-icons svg { fill: currentColor; }
.device-date { margin-top: 22px; text-align: center; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.device-time { margin-top: -4px; text-align: center; font-size: 82px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; }
.notes { list-style: none; margin: 0; padding: 0; position: absolute; left: 10px; right: 10px; bottom: 96px; display: grid; gap: 8px; }
.note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 20px; color: #1c1c1e;
  background: rgba(245, 242, 236, 0.78); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.note-app { width: 34px; height: 34px; border-radius: 8px; background: #2f8cf6; color: #fff; display: grid; place-items: center; align-self: start; }
.note-text { min-width: 0; }
.note-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.note-title { font-size: 13px; font-weight: 600; line-height: 1.25; color: #1c1c1e; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-when { flex: none; font-size: 12px; color: rgba(60, 60, 67, 0.6); }
.note-subject { margin-top: 1px; font-size: 13px; line-height: 1.3; color: #1c1c1e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-body { margin-top: 1px; font-size: 13px; line-height: 1.3; color: rgba(60, 60, 67, 0.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.device-dock { position: absolute; left: 34px; right: 34px; bottom: 30px; display: flex; justify-content: space-between; }
.device-round { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(40, 34, 26, 0.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.device-home { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
@media (prefers-reduced-motion: no-preference) {
  .notes.is-armed .note { opacity: 0; transform: translateY(-14px) scale(.97); }
  .notes.is-armed.is-in .note { animation: noteIn .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d, 0s); }
}
@keyframes noteIn { to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .preview-inner { grid-template-columns: minmax(0, 1fr); }
  .device-screen { min-height: 0; }
}
main:has(> .preview:last-child) + .colophon { margin-top: 0; }

/* Sections */
.section { max-width: var(--measure); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter) 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.section-head h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.012em; }
.section-head > p { color: var(--steel); font-size: 15px; margin-left: auto; text-align: right; }
.section-head > div p { color: var(--steel); font-size: 15px; margin-top: 6px; }
.section-head > a:not(.button) { white-space: nowrap; color: var(--accent); text-decoration-color: currentColor; text-underline-offset: 5px; font-size: 15px; }
@media (max-width: 640px) { .section-head { flex-wrap: wrap; } .section-head > p { margin-left: 0; text-align: left; flex-basis: 100%; } }

/* Price guide */
.board { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--rule); }
.board th { text-align: left; font-weight: 500; font-size: 13px; color: var(--steel); padding: 14px 16px 10px 0; }
.board td { padding: 12px 16px 12px 0; border-top: 1px solid var(--rule); vertical-align: middle; }
.board tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.board th:last-child, .board td:last-child { padding-right: 0; }
.board-markets tr.is-here td { background: var(--mist); font-weight: 600; }
.board-markets tr.is-here .board-ref { color: var(--ink); }
.market-compare { max-width: 62ch; margin: 0 0 16px; color: var(--text); line-height: 1.6; }
.market-prices .board { max-width: 760px; }
.market-prices .notice { margin-top: 12px; }
.market-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.board .num { text-align: right; white-space: nowrap; }
.board-ref { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
/* A link fills its row's height (the cell's padding), so a tap anywhere on it lands. */
.board td > a { margin: -12px 0; padding: 12px 0; }
.board td > a:not(.board-ref) { display: inline-block; }
.board small { font-size: max(12px, 0.8em); }
.dealer-badge textarea { width: 100%; margin-top: 12px; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); resize: none; }
.board-ref strong { font-weight: 600; letter-spacing: 0.01em; display: block; }
/* Hover underlines fade in and rise into place rather than appearing at once. */
.board-ref strong, .watch-title, .family-name, .models a span:first-child, .market-list a span:first-child, .question summary h3, .method > summary h2, .link-list a span:first-child {
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 8px;
  transition: text-decoration-color .3s ease, text-underline-offset .3s cubic-bezier(.22, .61, .36, 1);
}
.board-ref:hover strong { text-decoration-color: var(--gilt); text-underline-offset: 4px; }
.board-plate { width: 56px; height: 56px; }
.board-model { color: var(--steel); font-size: 13px; display: block; }
.board-price { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .board .hide-sm { display: none; } .board tr > :not(.hide-sm):not(:has(~ :not(.hide-sm))) { padding-right: 0; } .board { font-size: 14px; } .board-plate { width: 46px; height: 46px; } .board-ref { gap: 12px; } .board th:nth-child(3), .board td:nth-child(3) { padding-right: 0; } .board .num + .num { padding-left: 14px; } }

/* Dial plates: a round mist well; white photo backgrounds blend away */
.family-plate, .board-plate { position: relative; display: block; flex: none; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.family-plate img, .board-plate img { --s: calc(var(--fz, 1) * 1.06); width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: translate(calc(var(--fx, 0%) * var(--s) / var(--fz, 1)), calc(var(--fy, 0%) * var(--s) / var(--fz, 1))) scale(var(--s)); transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.plate-mark { position: absolute; inset: 30%; width: 40%; height: 40%; color: #B9BFC5; }
.plate-mark .logo-pip { fill: #D7C9AF; }

/* Watch grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) and (min-width: 761px) { .grid:not(.compare-grid) > :nth-child(4):last-child { display: none; } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } }
.catalogue .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 760px) { .catalogue .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } }
.watch { min-width: 0; }
/* A card's lines share its row's line heights (subgrid): titles, prices and dealers line up across a row whether or
   not each card has a year, a set or a two-line title. */
@supports (grid-template-rows: subgrid) {
  /* The space between rows of cards sits under each card: as a row gap, a subgrid would spread it between a card's own lines. */
  .grid, .catalogue .grid { --card-gap: 44px; row-gap: 0; margin-bottom: calc(-1 * var(--card-gap)); }
  .grid > .watch { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--card-gap); }
  @media (max-width: 760px) { .grid, .catalogue .grid { --card-gap: 32px; } }
  .watch > .watch-link { grid-row: 1; }
  .watch > .watch-price { grid-row: 2; }
  .watch > .watch-source { grid-row: 3; }
}
.watch-link { text-decoration: none; display: block; }
.watch-image { position: relative; aspect-ratio: 1; background: var(--well); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; border-radius: var(--radius); }
.watch-image img { --s: var(--fz, 1); width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: translate(calc(var(--fx, 0%) * var(--s) / var(--fz, 1)), calc(var(--fy, 0%) * var(--s) / var(--fz, 1))) scale(var(--s)); transition: transform .6s cubic-bezier(.2, .7, .1, 1); }
.watch-link:hover .watch-image img { --s: calc(var(--fz, 1) * 1.035); }
.watch-noimage { position: absolute; inset: 32%; border: 1px solid #CDD2D5; border-radius: 50%; }
.watch-flag { position: absolute; left: 10px; top: 10px; background: var(--surface); color: var(--signal); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius); }
.watch-flag-sold { color: var(--ink); background: var(--gilt-soft); }
.watch-sold .watch-image img { filter: grayscale(.35); }
.watch-title { margin-top: 14px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.watch-link:hover .watch-title { text-decoration-color: var(--gilt); text-underline-offset: 4px; }
.watch-price { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.watch-deal { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--signal); white-space: nowrap; }
.watch-was { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--steel); }
.watch-price-label { font-weight: 400; color: var(--steel); font-size: 13px; margin-right: 4px; }
.watch-source { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13px; color: var(--steel); }
@media (max-width: 560px) {
  .watch-title { font-size: 14px; }
  .watch-price { font-size: 15px; }
  .watch-source { font-size: 12px; }
  .watch-source span + span { display: none; }
  /* Narrow cards: the deal note always on its own line under the price, not only when it does not fit. */
  .watch-deal { display: block; margin-left: 0; }
}

/* Browse by model: a dial plate per family */
.families { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 20px; }
@media (max-width: 900px) { .families { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.families-more { margin-top: 28px; font-size: 15px; color: var(--steel); }
.family { display: grid; justify-items: center; text-align: center; text-decoration: none; color: var(--ink); }
.family-plate { width: 100%; max-width: 168px; }
.family-name { margin-top: 14px; font-size: 16px; font-weight: 500; }
.family-meta { margin-top: 2px; font-size: 13px; color: var(--steel); display: grid; }
.family:hover .family-plate img { --s: calc(var(--fz, 1) * 1.12); }
.family:hover .family-name { text-decoration-color: var(--gilt); text-underline-offset: 4px; }
@media (max-width: 560px) { .families { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; } .family-name { margin-top: 10px; font-size: 14px; } .family-meta { font-size: 12px; } }
/* Tiles' lines share their row's line heights, as cards do. */
@supports (grid-template-rows: subgrid) {
  .families { --card-gap: 36px; row-gap: 0; margin-bottom: calc(-1 * var(--card-gap)); }
  .families > .family { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--card-gap); }
  @media (max-width: 560px) { .families { --card-gap: 24px; } }
}

/* Model and market lists */
/* Motion: photos fade in as they arrive instead of popping in, and pages cross-fade into each other
   where the browser supports it (the header stays put). Nothing moves for reduced motion. */
/* The fade-in keeps the photos' hover zoom smooth: it must name transform too, or it replaces their own transition. */
.js main img { transition: opacity .6s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.js .gallery-main img { transition: opacity .25s ease, transform .2s ease-out; }
.js .gallery-main.is-zoomed img { transition: opacity .25s ease; }
.js main img:not(.is-loaded) { opacity: 0; }
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) { .js main img { transition: none; } @view-transition { navigation: none; } }
/* Markets map: a dotted world, a pin per market (sized by listings), dropped in west to east */
.market-map { margin: 4px 0 28px; }
.market-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-land { fill: none; stroke: #CBD5CF; stroke-width: 6; stroke-linecap: round; transition: opacity 1.2s ease; }
.map-pin { cursor: pointer; outline: none; }
.pin-dot, .pin-ring { transform-box: fill-box; transform-origin: center; }
.pin-dot { fill: var(--accent); stroke: #FFFFFF; stroke-width: 3; transition: fill .25s ease, transform .55s cubic-bezier(.2, .9, .3, 1.35); }
.pin-ring { fill: none; stroke: var(--gilt); stroke-width: 3; opacity: 0; }
.pin-label { font-family: var(--sans); font-size: 26px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #FFFFFF; stroke-width: 10px; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.pin-count { font-weight: 400; fill: var(--steel); }
.map-pin:is(:hover, :focus-visible, .is-hot) .pin-dot { fill: var(--gilt); }
.map-pin:is(:hover, :focus-visible, .is-hot) .pin-label { opacity: 1; }
.map-pin:is(:hover, :focus-visible, .is-hot) .pin-ring { animation: pin-ping 1.4s ease-out infinite; }
.market-list a.is-hot span:first-child { text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 4px; }
.market-map.is-armed .map-land { opacity: 0; }
.market-map.is-armed .pin-dot { transform: scale(0); transition-delay: 0s, calc(var(--i) * 90ms + 350ms); }
.market-map.is-in .map-land { opacity: 1; }
.market-map.is-in .pin-dot { transform: scale(1); }
.market-map.is-in .map-pin:not(.is-hot):not(:hover) .pin-ring { animation: pin-ping 1.6s ease-out calc(var(--i) * 90ms + 500ms) 1; }
@keyframes pin-ping { 0% { opacity: .9; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.7); } }
.pin-body { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) { .map-land { stroke-width: 9; } .pin-body { transform: scale(1.9); } .pin-label { display: none; } }
.market-list-gaps b { margin-left: 8px; font-weight: 600; color: var(--steel); font-variant-numeric: tabular-nums; }
.market-list-gaps b.is-cheaper { color: var(--accent); }
/* For journalists: quotable findings, the country chart (a diverging bar chart in HTML) and the credit line */
.press-findings { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 48px; }
.press-findings li { break-inside: avoid; padding: 18px 0; border-top: 1px solid var(--rule); }
.press-quote { font-family: var(--display); font-weight: 500; font-size: 21px; line-height: 1.4; color: var(--ink); }
.press-source { margin-top: 8px; font-size: 14px; color: var(--steel); }
.press-credit { padding: 14px 16px; background: var(--mist); font-size: 15px; color: var(--ink); border-radius: var(--radius); }
.gap-chart { margin: 0; max-width: 880px; }
.gap-chart h3 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.gap-chart figcaption p { margin-top: 4px; font-size: 14px; color: var(--steel); }
.gap-legend { display: flex; gap: 20px; margin: 16px 0 10px; font-size: 14px; color: var(--text); }
.gap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gap-swatch { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius); }
.gap-cheaper { background: var(--accent); }
.gap-pricier { background: #B8862B; }
.gap-rows { list-style: none; margin: 0; padding: 0; }
.gap-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; height: 30px; }
.gap-row:hover .gap-name { color: var(--ink); font-weight: 600; }
.gap-name { padding-right: 12px; font-size: 14px; color: var(--text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gap-track { position: relative; height: 100%; }
.gap-track::before { content: ""; position: absolute; left: var(--zero); top: 0; bottom: 0; width: 1px; background: var(--rule); }
.gap-bar { position: absolute; top: 7px; height: 16px; }
.gap-bar.gap-cheaper { border-radius: 4px 0 0 4px; }
.gap-bar.gap-pricier { border-radius: 0 4px 4px 0; }
.gap-value { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gap-table { margin-top: 18px; }
.gap-table summary { cursor: pointer; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 4px; }
.gap-table table { margin-top: 12px; }
@media (max-width: 560px) { .gap-row { grid-template-columns: 112px minmax(0, 1fr); } .gap-name { font-size: 13px; } .press-quote { font-size: 18px; } }
.models, .market-list { columns: 4 200px; column-gap: 32px; border-top: 1px solid var(--rule); }
.models a, .market-list a { break-inside: avoid; }
.models a, .market-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.models a span:first-child, .market-list a span:first-child { font-size: 16px; font-weight: 500; color: var(--ink); }
.models a span:last-child, .market-list a span:last-child { color: var(--steel); font-size: 14px; }
.models a:hover span:first-child, .market-list a:hover span:first-child { text-decoration-color: var(--gilt); text-underline-offset: 4px; }
@media (max-width: 560px) { .models, .market-list { columns: 2; column-gap: 18px; } .models a span:first-child, .market-list a span:first-child { font-size: 15px; } }

/* Page heads */
.page-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.page-head-inner { max-width: var(--measure); margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(24px, 3vw, 36px); }
.page-head h1 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 48; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.015em; }
.page-head .lede { margin-top: 12px; color: var(--text); max-width: 60ch; font-size: 16px; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--steel); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #B4BABF; }
.crumbs a { color: var(--steel); text-underline-offset: 3px; }
/* Phones: a finger-sized target for each crumb, with the trail kept where it was. */
@media (max-width: 640px) { .crumbs ol { margin: -9px 0 5px; } .crumbs a { display: inline-block; padding: 9px 0; } }
.crumbs li[aria-current] { color: var(--ink); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .crumbs li[aria-current] { display: none; } }
.market-summary { margin-top: 18px; max-width: 72ch; color: var(--text); font-size: 15px; line-height: 1.7; }
/* A market page opens with its own figures and the paragraph about them, then the watches. */
.page-head .market-summary { margin-top: 14px; font-size: 15px; }
/* Price history: the line sits behind one column per month; labels are HTML so they stay legible */
.price-history h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: clamp(24px, 2.6vw, 32px); }
.price-history-summary { margin-top: 10px; max-width: 62ch; font-size: 16px; color: var(--text); }
.trend { margin: 28px 0 0; max-width: 760px; }
.trend-chart { position: relative; height: 150px; border-bottom: 1px solid var(--rule); }
.trend-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trend-line polyline { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.trend-dots, .trend-labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.trend-dots { position: absolute; inset: 0; }
.trend-dots li { position: relative; }
.trend-dots i { position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.trend-dots li:last-child i { background: var(--gilt); border-color: var(--gilt); }
.trend-labels { margin-top: 10px; text-align: center; }
.trend-labels strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.trend-labels span { display: block; margin-top: 2px; font-size: 12px; color: var(--steel); }
.trend figcaption { margin-top: 16px; font-size: 13px; color: var(--steel); }
/* Price checker */
.check-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 120px auto; gap: 12px; align-items: end; max-width: 860px; }
.check-form .button { min-height: 46px; }
@media (max-width: 760px) { .check-form { grid-template-columns: 1fr 1fr; } .check-form .field:first-child { grid-column: 1 / -1; } .check-form .button { grid-column: 1 / -1; } }
.check-result { margin-top: 28px; max-width: 860px; padding: 26px 28px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.check-result.is-good { border-color: rgba(47, 107, 80, 0.45); }
.check-result.is-high { border-color: rgba(166, 137, 90, 0.6); }
.check-result.is-warn { border-color: #B4533C; background: #FBF4F2; }
.check-band { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); line-height: 1.2; }
.check-result.is-good .check-band { color: var(--signal); }
.check-result > p:not(.check-band) { margin-top: 8px; color: var(--text); }
.check-result .facts-row { margin-top: 20px; }
.check-note { margin-top: 16px; font-size: 14px; color: var(--steel); max-width: 72ch; }
.check-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Comparisons */
.compare-table { max-width: 760px; }
.compare-table th[scope="row"] { font-weight: 500; color: var(--steel); font-size: 14px; }
.compare-table thead .num { text-align: right; }
@media (max-width: 560px) {
  .compare-table { font-size: 13px; table-layout: fixed; }
  .compare-table th[scope="row"] { width: 30%; font-size: 12.5px; }
  .compare-table th, .compare-table td { padding-right: 6px !important; padding-left: 0 !important; }
  .compare-table td.num, .compare-table th.num { white-space: normal; overflow-wrap: anywhere; }
}
.compare-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Both sides' cards on one grid, so a row of four lines up across the two references. */
@supports (grid-template-rows: subgrid) {
  .compare-sides { grid-template-columns: repeat(2, minmax(0, 1fr)) 0 repeat(2, minmax(0, 1fr)); gap: 0 24px; --card-gap: 44px; margin-bottom: calc(-1 * var(--card-gap)); }
  .compare-sides > div, .compare-sides .compare-grid { display: contents; }
  .compare-sides .section-head { grid-row: 1; grid-column: 1 / span 2; }
  .compare-sides > div + div .section-head { grid-column: 4 / span 2; }
  .compare-sides .watch:nth-child(odd) { grid-column: 1; }
  .compare-sides .watch:nth-child(even) { grid-column: 2; }
  .compare-sides > div + div .watch:nth-child(odd) { grid-column: 4; }
  .compare-sides > div + div .watch:nth-child(even) { grid-column: 5; }
  .compare-sides .watch:nth-child(-n+2) { grid-row: 2 / span 3; }
  .compare-sides .watch:nth-child(n+3) { grid-row: 5 / span 3; }
  @media (max-width: 760px) {
    .compare-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; --card-gap: 32px; }
    .compare-sides .section-head, .compare-sides > div + div .section-head { grid-row: auto; grid-column: 1 / -1; }
    .compare-sides > div + div .section-head { margin-top: 24px; }
    .compare-sides .watch:nth-child(odd), .compare-sides .watch:nth-child(even), .compare-sides > div + div .watch:nth-child(odd), .compare-sides > div + div .watch:nth-child(even) { grid-column: auto; }
    .compare-sides .watch:nth-child(-n+2), .compare-sides .watch:nth-child(n+3) { grid-row: span 3; }
  }
}
/* Dealers: their own logo on their page and in lists */
.dealer-head { display: flex; align-items: center; gap: 18px; }
.dealer-logo { flex: none; width: 72px; height: 72px; border-radius: var(--radius); object-fit: contain; background: #FFFFFF; border: 1px solid var(--rule); padding: 8px; }
.dealer-place { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; color: var(--steel); }
.dealer-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dealer-mark { flex: none; width: 24px; height: 24px; border-radius: var(--radius); object-fit: contain; background: #FFFFFF; border: 1px solid var(--rule); }
@media (max-width: 560px) { .dealer-logo { width: 56px; height: 56px; border-radius: var(--radius); padding: 6px; } }
/* Questions answered from the live figures */
.questions h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: clamp(24px, 2.6vw, 32px); }
.question-list { margin-top: 18px; max-width: 820px; border-bottom: 1px solid var(--rule); }
.question { border-top: 1px solid var(--rule); }
.question summary, .method > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.question summary::-webkit-details-marker, .method > summary::-webkit-details-marker { display: none; }
.question summary { padding: 16px 0; }
.question summary::after, .method > summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--gilt); transition: transform .25s ease; }
.question[open] summary::after, .method[open] > summary::after { transform: rotate(45deg); }
.question h3 { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.question p { padding-bottom: 18px; font-size: 15px; color: var(--text); max-width: 62ch; }
.question summary:hover h3, .method > summary:hover h2 { text-decoration-color: var(--gilt); text-underline-offset: 4px; }
.section.method { max-width: var(--measure); padding-top: clamp(40px, 5vw, 64px); }
.method > summary { max-width: 820px; padding: 18px 0 4px; border-top: 1px solid var(--rule); }
.method > p { max-width: 66ch; }
.method > summary h2 { margin: 0; font-size: 20px; }
.method > p:first-of-type { margin-top: 14px; }
.market-detail { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px; align-items: start; }
.market-detail:has(> :only-child) { --cols: 1; }
.market-detail:has(> :nth-child(2):last-child) { --cols: 2; }
.market-detail:has(> :nth-child(4):last-child) { --cols: 4; }
@media (max-width: 1080px) { .market-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .market-detail > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .market-detail { grid-template-columns: minmax(0, 1fr); } }
.market-wide h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 22px; margin-bottom: 14px; }
.model-guide h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: clamp(24px, 2.6vw, 32px); }
.model-guide p { margin-top: 14px; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--text); }
.market-detail h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 22px; margin-bottom: 14px; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.link-columns { display: block; columns: 4 240px; column-gap: 40px; }
.link-columns li { break-inside: avoid; }
.link-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; }
.link-list a span:first-child { color: var(--ink); font-weight: 500; }
.link-list a span:last-child { color: var(--steel); font-size: 14px; }
.link-list a:hover span:first-child { text-decoration-color: currentColor; text-underline-offset: 3px; }
.facts-row { margin: 22px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 12px 40px; }
@media (max-width: 560px) { .facts-row { grid-auto-flow: row; grid-template-columns: repeat(2, max-content); } .facts-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, max-content); gap: 12px 28px; } }
.fact { display: grid; gap: 0; }
.fact dt { font-size: 13px; color: var(--steel); }
.fact dd { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .facts-row { gap: 10px 24px; } .fact dd { font-size: 17px; } }
/* A market page's figures share the phone's width: two or three to a row, long labels wrapping. */
@media (max-width: 560px) { .market-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .market-facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; } .market-facts dt { line-height: 1.35; } .market-facts dd { font-size: 16px; } }
/* Values share one line when a label wraps. */
.market-facts .fact { align-content: space-between; gap: 2px; }
/* Phones: the head above the watches stays short enough that the first row of cards shows on the first screen.
   The summary keeps its full text, clamped to three lines; a tap opens it. */
@media (max-width: 560px) {
  .page-head:has(+ .catalogue) .page-head-inner { padding-top: 16px; padding-bottom: 16px; }
  .page-head:has(+ .catalogue) h1 { font-size: 30px; }
  .page-head:has(+ .catalogue) .market-facts { margin-top: 12px; gap: 8px 16px; }
  .page-head:has(+ .catalogue) .market-facts dt { font-size: 12px; line-height: 1.3; }
  .page-head:has(+ .catalogue) .market-facts dd { font-size: 15px; }
  .page-head:has(+ .catalogue) .lede { margin-top: 8px; }
  .page-head:has(+ .catalogue) .market-summary { margin-top: 10px; font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; cursor: pointer; }
  .page-head:has(+ .catalogue) .market-summary:hover, .page-head:has(+ .catalogue) .market-summary:active { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; cursor: auto; }
  .page-head + .catalogue { padding-top: 12px; }
  /* Count and alert share the first row, Filters and Sort the second. */
  .page-head + .catalogue .toolbar { row-gap: 0; column-gap: 8px; margin-bottom: 14px; }
  .page-head + .catalogue .toolbar-actions { display: contents; }
  .page-head + .catalogue .toolbar-count { order: 0; flex: 1 1 auto; }
  .page-head + .catalogue .toolbar [data-open-alert] { order: 1; flex: 0 1 auto; }
  .page-head + .catalogue .toolbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .page-head + .catalogue .filters-toggle { order: 3; margin-top: 8px; }
  .page-head + .catalogue .toolbar-sort { order: 4; margin-top: 8px; }
}

/* Catalogue */
.catalogue { max-width: var(--measure); margin: 0 auto; padding: 28px var(--gutter) 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; align-items: start; }
.filters { display: grid; gap: 24px; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
/* One label style for every filter. */
.filters legend, .filters .field { padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.filters legend { margin-bottom: 4px; }
.filters .field input, .filters .field select { font-weight: 400; }
.filter-models { display: grid; }
.filter-models a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-decoration: none; padding: 6px 0; font-size: 15px; color: var(--text); transition: color .2s ease; }
.filter-models a span:last-child { font-size: 13px; color: var(--steel); font-variant-numeric: tabular-nums; }
.filter-models a:hover { color: var(--ink); }
.filter-models a[aria-current] { color: var(--accent); font-weight: 600; }
.filter-more summary { list-style: none; cursor: pointer; padding: 6px 0; font-size: 14px; color: var(--accent); }
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more summary::after { content: " +"; }
.filter-more[open] summary { order: 1; }
.filter-more[open] summary::after { content: " −"; }
.filter-more[open] { display: flex; flex-direction: column; }
.price-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters-apply { width: 100%; }
.filters-toggle { display: none; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar-count { color: var(--steel); font-size: 15px; }
.toolbar-count strong { color: var(--ink); font-weight: 600; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar select { min-height: 44px; width: auto; padding-right: 28px; }
.load-more { margin: 44px auto 0; display: flex; justify-content: center; }
.empty { padding: 40px 0; border-top: 1px solid var(--rule); max-width: 56ch; }
.empty h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 28px; }
.empty p { color: var(--text); margin: 10px 0 20px; }
@media (max-width: 900px) {
  .catalogue { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .filters { display: none; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
  .filters.is-open { display: grid; }
  .filters-toggle { display: inline-flex; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions > * { flex: 1 1 auto; }
  .toolbar-sort { display: flex; flex: 1 1 140px; }
  .toolbar-sort select { width: 100%; }
}

/* Listing detail */
.detail { max-width: var(--measure); margin: 0 auto; padding: 22px var(--gutter) 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.gallery-main { aspect-ratio: 1; background: var(--mist); position: relative; overflow: hidden; border-radius: var(--radius); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .25s ease, transform .2s ease-out; }
.gallery-main img.is-swapping { opacity: .35; }
@media (hover: hover) and (pointer: fine) { [data-gallery-main] { cursor: zoom-in; } }
.gallery-main.is-zoomed img { transform: scale(2.2); transition: opacity .25s ease; }
.gallery-step { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; border: 1px solid var(--rule); z-index: 1; }
.gallery-step span { margin-top: -3px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-main:hover .gallery-step, .gallery-step:focus-visible { opacity: 1; }
.gallery-count { position: absolute; right: 12px; bottom: 10px; font-size: 13px; color: var(--steel); background: rgba(255, 255, 255, 0.85); padding: 1px 8px; border-radius: var(--radius); z-index: 1; }
@media (hover: none) { .gallery-step { opacity: 1; width: 34px; height: 34px; font-size: 20px; } }
.gallery-thumbs { margin-top: 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: relative; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs button { flex: 0 0 64px; padding: 0; border: 1px solid transparent; background: var(--mist); aspect-ratio: 1; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
.gallery-thumbs button { transition: border-color .2s ease, opacity .2s ease; opacity: .72; }
.gallery-thumbs button:hover, .gallery-thumbs button[aria-current="true"] { opacity: 1; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.buybox { position: sticky; top: 84px; }
.buybox-family { color: var(--steel); font-size: 14px; }
.buybox h1 { margin-top: 4px; font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 32; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.buybox-ref { margin-top: 8px; font-size: 15px; color: var(--steel); }
.buybox-price { margin-top: 22px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; color: var(--ink); }
.buybox-local { color: var(--steel); font-size: 14px; margin-top: 2px; }
.buybox-drop { color: var(--signal); font-size: 14px; margin-top: 4px; }
.buybox-market { margin-top: 10px; font-size: 14px; color: var(--text); }
.buybox-market strong { color: var(--ink); }
.buybox-lock { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--steel); text-decoration: none; }
.buybox-lock span { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); background: var(--gilt-soft); padding: 2px 8px; border-radius: var(--radius); }
.buybox-lock:hover { color: var(--ink); }
/* Tools for signed-in members shown to everyone else (sign-in is free) */
.signin-lock { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--well); max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.signin-lock-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.signin-lock p + p { margin-top: 6px; font-size: 14px; color: var(--steel); }
.signin-lock .button { flex: none; }
.sold-recent h2, .price-changes h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: clamp(24px, 2.6vw, 32px); }
.sold-summary, .price-changes-summary { margin: 10px 0 18px; max-width: 62ch; font-size: 16px; color: var(--text); }
.sold-date { display: block; margin-top: 2px; font-size: 12px; color: var(--steel); }
.change-list { list-style: none; margin: 0; padding: 0; max-width: 560px; border-top: 1px solid var(--rule); }
.change-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.change-list li span:first-child { color: var(--steel); }
.change-list .change-down { color: var(--signal); min-width: 96px; text-align: right; }
.change-list .change-up { color: var(--steel); min-width: 96px; text-align: right; }
.buybox-actions { margin-top: 22px; display: grid; gap: 10px; }
.buybox-good { color: var(--signal); }
/* Where the price sits: lowest asking price on the left, the median on the right. */
.price-meter { margin-top: 14px; max-width: 420px; }
.price-meter-track { position: relative; height: 6px; border-radius: var(--radius); background: var(--rule); }
.price-meter-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; transform: translateY(-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.price-meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius); background: var(--accent); }
.price-meter-scale { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
/* Phones: once the dealer button is out of view, a bar at the bottom of the screen keeps it in reach. */
.buy-bar { display: none; }
@media (max-width: 760px) {
  .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 0.22s ease; }
  .buy-bar.is-shown { transform: none; }
  .buy-bar p { display: grid; min-width: 0; font-size: 12px; color: var(--steel); }
  .buy-bar p strong { font-size: 16px; font-weight: 600; color: var(--ink); }
  .buy-bar p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buy-bar .button { flex: none; min-height: 44px; padding: 0 18px; }
  body:has(.buy-bar) .colophon { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .buy-bar { transition: none; } }
.buybox-actions .button { width: 100%; min-height: 50px; white-space: normal; text-align: center; }
.also-listed { font-size: 14px; color: var(--steel); text-align: center; }
.verified { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--steel); display: grid; gap: 4px; }
.verified strong { color: var(--ink); font-weight: 600; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); margin-right: 8px; vertical-align: 1px; }
.status-dot.is-off { background: #A3A9AE; }
.specs { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.specs div { padding: 11px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.specs div:nth-child(odd) { padding-right: 16px; }
.specs div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.specs dt { font-size: 13px; color: var(--steel); }
.specs dd { margin: 1px 0 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.notice { margin-top: 14px; font-size: 13px; color: var(--steel); }
.sold-banner { background: var(--ink); color: #fff; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.compare-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--steel); font-size: 15px; margin-bottom: 18px; }
.compare-meta strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } .buybox { position: static; } }

/* Prose, account */
.prose { max-width: 66ch; }
.prose h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 26px; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--text); margin-bottom: 12px; }
/* Section links (/methodology#dealers) land below the sticky masthead. */
.prose h2[id] { scroll-margin-top: 80px; }
.panel { background: var(--surface); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 32px); min-width: 0; }
.alert-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.alert-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.alert-list h3 { font-size: 16px; font-weight: 600; }
.alert-list p { font-size: 14px; color: var(--steel); margin-top: 2px; }
.alert-list .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.alert-list .button { min-height: 36px; padding: 0 12px; font-size: 14px; }
@media (max-width: 640px) { .alert-list li { grid-template-columns: 1fr; } }
.account-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
.signin { max-width: 460px; }
.signin h1 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; }
.signin form { display: grid; gap: 14px; margin-top: 22px; }

/* Dialog */
.sheet { border: 0; padding: 0; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--surface); color: var(--text); border-radius: var(--radius); }
.sheet::backdrop { background: rgba(20, 24, 28, 0.5); }
.sheet-body { padding: clamp(20px, 4vw, 28px); }
.sheet-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.sheet-head h2 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 28; font-size: 28px; }
.sheet-close { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--ink); }
.sheet-lede { color: var(--text); margin: 6px 0 20px; font-size: 15px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet .check { margin-top: 14px; }
.toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 31; width: max-content; max-width: calc(100vw - 24px); transform: translate(-50%, 8px); opacity: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); padding: 10px 16px; font-size: 14px; border-radius: var(--radius); transition: opacity .2s, transform .2s; }
.alert-email { margin-top: 14px; }
.alert-email .field { width: 100%; }
.alert-terms { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--steel); }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast a { color: var(--blue); text-underline-offset: 3px; }
/* Alert form: the watch, its details as tick-boxes, and the picker by photo. */
.alert-watch { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.alert-watch-photo, .alert-option-photo { flex: none; width: 64px; height: 64px; border-radius: var(--radius); background: var(--mist); overflow: hidden; }
.alert-watch-photo img, .alert-option-photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.alert-watch > div { min-width: 0; flex: 1; }
.alert-watch-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.alert-watch-sub { margin-top: 2px; font-size: 14px; color: var(--steel); }
.alert-change { flex: none; border: 0; background: none; cursor: pointer; font-size: 14px; }
.alert-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.alert-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 14px; color: var(--text); cursor: pointer; }
.alert-chip input { width: 16px; height: 16px; accent-color: var(--ink); }
.alert-chip:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.alert-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.alert-choice-label { font-size: 13px; color: var(--steel); min-width: 58px; }
.alert-pill { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-transform: capitalize; }
.alert-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.alert-picker { margin-top: 14px; }
.alert-search { width: 100%; min-height: 46px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 14px; font: inherit; font-size: 15px; }
.alert-search:focus { border-color: var(--ink); outline: none; }
.alert-options { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(46vh, 380px); overflow-y: auto; }
.alert-option { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.alert-option:hover { border-color: var(--ink); }
.alert-option-photo { width: 52px; height: 52px; }
.alert-option-text { display: grid; min-width: 0; font-size: 13px; color: var(--steel); }
.alert-option-text strong { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-hint { grid-column: 1 / -1; font-size: 14px; color: var(--steel); }
.alert-more { margin-top: 16px; }
.alert-more summary { cursor: pointer; font-size: 14px; color: var(--steel); }
.alert-more[open] summary { margin-bottom: 12px; }
@media (max-width: 480px) { .alert-options { grid-template-columns: minmax(0, 1fr); } }
.sheet-actions { margin-top: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } .sheet-actions .button { width: 100%; } }

/* Colophon */
.colophon { margin-top: clamp(72px, 9vw, 120px); background: var(--surface); border-top: 1px solid var(--rule); color: var(--steel); }
.colophon-inner { max-width: var(--measure); margin: 0 auto; padding: 56px var(--gutter) 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 40px clamp(32px, 5vw, 72px); }
.colophon-mark { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.colophon-mark .logo-mark { color: var(--accent); }
.colophon-note { margin-top: 12px; font-size: 14px; max-width: 52ch; }
.colophon nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 15px; }
.colophon-group { display: grid; gap: 10px; align-content: start; }
.colophon-head { font-size: 13px; color: var(--steel); margin-bottom: 4px; }
.colophon-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; }
.colophon-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.colophon-legal a, .colophon-lang a { text-decoration: none; color: var(--text); }
.colophon-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.colophon-lang { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.colophon-lang a:hover { color: var(--accent); }
.colophon-legal a:hover { color: var(--accent); }
.colophon nav a { text-decoration: none; color: var(--ink); }
.colophon nav a:hover { color: var(--accent); }
.currency-control { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.currency-control select { border: 1px solid var(--rule); background-color: var(--surface); min-height: 38px; padding: 0 14px; border-radius: var(--radius); color: var(--ink); }
.currency-control select option { color: var(--ink); }
@media (max-width: 900px) { .colophon-inner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .colophon nav { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .colophon nav > .colophon-group:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 16px; } .colophon nav > .colophon-group:last-child:nth-child(odd) .colophon-head { grid-column: 1 / -1; } .colophon-group a { padding: 4px 0; } .colophon-base { flex-direction: column; align-items: flex-start; } }

@media (max-width: 640px) {
  input, select, textarea, .field input, .field select, .toolbar select, .field-currency, .currency-control select { font-size: 16px; }
  .section-head > a:not(.button) { padding: 8px 0; }
}
/* Phones: a section's "See all" link would wrap under its heading, between the heading and its note; it moves to
   the end of the section as a full-width button, after the watches it leads on to. */
@media (max-width: 560px) {
  .section:has(> .section-head > a:not(.button)) { display: flex; flex-direction: column; }
  .section:has(> .section-head > a:not(.button)) > * { order: 2; min-width: 0; }
  .section:has(> .section-head > a:not(.button)) > .section-head { display: contents; }
  .section:has(> .section-head > a:not(.button)) > .section-head > :not(a) { order: 0; margin-bottom: 20px; }
  .section:has(> .section-head > a:not(.button)) > .section-note { order: 1; margin-top: -8px; }
  .section:has(> .section-head > a:not(.button)) > .section-head > a { order: 3; margin-top: 28px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--radius); text-decoration: none; white-space: normal; text-align: center; }
  .models, .market-list { columns: 1; }
  .preview-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }