/* ============================================================
   Astral Horizon — single screen, no scrolling
   Layers:  bg (0) · characters (1) · front (2) · window (3)
   Only the first three follow the pointer; the window never moves
   with them.  Every moving layer carries overscan, so no cut edge
   can ever slide into view.
   ============================================================ */

/* Cinzel (SIL Open Font License), stored locally: classic capitals whose
   lowercase letters come out as small capitals — the lettering of the mockups */
@font-face{
  font-family:"Cinzel"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("../assets/fonts/cinzel-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cinzel"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("../assets/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:      #1b3a63;
  --gold:     #d9b35c;
  --nav-h:    4.5rem;
  --serif:    "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --display:  "Cinzel","Iowan Old Style",Palatino,Georgia,serif;
  --sans:     ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{ margin:0; }

/* the three parts sit under each other; the fixed bar must not cover a
   heading when a link jumps to one */
.hero,.sheet,.patches{ scroll-margin-top:var(--nav-h); }

.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:#cfe6fb;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; }

a{ color:inherit; text-decoration:none; }

:where(a,button):focus-visible{
  outline:.18rem solid #fff;
  outline-offset:.2rem;
  border-radius:.4rem;
}

/* ---------------------------------------------------------- nav */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  background:linear-gradient(to bottom,rgba(28,88,156,.82),rgba(28,88,156,.42) 70%,rgba(28,88,156,0));
  backdrop-filter:blur(.35rem);
  -webkit-backdrop-filter:blur(.35rem);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(15,58,112,.94);
  box-shadow:0 .4rem 1.6rem rgba(8,32,66,.35);
}

.nav__inner{
  max-width:96rem; height:100%; margin:0 auto;
  padding:0 clamp(1rem,3vw,2.5rem);
  display:flex; align-items:center; gap:1.5rem;
}

.nav__brand{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  letter-spacing:.06em;
  color:#fff; text-shadow:0 .1rem .5rem rgba(10,40,80,.45);
  white-space:nowrap;
}
.nav__brand span{ opacity:.78; margin-left:.35em; font-style:italic; }

.nav__menu{
  flex:1;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.nav__links,.nav__social{ list-style:none; margin:0; padding:0; display:flex; }

.nav__links{ gap:clamp(.6rem,1.8vw,2rem); margin-inline:auto; }
.nav__links a{
  position:relative;
  display:block; padding:.4rem .1rem;
  color:rgba(255,255,255,.92);
  font-size:.95rem; letter-spacing:.04em;
  text-shadow:0 .1rem .45rem rgba(10,40,80,.5);
  white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:.05rem; height:.12rem;
  background:#fff; border-radius:1rem;
  transform:scaleX(0);
  transition:transform .3s var(--ease);
}
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__side{ display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.1rem); }

.nav__social{ gap:.65rem; }
.nav__social a{
  display:grid; place-items:center; width:2rem; height:2rem;
  border-radius:50%; color:#fff; opacity:.88;
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease);
}
.nav__social svg{ width:1.2rem; height:1.2rem; fill:currentColor; }
.nav__social a:hover{ opacity:1; transform:translateY(-.12rem); background:rgba(255,255,255,.16); }

.btn-account{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1.1rem;
  border:1px solid rgba(255,255,255,.75); border-radius:2rem;
  color:#fff; font-size:.9rem; letter-spacing:.03em;
  background:rgba(255,255,255,.1);
  transition:background .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.btn-account svg{ width:1.05rem; height:1.05rem; fill:currentColor; }
.btn-account:hover{ background:rgba(255,255,255,.26); transform:translateY(-.1rem); }

.nav__burger{
  display:none;
  margin-left:auto;
  width:2.6rem; height:2.6rem; padding:.6rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  border-radius:.7rem; cursor:pointer;
}
.nav__burger span{
  display:block; height:.12rem; margin:.22rem 0;
  background:#fff; border-radius:1rem;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(.34rem) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.34rem) rotate(-45deg); }

/* ---------------------------------------------------------- scene */

.hero{
  position:relative;
  width:100%; height:100svh;
  overflow:hidden;
  isolation:isolate;
}

.layer{
  position:absolute; inset:0;
  pointer-events:none;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.layer img{ user-select:none; -webkit-user-drag:none; }

/* 0 — sky.  Barely zoomed: just enough spare edge for the drift,
   so a large window shows the painting, not a blow-up. */
.layer--bg{ z-index:1; }
.layer--bg img{
  position:absolute; left:-1.5%; top:-1.5%;
  width:103%; height:103%;
  object-fit:cover; object-position:center 42%;
}

/* 1 — characters */
.layer--char{ z-index:3; }
.layer--char img{
  position:absolute; bottom:-2%;
  width:auto; height:min(94%,70vw);
  filter:drop-shadow(0 1.5rem 2rem rgba(30,70,120,.25));
}
.char--left  img{ left:-3%; }
.char--right img{ right:-2.5%; }

/* 2 — foreground rocks & signs, cut down the middle.  Each half hangs on
   its own edge and is measured by HEIGHT, so pulling the window wider only
   opens more sky between them instead of blowing the rocks up. */
.layer--front{ z-index:4; }
/* the overscan is a fixed distance, not a percentage: the drift is only
   14 px, and a percentage would eat into the signs once the halves shrink */
.front{
  position:absolute; bottom:-1rem;
  width:auto; height:var(--front-h,82%);
}
.front--left { left:-1.25rem; aspect-ratio:736 / 941; }  /* a box, so the fox can sit in it */
.front--right{ right:-1.25rem; }
.front__art{ display:block; width:100%; height:100%; }

/* the blue fox, mirrored, on the lower stones of the left island.  It sits
   inside the same box as front-left.png, so it is pinned to that rock:
   same scale, same drift, same place at every window size. */
.pet-sit{
  position:absolute; left:65%; top:64.7%;
  height:27%; aspect-ratio:1122 / 1402;
}
.pet-sit img{
  position:relative; z-index:1;
  display:block; width:100%; height:100%;
  transform:scaleX(-1);
  /* no filter here on purpose: a filter gives the fox its own raster layer,
     which then rounds its position separately from the rock behind it */
}
/* a contact shadow on the stone, so it sits on the rock instead of
   hovering in front of it */
.pet-sit::after{
  content:""; position:absolute; z-index:0;
  left:16%; width:70%; bottom:3.2%; height:8%;
  background:radial-gradient(closest-side,rgba(28,40,34,.5),rgba(28,40,34,0));
}

/* the goggled flier, mirrored, over on the mage's side */
.layer--pet{ z-index:3; }
.pet-fly{
  position:absolute;
  right:1.5%; top:calc(var(--nav-h) + 1%);
  height:min(26%,20vw);
  aspect-ratio:1122 / 1402;
  will-change:transform;
  animation:hover 5.5s ease-in-out infinite;
}
.pet-fly img{
  width:100%; height:100%;
  transform:scaleX(-1);
  filter:drop-shadow(0 1rem 1.2rem rgba(30,70,120,.22));
}
@keyframes hover{
  0%,100%{ transform:translate3d(0,-.3rem,0) rotate(-1.5deg); }
  50%    { transform:translate3d(0,.3rem,0)  rotate(1.5deg); }
}

/* 3 — launcher window.  Stands still: no drift, no float. */
.layer--window{
  z-index:6;
  display:flex; align-items:center; justify-content:center;
  padding-top:var(--nav-h);
  transform:none; will-change:auto;
}

.window{
  position:relative;
  --wh:min(82svh,calc(86vw * 1402 / 1122),52rem);
  height:var(--wh);
  width:calc(var(--wh) * 1122 / 1402);
  pointer-events:auto;
}
.window img{
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 1.5rem 2.5rem rgba(24,66,118,.28));
}

/* the launcher artwork leaves its content box empty — this fills it */
.panel{
  position:absolute; left:7.2%; top:37.4%;
  width:85.6%; height:20.8%;
  padding:1.6% 3.2% 0;
  display:flex; flex-direction:column;
  overflow:hidden;
  color:#1c4a86;
  font-size:calc(var(--wh) * .0215);
  line-height:1.45;
}
.panel__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  border-bottom:1px solid rgba(60,130,205,.28);
  padding-bottom:.25em; margin-bottom:.45em;
}
.panel__title{
  margin:0;
  font-family:var(--serif);
  font-size:calc(var(--wh) * .036);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#12427e;
}
.panel__ver{
  font-size:calc(var(--wh) * .019);
  letter-spacing:.08em; text-transform:uppercase;
  color:#5b83b4; white-space:nowrap;
}
.panel__text{ margin:0; }

/* clickable regions baked into the panel artwork — these stay completely
   invisible, they only carry the cursor and the click */
.hot{
  position:absolute; display:block;
  background:none; border:0; box-shadow:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hot:hover,.hot:active{ background:none; box-shadow:none; }

.hot--account{ left:73.0%; top:18.8%; width:19.6%; height:4.8%; border-radius:1.6rem; }
.hot--play   { left:10.0%; top:64.2%; width:80.0%; height:8.8%; border-radius:1.6rem; }
.hot--patch  { left:10.2%; top:73.8%; width:37.6%; height:6.8%; }
.hot--welcome{ left:50.0%; top:73.8%; width:39.8%; height:6.8%; }

/* ---------------------------------------------------------- status */

.status{
  position:absolute; z-index:7;
  left:clamp(1rem,2.5vw,2.5rem); bottom:1.4rem;
  margin:0; padding:.5rem .9rem;
  display:flex; align-items:center; gap:.5rem;
  font-size:clamp(.62rem,.8vw,.76rem); letter-spacing:.09em; text-transform:uppercase;
  color:#1f4b78;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:2rem;
  backdrop-filter:blur(.3rem);
  -webkit-backdrop-filter:blur(.3rem);
  box-shadow:0 .4rem 1.2rem rgba(24,66,118,.18);
}
.status .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:#37c36a; box-shadow:0 0 .5rem #37c36a;
}
.status__ver{ opacity:.78; margin-left:.4rem; }
.status__build{ font-size:.82em; opacity:.5; letter-spacing:.06em; }

/* ---------------------------------------------------------- shape of the screen */

/* very wide: the foreground grows with the width, so the heroes step
   up out of the rocks instead of drowning in them */
@media (min-aspect-ratio:2/1){
  .layer--char img{ height:min(94%,36vw); bottom:-1%; }
  .char--left  img{ left:2%; }
  .char--right img{ right:1%; }
}

@media (max-aspect-ratio:3/2){
  .layer--char img{ height:min(74%,56vw); }
  .char--left  img{ left:-7%; }
  .char--right img{ right:-6%; }
  .window{ --wh:min(66svh,calc(78vw * 1402 / 1122),42rem); }
  .layer--front{ --front-h:min(74%,70vw); }
  .pet-fly{ height:min(22%,20vw); }
}

@media (max-aspect-ratio:1/1){
  .layer--char img{ height:min(44%,68vw); }
  .char--left  img{ left:-16%; }
  .char--right img{ right:-15%; }
  .window{ --wh:min(62svh,calc(92vw * 1402 / 1122),40rem); }
  .layer--window{ padding-bottom:4svh; }
  .layer--front{ --front-h:min(40%,56vw); }
  .pet-fly{ top:calc(var(--nav-h) + 3%); right:4%; height:min(15%,30vw); }
}

@media (max-width:960px){
  :root{ --nav-h:4rem; }

  .nav__burger{ display:block; }
  .nav__menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 1rem 1.25rem;
    background:rgba(19,72,134,.97);
    box-shadow:0 1rem 2rem rgba(12,44,84,.3);
    clip-path:inset(0 0 100% 0);
    opacity:0; pointer-events:none;
    transition:clip-path .35s var(--ease),opacity .25s var(--ease);
  }
  .nav__menu.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav__links{ flex-direction:column; gap:0; margin:0; }
  .nav__links a{ padding:.8rem .2rem; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav__links a::after{ display:none; }
  .nav__side{ justify-content:space-between; padding-top:1rem; }
}

@media (max-width:620px){
  .layer--char img{ height:min(38%,74vw); }
  .char--left  img{ left:-20%; }
  .char--right img{ right:-19%; }
  .window{ --wh:min(58svh,calc(94vw * 1402 / 1122)); }
  .layer--front{ --front-h:min(30%,58vw); }
  .status{ flex-direction:column; gap:.2rem; text-align:center;
            left:50%; bottom:1rem; transform:translateX(-50%); white-space:nowrap; }
  .status__ver{ margin:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   Patch notes — one screen below, reached only through PATCH
   ============================================================ */

.patches{
  position:relative;
  min-height:100svh;
  padding:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem);
  color:#eaf3ff;
  isolation:isolate;
}

.patches__sky{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.patches__sky img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  filter:blur(.15rem) saturate(.9);
  transform:scale(1.04);
}
.patches__sky::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(12,44,88,.86),rgba(12,44,88,.72) 45%,rgba(12,44,88,.9));
}

.patches__inner{ max-width:52rem; margin:0 auto; }

.patches__head{ text-align:center; margin-bottom:clamp(2rem,4vw,3rem); }

.patches__kicker{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(.85rem,1.2vw,1rem); color:rgba(226,240,255,.7);
}
.patches__title{
  margin:.2rem 0 .6rem;
  font-family:var(--serif);
  font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:.12em; text-transform:uppercase;
  text-shadow:0 .2rem 1.2rem rgba(6,26,56,.6);
}
.patches__meta{
  margin:0 0 1.4rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(200,224,255,.75);
}

.patches__back{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.3rem;
  font:inherit; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; cursor:pointer;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.55); border-radius:2rem;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.patches__back svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.patches__back:hover{ background:rgba(255,255,255,.26); transform:translateY(-.1rem); }

.patches__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2vw,1.5rem); }

