/* The Far Queen — your paper white, Grok's structure.
   Structure/spacing/typography from the approved dark design; palette inverted to white. */
:root{
  --bg:#FBFAF7; --surface:#FFFFFF; --surface-2:#F3F1EC;
  --fg:#1A1A1A; --muted:#5C5850; --subtle:#8C877D;
  --accent:#3E7C93; --accent-fg:#FFFFFF; --border:#E2DED5;
  --display:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 1px 2px rgba(26,26,26,.04),0 8px 24px rgba(26,26,26,.05);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--fg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.6;font-weight:300}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.14;margin:0;font-weight:400}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.75}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--border);background:rgba(251,250,247,.94);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
.hd{display:flex;align-items:center;gap:32px;height:68px}
.brand{font-family:var(--display);font-size:1.45rem;color:var(--fg);letter-spacing:.005em}
.brand span{color:var(--accent);font-style:italic}
nav{margin-left:auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
nav a{color:var(--muted);font-size:.92rem;transition:color .2s var(--ease)}
nav a:hover{color:var(--fg);opacity:1}
nav .pill{background:var(--fg);color:#fff;padding:9px 20px;border-radius:999px;font-size:.88rem;font-weight:400;transition:opacity .2s var(--ease)}
nav .pill:hover{opacity:.88}

/* ---------- hero ---------- */
.hero{padding:92px 0 72px;border-bottom:1px solid var(--border)}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--subtle);margin-bottom:22px}
.hero h1{font-size:clamp(2.8rem,7vw,4.6rem);margin-bottom:16px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{font-size:1.2rem;color:var(--muted);max-width:60ch;margin:0 0 32px;font-weight:300}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-size:.95rem;border:1px solid var(--border);transition:all .2s var(--ease)}
.btn-p{background:var(--fg);color:#fff;border-color:var(--fg)}
.btn-p:hover{opacity:.88}
.btn-g{color:var(--fg)}
.btn-g:hover{border-color:var(--accent);color:var(--accent);opacity:1}

/* ---------- sections ---------- */
section{padding:72px 0;border-bottom:1px solid var(--border)}
h2.s{font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:10px}
.sub{color:var(--muted);margin:0 0 36px;max-width:62ch;font-weight:300}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{font-size:1.35rem;margin-bottom:6px}
.card .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.card p{color:var(--muted);margin:0;font-size:.95rem;font-weight:300}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem}
th{text-align:left;padding:13px 14px;border-bottom:1px solid var(--fg);color:var(--subtle);font-weight:400;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
td{padding:13px 14px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:top;font-weight:300}
td b,td strong{color:var(--fg);font-weight:400}
tbody tr:hover td{background:var(--surface-2)}

/* ---------- code ---------- */
pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:22px;overflow-x:auto;font-size:.82rem;line-height:1.7;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;margin:22px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;color:var(--accent)}
pre code{color:inherit}

/* ---------- prose ---------- */
main p{max-width:68ch;font-weight:300}
.prose ul,.prose ol{color:var(--muted);max-width:68ch;padding-left:20px;margin:18px 0}
.prose li{margin-bottom:9px;font-weight:300}
hr{border:none;border-top:1px solid var(--border);margin:60px 0}
.muted{color:var(--muted)}
blockquote{border-left:2px solid var(--accent);padding-left:20px;color:var(--muted);font-style:italic;margin:26px 0;max-width:64ch}

