/* 日本語版 追加スタイル — site.css の上に重ねる */
:root{
  --jp-serif:'Noto Serif JP','Cormorant Garamond',serif;
  --jp-sans:'Zen Kaku Gothic New','Be Vietnam Pro',sans-serif;
}
html[lang="ja"] body{font-family:var(--jp-sans);font-weight:400;font-size:15px;line-height:2.05;letter-spacing:.04em;font-feature-settings:"palt" 1}
html[lang="ja"] p{line-break:strict;word-break:normal;overflow-wrap:anywhere}
/* JP typesetting v3 — wrap at phrase (文節) boundaries where supported; never strand punctuation */
html[lang="ja"] p,html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] blockquote,html[lang="ja"] dd,html[lang="ja"] li{line-break:strict;word-break:auto-phrase;overflow-wrap:anywhere}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] .jh-l,html[lang="ja"] .jh-xl,html[lang="ja"] .jh-m{text-wrap:balance}
html[lang="ja"] p{text-wrap:pretty}
/* intentional line breaks: br.m = mobile only, br.pc = desktop only */
br.m{display:none}
@media (max-width:760px){br.m{display:inline}br.pc{display:none}}
/* sentence-unit paragraphs: on wide screens each sentence starts its own line */
.jp-sents .s{display:inline}
@media (min-width:901px){.jp-sents .s{display:block}}
.kp{display:inline-block}
@media (max-width:760px){.kp{display:inline}}
.jh{font-family:var(--jp-serif);font-weight:300;letter-spacing:.08em;line-height:1.55}
.jh-xl{font-family:var(--jp-serif);font-weight:300;font-size:clamp(30px,4.2vw,64px);line-height:1.5;letter-spacing:.1em}
.jh-l{font-family:var(--jp-serif);font-weight:300;font-size:clamp(24px,2.8vw,42px);line-height:1.6;letter-spacing:.08em}
.jh-m{font-family:var(--jp-serif);font-weight:400;font-size:clamp(19px,1.7vw,24px);line-height:1.7;letter-spacing:.06em}
.en-sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(16px,1.3vw,20px);letter-spacing:.02em;opacity:.7}
.jp-body{font-size:15px;line-height:2.15;max-width:38em}
.jp-body p+p{margin-top:1.4em}
.nb{white-space:nowrap}

/* sub nav row (Photography / Essays) */
.hdr .subnav{position:absolute;right:var(--pad);top:100%;display:flex;gap:26px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:.5s;pointer-events:none}
.hdr.solid .subnav{opacity:.65;transform:none;pointer-events:auto;padding-top:6px}
.hdr .subnav a:hover{opacity:1;color:var(--lacquer)}
@media (max-width:1440px){.hdr .subnav{display:none}}
.drawer .sub{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px}
.drawer .sub a{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;line-height:2}
.drawer .langp{margin-top:34px;font-size:12px;letter-spacing:.24em;opacity:.7}
.drawer .langp a{display:inline;font:inherit}
@media (max-height:720px){.drawer a{font-size:clamp(28px,6vw,44px)}}

/* page hero JP */
.phero .jh-xl{margin-top:26px}
.phero .en-sub{margin-top:18px;opacity:.75}
.phero .sub{font-size:14px;line-height:2.1;letter-spacing:.06em}

/* section heading pattern */
.shead{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:end}
.shead .en-sub{margin-top:14px}
@media (max-width:900px){.shead{grid-template-columns:1fr}}

/* link list (to detail pages) */
.lk{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);transition:padding .5s,color .5s}
.dark .lk{border-color:var(--line-light)}
.lk:hover{padding-left:12px;color:var(--lacquer)}
.dark .lk:hover{color:var(--gold)}
.lk b{font-family:var(--jp-serif);font-weight:400;font-size:clamp(17px,1.5vw,21px);letter-spacing:.06em}
.lk small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.55}
.lk-wrap{border-top:1px solid var(--line)}
.dark .lk-wrap{border-color:var(--line-light)}
@media (max-width:640px){.lk{grid-template-columns:44px 1fr}.lk small{grid-column:2}}

.more{display:inline-flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-top:28px;border-bottom:1px solid currentColor;padding-bottom:8px}
.more::after{content:"→";transition:transform .4s}
.more:hover::after{transform:translateX(6px)}

