/* ============================================================
   Elden Ring Build Planner — site.css
   Global design system: tokens, typography, layout, header,
   footer, buttons, cards, blog, breadcrumbs, pagination, FAQ.
   Framework-free. All fonts local. Theme: engraved dark-fantasy.
   ============================================================ */

/* ---------- Fonts (local, OFL) ---------- */
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sans";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sans";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sans";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sans";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Sans";src:url("../fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  /* Brand core (from brief) */
  --crimson:#A6192E;      --crimson-bright:#C9354B; --crimson-deep:#7A0F20; --crimson-glow:rgba(166,25,46,.32);
  --gold:#C6AC53;         --gold-bright:#E4CE84;    --gold-deep:#8A7228;    --gold-soft:rgba(198,172,83,.16);
  --purple:#711A80;       --purple-bright:#9B34AE; --purple-lite:#B45CC4;  --purple-soft:rgba(113,26,128,.24);

  /* Obsidian scale (backgrounds) */
  --ink-000:#000000;
  --ink-050:#08070A;
  --ink-100:#0C0B10;
  --ink-150:#121016;
  --ink-200:#17141C;
  --ink-250:#1E1A24;
  --ink-300:#2A2532;
  --ink-350:#38313F;
  --ink-400:#4A4152;

  /* Parchment / readable text */
  --parch:#EDE6D6;
  --parch-soft:#CFC6B2;
  --parch-mute:#9A9184;
  --line:rgba(198,172,83,.18);
  --line-2:rgba(198,172,83,.30);
  --line-cool:rgba(255,255,255,.08);

  /* Roles */
  --bg:var(--ink-100);
  --surface:var(--ink-200);
  --surface-2:var(--ink-250);
  --surface-3:var(--ink-300);
  --text:var(--parch);
  --text-soft:var(--parch-soft);
  --text-mute:var(--parch-mute);
  --heading:#F5EFE0;
  --action:var(--crimson);
  --action-hover:var(--crimson-bright);
  --accent:var(--gold);
  --arcane:var(--purple-bright);

  /* Status */
  --ok:#4FB477; --warn:#D6A93A; --err:#E0526A;

  /* Structure */
  --radius-s:6px; --radius:12px; --radius-l:18px; --radius-xl:26px;
  --shadow-s:0 2px 8px rgba(0,0,0,.5);
  --shadow:0 12px 32px rgba(0,0,0,.55);
  --shadow-l:0 26px 60px rgba(0,0,0,.62);
  --glow-gold:0 0 0 1px var(--line-2), 0 0 26px rgba(198,172,83,.10);
  --wrap:1200px; --wrap-narrow:820px;
  --space:clamp(3.2rem,6vw,6rem);
  --t-fast:.16s ease; --t:.28s cubic-bezier(.4,0,.2,1); --t-slow:.5s cubic-bezier(.4,0,.2,1);

  /* Type */
  --f-display:"Cinzel",Georgia,serif;
  --f-serif:"Cormorant",Georgia,serif;
  --f-sans:"Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul[class]{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* JS reveal guard */
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important}}

/* ---------- Base ---------- */
body.site-body{
  font-family:var(--f-sans);
  background:
    radial-gradient(1200px 620px at 78% -8%,rgba(113,26,128,.16),transparent 60%),
    radial-gradient(900px 520px at 8% 4%,rgba(166,25,46,.14),transparent 58%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
.wrap-narrow{max-width:820px}
.prose-meta{font-size:.85rem;color:var(--text-mute);font-style:italic;margin-bottom:1.4rem}

/* Skip link */
.skip-link{position:fixed;left:1rem;top:-100px;z-index:1200;background:var(--crimson);color:#fff;
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600;transition:top var(--t)}
.skip-link:focus{top:1rem}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);color:var(--heading);line-height:1.14;letter-spacing:.01em;font-weight:700}
h1,h2,h3,h4,h5,h6,.btn,button,input[type="button"],input[type="submit"]{text-transform:capitalize!important}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
h4{font-size:1.08rem;font-weight:600}
p{color:var(--text-soft)}
a{text-decoration:none;transition:color var(--t-fast)}
.eyebrow{font-family:var(--f-sans);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.lead{font-family:var(--f-serif);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5;color:var(--parch);font-weight:500}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:.85rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);
  text-align:center;line-height:1.1}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:translateY(1px)}
