/* ============================================================================
   The press kit for creators: public/press/index.html, served at /press.

   The landing page's world (ink, lavender and violet, Cinzel over Spectral,
   the blurred card painting behind everything) on a page that scrolls like a
   document. Nothing on it moves by itself: every picture has its box before it
   loads, and a hover only lifts or lights what is under the pointer.
   ========================================================================== */

@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --ink:#07050d;
  --lav:#eedbf1;
  --lav-dim:#cdbce0;
  --lav-faint:#a898bf;
  --violet-2:#7b68ee;
  --link:#cbb8ff;
  --line:rgba(238,219,241,.16);
  --line-lit:rgba(167,139,250,.7);
  --panel:rgba(12,9,24,.86);
  --tile:#0d0a19;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:16px;
  /* A card's corner as the game draws it (cards.css): 0.98 of a 12.29-unit
     width, so 7.95% across and 4.46% down a 720:1283 front. */
  --front-corner:7.95% / 4.46%;
}@media (min-width:1921px) and (min-height:901px){:root{
  --gutter:min(16*5vw/96,16vh/9);
  /* A card's corner as the game draws it (cards.css): 0.98 of a 12.29-unit
     width, so 7.95% across and 4.46% down a 720:1283 front. */
  --front-corner:7.95% / 4.46%;
}}

*,*::before,*::after{box-sizing:border-box}
/* No background on <html>: the body's then paints the canvas, and the fixed
   painting (z-index -1) sits above it rather than under the body. */
html{color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--lav);
  font-family:'Spectral',Georgia,serif;font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:opacity .35s var(--ease);
}@media (min-width:1921px) and (min-height:901px){body{font-size:max(1.0625rem,min(1.0625*5vw/6,1.0625*16vh/9));line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:opacity .35s var(--ease);
}}
/* The first screen is held until its faces and pictures are ready (the
   script in the page's head); the canvas stays ink meanwhile. */
html.press-hold body{opacity:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}@media (min-width:1921px) and (min-height:901px){a{text-decoration-thickness:min(1*5vw/96,1vh/9);text-underline-offset:.18em}}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px;border-radius:6px}@media (min-width:1921px) and (min-height:901px){:focus-visible{outline:calc(min(2*5vw/96,2vh/9) + .034px) solid var(--violet-2);outline-offset:min(3*5vw/96,3vh/9);border-radius:min(6*5vw/96,6vh/9)}}
h1,h2,h3{font-family:'Cinzel',serif;line-height:1.15;margin:0;letter-spacing:.03em}
p{margin:0 0 .9em}
p:last-child{margin-bottom:0}
::selection{background:rgba(138,100,200,.42);color:#fff}

.wrap{width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto}@media (min-width:1921px) and (min-height:901px){.wrap{width:min(min(1200*5vw/96,1200vh/9),100% - 2 * var(--gutter));margin-inline:auto}}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media (min-width:1921px) and (min-height:901px){.sr-only{width:min(1*5vw/96,1vh/9);height:min(1*5vw/96,1vh/9);margin:max(-1*5vw/96,-1vh/9);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}
.skip{position:absolute;left:12px;top:-80px;z-index:10;padding:10px 16px;border-radius:10px;background:#fff;color:var(--ink);font-weight:500;text-decoration:none}@media (min-width:1921px) and (min-height:901px){.skip{left:min(12*5vw/96,12vh/9);top:max(-80*5vw/96,-80vh/9);z-index:10;padding:min(10*5vw/96,10vh/9) min(16*5vw/96,16vh/9);border-radius:min(10*5vw/96,10vh/9);background:#fff;color:var(--ink);font-weight:500;text-decoration:none}}
.skip:focus{top:12px;color:var(--ink)}@media (min-width:1921px) and (min-height:901px){.skip:focus{top:min(12*5vw/96,12vh/9);color:var(--ink)}}

/* ---- The painting behind the page ---------------------------------------- */
.theater{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ink);pointer-events:none}
.theater .art{
  position:absolute;inset:-3%;
  background:url('/assets/marketing/art/cosmicDragon-blur-768.webp') center/cover no-repeat;
  filter:blur(8px) brightness(.42) saturate(1.14);
}@media (min-width:1921px) and (min-height:901px){.theater .art{
  filter:blur(min(8*5vw/96,8vh/9)) brightness(.42) saturate(1.14);
}}
.theater::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -8%,rgba(74,50,112,.42),transparent 56%),
    radial-gradient(90% 70% at 16% 110%,rgba(123,104,238,.18),transparent 60%),
    linear-gradient(180deg,rgba(7,5,13,.5),rgba(7,5,13,.32) 40%,rgba(7,5,13,.72));
}

