@font-face {
font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCo9_S6w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkBI9_.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--paper: #F5F7F9;
--ink: oklch(22% 0.012 255);
--recede: oklch(61.5% 0.007 255);
--grey: #66696E;
--key: oklch(86% 0.004 255);
--serif: 'EB Garamond', 'Garamond', 'Times New Roman', serif;
--text: 13px; --text-lh: 20px;
--mark: 17px;
--idx: 22px; --idx-lh: 30px;
--cap: 12px; --cap-lh: 18px; --cap-track: 0.02em;
--num: 11px;
--big: 22px; --big-lh: 44px;
--bar: 44px;
--side: 20px;
--gap: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); color-scheme: light; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--serif);
font-weight: 400;
font-style: normal;
font-size: var(--text);
line-height: var(--text-lh);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
}
h1, h2, p, figure { margin: 0; }
h1, h2 { font: inherit; }
img, svg, video { display: block; }
picture { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
position: absolute; top: 0; left: var(--side); z-index: 20;
padding: 12px 0; line-height: var(--text-lh); background: var(--paper);
transform: translateY(-110%);
}
.skip:focus { transform: none; }
.pic img, .still img, .film video { width: 100%; height: auto; outline: 1px solid var(--key); }
.page { max-width: 440px; margin: 0 auto; background: var(--paper); }
.mast { display: contents; }
.wordmark {
position: sticky; top: 0; z-index: 2;
height: var(--bar); padding: 0 var(--side);
background: var(--paper);
font-size: var(--mark); line-height: var(--bar);
}
.wordmark a { display: inline-block; }
.role { padding: 12px var(--side) 0; }
.reach { display: flex; align-items: center; }
.reach-ph { padding: 0 var(--side); }
.reach-ph .ig { display: flex; align-items: center; width: 44px; height: 44px; }
.reach-ph .mail { display: inline-block; padding: 12px 0; }
.reach-dt, .foot-dt { display: none; }
.index {
display: flex; flex-direction: column; align-items: flex-start;
padding: 12px var(--side) 18px;
font-size: var(--idx); line-height: var(--idx-lh);
}
.index > a { display: block; padding: 7px 0; margin: -7px 0; }
.sub .role, .sub .reach-ph, .sub .index { display: none; }
.cap {
position: sticky; top: 0; z-index: 3;
height: var(--bar);
display: flex; align-items: center; justify-content: flex-end;
font-size: var(--cap); line-height: var(--bar); letter-spacing: var(--cap-track);
color: var(--grey);
pointer-events: none;
}
.cap-line { font-size: var(--cap); line-height: var(--cap-lh); letter-spacing: var(--cap-track); color: var(--grey); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.flow > * { min-width: 0; }
.ph-full { grid-column: 1 / -1; }
.ph-solo { grid-column: 1 / -1; width: 60%; }
.ph-pair { grid-column: auto; }
.pic a, a.pic { display: block; }
.genre { padding: 0 var(--side) var(--gap); }
.set-link { display: block; }
.set-top { display: flex; flex-direction: column; gap: 8px; }
.contact { padding: 0 var(--side); min-height: 100vh; }
.contact-body { padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contact-lines { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--big); line-height: var(--big-lh); }
.work { padding: 8px var(--side) 0; }
.nums { display: flex; flex-wrap: wrap; font-size: var(--num); line-height: 44px; letter-spacing: var(--cap-track); color: var(--grey); }
.nums a { display: block; width: 24px; flex: none; }
.nums a.nn { width: 30px; }
.nums-dt { display: none; }
.work .flow-shoot { padding-top: 8px; }
.flow-shoot > figure { scroll-margin-top: 52px; }
.shoot-end { padding: 48px 0 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 12px; }
.next .pic { display: block; width: 169px; }
.next .pic.land { width: 254px; }
.back-ph, .back a { display: inline-block; padding: 12px 0; }
.back { padding: 36px 0 28px; }
.film { display: flex; flex-direction: column; gap: 8px; }
.film-rest { padding-top: 56px; display: flex; flex-direction: column; gap: var(--gap); }
.still { position: relative; }
.still .play { position: absolute; inset: 0; margin: auto; }
.film video { aspect-ratio: var(--r); background: var(--ink); object-fit: contain; }
.set-list { display: flex; flex-direction: column; gap: 56px; }
.set { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: var(--bar); }
.nf { padding: 12px var(--side); display: flex; flex-wrap: wrap; column-gap: 1em; }
.nf a { display: inline-block; }
@media (min-width: 900px) and (min-height: 600px) {
:root {
--text: 17px; --text-lh: 26px;
--mark: 30px;
--ix: min(54px, 6vw - 7px);
--big: 54px; --big-lh: 60px;
--col: calc((100vw - 120px) * 888 / 1320);
}
.skip { left: 48px; }
.page {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 432fr) minmax(0, 888fr);
column-gap: 24px;
padding: 0 48px;
}
.mast {
grid-column: 1; grid-row: 1; align-self: start;
position: sticky; top: 0; z-index: 1;
height: 100vh; height: 100svh;
padding: 40px 0 42px;
display: flex; flex-direction: column;
background: var(--paper);
}
.wordmark { position: static; height: auto; padding: 0; background: none; font-size: var(--mark); line-height: 36px; align-self: flex-start; }
.role, .sub .role { display: block; padding: 8px 0 0; }
.reach-ph { display: none; }
.index, .sub .index {
display: block; margin-top: auto; padding: 0;
font-size: var(--ix); line-height: calc(var(--ix) * 10 / 9);
}
.index > a, .index-row > a { display: block; width: max-content; padding: 0; margin: 0; color: var(--recede); }
.index > a[aria-current], .index-row > a[aria-current], .index.plain > a { color: var(--ink); }
.reach-dt, .foot-dt { display: flex; align-items: center; gap: 12px; height: 26px; margin-top: 62px; }
.reach-dt .ig { display: flex; align-items: center; height: 26px; }
.mast.at-contact .reach-dt { visibility: hidden; }
.index-row { display: flex; align-items: baseline; gap: 14px; }
.year { font-size: var(--cap); line-height: 12px; letter-spacing: var(--cap-track); color: var(--grey); }
.nums-dt { display: flex; color: var(--ink); }
.nums-dt a { color: var(--grey); }
.nums-dt a[aria-current] { color: var(--ink); }
.nums-ph { display: none; }
main { grid-column: 2; grid-row: 1; min-width: 0; }
.cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flow-top, .flow-shoot { column-gap: 24px; row-gap: 80px; }
.flow-films { row-gap: 80px; }
.dt-full { grid-column: 1 / -1; width: auto; }
.dt-pair { grid-column: auto; width: auto; }
.dt-solo { grid-column: 1 / -1; width: min(calc((100% - 168px) * 5 / 8 + 96px), calc((100vh - 80px) * var(--r))); }
.dt-solo60 { grid-column: 1 / -1; width: 60%; }
.dt-hide { display: none; }
.genre { padding: 40px 0 88px; }
.set-top { gap: 12px; }
.contact { padding: 240px 0 28px; min-height: 0; }
.contact-body { padding: 0; gap: 16px; }
.work { padding: 40px 0 42px; display: flex; flex-direction: column; gap: 80px; }
.work.shoot { display: block; padding-bottom: 40px; }
.work .flow-shoot { padding-top: 0; }
.flow-shoot > figure { scroll-margin-top: 40px; }
.shoot-end { padding: 80px 0 0; gap: 0; }
.next { padding: 0; gap: 16px; }
.next > span:first-child { font-size: var(--big); line-height: var(--big-lh); }
.next .pic { width: calc((var(--col) - 168px) * 2 / 8 + 24px); }
.next .pic.land { width: calc(((var(--col) - 168px) * 2 / 8 + 24px) * 1.5); }
.back-ph { display: none; }
.back { padding: 0; height: 26px; }
.back a { padding: 0; }
.film { gap: 12px; }
.film-rest { padding: 0; }
.set-list { gap: 80px; }
.set { gap: 2px; scroll-margin-top: 0; }
.set > .cap-line { padding-top: 6px; height: 42px; line-height: 36px; }
.nf { padding: 49px 0 0; }
}
.lb {
position: fixed; inset: 0; z-index: 30;
width: 100%; height: 100%; max-width: none; max-height: none;
margin: 0; padding: 0; border: 0;
background: var(--paper); color: var(--ink);
display: grid; grid-template-columns: 1fr auto; grid-template-rows: 44px minmax(0, 1fr) 44px;
font-size: var(--text); line-height: var(--text-lh);
}
.lb:not([open]) { display: none; }
.lb::backdrop { background: var(--paper); }
.lb-img { grid-column: 1 / -1; grid-row: 2; place-self: center; max-width: none; outline: 1px solid var(--key); }
.lb-close { grid-column: 2; grid-row: 1; height: 44px; padding: 0 var(--side); }
.lb-nav { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; padding: 0 8px; }
.lb-nav button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
.lb { transition: opacity .18s, overlay .18s allow-discrete, display .18s allow-discrete; opacity: 0; }
.lb[open] { opacity: 1; }
@starting-style { .lb[open] { opacity: 0; } }
}
html:has(.lb[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.hero img { view-transition-name: hero; }