/* ============================================================
   homepage-v2.css · indexv2.html (The Living Observatory)
   Page-scoped styles for the staged homepage v2. Everything is
   prefixed with .hv2 (the page wrapper) so the shared chrome
   (pn-bar meganav, zf-foot footer) keeps its own skin untouched.
   Tokens come from /css/tokens.css; only page-local vars are
   declared here (--han calligraphy stack, the five Wu Xing hexes).
   ============================================================ */

html{scroll-behavior:smooth}

/* living sky + grain sit behind the page column */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
/* clip (not hidden) so the sticky top bar keeps sticking on mobile:
   overflow-x:hidden makes body a scroll container and disables
   position:sticky for the .pn-bar. clip contains overflow without
   creating a scroll container. */
body.hv2-body{overflow-x:clip}
@supports not (overflow-x:clip){ body.hv2-body{overflow-x:hidden} }
body.hv2-body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity,.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hv2{
  --han:"Ma Shan Zheng",var(--serif);
  --wood:#6fae74; --fire:#d98a86; --earth:#c9a86a; --metal:#c3c8d0; --water:#78b3c6;
  --accent:var(--brass); --accent-soft:rgba(214,193,140,.14);
  position:relative; z-index:1;
  color:var(--ivory); font-family:var(--sans); line-height:1.65;
  font-size:clamp(1rem,1.1vw,1.1rem);
}
.hv2 a{color:var(--brass-bright);text-decoration:none;font-weight:600}
.hv2 a:hover{color:var(--moon)}
.hv2 a:focus-visible,.hv2 button:focus-visible,.hv2 input:focus-visible,.hv2 select:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px;border-radius:4px}
.hv2 img,.hv2 canvas,.hv2 svg{display:block;max-width:100%}
.hv2 button{font-family:var(--sans);cursor:pointer}
.hv2 ::selection{background:rgba(214,193,140,.28);color:var(--moon)}
.hv2 .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

/* type utilities */
.hv2 .eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.hv2 .eyebrow .han{font-family:var(--han);font-size:.95rem;letter-spacing:.1em;margin-right:8px;text-transform:none}
.hv2 .t-data{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted)}
.hv2 h1,.hv2 h2,.hv2 h3{font-family:var(--serif);font-weight:560;color:var(--moon);line-height:1.1;text-wrap:balance;margin:0}
.hv2 h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.hv2 h3{font-size:1.18rem;font-weight:600}
.hv2 p{margin:0 0 1em;max-width:66ch;color:var(--body);text-wrap:pretty}
.hv2 .lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--brass-bright);line-height:1.45}
.hv2 ruby rt{font-family:var(--mono);font-size:.55em;color:var(--muted);letter-spacing:.06em}
.hv2 .han{font-family:var(--han);font-weight:400}

/* buttons */
.hv2 .btn{appearance:none;cursor:pointer;border:none;border-radius:12px;padding:13px 22px;
  font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--brass-bright),var(--brass-dim));color:#1a160a;
  box-shadow:0 4px 18px var(--accent-soft);
  transition:transform .2s var(--ease-io),box-shadow .25s var(--ease-io);display:inline-flex;align-items:center;gap:8px}
.hv2 .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 18px rgba(214,193,140,.18)}
.hv2 .btn:active{transform:translateY(0) scale(.97)}
.hv2 .btn.ghost{background:transparent;color:var(--brass-bright);border:1px solid var(--line);box-shadow:none}
.hv2 .btn.ghost:hover{border-color:var(--brass)}
.hv2 .btn-reveal{width:100%;justify-content:center;margin-top:16px;padding:17px 26px;font-size:1.05rem;border-radius:14px;
  box-shadow:0 0 24px rgba(214,193,140,.3),0 6px 22px rgba(0,0,0,.35)}
.hv2 .btn-reveal:hover{box-shadow:0 0 40px rgba(214,193,140,.46),0 10px 30px rgba(0,0,0,.4)}
@keyframes hv2RevealGlow{0%,100%{box-shadow:0 0 18px rgba(214,193,140,.22),0 6px 22px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 42px rgba(214,193,140,.44),0 6px 22px rgba(0,0,0,.35)}}
.hv2 .say-btn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--brass);flex:none;transition:border-color .2s,color .2s,box-shadow .2s}
.hv2 .say-btn:hover{border-color:var(--brass);color:var(--brass-bright);box-shadow:0 0 10px rgba(214,193,140,.25)}
.hv2 .say-btn svg{width:15px;height:15px}

