/* ─────────────────────────────────────────────────────────────────────────
   samhan.ai — core stylesheet
   Palette: hanji mineral. Light is primary; dark is a second token set.
   The rule that governs colour: ink is evidence, crimson is what remains
   to be done — unturned, inferred, not yet adjudicated. Crimson is never
   used for emphasis, for a button, or for decoration.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#F7F5EF; --pn:#FFFDF8; --pn2:#EFEBE0;
  --ink:#17150F; --soft:#625C4E; --faint:#8C8474;
  --rule:#DCD5C4; --hair:#C9C0AC;
  --acc:#A8352A;            /* crimson — the reading not yet made */
  --acc2:#2E4C6D;           /* mineral blue — outward links only  */
  --fd:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --fb:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fh:"Noto Serif TC","Songti TC","Songti SC","PingFang TC","Hiragino Mincho ProN",serif;
  --fk:"Noto Serif KR","Apple SD Gothic Neo","Malgun Gothic",serif;
  --u:8px; --pad:clamp(18px,4vw,34px);
  --dur:520ms; --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --bg:#14130F; --pn:#1B1A15; --pn2:#221F19;
  --ink:#EAE6DB; --soft:#9A9485; --faint:#7B7466;
  --rule:#2C2A23; --hair:#3A372E;
  --acc:#D2745A; --acc2:#7FA6C9;
}
*{box-sizing:border-box}
body>*{min-width:0;max-width:100%}
.sect,.idx{min-width:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);
  min-height:100vh;display:flex;flex-direction:column;
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga"}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.14}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
svg{display:block}
.hj{font-family:var(--fh)}
.kr{font-family:var(--fk)}
.mo{font-family:var(--fm);font-size:10px;letter-spacing:.09em;color:var(--soft)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* ── the site's own record. Same shape as every object's record head. ── */
.ledger{border-bottom:1px solid var(--rule);background:var(--pn)}
.ledger-in{max-width:1180px;margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(5,minmax(0,auto));justify-content:start}
.ledger div{padding:9px 22px 9px 0;margin-right:22px;border-right:1px solid var(--rule);min-width:0}
.ledger div:last-child{border-right:0;margin-right:0}
.ledger dt{margin:0;font-family:var(--fm);font-size:8.4px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--soft)}
.ledger dd{margin:3px 0 0;font-family:var(--fm);font-size:11.4px;letter-spacing:.04em}
.ledger dd b{font-weight:500}
@media(max-width:900px){
  .ledger-in{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
  .ledger div{padding:8px 12px 8px 0;margin-right:12px}
  .ledger div:nth-child(3n){border-right:0;margin-right:0}
  .ledger div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}
@media(max-width:520px){
  .ledger-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger div{border-right:1px solid var(--rule)}
  .ledger div:nth-child(3n){border-right:1px solid var(--rule);margin-right:12px}
  .ledger div:nth-child(2n){border-right:0;margin-right:0}
  .ledger div:nth-last-child(-n+1){border-bottom:0}
  .ledger div{border-bottom:1px solid var(--rule)}
  .ledger dd{font-size:10.6px}
}

/* ── masthead ── */
.mast{padding:clamp(34px,6vw,58px) 0 clamp(26px,4vw,38px);border-bottom:1px solid var(--rule)}
.wmrow{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);flex-wrap:wrap}
.mk{color:var(--ink);flex:none}
.wm{font-family:var(--fd);font-size:clamp(38px,7.2vw,68px);font-weight:400;
  letter-spacing:-.03em;line-height:1;font-variant-ligatures:none}
.wm .dot{color:var(--acc)}
.strap{font-family:var(--fd);font-style:italic;font-size:clamp(17px,2.1vw,22px);
  color:var(--soft);margin-top:clamp(14px,2vw,20px);letter-spacing:-.006em;max-width:48ch}
.by{font-family:var(--fm);font-size:9.6px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft);margin-top:16px}
.blurb{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.74;color:var(--soft);
  max-width:72ch;margin-top:clamp(18px,2.6vw,26px)}

