/* Layout: fixed two-corner header over a blurred ambient field; index of works on the left, framed media sliding on the right; serif uppercase titles, tiny grotesk labels. Dark-first by design. */
:root{
  --ink:#151514; --ink-2:#1e1d1b; --paper:#f3f1ec; --mute:rgba(243,241,236,.42);
  --line:rgba(243,241,236,.14); --accent:#e6d9c3;
  --sans:"futura-pt","Jost","IBM Plex Sans Thai",ui-sans-serif,system-ui,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --thai:"IBM Plex Sans Thai",var(--sans);
  --s-xs:12px; --s-sm:13.5px; --s-md:17.5px; --s-xl:clamp(40px,7.2vw,104px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--paper)}
body{font-family:var(--sans);font-size:var(--s-sm);line-height:1.35;letter-spacing:-.01em;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--paper);outline-offset:3px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}

/* ambient blurred field */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;filter:blur(38px) saturate(1.1);transform:scale(1.15);opacity:.85;transition:opacity .8s}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(21,21,20,.55),rgba(21,21,20,.15) 40%,rgba(21,21,20,.7))}

header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));mix-blend-mode:difference}
.brand{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand .n{font-size:var(--s-sm)}
.brand .r{font-family:var(--serif);font-size:var(--s-md)}
nav{display:flex;gap:clamp(18px,3.4vw,40px);padding-top:4px}
nav a{position:relative;font-size:var(--s-sm)}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:hover::after,nav a[aria-current="page"]::after{transform:scaleX(1)}

main{position:relative;z-index:5}
.view{min-height:100vh;padding-block:120px 64px}
.view[hidden]{display:none!important}
.label{color:var(--mute);font-size:var(--s-xs);text-transform:uppercase;letter-spacing:.06em}
.serif{font-family:var(--serif)}
.big{font-family:var(--serif);font-size:var(--s-xl);line-height:.84;text-transform:uppercase;letter-spacing:-.015em;font-weight:400;text-wrap:balance;margin:0}

/* HOME / INDEX */
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;align-items:start}
.intro{position:sticky;top:120px;display:flex;flex-direction:column;gap:28px;max-width:30ch}
.intro p{margin:0;font-size:var(--s-md);line-height:1.25}
.intro .th{font-family:var(--thai);font-size:15px;color:var(--mute);line-height:1.6}
.status{display:flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%;background:#9fd49a;box-shadow:0 0 10px #9fd49a}
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.works li{border-bottom:1px solid var(--line)}
.works button{width:100%;display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:18px 0;text-align:left;transition:padding .35s,opacity .35s}
.works:hover button{opacity:.38}
.works button:hover,.works button:focus-visible{opacity:1;padding-left:10px}
.works .yr{color:var(--mute);font-variant-numeric:tabular-nums}
.works .t{font-family:var(--serif);font-size:clamp(26px,3.4vw,46px);line-height:.95;text-transform:uppercase;min-width:0}
.works .k{color:var(--mute);text-align:right;white-space:nowrap}
.ph{font-family:var(--sans);font-size:10px;letter-spacing:.08em;border:1px solid var(--line);padding:2px 5px;border-radius:2px;vertical-align:middle;color:var(--mute);text-transform:uppercase;margin-left:8px}

/* GOLDEN MOSAIC — boxes cut from a φ rectangle, each square the next in the golden spiral */
.mosaic-wrap{display:flex;flex-direction:column;gap:14px;margin-bottom:72px}
.mosaic-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mosaic{position:relative;width:100%;max-width:100%;aspect-ratio:1.618/1}
.tile{position:absolute;padding:0;overflow:visible;border-radius:3px;cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s,box-shadow .55s;
  filter:brightness(.78) saturate(.9);box-shadow:0 0 0 1px var(--line);z-index:1}
.tile .media{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--ink-2)}
.tile canvas,.tile img,.tile video{width:100%;height:100%;display:block;object-fit:cover}
.tile .cap{position:absolute;left:10px;right:10px;bottom:9px;display:flex;justify-content:space-between;gap:8px;font-size:var(--s-xs);
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:.75;transition:opacity .4s;text-align:left;pointer-events:none}
.tile .cap b{font-family:var(--sans);font-weight:500;font-size:clamp(11px,1.05vw,14px);text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.tile .cap span{white-space:nowrap}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .55s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 0 22px var(--glow,rgba(255,255,255,.45))}
.tile.sm .cap{opacity:0}.tile.sm .cap span{display:none}
.tile:hover,.tile:focus-visible{transform:scale(var(--grow,1.06));filter:brightness(1.22) saturate(1.1);z-index:5;outline:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 18px 2px var(--glow,rgba(255,255,255,.5)),0 0 60px 6px var(--glow-soft,rgba(255,255,255,.18)),0 24px 50px rgba(0,0,0,.55)}
.tile:hover::after,.tile:focus-visible::after{opacity:1}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
.mosaic:hover .tile:not(:hover){filter:brightness(.55) saturate(.8)}
.mosaic{max-width:min(100%,calc(82vh * 1.618))}
@media (max-width:820px){.mosaic{aspect-ratio:1/1.618;max-width:100%}}

