:root{--bg:#121212;--text:#f2f2f2;--muted:#aaa;--soft:#ccc6bf;--orange:#f78c21;--line:#2a2a2a;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--muted);text-decoration-color:var(--orange);text-underline-offset:.2em}
a:hover{color:var(--orange)}
nav .site-name{color:var(--orange);font-weight:700;text-decoration:none}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:#121212ee;z-index:2}
nav .wrap{height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.orange{color:var(--orange)}nav .links{display:flex;gap:20px;font-size:.82rem;color:var(--muted)}
header{padding:100px 0 115px}.hero{max-width:850px}
h1{font-size:clamp(3.2rem,7vw,5.8rem);line-height:.94;letter-spacing:-.045em;margin:.08em 0 .22em}
h2{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 46px}
h3{margin:0;font-size:1rem}
.eyebrow,.roleline{color:var(--orange);font-weight:700;font-size:.82rem;letter-spacing:.035em}
.lead{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.4;max-width:760px}
.intro{max-width:790px;color:var(--soft)}
.roleline{margin-top:32px}
section{padding:90px 0;border-top:1px solid var(--line)}
p{margin:0 0 1em}.copy{color:var(--soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px 72px}
.two article{max-width:500px}
.examples{display:grid}
.example{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;padding:38px 0;border-top:1px solid var(--line)}
.example:first-child{border-top:0;padding-top:0}
.example-name{color:var(--orange);font-size:1rem;font-weight:700;line-height:1.65;margin-bottom:2px}
.example-desc{color:var(--muted);font-size:.76rem;line-height:1.4;max-width:190px}
.example-body{max-width:790px;color:var(--soft)}
.detail{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px}
.detail aside{font-size:1.22rem;line-height:1.4}
.detail .body{max-width:790px;color:var(--soft)}
.tags{margin-top:26px;color:var(--muted);font-size:.78rem;line-height:1.55;letter-spacing:.015em}
.tags span{display:inline}
.tags span:not(:last-child)::after{content:" · ";color:var(--orange);padding:0 .18em}
.more{display:grid;grid-template-columns:minmax(0,2fr) minmax(190px,1fr);gap:70px}
.more .copy{max-width:720px}
.linkbox{display:grid;align-content:start}
.linkbox h3{margin-bottom:10px}
.linkbox a{padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:.88rem}
footer{border-top:1px solid var(--line);padding:38px 0 55px;color:var(--muted);font-size:.78rem}
@media(max-width:760px){
 .wrap{width:min(calc(100% - 32px),var(--max))}
 nav .wrap{height:auto;min-height:56px;display:block;padding-top:16px}
 nav .site-name{display:block;margin-bottom:12px}
 nav .links{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:0 0 13px;scrollbar-width:none}
 nav .links::-webkit-scrollbar{display:none}
 header{padding:76px 0 85px}
 section{padding:68px 0}
 h2{margin-bottom:34px}
 .two{grid-template-columns:1fr;gap:34px}
 .example,.detail,.more{grid-template-columns:1fr;gap:18px}
 .example-desc{max-width:none}
 .detail{gap:24px}
 .more{gap:34px}
}

/* Legal pages */
body.legal .wrap{width:min(calc(100% - 48px),900px)}
body.legal header{padding:42px 0;border-bottom:1px solid var(--line)}
body.legal main{padding:70px 0 90px}
body.legal h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
body.legal h2{font-size:1.35rem;line-height:1.2;letter-spacing:0;margin:42px 0 12px}
body.legal p{color:var(--soft)}
body.legal .brand{color:var(--orange);font-weight:700;text-decoration:none}
body.legal .back,body.legal .meta{font-size:.85rem;color:var(--muted)}
body.legal footer{padding:32px 0 50px;font-size:.8rem}
@media(max-width:760px){
 .roleline{white-space:normal}
 body.legal .wrap{width:min(calc(100% - 32px),900px)}
 body.legal header{padding:30px 0}
 body.legal main{padding:50px 0 70px}
}

.roleline{white-space:nowrap}

nav .wrap{position:relative}
nav .lang{display:flex;align-items:center;gap:7px;margin-left:18px;font-size:.78rem;white-space:nowrap}
nav .lang a{text-decoration:none;color:var(--muted)}
nav .lang a:hover{color:var(--orange)}
nav .lang strong{color:var(--orange);font-weight:700}
nav .lang span{color:var(--line)}
@media(max-width:760px){
 nav .wrap{position:relative}
 nav .lang{position:absolute;right:0;top:17px;margin:0}
}

@media(max-width:900px){
 .roleline{white-space:normal}
}