/* The site's one design system (home, Maps, Backdrops, a pack, Player, Subscribe). Loaded after styles.css on pages
   whose body has class "site". Each product line has its own colour (maps ember, backdrops violet, player gold);
   Subscribe is always ember. Wide Archivo for titles only, Figtree for everything else. One 4:3 card shape for
   everything we sell. Motion: titles drop in letter by letter, a token hops along each section rule, cards are dealt
   onto the page, and the home decks flick through the library when you swipe, drag, wheel or tap the cards. All of it stops with reduced motion. */
.site {
  --ink: #121010; --ink-2: #1A1715; --ink-3: #221E1B; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  --fg: #F4F1ED; --mute: #A39B93; --dim: #6F6862;
  --ember: #E8590C; --ember-hi: #FF7A2E; --violet: #9F8CFF; --gold: #F2C46A;
  --ember-ink: #C2410C; /* the ember under white text: 5.2:1 (WCAG AA) where #E8590C is 3.6:1 */
  --free: #6EE7A0; --hero-t: #D8E4FF; --conq: #F2C46A; --emp: #C9A2F5;
  --wide: "Archivo", "Arial Black", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --pop: cubic-bezier(.34,1.56,.64,1);
  --c: var(--ember);
  background: var(--ink); color: var(--fg); font: 400 16px/1.6 var(--font-body); overflow-x: hidden;
}
.site a { text-decoration: none; }
.site button { background: none; border: 0; padding: 0; }
.site .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 900px) { .site .wrap { padding-inline: 40px; } }
.c-maps { --c: var(--ember); } .c-back { --c: var(--violet); } .c-player { --c: var(--gold); }

.t-display { font: 900 clamp(2.6rem, 7vw, 6rem)/.9 var(--wide); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; margin: 0; }
.t-section { font: 900 clamp(1.9rem, 4vw, 3rem)/.95 var(--wide); font-stretch: 118%; letter-spacing: -.03em; text-transform: uppercase; margin: 0; }
.site .lead { color: #D3CBC2; font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 50ch; margin: 16px 0 0; }
.site .kick { display: inline-block; font: 700 .78rem var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* buttons */
.site .btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--fg); transition: background .2s, border-color .2s, transform .18s var(--ease), box-shadow .3s var(--ease); }
.site .btn:active { transform: scale(.97); }
.site .btn.sub, .site .btn.primary { background: var(--ember-ink); color: #fff; border-color: transparent; box-shadow: 0 8px 26px -10px rgba(232,89,12,.9); }
.site .btn.sub:hover, .site .btn.primary:hover { background: #CC4710; }
.site .btn.line, .site .btn.ghost, .site .btn:not(.sub):not(.primary):not(.line) { border-color: var(--line-2); background: rgba(18,16,16,.35); }
.site .btn.line:hover, .site .btn.ghost:hover { background: rgba(255,255,255,.07); }
.site .btn.big { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.site .text-link { color: var(--ember-hi); font-weight: 700; }

/* ---------- top bar: the same on every page ---------- */
.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.topbar.solid, .site:not(.home) .topbar { background: rgba(18,16,16,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font: 700 .86rem var(--font-brand); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--fg); }
.logo img { width: 32px; height: 32px; border-radius: 50%; }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: #D9D1C8; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--c); }
.nav .new { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: #1a1208; font-size: .62rem; font-weight: 800; letter-spacing: .06em; vertical-align: 2px; text-transform: uppercase; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ibtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #D9D1C8; }
.ibtn:hover { background: rgba(255,255,255,.07); }
.topbar .btn { min-height: 42px; padding: 0 18px; }
.topbar .account-menu > summary { min-height: 42px; padding: 0 16px; }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  /* Phones: "Sign in" stays in words; signed in, the person icon carries a tier badge (H, C, E, I). */
  .topbar .account-menu:not(.is-member) > summary { width: auto; padding: 0 12px; }
  .topbar .account-menu:not(.is-member) > summary span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .topbar .account-menu.is-member > summary span { display: none; }
  .topbar .account-menu.is-member > summary { width: 42px; padding: 0; position: relative; }
  .topbar .account-menu.is-member .acct-badge { display: grid; }
  .topbar .account-pop .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 14px; text-align: center; }
  .topbar .wrap { gap: 10px; }
  .topbar .logo span { display: none; }
  .menu-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 68px; padding: 10px 16px 18px; background: rgba(18,16,16,.97); border-bottom: 1px solid var(--line); }
  .menu-open .nav a { padding: 14px 10px; font-size: 1.1rem; }
}
@media (max-width: 420px) {
  .topbar .wrap { gap: 4px; }
  .topbar .btn { padding: 0 14px; }
  .topbar .account-menu:not(.is-member) > summary { padding: 0 10px; }
  .topbar .account-menu:not(.is-member) > summary svg { display: none; }
}
/* the tier badge on the signed-in person icon (phones only) */
.acct-badge { display: none; position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--ember); color: #fff; font: 800 .66rem/1 var(--font-body); }
/* search: opens under the bar from the magnifier, and goes to Maps */
.search-pop { position: absolute; left: 0; right: 0; top: 100%; padding: 12px 16px 16px; background: rgba(18,16,16,.97); border-bottom: 1px solid var(--line); }
.search-pop form { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; }
.search-pop input { flex: 1; min-width: 0; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--fg); font: inherit; }

