/* Gulfshore Watch Co. — site styles */
:root {
  --sand: #E8DAC0;
  --sand-deep: #DCCBA9;
  --paper: #F4EEE2;
  --card: #FBF8F2;
  --line: #DDD0B6;
  --line-strong: #CDBB98;
  --gulf: #A7CAD6;
  --gulf-line: #8DB4C2;
  --ink: #1F3B48;
  --ink-soft: #2E4E5C;
  --mist: #C9D3D6;
  --input-line: #A99A7C;
  --display: "Aboreto", "Times New Roman", serif;
  --body: "Sorts Mill Goudy", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); }
a:hover { color: #4C6B78; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.section-sm { padding-top: 4rem; padding-bottom: 4rem; }
.bg-sand { background: var(--sand); }
.bg-gulf { background: var(--gulf); }
.bg-ink { background: var(--ink); color: var(--sand); }
.bg-ink a { color: var(--sand); }

.display { font-family: var(--display); font-weight: 400; }
.eyebrow { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.4em; color: var(--ink-soft); }
.bg-ink .eyebrow { color: var(--gulf); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.13; letter-spacing: 0.07em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; letter-spacing: 0.11em; }
h3 { font-size: 1.2rem; letter-spacing: 0.1em; }
.lede { font-style: italic; font-size: 1.3rem; color: var(--ink-soft); margin: 0; max-width: 38rem; }
.bg-ink .lede { color: var(--mist); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }
.rule { width: 4rem; height: 1px; background: var(--ink); border: 0; margin: 0; }
.center { text-align: center; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 2.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 2rem; }
.row-between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem 4rem; }
.split > .grow { flex: 999 1 420px; min-width: 0; }
.split > .side { flex: 1 1 340px; min-width: 0; }

.btn, .btn-outline, .btn-light, .link-caps {
  font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.2em; text-decoration: none;
  display: inline-block; cursor: pointer;
}
.btn { padding: 1rem 2rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn:hover { background: #2C4F5E; color: var(--paper); }
.btn-outline { padding: 1rem 2rem; background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-light { padding: 1rem 2rem; background: var(--sand); color: var(--ink); border: 1px solid var(--sand); }
.link-caps { font-size: 0.8rem; padding: 0.75rem 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Header */
.site-header { background: var(--sand); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.logo { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--display); }
.logo-name { font-size: 1.6rem; letter-spacing: 0.16em; line-height: 1; }
.logo-sub { font-size: 0.7rem; letter-spacing: 0.6em; }
.nav-toggle { display: none; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.2em; background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 0.7rem 1rem; cursor: pointer; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.6rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; }
.nav a { text-decoration: none; padding: 0.7rem 0; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav a.btn { padding: 0.75rem 1.25rem; border-bottom: 0; color: var(--paper); }
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; }
  .nav.open { display: flex; }
  .nav a { width: 100%; padding: 0.9rem 0; border-bottom: 1px solid var(--line-strong); }
  .nav a.btn { margin-top: 0.75rem; width: auto; }
}

/* Ticker */
.ticker { background: var(--gulf); border-top: 1px solid var(--gulf-line); border-bottom: 1px solid var(--gulf-line); }
.ticker .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.22em; text-align: center; }

/* Hero */
.hero-img { width: 100%; height: 34rem; object-fit: cover; object-position: center 40%; }
@media (max-width: 700px) { .hero-img { height: 24rem; } }

/* Cards */
.cards { display: flex; flex-wrap: wrap; gap: 2rem; }
.card { flex: 1 1 280px; max-width: 420px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 0.8rem; background: var(--card); border: 1px solid var(--line); padding: 1.25rem; }
.card:hover { border-color: var(--ink); color: var(--ink); }
.card .meta { color: var(--ink-soft); }
.card .price { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; font-family: var(--display); letter-spacing: 0.1em; }
.card .tag { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--ink-soft); }
.placeholder { aspect-ratio: 4 / 5; background: var(--sand); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--ink-soft); }
.photo-45 { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.feature-card { flex: 1 1 240px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 0.75rem; }
.feature-card:hover { color: var(--ink); }
.feature-card:hover img { opacity: 0.92; }

/* Promo tiles */
.tile { flex: 1 1 380px; text-decoration: none; padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; min-height: 16rem; }
.tile .big { font-family: var(--display); font-size: 1.9rem; letter-spacing: 0.08em; line-height: 1.2; }
.tile.gulf { background: var(--gulf); color: var(--ink); }
.tile.ink { background: var(--ink); color: var(--sand); }
.tile.ink:hover { color: var(--sand); }

/* Points */
.points { display: flex; flex-wrap: wrap; gap: 2rem; }
.point { flex: 1 1 220px; display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--ink); padding-top: 1rem; }
.bg-ink .point { border-top-color: var(--gulf); }
.point .label { font-family: var(--display); letter-spacing: 0.14em; }
.point .text { font-size: 1rem; }