.btn-solid{background:linear-gradient(180deg,var(--crimson-bright),var(--crimson));color:#fff;
  box-shadow:0 8px 22px var(--crimson-glow),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-solid:hover{box-shadow:0 12px 30px var(--crimson-glow),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#211a06;
  box-shadow:0 8px 22px rgba(198,172,83,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(198,172,83,.36)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);background:var(--gold-soft)}
.btn-lg{padding:1.05rem 2rem;font-size:1.02rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:900;
  background:rgba(10,9,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.site-header.scrolled{background:rgba(8,7,10,.92);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand-mark{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.brand-mark svg{width:42px;height:42px}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--heading);letter-spacing:.02em}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}
.nav-links-bar{display:flex;align-items:center;gap:.15rem}
.nav-links-bar a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-radius:10px;
  font-size:.9rem;font-weight:500;color:var(--text-soft);position:relative}
.nav-links-bar a .nav-ico{display:inline-flex;width:18px;height:18px}
.nav-links-bar a .nav-ico svg{width:18px;height:18px}
.nav-links-bar a:hover{color:var(--gold-bright);background:rgba(198,172,83,.08)}
.nav-links-bar a.active{color:var(--gold-bright)}
.nav-links-bar a.active::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-cta .btn{padding:.6rem 1.1rem;font-size:.88rem}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:10px;background:transparent;
  cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--gold);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.head-progress{height:2px;background:transparent}
.head-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--crimson),var(--gold));transition:width .1s linear}

/* Mobile drawer */
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);z-index:1000}
.nav-scrim.open{opacity:1;visibility:visible}
.nav-drawer{position:fixed;top:0;right:-340px;width:min(86vw,320px);height:100%;z-index:1001;
  background:linear-gradient(180deg,var(--ink-200),var(--ink-100));border-left:1px solid var(--line-2);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);transition:right var(--t-slow);display:flex;flex-direction:column;padding:1.2rem}
.nav-drawer.open{right:0}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.drawer-title{font-family:var(--f-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.9rem;color:var(--gold)}
.drawer-close{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center}
.drawer-close svg{width:20px;height:20px;stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round}
.nav-links-drawer{display:flex;flex-direction:column;gap:.2rem;margin-top:1rem}
.nav-links-drawer a{display:flex;align-items:center;gap:.8rem;padding:.85rem .8rem;border-radius:10px;color:var(--text-soft);font-weight:500}
.nav-links-drawer a .nav-ico{width:20px;height:20px;display:inline-flex}
.nav-links-drawer a .nav-ico svg{width:20px;height:20px}
.nav-links-drawer a:hover{background:rgba(198,172,83,.08);color:var(--gold-bright)}
.drawer-note{display:flex;align-items:center;gap:.55rem;margin-top:auto;padding:.9rem;border:1px solid var(--line);
  border-radius:12px;font-size:.82rem;color:var(--text-mute);background:var(--surface)}
.drawer-note svg{width:20px;height:20px;fill:var(--gold);flex:0 0 auto}
.drawer-foot{display:flex;justify-content:space-between;font-size:.74rem;color:var(--text-mute);margin-top:.9rem}

.nav-ico svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Section rhythm ---------- */
.sct{padding-block:var(--space)}
.sct-alt{background:linear-gradient(180deg,rgba(0,0,0,.24),transparent),var(--ink-150);
  border-block:1px solid var(--line)}
.sct-head{max-width:720px;margin-bottom:2.6rem}
.sct-head.center{margin-inline:auto;text-align:center}
.sct-head .eyebrow{margin-bottom:1rem}
.sct-head p{margin-top:.9rem;font-size:1.05rem}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,var(--ink-100),#050406);border-top:1px solid var(--line-2);margin-top:var(--space)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;padding-block:3.4rem 2.4rem}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{font-size:.9rem;color:var(--text-mute);max-width:38ch}
.footer-privacy{display:flex;align-items:center;gap:.5rem;margin-top:1rem!important;font-size:.82rem;color:var(--gold)!important}
.footer-privacy svg{width:18px;height:18px;fill:var(--gold)}
.footer-col h4{font-family:var(--f-display);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.55rem}
.footer-col a{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--text-mute)}
.footer-col a:hover{color:var(--gold-bright)}
.footer-link-arrow{width:15px;height:15px;stroke:var(--crimson-bright);stroke-width:2;fill:none;opacity:0;transform:translateX(-4px);transition:opacity var(--t),transform var(--t)}
.footer-col a:hover .footer-link-arrow{opacity:1;transform:none}
.footer-note{border-top:1px solid var(--line);padding-block:1.4rem;font-size:.8rem;color:var(--text-mute);line-height:1.7}
.footer-note strong{color:var(--gold)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.4rem 2.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--text-mute)}
.footer-keyword-link{color:var(--gold);font-weight:600}
.footer-badges{display:flex;flex-wrap:wrap;gap:.8rem}
.footer-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:20px;font-size:.74rem}
.footer-badge svg{width:14px;height:14px;stroke:var(--ok);stroke-width:2.5;fill:none}

