/* HOU MAN DO — the opening film. Ink, paper, red: the academy's own three. */
#stage{position:fixed;top:0;left:0;width:100%;height:100%;display:block;background:var(--ink);z-index:0;transition:opacity .6s ease}
#film{position:relative;z-index:1}
html.filmover #stage{opacity:.16}   /* the stage stays under the page, low, so the film never cuts to a wall */
.nogl #stage{display:none}

.chap{position:relative;height:calc(var(--len,2) * 100vh)}
@supports (height:100lvh){.chap{height:calc(var(--len,2) * 100lvh)}}
.nogl .chap{height:auto;min-height:0;padding:14vh 0 8vh}

/* the overlay layer: each chapter's words, faded by the engine */
#ov{position:fixed;inset:0;z-index:2;pointer-events:none}
.ov{position:absolute;inset:0;opacity:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
.ov.on a,.ov.on button{pointer-events:auto}
.ov [data-at]{opacity:0;will-change:opacity,transform,filter;filter:blur(calc((1 - var(--k,0)) * 9px))}   /* engraved: the words come out of the dark sharp */
.ov .kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--red);margin-bottom:18px;font-weight:600}
.ov h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,8.6vw,118px);line-height:.92;letter-spacing:calc(.04em + (1 - var(--k,0)) * .12em);color:var(--paper);margin:0 0 18px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ov h2 em{font-style:normal;color:var(--red)}
.ov p{max-width:620px;font-size:clamp(14px,1.45vw,18px);line-height:1.6;color:var(--paper-dim);margin:0;font-weight:300;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ov p b{color:var(--paper);font-weight:600}
.ov .line{font-family:var(--display);font-size:clamp(18px,2.4vw,28px);letter-spacing:.22em;color:var(--paper);margin-top:26px}
.ov .line i{font-style:normal;color:var(--red);margin:0 10px}
.ov .foot{position:absolute;left:0;right:0;bottom:max(34px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:28px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-dim)}
.ov .foot b{color:var(--paper);font-weight:600}

/* placed words: the three belts, the stats, the arts */
.ov .trio{display:flex;gap:clamp(22px,5vw,70px);margin-top:28px}
.ov .trio span{display:flex;flex-direction:column;align-items:center;gap:7px}
.ov .trio b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.6vw,32px);letter-spacing:.12em;color:var(--paper)}
.ov .trio i{font-style:normal;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim)}
.ov .trio u{display:block;width:34px;height:4px;text-decoration:none;background:var(--paper)}
.ov .stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,4vw,56px);margin-top:28px}
.ov .stats span{display:flex;flex-direction:column;align-items:center}
.ov .stats b{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1;color:var(--paper)}
.ov .stats i{font-style:normal;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim);margin-top:6px}
@media(max-width:620px){.ov .stats{grid-template-columns:repeat(2,auto);gap:18px 40px}.ov .trio{gap:18px}}

/* the arts: three words standing one at a time, placed to the side of the motif */
.ov.arts{justify-content:flex-end;padding-bottom:clamp(90px,18vh,180px)}
.ov .art-w{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.ov .art-w h2{font-size:clamp(40px,7.4vw,104px)}
.ov .art-w .o{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--paper-dim)}

/* the door: the two buttons live in the film; a soft scrim keeps the words legible over the light */



.ov .door-btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.ov .door-btns .btn{font-size:16px;padding:17px 30px 14px}
.ov .door-btns .btn.ghost{border-color:rgba(242,237,228,.45)}
.ov .door-fine{margin-top:18px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}

/* the still plates (no WebGL / reduced motion): the same words, printed */
.nogl .ov{position:static;opacity:1!important;pointer-events:auto;padding:0 24px;min-height:0}
.nogl .ov [data-at]{opacity:1!important;transform:none!important}
.nogl #ov{position:static;display:block}
.nogl .ov .foot{position:static;margin-top:26px}
.nogl .ov .art-w{position:static;transform:none;margin-bottom:28px}

