/* Cinema portfolio. One selected work, a clear library, original compositions. */
body.portfolio-edition {
 --paper:#f5f5f7; --soft:#e9eaed; --ink:#17191d; --slate:#60656e; --line:#dcdde2;
 --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',sans-serif;
 background:var(--paper); color:var(--ink); font:15px/1.7 var(--sans);
}
html:has(body.portfolio-edition) { scroll-padding-top:110px; }
body.portfolio-edition ::selection { background:#c9e3e7; color:#10252a; }
body.portfolio-edition :is(a,button):focus-visible { outline:2px solid #2874ba; outline-offset:4px; }
body.portfolio-edition .skip { z-index:100; }
body.portfolio-edition header {
 position:sticky; top:0; z-index:20; display:flex; align-items:center; min-height:80px;
 gap:26px; padding:12px max(32px,calc((100vw - 1360px)/2));
 border-bottom:1px solid #17191d12; background:#f5f5f7f5;
}
body.portfolio-edition .identity { flex-shrink:0; font:650 22px/1.15 var(--sans); letter-spacing:-.045em; }
body.portfolio-edition .identity span { display:block; }
body.portfolio-edition .identity .identity-ja { font:400 9px/1.4 var(--sans); color:var(--slate); letter-spacing:.14em; margin-top:4px; }
body.portfolio-edition .identity .identity-name { font:inherit; color:var(--ink); letter-spacing:inherit; margin:0; }
body.portfolio-edition .header-role { font-size:10px; color:var(--slate); }
body.portfolio-edition header nav { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; }
body.portfolio-edition header nav a { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; min-width:44px; min-height:44px; border-radius:24px; text-decoration:none; white-space:nowrap; color:var(--slate); }
body.portfolio-edition header nav a[aria-current='page'] { text-decoration:none; color:var(--ink); background:#fff; box-shadow:0 1px 5px #17191d12; }
body.portfolio-edition header nav a:hover { color:var(--ink); background:#e7e7ea; }
body.portfolio-edition #language { flex-shrink:0; font:400 12px/1.3 var(--sans); white-space:nowrap; padding:10px; min-width:44px; min-height:44px; margin:0; border:0; color:var(--ink); }
body.portfolio-edition[data-page='videos'] main { width:min(calc(100% - 64px),1360px); max-width:none; margin:48px auto 0; }
body.portfolio-edition .intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px; }
body.portfolio-edition .intro h1 { font:650 clamp(44px,5vw,72px)/1.04 var(--sans); letter-spacing:-.06em; color:var(--ink); }
body.portfolio-edition .intro p { font:400 16px/1.6 var(--sans); max-width:350px; margin:0 0 4px; color:var(--slate); text-wrap:pretty; }
body.portfolio-edition .browsing-tools { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; min-width:0; }
body.portfolio-edition .filters { display:flex; flex-wrap:nowrap; gap:3px; min-width:0; max-width:100%; margin:0; padding:4px; border-radius:28px; background:#e7e7ea; overflow-x:auto; scrollbar-width:thin; overscroll-behavior-inline:contain; touch-action:auto; }
body.portfolio-edition .filters button { scroll-margin-top:120px; flex:0 0 auto; border-radius:24px; min-width:44px; min-height:44px; padding:10px 17px; font-size:12px; line-height:1.4; white-space:nowrap; color:#60656e; }
body.portfolio-edition .filters button[aria-pressed='true'] { color:var(--ink); background:#fff; box-shadow:0 1px 5px #17191d12; }
body.portfolio-edition .filters button:hover { color:var(--ink); }
body.portfolio-edition .browse-link { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; font-size:13px; color:#32667a; text-decoration:underline; text-underline-offset:5px; }
body.portfolio-edition .screening { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(320px,.9fr); gap:36px; align-items:start; }
body.portfolio-edition .current {
 min-width:0; padding:32px; border-radius:28px; background:#0b2025; color:#f4f7f7;
 --current-muted:#b7c9cd; --current-line:#385057;
}
body.portfolio-edition .current[data-project='moonlight-poc'] { background:#251913; --current-muted:#c8b7aa; --current-line:#604b3e; }
body.portfolio-edition .current[data-category='spec'],body.portfolio-edition .current[data-category='study'] { background:#181c27; --current-muted:#bcc5d8; --current-line:#444b5d; }
body.portfolio-edition .current[data-provider='pending'] { background:#222630; --current-muted:#c0c6d2; --current-line:#484e5b; }
body.portfolio-edition .current :is(a,button):focus-visible { outline-color:#a6d6e8; }
body.portfolio-edition .work-heading { margin:0 0 27px; align-items:center; gap:20px; }
body.portfolio-edition .work-heading>div { min-width:0; }
body.portfolio-edition #work-type { font-size:12px; line-height:1.6; color:var(--current-muted); }
body.portfolio-edition .work-heading h2 { font:650 clamp(34px,3.6vw,54px)/1.05 var(--sans); letter-spacing:-.045em; margin-top:10px; overflow-wrap:break-word; text-wrap:balance; }
body.portfolio-edition #stop { color:#e7f0f2; border-color:#6d878f; padding:10px 0; font-size:12px; }
body.portfolio-edition .media { border-radius:12px; background:#060b0f; aspect-ratio:16/9; min-width:0; scroll-margin-top:100px; }
body.portfolio-edition .media img,body.portfolio-edition .media video { width:100%; height:100%; object-fit:contain; }
body.portfolio-edition .play { padding:12px 18px; left:20px; bottom:18px; font-size:12px; border:1px solid #ffffff55; border-radius:24px; background:#101d27e8; min-height:44px; }
body.portfolio-edition .play:hover { background:#233c49; }
body.portfolio-edition .work-role { color:var(--current-muted); font:400 12px/1.8 var(--sans); margin-top:24px; }
body.portfolio-edition .work-description { font:550 clamp(21px,2vw,27px)/1.45 var(--sans); letter-spacing:-.025em; max-width:660px; margin-top:20px; text-wrap:pretty; }
body.portfolio-edition .work-note { font:400 12px/1.8 var(--sans); color:var(--current-muted); margin-top:20px; max-width:650px; }
body.portfolio-edition .source-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; margin-top:18px; color:#e7f0f2; border-color:#6d878f; }
body.portfolio-edition #play-status { color:var(--current-muted); font-size:12px; line-height:1.7; margin-top:12px; }
body.portfolio-edition #play-status:empty { display:none; }
body.portfolio-edition .festival-panel { border-color:var(--current-line); margin-top:25px; padding-top:22px; }
body.portfolio-edition .festival-panel h3 { font:600 13px/1.5 var(--sans); color:#e7f0f2; margin:0 0 15px; }
body.portfolio-edition .festival-panel li { color:var(--current-muted); font-size:12px; line-height:1.8; margin:15px 0; }
body.portfolio-edition .festival-panel li:last-child { margin-bottom:0; }
body.portfolio-edition .festival-panel a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:5px; color:#e7f0f2; }
body.portfolio-edition .pending-message { border:1px solid #ffffff40; border-radius:8px; padding:12px 16px; background:#141b26eb; left:18px; bottom:18px; right:18px; width:max-content; max-width:calc(100% - 36px); font-size:12px; }
body.portfolio-edition .selection { display:grid; grid-template-columns:1fr auto; gap:0 12px; position:sticky; top:104px; min-width:0; margin:0; scroll-margin-top:104px; }
body.portfolio-edition .selection>h2 { font:650 23px/1.3 var(--sans); letter-spacing:-.035em; margin:0 0 20px; }
body.portfolio-edition .work-count { align-self:baseline; justify-self:end; font-size:12px; line-height:1.8; margin:0; }
body.portfolio-edition #works { grid-column:1/-1; max-height:calc(100dvh - 170px); overflow-y:auto; padding-right:5px; scrollbar-color:#b9bdc7 transparent; scrollbar-width:thin; }
body.portfolio-edition .work-button { width:100%; grid-template-columns:140px minmax(0,1fr); gap:18px; padding:14px 8px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; min-height:110px; }
body.portfolio-edition .work-button:first-child { padding-top:8px; }
body.portfolio-edition .work-button[aria-pressed='true'] { background:#e5edf0; border-radius:10px; box-shadow:inset 3px 0 #376c79; }
body.portfolio-edition .thumb { height:86px; background:transparent; overflow:hidden; border-radius:7px; }
body.portfolio-edition .thumb img { width:100%; height:100%; object-fit:contain; }
body.portfolio-edition .work-button strong { font:600 17px/1.3 var(--sans); letter-spacing:-.025em; overflow-wrap:break-word; }
body.portfolio-edition .work-button small { font:400 11px/1.6 var(--sans); color:var(--slate); margin-top:8px; }
body.portfolio-edition .work-button:hover strong { text-decoration:underline; text-decoration-thickness:1px; }
/* Portrait pieces become deliberate two-column presentations, with uncropped artwork. */
body.portfolio-edition .current[data-orientation='portrait'] { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:0 28px; align-items:start; }
body.portfolio-edition .current[data-orientation='portrait']>.media { grid-column:1; grid-row:1/span 9; height:min(65dvh,650px); aspect-ratio:auto; background:transparent; }
body.portfolio-edition .current[data-orientation='portrait']>.media img,body.portfolio-edition .current[data-orientation='portrait']>.media video { width:100%; height:100%; object-fit:contain; }
body.portfolio-edition .current[data-orientation='portrait']>:not(.media) { grid-column:2; }
body.portfolio-edition .current[data-orientation='portrait'] .work-heading { display:block; margin:0; }
body.portfolio-edition .current[data-orientation='portrait'] .work-heading h2 { font-size:clamp(30px,2.7vw,42px); }
body.portfolio-edition .current[data-orientation='portrait'] .work-description { font-size:23px; }
body.portfolio-edition .current[data-orientation='portrait'] #stop { margin-top:15px; }
body.portfolio-edition .current[data-orientation='portrait'] .play { left:10px; bottom:12px; padding:11px 14px; }
body.portfolio-edition footer { width:100%; max-width:none; padding:34px max(32px,calc((100vw - 1360px)/2)); margin:90px 0 0; border:0; background:#17191d; color:#b9bec9; gap:28px; font-size:12px; }
body.portfolio-edition footer>a { min-height:44px; padding:10px 19px; border:1px solid #666e7b; border-radius:24px; color:#fff; font-size:13px; }
body.portfolio-edition footer>a:hover { background:#303640; }
html[lang='ja'] body.portfolio-edition .intro h1 { font-family:var(--sans); font-weight:650; letter-spacing:-.04em; line-height:1.2; }
html[lang='ja'] body.portfolio-edition .work-description { font-family:PortalMincho,'Hiragino Mincho ProN','Yu Mincho',serif; font-weight:400; font-size:23px; line-height:1.85; letter-spacing:.01em; }
@media(max-width:1150px) {
 body.portfolio-edition .header-role { display:none; }
 body.portfolio-edition .screening { grid-template-columns:minmax(0,1.7fr) minmax(290px,.9fr); gap:26px; }
 body.portfolio-edition .current { padding:26px; }
 body.portfolio-edition .work-button { grid-template-columns:106px minmax(0,1fr); gap:14px; }
 body.portfolio-edition .thumb { height:70px; }
 body.portfolio-edition .current[data-orientation='portrait'] { display:block; }
 body.portfolio-edition .current[data-orientation='portrait']>.media { height:min(62dvh,580px); margin-top:25px; }
 body.portfolio-edition .current[data-orientation='portrait'] .work-heading h2 { font-size:40px; }
}
@media(max-width:900px) {
 body.portfolio-edition .screening { display:block; }
 body.portfolio-edition .selection { position:static; margin-top:48px; }
 body.portfolio-edition #works { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px 20px; max-height:none; overflow:visible; padding:0; }
 body.portfolio-edition .work-button { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:10px; border:0; border-radius:10px; min-width:0; }
 body.portfolio-edition .work-button:first-child { padding-top:10px; }
 body.portfolio-edition .thumb { width:100%; height:auto; aspect-ratio:16/10; }
 body.portfolio-edition .work-button strong { font-size:18px; }
 body.portfolio-edition .work-button small { font-size:11px; }
 body.portfolio-edition .current[data-orientation='portrait'] { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:0 32px; }
 body.portfolio-edition .current[data-orientation='portrait']>.media { margin:0; height:min(65dvh,650px); }
 body.portfolio-edition .current[data-orientation='portrait'] .work-heading h2 { font-size:38px; }
}
@media(max-width:680px) {
 html:has(body.portfolio-edition) { scroll-padding-top:120px; }
 body.portfolio-edition header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 12px; padding:8px 20px 6px; min-height:0; }
 body.portfolio-edition .identity { grid-column:1; grid-row:1; min-height:44px; display:flex; flex-direction:column; justify-content:center; font-size:20px; }
 body.portfolio-edition .identity .identity-ja { font-size:8px; margin-top:3px; }
 body.portfolio-edition header nav { grid-column:1/-1; grid-row:2; margin:0; gap:4px; justify-content:flex-start; }
 body.portfolio-edition header nav a { font-size:11px; padding:10px 13px; }
 body.portfolio-edition #language { grid-column:2; grid-row:1; font-size:11px; padding:10px 0 10px 8px; }
 body.portfolio-edition[data-page='videos'] main { width:calc(100% - 32px); margin-top:32px; }
 body.portfolio-edition .intro { display:block; margin-bottom:24px; }
 body.portfolio-edition .intro h1 { font-size:45px; letter-spacing:-.055em; }
 body.portfolio-edition .intro p { font-size:14px; line-height:1.65; margin-top:16px; max-width:320px; }
 body.portfolio-edition .browsing-tools { display:block; margin-bottom:22px; }
 body.portfolio-edition .filters { width:100%; border-radius:26px; }
 body.portfolio-edition .filters button { padding:10px 14px; font-size:11px; }
 body.portfolio-edition .browse-link { font-size:12px; margin-top:4px; }
 body.portfolio-edition .current { padding:25px 20px; border-radius:20px; }
 body.portfolio-edition .work-heading { display:flex; margin-bottom:22px; gap:16px; }
 body.portfolio-edition #work-type { font-size:11px; line-height:1.65; }
 body.portfolio-edition .work-heading h2 { font-size:38px; line-height:1.05; margin-top:10px; }
 body.portfolio-edition #stop { font-size:11px; padding:8px 0; }
 body.portfolio-edition .media { margin-inline:-20px; border-radius:0; scroll-margin-top:120px; }
 body.portfolio-edition .play { left:14px; bottom:14px; font-size:11px; padding:11px 15px; }
 body.portfolio-edition .work-role { font-size:11px; margin-top:21px; line-height:1.8; }
 body.portfolio-edition .work-description { font-size:23px; line-height:1.5; margin-top:18px; }
 body.portfolio-edition .work-note { font-size:11px; line-height:1.8; margin-top:19px; }
 body.portfolio-edition .source-link { font-size:12px; margin-top:15px; }
 body.portfolio-edition .festival-panel { margin-top:21px; padding-top:20px; }
 body.portfolio-edition .festival-panel li { font-size:11px; line-height:1.85; }
 body.portfolio-edition .selection { margin-top:40px; }
 body.portfolio-edition .selection>h2 { font-size:25px; margin-bottom:19px; }
 body.portfolio-edition .work-count { font-size:11px; }
 body.portfolio-edition #works { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 12px; }
 body.portfolio-edition .work-button { padding:8px; gap:12px; }
 body.portfolio-edition .work-button:first-child { padding-top:8px; }
 body.portfolio-edition .work-button strong { font-size:17px; line-height:1.3; }
 body.portfolio-edition .work-button small { font-size:10px; line-height:1.6; margin-top:8px; }
 body.portfolio-edition .current[data-orientation='portrait'] { display:block; }
 body.portfolio-edition .current[data-orientation='portrait']>.media { height:min(66dvh,600px); margin:24px 0 0; }
 body.portfolio-edition .current[data-orientation='portrait'] .work-heading h2 { font-size:38px; }
 body.portfolio-edition .current[data-orientation='portrait'] .work-description { font-size:23px; }
 body.portfolio-edition .current[data-orientation='portrait'] .play { left:12px; }
 body.portfolio-edition .pending-message { left:14px; right:14px; bottom:14px; max-width:calc(100% - 28px); font-size:11px; padding:11px 14px; }
 body.portfolio-edition footer { margin-top:65px; padding:28px 24px; gap:14px 25px; font-size:11px; }
 body.portfolio-edition footer span:last-child { margin-left:auto; width:auto; }
 html[lang='ja'] body.portfolio-edition .intro h1 { font-size:38px; line-height:1.2; }
 html[lang='ja'] body.portfolio-edition .work-description { font-size:20px; line-height:1.9; }
 html[lang='ja'] body.portfolio-edition .current[data-orientation='portrait'] .work-description { font-size:20px; line-height:1.9; }
}
@media(max-width:360px) {
 body.portfolio-edition header { padding-inline:16px; }
 body.portfolio-edition .intro h1 { font-size:40px; }
 body.portfolio-edition .work-heading { display:block; }
 body.portfolio-edition #stop { margin-top:12px; }
 body.portfolio-edition .work-button strong { font-size:16px; }
 body.portfolio-edition .work-button { padding:7px; }
 body.portfolio-edition footer { flex-wrap:wrap; }
 body.portfolio-edition footer span:last-child { width:100%; margin-left:0; }
}
@media(prefers-reduced-motion:reduce) {
 body.portfolio-edition *,body.portfolio-edition *::before,body.portfolio-edition *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Portrait stages follow the real poster, then the real video on Play. */
body.portfolio-edition .current[data-orientation="portrait"]>.media { height:auto; aspect-ratio:var(--frame-aspect,9/16); max-height:70dvh; }