/* ============================================================
   Escapement & Co. — Calibre III
   Midnight navy · silvered dial white · polished steel · burgundy
   ============================================================ */

:root{
  --navy:        #0B1424;
  --navy-deep:   #070E1A;
  --navy-raise:  #101B30;
  --silver:      #C9D1DB;
  --silver-dim:  #8B94A3;
  --silver-hi:   #EEF2F7;
  --steel-1:     #5E6875;
  --steel-2:     #96A1B0;
  --steel-3:     #D6DDE5;
  --burgundy:    #7E2438;
  --burgundy-bright: #A03048;
  --hairline:    rgba(201,209,219,0.16);
  --hairline-soft: rgba(201,209,219,0.09);
  --serif-disp:  'Marcellus', serif;
  --serif-sc:    'Marcellus SC', serif;
  --serif-body:  'Cardo', Georgia, serif;
  --mono:        'IBM Plex Mono', monospace;
  --measure: 62ch;
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(150,161,176,0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(126,36,56,0.06), transparent 55%),
    var(--navy);
  color:var(--silver);
  font-family:var(--serif-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--burgundy); color:var(--silver-hi); }

a{ color:var(--silver-hi); text-decoration-color:rgba(160,48,72,0.7); text-underline-offset:3px; }
a:hover{ color:#fff; text-decoration-color:var(--burgundy-bright); }

:focus-visible{
  outline:1.5px solid var(--burgundy-bright);
  outline-offset:3px;
  border-radius:1px;
}

h1,h2{ font-family:var(--serif-disp); font-weight:400; color:var(--silver-hi); letter-spacing:0.01em; }
@supports (-webkit-background-clip: text){
  h1, section h2, .guide-main h1{
    background:linear-gradient(115deg, #F4F7FB 0%, #B9C3D0 46%, #E6EBF1 72%, #99A4B3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--silver-hi);
  }
}
h3{ font-family:var(--serif-sc); font-weight:400; color:var(--silver-hi); letter-spacing:0.06em; }

.mono{ font-family:var(--mono); font-weight:300; font-size:0.92em; letter-spacing:0.04em; }

/* ---------- header ---------- */
.site-head{
  position:absolute; inset:0 0 auto 0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
}
.wordmark{
  display:flex; align-items:center; gap:0.65rem;
  font-family:var(--serif-sc); font-size:1.05rem; letter-spacing:0.14em;
  color:var(--silver-hi); text-decoration:none;
}
.wordmark .mark{ width:1.5rem; height:1.5rem; color:var(--steel-2); }
.site-nav{ display:flex; gap:1.9rem; align-items:center; }
.site-nav a{
  font-family:var(--mono); font-weight:300; font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver-dim); text-decoration:none;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{ color:var(--silver-hi); border-bottom-color:var(--burgundy-bright); }
.site-nav .nav-cta{ color:var(--silver-hi); border-bottom-color:var(--burgundy); }

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(20rem, 5fr) 7fr;
  align-items:center;
  gap:clamp(1rem, 3vw, 3rem);
  padding:6.5rem var(--pad) 3rem;
}
.hero-copy{ max-width:34rem; }
.eyebrow{
  font-family:var(--mono); font-weight:300; font-size:0.72rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--burgundy-bright);
  margin-bottom:1.6rem;
}
.hero h1{
  font-size:clamp(2.5rem, 4.6vw, 4.1rem);
  line-height:1.08;
  margin-bottom:1.5rem;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.05rem, 1.35vw, 1.2rem);
  line-height:1.7;
  color:var(--silver);
  margin-bottom:2.2rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:center; margin-bottom:2.6rem; }

.btn{
  display:inline-block;
  font-family:var(--serif-sc); font-size:0.95rem; letter-spacing:0.12em;
  color:var(--silver-hi); text-decoration:none;
  padding:0.8rem 1.7rem;
  background:linear-gradient(160deg, rgba(150,161,176,0.16), rgba(94,104,117,0.10));
  border:1px solid rgba(201,209,219,0.35);
  border-radius:2px;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  cursor:pointer;
}
.btn:hover{ border-color:var(--burgundy-bright); background:linear-gradient(160deg, rgba(160,48,72,0.22), rgba(126,36,56,0.12)); transform:translateY(-1px); }
.btn-quiet{
  font-family:var(--mono); font-weight:300; font-size:0.75rem;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--silver-dim); text-decoration:none;
  border-bottom:1px solid var(--hairline);
  padding-bottom:0.25rem;
}
.btn-quiet:hover{ color:var(--silver-hi); border-bottom-color:var(--burgundy-bright); }

