/* SataMASHO — site styles */
:root{
  --cream:#F4F0EA; --cream-2:#ECE6DD; --cream-3:#E3DCD1;
  --ink:#161513; --ink-soft:#6E685F; --ink-mute:#9A938A;
  --bronze:#8E7247; --bronze-soft:#C2A97E;
  --hair:rgba(22,21,19,.14); --hair-strong:rgba(22,21,19,.3);
  --serif:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;}
html{color-scheme:light; scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--bronze); margin:0;}

/* nav */
.nav{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px var(--pad);}
.brand{display:flex; align-items:center; gap:14px;}
.brand .mark{display:block; height:40px; width:auto;}
.brand-name{font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:-.01em; display:block; line-height:1.1;}
.brand-name em{font-style:italic; color:var(--bronze);}
.brand-sub{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:400; margin-top:3px;}
.links{display:flex; gap:38px;}
.links a{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; text-transform:uppercase; position:relative; padding:6px 0;}
.links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.65,0,.35,1);}
.links a:hover::after{transform:scaleX(1);}
.menu-btn{background:none; border:0; padding:8px; display:flex; flex-direction:column; gap:5px; cursor:pointer;}
.menu-btn span{display:block; width:22px; height:1.5px; background:var(--ink);}
@media (max-width:900px){.links{display:none;}}

/* hero */
.hero{position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:40px; padding:130px var(--pad) 80px;}
.hero-text{max-width:660px; min-width:0; position:relative; z-index:1;}
.hero .eyebrow{margin-bottom:34px;}
.hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 30px; text-wrap:balance;}
.hero h1 .mask{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em;}
.hero h1 .line{display:block;}
.hero h1 em{font-style:normal; color:var(--bronze);}
.lede{font-size:17px; line-height:1.75; color:var(--ink-soft); max-width:46ch; margin:0 0 36px; font-weight:400;}
.rule{display:flex; align-items:center; gap:14px; margin:0 0 44px; width:100%; max-width:420px;}
.rule span{flex:1; height:1px; background:var(--hair-strong);}
.rule i{width:7px; height:7px; border:1px solid var(--bronze); transform:rotate(45deg); display:block; flex:none;}
.ctas{display:flex; align-items:center; gap:34px; flex-wrap:wrap;}
.btn-solid{background:var(--ink); color:var(--cream); font-family:var(--mono); font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; padding:22px 34px; display:inline-block; transition:background .4s;}
.btn-solid:hover{background:var(--bronze);}
.btn-play{display:inline-flex; align-items:center; gap:16px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase;}
.play-ring{width:48px; height:48px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .35s;}
.play-ring::before{content:""; width:0; height:0; border-left:9px solid var(--ink); border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; margin-left:3px; transition:border-left-color .35s;}
.btn-play:hover .play-ring{transform:scale(1.1); background:var(--ink);}
.btn-play:hover .play-ring::before{border-left-color:var(--cream);}
.hero-visual{position:relative; z-index:0; display:flex; justify-content:center; align-items:center; will-change:transform;}
.ph{position:relative; background:linear-gradient(180deg,var(--cream-2),var(--cream-3)); border:1px solid var(--hair); display:grid; place-items:center; color:var(--ink-mute); text-align:center;}
.ph-label{font-family:var(--mono); font-size:10px; letter-spacing:.14em; font-weight:700; line-height:2.2; text-transform:uppercase;}
.ph-label small{display:block; font-weight:400; letter-spacing:.06em; font-size:9px; text-transform:none; opacity:.75;}
.hero-img{display:block; height:min(74vh,700px); width:auto; max-width:none; margin-left:-14%; mix-blend-mode:multiply; will-change:transform;}
.scroll-cue{position:absolute; left:var(--pad); bottom:34px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-mute); display:flex; align-items:center; gap:14px;}
.scroll-cue span{display:block; width:56px; height:1px; background:var(--ink-mute); transform-origin:left; animation:cue 2.6s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes cue{0%{transform:scaleX(0);opacity:1;} 55%{transform:scaleX(1);opacity:1;} 100%{transform:scaleX(1);opacity:0;}}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr); padding-top:130px; min-height:auto; gap:64px;}
  .hero-img{height:auto; width:min(88vw,460px); margin-left:0;}
  .scroll-cue{display:none;}
}

/* formats strip */
.formats{margin:0 var(--pad); padding:26px 0 8px; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:12px 34px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);}
.formats span{white-space:nowrap;}
.formats b{color:var(--bronze); font-weight:700; margin-right:8px;}

