/* SOULHOULETTE — international studio direction
   A shared editorial system for every public-facing page. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&display=swap');

:root{--studio-ink:#000;--studio-paper:#fff;--studio-canvas:#fff;--studio-line:#000;--studio-muted:#000;--studio-accent:#000;--studio-dark:#000;--studio-sans:Manrope,Inter,Arial,sans-serif;--studio-serif:"Instrument Serif",Georgia,serif;--studio-mono:"DM Mono",monospace}
body.studio-direction{background:var(--studio-paper);color:var(--studio-ink);font-family:var(--studio-sans);}
body.studio-direction ::selection{background:var(--studio-accent);color:#fff}
body.studio-direction a:focus-visible,body.studio-direction button:focus-visible{outline:2px solid var(--studio-accent);outline-offset:4px}

/* Home */
body.home-page{--ink:var(--studio-ink);--paper:var(--studio-paper);--muted:var(--studio-muted);--line:var(--studio-line);--dark:var(--studio-dark);--sans:var(--studio-sans);--serif:var(--studio-serif);}
body.home-page .nav{height:72px;background:#000;backdrop-filter:blur(16px);mix-blend-mode:normal;border-bottom:1px solid #fff}
body.home-page .logo{font-family:var(--studio-mono);font-size:10px;font-weight:400;letter-spacing:.08em}
body.home-page .logo img{width:27px;height:27px}
body.home-page .navlinks{gap:26px;font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.home-page .hero{min-height:100svh;background:var(--studio-dark)}
body.home-page .hero-media{display:block;opacity:1}
body.home-page .hero-media img{display:none}
body.home-page .hero-media img:first-child{display:block;width:100%;filter:grayscale(1) contrast(1.1) brightness(.72)}
body.home-page .hero-shade{background:linear-gradient(90deg,#000 0%,transparent 72%),linear-gradient(0deg,#000,transparent 52%)}
body.home-page .hero::after{content:"SOULHOULETTE / BANGKOK / 2026";position:absolute;z-index:2;left:var(--edge);top:98px;color:#fff;font:8px/1 var(--studio-mono);letter-spacing:.13em}
body.home-page .hero-content{padding:145px 0 44px}
body.home-page .hero-kicker{font-family:var(--studio-mono);font-size:8px;letter-spacing:.15em;margin-bottom:30px;color:#fff}
body.home-page .hero h1{max-width:1100px;font-size:clamp(73px,12.8vw,208px);line-height:.76;letter-spacing:-.085em;font-weight:300}
body.home-page .hero h1 em{color:#fff}
body.home-page .hero-bottom{margin-top:82px;font-size:11px;color:#fff}
body.home-page .hero-bottom .scroll{font-family:var(--studio-mono);font-size:8px;padding:12px 0;border-top:1px solid #fff;min-width:210px;display:flex;justify-content:space-between}
body.home-page .hero-bottom .scroll::after{content:"↘";font-size:13px;line-height:.6}
body.home-page .hero-mark{font-family:var(--studio-mono);font-size:8px;letter-spacing:.13em}
body.home-page .section{padding:clamp(94px,11vw,180px) 0}
body.home-page .section-head{grid-template-columns:58px 1fr auto;gap:20px;padding-bottom:14px;margin-bottom:clamp(44px,5vw,78px);border-color:var(--studio-line)}
body.home-page .eyebrow,body.home-page .section-head .count,body.home-page .value-num,body.home-page .step-num{font-family:var(--studio-mono);font-size:8px;letter-spacing:.12em}
body.home-page .section-head h2{font-family:var(--studio-mono);font-size:9px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
body.home-page .intro{grid-template-columns:1.24fr .76fr;gap:10vw}
body.home-page .intro-title{font-size:clamp(52px,7.25vw,118px);line-height:.83;letter-spacing:-.078em}
body.home-page .intro-title span{color:var(--studio-accent)}
body.home-page .intro-copy{font-size:13px;line-height:1.9;color:#000}
body.home-page .intro-copy strong{font-family:var(--studio-mono);font-size:8px;letter-spacing:.12em}
body.home-page .quote{font-family:var(--studio-serif);font-size:28px;line-height:1.06;color:var(--studio-ink)}
body.home-page .works{background:var(--studio-canvas)}
body.home-page .work-grid{grid-template-columns:1.14fr .86fr;gap:clamp(22px,4vw,70px)}
body.home-page .work:nth-child(2){margin-top:clamp(80px,12vw,210px)}
body.home-page .work-img{aspect-ratio:1.21;background:#fff;border:1px solid #000}
body.home-page .work-img::after{content:"VIEW PROJECT ↗";position:absolute;right:15px;bottom:14px;padding:9px 11px;background:#fff;color:#000;border:1px solid #000;font:8px/1 var(--studio-mono);letter-spacing:.09em;opacity:0;transform:translateY(8px);transition:.3s ease}
body.home-page .work:hover .work-img::after{opacity:1;transform:none}
body.home-page .work-img img{filter:grayscale(1) contrast(1.1)}
body.home-page .work-meta{border-color:var(--studio-ink);padding-top:11px;margin-top:15px}
body.home-page .work-meta small{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.home-page .work h3{font-size:clamp(36px,4.8vw,78px);line-height:.84;letter-spacing:-.075em;margin-top:20px}
body.home-page .work p{font-size:11px;color:#000}
body.home-page .manifesto{background:var(--studio-dark);min-height:80vh}
body.home-page .manifesto::before{content:"/";position:absolute;right:4vw;margin-top:-19vw;color:var(--studio-accent);font:clamp(150px,30vw,480px)/.6 var(--studio-serif);opacity:.75}
body.home-page .manifesto .wrap{position:relative;z-index:1}
body.home-page .manifesto-title{font-size:clamp(58px,8.8vw,143px);line-height:.79;letter-spacing:-.08em}
body.home-page .manifesto-title em{color:#fff}
body.home-page .manifesto-copy{font-size:12px;color:#fff}
body.home-page .values-grid{border-color:var(--studio-ink)}
body.home-page .value{border-color:var(--studio-line);min-height:285px;padding-top:19px}
body.home-page .value h3{font-size:27px;font-weight:300;letter-spacing:-.055em;margin-top:78px}
body.home-page .value p{font-size:11px;line-height:1.8;color:#000}
body.home-page .process{background:#fff}
body.home-page .process-grid{border-color:var(--studio-ink)}
body.home-page .step{min-height:330px;border-color:var(--studio-line)}
body.home-page .step h3{font-size:clamp(31px,3.7vw,55px);margin-top:105px}
body.home-page .clients-copy h3{font-size:clamp(48px,5.9vw,90px);letter-spacing:-.072em}
body.home-page .clients-copy h3 span{color:var(--studio-accent)}
body.home-page .client-list{border-color:var(--studio-ink)}
body.home-page .client-list div{font-size:12px;padding-top:19px;padding-bottom:19px}
body.home-page .experience{background:#fff}
body.home-page .experience-grid{border-color:var(--studio-ink)}
body.home-page .experience-step{min-height:230px;border-color:#000}
body.home-page .experience-step h3{font-size:24px;font-weight:300;letter-spacing:-.04em}
body.home-page .person-img{aspect-ratio:.72;background:#fff;border:1px solid #000}
body.home-page .person-img img{filter:grayscale(1) contrast(1.1)}
body.home-page .person h3{font-family:var(--studio-mono);font-size:9px;letter-spacing:.03em;margin-top:14px}
body.home-page .person p,body.home-page .hint{font-family:var(--studio-mono);font-size:8px}
body.home-page .arrow{border-color:var(--studio-line);transition:background .25s,color .25s}
body.home-page .arrow:hover{background:var(--studio-ink);color:#fff}
body.home-page .contact{background:var(--studio-dark)}
body.home-page .contact-title{font-size:clamp(60px,8.8vw,138px);letter-spacing:-.08em}
body.home-page .contact-title em{color:var(--studio-accent)}
body.home-page .contact-copy{font-size:13px;line-height:1.9;color:#fff}
body.home-page .footer{background:var(--studio-dark);font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}

/* Project index */
body.projects-page{--bg:var(--studio-paper);--ink:var(--studio-ink);--muted:var(--studio-muted);--line:var(--studio-line);--sans:var(--studio-sans)}
body.projects-page .nav{height:66px;background:#fff;border-color:var(--studio-line);backdrop-filter:blur(18px)}
body.projects-page .brand{font:500 10px var(--studio-mono);letter-spacing:.1em}
body.projects-page .navlinks,body.projects-page .back{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.projects-page main{max-width:1600px;margin:auto;padding-top:clamp(75px,10vw,155px)}
body.projects-page .topline{border-color:var(--studio-ink);padding-bottom:14px}
body.projects-page .eyebrow{font-family:var(--studio-mono);font-size:8px;letter-spacing:.12em}
body.projects-page .title{font-size:clamp(84px,14vw,220px);line-height:.7;letter-spacing:-.095em}
body.projects-page .title em{font-family:var(--studio-serif);color:var(--studio-accent)}
body.projects-page .intro{margin-bottom:120px}
body.projects-page .intro p{font-size:13px;line-height:1.9;color:#000}
body.projects-page .project{border-color:var(--studio-ink);margin-top:clamp(74px,10vw,145px)}
body.projects-page .project-head{grid-template-columns:56px 1fr auto}
body.projects-page .num,body.projects-page .type,body.projects-page .place{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.projects-page .project-title{font-size:clamp(50px,7.2vw,118px);line-height:.76;letter-spacing:-.085em}
body.projects-page .project-img{height:min(77vh,900px);filter:grayscale(1) contrast(1.1)}
body.projects-page .project-link::after{content:"SOULHOULETTE / PROJECT STUDY";position:absolute;top:14px;left:16px;color:#fff;font:8px var(--studio-mono);letter-spacing:.1em;text-shadow:0 1px 10px #000}
body.projects-page .view{background:var(--studio-accent);font-family:var(--studio-mono);font-size:8px}
body.projects-page .hint{font-family:var(--studio-mono);font-size:8px}
body.projects-page .details{border-color:var(--studio-line);padding-top:18px;padding-bottom:18px}
body.projects-page .details div{font-family:var(--studio-mono);font-size:8px;letter-spacing:.08em}
body.projects-page .details b{font-family:var(--studio-sans);font-size:11px;letter-spacing:0}
body.projects-page .footer{border-color:var(--studio-ink);font-family:var(--studio-mono);font-size:8px}

/* Project stories */
body.project-detail{background:var(--studio-paper);color:var(--studio-ink)}
body.project-detail .page{max-width:1800px;margin:auto;padding:24px clamp(18px,3.5vw,64px) 64px}
body.project-detail .topbar{height:58px;padding-top:0;border-bottom:1px solid var(--studio-line);align-items:center}
body.project-detail .brand,body.project-detail .back,body.project-detail .topbar a{font:500 9px var(--studio-mono)!important;letter-spacing:.1em!important;text-decoration:none;color:var(--studio-ink)!important}
body.project-detail .project{padding-top:clamp(60px,8vw,120px)}
body.project-detail .head{padding:0 0 30px;border-color:var(--studio-ink)}
body.project-detail .index,body.project-detail .caption>div{font-family:var(--studio-mono);font-size:8px;letter-spacing:.12em;color:var(--studio-muted)}
body.project-detail .head h1{font-family:var(--studio-sans);font-size:clamp(60px,9.4vw,155px);line-height:.75;letter-spacing:-.095em}
body.project-detail .head h1 span{color:var(--studio-accent)}
body.project-detail .caption{font-size:9px;line-height:1.6;color:var(--studio-muted)}
body.project-detail .caption p{font-family:var(--studio-sans);font-size:12px;line-height:1.75;color:#000}
body.project-detail .grid,body.project-detail .hero{padding-top:0;margin-top:28px}
body.project-detail .grid{gap:clamp(16px,2vw,30px)}
body.project-detail .side{gap:clamp(16px,2vw,30px)}
body.project-detail .grid img,body.project-detail .hero img,body.project-detail .board img{filter:grayscale(1) contrast(1.1)}
body.project-detail figcaption{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em;border-color:var(--studio-line);padding:12px 0}
body.project-detail figcaption span{color:var(--studio-accent)}
body.project-detail .meta{border-color:var(--studio-ink);padding:17px 0 0;margin-top:30px}
body.project-detail .meta span{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em;color:var(--studio-muted)}
body.project-detail .meta strong{font-family:var(--studio-sans);font-size:10px;letter-spacing:.02em}
body.project-detail .content{gap:clamp(22px,4vw,70px);margin-top:48px}
body.project-detail .intro{padding:8px 0 0}
body.project-detail .intro h2{font-size:clamp(36px,4.4vw,68px);line-height:.82;letter-spacing:-.07em;font-weight:300}
body.project-detail .intro p{font-size:13px;line-height:1.85;color:#000}
body.project-detail .board img{background:#fff}

/* Team */
body.team-page{--black:var(--studio-ink);--white:var(--studio-paper);--gray:var(--studio-canvas);--mid:var(--studio-muted);--line:var(--studio-line);--font:var(--studio-sans)}
body.team-page .site-header{height:66px;background:#fff;border-color:var(--studio-line);backdrop-filter:blur(18px)}
body.team-page .brand{font:500 10px var(--studio-mono);letter-spacing:.1em}
body.team-page .brand img{filter:none!important}
body.team-page .main-nav{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.team-page .section{max-width:1600px;padding-top:clamp(80px,10vw,160px);padding-bottom:clamp(40px,5vw,80px)}
body.team-page .team-page-grid-section{padding-top:0!important;padding-bottom:clamp(90px,10vw,160px)}
body.team-page .section-bar{grid-template-columns:58px 1fr auto;border-color:var(--studio-ink);font-family:var(--studio-mono);font-size:8px;letter-spacing:.12em}
body.team-page .section-bar h2{font-family:var(--studio-sans);font-size:clamp(62px,9vw,140px);line-height:.76;font-weight:300;letter-spacing:-.085em;text-transform:none}
body.team-page .team-page-intro{font-size:14px;line-height:1.9;color:#000}
body.team-page .team-back-link{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.team-page .team-photo{background:#fff;border:1px solid #000}
body.team-page .team-photo img{filter:grayscale(1) contrast(1.1)}
body.team-page .team-card h3{font-family:var(--studio-mono);font-size:9px;font-weight:400;letter-spacing:.03em;margin-top:13px;padding-bottom:11px;border-color:var(--studio-line)}
body.team-page .team-card p,body.team-page .team-slider-hint{font-family:var(--studio-mono);font-size:8px;letter-spacing:.1em}
body.team-page .team-slider-btn{background:transparent!important;border-color:var(--studio-line)!important;transition:.25s ease}
body.team-page .team-slider-btn:hover:not(:disabled){background:var(--studio-ink)!important;color:#fff!important}
body.team-page footer{font-family:var(--studio-mono);font-size:8px;border-color:var(--studio-line)}

/* Reserved slots make room for the next projects without inventing project data. */
body.home-page .work-placeholder{display:block}
body.home-page .project-slot{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.21;padding:18px;background:#fff;color:#000;border:1px solid #000}
body.home-page .project-slot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#fff 0,#fff 14px,#000 14px,#000 15px);pointer-events:none}
body.home-page .project-slot>*{position:relative;z-index:1}
body.home-page .project-slot small,body.home-page .project-slot span{font:8px/1.4 var(--studio-mono);letter-spacing:.11em;text-transform:uppercase}
body.home-page .project-slot strong{font:clamp(40px,5vw,76px)/.78 var(--studio-sans);font-weight:300;letter-spacing:-.08em}
body.home-page .project-slot span{align-self:flex-end;max-width:18ch;text-align:right}
body.home-page .work-placeholder .work-meta{margin-top:15px}

body.projects-page .project-placeholder .project-link{display:block;border:1px solid #000}
body.projects-page .project-placeholder .project-link::after{display:none}
body.projects-page .placeholder-canvas{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:min(77vh,900px);padding:22px;background:#fff;overflow:hidden}
body.projects-page .placeholder-canvas::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#fff 0,#fff 18px,#000 18px,#000 19px)}
body.projects-page .placeholder-canvas>*{position:relative;z-index:1}
body.projects-page .placeholder-kicker{font:8px var(--studio-mono);letter-spacing:.12em}
body.projects-page .placeholder-canvas strong{font:clamp(52px,9vw,140px)/.74 var(--studio-sans);font-weight:300;letter-spacing:-.09em;max-width:8ch}
body.projects-page .placeholder-canvas span{align-self:flex-end;font:8px var(--studio-mono);letter-spacing:.1em;text-align:right}

/* Hard monochrome override: the UI, photography and all interactive states stay black and white. */
body.studio-direction,body.studio-direction .section-light{background:#fff;color:#000}
body.studio-direction .eyebrow,body.studio-direction .count,body.studio-direction .value-num,body.studio-direction .step-num,body.studio-direction .hint,body.studio-direction .person p,body.studio-direction .team-card p,body.studio-direction .project-type,body.studio-direction .work-meta,body.studio-direction .contact-label,body.studio-direction .num,body.studio-direction .type,body.studio-direction .place,body.studio-direction .back,body.studio-direction .index,body.studio-direction .caption>div,body.studio-direction .meta span,body.studio-direction .project-data span,body.studio-direction .details span{color:#000!important}
body.studio-direction .section-head,body.studio-direction .values-grid,body.studio-direction .value,body.studio-direction .process-grid,body.studio-direction .step,body.studio-direction .experience-grid,body.studio-direction .experience-step,body.studio-direction .client-list,body.studio-direction .client-list div,body.studio-direction .project-info,body.studio-direction .team-card h3,body.studio-direction .team-slider-btn,body.studio-direction footer{border-color:#000!important}
body.studio-direction .experience-step{border-color:#000!important}
body.studio-direction .intro-title span,body.studio-direction .clients-copy h3 span,body.studio-direction .contact-title em,body.studio-direction .title em,body.studio-direction .head h1 span,body.studio-direction figcaption span{color:#000!important}
body.home-page .manifesto::before{color:#fff!important}
body.home-page .arrow:hover,body.team-page .team-slider-btn:hover:not(:disabled){background:#000!important;color:#fff!important}
body.team-page .main-nav{background:#fff!important}

/* Project work is the colour layer: the interface stays restrained so the architecture can speak. */
body.home-page .hero-media img:first-child{filter:none;object-position:center 54%;image-rendering:auto}
body.home-page .work-img img,body.projects-page .project-img,body.project-detail .grid img,body.project-detail .hero img,body.project-detail .board img{filter:none!important}
body.home-page .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 54%)}
body.home-page .section-head h2{font-size:10px;letter-spacing:.14em}
body.home-page .section-head .count{font-size:9px;letter-spacing:.12em}
body.home-page .work-meta{padding-top:13px}
body.home-page .work p{max-width:36ch;font-size:12px;line-height:1.75}
body.projects-page .project-img{background:#000}
body.projects-page .project-link::after{background:#000;padding:8px 10px;text-shadow:none}
body.project-detail .grid img,body.project-detail .hero img,body.project-detail .board img{background:#000}
body.project-detail figcaption{font-size:9px;padding:13px 0}

/* Future slots are deliberately quiet, keeping attention on published work. */
body.home-page .project-slot,body.projects-page .placeholder-canvas{background:#fff}
body.home-page .project-slot::before,body.projects-page .placeholder-canvas::before{display:none}
body.home-page .project-slot{min-height:360px}
body.home-page .project-slot strong{max-width:8ch}
body.projects-page .placeholder-canvas{border-left:10px solid #000}
body.projects-page .placeholder-canvas strong{font-size:clamp(48px,7vw,112px)}

@media(max-width:820px){
  body.home-page .nav{height:62px}body.home-page .nav.open .navlinks{top:62px;background:var(--studio-dark)}
  body.home-page .hero::after{top:82px}body.home-page .hero-content{padding-top:130px}
  body.home-page .intro{grid-template-columns:1fr;gap:46px}body.home-page .work-grid{grid-template-columns:1fr}body.home-page .work:nth-child(2){margin-top:54px}
  body.home-page .value h3{margin-top:36px}body.home-page .manifesto::before{right:8vw;margin-top:-65vw}
  body.projects-page .intro{margin-bottom:72px}body.projects-page .project-head{grid-template-columns:45px 1fr;gap:12px}body.projects-page .place{grid-column:2}
  body.projects-page .placeholder-canvas{height:62vh}
  body.project-detail .head{display:block}body.project-detail .caption{margin-top:26px}body.project-detail .content{margin-top:36px}
  body.team-page .main-nav{inset:66px 0 auto 0;background:var(--studio-paper)}
}
@media(max-width:600px){
  body.home-page .hero h1{font-size:clamp(64px,18vw,108px)}body.home-page .hero-bottom .scroll{margin-top:28px;max-width:240px}
  body.home-page .section-head{grid-template-columns:44px 1fr}body.home-page .work h3{font-size:52px}
  body.projects-page .title{font-size:25vw}body.projects-page .project-img{height:62vh}
  body.project-detail .page{padding:16px 16px 42px}body.project-detail .topbar{height:48px}body.project-detail .head h1{font-size:17vw}
}