/* ---- Buttons: the landing's pill, a shade deeper so white text passes AA --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;
  padding:.78em 1.55em;border-radius:999px;
  font-family:'Cinzel',serif;font-weight:600;font-size:.98rem;letter-spacing:.06em;line-height:1.25;
  color:#fff;text-decoration:none;text-align:center;
  background:linear-gradient(135deg,#7756bf,#6b5ce6);
  box-shadow:0 10px 30px -10px rgba(123,104,238,.75),inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease);
}@media (min-width:1921px) and (min-height:901px){.btn{min-height:min(44*5vw/96,44vh/9);
  padding:.78em 1.55em;border-radius:min(999*5vw/96,999vh/9);
  font-family:'Cinzel',serif;font-weight:600;font-size:max(.98rem,min(.98*5vw/6,.98*16vh/9));letter-spacing:.06em;line-height:1.25;
  color:#fff;text-decoration:none;text-align:center;
  background:linear-gradient(135deg,#7756bf,#6b5ce6);
  box-shadow:0 min(10*5vw/96,10vh/9) min(30*5vw/96,30vh/9) max(-10*5vw/96,-10vh/9) rgba(123,104,238,.75),inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.18);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease);
}}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(123,104,238,.9),inset 0 0 0 1px rgba(255,255,255,.3)}@media (min-width:1921px) and (min-height:901px){.btn:hover{transform:translateY(calc(-2 * var(--mf-ui-px, 0px) + var(--mf-ui-px-missing, 1) * max(-2*5vw/96,-2vh/9)));box-shadow:0 min(16*5vw/96,16vh/9) min(36*5vw/96,36vh/9) max(-10*5vw/96,-10vh/9) rgba(123,104,238,.9),inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.3)}}
.btn.ghost{background:rgba(11,8,22,.62);box-shadow:inset 0 0 0 1px rgba(238,219,241,.3)}@media (min-width:1921px) and (min-height:901px){.btn.ghost{box-shadow:inset 0 0 0 min(1*5vw/96,1vh/9) rgba(238,219,241,.3)}}
.btn.small{min-height:40px;padding:.5em 1.15em;font-size:.84rem}@media (min-width:1921px) and (min-height:901px){.btn.small{min-height:min(40*5vw/96,40vh/9);padding:.5em 1.15em;font-size:max(.84rem,min(.84*5vw/6,.84*16vh/9))}}
.btn.block{display:flex;width:100%;margin-top:22px}@media (min-width:1921px) and (min-height:901px){.btn.block{margin-top:min(22*5vw/96,22vh/9)}}
.btn svg{width:1.2em;height:1.2em;flex:none}

/* ---- Top bar -------------------------------------------------------------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}@media (min-width:1921px) and (min-height:901px){.top{gap:min(12*5vw/96,12vh/9);padding:min(14*5vw/96,14vh/9) 0}}
.brand{display:block;flex:none}
/* The logo is an opaque rectangle, so a box-shadow is the same glow as a
   drop-shadow filter, without the filter layer that WebKit fails to repaint
   (the plaque below left a 236x254 corner blank after a scroll down and back). */