/* photo grid */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1.2vw,18px)}
.pgrid .ph{position:relative;display:block}
.pgrid .ph img{position:absolute;inset:0}
.pgrid .cap-o{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;color:var(--paper);background:linear-gradient(0deg,rgba(13,12,10,.7),rgba(13,12,10,0));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pgrid .cap-o b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.6vw,24px);letter-spacing:.08em}
.pgrid .cap-o span{font-family:var(--jp-serif);font-size:13px;letter-spacing:.1em;opacity:.85}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr)}.pgrid > *{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5!important}.pgrid > .wide{grid-column:1/-1!important;aspect-ratio:3/2!important}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(10,9,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:var(--paper);font:inherit;font-size:12px;letter-spacing:.24em;cursor:pointer;padding:18px;opacity:.75}
.lb button:hover{opacity:1}
.lb .x{top:10px;right:10px}.lb .pv{left:10px;top:50%;transform:translateY(-50%)}.lb .nx{right:10px;top:50%;transform:translateY(-50%)}
.lb .ct{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--paper);font-size:11px;letter-spacing:.24em;opacity:.55}

/* mobile refinements */
@media (max-width:760px){
  .pgrid .cap-o{padding:12px 12px 11px;flex-direction:column;align-items:flex-start;gap:2px}
  .pgrid .cap-o .en{display:none}
  .pgrid .cap-o b{font-size:15px;letter-spacing:.1em}
  .pgrid .cap-o > span:last-child{font-size:11.5px}
  .jh-xl{line-height:1.42}
  .jh-l{line-height:1.5}
}

/* UI polish v2 — JP */
@media (max-width:760px){
  .ftr .big.jh{font-size:clamp(28px,8vw,38px)!important;line-height:1.55!important;letter-spacing:.08em!important}
  .jh-xl{font-size:clamp(28px,7.6vw,40px)}
}
.ftr .big.jh{font-size:clamp(30px,3.8vw,56px)!important;line-height:1.55!important;letter-spacing:.08em!important;margin-top:26px!important}
.ftr .big.jh + .btn{margin-top:44px!important}

/* SOP JP */
html[lang="ja"] .sop-sub{font-family:var(--jp-serif);font-style:normal;letter-spacing:.12em}
html[lang="ja"] .sop-p{font-size:14.5px;line-height:2.2}
html[lang="ja"] .sop-body,html[lang="ja"] .sop-words,html[lang="ja"] .sop-tag{font-family:var(--jp-serif);letter-spacing:.08em}
html[lang="ja"] .sop-body{font-size:clamp(16px,1.4vw,19px);line-height:2.3}
html[lang="ja"] .sop-words{font-size:clamp(18px,1.9vw,27px);line-height:1.95}
html[lang="ja"] .sop-x .sop-tag{font-style:normal}
html[lang="ja"] .sop-cols p{font-size:13.5px;line-height:2.05}
html[lang="ja"] .pr-list .row b{font-family:var(--jp-serif);font-size:16px;letter-spacing:.04em}
html[lang="ja"] .prf-main h2{font-size:clamp(22px,2.2vw,32px)}

/* page hero — lighter overlay so the photograph reads clearly; legibility from a soft local shade + text shadow */
body:is([data-page="work"],[data-page="video"]) .phero .bg::after{background:linear-gradient(180deg,rgba(22,20,15,.26) 0%,rgba(22,20,15,0) 20%,rgba(22,20,15,0) 58%,rgba(22,20,15,.42) 100%)}
body:is([data-page="work"],[data-page="video"]) .phero .inner{text-shadow:0 1px 3px rgba(0,0,0,.28),0 2px 26px rgba(0,0,0,.42)}
@media (max-width:760px){body:is([data-page="work"],[data-page="video"]) .phero .bg::after{background:linear-gradient(180deg,rgba(22,20,15,.32) 0%,rgba(22,20,15,0) 20%,rgba(22,20,15,.08) 45%,rgba(22,20,15,.58) 100%)}}

/* JP mobile headline sizing (keep 2–3 lines, no stranded characters) */
@media (max-width:760px){
  body[data-page="essays"] .jh-xl{font-size:clamp(23px,6.2vw,30px);letter-spacing:.06em}
}

/* small phones: long multi-line headings stay at 3 lines, never 4–5 fragments */
@media (max-width:430px){
  body:is([data-page="academy"],[data-page="greeting"],[data-page="social"]) .jh-l,
  body[data-page="social"] .full-t h2,body[data-page="social"] h2.rv{font-size:clamp(19px,5.3vw,23px);letter-spacing:.04em}
}