/* ===== Homepage sections, studied from a Bangkok brand designer's site ===== */
.reveal{transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.6s ease-out}
.reveal.pre{transform:translateY(48px);filter:blur(8px)}

/* hero */
.hero{position:relative;display:grid;justify-items:center;text-align:center;padding-top:10px;margin-bottom:96px}
.hero-name{margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(84px,22vw,330px);line-height:.8;letter-spacing:-.015em;position:relative;z-index:2;justify-self:start;text-align:left;margin-left:-.04em}
.orbit-box{position:relative;width:min(100%,780px);aspect-ratio:1.45/1;margin-top:-.32em;font-size:clamp(84px,22vw,330px);
  background:radial-gradient(ellipse at 50% 40%,rgba(243,241,236,.10),rgba(243,241,236,.03) 70%);border:1px solid var(--line);perspective:1100px;overflow:hidden;z-index:1}
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:spin 34s linear infinite}
.orbit .o{position:absolute;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);backface-visibility:visible;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.orbit .o canvas{width:100%;height:100%;display:block}
@keyframes spin{from{transform:rotateX(-12deg) rotateY(0)}to{transform:rotateX(-12deg) rotateY(360deg)}}
.hero-role{margin:-.42em 0 0;font-family:var(--serif);text-transform:uppercase;font-size:clamp(54px,12vw,180px);line-height:.82;letter-spacing:-.02em;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end;justify-self:end;text-align:right;mix-blend-mode:difference}
.hero-meta{margin:22px 0 0;line-height:1.6}