.release{
  padding:clamp(1.1rem,2.4vw,1.8rem);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:1rem;
  backdrop-filter:blur(.5rem);
  -webkit-backdrop-filter:blur(.5rem);
  box-shadow:0 .6rem 1.8rem rgba(6,26,56,.25);
}
.release__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding-bottom:.7rem; margin-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.release__version{
  font-family:var(--serif); font-size:1.25rem; letter-spacing:.06em; color:#fff;
}
.release__title{ font-family:var(--serif); font-style:italic; color:rgba(226,240,255,.85); }
.release__date{
  margin-left:auto; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(200,224,255,.7);
}
.release__commit{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem; color:rgba(200,224,255,.55);
}

.release__changes{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.release__changes li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem; align-items:baseline;
  font-size:.95rem; line-height:1.6; color:rgba(238,246,255,.94);
}

.badge{
  justify-self:start;
  padding:.18rem .55rem;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:1rem; border:1px solid transparent; white-space:nowrap;
}
.badge--feature{ background:rgba(217,179,92,.22); border-color:rgba(217,179,92,.55); color:#f3dda6; }
.badge--fix    { background:rgba(120,190,255,.18); border-color:rgba(120,190,255,.5);  color:#cfe7ff; }
.badge--balance{ background:rgba(120,220,160,.16); border-color:rgba(120,220,160,.45); color:#cdf3de; }
.badge--note   { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3);  color:#e6eefb; }

.patches__foot{
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  text-align:center; font-size:.72rem; letter-spacing:.35em;
  color:rgba(200,224,255,.5);
}

@media (max-width:620px){
  .release__changes li{ grid-template-columns:1fr; gap:.2rem; }
  .release__date{ margin-left:0; width:100%; }
}

/* ============================================================
   Welcome — its own page, so it may scroll like any text page
   ============================================================ */

body.page{ overflow:visible; }

.sheet{
  position:relative;
  min-height:100svh;
  padding:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(1rem,4vw,2.5rem) clamp(3rem,6vw,5rem);
  color:#1d4577;
  isolation:isolate;
}

.sheet__sky{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.sheet__sky img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  filter:blur(.2rem) saturate(.95);
  transform:scale(1.05);
}
.sheet__sky::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(233,244,255,.68),rgba(240,248,255,.82));
}

.sheet__inner{
  max-width:58rem; margin:0 auto;
  padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,4vw,3.6rem) clamp(2rem,4vw,3rem);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(60,130,205,.22);
  border-radius:1.2rem;
  box-shadow:0 1rem 3rem rgba(24,66,118,.16);
  backdrop-filter:blur(.4rem);
  -webkit-backdrop-filter:blur(.4rem);
}