/* ---------- your old page, folded down ---------- */
.legacy{margin-top:56px;border-top:1px dashed var(--border);padding-top:40px}
.legacy .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--subtle);margin-bottom:24px}
.legacy h1{font-family:var(--display);font-size:2rem;color:var(--fg);margin:26px 0 10px}
.legacy h2{font-family:var(--display);font-size:1.5rem;color:var(--fg);margin:34px 0 10px}
.legacy h3{font-family:var(--display);font-size:1.2rem;color:var(--fg);margin:24px 0 8px}
.legacy p,.legacy li{color:var(--muted);max-width:68ch}
.legacy a{color:var(--accent)}
.legacy table td,.legacy table th{border-color:var(--border)}
.legacy img{max-width:100%;height:auto}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:52px 0;color:var(--subtle);font-size:.88rem;background:var(--surface)}
.fcols{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:28px}
.fcols a{color:var(--muted);display:block;padding:4px 0;font-weight:300}
.fcols a:hover{color:var(--accent)}
.fh{color:var(--fg);margin-bottom:10px;font-size:.95rem}
.fb{border-top:1px solid var(--border);padding-top:22px;color:var(--subtle);font-size:.82rem}

@media(max-width:760px){
  .hd{height:auto;padding:16px 0;gap:16px;flex-wrap:wrap}
  nav{margin-left:0;gap:18px}
  .hero{padding:56px 0 44px}
  section{padding:52px 0}
}

/* ============================================================
   30px page margin — the whole site floats on the paper
   ============================================================ */
body{padding:30px}
@media(max-width:760px){body{padding:14px}}

/* ============================================================
   MEGA MENU
   ============================================================ */
.mnav{position:relative}
.mnav > a.mtop{
  color:var(--muted);font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;font-family:inherit;padding:0;transition:color .2s var(--ease);
}
.mnav > a.mtop:hover{color:var(--fg)}
.mnav.open > a.mtop{color:var(--fg)}
.mnav .caret{font-size:.6rem;transform:translateY(-1px);transition:transform .22s var(--ease)}
.mnav.open .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 14px);left:-40px;z-index:120;
  min-width:760px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(26,26,26,.13);
  padding:30px;display:none;grid-template-columns:repeat(4,1fr);gap:26px 34px;
}
.mnav.open .mega{display:grid;animation:drop .22s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega .col h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);margin:0 0 12px;font-weight:400}
.mega .col a{display:block;padding:5px 0;color:var(--muted);font-size:.92rem;line-height:1.4;transition:color .15s var(--ease)}
.mega .col a:hover{color:var(--accent);opacity:1}
.mega .col a b{display:block;color:var(--fg);font-weight:400}
.mega .col a i{font-style:normal;font-size:.8rem;color:var(--subtle)}
.mega .feat{
  grid-column:1/-1;border-top:1px solid var(--border);padding-top:22px;margin-top:2px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.mega .feat div{font-family:var(--display);font-size:1.25rem;color:var(--fg)}
.mega .feat p{margin:4px 0 0;color:var(--muted);font-size:.9rem;max-width:52ch}

/* --- mobile: dropdown drawer --- */
.burger{display:none;background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;align-items:center;gap:9px;color:var(--fg);font-family:var(--sans);font-size:.85rem}
.burger .bars{width:16px;height:2px;background:var(--fg);position:relative;display:block}
.burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--fg);transition:transform .22s var(--ease)}
.burger .bars::before{top:-5px}.burger .bars::after{top:5px}
.burger.on .bars{background:transparent}
.burger.on .bars::before{transform:translateY(5px) rotate(45deg)}
.burger.on .bars::after{transform:translateY(-5px) rotate(-45deg)}

.drawer{display:none;position:fixed;inset:0;z-index:200;background:rgba(251,250,247,.98);
  backdrop-filter:blur(14px);padding:76px 24px 40px;overflow-y:auto}
.drawer.on{display:block;animation:fadein .2s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.drawer .x{position:absolute;top:26px;right:26px;font-size:1.6rem;color:var(--muted);background:none;border:0;cursor:pointer;line-height:1}
.drawer h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);margin:30px 0 10px;font-weight:400}
.drawer h4:first-of-type{margin-top:0}
.drawer a{display:block;padding:9px 0;color:var(--fg);font-size:1.05rem;font-family:var(--display);border-bottom:1px solid var(--border)}

@media(max-width:960px){
  .mega{min-width:min(92vw,560px);grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .mnav{display:none}
  .burger{display:inline-flex}
  nav.desknav{display:none}
}