/* 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:block;}
.brand .lockup{display:block; height:50px; width:auto;}
.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);}
.ext{color:var(--bronze);}
.card .tag.ext:hover{color:var(--ink);}
.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;}

/* the cast */
.cast{padding:0 var(--pad) clamp(90px,12vw,160px);}
.cast-head{max-width:640px; margin-bottom:56px;}
.cast h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.9rem); letter-spacing:-.025em; line-height:1.1; margin:14px 0 16px;}
.cast h2 em{font-style:normal; color:var(--bronze);}
.cast-lede{color:var(--ink-soft); max-width:46ch; font-size:16px; line-height:1.7; margin:0;}
.grid.cast-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;}
.card .cast-cap{flex-direction:column; align-items:flex-start; gap:8px;}
.cast-cap .say{font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-soft);}
@media (max-width:820px){.grid.cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.grid.cast-grid{grid-template-columns:1fr; gap:40px;}}

/* 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:48px var(--pad) 48px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700; color:var(--ink-mute); text-transform:uppercase;}
.foot{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 40px; padding-bottom:30px; border-bottom:1px solid var(--hair); margin-bottom:24px;}
.fcol{display:flex; flex-direction:column; align-items:flex-start; gap:9px; line-height:1.6;}
.fcol .ft{color:var(--bronze); margin-bottom:2px;}
.fcol a{color:var(--ink); transition:color .3s;}
.fcol a:hover, .fcol a.ext{color:var(--bronze);}
.fcol .soon{color:var(--ink-mute);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:14px 32px; flex-wrap:wrap;}
.flinks{display:flex; gap:28px; flex-wrap:wrap;}
.flinks a:hover{color:var(--bronze);}
@media (max-width:700px){.foot{grid-template-columns:1fr; gap:26px;}}

/* 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%);}

/* contact */
.cta .mail{font-family:var(--serif); font-weight:700; font-size:clamp(1.25rem,3.2vw,2.3rem); letter-spacing:-.02em; color:var(--bronze); display:inline-block; margin:6px 0 30px; padding-bottom:6px; border-bottom:2px solid currentColor; transition:color .3s;}
.cta .mail:hover{color:var(--ink);}
.contact{list-style:none; margin:0 auto; padding:24px 0 0; border-top:1px solid var(--hair); max-width:520px; display:flex; flex-direction:column; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.contact b{color:var(--bronze); font-weight:700; margin-right:12px;}
.contact a{transition:color .3s;}
.contact a:hover{color:var(--bronze);}
.contact .soon{color:var(--ink-mute);}
.contact .note{font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-mute); margin-top:6px;}

/* work — cases */
.cases{padding:0 var(--pad) clamp(90px,12vw,150px);}
.cases-head{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:26px; border-bottom:1px solid var(--hair-strong);}
.case-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);}
.case-row .num{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--bronze); padding-top:.9em; white-space:nowrap;}
.case-body{display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
.case-title{font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.9rem); letter-spacing:-.025em; line-height:1; transition:color .35s, transform .5s cubic-bezier(.2,.7,.2,1);}
.case-row:hover .case-title{color:var(--bronze); transform:translateX(14px);}
.case-go{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--bronze);}
.case-desc{font-size:14px; line-height:1.65; color:var(--ink-soft); padding-top:.4em;}
@media (max-width:900px){.case-row{grid-template-columns:70px 1fr; gap:14px 20px; padding:32px 0;} .case-desc{grid-column:2; padding-top:0;}}

