:root{
  --bg:#fbfaf8; --bg2:#f1efeb; --ink:#161513; --ink2:#4d4a45; --mute:#8b877f; --line:#dcd8d1;
  --accent:#a8323f; --accent-ink:#ffffff;
  --serif:"Cormorant Garamond","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --sans:"Manrope","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --jserif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Cormorant Garamond",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#141311; --bg2:#1d1b18; --ink:#efece6; --ink2:#c2bdb4; --mute:#8b867d; --line:#2e2b27; --accent:#a8323f; --accent-ink:#ffffff; }
}
:root[data-theme="dark"]{ --bg:#141311; --bg2:#1d1b18; --ink:#efece6; --ink2:#c2bdb4; --mute:#8b867d; --line:#2e2b27; --accent:#a8323f; --accent-ink:#ffffff; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.lang-en .jp{display:none} body.lang-ja .en{display:none}
body.lang-ja{font-family:var(--sans)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:.18em;font-weight:400}
.brand small{font-family:var(--jserif);font-size:13px;letter-spacing:.3em;color:var(--mute);margin-left:10px}
.links{display:flex;gap:22px;margin-left:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.links a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:11px;letter-spacing:.1em}
.lang{flex-shrink:0}
.lang button{background:none;border:0;color:var(--mute);padding:6px 11px;white-space:nowrap;cursor:pointer;font:inherit;letter-spacing:inherit}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.cta{background:var(--accent);color:var(--accent-ink);padding:9px 18px;border-radius:999px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.cta:hover{filter:brightness(1.08)}
@media (max-width:760px){ .links{display:none} .brand small{display:none} .nav .wrap{gap:10px} .brand{font-size:20px;letter-spacing:.14em} .lang{margin-left:auto} .cta{padding:8px 14px} }

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end;padding:clamp(28px,5vw,64px) 0 clamp(36px,6vw,80px)}
.hero-img{position:relative;margin:0}
.hero-img img{width:100%;height:auto;display:block;aspect-ratio:967/1400;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.tate{position:absolute;top:0;right:-14px;transform:translateX(100%);writing-mode:vertical-rl;font-family:var(--jserif);font-size:clamp(18px,2.2vw,26px);letter-spacing:.5em;color:var(--mute);line-height:1}
.hero-txt{padding-bottom:clamp(8px,2vw,24px)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,9vw,120px);line-height:.92;letter-spacing:.04em;margin:0 0 22px;text-wrap:balance}
.tag{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-style:italic;font-weight:300;color:var(--ink2);margin:0 0 28px;line-height:1.35}
.tag .jp{font-family:var(--jserif);font-style:normal;font-size:.85em}
.facts{display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:6px;font-size:13px;color:var(--ink2);margin:0 0 30px;font-variant-numeric:tabular-nums}
.facts dt{color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding-top:2px}
.facts dd{margin:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ghost{border:1px solid var(--line);padding:9px 18px;border-radius:999px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.ghost:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:820px){ .hero{grid-template-columns:1fr;align-items:start} .hero-img{max-width:420px} .tate{right:-10px} }

/* sections */
section{padding:clamp(40px,6vw,88px) 0;border-top:1px solid var(--line)}
.sh{display:flex;align-items:baseline;gap:18px;margin:0 0 34px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);letter-spacing:.02em;margin:0;line-height:1.1}
h2 .jp{font-family:var(--jserif);font-size:.85em}
.sh .sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* selected works */
.works{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.work{display:grid;grid-template-columns:96px 1fr auto 28px;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:padding-left .25s}
.work:hover{padding-left:10px}
.w-year{font-family:var(--serif);font-size:18px;color:var(--mute);font-variant-numeric:tabular-nums}
.w-title{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.15}
.w-title .jp{font-family:var(--jserif);font-size:.82em}
.w-note{font-size:12px;color:var(--mute);letter-spacing:.04em;text-align:right}
.w-arrow{color:var(--mute);text-align:right}
.work:hover .w-arrow{color:var(--accent)}
@media (max-width:640px){
  .work{grid-template-columns:56px minmax(0,1fr) 20px;gap:6px 12px;align-items:baseline}
  .work:hover{padding-left:0}
  .w-year{grid-column:1;grid-row:1;font-size:15px}
  .w-title{grid-column:2;grid-row:1;font-size:clamp(19px,5.6vw,24px);overflow-wrap:anywhere}
  .w-arrow{grid-column:3;grid-row:1}
  .w-note{grid-column:2/4;grid-row:2;text-align:left}
}

/* bio */
.bio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px)}
.bio-txt p{max-width:62ch;margin:0 0 1.2em;font-size:16px;color:var(--ink2)}
.bio-txt em{font-style:italic;font-family:var(--serif);font-size:1.08em;color:var(--ink)}
.bio-side{font-size:13px;color:var(--ink2)}
.bio-side .k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:18px 0 4px}
.bio-side a{border-bottom:1px solid var(--line)} .bio-side a:hover{border-color:var(--ink)}
@media (max-width:820px){ .bio{grid-template-columns:1fr} }

