/* Mira Voss — shared styles for every page.
   Structure and palette follow the League of Legends champion and Universe pages:
   deep navy, hextech gold, italic display capitals, thin gold frames.
   The motifs are Mira's own: the halftone and offset orange contour of her original
   logo, the isobaths of a sea chart, and the tide. */
@property --dot { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  color-scheme: dark;
  --abyss: #010a13;
  --navy: #0a1428;
  --navy-raised: #0f1d33;
  --navy-line: #1e2d45;
  --gold: #c8aa6e;
  --gold-deep: #785a28;
  --gold-pale: #f0e6d2;
  --gold-line: rgba(200, 170, 110, .22);
  --ember: #e8622c;
  --text: #dcd8cf;
  --muted: #a09b8c;
  --display: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --sans: 'Source Sans 3', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --serif-zh: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .3, 1);
  --edge: clamp(20px, 5vw, 88px);
  --bar: 72px;
  --sub: 44px;
  --rule: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold) 50%, var(--gold-line) 82%, transparent);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52C120 30 240 22 360 34s240 44 360 44 240-40 360-46 240 22 360 30v66H0z' fill='%23010a13'/%3E%3Cpath d='M0 52C120 30 240 22 360 34s240 44 360 44 240-40 360-46 240 22 360 30' fill='none' stroke='%23c8aa6e' stroke-opacity='.55' stroke-width='1.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 20px); }
body { margin: 0; min-height: 100vh; background: var(--navy); color: var(--text); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .9em; color: var(--gold-pale); }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold-deep); color: #fff; }
[hidden] { display: none !important; }
/* Only text marked as Chinese takes the song face; the page's own language does not cascade it */
[lang='zh-Hans']:not(html):not(button) { font-family: var(--serif-zh); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 300; top: -80px; left: 16px; padding: 12px 18px; background: #1e2328; color: #f0e6d2; border: 2px solid #c8aa6e; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
.supertitle { margin: 0 0 8px; color: var(--gold); font: italic 700 clamp(17px, .9vw + 10px, 26px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.blade-title { margin: 0; color: #fff; font: italic 800 clamp(42px, 3.2vw + 22px, 80px)/1 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.label { display: block; color: var(--muted); font: 700 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.lede { max-width: 38em; font-size: clamp(17px, .3vw + 15px, 19px); color: var(--text); }
.zh-title { font: 600 clamp(18px, .5vw + 15px, 22px)/1.5 var(--serif-zh); color: var(--gold-pale); letter-spacing: .14em; }

/* The offset orange contour from Mira's original logo, behind large display type. */
.misreg { position: relative; isolation: isolate; }
.misreg::before { content: attr(data-text); position: absolute; z-index: -1; inset: 0; color: transparent; -webkit-text-stroke: 1.4px var(--ember); transform: translate(.05em, .04em); opacity: .95; pointer-events: none; transition: transform 1.6s var(--ease-out) .5s, opacity 1s var(--ease-out) .5s; }
.js .misreg:not(.is-in)::before { transform: translate(0, 0); opacity: 0; }

/* ---------- Layout ---------- */
.blade { position: relative; padding: clamp(72px, 9vw, 112px) 0; overflow: clip; }
.blade-inner { position: relative; z-index: 1; max-width: 1560px; margin: 0 auto; padding: 0 var(--edge); }
.blade-head { margin-bottom: clamp(32px, 4vw, 56px); }
.blade-head .lede { margin-top: 22px; }
.blade-dark { background: var(--abyss); }
.blade-raised { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-raised) 100%); }
.blade + .blade::before, .notch::before { content: ''; position: absolute; z-index: 2; top: 0; left: 50%; width: min(1180px, 88%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold-line) 30%, var(--gold)) left / calc(50% - 9px) 1px no-repeat, linear-gradient(270deg, transparent, var(--gold-line) 30%, var(--gold)) right / calc(50% - 9px) 1px no-repeat; }
.blade + .blade::after, .notch::after { content: ''; position: absolute; z-index: 2; top: -8.5px; left: calc(50% - 6px); width: 12px; height: 12px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); }