/* statement + parallax collage */
.statement{position:relative;margin:120px 0;padding-block:60px;overflow:hidden}
.collage{position:absolute;inset:0;pointer-events:none;z-index:0}
.collage .c{position:absolute;opacity:.55;filter:blur(1.5px) grayscale(.2);will-change:transform}
.collage .c canvas{width:100%;height:100%;display:block}
.st-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 32px;align-items:end}
.st-head{grid-column:1/-1;margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(40px,6.4vw,96px);line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.st-band{grid-column:1/-1;aspect-ratio:21/8;max-width:100%;overflow:hidden}
.st-band canvas{width:100%;height:100%;display:block}
.st-body{grid-column:2;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.st-body p{margin:0;font-size:var(--s-md);line-height:1.35;max-width:40ch}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:9px 22px;border:1px solid var(--paper);border-radius:999px;text-transform:uppercase;font-size:var(--s-xs);letter-spacing:.04em;
  transition:background .4s,color .4s}
.pill:hover,.pill:focus-visible{background:var(--paper);color:var(--ink)}

/* expertise */
.expertise{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding-block:100px;margin-bottom:110px;background:rgba(243,241,236,.04);border-block:1px solid var(--line)}
.expertise ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.expertise li{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(34px,6vw,84px);line-height:.98;letter-spacing:-.035em;transition:color .4s,opacity .4s,transform .6s}
.expertise ul:hover li{opacity:.25}
.expertise ul li:hover{opacity:1;color:var(--accent)}

/* work stacks: offset panels, each a fanned deck that flips through */
.stacks{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:0;margin-bottom:60px}
.stack{position:relative;aspect-ratio:1/1;max-width:100%;cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.stack:hover{transform:scale(1.02)}
.stack:nth-child(1){grid-column:2/7;z-index:2}
.stack:nth-child(2){grid-column:6/11;margin-top:-18%;z-index:3}
.stack:nth-child(3){grid-column:1/5;margin-top:-10%;z-index:4}
.stack:nth-child(4){grid-column:8/13;margin-top:-22%;z-index:1}
.deck{position:relative;width:52%;aspect-ratio:3/4}
.card{position:absolute;inset:0;transition:transform .9s cubic-bezier(.16,1,.3,1),filter .9s;box-shadow:0 10px 30px rgba(0,0,0,.4);background:var(--ink-2)}
.card canvas{width:100%;height:100%;display:block}
.stack .meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;gap:10px;font-size:var(--s-xs);color:#fff;mix-blend-mode:difference;z-index:9}
.stack .meta b{font-family:var(--sans);font-weight:500;font-size:clamp(12px,1.15vw,15px);text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.see-all{display:flex;justify-content:center;margin-bottom:80px}
#indexWrap{margin-bottom:100px}

/* cta */
.cta{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding-block:120px 40px}
.cta-head{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(40px,7vw,104px);line-height:.98;letter-spacing:-.04em}
.cta .copy{font-size:var(--s-md)}
.up{font-size:26px;margin-top:40px;transition:transform .4s}
.up:hover{transform:translateY(-6px)}

@media (max-width:820px){
  .st-inner{grid-template-columns:minmax(0,1fr)}.st-body{grid-column:1}
  .stack:nth-child(n){grid-column:1/-1;margin-top:0;width:86%;justify-self:center}
  .stack:nth-child(even){justify-self:end;margin-top:-12%}
  .stack:nth-child(odd){justify-self:start}
}
@media (prefers-reduced-motion:reduce){.orbit{animation:none;transform:rotateX(-12deg)}.reveal.pre{transform:none;filter:none}}

/* WORK DETAIL — modeled on the reference's sticky text + scrolling frames */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.d-left{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:30px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:none}
.d-left h3{font-family:var(--serif);font-weight:400;font-size:var(--s-md);margin:0 0 10px}
.d-left p{margin:0;max-width:44ch;line-height:1.45}
.d-left .th{font-family:var(--thai);color:var(--mute);margin-top:10px;line-height:1.7}
dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:0}
dl div{display:flex;flex-direction:column;gap:3px;min-width:0}
dt{color:var(--mute);font-size:var(--s-xs);text-transform:uppercase;letter-spacing:.06em}
dd{margin:0}
.d-right{display:flex;flex-direction:column;gap:20px;min-width:0}
.frame{position:relative;width:100%;max-width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2);transform-origin:50% 100%;will-change:transform}
.frame.tall{aspect-ratio:4/5;width:62%;align-self:flex-end}
.frame canvas{width:100%;height:100%;display:block}
.frame figcaption{position:absolute;left:12px;bottom:10px;font-size:var(--s-xs);color:rgba(255,255,255,.75);mix-blend-mode:difference}
.back{display:inline-flex;gap:8px;align-items:center;color:var(--mute)}
.back:hover{color:var(--paper)}
.next{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;gap:20px}
.next button{text-align:right}
.next .big{font-size:clamp(32px,4.6vw,64px)}

/* ABOUT */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.about .lead{font-family:var(--serif);font-size:clamp(28px,3.6vw,52px);line-height:1;margin:0;text-wrap:balance}
.about .lead em{color:var(--accent)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.cols p,.cols ul{margin:0;padding:0;list-style:none;line-height:1.55}
.cols .th{font-family:var(--thai);color:var(--mute)}

/* CONTACT */
.contact{display:flex;flex-direction:column;justify-content:center;gap:40px;min-height:calc(100vh - 184px)}
.contact .big{font-size:clamp(52px,11vw,170px)}
.c-row{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:baseline}
.copy{display:inline-flex;gap:10px;align-items:baseline;font-size:var(--s-md)}
.copy small{color:var(--mute);font-size:var(--s-xs)}
.c-links{display:flex;gap:22px}
.c-links a:hover{text-decoration:underline;text-underline-offset:3px}

footer{position:relative;z-index:5;display:flex;justify-content:space-between;gap:16px;padding-block:20px;border-top:1px solid var(--line);color:var(--mute);font-size:var(--s-xs)}

@media (max-width:820px){
  .home,.detail,.about{grid-template-columns:minmax(0,1fr)}
  .intro,.d-left{position:static;max-height:none}
  .frame.tall{width:100%}
  .cols{grid-template-columns:minmax(0,1fr)}
  .works .k{display:none}
  .works button{grid-template-columns:2.4em minmax(0,1fr)}
  .view{padding-block:110px 48px}
}
@media (max-width:440px){ nav{gap:14px} .brand .r{font-size:15px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.frame{transform:none!important}}

/* base reset (the hosted site has no wrapper) */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,video{max-width:100%}
[hidden]{display:none!important}
.fill{width:100%;height:100%;display:block;object-fit:cover}
.frame img,.frame video{width:100%;height:100%;display:block;object-fit:cover}
.frame.natural{aspect-ratio:auto}
.frame.natural img,.frame.natural video{height:auto}
.loading{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:var(--ink);color:var(--mute);font-size:var(--s-xs);letter-spacing:.06em;text-transform:uppercase;transition:opacity .6s}
.loading.done{opacity:0;pointer-events:none}

/* category filter */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 48px}
.chip{display:inline-flex;align-items:baseline;gap:4px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:var(--s-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);transition:color .3s,border-color .3s,background .3s}
.chip sup{font-size:9px;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--paper);border-color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.stacks .empty{grid-column:1/-1;text-align:center;padding-block:80px;margin:0}

/* project page: title, then all images, then description and info */
.work{display:flex;flex-direction:column;gap:48px}
.w-head{display:flex;flex-direction:column;gap:18px}
.w-head .big{max-width:16ch}
.w-sub{margin:0}
.w-gallery{display:flex;flex-direction:column;gap:20px}
.w-gallery .frame{width:100%}
.w-gallery .frame.half{width:62%;aspect-ratio:4/5;align-self:flex-start}
.w-gallery .frame.half.right{align-self:flex-end;aspect-ratio:16/10;width:74%}
.w-info{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 56px;padding-top:32px;border-top:1px solid var(--line)}
.w-info h3{font-family:var(--serif);font-weight:400;font-size:var(--s-md);margin:0 0 10px}
.w-desc p{margin:0;max-width:56ch;font-size:var(--s-md);line-height:1.4}
.w-desc .th{font-family:var(--thai);color:var(--mute);margin-top:14px;font-size:15px;line-height:1.7}
.w-meta{display:flex;flex-direction:column;gap:30px}
.work .next{margin-top:24px}
@media (max-width:820px){
  .w-info{grid-template-columns:minmax(0,1fr)}
  .w-gallery .frame.half,.w-gallery .frame.half.right{width:100%}
}

/* let the hero tiles float out of their box while scrolling */
.orbit-box{overflow:visible}
.orbit .o{will-change:transform,opacity}

/* ===== Hero composition: fits the first screen, built on φ =====
   unit --u scales with width OR height (whichever is tighter) so nothing falls below the fold.
   name : role = φ : 1   ·   orbit box = 1.618 : 1, 61.8% of the stage height */
@media (min-width:821px){
  .hero{--phi:1.618;--u:min(1vw,1.55svh);
    position:relative;display:block;height:max(440px,calc(100svh - 150px));margin-bottom:72px;padding:0;text-align:left}
  .hero-name{position:absolute;left:0;top:0;margin:0 0 0 -.04em;font-size:calc(var(--u) * 21);line-height:.8;z-index:2}
  .orbit-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
    height:61.8%;width:auto;aspect-ratio:1.618/1;max-width:72%;font-size:inherit}
  .hero-role{position:absolute;right:0;bottom:0;margin:0;font-size:calc(var(--u) * 21 / var(--phi));line-height:.82;align-items:flex-end;text-align:right}
  .hero-meta{position:absolute;left:0;bottom:.2em;margin:0;text-align:left}
}

/* hero type always sits cleanly above the box and the floating tiles */
.hero-name,.hero-role,.hero-meta{mix-blend-mode:normal;z-index:3}
.orbit-box{z-index:1}

/* foot of the last hero letter, stretched by scroll */
.hero-name{position:relative}
@media (min-width:821px){.hero-name{position:absolute}}
.z-tail{position:absolute;display:block;width:0;background:currentColor;pointer-events:none}

/* floating navigation: frosted glass with a soft glowing bottom edge */
header{mix-blend-mode:normal;align-items:center;padding-bottom:16px;
  background:linear-gradient(180deg,rgba(21,21,20,.55),rgba(21,21,20,.28));
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 10px 30px -18px rgba(243,241,236,.28);transition:background .4s,box-shadow .4s}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,241,236,.55) 20%,rgba(243,241,236,.75) 50%,rgba(243,241,236,.55) 80%,transparent);
  box-shadow:0 0 12px 1px rgba(243,241,236,.35),0 0 28px 4px rgba(243,241,236,.12)}
header.scrolled{background:linear-gradient(180deg,rgba(21,21,20,.7),rgba(21,21,20,.42));box-shadow:0 14px 36px -16px rgba(243,241,236,.34)}
body::before{background:rgba(21,21,20,.7)}
.orbit-box{pointer-events:none}
.orbit .o{pointer-events:auto;cursor:pointer}
.orbit .o img{transition:filter .3s}
.orbit .o:hover img{filter:brightness(1.15)}
.w-gallery .frame.natural{aspect-ratio:auto!important}
.w-gallery .frame.natural img{height:auto}
.tile .cap{align-items:flex-end}
.tile .cap b{min-width:0}
.tile .cap span{overflow:hidden;text-overflow:ellipsis;max-width:45%}
.z-base{display:inline-block;width:0;height:0;vertical-align:baseline;overflow:hidden}