/* tempo control */
.tempo{ display:flex; align-items:center; gap:0.5rem; }
.tempo-label{
  font-family:var(--mono); font-weight:300; font-size:0.68rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--silver-dim);
  margin-right:0.4rem;
}
.tempo-btn{
  font-family:var(--mono); font-weight:300; font-size:0.7rem; letter-spacing:0.1em;
  color:var(--silver-dim);
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:0.35rem 0.8rem;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.tempo-btn:hover{ color:var(--silver-hi); border-color:rgba(201,209,219,0.4); }
.tempo-btn[aria-pressed="true"]{
  color:var(--silver-hi);
  border-color:var(--burgundy-bright);
  background:rgba(126,36,56,0.16);
}

/* the drawing */
.hero-fig{
  align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  min-width:0;
}
#esc-svg{
  width:100%; height:auto;
  max-height:calc(100vh - 7rem);
  display:block;
}

/* SVG line classes */
#esc-svg .ln-faint{ stroke:var(--hairline-soft); }
#esc-svg text{
  font-family:var(--mono); font-weight:300;
  font-size:12.5px; letter-spacing:0.1em;
  fill:var(--silver-dim);
}
#esc-svg .anno .sub{ font-size:10px; fill:rgba(139,148,163,0.72); }
#esc-svg .anno .lead{ fill:none; stroke:rgba(201,209,219,0.28); stroke-width:0.75; }
#esc-svg .anno .dot{ fill:var(--burgundy-bright); }
#esc-svg .fig-cap text{ font-size:11px; fill:rgba(139,148,163,0.85); letter-spacing:0.14em; }
#esc-svg .fig-beats{ fill:rgba(139,148,163,0.6); }
#esc-svg #beatDot{ fill:var(--burgundy-bright); }
#esc-svg #beatCount{ fill:var(--silver-dim); }

/* annotation hover cross-highlight */
.anno-item{ cursor:default; }
.anno-item:hover text{ fill:var(--silver-hi); }
.anno-item:hover .lead{ stroke:rgba(160,48,72,0.85); }
#esc-svg .hl{
  filter:brightness(1.7) drop-shadow(0 0 9px rgba(160,48,72,0.45));
}

/* ---------- minute-track divider ---------- */
.minute-track{
  height:14px;
  margin:0 var(--pad);
  background:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(201,209,219,0.32) 0 1px, transparent 1px 60px);
  background-size:auto 7px, auto 14px;
  background-repeat:repeat-x;
  background-position:left bottom, left bottom;
  border-bottom:1px solid var(--hairline);
}

/* ---------- shared section rhythm ---------- */
section{ padding:clamp(4.5rem, 9vw, 7.5rem) var(--pad); }
.section-no{
  font-family:var(--mono); font-weight:300; font-size:0.72rem;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--burgundy-bright);
  margin-bottom:1.4rem;
}
section h2{
  font-size:clamp(1.9rem, 3.2vw, 2.9rem);
  margin-bottom:1.4rem;
  text-wrap:balance;
}

/* ---------- manifesto ---------- */
.manifesto-body{ max-width:var(--measure); }
.manifesto .big{
  font-family:var(--serif-disp);
  font-size:clamp(1.45rem, 2.4vw, 2.05rem);
  line-height:1.42;
  color:var(--silver-hi);
  margin-bottom:1.8rem;
  text-wrap:balance;
}
.manifesto .big em{ font-family:var(--serif-body); font-style:italic; color:var(--burgundy-bright); font-size:1.04em; }
.manifesto p:not(.big){ max-width:58ch; color:var(--silver); }