/* tier pill, on every card */
.tpill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; background: rgba(12,10,10,.72); font: 700 .7rem var(--font-body); letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--fg); }
.tpill.t-free { color: var(--free); } .tpill.t-hero { color: var(--hero-t); } .tpill.t-conqueror { color: var(--conq); } .tpill.t-emperor { color: var(--emp); }

/* section rule with a token that hops along it, and titles that drop in */
.rule { position: relative; height: 3px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c), transparent 70%); margin-bottom: 30px; }
.rule .tok { position: absolute; left: 0; top: -11px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--c), 0 6px 14px -4px #000; opacity: 0; }
.rule.in .tok { opacity: 1; animation: hop 1.8s var(--ease) forwards; }
@keyframes hop {
  0% { left: 0; transform: translateY(0); } 12% { transform: translateY(-26px) rotate(-90deg); } 24% { left: 18%; transform: translateY(0) rotate(-180deg); }
  36% { transform: translateY(-20px) rotate(-270deg); } 48% { left: 34%; transform: translateY(0) rotate(-360deg); }
  58% { transform: translateY(-12px); } 68% { left: 46%; transform: translateY(0) scaleY(.8); } 76% { transform: scaleY(1.08); } 100% { left: 46%; transform: none; }
}
.js-motion .split .word { display: inline-block; white-space: nowrap; }
.js-motion .split .ch { display: inline-block; opacity: 0; transform: translateY(-.7em) rotate(var(--r, 8deg)); }
.js-motion .split.in .ch { opacity: 1; transform: none; transition: transform .7s var(--pop), opacity .3s; transition-delay: calc(var(--i) * 28ms); }
.js-motion .deal { opacity: 0; transform: translate(-30px, -70px) rotate(var(--r, -10deg)); }
.js-motion .deal.in { opacity: 1; transform: none; transition: transform .8s var(--pop), opacity .35s; transition-delay: calc(var(--i, 0) * 55ms); }