/* ============ HERO ============ */
.hv2 .hero{position:relative;padding:clamp(24px,5vh,60px) 0 clamp(48px,8vh,88px)}
.hv2 .hero-dateline{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver);
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:24px;max-width:none}
.hv2 .hero-dateline .dot{color:var(--brass-dim)}
.hv2 .hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.04}
.hv2 .hero-top{display:grid;gap:clamp(24px,4vw,52px);align-items:end}
@media(min-width:920px){.hv2 .hero-top{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hv2 .hero-head{max-width:820px}
.hv2 .hero-head .lead{margin-top:18px}
.hv2 .bridge{margin-top:16px;font-size:clamp(1rem,1.4vw,1.1rem);max-width:62ch}
.hv2 .bridge a{color:var(--brass);font-weight:700}
.hv2 .pza{color:var(--brass-bright);font-style:italic}
.hv2 .whyline{margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.02rem;max-width:58ch}
.hv2 .hero-state{transition:opacity .45s var(--ease-io)}
.hv2 .hero-state[hidden]{display:none}

/* the instrument: astrolabe + console */
.hv2 .instrument{display:grid;gap:clamp(24px,4vw,48px);margin-top:clamp(30px,5vh,52px);align-items:start}
@media(min-width:920px){.hv2 .instrument{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hv2 .dialwrap{position:relative;margin:0 auto;width:min(92vw,520px)}
.hv2 .dial{width:100%;height:auto}
.hv2 .dial .engraved{stroke:var(--line);fill:none}
.hv2 .dial .tick{stroke:rgba(214,193,140,.34)}
.hv2 .dial .tick-minor{stroke:rgba(214,193,140,.14)}
.hv2 .dial .wglyph{font-size:26px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-family:var(--sans);transition:fill .4s}
.hv2 .dial .eglyph{font-family:var(--han);font-size:27px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;transition:fill .4s}
.hv2 .dial .wglyph.lit,.hv2 .dial .eglyph.lit{fill:var(--brass-bright)}
.hv2 .dial .ringlabel{font-family:var(--mono);font-size:8.5px;letter-spacing:.34em;fill:var(--faint);text-anchor:middle}
.hv2 .dial .plateno{font-family:var(--mono);font-size:12px;letter-spacing:.22em;fill:var(--brass-dim);text-anchor:middle}
.hv2 .dial .sealzi{font-family:var(--han);font-size:20px;fill:#f6efd8;text-anchor:middle;dominant-baseline:central}
.hv2 .dial .sealcol{font-family:var(--han);font-size:12px;fill:var(--brass-dim);text-anchor:middle}
.hv2 .ring{transform-origin:270px 270px}
.hv2 #driftring{transform-origin:270px 270px}
.hv2 .reticle{stroke:var(--brass);fill:none}
.hv2 .pointer{fill:var(--brass)}
.hv2 .handrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.hv2 .handrow .lbl{flex-basis:100%;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.hv2 .turnbtn{background:var(--panel);border:1px solid var(--line);color:var(--ivory);border-radius:var(--r-pill);padding:8px 15px;font-size:.82rem;font-weight:500;transition:border-color .2s,transform .15s}
.hv2 .turnbtn:hover{border-color:var(--brass);transform:translateY(-1px)}
.hv2 .turnbtn span{color:var(--brass);margin-right:6px}

.hv2 .console{display:flex;flex-direction:column;gap:18px}
.hv2 .plate{background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border:1px solid var(--line);border-radius:var(--r-2);padding:22px 24px;position:relative}
.hv2 .plate::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--accent-soft) 30%,var(--accent-soft) 70%,transparent)}
.hv2 .plate-cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-dim);margin-bottom:14px}
.hv2 .datefields{display:flex;gap:10px;flex-wrap:wrap}
.hv2 .datefields label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hv2 .datefields select,.hv2 .datefields input{background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--ivory);font-family:var(--sans);font-size:1rem;padding:11px 12px;min-height:46px}
.hv2 .datefields select{min-width:120px}
.hv2 .datefields input{width:86px}
.hv2 .datefields input#yy{width:104px}
.hv2 .sightnote{margin-top:12px;color:var(--faint);font-size:.8rem;max-width:52ch}
.hv2 .readout .row{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.hv2 .readout .row:last-of-type{border-bottom:none}
.hv2 .readout .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dim);min-width:96px}
.hv2 .readout .v{color:var(--ivory);font-size:.95rem}
.hv2 .readout .v .g{color:var(--brass);margin-right:6px}
.hv2 .creature{font-family:var(--serif);font-weight:560;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--moon);line-height:1.1;margin:14px 0 4px}
.hv2 .plateno-line{font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-dim)}
.hv2 .console .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hv2 .rite{margin-top:14px;color:var(--muted);font-size:.84rem;font-style:italic;font-family:var(--serif)}
.hv2 .rite b,.hv2 .rite a{color:var(--brass-bright);font-weight:560}

