/* Watch & Brew — one stylesheet, no framework.
   Bump CSS_VERSION in build.py whenever this file changes. */

:root{
  --paper:      #faf7f2;
  --raise:      #ffffff;
  --ink:        #1d1a17;
  --ink-soft:   #5b534b;
  --muted:      #8a8076;
  --rule:       #e4dbcf;
  --accent:     #8a3a44;   /* oxblood, after the strap */
  --accent-dk:  #6f2c35;
  --shadow:     0 1px 2px rgba(30,25,20,.05), 0 12px 32px rgba(30,25,20,.07);
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#171513; --raise:#1f1c19; --ink:#f0eae1; --ink-soft:#c2b8ab;
    --muted:#8e8378; --rule:#332e29; --accent:#d98d97; --accent-dk:#e8aab2;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,picture{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.01em}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:6px; z-index:9}

/* ── chrome ───────────────────────────────────────── */
header.site, footer.site{
  max-width:74rem; margin:0 auto; padding:1.6rem clamp(1.1rem,4vw,2.5rem);
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.wordmark{
  font:600 1.35rem/1 var(--serif); text-decoration:none; letter-spacing:-.015em;
}
.wordmark .amp{color:var(--accent); font-style:italic; padding:0 .04em}
header.site nav{display:flex; gap:1.4rem; font-size:.94rem}
header.site nav a{color:var(--ink-soft); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent}
header.site nav a:hover{color:var(--ink); border-color:var(--accent)}
footer.site{
  border-top:1px solid var(--rule); margin-top:clamp(4rem,10vw,7rem);
  padding-top:1.5rem; padding-bottom:3rem; color:var(--muted); font-size:.86rem;
}
footer.site a{color:var(--muted)}

main{max-width:74rem; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)}

/* ── shared type ──────────────────────────────────── */
.lede{max-width:34rem; padding:clamp(1.5rem,5vw,3.5rem) 0 clamp(2rem,5vw,3rem)}
.lede h1{font-size:clamp(2rem,5.5vw,3rem); margin:0 0 .8rem}
.lede p{color:var(--ink-soft); font-size:1.06rem; margin:0}
.eyebrow{
  font:600 .72rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .55rem;
}
.prose{max-width:36rem; font-family:var(--serif); font-size:1.14rem; line-height:1.72; color:var(--ink)}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:1.4rem; margin:2.2em 0 .6em}
.prose a{color:var(--accent-dk); text-underline-offset:3px}
.prose strong{font-weight:650}
.prose blockquote{margin:1.6em 0; padding-left:1.2rem; border-left:2px solid var(--accent); color:var(--ink-soft); font-style:italic}

/* ── collection index ─────────────────────────────── */
.cards{
  display:grid; gap:clamp(1.5rem,4vw,2.6rem); padding-bottom:2rem;
  /* A capped max stops a lone card ballooning to the full 74rem — the
     collection starts at one watch and should not look broken until it is six. */
  grid-template-columns:repeat(auto-fill,minmax(19rem,24rem)); justify-content:start;
}
.card{
  text-decoration:none; background:var(--raise); border:1px solid var(--rule);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 4px 10px rgba(30,25,20,.07), 0 20px 44px rgba(30,25,20,.1)}
.card img{aspect-ratio:3/2; object-fit:cover; width:100%}  /* suits landscape watch shots */
.card-text{padding:1.25rem 1.35rem 1.5rem}
.card-text h2{font-size:1.28rem; margin:0 0 .45rem}
.card-text p:last-child{margin:0; color:var(--ink-soft); font-size:.95rem}

/* ── a watch ──────────────────────────────────────── */
.watch-head{padding:clamp(1.5rem,5vw,3rem) 0 1.6rem; max-width:40rem}
.watch-head h1{font-size:clamp(1.9rem,5vw,2.7rem); margin:0 0 .7rem}
.status{
  display:inline-block; margin:0; font:600 .74rem/1 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; padding:.45rem .8rem;
  border-radius:999px; border:1px solid var(--rule); color:var(--ink-soft);
}
.status-for-sale{border-color:var(--accent); color:var(--accent-dk)}
.status-sold{opacity:.6; text-decoration:line-through}

.hero{margin:0 0 clamp(2rem,5vw,3rem)}
.hero img{width:100%; border-radius:14px; box-shadow:var(--shadow)}

.specs{margin:clamp(2.5rem,6vw,4rem) 0}
.specs h2{font-size:1.3rem; margin:0 0 1.2rem}
.specs dl{
  display:grid; margin:0; border-top:1px solid var(--rule);
  /* Two columns at most, with a real gap between them. Four columns across the
     full width made a value and the NEXT label read as one phrase. */
  max-width:54rem; grid-template-columns:repeat(auto-fit,minmax(23rem,1fr));
  column-gap:3.5rem; row-gap:0;
}
.spec{display:flex; justify-content:space-between; gap:1rem; padding:.8rem .2rem; border-bottom:1px solid var(--rule)}
.spec dt{color:var(--muted); font-size:.9rem}
.spec dd{margin:0; text-align:right; font-size:.95rem}
.spec.todo dd{color:var(--muted); font-style:italic}  /* not-yet-known reads quiet, not alarming */

.gallery{display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.gallery figure{margin:0}
.gallery img{width:100%; border-radius:10px}
.gallery figcaption{margin-top:.6rem; font-size:.88rem; color:var(--muted); font-family:var(--serif); font-style:italic}

.timeline{margin:clamp(2.5rem,6vw,4rem) 0}
.timeline h2{font-size:1.3rem; margin:0 0 1.2rem}
.timeline ol{list-style:none; margin:0; padding:0 0 0 1.4rem; border-left:2px solid var(--rule)}
.timeline li{position:relative; padding:0 0 1.5rem .4rem}
.timeline li::before{
  content:""; position:absolute; left:calc(-1.4rem - 5px); top:.45rem;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
}
.timeline time{display:block; font:600 .76rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem}
.timeline p{margin:0; color:var(--ink-soft)}

.related{margin:clamp(2.5rem,6vw,4rem) 0}
.related h2{font-size:1.3rem; margin:0 0 1rem}
.related ul{list-style:none; margin:0; padding:0}
.related li{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--rule)}
.related a{color:var(--accent-dk); font-family:var(--serif); font-size:1.1rem}
.related time{color:var(--muted); font-size:.85rem; white-space:nowrap}

/* ── writing ──────────────────────────────────────── */
.post{max-width:36rem; margin:0 auto}
.post-head{padding:clamp(1.5rem,5vw,3rem) 0 1.5rem}
.post-head time{font:600 .76rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.post-head h1{font-size:clamp(1.9rem,5vw,2.6rem); margin:.7rem 0 .6rem}
.standfirst{margin:0; color:var(--ink-soft); font-family:var(--serif); font-size:1.15rem; font-style:italic}
.chips{margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.chips span{color:var(--muted); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-right:.3rem}
.chip{
  text-decoration:none; font-size:.9rem; padding:.4rem .85rem; border-radius:999px;
  border:1px solid var(--rule); background:var(--raise); color:var(--ink-soft);
}
.chip:hover{border-color:var(--accent); color:var(--accent-dk)}

.postlist{list-style:none; margin:0; padding:0; max-width:38rem}
.postlist li{padding:1.4rem 0; border-bottom:1px solid var(--rule)}
.postlist time{display:block; font:600 .76rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem}
.postlist a{font-family:var(--serif); font-size:1.3rem; color:var(--ink); text-decoration:none}
.postlist a:hover{color:var(--accent-dk)}
.postlist p{margin:.35rem 0 0; color:var(--ink-soft); font-size:.97rem}