@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');

:root{
--paper:#fafaf8;
--dim:#4a4a4a;
--ink:#1a1a1a;
--line:rgba(26,26,26,.18);
--hair:rgba(26,26,26,.1);
--glass:rgba(255,255,255,.58);
--r:18px;
--disp:'Russo One','Chakra Petch',system-ui,sans-serif;
--body:'Chakra Petch',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:17px;
line-height:1.72;
letter-spacing:.005em;
overflow-x:hidden;
padding-bottom:108px;
}

body::before{
content:"";
position:fixed;
inset:-10% -10% -10% -10%;
pointer-events:none;
z-index:0;
background:
radial-gradient(circle at 12% 18%,rgba(74,74,74,.05),transparent 46%),
radial-gradient(circle at 84% 72%,rgba(26,26,26,.045),transparent 42%);
}

body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:60;
opacity:.5;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

.mark{
position:fixed;
top:14px;
left:14px;
z-index:70;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
padding:7px 11px;
font-family:var(--disp);
font-size:12px;
line-height:1;
letter-spacing:.05em;
color:var(--ink);
text-decoration:none;
background:var(--glass);
border:1.5px solid var(--ink);
border-radius:14px 21px 12px 18px;
transform:rotate(-5deg);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-shadow:2px 3px 0 var(--hair);
}
.mark img{display:block;width:26px;height:26px;border-radius:5px}
.mark:hover{transform:rotate(-2deg) translateY(-1px)}

.crawl{
position:relative;
z-index:1;
min-height:100svh;
display:flex;
flex-direction:column;
justify-content:center;
gap:1.1rem;
padding:6.4rem clamp(1.1rem,6vw,4.5rem) 6.5rem;
border-bottom:2px solid var(--ink);
overflow:hidden;
}

.crawl::before{
content:"01";
position:absolute;
right:-.04em;
bottom:-.24em;
font-family:var(--disp);
font-size:min(44vw,320px);
line-height:.78;
color:transparent;
-webkit-text-stroke:1.5px rgba(26,26,26,.14);
pointer-events:none;
user-select:none;
}

.stamp{
margin:0;
width:fit-content;
padding:.28em .85em;
font-size:.74rem;
letter-spacing:.32em;
color:var(--dim);
border:1.5px solid var(--ink);
border-radius:11px 16px 10px 14px;
transform:rotate(-2deg);
}

.crawl h1{
position:relative;
z-index:1;
margin:0;
max-width:16ch;
font-family:var(--disp);
font-size:clamp(2.5rem,9.6vw,6.6rem);
line-height:1.02;
letter-spacing:-.02em;
word-break:break-word;
}

.lede{
position:relative;
z-index:1;
margin:0;
max-width:36ch;
padding-left:.9rem;
border-left:3px solid var(--ink);
color:var(--dim);
font-size:clamp(1rem,2vw,1.1rem);
}

.stage{position:relative;z-index:1}

.wrap{
max-width:1180px;
margin:0 auto;
padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2.4rem);
display:grid;
grid-template-columns:232px minmax(0,1fr);
gap:clamp(1rem,3vw,2.4rem);
align-items:start;
}

.rail{
position:sticky;
top:1.4rem;
padding:1rem .95rem 1.1rem;
background:var(--glass);
border:1.5px solid var(--line);
border-radius:var(--r);
transform:rotate(-.7deg);
box-shadow:3px 4px 0 var(--hair);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

.rail small{
display:block;
font-size:.68rem;
letter-spacing:.28em;
color:var(--dim);
}

.rail h2{
margin:.2rem 0 .85rem;
font-family:var(--disp);
font-size:1.12rem;
line-height:1.2;
letter-spacing:.02em;
}

.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}

.rail a{
display:block;
min-height:44px;
padding:.6rem .3rem;
color:var(--dim);
text-decoration:none;
font-size:.95rem;
line-height:1.4;
border-bottom:1px dashed var(--line);
}
.rail a:hover,.rail a[aria-current]{color:var(--ink);background:rgba(26,26,26,.05)}

.sheet{min-width:0}