/* the progress hairline and the chapter rail */
#prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:7;pointer-events:none}
#prog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red-hot));transform-origin:0 50%;transform:scaleX(0)}
#rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:5}
#rail a{position:relative;display:block;width:7px;height:7px;border-radius:50%;border:1px solid rgba(242,237,228,.4);box-sizing:border-box}
#rail a.on{background:var(--red);border-color:var(--red);box-shadow:0 0 10px rgba(209,67,42,.7)}
#rail a span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
#rail a:hover span,#rail a:focus-visible span{opacity:1}
html.filmover #rail,.nogl #rail,html.filmover #prog{display:none}
@media(max-width:760px){#rail{display:none}}

/* the scroll hint on the first chapter */
.ov .hint{position:absolute;left:50%;bottom:max(30px,env(safe-area-inset-bottom));transform:translateX(-50%);width:1px;height:54px;background:linear-gradient(var(--paper),transparent);opacity:.7;animation:hintdrop 2.2s ease-in-out infinite}
@keyframes hintdrop{0%{transform:translate(-50%,-10px);opacity:0}30%{opacity:.8}100%{transform:translate(-50%,16px);opacity:0}}
.nogl .hint{display:none}

/* phones: nothing may run wider than the screen, or the layout viewport grows and the stage drifts off-centre */
#film,#ov,.ov{max-width:100vw}
.ov .kick,.ov .line,.ov .foot,.ov .door-fine{white-space:normal}
@media(max-width:480px){
  .ov{padding:0 18px}
  .ov .kick{font-size:9.5px;letter-spacing:.22em;margin-bottom:14px}
  .ov .line{font-size:17px;letter-spacing:.16em}
  .ov .line i{margin:0 6px}
  .ov p{font-size:14px}
  .ov .foot{gap:14px;font-size:9.5px;letter-spacing:.2em;flex-wrap:wrap;padding:0 18px}
  .ov .door-btns .btn{font-size:15px;padding:15px 22px 12px}
  .ov .door-fine{font-size:10.5px;letter-spacing:.1em}
  .ov h2{font-size:clamp(40px,12vw,64px)}
  .ov .art-w h2{font-size:clamp(36px,11vw,56px)}
}

/* the creed, in a hand that is not the display face */
.ov .hand{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,34px);color:var(--paper);letter-spacing:.02em;margin-top:22px}
.ov .hand i{font-style:normal;color:var(--red);margin:0 10px}

