:root{--night:#141836;--panel:#1d2350;--violet:#4b3a9e;--ink:#0a0b18;--red:#b6332f;--red-press:#9c2a27;--cyan:#2fd0e8;--yellow:#f5d63a;--white:#fff;--mist:#c9cfe6;--dim:#9aa1c4;--gutter:max(clamp(16px,3.4vw,48px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--ease:cubic-bezier(.16,1,.3,1);--snap:cubic-bezier(.2,1.4,.4,1);--cut:cubic-bezier(.77,0,.18,1);--letter:'Rowdies','Be Vietnam Pro',sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);scrollbar-color:var(--violet) var(--night)}
body{margin:0;min-height:100svh;background:var(--night);color:var(--white);font:400 1.0625rem/1.6 'Be Vietnam Pro',system-ui,sans-serif;caret-color:var(--yellow);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:var(--white)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
h1,h2,p,figure{margin:0}
.tab{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the page: night ground, a halftone sky top right and bottom left, focus lines on the comic */
.stage{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--gutter);overflow:hidden;isolation:isolate}
.stage::before,.stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;animation:on 900ms var(--ease) both}
.stage::before{background:radial-gradient(circle,var(--violet) 0 1.9px,transparent 2.3px) 0 0/14px 14px;-webkit-mask:linear-gradient(205deg,#000 0,rgba(0,0,0,.55) 22%,transparent 46%),linear-gradient(25deg,rgba(0,0,0,.6) 0,transparent 26%);mask:linear-gradient(205deg,#000 0,rgba(0,0,0,.55) 22%,transparent 46%),linear-gradient(25deg,rgba(0,0,0,.6) 0,transparent 26%)}
.stage::after{background:repeating-conic-gradient(from 3deg at 74% 46%,rgba(255,255,255,.045) 0 1.1deg,transparent 1.1deg 7deg);-webkit-mask:radial-gradient(circle at 74% 46%,transparent 0 12%,#000 48%);mask:radial-gradient(circle at 74% 46%,transparent 0 12%,#000 48%)}

/* masthead */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:88px}
.mast{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;animation:slam 520ms var(--snap) 150ms both}
.shield{display:block;width:44px;height:50px;overflow:visible}
.mast .mk{position:absolute;left:10px;top:10px;width:25px;height:25px;background:var(--white);-webkit-mask:url(/mark.png) center/contain no-repeat;mask:url(/mark.png) center/contain no-repeat}
.nm{font:700 1.4375rem/1 var(--letter);letter-spacing:.02em;text-transform:uppercase;-webkit-text-stroke:.2em var(--ink);paint-order:stroke fill}
.lang{position:relative;flex:none;white-space:nowrap;padding:7px 12px 6px;background:var(--white);color:var(--ink);border:3px solid var(--ink);font:700 .9375rem/1 var(--letter);text-transform:uppercase;text-decoration:none;transform:rotate(2deg);transition:background-color 160ms}
.lang::before{content:'';position:absolute;inset:-8px}
.lang:hover{background:var(--yellow)}
.lang:focus-visible{outline-color:var(--white)}
@keyframes slam{from{transform:translateX(-28px) skewX(-12deg)}}

/* layout: lettering and trial on the left, the comic on the right */
.show{--comic:min(44vw,(100svh - 280px) / 1.15);display:grid;grid-template-columns:minmax(0,1fr) var(--comic);grid-template-rows:1fr auto;grid-template-areas:"copy comic" "trial comic";column-gap:clamp(28px,4.4vw,72px);row-gap:clamp(20px,3.4vh,36px);align-items:end;padding:clamp(8px,2vh,24px) 0 clamp(20px,3vh,40px)}

.copy{grid-area:copy;align-self:center;min-width:0;container-type:inline-size}
h1{font:700 clamp(2.25rem,min(7.7cqi,7.4svh),5.25rem)/1.08 var(--letter);letter-spacing:.005em;text-transform:uppercase;transform:rotate(-2deg);transform-origin:left bottom}
h1 .ln{display:block;width:fit-content;max-width:100%;white-space:nowrap;-webkit-text-stroke:.11em var(--ink);paint-order:stroke fill;text-shadow:.07em .065em 0 var(--red),-.045em -.035em 0 var(--cyan);animation:letter 560ms var(--snap) var(--d) both,register 900ms var(--ease) calc(var(--d) + 120ms) both}
h1 em{font-style:normal;color:var(--red);text-shadow:.07em .065em 0 var(--white),-.045em -.035em 0 var(--cyan)}
@keyframes letter{from{transform:translateX(-.35em) skewX(-14deg)}}
@keyframes register{from{text-shadow:.26em .2em 0 var(--red),-.22em -.16em 0 var(--cyan)}}
.plate{display:inline-block;margin-top:clamp(18px,2.6vh,28px);padding:8px 13px 7px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);font:600 clamp(.875rem,.8rem + .3vw,1rem)/1.35 'Be Vietnam Pro',sans-serif;letter-spacing:.04em;text-transform:uppercase;transform:rotate(-1.2deg);animation:pop 480ms var(--snap) 820ms both}
.plate>span{display:block}
.sub{margin-top:16px;max-width:46ch;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color:var(--mist)}
@keyframes pop{from{transform:rotate(-8deg) scale(.78)}to{transform:rotate(-1.2deg)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes on{from{opacity:0}}

.trial{grid-area:trial;max-width:36rem;padding:20px 22px 22px;background:var(--white);color:var(--ink);border:4px solid var(--ink)}
.trial h2{font:700 clamp(1.625rem,1.3rem + .8vw,2rem)/1.05 var(--letter);text-transform:uppercase}
.trial p{margin-top:8px;max-width:52ch;font-size:.9375rem;line-height:1.55;color:#33364a}
.acts{isolation:isolate;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:16px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:11px 18px;border:3px solid var(--ink);font:600 1rem/1.2 'Be Vietnam Pro',sans-serif;text-decoration:none;transition:background-color 140ms,color 140ms,transform 120ms}
.btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn.call{flex:1 1 15rem;background:var(--red);color:var(--white);font-size:1.0625rem}
/* the cyan plate sits off register under the call button and slips further on hover */
.btn.call::before{content:'';position:absolute;inset:-3px;z-index:-1;background:var(--cyan);transform:translate(6px,6px);transition:transform 180ms var(--snap);animation:plate-in 900ms var(--ease) 450ms backwards}
@keyframes plate-in{from{transform:translate(30px,22px)}}
.btn.call:hover{background:var(--red-press)}
.btn.call:hover::before{transform:translate(9px,9px)}
.btn.call:active{transform:translate(3px,3px)}
.btn.call:active::before{transform:translate(3px,3px)}
.btn.dir{flex:0 1 auto;background:var(--white);color:var(--ink)}
.btn.dir:hover{background:var(--ink);color:var(--white)}
.trial :focus-visible{outline-color:var(--ink)}

/* the comic: two panels, captions set as real text */
.comic{grid-area:comic;position:relative;align-self:center;width:var(--comic);aspect-ratio:640/736}
.pn{position:absolute}
.pn svg{display:block;width:100%;height:auto;overflow:visible}
.p1{left:0;top:0;width:100%;transform:rotate(.6deg)}
.p2{right:-3%;top:57%;width:54%;transform:rotate(-3deg)}
.cap{position:absolute;padding:8px 11px 9px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);font:600 .875rem/1.45 'Be Vietnam Pro',sans-serif}
.p1 .cap{left:5%;top:7.5%;max-width:50%;transform:rotate(-1.5deg);animation:pop-cap 460ms var(--snap) 1500ms both}
.p2 .cap{left:7%;top:calc(100% - 22px);max-width:84%;transform:rotate(1.2deg);animation:pop-cap 460ms var(--snap) 1720ms both}
.tbc{position:absolute;right:3%;top:-1.1em;padding:.4em .7em .33em;background:var(--ink);color:var(--yellow);font:700 max(.6875rem,calc(var(--comic) * .026))/1 var(--letter);text-transform:uppercase;transform:rotate(3deg);animation:pop-cap 420ms var(--snap) 1950ms both}
@keyframes pop-cap{from{opacity:0;scale:.7}to{opacity:1;scale:1}}

/* the page prints itself: key line draws, art lands, plates slide into near register, sound effects slam */
.pn .key{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 700ms var(--ease) 300ms forwards}
.p2 .key{animation-delay:560ms}
.pn .art{animation:on 600ms var(--ease) 420ms both}
.p2 .art{animation-delay:680ms}
.pn .pl{transform:translate(6px,5px);animation:plate-c 900ms var(--ease) 600ms both}
.pn .pl.r{transform:translate(-5px,-4px);animation-name:plate-r}
.p2 .pl{animation-delay:860ms}
.sfx{transform-box:fill-box;transform-origin:center;animation:sfx 520ms var(--snap) 1250ms both}
.sfx.s2{animation-delay:1500ms}
.burst{transform-box:fill-box;transform-origin:center;animation:sfx 420ms var(--snap) 1120ms both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes plate-c{from{transform:translate(30px,22px);opacity:0}to{transform:translate(6px,5px);opacity:1}}
@keyframes plate-r{from{transform:translate(-26px,-20px);opacity:0}to{transform:translate(-5px,-4px);opacity:1}}
@keyframes sfx{from{opacity:0;scale:.3}to{opacity:1;scale:1}}

/* credits rail */
.rail{display:flex;align-items:stretch;flex-wrap:wrap;margin:0 calc(-1 * var(--gutter));background:var(--ink);font-size:.8125rem;line-height:1.45;color:var(--mist);animation:fade 600ms var(--ease) 1300ms both}
.rail .lbl{display:flex;align-items:center;flex:none;padding:0 16px 0 var(--gutter);background:var(--red);color:var(--white);font:700 1rem/1 var(--letter);text-transform:uppercase}
.rail .it{display:flex;align-items:center;flex-wrap:wrap;column-gap:.4em;padding:14px 16px;border-right:1px solid rgba(255,255,255,.12)}
.rail .it:last-child{flex-basis:100%;border-right:0;border-top:1px solid rgba(255,255,255,.12);padding:9px var(--gutter);font-size:.75rem;color:var(--dim)}
.rail a{text-decoration:none}
.rail a:hover{text-decoration:underline;color:var(--white)}

/* hand-over between languages: a slanted red panel wipes across */
.wipe{position:fixed;top:0;bottom:0;left:-20vw;width:140vw;z-index:10;background:var(--red);border-left:10px solid var(--ink);border-right:10px solid var(--ink);transform:translateX(-110%) skewX(-12deg);pointer-events:none;visibility:hidden}
.wipe.go{visibility:visible;animation:cover 420ms var(--cut) forwards}
.handover .wipe{animation:uncover 520ms var(--cut) 60ms both}
@keyframes cover{to{transform:translateX(0) skewX(-12deg)}}
@keyframes uncover{from{visibility:visible;transform:translateX(0) skewX(-12deg)}99%{visibility:visible}to{visibility:hidden;transform:translateX(120%) skewX(-12deg)}}

@media (min-width:961px) and (max-height:800px){
  .top{height:72px}
  .plate{margin-top:14px}
  .sub{margin-top:12px;font-size:1rem}
  .trial{padding:16px 20px 18px}
  .trial p{margin-top:6px}
  .acts{margin-top:12px}
  .btn{min-height:48px;padding-block:9px}
}
@media (max-width:960px){
  .top{height:72px}
  .show{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"copy" "trial" "comic";row-gap:32px;padding-top:12px}
  .comic{width:min(100%,560px);justify-self:center;margin-top:8px}
  .stage::after{background:repeating-conic-gradient(from 3deg at 80% 18%,rgba(255,255,255,.045) 0 1.1deg,transparent 1.1deg 7deg);-webkit-mask:radial-gradient(circle at 80% 18%,transparent 0 10%,#000 46%);mask:radial-gradient(circle at 80% 18%,transparent 0 10%,#000 46%)}
  .rail{flex-direction:column;flex-wrap:nowrap}
  .rail .lbl{padding:14px var(--gutter) 12px}
  .rail .it,.rail .it:last-child{flex-basis:auto;padding:12px var(--gutter);border-right:0;border-top:1px solid rgba(255,255,255,.12);margin:0}
  .rail .lbl+.it{border-top:0}
}
@media (max-width:600px){
  .shield{width:38px;height:43px}
  .mast .mk{left:8.5px;top:8.5px;width:21px;height:21px}
  .nm{font-size:1.1875rem}
  h1{font-size:clamp(2.25rem,10.6vw,3.25rem);line-height:1.1}
  h1 .ln{white-space:normal;text-wrap:balance}
  .plate{font-size:.8125rem;letter-spacing:.02em}
  .acts{flex-direction:column}
  .btn.call,.btn.dir{flex:none;width:100%}
  /* captions leave the art and sit under each panel, still overlapping its edge */
  .comic{aspect-ratio:auto;width:100%;display:grid;gap:28px}
  .pn{position:relative;left:auto;right:auto;top:auto;width:100%}
  .p2{width:84%;justify-self:end;margin-right:7%}
  .tbc{font-size:.875rem}
  .cap,.p1 .cap,.p2 .cap{position:relative;left:auto;top:auto;bottom:auto;max-width:none;margin:-18px 10px 0 18px}
}

@media (max-width:960px){
  .js .comic:not(.seen) :is(.key,.pl,.art,.sfx,.burst,.cap,.tbc){animation-play-state:paused}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pn .key{stroke-dashoffset:0}
  .wipe{display:none}
}