/* Ask Charlie — shared styles for the sub-pages (legal, blog).
   The home page keeps its own inline CSS; this is the same design system
   trimmed to what documents and article pages actually need. */

:root{
  --forest:#283021; --gold:#A28B69; --olive:#5F6C37; --cream:#FEFADF;
  --gold-br:#C9AE84; --gold-dp:#8C7756; --olive-br:#A3B36B;
  --shell: min(1200px, 100% - 48px);
  --r-lg:32px; --r-md:22px;
  --blur:28px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --t:.5s var(--ease);
}

html[data-theme="dark"]{
  --bg:#0C100A; --ink:#F4F0DA; --ink-2:rgba(244,240,218,.66); --ink-3:rgba(244,240,218,.44);
  --glass:rgba(254,250,223,.05); --glass-2:rgba(254,250,223,.08);
  --stroke:rgba(254,250,223,.12); --stroke-2:rgba(254,250,223,.22);
  --spec:rgba(254,250,223,.30);
  --accent:var(--gold-br); --kicker:var(--gold-br);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
  --grain-o:.055; --grain-blend:overlay;
}
html[data-theme="light"]{
  --bg:#FAF7E9; --ink:#283021; --ink-2:rgba(40,48,33,.72); --ink-3:rgba(40,48,33,.52);
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72);
  --stroke:rgba(40,48,33,.13); --stroke-2:rgba(40,48,33,.24);
  --spec:rgba(255,255,255,.9);
  --accent:#8C7756; --kicker:#8C7756;
  --shadow:0 26px 60px -32px rgba(40,48,33,.35);
  --grain-o:.035; --grain-blend:multiply;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* LAYER 1 — gloss. Body owns the background so it propagates to the canvas,
   which is what lets the negative-z-index contour layer paint above it. */
body{
  margin:0; color:var(--ink);
  background-color:var(--bg);
  background-image:radial-gradient(90rem 42rem at 82% -12%,
    color-mix(in oklab, var(--forest) 7%, transparent), transparent 70%);
  background-attachment:fixed;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color var(--t), color var(--t);
}
html[data-theme="dark"] body{
  background-image:radial-gradient(90rem 42rem at 82% -12%,
    color-mix(in oklab, var(--cream) 5%, transparent), transparent 70%);
}

/* LAYER 2 — matte contour lines */
.contours{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-10; pointer-events:none;
  color:var(--forest); opacity:.11;
  transition:color var(--t), opacity var(--t);
}
html[data-theme="dark"] .contours{color:var(--cream); opacity:.07}
.contours path{fill:none; stroke:currentColor}

.grain{
  position:fixed; inset:-120px; z-index:1; pointer-events:none;
  opacity:var(--grain-o); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity var(--t);
}

img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-br); outline-offset:3px; border-radius:6px}

h1,h2,h3{font-family:'Inter Tight','Inter',sans-serif; font-weight:800;
  line-height:1.04; letter-spacing:-.042em; margin:0}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-size:clamp(1.45rem,2.6vw,1.95rem); letter-spacing:-.035em}
h3{font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; letter-spacing:-.03em}

.shell{width:var(--shell); margin-inline:auto; position:relative; z-index:2}
.shell.narrow{max-width:820px}
.section{padding:clamp(120px,12vw,170px) 0 clamp(72px,9vw,110px)}
.center{text-align:center}
.lede{font-size:clamp(1.02rem,1.4vw,1.16rem); color:var(--ink-2)}
.measure-c{max-width:60ch; margin:1.2rem auto 0}

.glass{
  position:relative; background:var(--glass); border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}

.star{width:1em; height:1em; fill:currentColor; flex:none;
  display:inline-block; vertical-align:-.12em}

.kicker{
  display:inline-flex; flex-direction:column; gap:.5em; align-items:flex-start;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kicker); margin-bottom:1.1rem;
}
.kicker span{display:inline-flex; align-items:center; gap:.6em}
.kicker::after{content:""; display:block; height:2px; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--olive),var(--gold-br))}
.center .kicker{align-items:center; margin-inline:auto}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:80; width:var(--shell); max-width:1080px;
  display:flex; align-items:center; gap:18px;
  padding:9px 9px 9px 22px; border-radius:999px;
}
.nav .logo{height:26px; width:auto}
html[data-theme="dark"] .logo-dark,
html[data-theme="light"] .logo-cream{display:none}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:.94rem;
  font-weight:500; color:var(--ink-2)}
.nav-links a{position:relative; transition:color .3s var(--ease)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-5px; height:1.5px;
  width:100%; background:var(--gold-br); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.toggle{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--stroke); cursor:pointer;
  transition:background .3s var(--ease), border-color var(--t), transform .3s var(--ease);
}
.toggle:hover{transform:translateY(-2px); border-color:var(--stroke-2)}
.toggle svg{width:17px; height:17px; stroke:var(--ink); fill:none;
  stroke-width:1.7; stroke-linecap:round}