/* Back to top */
.back-top{position:fixed;right:1.4rem;bottom:1.4rem;width:48px;height:48px;border-radius:50%;z-index:800;
  background:linear-gradient(180deg,var(--crimson-bright),var(--crimson-deep));border:1px solid var(--line-2);
  cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--t),visibility var(--t),transform var(--t);box-shadow:var(--shadow)}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.back-top:hover{transform:translateY(-3px)}

/* Toast */
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(30px);z-index:1300;
  background:var(--ink-300);color:var(--parch);border:1px solid var(--line-2);border-radius:12px;
  padding:.85rem 1.3rem;font-size:.9rem;font-weight:500;box-shadow:var(--shadow-l);opacity:0;visibility:hidden;
  transition:opacity var(--t),transform var(--t),visibility var(--t);display:flex;align-items:center;gap:.55rem}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%)}
.toast svg{width:18px;height:18px;stroke:var(--gold);stroke-width:2.4;fill:none}

/* ---------- Cards / blog ---------- */
.blog-grid{display:grid;gap:1.6rem}
.blog-grid-3{grid-template-columns:repeat(3,1fr)}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);overflow:hidden;transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.post-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.post-card .pc-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-300)}
.post-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.post-card:hover .pc-media img{transform:scale(1.05)}
.pc-tag{position:absolute;top:.8rem;left:.8rem;background:rgba(8,7,10,.82);border:1px solid var(--line-2);
  color:var(--gold-bright);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:20px;backdrop-filter:blur(4px)}
.pc-body{display:flex;flex-direction:column;gap:.6rem;padding:1.3rem;flex:1}
.pc-body h3{font-size:1.12rem;line-height:1.28}
.pc-body h3 a{color:var(--heading)}
.pc-body h3 a:hover{color:var(--gold-bright)}
.pc-excerpt{font-size:.9rem;color:var(--text-mute);flex:1}
.pc-meta{display:flex;align-items:center;gap:1rem;font-size:.78rem;color:var(--text-mute);
  padding-top:.9rem;margin-top:.3rem;border-top:1px solid var(--line)}
.pc-meta span{display:inline-flex;align-items:center;gap:.35rem}
.pc-meta svg{width:14px;height:14px;stroke:var(--gold);stroke-width:1.8;fill:none}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:3rem}
.pager a,.pager span{min-width:44px;height:44px;padding:0 .9rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:10px;font-weight:600;font-size:.92rem;color:var(--text-soft);
  transition:all var(--t-fast);gap:.4rem}
.pager a:hover{border-color:var(--gold);color:var(--gold-bright);background:var(--gold-soft)}
.pager .current{background:linear-gradient(180deg,var(--crimson-bright),var(--crimson));color:#fff;border-color:transparent}
.pager .disabled{opacity:.35;pointer-events:none}
.pager svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--text-mute);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumbs a{color:var(--gold)}
.crumbs a:hover{color:var(--gold-bright)}
.crumbs span[aria-hidden]{color:var(--ink-400)}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem);position:relative;
  background:linear-gradient(180deg,rgba(113,26,128,.14),transparent 70%),var(--ink-150);border-bottom:1px solid var(--line)}
