:root { --bg:#000; --fg:#fff; --mute:#a0a0a0; --line:rgba(255,255,255,.16); --acc:#2d1fd0; --pad:clamp(20px, 6.4vw, 128px); }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--fg); font:400 16px/1.5 "Syne", system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img, video { display:block; max-width:100%; }
.lbl { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg); }
.mute { color:var(--mute); }

/* header */
#hd { position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:26px var(--pad); padding-top:max(26px, env(safe-area-inset-top)); color:#fff; }
/* legibility over any video: a soft top shade instead of a blend mode (blend modes recolour the header over bright footage) */
#hd::before { content:''; position:absolute; left:0; right:0; top:0; bottom:-36px; z-index:-1; pointer-events:none; background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0)); transition:opacity .3s; }
.brand { display:flex; align-items:center; gap:12px; font-weight:500; letter-spacing:.14em; font-size:13px; }
.brand i { width:24px; height:24px; background:url(brand-72.jpg) center/cover; display:block; }
nav { display:flex; gap:26px; font-size:16px; }
nav a { opacity:.92; transition:opacity .2s; } nav a:hover { opacity:.55; }
nav b { font-weight:400; font-size:13px; }
#burger { display:none; background:none; border:0; width:28px; height:16px; position:relative; cursor:pointer; }
#burger i { position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:transform .3s, top .3s, bottom .3s; } #burger i:first-child { top:3px; } #burger i:last-child { bottom:3px; }
body.menu #burger i:first-child { top:7.25px; transform:rotate(45deg); } body.menu #burger i:last-child { bottom:7.25px; transform:rotate(-45deg); }
body.menu { overflow:hidden; } body.menu #hd { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } body.menu #hd::before { opacity:0; }
#menu { position:fixed; inset:0; z-index:19; background:#000; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:0 var(--pad); font-size:40px; font-weight:300; opacity:0; pointer-events:none; transition:opacity .35s; }
body.menu #menu { opacity:1; pointer-events:auto; }

/* page transitions */
#app { opacity:1; transition:opacity .45s ease; }
#app.out { opacity:0; }

