:root{--paper:#f2efe5;--sheet:#faf8ef;--ink:#1d2227;--muted:#545d66;--blue:#173bb5;--signal:#e1f76b;--rule:#b7b7ad;--mono:"Courier New",monospace;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;font-kerning:normal;line-height:1.65}
img,video{display:block;width:100%;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #0c67cd;outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(1260px,calc(100% - 80px));margin-inline:auto}
.skip{position:absolute;left:20px;top:-100px;background:var(--sheet);padding:12px;z-index:3}
.skip:focus{top:12px}
.masthead,.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);min-height:74px}
.masthead nav{display:flex;gap:clamp(12px,3vw,34px)}
.masthead nav a,.mark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:.88rem;white-space:nowrap}
.masthead nav a{min-width:44px;justify-content:center}
.masthead nav a:hover,.back:hover{color:var(--blue);text-decoration:underline}
.mark{gap:12px;font-family:var(--mono);letter-spacing:.05em}
.stamp{display:inline-grid;grid-auto-flow:column;place-content:center;background:var(--ink);color:white;height:35px;width:44px;letter-spacing:.04em}
.stamp span{color:var(--signal)}
.hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);padding-block:clamp(24px,3.6vw,54px) 24px;align-items:start;scroll-margin-top:12px}
.intro,.reel-module{min-width:0}
.eyebrow{margin:0;color:var(--blue);font-family:var(--mono);font-weight:700;letter-spacing:.055em;font-size:.78rem}
.eyebrow i{display:inline-block;width:.55em;height:.55em;background:var(--blue);vertical-align:baseline;margin-inline-end:.3em}
h1,h2,h3,p,figure{margin:0}
.intro h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(3.4rem,6.2vw,6.7rem);font-weight:900;line-height:.92;letter-spacing:-.065em;margin-block:10px 0}
.wordmark-reel{white-space:nowrap}
.wordmark-period{color:var(--blue);margin-inline-start:.035em}
.button{min-height:47px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:8px 15px;font-weight:750;text-decoration:none;cursor:pointer;border-radius:0;white-space:nowrap}
.primary{background:var(--blue);color:white}
.primary:hover{background:#112d8d}
.outline{background:transparent;border-color:var(--rule)}
.outline:hover{background:var(--sheet);border-color:var(--ink)}
.triangle{display:inline-block;width:0;height:0;border-top:.37em solid transparent;border-bottom:.37em solid transparent;border-left:.61em solid currentColor}
.player,.case-player{min-width:0;background:var(--ink);color:white;border:1px solid var(--ink);scroll-margin-top:12px}
.case-player figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.065em;display:flex;justify-content:space-between;align-items:center;padding:8px 13px;min-height:33px;gap:10px}
.video-shell{position:relative}
video{background:#080b10;aspect-ratio:16/9;object-fit:contain}
.poster-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid #fff9;border-radius:50%;background:#173bb5e8;color:white;font-size:1.6rem;display:grid;place-items:center;cursor:pointer}
.poster-play .triangle{margin-left:5px}
.poster-play:hover{background:var(--blue)}
.current{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;background:var(--sheet);color:var(--ink);padding:2px 12px 11px}
#current-name{font-weight:750;line-height:1.35;font-size:.98rem}
.current a{min-height:44px;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;color:var(--blue);font-weight:750;font-size:.82rem;text-decoration:none}
.current a:hover{text-decoration:underline}
.current-meta{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;gap:4px 14px;margin:0;font-size:.8rem;line-height:1.45}
.current-meta>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px}
.current-meta dt{font-weight:750;color:var(--blue)}
.current-meta dd{margin:0}
.status{background:var(--sheet);color:var(--ink);font-size:.85rem;padding:7px 12px}
.status:empty{display:none}
.section{border-top:1px solid var(--rule);padding-block:16px 32px;scroll-margin-top:10px}
.works h2,.about h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.35}
.works h2{margin-bottom:14px}
.reel-summary{display:flex;align-items:baseline;justify-content:space-between;gap:3px 12px;flex-wrap:wrap;margin-bottom:7px;color:var(--ink);font-size:.83rem;font-weight:700}
.reel-length{color:var(--muted);font-weight:500;white-space:nowrap}
.works-guide,.work-format{color:var(--muted);font-size:.8rem}
.work-use{font-size:.83rem;line-height:1.4;margin:0 0 3px}
.works h2{margin-bottom:2px}.works-guide{margin-bottom:11px}
.chapters{scroll-margin-top:12px}
.chapters summary{display:list-item;width:fit-content;min-height:44px;padding-block:10px;color:var(--blue);font-size:.86rem;font-weight:700;cursor:pointer}
.cue-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule)}
.cue{min-width:0;display:grid;grid-template-columns:auto 1fr;border-right:1px solid var(--rule);background:var(--sheet)}
.cue:nth-child(2n){border-right:0}
.cue:nth-last-child(n+3){border-bottom:1px solid var(--rule)}
.cue.is-active{background:#e7ebfa;box-shadow:inset 0 -3px var(--blue)}
.cue.is-active .cue-link{color:var(--blue)}
.cue-time{display:grid;grid-template-columns:.65em 7ch;gap:.5em;place-content:center;align-items:center;min-width:74px;min-height:49px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--blue);font:700 .78rem var(--mono);cursor:pointer;padding-inline:7px}
.cue-stamp{text-align:start;font-variant-numeric:tabular-nums;white-space:nowrap}
.cue-time:hover,.cue.is-active .cue-time{background:var(--blue);color:white}
.cue-link{padding:6px 9px;display:flex;gap:6px;align-items:center;justify-content:space-between;min-width:0;text-decoration:none;font-weight:750;font-size:.8rem;line-height:1.4}
.cue-icon{color:var(--blue)}
.cue-link:hover,.work-card:hover h3{color:var(--blue);text-decoration:underline}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(14px,2.5vw,30px);margin:0;padding:0;list-style:none}
.work-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:6px;min-width:0;height:100%;text-decoration:none;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.thumb{grid-column:1 / -1;overflow:hidden;background:var(--ink);margin-bottom:10px}
.thumb img{aspect-ratio:16/9;object-fit:cover;transition:transform .25s ease}
.work-card:hover .thumb img{transform:scale(1.025)}
.work-arrow{align-self:start;color:var(--blue);font:700 1.05rem var(--mono);line-height:1.3}.work-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.work-card h3{font-size:clamp(1.05rem,2vw,1.42rem);line-height:1.35;margin-block:2px 3px;overflow-wrap:anywhere}
.about{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:20px}
.about p{max-width:62ch}
.foot{border-top:1px solid var(--rule);border-bottom:0;color:var(--muted);font:700 .76rem var(--mono);min-height:59px}
.case{max-width:1100px;padding-top:18px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue);font-weight:750;text-decoration:none}
.case-title{margin-block:15px 21px}
.case-title h1{font-size:clamp(2rem,5.4vw,4.6rem);line-height:1.2;text-wrap:balance;overflow-wrap:anywhere;margin:7px 0 13px}
.case-title>p:last-child{font-size:clamp(1.03rem,2vw,1.4rem);font-weight:700}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:10px 22px;padding:10px 0 12px;border-top:1px solid var(--rule);margin:0 0 7px}
.case-facts dt{font-size:.78rem;font-weight:750;color:var(--blue)}
.case-facts dd{margin:3px 0 0;font-weight:700}
.case-facts .credit-scope{font-size:.82rem;font-weight:500;color:var(--muted)}
.external-video{display:block}.external-video img{aspect-ratio:16/9;height:auto;object-fit:cover}
.external-video .button{position:absolute;inset:auto auto 12px 12px;gap:7px;max-width:calc(100% - 24px)}
.case-player video{max-height:66vh}
.case-player .poster-play[hidden],.case-play-status:empty{display:none}
.case-player .poster-play:disabled{cursor:progress;opacity:.72}
.case-play-status{font-size:.8rem;padding:5px 13px}
.case-editions{display:flex;flex-wrap:wrap;gap:6px;margin-block:8px}
.case-editions .button{min-height:44px;padding:7px 11px;font-size:.84rem}
.case-editions button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.credits .credit-scope{font-size:.83rem;font-weight:500;color:var(--muted)}
.case-basis{color:var(--muted);font-size:.82rem;margin-block:15px}
.case-basis summary{cursor:pointer;width:fit-content;min-height:44px;color:var(--blue);padding-block:11px}
.case-basis p{margin-top:3px}
.credits,.case-notes{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-bottom:1px solid var(--rule)}
.credits{padding-block:19px;margin:0}
.credits dt{font:700 .76rem var(--mono);color:var(--blue)}
.credits dd{font-weight:750;margin:5px 0 0}
.case-notes{padding-block:25px}
.case-notes h2{font-size:1.25rem;margin:2px 0 4px}
.case-notes p{max-width:43ch}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:25px}
.frames img{aspect-ratio:16/9;object-fit:cover}
.frames figcaption{font-size:.8rem;color:var(--muted);margin-top:5px}
.next{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:23px 30px}
.next-link{display:grid;align-content:center;min-height:44px;margin-inline-start:auto;text-align:end;text-decoration:none}
.next-link:hover strong{text-decoration:underline}
@media(max-width:849px){
  .wrap{width:min(680px,calc(100% - 34px))}
  .hero{grid-template-columns:1fr;gap:12px;padding-block:16px 8px}
  .intro h1{font-size:clamp(1.85rem,9.6vw,5.2rem);line-height:.98;margin-block:5px 0}
  .intro h1 br{display:none}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .masthead{min-height:58px}
  .case-player video{max-height:none}
}
@media(max-width:520px){.wrap{width:calc(100% - 28px)}.mark{gap:5px;font-size:.73rem}.stamp{width:34px;height:29px}.masthead nav{gap:12px}.masthead nav a{font-size:.77rem}.masthead nav a:last-child{display:none}.button{font-size:.86rem;min-height:44px}.poster-play{width:52px;height:52px;font-size:1.25rem}.current{gap:5px;padding:4px 8px}.current a{font-size:.75rem}#current-name{font-size:.78rem}.cue-list{grid-template-columns:1fr}.cue,.cue:nth-child(2n){border-right:0}.cue:not(:last-child){border-bottom:1px solid var(--rule)}.cue-link{font-size:.86rem}.cue-time{min-width:82px;min-height:45px}.gallery{gap:15px 10px}.thumb{margin-bottom:7px}.work-card{padding-bottom:9px}.work-card .eyebrow{font-size:.7rem;letter-spacing:.04em}.work-card h3{font-size:.96rem;margin-block:2px 0}.work-arrow{font-size:.87rem}.about,.credits,.case-notes{grid-template-columns:1fr;gap:12px}.frames{gap:9px}.next{flex-wrap:wrap}}
@media(max-width:620px){.current-meta{grid-template-columns:1fr}.current{padding-bottom:10px}#current-name{font-size:.93rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}