:root {
  --bg:#FAF8F3; --bg-2:#F2EDE4; --ink:#15130F; --text:#1A1815;
  --text-2:#57534E; --text-3:#6C665D; --on-ink:#FAF8F3;
  --accent:#C8651B; --accent-2:#A8500F; --border:#E0D8C8;
  --font-head:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --maxw:1140px; --reading:720px;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 var(--font-body); -webkit-font-smoothing:antialiased }
img { display:block; max-width:100%; height:auto }
a { color:inherit }
button,input,textarea { font:inherit }
button { cursor:pointer }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.skip-link { position:absolute; top:-100px; left:1rem; z-index:110; padding:.7rem 1rem; color:#fff; background:var(--ink) }
.skip-link:focus { top:.5rem }
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.4rem) }

.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:rgba(250,248,243,.95); backdrop-filter:blur(12px) }
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem }
.brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; font:600 16px var(--font-head); white-space:nowrap }
.brand img { width:54px; height:54px; flex:none }
.site-header nav { display:flex; gap:1.5rem; margin-left:auto }
.site-header nav a { font-size:16px; color:var(--text-2); text-decoration:none }
.site-header nav a:hover { color:var(--text) }
.header-cta,.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.3rem; border-radius:3px; border:1px solid transparent; font:600 16px/1.2 var(--font-body); text-decoration:none; text-align:center }
.header-cta,.button-dark { background:var(--ink); color:var(--on-ink) }
.header-cta:hover,.button-dark:hover { background:var(--accent) }
.button-light { background:var(--accent); color:var(--ink) }
.button-light:hover { background:#E6A36C }

.breadcrumb { display:flex; flex-wrap:wrap; gap:.7rem; padding-block:1.35rem; font-size:14px; line-height:1.5; color:var(--text-3) }
.breadcrumb a:hover { color:var(--accent-2) }
.draft-note { width:fit-content; border:1px solid var(--border); border-radius:3px; padding:.3rem .65rem; background:var(--bg-2); font-size:13px; font-weight:600; color:var(--text-2) }
.article-grid { display:grid; grid-template-columns:minmax(0,var(--reading)) minmax(230px,1fr); gap:clamp(2rem,4vw,3rem); align-items:start; padding-block:clamp(2rem,4vw,3rem) 5.5rem }
.article { min-width:0 }
.article-header { margin-bottom:2rem }
.eyebrow { margin:0 0 1.2rem; color:var(--accent-2); font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase }
.eyebrow::before { content:""; display:inline-block; width:24px; height:1px; margin:0 .65rem .25rem 0; background:var(--accent) }
h1,h2 { font-family:var(--font-head); font-weight:600; letter-spacing:-.03em; color:var(--text); font-variation-settings:"opsz" 144; text-wrap:balance }
h1 { margin:0; font-size:clamp(2.6rem,4vw,3.5rem); line-height:1.05 }
.article-summary { margin:1.35rem 0 0; max-width:62ch; color:var(--text-2); font-weight:500; font-size:17px; line-height:1.6 }
.article-byline { display:flex; align-items:center; gap:.55rem; margin:1rem 0 0; color:var(--text-3); font-size:14px }
.cover { margin:0 0 2.7rem }
.cover img { width:100%; aspect-ratio:1200/627; object-fit:cover; border:1px solid var(--border); border-radius:3px }
.cover figcaption { margin-top:.7rem; color:var(--text-3); font-size:14px; line-height:1.5 }
.cover figcaption a { text-underline-offset:3px }
.article-body { max-width:var(--reading); overflow-wrap:anywhere }
.article-body p { margin:0 0 1.35rem; color:var(--text-2) }
.article-body > p:first-child { font-weight:500; color:var(--text) }
.article-body strong { font-weight:600; color:var(--text) }
.article-body h2 { scroll-margin-top:6rem; margin:3.8rem 0 1.4rem; padding-top:1.45rem; border-top:1px solid var(--border); font-size:clamp(1.9rem,2.7vw,2.5rem); line-height:1.12 }
.article-body a { color:var(--accent-2); text-decoration-thickness:1px; text-underline-offset:3px }
.article-body a:hover { color:var(--text) }
.end-cta { margin-top:4rem; padding:clamp(1.6rem,3vw,2.35rem); border-radius:4px; background:var(--ink); color:var(--on-ink) }
.end-cta p { margin:0 0 1.4rem; color:rgba(250,248,243,.88); line-height:1.6 }
.end-cta p a { color:var(--on-ink); text-underline-offset:3px }

.article-aside { align-self:stretch }
.aside-sticky { position:sticky; top:6.2rem }
.toc { border-top:1px solid var(--border); padding-top:1.2rem }
.toc h2 { margin:0 0 1rem; font:600 13px var(--font-body); letter-spacing:.09em; text-transform:uppercase }
.toc ol { list-style:none; margin:0; padding:0 }
.toc li + li { border-top:1px solid var(--border) }
.toc a { display:block; padding:.8rem .15rem; color:var(--text-2); font-size:14px; line-height:1.4; text-decoration:none }
.toc a:hover,.toc a:focus-visible { color:var(--accent-2) }
.aside-cta { margin-top:1.6rem; padding:1.25rem; border:1px solid var(--border); border-radius:4px; background:var(--bg-2) }
.aside-cta p { margin:0 0 .7rem; font:600 20px/1.2 var(--font-head) }
.aside-cta-copy { display:block; color:var(--text-2); font-size:14px; line-height:1.5 }
.aside-cta .button { width:100%; margin-top:1rem; font-size:14px }

.lead-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); margin-bottom:5rem; padding:clamp(1.5rem,4vw,3rem); border-radius:4px; background:var(--ink); color:var(--on-ink) }
.lead-section h2 { margin:0; color:var(--on-ink); font-size:clamp(1.9rem,2.7vw,2.5rem); line-height:1.1 }
.lead-intro p:last-child { max-width:50ch; margin:1.25rem 0 0; color:rgba(250,248,243,.82) }
.lead-section .eyebrow { color:#F0B27A }
#lead-form { display:grid; gap:1rem }
.field { display:grid; gap:.35rem }
.field label { font-size:16px; font-weight:500 }
.field input,.field textarea { width:100%; min-height:48px; border:1px solid rgba(250,248,243,.45); border-radius:3px; padding:.7rem .85rem; background:#2A2723; color:#fff; font-size:16px }
.field textarea { min-height:105px; resize:vertical }
.field input::placeholder,.field textarea::placeholder { color:#B8B0A5 }
.field input:focus,.field textarea:focus { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px }
.field [aria-invalid=true],.consent-control[aria-invalid=true] { border-color:#F0B27A }
.field-error { display:none; color:#F0B27A; font-size:14px; line-height:1.4 }
.field-error.on { display:block }
.hp-field { position:absolute; left:-99999px; width:1px; height:1px; overflow:hidden }
.submit { width:100%; margin-top:.15rem }
.submit:disabled { opacity:.7; cursor:wait }
.consent-control { display:flex; align-items:flex-start; gap:.6rem; color:rgba(250,248,243,.83); font-size:14px; line-height:1.5 }
.consent-control input { width:18px; height:18px; margin:.1rem 0 0; flex:none; accent-color:var(--accent) }
.consent-control a { color:#F0B27A; text-underline-offset:3px }
.form-msg { display:none; padding:.75rem; border:1px solid var(--accent); border-radius:3px; color:#F0B27A; font-size:14px }
.form-msg.on { display:block }
.form-msg.ok { color:var(--on-ink) }

.site-footer { border-top:1px solid var(--border); background:var(--bg-2) }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:2rem; color:var(--text-3); font-size:14px }
.footer-inner a:hover { color:var(--accent-2) }

#lead-dialog { width:min(620px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; border:0; border-radius:4px; padding:0; background:var(--ink); color:var(--on-ink) }
#lead-dialog::backdrop { background:rgba(21,19,15,.68) }
.dialog-panel { position:relative; padding:clamp(1.3rem,4vw,2rem) }
.dialog-panel h2 { margin:0; padding-right:2rem; color:var(--on-ink); font-size:32px }
.dialog-panel > p { margin:.8rem 0 1.5rem; color:rgba(250,248,243,.82) }
.dialog-close { position:absolute; right:.7rem; top:.7rem; width:44px; height:44px; border:0; background:transparent; color:#fff; font-size:27px }
body.dialog-open { overflow:hidden }

#cookie-banner { display:none; position:fixed; z-index:90; bottom:0; left:0; width:100%; padding:.8rem 1rem; border-top:1px solid var(--accent); background:var(--ink); box-shadow:0 -8px 24px rgba(21,19,15,.25) }
#cookie-banner.visible { display:block }
.cookie-inner { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; max-width:900px; margin:auto }
.cookie-inner p { flex:1; min-width:260px; margin:0; color:rgba(250,248,243,.85); font-size:14px; line-height:1.45 }
.cookie-inner a { color:#F0B27A }
.cookie-buttons { display:flex; gap:.6rem }
.cookie-buttons button { min-height:42px; padding:.4rem .75rem; border:1px solid var(--on-ink); border-radius:3px; background:transparent; color:var(--on-ink); font-size:14px }
.cookie-buttons button:first-child { background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:600 }

@media (max-width:1100px) {
  .article-grid { display:block; max-width:var(--reading); padding-bottom:4rem }
  .article-aside { display:none }
}
@media (max-width:760px) {
  body { font-size:16px; line-height:1.65 }
  .site-header nav { display:none }
  .header-inner { gap:.8rem }
  .article-grid { padding-top:2rem }
  .article-summary { font-size:16px }
  .article-body h2 { margin-top:3rem; font-size:30px }
  .lead-section { display:block; margin-bottom:3.5rem }
  .lead-intro { margin-bottom:1.8rem }
  #cookie-banner { position:static; box-shadow:none }
  .cookie-inner p { min-width:0 }
  .cookie-buttons { display:grid; grid-template-columns:1fr 1fr; width:100% }
  .cookie-buttons button { min-height:44px }
}
@media (max-width:540px) {
  .container { padding-inline:1rem }
  .brand span { display:none }
  .header-cta { min-height:44px; padding:.65rem .9rem; font-size:14px }
  .breadcrumb { padding-block:1rem; gap:.5rem }
  .article-grid { padding-bottom:3.4rem }
  h1 { font-size:clamp(2.15rem,9vw,2.5rem) }
  .cover { margin-bottom:2rem }
  .cover img { aspect-ratio:4/3; object-position:center }
  .end-cta { margin-top:3rem }
  .lead-section { margin-inline:-1rem; border-radius:0; padding:1.5rem 1rem }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }