@font-face { font-family: "Newsreader"; src: url("assets/newsreader-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/newsreader-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans-normal.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }

:root {
  --page: #f1f4ef;
  --ink: #202c26;
  --muted: #586159;
  --placeholder: #626b62;
  --line: #d3d0c2;
  --input: #fcfaf4;
  --input-line: #9caa9e;
  --accent: #a63a29;
  --accent-hover: #8d2e21;
  --button-ink: #fff9ee;
  --error: #932c22;
  --success: #24613e;
  --select-fill: #f1c8ac;
  --select-ink: #412219;
  --focus: #a63a29;
  --body-font: "DM Sans", "Segoe UI", sans-serif;
  --heading-font: "Newsreader", Georgia, serif;
  --night: #142420;
  --night-line: #466056;
  --night-paper: #f7ebd6;
  --night-text: #d1dbcd;
  --night-accent: #f6af87;
  --wash: #f6e5d8;
}
.night { color: var(--night-paper); background: var(--night); --focus: var(--night-accent); }
.site-header.night { border-color: var(--night-line); }
main > .night, .method-section { padding: 0 36px; }
.method-section { padding-top: 12px; padding-bottom: 12px; }
main > .night > .frame, .method-section > .frame { width: min(1200px, 100%); }
.wordmark { font-family: var(--heading-font); font-weight: 600; font-size: 1.55rem; }
.nav-action { color: var(--night-accent); }
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr); gap: clamp(1.5rem, 6vw, 5.4rem);
  align-items: center; padding-block: clamp(2.3rem, 4.3vw, 3.85rem) clamp(2.5rem, 4vw, 3.75rem);
}
.hero h1 { font: 500 clamp(4rem, 7.8vw, 6rem)/.93 var(--heading-font); letter-spacing: -.035em; }
.hero h1 em { color: var(--night-accent); font-weight: 400; }
.hero-copy > p:not(.hero-note) { max-width: 39ch; font-size: clamp(1.02rem, 1.45vw, 1.22rem); color: var(--night-text); margin-block: 1.2rem 1.65rem; }
.hero-button { color: var(--night); background: var(--night-paper); }
.hero-button:hover { background: var(--night-accent); }
.hero-note { color: var(--night-text); font-size: .84rem; margin-top: .7rem; }
.hero-figure {
  border: 1px solid var(--night-line); background: #192c27; padding: .4rem 1.25rem 0; border-radius: 14px;
  min-width: 0; overflow: hidden;
}
.dial img { width: 100%; height: auto; }
.hero-figure figcaption { display: flex; gap: .65rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--night-line); padding: .65rem 0 .8rem; }
.hero-figure figcaption strong, .hero-figure figcaption small { display: block; }
.hero-figure figcaption strong { font-size: .97rem; }
.hero-figure figcaption small { font-size: .79rem; color: var(--night-text); }
.hero-figure figcaption a { color: var(--night-accent); font-size: .91rem; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; }
.hero-figure figcaption svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.facts { display: flex; flex-wrap: wrap; gap: .65rem clamp(1rem, 5vw, 4rem); border-top: 1px solid var(--night-line); padding: 18px 0; }
.facts span { display: inline-flex; align-items: center; gap: .56rem; font-size: .89rem; color: var(--night-text); }
.facts svg { width: 17px; height: 17px; stroke: var(--night-accent); fill: none; stroke-width: 1.6; }