/* ---------- spec ---------- */
.spec-head{ display:flex; align-items:flex-end; gap:2.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.spec-head h2{ margin-bottom:0; }
.spec-head .section-no{ width:100%; }

.small-seconds{ display:flex; align-items:center; gap:0.9rem; margin-left:auto; }
.ss-dial{
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(201,209,219,0.35);
  position:relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(150,161,176,0.10), transparent 65%);
}
.ss-dial::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(201,209,219,0.45) 0deg 0.8deg, transparent 0.8deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 59%);
          mask:radial-gradient(circle, transparent 58%, #000 59%);
}
.ss-dial::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; border-radius:50%;
  background:var(--burgundy-bright);
  transform:translate(-50%,-50%);
}
.ss-hand{
  position:absolute; left:50%; top:50%;
  width:1.5px; height:24px;
  background:var(--silver-hi);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(0deg);
  animation:deadbeat 60s steps(60, end) infinite;
}
@keyframes deadbeat{ to{ transform:translate(-50%,-100%) rotate(360deg); } }
.ss-label{
  font-family:var(--mono); font-weight:300; font-size:0.62rem;
  letter-spacing:0.16em; color:var(--silver-dim); line-height:1.7;
}

.spec-table{ max-width:56rem; border-top:1px solid var(--hairline); }
.spec-row{
  display:grid;
  grid-template-columns:minmax(9rem, 16rem) 1fr;
  gap:1rem 2rem;
  padding:0.95rem 0.25rem;
  border-bottom:1px solid var(--hairline-soft);
  transition:background .2s ease;
}
.spec-row:hover{ background:rgba(150,161,176,0.05); }
.spec-row dt{
  font-family:var(--serif-sc); font-size:0.95rem; letter-spacing:0.08em;
  color:var(--silver-dim);
}
.spec-row dd{
  font-family:var(--mono); font-weight:300; font-size:0.88rem;
  letter-spacing:0.03em; color:var(--silver-hi);
  font-feature-settings:"tnum";
}
.spec-note{
  max-width:56ch; margin-top:1.8rem;
  font-style:italic; color:var(--silver-dim); font-size:0.98rem;
}

/* ---------- finissage ---------- */
.fin-intro{ max-width:var(--measure); margin-bottom:3rem; color:var(--silver); }
.fin-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 3rem);
  max-width:70rem;
}
.fin-card h3{ font-size:1.15rem; margin:1.1rem 0 0.55rem; }
.fin-card p{ font-size:0.99rem; color:var(--silver); max-width:52ch; }
.fin-art{
  height:130px;
  border:1px solid var(--hairline);
  border-radius:2px;
  overflow:hidden;
  position:relative;
  background:var(--navy-raise);
}
.fin-art svg{ width:100%; height:100%; display:block; }
.fin-dim{ font-family:var(--mono); font-size:10px; fill:var(--burgundy-bright); letter-spacing:0.08em; }
.fin-dim-dim{ fill:var(--silver-dim); letter-spacing:0.12em; }

