/* Stories: quiet, one column, off-white by day and black by night, following the reader's device */
:root{
  --bg:#F6F4EF; --ink:#16161A; --soft:#5E5E66; --faint:#E4E1DA; --card:#FFFFFF; --link:#2458C8; --hong:#2458C8;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0A0A0A; --ink:#ECEAE4; --soft:#9C9AA2; --faint:#232326; --card:#121214; --link:#8DB4FF; --hong:#8DB4FF; color-scheme: dark; } }
:root[data-theme="dark"]{ --bg:#0A0A0A; --ink:#ECEAE4; --soft:#9C9AA2; --faint:#232326; --card:#121214; --link:#8DB4FF; --hong:#8DB4FF; color-scheme: dark; }
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 18px/1.7 var(--sans); padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0); transition:background .3s,color .3s }
a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px }
.top{ max-width:760px; margin:0 auto; padding:28px 24px 0; display:flex; align-items:center; justify-content:space-between }
.brand{ text-decoration:none; color:var(--ink); display:flex; align-items:baseline; gap:12px }
.brand__site{ font-weight:700; font-size:22px; letter-spacing:-.01em }
.brand__by{ color:var(--soft); font-size:15px }
.hong{ color:var(--hong) }
.theme{ border:1px solid var(--faint); background:transparent; color:var(--ink); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1 }
.theme__moon{ display:none }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme__sun{ display:none } :root:not([data-theme="light"]) .theme__moon{ display:inline } }
:root[data-theme="dark"] .theme__sun{ display:none } :root[data-theme="dark"] .theme__moon{ display:inline }
main{ max-width:760px; margin:0 auto; padding:24px 24px 40px }
.list{ display:grid; gap:56px; margin-top:28px }
.card{ display:block; text-decoration:none; color:inherit }
.card__img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; display:block; background:var(--faint) }
.card__txt{ padding-top:16px }
.card time, .post time{ color:var(--soft); font-size:14px; letter-spacing:.02em }
.card h2{ margin:4px 0 6px; font-size:28px; line-height:1.2; letter-spacing:-.015em; font-weight:700 }
.card p{ margin:0; color:var(--soft) }
.card:hover h2{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px }
.post{ margin-top:36px }
.post h1{ font-size:clamp(32px,6vw,46px); line-height:1.12; letter-spacing:-.02em; margin:6px 0 28px; font-weight:750 }
.prose{ font-family:var(--serif); font-size:20px; line-height:1.75 }
.prose > *{ margin:0 0 1.15em }
.prose h2{ font-family:var(--sans); font-size:26px; line-height:1.25; margin:1.8em 0 .5em; letter-spacing:-.01em }
.prose h3{ font-family:var(--sans); font-size:21px; margin:1.6em 0 .4em }
.prose blockquote{ margin:1.4em 0; padding:0 0 0 20px; border-left:2px solid var(--ink); color:var(--soft); font-style:italic }
.prose figure{ margin:2em 0 }
.prose img{ width:100%; height:auto; display:block; border-radius:4px; cursor:zoom-in }
.prose figcaption{ font-family:var(--sans); font-size:14px; color:var(--soft); margin-top:10px; text-align:center }
.prose hr{ border:0; text-align:center; margin:2.2em 0 } .prose hr::after{ content:"\00B7\00a0\00a0\00B7\00a0\00a0\00B7"; color:var(--soft) }
.prose ul,.prose ol{ padding-left:1.3em }
.draftnote{ font-size:14px; color:var(--soft); border:1px dashed var(--faint); padding:8px 12px; border-radius:6px }
.pager{ max-width:760px; margin:56px auto 0; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--faint); padding-top:22px }
.pager a{ text-decoration:none; color:var(--ink); max-width:48%; font-weight:600 } .pager a small{ display:block; color:var(--soft); font-weight:400; font-size:13px }
.pager .older{ text-align:right }
.empty{ color:var(--soft); margin-top:60px; text-align:center }
.foot{ max-width:760px; margin:0 auto; padding:30px 24px 50px; display:flex; gap:10px; justify-content:center; color:var(--soft); font-size:14px; border-top:1px solid var(--faint) }
.foot a{ color:var(--soft); text-decoration:none } .foot a:hover{ color:var(--ink) }
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:16px }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain }
@media (max-width:600px){ body{ font-size:17px } .prose{ font-size:18.5px } .card h2{ font-size:23px } .top{ padding:20px 18px 0 } main{ padding:18px 18px 30px } .list{ gap:44px } }