@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: one closed book — a spine band on the left, title set like a jacket front */
:root{
  --board:#5a3b24;--spine:#2f5a43;--paper:#f6f3ec;--ink:#231a12;--muted:#6d6153;--rule:#d9d0c1;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--board:#c9a37f;--spine:#7fb497;--paper:#17140f;--ink:#ece4d6;--muted:#a89a87;--rule:#3a3227;color-scheme:dark}}
:root[data-theme="dark"]{--board:#c9a37f;--spine:#7fb497;--paper:#17140f;--ink:#ece4d6;--muted:#a89a87;--rule:#3a3227;color-scheme:dark}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font:400 1.06rem/1.65 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;place-items:center}
.book{max-width:40rem;width:100%;padding-block:3rem;display:grid;grid-template-columns:14px 1fr;gap:1.6rem}
.spine{background:linear-gradient(var(--spine),var(--spine)) top/100% 72% no-repeat,var(--board);border-radius:2px}
.front{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.label{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font:400 clamp(2.8rem,9vw,4.4rem)/1.02 var(--display);margin:0;letter-spacing:-.01em}
.sub{font:italic 400 1.3rem/1.35 var(--body);margin:0;text-wrap:balance}
p{margin:0;max-width:34rem}
.status{display:flex;align-items:center;gap:.6rem;font:500 .8rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--spine)}
.status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--spine)}
.contents{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.contents li{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.98rem}
.contents .index{font:500 .78rem/1.9 var(--mono);color:var(--muted);min-width:2rem}
footer{font-size:.82rem;color:var(--muted);padding-top:.4rem}

*{box-sizing:border-box}body{margin:0;min-height:100svh;padding-block:1rem}.contents .entry{flex:1;min-width:0}.book{padding-block:2.5rem}footer{line-height:1.6}@media(max-width:400px){.book{gap:1rem;padding-block:1.8rem}.front{gap:1.2rem}.sub{font-size:1.15rem}.contents li{gap:.55rem}}