/* OZ'D · the answers layer.
   Same tokens as index.html so the two surfaces cannot drift apart visually.
   Dark is the default and the brand; light is opt-in via the lamp, never wired
   to prefers-color-scheme. Zero em-dashes anywhere in copy. */
:root{
  --base:#14100c; --base-2:#191410; --panel:#1e1813;
  --ink:#f4efe4; --ink-soft:#ded5c4; --muted:#a1968a; --faint:#6d6459;
  --road:#d9a441; --road-bright:#f0c46a; --road-deep:#a97c2c;
  --metal:linear-gradient(135deg,#f4dfae,#e0b45c 36%,#c9922f 68%,#9c6f24);
  --on-metal:#1a1409;
  --emerald:#5aa88a; --emerald-soft:#7cc0a4;
  --curtain:#94413f;
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.075);
  --stroke:rgba(232,214,178,.16); --hair:rgba(255,255,255,.08);
  --nav-bg:rgba(20,16,12,.76);
  --road-line:rgba(217,164,65,.30);
  --sel-bg:rgba(217,164,65,.12);
  --btn-shadow:0 12px 34px -14px rgba(217,164,65,.6);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ac:var(--road);
}
:root[data-theme="light"]{
  --base:#f3ede1; --base-2:#ebe3d3; --panel:#fbf8f1;
  --ink:#231c13; --ink-soft:#413728; --muted:#6d6153; --faint:#948876;
  --road:#a2731b; --road-bright:#7d5710; --road-deep:#8a6114;
  --metal:linear-gradient(135deg,#c08c2a,#a4741c 38%,#875d11 70%,#6a480b);
  --on-metal:#fdf8ec;
  --emerald:#2f7a5e; --emerald-soft:#276a51;
  --curtain:#8c3a38;
  --glass:rgba(70,52,22,.035); --glass2:rgba(70,52,22,.062);
  --stroke:rgba(70,52,22,.16); --hair:rgba(70,52,22,.11);
  --nav-bg:rgba(243,237,225,.82);
  --road-line:rgba(162,115,27,.34);
  --sel-bg:rgba(162,115,27,.13);
  --btn-shadow:0 10px 26px -14px rgba(70,52,22,.44);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--sel-bg); }
a{ color:inherit; }

/* the brick road, the page spine, same device as the home page */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(var(--road-line),var(--road-line)) 50% 0/1px 100% no-repeat;
  opacity:.5;
}
.wrap{ position:relative; z-index:1; }

nav{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:var(--nav-bg); border-bottom:1px solid var(--hair);
}
nav .in{ max-width:1100px; margin:0 auto; padding:13px 20px; display:flex; align-items:center; gap:18px; }
.mark{ font-weight:800; font-size:20px; letter-spacing:-.4px; text-decoration:none; }
.metal{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
nav .sp{ flex:1; }
nav a.back{ color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
nav a.back:hover{ color:var(--ink); }
.lamp{
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:var(--glass); border:1px solid var(--stroke); color:var(--ink); font-size:15px;
}
.ncta{
  background:var(--metal); color:var(--on-metal); text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; box-shadow:var(--btn-shadow); white-space:nowrap;
}

main{ max-width:720px; margin:0 auto; padding:54px 20px 40px; }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--road); margin:0 0 14px;
}
h1{ font-size:clamp(30px,5.4vw,44px); line-height:1.12; letter-spacing:-.9px; margin:0 0 18px; font-weight:800; }

/* the answer block. V3: the query is resolved before the first H2. */
.answer{
  background:var(--glass); border:1px solid var(--stroke); border-left:3px solid var(--road);
  border-radius:14px; padding:20px 22px; margin:0 0 34px; font-size:18px;
}
.answer p{ margin:0; }
.answer p + p{ margin-top:12px; }

h2{ font-size:clamp(21px,3.2vw,27px); line-height:1.25; letter-spacing:-.4px; margin:44px 0 14px; font-weight:750; scroll-margin-top:80px; }
h3{ font-size:19px; margin:28px 0 10px; font-weight:700; }
p{ margin:0 0 16px; color:var(--ink-soft); }
strong{ color:var(--ink); font-weight:700; }
main a{ color:var(--road-bright); text-underline-offset:3px; }
:root[data-theme="light"] main a{ color:var(--road-deep); }

blockquote{
  margin:24px 0; padding:4px 0 4px 20px; border-left:2px solid var(--curtain);
  font-size:19px; line-height:1.5; color:var(--ink); font-style:normal;
}
blockquote cite{ display:block; margin-top:8px; font-size:14px; color:var(--muted); font-style:normal; }

ul,ol{ margin:0 0 18px; padding-left:22px; color:var(--ink-soft); }
li{ margin:0 0 9px; }

.ledger{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0; }
.ledger .col{ background:var(--glass); border:1px solid var(--stroke); border-radius:14px; padding:18px; }
.ledger h4{ margin:0 0 12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--mono); }
.ledger .no h4{ color:var(--curtain); }
.ledger .yes h4{ color:var(--emerald); }
.ledger ul{ margin:0; padding-left:18px; font-size:15.5px; }
@media(max-width:620px){ .ledger{ grid-template-columns:1fr; } }

.cta{
  margin:46px 0 8px; padding:26px; border-radius:16px; text-align:center;
  background:var(--glass); border:1px solid var(--stroke);
}
.cta p{ margin:0 0 16px; color:var(--ink); font-size:18px; }
.cta a{
  display:inline-block; background:var(--metal); color:var(--on-metal); text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 26px; border-radius:999px; box-shadow:var(--btn-shadow);
}

.more{ margin:44px 0 0; border-top:1px solid var(--hair); padding-top:26px; }
.more h2{ margin-top:0; font-size:15px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--mono); color:var(--muted); }
.more ul{ list-style:none; padding:0; }
.more li{ margin:0 0 10px; }
.more a{ text-decoration:none; font-weight:600; color:var(--ink); }
.more a:hover{ color:var(--road-bright); }

footer{
  border-top:1px solid var(--hair); margin-top:44px;
  padding:26px 20px 40px; text-align:center; color:var(--faint); font-size:13.5px;
}
footer a{ color:var(--muted); }

/* hub */
.cards{ display:grid; gap:14px; margin:30px 0 0; }
.card{
  display:block; text-decoration:none; padding:22px;
  background:var(--glass); border:1px solid var(--stroke); border-radius:16px;
}
.card:hover{ background:var(--glass2); }
.card h2{ margin:0 0 7px; font-size:20px; }
.card p{ margin:0; font-size:15.5px; color:var(--muted); }

@media(hover:none){ .card:hover{ background:var(--glass); } }