/* sanctum (returning state) */
.hv2 .hero-grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center;margin-top:8px}
@media(min-width:880px){.hv2 .hero-grid{grid-template-columns:1.15fr .85fr}}
.hv2 .sanctum-card{border:1px solid transparent;border-radius:var(--r-2);padding:26px 26px 22px;
  background:linear-gradient(#14162a,#111325) padding-box,
  conic-gradient(from 210deg,rgba(168,146,92,.9),rgba(177,132,214,.7),rgba(120,179,198,.6),rgba(214,193,140,.9),rgba(168,146,92,.9)) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 10px 40px rgba(0,0,0,.35);position:relative}
.hv2 .sanctum-card::before{content:"\2726";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  color:var(--brass);background:var(--ink);padding:0 8px;font-size:.85rem}
.hv2 .sanctum-rows{display:grid;gap:14px;margin-top:18px}
.hv2 .s-row{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;border-top:1px solid var(--line-soft);padding-top:13px}
.hv2 .s-row .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dim)}
.hv2 .s-row .v{color:var(--body);font-size:.98rem}
.hv2 .s-row .v b{color:var(--brass-bright);font-weight:700}
.hv2 .power-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 13px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--silver)}
.hv2 .power-chip .pip{width:8px;height:8px;border-radius:50%;background:var(--silver);box-shadow:0 0 8px var(--silver)}
.hv2 .recast{display:inline-block;margin-top:18px;background:none;border:none;padding:0;font-size:.86rem;font-weight:650;
  color:var(--brass);cursor:pointer;transition:color .2s}
.hv2 .recast:hover{color:var(--brass-bright)}
.hv2 .sanctum-note{margin-top:14px;font-size:.9rem;color:var(--muted)}
.hv2 .sanctum-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ============ GATE STRING SUB-NAV + MOON CHIP ============ */
.hv2 .gatestring{position:sticky;top:var(--pn-bar-h,64px);z-index:50;background:rgba(13,14,24,.82);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-block:1px solid var(--line-soft)}
.hv2 .gs-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px clamp(14px,4vw,32px)}
.hv2 .gs-label{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;display:none}
.hv2 .gs-scroll{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.hv2 .gs-scroll::-webkit-scrollbar{display:none}
.hv2 .gs-sigil{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--r-pill);
  white-space:nowrap;color:var(--muted);font-weight:500;font-size:.78rem;flex:none;
  transition:color .25s,background .25s}
.hv2 .gs-sigil .glyph{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);font-family:var(--han);font-size:.82rem;color:var(--brass-dim);
  transition:border-color .25s,color .25s,box-shadow .25s}
.hv2 .gs-sigil .name{display:inline}
.hv2 .gs-sigil:hover{color:var(--ivory);background:rgba(236,231,216,.05)}
.hv2 .gs-sigil.is-passed .glyph{color:var(--brass);border-color:rgba(214,193,140,.4)}
.hv2 .gs-sigil.is-here{color:var(--brass-bright)}
.hv2 .gs-sigil.is-here .glyph{color:var(--brass-bright);border-color:var(--brass);box-shadow:0 0 12px rgba(214,193,140,.35)}
.hv2 .gs-depth{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-dim);white-space:nowrap}
.hv2 .moonchip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--silver);
  border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:4px 11px 4px 5px}
