/* Milestone Gazette — ink on newsprint. */
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Oswald";src:url("/fonts/oswald.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url("/fonts/oldstandard.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url("/fonts/oldstandard-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f6f0e3; --card:#fcf9f2; --ink:#1d1a16; --ink-2:#4a433a; --muted:#6f6556;
  --rule:rgba(29,26,22,.16); --ox:#8e2a20; --gold:#a8843f; --pine:#1f5a3c; --navy:#26365a;
  --acc:var(--ox);
  --news:"Playfair Display",Georgia,"Times New Roman",serif;
  --label:"Oswald","Arial Narrow",Arial,sans-serif;
  --body:"Old Standard TT",Georgia,serif;
  --max:1200px; --gut:clamp(16px,4vw,40px); --gap:clamp(14px,2.2vw,28px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;
  background-image:radial-gradient(130% 70% at 50% 0,#fbf7ee 0,rgba(251,247,238,0) 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{flex:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:9;background:var(--ink);color:var(--paper);padding:8px 12px;font:500 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── masthead ─────────────────────────────── */
.mast{padding-top:clamp(18px,3.4vw,40px)}
.ear{display:flex;justify-content:space-between;gap:12px;border-top:5px solid var(--ink);border-bottom:1px solid var(--ink);
  margin-top:3px;padding:7px 2px 6px;font:500 clamp(9.5px,1.1vw,11.5px)/1 var(--label);letter-spacing:.24em;text-transform:uppercase;position:relative}
.ear::before{content:"";position:absolute;left:0;right:0;top:-10px;border-top:1px solid var(--ink)}
.ear span{white-space:nowrap}
.wm{margin:clamp(14px,2.6vw,30px) 0 clamp(10px,2vw,22px);text-align:center;font:900 clamp(34px,11vw,124px)/.95 var(--news);letter-spacing:-.025em;white-space:nowrap}
.wm a{text-decoration:none}
.wm em{font-style:italic;font-weight:700;color:var(--ox)}
.mast--small .wm{font-size:clamp(30px,8vw,60px);margin:clamp(10px,2vw,18px) 0 clamp(8px,1.4vw,14px)}
.mast--small .ear{display:none}
.mast--small .wrap{border-top:5px solid var(--ink);position:relative}
.mast--small .wrap::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--ink)}

.years{border-top:1px solid var(--ink);border-bottom:4px double var(--ink);padding:9px 0 8px}
.years ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(6px,2.2vw,30px)}
.years a{display:block;padding:3px 4px;font:500 clamp(13px,1.4vw,15px)/1.2 var(--label);letter-spacing:.14em;text-decoration:none;color:var(--ink-2);border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s}
.years a:hover{color:var(--ink);border-color:var(--gold)}
.years a[aria-current]{color:var(--ox);border-color:var(--ox)}

/* ── sections ─────────────────────────────── */
.grp{margin-top:clamp(30px,5vw,56px)}
.grp--birthday{--acc:var(--ox)} .grp--christmas,.tile--christmas{--acc:var(--pine)} .grp--reunion{--acc:var(--navy)}
.head{display:flex;align-items:center;gap:clamp(12px,2vw,22px);margin:0 0 clamp(14px,2.2vw,24px);font:700 clamp(25px,3.6vw,38px)/1 var(--news);letter-spacing:-.015em}
.head::before,.head::after{content:"";flex:1;height:5px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);opacity:.55}
.head a,.head span.t{display:inline-flex;align-items:baseline;gap:.28em;text-decoration:none;white-space:nowrap}
.head em{font-style:italic;font-weight:700;color:var(--acc)}
.head .go{align-self:center;width:.62em;height:.62em;margin-left:.1em;color:var(--gold);transition:transform .2s}
.head a:hover .go{transform:translateX(3px)}

/* ── tiles: uniform, centred ──────────────── */
.grid{--cols:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);list-style:none;margin:0 auto;padding:0}
.grid>li{flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));min-width:0;display:flex}
.tile{min-width:0}
@media (min-width:640px){.grid{--cols:4}.grid--six{--cols:3;max-width:calc(75% - var(--gap)/4)}}
.tile{position:relative;flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(29,26,22,.04),0 14px 28px -22px rgba(60,40,15,.55);transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(29,26,22,.04),0 22px 36px -24px rgba(60,40,15,.7)}
.ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#3b2a1f}
.ph img{width:100%;height:100%;object-fit:cover;color:transparent}
.cap{display:flex;flex-direction:column;gap:5px;padding:clamp(9px,1.2vw,13px) clamp(10px,1.3vw,14px) clamp(10px,1.3vw,13px);border-top:3px solid var(--acc)}
.cap h3{margin:0;font:700 clamp(14.5px,1.45vw,17px)/1.2 var(--news);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap h3 a{text-decoration:none}
.cap h3 a::after{content:"";position:absolute;inset:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.price{font:500 clamp(14px,1.35vw,16px)/1 var(--label);letter-spacing:.04em;color:var(--ink)}
.soon{display:inline-flex;align-items:center;gap:6px;font:500 clamp(9px,.85vw,10.5px)/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.soon::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.buy{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 9px;border:1px solid var(--ink);
  font:500 10.5px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:var(--card);transition:background .15s,color .15s}
.buy:hover{background:var(--ink);color:var(--paper)}

/* ── year page ────────────────────────────── */
.yr{text-align:center;margin:clamp(26px,4.4vw,48px) 0 clamp(22px,3.6vw,40px)}
.yr p{margin:0;font:500 clamp(11px,1.2vw,13px)/1 var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--ox)}
.yr h1{margin:.14em 0 0;font:900 clamp(84px,21vw,168px)/.86 var(--news);letter-spacing:-.035em}
.yr h1 em{display:block;font:italic 700 clamp(22px,3.4vw,34px)/1.1 var(--news);letter-spacing:0;color:var(--ink-2);margin-bottom:.2em}
.yr .bar{width:min(240px,50%);height:5px;margin:clamp(22px,3vw,30px) auto 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}

/* ── text pages ───────────────────────────── */
.doc{width:min(100% - 2*var(--gut),640px);margin:clamp(28px,5vw,56px) auto 0}
.doc h1{margin:0 0 6px;font:900 clamp(34px,6vw,52px)/1.02 var(--news);letter-spacing:-.02em;text-align:center}
.doc h1 em{font-style:italic;font-weight:700;color:var(--ox)}
.doc .upd{margin:0 0 clamp(18px,3vw,28px);text-align:center;font:500 11px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.doc h2{margin:26px 0 6px;font:500 12.5px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ox)}
.doc p{margin:0;color:var(--ink-2)}
.doc p+p{margin-top:8px}
.doc a{color:var(--ox)}
.doc--center{text-align:center}
.big{font:900 clamp(96px,24vw,180px)/.85 var(--news);letter-spacing:-.04em;margin:0;color:var(--ink)}
.back{display:inline-block;margin-top:18px;font:500 12px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:4px}

/* ── footer ───────────────────────────────── */
.foot{margin-top:clamp(44px,7vw,80px);padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.foot .wrap{border-top:4px double var(--ink);padding-top:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  font:500 11px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.foot a{text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-color:var(--gold)}
.foot .mail{text-transform:none;letter-spacing:.06em;font-size:12.5px}

@media (max-width:639px){
  .ear span:nth-child(3){display:none}
  .head{gap:10px}
  .tile:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{body{background:#fff}.years,.foot,.skip{display:none}}