/* A light blade, like the champion page's skins section: cool white, never cream */
.blade-light { --navy: #f4f5f7; --navy-raised: #ffffff; --navy-line: #d8dbe1; --abyss: #eceef2; --text: #2a3140; --muted: #687080; --gold-pale: #0a1428; --gold-line: rgba(120, 90, 40, .25); color-scheme: light; background: #f4f5f7; color: #2a3140; }
.blade-light .blade-title, .blade-light h3 { color: #0a1428; }
.blade-light .supertitle, .blade-light .label, .blade-light .text-link { color: #8a6a2e; }
.blade-light .text-link:hover { color: #0a1428; }
.blade-light .misreg::before { opacity: .5; }
.blade-light ::selection { background: #c8aa6e; color: #0a1428; }

/* ---------- Gold frame (champion page meta boxes) ---------- */
.frame { position: relative; border: 1px solid var(--gold); padding: 7px; }
.frame-inner { position: relative; height: 100%; background: rgba(10, 20, 40, .78); }

/* ---------- Top bar ---------- */
.topbar { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--bar); display: flex; align-items: center; gap: 44px; padding: 0 var(--edge); background: rgba(12, 12, 14, .97); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font: italic 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.brand img { width: 42px; height: auto; transition: transform .7s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.topnav { display: flex; gap: 34px; margin-right: auto; }
.topnav a { position: relative; padding: 10px 0; color: #fff; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .82; transition: opacity .35s ease, color .35s ease; }
/* The underline draws in from the left and fades up on hover, then leaves to the right */
.topnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--gold); opacity: 0; transform: scaleX(0); transform-origin: right center; transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; pointer-events: none; }
.topnav a:hover, .topnav a:focus-visible { opacity: 1; color: #f0e6d2; }
.topnav a:hover::after, .topnav a:focus-visible::after { opacity: 1; transform: scaleX(1); transform-origin: left center; }
.topnav a[aria-current='page'] { opacity: 1; color: #fff; }
.topnav a[aria-current='page']::after { opacity: 1; transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--gold-pale); transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 26px; }
.menu-open .menu-toggle span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 21.5px; transform: rotate(-45deg); }

/* Full-screen menu on small screens */
.menu { position: fixed; z-index: 55; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: calc(var(--bar) + 24px) var(--edge) 40px; background: var(--abyss); clip-path: circle(0 at calc(100% - 42px) 30px); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; }
.menu-open .menu { clip-path: circle(150% at calc(100% - 42px) 30px); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.menu a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--navy-line); color: #fff; font: italic 800 clamp(34px, 9vw, 52px)/1.1 var(--display); text-transform: uppercase; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease-out); }
.menu a small { color: var(--gold); font: 700 12px/1 var(--sans); letter-spacing: .16em; }
.menu-open .menu a { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .06s); }
.menu-open { overflow: hidden; }

/* ---------- Buttons: the League client's hextech buttons ----------
   A dark grey face (#1E2328), a 2px gold frame running Gold 4 to Gold 2, matte gold words (#CDBE91).
   Hover lifts the frame to Gold 1 and the words to pale gold; nothing ever fills with colour.
   Pressing darkens it. The primary is the same button with one thin outer frame. */
.btn { --rise: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; color: #cdbe91; font: 700 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: #1e2328; border: 0; transition: color .35s ease, background-color .35s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.btn::before, .btn::after { content: ''; position: absolute; z-index: -1; inset: 0; padding: 2px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.btn::before { background: linear-gradient(180deg, #785a28, #c8aa6e); }
.btn::after { background: linear-gradient(180deg, #f0e6d2, #c8aa6e); opacity: 0; transition: opacity .4s ease; }
.btn:hover, .btn:focus-visible { color: #f0e6d2; background-color: #23282e; }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:active { color: #a88a52; background-color: #1a1e23; transform: translateY(1px); }
.btn:active::after { opacity: .4; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--rise); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(3px); }
.btn-gold { color: #f0e6d2; outline: 1px solid rgba(200, 170, 110, .3); outline-offset: 3px; transition: color .35s ease, background-color .35s ease, outline-color .4s ease, outline-offset .5s var(--rise), transform .15s ease; }
.btn-gold:hover, .btn-gold:focus-visible { outline-color: rgba(200, 170, 110, .65); outline-offset: 5px; }
.btn:focus-visible { outline: 1px solid #f0e6d2; outline-offset: 5px; }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 12px; letter-spacing: .06em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 20px; }

/* Text links: the nav's underline, drawn in from the left */
.text-link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; color: var(--gold); font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-pale); transition: color .35s ease; }
.text-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, currentColor 70%, rgba(200, 170, 110, 0)); transform: scaleX(0); transform-origin: right center; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.text-link svg { width: 16px; height: 16px; color: var(--gold); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.text-link:hover svg, .text-link:focus-visible svg { transform: translateX(4px); }
.text-link:hover { color: #fff; }

/* Inline meta separated by 4px gold diamonds, the champion page's separator */
.diamonds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.diamonds > * + *::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; background: var(--gold); transform: rotate(45deg); vertical-align: middle; }

/* ---------- Universe headings ----------
   Upright capitals in a gold gradient, widely tracked, over a rule that dips into a V. */
.u-title { margin: 0; font: 700 clamp(48px, 5.4vw + 12px, 112px)/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #f0e6d2; text-wrap: balance; }
.u-rule { position: relative; height: 1px; margin: 22px auto 0; width: min(1180px, 92%); }
.u-rule::before, .u-rule::after { content: ''; }
.u-rule.notch::before { top: 0; }
.u-sub { margin: 20px 0 0; color: var(--gold-pale); font: 600 13px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.u-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin: 0 auto clamp(32px, 4vw, 52px); max-width: 1180px; }
.u-head::before, .u-head::after { content: ''; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line) 40%, var(--gold)); }
.u-head::after { background: linear-gradient(270deg, transparent, var(--gold-line) 40%, var(--gold)); }
.u-head p { margin: 0; color: var(--gold-pale); font: 600 14px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-align: center; }
.u-head p em { color: var(--gold); font: italic 700 17px/1 var(--display); letter-spacing: .08em; }
.u-head svg, .u-head img { display: block; width: 26px; height: 26px; margin: 0 auto 10px; color: var(--gold); }

/* A 'scroll to begin' cue at the foot of a Universe opening */
.u-cue { position: absolute; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold-pale); font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; transform: translateX(-50%); }
.u-cue svg { width: 18px; height: 18px; color: var(--gold); animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob { 50% { transform: translateY(5px); } }

/* ---------- Universe sub-bar: where you are, and how far down ---------- */
.subbar { position: fixed; z-index: 58; left: 0; right: 0; top: var(--bar); height: var(--sub); display: flex; align-items: center; gap: 22px; padding: 0 var(--edge); background: rgba(16, 16, 18, .94); border-bottom: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(-100%); opacity: 0; transition: transform .45s ease-in-out, opacity .3s ease-in-out; }
.subbar.is-shown { transform: none; opacity: 1; }
.subbar-crumb { display: flex; align-items: center; gap: 12px; padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .08); height: 100%; color: var(--gold); font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.subbar-crumb img { width: 24px; height: auto; }
.subbar-crumb span::before { content: '›'; margin-right: 10px; color: rgba(255, 255, 255, .4); }
.subbar-top { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); transition: background-color .25s, color .25s; }
.subbar-top:hover { background: #1e2328; color: #f0e6d2; border-color: #f0e6d2; }
.subbar-top svg { width: 12px; height: 12px; }
.subbar-track { position: relative; flex: 1; height: 100%; }
.subbar-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(200, 170, 110, .25); }
.subbar-fill { position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: linear-gradient(90deg, rgba(200, 170, 110, .2), var(--gold)); transform-origin: left; transform: scaleX(0); }
.subbar-dot { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; }
.subbar-dot::before { content: ''; width: 5px; height: 5px; background: #6b6455; transform: rotate(45deg); transition: background-color .3s, transform .3s; }
.subbar-dot.is-past::before { background: var(--gold); }
.subbar-dot.is-current::before { background: #f1dfae; transform: rotate(45deg) scale(1.6); }
.subbar-dot span { position: absolute; top: calc(100% + 6px); left: 50%; padding: 6px 10px; color: var(--gold-pale); background: #101012; border: 1px solid var(--gold-line); font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -4px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.subbar-dot:hover span, .subbar-dot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Page moods: each page has its own water and light ---------- */
[data-theme='dusk'] { --navy: #130f14; --navy-raised: #1d1519; --navy-line: #35272c; --abyss: #09070a; --gold-line: rgba(214, 160, 110, .22); }
[data-theme='ink'] { --navy: #0c0f15; --navy-raised: #151a23; --navy-line: #272d38; --abyss: #05070a; }
[data-theme='chart'] { --navy: #071a20; --navy-raised: #0c252d; --navy-line: #183943; --abyss: #020d11; }
[data-theme='night'] { --navy: #0a0c10; --navy-raised: #12151b; --navy-line: #232832; --abyss: #040507; }
[data-theme='ice'] { --navy: #0b161c; --navy-raised: #12212a; --navy-line: #213641; --abyss: #050b0f; }

/* Film grain over everything, so no surface is a flat digital fill */
body::after { content: ''; position: fixed; z-index: 45; inset: 0; pointer-events: none; opacity: .075; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Atmospheres: sections lit by pieces of the original art ---------- */
.atmos { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.atmos::before { content: ''; position: absolute; inset: -6%; background: var(--atmos-img) var(--atmos-pos, center) / cover no-repeat; opacity: var(--atmos-op, .5); animation: drift 40s ease-in-out infinite alternate; }
.atmos::after { content: ''; position: absolute; inset: 0; background: var(--atmos-shade, linear-gradient(180deg, var(--navy) 0%, transparent 28%, transparent 72%, var(--navy) 100%)); }
.blade-dark > .atmos::after { background: var(--atmos-shade, linear-gradient(180deg, var(--abyss) 0%, transparent 28%, transparent 72%, var(--abyss) 100%)); }
@keyframes drift { from { transform: scale(1.03) translate3d(-1.5%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1.2%, 0); } }
.atmos-storm { --atmos-img: url(assets/bg/storm.webp); --atmos-op: .6; }
.atmos-dusk { --atmos-img: url(assets/bg/dusk.webp); --atmos-op: .5; --atmos-pos: center 70%; }
.atmos-lights { --atmos-img: url(assets/bg/lights.webp); --atmos-op: .4; }
.atmos-sea { --atmos-img: url(assets/bg/sea.webp); --atmos-op: .22; --atmos-pos: center 60%; }
.atmos-ice { --atmos-img: url(assets/bg/ice.webp); --atmos-op: .75; }
.atmos-ember { --atmos-img: url(assets/bg/ember.webp); --atmos-op: .32; }
.atmos-left::after { background: linear-gradient(90deg, transparent 0%, var(--navy) 62%), linear-gradient(180deg, var(--navy) 0%, transparent 25%, transparent 75%, var(--navy) 100%); }
.atmos-right::after { background: linear-gradient(270deg, transparent 0%, var(--navy) 62%), linear-gradient(180deg, var(--navy) 0%, transparent 25%, transparent 75%, var(--navy) 100%); }

/* Vard Light, drawn the way a sea chart draws a coast seen from the water. Its light turns once
   every twelve seconds, as in the story: seen from the side the beam reaches out, shortens to the
   lantern as it faces you, and reaches out the other way. */
.coastview { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.coastview svg { display: block; width: 100%; height: 100%; }
.coastview-far { height: clamp(150px, 15vw, 330px); }
.coastview-near { height: clamp(210px, 23.75vw, 470px); }
.blade:has(> .coastview-far) { padding-bottom: clamp(150px, 14vw, 300px); }
.blade:has(> .coastview-near) { padding-bottom: clamp(230px, 24vw, 470px); }
.vard-beam { animation: vard-turn 12s infinite; }
.vard-flash { opacity: 0; animation: vard-flash 12s infinite; }
.vard-lamp { animation: vard-lamp 12s infinite; }
@keyframes vard-turn {
  0% { transform: scaleX(1); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  25% { transform: scaleX(0); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  50% { transform: scaleX(-1); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  75% { transform: scaleX(0); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  100% { transform: scaleX(1); }
}
@keyframes vard-flash { 0%, 20%, 30%, 100% { opacity: 0; } 25% { opacity: 1; } }
@keyframes vard-lamp { 0%, 100% { opacity: .6; } 25% { opacity: 1; } 75% { opacity: .3; } }
.vard-label { font-family: var(--sans); font-weight: 600; letter-spacing: .16em; fill: var(--muted); }
html[data-lang='zh'] .vard-label.t-en, html:not([data-lang='zh']) .vard-label.t-zh { display: none; }
@media (max-width: 760px) { .vard-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .vard-beam, .vard-flash, .vard-lamp { animation: none; } .vard-beam { transform: scaleX(.8); } }

/* The halftone of her logo, used as a soft field of dots */
.halftone-field { position: absolute; z-index: 0; pointer-events: none; width: var(--size, 70vmin); aspect-ratio: 1; background: radial-gradient(circle, var(--dot-color, var(--gold)) 1.15px, transparent 1.7px) 0 0 / 9px 9px; opacity: var(--op, .2); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent); mask-image: radial-gradient(closest-side, #000 10%, transparent); }

/* ---------- Isobaths (sea-chart lines) ---------- */
.isobaths-bg { position: absolute; inset: 0; pointer-events: none; }
.isobaths-bg svg { width: 100%; height: 100%; }
.isobaths-bg path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .12; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.4s var(--ease-out) calc(var(--i, 0) * 60ms); }
.isobaths-bg path.major { opacity: .24; stroke-width: 1.3; }
.isobaths-bg.is-drawn path { stroke-dashoffset: var(--stop, 0); }

/* ---------- Halftone reveal: images print themselves in dots ---------- */
.js .halftone { --dot: 0px; -webkit-mask-image: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + .7px)); mask-image: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + .7px)); -webkit-mask-size: 7px 7px; mask-size: 7px 7px; transition: --dot 1.8s var(--ease-out); }
.js .halftone.is-in { --dot: 5.4px; }
.js .halftone.is-printed { -webkit-mask-image: none; mask-image: none; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-out) var(--rd, 0s), transform 1.2s var(--ease-out) var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Language ---------- */
html.i18n-pending body { visibility: hidden; animation: i18n-fallback 0s 1.2s forwards; }
@keyframes i18n-fallback { to { visibility: visible; } }
.lang-switch { position: relative; display: flex; flex: none; height: 32px; background: #111316; border: 1px solid rgba(200, 170, 110, .3); }
.lang-switch::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--gold); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
html[data-lang='zh'] .lang-switch::before { transform: translateX(100%); }
.lang-switch button { width: 40px; color: #7f7b70; font: 700 12px/1 var(--sans); letter-spacing: .06em; transition: color .3s ease; }
.lang-switch button + button { border-left: 1px solid rgba(200, 170, 110, .18); }
.lang-switch button[lang='zh-Hans'] { font: 600 13px/1 var(--serif-zh); }
.lang-switch button[aria-pressed='true'] { color: #f0e6d2; }
.lang-switch button:hover:not([aria-pressed='true']) { color: #cdbe91; }
main, .site-footer, .topnav, .topbar .btn-small, .subbar-crumb, .consent { transition: opacity .23s ease, filter .23s ease; }
html.lang-out main, html.lang-out .site-footer, html.lang-out .topnav, html.lang-out .topbar .btn-small, html.lang-out .subbar-crumb, html.lang-out .consent { opacity: 0; filter: blur(6px); }
html.lang-in main, html.lang-in .site-footer, html.lang-in .topnav, html.lang-in .topbar .btn-small, html.lang-in .subbar-crumb, html.lang-in .consent { transition: opacity .6s ease, filter .6s ease; }

/* Chinese: display type in a heavy song face, upright, with Chinese spacing */
html[data-lang='zh'] .blade-title, html[data-lang='zh'] .page-title:not([data-latin]), html[data-lang='zh'] .skins-title, html[data-lang='zh'] .explore-title, html[data-lang='zh'] .work-title { font-family: var(--serif-zh); font-style: normal; font-weight: 900; letter-spacing: .04em; line-height: 1.22; text-transform: none; }
html[data-lang='zh'] .blade-title { font-size: clamp(34px, 2.4vw + 18px, 62px); }
html[data-lang='zh'] .supertitle { font: 600 clamp(15px, .4vw + 13px, 19px)/1.5 var(--serif-zh); letter-spacing: .22em; text-transform: none; }
html[data-lang='zh'] .u-title { font-family: var(--serif-zh); font-weight: 900; letter-spacing: .3em; padding-left: .3em; }
html[data-lang='zh'] .u-sub, html[data-lang='zh'] .u-head > span, html[data-lang='zh'] .label, html[data-lang='zh'] .meta-title, html[data-lang='zh'] .meta-value, html[data-lang='zh'] .key-name, html[data-lang='zh'] .thumb-name { letter-spacing: .16em; }
html[data-lang='zh'] .btn, html[data-lang='zh'] .text-link, html[data-lang='zh'] .topnav a, html[data-lang='zh'] .footer-nav a { letter-spacing: .14em; }
html[data-lang='zh'] .ability-info h3, html[data-lang='zh'] .bell-panel h3, html[data-lang='zh'] .place-detail h3, html[data-lang='zh'] .art-caption h3, html[data-lang='zh'] .canon-col h3, html[data-lang='zh'] .spec-note h3, html[data-lang='zh'] .faq summary, html[data-lang='zh'] .reading-order h3, html[data-lang='zh'] .menu a { font-family: var(--serif-zh); font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: none; }
html[data-lang='zh'] .lede, html[data-lang='zh'] p { line-break: strict; }
/* Lines that belong only to the Chinese page, such as the English name under a Chinese title */
html:not([data-lang='zh']) .zh-only { display: none !important; }
html:not([data-lang='zh']) .zh-title + .lede { margin-top: 22px; }

/* ---------- Cookie and storage notice, as the League's banner ---------- */
.consent { position: fixed; z-index: 70; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 28px; width: min(980px, calc(100% - 32px)); padding: 18px 22px 18px 26px; background: rgba(14, 14, 16, .97); border: 1px solid rgba(255, 255, 255, .08); border-top: 2px solid var(--gold); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); transform: translate(-50%, calc(100% + 40px)); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.consent.is-shown { transform: translate(-50%, 0); }
.consent p { margin: 0; color: #d9d5cc; font-size: 14.5px; line-height: 1.6; }
.consent-actions { display: flex; flex: none; gap: 12px; }

/* ---------- Reveals: each section chooses its own ---------- */
/* mask: a heading rises out of a hidden baseline */
.js [data-reveal='mask'] { clip-path: inset(-20% -6% 100% -6%); transform: translateY(26px); transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s), transform 1s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s); }
.js [data-reveal='mask'].is-in { clip-path: inset(-20% -6% -30% -6%); transform: none; }
/* wipe: a paragraph is uncovered left to right, like a line being read */
.js [data-reveal='wipe'] { clip-path: inset(0 100% 0 0); opacity: .2; transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1) var(--rd, 0s), opacity 1.3s ease var(--rd, 0s); }
.js [data-reveal='wipe'].is-in { clip-path: inset(0 0 0 0); opacity: 1; }
/* unfold: art opens from its middle like a chart being unrolled */
.js [data-reveal='unfold'] { clip-path: inset(48% 0 48% 0); transform: scale(1.04); transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1) var(--rd, 0s), transform 1.6s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s); }
.js [data-reveal='unfold'].is-in { clip-path: inset(0 0 0 0); transform: none; }
/* flip: cards tip up from the table */
.js [data-reveal='flip'] { opacity: 0; transform: perspective(900px) rotateX(16deg) translateY(36px); transform-origin: 50% 100%; transition: opacity .9s ease var(--rd, 0s), transform 1.1s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s); }
.js [data-reveal='flip'].is-in { opacity: 1; transform: var(--tilt-t, none); }
/* focus: something comes into focus, sharpening from a blur */
.js [data-reveal='focus'] { opacity: 0; filter: blur(14px); transform: scale(.96); transition: opacity 1s ease var(--rd, 0s), filter 1.1s ease var(--rd, 0s), transform 1.3s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s); }
.js [data-reveal='focus'].is-in { opacity: 1; filter: none; transform: var(--tilt-t, none); }
/* from the side */
.js [data-reveal='from-left'], .js [data-reveal='from-right'] { opacity: 0; transition: opacity .9s ease var(--rd, 0s), transform 1.1s cubic-bezier(.22, 1, .36, 1) var(--rd, 0s); }
.js [data-reveal='from-left'] { transform: translateX(-48px); }
.js [data-reveal='from-right'] { transform: translateX(48px); }
.js [data-reveal='from-left'].is-in, .js [data-reveal='from-right'].is-in { opacity: 1; transform: none; }
/* cascade: the rows of a list slide in one after another */
.js [data-cascade] > * { opacity: 0; transform: translateX(-22px); transition: opacity .6s ease calc(var(--ci, 0) * 60ms + .1s), transform .8s cubic-bezier(.22, 1, .36, 1) calc(var(--ci, 0) * 60ms + .1s); }
.js [data-cascade].is-in > * { opacity: 1; transform: none; }
/* ink: characters arrive as if written */
.js [data-ink] .ink { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.18em); transition: opacity .7s ease, filter .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i) * 55ms + .1s); }
.js [data-ink].is-in .ink { opacity: 1; filter: none; transform: none; }
.ink-word { display: inline-block; white-space: nowrap; }

/* ---------- Cards that lean toward the pointer, lit where it rests ---------- */
[data-tilt] { --tilt-t: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform: var(--tilt-t); will-change: transform; }
[data-tilt].is-settled { transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }

/* ---------- Footer: centred, as the League footer ---------- */
.site-footer { position: relative; background: #0c0c0e; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; padding: 30px var(--edge); background: #141416; }
.footer-nav a { color: #fff; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease-in-out; }
.footer-nav a:hover { color: #d3bb8b; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 44px var(--edge) 52px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: #fff; font: italic 800 26px/1 var(--display); text-transform: uppercase; }
.footer-brand img { width: 56px; height: auto; }
.footer-legal { margin: 0; max-width: 62em; color: #8b8f97; font-size: 13px; line-height: 1.75; }

/* ---------- The tide: page transitions ----------
   On leaving, dark water with a gold crest rises over the page; on arrival it drains away. */
html::after { content: ''; position: fixed; z-index: 250; left: 0; right: 0; top: -90px; height: calc(100vh + 90px); pointer-events: none; background: var(--wave) 0 0 / 1440px 90px repeat-x, linear-gradient(var(--abyss), var(--abyss)) 0 88px / 100% 100% no-repeat; transform: translateY(calc(100vh + 90px)); transition: transform .7s var(--ease-io); }
html.tide-cover::after { transform: translateY(0); pointer-events: auto; animation: tide-roll 1.6s linear infinite; }
html.tide-in::after { transform: translateY(0); transition: none; }
html.tide-out::after { animation: tide-roll 1.6s linear infinite; transition-duration: .9s; }
@keyframes tide-roll { to { background-position: 1440px 0, 0 88px; } }

@media (max-width: 960px) {
  :root { --bar: 62px; }
  .topnav { display: none; }
  .topbar { gap: 14px; }
  .brand { margin-right: auto; font-size: 18px; }
  .brand img { width: 36px; }
  .menu-toggle { display: block; }
  .topbar .btn-small { display: none; }
  .subbar-track { display: none; }
  .consent { flex-direction: column; align-items: stretch; gap: 14px; bottom: 10px; }
  .consent-actions .btn { flex: 1; }
  .subbar { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html::after { display: none; }
}