/* ── navigation ── */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:stretch}
.nav a{font-family:var(--fm);font-size:9.8px;letter-spacing:.17em;padding:12px 0;margin-right:26px;
  color:var(--soft);border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--acc)}
.nav .sp{flex:1}
.nav .imprint{display:none;align-items:center;gap:10px;padding:8px 0;margin-right:26px}
.nav .imprint .wmm{font-family:var(--fm);font-size:10.4px;letter-spacing:.19em;color:var(--ink)}
.nav .imprint .wmm .dot{color:var(--acc)}
.nav.tight .imprint{display:flex}
.tgl{background:none;border:0;padding:9px 0 9px 14px;cursor:pointer;color:var(--soft);
  display:flex;align-items:center}
.tgl:hover{color:var(--ink)}
@media(max-width:700px){
  .nav-in{overflow-x:auto;scrollbar-width:none}
  .nav-in::-webkit-scrollbar{display:none}
  .nav a{margin-right:18px}
}

/* ── the index ── */
.idx{padding-bottom:clamp(30px,5vw,54px)}
.entry{display:block;border-bottom:1px solid var(--rule);padding:clamp(20px,3vw,30px) 0;
  position:relative;transition:background var(--dur) var(--ease)}
.entry:last-of-type{border-bottom:0}
.entry-in{display:grid;grid-template-columns:132px 1fr;gap:clamp(18px,3vw,34px);align-items:start}
@media(max-width:680px){.entry-in{grid-template-columns:88px 1fr;gap:16px}}
.plate{border:1px solid var(--rule);background:var(--pn);aspect-ratio:1;width:100%;
  color:var(--ink);transition:border-color 220ms var(--ease)}
.entry:hover .plate{border-color:var(--hair)}
.entry-main{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
.rechead{display:grid;grid-template-columns:repeat(4,minmax(0,max-content));
  gap:2px clamp(14px,2.2vw,30px);align-items:start}
@media(max-width:560px){.rechead{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px}}
.rechead div{min-width:0}
.rechead dt{margin:0;font-family:var(--fm);font-size:8px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--soft)}
.rechead dd{margin:2px 0 0;font-family:var(--fm);font-size:10.6px;letter-spacing:.05em}
.rechead dd.id{color:var(--acc)}
.etitle{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.etitle .t{font-family:var(--fd);font-size:clamp(21px,2.7vw,28px);letter-spacing:-.018em;line-height:1.14}
.etitle .h{font-family:var(--fh);font-size:clamp(15px,1.7vw,18px);color:var(--soft)}
.etitle .k{font-family:var(--fk);font-size:12.6px;color:var(--faint)}
.etitle .br{font-family:var(--fm);font-size:.62em;color:var(--acc);opacity:0;margin-left:1px;
  transition:opacity 240ms var(--ease);line-height:1}
.entry:hover .etitle .br,.entry:focus-visible .etitle .br{opacity:.45}
.esub{font-size:14px;color:var(--soft);line-height:1.66;max-width:74ch;margin-top:9px}
.efoot{display:flex;gap:20px;flex-wrap:wrap;margin-top:13px;font-family:var(--fm);
  font-size:9.8px;letter-spacing:.06em;color:var(--soft);align-items:baseline}
.efoot .go{margin-left:auto;color:var(--acc2);display:flex;align-items:center;gap:7px}
.efoot .go i{font-style:normal;transition:transform 240ms var(--ease);display:inline-block}
.entry:hover .efoot .go i{transform:translateX(3px)}
.entry:hover .etitle .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ── section blocks ── */
.sect{padding:clamp(30px,4.5vw,52px) 0;border-bottom:1px solid var(--rule)}
.sect:last-child{border-bottom:0}
.sect h2{font-family:var(--fd);font-size:clamp(21px,2.5vw,28px);letter-spacing:-.018em}
.sect .lead{color:var(--soft);font-size:14.4px;max-width:74ch;margin-top:11px;line-height:1.7}

/* stage: works still under development */
.stage{font-family:var(--fm);font-size:8.2px;letter-spacing:.16em;border:1px solid var(--acc);
  color:var(--acc);padding:2px 5px;line-height:1;white-space:nowrap;align-self:center;
  transform:translateY(-.14em)}
.stage[data-s="ALPHA"]{border-style:dashed}
.entry.soon{cursor:default}
.entry.soon .efoot .go{color:var(--faint)}
.entry.soon:hover .etitle .t{text-decoration:none}

/* sources */
.srcs{margin-top:22px;border-top:1px solid var(--ink)}
.src{display:grid;grid-template-columns:1.3fr 170px 1.2fr auto;gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rule)}
@media(max-width:900px){
  .src{grid-template-columns:1fr auto;gap:9px 18px;align-items:baseline}
  .src .s1{grid-column:1/-1}
  .src .s2{justify-self:start}
  .src .s3{grid-column:1/-1}
  .src .s4{grid-column:1/-1;justify-self:start}
}
@media(max-width:560px){
  .src{grid-template-columns:1fr;padding:16px 0}
  .src .nm{font-size:16px}
  .src .hj2{display:block;margin-left:0;margin-top:2px}
}
.src .nm{font-family:var(--fd);font-size:17px;letter-spacing:-.012em}
.src .hj2{font-family:var(--fh);font-size:13.5px;color:var(--soft);margin-left:9px}
.src .s2{display:flex;align-items:center;gap:11px;color:var(--ink)}
.src .pc{font-family:var(--fm);font-size:10.4px;color:var(--soft);min-width:30px}
.src .ct{font-family:var(--fm);font-size:10px;letter-spacing:.05em;color:var(--soft);display:block}
.src .nt{font-size:12px;color:var(--faint);display:block;margin-top:3px;line-height:1.45}
.src .sg{font-family:var(--fm);font-size:9.6px;letter-spacing:.08em;color:var(--acc);margin-left:8px}
.src .sg:first-child{margin-left:0}