.fin-cotes{
  background:repeating-linear-gradient(100deg,
    #131e33 0 16px, #1d2a44 16px 26px, #253654 26px 30px, #16223a 30px 42px);
}
.fin-perlage{
  background-color:var(--navy-raise);
  background-image:
    radial-gradient(circle at 13px 13px, transparent 8px, rgba(150,161,176,0.28) 8.6px, transparent 10px),
    radial-gradient(circle at 13px 13px, transparent 8px, rgba(150,161,176,0.17) 8.6px, transparent 10px);
  background-size:26px 26px, 26px 26px;
  background-position:0 0, 13px 13px;
}
.fin-blackpolish{
  /* black from one angle, white from the next — one crisp specular edge, never grey */
  background:linear-gradient(115deg,
    #03060B 0%, #05090F 42%,
    #2A3850 49.4%, #E8EDF3 50.6%, #202C3E 51.8%,
    #060B14 60%, #03060B 100%);
}
.fin-blackpolish .sheen{
  position:absolute; inset:-40% -20%;
  background:linear-gradient(115deg, transparent 42%, rgba(238,242,247,0.55) 50%, transparent 58%);
  transform:translateX(-70%);
  transition:transform 1.1s cubic-bezier(.22,.8,.3,1);
}
.fin-card:hover .fin-blackpolish .sheen{ transform:translateX(70%); }

/* ---------- edition ledger ---------- */
.edition-intro{ max-width:var(--measure); margin-bottom:2.8rem; }
.ledger{
  display:grid;
  grid-template-columns:repeat(20, minmax(0,1fr));
  gap:6px;
  max-width:56rem;
  margin-bottom:1.4rem;
}
.ledger .slot{
  aspect-ratio:1;
  border:1px solid rgba(201,209,219,0.28);
  border-radius:1px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:300; font-size:0.58rem;
  letter-spacing:0.02em;
  color:var(--silver-dim);
  transition:transform .2s ease, border-color .2s ease;
}
.ledger .slot.taken{
  background:linear-gradient(150deg, var(--burgundy-bright), var(--burgundy) 70%);
  border-color:transparent;
  color:rgba(238,242,247,0.85);
}
.ledger .slot:hover{ transform:translateY(-2px); border-color:var(--steel-2); }
.ledger .slot.taken:hover{ border-color:var(--burgundy-bright); }
.ledger-caption{
  font-size:0.95rem; color:var(--silver-dim); max-width:64ch;
}
.ledger-caption .mono{ color:var(--silver-hi); }

/* ---------- waitlist ---------- */
.waitlist{ padding-bottom:clamp(5rem, 10vw, 8rem); }
.wait-intro{ max-width:var(--measure); margin-bottom:2.6rem; }
.wait-form{
  max-width:44rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem 2.2rem;
}
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field-wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--serif-sc); font-size:0.9rem; letter-spacing:0.1em;
  color:var(--silver-dim);
}
.field .opt{ font-family:var(--mono); font-weight:300; font-size:0.62rem; letter-spacing:0.12em; color:rgba(139,148,163,0.7); }
.field input, .field textarea{
  font-family:var(--mono); font-weight:300; font-size:0.92rem;
  letter-spacing:0.03em;
  color:var(--silver-hi);
  background:rgba(150,161,176,0.05);
  border:none;
  border-bottom:1px solid rgba(201,209,219,0.35);
  border-radius:2px 2px 0 0;
  padding:0.75rem 0.8rem;
  transition:border-color .25s ease, background .25s ease;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(139,148,163,0.55); font-style:normal; }
.field input:focus, .field textarea:focus{
  outline:none;
  border-bottom-color:var(--burgundy-bright);
  background:rgba(150,161,176,0.09);
}
.form-error{
  grid-column:1 / -1;
  font-family:var(--mono); font-weight:300; font-size:0.78rem;
  letter-spacing:0.05em; color:var(--burgundy-bright);
}
.btn-submit{ justify-self:start; grid-column:1 / -1; font-size:1rem; }
.form-fine{
  grid-column:1 / -1;
  font-size:0.9rem; font-style:italic; color:var(--silver-dim); max-width:56ch;
}
.wait-confirm{
  max-width:44rem;
  border:1px solid var(--hairline);
  border-left:2px solid var(--burgundy-bright);
  border-radius:2px;
  padding:2.2rem 2.4rem;
  background:rgba(150,161,176,0.04);
}
.wait-confirm .confirm-mark{ width:2.6rem; height:2.6rem; color:var(--steel-2); margin-bottom:1rem; }
.wait-confirm h3{ font-size:1.3rem; margin-bottom:0.7rem; }
.wait-confirm p{ color:var(--silver); max-width:56ch; }

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--hairline);
  padding:3.5rem var(--pad) 2.5rem;
  background:var(--navy-deep);
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2.5rem;
  max-width:70rem;
  margin-bottom:3rem;
}
.foot-mark{ font-family:var(--serif-sc); font-size:1.05rem; letter-spacing:0.14em; color:var(--silver-hi); margin-bottom:0.8rem; }
.foot-label{
  font-family:var(--mono); font-weight:300; font-size:0.66rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--burgundy-bright);
  margin-bottom:0.8rem;
}
.site-foot p{ font-size:0.95rem; color:var(--silver-dim); line-height:1.8; }
.foot-line{
  font-family:var(--mono); font-weight:300; font-size:0.68rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(139,148,163,0.6);
  border-top:1px solid var(--hairline-soft);
  padding-top:1.6rem;
  text-align:center;
}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- guide page ---------- */
.guide-main{ padding:7rem var(--pad) 4rem; max-width:62rem; margin-inline:auto; }
.guide-main > section{ padding:2.8rem 0; border-bottom:1px solid var(--hairline-soft); }
.guide-main h1{ font-size:clamp(2.1rem, 4vw, 3.1rem); margin-bottom:1rem; }
.guide-main h2{ font-size:1.5rem; margin-bottom:1.1rem; }
.guide-main p{ max-width:var(--measure); margin-bottom:1rem; }
.guide-main ol, .guide-main ul{ max-width:var(--measure); padding-left:1.4rem; }
.guide-main li{ margin-bottom:0.7rem; }
.guide-main li::marker{ font-family:var(--mono); font-weight:300; font-size:0.85em; color:var(--burgundy-bright); }
.back-link{
  font-family:var(--mono); font-weight:300; font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none; color:var(--silver-dim);
}
.back-link:hover{ color:var(--silver-hi); }

