/* What if: shared look for the index and every note */
:root{--paper:#15191f;--paper-2:#1b2028;--ink:#ece6da;--ink-2:#b6b0a5;--mute:#7d828a;--line:#2c323c;--thread:#4b525d;--red:#e0604f;--card:#1b2028;color-scheme:dark}
:root[data-theme="light"]{--paper:#f6f2ea;--paper-2:#efe9de;--ink:#1d2a3a;--ink-2:#4a5566;--mute:#8a8f98;--line:#d9d1c3;--thread:#9b9283;--red:#b3362b;--card:#fffdf9;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* one frame on every page: 1040px wide, same left edge; reading text capped at a comfortable line length, left-aligned */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.wrap>*{max-width:760px}
header.top{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,4vw,48px);max-width:1280px;margin:0 auto}
/* wide screens: the reading column plus a sidebar, so the width is used without over-long lines */
aside.side{display:none}
@media (min-width:1100px){
  .wrap.note{display:grid;grid-template-columns:minmax(0,760px) 300px;column-gap:clamp(40px,6vw,110px);align-items:start}
  .wrap.note>*{grid-column:1}
  .wrap.note>aside.side{display:block;grid-column:2;grid-row:1/span 20;position:sticky;top:24px;margin-top:40px}
}
aside.side .box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
aside.side .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
aside.side a.n{display:block;font-family:Georgia,serif;font-size:17px;line-height:1.3;text-decoration:none;margin:10px 0}
aside.side a.n[aria-current]{color:var(--red)}
aside.side p{font-family:Georgia,serif;font-size:19px;line-height:1.35;margin:0 0 14px}
aside.side a.btn{display:inline-block;font-weight:600;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:15px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark svg{width:30px;height:30px}
.top nav a{color:var(--ink-2);text-decoration:none;margin-left:20px;font-size:15px}
.series{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:22px;text-decoration:none}
.series svg{width:44px;height:12px}
h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,5.4vw,54px);line-height:1.08;margin:12px 0 14px}
h1 em{color:var(--red)}
.stand{font-family:Georgia,serif;font-size:clamp(20px,2.6vw,24px);line-height:1.4;color:var(--ink-2);margin:0 0 14px}
.meta{font-size:14px;color:var(--mute);margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
article h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,3vw,30px);margin:40px 0 10px}
article p{margin:0 0 18px}
article ul{margin:0 0 18px;padding-left:22px}
article li{margin:6px 0}
article blockquote{margin:28px 0;font-family:Georgia,serif;font-style:italic;font-size:clamp(22px,2.8vw,26px);line-height:1.35;color:var(--red)}
.story{margin:0 0 16px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.story b{display:block;font-family:Georgia,serif;font-weight:400;font-size:20px;margin-bottom:4px}
.story p{margin:0;color:var(--ink-2);font-size:16.5px}
.story .src{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.end{margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.end p{font-family:Georgia,serif;font-size:clamp(20px,2.6vw,24px);line-height:1.35;margin:0 0 14px}
.end a.btn{display:inline-block;font-weight:600;padding:12px 18px;border-radius:8px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:16px}
.end .more{margin-top:22px;font-size:15px;color:var(--mute)}
/* index */
.wrap>.list{max-width:none}
.list{display:grid;gap:16px;margin:10px 0 0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.list a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.list a:hover{border-color:var(--ink-2)}
/* a bit more alive: a red thread draws itself under each title as the card comes into view, and again on hover */
.list a{position:relative;overflow:hidden;transition:border-color .2s,transform .25s ease}
.list a:hover{transform:translateY(-2px)}
.list h2{position:relative;padding-bottom:10px}
.list h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.list a.seen h2::after{transform:scaleX(.28)}
.list a:hover h2::after{transform:scaleX(1);transition-duration:.5s}
.list .k{color:var(--red)}
@media (prefers-reduced-motion: reduce){.list a,.list h2::after{transition:none}}
.list .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.list h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(22px,3vw,28px);margin:6px 0 6px;line-height:1.2}
.list p{margin:0;color:var(--ink-2);font-size:16.5px}
footer{position:relative;margin:64px auto 0;max-width:1280px;padding:26px clamp(16px,4vw,48px) 40px;color:var(--mute);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* the footer rule lines up with the content edges, not the gutters */
footer::before{content:"";position:absolute;top:0;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);border-top:1px solid var(--line)}
@media (max-width:760px){.top nav{display:none}}