@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap');

:root{
--ink:#000000;
--paper:#ffffff;
--u:8px;
--sans:'Inter','Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
--serif:'Playfair Display',Georgia,'Songti SC',serif;
--pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
margin:0;
background:var(--paper);
color:var(--ink);
font:400 17px/1.65 var(--sans);
letter-spacing:.01em;
}

a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1em}
menu{margin:0;padding:0;list-style:none}
ul,ol{margin:0 0 1.2em}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

div[id]{scroll-margin-top:calc(var(--u) * 12)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink)}

.brandrow{
display:flex;
align-items:center;
padding:calc(var(--u) * 2) var(--pad) calc(var(--u) * 1.5);
}

.brand{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
font-weight:800;
font-size:clamp(1.3rem,3.4vw,1.85rem);
line-height:1;
letter-spacing:-.045em;
text-decoration:none;
}

.mark{display:block;width:28px;height:28px;object-fit:contain}

.menurow{padding:0 var(--pad) calc(var(--u) * 1.5)}

.nav{display:block}

.nav > summary{
list-style:none;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:12px;
min-height:44px;
padding:6px 0;
font-weight:600;
font-size:.92rem;
letter-spacing:.18em;
}

.nav > summary::-webkit-details-marker{display:none}

.nav > summary::after{
content:"";
width:18px;
height:2px;
background:currentColor;
box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
transition:box-shadow .2s ease,transform .2s ease;
}

.nav > menu{
display:flex;
flex-wrap:wrap;
gap:0 clamp(16px,2.6vw,34px);
margin-top:var(--u);
padding-top:var(--u);
border-top:1px solid var(--ink);
}

.nav > menu > li > a{
position:relative;
display:inline-flex;
align-items:center;
min-height:44px;
padding:10px 0;
font-weight:500;
font-size:.98rem;
text-decoration:none;
}

.nav > menu > li > a::after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:10px;
height:2px;
background:currentColor;
transition:right .25s ease;
}

.nav > menu > li > a:hover::after,
.nav > menu > li > a:focus-visible::after{right:0}

/* ---------- stage ---------- */
.stage{
display:grid;
grid-template-columns:minmax(0,1fr) clamp(190px,22vw,300px);
max-width:1280px;
margin:0 auto;
}

/* ---------- hero ---------- */
.hero{
grid-column:1 / -1;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:clamp(16px,4vw,48px);
min-height:45vh;
padding:clamp(28px,5vw,56px) var(--pad) clamp(34px,6vw,76px);
background:var(--ink);
color:var(--paper);
overflow:hidden;
}

.hero-txt{min-width:0}

.hero h1{
margin:0 0 18px;
font-weight:800;
font-size:clamp(2.2rem,7vw,4.9rem);
line-height:.98;
letter-spacing:-.045em;
max-width:20ch;
}

.hero h1 > span{display:block}

.lede{
max-width:46ch;
margin:0;
font-size:clamp(1rem,1.5vw,1.08rem);
line-height:1.6;
color:rgba(255,255,255,.78);
}

.hero-art{
position:relative;
margin:0;
width:clamp(104px,19vw,200px);
color:var(--paper);
will-change:transform;
}

.hero-art svg{display:block;width:100%;height:auto}

.chip{
position:absolute;
left:50%;
bottom:-14px;
transform:translateX(-50%);
padding:6px 9px;
background:var(--paper);
color:var(--ink);
font-size:.7rem;
font-weight:700;
letter-spacing:.08em;
white-space:nowrap;
}

.hero :focus-visible{outline-color:var(--paper)}

/* ---------- sheet ---------- */
.sheet{
grid-column:1;
grid-row:2;
min-width:0;
padding:0 var(--pad);
}

.sheet > div{
padding-block:clamp(28px,5vw,56px);
border-top:2px solid var(--ink);
}

.sheet > div:first-child{border-top:0;padding-top:calc(var(--u) * 4)}

.sheet h2{
max-width:24ch;
margin:0 0 18px;
font-weight:800;
font-size:clamp(1.5rem,3.6vw,2.25rem);
line-height:1.12;
letter-spacing:-.035em;
}

.sheet h2 > span{border-bottom:6px solid var(--ink);padding-bottom:2px}

.sheet h3{
margin:32px 0 10px;
font-weight:700;
font-size:clamp(1.12rem,2.2vw,1.35rem);
letter-spacing:-.02em;
}