/* timeline */
.tl-scroll{margin-top:26px;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;padding-bottom:8px}
.tl{position:relative;width:100%;min-width:1040px}
.axis{position:absolute;left:0;right:0;bottom:34px;height:1px;background:var(--hair)}
.tk{position:absolute;bottom:34px}
.tk i{display:block;width:1px;height:4px;background:var(--rule)}
.tk.mj i{height:7px;background:var(--hair)}
.tk b{position:absolute;top:12px;left:0;transform:translateX(-50%);font-family:var(--fm);
  font-size:9px;color:var(--faint);white-space:nowrap;font-weight:400;letter-spacing:.06em}
.ms{position:absolute;bottom:34px;width:0}
.ms .dotm{position:absolute;left:-4px;bottom:-4px;width:8px;height:8px;background:var(--acc);
  border-radius:50%}
.ms .stem{position:absolute;left:0;bottom:0;width:1px;background:var(--rule)}
.ms .ms-b{position:absolute;left:11px;width:150px}
.ms.flip .ms-b{left:auto;right:11px;text-align:right}
.ms .yr{font-family:var(--fm);font-size:9.6px;letter-spacing:.11em;color:var(--acc);display:block}
.ms .lb{font-family:var(--fd);font-size:14.5px;line-height:1.24;display:block;margin-top:4px;
  letter-spacing:-.01em}
.ms .nt{font-size:11.6px;color:var(--soft);line-height:1.5;display:block;margin-top:4px}

@media(max-width:860px){
  .tl-scroll{overflow:visible;padding-bottom:0}
  .tl{width:auto!important;min-width:0;height:auto!important;
    border-top:1px solid var(--ink);margin-top:14px}
  .axis,.tk{display:none}
  .ms{position:static!important;bottom:auto;width:auto;display:grid;
    grid-template-columns:14px 1fr;gap:0 14px;align-items:start;
    padding:14px 0;border-bottom:1px solid var(--rule)}
  .ms .stem{display:none}
  .ms .dotm{position:static;margin-top:6px}
  .ms .ms-b,.ms.flip .ms-b{position:static!important;left:auto;right:auto;bottom:auto;
    width:auto;text-align:left!important}
  .ms .lb{font-size:16px}
}