/* inner pages */
.page .nav{position:sticky; background:linear-gradient(180deg, var(--cream) 70%, rgba(244,240,234,0));}
.back{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; text-transform:uppercase; padding:6px 0; border-bottom:1px solid var(--ink); transition:color .3s, border-color .3s;}
.back:hover{color:var(--bronze); border-color:var(--bronze);}
.case-hero{padding:70px var(--pad) 40px; max-width:980px;}
.case-hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(2rem,5.2vw,4.2rem); letter-spacing:-.03em; line-height:1.05; margin:22px 0 26px; text-wrap:balance;}
.case-hero h1 em{font-style:normal; color:var(--bronze);}
.case-hero .lede{max-width:52ch; margin-bottom:0;}
.facts{list-style:none; margin:40px 0 0; padding:26px 0 0; border-top:1px solid var(--hair-strong); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 40px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.65; color:var(--ink-soft);}
.facts b{display:block; color:var(--bronze); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px;}
.case-part{display:grid; grid-template-columns:90px minmax(0,460px) minmax(0,1fr); gap:24px 40px; align-items:start; padding:clamp(40px,6vw,64px) var(--pad); border-top:1px solid var(--hair);}
.case-part .num{font-family:var(--mono); font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--bronze); padding-top:.5em;}
.case-part h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.9rem); letter-spacing:-.02em; line-height:1.15; margin:0 0 14px;}
.case-part p{color:var(--ink-soft); font-size:16px; line-height:1.75; margin:0 0 14px; max-width:52ch;}
.case-part p:last-child{margin-bottom:0;}
.case-part em{font-style:normal; color:var(--ink);}
.case-part a.inline{border-bottom:1px solid var(--hair-strong); transition:color .3s, border-color .3s;}
.case-part a.inline:hover{color:var(--bronze); border-color:var(--bronze);}
.more-link{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--bronze); border-bottom:1px solid transparent; transition:border-color .3s;}
.more-link:hover{border-color:var(--bronze);}
.exhibit{border:1px solid var(--hair); padding:clamp(20px,3vw,40px); display:grid; place-items:center; gap:18px; background:var(--cream);}
.exhibit img{max-width:100%; height:auto; display:block;}
.exhibit.split{grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; border:0; gap:12px;}
.exhibit .tile{border:1px solid var(--hair); padding:clamp(20px,3vw,40px); display:grid; place-items:center; background:var(--cream);}
.exhibit .tile.dark{background:var(--ink); border-color:var(--ink);}
.exhibit.specimen{place-items:stretch; gap:22px;}
.swatches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.swatch{aspect-ratio:1; display:flex; align-items:flex-end; padding:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--hair);}
.type-mono{font-family:var(--mono); font-weight:700; font-size:clamp(1.2rem,2.4vw,1.7rem); letter-spacing:-.02em; margin:0;}
.type-sans{font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0; max-width:none;}
.exhibit.strip{grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:clamp(12px,2vw,24px);}
.exhibit.strip img{mix-blend-mode:multiply;}
.exhibit.shot{padding:0; border-color:var(--hair-strong); box-shadow:0 30px 60px -30px rgba(22,21,19,.35); overflow:hidden;}
@media (max-width:900px){
  .page .links{display:none;}
  .case-part{grid-template-columns:60px minmax(0,1fr);}
  .case-part .exhibit{grid-column:2;}
  .facts{grid-template-columns:1fr;}
}
@media (max-width:520px){.exhibit.split{grid-template-columns:1fr;} .exhibit.strip{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* contact channels (icons) */
.channels{list-style:none; margin:28px 0 0; padding:0; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.chan{display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border:1px solid var(--hair-strong); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink); transition:border-color .3s, color .3s;}
.chan svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none;}
a.chan:hover{border-color:var(--bronze); color:var(--bronze);}
.chan.soon{color:var(--ink-mute); border-color:var(--hair); cursor:default;}

/* 404 */
.p404 .nav{position:absolute; background:none;}
.nf{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:40px; padding:150px var(--pad) 80px;}
.nf h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.6rem,7vw,5.6rem); letter-spacing:-.03em; line-height:1; margin:18px 0 22px;}
.nf h1 em{font-style:normal; color:var(--bronze);}
.nf .lede{max-width:44ch;}
.nf .ctas{gap:28px;}
.nf-art{position:relative; display:grid; place-items:center;}
.nf-art img{width:min(70vw,440px); height:auto; display:block; animation:drift 6s ease-in-out infinite;}
.nf-code{position:absolute; font-family:var(--mono); font-weight:700; font-size:clamp(5rem,16vw,12rem); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--hair-strong); pointer-events:none; user-select:none; z-index:-1;}
@keyframes drift{50%{transform:translateY(-10px);}}
.foot-mini{border-top:1px solid var(--hair); padding:28px var(--pad) 40px; display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; color:var(--ink-mute);}
@media (max-width:820px){.nf{grid-template-columns:1fr; min-height:auto; padding-top:130px; gap:56px;} .nf-art{order:-1;} .nf-art img{width:min(56vw,300px);}}
@media (prefers-reduced-motion:reduce){.nf-art img{animation:none;}}