*,*::before,*::after{box-sizing:border-box}
:root{
 --bg:#fbfbfa; --surface:#fff; --fg:#14161a; --muted:#6a7079; --faint:#9aa0a8;
 --rule:#e4e5e7; --accent:#d8232a; --accent-ink:#a8161c; --shadow:0 1px 2px rgba(16,18,22,.05),0 8px 24px rgba(16,18,22,.06);
 --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
 --maxw:1220px; --measure:40rem;
}
@media(prefers-color-scheme:dark){:root{
 --bg:#0e1013; --surface:#16191e; --fg:#eceef1; --muted:#98a0aa; --faint:#727a85;
 --rule:#252a31; --accent:#ff4d55; --accent-ink:#ff6b72; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
 backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--rule)}
.masthead .bar{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);height:62px}
.wordmark{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.035em;
 white-space:nowrap;display:flex;align-items:center;gap:.42rem}
.wordmark .mark{width:.62rem;height:1.15rem;background:var(--accent);border-radius:1px;
 transform:skewX(-14deg);display:inline-block}
nav.primary{display:flex;gap:clamp(.9rem,2vw,1.6rem);overflow-x:auto;scrollbar-width:none;margin-left:auto}
nav.primary::-webkit-scrollbar{display:none}
nav.primary a{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.1em;
 text-transform:uppercase;color:var(--muted);white-space:nowrap;padding:.35rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav.primary a:hover{color:var(--fg)}
nav.primary a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{margin:clamp(1.25rem,3vw,2.25rem) 0 clamp(1.5rem,4vw,3rem)}
.hero a{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
@media(max-width:820px){.hero a{grid-template-columns:1fr;gap:1.1rem}}
.hero .shot{position:relative;overflow:hidden;border-radius:10px;background:var(--rule);box-shadow:var(--shadow)}
.hero .shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hero a:hover .shot img{transform:scale(1.03)}
.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
 font-size:clamp(1.9rem,4.2vw,3.1rem);margin:.5rem 0 .7rem}
.hero p{color:var(--muted);font-size:1.02rem;margin:0 0 .9rem;max-width:34rem}
.kicker{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
 text-transform:uppercase;color:var(--accent)}
.byline{color:var(--faint);font-size:.8rem}

/* ---------- section heading ---------- */
.strip{display:flex;align-items:baseline;gap:1rem;margin:clamp(1.5rem,4vw,2.75rem) 0 1.1rem}
.strip h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.35rem;margin:0}
.strip .rule{flex:1;height:1px;background:var(--rule)}
.strip .count{color:var(--faint);font-size:.8rem;font-variant-numeric:tabular-nums}

/* ---------- masonry ---------- */
.masonry{columns:3;column-gap:clamp(1rem,2vw,1.6rem)}
@media(max-width:1000px){.masonry{columns:2}}
@media(max-width:620px){.masonry{columns:1}}
.card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
 margin:0 0 clamp(1rem,2vw,1.6rem);background:var(--surface);border:1px solid var(--rule);
 border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));
 box-shadow:0 2px 4px rgba(16,18,22,.06),0 16px 36px rgba(16,18,22,.10)}
.card .shot{overflow:hidden;background:var(--rule)}
.card .shot img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .shot img{transform:scale(1.035)}
.card .body{padding:.95rem 1.05rem 1.1rem}
.card h3{font-family:var(--display);font-weight:700;letter-spacing:-.018em;line-height:1.22;
 font-size:1.06rem;margin:.4rem 0 .35rem}
.card.lg h3{font-size:1.32rem}
.card p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0 0 .55rem}
.card .byline{display:block;margin-top:.15rem}
.card.text-only .body{padding-top:1.15rem}
.card.text-only{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface))}
.card.illo .shot{background:#f3efe6}

/* ---------- article ---------- */
.article{max-width:var(--measure);margin:0 auto;padding:clamp(1.5rem,4vw,2.5rem) 0 0}
.article .lede-shot{max-width:none;width:100%;margin:0 0 1.75rem}
.article .lede-shot img{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);width:100%}
.article .lede-shot figcaption{color:var(--faint);font-size:.76rem;letter-spacing:.02em;margin:.55rem 0 0}
.article h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08;
 font-size:clamp(1.85rem,4vw,2.75rem);margin:.55rem 0 .75rem}
.article .meta{color:var(--faint);font-size:.85rem;margin:0 0 2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.prose{font-family:var(--serif);font-size:1.12rem;line-height:1.72}
.prose p{margin:0 0 1.3rem}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose h2,.prose h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:2.2rem 0 .7rem}
.prose h2{font-size:1.5rem}.prose h3{font-size:1.22rem}
.prose img{border-radius:8px;margin:1.9rem auto}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:8px;margin:1.9rem 0}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.35rem}
.prose li{margin:.35rem 0}
.prose blockquote{margin:1.9rem 0;padding:.15rem 0 .15rem 1.15rem;border-left:3px solid var(--accent);
 font-style:italic;color:var(--muted)}
.tags{margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.45rem}
.tags a,.tags span{font-size:.75rem;letter-spacing:.03em;color:var(--muted);background:var(--bg);
 border:1px solid var(--rule);border-radius:100px;padding:.28rem .7rem}
.backlink{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:600;
 font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.backlink:hover{color:var(--accent)}
.more{margin:3.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule)}

/* ---------- footer ---------- */
footer.site{margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--rule);background:var(--surface)}
footer.site .inner{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;padding:2.25rem 0}
footer.site p{margin:0;color:var(--muted);font-size:.85rem;max-width:34rem}
footer.site nav{display:flex;flex-wrap:wrap;gap:.9rem}
footer.site nav a{font-size:.8rem;color:var(--muted)}
footer.site nav a:hover{color:var(--accent)}
.notfound{text-align:center;padding:clamp(3rem,10vw,7rem) 0}
.notfound h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .6rem}