.hv2 .moonchip canvas{display:block;border-radius:50%}
.hv2 .moonchip:hover{border-color:var(--silver);color:var(--moon)}
.hv2 .gs-thread{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.hv2 .gs-thread i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--depth,0));
  background:linear-gradient(90deg,var(--brass-dim),var(--brass),var(--brass-bright))}
@media(min-width:860px){.hv2 .gs-label{display:block}}
@media(max-width:520px){.hv2 .moonchip span{display:none}.hv2 .gs-sigil .glyph{width:20px;height:20px;font-size:.7rem}}

/* ============ SECTIONS ============ */
.hv2 section{padding:clamp(56px,9vh,110px) 0;position:relative;scroll-margin-top:calc(var(--pn-bar-h,64px) + 60px)}
.hv2 section .eyebrow{display:block;margin-bottom:14px}
.hv2 .sec-head{margin-bottom:clamp(24px,4vh,40px);max-width:760px}
.hv2 .sec-head .lead{margin-top:14px}
.hv2 .sec-head p{margin-top:14px}
.hv2 .sys-cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.hv2 .sys-cta a{--c:var(--accent);color:var(--c);font-weight:600;font-size:.95rem;border:1px solid color-mix(in srgb,var(--c) 36%,transparent);border-radius:var(--r-pill);padding:11px 20px;display:inline-block;transition:background .2s,transform .15s}
.hv2 .sys-cta a:hover{background:color-mix(in srgb,var(--c) 12%,transparent);transform:translateY(-1px)}

/* accents per system */
.hv2 #gates{--accent:var(--amethyst);--accent-soft:rgba(177,132,214,.13)}
.hv2 #elements{--accent:var(--wood);--accent-soft:rgba(111,174,116,.13)}
.hv2 #bazi{--accent:var(--earth);--accent-soft:rgba(201,168,106,.13)}
.hv2 #stars{--accent:var(--teal);--accent-soft:rgba(120,179,198,.13)}
.hv2 #fengshui{--accent:var(--jade);--accent-soft:rgba(120,195,156,.13)}
.hv2 #stones{--accent:var(--metal);--accent-soft:rgba(195,200,208,.12)}
.hv2 #moon{--accent:var(--silver);--accent-soft:rgba(174,191,224,.13)}
.hv2 #bonds{--accent:var(--rose);--accent-soft:rgba(227,161,150,.13)}
.hv2 #menagerie{--accent:var(--brass-bright);--accent-soft:rgba(239,226,180,.13)}
.hv2 #today{--accent:var(--silver);--accent-soft:rgba(174,191,224,.13)}

/* today in the sky */
.hv2 #today{border-block:1px solid var(--line-soft);
  background:radial-gradient(900px 420px at 20% 0%,rgba(26,28,51,.85),transparent 70%)}
.hv2 .sky-grid{display:grid;gap:16px}
@media(min-width:680px){.hv2 .sky-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.hv2 .sky-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.hv2 .sky-card{border:1px solid var(--line);border-radius:var(--r-2);padding:22px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(174,191,224,.06),transparent 46%),linear-gradient(165deg,var(--panel-2),var(--panel) 55%);
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.hv2 .sky-card .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver)}
.hv2 .sky-card .big{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--moon);font-weight:560;line-height:1.15}
.hv2 .sky-card .sub{font-size:.88rem;color:var(--muted);margin:0}
.hv2 .sky-card .math{font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.03em;line-height:1.9;margin:0}
.hv2 .sky-card .math b{color:var(--brass);font-weight:700}
.hv2 .sky-card .hanzi{font-family:var(--han);font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:var(--accent2,var(--brass))}
.hv2 .moon-card{align-items:center;text-align:center}
.hv2 .moon-card canvas{margin:4px auto}
.hv2 .sky-note{margin-top:18px;font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.05em;max-width:none}
.hv2 .daily-oracle{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-2);padding:clamp(22px,4vw,30px);
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:radial-gradient(120% 140% at 0% 0%,rgba(174,191,224,.09),transparent 55%),linear-gradient(165deg,var(--panel-2),var(--panel) 55%)}
.hv2 .daily-oracle .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver)}
.hv2 .daily-oracle h3{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.55rem);margin:8px 0 6px}
.hv2 .do-line{font-family:var(--serif);font-style:italic;color:var(--brass-bright);font-size:1.06rem;margin:0 0 10px;max-width:56ch}
.hv2 .do-note{font-size:.82rem;color:var(--muted);margin:0;max-width:56ch}
.hv2 .elm-Wood{--accent2:var(--wood)} .hv2 .elm-Fire{--accent2:var(--fire)} .hv2 .elm-Earth{--accent2:var(--earth)}
.hv2 .elm-Metal{--accent2:var(--metal)} .hv2 .elm-Water{--accent2:var(--water)}

