@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Noto+Serif+JP:wght@400&display=swap');

/* Study 02: an open, editorial portfolio. Artwork carries the color. */
:root{--paper:#fff;--ink:#242829;--line:#dadddc;--accent:#eef0ef;--muted:#666d6e;--serif:'Cormorant Garamond',Georgia,serif;--jp-serif:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif;--gutter:clamp(22px,5vw,88px)}
body{color:var(--ink);background:var(--paper);font-weight:400;-webkit-font-smoothing:antialiased}
::selection{background:#e1e6e5;color:#242829}
a:focus-visible,button:focus-visible{outline:2px solid #54666b;outline-offset:5px}
header{height:100px;margin:0 var(--gutter);border-bottom:1px solid var(--line);gap:48px}
.wordmark{font-size:34px;font-weight:400;letter-spacing:-2px}
.header-note{font-size:12px;line-height:1.65;color:var(--muted);letter-spacing:.025em}
nav{font-size:14px;gap:32px}nav sup{display:none}nav a{padding:12px 0}nav a:after{bottom:5px}
.hero{margin:0 var(--gutter);padding:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;min-height:0}
.hero-top{grid-column:1/-1;grid-row:1;font-size:12px;letter-spacing:.075em;color:var(--muted)}
.original-logo{grid-column:1/-1;grid-row:2;position:relative;inset:auto;width:min(540px,65%);max-width:none;margin:8px auto 14px;padding:0;text-align:center}
.logo-stage{aspect-ratio:1547/1026;background:#fff}
.original-logo button{margin:0;padding:10px 4px;min-height:44px;border:0;font-size:12px;letter-spacing:.04em;color:var(--muted);text-decoration:underline;text-decoration-color:#c4caca;text-underline-offset:6px}
.hero h1{grid-column:1;grid-row:3;font-family:var(--jp-serif);font-size:clamp(27px,2.7vw,42px);line-height:1.85;letter-spacing:.075em;font-weight:400;margin:16px 0 46px;pointer-events:auto}
.hero-bottom{grid-column:2;grid-row:3;align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:24px;position:static;margin:0;padding:0 0 50px;border:0;flex-wrap:nowrap}
.hero-bottom p{font-size:14px;line-height:1.85;text-align:right;letter-spacing:.02em;color:var(--muted)}
.hero-bottom>a{font-size:14px;gap:36px;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line)}
.hero-bottom>a span{font-size:18px}.frame-number{display:none}
.works{padding:64px var(--gutter) 110px;background:#fff;border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-bottom:42px}
.section-heading .eyebrow{display:block;margin-bottom:14px}
.section-head h2{font-family:var(--serif);font-size:clamp(64px,7vw,108px);line-height:.95;font-weight:400;letter-spacing:-.045em;margin:0}
.section-intro{font-family:var(--jp-serif);font-size:20px;line-height:1.9;letter-spacing:.075em;margin:0 0 4px;justify-self:end}
.eyebrow{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.filter-label{font-size:12px;color:var(--muted);margin:0 0 10px;letter-spacing:.07em}
.work-filters{width:100%;max-width:600px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:0;padding:0;background:white}
.work-filters button{min-height:48px;padding:10px 5px;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;font-size:14px;font-weight:400;color:var(--muted);background:#fff;white-space:nowrap;position:relative}
.work-filters button:last-child{border-right:0}
.work-filters button[aria-pressed=true],.work-filters button[aria-pressed=true]:hover{background:#edf0ef;border-color:var(--line);color:var(--ink);font-weight:500;box-shadow:inset 0 -2px #394c4e}
.work-filters button:hover{background:#f6f7f7;border-color:var(--line)}
.result-count{margin:18px 0 32px;font-size:12px;color:var(--muted);letter-spacing:.025em}
.archive-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 28px;counter-reset:work}
.archive-work{min-width:0;counter-increment:work;display:block}
.archive-work[hidden]{display:none}
.archive-work .work-image{aspect-ratio:1/1;background:#252525}
.archive-work .work-image .thumbnail-original{object-fit:contain;transform:none;filter:none}
.archive-work .work-image .thumbnail-blur{object-fit:cover;filter:blur(22px);transform:scale(1.18)}
.archive-meta{font-size:12px;line-height:1.6;margin:18px 0 10px;color:var(--muted);letter-spacing:.025em;padding-bottom:12px;border-bottom:1px solid var(--line);gap:8px}
.archive-meta>span:first-child:before{content:counter(work,decimal-leading-zero);margin-right:14px;font-family:var(--serif);font-size:16px;color:#485052}
.archive-meta>span:last-child{white-space:nowrap}
.archive-work h3{font-size:16px;line-height:1.85;font-weight:400;letter-spacing:.015em}
.archive-work p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:7px}
.archive-work .open-work{background:#fffffff0;color:var(--ink);padding:10px 14px;bottom:14px;right:14px;font-size:12px;border-radius:0}
.archive-work:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:#b3bbba}
.about{background:#f4f6f5;padding:78px var(--gutter) 0;border-top:1px solid var(--line);color:var(--ink)}
.about-body{grid-template-columns:1fr 1fr;gap:10%;margin:56px 0 90px}
.about h2{font-family:var(--jp-serif);font-size:clamp(30px,3.3vw,48px);line-height:1.95;letter-spacing:.04em;font-weight:400}
.about h2 span{color:#687574}.about-copy{padding-top:8px}.about-copy p{font-size:16px;line-height:2.3;color:#535c5d;margin:0 0 28px}
.text-link{font-size:14px;line-height:1.8;padding:10px 0;color:var(--ink);border-color:#9ba7a7}
.disciplines{display:flex;justify-content:space-between;gap:20px;border-color:#d0d7d5;padding:30px 0 38px;font-family:var(--serif);font-size:clamp(27px,4vw,54px);font-weight:400;letter-spacing:-.025em;color:#526260}
.contact{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;background:#fff;border-top:1px solid var(--line);padding:76px var(--gutter)}
.contact-meta{display:block}.contact-meta p{font-size:16px;letter-spacing:.03em;margin:20px 0 0;color:var(--muted)}
.contact-link{font-family:var(--jp-serif);font-size:clamp(25px,3vw,38px);font-weight:400;letter-spacing:.08em;line-height:1.6;margin:0;padding:14px 0;border-bottom:1px solid #a8b1b0;gap:24px}
.contact-link span{font-family:Arial,sans-serif;font-size:26px;color:#637371}
footer{margin:0 var(--gutter);padding:30px 0;border-top:1px solid var(--line);gap:20px;color:var(--muted)}
footer .wordmark{font-size:28px;color:var(--ink)}footer span,footer>a:last-child{font-size:12px}
.case{padding:64px var(--gutter) 88px;max-width:1440px;margin:auto}
.case-heading h1,.image-case .case-heading h1{font-family:var(--jp-serif);font-size:clamp(25px,3.3vw,46px);font-weight:400;line-height:1.8;letter-spacing:.025em;margin:28px 0;pointer-events:auto}
.case-heading>p{font-size:16px;line-height:1.9}.case-meta{font-size:12px;line-height:1.8;gap:48px;flex-wrap:wrap}.case-meta b{font-size:16px;font-weight:400}
.case-hero img,.stills img{height:auto;max-height:none;object-fit:contain;aspect-ratio:auto}
.still-heading h2{font-family:var(--serif);font-size:42px;font-weight:400;letter-spacing:-.02em}
.stills{gap:32px}.stills figure:last-child{width:100%;grid-column:auto}.stills figcaption,.frame-gallery-grid figcaption,.frame-gallery-heading span,.frame-credit,.image-credit,.case-video-link small{font-size:12px;line-height:1.8;color:var(--muted)}
.frame-gallery-heading h2{font-weight:400;font-size:18px}.case-video-link{border-radius:0;min-height:68px;font-size:16px}.case-video-link:hover{background:#f4f6f5}
@media(min-width:1700px){.hero,.works,.about,.contact{padding-left:max(var(--gutter),calc((100vw - 1600px)/2));padding-right:max(var(--gutter),calc((100vw - 1600px)/2))}.hero{margin:0;row-gap:0}.hero h1{margin:16px 0 46px}.original-logo{max-width:540px;inset:auto}.hero-bottom{margin:0}}
@media(max-width:1000px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 26px}.header-note{display:none}.original-logo{width:min(520px,80%)}.about-body{gap:6%}.about-copy br{display:none}}
@media(max-width:600px){
 header{height:80px;gap:20px}nav{gap:20px;font-size:14px}.wordmark{font-size:30px}
 .hero{grid-template-columns:1fr;padding-top:18px;row-gap:0}.hero-top{grid-column:1;grid-row:1;font-size:12px}.hero-top>span:last-child{display:none}
 .original-logo{grid-column:1;grid-row:2;width:100%;margin:10px auto 22px;inset:auto}.original-logo button{margin:0;min-height:44px}
 .hero h1{grid-column:1;grid-row:3;font-size:27px;line-height:1.9;letter-spacing:.04em;margin:0 0 28px}
 .hero-bottom{grid-column:1;grid-row:4;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:0 0 36px;gap:16px;margin:0}.hero-bottom p{font-size:12px;text-align:left;flex:1 1 170px}.hero-bottom>a{font-size:14px;gap:18px;flex:0 0 auto}
 .works{padding-top:40px;padding-bottom:64px}.section-head{gap:16px;margin-bottom:30px;grid-template-columns:1fr 1fr}.section-head h2{font-size:66px}.section-heading .eyebrow{margin-bottom:10px}.section-intro{font-size:14px;line-height:1.9;letter-spacing:0;margin-bottom:1px}
 .work-filters{max-width:none}.work-filters button{font-size:14px;min-height:48px;padding:10px 0;letter-spacing:-.025em}.result-count{margin:16px 0 26px}
 .archive-grid{grid-template-columns:1fr;gap:38px}.archive-meta{margin-top:14px;padding-bottom:10px}.archive-work h3{font-size:16px}.archive-work p{font-size:14px}
 .about{padding-top:46px}.about-body{grid-template-columns:1fr;gap:32px;margin:34px 0 48px}.about h2{font-size:30px}.about-copy p{font-size:16px;line-height:2.15}.disciplines{font-size:27px;gap:12px;padding:25px 0 30px}
 .contact{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:48px}.contact-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.contact-meta p{font-size:14px;margin:0}.contact-link{font-size:28px;padding:10px 0}
 footer{display:grid;grid-template-columns:auto 1fr;padding:24px 0;gap:20px}footer span{justify-self:end}footer>a:last-child{grid-column:1/-1;justify-self:end}
 .case{padding-top:34px;padding-bottom:54px}.case-heading h1,.image-case .case-heading h1{font-size:26px}.case-meta{gap:24px}.still-heading{gap:12px}.still-heading h2{font-size:34px}.stills{grid-template-columns:1fr}.frame-gallery-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}