:root{color-scheme:dark;--paper:#0b0d0d;--ink:#f1ede6;--muted:#b0aca4;--rule:#343734;--accent:#d4a27c;font-family:'Atkinson Hyperlegible',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,4vw,64px);border-bottom:1px solid var(--rule);font-size:14px}.topbar a{text-decoration:none}.topbar a:hover,.contents a:hover{color:var(--accent)}.layout{max-width:1440px;margin:auto;display:grid;grid-template-columns:200px minmax(0,760px) 160px;gap:clamp(32px,4vw,64px);justify-content:center;padding:80px 32px 120px}.contents,.meta{font-size:13px;line-height:1.5;color:var(--muted);position:sticky;top:40px;align-self:start}.contents p,.meta p{margin:0 0 14px;color:var(--ink)}.contents a{display:block;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--rule)}.meta dl{margin:0}.meta dt{color:var(--muted);margin-top:18px}.meta dd{margin:4px 0 0;color:var(--ink)}article{min-width:0}.eyebrow{font-size:13px;color:var(--accent);margin:0 0 20px}.title{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(42px,5vw,70px);letter-spacing:-.035em;line-height:1.05;margin:0 0 24px}.intro{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:#d7d3ca;max-width:650px;margin:0 0 42px}.hero{margin:0 0 64px}.hero a{display:block;background:#161a1a}.hero img{width:100%;height:auto;max-height:500px;object-fit:contain;display:block}.hero figcaption{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px}.story-section{max-width:660px;margin:0 auto 58px;scroll-margin-top:30px}.story-section h2{font-family:Fraunces,Georgia,serif;font-size:clamp(27px,3vw,38px);font-weight:400;line-height:1.15;margin:0 0 20px}.story-section p,.story-section li{font-size:17px;line-height:1.75;color:#d2cec5}.story-section p{margin:0 0 18px}.story-section ul{padding-left:22px}.story-section li{padding-left:4px;margin-bottom:8px}.next{border-top:1px solid var(--rule);padding-top:30px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.next a{text-decoration:none}.next a:hover{color:var(--accent)}@media(max-width:1000px){.layout{grid-template-columns:minmax(0,760px);padding-top:50px}.contents{position:static;display:flex;gap:16px;flex-wrap:wrap}.contents p{width:100%;margin:0}.contents a{border:0;padding:0}.meta{position:static;grid-row:2}.meta dl{display:flex;gap:24px;flex-wrap:wrap}.meta dt{margin:0}.layout article{grid-row:3}}@media(max-width:600px){.topbar{padding:22px}.layout{padding:36px 22px 80px;gap:28px}.intro{margin-bottom:30px}.hero{margin-bottom:44px}.story-section p,.story-section li{font-size:16px;line-height:1.7}.contents{font-size:12px;gap:12px}.title{font-size:42px}}

/* Place the article in the wide reading column, with supporting details at the sides. */
.topbar { border-bottom: 0; padding: 22px 28px 0; }
.layout > .contents { grid-column: 1; grid-row: 1; }
.layout > article { grid-column: 2; grid-row: 1; }
.layout > .meta { grid-column: 3; grid-row: 1; }
@media (max-width: 1000px) {
  .layout > .contents, .layout > .meta, .layout > article { grid-column: 1; }
  .layout > .contents { grid-row: 1; }
  .layout > .meta { grid-row: 2; }
  .layout > article { grid-row: 3; }
}

/* Editorial hierarchy: centered title, visual first, then a narrower reading column. */
.layout { padding-top: 58px; }
.title { max-width: 740px; margin: 0 auto 34px; font-family: 'Atkinson Hyperlegible', Arial, sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 700; letter-spacing: -.025em; line-height: 1.16; text-align: center; }
.hero { margin-bottom: 30px; }
.intro { max-width: 620px; margin: 0 auto 42px; font-size: 18px; line-height: 1.65; color: var(--ink); }
.story-section { max-width: 620px; margin-bottom: 48px; }
.story-section h2 { font-family: 'Atkinson Hyperlegible', Arial, sans-serif; font-weight: 700; font-size: clamp(22px, 2vw, 27px); line-height: 1.25; margin-bottom: 15px; }
.story-section p, .story-section li { font-family: Fraunces, Georgia, serif; font-size: 17px; line-height: 1.75; }
.contents, .meta { padding-top: 108px; }
@media (max-width: 1000px) {
  .contents, .meta { padding-top: 0; }
  .layout { padding-top: 42px; }
}
@media (max-width: 600px) {
  .layout { padding-top: 30px; }
  .title { font-size: 30px; margin-bottom: 26px; }
  .intro { font-size: 16px; margin-bottom: 35px; }
  .story-section p, .story-section li { font-size: 16px; }
}

::selection { background: #c9a989; color: #17120f; }

/* A compact flow makes the engineering understandable without tiny screenshots. */
.story-flow { max-width: 720px; margin: 56px auto 64px; padding: 25px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story-flow figcaption { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.story-flow ol { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 0; margin: 0; }
.story-flow li { flex: 1 1 120px; min-width: 0; }
.story-flow li strong, .story-flow li span { display: block; }
.story-flow li strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.story-flow li span { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 5px; }
.story-flow p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 20px 0 0; }
@media (max-width: 600px) { .story-flow { margin: 40px 0; } .story-flow ol { gap: 20px; } .story-flow li { flex-basis: 42%; } }