/* 1000 Books: the commentary page, set like a bound edition. Each page sets --cloth, its book's colour. */
:root{
  color-scheme:light dark;
  --paper:#fbf8f1;--ink:#1f1b16;--soft:#6a6256;--rule:#e4dccd;--cream:#f6efdf;
  --link:var(--cloth);
  --serif:'EB Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#16130f;--ink:#e9e2d3;--soft:#a2998a;--rule:#332d25;
  --link:color-mix(in oklab,var(--cloth) 35%,#f6efdf);
}}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:clamp(1.19rem,1.05rem + .45vw,1.38rem);line-height:1.52;
  font-variant-numeric:oldstyle-nums;font-feature-settings:'liga','kern','onum';text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit}
.label{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:lining-nums}

/* the cover */
.cover{background:var(--cloth);color:var(--cream);padding:clamp(16px,2.2vw,28px)}
.cover-frame{border:1px solid color-mix(in srgb,var(--cream) 38%,transparent);min-height:min(74vh,700px);display:grid;grid-template-rows:auto 1fr;gap:clamp(3rem,8vh,6rem);padding:clamp(20px,3.4vw,44px)}
.cover-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2.2rem}
.back,.actions a{text-decoration:none;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:inherit}
.back{opacity:.85}
.back:hover,.actions a:hover{opacity:1;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.title-block{align-self:end}
.cover h1{font-weight:400;font-size:clamp(2.9rem,.6rem + 9.4vw,9rem);line-height:.96;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:normal;margin-left:-.03em}
.byline{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:lining-nums;margin-bottom:1.5rem;opacity:.9}
.deck{font-style:italic;font-size:clamp(1.3rem,1.05rem + .85vw,1.8rem);line-height:1.3;margin-top:1.6rem;max-width:27em;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:.5rem 2rem}

/* the page */
.layout{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,88px) clamp(16px,4vw,48px) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(40px,6vw,88px)}
main{max-width:33.5em;min-width:0}
@media (min-width:1000px){
  .layout{grid-template-columns:13.5em minmax(0,33.5em);justify-content:center}
  .side{position:sticky;top:2.2rem;align-self:start;max-height:calc(100vh - 4rem);overflow:auto;order:0}
  .side summary{pointer-events:none;list-style:none}
  .side summary::-webkit-details-marker{display:none}
  .side summary::after{display:none}
}

/* contents */
.side{font-size:.86em;line-height:1.3;margin-bottom:2.5rem}
.side summary{cursor:pointer;color:var(--soft);padding-bottom:.8rem;border-bottom:1px solid var(--rule);list-style-position:inside}
.toc{list-style:none;padding-top:.7rem}
.toc a{display:block;padding:.28rem 0 .28rem .85rem;margin-left:-.85rem;border-left:2px solid transparent;text-decoration:none;color:var(--soft);transition:color .15s}
.toc a:hover{color:var(--ink)}
.toc a[aria-current=true]{color:var(--ink);border-left-color:var(--link)}

/* the text */
main{counter-reset:sec}
main section{margin-bottom:clamp(2.8rem,5vw,4.2rem)}
main h2{counter-increment:sec;font-weight:400;font-size:1.72em;line-height:1.14;letter-spacing:-.008em;margin-bottom:1rem;scroll-margin-top:2rem;text-wrap:balance}
main h2::before{content:counter(sec,upper-roman);display:block;font-size:.4em;letter-spacing:.22em;color:var(--link);margin-bottom:.6rem}
main h3{font-weight:400;font-style:italic;font-size:1.2em;line-height:1.25;margin:1.9rem 0 .35rem}
main p{margin-bottom:.95em;hanging-punctuation:first;text-wrap:pretty}
main strong{font-weight:600}
main a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:color-mix(in srgb,currentColor 32%,transparent);transition:text-decoration-color .15s}
main a:hover{text-decoration-color:currentColor}
.lead{font-size:1.09em;line-height:1.47}
.lead::first-letter{float:left;font-size:3.9em;line-height:.8;padding:.06em .07em 0 0;color:var(--link)}
main ul{list-style:none;border-top:1px solid var(--rule);margin-top:1.2rem}
main ul li{padding:.8em 0;border-bottom:1px solid var(--rule);text-wrap:pretty}
main ul li strong{display:block;font-weight:500;margin-bottom:.1em}
main ul li strong em{font-style:italic;font-weight:500}

/* the closing line, bound like the cover */
.coda{background:var(--cloth);color:var(--cream);padding:clamp(16px,2.2vw,28px);margin-top:clamp(1rem,4vw,2rem);scroll-margin-top:0}
.coda-frame{border:1px solid color-mix(in srgb,var(--cream) 38%,transparent);padding:clamp(40px,8vw,104px) clamp(20px,5vw,64px);text-align:center}
.coda .label{opacity:.85;margin-bottom:1.5rem;display:block}
.essence{font-style:italic;font-size:clamp(1.6rem,1.15rem + 2vw,2.9rem);line-height:1.2;max-width:21em;margin:0 auto;text-wrap:balance}
.colophon{max-width:40em;margin:0 auto;padding:2.2rem 16px 3rem;text-align:center;font-size:.8em;line-height:1.45;color:var(--soft)}
.colophon a{color:inherit;text-underline-offset:.16em;text-decoration-thickness:1px}
.colophon .actions{justify-content:center;margin-bottom:1.4rem;color:var(--ink)}

@media print{
  .side,.cover .back,.cover .actions,.colophon .actions{display:none}
  .cover,.coda{background:none;color:#000}.cover-frame,.coda-frame{border:0;min-height:0}
  body{font-size:11.5pt}.layout{display:block;padding:0}main{max-width:none}main a{color:inherit;text-decoration:none}
}