*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:         oklch(98% 0.004 95);
  --surface:    oklch(100% 0.002 95);
  --fg:         oklch(20% 0.018 70);
  --muted:      oklch(48% 0.012 70);
  --border:     oklch(90% 0.006 95);
  --accent:     oklch(48% 0.09 28);
  --font-display: 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Menlo', 'Consolas', 'Courier New', ui-monospace, monospace;
  --grid: clamp(1rem, 2.5vw, 2rem);
}
html{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:clamp(15px, 1.15vw, 18px);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh}

/* Typography */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.15;color:var(--fg)}
h1{font-size:clamp(2rem, 5vw, 3.8rem);letter-spacing:-0.01em}
h2{font-size:clamp(1.5rem, 3vw, 2.6rem);letter-spacing:-0.005em}
h3{font-size:clamp(1.2rem, 1.8vw, 1.6rem)}
h4{font-size:clamp(1rem, 1.3vw, 1.2rem)}
p{max-width:70ch;color:var(--fg)}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s}
a:hover{color:color-mix(in oklch, var(--accent), black 20%)}

/* Utility */
.kicker{font-family:var(--font-body);font-size:clamp(.65rem,.7vw,.75rem);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.5em}
.kicker span{color:var(--accent)}
.mono{font-family:var(--font-mono);font-size:.85em;font-variant-numeric:tabular-nums}

/* Buttons — sharp, minimal */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1.2em;font-family:var(--font-body);font-size:clamp(.75rem,.85vw,.85rem);font-weight:500;border:1px solid var(--fg);cursor:pointer;transition:all .15s;background:transparent;color:var(--fg);text-decoration:none}
.btn:hover{background:var(--fg);color:var(--bg);text-decoration:none}
.btn--primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn--primary:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Container */
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--grid)}

/* Grid utilities */
.grid{display:grid;gap:var(--grid)}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr))}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr))}
.grid--4{grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr))}

/* Section */
.section{padding:clamp(2.5rem, 5vw, 5rem) 0}
.section-rule{border:none;border-top:1px solid var(--border);margin:0}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);padding:clamp(1rem, 1.5vw, 1.5rem);transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card__title{font-family:var(--font-display);font-size:clamp(1rem, 1.2vw, 1.3rem);margin-bottom:.25em}
.card__meta{font-family:var(--font-body);font-size:.8rem;color:var(--muted);margin-bottom:.5em}

/* Tag */
.tag{display:inline-block;padding:.15em .5em;font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--border);color:var(--muted)}
.tag--accent{border-color:var(--accent);color:var(--accent)}

/* Breadcrumb */
.breadcrumb{display:flex;gap:.5em;font-family:var(--font-body);font-size:.8rem;color:var(--muted);margin-bottom:1.5rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span::before{content:'/';margin-right:.5em;color:var(--border)}

/* Form */
.input{width:100%;padding:.5em .7em;font-family:var(--font-body);font-size:.9rem;background:var(--bg);border:1px solid var(--border);color:var(--fg);outline:none;transition:border-color .15s}
.input:focus{border-color:var(--accent)}
.input::placeholder{color:var(--muted)}
.select{appearance:none;padding:.5em .7em;font-family:var(--font-body);font-size:.9rem;background:var(--bg);border:1px solid var(--border);color:var(--fg);cursor:pointer;outline:none;border-radius:0}
.select:focus{border-color:var(--accent)}
.select option{background:var(--surface);color:var(--fg)}
label{font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:.25em}

/* Header / nav */
.header{border-bottom:1px solid var(--border);padding:.75rem 0}
.header__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.header__logo{font-family:var(--font-body);font-size:clamp(.8rem,1vw,.9rem);text-transform:uppercase;letter-spacing:.15em;color:var(--muted);display:flex;align-items:center;gap:.5rem;text-decoration:none}
.header__logo:hover{color:var(--accent);text-decoration:none}
.header__nav{display:flex;gap:clamp(.75rem,1.5vw,1.5rem);font-family:var(--font-body);font-size:clamp(.75rem,.8vw,.85rem)}
.header__nav a{color:var(--muted);text-decoration:none;padding:.25em 0}
.header__nav a:hover,.header__nav a.active{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--fg)}
.header__masthead{text-align:center;padding:.5rem 0;border-bottom:2px solid var(--fg)}
.header__masthead__title{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,3rem);letter-spacing:-.02em;margin-bottom:.1em}
.header__masthead__meta{font-family:var(--font-mono);font-size:clamp(.6rem,.65vw,.7rem);text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}

/* Footer — journal colophon style */
.footer{border-top:1px solid var(--border);padding:clamp(1.5rem, 3vw, 3rem) 0;margin-top:clamp(2rem, 4vw, 4rem);font-size:.8rem;color:var(--muted)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));gap:var(--grid)}
.footer__title{font-family:var(--font-body);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.5rem}
.footer a{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3em;text-decoration:none}
.footer a:hover{color:var(--fg);text-decoration:underline}
.footer__colophon{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem;font-size:.7rem;text-align:center;color:var(--muted);font-family:var(--font-mono)}

/* Folio page numbers */
.page-num{font-family:var(--font-mono);font-size:.65rem;color:var(--muted);position:absolute;bottom:1rem;right:1rem}

/* Responsive helpers */
@media(width < 600px){
  .header__nav{gap:.4rem;font-size:.7rem}
  .header__inner{flex-direction:column;align-items:flex-start}
  .header__masthead{padding:.4rem 0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}
@media(width>=600px) and (width<900px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}