/* ---------- HOME ---------- */
.hero { position: relative; isolation: isolate; min-height: min(92vh, 860px); margin-top: -69px; display: grid; align-items: center; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img, .hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-art img { animation: heropan 30s ease-in-out infinite alternate; transform-origin: 30% 50%; }
.hero-art video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero.playing .hero-art video { opacity: 1; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes heropan { from { transform: scale(1.15) translate(2%, 1%); } to { transform: scale(1.15) translate(-4%, -3%) rotate(.6deg); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,10,10,.92) 0%, rgba(12,10,10,.6) 45%, rgba(12,10,10,.15) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 35%); }
.hero .wrap { padding-top: 120px; padding-bottom: 80px; }
/* Phones: "Battle maps" fits on one line in both the fallback and the web font, so the hero doesn't jump when the font arrives. */
@media (max-width: 520px) { .hero .t-display { font-size: min(2.6rem, 9.8vw); } }
.hero .kick { margin-bottom: 18px; }
.hero .glow { background: linear-gradient(95deg, #FFD08A, var(--ember-hi) 55%, #FF8A3D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .glow .word, .hero .glow .ch { background: inherit; -webkit-background-clip: text; background-clip: text; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero .ctas { gap: 12px; margin-top: 32px; }
.hero-new { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); color: #E8E0D7; font-size: .92rem; backdrop-filter: blur(8px); }
/* Its room is kept while hidden, so the hero doesn't jump when "New: …" arrives with the map list. */
.hero-new[hidden] { display: inline-flex !important; visibility: hidden; }
.hero-new b { padding: 2px 9px; border-radius: 999px; background: var(--ember-ink); color: #fff; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); }
.scroll-hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } }
/* Touch screens: a chevron instead of the mouse, and a word under each deck that the cards can be swiped. */
.swipe-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .scroll-hint { width: 24px; height: 24px; border: 0; border-radius: 0; }
  .scroll-hint::after { top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 0; background: none; border: solid rgba(255,255,255,.7); border-width: 0 2px 2px 0; rotate: 45deg; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .swipe-hint { position: relative; z-index: 1; display: block; justify-self: center; margin: 30px 0 0; color: var(--mute); font-size: .85rem; }
  .swipe-hint::before { content: "\2190\00a0\2192\00a0\00a0"; }
}

/* both product lines use the same deck: swipe, drag, wheel or tap the cards to flick through; the page itself scrolls freely */
.line-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .line-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.deck-sec { position: relative; }
.deck-pin { display: grid; align-items: center; overflow: hidden; padding: 96px 0; }
@media (max-width: 900px) { .deck-pin { padding: 64px 0; } }
.deck[data-flick] { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.deck[data-flick]:active { cursor: grabbing; }
.deck .dc img { -webkit-user-drag: none; pointer-events: none; }
.deck { position: relative; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 4/3; }
.dc { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -24px #000, 0 0 0 1px rgba(255,255,255,.14); transform-origin: 50% 110%; transition: transform .7s var(--pop), opacity .5s var(--ease), filter .5s; will-change: transform; color: var(--fg); }
.dc img { width: 100%; height: 100%; object-fit: cover; }
.dc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,9,8,.9)); }
.dc .tpill { position: absolute; z-index: 1; left: 14px; top: 14px; }
.dc .meta { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; margin: 0; }
.dc .meta b { display: block; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.dc .meta small { color: var(--mute); }
.dc.gone { opacity: 0; pointer-events: none; }
.dc.top img { animation: pan 10s ease-in-out infinite alternate; }
@keyframes pan { from { transform: scale(1.12) translate(3%, 2%); } to { transform: scale(1.12) translate(-3%, -2%); } }
.tally { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 22px; color: var(--mute); }
.tally b { font: 900 2rem var(--wide); font-stretch: 118%; color: var(--fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.riffle { display: flex; gap: 4px; margin-top: 18px; }
.riffle i { width: 18px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background .3s, width .4s var(--pop); }
.riffle i.on { width: 34px; background: var(--c); }
.c-back .btn.line { border-color: rgba(159,140,255,.45); }
@media (max-width: 900px) { .deck { max-width: 420px; } .deck-sec .lead { font-size: 1rem; } }

/* player feature */
.player-feat { position: relative; isolation: isolate; margin-top: 60px; padding: 90px 0; overflow: hidden; background: radial-gradient(60% 80% at 80% 50%, rgba(242,196,106,.12), transparent 70%); }
.grid2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: #DDD5CC; }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(242,196,106,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23F2C46A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.screen { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px #000; }
.screen img { width: 100%; height: auto; }
.cursor { position: absolute; width: 26px; height: 26px; left: 60%; top: 40%; animation: cur 6s var(--ease) infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
@keyframes cur { 0%, 100% { translate: 0 0; } 30% { translate: -120px 40px; } 60% { translate: -60px -50px; } }

/* membership tiers (home and Subscribe) */
.subband { padding: 70px 0 0; }
.subhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 30px; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
/* Keep the plans' and the TV guide pickers' room while they are drawn, so the page below doesn't jump (laptop sizes). */
@media (max-width: 860px) { .tiers:empty { min-height: 1100px; } }
@media (min-width: 1000px) { .tiers:empty { min-height: 405px; } #pick-tv:empty { min-height: 292px; } #pick-device:empty { min-height: 77px; } }
.tier { position: relative; padding: 28px 24px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.tier.best { border-color: rgba(255,122,46,.55); background: radial-gradient(120% 70% at 50% 0%, rgba(232,89,12,.2), transparent 60%), var(--ink-2); }
.tier .ttag { position: absolute; top: -11px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--ember-ink); color: #fff; font: 700 .7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.tier h3 { margin: 0; font: 800 1.3rem var(--wide); font-stretch: 112%; }
.tier .price { margin: 0; font: 900 2.6rem/1 var(--wide); font-stretch: 118%; letter-spacing: -.03em; }
.tier .price small { font: 500 .95rem var(--font-body); color: var(--mute); letter-spacing: 0; margin-left: 6px; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; color: #D6CEC5; font-size: .95rem; }
.tier li::before { content: "✓"; color: var(--free); font-weight: 800; margin-right: 8px; }
.tier .btn { width: 100%; }
.tier .alt { text-align: center; color: var(--mute); font-size: .85rem; margin: -4px 0 0; }
.after { margin: 22px 0 0; color: var(--mute); text-align: center; }
.after a { color: var(--ember-hi); font-weight: 700; }

.site-foot { margin-top: 120px; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding: 48px 0 30px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot > :first-child { grid-column: 1 / -1; } }
.foot h2 { font-family: inherit; font-weight: bold; font-stretch: normal; line-height: inherit; margin: 0 0 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.foot a { display: block; padding: 4px 0; color: #D6CEC5; }
.foot a:hover { color: #fff; }
.foot p { color: var(--mute); margin: 12px 0 0; max-width: 34ch; }
.copy { padding: 18px 0 40px; color: #8F8780; font-size: .85rem; border-top: 1px solid var(--line); margin: 0; }

/* ---------- MAPS and BACKDROPS ---------- */
.lib-top { position: relative; isolation: isolate; padding: 70px 0 34px; overflow: hidden; }
.lib-top::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg-img, none) center/cover; opacity: .32; filter: blur(2px) saturate(1.1); }
.lib-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,16,16,.3), var(--ink)); }
.lib-top .t-display { font-size: clamp(3rem, 9vw, 7rem); }
/* Narrow phones: small enough that "Backdrops" fits on one line (titles never break inside a word). */
@media (max-width: 520px) { .lib-top .t-display { font-size: clamp(2rem, 10.5vw, 3rem); } }
.lib-top .lead { margin-top: 10px; }
/* Room kept for the lead and the tabs, which arrive with the map list, so the library below doesn't jump down;
   the footer starts below the fold so the cards arriving don't push it. */
.site.lib main { min-height: 100vh; }
#lib-lead { min-height: 3.2em; }
.chips-big { min-height: 84px; }
@media (max-width: 760px) { .chips-big { min-height: 52px; } }
@media (max-width: 520px) { [data-lib="backdrop"] #lib-lead { min-height: 4.8em; } }
.chips-big { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
/* The shelf tabs: each its own colour and icon over a faint battle-map grid; a big ghost of the icon in the corner. */
.chip-tile { --tc: var(--ember); position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px !important; border-radius: 16px; text-align: left; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--tc) 28%, var(--line-2)) !important;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 55%),
    linear-gradient(color-mix(in srgb, var(--tc) 9%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--tc) 9%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    #17130F !important;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.chip-tile.ct-packs { --tc: var(--ember-hi); } .chip-tile.ct-free { --tc: var(--free); } .chip-tile.ct-single, .chip-tile.ct-scene { --tc: var(--gold); } .chip-tile.ct-mine { --tc: var(--violet); }
.ct-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; color: var(--tc); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--tc) 35%, transparent)); transition: transform .35s var(--pop); }
.ct-badge svg { width: 52px; height: 52px; fill: currentColor; }
.ct-text { display: grid; gap: 2px; min-width: 0; }
.ct-text b { font: 900 1.1rem/1.05 var(--wide); font-stretch: 118%; text-transform: uppercase; letter-spacing: .01em; }
.ct-text small { color: color-mix(in srgb, var(--tc) 55%, var(--mute)); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-ghost { position: absolute; z-index: -1; right: -14px; bottom: -22px; width: 104px; height: 104px; color: var(--tc); opacity: .1; rotate: -14deg; transition: rotate .5s var(--ease), opacity .3s, scale .5s var(--ease); }
.ct-ghost svg { width: 100%; height: 100%; fill: currentColor; }
.chip-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 70%, transparent) !important; }
.chip-tile:hover .ct-badge { transform: rotate(-6deg) scale(1.06); }
.chip-tile:hover .ct-ghost { rotate: -4deg; scale: 1.08; opacity: .16; }
.chip-tile:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.chip-tile[aria-pressed="true"] { border-color: var(--tc) !important; box-shadow: 0 0 0 1px var(--tc), 0 14px 34px -14px var(--tc); }
.chip-tile[aria-pressed="true"] .ct-ghost { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .chip-tile, .ct-badge, .ct-ghost { transition: none; } }
/* Phones: a short title and one row of small tabs (scrolls sideways if they don't fit), so maps show on the first screen. */
@media (max-width: 760px) {
  .lib-top { padding: 22px 0 14px; } .lib-top .lead { margin-top: 6px; font-size: .95rem; }
  .chips-big { display: flex; gap: 8px; margin: 14px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .chip-tile { flex: none; gap: 8px; min-height: 52px; padding: 6px 12px 6px 8px !important; border-radius: 12px; }
  .ct-badge { width: 26px; height: 26px; } .ct-badge svg { width: 24px; height: 24px; }
  .ct-text b { font-size: .78rem; white-space: nowrap; } .ct-text small { font-size: .72rem; white-space: nowrap; } .ct-ghost { display: none; }
  .chip-tile:hover { transform: none; }
}
.tools { position: sticky; top: 68px; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0; background: rgba(18,16,16,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.searchbox { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--mute); }
.searchbox input { flex: 1; min-width: 0; min-height: 44px; background: none; border: 0; color: var(--fg); font: inherit; outline: none; padding: 0; }
.searchbox kbd { font: 600 .78rem var(--font-body); color: var(--mute); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; }
@media (hover: none) and (pointer: coarse) { .searchbox kbd { display: none; } }
.tools select { min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); color: #D6CEC5; font: 600 .92rem var(--font-body); }
.result-n { margin-left: auto; color: var(--mute); font-size: .9rem; }
/* Phones: search on one row, the two dropdowns side by side under it (the same size before and after they fill, so
   nothing jumps). The count is still read out; the tabs above already show the numbers. */
@media (max-width: 760px) {
  .tools { gap: 8px; padding: 10px 0; }
  .searchbox { flex-basis: 100%; }
  .tools select { flex: 1 1 0; min-width: 0; }
  .result-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.site .tag-filter { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 0 22px; padding-bottom: 4px; scrollbar-width: none; min-height: 42px; }
.site .tag-filter button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--mute); font-weight: 600; text-transform: capitalize; }
.site .tag-filter button:hover { color: var(--fg); border-color: var(--line-2); }
.site .tag-filter button[aria-pressed="true"] { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.site .corrected { color: var(--mute); }

/* one card shape for maps, backdrops and packs: 4:3 art, tier pill, title underneath */
.site .catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; }
@media (max-width: 1100px) { .site .catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .site .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
.site .card a { display: grid; gap: 10px; align-content: start; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; color: var(--fg); }
/* Helm-style pack covers are 16:9 with the pack name bottom-left, so show them whole */
.site .pack-card.has-art .thumb { aspect-ratio: 16/9; }
.site .pack-card.has-art .thumb img { transform: scale(1.03) translate(var(--px, 0), var(--py, 0)); }
.site .card .thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--ink-3); transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--pop); }
.site .card .thumb::after { display: none; }
.site .card .thumb img, .site .card .thumb video { transform: scale(1.12) translate(var(--px, 0), var(--py, 0)); transition: opacity .3s var(--ease), transform .6s var(--ease); }
.site .card.locked .thumb img { filter: saturate(.75) brightness(.8); }
.site .card .card-body { position: static; padding: 0; }
.site .card .card-body h3 { font: 700 1rem/1.25 var(--font-body); letter-spacing: 0; text-shadow: none; }
.site .card .card-body .meta { color: var(--mute); font-size: .85rem; margin: 2px 0 0; }
.site .card .tier-chip { left: 10px; top: 10px; padding: 3px 10px; border: 1px solid currentColor; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(6px); }
.site .card .tier-chip.t-free { color: var(--free); } .site .card .tier-chip.t-conqueror { color: var(--conq); } .site .card .tier-chip.t-emperor { color: var(--emp); } .site .card .tier-chip.t-hero { color: var(--hero-t); }
.site .card .play-chip { left: auto; top: auto; right: 10px; bottom: 10px; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 0; opacity: 0; transform: scale(.8); }
.site .card.locked .play-chip { width: auto; height: auto; padding: 4px 12px; border-radius: 999px; background: rgba(10,8,7,.8); font-size: .8rem; }
.site .card a:hover .play-chip, .site .card a:focus-visible .play-chip { opacity: 1; transform: none; }
.site .card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.site .card.returned a .thumb { box-shadow: 0 0 0 3px var(--gold); }
.site .new-chip { left: auto; right: 10px; top: 10px; }
/* Grid cards rise in as they scroll into view (see "things that rise into view" below), not all at once on load. */
html.reveal .site .card { animation: none; }
.site .more-maps, .site #more { display: flex; margin: 36px auto 0; }
.site .shown { text-align: center; color: var(--mute); }
.site .empty { text-align: center; padding: 40px 0; color: var(--mute); }
.site .empty .catalogue { text-align: left; margin-top: 20px; }
.site .empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- a PACK: the glass shop window, tinted by the pack's setting ---------- */
/* Opened from a pack link: until the pack is drawn, keep the empty shelf out of the way. */
.in-pack #pack-head[hidden] ~ .library:not(:has(#empty:not([hidden]))) { display: none; }
.pack-missing .lib-top, .in-pack .lib-top, .in-pack #library > .wrap > h2.visually-hidden, .in-pack .tools, .in-pack .tag-filter, .in-pack #catalogue, .in-pack #shown, .in-pack #more, .in-pack #count-line { display: none !important; }
.pack-page { --set-a: #2A1A12; --set-b: #5A2E14; --set-c: #9A6A48; position: relative; isolation: isolate; padding: 30px 0 70px; background: linear-gradient(180deg, var(--set-a) 0%, var(--set-b) 45%, var(--set-c) 100%); transition: background .8s var(--ease); }
.pack-page[data-set="ice"] { --set-a: #0F2547; --set-b: #2A4E80; --set-c: #8FA6BF; }
.pack-page[data-set="fire"] { --set-a: #3A0E06; --set-b: #8A2A0C; --set-c: #C98A5A; }
.pack-page[data-set="forest"] { --set-a: #0D2418; --set-b: #2C5A3A; --set-c: #8DA790; }
.pack-page[data-set="swamp"] { --set-a: #16200F; --set-b: #3C4A22; --set-c: #8E9670; }
.pack-page[data-set="water"] { --set-a: #062330; --set-b: #145466; --set-c: #77A6B0; }
.pack-page[data-set="desert"] { --set-a: #3A2410; --set-b: #7A5426; --set-c: #C2A27A; }
.pack-page[data-set="tomb"], .pack-page[data-set="cave"] { --set-a: #1B1A22; --set-b: #3E3C4A; --set-c: #8E8B98; }
.pack-page[data-set="town"] { --set-a: #22180F; --set-b: #4E3A26; --set-c: #9C8A74; }
.pack-page[data-set="arcane"] { --set-a: #1A0F33; --set-b: #3E2A70; --set-c: #8C7FB8; }
.pack-page .crumbs ol { color: rgba(255,255,255,.75); }
.pack-page .crumbs a { color: #fff; font-weight: 700; }
.pack-page .kick { display: block; margin: 0 0 10px; color: rgba(255,255,255,.75); }
.pack-page .t-display { font-size: clamp(2rem, 4vw, 3.4rem); }
.pack-page .new-chip.inline { position: static; vertical-align: middle; font-size: .9rem; }
.pack-meta { margin: 14px auto 0; color: rgba(255,255,255,.88); font-size: 1.05rem; }
.pack-desc { max-width: 62ch; margin: 8px auto 0; color: rgba(255,255,255,.75); font-size: .95rem; }
/* A picture that isn't there: a plain tile with the logo, not the browser's broken-image icon (site.js). */
img.pic-missing { opacity: 0; }
.no-pic::after { content: ""; position: absolute; inset: 0; background: url(/assets/brand/logo-192.webp) center / 40px no-repeat; opacity: .18; pointer-events: none; }
/* Title in the middle, the previous and next packs either side. */
.pack-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 8px; text-align: center; }
.pack-titles { grid-column: 2; max-width: 760px; }
.pack-step { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; min-height: 52px; padding: 6px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.22); color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; transition: background .25s, border-color .25s; }
.pack-step:hover { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.7); }
.pack-step.prev { grid-column: 1; grid-row: 1; justify-self: start; }
.pack-step.next { grid-column: 3; grid-row: 1; justify-self: end; }
.pack-step img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.pack-step .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pack-step .arr { font-size: 1.4rem; line-height: 1; opacity: .8; }
@media (max-width: 960px) {
  .pack-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pack-titles { grid-column: 1 / -1; grid-row: 1; }
  .pack-step.prev, .pack-step.next { grid-row: 2; max-width: 100%; min-width: 0; }
  .pack-step.prev { grid-column: 1; } .pack-step.next { grid-column: 2; }
  .pack-step img { display: none; }
}
/* Parts down the side, Free to Emperor; the big viewer beside them. */
.pack-body { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.tier-rail { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border-radius: 20px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); scrollbar-width: thin; }
.tier-rail.more::after { content: "More below \2193"; position: sticky; bottom: -14px; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 64px; margin: -64px -14px 0; padding-bottom: 10px; background: linear-gradient(transparent, rgba(8,8,12,.92) 75%); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.parts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 4px 10px; }
.parts-head h2 { font-family: inherit; font-weight: bold; font-stretch: normal; line-height: inherit; letter-spacing: normal; margin: 0; font-size: inherit; }
.parts-head span { color: rgba(255,255,255,.7); font-size: .82rem; }
.tier-group { --tc: var(--free); padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,.14); }
.tier-group.t-hero { --tc: var(--hero-t); } .tier-group.t-conqueror { --tc: var(--conq); } .tier-group.t-emperor { --tc: var(--emp); }
.tier-group h3 { font-family: inherit; font-weight: bold; font-stretch: normal; line-height: inherit; letter-spacing: normal; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 4px 8px; }
.tier-group .tname { font: 800 .8rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tc); }
.tier-group .tstate { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.72); }
.gc { width: 100%; display: grid !important; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px !important; margin: 0 0 6px; border-radius: 12px !important; background: transparent !important; border: 1px solid transparent !important; text-align: left; color: #fff; transition: background .25s, border-color .25s; }
.gc:hover { background: rgba(255,255,255,.1) !important; }
.gc[aria-pressed="true"] { background: rgba(255,255,255,.16) !important; border-color: var(--tc) !important; box-shadow: inset 3px 0 0 var(--tc); }
.gc .im { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; background: rgba(0,0,0,.3); }
.gc .im img { width: 100%; height: 100%; object-fit: cover; }
.gc .tpill { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; }
.gc b { display: block; font-size: .95rem; line-height: 1.2; }
.gc small { color: rgba(255,255,255,.7); font-size: .8rem; }
.gc .im.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.gc .im.mosaic img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.stills-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4px; padding: 4px; background: #000; }
.stills-grid.n5 { grid-template-columns: repeat(6, 1fr); } .stills-grid.n5 figure { grid-column: span 2; } .stills-grid.n5 figure:nth-child(n+4) { grid-column: span 3; }
.stills-grid.n1 { grid-template-columns: 1fr; } .stills-grid.n2 { grid-template-columns: 1fr 1fr; } .stills-grid.n4 { grid-template-columns: 1fr 1fr; }
.stills-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 8px; }
.stills-grid img { width: 100%; height: 100%; object-fit: cover; }
.stills-grid figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.65); font-size: .75rem; font-weight: 700; }
.pack-stage { min-width: 0; display: grid; gap: 16px; }
.viewer { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 16/9; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.22); }
.d-img { position: absolute; inset: 0; }
.d-img img, .d-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-img .tap-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,10,10,.7); border: 1px solid rgba(255,255,255,.5); color: #fff; }
.d-img .tap-play svg { width: 28px; height: 28px; }
.viewer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.d-head small { letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: .78rem; color: rgba(255,255,255,.72); }
.d-head h3 { margin: 4px 0 0; font: 900 clamp(1.4rem, 2.6vw, 2rem)/1 var(--wide); font-stretch: 118%; letter-spacing: -.02em; text-transform: uppercase; }
.incl { display: flex; flex-wrap: wrap; gap: 6px; }
.incl span { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: .76rem; font-weight: 600; }
.pack-pick { max-width: 560px; margin: 14px auto 0; text-align: center; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-sm, 10px); border: 1px solid var(--accent, #e8590c); background: rgba(232,89,12,.08); }
.pack-pick p { margin: 0; font-size: .9rem; }
.pack-pick .btn { justify-self: center; }
.play-now.locked { background: rgba(0,0,0,.35) !important; box-shadow: none !important; border-color: rgba(255,255,255,.35) !important; }
.pack-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.pack-extras > :empty { display: none; }
.pack-stage .get-pack { margin: 0; max-width: none; padding: 18px 20px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.pack-stage .get-pack h3 { font: 800 1rem var(--font-body); }
.pack-stage .get-note, .pack-stage .get-have, .pack-stage .get-account { color: rgba(255,255,255,.82); font-size: .86rem; }
.pack-stage .get-main .btn, .pack-stage [data-buy="pack"] { background: #17191F !important; color: #fff; border-color: transparent !important; box-shadow: none !important; }
.pack-stage .get-compare { color: #fff; }
.pack-stage .pack-downloads { margin: 0; padding: 18px 20px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); }
@media (max-width: 960px) {
  /* Phone: viewer, then the parts list, then the ways to get it and downloads. */
  .pack-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pack-stage { display: contents; }
  .viewer { order: 1; } .viewer-bar { order: 2; } .tier-rail { order: 3; } .incl { order: 4; } .pack-pick { order: 4; } .pack-extras { order: 5; }
  .tier-rail { position: static; max-height: none; overflow: visible; }
}
.pack-downloads { color: #fff; }
.pack-downloads h3 { margin: 0 0 10px; }
.pack-downloads .dl-vtt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; }
.pack-downloads select { min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--ink-2); color: var(--fg); border: 1px solid var(--line-2); font: inherit; }
.pack-downloads .dl-note { color: var(--mute); font-size: .92rem; margin: 8px 0; }
.pack-downloads .dl-pack { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.pack-downloads .btn small { opacity: .75; font-weight: 400; margin-left: 4px; }
.pack-downloads .dl-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.pack-downloads .dl-list li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.pack-downloads .dl-files { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-downloads .dl-big { color: var(--mute); font-size: .88rem; }
.site .more-like { margin-top: 50px; }
.site .more-like h2 { margin-bottom: 18px; }

/* ---------- PLAYER ---------- */
.p-hero { position: relative; isolation: isolate; padding: 80px 0 60px; overflow: hidden; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 75% 40%, rgba(242,196,106,.14), transparent 70%); }
.joinbox { display: flex; gap: 8px; margin-top: 28px; max-width: 420px; }
.joinbox input { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--fg); font: 700 1.05rem var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.joinbox input::placeholder { letter-spacing: 0; font-weight: 500; text-transform: none; color: var(--mute); }
.site .joinbox .btn.gold { min-height: 52px; background: var(--gold) !important; color: #1a1208; border-color: transparent !important; }
.hint { color: var(--mute); font-size: .9rem; margin: 12px 0 0; }
.hint a { color: var(--gold); font-weight: 700; }
.join-msg:empty { display: none; }
.join-msg { color: var(--gold); margin: 10px 0 0; }
.psteps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; }
@media (max-width: 900px) { .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .psteps { grid-template-columns: minmax(0, 1fr); } }
.pstep { position: relative; padding: 22px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.pstep .n { font: 900 2.4rem/1 var(--wide); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px rgba(242,196,106,.6); }
.pstep h3 { margin: 12px 0 6px; font: 800 1.15rem var(--wide); font-stretch: 112%; }
.pstep p { margin: 0; color: var(--mute); font-size: .95rem; }
.pfeats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; }
@media (max-width: 760px) { .pfeats { grid-template-columns: minmax(0, 1fr); } }
.pfeat { padding: 22px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.pfeat .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(242,196,106,.12); color: var(--gold); margin-bottom: 14px; font-size: 1.1rem; }
.pfeat h3 { margin: 0 0 6px; font: 700 1.1rem var(--font-body); letter-spacing: 0; }
.pfeat p { margin: 0; color: var(--mute); font-size: .95rem; }
.pfeat a { color: var(--gold); font-weight: 700; }
.p-sec { padding-top: 70px; }

/* ---------- SUBSCRIBE ---------- */
.subpage { padding: 70px 0 0; }
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); }
.billing button { padding: 8px 18px !important; border-radius: 999px; font-weight: 600; color: var(--mute); }
.billing button[aria-pressed="true"] { background: var(--fg); color: var(--ink); }
.where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
@media (max-width: 760px) { .where { grid-template-columns: minmax(0, 1fr); } }
.where:has(> [hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .where:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); } }
.where div { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-2); }
.where b { display: block; margin-bottom: 4px; } .where p { margin: 0; color: var(--mute); font-size: .92rem; }
.where a { color: var(--ember-hi); font-weight: 700; }
.qa { max-width: 860px; margin: 70px auto 0; }
.qa h2 { text-align: center; margin-bottom: 24px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 68px; cursor: pointer; font-weight: 700; font-size: 1.1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--ember-hi); font-size: 1.5rem; font-weight: 400; transition: rotate .3s var(--ease); }
.qa details[open] summary::after { rotate: 45deg; }
.qa p { margin: 0 0 20px; color: var(--mute); }
.qa a { color: var(--ember-hi); font-weight: 700; }

/* ---------- things that rise into view ----------
   site.js marks blocks and cards .rise and adds .in the first time each scrolls into view; .risen once it has
   arrived, which hands the element back its own transitions. Without JS html never gets .reveal, so all shows. */
html.reveal .rise:not(.risen) { transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0ms); }
html.reveal .rise:not(.in) { opacity: 0; transform: translateY(26px); }
html.reveal .catalogue > .rise:not(.in) { transform: translateY(34px) scale(.97); }
.rule .tok { transition: opacity .5s var(--ease); }

