@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/hanken.woff2") format("woff2")}
@font-face{font-family:Petrona;font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/petrona.woff2") format("woff2")}
@font-face{font-family:Petrona;font-style:italic;font-weight:400 500;font-display:swap;src:url("../fonts/petrona-italic.woff2") format("woff2")}

:root {
  --paper: #f4eedf;
  --paper-low: #eae1d0;
  --ink: #342c24;
  --muted: #6c6052;
  --accent: #a6402c;
  --honey: #eccc77;
  --rule: #d4c7b1;
  --sans: "Hanken Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: Petrona, "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; scrollbar-color: var(--muted) var(--paper); scrollbar-width: thin; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--honey); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; background: none; border: 0; }
input { caret-color: var(--accent); }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
h1,h2 { text-wrap: balance; }
em { font-family: var(--serif); font-weight: 400; }
[hidden] { display: none !important; }
.shell { width: min(var(--container), calc(100% - 112px)); margin-inline: auto; }
.icon { flex: 0 0 auto; width: 24px; height: 24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; padding:12px 20px; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:16px; }

.site-header { display:flex; align-items:center; justify-content:space-between; min-height:110px; border-bottom:1px solid var(--rule); position:relative; z-index:10; view-transition-name:site-header; }
.brand { display:flex; align-items:baseline; }
.brand-title { font-size:25px; font-weight:600; letter-spacing:-.04em; line-height:1.2; white-space:nowrap; }
.brand-title>em { color:var(--accent); letter-spacing:-.035em; }
.header-actions,.site-nav { display:flex; align-items:center; }
.header-actions { gap:29px; flex-shrink:0; }
.site-nav { gap:32px; }
.site-nav a { font-size:14px; min-height:44px; display:flex; align-items:center; position:relative; }
.site-nav a::after { position:absolute; bottom:3px; left:0; right:0; height:2px; background:var(--accent); content:""; transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease); }
.site-nav a:hover::after,.site-nav a[aria-current]::after { transform:scaleX(1); }
.site-nav a[aria-current] { color:var(--accent); }
.icon-control { width:44px; height:44px; display:grid; place-items:center; transition:background 150ms; border-radius:50%; }
.icon-control:hover { background:var(--paper-low); }
.icon-control .icon { width:21px; height:21px; }
.menu-toggle { display:none; }

