/* Watches: contemporary longform, distinct from the running kits. */
:root {
  --paper: #f5f6f8;
  --ink: #171b23;
  --muted: #525d6d;
  --line: #d6dce5;
  --accent: #315ded;
  --night: #131923;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: "Instrument Serif", serif; font-weight: 400; }
nav a { text-decoration: none; }
.mast {
  min-height: 78px;
  padding: 24px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--night);
  color: #fff;
  border-bottom: 1px solid #303a49;
}
.mark { font-size: 12px; letter-spacing: .19em; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.navlinks { display: flex; gap: 26px; font-size: 12px; }
.navlinks a:hover { color: #b4c6ff; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; line-height: 1.7; }
.hero {
  position: relative;
  min-height: calc(100svh - 78px);
  display: flex;
  align-items: flex-end;
  background: var(--night);
  color: #fff;
  isolation: isolate;
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: -2; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(10,16,25,.86),rgba(10,16,25,.28) 62%,rgba(10,16,25,.08)),linear-gradient(0deg,rgba(10,16,25,.72),transparent 80%);
  z-index: -1;
}
.hero-copy { padding: 70px 6vw 65px; max-width: 850px; }
.hero h1 { font-size: clamp(3.5rem,7.4vw,7.2rem); line-height: .96; letter-spacing: -.035em; margin: 22px 0; }
.hero .eyebrow { color: #b4c6ff; }
.hero .sub { max-width: 490px; font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.6; color: #edf1f7; }
.micro { font-size: 11px; line-height: 1.65; color: var(--muted); }
.hero .micro { color: #d4dbe6; margin-top: 24px; }
.quick { display: grid; grid-template-columns: repeat(4,1fr); padding: 0 6vw; background: var(--night); color: #fff; }
.quick div { padding: 28px 20px; border-right: 1px solid #384252; }
.quick div:first-child { padding-left: 0; }
.quick div:last-child { border: 0; }
.quick .eyebrow { color: #b4c6ff; }
.quick strong { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-top: 8px; }
.sectionnav { display: flex; gap: 24px; overflow-x: auto; padding: 22px 6vw; border-bottom: 1px solid var(--line); background: #fff; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.sectionnav a:hover { color: var(--accent); }
.chapter { display: grid; grid-template-columns: 1fr 2fr; gap: 7vw; max-width: 1180px; padding: 85px 40px; margin: auto; }
.chapter .label { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); padding-top: 12px; line-height: 1.6; }
.chapter-continuation { padding-top: 0; }
.prose { max-width: 720px; min-width: 0; }
.prose h2 { font-size: clamp(2rem,3.8vw,3.25rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 28px; }
.prose h3 { font-size: 1.8rem; margin: 35px 0 16px; }
.prose p { font-size: 18px; line-height: 1.8; margin: 0 0 23px; color: #343e4c; }
.prose p.lead { font-size: 23px; line-height: 1.6; color: var(--ink); }
.prose sup a { font-size: 10px; text-decoration: none; color: var(--accent); }
.watch-story #history,
.watch-story #specifications,
.watch-story #bands { background: #fff; }
.wide { max-width: 1180px; margin: 0 auto; background: var(--night); color: #dbe2ed; }
.wide > a { display: block; }
.wide img { width: 100%; max-height: 900px; object-fit: cover; }
.wide figcaption { font-size: 11px; line-height: 1.7; padding: 18px 24px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1180px; margin: auto; }
.duo .wide { width: 100%; }
.duo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lineage-pair img { object-fit: contain; background: #fff; }
.lineage-pair figure:last-child img { object-fit: cover; }
.lineage-pair { margin-bottom: 20px; }
.lineage-landscape img { object-fit: contain; }
.lineage-note { border-left: 2px solid var(--accent); padding-left: 22px; margin-top: 30px; }
.lineage-note p { font-size: 17px; }
.dark { background: var(--night); color: #fff; }
.dark .label { color: #b4c6ff; }
.dark .prose p { color: #dbe2ed; }
.dark .prose p.lead { color: #fff; }
.dark .prose sup a { color: #b4c6ff; }
.band-callout { padding: 35px; background: #eaf0ff; border-left: 3px solid var(--accent); margin: 35px 0; }
.band-callout .number { font-size: clamp(3rem,6vw,5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; display: block; margin: 12px 0 20px; }
.band-callout p { font-size: 15px; line-height: 1.65; margin: 0; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.specs caption { text-align: left; padding-bottom: 15px; font-size: 12px; color: var(--muted); }
.specs th, .specs td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 43%; font-weight: 400; color: var(--muted); padding-left: 0; }
.specs td { padding-right: 0; }
.specimen-photo { margin-top: 30px; }
.photo-credit { display: block; margin-top: 15px; text-transform: none; letter-spacing: 0; }
.strap { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; border-top: 1px solid var(--line); padding: 36px 0; }
.strap h3 { font-size: 28px; margin: 8px 0 12px; }
.strap .facts { font-size: 12px; line-height: 1.7; margin: 0 0 14px; }
.strap p { font-size: 17px; margin-bottom: 14px; }
.strap-photo { margin: 0; background: #e9edf3; }
.strap-photo > a { display: block; background: #fff; }
.strap-photo img { width: 100%; height: auto; aspect-ratio: 1.18; object-fit: contain; background: #fff; padding: 18px; }
.strap-photo.leather-detail img { object-fit: cover; object-position: center 48%; padding: 0; }
.strap-photo figcaption { padding: 12px 14px; font-size: 10px; line-height: 1.6; color: #465366; }
.strap-copy { min-width: 0; }
.button { display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; border: 1px solid var(--ink); text-decoration: none; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.button:hover { background: var(--ink); color: #fff; }
.strap .button { font-size: 10px; padding: 13px 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.purchase { padding: 45px; background: var(--night); color: #fff; border-top: 3px solid var(--accent); }
.purchase h2 { font-family: "DM Sans", Helvetica, Arial, sans-serif; font-weight: 500; letter-spacing: -.04em; font-size: 2.7rem; margin-bottom: 20px; }
.purchase p { font-size: 17px; line-height: 1.7; color: #dbe2ed; }
.purchase .button { border-color: #8d9eb8; color: #fff; }
.purchase .button:hover { background: #fff; color: var(--night); border-color: #fff; }
.prose p.disclosure-note, .prose p.buying-note.micro { font-size: 12px; line-height: 1.65; }
.prose p.buying-note { margin-top: 20px; }
.sources { max-width: 1180px; margin: auto; padding: 60px 40px; border-top: 1px solid var(--line); }
.sources > .eyebrow { color: var(--accent); }
.sources h2 { font-size: 2.3rem; margin-bottom: 20px; }
.sources ol { padding-left: 20px; font-size: 12px; line-height: 1.8; columns: 2; column-gap: 40px; color: var(--muted); }
.sources li { break-inside: avoid; margin: 0 0 15px; }
.footer { padding: 35px 6vw; border-top: 1px solid #303a49; background: var(--night); color: #dbe2ed; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11px; line-height: 1.8; }
.index-intro { padding: 70px 6vw 45px; max-width: 1100px; }
.index-intro .eyebrow { color: var(--accent); }
.index-intro h1 { font-size: clamp(4rem,9vw,8rem); letter-spacing: -.04em; margin: 18px 0; }
.index-intro p { line-height: 1.6; font-size: 22px; max-width: 650px; }
.feature-link { display: grid; grid-template-columns: 1.4fr 1fr; text-decoration: none; background: var(--night); color: #fff; margin: 0 6vw 80px; }
.feature-link > img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.feature-copy { padding: 50px; align-self: center; }
.feature-copy .eyebrow { color: #b4c6ff; }
.feature-copy h2 { font-size: clamp(2rem,4vw,4rem); letter-spacing: -.03em; line-height: 1.05; margin: 22px 0; }
.feature-copy p { font-size: 18px; line-height: 1.7; margin-bottom: 25px; color: #dbe2ed; }
.line-arrow { display: inline-block; vertical-align: middle; flex: 0 0 auto; margin-left: 8px; transition: transform .3s ease; }
.button .line-arrow { width: 23px; height: 21px; margin-left: 0; }
.button:hover .line-arrow, .button:focus-visible .line-arrow, .feature-link:hover .line-arrow, .feature-link:focus-visible .line-arrow { transform: translate(3px,-2px); }
.feature-copy .eyebrow .line-arrow { width: 26px; height: 22px; }
.skip { position: fixed; top: -100px; left: 20px; background: #fff; color: #111; padding: 15px; z-index: 100; }
.skip:focus { top: 10px; }
@media(min-width:1050px) {
  .strap { grid-template-columns: minmax(0,.84fr) minmax(0,1fr); gap: 25px; }
  .strap-photo img { aspect-ratio: 1; }
  .strap-photo.leather-detail img { aspect-ratio: .83; }
}
@media(max-width:720px) {
  .mast { min-height: 68px; padding: 20px 22px; }
  .navlinks { gap: 18px; }
  .mark { font-size: 10px; letter-spacing: .12em; }
  .hero { min-height: calc(95svh - 68px); }
  .hero > img { object-position: 66% center; }
  .hero::after { background: linear-gradient(0deg,rgba(10,16,25,.94),rgba(10,16,25,.1) 100%); }
  .hero-copy { padding: 220px 24px 35px; }
  .hero h1 { font-size: clamp(3.3rem,13vw,5rem); }
  .hero .sub { font-size: 16px; max-width: 340px; }
  .quick { grid-template-columns: 1fr 1fr; padding: 0 24px; }
  .quick div { padding: 24px 12px; border-bottom: 1px solid #384252; }
  .quick div:nth-child(2) { border-right: 0; }
  .quick div:nth-child(3) { padding-left: 0; border-bottom: 0; }
  .quick strong { font-size: 23px; }
  .sectionnav { padding: 20px 24px; }
  .chapter { display: block; padding: 55px 24px; }
  .chapter-continuation { padding-top: 0; }
  .chapter .label { padding: 0; margin-bottom: 22px; }
  .prose p { font-size: 17px; line-height: 1.75; }
  .prose p.lead { font-size: 21px; }
  .duo { grid-template-columns: 1fr; }
  .wide img { max-height: none; }
  .band-callout { padding: 26px; }
  .band-callout p { font-size: 15px; }
  .sources { padding: 45px 24px; }
  .sources ol { columns: 1; }
  .specs { font-size: 12px; }
  .purchase { padding: 30px 24px; }
  .purchase h2 { font-size: clamp(1.6rem,7vw,2.7rem); overflow-wrap: anywhere; }
  .feature-link { grid-template-columns: 1fr; margin: 0 22px 50px; }
  .feature-link > img { min-height: 0; aspect-ratio: 1.3; }
  .feature-copy { padding: 30px; }
  .index-intro { padding: 45px 24px; }
  .index-intro p { font-size: 20px; }
  .footer { padding: 30px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .line-arrow { transition: none; }
  .button:hover .line-arrow, .button:focus-visible .line-arrow, .feature-link:hover .line-arrow, .feature-link:focus-visible .line-arrow { transform: none; }
}

/* Archival photographs stay within the history text column. */
.watch-story #history .history-gallery { margin: 30px 0 36px; gap: 18px; }
.watch-story #history .history-gallery .wide { align-self: start; }
.watch-story #history .history-gallery figcaption { padding: 14px 16px; }
.watch-story #history .history-factory img { aspect-ratio: auto; object-fit: contain; }
.watch-story #history .history-timepieces img { aspect-ratio: 1; object-fit: contain; background: #fff; }

/* Tudor dual-watch story: keep portrait detail photographs uncropped. */
.pelagos-story .pelagos-details img { aspect-ratio: 1; object-fit: contain; background: var(--paper); }
.pelagos-story .quick + .quick { border-top: 1px solid #384252; }

/* Longines only: contained studio photography and small archive originals. */
.longines-story .hero { display: grid; grid-template-columns: 1.12fr 1fr; min-height: 680px; }
.longines-story .hero > img { position: static; width: 100%; height: 100%; max-height: 850px; object-fit: contain; z-index: auto; order: 2; background: #e4e7eb; }
.longines-story .hero::after { display: none; }
.longines-story .hero-copy { order: 1; padding: 65px 4vw 65px 6vw; align-self: center; }
.longines-story .hero h1 { font-size: clamp(3.4rem,5.5vw,6.2rem); }
.longines-story .longines-history { margin: 30px 0; align-items: start; }
.longines-story .longines-history img { aspect-ratio: auto; max-width: 409px; margin: auto; object-fit: contain; background: #131923; }
.longines-story .longines-history figcaption { padding: 15px; }
.longines-story .longines-details img { object-fit: contain; aspect-ratio: 1; background: var(--paper); }
.longines-card > img { object-fit: contain; background: #e4e7eb; max-height: 800px; }
@media(max-width:720px) {
  .longines-story .hero { grid-template-columns: 1fr; min-height: 0; }
  .longines-story .hero > img { order: 1; height: 430px; }
  .longines-story .hero-copy { order: 2; padding: 40px 24px; }
  .longines-story .hero h1 { font-size: clamp(3rem,11vw,4.8rem); }
}

/* Seiko only: three-watch specifications and contained brand photography. */
.seiko-story .hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 720px; }
.seiko-story .hero > img { position: static; order: 2; height: 100%; width: 100%; object-fit: cover; object-position: center; z-index: auto; }
.seiko-story .hero::after { display: none; }
.seiko-story .hero-copy { order: 1; padding: 60px 4vw 60px 6vw; align-self: center; }
.seiko-story .hero h1 { font-size: clamp(3.4rem,5.3vw,6rem); }
.seiko-story .quick + .quick { border-top: 1px solid #384252; }
.seiko-story .seiko-details img { object-fit: contain; background: var(--paper); }
.seiko-story .seiko-archive img { object-fit: contain; }
.seiko-story .seiko-small { max-width: 600px; }
@media(max-width:720px) {
 .seiko-story .hero { grid-template-columns: 1fr; min-height: 0; }
 .seiko-story .hero > img { order: 1; height: auto; aspect-ratio: 2; object-fit: contain; }
 .seiko-story .hero-copy { order: 2; padding: 40px 24px; }
 .seiko-story .hero h1 { font-size: clamp(3rem,11vw,4.8rem); }
}