:root{
  --ink:#0e1420; --ink2:#26303d; --paper:#f7f5f0; --paper2:#efe9dd;
  --card:#fffdf8; --line:#e4ded1; --line2:#d6cdba;
  --accent:#b3411f; --accent-d:#8f3319; --accent2:#1f3a5f; --navy:#0e1420;
  --muted:#6b7280; --gold:#c69749; --gold-d:#a67a2e;
  --shadow:0 1px 2px rgba(14,20,32,.04),0 8px 24px rgba(14,20,32,.06);
  --shadow-lg:0 12px 40px rgba(14,20,32,.14);
  --r:12px; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; line-height:1.1; font-weight:600; letter-spacing:-.015em; margin:0}
a{color:var(--accent2); text-decoration:none; transition:color .15s ease}
a:hover{color:var(--accent)}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap-sm{max-width:760px; margin:0 auto; padding:0 24px}

/* animation */
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation-delay:.08s}
.rise-3{animation-delay:.16s}
.rise-4{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.rise,.rise-2,.rise-3,.rise-4{animation:none}}

/* header */
.site-head{border-bottom:1px solid var(--line); background:rgba(255,253,248,.85); backdrop-filter:saturate(140%) blur(12px); position:sticky; top:0; z-index:40}
.head-inner{display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px}
.brand{font-family:'Fraunces',serif; font-weight:700; font-size:1.45rem; color:var(--ink); letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand span{color:var(--accent)}
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:var(--ink); font-size:.93rem; font-weight:500; position:relative}
.nav a:not(.btn):after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--accent); transition:right .22s ease}
.nav a:not(.btn):hover:after{right:0}
.nav a:not(.btn):hover{color:var(--ink)}
.inline{display:inline; margin:0}
.linkbtn{background:none; border:0; color:var(--ink); font:inherit; font-size:.93rem; font-weight:500; cursor:pointer; padding:0}
.linkbtn:hover{color:var(--accent)}
.navtoggle{display:none; background:none; border:0; cursor:pointer; padding:6px; color:var(--ink)}
.navtoggle svg{width:26px; height:26px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:12px 22px; border-radius:8px; font-weight:600; border:0; cursor:pointer; font-size:.95rem; transition:transform .12s ease,background .15s ease,box-shadow .15s ease; box-shadow:0 4px 14px rgba(179,65,31,.22)}
.btn:hover{background:var(--accent-d); color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px rgba(179,65,31,.3)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:8px 15px; font-size:.9rem; box-shadow:none}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line2); box-shadow:none}
.btn-ghost:hover{background:var(--paper2); color:var(--ink); box-shadow:none}
.btn-gold{background:var(--gold); box-shadow:0 4px 14px rgba(198,151,73,.25)}
.btn-gold:hover{background:var(--gold-d)}

/* hero */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 140% at 80% -10%,#25507f 0%,#12213a 45%,#0b111d 100%); color:#f3efe6; padding:112px 0 96px; border-bottom:4px solid var(--gold)}
.hero:before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0); background-size:26px 26px; opacity:.5}
.hero:after{content:""; position:absolute; right:-140px; top:-120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(198,151,73,.18),transparent 65%)}
.hero .wrap{position:relative; z-index:2}
.kicker{text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--gold); font-weight:600}
.hero h1{font-size:clamp(2.5rem,5.5vw,4.4rem); color:#fff; margin:.35em 0 .3em; max-width:16ch; letter-spacing:-.025em}
.hero p{font-size:1.22rem; color:#cdd5e0; max-width:54ch; margin:0 0 30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08); color:#fff}
.hero-stats{display:flex; gap:40px; margin-top:52px; flex-wrap:wrap}
.hero-stats .n{font-family:'Fraunces',serif; font-size:2rem; font-weight:700; color:#fff}
.hero-stats .l{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:#9fb0c6}

/* sections */
.section{padding:76px 0}
.section-head{margin:0 0 40px; max-width:640px}
.section h2{font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 10px}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:600; color:var(--accent); margin:0 0 10px}
.lead{color:var(--muted); font-size:1.08rem; margin:0}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid,.grid-2{grid-template-columns:1fr}}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line2)}
.card h3{margin:.15em 0 .4em; font-size:1.28rem}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card p{color:var(--ink2); margin:0 0 18px; flex:1}
.card .meta{font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.card .meta a{color:var(--muted)}
.card .meta a:hover{color:var(--accent)}
.dot{width:3px; height:3px; border-radius:50%; background:var(--line2); display:inline-block}

/* feature card (first post) */
.feature{grid-column:1/-1; display:grid; grid-template-columns:1.1fr 1fr; gap:0; padding:0; overflow:hidden}
.feature .body{padding:38px}
.feature .art{background:linear-gradient(150deg,#1f3a5f,#0e1420); position:relative; min-height:260px}
.feature .art:after{content:attr(data-region); position:absolute; bottom:22px; left:26px; color:var(--gold); font-family:'Fraunces',serif; font-size:1.4rem; opacity:.9}
.feature .art:before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.08) 1px,transparent 0); background-size:22px 22px}
.feature h3{font-size:1.9rem}
@media(max-width:720px){.feature{grid-template-columns:1fr}.feature .art{min-height:150px}}

