@font-face{font-family:'Fraunces';src:url('fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#FBFAF6;--stone:#F4F1E9;--stone2:#ECE7DA;--line:#E4DDCC;--line2:#D2C8B0;
  --ink:#15130E;--ink2:#3B372C;--ink3:#6E6858;--ink-band:#141109;
  --bronze:#B5792A;--bronze-d:#8C5A1C;--bronze-l:#CDA255;--bronze-tint:#EEE0C6;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  --maxw:1240px;--read:720px;--gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink2);font-family:var(--sans);font-size:18px;line-height:1.62;font-weight:380;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:560;line-height:1.06;letter-spacing:-.018em;margin:0;font-optical-sizing:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-d);margin:0 0 1.2rem;display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--bronze)}

/* header */
header{position:sticky;top:0;z-index:120;background:rgba(251,250,246,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .mk{width:28px;height:28px;flex:none}
.brand .wm{font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);line-height:1}
.brand .wm b{color:var(--bronze);font-weight:600}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink2)}
.nav-links a:hover{color:var(--bronze-d)}
.nav-links .btn{background:var(--bronze);color:#fff;padding:.6rem 1.25rem;font-weight:600;font-size:.9rem}
.nav-links .btn:hover{background:var(--bronze-d)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* generic band */
section{padding:clamp(56px,8vw,104px) 0}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink2)}
.btn-b{display:inline-flex;align-items:center;gap:.5rem;background:var(--bronze);color:#fff;font-family:var(--sans);font-weight:600;font-size:.98rem;padding:1rem 1.7rem;border:0;cursor:pointer}
.btn-b:hover{background:var(--bronze-d)}
.arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--bronze-d)}
.arrow svg{transition:transform .18s}.arrow:hover svg{transform:translateX(4px)}
.crumb{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink3);padding:26px 0 0}
.crumb a:hover{color:var(--bronze-d)}

/* resources index */
.rhero{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px)}
.rhero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:520;max-width:16ch}
.rhero p{max-width:56ch;margin-top:1.2rem}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line2)}
.rcard{display:block;padding:clamp(28px,3.2vw,44px) clamp(24px,2.6vw,40px);border-bottom:1px solid var(--line2);border-left:1px solid var(--line2);transition:background .18s}
.rcard:nth-child(odd){border-left:0}
.rcard:hover{background:var(--stone)}
.rcard .k{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-d)}
.rcard h3{font-size:1.5rem;margin:.7rem 0 .6rem;line-height:1.14}
.rcard p{margin:0 0 1rem;color:var(--ink2);font-size:.98rem}
@media(max-width:760px){.rgrid{grid-template-columns:1fr}.rcard{border-left:0}}

/* article */
.artwrap{max-width:var(--read);margin:0 auto;padding:0 var(--gut)}
.arthead{padding:clamp(30px,4vw,52px) 0 clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
.arthead h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:520;max-width:20ch}
.arthead .meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--ink3);margin-top:1.4rem;display:flex;gap:16px;flex-wrap:wrap}
.prose{padding:clamp(30px,4vw,52px) 0 clamp(40px,5vw,72px);font-size:1.075rem;line-height:1.72}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.4rem 0 .8rem;font-weight:560}
.prose h3{font-size:1.25rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.2rem;color:var(--ink2)}
.prose ul{margin:0 0 1.2rem;padding-left:1.1rem}
.prose li{margin:.4rem 0;color:var(--ink2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--bronze-d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--bronze);font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink);font-style:italic}
.callout{background:var(--stone);border:1px solid var(--line);padding:20px 22px;margin:1.8rem 0;font-size:.98rem}
.callout b{font-family:var(--serif);color:var(--ink);font-size:1.05rem;display:block;margin-bottom:.3rem}
.disc{font-size:.86rem;color:var(--ink3);border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.2rem;line-height:1.55}
.keytakes{background:var(--stone);border:1px solid var(--line);padding:22px 24px;margin:0 0 2rem}
.keytakes h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-d);margin:0 0 .8rem;font-weight:650}
.keytakes ul{margin:0;padding-left:1.1rem}.keytakes li{margin:.35rem 0}

/* end CTA band */
.endcta{background:var(--ink-band);color:#fff;text-align:center}
.endcta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:20ch;margin:0 auto 1rem}
.endcta p{color:#CFC7B5;max-width:48ch;margin:0 auto 1.8rem}

/* footer */
footer{background:var(--ink-band);color:#A69F8D;padding:clamp(48px,6vw,72px) 0 34px}
.fcols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:30px;margin-bottom:40px}
footer .brand .wm{color:#F4F1E9}
footer h5{color:#F4F1E9;font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:650}
footer a{color:#A69F8D;display:block;padding:3px 0;font-size:.95rem}footer a:hover{color:#fff}
footer .tag{max-width:34ch;margin-top:1rem;font-size:.95rem;color:#8f8877;line-height:1.5}
.fdisc{border-top:1px solid #2b271f;padding-top:22px;font-size:.82rem;color:#98917f;line-height:1.7}
@media(max-width:760px){.fcols{grid-template-columns:1fr 1fr}}

input:focus,textarea:focus,select:focus{outline:2px solid var(--bronze);outline-offset:2px}