:root{
  --stage:#E4DBCB;--stage-2:#E8E0D1;--panel:#ECE4D6;--line:#C7BCA8;
  --ink:#2A241C;--smoke:#574E42;--faint:#635A4C;--onmedia:#ECE6D9;
  --tung:#855420;--tung-2:#9A6526;
  --d:"Fraunces",Georgia,serif;--s:"Inter",system-ui,sans-serif;--m:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(1.1rem,4vw,2.6rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--s);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;
  background:radial-gradient(60% 45% at 50% -5%,rgba(249,239,219,.65),transparent 60%),linear-gradient(180deg,#E9E1D1,#DED4C2 60%,#D4C9B6)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--tung);color:var(--onmedia)}
:focus-visible{outline:2px solid var(--tung);outline-offset:3px}
.wrap{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
.wrap.wide{max-width:1100px}
/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(228,219,203,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .row{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--gut)}
.wm{display:flex;align-items:center;gap:.55rem}.wm svg{width:30px;height:30px}
.wm b{font-family:var(--d);font-weight:500;font-size:1.2rem;letter-spacing:.12em}
.wm small{display:block;font-family:var(--m);font-weight:500;font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--tung);margin-top:.28rem}
.links{display:flex;gap:1.6rem;font-family:var(--m);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.links a{color:var(--smoke);transition:color .25s}.links a:hover{color:var(--ink)}
.links .cta{color:var(--onmedia);background:var(--tung);padding:.7rem 1.1rem;border-radius:3px}
.links .cta:hover{background:var(--tung-2)}
@media(max-width:600px){.nav .row{flex-wrap:wrap;row-gap:.7rem}.links{width:100%;justify-content:space-between;gap:.7rem;font-size:.64rem}}
/* page header */
.phead{padding:clamp(3rem,7vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.eyebrow{font-family:var(--m);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tung);margin-bottom:1rem}
.phead h1{font-family:var(--d);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.05;letter-spacing:-.02em}
.phead .sub{color:var(--smoke);margin-top:1rem;max-width:60ch}
.post-meta{font-family:var(--m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:1.2rem}
/* hero image */
.hero-img{aspect-ratio:16/9;border:1px solid var(--line);border-radius:4px;overflow:hidden;background-size:cover;background-position:center;margin:clamp(1.5rem,3vw,2.5rem) 0}
/* article prose */
.article{padding-bottom:clamp(3rem,6vw,4.5rem)}
.article p{font-size:1.0625rem;color:#3a342b;margin:0 0 1.3rem;max-width:68ch}
.article p.lead{font-family:var(--d);font-weight:300;font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.45;color:var(--ink)}
.article h2{font-family:var(--d);font-weight:500;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em;margin:2.2rem 0 .8rem;color:var(--ink)}
.article strong{color:var(--ink)}
/* listing cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.5vw,1.8rem);padding-bottom:clamp(3rem,7vw,5rem)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--tung)}
.card .thumb{aspect-ratio:3/2;background-size:cover;background-position:center;filter:saturate(.96) brightness(.94)}
.card .body{padding:1.3rem 1.4rem 1.5rem}
.card .tag{font-family:var(--m);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tung)}
.card .t{font-family:var(--d);font-weight:500;font-size:1.3rem;line-height:1.2;margin:.5rem 0 .5rem;color:var(--ink)}
.card .d{color:var(--smoke);font-size:.95rem}
.card .more{display:inline-block;margin-top:.9rem;font-family:var(--m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tung)}
/* cta + footer */
.cta-band{text-align:center;padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--line);margin-top:1rem}
.cta-band h2{font-family:var(--d);font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.5rem}
.cta-band p{color:var(--smoke);max-width:46ch;margin:0 auto 1.5rem}
.btn{display:inline-block;font-family:var(--m);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.8rem;border-radius:3px;background:var(--tung);color:var(--onmedia);transition:background .3s}
.btn:hover{background:var(--tung-2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-left:.5rem}
.btn.ghost:hover{border-color:var(--tung);color:var(--tung)}
footer{border-top:1px solid var(--line);padding:2.2rem var(--gut);font-family:var(--m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:center}
footer a:hover{color:var(--tung)}