/* tags */
.tag{display:inline-block; align-self:flex-start; background:var(--paper2); color:var(--accent2); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:4px 11px; border-radius:99px; margin-bottom:12px}
.tag-gold{background:rgba(198,151,73,.15); color:var(--gold-d)}

/* article */
.article{max-width:740px; margin:0 auto; padding:64px 24px 40px}
.article .tag{margin-bottom:18px}
.article h1{font-size:clamp(2.1rem,4.5vw,3.2rem); margin:0 0 14px; letter-spacing:-.02em}
.article .byline{color:var(--muted); font-size:.92rem; margin-bottom:40px; border-bottom:1px solid var(--line); padding-bottom:26px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--accent2),var(--accent)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; font-family:'Inter',sans-serif}
.avatar-lg{width:56px; height:56px; font-size:1.2rem}
.prose{font-size:1.16rem; color:var(--ink2); line-height:1.75}
.prose p{margin:0 0 1.35em}
.prose p:first-of-type:first-letter{font-family:'Fraunces',serif; font-size:3.2rem; font-weight:700; float:left; line-height:.82; margin:.06em .12em 0 0; color:var(--accent)}
.article-foot{max-width:740px; margin:0 auto; padding:0 24px 72px}
.share{display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding-top:28px; margin-top:20px}
.share span{font-size:.85rem; color:var(--muted); margin-right:4px}

/* author box */
.authorbox{display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin-top:36px; box-shadow:var(--shadow)}
.authorbox .who{flex:1}
.authorbox .who h4{font-size:1.1rem; margin:0 0 3px}
.authorbox .who p{margin:0; color:var(--muted); font-size:.9rem}

/* forms */
.formwrap{max-width:460px; margin:72px auto; padding:0 24px}
.formcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px; box-shadow:var(--shadow-lg)}
.formcard.wide{max-width:760px}
.formcard h1{font-size:1.9rem; margin:0 0 6px}
.formcard .sub{color:var(--muted); margin:0 0 28px}
.field{margin-bottom:18px}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:7px}
.field input,.field textarea,.field select{width:100%; padding:12px 14px; border:1px solid var(--line2); border-radius:9px; font:inherit; background:#fff; transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0; border-color:var(--accent2); box-shadow:0 0 0 3px rgba(31,58,95,.12)}
.field textarea{min-height:260px; resize:vertical; font-family:'Fraunces',Georgia,serif; font-size:1.05rem; line-height:1.6}
.err{color:var(--accent); font-size:.82rem; margin-top:6px}
.formcard .btn{width:100%; margin-top:6px; justify-content:center}
.altline{text-align:center; margin-top:22px; font-size:.9rem; color:var(--muted)}
.check{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted)}
.check input{width:auto}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