.brand img{height:40px;width:auto;box-shadow:0 0 16px rgba(123,104,238,.45)}@media (min-width:1921px) and (min-height:901px){.brand img{height:min(40*5vw/96,40vh/9);width:auto;box-shadow:0 0 min(16*5vw/96,16vh/9) rgba(123,104,238,.45)}}
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;font-family:'Cinzel',serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}@media (min-width:1921px) and (min-height:901px){.jump{gap:min(4*5vw/96,4vh/9) min(20*5vw/96,20vh/9);font-family:'Cinzel',serif;font-weight:600;font-size:max(.78rem,min(.78*5vw/6,.78*16vh/9));letter-spacing:.14em;text-transform:uppercase}}
.jump a{color:var(--lav-dim);text-decoration:none;padding:6px 0}@media (min-width:1921px) and (min-height:901px){.jump a{padding:min(6*5vw/96,6vh/9) 0}}
.jump a:hover{color:#fff}

/* ---- Hero ----------------------------------------------------------------- */
.hero{position:relative;text-align:center;padding:clamp(18px,4vw,48px) 0 clamp(34px,5vw,60px)}@media (min-width:1921px) and (min-height:901px){.hero{padding:clamp(min(18*5vw/96,18vh/9),4vw,min(48*5vw/96,48vh/9)) 0 clamp(min(34*5vw/96,34vh/9),5vw,min(60*5vw/96,60vh/9))}}
.hero h1{display:flex;flex-direction:column;align-items:center;gap:16px;font-weight:600}@media (min-width:1921px) and (min-height:901px){.hero h1{gap:min(16*5vw/96,16vh/9);font-weight:600}}
/* By width, and on a short landscape window by height too, so the plaque
   leaves room for the words under it (932x300: 168px wide instead of 298). */
.plaque{width:clamp(150px,min(max(220px,32vw),56svh),360px);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 40px rgba(123,104,238,.35)}@media (min-width:1921px) and (min-height:901px){.plaque{width:clamp(min(150*5vw/96,150vh/9),min(max(min(220*5vw/96,220vh/9),32vw),56svh),min(360*5vw/96,360vh/9));box-shadow:0 min(18*5vw/96,18vh/9) min(44*5vw/96,44vh/9) rgba(0,0,0,.55),0 0 min(40*5vw/96,40vh/9) rgba(123,104,238,.35)}}
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:'Cinzel',serif;font-weight:600;font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--lav-dim);
}@media (min-width:1921px) and (min-height:901px){.kicker{font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9));letter-spacing:.34em;text-transform:uppercase;color:var(--lav-dim);
}}
.kicker::before,.kicker::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--lav-dim))}@media (min-width:1921px) and (min-height:901px){.kicker::before,.kicker::after{width:min(26*5vw/96,26vh/9);height:min(1*5vw/96,1vh/9);background:linear-gradient(90deg,transparent,var(--lav-dim))}}
.kicker::after{transform:scaleX(-1)}
.tagline{
  margin:20px auto 0;max-width:22ch;
  font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.45rem,3.3vw,2.3rem);line-height:1.2;
  text-wrap:balance;text-shadow:0 2px 26px rgba(7,5,13,.85),0 0 40px rgba(123,104,238,.26);
}@media (min-width:1921px) and (min-height:901px){.tagline{
  margin:min(20*5vw/96,20vh/9) auto 0;max-width:22ch;
  font-family:'Cinzel',serif;font-weight:700;font-size:clamp(max(1.45rem,min(1.45*5vw/6,1.45*16vh/9)),3.3vw,max(2.3rem,min(2.3*5vw/6,2.3*16vh/9)));line-height:1.2;
  text-wrap:balance;text-shadow:0 min(2*5vw/96,2vh/9) min(26*5vw/96,26vh/9) rgba(7,5,13,.85),0 0 min(40*5vw/96,40vh/9) rgba(123,104,238,.26);
}}
.lede{margin:14px auto 0;max-width:46ch;color:var(--lav-dim);font-size:clamp(1rem,1.6vw,1.12rem)}@media (min-width:1921px) and (min-height:901px){.lede{margin:min(14*5vw/96,14vh/9) auto 0;max-width:46ch;color:var(--lav-dim);font-size:clamp(max(1rem,min(1*5vw/6,1*16vh/9)),1.6vw,max(1.12rem,min(1.12*5vw/6,1.12*16vh/9)))}}
.cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}@media (min-width:1921px) and (min-height:901px){.cta{margin-top:min(26*5vw/96,26vh/9);display:flex;flex-wrap:wrap;gap:min(12*5vw/96,12vh/9);justify-content:center}}
/* Two card fronts flank the copy where there is room for them, as on the
   landing's first screen; still, never animated. */
