:root {
  color-scheme: light;
  font: 17px/1.7 system-ui, "Malgun Gothic", sans-serif;
  color: #2f2431;
  background: #fbf7f0;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #703650; text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid #703650; outline-offset: 3px; }
h1, h2, h3 { line-height: 1.3; word-break: keep-all; }
.wrap { max-width: 960px; margin: auto; padding-inline: clamp(18px, 5vw, 48px); }
.skip { position: absolute; top: -4rem; left: 1rem; background: #fff; padding: .5rem; }
.skip:focus { top: .5rem; }
.mast { background: #37263e; }
.bar, nav, .foot { display: flex; gap: 1.15rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.bar { min-height: 64px; padding-block: .65rem; }
.bar a { color: #fff8f4; text-decoration: none; }
.brand { font-weight: 800; }
.hero { padding: clamp(24px, 6vw, 60px); margin-top: clamp(24px, 6vw, 58px); border: 1px solid #d5b9ba; border-left: 7px solid #703650; background: #f5e7e5; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 4rem); margin: .2em 0 .45em; }
.hero p { max-width: 42ch; }
.hero a { font-weight: 750; }
.label { color: #703650; font-size: .82rem; font-weight: 760; }
.notes { padding: 2rem 0 3rem; }
.notes ol { padding: 0; margin: 0; list-style: none; }
.notes li { border-top: 1px solid #d5b9ba; display: grid; gap: 1.2rem; grid-template-columns: minmax(88px, 17%) 1fr; padding: 1rem .1rem; }
.notes h3, .notes p { margin: 0 0 .35rem; }
.notes h3 a { color: inherit; }
.notes li p, .deck, time { color: #5f515c; }
.reading { max-width: 700px; margin: auto; padding-block: clamp(30px, 7vw, 72px) 42px; }
.reading header { border-bottom: 1px solid #d5b9ba; padding-bottom: 1.15rem; }
.reading h1 { font-size: clamp(1.9rem, 5vw, 3.05rem); margin: .35em 0 .5em; }
.reading h2 { margin-top: 1.6em; font-size: 1.3rem; }
.reading p { overflow-wrap: anywhere; }
.reading aside { padding: .25rem 1rem .75rem; background: #f5e7e5; margin-top: 1.5rem; }
.reading aside h2 { margin-top: .75rem; }
time, .foot { font-size: .85rem; }
.foot { border-top: 1px solid #d5b9ba; padding-block: .85rem 1.2rem; }
@media (max-width: 540px) { .notes li { grid-template-columns: 1fr; gap: .25rem; } }