/* five gates tabs */
.hv2 .axisnote{border:1px solid var(--line);border-radius:var(--r-2);padding:16px 18px;margin-bottom:1.8rem;
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 55%);max-width:760px}
.hv2 .axisnote p{font-size:.94rem;color:var(--body);margin:0}
.hv2 .axisnote b.fallen{color:var(--rose);font-weight:600}
.hv2 .axisnote b.godly{color:var(--brass-bright);font-weight:600}
.hv2 .gates-shell{display:grid;border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 55%)}
.hv2 .gates-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line-soft)}
.hv2 .gates-tabs::-webkit-scrollbar{display:none}
.hv2 .gate-tab{flex:1 0 auto;min-width:118px;background:none;border:none;cursor:pointer;padding:14px 12px 12px;
  display:grid;gap:2px;justify-items:center;color:var(--muted);border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s,background .25s}
.hv2 .gate-tab .num{font-family:var(--serif);font-size:1.05rem;color:var(--brass-dim)}
.hv2 .gate-tab .t{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase}
.hv2 .gate-tab:hover{color:var(--ivory);background:rgba(236,231,216,.04)}
.hv2 .gate-tab[aria-selected="true"]{color:var(--brass-bright);border-bottom-color:var(--accent);background:rgba(177,132,214,.06)}
.hv2 .gate-tab[aria-selected="true"] .num{color:var(--brass-bright)}
.hv2 .gate-panel{padding:clamp(20px,4vw,34px);display:none}
.hv2 .gate-panel.is-active{display:block;animation:hv2ChFade .38s var(--ease-io)}
@keyframes hv2ChFade{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
.hv2 .gate-panel h3{font-size:1.35rem;margin-bottom:.6rem}
.hv2 .gate-panel .gp-key{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-dim);margin-bottom:12px}
.hv2 .gate-panel p{color:var(--body);max-width:58ch}
.hv2 .gate-panel .gp-vow{font-family:var(--serif);font-style:italic;color:var(--brass-bright);margin-top:14px;font-size:1.05rem}