.compare-layout { display: grid; grid-template-columns: minmax(265px, .72fr) minmax(0, 1.68fr); gap: clamp(1.3rem, 4.2vw, 3.5rem); align-items: start; }
.birth-form { padding: clamp(1rem, 2.4vw, 1.8rem); background: #ebece2; border-radius: 14px; }
.birth-form fieldset, .city-field { margin-bottom: .95rem; }
.birth-form fieldset label { color: var(--muted); font-size: .8rem; }
.birth-form legend span { font-size: .77rem; font-weight: 500; color: var(--muted); margin-left: .25rem; }
.birth-form input { font-variant-numeric: tabular-nums; }
.date-fields { grid-template-columns: 1.25fr 1fr 1fr; }
.time-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solar-option { display: flex; gap: .65rem; padding-block: .35rem .9rem; align-items: flex-start; cursor: pointer; }
.solar-option input { margin-top: .15rem; }
.solar-option small { display: block; color: var(--muted); font-weight: 500; font-size: .81rem; line-height: 1.35; }
.birth-form .button { width: 100%; justify-content: space-between; }
.comparison { min-width: 0; }
.result-header { border-bottom: 1px solid var(--line); padding: .4rem 0 1rem; }
.result-header p { color: var(--muted); font-size: .88rem; font-weight: 600; }
.result-header h3 { font: 500 clamp(2.2rem, 4.3vw, 3.6rem)/1.07 var(--heading-font); letter-spacing: -.035em; margin-top: .4rem; }
.pillar-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.pillar-label { width: 10%; }
.pillar-table th, .pillar-table td { text-align: left; border-bottom: 1px solid var(--line); padding: .64rem .55rem; }
.pillar-table thead th { color: #45534a; vertical-align: top; font-weight: 700; font-size: .88rem; line-height: 1.25; }
.method-no { display: block; font-size: .75rem; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: .27rem; }
.pillar-table th small { display: block; margin-top: .22rem; font-size: .78rem; font-weight: 500; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere; }
.pillar-table tbody th { font-size: .88rem; }
.pillar-table td { vertical-align: top; }
.pillar-table .glyph {
  display: block; font-family: "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 500; line-height: 1.25; white-space: nowrap;
}
.pillar-table .reading { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.3; }
.pillar-table .different > * { background: var(--wash); }
.pillar-table .different th, .pillar-table .different .glyph { color: #8c3224; }
.group-marker { display: inline-block; min-width: 1.25rem; text-align: center; border-radius: 4px; margin-bottom: .13rem; padding: .05rem .25rem; color: #672c22; background: #efd1be; font-size: .76rem; line-height: 1.4; font-weight: 700; }
.matrix-key { font-size: .83rem; margin-top: .65rem; display: flex; align-items: center; gap: .44rem; }
.matrix-key i { width: .7rem; height: .7rem; background: #c77b62; display: block; flex: 0 0 .7rem; }
.solar-readout { font-size: .83rem; margin-top: .4rem; color: var(--muted); }
.findings { border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 3.7rem); padding-top: 1.45rem; display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.68fr); gap: clamp(1rem, 4.2vw, 3.5rem); }
.findings h3 { font: 500 2rem/1.1 var(--heading-font); }
.finding { margin-bottom: 1rem; max-width: 70ch; }
.finding:last-child { margin-bottom: 0; }
.finding h4 { margin: 0 0 .2rem; font-size: .97rem; color: var(--accent); }
.finding p { color: var(--muted); font-size: .95rem; }

.method-section { background: #e6ece3; border-block: 1px solid var(--line); }
.method-layout, .report { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(1.8rem, 7vw, 6rem); align-items: start; }
.method-intro { margin-bottom: 0; }
.method-intro .method-scope { color: var(--ink); margin-top: 1.2rem; font-weight: 600; max-width: 37ch; }
.method-list { margin: 0; padding: 0; list-style: none; counter-reset: methods; }
.method-list li { counter-increment: methods; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .4rem .75rem; border-top: 1px solid #bcc6b9; padding: 15px 0; }
.method-list li:last-child { border-bottom: 1px solid #bcc6b9; }
.method-list li::before { content: counter(methods, decimal-leading-zero); font-size: .83rem; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; padding-top: .05rem; }
.method-list h3 { font-size: 1.05rem; }
.method-list p { font-size: .93rem; color: var(--muted); margin-top: .33rem; }
.method-label { grid-column: 2; font-size: .78rem; color: var(--accent); font-weight: 700; }
.report { grid-template-columns: minmax(0, 1.3fr) minmax(0, .86fr); align-items: center; }
.report-info h2 { font: 500 3.8rem/1 var(--heading-font); font-size: 3.8rem; letter-spacing: -.035em; }
.report-info > p { margin-top: .75rem; max-width: 58ch; }
.report-list { margin-block: .85rem 0; padding-left: 1.2rem; }
.report-list li { padding-block: .12rem; }
.report-list li::marker { color: var(--accent); }
.signup { background: #e7ebe1; padding: 26px; border-radius: 14px; }
.signup h3 { font: 500 2rem/1 var(--heading-font); }
.signup > p { color: var(--muted); margin-block: .5rem 1rem; font-size: .92rem; }
.signup .button { margin-top: .65rem; width: 100%; }
.site-footer { background: #eeece2; }

@media (max-width: 900px) {
  .hero { gap: 1.5rem; }
  .hero h1 { font-size: clamp(3.2rem, 8vw, 5.2rem); }
  .compare-layout, .findings { grid-template-columns: minmax(0, 1fr); }
  .birth-form { max-width: 560px; }
  .report-info h2 { font-size: 3.2rem; }
}
@media (max-width: 650px) {
  main > .night { padding: 0 18px; }
  .method-section { padding: 12px 18px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.55rem; padding-top: 2.7rem; padding-bottom: 1.7rem; }
  .hero h1 { font-size: clamp(3.35rem, 12.2vw, 5rem); }
  .hero-copy > p:not(.hero-note) { margin-block: .85rem 1.18rem; }
  .hero-figure { padding-inline: .7rem; }
  .facts { gap: .4rem 1.1rem; }
  .facts span { font-size: .78rem; }
  .method-layout, .report { grid-template-columns: minmax(0, 1fr); }
  .method-intro h2, .report-info h2 { text-wrap: initial; }
  .report-info h2 { font-size: 2.7rem; }
  .signup { padding: 18px; }
  .pillar-label { width: 13%; }
  .pillar-table th, .pillar-table td { padding: .53rem .26rem; }
  .pillar-table thead th { font-size: .79rem; overflow-wrap: anywhere; }
  .pillar-table th small { font-size: .78rem; }
  .pillar-table tbody th { font-size: .77rem; }
  .pillar-table .reading { font-size: .76rem; }
}