.page-hero .crumbs{margin-bottom:1.3rem}
.page-hero h1{max-width:20ch}
.page-hero .page-lead{margin-top:1.1rem;max-width:60ch;font-size:1.08rem;color:var(--text-soft)}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:.9rem;max-width:var(--wrap-narrow);margin-inline:auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.faq-item[open]{border-color:var(--line-2);box-shadow:var(--shadow-s)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--heading)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-ico{flex:0 0 auto;width:24px;height:24px;position:relative;transition:transform var(--t)}
.faq-item summary .faq-ico::before,.faq-item summary .faq-ico::after{content:"";position:absolute;background:var(--gold);border-radius:2px}
.faq-item summary .faq-ico::before{top:11px;left:3px;right:3px;height:2px}
.faq-item summary .faq-ico::after{left:11px;top:3px;bottom:3px;width:2px;transition:transform var(--t)}
.faq-item[open] summary .faq-ico::after{transform:scaleY(0)}
.faq-answer{padding:0 1.3rem 1.2rem;color:var(--text-soft);font-size:.95rem}
.faq-answer a{color:var(--gold);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- Prose (articles + legal) ---------- */
.prose{color:var(--text-soft);font-size:1.02rem;line-height:1.8}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--heading);margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line);scroll-margin-top:90px}
.prose h3{font-size:1.25rem;color:var(--gold-bright);margin-top:1.9rem;scroll-margin-top:90px}
.prose p{color:var(--text-soft)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.prose a:hover{color:var(--gold-bright);text-decoration-color:var(--gold)}
.prose strong{color:var(--parch);font-weight:600}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{color:var(--text-soft)}
.prose li::marker{color:var(--gold)}
.prose blockquote{border-left:3px solid var(--crimson);background:var(--surface);padding:1rem 1.3rem;border-radius:0 12px 12px 0;
  font-family:var(--f-serif);font-size:1.2rem;color:var(--parch);font-style:italic}
.prose code{background:var(--ink-300);border:1px solid var(--line);border-radius:6px;padding:.12em .5em;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-bright)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin-block:.5rem}
.prose table th,.prose table td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left}
.prose table th{background:var(--surface-2);color:var(--gold-bright);font-family:var(--f-sans);font-weight:600}
.prose table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.prose .glyph-inline{font-family:var(--f-serif);color:var(--gold-bright);font-weight:600;padding:0 .1em}
.prose figure img{border-radius:12px;border:1px solid var(--line)}
.prose figcaption{font-size:.82rem;color:var(--text-mute);text-align:center;margin-top:.6rem}
.table-scroll{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch}

/* Callout box */
.callout{border:1px solid var(--line-2);border-left:3px solid var(--gold);background:var(--surface);
  border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;font-size:.95rem}
.callout strong{color:var(--gold-bright)}

/* ---------- Guide layout ---------- */
.guide-layout{display:grid;grid-template-columns:1fr 280px;gap:2.6rem;padding-block:2.6rem}
.guide-article{min-width:0}
.guide-hero-img{margin-bottom:1.8rem;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line)}
.guide-hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.guide-side{align-self:start;position:sticky;top:90px;display:flex;flex-direction:column;gap:1.4rem}
.side-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-l);padding:1.3rem}
.side-card h4{font-family:var(--f-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.toc-list{display:flex;flex-direction:column;gap:.15rem}
.toc-list a{font-size:.88rem;color:var(--text-mute);padding:.35rem .5rem;border-radius:8px;border-left:2px solid transparent;display:block}
.toc-list a:hover{color:var(--gold-bright);background:rgba(198,172,83,.06)}
.toc-list a.active{color:var(--gold-bright);border-left-color:var(--gold);background:rgba(198,172,83,.08)}
.related-list{display:flex;flex-direction:column;gap:.7rem}
.related-list a{display:block;font-size:.9rem;color:var(--text-soft);padding-bottom:.7rem;border-bottom:1px solid var(--line);line-height:1.4}
.related-list a:last-child{border-bottom:0;padding-bottom:0}
.related-list a:hover{color:var(--gold-bright)}
.guide-tag-pill{display:inline-block;background:var(--gold-soft);border:1px solid var(--line-2);color:var(--gold-bright);
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:20px;margin-bottom:1rem}
.guide-lead{font-family:var(--f-serif);font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--parch);margin-top:1rem;max-width:60ch}
.guide-meta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.3rem;font-size:.85rem;color:var(--text-mute)}
.gm-item{display:inline-flex;align-items:center;gap:.45rem}
.gm-item svg{width:16px;height:16px;stroke:var(--gold);stroke-width:1.8;fill:none}
.guide-cta{margin-top:2.6rem;border:1px solid var(--line-2);border-radius:var(--radius-l);
  background:linear-gradient(135deg,rgba(166,25,46,.16),rgba(113,26,128,.14));padding:1.8rem;text-align:center}