/* flash + notes */
.flash{background:#e7f0e5; border:1px solid #bcd6b4; color:#2c5522; padding:13px 18px; border-radius:10px; margin:22px auto; max-width:calc(var(--wrap) - 48px); display:flex; align-items:center; gap:10px}
.note{background:#fbf3e2; border:1px solid #e7d6ab; color:#6b5220; padding:15px 18px; border-radius:10px; font-size:.92rem; margin:0 0 24px}
.muted{color:var(--muted)}

/* filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px}
.filters a{font-size:.85rem; padding:7px 15px; border:1px solid var(--line2); border-radius:99px; color:var(--ink); background:var(--card); transition:all .15s}
.filters a:hover{border-color:var(--ink); color:var(--ink)}
.filters a.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* CTA band */
.band{background:linear-gradient(150deg,#1f3a5f,#0e1420); color:#fff; border-radius:20px; padding:56px 48px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.band:before{content:""; position:absolute; right:-80px; bottom:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(198,151,73,.22),transparent 65%)}
.band-inner{position:relative; z-index:2; max-width:560px}
.band h2{color:#fff; font-size:2rem; margin:0 0 10px}
.band p{color:#cdd5e0; margin:0 0 24px; font-size:1.05rem}
.band form{display:flex; gap:10px; flex-wrap:wrap; max-width:460px}
.band input{flex:1; min-width:220px; padding:13px 16px; border-radius:9px; border:0; font:inherit}
.band .fineprint{margin:14px 0 0; font-size:.82rem; color:#9fb0c6}

/* regions hub */
.region-card{position:relative; overflow:hidden; border-radius:var(--r); padding:28px; min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; background:linear-gradient(150deg,#1f3a5f,#0e1420); box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease}
.region-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); color:#fff}
.region-card:before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.07) 1px,transparent 0); background-size:22px 22px}
.region-card h3{position:relative; font-size:1.4rem; color:#fff}
.region-card .c{position:relative; font-size:.82rem; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-bottom:6px}

/* value grid */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:820px){.vgrid{grid-template-columns:1fr}}
.vitem{padding:26px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.vitem .ic{width:44px; height:44px; border-radius:10px; background:var(--paper2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.3rem}
.vitem h3{font-size:1.15rem; margin:0 0 8px}
.vitem p{margin:0; color:var(--ink2); font-size:.96rem}

/* footer */
.site-foot{border-top:1px solid var(--line); background:var(--card); margin-top:80px}
.foot-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding:56px 0 40px}
.foot-top .brand{display:inline-block; margin-bottom:12px}
.foot-top p{color:var(--muted); font-size:.92rem; margin:0; max-width:34ch}
.foot-col h5{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink); margin:0 0 14px}
.foot-col a{display:block; color:var(--muted); font-size:.9rem; margin-bottom:9px}
.foot-col a:hover{color:var(--accent)}
.foot-bot{border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:22px 0; font-size:.85rem; color:var(--muted); flex-wrap:wrap; gap:8px}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}

.pagination{display:flex; gap:6px; list-style:none; padding:0; margin:40px 0 0; flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 13px; border:1px solid var(--line2); border-radius:8px; font-size:.85rem; color:var(--ink); background:var(--card)}
.pagination .active span{background:var(--ink); color:#fff; border-color:var(--ink)}
.empty{text-align:center; color:var(--muted); padding:70px 0}

/* misc */
.pagehead{background:var(--paper2); border-bottom:1px solid var(--line); padding:64px 0 56px}
.pagehead h1{font-size:clamp(2rem,4vw,3rem); margin:.2em 0 .3em}
.pagehead p{color:var(--muted); font-size:1.08rem; max-width:52ch; margin:0}
.readtime{font-size:.82rem; color:var(--muted)}

/* mobile nav */
@media(max-width:760px){
  .navtoggle{display:block}
  .nav{position:fixed; inset:70px 0 auto 0; background:var(--card); flex-direction:column; align-items:stretch; gap:0; padding:8px 0; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .18s ease}
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav a,.nav form{padding:13px 24px}
  .nav a:not(.btn):after{display:none}
  .nav .btn{margin:8px 24px; justify-content:center}
}