/* the teams: a podium. Ring, crest, block and name share one set of numbers from the engine. */
.ov.teams{justify-content:flex-start;padding-top:clamp(84px,13vh,140px)}
.ov.teams h2{font-size:clamp(28px,4.6vw,64px);margin:0 0 10px}
.ov.teams p{font-size:clamp(13px,1.25vw,16px);max-width:720px}
.ov .crests{position:absolute;inset:0;pointer-events:none}
.ov .mural{position:absolute;left:0;right:0;top:var(--mtop,22vh);height:var(--mh,60vh);overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.ov .mrow{position:absolute;left:0;white-space:nowrap;display:flex;font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.14em;will-change:transform}
.ov .mrow span{display:block;padding-right:.6em}
.ov .mrow.gold{color:rgba(227,184,84,.30)}
.ov .mrow.paper{color:rgba(242,237,228,.20)}
.ov .mrow.r0{top:0;font-size:var(--m0,54px);animation:muralL 90s linear infinite}
.ov .mrow.r1{top:21%;font-size:var(--m1,40px);animation:muralR 120s linear infinite}
.ov .mrow.r2{top:40%;font-size:var(--m2,62px);animation:muralL 105s linear infinite}
.ov .mrow.r3{top:63%;font-size:var(--m3,38px);animation:muralR 135s linear infinite}
.ov .mrow.r4{top:80%;font-size:var(--m4,50px);animation:muralL 98s linear infinite}
@keyframes muralL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes muralR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.ov .mlabel{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--body);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(227,184,84,.55)}
.nogl .ov .mrow{animation:none}
.ov .ped,.ov .crest,.ov .crestcap{z-index:1}
.ov .ped{position:absolute;width:var(--ring,300px);height:var(--ring,300px);margin-left:calc(var(--ring,300px) / -2);transform:none!important;opacity:1!important;filter:none!important}
.ov .ped.ped0{left:var(--cx0,25%);top:calc(var(--cy0,40vh) - var(--ring,300px) / 2)}
.ov .ped.ped1{left:var(--cx1,50%);top:calc(var(--cy1,36vh) - var(--ring,300px) / 2)}
.ov .ped.ped2{left:var(--cx2,75%);top:calc(var(--cy2,44vh) - var(--ring,300px) / 2)}
.ov .ped svg{width:100%;height:100%;display:block;transform:rotate(-120deg)}
.ov .ped circle{fill:none;stroke:var(--gold,#e3b854);stroke-width:1.1;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--r,0) * 100);filter:drop-shadow(0 0 6px rgba(227,184,84,.55))}
.ov .crest{position:absolute;left:calc(50% - var(--cb,600px) / 2);top:calc(50% - var(--cb,600px) / 2);width:var(--cb,600px);height:var(--cb,600px);margin:0;padding:0;background:none!important;border:0;filter:none!important;transform-origin:50% 50%;will-change:transform,opacity}
.ov .crest img{width:100%;height:100%;object-fit:contain;filter:none;background:none}
.ov .crest.blasting{z-index:3}
.ov .crestcap{position:absolute;width:var(--capw,300px);margin-left:calc(var(--capw,300px) / -2);transform:none!important;display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap;padding:0 6px;overflow:hidden}
.ov .crestcap{top:var(--captop,78vh);text-shadow:0 2px 4px rgba(0,0,0,.95),0 0 16px rgba(0,0,0,.9)}
.ov .crestcap.cap0{left:var(--cx0,25%)}
.ov .crestcap.cap1{left:var(--cx1,50%)}
.ov .crestcap.cap2{left:var(--cx2,75%)}
.ov .crestcap b{font-family:var(--display);font-weight:400;font-size:var(--capfs,28px);letter-spacing:.1em;line-height:1;color:var(--paper)}
.ov .crestcap i{font-style:normal;font-size:calc(var(--capfs,28px) * .36);letter-spacing:.24em;text-transform:uppercase;color:#ddd7cb;margin-top:.3em}
/* the logo layer: the original ensō performance, fixed behind the words of chapters one and two */
#logo{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:1;transition:opacity .5s ease}
#logo .enso{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
html.logo-small #logo .enso{transform:translate(-50%,-78%) scale(.62)}
html.logo-off #logo{opacity:0}
.nogl #logo{position:relative;height:80vh}
/* chapter one is the hero as it was */
.ov[data-ch="1"]{padding-top:40px}
.ov[data-ch="1"] h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,14vw,168px);letter-spacing:.06em;line-height:.92;color:var(--paper);margin:0}
.ov[data-ch="1"] .hero-kicker{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ov[data-ch="1"] .hero-sub{font-family:var(--display);font-size:clamp(17px,2.6vw,26px);letter-spacing:.42em;color:var(--paper-dim);margin-top:14px;text-indent:.42em}
.ov[data-ch="1"] .hero-arts{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:34px;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim);flex-wrap:wrap}
.ov[data-ch="1"] .hero-arts b{font-weight:400;color:var(--paper)}
.ov[data-ch="1"] .hero-arts .dot{width:4px;height:4px;background:var(--red);border-radius:50%;flex:none}
.ov[data-ch="1"] .hero-belts{margin-top:26px;font-size:13px;letter-spacing:.14em;color:var(--paper-dim)}
.ov[data-ch="1"] .hero-belts em{font-style:normal;color:var(--red)}
.ov[data-ch="1"] [data-at]{filter:none}   /* the name has its own entrance */
/* chapter two: the words beneath the held logo */
.ov[data-ch="2"]{justify-content:flex-end;padding-bottom:clamp(30px,7vh,80px)}
@media(max-width:760px){html.logo-small #logo .enso{transform:translate(-50%,-92%) scale(.7)}}

/* the play control: a line at the foot of the screen that pulses when the film is waiting; the label above it */
#filmPlay{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--paper-dim);font:600 10.5px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;padding:10px 18px;cursor:pointer;opacity:0;transition:opacity .6s ease,color .3s;-webkit-tap-highlight-color:transparent}
#filmPlay[aria-pressed]{opacity:1}
#filmPlay b{display:block;width:1px;height:54px;background:linear-gradient(var(--red),transparent);border:0;transition:height .4s ease,opacity .4s ease}
#filmPlay[aria-pressed="true"]{opacity:.55}
#filmPlay[aria-pressed="true"] b{height:22px;background:var(--red)}
#filmPlay:hover{color:var(--paper);opacity:1}
#filmPlay.pulse{color:var(--paper)}
#filmPlay.pulse b{animation:playLine 1.5s ease-in-out infinite}
@keyframes playLine{0%,100%{opacity:.35;height:40px}50%{opacity:1;height:62px}}
html.filmover #filmPlay,.nogl #filmPlay{display:none}
.ov .hint{display:none}   /* the play line is the scroll line now */

/* legibility: a soft pool of ink behind the words in every chapter, and the words themselves lit, never grey on grey */
.ov::before{content:"";position:absolute;left:50%;top:50%;width:min(100vw,1180px);height:min(84vh,700px);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(11,10,9,.80),rgba(11,10,9,.52) 48%,rgba(11,10,9,0) 74%);pointer-events:none;z-index:0}
.ov>*{position:relative;z-index:1}
.ov.teams::before{display:none}   /* the crests carry their own light */
.ov[data-ch="2"]::before{top:auto;bottom:0;transform:translate(-50%,18%);height:min(60vh,480px)}   /* the mark stays lit above; the pool sits under the words */
.ov p,.ov .hero-sub,.ov .hero-arts,.ov .hero-belts,.ov .trio i,.ov .stats i,.ov .foot,.ov .art-w .o,.ov .crestcap i,.ov .door-fine{color:#ddd7cb}
.ov p b,.ov .hero-arts b,.ov .foot b{color:var(--paper)}
.ov p,.ov .line,.ov .hand,.ov .hero-sub,.ov .hero-arts,.ov .hero-belts,.ov .trio,.ov .stats,.ov .foot,.ov .art-w .o,.ov .door-fine,.ov .crestcap{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.9)}
.ov h2,.ov[data-ch="1"] h1,.ov .trio b,.ov .stats b,.ov .crestcap b{text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.85)}
.ov .kick,.ov .hero-kicker{color:#f06a50;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.9)}

/* page rules reach into the film with margins; nothing in the overlay may carry one */
#ov,.ov,.ov .crests,.ov .crest{margin:0!important}
.ov .ped,.ov .crestcap{margin-top:0!important;margin-bottom:0!important;margin-right:0!important}