.guide-cta h3{margin-bottom:.6rem}
.guide-cta p{margin-bottom:1.3rem;color:var(--text-soft)}
.related-cards{margin-top:var(--space)}
.prevnext{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.prevnext a{flex:1;min-width:240px;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;background:var(--surface);transition:border-color var(--t),transform var(--t)}
.prevnext a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.prevnext .pn-dir{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
.prevnext .pn-title{display:block;margin-top:.35rem;color:var(--heading);font-weight:500;font-size:.95rem}
.prevnext .pn-next{text-align:right}

/* ---------- Contact form ---------- */
.form-grid{display:grid;gap:1.1rem;max-width:640px}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.85rem;font-weight:600;color:var(--parch)}
.field .req{color:var(--crimson-bright)}
.input,.textarea,.select{width:100%;background:var(--ink-150);border:1px solid var(--line-2);border-radius:10px;
  padding:.8rem 1rem;color:var(--parch);transition:border-color var(--t),box-shadow var(--t)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.textarea{resize:vertical;min-height:140px}
.field-hint{font-size:.8rem;color:var(--text-mute)}
.field-error{font-size:.8rem;color:var(--err);display:none}
.field.invalid .input,.field.invalid .textarea{border-color:var(--err)}
.field.invalid .field-error{display:block}
.form-status{padding:.9rem 1.1rem;border-radius:10px;font-size:.9rem;display:none}
.form-status.ok{display:block;background:rgba(79,180,119,.12);border:1px solid rgba(79,180,119,.4);color:#8fdcae}
.form-status.err{display:block;background:rgba(166,25,46,.12);border:1px solid rgba(201,53,75,.45);color:#e9a3ad}
.stack{display:flex;flex-direction:column;gap:1.15rem}

/* Contact layout */
.contact-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:2.4rem;align-items:start}
@media (max-width:820px){.contact-layout{grid-template-columns:1fr;gap:1.8rem}}
.info-grid-1{grid-template-columns:1fr}

/* 404 */
.error-hero{text-align:center;padding-block:clamp(3rem,9vw,6rem);position:relative}
.error-sigil{display:flex;justify-content:center;margin-bottom:1.5rem;animation:spin-slow 60s linear infinite}
.error-sigil svg{max-width:min(60vw,200px);height:auto}
.error-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.error-sigil{animation:none}}

/* Info cards grid (about / contact) */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.info-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-l);padding:1.5rem}
.info-card .ic-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(166,25,46,.2),rgba(113,26,128,.2));border:1px solid var(--line-2)}
.info-card .ic-ico svg{width:24px;height:24px;stroke:var(--gold);stroke-width:1.8;fill:none}
.info-card h3{font-size:1.1rem;margin-bottom:.5rem}
.info-card p{font-size:.9rem;color:var(--text-mute)}
.info-card a{color:var(--gold)}

/* Disclaimer banner */
.affil-note{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);
  padding:1.1rem 1.3rem;font-size:.86rem;color:var(--text-mute);display:flex;gap:.8rem;align-items:flex-start}
.affil-note svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1.8;fill:none;flex:0 0 auto;margin-top:2px}
.affil-note strong{color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .guide-layout{grid-template-columns:1fr}
  .guide-side{position:static;flex-direction:row;flex-wrap:wrap}
  .guide-side .side-card{flex:1;min-width:240px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links-bar{display:none}
  .burger{display:flex}
  .nav-cta .btn-hero-nav{display:none}
  .blog-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap{padding-inline:1rem}
  .nav{height:64px;gap:.7rem}
  .brand{gap:.55rem;min-width:0}
  .brand-mark,.brand-mark svg{width:36px;height:36px}
  .brand-text{min-width:0}
  .brand-text b{font-size:.86rem;white-space:nowrap}
  .brand-text span{font-size:.56rem;letter-spacing:.1em;white-space:nowrap}
  .burger{width:42px;height:42px;flex:0 0 auto}
  .sct{padding-block:clamp(2.5rem,10vw,3.5rem)}
  .sct-head{margin-bottom:1.8rem}
  .sct-head p{font-size:.98rem}
  .page-hero{padding-block:2.7rem 2rem}
  .page-hero .page-lead{font-size:1rem}
  .lead{font-size:1.16rem;line-height:1.55}
  .btn-lg{padding:.9rem 1.25rem;font-size:.95rem}
  .blog-grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem;padding-block:2.6rem 2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-block:1.2rem 1.5rem}
  .footer-badges{gap:.45rem}
  .guide-side{flex-direction:column}
  .prevnext a{min-width:100%}
}
@media (max-width:380px){
  .wrap{padding-inline:.85rem}
  .brand-text b{font-size:.78rem}
  .brand-text span{font-size:.5rem;letter-spacing:.08em}
}