@font-face{font-family:"譜體";font-style:normal;font-weight:400;font-display:swap;src:local("Noto Serif TC"),local("Noto Serif CJK TC"),local("Songti TC"),url("serif.woff2") format("woff2")}

/* 林氏奎霞村新加坡先艮公派家譜 — the stylesheet, 0.20.0 (Panel VI, Wave 5): one sheet, in reading order.
   Three voices: serif ink for the record · gold sans for structure (eyebrows, labels) · grey sans for the quiet.
   Paper, not panels: a box only around what you operate (forms, the work pages). Red is a seal: the mark, one
   primary button, the current tab, the 本支 stamp, a count only when a person is waiting. No rounded corners, no
   dark mode, one type size (19 px desktop · 21 px phone), nothing read under 16 px, markers 15–16 px in the serif.
   Order: tokens → base → masthead & nav → the phone's tab bar → the page → type → links & controls → cards &
   folds → the frontispiece → the leaf → lists & tables → search, tree, 忌辰錄 → photographs → work pages →
   utilities → print. A selector appears once. */

/* ---------- tokens */
:root{--paper:#f7f2e7;--paper2:#fffdf8;--ink:#231f19;--ink2:#5a5244;--ink3:#6f6454;
--seal:#a4382b;--seal-deep:#7a2a21;--seal-soft:#f3e3dc;--gold:#7a5e2e;--gold-soft:#efe5cb;
--line:#cfc3aa;--line2:#c4b797;--edge:#9d8f6f;--pend:#7d620f;--pend-bg:#faf3dd;--ease:.15s ease;
--serif:"譜體","Noto Serif TC","Songti TC","Source Han Serif TC","PMingLiU","SimSun",serif;
--sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Hiragino Sans",sans-serif}

/* ---------- base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.8;font-synthesis:none;font-variant-numeric:tabular-nums}
::selection{background:var(--seal-soft)}
main{display:block}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line2)}
a:hover{color:var(--seal);text-decoration-color:var(--seal)}
a,.btn,button,summary,.door,.chip,.sheets a,nav a,.tabbar a,.btn-link{transition:color var(--ease),border-color var(--ease),background-color var(--ease),text-decoration-color var(--ease)}
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--seal);color:#fff;padding:10px 14px;font-family:var(--sans);z-index:9}
.skip:focus{left:8px;outline:2px solid var(--ink)}
mark{background:var(--gold-soft);color:inherit;padding:0 1px;font-weight:400}
h1,h1.ft,.entry .nm,.door b,.brand,.name-big,b.name-big,.lineage b,.tabbar details>div b{font-weight:400}

/* ---------- masthead */
header.site{background:var(--paper);border-bottom:1px solid var(--line)}
.bar{max-width:1040px;margin:0 auto;padding:16px 40px 10px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sealmark{width:40px;height:40px;background:var(--seal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:21px;letter-spacing:0;line-height:1.1;flex:0 0 auto;text-decoration:none;box-shadow:inset 0 0 0 2px var(--seal),inset 0 0 0 3px rgba(255,255,255,.55)}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:.14em}
.brand a{text-decoration:none;color:var(--ink)}
.brand small{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.22em;color:var(--ink3);font-weight:400;margin-top:1px}
.brand small a{color:var(--ink2)}
body.home .brand{display:none}
.me{margin-left:auto;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--ink2);display:flex;gap:14px;align-items:center}
.me a{min-height:44px;display:inline-flex;align-items:center;padding:2px 10px}
.me .out{color:var(--ink3)}
.langsw{font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--ink3);display:inline-flex;align-items:center;gap:12px}
.langsw a,.langsw b{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 2px;text-decoration:none;color:var(--ink2);font-weight:400}
.langsw b{color:var(--ink);border-bottom:1px solid var(--gold)}
.langsw a:hover{color:var(--seal)}
header.site nav{display:flex;gap:22px;flex-wrap:wrap;row-gap:2px;flex-basis:100%}
header.site nav a,header.site nav details.dd>summary{color:var(--ink2);font-family:var(--sans);font-size:16px;letter-spacing:.06em;padding:8px 0;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;text-decoration:none}
header.site nav a.on{color:var(--ink);border-bottom-color:var(--seal)}
header.site nav a:hover,header.site nav details.dd[open]>summary{color:var(--seal);border-bottom-color:var(--seal);text-decoration:none}
header.site nav a .n{display:inline-block;background:var(--seal);color:#fff;font-size:14px;line-height:1.4;padding:0 6px;margin-left:5px;min-width:1.6em;text-align:center}
header.site nav .sep{display:inline-block;width:1px;height:16px;background:var(--line2);margin:0 12px;padding:0;font-size:0;color:transparent;align-self:center;user-select:none}
header.site nav details.dd{position:relative}
header.site nav details.dd>summary{list-style:none;cursor:pointer}
header.site nav details.dd>summary::-webkit-details-marker{display:none}
header.site nav details.dd>summary:after{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 2px 4px 8px}
header.site nav details.dd>div{position:absolute;left:0;top:100%;background:var(--paper2);border:1px solid var(--line2);box-shadow:3px 3px 0 var(--line);padding:6px;min-width:12em;z-index:5;display:flex;flex-direction:column}
header.site nav details.dd>div a{display:block;padding:10px 14px}
.workbar{display:flex;gap:2px;flex-wrap:wrap;align-items:center;background:var(--pend-bg);border-top:1px solid var(--line);padding:2px 40px;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--pend)}
.workbar .t{font-weight:500;letter-spacing:.2em;margin-right:8px}
.workbar a{color:var(--pend);text-decoration:none;padding:6px 10px;min-height:38px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.workbar a:hover{border-bottom-color:var(--pend)}
.workbar a.on{color:var(--ink);border-bottom-color:var(--pend)}
.workbar .n,.tabbar details>div .n{display:inline-block;background:var(--gold-soft);color:var(--ink);font-size:15px;line-height:1.4;padding:0 6px;margin-left:5px;min-width:1.6em;text-align:center}
.workbar .n.hot,.tabbar details>div .n.hot{background:var(--seal);color:#fff}
@media (max-width:640px){
 body{font-size:21px;line-height:1.72;padding-bottom:64px}
 .bar{gap:10px 12px;padding:12px 16px;flex-wrap:nowrap;align-items:center}
 .sealmark{width:34px;height:34px;font-size:18px}
 .brand{font-size:17px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
 .brand small{display:none}
 .me{gap:8px;flex:0 0 auto}
 .me .langsw,.me .out,.me .dot{display:none}
 header.site nav,header.site .workbar{display:none}}

/* ---------- 0.23.0: the maps (inline SVG) and the history page's photograph */
svg.map{display:block;width:100%;max-width:640px;height:auto;margin:10px 0 6px;border:1px solid var(--line)}
svg.map .sea{fill:#e7eef0}
svg.map .land{fill:var(--paper2);stroke:var(--edge);stroke-width:.8;fill-rule:evenodd}
svg.map .route{fill:none;stroke:var(--seal);stroke-width:2.5;stroke-dasharray:8 6}
svg.map .pin{fill:var(--seal)}
svg.map .dot{fill:var(--ink2)}
svg.map .lbl{font-family:var(--sans);font-size:24px;fill:var(--ink2);paint-order:stroke;stroke:var(--paper2);stroke-width:5px;stroke-linejoin:round}
svg.map .lbl.main{font-size:30px;fill:var(--ink);font-weight:500}
svg.map .sea-lbl{font-style:italic;fill:var(--ink3);letter-spacing:.2em;stroke:#e7eef0}
@media (max-width:640px){svg.map .lbl{font-size:30px}svg.map .lbl.main{font-size:36px}}
.hist-fig{margin:6px 0 16px}
.hist-fig img{display:block;width:100%;max-width:640px;height:auto}
/* ---------- 0.21.0: icons — the word appears on hover and on keyboard focus (data-tip), and is read aloud (aria-label) */
.ic{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px}
.ic svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic[data-tip]:hover::after,.ic[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.3;letter-spacing:.04em;padding:5px 9px;z-index:30;pointer-events:none}
header.site nav a.ic{padding:8px 4px}
header.site .me .ic{min-width:40px;min-height:40px;vertical-align:middle}
.workbar .t.ic{margin-right:4px;min-width:36px}
.workbar a.ic{min-width:44px;padding:6px 8px}
.sheets .ic{min-height:40px}
@media print{.ic[data-tip]::after{display:none}}

/* ---------- the phone's tab bar: five icons, and 更多 */
.tabbar{display:none}
@media (max-width:640px){
 .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:8;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--paper2);border-top:1px solid var(--line2);font-family:var(--sans);font-size:16px;letter-spacing:0;color:var(--ink2)}
 .tabbar>*{min-width:0}
 .tabbar a,.tabbar summary{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;min-height:50px;padding:6px 0 8px;text-decoration:none;color:var(--ink2);list-style:none;cursor:pointer}
 .tabbar summary::-webkit-details-marker{display:none}
 .tabbar a.on,.tabbar details[open] summary{color:var(--seal)}
 .tabbar a.on{box-shadow:inset 0 2px 0 var(--seal)}
 .tabbar .ic svg.i{width:26px;height:26px}
 .tabbar .ic[data-tip]:hover::after,.tabbar .ic[data-tip]:focus-visible::after{top:auto;bottom:calc(100% + 6px)}
 .tabbar details>div{position:fixed;left:0;right:0;bottom:54px;background:var(--paper);border-top:1px solid var(--line2);box-shadow:0 -6px 20px rgba(0,0,0,.12);padding:10px 14px 14px;max-height:70vh;overflow:auto}
 .tabbar details>div b{display:block;font-family:var(--sans);font-size:15px;letter-spacing:.08em;color:var(--ink3);margin:10px 0 2px}
 .tabbar details>div a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:18px}
 .tabbar details>div a.on{color:var(--ink);border-left:3px solid var(--gold);padding-left:8px}}

/* ---------- the page */
.wrap{max-width:1040px;margin:0 auto;padding:40px 40px 70px}
body:not(.work-page) main:not(.wide){max-width:760px}
footer{border-top:1px solid var(--line);margin-top:60px;padding-top:16px;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--ink3);line-height:1.9;display:flex;gap:6px 22px;flex-wrap:wrap}
footer .fl,.xg{margin-left:auto}
footer .xg a{color:var(--ink2)}
@media (max-width:640px){.wrap{padding:22px 18px 90px}}
@media (max-width:360px){.wrap{padding-left:10px;padding-right:10px}.name-big{font-size:20px}}

/* ---------- type: the record in the serif, the structure in gold sans, the quiet in grey sans */
h1{font-family:var(--serif);font-size:38px;letter-spacing:.06em;line-height:1.3;margin:0 0 6px}
h1 .badge{border:none;padding:0;margin-left:12px;font-size:15px;letter-spacing:.18em;color:var(--gold)}
h1.name small,.nm small{font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);font-weight:400;margin-left:12px;vertical-align:baseline}
h2{font-family:var(--sans);font-size:16px;letter-spacing:.12em;color:var(--gold);font-weight:400;margin:36px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
h2 .badge,h2 .g{font-size:15px;letter-spacing:.2em;color:var(--gold);margin-left:10px}
h2 .gloss{display:inline;margin-left:10px;font-size:15px;color:var(--ink3)}
h3{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.04em;margin:22px 0 8px}
.sub{color:var(--ink3);font-family:var(--sans);font-size:16px;letter-spacing:.02em;margin:0 0 18px}
.sub .badge{font-size:15px;padding:0 6px}
.f{color:var(--ink3);font-family:var(--sans);font-size:16px;letter-spacing:.02em}
.eyebrow{font-family:var(--sans);font-size:15px;letter-spacing:.12em;color:var(--gold)}
.gloss{display:block;font-family:var(--serif);font-size:15px;letter-spacing:0;color:var(--ink3);margin-top:2px}
.badge{display:inline-block;font-family:var(--sans);font-size:15px;letter-spacing:.06em;color:var(--gold);vertical-align:middle;margin:0 3px;border:none;background:transparent;padding:0}
.b-pend{color:var(--pend)}.b-ok{color:var(--gold)}.b-low{color:var(--ink3)}
.note{background:transparent;border-left:2px solid var(--gold);padding:6px 14px;font-family:var(--sans);font-size:16px;letter-spacing:.02em;color:var(--ink2);margin:14px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;letter-spacing:0}
.name-big{font-family:var(--serif)}
.gcol{display:inline-block;font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);margin-right:10px}
a+.gcol,b+.gcol{margin-left:8px}
.stamp{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .25em;border:1.5px solid var(--seal);color:var(--seal);font-family:var(--serif);font-size:14px;line-height:1;letter-spacing:.05em;vertical-align:middle;margin:0 6px;transform:rotate(-3deg);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 2.5px rgba(164,56,43,.35)}
.orig{font-family:var(--serif);color:var(--ink2);border-left:2px solid var(--line2);padding-left:10px}
@media (max-width:640px){h1{font-size:32px}.f,.sub,.note{font-size:17px}}