/* manifesto */
.manifesto{padding:clamp(90px,14vw,170px) var(--pad); text-align:center;}
.manifesto .eyebrow{margin-bottom:28px;}
.manifesto h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.45rem,2.9vw,2.5rem); line-height:1.25; letter-spacing:-.02em; max-width:26ch; margin:0 auto 28px; text-wrap:balance;}
.manifesto h2 em{color:var(--bronze);}
.manifesto p{max-width:54ch; margin:0 auto; color:var(--ink-soft); font-size:16px; line-height:1.8; font-weight:400;}

/* disciplines */
.disc{padding:0 var(--pad) clamp(90px,12vw,150px);}
.disc-head{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:26px; border-bottom:1px solid var(--hair-strong);}
.count{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-mute); font-weight:700;}
.row{display:grid; grid-template-columns:90px 1fr minmax(250px,38ch); align-items:start; gap:24px 32px; padding:40px 0; border-bottom:1px solid var(--hair); position:relative;}
.row .num{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--bronze); padding-top:.9em;}
.row .list{margin:0; padding:2px 0 0; list-style:none; font-family:var(--mono); font-size:12px; line-height:1.75; color:var(--ink-soft); letter-spacing:.01em;}
.row .list li{position:relative; padding-left:16px;}
.row .list li::before{content:"—"; position:absolute; left:0; color:var(--bronze);}
.disc-note{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); padding:24px 0 0; line-height:1.8;}
.disc-note b{color:var(--bronze); font-weight:700;}
.row .name{font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.9rem); letter-spacing:-.025em; line-height:1; transition:color .4s, transform .55s cubic-bezier(.65,0,.35,1);}
.row:hover .name{color:var(--bronze); transform:translateX(14px);}
@media (max-width:700px){.row{grid-template-columns:60px 1fr; gap:14px 16px; padding:32px 0;} .row .list{grid-column:2;}}

/* work */
.work{padding:0 var(--pad) clamp(90px,12vw,160px);}
.work-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px;}
.more{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:6px; transition:color .3s, border-color .3s;}
.more:hover{color:var(--bronze); border-color:var(--bronze);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.card{display:block; margin:0;}
.frame{aspect-ratio:3/4; border-radius:8px; overflow:hidden;}
.frame img{display:block; width:100%; height:100%; object-fit:cover;}
.frame.art{background:none; border:0; border-radius:0; overflow:visible; aspect-ratio:1086/1200;}
.frame.art img{object-fit:contain; mix-blend-mode:multiply;}
.card figcaption{margin-top:18px; display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.card .t{font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:-.01em;}
.card .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; font-weight:700; color:var(--ink-mute); text-transform:uppercase;}
@media (max-width:820px){.grid{gap:20px;}}
@media (max-width:640px){.grid{grid-template-columns:1fr; gap:40px;}}

/* cta + footer */
.cta{padding:clamp(100px,14vw,180px) var(--pad); text-align:center; border-top:1px solid var(--hair);}
.cta .eyebrow{margin-bottom:26px;}
.cta h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,3.9vw,3.4rem); letter-spacing:-.025em; line-height:1.12; margin:0 0 44px; text-wrap:balance;}
.cta h2 em{font-style:normal; color:var(--bronze);}
footer{border-top:1px solid var(--hair); padding:40px var(--pad) 56px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700; color:var(--ink-mute); text-transform:uppercase;}
.flinks{display:flex; gap:28px;}
.flinks a:hover{color:var(--bronze);}

/* menu overlay */
.menu{position:fixed; inset:0; background:var(--cream); z-index:30; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); transform:translateY(-102%); transition:transform .75s cubic-bezier(.76,0,.24,1);}
.menu.open{transform:none;}
.menu a{font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,5.6vw,4rem); letter-spacing:-.025em; line-height:1.1; padding:12px 0; border-bottom:1px solid var(--hair); transition:color .3s, padding-left .45s cubic-bezier(.65,0,.35,1);}
.menu a:hover{color:var(--bronze); padding-left:18px;}
.menu-close{position:absolute; top:34px; right:var(--pad); background:none; border:1px solid var(--ink); width:44px; height:44px; border-radius:50%; font-family:var(--mono); font-size:18px; line-height:1; cursor:pointer; color:var(--ink);}

@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none;}}
.js .nav, .js .hero .eyebrow, .js .lede, .js .rule, .js .ctas > *, .js .hero-visual, .js .scroll-cue{opacity:0;}
.js .hero h1 .line{transform:translateY(110%);}