.flank{
  display:none;position:absolute;top:50%;width:clamp(132px,12vw,172px);
  border-radius:var(--front-corner);
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(123,104,238,.34));
}@media (min-width:1921px) and (min-height:901px){.flank{width:clamp(min(132*5vw/96,132vh/9),12vw,min(172*5vw/96,172vh/9));
  border-radius:var(--front-corner);
  filter:drop-shadow(0 min(26*5vw/96,26vh/9) min(40*5vw/96,40vh/9) rgba(0,0,0,.7)) drop-shadow(0 0 min(34*5vw/96,34vh/9) rgba(123,104,238,.34));
}}
.flank.left{left:2%;transform:translateY(-50%) rotate(-6deg)}
.flank.right{right:2%;transform:translateY(-50%) rotate(6deg)}

/* ---- The kit: factsheet beside the sections -------------------------------- */
.kit{display:grid;gap:20px;align-items:start;padding-bottom:36px}@media (min-width:1921px) and (min-height:901px){.kit{gap:min(20*5vw/96,20vh/9);align-items:start;padding-bottom:min(36*5vw/96,36vh/9)}}
.sections{display:grid;gap:20px;min-width:0}@media (min-width:1921px) and (min-height:901px){.sections{gap:min(20*5vw/96,20vh/9);min-width:0}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,34px)}@media (min-width:1921px) and (min-height:901px){.panel{border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);border-radius:min(20*5vw/96,20vh/9);padding:clamp(min(20*5vw/96,20vh/9),3vw,min(34*5vw/96,34vh/9))}}
.panel h2{font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:700;margin-bottom:16px}@media (min-width:1921px) and (min-height:901px){.panel h2{font-size:clamp(max(1.3rem,min(1.3*5vw/6,1.3*16vh/9)),2.3vw,max(1.7rem,min(1.7*5vw/6,1.7*16vh/9)));font-weight:700;margin-bottom:min(16*5vw/96,16vh/9)}}
.panel h3{margin:28px 0 12px;font-size:.84rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.panel h3{margin:min(28*5vw/96,28vh/9) 0 min(12*5vw/96,12vh/9);font-size:max(.84rem,min(.84*5vw/6,.84*16vh/9));font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lav-dim)}}
.panel h2 + h3{margin-top:0}

.facts{margin:0;display:grid;gap:11px}@media (min-width:1921px) and (min-height:901px){.facts{gap:min(11*5vw/96,11vh/9)}}
.facts div{display:grid;gap:1px}@media (min-width:1921px) and (min-height:901px){.facts div{gap:min(1*5vw/96,1vh/9)}}
.facts dt{font-family:'Cinzel',serif;font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lav-faint)}@media (min-width:1921px) and (min-height:901px){.facts dt{font-size:max(.72rem,min(.72*5vw/6,.72*16vh/9));letter-spacing:.2em;text-transform:uppercase;color:var(--lav-faint)}}
.facts dd{margin:0;font-size:1rem;line-height:1.45}@media (min-width:1921px) and (min-height:901px){.facts dd{font-size:max(1rem,min(1*5vw/6,1*16vh/9));line-height:1.45}}
/* The factsheet stays compact enough to follow the reader whole (below). */
.sheet{padding:clamp(20px,2.4vw,28px)}@media (min-width:1921px) and (min-height:901px){.sheet{padding:clamp(min(20*5vw/96,20vh/9),2.4vw,min(28*5vw/96,28vh/9))}}
.sheet h2{margin-bottom:14px}@media (min-width:1921px) and (min-height:901px){.sheet h2{margin-bottom:min(14*5vw/96,14vh/9)}}
.sheet .btn.block{margin-top:18px}@media (min-width:1921px) and (min-height:901px){.sheet .btn.block{margin-top:min(18*5vw/96,18vh/9)}}

.copy{font-size:1.08rem}@media (min-width:1921px) and (min-height:901px){.copy{font-size:max(1.08rem,min(1.08*5vw/6,1.08*16vh/9))}}