/* ---------- controls */
button{font:inherit;min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid var(--ink);color:var(--ink);background:transparent;font-family:var(--sans);font-size:15px;letter-spacing:.06em;cursor:pointer;min-height:44px;line-height:1.2;text-decoration:none}
.btn:hover{color:var(--seal);border-color:var(--seal);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.solid:hover{background:var(--seal-deep)}
.btn.ghost{border-color:var(--line2);color:var(--ink2)}
.btn.mini,button.mini{min-height:32px;padding:0 10px;font-size:14px;letter-spacing:.1em}
.btn.on{border-color:var(--seal);color:var(--seal)}
.btn-link{border:none;background:none;padding:6px 2px;margin:0;min-height:0;color:var(--ink2);font-family:var(--sans);font-size:16px;letter-spacing:.06em;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--line2)}
.btn-link:hover{color:var(--seal);text-decoration-color:var(--seal)}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],input[type=tel],input[type=url],select,textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--edge);background:var(--paper2);color:var(--ink);font:inherit;font-size:17px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--ink3)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:2px solid var(--seal);outline-offset:-1px}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:.75}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a5e2e' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea{min-height:120px;resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--seal);width:18px;height:18px;min-height:0;margin:0 8px 0 0;vertical-align:-3px;padding:0}
.code-in{font-size:22px;letter-spacing:.1em}
.code-out{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;letter-spacing:.12em;margin:8px 0}
.dim{opacity:.55}
.pv-banner{position:fixed;left:12px;bottom:12px;background:var(--pend);color:#fff;padding:6px 12px;font-family:var(--sans);font-size:14px;letter-spacing:.04em;opacity:.92;z-index:99}
label{display:block;font-family:var(--sans);font-size:16px;color:var(--ink2);margin:12px 0 4px;letter-spacing:.04em}
label:first-child{margin-top:0}
.card>form>label:first-child{margin-top:4px}
label.blk{display:flex;gap:8px;align-items:flex-start;margin:8px 0;color:var(--ink);line-height:1.6}
label.blk input{flex:0 0 auto;margin-top:4px}
label.row{color:var(--ink)}
label.blk input,label.row input[type=checkbox],label.row input[type=radio]{margin-right:0}
label.showpw{font-size:15px;color:var(--ink2);margin:6px 0 0}
.searchbox{display:flex;margin:16px 0;max-width:100%;border:1px solid var(--edge);background:var(--paper2)}
.searchbox input{flex:1 1 0;min-width:0;padding:13px 16px;border:none;background:transparent;color:var(--ink);font:inherit;min-height:50px}
.searchbox input:focus{outline:2px solid var(--seal);outline-offset:-1px}
.searchbox button{flex:0 0 auto;padding:13px 26px;border:1px solid var(--seal);background:var(--seal);color:#fff;font:inherit;font-family:var(--sans);font-size:15px;letter-spacing:.2em;cursor:pointer;min-height:50px;white-space:nowrap}
.searchbox button:hover{background:var(--seal-deep)}
.picker-wrap .picker-select{display:block}
@media (max-width:640px){label{font-size:17px}.card>form>p>.btn.solid{width:100%}}

/* ---------- cards and folds: a box only around what you operate */
.card{margin:22px 0}
.work-page .card,.card.box,.card.no-print{background:var(--paper2);border:1px solid var(--line);padding:20px 22px;margin:14px 0}
.card.box,.card.no-print{border-color:var(--line2);padding:18px 18px}
.card.hot{border-color:var(--seal)}
.card:not(.pgthumbs)>b:first-child:not(.name-big):not(.name-xl){display:block;font-family:var(--serif);font-size:17px;letter-spacing:.06em;line-height:1.5;margin:0 0 10px}
.card>b:first-child .f{font-weight:400;letter-spacing:.04em;margin-left:8px}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.card>p:last-child,.card>ul:last-child,.card>form:last-child,.card>table:last-child{margin-bottom:0}
.card>ul.plain>li:last-child{border-bottom:none}
.card .card{margin:12px 0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
details.kaoyi>summary,.rvcard details>summary,details.f>summary,details.plain>summary,.card>details>summary,details.card>summary,details.tool>summary,details.more>summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:16px;letter-spacing:.08em;color:var(--ink2);padding:6px 0;display:inline-flex;align-items:center;gap:8px;margin:0}
.rvcard details>summary{margin-top:10px;padding:8px 0}
details.kaoyi>summary::-webkit-details-marker,.rvcard details>summary::-webkit-details-marker,details.f>summary::-webkit-details-marker,details.plain>summary::-webkit-details-marker,.card>details>summary::-webkit-details-marker,details.card>summary::-webkit-details-marker,details.tool>summary::-webkit-details-marker{display:none}
details.kaoyi>summary:before,.rvcard details>summary:before,details.f>summary:before,details.plain>summary:before,.card>details>summary:before,details.card>summary:before,details.tool>summary:before{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);transition:transform var(--ease);margin:0 2px 0 1px;flex:0 0 auto}
details.kaoyi[open]>summary:before,.rvcard details[open]>summary:before,details.f[open]>summary:before,details.plain[open]>summary:before,.card>details[open]>summary:before,details.card[open]>summary:before,details.tool[open]>summary:before{transform:rotate(45deg)}
details.kaoyi>summary:hover,.rvcard details>summary:hover,details.f>summary:hover,details.plain>summary:hover,.card>details>summary:hover,details.card>summary:hover,details.tool>summary:hover{color:var(--seal)}
.card>details>summary b{font-family:var(--serif);font-size:17px;letter-spacing:.06em;color:var(--ink)}
details.card>summary h2{display:inline;margin:0;border:none;padding:0;font-size:16px;color:var(--ink2);letter-spacing:.08em}
details.tool{border-top:1px solid var(--line);margin:18px 0 0;padding:0}
details.tool>summary{font-size:16px;letter-spacing:.12em;color:var(--gold);padding:12px 0}
details.tool>summary .f{letter-spacing:.04em;font-size:15px}
details.tool .card.no-print{margin:0 0 12px}
@media (max-width:640px){.work-page .card,.card.box,.card.no-print{padding:14px 14px}}

/* ---------- the frontispiece (home) */
.front{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;margin-bottom:10px}
.ftcol{display:flex;flex-direction:column;align-items:flex-start;gap:0;border-left:1px solid var(--line2);padding:6px 0 0 8px}
.ftcol .sealmark{flex:0 0 auto}
.ftcol .sealmark.big{width:44px;height:44px;font-size:23px;margin-left:2px}
body.home .ftcol .sealmark{display:none}
h1.ft{writing-mode:vertical-rl;font-size:46px;letter-spacing:.28em;line-height:1.15;height:420px;flex:0 0 420px;display:block;margin:0;padding:0}
h1.ft .t{display:block;word-break:keep-all}   /* 0.22.0: the long title breaks only at its <wbr> (林氏奎霞村新加坡 | 先艮公派家譜) */
.ftsub{margin:0 0 14px}
.intro{font-size:20px;line-height:2;max-width:34em;margin:0}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:26px 0 0;padding-top:8px}
.doors>*{min-width:0}
.doors.home-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.door{display:block;text-decoration:none;color:var(--ink)}
.door b{display:block;font-size:21px;letter-spacing:.06em}
.doors.home-panel .door b{font-size:19px}
.door b:after{content:" →";color:var(--gold)}
.door .f{display:block;font-size:16px;color:var(--ink2);line-height:1.75;margin-top:4px}
.door a.dl{display:block;text-decoration:none;color:inherit}
.door a.dl:hover b,a.door:hover b{color:var(--seal)}
.doors ul.run{font-size:16px;line-height:1.8}
.doors ul.run li{white-space:normal}
.doors ul.run li a{white-space:nowrap}
.entry{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.entry .nm{font-size:30px;letter-spacing:.06em;margin:4px 0 0;line-height:1.4}
.entry dl.facts{margin-top:10px;padding-bottom:0}
.fang{display:flex;gap:0 28px;flex-wrap:wrap;margin:6px 0 0;line-height:1.9}
.fang .fs{display:inline-block}
.front .searchbox,.home .searchbox{margin:28px 0 0}
@media (max-width:900px){
 .front,html[lang="en"] .front{display:block}
 .ftcol,html[lang="en"] .ftcol{border:none;padding:0;display:block}
 .ftcol .sealmark,html[lang="en"] .ftcol .sealmark{display:none}
 h1.ft,html[lang="en"] h1.ft{writing-mode:horizontal-tb;height:auto;flex:none;font-size:34px;letter-spacing:.14em;border:none;padding:0;display:block;margin:0 0 4px}
 h1.ft .t,html[lang="en"] h1.ft .t{white-space:normal}
 .intro{font-size:18px;line-height:1.85;margin-top:14px}
 .doors{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px;padding-top:16px}
 .door b{font-size:20px}
 .entry{margin-top:30px}
 .entry .nm{font-size:27px}}
@media (min-width:901px){
 html[lang="en"] .front{display:block}
 html[lang="en"] .ftcol{border:none;padding:0;display:block}
 html[lang="en"] .ftcol .sealmark{display:none}
 html[lang="en"] h1.ft{writing-mode:horizontal-tb;height:auto;flex:none;font-size:36px;letter-spacing:.06em;border:none;padding:0}
 html[lang="en"] h1.ft .t{white-space:normal}}
@media (max-width:640px){.doors,.doors.home-panel{grid-template-columns:minmax(0,1fr)}}

/* ---------- the leaf: a margin column beside one reading column */
.leaf2{display:grid;grid-template-columns:200px minmax(0,640px);gap:0 48px;align-items:start}
.leaf2 .margin{grid-column:1;grid-row:1 / span 2;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--ink3);line-height:1.9;padding-top:14px}
.leaf2 .main-top{grid-column:2;grid-row:1}
.leaf2 .main-rest{grid-column:2;grid-row:2}
.leaf2 .main-top,.leaf2 .main-rest,.leaf2 .margin{min-width:0;max-width:100%}
.leaf2 .eyebrow{white-space:normal}
.margin .v{writing-mode:vertical-rl;font-family:var(--serif);font-size:20px;letter-spacing:.3em;color:var(--gold);border-left:1px solid var(--line2);padding-left:10px;height:7.5em;margin:0 0 18px}
.margin dl{margin:0}
.margin dt{font-family:var(--sans);font-size:15px;letter-spacing:.12em;color:var(--gold);font-weight:400;margin-top:12px}
.margin dd{margin:0;color:var(--ink2);font-family:var(--serif);font-size:16px;letter-spacing:.02em;line-height:1.7}
.margin .pgthumbs{margin:0;background:transparent;border:none;padding:0}
.margin .pgthumbs b{display:block;font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.12em;color:var(--gold);margin-top:12px}
.margin .pgthumbs a{display:inline-block;margin:6px 6px 0 0;width:46px;text-decoration:none}
.margin .pgthumbs img{width:46px;height:62px;object-fit:cover;display:block;border:1px solid var(--line2)}
.margin .pgthumbs img:hover{outline:2px solid var(--seal)}
.margin .pgthumbs .f{font-size:15px;letter-spacing:.06em;line-height:1.5;margin-top:6px}
.line{margin:4px 0 0;color:var(--ink2);font-size:16px}
dl.facts{margin:22px 0 0;padding:12px 0 4px;line-height:1.9;letter-spacing:.02em}
dl.facts>div{display:inline-block;margin-right:1.2em;max-width:100%}
dl.facts dt{display:inline;font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);margin-right:.4em;vertical-align:baseline}
dl.facts dd{display:inline;margin:0}
a.fix{font-family:var(--sans);font-size:14px;color:var(--ink3);text-decoration:none;margin-left:6px;border:none;padding:4px}
a.fix:hover{color:var(--seal)}
.dieji{font-family:var(--serif);font-size:20px;line-height:2;text-align:justify;border-left:2px solid var(--gold);padding:0 0 0 20px;margin:24px 0 0}
.dieji .src{display:block;font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);margin-top:8px;text-align:left}
.dieji.md{font-size:19px}.dieji.sm{font-size:16px}
details.chain{margin:22px 0 0}
details.chain>summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:16px;color:var(--ink2);letter-spacing:.04em;line-height:1.9;padding:4px 0}
details.chain>summary::-webkit-details-marker{display:none}
details.chain>summary .f{font-family:var(--sans);font-size:15px;letter-spacing:.06em;color:var(--gold);margin-right:8px}
details.chain>summary .more{font-family:var(--sans);font-size:15px;letter-spacing:.08em;color:var(--ink2);margin-left:8px;white-space:nowrap}
details.chain[open]>summary .more{display:none}
details.chain>summary b{color:var(--ink)}
.lineage{font-family:var(--serif);font-size:16px;letter-spacing:.08em;line-height:2;margin:6px 0 14px;color:var(--ink2)}
.lineage b{color:var(--ink)}
.lineage .nowrap small{margin-left:4px}
ul.kids,ul.run{list-style:none;margin:0;padding:0;line-height:1.9}
ul.kids li,ul.run li{display:inline-block;padding:0;border:none;white-space:nowrap}
ul.kids li a,ul.run li a{white-space:nowrap}
ul.kids li:after,ul.run li:after{content:" · ";color:var(--line2)}
ul.kids li:last-child:after,ul.run li:last-child:after{content:""}
ul.kids li.runhead{display:block;margin-top:6px}
ul.kids li.runhead:after{content:""}
ul.kids li:has(+ li.runhead):after{content:""}
ul.kids .g,ul.kids li.runhead .g{font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);margin-right:0}
ul.kids .gcol{display:none}
ul.kids .f,ul.run .f{font-size:15px;color:var(--ink3);margin-left:4px}
ul.kids li.f{display:block;font-size:16px}
ul.kids li a,ul.run li a,.fang a,.lineage a,.sheets a,.dieji .src a{display:inline-block;padding:7px 0;margin:-7px 0;min-height:0}
.fang .k,.notes .k,.kin .k,ul.ladder .gcol{font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--ink2);vertical-align:baseline;margin-right:8px}
.fang .k a{text-decoration:none;color:var(--ink2)}
.notes{font-size:16px;color:var(--ink2);line-height:1.9}
.notes p{margin:0 0 8px}
.notes .dieji{font-size:18px;margin:6px 0 10px;padding-left:14px;border-color:var(--line2)}
.notes .app{margin:0 0 12px}
.notes .app>p{margin:0}
.notes table{font-size:16px}
.buji li{margin:0 0 12px}
.buji .txt{white-space:pre-wrap}
.mbtns{margin:12px 0 0;display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center}
.mbtns .eyebrow{margin-right:4px}
.mbtns .btn{min-height:44px;padding:0 16px;font-size:15px;letter-spacing:.08em}
.mbtns .acts{display:inline-flex;flex-wrap:wrap;gap:2px 16px;margin-left:8px;font-family:var(--sans);font-size:15px;letter-spacing:.06em}
.mbtns .acts a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2);padding:12px 0;line-height:1;min-height:0}
.mbtns .acts a:hover{color:var(--seal);border-color:var(--seal)}
#own,#claim{margin:14px 0 0}
#photos{margin-top:28px}
.kin{margin:12px 0 6px;font-family:var(--sans);font-size:16px;border-top:1px solid var(--line);padding-top:8px}
.kin>div{padding:3px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.kin .k{display:inline-block;min-width:44px}
.kin.bare{border:none;padding-top:6px;margin:6px 0 0}
@media (min-width:901px){.leaf2 .eyebrow .gen{display:none}}
@media (max-width:900px){
 .leaf2{display:flex;flex-direction:column}
 .leaf2 .main-top{order:1}
 .leaf2 .margin{order:2;padding-top:0;margin:16px 0 0}
 .leaf2 .main-rest{order:3}
 .margin .v{display:none}
 .margin dl{display:flex;gap:0 18px;flex-wrap:wrap}
 .margin dt{margin:0 4px 0 0}
 .margin .pgthumbs a{width:54px}
 .margin .pgthumbs img{width:54px;height:72px}
 .margin .pgthumbs b{margin-top:0;display:block}}
@media (max-width:640px){
 .dieji{font-size:19px;line-height:1.95;padding-left:14px}
 .line,.door .f{font-size:17px}
 dl.facts>div{display:block;margin:0}
 dl.facts dt{display:inline-block;min-width:2.4em}
 .mbtns .acts{margin-left:0;flex-basis:100%;gap:2px 14px;font-size:17px}}

/* ---------- lists and tables */
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:12px 0;border-bottom:1px solid var(--line)}
.mrow{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.mrow .acts{margin-left:auto;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:19px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{width:112px;color:var(--gold);font-family:var(--sans);font-weight:400;white-space:nowrap;font-size:15px;letter-spacing:.06em;padding-top:12px}
td{overflow-wrap:anywhere}
.poem td{white-space:nowrap;overflow-wrap:normal}

/* ---------- 找人 · 世系 · 忌辰錄 */
.chip{display:inline-block;padding:0;border:none;background:transparent;margin:0 16px 6px 0;text-decoration:none;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--ink2);line-height:1.5}
.chip:hover{color:var(--seal);text-decoration:none}
.chip.on{color:var(--ink);border-bottom:1px solid var(--gold)}
.chip.ghost{border:1px dashed var(--line2);padding:3px 11px;color:var(--ink3);font-size:15px}
.chip small{font-family:var(--sans);font-size:15px;color:var(--ink3);margin-right:5px;letter-spacing:.06em}
.chips .chip{margin:0 10px 8px 0}
.sheets{font-family:var(--sans);font-size:16px;letter-spacing:.06em;display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center;margin:6px 0 18px;color:var(--ink2)}
.sheets a{text-decoration:none;color:var(--ink2)}
.sheets a.on{color:var(--ink);border-bottom:1px solid var(--gold)}
ul.ladder{list-style:none;margin:0;padding:0 0 0 18px;line-height:1.9}
ul.ladder>li{position:relative;padding:4px 0 4px 16px}
ul.ladder>li:before{content:"";position:absolute;left:-1px;top:0;bottom:0;border-left:1px solid var(--line2)}
ul.ladder>li:after{content:"";position:absolute;left:-1px;top:21px;width:12px;border-top:1px solid var(--line2)}
ul.ladder>li:last-child:before{bottom:calc(100% - 21px)}
ul.ladder>li.main:before,ul.ladder>li.main:after{border-color:var(--gold);border-width:2px}
ul.ladder a{display:inline;margin:0;padding:0;border:none;text-decoration:underline}
ul.jc .day{display:inline-block;min-width:3.2em;font-family:var(--serif);color:var(--ink2)}
ul.jc .sol{font-family:var(--sans);font-size:15px;color:var(--seal);margin-left:6px}
#tester .row label{margin:0;display:inline-flex;align-items:center;gap:8px}

/* ---------- photographs */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px}
.thumbs a{display:block}
.thumbs img{width:100%;height:124px;object-fit:cover;border:1px solid var(--line2)}
.thumbs img:hover{outline:2px solid var(--seal)}
.thumb-s{max-width:160px;border:1px solid var(--line)}
.gallery-empty{border:1px dashed var(--line2);padding:26px;text-align:center;color:var(--ink3)}
.photo-wrap{position:relative;display:inline-block;max-width:100%}
.photo-wrap img{max-width:100%;height:auto;display:block;border:1px solid var(--line2)}
.tagbox{position:absolute;border:2px solid var(--seal);background:rgba(160,58,46,.08)}
.tagbox span{position:absolute;top:100%;left:0;background:var(--seal);color:#fff;font-family:var(--sans);font-size:15px;padding:1px 7px;white-space:nowrap}
.tagbox.unknown{border-color:var(--pend)}
.tagbox.unknown span{background:var(--pend)}

/* ---------- work pages: the same paper and ink, a tool's density */
body.work-page{font-size:17px;line-height:1.6}
body.work-page h1{font-size:28px}
body.work-page .f,body.work-page .sub,body.work-page label{font-size:15px}
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.work .pgview{position:sticky;top:8px;max-height:88vh}
.work textarea{width:100%;font-size:17px;line-height:1.9;font-family:inherit}
.pgview{overflow:auto;max-height:82vh;border:1px solid var(--line2);background:#fff}
.pgview img{display:block;width:100%;height:auto}
.wrow{border-top:1px solid var(--line);padding:10px 0}
.conv{background:var(--paper);border:1px solid var(--line2);padding:10px 12px;margin:8px 0;font-size:15px;line-height:1.8}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.pgrid a{display:block;padding:6px 2px;text-align:center;font-size:15px;border:1px solid var(--line2);text-decoration:none}
.st0{background:var(--paper);color:var(--ink3);border-style:dashed}.st1{background:#f8f0db}.st2{background:var(--pend-bg);border-color:var(--pend)}.st3{background:var(--gold-soft)}.st4{background:#dccb95;border-color:var(--gold)}
.rvlayout{display:grid;grid-template-columns:minmax(360px,6fr) minmax(320px,5fr);gap:22px;align-items:start}
.rvside{position:sticky;top:8px}
.rvlist{max-height:56vh;overflow-y:auto;border:1px solid var(--line)}
.rvlist .row{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.rvlist .row a.pick{flex:1;display:block;color:var(--ink);min-width:0}
.rvlist .row:hover{background:var(--seal-soft)}
.rvlist .row a.pick:hover{text-decoration:none}
.rvlist .row.on{background:var(--seal-soft);border-left:3px solid var(--seal)}
.rowacts{display:flex;gap:6px;flex-shrink:0;padding-top:2px}
.rowacts form{display:inline;margin:0}
.rvcard .btn{min-height:40px;padding:6px 14px}
.rvedit{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rvedit label{margin:10px 0 4px}
.rvedit .wide{grid-column:1 / -1}
.ident{margin-top:10px}
.ident th{width:5em;min-width:0;padding-left:4px}
.ident td{padding-left:6px}
.zoompane{position:relative;overflow:hidden;border:1px solid var(--line2);background:var(--ink);height:66vh;cursor:grab}
.zoompane img{position:absolute;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
.filmstrip{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.filmstrip img{height:64px;border:1px solid var(--line2);cursor:pointer}
.filmstrip img.on{outline:2px solid var(--seal)}
.work-page .card.frame{border:3px double var(--line2);outline:1px solid var(--line);outline-offset:-8px;padding:28px 30px}
.ocrbox{white-space:pre-wrap;max-height:14em;overflow:auto}
.strip-s{max-height:150px}
.empty-scan{color:var(--ink3);padding:30px}
body.work-page table td:nth-child(2){min-width:16em}
@media (max-width:900px){.work{grid-template-columns:1fr}.rvlayout{grid-template-columns:1fr}.rvside{position:static}}
@media (max-width:640px){
 body.work-page{font-size:18px}
 .rvedit{grid-template-columns:1fr}
 .work-page table{display:block;overflow-x:auto;max-width:100%}
 .work-page th{white-space:normal}
 .work-page .card.frame{padding:18px 16px}
 body.work-page table td:nth-child(2){min-width:0}}

/* ---------- utilities: the only sanctioned inline-ish styling (replacing 164 style="" attributes, 0.14.0) */
form.inl,.inl{display:inline;margin:0}
.row{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap}
.row.top{align-items:flex-start}
.w-s{max-width:8em}.w-m{max-width:14em}.w-l{max-width:20em}.w-xl{max-width:26em}.minw{min-width:11em}
.w-a{width:auto;max-width:100%;display:inline-block;min-height:36px;padding-top:4px;padding-bottom:4px}
.inb{display:inline-block}.blk{display:block}.full{width:100%}.vh{position:absolute;left:-9999px}
.mt0{margin-top:0}.mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}
.mb1{margin-bottom:4px}.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.my1{margin:4px 0}.my3{margin:12px 0}
.mr2{margin-right:8px}.mr3{margin-right:12px}.ml-auto{margin-left:auto}.self-start{align-self:start}.fb100{flex-basis:100%}
.tr{text-align:right}.tc{text-align:center}.nowrap{white-space:nowrap}th.top,td.top{vertical-align:top}
.seal{color:var(--seal)}.ls{letter-spacing:.2em}
.loose{line-height:2.1}.prose{font-family:var(--serif);line-height:2.2}.scrollx{overflow-x:auto}
.pad1{padding:2px 8px}.pad2{padding:8px 12px}.pad3{padding:14px 18px}
.name-xl{font-size:22px}
.poemchar{font-size:34px;margin:6px;display:inline-block}
.fset{border:1px solid var(--line);padding:8px 12px;margin:0 0 10px}
.h2-inline{margin:0;display:inline;border:none}
.ol-in{margin:6px 0 0 18px}

/* ---------- print: the record, nothing of the chrome */
@media print{
 header.site,nav,.workbar,.tabbar,.btn,.btn-link,.searchbox,footer,.no-print,button,form,.sheets,.mbtns,details.tool,.skip,a.fix{display:none!important}
 body{background:#fff;color:#000;font-size:12pt;line-height:1.7}
 main,.wrap{max-width:none;padding:0}
 a{color:#000;text-decoration:none}
 .card{border:none;padding:0;background:transparent}
 .leaf2{display:block}
 .margin .v{display:none}
 .stamp{transform:none;box-shadow:none}
 h1,h2,h3{break-after:avoid}
 li,.card,tr,.dieji{break-inside:avoid}
 ul.ladder>li:before,ul.ladder>li:after{border-color:#999}}

/* 存檔版 */
.arc-head{font-family:var(--sans);font-size:15px;letter-spacing:.08em;color:var(--ink3);display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 18px}.arc-head a{color:var(--ink2);text-decoration:none}.arc-head b{color:var(--ink);font-weight:400}.ent{border-top:1px solid var(--line);padding:18px 0 6px;break-inside:avoid}.ent .main-top .eyebrow{margin:0}.ent h1{font-size:28px;margin:2px 0 4px}.ent .num{font-family:var(--sans);font-size:15px;letter-spacing:.06em;color:var(--gold);margin-right:10px}.ent dl.facts{margin-top:8px;padding:0}.ent .dieji{margin-top:10px;font-size:18px}.ent h2{margin:14px 0 4px}.ent .line{font-size:16px}.arc-toc li{padding:6px 0}.arc-sec{margin:40px 0 8px}@media print{.arc-head{display:none}.ent{padding:12px 0 2px}.ent h1{font-size:18pt}a{text-decoration:none}}