/* =====================================================================
   Silva Obscura — shared site styling
   Tokens, base type, the top bar, the hero and the footer. Every page in
   docs/ links this first and then adds only what is its own.
   ===================================================================== */

/* ===================== Tokens ===================== */
:root{
  --ground:#e2dac6;
  --surface:#f7f2e4;
  --surface-2:#ede4cf;
  --edge:#cfc2a2;
  --edge-soft:#ddd2b4;
  --ink:#231a10;
  --ink-dim:#6d5f47;
  --ink-faint:#8d7f63;
  --bronze:#8a5a1d;
  --bronze-strong:#6e4614;
  --bronze-ink:#4a370f;
  --bronze-wash:#e8d9b6;
  --crimson:#8f3322;
  --crimson-strong:#7a2a1b;
  --crimson-wash:#ecd3ca;
  --fog:#3c5346;
  --fog-strong:#2d4136;
  --fog-wash:#d7e0d3;
  --gold:#a8791f;
  --shadow: 0 1px 0 rgba(35,26,16,.06);
  --radius: 3px;
  --bar: rgba(247,242,228,.86);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#161210;
    --surface:#1d1815;
    --surface-2:#251f1a;
    --edge:#3a2f25;
    --edge-soft:#2c241d;
    --ink:#ece3d1;
    --ink-dim:#b3a488;
    --ink-faint:#8a7c63;
    --bronze:#cf9648;
    --bronze-strong:#e2ab5c;
    --bronze-ink:#f1cf98;
    --bronze-wash:#3a2c17;
    --crimson:#c9573c;
    --crimson-strong:#dd6a4d;
    --crimson-wash:#3a221b;
    --fog:#7fa08c;
    --fog-strong:#96b4a1;
    --fog-wash:#20302a;
    --gold:#d9ae5f;
    --shadow: 0 1px 0 rgba(0,0,0,.4);
    --bar: rgba(29,24,21,.86);
  }
}
:root[data-theme="dark"]{
  --ground:#161210;
  --surface:#1d1815;
  --surface-2:#251f1a;
  --edge:#3a2f25;
  --edge-soft:#2c241d;
  --ink:#ece3d1;
  --ink-dim:#b3a488;
  --ink-faint:#8a7c63;
  --bronze:#cf9648;
  --bronze-strong:#e2ab5c;
  --bronze-ink:#f1cf98;
  --bronze-wash:#3a2c17;
  --crimson:#c9573c;
  --crimson-strong:#dd6a4d;
  --crimson-wash:#3a221b;
  --fog:#7fa08c;
  --fog-strong:#96b4a1;
  --fog-wash:#20302a;
  --gold:#d9ae5f;
  --shadow: 0 1px 0 rgba(0,0,0,.4);
  --bar: rgba(29,24,21,.86);
}

/* ===================== Base ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  color:var(--ink);
  text-wrap:balance;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
p{margin:0 0 1em; max-width:66ch;}
a{color:var(--bronze-strong);}
img{max-width:100%;}
strong{color:var(--ink); font-weight:600;}
::selection{background:var(--bronze); color:var(--surface);}
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px; }
.eyebrow{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-faint);
}
.num{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ===================== Top bar ===================== */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bar);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--edge);
}
.topbar-inner{
  max-width:1280px; margin:0 auto;
  padding:9px clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.brand-mark{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:700;
  font-size:1.06rem; letter-spacing:-.01em; color:var(--ink); line-height:1;
}
.brand-mark em{ font-style:italic; color:var(--crimson); }
.brand:hover .brand-mark{ color:var(--bronze-strong); }
.topnav{ display:flex; align-items:center; gap:4px 2px; flex-wrap:wrap; min-width:0; justify-content:flex-end; }
.topnav a{
  font-family:"Oswald",sans-serif;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none;
  padding:6px 11px; border-radius:var(--radius);
  border:1px solid transparent;
}
.topnav a:hover{ color:var(--ink); background:color-mix(in srgb, var(--bronze) 8%, transparent); }
.topnav a[aria-current="page"]{
  color:var(--bronze-strong);
  border-color:color-mix(in srgb, var(--bronze) 45%, var(--edge));
  background:color-mix(in srgb, var(--bronze) 10%, transparent);
}

/* ===================== Hero ===================== */
.hero{
  position:relative;
  padding: clamp(48px,9vw,84px) clamp(16px,4vw,40px) clamp(40px,6vw,56px);
  overflow:hidden;
  border-bottom:1px solid var(--edge);
  background:
    radial-gradient(60% 90% at 14% 0%, color-mix(in srgb, var(--fog) 20%, transparent), transparent 60%),
    radial-gradient(50% 70% at 88% 10%, color-mix(in srgb, var(--crimson) 12%, transparent), transparent 65%),
    var(--surface);
}
.hero::before{
  content:"";
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(38% 50% at 20% 30%, color-mix(in srgb, var(--fog) 16%, transparent), transparent 70%),
    radial-gradient(30% 45% at 78% 60%, color-mix(in srgb, var(--fog) 14%, transparent), transparent 70%);
  animation: drift 34s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-2%,1.5%,0) scale(1.04); }
}
.hero-inner{ max-width:1280px; margin:0 auto; position:relative; }
.wordmark{
  font-family:"Fraunces",serif;
  font-weight:700;
  font-style:italic;
  font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:.98;
  letter-spacing:-.01em;
  margin:0 0 .18em;
  color:var(--ink);
}
.wordmark em{ color:var(--crimson); font-style:italic; }
.hero-sub{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
  font-weight:500;
  color:var(--bronze-strong);
  margin-bottom:1.1em;
}
.hero-lede{
  max-width:56ch;
  font-size:1.08rem;
  color:var(--ink-dim);
}
.stat-strip{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:1.6em;
}
.stat-chip{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 16px 8px;
  background:var(--surface-2);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  min-width:104px;
}
.stat-chip b{
  font-family:"JetBrains Mono",monospace;
  font-size:1.15rem;
  color:var(--bronze-strong);
  font-variant-numeric:tabular-nums;
}
.stat-chip span{
  font-family:"Oswald",sans-serif;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Oswald",sans-serif;
  font-size:.84rem; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px;
  border-radius:var(--radius);
  border:1px solid var(--bronze);
  color:var(--bronze-strong);
  background:color-mix(in srgb, var(--bronze) 9%, var(--surface));
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:color-mix(in srgb, var(--bronze) 18%, var(--surface)); transform:translateY(-1px); }
.btn.primary{
  background:var(--bronze);
  border-color:var(--bronze-strong);
  color:var(--surface);
}
.btn.primary:hover{ background:var(--bronze-strong); }
.btn .ic{ width:1.05em; height:1.05em; }

/* ===================== Footer ===================== */
footer{
  max-width:1280px; margin:0 auto;
  padding:32px clamp(16px,4vw,40px) 60px;
  font-size:.82rem; color:var(--ink-faint);
  border-top:1px solid var(--edge);
}
footer a{ color:var(--ink-dim); }
.foot-grid{
  display:flex; flex-wrap:wrap; gap:18px 40px;
  align-items:baseline; justify-content:space-between;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot-links a{
  font-family:"Oswald",sans-serif; font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
}
.foot-links a:hover{ color:var(--ink); }