.sheet h3 > span{border-bottom:3px solid var(--ink);padding-bottom:1px}

.sheet p,
.sheet li{max-width:64ch;line-height:1.78;font-size:1.02rem}

.sheet ul{list-style:none;padding-left:0}

.sheet ul > li{
position:relative;
margin-bottom:.55em;
padding-left:24px;
}

.sheet ul > li::before{
content:"";
position:absolute;
left:0;
top:.85em;
width:12px;
height:2px;
background:var(--ink);
}

.sheet ol{padding-left:1.3em}
.sheet ol > li{margin-bottom:.5em}

.sheet a{
text-decoration-thickness:2px;
text-underline-offset:3px;
}

.sheet strong{font-weight:700}

.sheet blockquote{
margin:26px 0;
padding:6px 0 6px 22px;
border-left:6px solid var(--ink);
font-family:var(--serif);
font-style:italic;
font-size:1.15rem;
line-height:1.6;
max-width:56ch;
}

.sheet figure{margin:26px 0}
.sheet img{display:block;max-width:100%;height:auto}

.sheet hr{
border:0;
border-top:2px solid var(--ink);
margin:36px 0;
}

.sheet table{
width:100%;
border-collapse:collapse;
font-size:.95rem;
margin:0 0 1.2em;
}

.sheet th,
.sheet td{
padding:10px 8px;
border-bottom:1px solid var(--ink);
text-align:left;
vertical-align:top;
}

.sheet code{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.9em;
background:#f2f2f2;
padding:1px 4px;
}

/* ---------- rail ---------- */
.rail{
grid-column:2;
grid-row:2;
align-self:start;
position:sticky;
top:16px;
padding:clamp(28px,4vw,44px) clamp(16px,3vw,32px);
border-left:2px solid var(--ink);
font-size:.92rem;
}

.rail h2{
margin:0 0 12px;
font-size:.76rem;
font-weight:700;
letter-spacing:.2em;
}

.rail h2 > span{
display:inline-block;
padding-bottom:3px;
border-bottom:2px solid var(--ink);
}

.rail ul{
list-style:none;
margin:0 0 26px;
padding:0;
counter-reset:toc;
}

.rail ul > li{border-top:1px solid rgba(0,0,0,.2)}
.rail ul > li:last-child{border-bottom:1px solid rgba(0,0,0,.2)}

.rail ul > li > a{
display:flex;
align-items:center;
min-height:44px;
padding:6px 0;
font-weight:500;
line-height:1.35;
text-decoration:none;
transition:padding-left .2s ease;
}

.rail ul > li > a::before{
counter-increment:toc;
content:counter(toc,decimal-leading-zero);
margin-right:10px;
font-size:.7rem;
letter-spacing:.08em;
font-variant-numeric:tabular-nums;
color:rgba(0,0,0,.55);
}

.rail ul > li > a:hover,
.rail ul > li > a:focus-visible{padding-left:6px}

.totop-wrap{margin:0}

.to-top{
display:inline-flex;
align-items:center;
min-height:44px;
padding:4px 0;
font-weight:600;
text-decoration:none;
border-bottom:2px solid var(--ink);
}

/* ---------- footer ---------- */
.foot{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:8px 24px;
padding:24px var(--pad) 40px;
border-top:2px solid var(--ink);
font-size:.9rem;
}

.foot p{
margin:0;
font-weight:600;
letter-spacing:.02em;
}

.foot small{font-size:.85rem}

.foot small a{
display:inline-flex;
align-items:center;
min-height:44px;
font-weight:600;
text-decoration:none;
border-bottom:2px solid var(--ink);
}

/* ---------- narrow ---------- */
@media (max-width:880px){
.stage{grid-template-columns:1fr}

.sheet,
.rail{grid-column:1;grid-row:auto}

.rail{
position:static;
padding:32px var(--pad);
border-left:0;
border-top:2px solid var(--ink);
}

.rail ul{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 20px;
}

.rail ul > li:last-child{border-bottom:0}

.nav > menu{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 18px;
}
}

@media (max-width:560px){
.hero{
grid-template-columns:1fr;
gap:22px;
min-height:0;
padding-top:30px;
}

.hero-art{
width:78px;
justify-self:end;
margin:0 4px 0 0;
}

.hero h1{font-size:clamp(2.05rem,9vw,2.6rem)}
.lede{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
.hero-art{will-change:auto}
}

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