/* /qimen + /qimen/learn — the standalone 奇门 pages. Two looks on one layout: A · 泥金 Relic (dark, default) and
B · 玉 Artefact (light, [data-theme="light"], ?look=artefact). The hero (words + the 3D object) is kept from the
2026-09-25 build; everything below it follows intel/jade-qimen-design-grammar-2026-09-25/GRAMMAR.md (2026-09-25
rebuild): no cards below the hero, a numbered margin rail, one type scale, ruled rows, plates with corner marks, radius
0 (2px on buttons and inputs), and the B8 rule set — no widows, no orphaned components. */
@font-face{font-family:'Cormorant Garamond';src:url('/static/fonts/cormorant-garamond-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
/* JadeLatin Sans is cut from Noto Sans SC, whose curly quotes are full-width CJK glyphs; English text takes its quotes
and dashes from a Latin system face instead (local() only — nothing is fetched). */
@font-face{font-family:'JQ Punct';src:local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),local('Roboto'),local('Segoe UI');unicode-range:U+2018-201F,U+2013-2014,U+2026}
@font-face{font-family:'JadeLatin Sans';src:url('/static/fonts/jade-latin-sans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
/* ═══ tokens ═══ */
:root{
color-scheme:dark;
--bg:#0c0a08; --bg-2:#110f0c; --paper:#15130f; --raise:#1b1914;
--text:#ece3d0; --muted:#aca38f; --faint:#7a7163; --line:#2f291f; --line-2:#3d352a;
--gold:#d2ad63; --gold-hi:#e6c47f; --gold-ink:#1a1408; --jade:#3fa886;
--seal:#a8402f; --act:#d2ad63; --act-ink:#1a1206;
--mu:#c07a41; --jx:#b673c3; --po:#e05a5a; --xmu:#3f9fd2; --cur:#d35754;
--wood:#62a566; --fire:#e07070; --earth:#b3977f; --metal:#d9b060; --water:#7d9fd6;
/* GRAMMAR B2 */
--rule:rgba(210,173,99,.42); --rule-soft:#2f291f; --num:#d2ad63; --cinnabar:#a8402f; --focus:#e6c47f; --plate:#15130f;
--ease-out:cubic-bezier(.16,1,.3,1); --ease-line:cubic-bezier(.19,1,.22,1); --ease:var(--ease-out);
--serif:'Cormorant Garamond','Noto Serif SC','Songti SC','STSong',Georgia,serif;
--sc:'Noto Serif SC','Songti SC','STSong','Microsoft YaHei',serif;
--body:'JadeLatin Sans','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
--r:14px; --wrap:1120px; --page:1280px;
--gut:clamp(16px,2vw,32px); --side:clamp(16px,4vw,48px);
}
[data-theme="light"]{
color-scheme:light;
--bg:#e8e3d3; --bg-2:#e1dbc8; --paper:#f3eee2; --raise:#faf7ef;
--text:#23211d; --muted:#57503f; --faint:#7d7566; --line:#cfc6ae; --line-2:#bfb59b;
--gold:#7a5a22; --gold-hi:#6a4d1b; --gold-ink:#fbf8f1; --jade:#2f6b51;
--seal:#a8402f; --act:#2f6b51; --act-ink:#f6f3ea;
--mu:#8e5a31; --jx:#8f5199; --po:#b73434; --xmu:#2f7aa6; --cur:#af3e3b;
--wood:#3d6a40; --fire:#a23333; --earth:#6d5b54; --metal:#94702f; --water:#314f7d;
--rule:#23211d; --rule-soft:#cfc6ae; --num:#23211d; --focus:#2f6b51; --plate:#f3eee2;
}
/* ═══ base ═══ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:not([lang="zh"]){--body:'JQ Punct','JadeLatin Sans','Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',system-ui,sans-serif}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:hidden;font-variant-numeric:lining-nums}
[data-theme="light"] body{
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
html[lang="zh"] body{line-height:1.9}
img,svg{display:block;max-width:100%}
a{color:var(--gold-hi)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
section,#answer,#gate,#mine{scroll-margin-top:76px}
.nw{white-space:nowrap}
.zh,.term{font-family:var(--sc);white-space:nowrap}
.zh{color:var(--gold-hi)}
/* one language at a time — the other is in the page, hidden (no-JS still reads a whole page) */
html[lang="zh"] [data-l="en"], html:not([lang="zh"]) [data-l="zh"]{display:none!important}
html[lang="zh"] :is(h1,h2,h3,p,li,dd,dt,td,th,figcaption,caption,label,legend){line-break:strict}
html[lang="zh"] :is(h1,h2){word-break:keep-all;overflow-wrap:anywhere}
:lang(zh){text-autospace:ideograph-alpha}
h1,h2,h3,caption,figcaption,.btn,.more,.deck,.qq,.faq-q,.key dt{text-wrap:balance}
p,li,dd,td{text-wrap:pretty}
/* ═══ top bar (above the hero, unchanged in spirit) ═══ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.bar{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--line)} /* 2026-10-08: 84% let text show through on phones */
.bar .wrap{display:flex;align-items:center;gap:14px;height:60px}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text);white-space:nowrap}
.mark b{font-family:var(--sc);font-weight:600;font-size:22px;letter-spacing:.06em;color:var(--gold-hi)}
.mark span{font-size:14px;letter-spacing:.04em;color:var(--muted);font-family:var(--serif);font-weight:600}
.bar .sp{flex:1}
.chip-btn{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;color:var(--muted);transition:color .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.chip-btn:hover{color:var(--text);border-color:var(--gold)}
.chip-btn .ic{font-size:15px;line-height:1}
.chip-btn .short{display:none}
.to-ink{display:none}
[data-theme="light"] .to-ink{display:inline}[data-theme="light"] .to-paper{display:none}
.who{font-size:14px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ═══ HERO — the question beside the board it will be read on (Jenn, 2026-09-25: the 3D object is gone; the live
时盘 of this 时辰 sits beside the form). ≥900px: words + form on the left, the board on the right. Below 900px (768
and phones): the form first, the board directly under it. ═══ */
.hero{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
.hero .wrap>div:first-child{max-width:560px}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,4.5vw,64px)}}
.hero-board{min-width:0}
.board-note{margin-top:22px;display:grid;gap:12px}
.board-note .shared{font:500 24px/1.2 var(--serif);color:var(--text)}
html[lang="zh"] .board-note .shared{font:600 19px/1.6 var(--sc)}
.board-note .links{margin-top:4px}
.eyebrow{font-size:14px;letter-spacing:.04em;color:var(--gold);display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.hero .eyebrow{font-family:var(--serif);font-weight:600;font-size:15px}
[data-theme="light"] .hero .eyebrow{border-top:1px solid var(--text);padding-top:10px;color:var(--muted);max-width:460px}
/* the small hero chop (C1, 28px) — was `.seal`, whose width/height squashed the 家规 seal (GRAMMAR A6) */
.chop{display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:28px;background:var(--seal);color:#f6e7d4;font:700 15px var(--sc);border-radius:2px;margin-right:10px}
[data-theme="light"] .chop{background:transparent;border:1.5px solid var(--seal);color:var(--seal);transform:rotate(-4deg)}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.6vw,62px);line-height:1.06;letter-spacing:-.01em;margin:14px 0 18px}
html[lang="zh"] h1{font-family:var(--sc);font-weight:600;letter-spacing:.02em;line-height:1.22;font-size:clamp(32px,4.8vw,50px)}
[data-theme="light"] h1{font-family:var(--sc);font-weight:600;letter-spacing:.01em;font-size:clamp(32px,4.2vw,54px);line-height:1.14}
h1 em{font-style:normal;color:var(--gold-hi)}
.hero .deck{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.35;color:var(--text);max-width:30em}
html[lang="zh"] .hero .deck{font-family:var(--sc);font-size:19px;line-height:1.7}
.lede{font-size:16px;color:var(--muted);max-width:34em;margin-top:12px}
.ask{margin-top:24px;background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 20px 60px -30px rgba(0,0,0,.6)}
.ask label.q{display:block;font-size:14px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.ask textarea{width:100%;min-height:92px;resize:vertical;background:transparent;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-size:17px;line-height:1.5;color:var(--text)}
.ask textarea::placeholder{color:var(--faint)}
.ask textarea:focus{outline:none;border-color:var(--gold)}
.ask .help{font-size:14px;color:var(--muted);margin-top:6px}
.topics{margin:14px 0 4px;border:0;min-width:0}
.topics legend{font-size:14px;color:var(--muted);margin-bottom:8px}
/* six topics: 3 × 2, or 2 × 3 on a phone — never 5 + 1 (B8, R-O1) */
.chips{display:grid;grid-template-columns:repeat(3,max-content);gap:8px}
.topic{position:relative}
.topic input{position:absolute;opacity:0;inset:0;cursor:pointer}
.topic>span{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;font-size:15px;color:var(--muted);transition:color .15s,border-color .15s,background-color .15s;white-space:nowrap}
.topic span i{font-style:normal;font-family:var(--sc);color:var(--muted);font-size:14px} /* was --faint: 3.92:1 (Lighthouse 2026-09-26) */
.topic input:checked+span{border-color:var(--gold);color:var(--text);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.topic input:checked+span i{color:var(--gold-hi)}
.topic input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.ask-row{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.hint{font-size:14px;color:var(--muted)}
.err{font-size:15px;color:var(--po);margin-top:10px}
.ok{font-size:15px;color:var(--text);margin-top:10px}
.price .soon{margin:4px 0 14px}
/* ═══ buttons and links (GRAMMAR B7) ═══ */
.btn{height:52px;padding:0 28px;border:0;border-radius:2px;background:var(--act);color:var(--act-ink);cursor:pointer;text-decoration:none;
font:600 16px/1 var(--body);letter-spacing:.02em;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
transition:background-color .2s var(--ease-out),transform .12s}
.btn::after{content:'';position:absolute;inset:-5px;border:1px solid var(--act);opacity:0;transform:scale(.985);pointer-events:none;
transition:opacity .24s var(--ease-out),transform .24s var(--ease-out)}
.btn:hover::after{opacity:.55;transform:none}
.btn .arr{transition:transform .2s var(--ease-out)} .btn:hover .arr{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:8px}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--rule)}
.btn.ghost::after{border-color:var(--rule)}
.more{display:inline-flex;align-items:center;gap:14px;font:500 18px/1.3 var(--serif);color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer;padding:0;min-height:44px}
html[lang="zh"] .more{font-family:var(--sc);font-size:16px}
/* the rule after a link is drawn 40px and grows to 72px on hover — inside a 72px box, so a hover (or a tap that leaves
hover stuck on a phone) never pushes past the page edge */
.more::after{content:'';flex:0 0 72px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(.556);transition:transform .32s var(--ease-out)}
.more:hover::after{transform:scaleX(1)} .more:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.more:hover{color:var(--gold-hi)}
/* ═══ SECTIONS below the hero (GRAMMAR B4/B5): a 12-column page, the margin rail in cols 1–2 ═══ */
.page{max-width:var(--page);margin:0 auto;padding:0 var(--side)}
section.s{position:relative;padding:clamp(88px,10vw,160px) 0 clamp(56px,6vw,96px);overflow-x:clip}
section.s::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform-origin:left}
.bleed+section.s::before{display:none}
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.sec>*{grid-column:3/13;min-width:0}
.rail{grid-column:1/3;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:sticky;top:96px}
.ls{width:24px;height:24px;color:var(--rule);flex:0 0 auto}
.ls path{fill:none;stroke:currentColor;stroke-width:1}
.ls .c{fill:var(--num)}
.num{font:600 28px/1 var(--sc);color:var(--num);display:block;overflow:hidden}
.num>span{display:block}
.vname{writing-mode:vertical-rl;text-orientation:upright;font:500 15px/1 var(--sc);letter-spacing:.32em;color:var(--muted)}
.lat{font:600 15px/1.2 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
html[lang="zh"] .lat{display:none}
.sec>h2{grid-column:3/12}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,2.1vw + 22px,56px);line-height:1.04;letter-spacing:-.012em;max-width:16em}
html[lang="zh"] h2{font-family:var(--sc);font-weight:600;font-size:clamp(28px,1.6vw + 18px,44px);line-height:1.28;letter-spacing:.04em;max-width:13em}
.deck{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.35;color:var(--muted);max-width:30em;margin-top:20px}
html[lang="zh"] .deck{font-family:var(--sc);font-size:19px;line-height:1.7;max-width:26em}
.sec>.deck{grid-column:3/10}
.body{margin-top:48px}
.sec>.body+.body{margin-top:40px}
p{max-width:34em}
html[lang="zh"] p{max-width:32em}
.prose-s{font-size:17px}
html[lang="zh"] .prose-s{font-size:16.5px;letter-spacing:.02em}
[data-theme="light"] .prose-s{line-height:1.65}
:root:not([data-theme="light"]) .prose-s{line-height:1.72}
.small{font-size:14px;line-height:1.55;color:var(--muted)}
html[lang="zh"] .small{line-height:1.75}
.cta{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.label{font:600 15px/1.3 var(--serif);letter-spacing:.04em;color:var(--num);font-variant-numeric:lining-nums}
html[lang="zh"] .label{font:500 14px/1.5 var(--sc);letter-spacing:.18em}
h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15}
html[lang="zh"] h3{font-family:var(--sc);font-size:21px;line-height:1.4;letter-spacing:.03em}
/* ruled sets — sized to their count (R-O1): n=6 → 3 / 2 / 1 columns, n=4 → 2 / 1, n=2 → 2 / 1, n=9 → 3 / 1 */
.ruled{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.ruled>*{border-bottom:1px solid var(--rule-soft);padding:24px 0}
.ruled.c2>*{padding:24px var(--gut) 28px 0}
@media (min-width:768px){.ruled.c2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}}
/* the nine examples (Jenn 2026-09-26: "a lot of reading"): a row of board plates you swipe on a phone and see three
across on a wide screen; each shows the question and its palaces, and the example reading folds behind "Read" */
.ruled.ex{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,380px);gap:16px;overflow-x:auto;
scroll-snap-type:x mandatory;border-top:0;padding:2px 2px 10px;overscroll-behavior-x:contain;scrollbar-width:thin}
.ruled.ex>article{scroll-snap-align:start;border:1px solid var(--rule);background:var(--plate);padding:20px 18px 18px;min-width:0;
display:flex;flex-direction:column}
.ruled.ex>article .look{margin-top:10px}
.more-read{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule-soft)}
.more-read>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
font:500 16px/1.3 var(--serif);color:var(--text);min-height:32px}
html[lang="zh"] .more-read>summary{font:500 15px/1.5 var(--sc)}
.more-read>summary::-webkit-details-marker{display:none}
.more-read>summary::after{content:'+';font:400 22px/1 var(--serif);color:var(--num)}
.more-read[open]>summary::after{content:'−'}
.more-read>summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.swipe-hint{font-size:14px;color:var(--muted);margin:18px 0 10px}
.swipe-hint::after{content:' →'}
@media (min-width:1024px){
.ruled.ex{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
.swipe-hint{display:none}
}
.ruled .t{font:600 22px/1.2 var(--serif);margin-bottom:8px}
html[lang="zh"] .ruled .t{font:600 19px/1.5 var(--sc)}
.ruled .said{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--text);margin-bottom:10px;font-style:normal}
html[lang="zh"] .ruled .said{font-family:var(--sc);font-size:17px;line-height:1.7}
.ruled .look{color:var(--muted);font-size:15px;line-height:1.55}
html[lang="zh"] .ruled .look{line-height:1.8}
/* 贰 · asking well — the tips and the vague → clearer table */
.tips{counter-reset:tip;list-style:none}
.tips li{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline;border-bottom:1px solid var(--rule-soft);padding:18px 0;max-width:none}
.tips li::before{counter-increment:tip;content:counter(tip,cjk-decimal);font:600 22px/1 var(--sc);color:var(--num)}
.tips li>span{max-width:34em}
table{border-collapse:collapse;width:100%}
.vc caption{caption-side:top;text-align:left;padding-bottom:12px}
.vc th{font:500 14px/1.4 var(--body);letter-spacing:.12em;color:var(--muted);text-align:left;padding:0 var(--gut) 10px 0;border-bottom:1px solid var(--rule)}
html[lang="zh"] .vc th{letter-spacing:.2em}
.vc td{padding:14px var(--gut) 14px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;width:58%}
.vc td:first-child{width:42%}
.vc td:first-child{color:var(--muted);font-family:var(--serif);font-size:20px;line-height:1.3}
html[lang="zh"] .vc td:first-child{font-family:var(--sc);font-size:17px;line-height:1.7}
.vc td:last-child{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--text)}
html[lang="zh"] .vc td:last-child{font-family:var(--sc);font-size:17px;line-height:1.7}
.vc td small{display:block;font:400 14px/1.5 var(--body);color:var(--muted);margin-top:4px}
/* ═══ plates (every board): no card, no radius, no shadow — corner marks and a museum caption ═══ */
.plate{position:relative;background:var(--plate);padding:12px}
.plate::before{content:'';position:absolute;inset:-6px;pointer-events:none;
background:
linear-gradient(var(--rule),var(--rule)) 0 0/12px 1px no-repeat, linear-gradient(var(--rule),var(--rule)) 0 0/1px 12px no-repeat,
linear-gradient(var(--rule),var(--rule)) 100% 0/12px 1px no-repeat, linear-gradient(var(--rule),var(--rule)) 100% 0/1px 12px no-repeat,
linear-gradient(var(--rule),var(--rule)) 0 100%/12px 1px no-repeat, linear-gradient(var(--rule),var(--rule)) 0 100%/1px 12px no-repeat,
linear-gradient(var(--rule),var(--rule)) 100% 100%/12px 1px no-repeat, linear-gradient(var(--rule),var(--rule)) 100% 100%/1px 12px no-repeat}
.plate::after{content:'';position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);pointer-events:none}
[data-theme="light"] .plate{border:1px solid var(--rule);padding:0}
[data-theme="light"] .plate::after{display:none}
.plate .cap{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);text-align:left;padding:0 2px}
[data-theme="light"] .plate .cap{padding:12px 14px 14px;margin:0;border-top:1px solid var(--rule-soft)}
.cap b{display:block;font-weight:500;color:var(--text);font-family:var(--serif);font-size:15px;letter-spacing:.02em;margin-top:2px}
html[lang="zh"] .cap b{font-family:var(--sc);font-size:14px}
.cap b:empty{display:none}
.board{position:relative;min-height:320px}
.board iframe{border:0;display:block;background:var(--plate)}
.board .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:15px;overflow:hidden}
/* 2026-10-08: while a board is cast, its nine palaces are already drawn in faint rule lines, and a soft light passes
over them (transform only); the words stay on top. Reduced motion: the still grid. */
.board .loading::before{content:'';position:absolute;left:50%;top:50%;width:min(76%,420px);aspect-ratio:1;
transform:translate(-50%,-50%);border:1px solid var(--rule-soft);opacity:.9;
background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),var(--rule-soft) calc(33.333% - .5px),var(--rule-soft) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),var(--rule-soft) calc(66.666% - .5px),var(--rule-soft) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
linear-gradient(180deg,transparent calc(33.333% - .5px),var(--rule-soft) calc(33.333% - .5px),var(--rule-soft) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),var(--rule-soft) calc(66.666% - .5px),var(--rule-soft) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.board .loading::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 9%,transparent) 50%,transparent 70%);
transform:translateX(-100%);animation:jo-sheen 1.8s ease-in-out infinite}
.board .loading>*{position:relative;z-index:1;background:var(--plate);padding:4px 10px}
@keyframes jo-sheen{to{transform:translateX(100%)}}
.board .loading.failed::before,.board .loading.failed::after{display:none} /* a failed cast is not shown as still loading */
/* the wait for a reading: a small diamond breathes beside the line that says what is being done */
.waiting{position:relative;padding-left:24px}
.waiting::before{content:'';position:absolute;left:3px;top:.55em;width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg);animation:jo-wait 1.6s ease-in-out infinite}
@keyframes jo-wait{0%,100%{opacity:.35;transform:rotate(45deg) scale(.78)}50%{opacity:1;transform:rotate(45deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.waiting::before{animation:none;opacity:.8}}
@media (prefers-reduced-motion:reduce){.board .loading::after{animation:none;display:none}}
.links{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start}
/* ═══ the reading (after a question) — GRAMMAR B6: a quotation, a catalogue line, the board, the record, the prose ═══ */
.answer{padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px);position:relative}
.answer::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
/* the reading pairs like the hero: the question and its reading on one side, its board on the other; stacked on
phones as question → board → reading */
.pair{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "board" "read";gap:32px 56px;align-items:start}
@media (min-width:1024px){.pair{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"q board" "read board";grid-template-rows:auto 1fr}}
.pair>.rec-head{grid-area:q}.pair>.pair-board{grid-area:board;min-width:0}.pair>.pair-read{grid-area:read;min-width:0}
.rec-head{max-width:52em}
.qq{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.2;max-width:22em}
html[lang="zh"] .qq{font-family:var(--sc);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.5}
.qq::before{content:'\201C';color:var(--num)} .qq::after{content:'\201D';color:var(--num)}
html[lang="zh"] .qq::before{content:'\300C'} html[lang="zh"] .qq::after{content:'\300D'}
.catline{margin-top:12px;font:600 15px/1.4 var(--serif);letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--muted)}
html[lang="zh"] .catline{font:500 14px/1.6 var(--sc);letter-spacing:.12em}
.ans-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media (min-width:1024px){.ans-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gut) 56px}}
.rec{margin-top:36px;font-size:15px;line-height:1.5;font-variant-numeric:lining-nums tabular-nums}
.rec caption{caption-side:top;text-align:left;font:600 15px/1.3 var(--serif);letter-spacing:.04em;color:var(--num);padding-bottom:10px}
html[lang="zh"] .rec caption{font:500 14px/1.5 var(--sc);letter-spacing:.18em}
.rec th{font:500 14px/1.3 var(--body);letter-spacing:.12em;color:var(--muted);text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.rec td{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;font-family:var(--sc)}
.rec td.role{font-family:var(--body);color:var(--muted);font-size:14px;line-height:1.45;max-width:12em}
.rec td.pal{font:600 20px/1.2 var(--sc);white-space:nowrap}
.h-g{display:inline-block;margin:0 10px 2px 0;font:600 15px/1.4 var(--sc);text-decoration:underline 2px;text-underline-offset:4px;white-space:nowrap}
.h-g small{font:500 14px var(--sc);margin-left:3px;text-decoration:none;display:inline-block;color:var(--muted)}
.h-g.mu{color:var(--mu)} .h-g.jx{color:var(--jx)} .h-g.po{color:var(--po)} .h-g.xmu{color:var(--xmu)} .h-g.kong{color:var(--muted);text-decoration:none}
.h-none{font:400 14px/1.4 var(--body);color:var(--muted);white-space:nowrap}
@media (max-width:767px){
.rec thead{display:none}
.rec tr{display:block;border-bottom:1px solid var(--rule-soft);padding:12px 0}
.rec td{display:inline;border:0;padding:0}
.rec td.role{display:block;margin-bottom:4px}
.rec td.pal{font-size:18px;margin-right:6px}
.rec td:nth-child(n+3):nth-child(-n+5)::after{content:' · ';color:var(--muted)}
.rec td:last-child{display:block;margin-top:6px}
}
.prose{font-size:17px;line-height:1.72;max-width:34em}
html[lang="zh"] .prose{font-size:16.5px;line-height:1.9;letter-spacing:.02em}
.prose h2,.prose h3{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--num);margin:30px 0 10px;line-height:1.15;letter-spacing:0}
html[lang="zh"] .prose h2, html[lang="zh"] .prose h3{font-family:var(--sc);font-size:21px;line-height:1.4}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 14px}
/* the 解读 (26 Sep): the symbol behind a point, or 天时 · 地利 · 人和 beside the take-away's three lines — a small label
the page draws from ⟦…⟧ (qimen.js); the words stay plain, the Qimen stays visible */
.prose .sym{display:inline-block;font:500 14px/1 var(--sc);letter-spacing:.08em;color:var(--gold);white-space:nowrap;
border:1px solid var(--rule);border-radius:2px;padding:3px 8px;margin:0 2px 0 6px;vertical-align:2px}
.prose .waiting{color:var(--muted)}
.prose ul{margin:0 0 14px 1.1em}
.prose li{margin-bottom:4px}
.prose strong{color:var(--text);font-weight:600}
.prose.live::after{content:'';display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-2px;background:var(--num);animation:blink 1s steps(2) infinite}
.waiting{color:var(--muted);font-style:italic}
.after{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.note{font-size:15px;color:var(--muted);border-left:0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:12px 0;margin-bottom:22px}
/* "tell us how it went" — a quiet line under the reading, then an inline form (never a pop-up) */
.fb-link{margin-top:22px;font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.fb-link .more{font-size:17px}
.fb{margin-top:24px;border-top:1px solid var(--rule);padding-top:24px;max-width:34em}
.fb h3{margin-bottom:18px}
.fb fieldset{border:0;min-width:0;margin-bottom:18px}
.fb legend{font-size:15px;color:var(--text);margin-bottom:10px}
.opts{display:grid;grid-template-columns:repeat(3,max-content);gap:8px}
.opts label{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:2px;padding:10px 12px;cursor:pointer;font-size:15px}
.opts input{accent-color:var(--act)}
.fb .lab{display:block;font-size:15px;margin-bottom:8px}
/* follow-ups under a reading (2026-09-27): a heading with what is left, the thread, one small box */
.fu{margin:26px 0 0;border-top:1px solid var(--rule);padding-top:14px}
.fu-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;max-width:none;
font:500 19px/1.3 var(--serif);color:var(--text)}
html[lang="zh"] .fu-h{font:600 16px/1.5 var(--sc)}
.fu-left{font-size:14px;font-weight:400;color:var(--muted);white-space:nowrap}
html[lang="zh"] .fu-left{font:400 14px/1.5 var(--sc)}
.fu-thread{list-style:none;margin:8px 0 0;padding:0}
.fu-thread>li{border-top:1px solid var(--rule-soft);padding:12px 0;max-width:none}
.fu-thread .fq{font-weight:600;margin:0 0 6px;max-width:none}
.fu-thread .fa{margin:0}
.fu-thread .fa p{margin:0 0 8px}
.fu-act{margin:8px 0 0}
.fu-care{background:none;border:0;padding:6px 0;color:var(--gold);font:inherit;text-decoration:underline;
text-underline-offset:3px;cursor:pointer;min-height:32px}
.fu-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:10px}
.fu-form textarea{width:100%;min-height:56px;resize:vertical;background:transparent;border:1px solid var(--line-2);
border-radius:2px;padding:10px 12px;font-size:16px;line-height:1.5;color:var(--text)}
.fu-form textarea::placeholder{color:var(--faint)}
.fu-form textarea:focus{outline:none;border-color:var(--gold)}
.fu-form .btn{height:48px;padding:0 22px}
@media (max-width:520px){.fu-form{grid-template-columns:minmax(0,1fr)}.fu-form .btn{width:100%}}
.fb textarea{width:100%;min-height:96px;resize:vertical;background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:10px 12px;font-size:16px;line-height:1.5}
.fb textarea:focus{outline:none;border-color:var(--focus)}
.tick{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;margin-top:14px;cursor:pointer}
.tick input{margin-top:4px;accent-color:var(--act);width:16px;height:16px}
.fb .small{margin:16px 0 18px}
/* gates — ruled panes, not cards */
.gate-wrap{max-width:720px}
.pane{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px 0}
.pane h3{margin-bottom:12px}
.pane p{color:var(--muted);margin-bottom:12px}
.pane .deck{margin:0 0 10px;font-size:20px}
.field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;margin-top:10px;align-items:end}
.field input,.birth input{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 0;font-size:17px;color:var(--text)}
.field input:focus,.birth input:focus{outline:none;border-bottom-color:var(--focus);box-shadow:0 1px 0 var(--focus)}
.field.one{grid-template-columns:minmax(0,1fr)}
.small.gap{margin-top:16px}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
@media (min-width:1024px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut) 56px}}
.lines{list-style:none;margin:12px 0}
.lines li{padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:15px}
.lines li b{color:var(--text)}
/* 伍 · what you get / 读法 — ruled step rows with numerals, a vertical line through them (never a 2 + 1) */
.steps{list-style:none;position:relative;border-top:1px solid var(--rule)}
.steps>li{display:grid;grid-template-columns:5rem minmax(0,17rem) minmax(0,1fr);column-gap:var(--gut);align-items:baseline;padding:28px 0;border-bottom:1px solid var(--rule-soft);max-width:none;position:relative}
.steps .n{font:600 56px/1 var(--sc);color:var(--num)}
.steps .n+*{font:600 24px/1.2 var(--serif)}
.steps .cond{display:block;margin-top:6px;font:400 15px/1.45 var(--body);color:var(--muted);letter-spacing:0}
html[lang="zh"] .steps .n+*{font:600 20px/1.5 var(--sc)}
.steps .x{color:var(--muted);max-width:40em}
.steps::before{content:'';position:absolute;left:1.6rem;top:96px;bottom:60px;width:1px;background:var(--rule-soft)}
.steps .fig{grid-column:3;margin-top:18px}
@media (max-width:767px){
.steps>li{grid-template-columns:3.5rem minmax(0,1fr);row-gap:8px}
.steps .n{font-size:40px;grid-row:1/span 2}
.steps .x,.steps .fig{grid-column:2}
.steps::before{left:1.1rem;top:80px}
}
/* 陆 · 家规 — the list with 不 / 而 markers and the C1 seal */
.rule-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media (min-width:1024px){.rule-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}}
.nevers{list-style:none;border-top:1px solid var(--rule-soft)}
.nevers li{display:grid;grid-template-columns:2.5em minmax(0,1fr);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule-soft);max-width:none;color:var(--text)}
.nevers .mk{font:600 20px/1 var(--sc);color:var(--num)}
.nevers li.and{border-top:2px solid var(--rule);margin-top:-1px}
.rule-seal{width:168px;height:168px;transform:rotate(-2deg);margin-top:-12px}
@media (max-width:1023px){.rule-seal{width:128px;height:128px;margin-top:0}}
.trust{margin-top:22px;font-family:var(--serif);font-size:20px;line-height:1.35;max-width:14em}
html[lang="zh"] .trust{font-family:var(--sc);font-size:17px;line-height:1.7}
/* seals (C1) — Relic uses 白文 (a field with the characters cut out), Artefact 朱文 (red strokes on bare paper) */
.seal-svg .zhu{display:none}
[data-theme="light"] .seal-svg .zhu{display:inline}
[data-theme="light"] .seal-svg .bai{display:none}
/* 柒 · the Birth Board — contents + ledger on the left, the price label on the right */
/* the offer is text beside its board too: contents + price on the left, an example 命盘 on the right (sticky);
phones: contents → the example board → price */
.offer{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "board" "buy";gap:48px;align-items:start}
@media (min-width:1024px){.offer{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"text board" "buy board";gap:56px 64px}}
.offer>.offer-text{grid-area:text;min-width:0}.offer>.offer-buy{grid-area:buy;min-width:0;max-width:30rem}
.offer>.offer-board{grid-area:board;min-width:0;align-self:start}
@media (min-width:1024px){.offer>.offer-board{position:sticky;top:96px}}
.contents{list-style:none;border-top:1px solid var(--rule)}
.contents li{display:grid;grid-template-columns:6.5em minmax(0,1fr) 2.2em;column-gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-soft);max-width:none}
.contents .term{font:600 17px/1.4 var(--sc);color:var(--text)}
.contents .gl{display:flex;align-items:baseline;gap:10px;min-width:0}
.contents .gl>span:first-child{min-width:0}
.contents .gl::after{content:'';flex:1 1 24px;min-width:24px;height:6px;background:radial-gradient(circle,currentColor .7px,transparent 1.2px) 0 78%/6px 6px repeat-x;color:var(--faint);align-self:flex-end;margin-bottom:6px}
.contents .fo{font:500 17px/1 var(--serif);font-variant-numeric:lining-nums;color:var(--muted);text-align:right}
.exp{list-style:none;margin:12px 0 14px;font-size:15px;line-height:1.55;color:var(--text)}
.exp li{padding:3px 0 3px 1.1em;position:relative;max-width:none}
.exp li::before{content:'';position:absolute;left:0;top:.8em;width:.55em;height:1px;background:var(--rule)}
html[lang="zh"] .exp{line-height:1.75}
/* English mode names the places in plain words (Jenn 2026-09-27: Chinese inside an English sentence stops a reader who
scans) — one line in place of the Chinese palace list, which stays in Chinese mode */
/* your past readings (2026-09-27): closed under the form, a count only; rows fold open to the reading */
.past{margin:18px 0 0;border-top:1px solid var(--rule-soft);padding-top:10px}
.past>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;
font:500 16px/1.3 var(--serif);color:var(--text)}
html[lang="zh"] .past>summary{font:500 15px/1.5 var(--sc)}
.past>summary::-webkit-details-marker,.past-list summary::-webkit-details-marker{display:none}
.past>summary::after{content:'+';margin-left:auto;font:400 22px/1 var(--serif);color:var(--num)}
.past[open]>summary::after{content:'−'}
.past>summary .n{color:var(--muted);font-variant-numeric:lining-nums}
.past summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.past-list{list-style:none;margin:4px 0 0;padding:0}
.past-list>li{border-top:1px solid var(--rule-soft);max-width:none}
.past-list summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;
row-gap:2px;padding:12px 0;min-height:44px}
.past-list .when{font-size:14px;color:var(--muted);font-variant-numeric:lining-nums}
.past-list .as{font-size:14px;color:var(--gold)}
.past-list .hq{grid-column:1 / -1;font-size:15px;line-height:1.45;color:var(--text)}
.past-list .prose{padding:4px 0 16px}
.past-foot{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:none}
.past-hide{background:none;border:0;padding:6px 0;margin-left:6px;color:var(--gold);font:inherit;text-decoration:underline;
text-underline-offset:3px;cursor:pointer;min-height:32px}
.rec caption .as{font:inherit;color:var(--muted);font-weight:400}
.ruled.ex .roles{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:none}
/* English contents: the plain name on its own line, the gloss + leader + page number under it */
html:not([lang="zh"]) .contents li{grid-template-columns:minmax(0,1fr) 2.2em;row-gap:2px}
html:not([lang="zh"]) .contents .term{font:600 19px/1.3 var(--serif);grid-column:1 / -1}
html:not([lang="zh"]) .contents .gl{grid-column:1;grid-row:2}
html:not([lang="zh"]) .contents .fo{grid-column:2;grid-row:2}
.ex .said{margin:6px 0 4px}
.also{margin-top:22px;list-style:none}
.also li{padding:8px 0 8px 1.4em;position:relative;color:var(--muted);max-width:34em}
.also li::before{content:'';position:absolute;left:0;top:1.05em;width:.7em;height:1px;background:var(--rule)}
.ledger{margin-top:30px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:17px;color:var(--muted)}
.ledger b{font:600 26px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--text)}
.ledger .sum b{color:var(--num)}
.price{border:1px solid var(--rule);padding:32px;position:relative;border-radius:0}
.price .corner{position:absolute;width:24px;height:24px;color:var(--rule)}
.price .corner.tl{top:6px;left:6px}.price .corner.br{bottom:6px;right:6px;transform:rotate(180deg)}
.price .chop-lg{position:absolute;top:0;right:0;width:44px;height:44px;transform:translate(35%,-35%) rotate(-3deg)}
.price .kicker{font:600 15px/1.3 var(--serif);letter-spacing:.04em;color:var(--muted)}
html[lang="zh"] .price .kicker{font:500 14px/1.5 var(--sc);letter-spacing:.18em}
.price .amt{display:flex;align-items:flex-start;gap:6px;margin-top:10px;font:500 clamp(64px,6vw,96px)/.9 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums;color:var(--text)}
.price .amt sup{font:600 18px/1 var(--body);letter-spacing:.02em;color:var(--muted);margin-top:.35em}
.price .per{font-size:14px;color:var(--muted);margin:14px 0 20px}
.price .btn{width:100%;margin-top:18px}
.price .small{margin-top:14px}
.price .alt{margin-top:16px;font-size:15px;color:var(--muted)}
.price .alt button{background:none;border:0;color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;font:inherit}
.birth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px;margin-top:14px}
.birth label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.birth .full{grid-column:1/-1}
.places{position:relative}
.places ul{list-style:none;position:absolute;z-index:5;left:0;right:0;top:100%;background:var(--raise);border:1px solid var(--rule);border-radius:0;margin-top:4px;max-height:220px;overflow:auto}
.places li button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;font-size:15px;cursor:pointer;color:var(--text)}
.places li button:hover,.places li button:focus{background:var(--bg-2)}
.gender{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.gender label{flex-direction:row;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);border-radius:2px;padding:11px;cursor:pointer;color:var(--text);font-size:15px}
.gender input{accent-color:var(--act)}
.mine{margin-top:56px}
.mine .ans-grid{align-items:start}
/* 捌 · coming (two, not yet available) */
.coming .t .tag{font:500 14px/1 var(--body);letter-spacing:.06em;color:var(--muted);margin-left:8px;white-space:nowrap}
/* 玖 · 问答 — each answer opens on tap (Jenn 2026-09-26: "a lot of reading"; the always-open catalogue was the author's
call at Jev confidence .17). 问 / 答 markers kept; the page's JSON-LD still reads every answer from the HTML. */
.faq{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa>summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:2rem minmax(0,1fr) 1.5rem;
column-gap:var(--gut);align-items:baseline;padding:22px 0}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:'+';font:400 24px/1 var(--serif);color:var(--num);justify-self:end}
.qa[open]>summary::after{content:'−'}
.qa>summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.qa .mk{font:600 15px/1.4 var(--sc);color:var(--num)}
.faq-q{font:500 22px/1.25 var(--serif);max-width:none}
html[lang="zh"] .faq-q{font:600 18px/1.6 var(--sc)}
.qa .ans{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:var(--gut);padding:0 1.5rem 24px 0}
.qa .ans>p{color:var(--muted);max-width:40em}
.qa .ans>p a{color:var(--gold-hi)}
/* English mode drops the per-line 问 / 答 / 不 / 而 marks: one mark per section stays (the side rail, e.g. 捌 · 问答).
Jev 2026-09-27 (margin_marks_choice.py): one per section 0.91 over one per line 0.06 and none 0.03 —
stall 0.20 vs 0.54 per line, classical feel 0.77 vs 0.85 per line and 0.62 with none */
html:not([lang="zh"]) .qa .mk,html:not([lang="zh"]) .nevers .mk{display:none}
html:not([lang="zh"]) .qa>summary{grid-template-columns:minmax(0,1fr) 1.5rem}
html:not([lang="zh"]) .qa .ans{grid-template-columns:minmax(0,1fr)}
html:not([lang="zh"]) .nevers li{grid-template-columns:minmax(0,1fr)}
/* ═══ FULL-BLEED PLATES between sections (Jenn 09-25): the full 16:9 frame (never a 21:9 crop that cuts the
subject), 4:5 on a phone, dissolving into the page at top and bottom so no picture reads as a rectangle, and a
fine grain on the lens over each. The pictures are graded to the page's own off-black, so the fade has no seam. ═══ */
.bleed{position:relative;width:100%;margin:clamp(-64px,-4vw,-24px) 0 clamp(-48px,-3vw,-16px);overflow:hidden;background:none}
.bleed picture,.bleed img{display:block;width:100%}
.bleed img{height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:767px){.bleed img{aspect-ratio:4/5}}
.bleed>picture,.bleed .pin{position:relative;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#fff 18%,#fff 76%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#fff 18%,#fff 76%,transparent 100%)}
.bleed>picture::after,.bleed .pin::after,.bleed>.film::after{content:'';position:absolute;inset:-40%;pointer-events:none;opacity:.15;mix-blend-mode:overlay;
background:url("data:image/svg+xml;utf8,") 0 0/180px;
animation:grain .9s steps(5) infinite}
[data-theme="light"] .bleed>picture::after,[data-theme="light"] .bleed .pin::after,[data-theme="light"] .bleed>.film::after{mix-blend-mode:multiply;opacity:.08}
/* a plate's film (qimen-ui.js; 768px and wider, never under reduced motion): the clip starts from the picture beneath
it, so it sits exactly over that picture in its own masked box, where the grain can blend with it, and shows only
once it is actually playing. Phones keep the portrait picture and never download a clip */
.bleed>.film{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;overflow:hidden;opacity:0;pointer-events:none;
transition:opacity .9s ease;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#fff 18%,#fff 76%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#fff 18%,#fff 76%,transparent 100%)}
.bleed>.film.on{opacity:1}
html.js-motion .bleed:not(.in)>.film{opacity:0}
.bleed>.film video{display:block;width:100%;height:100%;object-fit:cover}
/* 玉 light look: a dark photograph fading into cream paper leaves a grey haze, so on paper each picture is a framed plate
instead (inside the page margins, one thin rule, no fade), the way museum and craft sites hang a photograph on a page */
[data-theme="light"] .bleed:not(.stage){margin:clamp(24px,3vw,48px) auto 0;max-width:var(--page);padding:8px var(--side)}
[data-theme="light"] .bleed:not(.stage)>picture{-webkit-mask-image:none;mask-image:none;outline:1px solid var(--rule);outline-offset:6px}
[data-theme="light"] .bleed:not(.stage)>.film{top:8px;left:var(--side);width:calc(100% - 2 * var(--side));-webkit-mask-image:none;mask-image:none}
[data-theme="light"] .stage .pin{-webkit-mask-image:none;mask-image:none}
/* the carry stage: a pinned frame; past its middle the window dissolves into the desk (qimen-ui.js adds .swapped — not ".two", which is the page's two-column grid class and squeezed the frame to one column) */
.bleed.stage{height:220svh;overflow:visible;margin:0}
.stage-mark{position:absolute;left:0;top:100svh;width:1px;height:1px;pointer-events:none}
.stage .pin{position:sticky;top:0;height:100svh;overflow:hidden}
.stage .layer{position:absolute;inset:0;transition:opacity 1.8s var(--ease-out),transform 3s var(--ease-out)}
.stage .layer img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.stage .l1{transform-origin:70% 64%}.stage .l1 img{object-position:66% 60%}
.stage .l2{opacity:0;transform:scale(1.12);transform-origin:64% 62%}.stage .l2 img{object-position:66% 62%}
.stage.swapped .l1{opacity:0;transform:scale(1.26)}
.stage.swapped .l2{opacity:1;transform:none}
.stage .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,10,8,.72) 0%,rgba(12,10,8,.3) 36%,rgba(12,10,8,0) 58%)}
.stage .say{position:absolute;left:var(--side);top:50%;transform:translateY(-50%);margin:0;max-width:9.5em;z-index:2;
font:500 clamp(30px,2.6vw + 14px,58px)/1.06 var(--serif);letter-spacing:-.01em;color:#f3ead8;text-shadow:0 1px 30px rgba(12,10,8,.55);transition:opacity 1.2s var(--ease-out)}
html[lang="zh"] .stage .say{font:600 clamp(26px,2vw + 12px,44px)/1.35 var(--sc);letter-spacing:.04em}
/* round 6: the two lines hand over in turn — the leaving one fades out in .45 s, the arriving one starts after .5 s. They
had cross-faded together for 1.2 s at the same spot, so mid-fade both lines showed on top of each other. */
.stage .s1{transition:opacity .9s var(--ease-out) .5s}
.stage .s2{opacity:0;transition:opacity .45s ease}
.stage.swapped .s1{opacity:0;transition:opacity .45s ease}
.stage.swapped .s2{opacity:1;transition:opacity .9s var(--ease-out) .5s}
/* 768px and wider the swap plays a film (qimen-ui.js adds .filming while it runs): it opens on the window picture, pans
through the curtain, lands on the desk picture and hands back to that still. The second line waits for the desk */
.stage .lv{width:100%;height:100%;object-fit:cover;object-position:66% 61%;opacity:0;transition:opacity .6s ease}
.stage.filming .lv{opacity:1;transition-duration:.25s}
.stage.filming .s2{opacity:0}
@media (min-width:1280px){.stage .say{left:calc((100vw - var(--page)) / 2 + var(--side))}}
@media (max-width:767px){.stage .scrim{background:linear-gradient(0deg,rgba(12,10,8,.82) 0%,rgba(12,10,8,.3) 45%,rgba(12,10,8,0) 70%)}
.stage .say{top:auto;bottom:20vh;transform:none;right:var(--side)}}
@media (prefers-reduced-motion:reduce){.bleed>picture::after,.bleed .pin::after,.bleed>.film::after{animation:none}
.stage .layer,.stage .say{transition:opacity .2s ease;transform:none!important}}
.bleed figcaption{max-width:var(--page);margin:0 auto;padding:12px var(--side) 0;font-size:14px;line-height:1.5;color:var(--muted)}
.bleed figcaption:not(:has(span:not(:empty))){display:none}
.bleed figcaption span:empty{display:none}
/* ═══ footer (colophon) — a 回纹 band, the chop, three or four links on one row ═══ */
footer{position:relative;padding:56px 0 72px;color:var(--muted);font-size:14px}
footer .band{height:8px;opacity:.6;color:var(--rule);margin-bottom:40px}
footer .band svg{width:100%;height:8px}
.colophon{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.colophon{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.colophon .id{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center}
.colophon .id svg{width:44px;height:44px}
.colophon .nm{font:600 20px/1.2 var(--serif);color:var(--text)}
html[lang="zh"] .colophon .nm{font:600 18px/1.4 var(--sc)}
.colophon .cl{margin-top:4px;max-width:34em}
.flinks{display:grid;grid-template-columns:repeat(4,auto);gap:10px 24px;justify-content:start}
.flinks.n3{grid-template-columns:repeat(3,auto)}
@media (max-width:767px){.flinks{grid-template-columns:repeat(2,auto)}.flinks.n3{grid-template-columns:repeat(3,auto)}}
footer a{color:var(--muted);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
/* 2026-10-08 full review: tap targets — every stand-alone link or button is at least 44 px tall (inline links in a sentence are exempt) */
#haveBought{min-height:44px;display:inline-flex;align-items:center}
footer a:hover{color:var(--text)}
.foot-note{margin-top:28px}
/* ═══ learn page ═══ */
.lhero{padding:clamp(96px,12vw,176px) 0 clamp(56px,7vw,96px)}
.lhero .eyebrow{font-family:var(--serif);font-weight:600;font-size:15px}
.lhero .deck{margin-top:22px}
.key{border-top:1px solid var(--rule)}
.key>div{display:grid;grid-template-columns:3.5rem minmax(0,12rem) minmax(0,1fr);column-gap:var(--gut);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule-soft)}
.key dt{font:600 28px/1 var(--sc);position:relative;padding-left:14px}
.key dt::before{content:'';position:absolute;left:0;top:0;width:4px;height:28px;background:currentColor}
.key dt.kong::before{background:var(--muted)}
.key .nm{font:600 17px/1.4 var(--sc);color:var(--text);white-space:nowrap}
.key .nm span{font:400 15px/1.4 var(--body);color:var(--muted)}
.key dd{color:var(--muted);max-width:34em}
@media (max-width:767px){.key>div{grid-template-columns:3rem minmax(0,1fr)}.key dd{grid-column:2}.key dd+dd{margin-top:6px}}
.wx{margin-top:40px}
.wx .cells{display:grid;grid-template-columns:repeat(5,minmax(56px,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wx .cells>div{text-align:center;padding:14px 4px;border-left:1px solid var(--rule-soft)}
.wx .cells>div:first-child{border-left:0}
.wx b{display:block;font:600 22px/1.2 var(--sc)}
.wx small{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.wx figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.fig-ls{width:120px;height:120px;color:var(--rule)}
.fig-ls path{fill:none;stroke:currentColor;stroke-width:1}
.fig-ls .c{fill:var(--num);opacity:.9}
.fig-ls text{font:600 11px var(--sc);fill:var(--bg)}
.hist{list-style:none;border-top:1px solid var(--rule-soft)}
.hist li{padding:14px 0 14px 1.4em;position:relative;border-bottom:1px solid var(--rule-soft)}
.hist li::before{content:'';position:absolute;left:0;top:1.35em;width:.7em;height:1px;background:var(--rule)}
/* ═══ motion (GRAMMAR B7) — only when html.js-motion is set by qimen-ui.js; reduced motion never sets it ═══ */
html.js-motion section.s::before{transform:scaleX(0)}
html.js-motion section.s.in::before{transform:none;transition:transform .9s var(--ease-out)}
html.js-motion section.s>.page>.sec>h2{opacity:0;transform:translateY(.35em)}
html.js-motion section.s.in>.page>.sec>h2{opacity:1;transform:none;transition:opacity .8s var(--ease-line) .06s,transform .8s var(--ease-line) .06s}
html.js-motion section.s>.page>.sec>.deck{opacity:0}
html.js-motion section.s.in>.page>.sec>.deck{opacity:1;transition:opacity .5s ease .2s}
html.js-motion section.s .ls .c{opacity:0}
html.js-motion section.s.in .ls .c{opacity:1;transition:opacity .3s ease .3s}
html.js-motion:not([data-theme="light"]) section.s .num>span{transform:translateY(-102%)}
html.js-motion:not([data-theme="light"]) section.s.in .num>span{transform:none;transition:transform .5s var(--ease-out) .3s}
html.js-motion[data-theme="light"] section.s .num>span{opacity:0;filter:blur(1px)}
html.js-motion[data-theme="light"] section.s.in .num>span{opacity:1;filter:none;transition:opacity .4s ease .3s,filter .4s ease .3s}
html.js-motion .rule-seal{opacity:0;transform:scale(1.12) rotate(-6deg)}
html.js-motion section.s.in .rule-seal{opacity:1;transform:rotate(-2deg);transition:opacity .38s cubic-bezier(.2,.9,.25,1) .5s,transform .38s cubic-bezier(.2,.9,.25,1) .5s}
html.js-motion .bleed img{transform:scale(1.04);opacity:.001}
html.js-motion .bleed.in img{transform:none;opacity:1;transition:transform 1.4s var(--ease-out),opacity .9s ease}
/* Relic: one glint crosses each rule once it is drawn (transform only) */
section.s>.glint{position:absolute;left:0;top:0;height:1px;width:20%;pointer-events:none;opacity:0;
background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
html.js-motion:not([data-theme="light"]) section.s.in>.glint{animation:glint 1.2s ease-in-out .9s 1 both}
@media (prefers-reduced-motion:reduce){
html.js-motion *{transition:none!important;animation:none!important}
}
/* ═══ widths ═══ */
@media (max-width:1023px){
.sec{grid-template-columns:repeat(8,minmax(0,1fr))}
.sec>*,.sec>h2,.sec>.deck{grid-column:1/-1}
.rail{grid-column:1/-1;grid-row:auto;flex-direction:row;align-items:center;gap:14px;position:static;margin-bottom:24px}
.rail::after{content:'';flex:1;height:1px;background:var(--rule)}
.vname{writing-mode:horizontal-tb;letter-spacing:.18em}
}
@media (max-width:767px){
.sec{grid-template-columns:minmax(0,1fr)}
.body{margin-top:36px}
.deck{font-size:20px}
html[lang="zh"] .deck{font-size:18px}
.field{grid-template-columns:minmax(0,1fr)}
.field .btn{width:100%}
.birth{grid-template-columns:minmax(0,1fr)}
.price{padding:28px 20px}
.vc thead{display:none}
.vc tr{display:grid;grid-template-columns:minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.vc td{display:block;width:auto;border:0;padding:2px 0}
.vc td::before{content:attr(data-h);display:block;font:500 14px/1.5 var(--body);letter-spacing:.08em;color:var(--muted)}
html[lang="zh"] .vc td::before{content:attr(data-hz)}
.contents li{grid-template-columns:minmax(0,1fr) 2.2em;row-gap:4px}
.contents .term{grid-column:1;grid-row:1}
.contents .fo{grid-column:2;grid-row:1}
.contents .gl{grid-column:1/-1;grid-row:2;color:var(--muted)}
.contents .gl::after{display:none}
.price .chop-lg{transform:translate(18%,-35%) rotate(-3deg)}
.vc td:first-child{font-size:18px}
.vc td:last-child{font-size:18px}
}
@media (max-width:520px){
.wrap{padding:0 16px}
.bar .mark span{display:none}
.bar .wrap{gap:8px}
.chip-btn{padding:6px 10px}
.chip-btn .long{display:none}
.chip-btn .short{display:inline}
.who{max-width:110px}
.chips{grid-template-columns:repeat(2,max-content)}
.ask-row .btn{width:100%}
.ask-row .hint{width:100%}
.opts label{padding:10px 8px;font-size:14px}
}
/* ═══ keyframes (opacity and transform only) ═══ */
@keyframes blink{50%{opacity:0}}
@keyframes glint{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(400%)}}
/* grain on the lens (used by the full-bleed plates): transform only */
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
/* the explaining paragraph now follows the form (first-screen version C, 2026-09-26) */
.hero .ask + .lede{margin-top:28px}
.hero .ask .topics{margin-top:18px}
/* ═══ 2026-09-26 (Jenn: "a lot of reading … add more elements or graphic"): drawn, never stock (GRAMMAR C) ═══ */
/* 壹 · each topic is led by the symbol the board reads for it */
.topic-row{display:grid;grid-template-columns:4.2rem minmax(0,1fr);column-gap:14px;align-items:start}
.topic-row .glyph{font:600 26px/1.15 var(--sc);color:var(--num);letter-spacing:.04em;margin:2px 0 0;word-break:keep-all}
@media (min-width:768px){.topic-row{grid-template-columns:5rem minmax(0,1fr)}.topic-row .glyph{font-size:30px}}
/* how a question is read: the 洛书 grid mark (C2) as three small figures under the hero board */
.how{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.how ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.how li{display:flex;flex-direction:column;gap:10px}
.how svg{width:52px;height:52px;overflow:visible}
.how .g{fill:none;stroke:var(--rule);stroke-width:1}
.how .c{fill:var(--num);opacity:.85}
.how .ln{fill:none;stroke:var(--num);stroke-width:1.6;stroke-linecap:square}
.how .q{font:600 14px var(--sc);fill:var(--num);text-anchor:middle;dominant-baseline:central}
.how p{font-size:14.5px;line-height:1.45;color:var(--muted);margin:0}
html[lang="zh"] .how p{font-size:14px;line-height:1.6}
/* 贰 · two vague → clearer pairs shown, three more on tap */
.vc-wrap{min-width:0}
.vc-more{margin-top:14px}
.vc-more>summary{font-size:15px}
.vc-more .vc{margin-top:6px}
/* 肆 · readers' own words, once three are approved (never written by us) */
.quotes{margin:30px 0 8px;border-top:1px solid var(--rule);padding-top:18px}
.qlist{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:10px 0 12px}
@media (min-width:768px){.qlist{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}}
.rq{margin:0;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.rq blockquote{margin:0;font:500 19px/1.4 var(--serif);color:var(--text);text-wrap:balance}
.rq blockquote::before{content:'\201C';color:var(--num)} .rq blockquote::after{content:'\201D';color:var(--num)}
html[lang="zh"] .rq blockquote{font:500 16.5px/1.75 var(--sc)}
.rq figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
/* "did this help?" — three one-tap answers on the quiet line under a reading */
.fb-picks{display:inline-flex;flex-wrap:wrap;gap:8px}
.fb-pick{min-height:40px;padding:6px 16px;border:1px solid var(--line-2);border-radius:2px;background:transparent;
color:var(--text);font:500 15px/1.2 var(--body);cursor:pointer}
.fb-pick:hover,.fb-pick.on{border-color:var(--gold)}
.fb-pick.on{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.fb-pick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ── 2026-10-08 full review: the sticky ask bar (phones) and calm motion ───────────────────────────────────────── */
.sticky-ask{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 96%,transparent);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line-2);
transform:translateY(110%);visibility:hidden;transition:transform .38s var(--ease-out),visibility 0s linear .38s}
.sticky-ask.on{transform:none;visibility:visible;transition:transform .38s var(--ease-out)}
.sa-btn{min-height:48px;display:inline-flex;align-items:center;gap:8px;padding:0 22px;background:var(--act);color:var(--act-ink);
font:600 16px/1 var(--body);border-radius:2px;text-decoration:none}
.sa-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sa-note{color:var(--muted);font-size:14px;text-align:right}
@media (min-width:900px){.sticky-ask{display:none}}
@media (prefers-reduced-motion:no-preference){
.hero .eyebrow,.hero h1,.hero .deck,.hero .ask{animation:jo-rise .7s var(--ease-out) both}
.hero h1{animation-delay:.05s}.hero .deck{animation-delay:.1s}.hero .ask{animation-delay:.16s}
.s h2.jo-pre,.s .deck.jo-pre{transform:translateY(16px)}
.s h2,.s .deck{transition:transform .8s var(--ease-out)}
}
@keyframes jo-rise{from{transform:translateY(14px);opacity:.001}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sticky-ask,.sticky-ask.on{transition:none}}
/* 2026-10-08 full review: tap targets in the header and the "read more" toggles reach 44 px */
.chip-btn{min-height:44px;display:inline-flex;align-items:center}
.mark{min-height:44px;display:inline-flex;align-items:center}
.more-read>summary{min-height:44px}
/* 2026-10-08: a real excerpt from the example Birth Board, under Figure 2 */
.bb-excerpt{margin:22px 0 0;padding:18px 20px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.bb-excerpt p{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--text)}
.bb-excerpt .bb-from{font:500 14px/1.4 var(--body);letter-spacing:.06em;color:var(--gold);margin-bottom:10px}
.bb-excerpt .bb-step{font-weight:600}
.bb-excerpt .bb-quote{font-family:var(--serif);font-size:18px;color:var(--gold-hi)}
.bb-excerpt .bb-note{font-size:14px;color:var(--muted);margin:0}
/* 2026-10-09 trust round: the money-back promise as a seal, the way to pay as marks, and what happens after the button */
.bb-trust{margin:0 0 20px;display:grid;gap:14px;width:100%;font-family:var(--body)}
.promise{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;
border:1px solid var(--rule-soft);border-radius:2px;background:color-mix(in srgb,var(--gold) 6%,transparent)}
.g-seal{width:84px;height:84px;color:var(--gold);display:block}
.g-seal text{fill:currentColor;font-family:var(--serif)}
.g-seal .ring{font-size:11.5px;font-weight:600;letter-spacing:.22em}.g-seal .ring.zh{font-size:12px;letter-spacing:.32em}
.g-seal .big{font-size:42px;font-weight:600}
.g-seal .sm{font-size:11px;font-weight:600;letter-spacing:.24em}
.g-seal .zh{font-family:var(--sc)}
.promise p{margin:0;font:400 14px/1.5 var(--body);color:var(--muted)}
.promise b{display:block;font:600 16px/1.3 var(--body);color:var(--text);margin-bottom:3px}
.promise a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--gold)}
.pay-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:400 14px/1.4 var(--body);color:var(--muted)}
.pay-row li{display:inline-flex;align-items:center;gap:7px}
.pay-row .pp{background:#fff;border-radius:2px;padding:6px 10px;line-height:0}
.pay-row .pp img{display:block;width:66px;height:auto}
.pay-row .ic{width:16px;height:16px;color:var(--gold);flex:none}
.next{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:10px;counter-reset:nx}
.next li{counter-increment:nx;position:relative;padding-left:34px;font:400 14px/1.55 var(--body);color:var(--muted)}
.next li::before{content:counter(nx);position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--rule);border-radius:50%;
display:grid;place-items:center;font:600 14px/1 var(--body);color:var(--gold)}
.next b{color:var(--text);font-weight:600}
/* 2026-10-08 phone framing of the pinned window→desk swap (media_check.py): filling a tall phone screen cut the 4:5
photos to their middle 58% (46% at the zoom) — the phone and the cup off the window picture, the luopan off the desk.
On phones each picture now shows whole, its edges fading into the page, the line of text beneath it, a gentler zoom. */
@media (max-width:767px){
.stage .layer img{position:absolute;left:0;top:11svh;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#fff 14%,#fff 84%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#fff 14%,#fff 84%,transparent 100%)}
.stage .l1,.stage .l2{transform-origin:50% 40%}
.stage .l2{transform:scale(1.04)}
.stage.swapped .l1{transform:scale(1.07)}
.stage .scrim{background:linear-gradient(0deg,rgba(12,10,8,.75) 0%,rgba(12,10,8,0) 34%)}
.stage .say{bottom:max(14svh,calc(100svh - 11svh - 125vw - 7.5em))}
}
/* 2026-10-08 round 4: a link inside a sentence keeps its line, but its tap area reaches 44 px */
#bbCheckoutNote a,.small a[href="/refund"]{display:inline-block;padding:12px 0;margin:-12px 0}
/* 2026-10-09 founding readers: the invitation, at the top of the hero, only for someone who opened an invite link */
.invite{margin:0 0 22px;padding:14px 16px;border:1px solid var(--gold);border-left-width:3px;background:color-mix(in srgb,var(--gold) 7%,transparent);
display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.invite p{margin:0;font:400 15px/1.5 var(--body);color:var(--text);max-width:36em}
.invite b{color:var(--gold);font-weight:600;margin-right:4px}
.invite .btn{min-height:44px}