/* filmography */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px)}
@media (max-width:820px){ .cols{grid-template-columns:1fr} }
h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500;margin:0 0 12px}
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px 1fr;column-gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:baseline}
a.row:hover .r-title{color:var(--accent)}
.r-year{color:var(--mute);font-variant-numeric:tabular-nums;font-size:13px}
.r-title{color:var(--ink)}
.r-note{grid-column:2;font-size:12px;color:var(--mute)}
details{margin-top:8px}
summary{cursor:pointer;list-style:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:12px 0}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:18px;color:var(--accent)}
details[open] summary::before{content:"–"}

/* awards */
.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.award{padding:26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.a-body{font-size:12px;letter-spacing:.08em;color:var(--mute)}
.a-prize{font-family:var(--serif);font-size:24px;line-height:1.2}
.a-prize .jp{font-family:var(--jserif);font-size:.85em}
.others{margin-top:44px;border-top:1px solid var(--line)}
.other{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.o-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.o-v{color:var(--ink2)}
@media (max-width:640px){ .other{grid-template-columns:1fr;gap:4px} }

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;grid-auto-flow:dense}
.g{margin:0;overflow:hidden;background:var(--bg2)}
.g img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.g:hover img{transform:scale(1.03)}
.g{aspect-ratio:2/3}
.g.wide{grid-column:span 2;aspect-ratio:auto}
/* small source images: never upscale, show at natural size or smaller */
.g.natural{display:flex;align-items:center;justify-content:center}
.g.natural img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.g.natural:hover img{transform:none}
.g.stack{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.g.stack img{width:auto;max-width:100%;height:auto;flex:none;object-fit:contain}
.g.stack:hover img{transform:none}
@media (max-width:640px){ .gallery{grid-template-columns:repeat(2,1fr)}  }

/* contact */
.contact{background:var(--ink);color:var(--bg);border-top:0}
.contact .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center}
.contact h2{color:var(--bg);margin-bottom:14px}
.contact p{color:color-mix(in srgb,var(--bg) 70%,transparent);max-width:48ch;margin:0}
.c-card{display:flex;flex-direction:column;gap:16px}
.c-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--bg) 55%,transparent)}
.c-agency{font-family:var(--serif);font-size:30px;line-height:1.1}
.c-mail{display:inline-block;font-family:var(--serif);font-size:clamp(22px,3vw,34px);letter-spacing:.02em;border-bottom:2px solid var(--accent);padding-bottom:4px;width:max-content;max-width:100%;word-break:break-all}
.c-mail:hover{color:var(--accent)}
.c-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.c-btns .cta{padding:12px 22px}
.c-btns .ghost{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.c-btns .ghost:hover{border-color:var(--bg)}
@media (max-width:820px){ .contact .wrap{grid-template-columns:1fr} }
footer{background:var(--ink);color:color-mix(in srgb,var(--bg) 45%,transparent);font-size:11px;letter-spacing:.1em;padding:18px 0 28px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.c-person{font-family:var(--serif);font-size:20px;line-height:1.2;margin-top:-6px}
.c-person .c-k{font-family:var(--sans);margin-right:10px}