.swatches{ display:flex; flex-wrap:wrap; gap:1.1rem; margin:1.4rem 0; }
.swatch{ width:8.4rem; }
.swatch .chip{
  height:3.4rem; border-radius:2px; border:1px solid var(--hairline);
  margin-bottom:0.5rem;
}
.swatch p{ font-family:var(--mono); font-weight:300; font-size:0.68rem; letter-spacing:0.08em; color:var(--silver-dim); line-height:1.7; margin:0; }
.swatch p b{ color:var(--silver-hi); font-weight:400; }

.type-specimen{ border:1px solid var(--hairline); border-radius:2px; padding:1.6rem 1.8rem; margin:1.2rem 0; }
.type-specimen .ts-disp{ font-family:var(--serif-disp); font-size:1.8rem; color:var(--silver-hi); }
.type-specimen .ts-sc{ font-family:var(--serif-sc); font-size:1.1rem; letter-spacing:0.1em; }
.type-specimen .ts-body{ font-family:var(--serif-body); }
.type-specimen .ts-mono{ font-family:var(--mono); font-weight:300; font-size:0.85rem; letter-spacing:0.06em; }
.type-specimen p{ margin-bottom:0.5rem; }
.type-specimen .ts-note{ font-family:var(--mono); font-weight:300; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--burgundy-bright); margin-bottom:0.9rem; }

pre{
  background:var(--navy-deep);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:1.2rem 1.4rem;
  overflow-x:auto;
  margin:1.2rem 0;
  max-width:100%;
}
code{
  font-family:var(--mono); font-weight:300; font-size:0.8rem;
  letter-spacing:0.01em; line-height:1.7;
  color:var(--steel-3);
}
p code, li code{
  background:rgba(150,161,176,0.1);
  padding:0.1em 0.4em; border-radius:2px;
  font-size:0.82em; color:var(--silver-hi);
}
.pass-list dt{
  font-family:var(--serif-sc); letter-spacing:0.08em; color:var(--silver-hi);
  margin-top:1.1rem;
}
.pass-list dd{ color:var(--silver); max-width:var(--measure); margin-top:0.3rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr; padding-top:7rem; gap:2.5rem; }
  .hero-fig{ order:2; }
  #esc-svg{ max-height:none; max-width:46rem; margin-inline:auto; }
}

@media (max-width: 760px){
  .site-head{ padding:1.1rem 1.25rem; }
  .site-nav{ gap:1.1rem; }
  .site-nav a:not(.nav-cta){ display:none; }
  .fin-grid{ grid-template-columns:1fr; }
  .ledger{ grid-template-columns:repeat(10, minmax(0,1fr)); }
  .wait-form{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:2rem; }
  .spec-row{ grid-template-columns:1fr; gap:0.2rem; padding:0.85rem 0.15rem; }
  .small-seconds{ margin-left:0; }
  /* hide long side annotations at phone width; keep caption */
  #esc-svg .anno .sub{ display:none; }
  #esc-svg text{ font-size:16px; }
  #esc-svg .fig-cap text{ font-size:14.5px; }
  /* comfortable thumb targets for the tempo control */
  .tempo-btn{ padding:0.6rem 1rem; font-size:0.74rem; }
  .tempo{ flex-wrap:wrap; row-gap:0.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .ss-hand{ animation:none; }
  .fin-blackpolish .sheen{ transition:none; transform:translateX(0); opacity:0.25; }
  .btn, .ledger .slot{ transition:none; }
}