/* 知路 · Your Bazi Path — s88 (2026-10-17) palette; s89 (2026-10-18) style A「宣紙淡雅」:
   宣紙米色底 · 朱紅印章 · 墨色直角掣 · 五行 寶石（土啡、金金；木火調過，紅綠色盲都分得開）
   中文標題 霞鶩文楷 · 中文內文 思源黑體 · 英文標題 Lora · 英文內文 Inter — all self-hosted (static/fonts/site). */
@import url('fonts/site/fonts.css');
@import url('fonts/cormorant/cormorant.css');

:root {
  --bg: #f1ebdf;
  --card: #f8f4ec;
  --ink: #1e1c19;
  --muted: #6b6359;
  --line: #d9cfbd;
  --soft: #ebe3d4;
  --btn: #1e1c19;
  --btn-ink: #f6efe2;
  --accent: #1e1c19;
  --seal: #a8322a;
  /* 五行 — order 木 火 土 金 水. Checked for deuteranopia + protanopia separation and ≥3:1 on --card. */
  --wood: #20977a; --fire: #ca214b; --earth: #5f3a1f; --metal: #b5861c; --water: #1f4f9a;
  --radius: 3px;
  --head-weight: 600;
  --serif: "Lora", "LXGW WenKai TC", serif;          /* headings + 干支 glyphs */
  --sans: "Inter", "Noto Sans TC", sans-serif;        /* body */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(circle at 18% 8%, #f8f3ea 0, transparent 45%), radial-gradient(circle at 85% 92%, #e9e0cf 0, transparent 55%); background-attachment: fixed; color: var(--ink); font: 17px/1.75 var(--sans); }
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 700px; margin: 0 auto; }


/* header */
.site-head { border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.brand { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.seal { display: block; width: 42px; height: 42px; }   /* static/img/logo.svg — 小篆 seal, edited with tools/art_editor */
.brand-zh { font: var(--head-weight) 24px/1 var(--serif); letter-spacing: .1em; }
.brand-en { font-size: 12px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-size: 15px; opacity: .85; }
.nav a:hover { opacity: 1; color: var(--accent); }
.nav a.on { opacity: 1; font-weight: 600; border-bottom: 2px solid var(--seal); }
.nav .lang { background: var(--seal); color: #fff; border-radius: var(--radius); padding: 2px 12px; }
.nav .lang:hover { background: #8e2922; color: #fff; }

/* type */
h1, h2, h3 { font-family: var(--serif); font-weight: var(--head-weight); line-height: 1.3; letter-spacing: .02em; }
h1 { font-size: 36px; margin: 44px 0 12px; }
h2 { font-size: 24px; margin: 40px 0 12px; }
h3 { font-size: 19px; margin: 0 0 8px; }
.lead { font-size: 18px; }
/* Chinese breaks between any two characters, which splits words (知｜道). keep-all breaks only at
   punctuation; overflow-wrap is the safety net for a clause too long for a phone. */
h1, h2, h3, .lead, .eyebrow { word-break: keep-all; overflow-wrap: anywhere; }
.eyebrow { color: var(--seal); letter-spacing: .3em; font: 22px/1.3 var(--serif); margin: 0 0 4px; }
.meta { color: var(--muted); margin-top: -4px; }
.hint { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 4px 0 12px; }
.small { font-size: 13px; }
.note { background: var(--soft); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 4px; }

/* hero */
/* Landing: the painting fills the right of the first screen and runs to the window edge; the words
   sit on the left and overlap it a little, a soft paper glow keeping them readable. */
html, body { overflow-x: clip; }
.hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); padding: 24px 0 40px; box-sizing: border-box; }
.hero > div { position: relative; z-index: 1; max-width: 600px; }
.hero > div h1, .hero > div p:not(.actions) { text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 2px var(--bg); }
.hero-art { position: absolute; z-index: 0; top: 46%; transform: translateY(-50%); right: calc(50% - 50vw + 4vw);
  width: min(48vw, 680px, (100vh - 73px) * .82);
  width: min(48vw, 680px, (100svh - 73px) * .82); }   /* svh: iPad Safari's 100vh includes the space under its toolbars */
/* soften the painting's left and right edges, where its mist and river end in a hard line */
.hero-art svg { -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 91%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 4%, #000 91%, transparent); }   /* 1.02 ≈ the painting's 520:470, less room for its caption */
.hero h1 { font-size: 58px; line-height: 1.25; margin-top: 12px; letter-spacing: .05em; }
.hero > * { min-width: 0; }
.hero-art { margin: 0; }  /* position: see .hero above */
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-art figcaption { text-align: center; font: 14px var(--serif); letter-spacing: .3em; color: var(--muted); margin-top: 4px; }
.hero .wuxing { max-width: 380px; justify-self: center; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 28px 0 56px; margin-top: 12px; border-top: 1px solid var(--line); }
.three > div { padding: 4px 0 0; }
.three h3 { font-size: 21px; }
.three .num { font: 600 14px var(--serif); color: var(--seal); letter-spacing: .2em; margin: 0 0 4px; }
.three p { margin: 0; color: var(--muted); font-size: 15px; }

/* buttons, cards, forms */
.btn { display: inline-block; background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); border-radius: var(--radius); padding: 11px 24px; text-decoration: none; font: 500 16px var(--sans); cursor: pointer; transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 12px 0; backdrop-filter: blur(8px); }
.form .field-label { display: block; font-weight: 600; margin-top: 20px; }
.form .field-label:first-child { margin-top: 0; }
select, input[type=time], input[type=email], input[type=search], input:not([type]) {
  width: 100%; font: 16px var(--sans); padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); color: var(--ink);
}
.row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 15px; }
.check input { margin-top: 6px; accent-color: var(--accent); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.consent { margin-top: 20px; }
.form .btn { margin-top: 16px; }
.errors { border: 1px solid var(--fire); color: var(--fire); border-radius: var(--radius); padding: 8px 16px; }
.errors p { margin: 4px 0; }

/* chart */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.pillar { padding: 10px 0 12px; border-radius: var(--radius); }
.pillar.dm { background: var(--soft); outline: 1px solid var(--accent); }
.pillar.blank .glyph { color: var(--line); }
.pillar-label { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.glyph { font: 600 46px/1.25 var(--serif); }
.pillar-sub { font-size: 13px; color: var(--muted); }
.el-wood { color: var(--wood); } .el-fire { color: var(--fire); } .el-earth { color: var(--earth); }
.el-metal { color: var(--metal); } .el-water { color: var(--water); }
.dm-card { display: flex; gap: 20px; align-items: flex-start; }
.dm-card p { margin: 0 0 8px; }
.dm-glyph { font: 600 68px/1 var(--serif); padding-top: 4px; }
.wx-card { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.wx-card .wuxing { width: 100%; max-width: 360px; justify-self: center; }
.wx-read p { margin: 0 0 10px; font-size: 15px; }
.wx-read b { font-family: var(--serif); }
.next { margin-top: 36px; border-color: var(--accent); }

/* 五行 diagram */
.wuxing { display: block; overflow: visible; }
.wx-node { stroke-width: 2; }
.wx-wood  { fill: color-mix(in srgb, var(--wood) 16%, var(--card));  stroke: var(--wood); }
.wx-fire  { fill: color-mix(in srgb, var(--fire) 16%, var(--card));  stroke: var(--fire); }
.wx-earth { fill: color-mix(in srgb, var(--earth) 16%, var(--card)); stroke: var(--earth); }
.wx-metal { fill: color-mix(in srgb, var(--metal) 16%, var(--card)); stroke: var(--metal); }
.wx-water { fill: color-mix(in srgb, var(--water) 16%, var(--card)); stroke: var(--water); }
.wx-node.wx-dm { stroke-width: 3; }
.wx-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.wx-char { font: 600 24px var(--serif); text-anchor: middle; dominant-baseline: middle; }
.wx-pct { font: 500 12px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.wx-t-wood { fill: var(--wood); } .wx-t-fire { fill: var(--fire); } .wx-t-earth { fill: var(--earth); }
.wx-t-metal { fill: var(--metal); } .wx-t-water { fill: var(--water); }
.wx-gen { stroke: var(--ink); stroke-width: 1.6; opacity: .55; }
.wx-ctl { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .6; }
.wx-head-gen { fill: var(--ink); opacity: .55; }
.wx-head-ctl { fill: var(--muted); opacity: .6; }
.wx-rel { font: 500 12.5px var(--sans); fill: var(--muted); }
.wx-rel.wx-dm { fill: var(--accent); font-weight: 700; }
.wx-legend text { font: 12px var(--sans); fill: var(--muted); }

/* element bars */
.bar-row { display: grid; grid-template-columns: 32px 1fr 44px; gap: 10px; align-items: center; margin: 7px 0; }
.bar-name { font: 600 18px var(--serif); }
.bar { background: var(--soft); border-radius: 999px; height: 10px; overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 999px; }
.fill-wood { background: var(--wood); } .fill-fire { background: var(--fire); } .fill-earth { background: var(--earth); }
.fill-metal { background: var(--metal); } .fill-water { background: var(--water); }
.bar-pct { font-size: 14px; color: var(--muted); text-align: right; }

/* prose pages */
.prose { max-width: 700px; margin: 0 auto 48px; }
.prose blockquote { margin: 18px 0; padding: 6px 20px; border-left: 3px solid var(--accent); background: var(--soft); border-radius: 0 var(--radius) var(--radius) 0; }
.prose .wuxing { max-width: 380px; margin: 8px auto 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 0 36px; color: var(--muted); font-size: 14px; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { display: block; min-height: 0; padding-top: 24px; }
  .hero-art { position: static; transform: none; width: auto; margin-top: 16px; }
  .hero h1 { font-size: 34px; }
  h1 { font-size: 29px; }
  .three { grid-template-columns: 1fr; }
  .wx-card { grid-template-columns: 1fr; }
  .glyph { font-size: 34px; }
  .dm-glyph { font-size: 50px; }
  .choices { grid-template-columns: 1fr; }
  .brand-en { display: none; }
  .nav { gap: 14px; }
}

/* home sections + result palaces (s88 content pass) */
.block { padding: 8px 0 12px; }
.narrow-text { max-width: 720px; }
.band { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 28px; max-width: none; }
.band p:first-child { margin-top: 0; } .band p:last-child { margin-bottom: 0; }
.cards5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cards5 .card { margin: 0; }
.cards5 p, .palace p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; font: 600 16px var(--serif); }
.faq { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; display: inline-block; width: 1.4em; color: var(--muted); }
.faq[open] summary::before { content: '–'; }
.faq p { margin: 8px 0 0 1.4em; color: var(--muted); }
.end-cta { text-align: center; padding: 32px 0 8px; }
.actions.center { justify-content: center; }
.palaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.palace { margin: 0; padding: 16px; }
.palace h3 { font-size: 17px; margin: 2px 0 6px; }
.palace p:last-child { font-size: 13.5px; line-height: 1.6; }
.palace.dm { outline: 1px solid var(--accent); }
.prose .el-table td, .prose .el-table th { text-align: center; padding: 6px 4px; }
.prose .el-table .big { font: 600 22px var(--serif); }
.prose h3 { margin-top: 24px; }
.pic { margin: 0; }
.pic svg { display: block; width: 100%; height: auto; }
.pic-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; }
.pic-row .pic { max-width: 440px; justify-self: center; width: 100%; }
.demo .pic { margin: 8px 0 4px; }
.prose .pic { margin: 16px auto; }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .pic-row { grid-template-columns: 1fr; gap: 12px; }
  .palaces { grid-template-columns: 1fr 1fr; }
  .band { padding: 18px; }
}

/* season wheel + strength gauge */
.season { width: 100%; max-width: 320px; display: block; margin: 0 auto; overflow: visible; }
.ss { stroke: var(--card); stroke-width: 2; }
.ss-wood  { fill: color-mix(in srgb, var(--wood) 14%, var(--card)); }
.ss-fire  { fill: color-mix(in srgb, var(--fire) 14%, var(--card)); }
.ss-metal { fill: color-mix(in srgb, var(--metal) 18%, var(--card)); }
.ss-water { fill: color-mix(in srgb, var(--water) 14%, var(--card)); }
.ss-on.ss-wood { fill: var(--wood); } .ss-on.ss-fire { fill: var(--fire); }
.ss-on.ss-metal { fill: var(--metal); } .ss-on.ss-water { fill: var(--water); }
.ss-hour { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 4 3; }
.ss-ch { font: 600 19px var(--serif); text-anchor: middle; dominant-baseline: middle; fill: var(--ink); }
.ss-ch-on { fill: #fff; }
.ss-season { font: 600 22px var(--serif); text-anchor: middle; dominant-baseline: middle; }
.ss-season-en { font-size: 13px; }
.ss-tag { font: 600 13px var(--sans); fill: var(--ink); }
.ss-tag-hour { fill: var(--muted); }
.gauge { width: 100%; display: block; overflow: visible; }
.g-seg { fill: var(--soft); }
.g-seg.g-mid { fill: color-mix(in srgb, var(--metal) 25%, var(--soft)); }
.g-seg.g-on { fill: var(--ink); }
.g-lab { font: 12px var(--sans); fill: var(--muted); text-anchor: middle; }
.g-lab-on { fill: var(--ink); font-weight: 700; }
.g-end { font: 11px var(--sans); fill: var(--muted); }

/* luck timeline + annual strip */
.timeline { display: grid; grid-template-columns: repeat(8, minmax(84px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.annual { display: grid; grid-template-columns: repeat(10, minmax(64px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 6px; text-align: center; }
.step.now { outline: 2px solid var(--ink); }
.step .when { font-size: 12px; color: var(--muted); line-height: 1.4; }
.step .gz { font: 600 30px/1.2 var(--serif); margin: 4px 0; }
.step .tg { font-size: 12px; line-height: 1.5; }
.step .now-tag { display: inline-block; font-size: 11px; background: var(--ink); color: var(--card); border-radius: 999px; padding: 0 8px; margin-top: 4px; }
.rel { display: inline-block; font-size: 11.5px; border-radius: 999px; padding: 0 7px; margin-top: 4px; color: #fff; }
.rel-0 { background: color-mix(in srgb, var(--ink) 55%, var(--card)); }
.rel-1 { background: var(--fire); } .rel-2 { background: var(--earth); }
.rel-3 { background: var(--water); } .rel-4 { background: var(--wood); }

/* pillars detail */
.tg-top { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.hidden-row { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.hidden-row span { display: inline-block; margin: 0 2px; }
.void-tag { display: inline-block; font-size: 11px; border: 1px dashed var(--muted); color: var(--muted); border-radius: 999px; padding: 0 6px; margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 14px; } .kv dd { margin: 0; }
.tg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 14px; }
.tg-list b { font-family: var(--serif); }
@media (max-width: 720px) { .two-col, .tg-list { grid-template-columns: 1fr; } }
.bg-wood { background: var(--wood); } .bg-fire { background: var(--fire); } .bg-earth { background: var(--earth); }
.bg-metal { background: var(--metal); } .bg-water { background: var(--water); }

#city-search { margin-bottom: 8px; }
.pinyin { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: -2px; }
/* English: the wide CJK letter-spacing reads as gaps between letters */
/* English landing — variant A (2026-10-18, matches the Chinese layout): Cormorant Garamond titles,
   tagline in Cormorant italic, the lead in Inter. Cormorant is self-hosted (fonts/cormorant, OFL). */
html[lang=en] .eyebrow { font: italic 500 22px 'Cormorant Garamond', Georgia, serif; letter-spacing: .02em; }
html[lang=en] .hero h1 { font: 600 46px/1.12 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; }
html[lang=en] .lead { font-size: 16px; }
html[lang=en] p { text-wrap: pretty; }   /* when a line must wrap, avoid a lone last word */
html[lang=en] .hero-art figcaption { letter-spacing: .04em; }
html[lang=en] .g-lab { font-size: 9.5px; }
@media (max-width: 720px) { html[lang=en] .hero h1 { font-size: 32px; } }
/* holding page: the line where the buttons will go */
.soon { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); max-width: 520px; font-size: 15px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
html[lang=en] .soon { font-size: 14px; max-width: 600px; }   /* room for the second line on one row */