@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#16304c; --paper:#f5f2ec; --blue:#447fb3; --coral:#ef6b5b; --lime:#c3dc50; --line:rgba(22,48,76,.23); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; font-size:15px; }
a { color:inherit; text-decoration:none; }
.site-header, .site-footer { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 28px; }
.wordmark { display:inline-block; padding:5px 7px; background:var(--ink); color:var(--paper); font:500 10px/1.05 'DM Mono',monospace; letter-spacing:.04em; }
nav { display:flex; gap:20px; font-size:14px; font-weight:700; }
nav a { position:relative; } nav a:hover::after, nav a.active::after { content:''; position:absolute; width:100%; height:1px; background:currentColor; left:0; bottom:-3px; }
main { min-height:calc(100vh - 150px); }.hero { padding:84px 8vw 56px; }.eyebrow { margin:0 0 18px; font:500 11px/1.3 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(38px,7.6vw,116px); letter-spacing:-.065em; line-height:.92; max-width:1000px; } h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.08em; }
.hero-copy { max-width:290px; margin:40px 0 0 auto; line-height:1.45; }.reel-section { padding:0 8vw 70px; }.reel { appearance:none; border:0; position:relative; width:100%; min-height:clamp(260px,45vw,680px); overflow:hidden; background:var(--blue); color:var(--paper); text-align:left; cursor:pointer; }.reel:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
.reel-mark { position:absolute; z-index:2; left:6%; bottom:8%; font-size:clamp(26px,5vw,78px); line-height:.85; font-weight:800; letter-spacing:-.07em; }.reel-mark b { color:var(--lime); }.play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border:1px solid var(--paper); border-radius:50%; display:grid; place-items:center; padding-left:4px; font-size:20px; transition:transform .3s; }.reel:hover .play { transform:translate(-50%,-50%) scale(1.13); }
.reel-shape { position:absolute; display:block; border-radius:50%; mix-blend-mode:screen; }.shape-a { width:54%; aspect-ratio:1; background:var(--coral); right:-8%; top:-19%; }.shape-b { width:36%; aspect-ratio:1; background:var(--lime); left:34%; bottom:-37%; }.shape-c { width:18%; aspect-ratio:1; border:3vw solid var(--paper); background:transparent; left:14%; top:15%; }
.reel-status { position:absolute; right:6%; top:8%; font:500 11px 'DM Mono',monospace; }.caption { margin:9px 0; font-size:13px; font-weight:700; }.intro-grid { border-top:1px solid var(--line); margin:0 8vw; padding:28px 0 110px; display:grid; grid-template-columns:1fr 1fr; gap:40px; font-size:clamp(20px,2.5vw,35px); line-height:1.13; letter-spacing:-.05em; }.arrow-link { justify-self:end; font-size:15px; font-weight:700; letter-spacing:-.02em; }.arrow-link span { color:var(--coral); font-size:27px; margin-left:10px; }.site-footer { border-top:1px solid var(--line); font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; }
.page-main,.about-main { padding:65px 8vw 100px; }.page-title { margin-bottom:58px; }.page-title h1 { font-size:clamp(52px,8vw,125px); }.page-title sup { font:500 12px 'DM Mono',monospace; letter-spacing:0; vertical-align:top; }.works-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 20px; }.work-card { display:block; }.work-thumb { position:relative; min-height:28vw; overflow:hidden; padding:17px; display:flex; justify-content:space-between; align-items:flex-end; }.work-thumb::before { content:''; position:absolute; inset:15% 22%; background:rgba(245,242,236,.88); transform:rotate(-12deg); border-radius:50% 10% 48% 18%; }.work-thumb::after { content:''; position:absolute; width:38%; aspect-ratio:1; border:1px solid rgba(245,242,236,.8); border-radius:50%; right:10%; top:12%; }.work-thumb span { position:relative; z-index:1; font:500 11px 'DM Mono',monospace; }.work-thumb b { position:relative; z-index:1; font-size:21px; }.work-card:hover .work-thumb::before { transform:rotate(12deg) scale(1.1); transition:.5s ease; }.work-meta { display:flex; justify-content:space-between; padding-top:10px; font-size:13px; font-weight:700; }.work-meta small { font:400 10px 'DM Mono',monospace; text-transform:uppercase; }.color-0 {background:var(--coral)}.color-1 {background:#0d8794}.color-2 {background:#9479c9}.color-3 {background:#e5ad39}.color-4 {background:#285a88}.color-5 {background:#739f73}.color-6 {background:#d2648e}.color-7 {background:#3e3d59}
.work-detail { padding:65px 8vw 100px; }.detail-head { display:grid; grid-template-columns:1fr auto; gap:30px; margin-bottom:40px; }.detail-head h1 { font-size:clamp(45px,7vw,105px); }.detail-head p { max-width:230px; margin:8px 0 0; line-height:1.5; }.detail-film { position:relative; min-height:55vw; max-height:80vh; background:var(--blue); display:grid; place-items:center; overflow:hidden; }.detail-film .play { position:static; transform:none; }.detail-film .play:hover { transform:scale(1.12); }.detail-info { border-top:1px solid var(--line); margin-top:36px; padding-top:18px; display:grid; grid-template-columns:1fr 2fr; gap:32px; }.detail-info p { margin:0; line-height:1.5; }.detail-info dl { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.detail-info dt { font:500 10px 'DM Mono',monospace; text-transform:uppercase; }.detail-info dd { margin:6px 0 0; font-size:13px; }
.explore-list { border-top:1px solid var(--line); }.explore-item { min-height:190px; padding:27px; display:grid; grid-template-columns:70px 1fr auto; align-items:end; border-bottom:1px solid var(--paper); color:var(--ink); }.explore-item span,.explore-item p { font:500 10px 'DM Mono',monospace; }.explore-item h2 { margin:0; font-size:clamp(32px,5vw,78px); letter-spacing:-.07em; line-height:.9; }.explore-item p { margin:0; }.coral{background:var(--coral)}.blue{background:var(--blue);color:var(--paper)}.lime{background:var(--lime)}
.about-main h1 { max-width:1100px; }.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:11vw; margin-top:70px; }.portrait-placeholder { min-height:470px; background:var(--lime); position:relative; overflow:hidden; }.portrait-placeholder::before { content:''; position:absolute; width:75%; aspect-ratio:1; background:var(--coral); border-radius:45% 45% 5% 5%; bottom:-25%; left:14%; }.portrait-placeholder::after { content:''; position:absolute; width:28%; aspect-ratio:1.35; background:var(--ink); border-radius:50% 50% 40% 40%; top:22%; left:37%; }.portrait-placeholder span { position:absolute; z-index:2; left:20px; top:20px; font:500 10px 'DM Mono',monospace; }.large-copy { margin:0; font-size:clamp(20px,2.4vw,33px); letter-spacing:-.055em; line-height:1.12; }.profile-list { margin:72px 0 0; }.profile-list div { display:grid; grid-template-columns:100px 1fr; padding:11px 0; border-top:1px solid var(--line); }.profile-list dt { font:500 10px 'DM Mono',monospace; text-transform:uppercase; }.profile-list dd { margin:0; font-size:14px; }
@media (max-width:680px) { .site-header,.site-footer{padding:18px}.site-header{gap:15px}.site-header nav{gap:12px;font-size:12px}.hero{padding:78px 24px 42px}.reel-section,.page-main,.about-main,.work-detail{padding-left:24px;padding-right:24px}.intro-grid{margin:0 24px;grid-template-columns:1fr;padding-bottom:70px;gap:20px}.arrow-link{justify-self:start}.works-grid{grid-template-columns:1fr;gap:36px}.work-thumb{min-height:58vw}.detail-head,.detail-info,.about-grid{grid-template-columns:1fr}.detail-info dl{grid-template-columns:1fr 1fr}.explore-item{grid-template-columns:45px 1fr;gap:15px;min-height:150px}.explore-item p{grid-column:2}.portrait-placeholder{min-height:360px}.about-grid{margin-top:42px;gap:34px}.site-footer{gap:12px;flex-wrap:wrap} }