.hero { overflow:clip; }
.hero-stage { width:min(1480px,calc(100% - 112px)); min-height:100vh; min-height:100svh; padding-block:64px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; position:relative; }
.hero-copy { grid-column:1; grid-row:1; min-width:0; position:relative; z-index:1; }
.hero h1 { font-size:clamp(72px,7.5vw,96px); letter-spacing:-.04em; line-height:1.02; }
.hero h1>span { display:block; font-weight:600; }
.hero h1>em { display:block; margin-top:8px; margin-left:64px; color:var(--accent); letter-spacing:-.035em; line-height:1.12; font-size:1em; white-space:nowrap; }
.hero-illustration { position:absolute; right:-24px; top:50%; transform:translateY(-50%); width:min(68vw,92svh,980px); max-width:none; pointer-events:none; }
.hero-illustration img { width:100%; }
.hero-links { display:flex; align-items:center; gap:40px; margin:64px 0 0 68px; }
.cover-link { display:inline-flex; justify-content:space-between; align-items:center; gap:32px; min-width:112px; min-height:56px; border-bottom:1px solid var(--ink); font-size:18px; font-weight:500; transition:color 180ms,border-color 180ms; }
.cover-link .icon { width:21px; height:21px; transition:transform 250ms var(--ease); }
.cover-link:hover { color:var(--accent); border-color:var(--accent); }
.cover-link:hover .icon { transform:translate(3px,-3px); }
.primary-link { display:inline-flex; gap:28px; align-items:center; min-height:52px; font-size:16px; font-weight:600; width:fit-content; }
.primary-link>span { display:grid; place-items:center; width:45px; height:45px; background:var(--accent); color:var(--paper); border-radius:50%; overflow:hidden; transition:background 180ms; }
.primary-link .icon { width:23px; height:23px; transition:transform 240ms var(--ease); }
.primary-link:hover>span { background:var(--ink); }
.primary-link:hover .icon { animation:arrow-through 340ms var(--ease); }
.link { display:inline-flex; gap:12px; align-items:center; font-size:14px; width:fit-content; min-height:44px; padding:8px 0; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:transparent; text-underline-offset:5px; transition:text-decoration-color 180ms,color 180ms; }
.link:hover { color:var(--accent); text-decoration-color:currentColor; }
.link .icon { width:18px; height:18px; transition:transform 220ms var(--ease); }
.link:hover .icon { transform:translate(2px,-2px); }
.margin-paper { background:var(--honey); padding:27px 29px 24px; transform:rotate(3deg); position:relative; margin-top:-8px; }
.margin-paper::after { content:""; position:absolute; right:0; bottom:0; width:20px; height:20px; clip-path:polygon(100% 0,100% 100%,0 100%); background:var(--paper); }
.margin-paper h2 { font:italic 24px/1.2 var(--serif); letter-spacing:-.02em; padding-right:22px; }
.margin-paper>p { font-size:14px; line-height:1.6; margin-top:13px; color:#554326; }
.paper-mark { position:absolute; top:24px; right:23px; color:var(--accent); transform:rotate(13deg); }
.paper-mark .icon { width:21px; height:21px; }
.paper-signature { display:block; text-align:right; margin-top:12px; font:italic 19px/1.1 var(--serif); }

.journal-section { display:grid; grid-template-columns:230px minmax(0,1fr); column-gap:72px; row-gap:48px; align-items:start; padding:45px 0 66px; }
.journal-section>.entries { grid-column:2; grid-row:1 / span 2; }
.journal-section>.margin-paper { grid-column:1; grid-row:2; margin:0; padding:24px; }
.section-margin { padding-top:8px; }
.section-margin h2 { font-size:31px; letter-spacing:-.035em; }
.small-dot { color:var(--accent); }
.section-margin>p { color:var(--muted); font-size:15px; line-height:1.65; margin-top:18px; }
.section-margin .link { margin-top:23px; font-size:14px; gap:10px; }
.entry-count { display:grid; place-items:center; background:var(--paper-low); min-width:24px; height:24px; font-size:11px; border-radius:50%; }
.entries { min-width:0; }
.entry { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 35px; gap:29px; padding:29px 0 33px; border-bottom:1px solid var(--rule); }
.entry:first-child { padding-top:0; }
.entry h3 { font-size:30px; max-width:750px; line-height:1.18; font-weight:500; text-wrap:pretty; }
.entry-title { display:inline-block; transition:color 170ms; }
.entry-title::after { content:""; position:absolute; inset:0; z-index:1; }
.entry:hover .entry-title { color:var(--accent); }
.entry p { font-size:15px; color:var(--muted); line-height:1.7; max-width:660px; margin-top:12px; }
.entry-meta { display:flex; gap:10px 20px; flex-wrap:wrap; align-items:center; font-size:12px; line-height:1.5; color:var(--muted); margin-top:21px; font-variant-numeric:tabular-nums; }
.entry-topic { color:var(--accent); }
.demo-note { font-size:11px; font-style:italic; }
.entry-arrow { align-self:center; justify-self:end; width:35px; height:40px; display:grid; place-items:center; overflow:hidden; color:var(--accent); }
.entry-arrow .icon { width:27px; height:27px; transition:transform 250ms var(--ease); }
.entry:hover .entry-arrow .icon { transform:translate(4px,-4px); }
.entry-featured { padding-bottom:34px; }
.entry-featured h3 { font-size:43px; letter-spacing:-.035em; }
.entry-featured p { max-width:680px; }
.entry-featured .entry-arrow { align-self:start; margin-top:4px; }
.entry-featured .entry-arrow .icon { width:31px; height:31px; }

.about-preview { display:grid; grid-template-columns:1.1fr 1fr; column-gap:115px; padding:53px 0 49px; border-top:1px solid var(--ink); }
.about-preview h2 { font-size:54px; line-height:1.04; }
.about-preview h2 em { color:var(--accent); display:block; margin-top:7px; font-size:.83em; line-height:1.3; }
.about-preview-copy { padding-top:17px; max-width:495px; }
.about-preview-copy>p { font-size:17px; line-height:1.75; color:var(--muted); }
.about-preview-copy>.link { margin-top:20px; }
.now-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:56px; border-top:1px solid var(--rule); padding-top:25px; }
.now-list>div>span { font-size:12px; color:var(--muted); }
.now-list p { font-size:19px; line-height:1.4; margin-top:6px; }

.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--rule); padding:20px 0 24px; font-size:13px; color:var(--muted); view-transition-name:site-footer; }
.footer-copyright { white-space:nowrap; }
.site-footer .back-top { display:inline-flex; align-items:center; justify-content:center; width:40px; min-height:44px; padding:0; transition:color 180ms; }
.site-footer .back-top:hover { color:var(--accent); }
.site-footer .icon { width:18px; height:18px; }