/* home: full-bleed work, featured card */
.hero { position:relative; height:100vh; height:100svh; overflow:hidden; background:#000; }
.hero .slide { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.hero .slide.on { opacity:1; }
.hero .slide video, .hero .slide img { width:100%; height:100%; object-fit:cover; }
.hero .slide img { animation:none; }
.hero .slide.on img { animation:kb 9s ease-out forwards; }
@keyframes kb { from { transform:scale(1.08); } to { transform:scale(1); } }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.8) 100%); pointer-events:none; }
.who { position:absolute; z-index:2; left:var(--pad); bottom:56px; max-width:520px; }
.who h1 { font-weight:500; font-size:clamp(30px, 3.4vw, 50px); line-height:1.08; letter-spacing:-.01em; }
.who p { margin-top:14px; color:#d9d9d9; font-size:16px; max-width:430px; }
.card { position:absolute; z-index:2; right:var(--pad); bottom:0; width:min(564px, 44vw); padding:32px 26px 0; background:linear-gradient(180deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 55%, #000) 70%, #050414 100%); }
.card .lbl { margin-bottom:10px; }
.card h2 { font-weight:500; font-size:clamp(26px, 2.6vw, 40px); line-height:1.1; letter-spacing:-.01em; min-height:2.2em; }
.card p { margin-top:10px; color:#e6e6ff; font-size:15px; min-height:3em; }
.btn { display:flex; align-items:center; justify-content:center; height:50px; border:1px solid rgba(255,255,255,.9); border-radius:6px; margin-top:22px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; transition:background .25s, color .25s; }
.btn:hover { background:#fff; color:#000; }
.bars { display:flex; gap:6px; padding:30px 0 26px; }
.bars i { flex:1; height:1px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; cursor:pointer; }
.bars i b { position:absolute; inset:0; background:#fff; transform-origin:left; transform:scaleX(0); }
.card .txt { transition:opacity .45s; }
.card .txt.fade { opacity:0; }

/* sections */
.sec { padding:140px var(--pad) 0; }
.sec-hd { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:8px; }
.sec-hd :is(h1, h2, h3) { font-weight:500; font-size:clamp(28px, 3vw, 44px); letter-spacing:-.01em; }
.statement { font-weight:400; font-size:clamp(26px, 3.3vw, 52px); line-height:1.16; letter-spacing:-.015em; max-width:1100px; }
.statement em { font-style:normal; color:var(--mute); }

/* works index (text) */
.index { width:100%; border-collapse:collapse; }
.index a { display:grid; grid-template-columns:2.2fr 2fr 1.6fr .6fr; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); transition:padding .3s, color .3s; }
.index a .t { font-size:clamp(20px, 1.9vw, 28px); letter-spacing:-.005em; }
.index a .c, .index a .l, .index a .y { color:var(--mute); font-size:15px; }
.index a .y { text-align:right; }
.index a:hover { padding-left:14px; }
.index a:hover .c, .index a:hover .l, .index a:hover .y { color:#fff; }
.index.dim a, .cv.dim a { color:#777; } .index.dim a:hover, .cv.dim a:hover { color:#fff; }

/* works grid */
.filters { display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 10px; }
.filters button { background:none; color:var(--mute); border:1px solid var(--line); border-radius:40px; padding:9px 16px; font:inherit; font-size:14px; cursor:pointer; transition:all .2s; }
.filters button.on, .filters button:hover { color:#000; background:#fff; border-color:#fff; }
.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:56px 28px; margin-top:60px; }
.tile .media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0c0c; }
.tile .media img, .tile .media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.tile .media video { opacity:0; }
.tile:hover .media img, .tile:hover .media video { transform:scale(1.035); }
.tile.play .media video { opacity:1; }
.tile .meta { display:flex; justify-content:space-between; gap:20px; margin-top:16px; }
.tile .meta :is(h2, h4) { font-weight:500; font-size:22px; letter-spacing:-.005em; }
.tile .meta span { color:var(--mute); font-size:14px; text-align:right; }

/* project page */
.p-hero { position:relative; height:88vh; overflow:hidden; background:#000; }
.p-hero video, .p-hero img { width:100%; height:100%; object-fit:cover; }
.p-hero.portrait video { object-fit:contain; background:#000; }
.p-head { padding:70px var(--pad) 0; display:grid; grid-template-columns:1.2fr 1fr; gap:60px; }
.p-head h1 { font-weight:500; font-size:clamp(38px, 5vw, 80px); line-height:1.02; letter-spacing:-.02em; }
.meta-tbl { display:grid; grid-template-columns:120px 1fr; row-gap:14px; column-gap:20px; font-size:15px; align-self:end; }
.meta-tbl dt { color:var(--mute); } .meta-tbl dd { color:#fff; }
.p-body { padding:90px var(--pad) 0; display:grid; grid-template-columns:1fr 1.25fr; gap:60px; }
.p-body .lead { font-weight:400; font-size:clamp(22px, 2.1vw, 32px); line-height:1.3; letter-spacing:-.01em; }
.p-body .essay p { color:#cfcfcf; font-size:17px; line-height:1.65; margin-bottom:1.1em; max-width:640px; }
.credits { margin-top:40px; border-top:1px solid var(--line); padding-top:22px; }
.credits h5 { font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.credits p { color:var(--mute); font-size:15px; margin-bottom:6px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .chips span { border:1px solid var(--line); border-radius:40px; padding:6px 12px; font-size:13px; color:#cfcfcf; }
.strip-wrap { padding:110px 0 0; }
.strip-hd { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--pad) 18px; }
.strip-hd :is(h2, h3) { font-weight:500; font-size:24px; }
.strip-hd .ctr { color:var(--mute); font-size:14px; font-variant-numeric:tabular-nums; }
.strip { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--pad) 10px; scrollbar-width:none; cursor:grab; }
.strip::-webkit-scrollbar { display:none; }
.strip .it { flex:0 0 auto; height:min(62vh, 640px); scroll-snap-align:start; position:relative; background:#0c0c0c; }
.strip .it video, .strip .it img { height:100%; width:auto; object-fit:cover; }
.strip .it .n { position:absolute; left:12px; bottom:10px; font-size:12px; letter-spacing:.08em; color:#fff; text-shadow:0 0 6px rgba(0,0,0,.6); }
.timeline { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:40px; }
.timeline div { border-top:1px solid var(--line); padding-top:16px; }
.timeline b { display:block; font-weight:500; font-size:20px; margin:6px 0 8px; }
.timeline p { color:var(--mute); font-size:15px; }
.quote { font-weight:400; font-size:clamp(22px, 2.2vw, 34px); line-height:1.3; max-width:1000px; }
.quote cite { display:block; margin-top:14px; font-style:normal; font-size:14px; color:var(--mute); }
.next { display:block; margin:140px var(--pad) 0; border-top:1px solid var(--line); padding-top:24px; }
.next .row { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:end; }
.next :is(h2, h3) { font-weight:500; font-size:clamp(32px, 4vw, 64px); letter-spacing:-.02em; line-height:1.05; }
.next .media { aspect-ratio:16/9; overflow:hidden; } .next .media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.next:hover .media img { transform:scale(1.04); }

/* about */
.ab { padding:170px var(--pad) 0; display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:start; }
.ab img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.ab h1 { font-weight:500; font-size:clamp(36px, 4.4vw, 70px); line-height:1.04; letter-spacing:-.02em; margin-bottom:34px; }
.ab .bio p { font-size:19px; line-height:1.6; color:#d4d4d4; margin-bottom:1em; max-width:620px; }
.disc { display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.disc div { border-top:1px solid var(--line); padding-top:16px; }
.disc b { display:block; font-weight:500; font-size:21px; margin:8px 0 8px; }
.disc p { color:var(--mute); font-size:15px; }
.facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.facts b { display:block; font-weight:500; font-size:clamp(40px, 5vw, 76px); letter-spacing:-.02em; }
.facts span { color:var(--mute); font-size:15px; }

/* contact + footer */
.ct { padding:190px var(--pad) 0; }
.ct h1 { font-weight:500; font-size:clamp(42px, 7vw, 120px); letter-spacing:-.03em; line-height:1; }
.ct .rows a { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:26px 0; font-size:clamp(20px, 2vw, 30px); transition:padding .3s; }
.ct .rows a span { color:var(--mute); font-size:15px; align-self:center; }
.ct .rows a:hover { padding-left:14px; }
footer { margin-top:170px; padding:40px var(--pad) 46px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; }
footer .wm { font-weight:500; letter-spacing:.3em; font-size:13px; }
footer .so { display:flex; gap:22px; font-size:15px; } footer .so a:hover { opacity:.55; }
footer small { color:var(--mute); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }

@media (max-width:860px) {
  nav { display:none; } #burger { display:block; }
  .who { bottom:auto; top:110px; } .card { left:0; right:0; width:auto; padding:24px 20px 0; }
  .index a { grid-template-columns:1fr auto; } .index a .c, .index a .l { display:none; }
  .grid { grid-template-columns:1fr; gap:44px; }
  .p-head, .p-body, .ab, .next .row { grid-template-columns:1fr; gap:34px; }
  .disc, .facts, .timeline { grid-template-columns:1fr 1fr; }
  #peek { display:none; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; } .hero .slide.on img { animation:none; } }
/* test captures */
body.static .rv, body.static #app, body.static .card .txt { opacity:1 !important; transform:none !important; transition:none !important; }
/* bilingual wall text: Vietnamese as written, English beside it */
.bi { display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:end; }
.bi .statement { font-size:clamp(24px, 2.6vw, 42px); margin-top:18px; }
.bi .en p { color:var(--mute); font-size:16px; line-height:1.6; margin-bottom:18px; }
.ab .bio.en { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.ab .bio.en p { color:var(--mute); font-size:16px; }
@media (max-width:860px) { .bi { grid-template-columns:1fr; gap:24px; } }
/* justified gallery: every clip keeps its own shape */
.gwrap { padding:100px var(--pad) 0; }
.gwrap .strip-hd { padding:0 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.gal { display:flex; flex-wrap:wrap; gap:14px; }
.gi { flex:none; }
.gal .fill { flex:100 1 0; height:0; }
.gi { position:relative; display:block; border:0; padding:0; background:#0c0c0c; overflow:hidden; cursor:zoom-in; }
.gi img, .gi video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.gi video { opacity:0; } .gi.play video { opacity:1; }
.gi:hover img, .gi:hover video { transform:scale(1.03); }
.gi .n { position:absolute; left:10px; bottom:8px; font:500 11px "Syne", sans-serif; letter-spacing:.08em; color:#fff; text-shadow:0 0 6px rgba(0,0,0,.6); }
#lb { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
#lb.on { opacity:1; pointer-events:auto; }
#lb .st { width:min(92vw, calc(84vh * 16 / 9)); height:84vh; display:flex; align-items:center; justify-content:center; }
#lb .st img, #lb .st video { max-width:100%; max-height:100%; object-fit:contain; }
#lb button { position:absolute; background:none; border:0; color:#fff; font:500 15px "Syne", sans-serif; cursor:pointer; padding:14px; opacity:.85; } #lb button:hover { opacity:.5; }
#lb .x { top:18px; right:22px; } #lb .pv { left:14px; top:50%; font-size:26px; } #lb .nx { right:14px; top:50%; font-size:26px; }
#lb .c { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:var(--mute); font-size:13px; letter-spacing:.08em; }
body.static .p-hero, body.static .hero { height:820px; }
/* the intro sits where the featured card was */
.card .intro { font-size:clamp(17px, 1.3vw, 20px); line-height:1.5; color:#fff; margin-top:4px; }
/* brand collaborations: a typographic wall */
.brands { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:30px; }
.br { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 28px 30px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between; transition:background .3s; }
.br:hover { background:#0b0b0b; }
.br b { font-weight:600; font-size:clamp(24px, 2.3vw, 36px); letter-spacing:-.01em; line-height:1.05; }
.br span { color:var(--mute); font-size:14px; margin-top:22px; }
@media (max-width:860px) { .brands { grid-template-columns:1fr 1fr; } .br { min-height:150px; padding:24px 18px; } }
.br:last-child:nth-child(3n+2) { grid-column:span 2; } .br:last-child:nth-child(3n+1) { grid-column:span 3; }
@media (max-width:860px) { .br:last-child:nth-child(n) { grid-column:auto; } .br:last-child:nth-child(odd) { grid-column:span 2; } }
/* index with a fixed preview beside it */
.ix { display:grid; grid-template-columns:1.55fr 1fr; gap:48px; align-items:start; }
.ix .index a { grid-template-columns:1.5fr 1.4fr .35fr; }
.ix .index a.cur { padding-left:14px; } .ix .index a.cur .c, .ix .index a.cur .y { color:#fff; }
.ixp { position:sticky; top:110px; margin-top:22px; }
.ixv { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0c0c; }
.ixv img, .ixv video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ixv video { opacity:0; transition:opacity .45s; } .ixv video.on { opacity:1; }
.ixc { display:block; margin-top:12px; }
@media (max-width:860px) { .ix { grid-template-columns:1fr; } .ixp { display:none; } .ix .index a { grid-template-columns:1fr auto; } .ix .index a .c { display:none; } }

/* hero intro: plain type on the footage, no box */
.card { background:none; padding:0; width:min(470px, 40vw); bottom:46px; }
.card .lbl { color:rgba(255,255,255,.75); margin-bottom:14px; }
.card .intro { font-size:clamp(15px, 1.05vw, 17px); line-height:1.6; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.5); }
.card .more { display:inline-block; margin-top:18px; font-size:14px; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:3px; transition:opacity .2s; }
.card .more:hover { opacity:.6; }
.card .bars { padding:26px 0 0; }
/* cursor preview on the index */
#peek { position:fixed; z-index:15; left:0; top:0; width:340px; aspect-ratio:16/10; pointer-events:none; overflow:hidden; background:#111; opacity:0; transition:opacity .25s; will-change:transform; }
#peek.on { opacity:1; }
#peek img, #peek video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#peek img { opacity:0; } #peek img.on { opacity:1; }
#peek video { opacity:0; } #peek video.on { opacity:1; transition:opacity .3s; }
/* brand logos, running */
.marquee { overflow:hidden; margin-top:24px; padding:30px 0 34px; border-bottom:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display:flex; align-items:center; gap:110px; width:max-content; will-change:transform; }
.marquee:hover .track { animation-play-state:paused; }
.marquee img { width:auto; opacity:.82; transition:opacity .2s; } .marquee img:hover { opacity:1; }
@keyframes mq { to { transform:translate3d(-50%, 0, 0); } }
@keyframes mqs { to { transform:translate3d(var(--mq-end), 0, 0); } }
@media (max-width:860px) { .card { width:auto; left:var(--pad); right:var(--pad); bottom:30px; top:auto; } .marquee .track { gap:60px; } .marquee img { transform:scale(.7); } #peek { display:none; } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation:none; } }
#hd { transition:background .3s, backdrop-filter .3s; }
#hd.solid { background:rgba(0,0,0,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } #hd.solid::before { opacity:0; }
@media (max-width:860px) { #hd { padding:18px var(--pad); padding-top:max(18px, env(safe-area-inset-top)); } #hd.solid { background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } #burger { width:30px; height:16px; padding:0; } }
/* hero: the name as a wordmark, practices in a quiet column */
.hero .mark { position:absolute; z-index:2; left:var(--pad); bottom:52px; }
.hero .mark h1 { font-weight:700; font-size:clamp(84px, 13.5vw, 210px); line-height:.82; letter-spacing:-.03em; }
.hero .mark p { margin-top:24px; font-size:clamp(15px, 1.2vw, 18px); color:rgba(255,255,255,.92); }
.hero .disc-list { position:absolute; z-index:2; right:var(--pad); bottom:58px; list-style:none; text-align:right; font-size:15px; line-height:1.75; color:rgba(255,255,255,.88); }
@media (max-width:860px) { .hero .mark { bottom:40px; } .hero .disc-list { display:none; } }
/* panorama: the three walls laid out flat */
.pano { padding:110px var(--pad) 0; }
.pano .strip-hd { padding:0 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.pano video { width:100%; aspect-ratio:3840/554; object-fit:cover; background:#0c0c0c; }
.pano figure { margin-top:14px; } .pano figure img { width:100%; aspect-ratio:4000/577; object-fit:cover; }
.pano figcaption { margin-top:8px; }
.facts.four { grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); padding-top:26px; }
.facts.four b { font-size:clamp(34px, 3.6vw, 58px); }
.timeline { grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width:860px) { .facts.four { grid-template-columns:1fr 1fr; row-gap:26px; } }
/* team line */
.team { display:flex; flex-wrap:wrap; gap:8px 26px; border-top:1px solid var(--line); padding-top:20px; color:var(--mute); font-size:14px; }
/* chapters: one row each, media and words alternating */
.chaps .chap { display:grid; grid-template-columns:1.45fr 1fr; gap:46px; align-items:center; padding:46px 0; border-bottom:1px solid var(--line); }
.chaps .chap.flip { grid-template-columns:1fr 1.45fr; } .chaps .chap.flip .cm { order:2; }
.chaps .chap.wide { grid-template-columns:1fr; gap:22px; }
.chaps .chap.wide .cx { display:grid; grid-template-columns:1fr 1.25fr; gap:46px; align-items:start; } .chaps .chap.wide .cx h4 { margin-bottom:0; }
.chaps .cm { position:relative; display:block; width:100%; border:0; padding:0; background:#0c0c0c; overflow:hidden; cursor:zoom-in; }
.chaps .cm img, .chaps .cm video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.chaps .cm:hover img, .chaps .cm:hover video { transform:scale(1.025); }
.chaps .cx h4 { font-weight:500; font-size:clamp(26px, 2.6vw, 40px); line-height:1.05; letter-spacing:-.01em; margin:10px 0 14px; }
.chaps .cx p { color:#cfcfcf; font-size:17px; line-height:1.6; max-width:520px; }
/* process: small, quiet */
.proc { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.proc img { width:100%; aspect-ratio:16/10; object-fit:cover; background:#0c0c0c; }
.proc figcaption { margin-top:8px; }
@media (max-width:860px) { .chaps .chap, .chaps .chap.flip, .chaps .chap.wide .cx { grid-template-columns:1fr; gap:18px; } .chaps .chap.flip .cm { order:0; } .proc { grid-template-columns:1fr; } }
/* about: CV lists, drawn like the works index (year · title · place) */
.cv > * { display:grid; grid-template-columns:.6fr 2.2fr 1.6fr; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); transition:padding .3s, color .3s; }
.cv .t { font-size:clamp(20px, 1.9vw, 28px); letter-spacing:-.005em; }
.cv .y, .cv .l { color:var(--mute); font-size:15px; }
.cv a:hover { padding-left:14px; } .cv a:hover .y, .cv a:hover .l { color:#fff; }
.ab .cv-dl { display:inline-block; margin-top:14px; font-size:14px; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:3px; transition:opacity .2s; }
.ab .cv-dl:hover { opacity:.6; } .ab .cv-dl[hidden] { display:none; }
@media (max-width:860px) { .cv > * { grid-template-columns:52px 1fr; column-gap:16px; row-gap:6px; } .cv .l { grid-column:2; } }
/* showreel: hero button and the YouTube modal */
.reel-btn { margin-top:26px; background:none; border:1px solid rgba(255,255,255,.7); color:#fff; font:500 14px "Syne", sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:13px 22px; cursor:pointer; transition:background .25s, color .25s; }
.reel-btn:hover { background:#fff; color:#000; }
#reel .cr a { text-decoration:underline; text-underline-offset:2px; }
#reel { position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
#reel.on { opacity:1; pointer-events:auto; }
#reel .x { position:absolute; top:18px; right:22px; top:max(18px, env(safe-area-inset-top)); background:none; border:0; color:#fff; font:500 15px "Syne", sans-serif; cursor:pointer; padding:14px; opacity:.85; } #reel .x:hover { opacity:.5; }
#reel .box { width:min(92vw, calc((100vh - 220px) * 16 / 9)); }
#reel .fr { position:relative; aspect-ratio:16/9; background:#000; }
#reel iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#reel .cr { margin-top:18px; color:var(--mute); font-size:13px; line-height:1.6; }
#reel .cr b { display:block; color:#fff; font-weight:500; font-size:16px; margin-bottom:6px; }
#reel .cr .also { margin-top:10px; display:flex; gap:20px; }
#reel .cr .also a { text-decoration:none; color:#fff; } #reel .cr .also a:hover { opacity:.55; }
@media (max-width:860px) { .reel-btn { margin-top:20px; padding:11px 18px; font-size:12px; } #reel .box { width:100vw; } #reel .cr { padding:0 var(--pad); } }