.features{list-style:none;margin:0;padding:0;display:grid;gap:14px}@media (min-width:1921px) and (min-height:901px){.features{gap:min(14*5vw/96,14vh/9)}}
.features li{position:relative;padding-left:28px}@media (min-width:1921px) and (min-height:901px){.features li{padding-left:min(28*5vw/96,28vh/9)}}
.features li::before{
  content:"";position:absolute;left:3px;top:.6em;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,var(--violet-2));box-shadow:0 0 12px rgba(123,104,238,.8);
}@media (min-width:1921px) and (min-height:901px){.features li::before{left:min(3*5vw/96,3vh/9);top:.6em;width:min(10*5vw/96,10vh/9);height:min(10*5vw/96,10vh/9);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,var(--violet-2));box-shadow:0 0 min(12*5vw/96,12vh/9) rgba(123,104,238,.8);
}}
.features strong{font-weight:500;color:#fff}

/* ---- Films ---------------------------------------------------------------- */
.films{list-style:none;margin:0;padding:0;display:grid;gap:24px}@media (min-width:1921px) and (min-height:901px){.films{gap:min(24*5vw/96,24vh/9)}}
.film{display:flex;flex-direction:column;gap:6px;min-width:0}@media (min-width:1921px) and (min-height:901px){.film{gap:min(6*5vw/96,6vh/9);min-width:0}}
.thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--tile);border:1px solid var(--line)}@media (min-width:1921px) and (min-height:901px){.thumb{border-radius:min(14*5vw/96,14vh/9);overflow:hidden;background:var(--tile);border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line)}}
.thumb img{width:100%;height:100%;object-fit:cover}
a.thumb{transition:border-color .2s var(--ease)}
a.thumb:hover{border-color:var(--line-lit)}
.play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(7,5,13,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}@media (min-width:1921px) and (min-height:901px){.play{width:min(58*5vw/96,58vh/9);height:min(58*5vw/96,58vh/9);border-radius:50%;background:rgba(7,5,13,.66);box-shadow:inset 0 0 0 min(1*5vw/96,1vh/9) rgba(255,255,255,.4)}}
.play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}@media (min-width:1921px) and (min-height:901px){.play::after{left:min(23*5vw/96,23vh/9);top:min(18*5vw/96,18vh/9);border-style:solid;border-width:calc(min(11*5vw/96,11vh/9) + .034px) 0 calc(min(11*5vw/96,11vh/9) + .034px) calc(min(18*5vw/96,18vh/9) + .034px);border-color:transparent transparent transparent #fff}}
.panel .film h3{margin:8px 0 0;font-size:1.06rem;font-weight:700;letter-spacing:.05em;text-transform:none;color:var(--lav)}@media (min-width:1921px) and (min-height:901px){.panel .film h3{margin:min(8*5vw/96,8vh/9) 0 0;font-size:max(1.06rem,min(1.06*5vw/6,1.06*16vh/9));font-weight:700;letter-spacing:.05em;text-transform:none;color:var(--lav)}}
.film h3 a{color:inherit;text-decoration:none}
.film h3 a:hover{text-decoration:underline}
.meta{color:var(--lav-faint);font-size:.9rem}@media (min-width:1921px) and (min-height:901px){.meta{font-size:max(.9rem,min(.9*5vw/6,.9*16vh/9))}}
.film p{margin:0}
.credits{color:var(--lav-faint);font-size:.86rem;line-height:1.45}@media (min-width:1921px) and (min-height:901px){.credits{font-size:max(.86rem,min(.86*5vw/6,.86*16vh/9));line-height:1.45}}

/* ---- Images --------------------------------------------------------------- */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:18px}@media (min-width:1921px) and (min-height:901px){.grid{gap:min(18*5vw/96,18vh/9)}}
.grid figure{margin:0;display:flex;flex-direction:column;gap:8px}@media (min-width:1921px) and (min-height:901px){.grid figure{gap:min(8*5vw/96,8vh/9)}}
.frame{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--tile);border:1px solid var(--line)}@media (min-width:1921px) and (min-height:901px){.frame{border-radius:min(12*5vw/96,12vh/9);overflow:hidden;background:var(--tile);border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line)}}
.frame img{width:100%;height:100%;object-fit:contain}
a.frame{transition:border-color .2s var(--ease)}
a.frame:hover{border-color:var(--line-lit)}
figcaption{font-size:.95rem;line-height:1.45;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){figcaption{font-size:max(.95rem,min(.95*5vw/6,.95*16vh/9));line-height:1.45;color:var(--lav-dim)}}
figcaption .meta{display:block;margin-top:2px;font-size:.82rem}@media (min-width:1921px) and (min-height:901px){figcaption .meta{margin-top:min(2*5vw/96,2vh/9);font-size:max(.82rem,min(.82*5vw/6,.82*16vh/9))}}
.fronts,.paintings,.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
/* box-shadow, not filter: a drop-shadow filter on these lazy pictures left
   WebKit's top-left corner unpainted until they loaded. The fronts are opaque
   rounded rectangles, so the shadow follows the same shape. */
