:root{--bg:#000;--fg:#EDE6DA;--soft:rgba(237,230,218,.62);--pad:clamp(20px,3vw,40px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:"Hanken Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
header{position:fixed;inset:0 0 auto 0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:var(--pad);font-size:16px}
header .mark{display:block;line-height:1.2}
header .mark b{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
header .mark span{color:var(--soft);font-size:14px}
header .mid{justify-self:center}
header .end{justify-self:end}
header nav a{opacity:.7;transition:opacity .2s}
header nav a:hover,header nav a[aria-current]{opacity:1}
header nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.nav-links{display:contents}
/* home */
.hero{position:fixed;inset:0;background:#000}
.hero video{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0) 28%),linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 22%);pointer-events:none}
.tag{position:fixed;left:0;right:0;bottom:var(--pad);z-index:5;text-align:center;font-size:16px;color:var(--fg);pointer-events:none}
/* inner pages */
main{min-height:100%;padding:clamp(130px,20vh,200px) var(--pad) 80px;max-width:1100px;margin:0 auto}
h1{font-size:clamp(34px,5.5vw,64px);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin-bottom:clamp(48px,8vw,96px)}
.item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 48px;padding:32px 0;border-top:1px solid rgba(237,230,218,.2)}
.item h2{font-size:22px;font-weight:600}
.item p{color:var(--soft);max-width:56ch}
.big{display:inline-block;font-size:clamp(26px,5vw,60px);font-weight:500;letter-spacing:-.02em;border-bottom:1px solid rgba(237,230,218,.4);padding-bottom:4px;word-break:break-all}
.big:hover{border-color:var(--fg)}
.social{display:flex;gap:28px;margin-top:48px;color:var(--soft)}
.social a:hover{color:var(--fg)}
@media(max-width:640px){
 header{grid-template-columns:1fr auto}
 .nav-links{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 header .mid,header .end{justify-self:end}
 .item{grid-template-columns:1fr}
}