.index-heading { padding:48px 0 40px; }
.index-heading h1 { font-size:clamp(40px,6.5vw,88px); line-height:1.06; max-width:840px; overflow-wrap:anywhere; }
.index-tools { border-block:1px solid var(--rule); padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.topic-nav { display:flex; align-items:center; gap:27px; flex-wrap:wrap; }
.topic-nav a { font-size:14px; display:flex; align-items:center; gap:9px; min-height:44px; position:relative; color:var(--muted); }
.topic-nav a>span { font-size:11px; font-variant-numeric:tabular-nums; }
.topic-nav a[aria-current] { color:var(--accent); }
.topic-nav a[aria-current]::after { content:""; position:absolute; bottom:1px; height:2px; background:var(--accent); left:0; right:0; }
.topic-nav a:hover { color:var(--accent); }
.search-form { display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px; padding:0 10px; width:255px; border-bottom:1px solid var(--muted); transition:border-color 150ms,background 150ms; scroll-margin-top:25px; }
.search-form:focus-within { border-color:var(--accent); background:var(--paper-low); }
.search-form>.icon { width:19px; height:19px; color:var(--muted); }
.search-form input { min-width:0; width:100%; border:0; background:none; font-size:14px; height:42px; outline:none; }
.search-form input::placeholder { color:var(--muted); opacity:1; }
.search-form input::-webkit-search-cancel-button { display:none; }
.clear-search { display:grid; place-items:center; width:32px; height:42px; flex-shrink:0; padding:0; }
.clear-search .icon { width:18px; height:18px; }
.index-layout { display:grid; grid-template-columns:230px minmax(0,1fr); column-gap:72px; padding-top:12px; }
.index-aside { padding-top:35px; }
.index-aside>p { font:italic 23px/1.5 var(--serif); color:var(--accent); }
.index-aside>span { display:block; color:var(--muted); font-size:12px; margin-top:23px; }
.index-layout .entry:first-child { padding-top:29px; }
.index-layout .entry { padding-block:32px; }
.index-layout .entry h3 { font-size:34px; }
.index-signoff { font:italic 21px/1.5 var(--serif); padding:37px 0 65px; color:var(--muted); margin-left:302px; }
.search-results { margin-left:302px; }
.search-status { margin:27px 0 23px 302px; font-size:14px; color:var(--muted); }
.search-results .entry h3 { font-size:32px; }
.search-retry { font-size:15px; color:var(--accent); min-height:44px; text-decoration:underline; text-underline-offset:5px; }
.empty-message { font:italic 25px/1.6 var(--serif); color:var(--muted); padding:25px 0; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:30px; }
.pagination a,.pagination .current { padding:8px 14px; min-width:44px; min-height:44px; font-size:14px; display:grid; place-items:center; }
.pagination .current { background:var(--ink); color:var(--paper); }
.pagination a:hover { background:var(--paper-low); }

.about-heading { padding:65px 0 43px 0; border-bottom:1px solid var(--ink); }
.about-heading h1 { font-size:clamp(56px,6vw,82px); line-height:1.04; }
.about-heading h1 em { color:var(--accent); padding-left:110px; display:inline-block; margin-top:5px; }
.about-heading>p { margin-top:26px; margin-left:112px; font-size:18px; color:var(--muted); }
.about-layout { display:grid; grid-template-columns:270px minmax(0,1fr); column-gap:108px; padding:43px 0 56px; }
.profile-margin { align-self:start; position:sticky; top:30px; min-width:0; max-height:calc(100svh - 60px); overflow-y:auto; overflow-wrap:anywhere; }
.profile-name { font-size:30px; font-weight:600; line-height:1.2; letter-spacing:-.025em; }
.profile-facts { display:grid; gap:20px; margin:28px 0 0; }
.profile-facts>div { min-width:0; }
.profile-facts dt { font-size:12px; color:var(--muted); margin-bottom:5px; }
.profile-facts dd { margin:0; font-size:16px; line-height:1.6; }
.profile-contacts { display:grid; list-style:none; margin:28px 0 0; padding:16px 0 0; border-top:1px solid var(--rule); }
.profile-contacts li { min-width:0; }
.profile-contact-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:60px; padding:8px 0; color:var(--ink); }
.profile-contacts a { transition:color 180ms var(--ease); }
.profile-contacts a:hover { color:var(--accent); }
.profile-margin a:focus-visible { outline-offset:-2px; }
.profile-contact-text { min-width:0; }
.profile-contact-label { display:block; font-size:14px; line-height:1.5; }
.profile-contact-value { display:block; font-size:13px; line-height:1.6; color:var(--muted); user-select:text; }
.profile-contacts .profile-contact-icon { width:20px; height:20px; color:inherit; stroke-width:1.6; }
.profile-contact-row>.icon:not(.profile-contact-icon) { width:14px; height:14px; color:var(--accent); }
.contents h2 { font-size:15px; letter-spacing:0; font-weight:600; }
.contents .toc { padding:0; list-style:none; margin:16px 0 0; font-size:13px; }
.contents .toc-child { padding-left:15px; list-style:none; margin:4px 0; }
.contents li { margin:7px 0; line-height:1.5; }
.contents a { color:var(--muted); min-height:30px; display:inline-flex; align-items:center; transition:color 150ms; }
.contents a:hover { color:var(--accent); }
.contents a[aria-current] { color:var(--accent); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

.article-heading { padding:37px 0 39px 302px; border-bottom:1px solid var(--rule); }
.article-back { color:var(--muted); font-size:13px; margin-bottom:26px; }
.article-heading h1 { font:500 clamp(42px,4.9vw,68px)/1.08 var(--sans); letter-spacing:-.035em; max-width:920px; text-wrap:balance; }
.article-deck { color:var(--muted); font-size:19px; line-height:1.65; max-width:730px; margin-top:26px; }
.article-heading .entry-meta { margin-top:25px; }
.article-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:72px; padding-top:40px; }
.article-margin { position:sticky; top:34px; align-self:start; }
.reading-note { display:block; font:italic 22px/1.45 var(--serif); color:var(--muted); margin-top:32px; }
.article-body { min-width:0; }
.reading-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:30; }
.reading-progress>span { height:100%; width:100%; display:block; background:var(--accent); transform-origin:left; transform:scaleX(0); }
.prose { font-size:17px; line-height:1.9; max-width:70ch; overflow-wrap:break-word; }
.article-body>.prose,.about-layout>.prose { max-width:none; min-width:0; }
.prose p { margin-bottom:24px; }
.prose>p:first-child { font-size:19px; }
.prose h1 { font-size:42px; margin:40px 0 22px; }
.prose h2 { font-size:30px; font-weight:500; line-height:1.25; margin:44px 0 21px; letter-spacing:-.025em; }
.prose>h2:first-child { margin-top:0; }
.prose h3 { font-size:24px; font-weight:500; line-height:1.3; margin:33px 0 16px; }
.prose h4,.prose h5,.prose h6 { font-size:18px; line-height:1.5; margin:27px 0 13px; }
.prose a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.prose a:hover { text-decoration-thickness:2px; }
.prose em { font:inherit; font-style:italic; }
.prose strong { font-weight:600; }
.prose mark { background:var(--honey); color:var(--ink); padding:1px 3px; }
.prose kbd { font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--paper-low); border:1px solid var(--rule); border-radius:3px; padding:3px 6px; white-space:nowrap; }
.prose abbr[title] { text-decoration:underline dotted; text-underline-offset:4px; cursor:help; }
.prose ul,.prose ol { padding-left:24px; margin:23px 0 27px; }
.prose li { padding-left:3px; margin:13px 0; }
.prose li::marker { color:var(--accent); }
.prose li>p { margin-bottom:10px; }
.prose blockquote { padding:15px 0 16px 29px; margin:33px 0; border-left:1px solid var(--accent); font:italic 21px/1.65 var(--serif); color:var(--accent); }
.prose blockquote p { margin:0; }
.prose blockquote em { font:inherit; }
.prose blockquote>p+p { margin-top:16px; }
.prose blockquote footer { margin-top:16px; color:var(--muted); font:14px/1.6 var(--sans); }
.prose blockquote footer cite { margin-left:12px; }
.prose hr { border:0; border-top:1px solid var(--rule); margin:35px 0; }
.prose img,.prose video { max-width:100%; height:auto; margin:25px auto; }
.prose figure:not(.highlight) { margin:32px 0; }
.prose figcaption { color:var(--muted); font:14px/1.6 var(--sans); text-align:center; }
.prose iframe { max-width:100%; }
.prose code { font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--paper-low); padding:3px 6px; overflow-wrap:anywhere; }
.prose pre { background:var(--paper-low); padding:24px; overflow:auto; white-space:pre; }
.prose pre code { padding:0; white-space:pre; }
.prose .highlight { background:var(--paper-low); margin:26px 0; position:relative; overflow:auto; }
.prose .highlight figcaption { text-align:left; padding:12px 80px 12px 18px; border-bottom:1px solid var(--rule); }
.prose .highlight table { border:0; width:auto; margin:0; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.prose .highlight td { border:0; padding:0; min-width:0; vertical-align:top; }
.prose .highlight pre { margin:0; padding:30px 18px 22px; }
.prose .highlight .gutter { color:var(--muted); user-select:none; }
.prose .highlight .gutter pre { padding-inline:14px; }
.highlight .string,.highlight .attr { color:#4c5d33; }
.highlight .keyword,.highlight .number,.highlight .literal { color:var(--accent); }
.highlight .comment { color:var(--muted); font-style:italic; }
.code-copy { position:absolute; top:5px; right:8px; font:12px var(--sans); min-height:34px; padding:6px 10px; background:var(--paper); }
.code-copy:hover { color:var(--accent); }
.prose table { display:block; border-collapse:collapse; overflow:auto; max-width:100%; margin:25px 0; font-size:14px; }
.prose th,.prose td { padding:13px 16px; border:1px solid var(--rule); text-align:left; min-width:110px; }
.prose th { background:var(--paper-low); font-weight:600; }
.prose th[align=center],.prose td[align=center] { text-align:center; }
.prose th[align=right],.prose td[align=right] { text-align:right; }
.prose input[type=checkbox] { accent-color:var(--accent); }
.prose dl { margin:24px 0; }
.prose dt { font-weight:600; }
.prose dd { margin:8px 0 20px 24px; }
.prose details { margin:24px 0; border-block:1px solid var(--rule); }
.prose summary { padding:14px 0; cursor:pointer; font-weight:600; }
.prose summary::marker { color:var(--accent); }
.prose details>p { margin-bottom:16px; }
.prose math[display=block] { font-size:1.35em; margin:28px 0; padding-block:8px; overflow-x:auto; }
.prose .footnotes { font-size:14px; color:var(--muted); }
.prose .education-timeline { list-style:none; margin:24px 0 0; padding:0; }
.prose .education-timeline>li { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 250px; align-items:start; gap:32px; margin:0; padding:0 0 36px 32px; }
.prose .education-timeline>li:last-child { padding-bottom:0; }
.education-timeline>li:not(:last-child)::before { content:""; position:absolute; left:4px; top:19px; bottom:-19px; width:1px; background:var(--rule); }
.education-timeline>li::after { content:""; position:absolute; left:0; top:15px; width:9px; height:9px; border:1px solid var(--accent); border-radius:50%; background:var(--paper); }
.education-timeline>.education-current::after { background:var(--accent); }
.education-copy { min-width:0; padding-top:8px; }
.prose .education-timeline .education-period { margin:0; color:var(--muted); font-size:14px; line-height:1.65; font-variant-numeric:tabular-nums; white-space:nowrap; }
.prose .education-timeline h3 { margin:9px 0 0; font-size:20px; font-weight:500; line-height:1.45; letter-spacing:-.015em; }
.prose .education-timeline .education-details { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.prose .education-timeline .education-art { width:250px; max-width:100%; height:auto; margin:0; justify-self:end; }
.article-end { text-align:center; border-top:1px solid var(--rule); margin-top:43px; padding:27px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.article-end>p { font:italic 30px/1.3 var(--serif); color:var(--accent); }
.tag-list { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:0; }
.tag-list a { font-size:13px; color:var(--muted); padding:7px 0; min-height:36px; }
.tag-list a:hover { color:var(--accent); }
.entry-pagination { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:28px 0 64px; border-top:1px solid var(--rule); }
.entry-pagination a { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.entry-pagination .entry-older { grid-column:2; align-items:flex-end; text-align:right; }
.entry-pagination a>span { color:var(--muted); font-size:12px; }
.entry-pagination strong { font-size:22px; line-height:1.3; font-weight:500; letter-spacing:-.025em; }
.entry-pagination .icon { width:20px; height:20px; color:var(--accent); }
.entry-pagination a:hover strong { color:var(--accent); }
.generic-page { padding-bottom:70px; }
.generic-page .prose { margin-left:auto; }
.not-found { padding-block:90px 100px; }
.not-found h1 { font-size:90px; line-height:1.05; }
.not-found h1 em { color:var(--accent); margin-left:80px; }
.not-found>p { margin:32px 0 24px 85px; color:var(--muted); font-size:18px; }
.not-found>.primary-link { margin-left:85px; }

@view-transition { navigation:auto; }
::view-transition-old(root) { animation:page-out 180ms ease both; }
::view-transition-new(root) { animation:page-in 300ms var(--ease) both; }
::view-transition-group(*) { animation-duration:460ms; animation-timing-function:var(--ease); }
::view-transition-group(site-header),::view-transition-group(site-footer) { animation-duration:240ms; }
::view-transition-old(entry-open) { height:100%; animation:ink-out 120ms ease both; }
::view-transition-new(entry-open) { height:100%; animation:ink-in 360ms var(--ease) both; }
@keyframes page-out { to { opacity:0; } }
@keyframes page-in { from { opacity:0; clip-path:inset(0 0 3% 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes ink-out { to { opacity:0; } }
@keyframes ink-in { from { opacity:.5; } to { opacity:1; } }
@keyframes arrow-through { 49% { transform:translateX(30px); } 50% { transform:translateX(-30px); } 100% { transform:translateX(0); } }

@media (max-width:1200px) {
  .shell { width:calc(100% - 80px); }
  .hero-stage { width:calc(100% - 80px); }
  .hero h1 { font-size:clamp(68px,7.5vw,88px); }
  .hero h1>em { margin-left:44px; }
  .hero-links { margin-left:48px; gap:32px; }
  .margin-paper { padding:25px; }
  .margin-paper h2 { font-size:22px; }
  .margin-paper>p { font-size:13px; }
  .primary-link { font-size:15px; gap:19px; }
  .journal-section,.index-layout,.article-layout { grid-template-columns:205px minmax(0,1fr); gap:45px; }
  .entry-featured h3 { font-size:39px; }
  .entry h3 { font-size:29px; }
  .entry-featured h3 { font-size:39px; }
  .about-preview { gap:70px; }
  .about-preview h2 { font-size:48px; }
  .topic-nav { gap:22px; }
  .topic-nav a { font-size:13px; }
  .search-form { width:230px; }
  .index-signoff,.search-status,.search-results { margin-left:250px; }
  .about-layout { grid-template-columns:240px minmax(0,1fr); gap:65px; }
  .article-heading { padding-left:250px; }
  .article-heading h1 { font-size:58px; }
}
@media (max-width:980px) {
  .shell { width:calc(100% - 64px); }
  .site-header { min-height:96px; }
  .site-nav { gap:25px; }
  .header-actions { gap:20px; }
  .hero-stage { width:calc(100% - 64px); }
  .hero h1 { font-size:clamp(56px,7.3vw,70px); }
  .hero h1>em { margin-left:28px; }
  .hero-illustration { width:min(58vw,92svh); }
  .hero-links { margin-left:32px; gap:24px; margin-top:48px; }
  .cover-link { min-width:96px; gap:20px; font-size:16px; }
  .margin-paper { padding:25px 23px 22px; margin-top:0; }
  .margin-paper h2 { font-size:22px; }
  .paper-mark { right:15px; top:25px; }
  .paper-mark .icon { width:18px; height:18px; }
  .journal-section,.index-layout,.article-layout { grid-template-columns:170px minmax(0,1fr); gap:32px; }
  .section-margin h2 { font-size:26px; }
  .section-margin>p { font-size:13px; }
  .entry { gap:17px; }
  .entry h3 { font-size:27px; }
  .entry-featured h3 { font-size:33px; }
  .entry p { font-size:14px; }
  .entry-meta { font-size:11px; gap:7px 15px; }
  .about-preview { gap:50px; }
  .about-preview h2 { font-size:41px; }
  .about-preview-copy { padding-top:5px; }
  .about-preview-copy>p { font-size:16px; }
  .now-list { gap:24px; margin-top:0; }
  .now-list p { font-size:17px; }
  .index-tools { align-items:stretch; flex-direction:column; gap:10px; padding-top:8px; }
  .topic-nav { gap:30px; }
  .search-form { width:100%; max-width:none; padding-inline:0; }
  .index-layout .entry h3 { font-size:28px; }
  .index-signoff,.search-status,.search-results { margin-left:202px; }
  .index-aside>p { font-size:21px; }
  .about-heading h1 { font-size:65px; }
  .about-heading h1 em { padding-left:60px; }
  .about-heading>p { margin-left:60px; font-size:17px; }
  .about-layout { grid-template-columns:190px minmax(0,1fr); gap:45px; }
  .prose .education-timeline>li { grid-template-columns:minmax(0,1fr); gap:16px; }
  .contents .toc { font-size:12px; }
  .article-heading { padding-left:202px; }
  .article-heading h1 { font-size:49px; }
  .article-deck { font-size:17px; }
  .prose { font-size:16px; }
  .prose>p:first-child { font-size:18px; }
  .prose h2 { font-size:28px; }
}
@media (max-width:720px) {
  .shell { width:calc(100% - 40px); }
  .site-header { min-height:88px; }
  .brand-title { font-size:clamp(19px,5.4vw,23px); }
  .header-actions { gap:6px; }
  .menu-toggle { display:grid; }
  .site-nav { display:none; position:absolute; top:100%; left:-20px; right:-20px; padding:17px 25px 21px; background:var(--paper); border-bottom:1px solid var(--rule); }
  .site-nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:4px; animation:menu-in 230ms var(--ease); }
  .site-nav a { font-size:20px; padding:8px 0; min-height:48px; }
  .site-nav a::after { right:auto; width:26px; }
  .menu-toggle[aria-expanded=true] { background:var(--honey); }
  .hero-stage { width:calc(100% - 40px); display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:16px; padding-block:32px; }
  .hero h1 { font-size:clamp(54px,15vw,76px); line-height:1.02; }
  .hero h1>em { margin-left:28px; font-size:1em; margin-top:4px; }
  .hero-illustration { position:static; transform:none; width:min(96vw,50svh,500px); align-self:flex-end; flex-shrink:0; margin-right:-12px; }
  .hero-links { gap:32px; margin:32px 0 0 32px; }
  .cover-link { min-width:96px; min-height:52px; font-size:16px; }
  .primary-link { font-size:14px; gap:15px; min-height:48px; }
  .primary-link>span { width:39px; height:39px; }
  .primary-link .icon { width:21px; height:21px; }
  .margin-paper { width:82%; align-self:flex-end; max-width:350px; margin:4px 6px 0 0; padding:22px 24px 19px; transform:rotate(2deg); }
  .margin-paper h2 { font-size:23px; }
  .margin-paper>p { font-size:13px; line-height:1.65; }
  .paper-mark { top:22px; right:22px; }
  .paper-signature { font-size:18px; margin-top:8px; }
  .journal-section { display:block; padding:31px 0 42px; }
  .journal-section>.margin-paper { width:82%; margin:36px 8px 8px auto; }
  .section-margin { padding-top:0; display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:28px; }
  .section-margin h2 { font-size:29px; }
  .section-margin>p { display:none; }
  .section-margin .link { font-size:12px; margin:0; gap:7px; }
  .section-margin .link .icon { width:16px; height:16px; }
  .entry-count { min-width:21px; height:21px; font-size:10px; }
  .entry { grid-template-columns:minmax(0,1fr) 24px; gap:15px; padding:25px 0 28px; }
  .entry h3 { font-size:27px; line-height:1.2; }
  .entry-featured h3 { font-size:32px; line-height:1.14; }
  .entry p { font-size:14px; margin-top:13px; line-height:1.75; }
  .entry-meta { font-size:11px; gap:7px 13px; margin-top:17px; }
  .demo-note { font-size:10px; }
  .entry-arrow { width:24px; }
  .entry-arrow .icon,.entry-featured .entry-arrow .icon { width:22px; height:22px; }
  .entry-featured .entry-arrow { margin-top:0; }
  .about-preview { display:block; padding:36px 0; }
  .about-preview h2 { font-size:46px; }
  .about-preview h2 em { font-size:.82em; }
  .about-preview-copy { padding-top:25px; padding-left:24px; }
  .about-preview-copy>p { font-size:16px; line-height:1.8; }
  .about-preview-copy>.link { margin-top:17px; }
  .now-list { display:flex; flex-direction:column; gap:19px; margin-top:32px; padding-top:22px; }
  .now-list>div { display:grid; grid-template-columns:125px minmax(0,1fr); column-gap:18px; align-items:baseline; }
  .now-list>div>span { font-size:11px; }
  .now-list p { font-size:16px; margin-top:0; }
  .site-footer { padding-block:16px; font-size:12px; gap:12px; flex-wrap:wrap; }
  .index-heading { padding:32px 0 28px; }
  .topic-nav { gap:22px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .topic-nav a { flex-shrink:0; font-size:12px; }
  .index-tools { padding-top:7px; gap:4px; padding-bottom:10px; }
  .search-form input { font-size:14px; }
  .index-layout { display:block; padding-top:0; }
  .index-aside { display:none; }
  .index-layout .entry { padding-block:27px; }
  .index-layout .entry h3 { font-size:28px; }
  .index-signoff,.search-status,.search-results { margin-left:0; }
  .index-signoff { font-size:19px; padding:30px 0 45px; max-width:320px; }
  .search-results .entry h3 { font-size:28px; }
  .pagination { justify-content:center; gap:7px; }
  .pagination a,.pagination .current { padding-inline:10px; }
  .about-heading { padding:41px 0 30px; }
  .about-heading h1 { font-size:clamp(43px,8.7vw,62px); line-height:1.06; }
  .about-heading h1 em { padding-left:26px; margin-top:7px; }
  .about-heading>p { margin:24px 0 0 28px; font-size:16px; max-width:280px; }
  .about-layout { display:block; padding-top:25px; }
  .profile-margin { position:static; max-height:none; overflow:visible; padding-bottom:25px; margin-bottom:30px; border-bottom:1px solid var(--rule); }
  .profile-name { font-size:28px; }
  .profile-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; margin-top:24px; }
  .prose { font-size:16px; line-height:1.85; }
  .prose>p:first-child { font-size:18px; }
  .prose h2 { font-size:28px; margin-top:36px; margin-bottom:19px; }
  .prose h3 { font-size:23px; }
  .prose blockquote { padding-left:22px; font-size:19px; margin:29px 0; }
  .prose .highlight pre { padding:34px 14px 20px; }
  .article-heading { padding:23px 0 28px; }
  .article-back { margin-bottom:24px; font-size:12px; }
  .article-heading h1 { font-size:44px; line-height:1.12; }
  .article-deck { font-size:17px; margin-top:22px; }
  .article-heading .entry-meta { margin-top:22px; }
  .article-layout { display:block; padding-top:0; }
  .article-margin { position:static; padding:18px 0; border-bottom:1px solid var(--rule); margin-bottom:25px; }
  .article-margin .contents h2 { font-size:13px; }
  .article-margin .toc { display:flex; gap:6px 18px; flex-wrap:wrap; margin-top:8px; font-size:12px; }
  .article-margin .toc li { margin:0; }
  .article-margin .toc a { min-height:36px; }
  .article-margin .toc-child,.reading-note { display:none; }
  .article-end { margin-top:30px; padding:25px 0; }
  .article-end>p { font-size:27px; }
  .entry-pagination { gap:25px; padding-bottom:45px; }
  .entry-pagination strong { font-size:20px; }
  .generic-page { padding-bottom:45px; }
  .not-found { padding:70px 0 90px; }
  .not-found h1 { font-size:61px; }
  .not-found h1 em { margin-left:23px; }
  .not-found>p { margin-left:25px; font-size:16px; }
  .not-found>.primary-link { margin-left:25px; }
  @keyframes menu-in { from { clip-path:inset(0 0 100%); } to { clip-path:inset(0); } }
}
@media (max-width:390px) {
  .hero h1 { font-size:clamp(48px,15vw,58px); }
  .hero h1>em { margin-left:20px; }
  .hero-links { margin-left:24px; gap:28px; }
  .primary-link { font-size:13px; gap:11px; }
  .primary-link>span { width:35px; height:35px; }
  .margin-paper { width:88%; }
  .entry-meta { gap:7px 11px; }
  .about-preview h2 { font-size:42px; }
  .now-list>div { grid-template-columns:112px minmax(0,1fr); gap:14px; }
  .article-heading h1 { font-size:39px; }
}
@media (max-width:720px) and (max-height:700px) {
  .hero-stage { padding-block:24px; gap:8px; }
  .hero-illustration { width:min(90vw,42svh); }
  .hero-links { margin-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition-duration:100ms !important; }
  .entry:hover .entry-arrow .icon,.link:hover .icon,.cover-link:hover .icon { transform:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}
@media print {
  body { background:white; color:black; }
  .site-header,.site-footer,.article-margin,.article-back,.entry-pagination,.article-end,.reading-progress,.code-copy { display:none; }
  .shell { width:100%; }
  .article-heading { padding:0 0 24px; }
  .article-heading h1 { font-size:36px; }
  .article-layout { display:block; }
  .prose { max-width:none; font-size:11pt; }
  .prose .highlight { break-inside:avoid; }
}