/* wu xing wheel */
.hv2 .elemgrid{display:grid;gap:clamp(24px,4vw,44px);align-items:start}
@media(min-width:880px){.hv2 .elemgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hv2 .wheelwrap{margin:0 auto;width:min(88vw,460px)}
.hv2 .modes{display:flex;gap:8px;margin-bottom:16px;justify-content:center}
.hv2 .modebtn{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-pill);padding:9px 18px;font-size:.86rem;font-weight:500;transition:color .2s,border-color .2s}
.hv2 .modebtn[aria-pressed="true"]{color:var(--moon);border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.hv2 .wheel .node{cursor:pointer}
.hv2 .wheel .node circle{fill:#14162a;stroke-width:1.5;transition:stroke .3s,filter .3s}
.hv2 .wheel .node .zi{font-family:var(--han);font-size:30px;text-anchor:middle;dominant-baseline:central}
.hv2 .wheel .node .en{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;fill:var(--muted);text-anchor:middle}
.hv2 .wheel .node.sel circle{filter:drop-shadow(0 0 10px currentColor)}
.hv2 .wheel .flow{fill:none;stroke-width:1.8;opacity:.85;transition:opacity .4s}
.hv2 .wheel .flow.dimmed{opacity:.12}
.hv2 .cyclecap{text-align:center;margin:14px auto 0;font-family:var(--serif);font-style:italic;color:var(--brass-bright);font-size:1rem;max-width:44ch}
.hv2 .elemcard{position:relative;border-radius:var(--r-3);padding:30px 32px;
  background:
    radial-gradient(130% 110% at 12% 0%, color-mix(in srgb, var(--ec, #6fae74) 13%, transparent), transparent 58%),
    radial-gradient(110% 95% at 100% 100%, color-mix(in srgb, var(--ec, #6fae74) 7%, transparent), transparent 62%);
  box-shadow:0 0 60px color-mix(in srgb, var(--ec, #6fae74) 8%, transparent);
  transition:box-shadow .6s var(--ease-io)}
.hv2 .elemcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--ec, #6fae74) 36%, transparent), transparent 38%, transparent 72%, color-mix(in srgb, var(--ec, #6fae74) 14%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.hv2 .elemcard .zi-big{font-family:var(--han);font-size:3rem;line-height:1;margin-bottom:4px}
.hv2 .elemcard .pin{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:16px}
.hv2 .elemcard .row{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid color-mix(in srgb, var(--ec, #6fae74) 14%, transparent);font-size:.92rem}
.hv2 .elemcard .row:last-of-type{border-bottom:none}
.hv2 .elemcard .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dim);min-width:88px;padding-top:4px}
.hv2 .elemcard .motion{margin-top:16px;font-family:var(--serif);font-style:italic;color:var(--ivory);font-size:1rem}
.hv2 .seasonline{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--silver);margin-top:14px}

/* teasers: bazi, stars, feng shui */
.hv2 .teaser{display:grid;gap:clamp(24px,4vw,44px);align-items:center}
@media(min-width:880px){.hv2 .teaser{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hv2 .teaser.flip>.tz{order:2}}
.hv2 .tz{display:flex;justify-content:center}
.hv2 .tz svg{width:min(80vw,340px);height:auto}
.hv2 .pillarplate{display:flex;gap:10px;justify-content:center}
.hv2 .pillar{background:#14162a;border:1px solid var(--line);border-radius:10px;padding:16px 12px 12px;text-align:center;min-width:66px}
.hv2 .pillar .pl{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;display:block}
.hv2 .pillar .zi{font-family:var(--han);font-size:1.7rem;line-height:1.25;color:var(--ivory);display:block}
.hv2 .pillar.dm{border-color:var(--earth);box-shadow:0 0 14px rgba(201,168,106,.25)}
.hv2 .pillar.dm .tag{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-top:8px;display:block}
.hv2 .palaces{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:420px}
.hv2 .palace{aspect-ratio:4/3;border:1px solid var(--line-soft);border-radius:6px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hv2 .palace.is-lit{border-color:var(--teal);color:var(--teal);box-shadow:0 0 12px rgba(120,179,198,.25)}
.hv2 .seat{position:relative;max-width:420px;width:100%;height:150px;border:1px solid var(--line);border-radius:var(--r-2);
  background:rgba(236,231,216,.03);overflow:hidden;margin:0 auto}
.hv2 .seat .mtn{position:absolute;left:0;right:0;top:0;height:38px;background:linear-gradient(180deg,rgba(120,195,156,.18),transparent)}
.hv2 .seat .desk{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:74px;height:30px;
  border:1px solid var(--jade);border-radius:6px;box-shadow:0 0 14px rgba(120,195,156,.25)}
.hv2 .seat .door{position:absolute;right:18px;bottom:0;width:44px;height:8px;background:var(--jade);opacity:.6;border-radius:3px 3px 0 0}
.hv2 .seat .lab{position:absolute;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hv2 .seat .lab.l1{top:8px;left:10px}.hv2 .seat .lab.l2{top:88px;left:50%;transform:translateX(-50%)}.hv2 .seat .lab.l3{right:10px;bottom:12px}

/* stones picker */
.hv2 .stone-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.hv2 .stone-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.hv2 .stone-grid{grid-template-columns:repeat(4,1fr)}}
.hv2 .stone-card{position:relative;border:1px solid var(--line);border-radius:var(--r-2);padding:20px 18px 18px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 55%);cursor:pointer;text-align:left;
  display:grid;gap:9px;justify-items:start;color:var(--ivory);
  transition:border-color .3s var(--ease-io),box-shadow .3s var(--ease-io),transform .25s var(--ease-io)}
.hv2 .stone-card:hover{transform:translateY(-2px);border-color:rgba(214,193,140,.34)}
.hv2 .stone-card .gem{width:44px;height:44px}
.hv2 .stone-card .role{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone,var(--brass))}
.hv2 .stone-card h3{font-size:1.15rem;color:var(--moon)}
.hv2 .stone-card p{font-size:.88rem;color:var(--body);margin:0}
.hv2 .stone-card .keep{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px;transition:color .3s}
.hv2 .stone-card[aria-pressed="true"]{border-color:var(--stone);box-shadow:0 0 0 1px var(--stone),0 0 26px var(--stone-glow),inset 0 0 34px var(--stone-glow)}
.hv2 .stone-card[aria-pressed="true"] .keep{color:var(--stone)}
.hv2 .stone-card[aria-pressed="true"] .gem{filter:drop-shadow(0 0 8px var(--stone-glow))}
.hv2 .st-anchor{--stone:var(--earth);--stone-glow:rgba(201,168,106,.28)}
.hv2 .st-clarity{--stone:var(--silver);--stone-glow:rgba(174,191,224,.28)}
.hv2 .st-courage{--stone:var(--fire);--stone-glow:rgba(217,138,134,.28)}
.hv2 .st-boundary{--stone:var(--amethyst);--stone-glow:rgba(177,132,214,.28)}
.hv2 .stone-echo{margin-top:1.3rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--silver);min-height:1.2em}
.hv2 .stone-note{font-size:.85rem;color:var(--muted);margin-top:.8rem;max-width:56ch}
.hv2 .stone-live{font-family:var(--mono);font-size:.68rem;color:var(--silver);letter-spacing:.06em;margin-top:10px}

/* moon section */
.hv2 .moongrid{display:grid;gap:clamp(24px,4vw,44px);align-items:start}
@media(min-width:880px){.hv2 .moongrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hv2 .moonobs{display:flex;flex-direction:column;align-items:center;gap:18px}
.hv2 #moonBig{width:min(60vw,210px);height:auto;border-radius:50%;box-shadow:0 0 46px rgba(174,191,224,.22)}
.hv2 .moonread{text-align:center}
.hv2 .moonread .ph{font-family:var(--serif);font-weight:560;font-size:1.5rem;color:var(--moon)}
.hv2 .moonread .st{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.hv2 .phasestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:560px){.hv2 .phasestrip{grid-template-columns:repeat(8,1fr)}}
.hv2 .phasecell{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;padding:10px 6px;text-align:center}
.hv2 .phasecell.now{border-color:var(--silver);box-shadow:0 0 14px rgba(174,191,224,.25)}
.hv2 .phasecell .pn{font-size:.68rem;color:var(--ivory);line-height:1.3;margin:0;max-width:none}
.hv2 .phasecell .pv{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:3px 0 0;max-width:none}
.hv2 .powerrest{display:grid;gap:12px;margin-top:18px}
@media(min-width:560px){.hv2 .powerrest{grid-template-columns:1fr 1fr}}
.hv2 .prcard{background:linear-gradient(165deg,var(--panel-2),var(--panel) 55%);border:1px solid var(--line);border-radius:var(--r-2);padding:20px}
.hv2 .prcard h3{font-size:1rem;margin-bottom:6px}
.hv2 .prcard h3 b{color:var(--silver);font-weight:600}
.hv2 .prcard p{font-size:.87rem;color:var(--muted);margin:0}
.hv2 .moondates{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hv2 .moondates b{color:var(--silver);font-weight:700}

/* bonds / challenge */
.hv2 .bond-shell{display:grid;gap:28px}
@media(min-width:880px){.hv2 .bond-shell{grid-template-columns:1fr 1fr}}
.hv2 .challenge{border:1px solid var(--line);border-radius:var(--r-3);padding:clamp(22px,4vw,34px);
  background:radial-gradient(130% 110% at 0% 0%,rgba(227,161,150,.08),transparent 62%),linear-gradient(165deg,var(--panel-2),var(--panel) 55%)}
.hv2 .challenge .fields{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;align-items:flex-end}
.hv2 .challenge label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.hv2 .challenge input{background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--moon);
  font-family:var(--mono);font-size:1rem;padding:12px 10px;text-align:center;width:76px}
.hv2 .challenge input.nm{width:150px;text-align:left;font-family:var(--sans)}
.hv2 .challenge input:focus{outline:2px solid var(--rose);outline-offset:1px}
.hv2 .share-well{margin-top:16px;border:1px dashed var(--line);border-radius:var(--r-1);padding:16px 18px;
  font-size:.95rem;color:var(--body);background:rgba(12,14,26,.5);min-height:88px}
.hv2 .share-well[hidden]{display:none}
.hv2 .share-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.hv2 .copied{font-family:var(--mono);font-size:.66rem;color:var(--jade);letter-spacing:.1em;align-self:center}
.hv2 .bond-glyphs{display:flex;align-items:center;gap:18px;margin-top:1.4rem}
.hv2 .bond-glyphs .bg-c{width:52px;height:52px;border-radius:50%;border:1px solid var(--rose);
  display:grid;place-items:center;font-family:var(--han);font-size:1.3rem;color:var(--rose)}
.hv2 .bond-glyphs .bg-t{flex:0 0 70px;height:1px;background:linear-gradient(90deg,var(--rose),rgba(227,161,150,.15),var(--rose))}

/* proverb + menagerie */
.hv2 .proverb{border:1px solid var(--line-soft);border-radius:var(--r-3);padding:clamp(26px,5vw,44px);text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(214,193,140,.06),transparent 60%),linear-gradient(180deg,var(--panel),var(--ink-2))}
.hv2 .proverb .zi{font-family:var(--han);font-size:clamp(2.2rem,7vw,3.6rem);color:var(--brass);line-height:1.4}
.hv2 .proverb .zi rt{font-size:.32em}
.hv2 .proverb .tr{font-family:var(--serif);font-style:italic;color:var(--brass-bright);font-size:1.1rem;margin-top:12px}
.hv2 .proverb .gloss{color:var(--muted);font-size:.9rem;max-width:52ch;margin:10px auto 0}
.hv2 .peek-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.hv2 .peek-chips a{border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:8px 16px;
  font-size:.85rem;color:var(--ivory);font-weight:600;transition:border-color .25s,background .25s}
.hv2 .peek-chips a:hover{border-color:var(--brass);background:rgba(214,193,140,.08)}
.hv2 .fhline{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--fire);margin-top:12px}

/* closing / stages */
.hv2 .floor{text-align:center}
.hv2 .floor h2,.hv2 .floor .lead,.hv2 .floor p{margin-inline:auto}
.hv2 .stages{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:1.8rem auto 0}
.hv2 .stages span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.hv2 .stages span.on{color:var(--brass-bright)}
.hv2 .stages .sep{color:var(--brass-dim)}
.hv2 .floor .btnrow{margin-top:2rem;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* reveal-on-scroll */
.hv2 .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-io),transform .7s var(--ease-io)}
.hv2 .rv.is-in{opacity:1;transform:none}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .hv2 #driftring{animation:hv2Drift 140s linear infinite}
  @keyframes hv2Drift{to{transform:rotate(360deg)}}
  .hv2 .ring{transition:transform 1.2s var(--ease-io)}
  .hv2 .btn-reveal{animation:hv2RevealGlow 3.8s ease-in-out infinite}
  .hv2 .dialwrap{animation:hv2Breathe 8s ease-in-out infinite}
  @keyframes hv2Breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}
}
@media (prefers-reduced-motion:reduce){
  .hv2 *,.hv2{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hv2 .rv{opacity:1!important;transform:none!important}
  .hv2 .gate-panel.is-active{animation:none}
}

/* ============================================================
   v2 production additions: the woven bridge lines and the
   segmented MM / DD / YYYY typed fields (as on index.html)
   ============================================================ */
.hv2 .bridgeline{font-size:.98rem;color:var(--body);max-width:54ch;margin:0 0 16px}
.hv2 .bridgeline a{color:var(--brass);font-weight:700}
.hv2 .whisper{margin:14px 0 0;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.95rem;max-width:52ch}
.hv2 .datefields input{width:92px;min-height:52px;font-size:1.15rem;font-family:var(--mono);text-align:center;letter-spacing:.06em}
.hv2 .datefields input#yy{width:128px}
.hv2 .datefields input::placeholder{color:var(--faint);letter-spacing:.12em}
.hv2 .df-hint{margin:12px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--silver);min-height:1.4em;max-width:none}
.hv2 .df-hint.is-err{color:var(--rose)}
@media(max-width:420px){
  .hv2 .datefields{gap:8px}
  .hv2 .datefields label{flex:1 1 0}
  .hv2 .datefields input{width:100%;min-width:0}
  .hv2 .datefields input#yy{width:100%}
}