html[data-theme="dark"] .i-sun{display:none}
html[data-theme="light"] .i-moon{display:none}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6em; padding:.92em 1.6em; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.98rem; letter-spacing:-.01em; cursor:pointer;
  white-space:nowrap; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-br) 0%,var(--gold-dp) 100%); color:#20180A;
  box-shadow:0 1px 0 rgba(254,250,223,.5) inset, 0 14px 30px -14px rgba(162,139,105,.85);
}
.btn-sm{padding:.62em 1.15em; font-size:.9rem}

/* ---------- document body ---------- */
.doc h1{margin-bottom:.6rem}
.updated{color:var(--ink-3); font-size:.9rem; margin-bottom:2.2rem}

.prose{padding:clamp(26px,4vw,52px); line-height:1.72}
.prose > *+*{margin-top:1.1rem}
.prose h2{margin-top:2.4rem; color:var(--ink)}
.prose h3{margin-top:1.9rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}
.prose ul,.prose ol{padding-left:1.3rem; margin-top:.9rem}
.prose li+li{margin-top:.5rem}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose blockquote{border-left:2px solid var(--gold-br); padding-left:1.2rem;
  color:var(--ink-2); font-style:italic}
.prose table{width:100%; border-collapse:collapse; font-size:.94rem; display:block;
  overflow-x:auto}
.prose th,.prose td{text-align:left; padding:.7rem .9rem;
  border-bottom:1px solid var(--stroke)}
.prose th{color:var(--ink); font-weight:600}

.backlink{margin-top:2.4rem; font-size:.95rem}
.backlink a{color:var(--accent); transition:opacity .3s var(--ease)}
.backlink a:hover{opacity:.75}

/* ---------- blog index ---------- */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px; margin-top:clamp(38px,5vw,60px)}
.post{display:flex; flex-direction:column; padding:clamp(24px,3vw,34px);
  border-radius:var(--r-md);
  transition:transform .4s var(--ease), border-color .4s var(--ease),
             background .4s var(--ease), box-shadow .4s var(--ease)}
.post:hover{transform:translateY(-4px); border-color:rgba(162,139,105,.6);
  background:var(--glass-2)}
.post-date{font-size:.82rem; color:var(--ink-3); letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:.7rem}
.post h2{margin-bottom:.7rem}
.post p{color:var(--ink-2); font-size:.97rem; flex:1}
.post-more{margin-top:1.4rem; color:var(--accent); font-weight:600; font-size:.92rem}

/* ---------- contact form ---------- */
.contact-card{margin-top:clamp(32px,4vw,48px)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field-group{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.field-group+.field-group,.field-row+.field-group{margin-top:16px}
/* the grid gap already spaces these — don't stack them too */
.field-row .field-group{margin-top:0}
.field-group label{font-size:.88rem; font-weight:600; color:var(--ink)}
.field-group label span{color:var(--accent)}

.field{
  width:100%; padding:.82em 1.1em; border-radius:16px;
  background:var(--glass-2); border:1px solid var(--stroke); color:var(--ink);
  font:inherit; font-size:.97rem;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:border-color .3s var(--ease), background var(--t);
}
textarea.field{resize:vertical; min-height:140px; line-height:1.6}
.field::placeholder{color:var(--ink-3)}
.field:focus{border-color:rgba(162,139,105,.75); outline:none}
.field:focus-visible{outline:2px solid var(--gold-br); outline-offset:2px}

.form-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px}
.msg{font-size:.93rem; color:var(--ink-3); margin:0}
.msg.ok{color:var(--olive-br); font-weight:600}
.msg.bad{color:#D8796C}
.msg a{color:inherit; text-decoration:underline; text-underline-offset:3px}
html[data-theme="light"] .msg.ok{color:var(--olive)}
html[data-theme="light"] .msg.bad{color:#B4483C}

.direct{margin-top:28px; padding-top:22px; border-top:1px solid var(--stroke);
  font-size:.93rem; color:var(--ink-3)}
.direct a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

@media (max-width:620px){
  .field-row{grid-template-columns:1fr; gap:16px}
  .form-actions .btn{width:100%}
}

/* ---------- footer ---------- */
footer{position:relative; z-index:2; padding:clamp(60px,8vw,110px) 0 56px;
  text-align:center}
.footmark{width:min(460px,80%); margin:0 auto; opacity:.95}
.footlinks{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  margin-top:clamp(30px,4vw,46px); font-size:.92rem; color:var(--ink-2)}
.footlinks a{transition:color .3s var(--ease)}
.footlinks a:hover{color:var(--accent)}
.copy{margin-top:1.6rem; font-size:.86rem; color:var(--ink-3)}

@media (max-width:960px){
  :root{--shell:min(1200px,100% - 36px)}
  .nav-links{display:none}
  .nav{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important; animation:none !important}
}