.fronts img{border-radius:var(--front-corner);box-shadow:0 14px 24px rgba(0,0,0,.55)}@media (min-width:1921px) and (min-height:901px){.fronts img{box-shadow:0 min(14*5vw/96,14vh/9) min(24*5vw/96,24vh/9) rgba(0,0,0,.55)}}
.paintings img{border-radius:12px}@media (min-width:1921px) and (min-height:901px){.paintings img{border-radius:min(12*5vw/96,12vh/9)}}
.banner{margin:0 0 22px}@media (min-width:1921px) and (min-height:901px){.banner{margin:0 0 min(22*5vw/96,22vh/9)}}
/* Every tile is the same box: the picture is fitted inside it, never sizing it. */
.logo-tile{display:block;aspect-ratio:16/10;padding:10% 12%;border-radius:12px;border:1px solid var(--line);background:var(--tile);overflow:hidden;transition:border-color .2s var(--ease)}@media (min-width:1921px) and (min-height:901px){.logo-tile{border-radius:min(12*5vw/96,12vh/9);border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);background:var(--tile);overflow:hidden;transition:border-color .2s var(--ease)}}
.logo-tile:hover{border-color:var(--line-lit)}
.logo-tile.light{background:#f3edf7}
.logo-tile.violet{background:linear-gradient(135deg,#5a3f8f,#3d2a66)}
.logo-tile img{width:100%;height:100%;object-fit:contain}
/* A storybook page keeps its own shape (1264:848), not the screenshots' 16:9. */
.manga .frame{aspect-ratio:1264/848}
.swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}@media (min-width:1921px) and (min-height:901px){.swatches{grid-template-columns:repeat(auto-fill,minmax(min(150*5vw/96,150vh/9),1fr));gap:min(10*5vw/96,10vh/9)}}
.swatches li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px}@media (min-width:1921px) and (min-height:901px){.swatches li{gap:min(2*5vw/96,2vh/9) min(10*5vw/96,10vh/9)}}
.chip{grid-row:span 2;width:40px;height:40px;border-radius:10px;border:1px solid var(--line)}@media (min-width:1921px) and (min-height:901px){.chip{width:min(40*5vw/96,40vh/9);height:min(40*5vw/96,40vh/9);border-radius:min(10*5vw/96,10vh/9);border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line)}}
.chip.ink{background:#07050d}
.chip.lavender{background:#eedbf1}
.chip.violet{background:#8a64c8}
.chip.bright{background:#7b68ee}
.chip.plaque{background:#765b82}
.swatches .name{font-family:'Cinzel',serif;font-weight:600;font-size:.8rem;letter-spacing:.08em}@media (min-width:1921px) and (min-height:901px){.swatches .name{font-size:max(.8rem,min(.8*5vw/6,.8*16vh/9));letter-spacing:.08em}}
.swatches code{font-family:inherit;font-size:.9rem;color:var(--lav-faint)}@media (min-width:1921px) and (min-height:901px){.swatches code{font-size:max(.9rem,min(.9*5vw/6,.9*16vh/9));color:var(--lav-faint)}}
.type-line{margin-top:16px;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.type-line{margin-top:min(16*5vw/96,16vh/9);color:var(--lav-dim)}}
.face-cinzel{font-family:'Cinzel',serif;font-weight:600;color:var(--lav)}
.face-spectral{font-family:'Spectral',serif;font-weight:500;color:var(--lav)}
.zipline{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}@media (min-width:1921px) and (min-height:901px){.zipline{margin-top:min(24*5vw/96,24vh/9);display:flex;flex-wrap:wrap;align-items:center;gap:min(12*5vw/96,12vh/9) min(18*5vw/96,18vh/9)}}
.zipline p{margin:0;color:var(--lav-dim)}

/* ---- For creators, links, contact ----------------------------------------- */
.creators{border-color:rgba(167,139,250,.45);background:linear-gradient(160deg,rgba(74,50,112,.6),rgba(12,9,24,.88) 62%)}
.creators p{font-size:1.08rem}@media (min-width:1921px) and (min-height:901px){.creators p{font-size:max(1.08rem,min(1.08*5vw/6,1.08*16vh/9))}}
.links{list-style:none;margin:0;padding:0;display:grid;gap:10px}@media (min-width:1921px) and (min-height:901px){.links{gap:min(10*5vw/96,10vh/9)}}
.links a{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border-radius:14px;
  border:1px solid var(--line);background:rgba(11,8,22,.5);color:var(--lav);text-decoration:none;
  transition:border-color .2s var(--ease);
}@media (min-width:1921px) and (min-height:901px){.links a{gap:min(12*5vw/96,12vh/9);min-height:min(52*5vw/96,52vh/9);padding:min(10*5vw/96,10vh/9) min(14*5vw/96,14vh/9);border-radius:min(14*5vw/96,14vh/9);
  border:calc(min(1*5vw/96,1vh/9) + .034px) solid var(--line);background:rgba(11,8,22,.5);color:var(--lav);text-decoration:none;
  transition:border-color .2s var(--ease);
}}
.links a:hover{border-color:var(--line-lit);color:#fff}
.links svg{width:22px;height:22px;flex:none;color:var(--lav-dim)}@media (min-width:1921px) and (min-height:901px){.links svg{width:min(22*5vw/96,22vh/9);height:min(22*5vw/96,22vh/9);flex:none;color:var(--lav-dim)}}
.links .name{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.06em}
.links .handle{margin-left:auto;min-width:0;color:var(--lav-faint);font-size:.92rem;text-align:right;overflow-wrap:anywhere}@media (min-width:1921px) and (min-height:901px){.links .handle{font-size:max(.92rem,min(.92*5vw/6,.92*16vh/9));text-align:right;overflow-wrap:anywhere}}

.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:4px 0 40px;color:var(--lav-faint);font-size:.88rem}@media (min-width:1921px) and (min-height:901px){.foot{gap:min(6*5vw/96,6vh/9) min(10*5vw/96,10vh/9);padding:min(4*5vw/96,4vh/9) 0 min(40*5vw/96,40vh/9);color:var(--lav-faint);font-size:max(.88rem,min(.88*5vw/6,.88*16vh/9))}}
.foot a{color:var(--lav-dim)}

/* ---- Wider screens -------------------------------------------------------- */
@media (min-width:640px){
  .films,.shots,.manga,.links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fronts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:819px){
  .jump{display:none}
}
@media (min-width:1000px){
  .kit{grid-template-columns:320px minmax(0,1fr);gap:28px}@media (min-width:1921px) and (min-height:901px){.kit{grid-template-columns:min(320*5vw/96,320vh/9) minmax(0,1fr);gap:min(28*5vw/96,28vh/9)}}
}
/* The factsheet follows the reader only where it fits the window whole. */
@media (min-width:1000px) and (min-height:820px){
  .sheet{position:sticky;top:20px}@media (min-width:1921px) and (min-height:901px){.sheet{top:min(20*5vw/96,20vh/9)}}
}
@media (min-width:1180px){
  .flank{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .btn,.btn:hover{transition:none;transform:none}
}