.prose{
padding:clamp(1.1rem,3vw,2.3rem);
background:var(--glass);
border:1.5px solid var(--line);
border-radius:var(--r);
box-shadow:5px 6px 0 rgba(26,26,26,.06);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

.prose > section{
padding:1.7rem 0;
border-bottom:1px dashed var(--line);
scroll-margin-top:2rem;
scroll-margin-bottom:7.5rem;
}
.prose > section:first-child{padding-top:.2rem}
.prose > section:last-child{border-bottom:0;padding-bottom:.2rem}

.prose small{
display:block;
margin-bottom:.3rem;
font-size:.7rem;
letter-spacing:.3em;
color:var(--dim);
}

.prose h2{
margin:0 0 .95rem;
font-family:var(--disp);
font-size:clamp(1.4rem,4.2vw,2rem);
line-height:1.22;
letter-spacing:-.01em;
}

.prose h3{
margin:1.4rem 0 .6rem;
font-family:var(--disp);
font-size:clamp(1.1rem,3vw,1.35rem);
line-height:1.3;
}

.prose p{margin:0 0 1rem;max-width:66ch}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.35rem;max-width:66ch}
.prose li{margin:.3rem 0}
.prose strong{font-weight:700}
.prose blockquote{
margin:1.1rem 0;
padding:.7rem 1rem;
border-left:3px solid var(--ink);
background:rgba(26,26,26,.035);
color:var(--dim);
}
.prose blockquote p:last-child{margin:0}
.prose a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line)}
.prose a:hover{border-bottom-color:var(--ink)}
.prose img{max-width:100%;height:auto;border:1.5px solid var(--line);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}

.plinth{
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:1rem 1.6rem;
margin-top:2.4rem;
padding:2.6rem clamp(1rem,4vw,2.4rem) 2.4rem;
border-top:2px solid var(--ink);
}

.plinth-brand{
font-family:var(--disp);
font-size:clamp(1.7rem,5.4vw,3.3rem);
line-height:1;
letter-spacing:-.02em;
transform:rotate(-1.2deg);
}
.plinth-brand a{color:var(--ink);text-decoration:none}

.plinth-nav{flex:1 1 250px}

.plinth-nav ol{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:.15rem .5rem;
margin:0;
padding:0;
}

.plinth-nav a{
display:inline-flex;
align-items:center;
min-height:42px;
padding:.3rem .5rem;
color:var(--dim);
text-decoration:none;
font-size:.9rem;
}
.plinth-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:4px}

.plinth-copy p{margin:0;font-size:.84rem;letter-spacing:.1em;color:var(--dim)}

.dock{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:70;
padding:.4rem .45rem calc(.4rem + env(safe-area-inset-bottom));
background:rgba(250,250,248,.88);
border-top:2px solid var(--ink);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.dock ol{
display:flex;
align-items:stretch;
gap:.2rem;
margin:0;
padding:0;
list-style:none;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.dock ol::-webkit-scrollbar{display:none}

.dock li{flex:0 0 auto}

.dock a{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:.45rem .72rem;
color:var(--dim);
text-decoration:none;
font-size:.92rem;
line-height:1.2;
white-space:nowrap;
border:1.5px solid transparent;
border-radius:12px 17px 11px 16px;
}
.dock a:hover{color:var(--ink);border-color:var(--line);background:rgba(26,26,26,.05)}
.dock a[aria-current]{
color:var(--ink);
border-color:var(--ink);
background:rgba(26,26,26,.07);
transform:rotate(-.9deg);
}

.js .prose > section{
opacity:0;
transform:translateY(16px) rotate(.25deg);
transition:opacity .3s steps(4,end),transform .3s steps(4,end);
}
.js .prose > section.in{opacity:1;transform:none}

@media (min-width:900px){
.dock ol{justify-content:center;max-width:1120px;margin:0 auto}
}

@media (max-width:860px){
body{font-size:16px;padding-bottom:100px}
.wrap{grid-template-columns:minmax(0,1fr);gap:1rem}
.rail{position:static;transform:rotate(-.5deg)}
.rail ol{flex-direction:row;flex-wrap:wrap;gap:.35rem}
.rail a{
min-height:44px;
display:inline-flex;
align-items:center;
padding:.4rem .7rem;
font-size:.9rem;
border:1.5px solid var(--line);
border-radius:11px 15px 10px 14px;
}
.crawl{padding-top:5.4rem;padding-bottom:5rem}
.crawl h1{max-width:100%}
.prose{padding:1.1rem}
.plinth-brand{font-size:clamp(1.6rem,8vw,2.4rem)}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .prose > section{opacity:1;transform:none;transition:none}
.mark,.stamp,.rail,.plinth-brand,.dock a[aria-current]{transform:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}