/* colophon */
.colo{margin-top:20px;max-width:76ch}
.colo .c1{font-size:15.5px;line-height:1.72}
.colo .c1+.c1{margin-top:2px}
.colo .c2{font-size:13.6px;color:var(--soft);margin-top:14px;line-height:1.7}
.colo a{border-bottom:1px solid var(--hair)}
.colo a:hover{border-bottom-color:var(--acc);color:var(--ink)}
.cite{margin-top:24px;border-left:2px solid var(--acc);padding:2px 0 2px 17px}
.cite .cl{font-family:var(--fm);font-size:8.4px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--soft);display:block;margin-bottom:7px}
.cite p{font-size:14px;line-height:1.68;max-width:70ch}
.copy{margin-top:12px;font-family:var(--fm);font-size:8.6px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--hair);color:var(--soft);padding:5px 11px;cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--ink)}

/* ── the counter, used as a 0–100% meter ── */
.meter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meter .lb{font-family:var(--fm);font-size:9.4px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft)}
.meter .val{font-family:var(--fm);font-size:11px;color:var(--ink)}

/* ── footer ── */
.foot{border-top:1px solid var(--rule);background:var(--pn);padding:20px 0 46px;margin-top:auto}
main{flex:1 1 auto;min-width:0;width:100%}
.foot-in{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:flex;gap:22px;
  flex-wrap:wrap;align-items:center;font-family:var(--fm);font-size:9.8px;letter-spacing:.09em;
  color:var(--soft)}
.foot-in .sp{flex:1}
.foot-in .visits{color:var(--faint)}

