/* The launcher theme: the one shared layer that restyles the EliteLevel site's chrome (header, footer, headings, buttons,
   panels, backgrounds) in the new Elite Launcher look: near-black warm ground, gold hairline frames, tan and cream type
   in Crimson Pro, Cinzel for small spaced-caps labels and the Play-style buttons, ember used sparingly.
   Loaded by _layout.html after site.css on every page of the site (not the Sanctuary Codex, which keeps shared/el.css).
   Docs/guides/site.md, "The launcher theme". The pages keep their own css; everything here sits under body.lt, so it
   wins by specificity whatever the load order.
   The animated character select (the Heroes lineup, the class pages and the costume stage: body.stage-page) keeps its
   inner area exactly as it was: only the header, the footer and the page ground change there. Rules for pages' own
   content are written for body.lt:not(.stage-page). */
@font-face { font-family: 'Crimson Pro'; src: url('../fonts/crimson-pro-semibold.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --lt-bg: #0D0A09;
  --lt-bg2: #0D0A09;
  --lt-panel: linear-gradient(160deg, rgba(24, 18, 16, 0.58), rgba(10, 7, 6, 0.74));
  --lt-line: #8A6D3F;           /* gold hairline, strong */
  --lt-line2: #3A2F27;          /* gold hairline, quiet */
  --lt-tan: #D6C6AE;
  --lt-gold: #C9B48A;
  --lt-head: #D6C6AE;
  --lt-cream: #E6DCD2;
  --lt-cream2: #CDBFAE;
  --lt-ember: #D8481C;
  --lt-serif: 'Crimson Pro', Georgia, 'Palatino Linotype', serif;
  --lt-label: 'Crimson Pro', Georgia, serif;
}

/* ------------------------------------------------------------------ the page's own tokens (not on the character select) */
body.lt:not(.stage-page) {
  --bg: #0D0A09; --bg2: #0F0C0B; --iron: #3A2F27; --iron-hi: #8A6D3F; --iron-lo: #0D0A09;
  --line: rgba(201, 180, 138, 0.4);
  --gold: #C9B48A; --gold-hi: #FAF7F0; --gold-lo: #3A2F27; --ember: #D8481C; --lava: #D8481C;
  --ink: #E6DCD2; --ink-dim: #9C8F84; --ink-dark: #2a1b0e;
  --body: var(--lt-serif); --label: var(--lt-serif);
  --el-panel-bg: var(--lt-panel);
  --el-frame: 0 0 0 1px #3A2F27;
  --el-frame-hi: 0 0 0 1px #C9B48A;
  --el-gold: #C9B48A; --el-gold-hi: #FAF7F0; --el-ink: #E6DCD2;
  font-family: var(--lt-serif); font-weight: 500; font-size: 18px; line-height: 1.55; color: var(--lt-cream);
  background: radial-gradient(ellipse 60% 25% at 20% 0%, rgba(120, 40, 20, 0.28), transparent 70%), #0D0A09;
}
body.lt { background-color: #0D0A09; }
html { background: #0D0A09; }
body.lt ::selection { background: rgba(201, 180, 138, 0.35); color: #fff; }
body.lt :focus-visible { outline: 2px solid #C9B48A; outline-offset: 2px; }
body.lt a:focus-visible { outline: 2px solid #C9B48A; outline-offset: 3px; }

/* ------------------------------------------------------------------ header: plain text menu, tilted logo, Get launcher */
body.lt .elh {
  position: sticky; top: 0; z-index: 50; height: var(--el-top); display: flex; align-items: center; gap: 22px; padding: 0 clamp(16px, 3vw, 44px);
  background: linear-gradient(180deg, #0F0C0B, #0D0A09);
  box-shadow: 0 1px 0 #3A2F27, 0 14px 30px rgba(0, 0, 0, 0.55); font-family: var(--lt-serif);
}
body.lt .elh::before, body.lt .elh::after { content: none; }
body.lt .elh-brand { flex: none; align-self: flex-start; height: auto; margin: 8px 0 0; position: relative; z-index: 4; display: block; }
body.lt .elh-brand img {
  display: block; width: 190px; height: auto; max-width: none; transform: rotate(-12deg); transform-origin: 40% 40%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85)); transition: filter 0.2s;
}
body.lt .elh-brand:hover img { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85)) brightness(1.12); }
body.lt .elh-menu { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.4vw, 34px); }
body.lt .elh-nav { display: flex; align-items: center; justify-self: auto; height: auto; gap: clamp(14px, 2.1vw, 30px); }
body.lt .elh-item {
  position: relative; display: flex; align-items: center; padding: 10px 0; font: 600 17px/1 var(--lt-serif); letter-spacing: 0.04em; text-transform: none;
  color: #E6DCD2; border-bottom: 2px solid transparent; text-shadow: none; white-space: nowrap; text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
body.lt .elh-item:hover, body.lt .elh-item.on { color: #fff; border-bottom-color: #C9B48A; text-shadow: none; }
body.lt .elh-item.on::before, body.lt .elh-item.on::after { content: none; }
body.lt .elh-item:focus-visible { outline-offset: 4px; }
body.lt .el-skip { font-family: var(--lt-serif); font-weight: 600; color: #14100E; background: #C9B48A; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.8); }
body.lt .elh-toggle {
  display: none; margin-left: auto; position: relative; width: 46px; height: 42px; padding: 0; border: 1px solid #3A2F27; border-radius: 0; cursor: pointer;
  background: linear-gradient(#C9B48A, #C9B48A) center 13px / 22px 2px no-repeat, linear-gradient(#C9B48A, #C9B48A) center 20px / 22px 2px no-repeat,
    linear-gradient(#C9B48A, #C9B48A) center 27px / 22px 2px no-repeat, #0D0A09;
  filter: none;
}
body.lt .elh-toggle:hover, body.lt .elh-toggle:active, body.lt.el-nav-open .elh-toggle {
  border-color: #C9B48A;
  background: linear-gradient(#fff, #fff) center 13px / 22px 2px no-repeat, linear-gradient(#fff, #fff) center 20px / 22px 2px no-repeat,
    linear-gradient(#fff, #fff) center 27px / 22px 2px no-repeat, #0F0C0B;
}
body.lt.el-nav-open .elh-toggle { background: linear-gradient(#C9B48A, #C9B48A) center / 22px 2px no-repeat, #0F0C0B; }
body.lt .elh-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* the home page: the header floats over the picture */
body.lt.home .elh { position: absolute; left: 0; right: 0; background: transparent; box-shadow: none; }
/* the character select pages: the logo stays inside the bar, so nothing hangs over the stage */
body.lt.stage-page .elh-brand { margin-top: 6px; }
body.lt.stage-page .elh-brand img { width: 120px; transform: rotate(-6deg); }

@media (max-width: 1220px) {
  body.lt .elh-item { font-size: 15.5px; }
  body.lt .elh-nav { gap: 16px; }
  body.lt .elh-menu { gap: 16px; }
  body.lt .elh-brand img { width: 150px; }
  body.lt .pb-nav { --w: 160px !important; --fs: 12px !important; }
}
@media (max-width: 980px) {
  body.lt .elh { gap: 12px; padding: 0 16px; }
  body.lt .elh-brand { align-self: center; margin: 0; }
  body.lt .elh-brand img, body.lt.stage-page .elh-brand img { width: 116px; transform: rotate(-6deg); }
  body.lt .elh-toggle { display: block; }
  body.lt .elh-menu {
    display: block; flex: none; justify-content: normal; padding: 10px 0 20px; gap: 0;
    background: linear-gradient(180deg, #0F0C0B, #0D0A09); box-shadow: 0 1px 0 #3A2F27, 0 20px 40px rgba(0, 0, 0, 0.8);
  }
  body.lt .elh-nav, body.lt .elh-codex .elh-nav { flex-direction: column; align-items: stretch; gap: 0; }
  body.lt .elh-item { padding: 14px 24px; font-size: 18px; border-bottom: 0; border-left: 3px solid transparent; }
  body.lt .elh-item:hover { border-left-color: #3A2F27; }
  body.lt .elh-item.on { border-left-color: #C9B48A; background: linear-gradient(90deg, rgba(201, 180, 138, 0.12), transparent 70%); }
  body.lt .pb-nav { display: flex; margin: 12px 24px 4px; width: min(320px, calc(100vw - 48px)); }
  body.lt.home .elh { background: linear-gradient(180deg, rgba(13, 10, 9, 0.85), rgba(13, 10, 9, 0)); }
}

/* ------------------------------------------------------------------ the launcher's Play button (.pb) and the outlined hexagon button (.btn) */
a.pb, button.pb {
  position: relative; display: inline-block; width: var(--w, 340px); height: var(--h, 60px); --p: calc(var(--h, 60px) / 2); border: 0; background: none; padding: 0;
  cursor: pointer; color: #F6E6C8; text-decoration: none; max-width: 100%; vertical-align: middle;
}
.pb-in { position: absolute; inset: 0; transition: transform 0.16s; }
.pb:hover .pb-in { transform: scale(1.03); }
.pb-aura { position: absolute; left: 6%; top: 16%; right: 6%; bottom: 16%; background: #D8481C; opacity: 0.22; filter: blur(18px); transition: opacity 0.22s; }
.pb:hover .pb-aura, .pb:focus-visible .pb-aura { opacity: 0.8; }
.pb-ring { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 50%, var(--p) 0, calc(100% - var(--p)) 0, 100% 50%, calc(100% - var(--p)) 100%, var(--p) 100%); box-shadow: 0 0 18px rgba(255, 74, 20, 0.25); }
.pb-ring i { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: conic-gradient(#D8481C, #4a0f08, #FF8A4C, #4a0f08, #D8481C); animation: pbspin 5s linear infinite; }
.pb:hover .pb-ring i { animation-duration: 1.5s; }
@keyframes pbspin { to { transform: rotate(360deg); } }
.pb-glass { position: absolute; inset: 3px; clip-path: polygon(0 50%, calc(var(--p) - 2px) 0, calc(100% - var(--p) + 2px) 0, 100% 50%, calc(100% - var(--p) + 2px) 100%, calc(var(--p) - 2px) 100%); background: radial-gradient(ellipse at 50% 130%, #6a170a, #1a0b09 68%); box-shadow: inset 0 2px 10px #000; }
.pb-glow { position: absolute; left: 18%; right: 18%; top: 18%; bottom: 18%; background: radial-gradient(ellipse, rgba(255, 90, 30, 0.5), rgba(255, 90, 30, 0) 70%); opacity: 0.3; transition: opacity 0.22s; }
.pb:hover .pb-glow, .pb:focus-visible .pb-glow { opacity: 1; }
.pb-trav { position: absolute; left: -10%; top: calc(50% - 2px); width: 9%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFF0C8); opacity: 0; filter: drop-shadow(0 0 5px #F1DFAE); }
.pb:hover .pb-trav { opacity: 1; animation: pbtrav 1.5s linear infinite; }
@keyframes pbtrav { to { left: 105%; } }
.pb-t {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--lt-label); font-weight: 700; font-size: var(--fs, 19px);
  letter-spacing: 0.2em; white-space: nowrap; text-transform: uppercase; color: #F6E6C8; text-shadow: 0 0 10px rgba(255, 74, 20, 0.75); transition: text-shadow 0.16s;
}
.pb:hover .pb-t, .pb:focus-visible .pb-t { color: #FFF4DC; text-shadow: 0 0 16px rgba(255, 90, 30, 1); }
a.pb:focus-visible { outline: none; }
a.pb:focus-visible .pb-in { filter: drop-shadow(0 0 2px #C9B48A) drop-shadow(0 0 6px #C9B48A); transform: scale(1.03); }

/* the outlined hexagon button: secondary actions (replaces the skull-crested frames on the site's own pages) */
body.lt:not(.stage-page) .btn {
  --w: auto; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; aspect-ratio: auto;
  min-height: 48px; padding: 0 40px; margin: 2px 4px 2px 0; border: 0; text-align: center; cursor: pointer; text-decoration: none;
  background: #8A6D3F; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  font: 700 15px/1.15 var(--lt-label); letter-spacing: 0.16em; text-transform: uppercase; color: #FAF7F0; text-shadow: none; filter: none; transform: none;
  transition: background 0.15s, color 0.15s;
}
body.lt:not(.stage-page) .btn::before {
  content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, #2a120c, #150a07);
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 17px 100%, 0 50%);
}
body.lt:not(.stage-page) .btn:hover { background: #C9B48A; color: #fff; filter: none; transform: none; }
body.lt:not(.stage-page) .btn:focus-visible { background: #FAF7F0; color: #fff; outline: none; filter: none; }
body.lt:not(.stage-page) .btn:active { background: #C9B48A; transform: none; filter: none; }
body.lt:not(.stage-page) .btn.small { --w: auto; }
body.lt:not(.stage-page) .btn.play { --w: auto; aspect-ratio: auto; padding: 0 40px; min-height: 56px; font-size: 16px; }
body.lt:not(.stage-page) .plain .btn { margin-left: 0; }
/* small controls (the Copy buttons and the like): quiet gold outline instead of the red metal */
body.lt:not(.stage-page) .mbtn {
  border: 1px solid #3A2F27; border-image: none; background: #0D0A09; color: #C9B48A; font: 700 12px/1 var(--lt-label); letter-spacing: 0.12em; text-shadow: none; padding: 6px 10px; filter: none;
}
body.lt:not(.stage-page) .mbtn:hover { border-color: #C9B48A; color: #fff; filter: none; }

/* ------------------------------------------------------------------ headings: spaced caps, a diamond, a fading gold line */
.hd {
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: 640px; margin: 0; font: 600 20px/1.2 var(--lt-serif); letter-spacing: 0.34em; text-transform: uppercase; color: #D6C6AE;
}
.hd::before { content: ''; width: 10px; height: 10px; border: 1.5px solid #D6C6AE; transform: rotate(45deg); flex: none; }
.hd::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 180, 138, 0.55), transparent); }
.hd.c { justify-content: center; }
.hd.c::before { width: auto; height: 1px; border: 0; transform: none; flex: 1; background: linear-gradient(270deg, rgba(201, 180, 138, 0.55), transparent); }
.hd.c span { flex: none; max-width: 80%; text-align: center; }
/* the headings the pages already have, in the same voice */
body.lt:not(.stage-page) .dl-h2, body.lt:not(.stage-page) .mod-group > h2, body.lt:not(.stage-page) .mod-shots h2, body.lt:not(.stage-page) .costume-class h2,
body.lt:not(.stage-page) .class-costumes h2 {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 0; border: 0;
  font: 600 clamp(17px, 2.4vw, 22px)/1.2 var(--lt-serif); letter-spacing: 0.26em; text-transform: uppercase; color: #D6C6AE; text-shadow: none;
  background: none; -webkit-text-fill-color: currentColor; filter: none;
}
body.lt:not(.stage-page) .dl-h2::before, body.lt:not(.stage-page) .mod-group > h2::before, body.lt:not(.stage-page) .mod-shots h2::before,
body.lt:not(.stage-page) .costume-class h2::before { content: ''; width: 10px; height: 10px; border: 1.5px solid #D6C6AE; transform: rotate(45deg); flex: none; }
body.lt:not(.stage-page) .dl-h2::after, body.lt:not(.stage-page) .mod-group > h2::after, body.lt:not(.stage-page) .mod-shots h2::after,
body.lt:not(.stage-page) .costume-class h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 180, 138, 0.55), transparent); }
body.lt:not(.stage-page) .dl-h2 { margin: 64px 0 22px; max-width: 760px; margin-left: auto; margin-right: auto; }
body.lt:not(.stage-page) .costume-class h2 img { height: 38px; order: 2; }
body.lt:not(.stage-page) .costume-class h2 a { color: var(--c, #D6C6AE); text-shadow: none; }
/* page titles: the big Crimson Pro caps */
body.lt:not(.stage-page) .metal, body.lt:not(.stage-page) .plain h1, body.lt:not(.stage-page) .dl-head h1, body.lt:not(.stage-page) .wn-head h1,
body.lt:not(.stage-page) .mod-doc h1, body.lt:not(.stage-page) .card h2, body.lt:not(.stage-page) .costume-card h1 {
  font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #D6C6AE; background: none; -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0; filter: none; text-shadow: 0 3px 24px #000; text-wrap: balance;
}
body.lt:not(.stage-page) .plain h1, body.lt:not(.stage-page) .wn-head h1, body.lt:not(.stage-page) .mod-doc h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.05; }
body.lt:not(.stage-page) .card h2, body.lt:not(.stage-page) .tile h2, body.lt:not(.stage-page) .tile h3 { font-size: 22px; letter-spacing: 0.12em; color: #D6C6AE; text-shadow: none; }
body.lt:not(.stage-page) .mod-doc h2, body.lt:not(.stage-page) .acct-box h2, body.lt:not(.stage-page) .dl-card h2, body.lt:not(.stage-page) .wn-soon h2,
body.lt:not(.stage-page) .costume-looks h2, body.lt:not(.stage-page) .costume-get h2 {
  font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #D6C6AE; text-shadow: none; border-color: rgba(201, 180, 138, 0.4);
}
body.lt:not(.stage-page) .mod-doc h3, body.lt:not(.stage-page) .dl-extra h3, body.lt:not(.stage-page) .mod-card-detail h1 {
  font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #D6C6AE;
}
/* small spaced-caps labels (Cinzel) */
body.lt:not(.stage-page) .eyebrow, body.lt:not(.stage-page) .dl-tag, body.lt:not(.stage-page) .dl-latest span, body.lt:not(.stage-page) .crumbs,
body.lt:not(.stage-page) .tile .tile-meta, body.lt:not(.stage-page) .mod-list .tile-meta, body.lt:not(.stage-page) .wn-jump time, body.lt:not(.stage-page) .mn-title,
body.lt:not(.stage-page) .costume-kicker, body.lt:not(.stage-page) .card .more, body.lt:not(.stage-page) .tile .more {
  font-family: var(--lt-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #D6C6AE; text-shadow: none;
}
body.lt:not(.stage-page) .eyebrow { font-size: 13px; margin-bottom: 14px; }
body.lt:not(.stage-page) .crumbs a, body.lt:not(.stage-page) .costume-kicker a { color: #C9B48A; }
body.lt:not(.stage-page) .lead { color: #E6DCD2; text-shadow: 0 2px 10px #000; }
body.lt:not(.stage-page) .dim, body.lt:not(.stage-page) .dl-sys, body.lt:not(.stage-page) .dl-fallback { color: #9C8F84; }
body.lt:not(.stage-page) .pill, body.lt .pill {
  display: inline-block; padding: 5px 14px; border-radius: 99px; background: #C9B48A; color: #14100E; font: 700 13px/1 var(--lt-serif); letter-spacing: 0.04em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ panels and frames */
.ch { display: block; padding: 1px; background: rgba(201, 180, 138, 0.26); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); color: inherit; }
.ch > .in { background: var(--lt-panel); clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%); height: 100%; box-sizing: border-box; }
a.ch:hover, a.ch:focus-visible { background: #D6C6AE; color: inherit; }
a.ch:focus-visible { outline: none; background: #FAF7F0; }
.big { padding: 2px; background: rgba(201, 180, 138, 0.42); clip-path: polygon(44px 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%, 0 44px); }
.big > .in { background: var(--lt-panel); clip-path: polygon(43px 0, 100% 0, 100% calc(100% - 43px), calc(100% - 43px) 100%, 0 100%, 0 43px); height: 100%; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* cards and tiles (the Mods and costume pages): a chamfered gold hairline frame */
body.lt:not(.stage-page) .card {
  position: relative; isolation: isolate; border-radius: 0; box-shadow: none; background: rgba(201, 180, 138, 0.26); color: #E6DCD2; padding: 25px 23px 21px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: background 0.15s, transform 0.15s;
}
body.lt:not(.stage-page) .card::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: var(--lt-panel); clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%);
}
body.lt:not(.stage-page) .card:hover { background: #D6C6AE; transform: translateY(-2px); box-shadow: none; color: #E6DCD2; }
body.lt:not(.stage-page) .card:focus-visible { outline: none; background: #FAF7F0; }
body.lt:not(.stage-page) .card p { color: #CDBFAE; }
body.lt:not(.stage-page) .tile { padding: 13px 13px 19px; }
body.lt:not(.stage-page) .tile-pic { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #3a2f1f; background: #0D0A09; }
body.lt:not(.stage-page) .tile-pic::after { background: linear-gradient(180deg, transparent 62%, rgba(13, 10, 9, 0.8)); }
body.lt:not(.stage-page) .tile-soon .soon-badge { font-family: var(--lt-label); font-weight: 700; font-size: 13px; color: #C9B48A; border-color: #3A2F27; background: rgba(13, 10, 9, 0.86); }
body.lt:not(.stage-page) .mod-hero { box-shadow: 0 0 0 1px #3A2F27, 0 18px 50px rgba(0, 0, 0, 0.7); background: #0D0A09; }
body.lt:not(.stage-page) .mod-list li, body.lt:not(.stage-page) .look { background: rgba(13, 10, 9, 0.7); box-shadow: inset 0 0 0 1px #3a2f1f; }
body.lt:not(.stage-page) .mod-list b, body.lt:not(.stage-page) .look b, body.lt:not(.stage-page) .tile h3 { color: #FAF7F0; font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.06em; }
body.lt:not(.stage-page) .shots a { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #3a2f1f; }
body.lt:not(.stage-page) .shots figcaption, body.lt:not(.stage-page) .look small { color: #9C8F84; }
body.lt:not(.stage-page) .class-jump a { color: #E6DCD2; font-family: var(--lt-label); font-weight: 700; letter-spacing: 0.1em; background: rgba(13, 10, 9, 0.8); box-shadow: inset 0 0 0 1px #3A2F27; }
body.lt:not(.stage-page) .class-jump a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--c); }
body.lt:not(.stage-page) .mod-group, body.lt:not(.stage-page) .costume-class { scroll-margin-top: calc(var(--el-top) + 12px); }
/* the Downloads / EliteLevelD3 page */
body.lt:not(.stage-page) .dl-page {
  --eld-ground: #0D0A09; --eld-edge: rgba(201, 180, 138, 0.55); --eld-head: #D6C6AE; --eld-tan: #D6C6AE; --eld-cream: #E6DCD2; --eld-cream-soft: #CDBFAE; --eld-muted: #9C8F84;
  --eld-ember: #D8481C; --eld-ember-light: #C9B48A; --eld-serif: var(--lt-serif); --eld-sans: var(--lt-serif);
  --eld-tint: linear-gradient(160deg, rgba(15, 12, 11, 0.9), rgba(13, 10, 9, 0.94)); --eld-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(120, 40, 20, 0.22), transparent 70%), linear-gradient(180deg, rgba(13, 10, 9, 0.55), rgba(13, 10, 9, 0.86) 45%, rgba(13, 10, 9, 0.96) 75%, #0D0A09 96%), url('../img/lt/act3.webp') center top / cover no-repeat;
  font-family: var(--lt-serif);
}
body.lt:not(.stage-page) .dl-page .dl-card::before, body.lt:not(.stage-page) .dl-page .dl-linux::before { content: none; }
body.lt:not(.stage-page) .dl-page .dl-card, body.lt:not(.stage-page) .dl-page .dl-linux {
  border: 0; border-radius: 0; box-shadow: none; background: var(--lt-panel); -webkit-backdrop-filter: none; backdrop-filter: none; outline: 1px solid #3A2F27; outline-offset: -1px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
body.lt:not(.stage-page) .dl-page .dl-linux.is-mine { outline-color: #C9B48A; box-shadow: none; }
body.lt:not(.stage-page) .dl-page .dl-card h2 { font: 700 26px/1.1 var(--lt-serif); letter-spacing: 0.14em; color: #D6C6AE; text-shadow: none; }
body.lt:not(.stage-page) .dl-page .dl-meta { font: 600 16px/1.3 var(--lt-serif); color: #E6DCD2; }
body.lt:not(.stage-page) .dl-page .dl-tag { font: 700 11px/1 var(--lt-label); letter-spacing: 0.18em; border-radius: 99px; color: #14100E; background: #C9B48A; border: 0; padding: 6px 12px; }
body.lt:not(.stage-page) .dl-page .dl-tag-beta { background: #D6C6AE; color: #14100E; }
body.lt:not(.stage-page) .dl-page .dl-notes, body.lt:not(.stage-page) .dl-page .dl-sys, body.lt:not(.stage-page) .dl-page .dl-lsteps li, body.lt:not(.stage-page) .dl-page .dl-steps li,
body.lt:not(.stage-page) .dl-page .dl-extra p, body.lt:not(.stage-page) .dl-page .dl-latest { font-family: var(--lt-serif); font-size: 17px; line-height: 1.5; }
body.lt:not(.stage-page) .dl-page .dl-sys { font-size: 15.5px; }
body.lt:not(.stage-page) .dl-page .dl-lsteps b, body.lt:not(.stage-page) .dl-page .dl-steps b { font-family: var(--lt-serif); font-weight: 700; color: #D6C6AE; letter-spacing: 0.02em; text-transform: none; font-size: inherit; }
body.lt:not(.stage-page) .dl-page .dl-steps li, body.lt:not(.stage-page) .dl-page .dl-extra > div { background: var(--lt-panel); border: 0; box-shadow: 0 0 0 1px #3A2F27; border-radius: 0; }
body.lt:not(.stage-page) .dl-page .dl-steps li::before, body.lt:not(.stage-page) .dl-page .dl-lsteps li::before {
  color: #C9B48A; background: transparent; border: 1.5px solid #D6C6AE; border-radius: 0; transform: rotate(45deg); box-shadow: none; text-shadow: none; font-family: var(--lt-serif); font-weight: 700;
}
body.lt:not(.stage-page) .dl-page .dl-steps li::before { width: 34px; height: 34px; margin-top: -17px; left: 22px; font-size: 0; }
body.lt:not(.stage-page) .dl-page .dl-steps li::after { content: counter(dl); position: absolute; left: 22px; top: 50%; width: 34px; height: 34px; margin-top: -17px; display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--lt-serif); color: #C9B48A; }
body.lt:not(.stage-page) .dl-page .dl-steps li { padding-left: 78px; }
body.lt:not(.stage-page) .dl-page .dl-lsteps li::before { width: 22px; height: 22px; font-size: 0; }
body.lt:not(.stage-page) .dl-page .dl-lsteps li::after { content: counter(ls); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--lt-serif); color: #C9B48A; }
body.lt:not(.stage-page) .dl-page .dl-extra h3 { font: 700 17px/1.2 var(--lt-serif); letter-spacing: 0.14em; color: #D6C6AE; }
body.lt:not(.stage-page) .dl-page .dl-steps a, body.lt:not(.stage-page) .dl-page .dl-extra a, body.lt:not(.stage-page) .dl-page .dl-latest a, body.lt:not(.stage-page) .dl-page .dl-fallback a { color: #C9B48A; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 180, 138, 0.45); }
body.lt:not(.stage-page) .dl-page .dl-steps em, body.lt:not(.stage-page) .dl-page .dl-extra em, body.lt:not(.stage-page) .dl-page .dl-sys em { color: #FAF7F0; font-style: italic; }
body.lt:not(.stage-page) .dl-page .dl-steps code, body.lt:not(.stage-page) .dl-page .dl-extra code, body.lt:not(.stage-page) .dl-page .dl-lsteps code { color: #D6C6AE; }
/* the Download buttons: the launcher's Play look, drawn with pseudo-elements so the page script can keep writing to the <a> */
body.lt:not(.stage-page) .dl-dl {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 340px; min-height: 60px; padding: 0 40px;
  border: 0; border-radius: 0; box-shadow: none; filter: none; color: #F6E6C8; font: 700 16px/1.1 var(--lt-label); letter-spacing: 0.2em; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 74, 20, 0.75); background: #4a0f08; clip-path: polygon(0 50%, 30px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 30px 100%);
  transition: text-shadow 0.16s, color 0.16s;
}
body.lt:not(.stage-page) .dl-dl::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; z-index: -2;
  background: conic-gradient(#D8481C, #4a0f08, #FF8A4C, #4a0f08, #D8481C); animation: pbspin 5s linear infinite;
}
body.lt:not(.stage-page) .dl-dl::after {
  content: ''; position: absolute; inset: 3px; z-index: -1; clip-path: polygon(0 50%, 28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%);
  background: radial-gradient(ellipse at 50% 130%, #6a170a, #1a0b09 68%); box-shadow: inset 0 2px 10px #000; transition: filter 0.2s;
}
body.lt:not(.stage-page) .dl-dl:hover { filter: none; color: #FFF4DC; text-shadow: 0 0 16px rgba(255, 90, 30, 1); }
body.lt:not(.stage-page) .dl-dl:hover::before { animation-duration: 1.5s; }
body.lt:not(.stage-page) .dl-dl:hover::after { filter: brightness(1.35); }
body.lt:not(.stage-page) .dl-dl:active { transform: none; filter: none; }
body.lt:not(.stage-page) .dl-dl:focus-visible { outline: none; }
body.lt:not(.stage-page) .dl-dl:focus-visible::after { box-shadow: inset 0 0 0 3px #C9B48A, inset 0 2px 10px #000; }
/* What's new (the patch notes) */
body.lt:not(.stage-page) .wn-page {
  background: linear-gradient(180deg, rgba(13, 10, 9, 0.5), rgba(13, 10, 9, 0.82) 30%, rgba(13, 10, 9, 0.96) 55%, #0D0A09 80%), url('../img/lt/act4.webp') center top / 100% auto no-repeat, #0D0A09;
}
body.lt:not(.stage-page) .wn-rel { box-shadow: 0 0 0 1px #3A2F27, 0 18px 50px rgba(0, 0, 0, 0.6); }
body.lt:not(.stage-page) .wn-rel.latest { box-shadow: 0 0 0 1px #D6C6AE, 0 18px 50px rgba(0, 0, 0, 0.7); }
body.lt:not(.stage-page) .wn-pill time { background: #C9B48A; color: #14100E; border-radius: 99px; padding: 6px 12px 5px; font-family: var(--lt-label); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; }
body.lt:not(.stage-page) .wn-badge { font-family: var(--lt-label); font-weight: 700; color: #C9B48A; background: transparent; box-shadow: 0 0 0 1px #8A6D3F; border-radius: 99px; padding: 6px 10px 5px; }
body.lt:not(.stage-page) .wn-more { color: #C9B48A; font-family: var(--lt-serif); font-weight: 700; font-size: 16px; }
body.lt:not(.stage-page) .wn-more:hover, body.lt:not(.stage-page) .wn-more:focus-visible { color: #fff; }
body.lt:not(.stage-page) .wn-sec li::before, body.lt:not(.stage-page) .wn-soon li::before { background: #D6C6AE; box-shadow: none; }
body.lt:not(.stage-page) .wn-sec h3 { font-family: var(--lt-label); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; }
body.lt:not(.stage-page) .wn-sec h3 span { border-radius: 99px; padding: 7px 14px 6px; }
body.lt:not(.stage-page) .wn-new h3 { color: #C9B48A; }
body.lt:not(.stage-page) .wn-changed h3 { color: #CDBFAE; }
body.lt:not(.stage-page) .wn-fixed h3 { color: #b8d48a; }
body.lt:not(.stage-page) .wn-sec li, body.lt:not(.stage-page) .wn-soon li { color: #E6DCD2; font-size: 17px; }
body.lt:not(.stage-page) .wn-sec li b, body.lt:not(.stage-page) .wn-soon li b { color: #FAF7F0; font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.02em; }
body.lt:not(.stage-page) .wn-soon { background: var(--lt-panel); box-shadow: 0 0 0 1px #3A2F27; }
body.lt:not(.stage-page) .wn-soon h2 { font-size: 18px; }
body.lt:not(.stage-page) .wn-jump a { color: #E6DCD2; font-family: var(--lt-serif); font-size: 15px; }
body.lt:not(.stage-page) .wn-jump a:hover { color: #fff; box-shadow: 0 0 0 1px #C9B48A; }
/* placeholder pages (Community, Contribute, 404, the account page) */
body.lt:not(.stage-page) .plain-page {
  background: linear-gradient(180deg, rgba(13, 10, 9, 0.5), rgba(13, 10, 9, 0.8) 55%, #0D0A09 98%), url('../img/lt/act1.webp') center 30% / cover no-repeat, #0D0A09;
}
body.lt:not(.stage-page) .acct-page { background: linear-gradient(180deg, rgba(13, 10, 9, 0.5), rgba(13, 10, 9, 0.82) 55%, #0D0A09 98%), url('../img/lt/act2.webp') center 30% / cover no-repeat, #0D0A09; }
body.lt:not(.stage-page) .acct-box { background: var(--lt-panel); box-shadow: 0 0 0 1px #3A2F27; }
body.lt:not(.stage-page) .acct-box:target { box-shadow: 0 0 0 1px #C9B48A, 0 0 40px rgba(201, 180, 138, 0.14); }
body.lt:not(.stage-page) .plain h2 { font: 700 20px/1.2 var(--lt-serif); letter-spacing: 0.2em; text-transform: uppercase; color: #D6C6AE; margin: 34px 0 10px; }
/* the modding guide */
body.lt:not(.stage-page) .mod-page {
  background: linear-gradient(180deg, rgba(13, 10, 9, 0.6), rgba(13, 10, 9, 0.9) 260px, #0D0A09 620px), url('../img/lt/act2.webp') center top / 100% auto no-repeat, #0D0A09;
}
body.lt:not(.stage-page) .mod-nav { background: var(--lt-panel); box-shadow: 0 0 0 1px #3A2F27; top: calc(var(--el-top) + 18px); }
body.lt:not(.stage-page) .mod-nav a { color: #E6DCD2; }
body.lt:not(.stage-page) .mod-nav a:hover { color: #fff; background: rgba(201, 180, 138, 0.07); }
body.lt:not(.stage-page) .mod-nav a[aria-current="page"] { color: #fff; border-left-color: #C9B48A; background: linear-gradient(90deg, rgba(201, 180, 138, 0.14), transparent); }
body.lt:not(.stage-page) .mod-nav li.mn-group { font-family: var(--lt-label); color: #9C8F84; }
body.lt:not(.stage-page) .mod-doc h2 { text-shadow: none; border-bottom: 1px solid rgba(201, 180, 138, 0.4); font-size: 26px; }
body.lt:not(.stage-page) .mod-doc h3 { font-size: 18px; color: #D6C6AE; }
body.lt:not(.stage-page) .mod-doc p, body.lt:not(.stage-page) .mod-doc li { color: #E6DCD2; }
/* the 3D showcase pages (the Soul of Evil banner, the Diablo scenes): the scene stays, the bar under it follows the theme */
body.lt .inferno-bar { background: linear-gradient(#0F0C0B, #0D0A09); border-top: 1px solid #3A2F27; color: #E6DCD2; }
body.lt .inferno-btn, body.lt .inferno-q select { background: #0D0A09; border: 1px solid #3A2F27; color: #C9B48A; border-radius: 0; font-family: var(--lt-serif); }
body.lt .inferno-btn:hover, body.lt .inferno-btn:focus-visible { background: #0F0C0B; border-color: #C9B48A; box-shadow: none; }
body.lt .inferno-btn[aria-pressed="true"] { background: #2a1d10; border-color: #C9B48A; }

/* ------------------------------------------------------------------ footer: misty art, the big wordmark, links, the disclaimer */
body.lt .elf.lt-foot {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 22px; min-height: 480px; margin-top: 60px; padding: 0 clamp(16px, 4vw, 56px) 28px; text-align: center;
  background: #0D0A09; box-shadow: none; font-family: var(--lt-serif); color: #E6DCD2; justify-content: flex-end;
}
body.lt .elf.lt-foot::before { content: none; }
body.lt.home .elf.lt-foot { margin-top: 90px; min-height: 620px; }
.lt-foot .ft-art {
  position: absolute; inset: 0; background: url('../img/lt/crusader.webp') center 22% / cover; filter: grayscale(1) brightness(0.6) contrast(1.15);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%); mask-image: linear-gradient(180deg, transparent 0, #000 38%); pointer-events: none;
}
.lt-foot .ft-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0D0A09 0, transparent 25%, rgba(13, 10, 9, 0.35) 70%, #0D0A09); }
.lt-foot .ft-word {
  position: relative; margin: auto 0 0; padding-top: 70px; font: 700 clamp(30px, 10.6vw, 156px)/0.95 var(--lt-serif); letter-spacing: 0.01em; white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, #FAF7F0, #D6C6AE 60%, #8A6D3F); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.6)); max-width: 100%;
}
.lt-foot .ft-text { position: relative; max-width: 640px; margin: 36px 0 0; font-size: 17px; color: #E6DCD2; }
.lt-foot .ft-row {
  position: relative; width: 100%; max-width: 1280px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; font: 600 16px/1.3 var(--lt-serif); color: #C9B48A;
}
.lt-foot .ft-pages, .lt-foot .ft-social { display: flex; gap: 8px 26px; flex-wrap: wrap; justify-content: center; }
.lt-foot .ft-row a { color: #C9B48A; text-decoration: none; }
.lt-foot .ft-row a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lt-foot .ft-fine { position: relative; margin: 0; max-width: 900px; font: 500 14.5px/1.5 var(--lt-serif); color: #9C8F84; }
body.lt .elf.lt-foot p { max-width: none; }
body.lt .elf.lt-foot .ft-text { max-width: 640px; }
body.lt .elf.lt-foot .ft-fine { max-width: 900px; }
body.lt .elf.lt-foot a:focus-visible { outline: 2px solid #C9B48A; outline-offset: 3px; }

/* ------------------------------------------------------------------ small screens: 16 px gutters */
@media (max-width: 520px) {
  body.lt:not(.stage-page) { font-size: 17px; }
  body.lt:not(.stage-page) .wrap { padding-left: 16px; padding-right: 16px; }
  body.lt:not(.stage-page) .plain { padding-left: 16px; padding-right: 16px; }
  body.lt:not(.stage-page) .btn { padding: 0 26px; font-size: 14px; letter-spacing: 0.12em; max-width: 100%; }
  body.lt:not(.stage-page) .dl-dl { padding: 0 26px; font-size: 15px; letter-spacing: 0.14em; }
  .lt-foot .ft-row { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------ motion: stop the ring, the streak and the glow pulses when asked */
@media (prefers-reduced-motion: reduce) {
  .pb-ring i, body.lt:not(.stage-page) .dl-dl::before { animation: none !important; }
  .pb:hover .pb-trav { animation: none !important; opacity: 0 !important; }
  .pb-in, .pb-aura, .pb-glow { transition: none !important; }
  .pb:hover .pb-in { transform: none; }
}

/* ------------------------------------------------------------------ HUD glass (the EliteLevelD3 HUD / launcher theme, 2026-10-31)
   Tint plus real backdrop blur on the big long-lived panels; ember stays a spark; headings are tan Crimson Pro in spaced caps;
   numbers and values are cream. Tokens: skill elite-level-hud-theme, references/tokens.md. */
:root { --hud-glass-blur: blur(12px) saturate(1.2); --hud-ember-hair: linear-gradient(90deg, transparent, rgba(216, 72, 28, 0.55), transparent); }
.ch > .in, .big > .in, body.lt:not(.stage-page) .card::before, body.lt:not(.stage-page) .wn-rel, body.lt:not(.stage-page) .wn-soon {
  -webkit-backdrop-filter: var(--hud-glass-blur); backdrop-filter: var(--hud-glass-blur);
}
body.lt:not(.stage-page) .wn-rel, body.lt:not(.stage-page) .wn-soon { background: var(--lt-panel); box-shadow: 0 0 0 1px rgba(201, 180, 138, 0.22), 0 18px 50px rgba(0, 0, 0, 0.55); border-radius: 3px; }
body.lt:not(.stage-page) .big > .in::before, body.lt:not(.stage-page) .wn-rel::before { content: ''; display: block; height: 1px; background: var(--hud-ember-hair); }
body.lt h1, body.lt h2, body.lt h3 { font-family: var(--lt-serif); font-weight: 600; letter-spacing: 0.06em; }
body.lt:not(.stage-page) h1, body.lt:not(.stage-page) h2 { color: #D6C6AE; text-transform: uppercase; }
body.lt:not(.stage-page) .num, body.lt:not(.stage-page) .stat b, body.lt:not(.stage-page) time { font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; color: #E6DCD2; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ch > .in, .big > .in, body.lt:not(.stage-page) .wn-rel { background: rgba(14, 10, 9, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .ch > .in, .big > .in, body.lt:not(.stage-page) .wn-rel, body.lt:not(.stage-page) .wn-soon { background: #0F0C0B; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------------ 2026-11-09 refresh: the rest of the site in the same voice */
/* the old shared tokens that profile.css still reads: Crimson Pro instead of Exocet */
body.lt:not(.stage-page) { --el-title: var(--lt-serif); --el-body: var(--lt-serif); --el-gold-lo: #8A6D3F; --el-ink-dim: #9C8F84; --el-iron: #3A2F27; }
/* hero profiles (/profile/): glass panels, hairline buttons, spaced-caps headings */
body.lt:not(.stage-page) .pf { background: radial-gradient(ellipse 60% 30% at 20% 0%, rgba(120, 40, 20, 0.24), transparent 70%), #0D0A09; }
body.lt:not(.stage-page) .pf h1, body.lt:not(.stage-page) .pf h2, body.lt:not(.stage-page) .pf h3 { font-family: var(--lt-serif); font-weight: 700; color: #D6C6AE; }
body.lt:not(.stage-page) .pf-panel h2, body.lt:not(.stage-page) .pf-panel h3 { text-transform: uppercase; letter-spacing: 0.16em; }
body.lt:not(.stage-page) .pf-panel h2 { font-size: 19px; }
body.lt:not(.stage-page) .pf-panel, body.lt:not(.stage-page) .pf-card, body.lt:not(.stage-page) .pf-doll {
  background: var(--lt-panel); box-shadow: 0 0 0 1px rgba(201, 180, 138, 0.26); -webkit-backdrop-filter: var(--hud-glass-blur); backdrop-filter: var(--hud-glass-blur);
}
body.lt:not(.stage-page) .pf-card:hover, body.lt:not(.stage-page) .pf-card.on { box-shadow: 0 0 0 1px #C9B48A; }
body.lt:not(.stage-page) .pf-btn, body.lt:not(.stage-page) .pf-pill {
  font: 700 13px/1 var(--lt-serif); letter-spacing: 0.14em; text-transform: uppercase; color: #E6DCD2; background: #0D0A09; border: 1px solid #3A2F27; box-shadow: none; border-radius: 0;
}
body.lt:not(.stage-page) .pf-btn:hover, body.lt:not(.stage-page) .pf-pill:hover, body.lt:not(.stage-page) .pf-pill[aria-pressed="true"] { border-color: #C9B48A; color: #fff; background: #15100d; }
body.lt:not(.stage-page) .pf-tab { font-family: var(--lt-serif); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; }
body.lt:not(.stage-page) .pf-tab.on { border-bottom-color: #C9B48A; color: #fff !important; }
body.lt:not(.stage-page) .pf-name, body.lt:not(.stage-page) .pf-hname { font-family: var(--lt-serif); font-weight: 700; color: #E6DCD2; text-shadow: 0 3px 24px #000; }
body.lt:not(.stage-page) .pf-bar-t i { background: linear-gradient(90deg, #8A6D3F, #C9B48A); }
body.lt:not(.stage-page) .pf-fine, body.lt:not(.stage-page) .pf-note { color: #9C8F84; }
/* What's new: the release jump list is one scrolling strip, not a hundred chips pushing the first release off the screen */
body.lt:not(.stage-page) .wn-jump {
  flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 8px; max-width: 1100px; margin: 22px auto 10px; padding: 2px 2px 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #6a5a44 transparent; -webkit-overflow-scrolling: touch;
}
body.lt:not(.stage-page) .wn-jump a {
  flex: 0 0 min(230px, 72vw); scroll-snap-align: start; background: var(--lt-panel); box-shadow: 0 0 0 1px #3A2F27; font-size: 14.5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 9px 13px;
}
body.lt:not(.stage-page) .wn-jump a time { display: block; margin-bottom: 3px; }
/* the strip is long: a quiet label says what it is */
@media (max-width: 520px) { body.lt:not(.stage-page) .wn-jump { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }