:root{--bg:#F2EDE3;--surface-1:#EAE4D8;--surface-2:#DDD7CA;--text:#1A1510;--text-2:#4A4238;--text-muted:#8A7E6E;--text-subtle:#B0A898;--accent:#C9953A;--accent-lt:#E3B870;--accent-dim:rgba(201,149,58,.12);--border:rgba(26,21,16,.1);--border-acc:rgba(201,149,58,.4);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',-apple-system,sans-serif;--mono:'IBM Plex Mono','Courier New',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;z-index:9999}
/* nav: see /assets/nav.css, shared by every page on the site */
/* index */
.archive-index,.yearpage,.detail{padding-top:var(--nav-h)}
.archive-header{padding:56px 80px 40px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.archive-h1{font-family:var(--serif);font-size:clamp(40px,6vw,72px);font-weight:300;line-height:.95}
.archive-h1 em{font-style:italic;color:var(--accent)}
.archive-count{font-family:var(--serif);font-size:64px;font-weight:300;line-height:1;color:var(--accent);text-align:right}
.archive-count-label{font-family:var(--mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;text-align:right}
.idx-year{padding:44px 80px;border-bottom:1px solid var(--border);scroll-margin-top:180px}
.idx-year-head{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
.idx-year-head h2{font-family:var(--serif);font-size:40px;font-weight:300;color:var(--text)}
.idx-year-head a:hover h2{color:var(--accent)}
.idx-year-head span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-subtle)}
.idx-empty{padding:80px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--text-subtle)}
/* grid + cards */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:3px}
.wcard{background:var(--surface-1);border:1px solid var(--border);overflow:hidden;transition:border-color .2s}
.wcard:hover{border-color:var(--border-acc)}
.wcard-img{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.wcard-img img{width:100%;height:100%;object-fit:contain}
.card-empty{color:var(--text-subtle);opacity:.4}
.wcard-body{padding:14px 16px 16px}
.wcard-name{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.1;margin-bottom:4px}
.wcard-ref{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
/* year page */
.year-head{display:flex;align-items:baseline;gap:20px;padding:48px 80px 8px}
.year-head h1{font-family:var(--serif);font-size:72px;font-weight:300;line-height:1}
.year-count{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-subtle)}
.yfilter{display:flex;align-items:center;gap:8px;padding:8px 80px 24px;flex-wrap:wrap}
.yfilter-label{font-family:var(--mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-right:6px}
.ychip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:2px;cursor:pointer;transition:all .15s}
.ychip-n{margin-left:7px;opacity:.55;font-size:9px}
/* Sticky rail + family filters. 190 watches across 40 years is roughly 24
   screens, so the archive index needs a way in other than scrolling. */
.arch-nav{position:sticky;top:var(--nav-h);z-index:60;background:#F2EDE3;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 80px 14px}
.arch-rail{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:10px}
.arch-rail::-webkit-scrollbar{display:none}
.arch-year{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--text-subtle);padding:4px 9px;border-radius:2px;transition:color .15s,background .15s}
.arch-year:hover{color:var(--text);background:var(--surface-2)}
.arch-year.active{color:var(--accent);background:var(--accent-dim)}
.arch-year.empty{opacity:.25;pointer-events:none}
.arch-filters{display:flex;flex-wrap:wrap;gap:6px}
.arch-line{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border-acc)}
.arch-line[hidden]{display:none}
.ychip.active{color:var(--accent);border-color:var(--border-acc);background:var(--accent-dim)}
.yearpage .wgrid{padding:0 80px 56px}
.year-more{display:flex;flex-wrap:wrap;gap:40px 72px;padding:0 80px 80px;border-top:1px solid var(--border);padding-top:36px;margin:0 0 0}
.ym-title{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.ym-cats{display:flex;flex-wrap:wrap;gap:16px}
.ym-cat{display:flex;flex-direction:column;gap:8px;width:110px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;line-height:1.4;color:var(--text-muted)}
.ym-cat img{width:110px;height:143px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.ym-cat:hover{color:var(--accent)}
.ym-guides{display:flex;flex-wrap:wrap;gap:8px}
.ym-chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:2px;transition:all .15s}
.ym-chip:hover{color:var(--accent);border-color:var(--border-acc)}
/* detail */
.detail{max-width:1200px;margin:0 auto;padding-left:80px;padding-right:80px;padding-bottom:80px}
.detail-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-subtle);padding:28px 0 24px;display:flex;gap:10px;align-items:center}
.detail-crumb a{color:var(--text-muted)}.detail-crumb a:hover{color:var(--accent)}.detail-crumb .cur{color:var(--text-2)}
.detail-title{font-family:var(--serif);font-size:clamp(34px,5vw,56px);font-weight:300;line-height:1.02;letter-spacing:-.01em;margin-bottom:36px}
.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gallery-main{aspect-ratio:1/1;background:var(--surface-1);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:8px;margin-top:8px}
.ph-thumb{width:64px;aspect-ratio:1/1;border:1px solid var(--border);background:var(--surface-1);padding:0;cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .2s,border-color .2s}
.ph-thumb.active,.ph-thumb:hover{opacity:1;border-color:var(--border-acc)}
.ph-thumb img{width:100%;height:100%;object-fit:contain}
.gallery-empty{aspect-ratio:1/1;background:var(--surface-1);border:1px dashed var(--border-acc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-subtle);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.spec-table{border:1px solid var(--border);border-radius:2px;overflow:hidden}
.spec-row{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--border)}
.spec-row:last-child{border-bottom:none}
.spec-key{padding:14px 18px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-1);border-right:1px solid var(--border);display:flex;align-items:center}
.spec-val{padding:14px 18px;font-size:14px;color:var(--text-2);display:flex;align-items:center}
.spec-link{color:var(--accent);border-bottom:1px solid var(--border-acc)}
.spec-note{color:var(--text-muted);font-size:.92em}
.detail-desc{margin-top:28px;border-left:2px solid var(--border-acc);padding-left:20px}
.detail-desc-label{font-family:var(--mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.detail-desc p{font-size:15px;line-height:1.8;color:var(--text-2)}
.detail-nav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;border-top:1px solid var(--border);padding-top:24px}
.dn{display:flex;flex-direction:column;gap:4px;max-width:45%}
.dn.next{text-align:right;margin-left:auto}
.dn span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.dn em{font-family:var(--serif);font-size:18px;font-style:normal;color:var(--text);transition:color .2s}
.dn:hover em{color:var(--accent)}
/* footer */
.site-footer{background:var(--surface-1);border-top:1px solid var(--border);padding:64px 80px 40px}
.site-footer .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:64px;padding-bottom:64px;border-bottom:1px solid var(--border)}
.site-footer .brand-name{font-family:var(--serif);font-size:32px;font-weight:300;line-height:1;margin-bottom:4px}
.site-footer .brand-year{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin-bottom:20px}
.site-footer .footer-brand p{font-size:13px;color:var(--text-muted);line-height:1.7;max-width:280px}
.site-footer .footer-col-title{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.site-footer .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.site-footer .footer-col ul li a{font-size:13px;color:var(--text-muted)}
.site-footer .footer-col ul li a:hover{color:var(--text)}
.site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:32px}
.site-footer .footer-legal{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-subtle)}
.site-footer .footer-disclaimer{font-size:11px;color:var(--text-subtle);max-width:400px;text-align:right;line-height:1.6}
/* mobile nav */
@media(max-width:900px){
  /* the nav's own responsive rules live in /assets/nav.css */
  .detail-grid{grid-template-columns:1fr;gap:28px}
  .archive-header{padding:32px 24px 28px;grid-template-columns:1fr;gap:20px}
  .archive-count,.archive-count-label{text-align:left}
  .idx-year,.year-head,.yfilter,.yearpage .wgrid,.year-more{padding-left:24px;padding-right:24px}
  .arch-nav{padding:10px 24px 12px}
  /* wrapping the family pills ate a quarter of a phone screen, so they
     scroll sideways like the year rail above them */
  .arch-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .arch-filters::-webkit-scrollbar{display:none}
  .ychip{flex:0 0 auto}
  .idx-year{scroll-margin-top:140px}
  .detail{padding-left:24px;padding-right:24px}
  .wgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .site-footer{padding:40px 24px 32px}
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:40px}
  .site-footer .footer-bottom{flex-direction:column;gap:12px;align-items:flex-start}
  .site-footer .footer-disclaimer{text-align:left}
}
.mline{padding-top:var(--nav-h);padding-left:80px;padding-right:80px;padding-bottom:80px}
.ml-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding:8px 0 32px;border-bottom:1px solid var(--border)}
.ml-h1{font-family:var(--serif);font-size:clamp(44px,6vw,72px);font-weight:300;line-height:.95}
.ml-h1 em{font-style:italic;color:var(--accent)}
.ml-facts{display:flex;gap:40px}
.ml-facts b{display:block;font-family:var(--serif);font-size:36px;font-weight:300;color:var(--accent);line-height:1}
.ml-facts span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}
.ml-intro{max-width:720px;padding-top:32px}
.ml-intro p{font-size:16px;line-height:1.8;color:var(--text-2);margin-bottom:14px}
.ml-links{display:flex;flex-wrap:wrap;gap:28px 64px;padding:32px 0 8px}
.ml-n{margin-left:8px;opacity:.55}
.ml-title{font-family:var(--serif);font-size:36px;font-weight:300;margin:48px 0 8px}
.ml-decade{padding:20px 0 8px}
.ml-decade-h{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ml-decade-h span{margin-left:10px;color:var(--text-subtle)}
.ml-cats{gap:24px 16px;padding-top:16px}
.ml-cats .ym-cat em{font-style:normal;color:var(--text-subtle)}
.ml-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:3px;padding:32px 0 0}
.ml-index a{display:block;background:var(--surface-1);border:1px solid var(--border)}
.ml-index a:hover .ml-index-name{color:var(--accent)}
.ml-index img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface-2);display:block}
.ml-index img.ml-cover{padding:14px}
.ml-index-body{padding:14px 16px 16px}
.ml-index-name{font-family:var(--serif);font-size:26px;font-weight:300;transition:color .15s}
.ml-index-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
@media(max-width:900px){
  .mline{padding-left:24px;padding-right:24px;padding-bottom:56px}
  .ml-facts{gap:28px}
  .ml-facts b{font-size:28px}
  .ml-title{font-size:30px;margin-top:40px}
  .ml-index{grid-template-columns:repeat(2,1fr)}
  .ml-index-name{font-size:21px}
}