/* Reduced motion: nothing moves or zooms, but things still fade in, and hover glow and colour changes stay. */
html.reveal.calm .rise:not(.risen) { transition: opacity .6s ease; transition-delay: var(--d, 0ms); }
html.reveal.calm .rise:not(.in), html.reveal.calm .catalogue > .rise:not(.in) { transform: none; }
html.reveal.calm .split:not(.in), html.reveal.calm .deal:not(.in) { opacity: 0; }
html.reveal.calm .split, html.reveal.calm .deal { transition: opacity .6s ease; transition-delay: calc(var(--i, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, box-shadow, outline-color, filter !important; }
  .rule .tok { left: 46%; }
}

/* Touch screens: every small link and button gets a 44px tap area (padding, so nothing looks different). */
@media (pointer: coarse) {
  .logo { min-height: 44px; min-width: 44px; }
  .topbar .btn, .topbar .account-menu > summary { min-height: 44px; min-width: 44px; }
  .crumbs a { padding: 13px 12px; margin: 0 -12px; }
  .site .tag-filter { min-height: 48px; } .site .tag-filter button { min-height: 44px; }
  .foot a { padding: 10px 0; }
  .copy a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
/* the sign-in outcome note: above Home's hero, which is pulled up under the header */
.signin-check { position: relative; z-index: 5; background: rgba(18,16,16,.94); }