:root { --paper:#F6F3EC; --ink:#1C1A17; --red:#C8372D; --grey:#6E6860; --rule:#E2DCCF; --grid:#ECE7DC; --tile:#EFEBE2;
  --f-display:"DM Serif Display",Georgia,serif; --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Jost","Futura","Century Gothic",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --paper:#191816; --ink:#ECE6DA; --red:#E0594C; --grey:#A69F93; --rule:#34302B; --grid:#211F1C; --tile:#23211E; color-scheme:dark; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background-color:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.6;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:40px 40px;
  padding-inline:20px; padding-block:0 64px; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration-color:var(--red); text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.wrap { max-width:1080px; margin:0 auto; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; border-bottom:1px solid var(--ink); }
.home .logo { width:150px; height:auto; color:var(--ink); display:block; }
.logo .lg-red { color:var(--red); }
nav.top { display:flex; gap:20px; font-family:var(--f-mono); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
nav.top a { text-decoration:none; }
.hero { padding-block:48px 24px; display:grid; gap:14px; }
.tag { font-family:var(--f-brand); font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.25; margin:0; max-width:28ch; text-wrap:balance; }
.sub { color:var(--grey); margin:0; max-width:62ch; }
.sect { font-family:var(--f-mono); font-weight:500; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:40px 0 16px; }
.films { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:20px; }
.card { text-decoration:none; display:grid; gap:4px; align-content:start; }
.thumb { aspect-ratio:4/5; border:1px solid var(--ink); background:var(--tile); overflow:hidden; display:grid; place-items:center; }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.card:hover .thumb img { transform:scale(1.03); }
.ph { font-family:var(--f-display); font-size:4rem; color:var(--grey); }
.no { font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em; color:var(--grey); margin:6px 0 0; font-variant-numeric:tabular-nums; }
.cw { font-family:var(--f-display); font-size:1.5rem; line-height:1.1; margin:0; }
.cd { font-size:.9rem; color:var(--grey); margin:0; }
nav.thumbidx { position:sticky; top:env(safe-area-inset-top,0px); z-index:2; background:var(--paper); border-block:1px solid var(--ink);
  display:flex; overflow-x:auto; font-family:var(--f-mono); font-size:.85rem; }
nav.thumbidx a, nav.thumbidx span { flex:1 0 2em; text-align:center; padding-block:8px; }
nav.thumbidx a { text-decoration:none; font-weight:500; }
nav.thumbidx a:hover { background:var(--ink); color:var(--paper); }
nav.thumbidx span { color:var(--rule); }
.letter { display:grid; grid-template-columns:64px 1fr; gap:20px; padding-block:24px 8px; border-bottom:1px solid var(--rule); scroll-margin-top:48px; }
.cap { font-family:var(--f-display); font-weight:400; font-size:3.4rem; line-height:.9; margin:0; color:var(--red); }
.letter ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; min-width:0; }
.letter li a { font-family:var(--f-display); font-size:1.35rem; }
.letter li.e a { font-size:1.6rem; }
.letter .d { display:block; color:var(--grey); font-size:.92rem; }
.tag-no, .letter .tag { font-family:var(--f-mono); font-size:.72rem; color:var(--paper); background:var(--red); padding:1px 6px; margin-left:6px; vertical-align:middle; }
.where { color:var(--grey); font-size:.9em; }
.entry-page { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:40px; padding-block:40px; align-items:start; }
.media { position:sticky; top:20px; }
.still { margin:0; display:grid; gap:6px; }
.still img, .blank { border:1px solid var(--ink); background:var(--tile); width:100%; aspect-ratio:4/5; object-fit:cover; }
.blank { display:grid; place-content:center; text-align:center; gap:6px; }
.blank span { font-family:var(--f-display); font-size:6rem; color:var(--grey); line-height:1; }
.blank em, figcaption { font-family:var(--f-mono); font-style:normal; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
.film { aspect-ratio:9/16; border:1px solid var(--ink); background:#000; }
.film iframe { width:100%; height:100%; border:0; display:block; }
.text { min-width:0; display:grid; gap:12px; max-width:66ch; }
.hw { font-family:var(--f-display); font-weight:400; font-size:clamp(2.6rem,7vw,4rem); line-height:1; margin:0; text-wrap:balance; }
.glyph { font-size:.5em; color:var(--grey); font-family:"Noto Serif JP","Hiragino Mincho ProN",serif; }
.meta { margin:0; display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--grey); }
.pos { font-style:italic; }
.def { font-family:var(--f-display); font-style:italic; font-size:1.6rem; line-height:1.25; margin:8px 0 0; }
.def::before { content:""; display:block; width:40px; height:3px; background:var(--red); margin-bottom:14px; }
.gloss { margin:0; }
.lbl { font-family:var(--f-mono); font-weight:500; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:24px 0 8px; }
.narr p { margin:0 0 6px; padding-left:14px; border-left:2px solid var(--rule); }
.cous, .src { margin:0; padding-left:18px; display:grid; gap:4px; }
.also, .note { color:var(--grey); font-size:.92rem; margin:8px 0 0; }
.cousin-page { padding-block:40px; }
.pn { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--rule); padding-block:20px;
  font-family:var(--f-mono); font-size:.85rem; }
.pn a { text-decoration:none; }
footer { margin-top:40px; padding-block:28px 0; border-top:1px solid var(--ink); display:grid; gap:6px; color:var(--grey); font-size:.88rem; max-width:72ch; }
footer p { margin:0; }
footer .dom { font-family:var(--f-brand); color:var(--ink); font-size:1.1rem; }
@media (max-width:760px) {
  .entry-page { grid-template-columns:1fr; gap:24px; padding-block:24px; }
  .media { position:static; max-width:360px; }
  .letter { grid-template-columns:1fr; gap:8px; }
  .cap { font-size:2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .thumb img { transition:none; } }