.sheet__head{ text-align:center; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.sheet__kicker{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(.85rem,1.2vw,1rem); color:#5b83b4;
}
.sheet__title{
  margin:.2rem 0 .8rem;
  font-family:var(--serif);
  font-size:clamp(1.9rem,4.2vw,2.9rem);
  letter-spacing:.12em; text-transform:uppercase; color:#12427e;
}
.sheet__lead{
  margin:0 auto; max-width:38rem; text-wrap:balance;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; color:#33578a;
}
.sheet__lead--turn{ margin-top:.5rem; color:#12427e; }

.sheet__body p{
  margin:0 0 1.1rem;
  max-width:46rem;
  line-height:1.8; font-size:clamp(.96rem,1.2vw,1.05rem);
  text-wrap:pretty;              /* no single word left alone on a line */
}
.sheet__body strong{ color:#12427e; }

/* the short, flat line that lands on its own */
.sheet__body .beat{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.4vw,1.15rem);
  color:#12427e;
}

.sheet__body h3{
  margin:2rem 0 .9rem;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.25rem);
  letter-spacing:.1em; text-transform:uppercase; color:#12427e;
}
.sheet__body h3::after{
  content:""; display:block; width:2.5rem; height:1px; margin-top:.5rem;
  background:linear-gradient(to right,var(--gold),transparent);
}

.sheet__list{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.6rem; }
.sheet__list li{
  display:grid; grid-template-columns:10rem 1fr; gap:.9rem;
  line-height:1.7; font-size:clamp(.94rem,1.15vw,1rem);
}
.sheet__list span{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#2c6aae; padding-top:.35em;
}

.sheet__sign{
  margin-top:1.8rem;
  font-family:var(--serif); font-style:italic; color:#5b83b4;
}

.sheet__actions{
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:11rem; padding:.85rem 1.8rem;
  border-radius:2rem; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.btn--primary{
  color:#fff; border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(to bottom,#4ea6f0,#1665bd);
  box-shadow:0 .5rem 1.4rem rgba(22,101,189,.3);
}
.btn--primary:hover{ transform:translateY(-.15rem); box-shadow:0 .8rem 2rem rgba(22,101,189,.42); }
.btn--ghost{ color:#1e5fa8; border:1px solid #1e5fa8; background:transparent; }
.btn--ghost:hover{ background:rgba(30,95,168,.08); transform:translateY(-.15rem); }

.sheet__foot{
  margin:clamp(2rem,4vw,3rem) 0 0;
  text-align:center; font-size:.72rem; letter-spacing:.35em; color:rgba(45,90,140,.45);
}

@media (max-width:620px){
  .sheet__list li{ grid-template-columns:1fr; gap:.1rem; }
  .btn{ width:100%; }
}

/* three numbers before the text starts */
.facts{
  list-style:none; margin:0 0 clamp(1.6rem,3vw,2.2rem); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
  text-align:center;
}
.facts li{
  padding:.9rem .4rem;
  background:rgba(226,240,255,.7);
  border:1px solid rgba(60,130,205,.2);
  border-radius:.8rem;
}
.facts strong{
  display:block; font-family:var(--serif);
  font-size:clamp(1.3rem,3vw,1.9rem); color:#12427e;
}
.facts span{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#5b83b4;
}

/* the sentences that did not make it onto the sign */
.titles{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid rgba(60,130,205,.22);
}
.titles summary{
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; list-style:none;
  font-family:var(--serif);
  font-size:clamp(.92rem,1.4vw,1.05rem);
  letter-spacing:.08em; text-transform:uppercase; color:#3d6ba3;
  transition:color .25s var(--ease);
}
.titles summary::-webkit-details-marker{ display:none; }
.titles summary::before{
  content:"+"; display:grid; place-items:center;
  width:1.3rem; height:1.3rem;
  font-family:var(--sans); font-size:.9rem; line-height:1;
  border:1px solid rgba(60,130,205,.4); border-radius:50%;
}
.titles[open] summary::before{ content:"–"; }
.titles summary:hover{ color:#12427e; }

.titles__body{ padding-top:1.1rem; }
.titles ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.titles li{
  padding:.3rem .7rem;
  font-size:.78rem; color:#40669a;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(60,130,205,.22);
  border-radius:2rem;
}
.titles li:nth-child(3n)  { transform:rotate(-1.2deg); }
.titles li:nth-child(4n+1){ transform:rotate(1deg); }
.titles__note{
  margin:1.1rem 0 0;
  font-family:var(--serif); font-style:italic; line-height:1.6; color:#5b83b4;
}

@media (max-width:620px){
  .facts{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------- background music */

.btn-sound{
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; padding:0;
  color:#fff; cursor:pointer;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  transition:background .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);
}
.btn-sound:hover{ background:rgba(255,255,255,.26); transform:translateY(-.1rem); }
.btn-sound svg{ width:1.15rem; height:1.15rem; fill:currentColor; }

/* off is the resting look, on lights up while the track plays */
.btn-sound__on { display:none; }
.btn-sound.is-on .btn-sound__on { display:block; }
.btn-sound.is-on .btn-sound__off{ display:none; }
.btn-sound:not(.is-on){ opacity:.72; }
.btn-sound.is-on{ border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.2); }

/* ============================================================
   Overview — the frozen valley
   layer 0: sky, drifts and lags behind the scroll
   layer 1: banner and cards, they never move
   layer 2: the mammoth, drifts with the pointer
   Every frame keeps its own aspect ratio, so nothing is stretched; the
   text inside is sized in cqw and grows with its card.
   ============================================================ */

.ice{
  position:relative;
  overflow:clip;                   /* clip, not hidden: the pinned layers need it */
  isolation:isolate;
  min-height:100svh;
  color:#1d4577;
}

/* valley and mammoth are one screen tall and stay pinned while the cards
   scroll past.  So the picture is never blown up to the height of the
   section, and the scrolling itself gives the depth. */
.ice__layer{
  position:sticky; top:0;
  height:100svh; margin-bottom:-100svh;
  pointer-events:none; will-change:transform;
}
.ice__layer--bg{ z-index:-2; }
.ice__layer--bg img{
  position:absolute; left:-1%; top:-1%;        /* just enough for the 3 px drift */
  width:102%; height:102%;
  object-fit:cover; object-position:center 42%;
}

.ice__layer--beast{ z-index:0; }   /* above the cloud bank, below the cards (DOM order) */
.ice__mammoth{
  position:absolute; right:-1rem;
  bottom:calc(-1rem - 30px);        /* the rock reaches past the lower edge, no gap under it */
  width:auto; height:min(68%,42vw,48rem);
}

/* the big soft cloud bank behind banner and cards, as in the mockup:
   overlapping white ellipses give it a billowy edge, a light blur melts
   them together.  It does not move, so it costs nothing while scrolling. */
.ice__inner::before{
  content:""; position:absolute; z-index:-1;
  left:-18%; right:-18%; top:-12%; bottom:-11%;
  pointer-events:none;
  background:
    /* the bright puff behind the banner */
    radial-gradient(ellipse 36% 21% at 50% 11%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,0) 76%),
    radial-gradient(ellipse 22% 16% at 31% 15%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 22% 16% at 69% 14%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    /* billows along the sides */
    radial-gradient(ellipse 24% 19% at 17% 34%, rgba(255,255,255,.88), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 24% 19% at 83% 32%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 22% 21% at 13% 60%, rgba(255,255,255,.82), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 22% 21% at 87% 62%, rgba(255,255,255,.72), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 22% 18% at 18% 86%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 22% 18% at 82% 88%, rgba(255,255,255,.66), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 14% at 42% 97%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 14% at 62% 96%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
    /* the milky body behind all cards */
    radial-gradient(ellipse 56% 54% at 50% 52%, rgba(246,251,255,.93) 0%, rgba(246,251,255,.86) 52%, rgba(246,251,255,0) 82%);
  filter:blur(18px);
}

.ice__inner{
  position:relative; margin:0 auto;
  /* the whole board fits one screen on a desktop, like the mockup */
  width:min(62rem,60vw,calc((100svh - 10rem - 15px) * 1.25));
  padding:calc(var(--nav-h) + clamp(.4rem,1.6vw,1.4rem)) 0 clamp(1.6rem,3vw,2.6rem);
}

.ice__banner{
  display:block; width:min(58%,34rem); height:auto;
  margin:0 auto clamp(.6rem,1.4vw,1.1rem);
}

/* ---------------------------------------------------------- rate badges */

.ice__rates{
  --rate-gap:clamp(.4rem,.9vw,.8rem);
  --rate-cols:4;
  container-type:inline-size;          /* the badges measure their height from this row */
  list-style:none; margin:0 0 clamp(.7rem,1.3vw,1rem); padding:0;
  display:grid; grid-template-columns:repeat(var(--rate-cols),1fr); gap:var(--rate-gap);
  align-items:center;
}

.rate{
  container-type:inline-size;
  position:relative;
  display:grid; grid-template-columns:24% 1fr; column-gap:5%;
  align-content:center; align-items:center;
  padding:6% 8% 6.5%;
  background:center / 100% 100% no-repeat;
  /* the shared frame height plus 15 px, stretched upward on purpose */
  height:calc((100cqw - (var(--rate-cols) - 1) * var(--rate-gap)) / var(--rate-cols) / 2.0094 + 15px);
}
/* the four badges share one height: the mean of their frames (at most
   1.8 % off their own) plus 15 px, see the height on .rate.  The fourth
   badge (price) keeps the frame that was drawn for level-up. */
.rate--exp    { background-image:url("../assets/techover/cut/card-exp.png"); }
.rate--drop   { background-image:url("../assets/techover/cut/card-drop.png"); }
.rate--gold   { background-image:url("../assets/techover/cut/card-gold.png"); }
.rate--free   { background-image:url("../assets/techover/cut/card-levelup.png"); }

.rate__icon{ display:block; width:100%; }
.rate__icon svg,
.rate__icon img{ display:block; width:100%; height:auto; filter:drop-shadow(0 .15rem .25rem rgba(30,70,140,.25)); }
/* the painted icons are not square: keep them centred at a common height */
.rate__icon img{ width:auto; height:auto; max-width:100%; max-height:20cqw; margin:0 auto; }
.rate__head{ display:flex; flex-direction:column; min-width:0; }
.rate__label{
  font-family:var(--serif); font-weight:600;
  font-size:6.4cqw; letter-spacing:.05em; text-transform:uppercase;
  color:#12427e; white-space:nowrap;
}
.rate__value{                      /* a word, not a number: a little smaller */
  font-family:var(--serif); font-weight:600;
  font-size:11cqw; line-height:1.05; color:#1e5fa8;
}
.rate__note{
  grid-column:1 / -1;
  margin-top:3.5%;
  text-align:center; text-wrap:balance;
  font-size:5.3cqw; line-height:1.28; color:#33578a;
}

/* ---------------------------------------------------------- the four panels */

.ice__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.5rem,1vw,.9rem) clamp(.6rem,1.2vw,1rem);
  align-items:center;
}

.card{
  container-type:inline-size;
  position:relative;
  background:center / 100% 100% no-repeat;
}
/* the two cards of a row meet in the middle: each pair shares the mean of
   its two frame heights, so one frame stretches a little and the other
   gives a little (server +2 %, event −2 %, economy +10 %, philosophy −8.5 %).
   Everything inside is placed in percent, so it moves with the frame. */
.card--server    { aspect-ratio:2.0325; background-image:url("../assets/techover/cut/card-server.png"); }
.card--event     { aspect-ratio:2.0325; background-image:url("../assets/techover/cut/card-event.png"); }
.card--economy   { aspect-ratio:2.0078; background-image:url("../assets/techover/cut/card-economy.png"); }
.card--philosophy{ aspect-ratio:2.0078; background-image:url("../assets/techover/cut/card-philosophy.png"); }

.card__title{
  position:absolute; margin:0;
  display:flex; align-items:center; gap:2.2cqw;
  font-family:var(--serif); font-weight:600;
  font-size:3.7cqw; letter-spacing:.07em; text-transform:uppercase;
  color:#12427e; white-space:nowrap;
}
.card__icon{ width:5cqw; height:5cqw; flex:none; }

/* the painted pill in the top right carries a short status word */
.card__tag{
  position:absolute;
  display:grid; place-items:center;
  font-size:2.5cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#2d6fb5; white-space:nowrap;
}
.card__tag--gold { color:#a86400; }
.card__tag--green{ color:#2e7d46; }

/* positions measured on the trimmed frames */
.card--server .card__title    { left:15.5%; top:9.6%; height:11.3%; }
.card--server .card__tag      { left:73.9%; top:9.6%; width:19.6%; height:11.3%; }
.card--event .card__title     { left:5%;    top:9.6%; height:10.4%; }
.card--event .card__tag       { left:68%;   top:9.6%; width:26.5%; height:10.4%; }
.card--economy .card__title   { left:5%;    top:10.4%; height:11.1%; }
.card--economy .card__tag     { left:63.3%; top:10.4%; width:31.3%; height:11.1%; }
.card--philosophy .card__title{ left:6.5%;  top:8%;   height:11%; }

/* server facts */
.card__list{
  position:absolute; left:7.5%; right:7%; top:29%; bottom:10%;
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; justify-content:space-evenly;
}
.card__row{
  display:grid; grid-template-columns:5.4cqw 1fr; gap:2.6cqw; align-items:center;
  font-size:3.05cqw; line-height:1.3; color:#1d4577;
}
.card__mark svg{ display:block; width:100%; height:auto; fill:#2d6fb5; }

/* server facts read like a data sheet: term on the left, state on the right */
.card__row--sheet{
  grid-template-columns:5.4cqw 25cqw 1fr;
  padding-bottom:.9cqw;
  border-bottom:1px solid rgba(60,130,205,.14);
}
.card__row--sheet:last-child{ border-bottom:0; padding-bottom:0; }
.card__key{
  font-size:2.35cqw; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#5b83b4; white-space:nowrap;
}
.card__value{ color:#1d4577; }

/* world rhythm: one event helps, one holds back */
.card__days{
  position:absolute; left:5%; right:5%; top:27.5%; bottom:7.5%;
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; justify-content:space-between;
}
.card__days::before{              /* the thin gold thread between the dots */
  content:""; position:absolute; left:calc(14cqw + 3.9cqw); top:10%; bottom:10%;
  width:1px; background:rgba(214,160,60,.55);
}
.day{
  position:relative;
  display:grid; grid-template-columns:14cqw 3cqw 1fr; column-gap:2.4cqw; align-items:center;
}
.day__chip{
  display:grid; place-items:center;
  height:4.6cqw;
  font-size:2.3cqw; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#a86400;
  background:#fdeccb; border:1px solid rgba(214,160,60,.55); border-radius:3cqw;
}
.day__dot{
  justify-self:center; position:relative; z-index:1;
  width:2cqw; height:2cqw; border-radius:50%;
  background:radial-gradient(circle,#ffd36b 35%,#e0a02e 40%,#e0a02e 60%,#fff5dc 64%);
  box-shadow:0 0 0 .35cqw #fff5dc;
}
.day__body{ display:flex; flex-direction:column; min-width:0; }
.day__title{ font-family:var(--serif); font-weight:600; font-size:3.25cqw; line-height:1.15; color:#12427e; }
.day__text { font-size:2.55cqw; line-height:1.25; color:#40669a; }

/* economy notes: four lines next to the four painted checkmarks */
.card__checks{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.card__checks li{
  position:absolute; left:14.8%; right:6%;
  transform:translateY(-50%);
  font-size:3.2cqw; line-height:1.25; color:#1d4577;
}
.card__checks li:nth-child(1){ top:36.9%; }
.card__checks li:nth-child(2){ top:51.3%; }
.card__checks li:nth-child(3){ top:66.3%; }
.card__checks li:nth-child(4){ top:81.1%; }

/* our philosophy: the frame keeps its size.  The text uses the whole
   inner area, left-aligned, and scrolls inside the frame when it is longer
   than the frame — a soft fade at the bottom hints that there is more. */
.card__scroll{
  position:absolute; left:6.5%; right:4.5%; top:21%; bottom:9%;
  overflow-y:auto; overscroll-behavior:contain;
  padding-right:2.2cqw;
  scrollbar-width:thin; scrollbar-color:rgba(30,95,168,.45) transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,#000 88%,transparent);
}
.card__scroll::-webkit-scrollbar{ width:.35rem; }
.card__scroll::-webkit-scrollbar-thumb{ background:rgba(30,95,168,.45); border-radius:1rem; }
.card__scroll:focus-visible{ outline:2px solid rgba(30,95,168,.5); outline-offset:.2rem; border-radius:.3rem; }

.card__quote{
  margin:0 0 2cqw;
  font-family:var(--serif); font-style:italic;
  font-size:3.9cqw; line-height:1.25; color:#1e5fa8;
}
.card__prose p{
  margin:0 0 1.8cqw;
  font-size:3.05cqw; line-height:1.5; color:#1d4577;
  text-wrap:pretty;
}
.card__prose p:last-child{ margin-bottom:5cqw; }   /* last line clears the fade */


/* ---------------------------------------------------------- narrower screens */

@media (max-width:1100px){
  .ice__inner{ width:min(62rem,94vw); }
  .ice__mammoth{ height:min(46%,52vw); }
}

@media (max-width:760px){
  .ice__banner{ width:94%; }
  .ice__rates{ --rate-cols:2; }
  .ice__grid{ grid-template-columns:1fr; }
  /* on a phone the cards fill the width; a pinned mammoth would only peek
     through the gaps, so it waits at the end of the section instead */
  .ice__layer--beast{ position:absolute; inset:0; height:auto; margin:0; }
  .ice__mammoth{ height:min(22%,70vw); right:-2rem; }
}

/* ============================================================
   Your Journey — six bands cut from one painting (assets/yourway)
   Every band keeps the aspect of its slice.  All positions come from a
   fit against the mockup and are written in cqw of the section width:
   1 mockup px = 100/1024 cqw.  Figures may reach up into the band above
   and are cut off at the bottom of their own band, as in the mockup.
   ============================================================ */

.journey{
  container-type:inline-size;
  position:relative;
  background:#10244a;
  scroll-margin-top:var(--nav-h);
}

.jr-band{
  position:relative;
  background:center / 100% 100% no-repeat;
  clip-path:inset(-40cqw 0 0 0);    /* open upward, closed at the sides and the bottom */
}
.jr-band--top   { aspect-ratio:2500 / 742; background-image:url("../assets/yourway/cut/top.webp"); }
.jr-band--char1 { aspect-ratio:2500 / 647; background-image:url("../assets/yourway/cut/char1.webp"); }
.jr-band--char2 { aspect-ratio:2500 / 698; background-image:url("../assets/yourway/cut/char2.webp"); }
.jr-band--char3 { aspect-ratio:2500 / 571; background-image:url("../assets/yourway/cut/char3.webp"); }
.jr-band--char4 { aspect-ratio:2500 / 479; background-image:url("../assets/yourway/cut/char4.webp"); }
.jr-band--bottom{ aspect-ratio:2500 / 554; background-image:url("../assets/yourway/cut/bottom.webp"); }

/* the gold seams were cut out of the painting and are drawn here, so they
   stay sharp at any width; figures pass in front of them */
.jr-band:not(.jr-band--top)::before{
  content:""; position:absolute; z-index:1;
  left:0; right:0; top:-1px; height:3px;
  background:linear-gradient(90deg,
    rgba(214,168,74,.25), #e9c46a 18%, #fff0c2 50%, #e9c46a 82%, rgba(214,168,74,.25));
  box-shadow:0 0 .6rem rgba(255,214,120,.55);
}

/* ---------------------------------------------------------- figures */

.jr-fig{
  position:absolute; z-index:2;
  left:var(--x); top:var(--y); height:var(--h); width:auto;
  pointer-events:none; user-select:none;
}
.jr-fig--mercenary{ --x:-7.227cqw; --y:-8.496cqw; --h:65.23cqw; }
.jr-fig--acrobat  { --x:42.19cqw;  --y:-4.980cqw; --h:77.15cqw; }
.jr-fig--mage     { --x:4.297cqw;  --y:0.586cqw;  --h:70.31cqw; }
.jr-fig--pet      { --x:45.90cqw;  --y:3.125cqw;  --h:20.12cqw; z-index:3; }
.jr-fig--healer   { --x:46.68cqw;  --y:-0.488cqw; --h:61.33cqw; }

/* hovering a band wakes its character up: a slow, small lean towards you.
   Scaled from low down, so the figure grows up out of its band instead of
   sliding; the pet in the magic band follows a moment later. */
.jr-fig{
  transform-origin:50% 88%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.jr-fig--pet{ transition-delay:.08s; }
@media (hover:hover){
  .jr-band:hover .jr-fig{
    transform:scale(1.035);
    filter:brightness(1.04) saturate(1.05);
  }
  .jr-band:hover .jr-fig--pet{ transform:scale(1.06) translateY(-.3cqw); }
}

/* ---------------------------------------------------------- class texts */

.jr-text{
  position:absolute; z-index:4;
  left:var(--cx); top:50%;
  width:30cqw;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#e6ecf7;
}
/* centre and title size per band, measured on the mockup: each title
   is set to fit its column, so the long ones are smaller */
.jr-band--char1 .jr-text{ --cx:82.5cqw; --title:3.3cqw; }
.jr-band--char2 .jr-text{ --cx:17.6cqw; --title:3.05cqw; }
.jr-band--char3 .jr-text{ --cx:81.1cqw; --title:2.4cqw; }
.jr-band--char4 .jr-text{ --cx:16.6cqw; --title:2.45cqw; }

.jr-text__icon{                     /* Tiffy's painted icons, cut out */
  display:block; margin:0 auto .35em;
  width:auto; height:min(3.6cqw,68px);
  color:#e7c26a;
  filter:drop-shadow(0 0 .35rem rgba(255,214,120,.35));
}
.jr-text__title{
  margin:0;
  font-family:var(--display); font-weight:700;
  letter-spacing:.01em;
  font-size:min(var(--title,3.3cqw),64px); line-height:1.05;
  white-space:nowrap;
  background:linear-gradient(to bottom,#fbe39a,#dcaa4a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 .1rem .3rem rgba(0,0,0,.35));
}
.jr-text__sub{
  margin:.25em 0 .75em;
  font-family:var(--serif); font-style:italic;
  font-size:min(1.55cqw,30px);
  color:#e9d08e;
}
.jr-text__body{
  margin:0 auto; max-width:27cqw;
  font-size:min(1.2cqw,23px); line-height:1.5;
  color:#e3e9f5; text-wrap:balance;
  text-shadow:0 .1rem .4rem rgba(5,15,40,.5);
}

/* ---------------------------------------------------------- top and bottom
   placeholders — Tiffy's banners replace these */

.jr-banner{
  position:absolute; left:50%; top:50%;
  width:min(60cqw,64rem);
  transform:translate(-50%,-44%);
  text-align:center; color:#1d4577;
}
/* a soft white cloud behind the banner, the same recipe as the overview:
   overlapping white ellipses melted together with a blur.  It lifts the
   banner off the busy painting and stays still. */
.jr-banner::before{
  content:""; position:absolute; z-index:-1;
  left:-28%; right:-28%; top:-46%; bottom:-42%;
  pointer-events:none;
  background:
    /* the bright body right behind the lettering */
    radial-gradient(ellipse 36% 40% at 50% 48%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 48%, rgba(255,255,255,0) 80%),
    /* billows around it */
    radial-gradient(ellipse 20% 30% at 31% 36%, rgba(255,255,255,.95), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 20% 30% at 69% 38%, rgba(255,255,255,.95), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 17% 26% at 19% 56%, rgba(255,255,255,.88), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 17% 26% at 81% 54%, rgba(255,255,255,.88), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 14% 20% at 9% 64%,  rgba(255,255,255,.7),  rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 14% 20% at 91% 62%, rgba(255,255,255,.7),  rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 24% 20% at 38% 80%, rgba(255,255,255,.9),  rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 24% 20% at 62% 82%, rgba(255,255,255,.88), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 26% 18% at 50% 17%, rgba(255,255,255,.9),  rgba(255,255,255,0) 74%);
  filter:blur(18px);
}
.jr-band--bottom .jr-banner{ transform:translate(-50%,-50%); }

/* the painted banner up top brings its own cloud plate */
/* the picture has the size of the overview banner (min(58 %, 34rem) of
   its board: ~525 px at 1600, 544 px from 1920 on); the text below keeps
   the wider column so its lines do not break awkwardly */
.jr-band--top .jr-banner{ width:min(54cqw,62rem); transform:translate(-50%,-44%); }
.jr-banner__art{ margin:0; }
.jr-banner__art img{ display:block; width:min(33cqw,34rem); height:auto; margin:0 auto; }
.jr-band--top .jr-banner__text{ margin-top:.2em; }

/* the bottom band keeps its HTML text for good, so its cloud is denser and
   reaches down behind the lines and the button */
.jr-band--bottom .jr-banner::before{
  left:-24%; right:-24%; top:-40%; bottom:-34%;
  background:
    radial-gradient(ellipse 46% 50% at 50% 50%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.74) 60%, rgba(255,255,255,0) 90%),
    radial-gradient(ellipse 40% 30% at 50% 70%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.6) 55%, rgba(255,255,255,0) 88%),
    radial-gradient(ellipse 22% 30% at 30% 34%, rgba(255,255,255,.7), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 22% 30% at 70% 34%, rgba(255,255,255,.7), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 20% 28% at 18% 60%, rgba(255,255,255,.62), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 20% 28% at 82% 60%, rgba(255,255,255,.62), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 30% 24% at 38% 84%, rgba(255,255,255,.66), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 30% 24% at 62% 84%, rgba(255,255,255,.66), rgba(255,255,255,0) 74%),
    radial-gradient(ellipse 28% 18% at 50% 16%, rgba(255,255,255,.64), rgba(255,255,255,0) 74%);
  filter:blur(16px);
}
.jr-banner__title{
  margin:0;
  font-family:var(--display); font-weight:600;
  letter-spacing:.01em;
  font-size:clamp(30px,5.6cqw,104px); line-height:1;
  color:#1a4a92;
  text-shadow:0 0 1.2rem rgba(255,255,255,.9);
}
.jr-banner__title--small{ font-size:clamp(24px,3.3cqw,62px); }
.jr-banner__sub{
  margin:.4em 0 .8em;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16px,1.9cqw,36px); color:#274f86;
  text-shadow:0 0 .8rem rgba(255,255,255,.9);
}
.jr-banner__text{
  margin:.6em 0 0;
  font-size:clamp(13px,1.2cqw,23px); line-height:1.55;
  color:#1d4577;
  text-shadow:0 0 .6rem rgba(255,255,255,.95);
}
.jr-banner__button{
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:1.1em;
  padding:.7em 2em;
  font-size:clamp(12px,1.15cqw,21px); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(to bottom,#3f86e0,#1a4fa6);
  border:1px solid #e7c26a; border-radius:2em;
  box-shadow:0 .4rem 1.2rem rgba(20,60,130,.35), inset 0 0 0 2px rgba(255,255,255,.18);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jr-banner__button:hover{ transform:translateY(-.1rem); box-shadow:0 .6rem 1.6rem rgba(20,60,130,.45); }

/* ---------------------------------------------------------- phone and small tablet
   not the main target: picture on top, text underneath.  The banded layout
   needs about 1000 px, below that its text would get too small. */

@media (max-width:980px){
  .jr-band--char1,.jr-band--char2,.jr-band--char3,.jr-band--char4{
    aspect-ratio:auto;
    padding-top:78cqw;               /* the picture area */
    background-size:auto 78cqw;
    background-position:var(--art-x,left) top;
    background-color:#12264e;
    clip-path:inset(-40cqw 0 0 0);
  }
  .jr-band--char1,.jr-band--char3{ --art-x:left; }
  .jr-band--char2,.jr-band--char4{ --art-x:right; }

  .jr-fig{ top:auto; bottom:auto; left:auto; right:auto; }
  .jr-fig--mercenary{ left:-6cqw;  top:-6cqw; height:96cqw; }
  .jr-fig--acrobat  { right:-8cqw; top:-4cqw; height:104cqw; }
  .jr-fig--mage     { left:-4cqw;  top:0;     height:94cqw; }
  .jr-fig--pet      { left:58cqw;  top:6cqw;  height:26cqw; }
  .jr-fig--healer   { right:-6cqw; top:0;     height:92cqw; }

  .jr-text__body{ max-width:none; }
  .jr-text{
    position:relative; left:auto; top:auto; transform:none;
    width:auto; padding:7cqw 7cqw 9cqw;
    background:linear-gradient(to bottom,rgba(16,36,74,.92),#10244a 30%);
  }
  .jr-text__title{ font-size:min(9cqw, calc(var(--title) * 2.7)); white-space:normal; }
  .jr-text__sub  { font-size:4.4cqw; }
  .jr-text__body { font-size:3.9cqw; }
  .jr-text__icon { width:auto; height:11cqw; }

  .jr-band--top,.jr-band--bottom{ aspect-ratio:auto; min-height:80cqw; background-size:cover; }
  .jr-banner{ width:88cqw; }
  .jr-band--top .jr-banner{ width:94cqw; }
  .jr-banner__art img{ width:80cqw; }
  .jr-banner__title{ font-size:11cqw; }
  .jr-banner__title--small{ font-size:7.4cqw; }
  .jr-banner__sub{ font-size:4.6cqw; }
  .jr-banner__text{ font-size:3.8cqw; }
  .jr-banner__text br{ display:none; }
  .jr-banner__button{ font-size:3.4cqw; }
}

/* ============================================================
   Welcome — the balcony view and one tall framed card
   The frame is cut in five: top (with the painted WELCOME), a plain band,
   the middle, a second plain band, the bottom.  Only the two plain bands
   stretch, so the card grows with its text and the ornaments stay true.
   Sizes inside the card are in cqw of the card: 1048 px frame = 100cqw.
   ============================================================ */

.welcome{
  position:relative; overflow:clip; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(1rem,3vw,2.5rem)) clamp(.8rem,3vw,2rem) clamp(2rem,5vw,4rem);
  scroll-margin-top:var(--nav-h);
}
.welcome__sky{
  position:sticky; top:0; z-index:-1;
  height:100svh; margin-top:calc(-1 * (var(--nav-h) + clamp(1rem,3vw,2.5rem)));
  margin-bottom:-100svh;
  margin-left:calc(-1 * clamp(.8rem,3vw,2rem)); margin-right:calc(-1 * clamp(.8rem,3vw,2rem));
}
.welcome__sky{ overflow:hidden; }
/* the text is what matters here: the view goes soft and a little lighter.
   Scaled up a touch so the blur has no pale rim at the edges. */
.welcome__sky img{
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
  filter:blur(7px) saturate(.9);
  transform:scale(1.06);
}
.welcome__sky::after{
  content:""; position:absolute; inset:0;
  background:rgba(236,245,255,.28);
}

.wl-card{
  container-type:inline-size;
  position:relative;
  width:min(62rem,94vw); margin:0 auto;
  filter:drop-shadow(0 1.2rem 2.4rem rgba(20,60,120,.28));
}
.wl-card__frame{
  position:absolute; inset:0; z-index:0;
  display:grid; grid-template-rows:auto 43fr auto 87fr auto;
}
.wl-card__frame img{ display:block; width:100%; height:auto; }
.wl-card__grow{ background:center / 100% 100% no-repeat; }
.wl-card__grow--1{ background-image:url("../assets/welcome/cut/card-grow1.webp"); }
.wl-card__grow--2{ background-image:url("../assets/welcome/cut/card-grow2.webp"); }

.wl-card__body{
  position:relative; z-index:1;
  min-height:138.2cqw;                 /* never shorter than the painted frame */
  padding:30.5cqw 8cqw 11cqw;          /* clears WELCOME on top and the ornament below */
  color:#1d4577;
}

/* ---------------------------------------------------------- the five parts */

.wl-part{
  display:block;
  padding:3cqw 0;
  position:relative;
}
.wl-part + .wl-part::before{           /* gold rule with a small star in the middle */
  content:""; position:absolute; left:4%; right:4%; top:0; height:1px;
  background:linear-gradient(90deg,rgba(217,164,65,0),#d9a441 20%,#f3d589 50%,#d9a441 80%,rgba(217,164,65,0));
}
.wl-part + .wl-part::after{
  content:"✦"; position:absolute; left:50%; top:0; transform:translate(-50%,-52%);
  font-size:max(10px,1.3cqw); line-height:1; color:#d9a441;
  background:#f7fbff; padding:0 .5em;
}

.wl-part__title{
  margin:0 0 .5em;
  font-family:var(--display); font-weight:700;
  font-size:max(18px,2.55cqw); line-height:1.15; letter-spacing:.01em;
  color:#12427e;
}
.wl-part__text p{
  margin:0 0 .55em;
  font-size:max(14px,1.58cqw); line-height:1.6; color:#1d4577;
  text-wrap:pretty;
}
.wl-part__text p:last-child{ margin-bottom:0; }

.wl-card__sign{
  margin:3cqw 0 0; text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:max(14px,1.7cqw); color:#5b83b4;
}

@media (max-width:620px){
  .wl-card{ width:100%; }
  .wl-card__body{ padding:30cqw 8cqw 14cqw; }
  .wl-part{ padding:5cqw 0; }
}

/* patch notes: game and website side by side as two tabs */
.patches__tabs{
  display:inline-flex; gap:.3rem; margin:0 0 1.2rem;
  padding:.25rem; border-radius:2rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
}
.patches__tab{
  padding:.45rem 1.3rem;
  font:inherit; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(226,240,255,.75); cursor:pointer;
  background:none; border:0; border-radius:2rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.patches__tab:hover{ color:#fff; }
.patches__tab.is-active{ color:#12427e; background:#eaf4ff; }
.patches__head{ display:flex; flex-direction:column; align-items:center; }