/* ============================================================================
   FENG SHUI HELP · site.css — "lucky, answered fast" (CD brand scheme v2)
   Lucky red + prosperity gold on warm paper · lo-shu seal-chop mark · serif
   headings, sans body · red ledger tables · hard CTA on every page.
   Tokens on :root + dark override. No framework, no external fonts.
   ============================================================================ */
:root{
  --bg:#fbf3e2;            /* warm golden paper */
  --surface:#fffdf6;
  --ink:#2e2418;
  --muted:#71624e;
  --red:#c03424;           /* lucky vermillion — THE brand colour + the click colour */
  --red-deep:#992818;
  --red-soft:#f8e7df;
  --gold:#b8860e;          /* prosperity gold — numbers, highlights, the mark's dots */
  --gold-soft:#f6ecd2;
  --good:#2f7a4e;          /* semantic green — 宜 "good to do" ONLY, never brand chrome */
  --line:#e9dcc2;
  --serif:Charter,'Bitstream Charter','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --max:42rem;
  --r:8px;
}
/* LIGHT-ONLY (Kong ruling 11-Jul: "I prefer light mode for SEO sites") — no prefers-color-scheme block ships.
   The dark values (lacquer #211510 / red #e05a41 / gold #dcae4a) survive as the DARK-GROUND ASSET PALETTE
   (OG images, social avatars, dark-chrome favicon) — see the brand guide §3. */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;}

/* ---- header: the red spine + the lo-shu seal chop ---- */
.site-header{border-top:4px solid var(--red);border-bottom:1px solid var(--line);background:var(--bg);
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:.9rem 1.25rem;max-width:64rem;margin:0 auto;}
a.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:700;font-size:1.18rem;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;}
/* THE ADAPTIVE 風水 BAGUA (Kong pick, logo R2): M1 solid chop by day, M2 open ink ring by night.
   Production = ONE assets/logo.svg with an internal prefers-color-scheme media query, 風水 OUTLINED to paths
   (no font dependency); template.js emits it inside a.brand. The two inline SVGs in the mock markup preview it. */
a.brand svg.logo{width:24px;height:24px;flex:0 0 auto;}   /* M1 solid chop = THE site mark (light-only site);
   M2 ink ring = the dark-ground ASSET variant (OG/social/dark-chrome favicon), not a site mode */
.site-nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto;}
.site-nav a{font-family:var(--sans);font-size:.85rem;letter-spacing:.02em;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;}
.site-nav a:hover{color:var(--red-deep);border-bottom-color:var(--red);}

/* ---- page shell ---- */
main.page{max-width:var(--max);margin:0 auto;padding:2.2rem 1.25rem 4rem;}

/* ---- homepage hero: the promise, up front ---- */
section.hero{padding:2.2rem 0 1.4rem;}
section.hero::before{content:"FREE CALCULATORS · LUCKY DIRECTIONS · 2026 WEALTH STARS";display:block;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.13em;color:var(--gold);margin-bottom:.9rem;}
section.hero h1{font-family:var(--serif);font-size:2.6rem;line-height:1.15;letter-spacing:-.015em;margin:0 0 .8rem;}
section.hero h1::after{content:"";display:block;width:3.5rem;height:3px;background:var(--gold);margin-top:1rem;}
p.hero-sub{font-size:1.05rem;color:var(--muted);max-width:34rem;margin:0;}

/* ---- the doors: benefit-led cards, red titles, gold FREE tags ---- */
section.doors{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;padding:1.6rem 0 0;}
a.door{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.15rem 1.05rem;text-decoration:none;transition:border-color .15s,transform .15s;}
a.door:hover{border-color:var(--red);transform:translateY(-1px);}
span.door-label{display:block;font-family:var(--serif);font-weight:700;font-size:1.06rem;color:var(--red-deep);margin-bottom:.35rem;}
span.door-blurb{display:block;font-size:.86rem;line-height:1.55;color:var(--muted);}
span.door-blurb strong{color:var(--gold);font-weight:700;}
@media (max-width:560px){section.doors{grid-template-columns:1fr;}}

/* ---- article body (bare elements from md.js) ---- */
main.page h1{font-family:var(--serif);font-size:2.1rem;line-height:1.2;letter-spacing:-.01em;margin:1.2rem 0 1rem;}
main.page h2{font-family:var(--serif);font-size:1.45rem;line-height:1.3;margin:2.4rem 0 .8rem;padding-top:1.2rem;
  border-top:1px solid var(--line);}
main.page h3{font-family:var(--serif);font-size:1.12rem;margin:1.8rem 0 .6rem;color:var(--red-deep);}
main.page p{margin:0 0 1.1rem;}
main.page a{color:var(--red-deep);text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:3px;text-decoration-thickness:1.5px;}
main.page a:hover{color:var(--red);}
main.page a.door{text-decoration:none;}   /* doors are cards, not prose links */
main.page ul,main.page ol{margin:0 0 1.2rem;padding-left:1.4rem;}
main.page li{margin-bottom:.45rem;}
main.page li::marker{color:var(--gold);}
main.page strong{color:var(--ink);}
main.page em{font-style:italic;}
main.page code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--gold-soft);
  color:var(--gold);padding:.1em .35em;border-radius:4px;}

/* ---- tables: the lucky ledger. Red header band, gold striping. ---- */
main.page table{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;display:block;overflow-x:auto;
  font-size:.92rem;line-height:1.5;}
main.page thead th{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--red);text-align:left;padding:.6rem .8rem;}
main.page thead th:first-child{border-radius:var(--r) 0 0 0;}
main.page thead th:last-child{border-radius:0 var(--r) 0 0;}
main.page tbody td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;}
main.page tbody tr:nth-child(even){background:var(--gold-soft);}
/* (dark thead/button color overrides removed — light-only) */

/* ---- the calculator: the instant-answer machine ---- */
.kua-tool{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem;margin:1.6rem 0;}
.kua-tool label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;}
.kua-tool input,.kua-tool select{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem;margin:0 0 1rem;width:100%;max-width:16rem;display:block;}
.kua-tool input:focus,.kua-tool select:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red);}
.kua-tool button{font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.02em;color:#fff;
  background:var(--red);border:0;border-radius:6px;padding:.75rem 1.5rem;cursor:pointer;}
.kua-tool button:hover{background:var(--red-deep);}
.kua-result{margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line);}
.kua-result .num{font-family:var(--serif);font-weight:700;font-size:3.6rem;line-height:1;color:var(--gold);}

/* ---- THE CTA BLOCK: every page sells the next step (needs a small template.js emit — see handoff) ---- */
.cta-block{background:linear-gradient(180deg,var(--gold-soft),transparent 160%);border:1px solid var(--gold);
  border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;margin:2.2rem 0 1rem;}
.cta-block p{margin:0 0 1rem;font-size:1.02rem;line-height:1.6;}
.cta-block p strong{color:var(--red-deep);}
a.cta-btn{display:inline-block;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;
  color:#fff;background:var(--red);border-radius:8px;padding:.85rem 1.7rem;text-decoration:none;
  box-shadow:0 3px 0 var(--red-deep);}
a.cta-btn:hover{background:var(--red-deep);}
main.page a.cta-btn{color:#fff;text-decoration:none;}
.cta-block .cta-note{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:.7rem 0 0;}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line);margin-top:2rem;}
.site-footer p{max-width:var(--max);margin:0 auto;padding:1.4rem 1.25rem 2.2rem;font-size:.8rem;color:var(--muted);}
.site-footer a{color:var(--red-deep);}