/* ── transition: LEMMA EXPANSION ──────────────────────────────────────────
   The entry is a lemma. On selection the apparatus bracket resolves to full
   crimson, and everything that was catalogued above the title migrates to the
   right of the bracket — the position it will hold in the work's own header.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .leaving .entry{transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
  .leaving .entry[data-recede]{opacity:0;transform:translateY(5px)}
  .leaving .mast,.leaving .ledger,.leaving .sect,.leaving .foot{opacity:0;
    transition:opacity 220ms var(--ease)}
  .leaving .entry[data-open]{position:relative;z-index:5;border-bottom-color:transparent;
    transform:translateY(calc(-1 * var(--rise,0px)));transition:transform 420ms var(--ease)}
  .leaving .entry[data-open] .entry-in{grid-template-columns:0 1fr;gap:0;
    transition:grid-template-columns 400ms var(--ease),gap 400ms var(--ease)}
  .leaving .entry[data-open] .plate{opacity:0;transform:translateX(-14px);
    transition:opacity 200ms var(--ease),transform 320ms var(--ease)}
  .leaving .entry[data-open] .esub,
  .leaving .entry[data-open] .efoot{opacity:0;transition:opacity 180ms var(--ease)}
  .leaving .entry[data-open] .etitle .br{opacity:1}
  .leaving .entry[data-open] .entry-main{flex-direction:row;align-items:baseline;
    gap:clamp(12px,2vw,20px);flex-wrap:wrap}
  .leaving .entry[data-open] .rechead{gap:0 clamp(12px,1.8vw,20px);
    transition:gap 400ms var(--ease)}
  .leaving .entry[data-open] .rechead dt{display:none}
  .leaving .entry[data-open] .rechead dd{margin-top:0;font-size:11px;letter-spacing:.13em}

  /* arrival: the lemma is already formed; its apparatus settles beside it */
  .arriving .sebo-id .t{animation:lm-t 380ms var(--ease) both}
  .arriving .sebo-id .ap{animation:lm-a 380ms 110ms var(--ease) both}
  .arriving .tools,.arriving .sebo-body{animation:lm-b 400ms 150ms var(--ease) both}
  @keyframes lm-t{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  @keyframes lm-a{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  @keyframes lm-b{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
  /* returning: Sebo folds back to the lemma it was in the index */
  .returning .sebo-body,.returning .tools,.returning .foot{opacity:0;
    transition:opacity 200ms var(--ease)}
  .returning .sebo-id .ap{opacity:0;transform:translateX(-12px);
    transition:opacity 220ms var(--ease),transform 300ms var(--ease)}
  .returning .sebo-id .s{opacity:0;transition:opacity 180ms var(--ease)}
  .returning .sebo-id .t{transform:translateY(4px) scale(.86);transform-origin:left baseline;
    transition:transform 340ms var(--ease)}
  .returning .sebo-top{opacity:0;transition:opacity 240ms var(--ease)}
  /* back at the index: the entry the visitor came from reassembles last */
  .returned .entry[data-mark] .etitle .br{opacity:.45;
    transition:opacity 420ms 260ms var(--ease)}
  .returned .entry[data-mark]{animation:re-mark 620ms var(--ease) both}
  @keyframes re-mark{
    0%{opacity:0;transform:translateY(-6px)}
    100%{opacity:1;transform:none}}
  .returned .entry:not([data-mark]){animation:re-rest 500ms 120ms var(--ease) both}
  @keyframes re-rest{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .leaving *,.arriving *,.returning *,.returned *{transition:none!important;animation:none!important}
}

/* ── sebo (subdomain) ── */
.sebo-head{border-bottom:1px solid var(--rule);background:var(--pn)}
.sebo-top{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;
  gap:14px;height:46px;border-bottom:1px solid var(--rule)}
.sebo-top .up{font-family:var(--fm);font-size:9.6px;letter-spacing:.17em;color:var(--soft);
  display:flex;align-items:center;gap:9px}
.sebo-top .up:hover{color:var(--ink)}
.sebo-top .sp{flex:1}
.sebo-id{max-width:1180px;margin:0 auto;padding:clamp(18px,3vw,26px) var(--pad) clamp(14px,2vw,20px)}
.sebo-id .t{font-family:var(--fd);font-size:clamp(26px,4vw,40px);letter-spacing:-.024em;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sebo-id .br{font-family:var(--fm);font-size:.5em;color:var(--acc);line-height:1}
.sebo-id .ap{font-family:var(--fm);font-size:11px;letter-spacing:.13em;color:var(--soft);
  display:flex;gap:clamp(12px,1.8vw,20px);flex-wrap:wrap;align-self:baseline}
.sebo-id .t .h{font-family:var(--fh);font-size:.68em;color:var(--acc2)}
.sebo-id .s{font-family:var(--fd);font-style:italic;font-size:clamp(14px,1.7vw,17px);
  color:var(--soft);margin-top:8px}
.tools{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:flex;overflow-x:auto;
  scrollbar-width:none;border-top:1px solid var(--rule)}
.tools::-webkit-scrollbar{display:none}
.tools a{font-family:var(--fm);font-size:9.6px;letter-spacing:.15em;padding:11px 0;margin-right:24px;
  color:var(--soft);border-bottom:2px solid transparent;white-space:nowrap}
.tools a[aria-current]{color:var(--acc2);border-bottom-color:var(--acc2)}
.work{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border-bottom:1px solid var(--rule)}
@media(max-width:820px){.work{grid-template-columns:1fr}}
.work .l{padding:clamp(18px,3vw,28px) var(--pad);border-right:1px solid var(--rule)}
.work .r{padding:clamp(18px,3vw,28px) var(--pad);background:var(--pn2)}
@media(max-width:820px){.work .l{border-right:0;border-bottom:1px solid var(--rule)}}
.passage{font-family:var(--fh);font-size:clamp(16px,2vw,21px);line-height:2.05;letter-spacing:.03em}
.passage u{text-decoration:none;border-bottom:1.5px solid var(--acc2);cursor:pointer}
.passage u.prop{border-bottom-style:dashed;border-bottom-color:var(--acc)}
.gloss{font-family:var(--fk);font-size:13.4px;color:var(--soft);line-height:1.85;margin-top:12px}
.nodes{font-family:var(--fm);font-size:10.4px;line-height:2;letter-spacing:.05em}
.nodes b{font-family:var(--fh);font-size:13px;font-weight:400;color:var(--ink)}
.nodes .p{color:var(--acc)}