:root{
  --ivory:#f4efe6; --bone:#ece4d4; --ink:#1d1a16; --muted:#6b6255;
  --terracotta:#c4572e; --cobalt:#1f3d8f; --lime:#b5d33d; --magenta:#c72c6c;
  --line:#1d1a16; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* ---------- top bar ---------- */
.topbar{border-bottom:3px solid var(--ink);background:var(--ivory);position:sticky;top:0;z-index:50}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:6px}
.brand{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.5px}
.brand a{color:var(--ink);text-decoration:none}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px}
.nav a:hover{border-bottom-color:var(--terracotta)}
/* ---------- hero ---------- */
.hero{border-bottom:3px solid var(--ink);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.5fr 1fr;min-height:420px}
.hero-copy{padding:56px 40px 48px;display:flex;flex-direction:column;justify-content:center}
.hero-kicker{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--terracotta);margin-bottom:14px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,5vw,56px);line-height:1.04;font-weight:700;margin-bottom:18px}
.hero p.lede{font-size:17px;color:var(--muted);max-width:44ch}
.hero-art{position:relative;background:var(--cobalt);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-art .blob{position:absolute;border-radius:50%;opacity:.9}
.b1{width:240px;height:240px;background:var(--lime);top:-40px;left:-40px}
.b2{width:180px;height:180px;background:var(--magenta);bottom:-50px;right:-30px}
.b3{width:120px;height:120px;background:var(--terracotta);top:40%;left:30%}
.hero-art .stamp{position:relative;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ivory);transform:rotate(-6deg);border:2px solid var(--ivory);padding:10px 18px;text-align:center}
/* ---------- sections ---------- */
section{padding:56px 0;border-bottom:3px solid var(--ink)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:8px}
.sec-title{font-family:var(--serif);font-size:28px;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-title .num{display:inline-block;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:12px;padding:2px 7px;letter-spacing:1px;border-radius:2px}
.sec-more{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--terracotta);text-decoration:none}
.sec-more:hover{text-decoration:underline}
/* ---------- story cards ---------- */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story{border:2px solid var(--ink);background:var(--bone);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease}
.story:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.story .tag{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;padding:8px 12px;border-bottom:2px solid var(--ink);color:var(--ivory)}
.story .body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
.story h3{font-family:var(--serif);font-size:18px;line-height:1.25}
.story .meta{font-size:11px;color:var(--muted);letter-spacing:.6px;margin-top:auto;text-transform:uppercase}
/* tag colors */
.t1{background:var(--terracotta)} .t2{background:var(--cobalt)} .t3{background:var(--magenta)}
.t4{background:#7a4a2b} .t5{background:var(--lime);color:var(--ink)}
/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g-cell{border:2px solid var(--ink);background:var(--bone);overflow:hidden;cursor:zoom-in}
.g-cell img{width:100%;height:200px;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
.g-cell .cap{font-size:11px;padding:7px 9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* lightbox */
.lb-wrap{position:fixed;inset:0;background:rgba(22,18,12,.94);display:none;align-items:center;justify-content:center;z-index:999;cursor:zoom-out}
.lb-wrap.open{display:flex}
.lb-wrap img{max-width:92vw;max-height:88vh;border:4px solid var(--ivory);box-shadow:0 12px 60px rgba(0,0,0,.6)}
.lb-caption{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:var(--bone);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-family:var(--sans)}
.lb-close{position:fixed;top:14px;right:22px;color:var(--ivory);font-family:var(--sans);font-size:34px;font-weight:300;cursor:pointer;line-height:1;z-index:1000}
/* ---------- article page ---------- */
.article{max-width:720px;margin:0 auto;padding:48px 24px 72px}
.article .kicker{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--terracotta);margin-bottom:12px;border:2px solid var(--ink);display:inline-block;padding:4px 10px;background:var(--bone)}
.article h1{font-family:var(--serif);font-size:clamp(28px,4vw,42px);line-height:1.12;margin-bottom:12px}
.article .dateline{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:28px;border-bottom:3px solid var(--ink);padding-bottom:16px}
.article .body{font-family:var(--serif);font-size:19px;line-height:1.75}
.article .body p{margin-bottom:20px}
.article .body p:first-of-type::first-letter{font-size:44px;font-weight:700;float:left;line-height:.9;padding-right:6px;color:var(--terracotta);font-family:var(--serif)}
.article .back{display:inline-block;margin-top:36px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--cobalt);text-decoration:none;border:2px solid var(--cobalt);padding:8px 14px}
.article .back:hover{background:var(--cobalt);color:var(--ivory)}
/* ---------- about / footer ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.about-grid h2{font-family:var(--serif);font-size:26px;margin-bottom:14px}
.about-grid p{color:var(--muted);margin-bottom:12px;font-size:15px}
.footer{border-top:3px solid var(--ink);padding:34px 0 46px;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.8px}
/* ---------- responsive ---------- */
@media(max-width:820px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{min-height:220px}
  .story-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .wrap{padding:0 16px}
}
@media(max-width:520px){.story-grid{grid-template-columns:1fr}}