/* Filters, toggles */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.16em; padding: 0.75rem 1.1rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 1.1rem; background: var(--sand); padding: 2rem; border: 1px solid var(--line-strong); }
.bg-sand .form { background: var(--paper); }
.form .fields { display: flex; flex-wrap: wrap; gap: 1rem; }
.form label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.16em; }
.form input, .form select, .form textarea { font-family: var(--body); font-size: 1.05rem; padding: 0.75rem; border: 1px solid var(--input-line); background: #FFFFFF; color: var(--ink); border-radius: 0; }
.form textarea { resize: vertical; }
.form .note { font-size: 0.95rem; font-style: italic; color: var(--ink-soft); margin: 0; }
.form button { align-self: flex-start; }
.form-msg { margin: 0; font-size: 1rem; color: var(--ink); }

/* Features (What's hot) */
.feature { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem 4rem; }
.feature.reverse { flex-wrap: wrap-reverse; }
.feature .pic { flex: 1 1 320px; min-width: 0; max-width: 460px; }
.feature .body { flex: 999 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.feature .body p { margin: 0; }
.k { font-family: var(--display); letter-spacing: 0.1em; }

/* Quiz */
.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; }
.quiz-option { text-align: left; font-family: var(--body); font-size: 1.15rem; padding: 1rem 1.25rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.quiz-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.quiz-result { background: var(--paper); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.quiz-empty { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; font-style: italic; color: var(--ink-soft); border: 1px dashed var(--input-line); }
[hidden] { display: none !important; }

/* Glossary */
.glossary details { border-top: 1px solid var(--line-strong); }
.glossary details:last-child { border-bottom: 1px solid var(--line-strong); }
.glossary summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.14em; }
.glossary summary::-webkit-details-marker { display: none; }
.glossary summary::after { content: "+"; }
.glossary details[open] summary::after { content: "−"; }
.glossary p { margin: 0 0 1rem; }

/* Watch detail */
.gallery-main { aspect-ratio: 1 / 1; background: var(--sand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 1rem; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--ink-soft); }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.thumb { aspect-ratio: 1 / 1; background: var(--sand); border: 2px solid transparent; font-family: var(--display); font-size: 0.7rem; color: var(--ink-soft); cursor: pointer; }
.thumb[aria-pressed="true"] { border-color: var(--ink); background: var(--sand-deep); color: var(--ink); }
.specs { width: 100%; border-collapse: collapse; font-size: 1rem; }
.specs caption { text-align: left; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.24em; padding-bottom: 0.75rem; }
.specs tr { border-top: 1px solid var(--line); }
.specs tr:last-child { border-bottom: 1px solid var(--line); }
.specs th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 0.6rem 1rem 0.6rem 0; }
.specs td { padding: 0.6rem 0; }
.price-big { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.08em; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 1rem 0; }
.breadcrumb { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.2em; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.breadcrumb a, .breadcrumb span { padding: 0.5rem 0; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; }
.steps li { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.steps .num { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.tips { display: flex; flex-direction: column; gap: 0.6rem; background: var(--paper); padding: 1.5rem; border: 1px solid var(--line-strong); }
.tips ul { margin: 0; padding-left: 1.1rem; font-size: 1rem; }

/* Footer */
.site-footer { background: var(--ink); color: var(--sand); font-size: 1rem; }
.site-footer a { color: var(--sand); }
.site-footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.site-footer nav { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; }
.site-footer nav a { text-decoration: none; padding: 0.3rem 0; }
.site-footer .fine { border-top: 1px solid #4C6B78; padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; color: var(--mist); }

/* ---------- Rolex Story + model timelines ---------- */
.tl-hero { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tl-fig { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tl-credit { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; line-height: 1.4; }
.tl-credit a { color: var(--ink-soft); }
.tl-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.tl-facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.tl-facts .k { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--ink-soft); }
.tl-facts span:last-child { font-size: 1.2rem; }

.tl-section { padding: 4rem 0 3rem; }
.tl-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2rem; }
.tl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tl-jumps { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tl-jump { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; padding: 0.6rem 0.85rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.tl-jump:hover, .tl-jump[aria-current="true"] { background: var(--ink); color: var(--paper); }
.tl-arrows { display: flex; gap: 0.5rem; }
.tl-arrow { width: 3rem; height: 3rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.tl-arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.tl-arrow:disabled { opacity: 0.3; cursor: default; }

.tl-viewport { --edge: max(1.5rem, calc((100vw - 1240px) / 2 + 1.5rem)); }
.timeline {
  list-style: none; margin: 0; display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--edge);
  padding: 0 var(--edge) 1.5rem; scrollbar-width: thin; scrollbar-color: var(--ink) var(--sand);
}
.timeline:focus-visible { outline-offset: -2px; }
.tl-card { flex: 0 0 min(320px, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; padding-right: 1.5rem; }
.tl-card:last-child { padding-right: 0; }
.tl-node { position: relative; height: 3.25rem; border-bottom: 1px solid var(--ink); margin-right: -1.5rem; }
.tl-card:last-child .tl-node { margin-right: 0; }
.tl-node::after { content: ""; position: absolute; left: 0; bottom: -0.45rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.tl-year { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.06em; white-space: nowrap; }
.tl-body { margin-top: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.7rem; background: var(--card); border: 1px solid var(--line); padding: 1.1rem; }
.tl-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); }
div.tl-photo { font-size: 0.72rem; line-height: 1.8; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; }
.tl-ref { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--ink-soft); }
.tl-tag { font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.22em; padding: 0.25rem 0.5rem; background: var(--gulf); color: var(--ink); }
.tl-body h3 { font-size: 1.1rem; line-height: 1.35; }
.tl-body p { margin: 0; font-size: 1rem; line-height: 1.55; }

.big-year { font-size: clamp(4rem, 9vw, 6.5rem); line-height: 1; letter-spacing: 0.04em; }
.milestones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line-strong); }
.ms:last-child { border-bottom: 1px solid var(--line-strong); }
.ms-year { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1.2; }
.ms p { margin: 0; max-width: 46rem; }
@media (max-width: 560px) { .ms { grid-template-columns: 1fr; gap: 0.3rem; } }
.model-card { background: var(--paper); }

.sources summary { cursor: pointer; font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.22em; padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); list-style: none; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: " +"; }
.sources[open] summary::after { content: " −"; }
.sources h3 { font-size: 0.85rem; letter-spacing: 0.22em; margin-top: 1.5rem; }
.sources ul { font-size: 0.95rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
@media (prefers-reduced-motion: reduce) { html, .timeline { scroll-behavior: auto; } }

/* ---------- Slider upgrade ---------- */
.timeline { cursor: grab; scroll-behavior: auto; }
.timeline.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.timeline.is-dragging img { pointer-events: none; }
.tl-card .tl-body { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.tl-card.is-active .tl-body { border-color: var(--ink); box-shadow: 0 10px 28px rgba(31, 59, 72, 0.12); }
.tl-card.is-active .tl-node::after { background: var(--gulf); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink); }
.tl-card.is-active .tl-year { font-weight: 400; }
.tl-scrub { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tl-scrub-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; }
.tl-scrub-top .k { font-size: 0.9rem; letter-spacing: 0.14em; }
.tl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.25rem; background: transparent; cursor: pointer; margin: 0; }
.tl-range:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-range::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
.tl-range::-moz-range-track { height: 2px; background: var(--ink); }
.tl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); margin-top: -0.66rem; box-shadow: 0 0 0 4px var(--paper); }
.tl-range::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.tl-ticks { position: relative; height: 1.4rem; margin: 0 0.7rem; }
.tl-ticks span { position: absolute; transform: translateX(-50%); font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 560px) { .tl-ticks span:nth-child(even) { display: none; } }

/* ---------- Scale timeline (scroll-driven) ---------- */
.scale-on .tl-controls, .scale-on .tl-viewport, .scale-on .tl-scrub, .scale-on .tl-bar .muted { display: none !important; }
.scale-on .tl-bar { margin-bottom: 0; }
.scale-on.tl-section { padding-bottom: 0; }
.sc-track { position: relative; }
.sc-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.sc-sticky { position: sticky; top: var(--hdr, 80px); height: calc(100vh - var(--hdr, 80px)); height: calc(100svh - var(--hdr, 80px)); display: flex; flex-direction: column; overflow: hidden; }
.sc-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem 3.5rem; align-items: center; padding-top: 1.25rem; padding-bottom: 1rem; }
.sc-photo-wrap { position: relative; height: min(58vh, 560px); min-height: 0; }
.sc-photo-wrap > * { position: absolute; inset: 0; margin: 0; }
.sc-photo-wrap .tl-fig { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; }
.sc-photo-wrap .tl-photo { height: calc(100% - 1.8rem); width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sc-photo-wrap div.tl-photo { height: 100%; width: auto; aspect-ratio: 4 / 5; max-width: 100%; }
.sc-text { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.sc-year-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sc-year { font-family: var(--display); font-size: clamp(3.4rem, 8vw, 6.5rem); line-height: 0.95; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.sc-count { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--ink-soft); white-space: nowrap; }
.sc-body { position: relative; min-height: 13rem; }
.sc-body > div { display: flex; flex-direction: column; gap: 0.6rem; }
.sc-body .sc-years { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.18em; color: var(--ink-soft); }
.sc-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; letter-spacing: 0.08em; }
.sc-body p { margin: 0; font-size: 1.08rem; max-width: 34rem; }
.sc-nav { display: flex; gap: 0.5rem; align-items: center; }
.sc-nav .tl-arrow { width: 2.75rem; height: 2.75rem; }
.sc-haptic-toggle { font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.18em; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); padding: 0.55rem 0.75rem; cursor: pointer; margin-left: auto; }
.sc-haptic-toggle[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.sc-haptic-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* entering / leaving animations */
.sc-in-next { animation: scInNext .55s cubic-bezier(.2,.7,.2,1) both; }
.sc-in-prev { animation: scInPrev .55s cubic-bezier(.2,.7,.2,1) both; }
.sc-out-next { animation: scOutNext .35s ease both; }
.sc-out-prev { animation: scOutPrev .35s ease both; }
.sc-photo-wrap .sc-in-next img, .sc-photo-wrap .sc-in-prev img { animation: scZoom 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes scInNext { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes scInPrev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes scOutNext { to { opacity: 0; transform: translateX(-36px); } }
@keyframes scOutPrev { to { opacity: 0; transform: translateX(36px); } }
@keyframes scZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes scPulse { 0% { box-shadow: 0 0 0 0 rgba(31,59,72,.45); } 100% { box-shadow: 0 0 0 14px rgba(31,59,72,0); } }

/* the ruler */
.sc-ruler { position: relative; flex: 0 0 auto; height: 128px; border-top: 1px solid var(--line-strong); background: var(--paper); cursor: grab; touch-action: pan-y; user-select: none; outline: none; }
.sc-ruler:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.sc-ruler.is-dragging { cursor: grabbing; }
.sc-strip { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }
.sc-fill { position: absolute; left: 0; top: 64px; height: 2px; background: var(--ink); }
.sc-base { position: absolute; left: 0; right: 0; top: 64px; height: 1px; background: var(--line-strong); }
.sc-tick { position: absolute; top: 65px; width: 1px; height: 8px; background: var(--input-line); }
.sc-tick.mid { height: 14px; }
.sc-tick.major { height: 22px; background: var(--ink); }
.sc-label { position: absolute; top: 92px; transform: translateX(-50%); font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); white-space: nowrap; }
.sc-mark { position: absolute; top: 64px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); padding: 0; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.sc-mark.passed { background: var(--ink); }
.sc-mark.active { transform: scale(1.45); background: var(--gulf); animation: scPulse .9s ease-out; }
.sc-mark-label { position: absolute; bottom: 72px; transform: translateX(-50%); font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.sc-mark-label.show { opacity: 1; color: var(--ink); }
.sc-needle { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; pointer-events: none; }
.sc-needle::before { content: ""; position: absolute; top: -2px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sc-hint { position: absolute; right: 1.5rem; bottom: 8px; font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ink-soft); pointer-events: none; transition: opacity .4s ease; }
.sc-hint.gone { opacity: 0; }

@media (max-width: 760px) {
  .sc-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0.9rem; padding-top: 0.75rem; align-items: start; }
  .sc-photo-wrap { height: 30vh; height: 30svh; }
  .sc-year { font-size: 3rem; }
  .sc-body { min-height: 0; }
  .sc-body p { font-size: 0.98rem; line-height: 1.5; }
  .sc-body h3 { font-size: 1.15rem; }
  .sc-ruler { height: 112px; }
  .sc-fill, .sc-base, .sc-mark { top: 56px; }
  .sc-tick { top: 57px; }
  .sc-label { top: 82px; }
  .sc-mark-label { bottom: 64px; }
}
@media (max-height: 640px) and (min-width: 761px) { .sc-photo-wrap { height: 46vh; } .sc-body p { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  .sc-in-next, .sc-in-prev, .sc-out-next, .sc-out-prev, .sc-photo-wrap img, .sc-mark.active { animation: none !important; }
}
.sc-body > div > div { display: flex; flex-direction: column; gap: 0.6rem; }
.sc-photo-wrap > div { display: flex; justify-content: center; }
@media (min-width: 761px) { .sc-photo-wrap > div { justify-content: flex-end; } }

/* ---------- Watch types ---------- */
.wt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }
.wt-chip { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.16em; padding: 0.6rem 0.9rem; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background .2s ease, color .2s ease; }
.wt-chip:hover { background: var(--ink); color: var(--paper); }
.wt-icon { display: block; color: var(--ink); }
.wt-chip:hover .wt-icon { color: var(--paper); }
.wt-panel { aspect-ratio: 4 / 5; background: var(--sand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; border: 1px solid var(--line-strong); }
.bg-sand .wt-panel { background: var(--paper); }
.wt-panel .k { letter-spacing: 0.3em; font-size: 0.85rem; }
.wt-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.wt-section { scroll-margin-top: var(--hdr, 80px); }
.wt-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.wt-reveal.is-in { opacity: 1; transform: none; }
.wt-reveal .wt-panel .wt-icon { transition: transform 1s cubic-bezier(.2,.7,.2,1); transform: scale(.8) rotate(-8deg); }
.wt-reveal.is-in .wt-panel .wt-icon { transform: none; }
@media (prefers-reduced-motion: reduce) { .wt-reveal, .wt-reveal .wt-panel .wt-icon { opacity: 1; transform: none; transition: none; } }

/* ---------- Easier navigation ---------- */
.nav-group { position: relative; }
.nav-drop { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink); padding: 0.7rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-drop[data-current="true"] { border-bottom-color: var(--ink); }
.nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.nav-drop[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(-135deg); }
.nav-menu { position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translate(-50%, 6px); min-width: 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 1.5rem 1.75rem; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(31, 59, 72, 0.14); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 20; }
.nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-col { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-col-head { font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--ink-soft); padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem; }
.nav-menu a { font-family: var(--body); font-size: 1.02rem; letter-spacing: 0; text-decoration: none; padding: 0.35rem 0; border: 0; }
.nav-menu a:hover { text-decoration: underline; }
.nav-menu a[aria-current="page"] { font-style: italic; text-decoration: underline; }
@media (max-width: 860px) {
  .nav-group { width: 100%; }
  .nav-drop { width: 100%; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid var(--line-strong); }
  .nav-drop[data-current="true"] { border-bottom-color: var(--line-strong); }
  .nav-menu { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; gap: 1rem; padding: 0.75rem 0 1rem 1rem; box-shadow: none; border: 0; background: transparent; display: none; opacity: 1; visibility: visible; }
  .nav-group.open .nav-menu { display: grid; transform: none; }
  .nav .nav-menu a { width: auto; padding: 0.45rem 0; border-bottom: 0; }
}

.model-tabs { background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.model-tabs .wrap { display: flex; gap: 0.25rem 1.75rem; overflow-x: auto; scrollbar-width: none; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.model-tabs .wrap::-webkit-scrollbar { display: none; }
.model-tabs a { font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.18em; text-decoration: none; padding: 0.85rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.model-tabs a[aria-current="page"] { border-bottom-color: var(--ink); }

.sc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.sc-jump { font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 0.55rem 2rem 0.55rem 0.75rem; max-width: 100%; cursor: pointer; border-radius: 0; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.sc-skip { font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--ink-soft); text-decoration: none; padding: 0.55rem 0.2rem; }
.sc-skip:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) { .sc-jump { flex: 1 1 100%; font-size: 0.95rem; } .sc-nav { flex-wrap: wrap; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
section[id], [id="after-timeline"] { scroll-margin-top: var(--hdr, 80px); }

/* ===== Theme: sunlit limestone, palm shadows, gulf water (Nov 8, 2026) ===== */
:root {
  --sand: #E6DAC5;
  --sand-deep: #D8C8AC;
  --paper: #F4EDE1;
  --card: #FBF7F0;
  --brass: #A8824C;
  --water: #1F4A5E;
  --water-2: #2F6E84;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .32 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --sun: radial-gradient(ellipse 70% 90% at 12% -10%, rgba(255, 233, 196, .55), rgba(255, 233, 196, 0) 65%);
}
body { background: var(--noise), var(--paper); }

/* Limestone sections with sunlight and palm shadows */
.bg-sand, .stone {
  position: relative; isolation: isolate;
  background: var(--sun), var(--noise), var(--mottle), var(--sand);
}
.bg-sand::before, .stone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("images/palm-shadow.svg") center / cover no-repeat;
  opacity: .11; mix-blend-mode: multiply;
}
.bg-sand:nth-of-type(even)::before { transform: scaleX(-1); }
.bg-sand h1, .bg-sand h2, .stone h1, .stone h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(60, 40, 15, .10); }

/* Header: stone with a brass hairline */
.site-header { background: var(--noise), rgba(230, 218, 197, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-strong); box-shadow: 0 1px 0 rgba(168, 130, 76, .35); }

/* Ticker: the water */
.ticker { background: linear-gradient(100deg, var(--water) 0%, var(--water-2) 55%, #3E8296 100%); color: var(--sand); border-color: #173A4A; }
.ticker .wrap span:not(:last-child)::after { content: "·"; margin-left: 2.5rem; color: var(--brass); }

/* Sunlit cards */
.card { box-shadow: 10px 16px 30px -18px rgba(70, 50, 25, .35); }
.card:hover { box-shadow: 12px 20px 36px -16px rgba(70, 50, 25, .45); }
.feature-card img, .photo-45 { box-shadow: 10px 16px 30px -20px rgba(70, 50, 25, .45); }
.rule { background: var(--brass); }
.eyebrow::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--brass); vertical-align: middle; margin-right: .8rem; }
.center .eyebrow::before, .eyebrow.no-rule::before { display: none; }

/* Water tile */
.tile.gulf { background: linear-gradient(160deg, #BFD9E2 0%, var(--gulf) 45%, #7FAFC0 100%); }
.tile.ink { background: linear-gradient(160deg, var(--water-2) 0%, var(--water) 55%, #142F3C 100%); }

/* Home hero: the scene */
.hero-scene { position: relative; background: var(--sand); line-height: 0; }
.hero-scene img { width: 100%; height: auto; aspect-ratio: 2060 / 763; object-fit: cover; object-position: 72% 50%; }
@media (max-width: 760px) { .hero-scene img { aspect-ratio: 4 / 3; } }
.hero-copy { text-align: center; align-items: center; }
.hero-copy h1 { max-width: 22ch; }
.hero-copy .lede { margin: 0 auto; }
.hero-copy .btn-row { justify-content: center; }
.seal-divider { display: flex; align-items: center; gap: 1rem; color: var(--brass); font-family: var(--display); font-size: .75rem; letter-spacing: .4em; }
.seal-divider::before, .seal-divider::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; }

/* Footer: deep water */
.site-footer { background: linear-gradient(180deg, #1B3F50 0%, var(--ink) 40%, #172E39 100%); }
.site-footer .fine { border-top-color: rgba(168, 130, 76, .45); }
.hero-copy h1 { max-width: 30ch; font-size: clamp(2rem, 3.6vw, 3.1rem); }
.seal-divider { color: var(--ink-soft); }
.seal-divider::before, .seal-divider::after { background: var(--brass); }
@media (max-width: 760px) {
  .hero-scene img { aspect-ratio: 1.4 / 1; object-position: 90% 50%; }
  .seal-divider { letter-spacing: .28em; font-size: .68rem; gap: .6rem; }
  .seal-divider::before, .seal-divider::after { width: 1.2rem; }
}

/* ===== Gulf shore feel: beaches, water, sand (Nov 8, 2026) ===== */
:root { --wave: 46px; }
.bg-sand, .stone { background: var(--sun), url("images/sand-grain.svg"), var(--noise), var(--mottle), var(--sand); }
body { background: url("images/sand-grain.svg"), var(--noise), var(--paper); }

/* Palm shadows sway in the breeze */
@keyframes sway { from { transform: rotate(-.9deg) skewX(-1.5deg); } to { transform: rotate(.9deg) skewX(1.5deg); } }
@keyframes sway-flip { from { transform: scaleX(-1) rotate(-.9deg) skewX(-1.5deg); } to { transform: scaleX(-1) rotate(.9deg) skewX(1.5deg); } }
.bg-sand::before, .stone::before { transform-origin: 40% -20%; animation: sway 9s ease-in-out infinite alternate; inset: -4% -3%; }
.bg-sand:nth-of-type(even)::before { animation-name: sway-flip; }

/* Page banners: a coastal photo whose bottom edge is the waterline */
.coast-banner { position: relative; z-index: 2; height: clamp(200px, 24vw, 340px); margin-bottom: calc(var(--wave) * -1); line-height: 0;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat; }
.coast-banner img { width: 100%; height: 100%; object-fit: cover; }
.coast-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--wave); background: url("images/wave-foam.svg") center / 100% 100% no-repeat; pointer-events: none; }
.coast-banner.slim { height: clamp(150px, 15vw, 220px); }
.coast-cap { position: absolute; right: 1.25rem; bottom: calc(var(--wave) + .6rem); line-height: 1.3; font-family: var(--body); font-style: italic; font-size: .82rem; color: #FFF8EC; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.coast-banner + section, .coast-banner + nav + section { padding-top: calc(var(--wave) * .5); }
.coast-banner + nav.model-tabs { position: relative; z-index: 3; margin-top: calc(var(--wave) * .2); }

/* The water: shoreline tops, slow moving sunlight */
@keyframes caustics { from { background-position: 0 0; } to { background-position: 520px 260px; } }
.ticker, .site-footer, .tile.ink, .tile.gulf, .naples-band { position: relative; isolation: isolate; overflow: hidden; }
.ticker::after, .site-footer::after, .tile.ink::after, .tile.gulf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("images/caustics.svg"); opacity: .16; mix-blend-mode: screen; animation: caustics 38s linear infinite;
}
.tile.gulf::after { opacity: .30; }
.site-footer::after { opacity: .07; }
.ticker, .site-footer { margin-top: calc(var(--wave) * -1); padding-top: var(--wave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,48 L0,48 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave) + 1px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,48 L0,48 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave) + 1px) no-repeat; z-index: 1; }
.ticker::before, .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--wave); background: url("images/wave-foam.svg") center / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
.ticker + section { padding-top: .5rem; }
section:has(+ .ticker), section:has(+ footer) { padding-bottom: var(--wave); }
main > section:last-child { padding-bottom: var(--wave); }
.site-footer .coords { font-family: var(--display); font-size: .72rem; letter-spacing: .3em; color: var(--gulf); }

/* Buttons fill like the tide coming in */
.btn { background: linear-gradient(to top, var(--water-2) 50%, var(--ink) 50%) top / 100% 200% no-repeat; transition: background-position .45s ease, color .2s; }
.btn:hover { background-position: bottom; background-color: transparent; }
.btn-outline { background: linear-gradient(to top, var(--ink) 50%, transparent 50%) top / 100% 200% no-repeat; transition: background-position .45s ease, color .3s; }
.btn-outline:hover { background-position: bottom; }

/* Naples band on the home page */
.naples-band { min-height: clamp(360px, 38vw, 520px); display: flex; align-items: center; color: #FFF8EC; }
.naples-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.naples-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 36, 46, .78) 0%, rgba(18, 36, 46, .45) 45%, rgba(18, 36, 46, 0) 75%); }
.naples-band .wrap { width: 100%; }
.naples-band h2 { color: #FFF8EC; max-width: 16ch; }
.naples-band .lede { color: #F1E6D2; }
.naples-band .eyebrow { color: #F1D9A8; }
.naples-band .eyebrow::before { background: #F1D9A8; }
.naples-band .btn-light { background: linear-gradient(to top, var(--gulf) 50%, var(--sand) 50%) top / 100% 200% no-repeat; transition: background-position .45s; }
.naples-band .btn-light:hover { background-position: bottom; color: var(--ink); }
.naples-band .coast-cap { bottom: .9rem; }

/* Things drift in like a wave as you scroll */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bg-sand::before, .stone::before, .ticker::after, .site-footer::after, .tile.ink::after, .tile.gulf::after { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .btn-outline { transition: none; }
}
@media (max-width: 760px) { :root { --wave: 30px; } .coast-cap { font-size: .72rem; right: .8rem; } }
.bg-sand, .stone { overflow: clip; }
@media (max-width: 760px) {
  .naples-band::before { background: linear-gradient(180deg, rgba(18, 36, 46, .72) 0%, rgba(18, 36, 46, .55) 60%, rgba(18, 36, 46, .35) 100%); }
  .naples-band > img { object-position: 70% 50%; }
}
.tile.gulf::after { opacity: .22; }


/* ===== Home, Nov 10, 2026: one walk from dry sand to the water ===== */
.text-link { font-family: var(--body); font-style: italic; font-size: 1.08rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .32em; }
.text-link:hover { color: var(--water-2); text-decoration-color: currentColor; }
.text-link:focus-visible, .slot:focus-visible, .hot-img:focus-visible, .dial-center:focus-visible { outline: 2px solid var(--water-2); outline-offset: 4px; }

.shore { position: relative; overflow: clip;
  background: url("images/palm-shadow-soft.svg") top left / min(1600px, 140%) auto no-repeat, url("images/sand-grain.svg"), var(--noise),
              linear-gradient(180deg, #E6DAC5 0%, #E9DECB 28%, #E4E0D1 58%, #DCE5E2 82%, #D3E4E7 100%); }
.shore > section { position: relative; }
.tide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tide-line { fill: none; stroke: var(--water-2); stroke-width: 1.4; stroke-linecap: round; opacity: .75; }
.tide-foam { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; opacity: .45; }

.intro { padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(2rem, 4vw, 4rem); }
.intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2rem; align-items: end; }
.intro-h { grid-column: 1 / 9; margin: 0; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: .035em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.intro-side { grid-column: 9 / 13; padding-bottom: .5rem; }
.intro-side .lede { margin: 0; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }

.case { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem); }
.case-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 3rem; }
.case-head { grid-column: 1 / 5; grid-row: 1; align-self: start; padding-top: 1rem; max-width: 22rem; }
.case-head h2, .hot-head h2 { margin: 0 0 .9rem; font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.case-head p, .hot-head p { margin: 0 0 1.1rem; font-size: 1.1rem; color: var(--ink-soft); }
.slot { display: flex; flex-direction: column; gap: .9rem; color: inherit; text-decoration: none; }
.slot-a { grid-column: 5 / 13; grid-row: 1 / span 2; }
.slot-b { grid-column: 1 / 5; grid-row: 2 / span 2; margin-top: 4rem; }
.slot-c { grid-column: 7 / 11; grid-row: 3; margin-top: 2rem; }
.slot-img { position: relative; display: grid; place-items: center; overflow: hidden; background: url("images/sand-grain.svg"), var(--noise), #DACDB4; }
.slot-a .slot-img { aspect-ratio: 4 / 3; }
.slot-b .slot-img { aspect-ratio: 3 / 4; }
.slot-c .slot-img { aspect-ratio: 1 / 1; }
.slot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.slot:hover .slot-img img { transform: scale(1.03); }
.slot-img em { position: absolute; left: 1rem; bottom: .9rem; font-size: .95rem; color: var(--ink-soft); }
.ph-watch { width: 22%; fill: none; stroke: rgba(31, 59, 72, .25); stroke-width: 2; }
.slot-b .ph-watch { width: 34%; } .slot-c .ph-watch { width: 28%; }
.slot-cap { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .2rem; padding-top: .8rem; border-top: 1px solid var(--line-strong); }
.slot-name { font-family: var(--display); font-size: 1.05rem; letter-spacing: .1em; }
.slot-price { font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; }
.slot-meta { grid-column: 1 / -1; font-style: italic; color: var(--ink-soft); }
.slot:hover .slot-name { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .3em; }

.hot { padding: clamp(3rem, 6vw, 6rem) 0 clamp(5rem, 9vw, 8rem); }
.hot-head { margin-left: calc((100% + 1.5rem) / 12 * 7); max-width: 26rem; }
.hot-list { list-style: none; margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; row-gap: clamp(3rem, 6vw, 5.5rem); }
.hot-item { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
.hot-img { grid-column: 1 / 6; display: block; overflow: hidden; }
.hot-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .6s ease; }
.hot-img:hover img { transform: scale(1.03); }
.hot-text { grid-column: 7 / 11; }
.hot-item.flip .hot-img { grid-column: 7 / 13; grid-row: 1; }
.hot-item.flip .hot-img img { aspect-ratio: 5 / 4; }
.hot-item.flip .hot-text { grid-column: 2 / 6; grid-row: 1; }
.hot-item:nth-child(3) .hot-img { grid-column: 2 / 6; }
.hot-text h3 { margin: 0 0 .8rem; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: .08em; }
.hot-text p { margin: 0 0 1rem; font-size: 1.12rem; line-height: 1.6; max-width: 30ch; }
.hot-more { margin: clamp(3rem, 6vw, 5rem) auto 0; text-align: center; font-size: 1.12rem; max-width: 40ch; }

.naples-band h2 { max-width: 15ch; }

.fork { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(320px, 30vw, 440px); }
.fork > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem); }
.fork h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); max-width: 16ch; }
.fork p { margin: 0 0 .4rem; font-size: 1.12rem; max-width: 34ch; }
.fork-sand { background: url("images/sand-grain.svg"), var(--noise), var(--sand); padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)) !important; }
.fork-water { position: relative; isolation: isolate; overflow: hidden; color: #F1E7D6; margin-left: -60px; padding-left: calc(60px + clamp(1.5rem, 5vw, 5rem)) !important;
  background: linear-gradient(160deg, var(--water-2) 0%, var(--water) 60%, #173A4A 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 800' preserveAspectRatio='none'%3E%3Cpath d='M60,0 L60,800 L28,800 C8,712 50,640 30,540 C12,450 52,372 32,282 C14,200 50,118 30,0 Z' fill='black'/%3E%3C/svg%3E") left / 60px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 59px) 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 800' preserveAspectRatio='none'%3E%3Cpath d='M60,0 L60,800 L28,800 C8,712 50,640 30,540 C12,450 52,372 32,282 C14,200 50,118 30,0 Z' fill='black'/%3E%3C/svg%3E") left / 60px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 59px) 100% no-repeat; }
.fork-water::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 800' preserveAspectRatio='none'%3E%3Cpath d='M28,800 C8,712 50,640 30,540 C12,450 52,372 32,282 C14,200 50,118 30,0' fill='none' stroke='white' stroke-opacity='.35' stroke-width='8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M28,800 C8,712 50,640 30,540 C12,450 52,372 32,282 C14,200 50,118 30,0' fill='none' stroke='white' stroke-opacity='.85' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left / 60px 100% no-repeat; z-index: 1; pointer-events: none; }
.fork-water::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("images/caustics.svg"); opacity: .14; mix-blend-mode: screen; animation: caustics 38s linear infinite; }
.fork-water h2 { color: #F6EEE0; }
.fork-water .text-link { color: #F6EEE0; text-decoration-color: #E2C38E; }

.dial-sec { background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; padding: clamp(4rem, 8vw, 7rem) 0 calc(var(--wave) + clamp(3rem, 6vw, 5rem)); }
.dial-title { text-align: center; margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.dial { display: grid; grid-template-columns: 1fr minmax(240px, 340px) 1fr; grid-template-rows: auto minmax(240px, 340px) auto; column-gap: clamp(1rem, 3vw, 2.5rem); row-gap: 1.4rem; max-width: 980px; margin: 0 auto; }
.dial-face { grid-area: 2 / 2; width: 100%; height: 100%; }
.d-out { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.d-in { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .7; }
.d-tick { stroke: var(--ink); stroke-width: .8; opacity: .45; }
.d-tick5 { stroke: var(--brass); stroke-width: 2.4; }
.dial-pt h3 { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: .08em; }
.dial-pt p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.at12 { grid-area: 1 / 2; text-align: center; align-self: end; }
.at6 { grid-area: 3 / 2; text-align: center; }
.at3 { grid-area: 2 / 3; align-self: center; max-width: 18rem; }
.at9 { grid-area: 2 / 1; align-self: center; text-align: right; justify-self: end; max-width: 18rem; }
.dial-center { grid-area: 2 / 2; place-self: center; width: 52%; text-align: center; font-family: var(--display); font-size: .95rem; letter-spacing: .1em; line-height: 1.5; color: var(--ink); text-decoration: none; }
.dial-center:hover { color: var(--water-2); }
.dial-sec + .site-footer, .dial-sec + footer { margin-top: calc(var(--wave) * -1); }

@media (max-width: 900px) {
  .tide { display: none; }
  .intro-h, .intro-side { grid-column: 1 / -1; }
  .case-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .case-head { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .slot-a { grid-column: 1 / -1; grid-row: auto; }
  .slot-b, .slot-c { grid-column: auto; grid-row: auto; margin-top: 0; }
  .slot-b .slot-img, .slot-c .slot-img { aspect-ratio: 4 / 5; }
  .hot-head { margin-left: 0; }
  .hot-item, .hot-item.flip { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .hot-item .hot-img, .hot-item.flip .hot-img, .hot-item:nth-child(3) .hot-img, .hot-item .hot-text, .hot-item.flip .hot-text { grid-column: 1; grid-row: auto; }
  .hot-item.flip .hot-img img { aspect-ratio: 4 / 5; }
  .fork { grid-template-columns: 1fr; }
  .fork-sand { padding-left: 1.5rem !important; }
  .fork-water { margin-left: 0; padding-left: 1.5rem !important; -webkit-mask: none; mask: none; }
  .fork-water::before { display: none; }
  .dial { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.6rem; max-width: 30rem; }
  .dial-face { grid-area: auto; width: min(260px, 70vw); justify-self: center; }
  .dial-center { grid-area: auto; width: auto; order: 5; }
  .at12, .at3, .at6, .at9 { grid-area: auto; text-align: left; justify-self: stretch; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .fork-water::after { animation: none; } .slot-img img, .hot-img img { transition: none; } }

/* ===== Inner pages, Nov 10, 2026: custom layouts with flow ===== */
h1, h2, h3 { text-wrap: balance; }
.flourish { display: block; width: min(320px, 70%); height: 24px; margin-top: 1.1rem; overflow: visible; }
.fl-line { fill: none; stroke: var(--water-2); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
.fl-foam { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; opacity: .5; }
.slot-kicker { display: block; grid-column: 1 / -1; margin: 0; font-style: italic; font-size: 1rem; color: var(--ink-soft); }

/* Page intro: continues the banner's sand, title left, note right */
.pg-intro { background: url("images/palm-shadow-soft.svg") top right / min(1400px, 130%) auto no-repeat, url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #E6DAC5, #EAE0CE); padding: calc(var(--wave) * .6 + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(2.5rem, 5vw, 4.5rem); }
.pg-intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 1.5rem; align-items: end; }
.pg-title { grid-column: 1 / 8; }
.pg-title h1 { margin: 0; font-size: clamp(2.3rem, 4.8vw, 4.3rem); line-height: 1.05; letter-spacing: .035em; }
.long-title .pg-title { grid-column: 1 / 9; }
.long-title .pg-title h1 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.pg-side { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-bottom: .4rem; }
.pg-side .lede { margin: 0; }

/* Shop: the display wall */
.wall-sec { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE, #E3E1D3 70%, #DCE5E2); }
.filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; padding-bottom: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line-strong); }
.flts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; }
.flt-lead { font-style: italic; color: var(--ink-soft); }
.flt { font-family: var(--display); font-size: .82rem; letter-spacing: .14em; background: none; border: 0; padding: .45rem 0; color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid transparent; }
.flt:hover { color: var(--ink); }
.flt[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.flt:focus-visible, .thumb-word:focus-visible, .q-opt:focus-visible, .term summary:focus-visible { outline: 2px solid var(--water-2); outline-offset: 4px; }
.flt-count { font-style: italic; color: var(--ink-soft); }
.wall { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.wall > .slot:nth-of-type(6n+1) { grid-column: 1 / 5; }
.wall > .slot:nth-of-type(6n+2) { grid-column: 6 / 13; margin-top: 5rem; }
.wall > .slot:nth-of-type(6n+3) { grid-column: 2 / 6; }
.wall > .slot:nth-of-type(6n+4) { grid-column: 8 / 12; margin-top: -3rem; }
.wall > .slot:nth-of-type(6n+5) { grid-column: 1 / 6; }
.wall > .slot:nth-of-type(6n+6) { grid-column: 7 / 13; margin-top: 4rem; }
.slot.s-tall .slot-img { aspect-ratio: 3 / 4; }
.slot.s-wide .slot-img { aspect-ratio: 4 / 3; }
.slot.s-sq .slot-img { aspect-ratio: 1 / 1; }
.slot.s-tall .ph-watch { width: 34%; } .slot.s-wide .ph-watch { width: 22%; } .slot.s-sq .ph-watch { width: 28%; }
.slot[hidden] { display: none !important; }

/* Water band with a wave top (first-look list) */
.water-band { position: relative; isolation: isolate; overflow: hidden; color: #F1E7D6; margin-top: calc(var(--wave) * -1); padding: calc(var(--wave) + clamp(3rem, 6vw, 5rem)) 0 clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(160deg, var(--water-2) 0%, var(--water) 60%, #173A4A 100%); }
.water-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("images/caustics.svg"); opacity: .14; mix-blend-mode: screen; animation: caustics 38s linear infinite; }
.water-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--wave); background: url("images/wave-foam.svg") center / 100% 100% no-repeat; z-index: 1; }
.water-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.water-band h2 { color: #F6EEE0; margin: 0 0 .8rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.water-band p { margin: 0; font-size: 1.12rem; max-width: 34ch; }
.closing-line { padding: clamp(3rem, 6vw, 4.5rem) 0 calc(var(--wave) + clamp(2.5rem, 5vw, 4rem)); background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; }
.closing-line p { margin: 0; text-align: center; font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: italic; }
.closing-line .text-link { font-size: inherit; }

/* Forms written on lines, like a dealer's tag */
.line-form { display: flex; flex-direction: column; gap: 1.4rem; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.lf { display: flex; flex-direction: column; gap: .35rem; }
.lf > span { font-style: italic; font-size: .98rem; color: var(--ink-soft); }
.lf input, .lf select, .lf textarea { font: inherit; font-size: 1.12rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: .5rem 0 .55rem; }
.lf textarea { border: 1px solid var(--line-strong); padding: .7rem .8rem; resize: vertical; background: rgba(255, 255, 255, .25); }
.lf select { appearance: none; -webkit-appearance: none; padding-right: 1.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F3B48' stroke-width='1.4'/%3E%3C/svg%3E") right .2rem center no-repeat; }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: none; border-bottom-color: var(--water-2); box-shadow: 0 2px 0 -1px var(--water-2); }
.lf-note { margin: 0; font-style: italic; font-size: .98rem; color: var(--ink-soft); max-width: 46ch; }
.line-form .btn, .line-form .btn-light { align-self: flex-start; }
.on-water .lf > span { color: #D9E6EA; }
.on-water .lf input { color: #F6EEE0; border-bottom-color: #E8DCC6; }
.on-water .form-msg { color: #F6EEE0; }

/* Watch page: a dealer's tag next to the photos */
.lot { padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE, #EEE6D8); }
.lot-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2.5rem; align-items: start; }
.lot-gallery { grid-column: 1 / 8; position: sticky; top: calc(var(--hdr, 80px) + 1rem); display: flex; flex-direction: column; gap: 1rem; }
.back { align-self: flex-start; }
.lot-frame { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: url("images/sand-grain.svg"), var(--noise), #DACDB4; }
.lot-ph .ph-watch { width: 34%; display: block; margin: 0 auto; }
.lot-ph { width: 100%; }
.lot-label { position: absolute; left: 1rem; bottom: .9rem; font-style: italic; color: var(--ink-soft); }
.thumb-words { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.thumb-word { font-family: var(--display); font-size: .8rem; letter-spacing: .14em; background: none; border: 0; padding: .4rem 0; color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid transparent; }
.thumb-word[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.lot-tag { grid-column: 9 / 13; display: flex; flex-direction: column; gap: .9rem; padding-top: 2.2rem; }
.lot-tag h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; }
.lot-price { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: .06em; }
.lot-meta, .lot-terms { margin: 0; font-style: italic; color: var(--ink-soft); }
.lot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: .6rem 0 .2rem; }
.lg-title { margin: 1.6rem 0 0; font-size: 1.05rem; letter-spacing: .14em; }
.ledger { margin: 0; display: flex; flex-direction: column; }
.lg-row { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.lg-row dt { flex: none; font-size: 1.02rem; }
.lg-row::after { content: none; }
.lg-row dt::after { content: ""; }
.lg-row dd { margin: 0; margin-left: auto; text-align: right; font-style: italic; color: var(--ink-soft); }
.lg-row { background: linear-gradient(to right, var(--line-strong) 40%, transparent 0) 0 calc(100% - .2rem) / 6px 1px repeat-x; }
.lot-notes { margin: 0; line-height: 1.7; }
.more-sec { padding: clamp(3rem, 6vw, 5rem) 0 calc(var(--wave) + clamp(3rem, 6vw, 5rem)); background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; }
.more-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
.more-head h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.more-strip { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
.more-strip > .slot:nth-child(1) { grid-column: 1 / 4; margin-top: 3rem; }
.more-strip > .slot:nth-child(2) { grid-column: 5 / 9; }
.more-strip > .slot:nth-child(3) { grid-column: 10 / 13; margin-top: 5rem; }

/* What's hot: alternating features, the text sits over the photo's edge */
.hf-sec { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE 0%, #E4E1D3 55%, #DCE5E2 100%); }
.hf-list { display: grid; row-gap: clamp(4rem, 8vw, 7rem); }
.hf { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: center; }
.hf-pic { grid-column: 1 / 8; grid-row: 1; }
.hf-pic img, .hf-pic .slot-img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.hf-pic .ph-big .ph-watch { width: 20%; }
.hf-text { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 1; padding: clamp(1.6rem, 3vw, 2.6rem); background: url("images/sand-grain.svg"), var(--noise), rgba(240, 233, 220, .96); box-shadow: 14px 22px 40px -28px rgba(60, 45, 25, .55); }
.hf.flip .hf-pic { grid-column: 6 / 13; }
.hf.flip .hf-text { grid-column: 1 / 7; }
.hf-text h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.hf-nick { margin: .3rem 0 1.1rem; font-style: italic; font-size: 1.2rem; color: var(--ink-soft); }
.hf-text p { margin: 0 0 .9rem; line-height: 1.65; }
.hf-k { font-family: var(--display); font-size: .82rem; letter-spacing: .12em; margin-right: .3rem; }
.hf-refs { font-style: italic; color: var(--ink-soft); }
.hf-source { margin: 0; text-align: center; font-style: italic; color: var(--ink-soft); }

/* Quiz: big answers you can tap */
.quiz-sec { padding: clamp(4rem, 8vw, 6.5rem) 0 calc(var(--wave) + clamp(3.5rem, 7vw, 5.5rem)); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #DCE5E2, #D3E4E7); }
.quiz-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.quiz-ask h2 { margin: .2rem 0 1.6rem; font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.q-opts { display: flex; flex-direction: column; }
.q-opt { text-align: left; font: inherit; font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: var(--ink); background: none; border: 0; border-top: 1px solid rgba(31, 59, 72, .25); padding: 1rem 0; cursor: pointer; }
.q-opt:last-child { border-bottom: 1px solid rgba(31, 59, 72, .25); }
.q-opt:hover { color: var(--water-2); }
.q-opt[aria-pressed="true"] { color: var(--water-2); padding-left: 1.2rem; box-shadow: inset 3px 0 0 var(--brass); }
.quiz-answer { display: flex; flex-direction: column; gap: 1rem; }
.quiz-empty { margin: 0; font-style: italic; font-size: 1.15rem; color: var(--ink-soft); padding-top: 4.5rem; }
.qa img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 1rem; }
.qa h3 { margin: 0 0 .4rem; font-size: 1.5rem; letter-spacing: .08em; }
.qa p { margin: 0; line-height: 1.6; }
.quiz-answer .btn { align-self: flex-start; }

/* Sell: the route */
.route-sec { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); background: url("images/sand-grain.svg"), var(--noise), #EAE0CE; overflow: hidden; }
.route-h { margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.route { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); }
.route li { display: flex; flex-direction: column; gap: .6rem; max-width: 22rem; }
.route li:nth-child(2) { margin-top: 3.5rem; }
.route li:nth-child(3) { margin-top: 1rem; }
.stop { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--water-2); font-family: var(--display); font-size: .95rem; color: var(--water-2); box-shadow: 0 0 0 6px rgba(255, 255, 255, .45); }
.route h3 { margin: .4rem 0 0; font-size: 1.25rem; letter-spacing: .08em; }
.route p { margin: 0; line-height: 1.6; }
.route-line { position: absolute; left: 0; right: 0; top: calc(clamp(3rem, 6vw, 5rem) + clamp(2rem, 4vw, 3rem) + 2.6rem); width: 100%; height: 120px; pointer-events: none; }
.offer-sec { padding: clamp(3rem, 6vw, 5rem) 0 calc(var(--wave) + clamp(3.5rem, 7vw, 5.5rem)); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE, #EEE6D8); }
.offer-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.offer-side h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.offer-side p { margin: 0 0 1rem; }
.offer-side img { width: 82%; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-top: 2rem; margin-left: 18%; }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.tick-list li { position: relative; padding-left: 1.7rem; line-height: 1.55; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1rem; height: .5rem; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }

/* Guide */
.lingo-sec { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE, #EEE6D8); }
.lingo-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2.5rem; align-items: start; }
.lingo-pic { grid-column: 1 / 6; margin: 0; position: sticky; top: calc(var(--hdr, 80px) + 1.5rem); }
.lingo-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.lingo-words { grid-column: 7 / 13; }
.lingo-words h2 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.lingo-hint { margin: 0 0 1.6rem; font-style: italic; color: var(--ink-soft); }
.term { border-top: 1px solid var(--line-strong); }
.term:last-child { border-bottom: 1px solid var(--line-strong); }
.term summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: .1em; }
.term summary::-webkit-details-marker { display: none; }
.term summary::after { content: "+"; font-family: var(--body); font-size: 1.4rem; color: var(--brass); transition: transform .3s ease; }
.term[open] summary::after { transform: rotate(45deg); }
.term p { margin: 0 0 1.1rem; max-width: 46ch; line-height: 1.65; font-style: italic; }
.flags-sec { position: relative; isolation: isolate; overflow: hidden; color: #F1E7D6; margin-top: calc(var(--wave) * -1); padding: calc(var(--wave) + clamp(3.5rem, 7vw, 5.5rem)) 0 clamp(4rem, 8vw, 6rem);
  background: linear-gradient(160deg, var(--water-2) 0%, var(--water) 55%, #173A4A 100%); }
.flags-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("images/caustics.svg"); opacity: .12; mix-blend-mode: screen; animation: caustics 38s linear infinite; }
.flags-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--wave); background: url("images/wave-foam.svg") center / 100% 100% no-repeat; z-index: 1; }
.flags-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.flags-grid h2 { margin: 0; color: #F6EEE0; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.12; position: sticky; top: calc(var(--hdr, 80px) + 2rem); }
.flags { list-style: none; margin: 0; padding: 0; }
.flags li { display: grid; grid-template-columns: 13rem 1fr; gap: .4rem 2rem; padding: 1.3rem 0; border-top: 1px solid rgba(232, 220, 198, .3); }
.flags li:last-child { border-bottom: 1px solid rgba(232, 220, 198, .3); }
.flags h3 { margin: 0; font-size: 1.05rem; letter-spacing: .1em; color: #F1D9A8; }
.flags p { margin: 0; line-height: 1.6; }
.numbers-sec { padding: clamp(4rem, 8vw, 6rem) 0; background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; }
.numbers-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.numbers-grid h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.numbers-grid p { margin: 0; line-height: 1.7; max-width: 34ch; }
.num-diagram { width: 100%; height: auto; overflow: visible; }
.nd-watch path, .nd-watch circle, .nd-watch rect, .nd-card { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.nd-watch circle:nth-of-type(2) { stroke-width: .8; opacity: .7; }
.nd-lines { stroke: var(--line-strong); stroke-width: 2; }
.nd-arrow { fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-dasharray: 3 4; }
.nd-dot { fill: var(--brass); }
.nd-t { font-family: var(--display); font-size: 15px; letter-spacing: .1em; fill: var(--ink); }
.nd-s { font-family: var(--body); font-style: italic; font-size: 15px; fill: var(--ink-soft); }
.fork + .site-footer, .fork + footer { margin-top: 0; }
main > .fork:last-child { padding-bottom: 0; }

/* About */
.about-sec { padding: calc(var(--wave) * .5 + clamp(2.5rem, 5vw, 4rem)) 0 clamp(4rem, 8vw, 6rem); background: url("images/palm-shadow-soft.svg") top right / min(1400px, 130%) auto no-repeat, url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #E6DAC5, #EAE0CE); }
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2.5rem; align-items: center; }
.about-portrait { grid-column: 1 / 6; margin: 0; }
.about-portrait .slot-img { aspect-ratio: 3 / 4; }
.about-portrait .ph-watch { width: 30%; }
.about-text { grid-column: 7 / 13; }
.about-text h1 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; }
.about-text .lede { margin: 1.6rem 0 0; }
.about-quote { margin: 1.6rem 0 0; padding-left: 1.4rem; border-left: 2px solid var(--brass); font-style: italic; font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); }
.about-sign { margin: 1.4rem 0 0; font-style: italic; font-size: 1.4rem; }
.contact-sec { padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(var(--wave) + clamp(3.5rem, 7vw, 5.5rem)); background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-grid h2 { margin: 0 0 1.4rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.contact-ledger .lg-row dd { font-style: normal; color: var(--ink); }

@media (max-width: 900px) {
  .pg-title, .long-title .pg-title, .pg-side { grid-column: 1 / -1; }
  .wall { grid-template-columns: 1fr 1fr; }
  .wall > .slot:nth-of-type(n) { grid-column: auto; margin-top: 0; }
  .wall > .slot:nth-of-type(3n+1) { grid-column: 1 / -1; }
  .water-grid, .quiz-grid, .offer-grid, .flags-grid, .numbers-grid, .contact-grid { grid-template-columns: 1fr; }
  .lot-gallery, .lot-tag { grid-column: 1 / -1; position: static; padding-top: 0; }
  .more-strip { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .more-strip > .slot:nth-child(n) { grid-column: auto; margin-top: 0; }
  .hf, .hf.flip { grid-template-columns: 1fr; }
  .hf-pic, .hf.flip .hf-pic { grid-column: 1; grid-row: 1; }
  .hf-text, .hf.flip .hf-text { grid-column: 1; grid-row: 2; margin: -2.5rem .8rem 0; }
  .route { grid-template-columns: 1fr; }
  .route li:nth-child(n) { margin-top: 0; }
  .route-line { display: none; }
  .lf-row { grid-template-columns: 1fr; }
  .offer-side img { width: 100%; margin-left: 0; }
  .lingo-pic, .lingo-words { grid-column: 1 / -1; position: static; }
  .flags-grid h2 { position: static; }
  .flags li { grid-template-columns: 1fr; }
  .about-portrait, .about-text { grid-column: 1 / -1; }
  .about-portrait { max-width: 22rem; }
}
@media (prefers-reduced-motion: reduce) { .water-band::after, .flags-sec::after { animation: none; } }
.quiz-sec .quiz-empty { border: 0; background: none; min-height: 0; display: block; text-align: left; padding: 4.5rem 0 0; }
.quiz-sec .quiz-answer { border: 0; background: none; padding: 0; }

/* ===== Learn pages, Nov 10, 2026 ===== */
.intro-actions .text-link + .text-link { margin-left: .2rem; }
.founder-sec { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EAE0CE, #EEE6D8); }
.founder-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2rem; align-items: start; }
.founder-year { grid-column: 1 / 4; position: sticky; top: calc(var(--hdr, 80px) + 1.5rem); }
.big-yr { display: block; font-family: var(--display); font-size: clamp(4rem, 9vw, 8rem); line-height: .9; letter-spacing: .02em; color: var(--ink); }
.founder-cap { display: block; margin-top: .8rem; font-style: italic; color: var(--ink-soft); }
.founder-text { grid-column: 4 / 9; }
.founder-text h2 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.founder-text p { margin: 0 0 1rem; line-height: 1.75; font-size: 1.1rem; }
.founder-pic { grid-column: 10 / 13; margin: -9rem 0 0; position: relative; z-index: 1; }
.founder-pic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; box-shadow: 14px 22px 40px -28px rgba(60, 45, 25, .6); }
.founder-pic .credit, .tl2-hero .credit { margin-top: .5rem; font-size: .8rem; }
.stop.yr { width: 4.2rem; height: 4.2rem; font-size: .82rem; letter-spacing: .04em; }
.ms-sec { padding: clamp(4rem, 8vw, 6rem) 0; background: url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #EEE6D8, #E4E1D3); }
.ms-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.ms-head { position: sticky; top: calc(var(--hdr, 80px) + 2rem); }
.ms-head h2 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.ms-head p { margin: 0; font-style: italic; color: var(--ink-soft); }
.ms2-list { list-style: none; margin: 0; padding: 0 0 0 2.2rem; position: relative; }
.ms2-list::before { content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120'%3E%3Cpath d='M7,0 C1,20 13,40 7,60 C1,80 13,100 7,120' fill='none' stroke='%232F6E84' stroke-width='1.3' opacity='.75'/%3E%3C/svg%3E") repeat-y center top / 14px 120px; }
.ms2 { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem; padding: .85rem 0; }
.ms2::before { content: ""; position: absolute; left: -2.05rem; top: 1.3rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--brass); }
.ms2-year { font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; padding-top: .1rem; }
.ms2 p { margin: 0; line-height: 1.65; }
.owner-sec { padding: clamp(4rem, 8vw, 6.5rem) 0; background: url("images/sand-grain.svg"), var(--noise), #DCE5E2; text-align: center; }
.owner-wrap { max-width: 50rem; }
.owner-sec h2 { margin: 0 0 1.4rem; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: .14em; }
.owner-q { margin: 0 auto; font-style: italic; font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.6; max-width: 40ch; }
.sources-sec { padding: 2rem 0 calc(var(--wave) + 2.5rem); background: url("images/sand-grain.svg"), var(--noise), #EEE6D8; }

/* Model timeline intro */
.tl2-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2rem; align-items: center; }
.tl2-text { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; }
.tl2-text h1 { margin: 1rem 0 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06; }
.tl2-text .lede { margin: 1.4rem 0 0; max-width: 46ch; }
.tl2-facts { margin-top: 1.6rem; width: min(100%, 26rem); }
.tl2-hero { grid-column: 9 / 13; margin: 0; }
.tl2-hero img, .tl2-hero .slot-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; box-shadow: 14px 22px 40px -28px rgba(60, 45, 25, .6); }
.tl2-hero .ph-watch { width: 30%; }
.tl2-close .tl2-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.4rem; margin-top: 1.6rem; }
.tl2-close { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.never-sec { padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.dial.three .at12 { grid-area: 1 / 2; }
.dial.three .at4 { grid-area: 3 / 3; align-self: start; max-width: 18rem; }
.dial.three .at8 { grid-area: 3 / 1; align-self: start; text-align: right; justify-self: end; max-width: 18rem; }
.dial.three .dial-center { font-size: .82rem; color: var(--ink-soft); }

/* Watch types */
.wt2-jumps { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.2rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--line-strong); }
.wt2-jump { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink); text-decoration: none; font-style: italic; }
.wt2-jump .wt-icon { color: var(--water-2); transition: transform .3s ease; }
.wt2-jump:hover .wt-icon { transform: translateY(-3px); }
.wt2-jump:hover span { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .3em; }
.wt2-icon-panel { display: grid; place-items: center; color: var(--water-2); }
.wt2-note { margin: 1rem 0 0; max-width: 30ch; line-height: 1.6; }
.hf-text .tick-list { margin-top: .4rem; }

@media (max-width: 900px) {
  .founder-year, .founder-text, .founder-pic { grid-column: 1 / -1; position: static; margin-top: 0; }
  .founder-pic { max-width: 22rem; }
  .ms-grid { grid-template-columns: 1fr; }
  .ms-head { position: static; }
  .tl2-text, .tl2-hero { grid-column: 1 / -1; }
  .tl2-hero { max-width: 22rem; }
  .dial.three .at4, .dial.three .at8, .dial.three .at12 { grid-area: auto; text-align: left; justify-self: stretch; max-width: none; }
}
.flags-grid > div h2 { position: static; }
.hot-src { margin: 1.4rem auto 0; text-align: center; font-size: .88rem; font-style: italic; color: var(--ink-soft); max-width: 60ch; }
.coast-banner + .pg-intro, .coast-banner + .about-sec, .coast-banner + .lot { padding-top: calc(var(--wave) + clamp(2rem, 5vw, 4rem)); }
@media (max-width: 600px) {
  .wall { grid-template-columns: 1fr; }
  .wall > .slot:nth-of-type(n) { grid-column: 1; }
  .wall > .slot:nth-of-type(even) { width: 84%; margin-left: auto; }
  .more-strip { grid-template-columns: 1fr; }
  .more-strip > .slot:nth-child(even) { width: 84%; margin-left: auto; }
}
.pg-intro { background-image: url("images/palm-shadow-soft.svg"), url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #E6DAC5, #EAE0CE); background-size: max(100%, 1400px) auto, auto, auto, auto; background-position: top right, 0 0, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat, no-repeat; }
.about-sec { background-image: url("images/palm-shadow-soft.svg"), url("images/sand-grain.svg"), var(--noise), linear-gradient(180deg, #E6DAC5, #EAE0CE); background-size: max(100%, 1400px) auto, auto, auto, auto; background-position: top right, 0 0, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat, no-repeat; }


/* ===== Theme switch + dark mode: the Gulf at night, water-shining teal accent (Nov 10, 2026) ===== */
.theme-toggle { order: 3; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.theme-toggle:hover { border-color: var(--brass); color: var(--brass); }
.theme-toggle:focus-visible { outline: 2px solid var(--water-2); outline-offset: 3px; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ic-sun { display: none; }
.site-header .nav { order: 2; margin-left: auto; }
.site-header .logo { order: 1; }
.site-header .nav-toggle { order: 4; }
@media (max-width: 900px) { .site-header .theme-toggle { margin-left: auto; } .site-header .nav { order: 5; margin-left: 0; } }

html[data-theme="dark"] {
  --night-0: #091820; --night-1: #0E1F28; --night-2: #132A35; --night-3: #1A3644;
  --accent: #38D6D0; --accent-2: #9BF0EA;
  --sand: #132A35; --sand-deep: #1A3644; --paper: #0E1F28; --card: #132A35;
  --line: rgba(238, 229, 213, .12); --line-strong: rgba(238, 229, 213, .24); --input-line: rgba(238, 229, 213, .4);
  --gulf: #8FC3D2; --gulf-line: #6FA7B8; --ink: #EEE5D5; --ink-soft: #B9C5C7; --mist: #9FB3B8;
  --brass: #38D6D0; --water: #0F3340; --water-2: #1D5A6E;
  color-scheme: dark;
}
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] body { background: url("images/sand-grain.svg"), var(--night-1); color: var(--ink); }
html[data-theme="dark"] .site-header { background: rgba(9, 24, 32, .9); border-bottom-color: rgba(238, 229, 213, .12); box-shadow: 0 1px 0 rgba(56, 214, 208, .35); }
html[data-theme="dark"] .nav-menu { background: var(--night-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }

/* Sand turns to night sand: one calm surface instead of many tints */
html[data-theme="dark"] :is(.bg-sand, .stone, .pg-intro, .about-sec, .wall-sec, .closing-line, .lot, .more-sec, .hf-sec, .route-sec, .offer-sec,
  .lingo-sec, .numbers-sec, .contact-sec, .founder-sec, .ms-sec, .sources-sec, .dial-sec, .fork-sand) {
  background: url("images/sand-grain.svg"), linear-gradient(180deg, var(--night-1), #10232D); }
html[data-theme="dark"] .shore { background: url("images/sand-grain.svg"), linear-gradient(180deg, #102631 0%, var(--night-1) 45%, #0C2530 80%, #0B2A35 100%); }
html[data-theme="dark"] :is(.quiz-sec, .owner-sec) { background: url("images/sand-grain.svg"), linear-gradient(180deg, #0C2530, #0B2A35); }
html[data-theme="dark"] .bg-sand::before, html[data-theme="dark"] .stone::before { display: none; }
html[data-theme="dark"] :is(.intro-h, .bg-sand h1, .bg-sand h2) { text-shadow: none; }

/* Water stays water, lit by the moon */
html[data-theme="dark"] :is(.water-band, .flags-sec, .fork-water) { background: linear-gradient(160deg, #1D5A6E 0%, #123E4D 55%, #0B2833 100%); }
html[data-theme="dark"] .site-footer { background: linear-gradient(180deg, #0B2530 0%, var(--night-0) 45%, #060F14 100%); color: var(--ink); }
html[data-theme="dark"] .site-footer a { color: var(--ink); }
html[data-theme="dark"] .site-footer .coords { color: var(--accent); }
html[data-theme="dark"] .ticker { color: var(--ink); }

/* Accent: water-shining teal */
html[data-theme="dark"] .btn, html[data-theme="dark"] .nav a.btn { background: linear-gradient(to top, var(--accent-2) 50%, var(--accent) 50%) top / 100% 200% no-repeat; color: #0E1F28; border-color: var(--accent); }
html[data-theme="dark"] .btn:hover { background-position: bottom; color: #0E1F28; }
html[data-theme="dark"] .btn-outline { color: var(--ink); border-color: var(--ink); background: linear-gradient(to top, var(--accent) 50%, transparent 50%) top / 100% 200% no-repeat; }
html[data-theme="dark"] .btn-outline:hover { color: #0E1F28; border-color: var(--accent); }
html[data-theme="dark"] .btn-light { background: linear-gradient(to top, var(--accent) 50%, #EEE5D5 50%) top / 100% 200% no-repeat; color: #0E1F28; border-color: #EEE5D5; }
html[data-theme="dark"] .btn-light:hover { background-position: bottom; color: #0E1F28; }
html[data-theme="dark"] .text-link { color: var(--ink); text-decoration-color: var(--accent); }
html[data-theme="dark"] .text-link:hover { color: var(--accent-2); }
html[data-theme="dark"] :is(.flt, .thumb-word)[aria-pressed="true"] { border-bottom-color: var(--accent); }
html[data-theme="dark"] .q-opt:hover, html[data-theme="dark"] .q-opt[aria-pressed="true"] { color: var(--accent-2); }
html[data-theme="dark"] .q-opt { border-color: rgba(238, 229, 213, .18); }
html[data-theme="dark"] .stop { background: var(--night-1); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px rgba(56, 214, 208, .14); }
html[data-theme="dark"] .tl-tag { background: var(--accent); color: #0E1F28; }
html[data-theme="dark"] .flags h3 { color: var(--accent-2); }
html[data-theme="dark"] :is(.tide-line, .fl-line) { stroke: var(--accent); opacity: .9; filter: drop-shadow(0 0 3px rgba(56, 214, 208, .55)); }
html[data-theme="dark"] :is(.tide-foam, .fl-foam) { opacity: .1; }
html[data-theme="dark"] .ms2-list::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120'%3E%3Cpath d='M7,0 C1,20 13,40 7,60 C1,80 13,100 7,120' fill='none' stroke='%2338D6D0' stroke-width='1.3' opacity='.7'/%3E%3C/svg%3E"); }

/* Placeholders, panels, and forms */
html[data-theme="dark"] :is(.slot-img, .lot-frame) { background: url("images/sand-grain.svg"), var(--night-3); }
html[data-theme="dark"] .ph-watch { stroke: rgba(238, 229, 213, .28); }
html[data-theme="dark"] .hf-text { background: url("images/sand-grain.svg"), rgba(19, 42, 53, .97); box-shadow: 14px 22px 40px -24px rgba(0, 0, 0, .7); }
html[data-theme="dark"] :is(.founder-pic img, .tl2-hero img, .hf-pic img) { box-shadow: 14px 22px 40px -24px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .lf textarea { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .lf select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EEE5D5' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .lf select option { background: var(--night-2); color: var(--ink); }
html[data-theme="dark"] main img { filter: brightness(1.06) contrast(1.02); }
html[data-theme="dark"] .hero-scene img { filter: none; }
@media (max-width: 900px) { .site-header .wrap { column-gap: .7rem; } }


/* Naples band, Nov 10 (idea from the Lovable test): waterline on both edges, words centered on the sunset */
.naples-band { min-height: clamp(440px, 44vw, 620px); justify-content: center; text-align: center; z-index: 2; margin-bottom: calc(var(--wave) * -1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,48 L0,48 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - var(--wave) * 2 + 2px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,48 L0,48 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - var(--wave) * 2 + 2px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat; }
.naples-band::before { background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(10, 24, 32, .66) 0%, rgba(10, 24, 32, .34) 62%, rgba(10, 24, 32, .12) 100%); }
.naples-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("images/wave-foam.svg") top / 100% var(--wave) no-repeat, url("images/wave-foam.svg") bottom / 100% var(--wave) no-repeat; }
.naples-band .wrap { align-items: center; padding-block: calc(var(--wave) + 2.5rem); }
.naples-band h2 { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.naples-band .lede { max-width: 40ch; margin-inline: auto; }
.naples-band .btn-row { justify-content: center; }
.naples-band .coast-cap { bottom: calc(var(--wave) + .5rem); z-index: 2; }
.naples-band + .fork > div { padding-top: calc(var(--wave) + clamp(3rem, 6vw, 5.5rem)); }
.naples-band { margin-top: calc(var(--wave) * -1); }
@media (max-width: 760px) {
  .naples-band::before { background: linear-gradient(180deg, rgba(10, 24, 32, .55) 0%, rgba(10, 24, 32, .62) 55%, rgba(10, 24, 32, .4) 100%); }
  .naples-band .wrap { padding-block: calc(var(--wave) + 2rem) calc(var(--wave) + 3rem); }
}


/* ===== Ideas copied from the Lovable test, Nov 10 ===== */
/* Pebble-shaped buttons */
.btn, .btn-outline, .btn-light, .btn-sun, .nav a.btn { border-radius: 999px; }
.btn, .btn-outline, .btn-light, .btn-sun { padding: 1rem 2.1rem; text-align: center; }
.btn-sun { font-family: var(--display); font-size: .85rem; letter-spacing: .2em; text-decoration: none; display: inline-block; cursor: pointer;
  color: #1F2A2E; border: 1px solid #C9A063; background: linear-gradient(to top, #E7CC9C 50%, #C9A063 50%) top / 100% 200% no-repeat; transition: background-position .45s ease; }
.btn-sun:hover { background-position: bottom; }
html[data-theme="dark"] .btn-sun { color: #0E1F28; border-color: #D9B377; background: linear-gradient(to top, #F1DDB4 50%, #D9B377 50%) top / 100% 200% no-repeat; }
.btn-sun:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-sun { transition: none; } }

/* The seal: next to the name in the header, bigger in the footer */
.seal { display: block; flex: none; color: currentColor; overflow: visible; }
.seal-ring { font-family: var(--display); font-size: 7.6px; letter-spacing: 1.1px; fill: currentColor; }
.seal-g { font-family: var(--body); font-size: 31px; fill: currentColor; }
.seal-est { font-family: var(--display); font-size: 4.4px; letter-spacing: .9px; fill: currentColor; }
.logo { flex-direction: row; align-items: center; gap: .75rem; }
.logo-words { display: flex; flex-direction: column; gap: .25rem; }
.logo-seal { width: 46px; height: 46px; }
.logo:hover .logo-seal { transform: rotate(-8deg); }
.logo-seal { transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .logo-seal { transition: none; } }
@media (max-width: 520px) { .logo-seal { width: 38px; height: 38px; } .logo { gap: .55rem; } }
.ft-brand { display: flex; align-items: flex-start; gap: 1.2rem; }
.ft-seal { width: 104px; height: 104px; color: var(--brass); }
html[data-theme="dark"] .ft-seal { color: #D9B377; }
.ft-view p { margin: 0; max-width: 24ch; line-height: 1.55; }
@media (max-width: 520px) { .ft-seal { width: 76px; height: 76px; } }

/* Home hero: the photo's bottom edge is the waterline */
.hero-scene { z-index: 2; margin-bottom: calc(var(--wave) * -1);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat; }
.hero-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--wave); background: url("images/wave-foam.svg") center / 100% 100% no-repeat; pointer-events: none; }
.hero-scene + .shore .intro { padding-top: calc(var(--wave) + clamp(3rem, 6vw, 6rem)); }
.intro-title { grid-column: 1 / 9; }
.intro-title .intro-h { grid-column: auto; }
.intro-kicker { margin: 0 0 1rem; font-style: italic; font-size: 1.15rem; color: var(--water-2); }
html[data-theme="dark"] .intro-kicker { color: var(--accent); }
.intro-actions .btn-outline { padding: .95rem 2rem; }
@media (max-width: 900px) { .intro-title { grid-column: 1 / -1; } }

/* Watch slots: a "photo to come" mat until the real photo is in */
.slot-img:has(> .ph-watch)::after { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--ink-soft); opacity: .4; pointer-events: none; }
.slot-img:has(> .ph-watch) em { left: 0; right: 0; bottom: 11%; text-align: center; font-family: var(--display); font-style: normal; font-size: .72rem; letter-spacing: .26em; color: var(--brass); }
html[data-theme="dark"] .slot-img:has(> .ph-watch) em { color: #D9B377; }
.slot-price { color: var(--water-2); text-align: right; }
html[data-theme="dark"] .slot-price { color: var(--accent); }
.hf-pic .slot-img:has(> .ph-watch)::after { inset: 16px; }

/* Buying or selling: the selling side is a lagoon set into the sand */
.fork { background: url("images/sand-grain.svg"), var(--noise), var(--sand); }
html[data-theme="dark"] .fork { background: url("images/sand-grain.svg"), linear-gradient(180deg, var(--night-1), #10232D); }
.fork-water { margin-block: clamp(1.5rem, 3vw, 2.75rem); border-radius: 110px 0 0 140px / 130px 0 0 110px; }
.naples-band + .fork .fork-water { margin-top: calc(var(--wave) + clamp(1rem, 2vw, 2rem)); padding-top: clamp(3rem, 6vw, 5.5rem); }
.fork .btn-row { margin-top: .4rem; }
.fork-water .btn-row { margin-top: .6rem; }
@media (max-width: 900px) {
  .fork-water { margin: 0 1rem 2rem; border-radius: 2.2rem; }
  .naples-band + .fork .fork-water { margin-top: 0; }
}

/* What every listing tells you: an example hang tag lying on the dial */
.dial-tag { grid-area: 2 / 2; place-self: center; position: relative; z-index: 1; width: 80%; margin: 0; padding: 1.5rem 1.1rem 1rem; text-align: center;
  background: url("images/sand-grain.svg"), #FBF7EF; color: #1F3B48; border-radius: 5px; transform: rotate(-5deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 12px 18px 30px -16px rgba(40, 30, 15, .55); }
.tag-hole { position: absolute; top: .55rem; left: 50%; width: .7rem; height: .7rem; margin-left: -.35rem; border-radius: 50%; border: 1.5px solid #A8824C; background: #EEE6D8; }
.dial-tag figcaption { font-family: var(--display); font-size: .62rem; letter-spacing: .28em; color: #A8824C; margin-top: .35rem; }
.tag-name { margin: .3rem 0 .55rem; font-family: var(--display); font-size: 1rem; letter-spacing: .12em; }
.dial-tag dl { margin: 0; text-align: left; }
.dial-tag dl > div { display: flex; justify-content: space-between; gap: .6rem; padding: .32rem 0; border-top: 1px dashed rgba(31, 59, 72, .28); font-size: .86rem; line-height: 1.3; }
.dial-tag dt { color: #4A6470; }
.dial-tag dd { margin: 0; text-align: right; font-style: italic; }
html[data-theme="dark"] .dial-tag { background: url("images/sand-grain.svg"), #EEE5D5; box-shadow: 12px 18px 34px -14px rgba(0, 0, 0, .75); }
.dial-more { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; text-align: center; }
@media (max-width: 900px) {
  .dial-face { order: 0; }
  .dial-tag { grid-area: auto; order: 1; width: min(300px, 86vw); justify-self: center; margin-top: -2rem; transform: rotate(-3deg); }
  .at12, .at3, .at6, .at9 { order: 2; }
}
html[data-theme="dark"] .fork { background: url("images/sand-grain.svg"), var(--night-1); }
html[data-theme="dark"] .fork-sand { background: transparent; }
@media (min-width: 861px) and (max-width: 1120px) {
  .site-header .wrap { column-gap: 1.1rem; }
  .nav { column-gap: 1.05rem; letter-spacing: .14em; }
  .logo-seal { width: 40px; height: 40px; }
  .logo-name { font-size: 1.4rem; }
}
.slot-img:has(> .ph-watch) em { color: #7A5E33; }


/* What's Hot and Watch Types, Nov 10: the photo stays put while the words scroll past (replaces the zigzag rows, Nepal's tip) */
.sx { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
.sx-stage { grid-column: 1 / 7; grid-row: 1; position: sticky; top: 6.75rem; height: min(calc(100vh - 9rem), 660px); min-height: 420px; overflow: hidden;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 34px + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 34px no-repeat; mask: linear-gradient(#000, #000) top / 100% calc(100% - 34px + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C110,10 220,38 340,24 C460,10 560,34 690,22 C820,10 930,36 1060,24 C1190,12 1300,34 1440,20 L1440,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 34px no-repeat; }
.sx-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: url("images/wave-foam.svg") center / 100% 100% no-repeat; pointer-events: none; }
.sx-pic { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.sx-pic.is-on { opacity: 1; }
.sx-pic > img, .sx-pic > .slot-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.sx-pic .wt2-icon-panel svg { width: 42%; height: auto; }
.sx-cap { position: absolute; left: 1.2rem; bottom: calc(34px + .7rem); font-style: italic; font-size: 1.05rem; color: #FFF8EC; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.sx-pic:has(> .slot-img) .sx-cap { color: var(--ink); text-shadow: none; }
.sx-list { grid-column: 8 / 13; grid-row: 1; }
.sx-item { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2.5rem; scroll-margin-top: 6rem; }
.sx-item:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 1rem; }
.sx.js-on .sx-item { opacity: .35; transition: opacity .5s ease; }
.sx.js-on .sx-item.is-on { opacity: 1; }
.sx-inline { display: none; }
.sx-text h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sx-text p { margin: 0 0 .9rem; line-height: 1.65; }
.sx-text .tick-list { margin-top: .4rem; }
.sx-sec .hf-source { margin-top: clamp(2rem, 4vw, 3rem); }
@media (prefers-reduced-motion: reduce) { .sx-pic, .sx.js-on .sx-item { transition: none; } }
@media (max-width: 900px) {
  .sx { display: block; }
  .sx-stage { display: none; }
  .sx-inline { display: block; margin-bottom: 1.3rem; }
  .sx-inline > img, .sx-inline > .slot-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; }
  .sx-inline .wt2-icon-panel svg { width: 34%; height: auto; }
  .sx-item, .sx-item:first-child { min-height: 0; display: block; padding: 0 0 3.5rem; }
  .sx.js-on .sx-item { opacity: 1; }
}