/* =========================================================================
   GAME CREATIVE — structural DNA v2
   -------------------------------------------------------------------------
   Layout model:
     - Fixed LEFT RAIL (desktop ≥960px, 72px wide) or BOTTOM TAB BAR
       (<960px, 56px tall). No top bar. No sticky header. No horizontal nav.
     - Main column is 880px max, left-aligned to the rail.
     - Typography is display-first. Products live on ROWS, not card grids.
     - Week strip on the home is the primary affordance.
     - Cmd/Ctrl+K opens a command palette for search + quick-nav.
   ========================================================================= */

:root {
  /* Palette */
  --pe-base:        #0C0A14;
  --pe-base-soft:   #14111F;
  --pe-paper:       #1A1627;
  --pe-paper-soft:  #221C33;
  --pe-line:        rgba(255, 255, 255, 0.07);
  --pe-line-strong: rgba(255, 255, 255, 0.14);

  --pe-ink:        #EAE4F5;
  --pe-ink-muted: #A89FBF;
  --pe-ink-dim:   #6E6585;
  --pe-ink-inv:   #110A22;

  --pe-accent:      #9A7AFF;
  --pe-accent-soft: rgba(154, 122, 255, 0.14);
  --pe-accent-deep: #7E5AF0;
  --pe-warn:        #FFA66B;
  --pe-good:        #7AE0B0;
  --pe-cut:         #FF5C8A;

  /* Typography */
  --pe-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --pe-body:    "Manrope",       ui-sans-serif, system-ui, sans-serif;
  --pe-mono:    "Space Mono",    ui-monospace, "SF Mono", monospace;

  /* Geometry — flatter, tighter, more editorial than a shop-grid */
  --pe-radius:      4px;
  --pe-radius-pill: 999px;
  --pe-shadow:      0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Shell geometry */
  --pe-rail-w:     72px;
  --pe-tabbar-h:   56px;
  --pe-col-max:    880px;
  --pe-col-wide:   1080px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--pe-base);
  color: var(--pe-ink);
  font-family: var(--pe-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  /* Background reads as a flat paper, no gradients from the old shelf look. */
}

a { color: var(--pe-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; }
a:hover { border-bottom-color: var(--pe-accent); }
a:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 2px; border-radius: 2px; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--pe-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.08;
}
h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.025em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.0rem; }

p { margin: 0 0 0.9em; }

.pe-mono {
  font-family: var(--pe-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--pe-ink-muted);
}

.pe-skip {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.pe-skip:focus {
  left: 0.5rem; top: 0.5rem; width: auto; height: auto; padding: 0.6rem 0.9rem;
  background: var(--pe-accent); color: var(--pe-ink-inv); z-index: 9999; border-radius: var(--pe-radius);
}

/* =========================================================================
   Shell — rail + tabbar + main column
   ========================================================================= */

.pe-shell {
  min-height: 100vh;
  /* Block layout: .pe-rail / .pe-tabbar / .pe-cmdk are all position:fixed
     and pulled out of flow. Only .pe-main and .pe-foot-wrap stay in flow,
     and they must stack vertically. A `display: flex` (row) here caused
     main + footer to share a row as siblings once <main> was explicitly
     closed, squishing the main column to ~100px. Block direction keeps
     them stacked and lets main's `margin-left: var(--pe-rail-w)` do the
     rail offset cleanly for both content and footer. */
  display: block;
}
/* Footer alignment rules moved down to the single .pe-foot-wrap block
   so the shorthand `margin:` declaration there does not undo the rail
   offset. See the block near the `.pe-foot-grid` definition. */

/* --- LEFT RAIL (desktop) ------------------------------------------------- */

.pe-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--pe-rail-w);
  background: var(--pe-base-soft);
  border-right: 1px solid var(--pe-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  z-index: 40;
}

.pe-rail__brand {
  width: 40px; height: 40px;
  border-radius: var(--pe-radius);
  background: transparent;
  display: grid; place-items: center;
  margin-bottom: 1.2rem;
  border-bottom: none;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.pe-rail__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pe-rail__brand:hover { border-bottom: none; transform: scale(1.05); }

.pe-rail__items {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 0.2rem; width: 100%;
  align-items: center;
}

.pe-rail__item {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--pe-radius);
  color: var(--pe-ink-dim);
  position: relative;
  border-bottom: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.pe-rail__item svg { width: 20px; height: 20px; }
.pe-rail__item:hover { background: var(--pe-paper); color: var(--pe-ink); border-bottom: none; }
.pe-rail__item[aria-current="page"] { background: var(--pe-accent-soft); color: var(--pe-accent); }

/* Tooltip on hover/focus */
.pe-rail__item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--pe-paper-soft);
  color: var(--pe-ink);
  padding: 0.35rem 0.6rem;
  border-radius: var(--pe-radius);
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  border: 1px solid var(--pe-line);
  z-index: 50;
}
.pe-rail__item:hover::after,
.pe-rail__item:focus-visible::after { opacity: 1; }

.pe-rail__sp { flex: 1; min-height: 0.5rem; }

/* Shelves — genre list pinned inside the desktop rail, below the primary
   5 icons. Single-letter glyph chips stack vertically; hover tooltip
   spills the full label + count to the right. */
.pe-rail__shelves {
  width: 100%;
  padding: 0.6rem 0 0.4rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--pe-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.pe-rail__shelves-k {
  font-family: var(--pe-mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  margin-bottom: 0.15rem;
}
.pe-rail__shelves-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  /* The rail is fixed-height; keep the inner list scrollable only when the
     viewport is too short to hold every glyph. On laptops 900px+ it fits
     without scroll. Scrollbar is hidden in every engine to keep the 72px
     rail visually clean. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE / legacy Edge */
}
.pe-rail__shelves-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pe-rail__shelf {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--pe-line);
  background: transparent;
  color: var(--pe-ink-dim);
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-bottom: 1px solid var(--pe-line);
}
.pe-rail__shelf:hover {
  background: var(--pe-paper);
  color: var(--pe-ink);
  border-color: var(--pe-line-strong);
  border-bottom: 1px solid var(--pe-line-strong);
}
.pe-rail__shelf[aria-current="page"] {
  background: var(--pe-accent-soft);
  color: var(--pe-accent);
  border-color: var(--pe-accent-soft);
}
.pe-rail__shelf-g {
  font-family: var(--pe-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
/* Tooltip pattern kept but content emptied — the shelf column has an
   overflow-hidden ancestor so the ::after flyout was clipped on every
   hover. Glyph + aria-label + native title attribute are enough for
   the chips; the pop-out tooltip is disabled here. */
.pe-rail__shelf::after,
.pe-rail__shelves-all::after {
  content: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: var(--pe-paper-soft);
  color: var(--pe-ink);
  padding: 0.35rem 0.6rem;
  border-radius: var(--pe-radius);
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  border: 1px solid var(--pe-line);
  z-index: 50;
}
.pe-rail__shelf:hover::after,
.pe-rail__shelf:focus-visible::after,
.pe-rail__shelves-all:hover::after,
.pe-rail__shelves-all:focus-visible::after { opacity: 0; }
.pe-rail__shelves-all {
  display: grid;
  place-items: center;
  width: 30px; height: 22px;
  color: var(--pe-ink-dim);
  border-bottom: none;
  font-size: 1rem;
  letter-spacing: 0.05em;
  position: relative;
}
.pe-rail__shelves-all:hover { color: var(--pe-accent); border-bottom: none; }

@media (max-width: 960px) {
  .pe-rail__shelves { display: none; }
}

.pe-rail__badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  font-family: var(--pe-mono);
  font-size: 0.6rem;
  display: grid; place-items: center;
  padding: 0 0.25rem;
  font-weight: 700;
}

/* --- BOTTOM TAB BAR (mobile) -------------------------------------------- */

.pe-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--pe-tabbar-h);
  background: var(--pe-base-soft);
  border-top: 1px solid var(--pe-line);
  z-index: 40;
}
.pe-tabbar__items {
  list-style: none;
  margin: 0; padding: 0 max(0px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}
.pe-tabbar__item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.2rem;
  color: var(--pe-ink-dim);
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  border-bottom: none;
}
.pe-tabbar__item svg { width: 22px; height: 22px; }
.pe-tabbar__item[aria-current="page"] { color: var(--pe-accent); }
.pe-tabbar__item:hover { border-bottom: none; color: var(--pe-ink); }

.pe-tabbar__badge {
  position: absolute; top: 6px; right: calc(50% - 18px);
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  font-size: 0.55rem;
  display: grid; place-items: center;
  padding: 0 0.2rem;
}

/* --- MAIN COLUMN -------------------------------------------------------- */

.pe-main {
  flex: 1;
  margin-left: var(--pe-rail-w);
  min-width: 0;
  padding: 2.2rem 2.4rem 4rem;
}
.pe-col {
  max-width: var(--pe-col-max);
  margin: 0 auto;
}
.pe-col--wide { max-width: var(--pe-col-wide); }

@media (max-width: 960px) {
  .pe-rail { display: none; }
  .pe-tabbar { display: block; }
  .pe-main {
    margin-left: 0;
    padding: 1.1rem 1.1rem calc(var(--pe-tabbar-h) + 2rem);
  }
  .pe-rail__item::after { display: none; }
}

/* =========================================================================
   Buttons / pills / chips
   ========================================================================= */

.pe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--pe-ink);
  border: 1px solid var(--pe-line-strong);
  border-radius: var(--pe-radius);
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}
.pe-btn:hover { background: var(--pe-paper); border-color: var(--pe-ink-muted); border-bottom: 1px solid var(--pe-ink-muted); }
.pe-btn--accent {
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  border-color: var(--pe-accent);
}
.pe-btn--accent:hover { background: var(--pe-accent-deep); border-color: var(--pe-accent-deep); color: var(--pe-ink); }
.pe-btn--ghost { background: transparent; border-color: transparent; color: var(--pe-ink-muted); }
.pe-btn--ghost:hover { color: var(--pe-ink); border-color: transparent; }
.pe-btn--sm { padding: 0.45rem 0.7rem; font-size: 0.65rem; }

.pe-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--pe-radius-pill);
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--pe-paper);
  color: var(--pe-ink-muted);
  border: 1px solid var(--pe-line);
}
.pe-pill--accent { background: var(--pe-accent-soft); color: var(--pe-accent); border-color: transparent; }
.pe-pill--cut    { background: var(--pe-cut); color: var(--pe-ink-inv); border-color: transparent; }
.pe-pill--good   { background: rgba(122, 224, 176, 0.14); color: var(--pe-good); border-color: transparent; }

.pe-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--pe-radius-pill);
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-muted);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--pe-line);
}
.pe-chip:hover { color: var(--pe-ink); border-color: var(--pe-line-strong); border-bottom: 1px solid var(--pe-line-strong); }
.pe-chip[aria-pressed="true"],
.pe-chip--on {
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  border-color: var(--pe-accent);
}

/* =========================================================================
   Cmd+K palette
   ========================================================================= */

.pe-cmdk {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 12, 0.72);
  backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100;
}
.pe-cmdk[data-open="true"] { display: flex; }
.pe-cmdk__panel {
  width: min(640px, 92vw);
  background: var(--pe-paper);
  border: 1px solid var(--pe-line-strong);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.pe-cmdk__input {
  width: 100%;
  padding: 1.1rem 1.2rem;
  background: transparent;
  border: none;
  color: var(--pe-ink);
  font-family: var(--pe-display);
  font-size: 1.15rem;
  border-bottom: 1px solid var(--pe-line);
  outline: none;
}
.pe-cmdk__input::placeholder { color: var(--pe-ink-dim); }
.pe-cmdk__hint {
  font-family: var(--pe-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-ink-dim);
  padding: 0.7rem 1.2rem 0.4rem;
}
.pe-cmdk__list { max-height: 50vh; overflow-y: auto; padding-bottom: 0.6rem; }
.pe-cmdk__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--pe-ink);
  border-bottom: none;
}
.pe-cmdk__item[data-sel="true"],
.pe-cmdk__item:hover {
  background: var(--pe-accent-soft);
  border-bottom: none;
}
.pe-cmdk__item-k {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-accent);
  width: 48px;
  flex: 0 0 48px;
}
.pe-cmdk__item-t { flex: 1; min-width: 0; font-size: 0.95rem; }
.pe-cmdk__item-s { font-family: var(--pe-mono); font-size: 0.65rem; color: var(--pe-ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }

.pe-cmdk__foot {
  border-top: 1px solid var(--pe-line);
  padding: 0.55rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  justify-content: space-between;
}
.pe-cmdk__kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--pe-base);
  border: 1px solid var(--pe-line-strong);
  border-radius: 3px;
  color: var(--pe-ink-muted);
  margin: 0 0.15rem;
}

/* Search trigger — displayed on the main column (top-right of content area). */
.pe-cmdk-trigger {
  position: sticky;
  top: 0;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(12, 10, 20, 0.85);
  backdrop-filter: blur(8px);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  color: var(--pe-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  width: 100%;
  text-align: left;
  z-index: 20;
}
.pe-cmdk-trigger:hover { color: var(--pe-ink); border-color: var(--pe-line-strong); }
.pe-cmdk-trigger__sp { flex: 1; }
.pe-cmdk-trigger__k {
  display: flex; gap: 0.2rem;
}
.pe-cmdk-trigger__k span {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--pe-base);
  border: 1px solid var(--pe-line);
  border-radius: 3px;
  font-size: 0.65rem;
  color: var(--pe-ink-muted);
}

/* =========================================================================
   Crumbs (inline)
   ========================================================================= */

.pe-crumbs {
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
  margin-bottom: 1.6rem;
}
.pe-crumbs a {
  color: var(--pe-ink-muted);
  border-bottom: none;
}
.pe-crumbs a:hover { color: var(--pe-accent); }
.pe-crumbs span + span::before,
.pe-crumbs span + a::before,
.pe-crumbs a + span::before { content: " / "; padding: 0 0.25rem; color: var(--pe-ink-dim); }

/* =========================================================================
   Home — WEEK STRIP + PLAYLISTS + TICKER
   ========================================================================= */

.pe-wk {
  margin-bottom: 3rem;
}
.pe-wk__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--pe-line);
}
.pe-wk__hd-t {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1;
}
.pe-wk__hd-n { text-align: right; }
.pe-wk__hd-n b {
  display: block;
  font-family: var(--pe-display);
  font-size: 1rem;
  color: var(--pe-ink);
  font-weight: 500;
}
.pe-wk__hd-n span {
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-dim);
}

.pe-wk__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  overflow: hidden;
  background: var(--pe-paper);
}
.pe-wk__day {
  padding: 1rem 0.8rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-right: 1px solid var(--pe-line);
  background: var(--pe-paper);
  min-height: 340px;
  position: relative;
  text-decoration: none;
  color: var(--pe-ink);
  border-bottom: none;
  transition: background 0.18s ease;
}
.pe-wk__day:last-child { border-right: none; }
.pe-wk__day:hover { background: var(--pe-paper-soft); border-bottom: none; }
.pe-wk__day--today {
  background: linear-gradient(180deg, var(--pe-accent-soft) 0%, var(--pe-paper) 40%);
}
.pe-wk__day--today::before {
  content: "TONIGHT";
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  font-family: var(--pe-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--pe-accent);
  background: rgba(154,122,255,0.12);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}
.pe-wk__day-k {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pe-ink-dim);
}
.pe-wk__day--today .pe-wk__day-k { color: var(--pe-accent); }
.pe-wk__day-len {
  font-family: var(--pe-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pe-wk__day-len small {
  font-size: 0.72rem;
  color: var(--pe-ink-muted);
  font-family: var(--pe-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-left: 0.3rem;
}
.pe-wk__day-thumb {
  margin-top: auto;
  aspect-ratio: 3/4;
  background: var(--pe-base);
  border: 1px solid var(--pe-line);
  border-radius: 3px;
  overflow: hidden;
}
.pe-wk__day-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-wk__day-t {
  font-family: var(--pe-display);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--pe-ink);
  min-height: 2.3em;
}
.pe-wk__day-price {
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--pe-accent);
}

@media (max-width: 960px) {
  .pe-wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-wk__day { min-height: 260px; border-bottom: 1px solid var(--pe-line); }
  .pe-wk__day:nth-last-child(-n+2) { border-bottom: none; }
  .pe-wk__day:nth-child(2n) { border-right: none; }
}

/* Ticker */
.pe-ticker {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--pe-line);
  border-bottom: 1px solid var(--pe-line);
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.6rem 0;
  margin-bottom: 2.4rem;
}
.pe-ticker__track {
  display: inline-flex;
  gap: 2.6rem;
  animation: pe-ticker 38s linear infinite;
  padding-left: 100%;
}
.pe-ticker__it { display: inline-flex; gap: 0.6rem; align-items: center; }
.pe-ticker__it span.pe-ticker__cut { color: var(--pe-cut); }
.pe-ticker__it a { color: var(--pe-ink); border-bottom: none; }
.pe-ticker__it a:hover { color: var(--pe-accent); }
@keyframes pe-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Playlists — horizontal scroll rows with list items */
.pe-pl {
  margin-bottom: 2.8rem;
}
.pe-pl__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.pe-pl__hd h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.pe-pl__hd-k {
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-accent);
}
.pe-pl__hd-more { font-family: var(--pe-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pe-ink-muted); border-bottom: none; }
.pe-pl__hd-more:hover { color: var(--pe-accent); border-bottom: none; }

.pe-pl__scroll {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.8rem;
  /* Stay inside the parent container by default so PDP/category pages
     don't bleed under the left rail. The homepage opts in to the
     full-bleed pattern by wrapping this rail in .pe-home. */
  margin: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--pe-line-strong) transparent;
}
.pe-home .pe-pl__scroll {
  margin: 0 -2.4rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
@media (max-width: 960px) {
  .pe-home .pe-pl__scroll { margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
}
.pe-pl__scroll::-webkit-scrollbar { height: 6px; }
.pe-pl__scroll::-webkit-scrollbar-track { background: transparent; }
.pe-pl__scroll::-webkit-scrollbar-thumb { background: var(--pe-line-strong); border-radius: 3px; }

/* Related card — top thumb + body. Each card is 232px wide, thumb sits
   on a 4:3 crop matching the catalogue row style. Cut-tag lives in the
   top-right corner of the thumb, not in the body text. */
.pe-pl__it-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--pe-paper-soft) 0%, var(--pe-paper) 100%);
  border-bottom: 1px solid var(--pe-line);
}
.pe-pl__it-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pe-pl__it:hover .pe-pl__it-thumb img { transform: scale(1.04); }
.pe-pl__it-thumb::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--pe-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--pe-ink-dim);
  opacity: 0.35;
  z-index: 0;
}
.pe-pl__it-thumb img { position: relative; z-index: 1; }
.pe-pl__it-tag {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--pe-radius-pill);
  background: var(--pe-cut);
  color: var(--pe-ink-inv);
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  z-index: 2;
}
.pe-pl__it-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.95rem 1rem;
  min-height: 0;
}

.pe-pl__it {
  flex: 0 0 232px;
  scroll-snap-align: start;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: var(--pe-ink);
  border-bottom: 1px solid var(--pe-line);
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.pe-pl__it:hover { border-color: var(--pe-line-strong); border-bottom: 1px solid var(--pe-line-strong); transform: translateY(-2px); }
.pe-pl__it-k {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
}
.pe-pl__it-t {
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  min-height: 2.4em;
}
.pe-pl__it-meta {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-muted);
  margin-top: auto;
}
.pe-pl__it-price {
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--pe-accent);
}
.pe-pl__it-old {
  text-decoration: line-through;
  color: var(--pe-ink-dim);
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

/* =========================================================================
   LIST VIEW — the default product display
   ========================================================================= */

.pe-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--pe-line);
}
.pe-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 120px 100px 130px 40px;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0.4rem;
  border-bottom: 1px solid var(--pe-line);
  text-decoration: none;
  color: var(--pe-ink);
  position: relative;
  border-top: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pe-row:hover {
  background: var(--pe-paper);
  border-color: var(--pe-line-strong);
  border-bottom-color: var(--pe-line-strong);
}
.pe-row__thumb {
  position: relative;
  width: 48px; height: 48px;
  background: var(--pe-paper);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--pe-line);
  flex: none;
}
.pe-row__thumb::before {
  /* Monogram fallback for titles that have no image. Hidden behind the
     <img> when one is present; shows through only when img is missing. */
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pe-display);
  font-weight: 700;
  color: var(--pe-ink-dim);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.pe-row__thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.pe-row__cut {
  margin-left: 0.4rem;
  font-family: var(--pe-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-cut);
  vertical-align: 1px;
}
/* .pe-row__main is a <span> that holds title + sub-meta. Without a
   formatting context, inline children ignore overflow:hidden and long
   publisher lists (e.g. Baldur's Gate II) escape the row and push past
   the price column. Forcing block on main + its children fixes that. */
.pe-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.pe-row__t {
  display: block;
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pe-row__sub {
  display: block;
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pe-row__plat, .pe-row__len {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-muted);
}
.pe-row__price {
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  color: var(--pe-accent);
}
.pe-row__price-old {
  text-decoration: line-through;
  color: var(--pe-ink-dim);
  font-size: 0.75rem;
  font-weight: 400;
  margin-right: 0.4rem;
}
.pe-row__cue {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--pe-radius);
  background: var(--pe-paper);
  border: 1px solid var(--pe-line-strong);
  color: var(--pe-ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--pe-mono);
  font-size: 1.1rem;
  line-height: 1;
}
.pe-row__cue:hover { background: var(--pe-accent); color: var(--pe-ink-inv); border-color: var(--pe-accent); }
.pe-row__cue[data-queued="true"] { background: var(--pe-accent); color: var(--pe-ink-inv); border-color: var(--pe-accent); }
.pe-row__cue[data-queued="true"]::after { content: "✓"; }
.pe-row__cue:not([data-queued="true"])::after { content: "+"; }

@media (max-width: 760px) {
  .pe-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 32px;
    gap: 0.7rem;
    padding: 0.7rem 0.3rem;
  }
  .pe-row__thumb { width: 44px; height: 44px; }
  .pe-row__plat, .pe-row__len { display: none; }
  .pe-row__price { text-align: right; font-size: 0.95rem; }
}

/* List head — filter chips + count */
.pe-lh {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.pe-lh__t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pe-lh__n {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
}
.pe-lh__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pe-lh__sep {
  width: 1px; height: 1.4rem;
  background: var(--pe-line);
  margin: 0 0.4rem;
}
.pe-lh__sort {
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pe-lh__sort select {
  /* Dark-theme <select> — the native control was rendering white-on-white
     on Blink/Webkit because the surface defaulted to the UA white and the
     text inherited var(--pe-ink). Force a dark surface + ink + a chevron. */
  background: var(--pe-paper);
  color: var(--pe-ink);
  border: 1px solid var(--pe-line-strong);
  border-radius: var(--pe-radius);
  padding: 0.35rem 1.8rem 0.35rem 0.6rem;
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A7A2BC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 10px 6px;
  cursor: pointer;
  /* Native <option> styling falls back to OS — force readable tokens so
     the drop-down list reads dark-on-light or dark-on-paper. */
  color-scheme: dark;
}
.pe-lh__sort select:hover { border-color: var(--pe-accent); }
.pe-lh__sort select:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 1px; }
.pe-lh__sort select option {
  background: var(--pe-paper);
  color: var(--pe-ink);
}

/* Empty state */
.pe-empty {
  padding: 3rem 1rem;
  text-align: center;
  border: 1px dashed var(--pe-line-strong);
  border-radius: var(--pe-radius);
  color: var(--pe-ink-muted);
}
.pe-empty h3 {
  font-size: 1.3rem; margin-bottom: 0.4rem;
  color: var(--pe-ink);
}

/* =========================================================================
   PDP — long-form scroll + floating cue pill
   ========================================================================= */

.pe-pdp { max-width: var(--pe-col-max); margin: 0 auto; padding-bottom: 6rem; }
@media (max-width: 960px) {
  /* Pill sits above tabbar; main already has tabbar padding, add pill. */
  .pe-pdp { padding-bottom: calc(var(--pe-tabbar-h) + 5.5rem); }
}

.pe-pdp__head {
  padding: 2rem 0 2rem;
  border-bottom: 1px solid var(--pe-line);
  margin-bottom: 2rem;
}
.pe-pdp__kind {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pe-accent);
  margin-bottom: 1.2rem;
}
.pe-pdp__t {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 1rem;
}
.pe-pdp__sub {
  font-family: var(--pe-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-ink-muted);
}
.pe-pdp__sub b { color: var(--pe-ink); font-weight: 500; }

/* Top-fold — gallery on the left, sticky buy panel on the right.
   Ensures the CUE button is above the fold on laptop-class viewports. */
.pe-pdp__top {
  display: grid;
  /* Buy panel on the right: bumped the floor from 360 → 420px so the
     big display-type price, the "Cue this copy" CTA and the assurance
     list all breathe on two-line titles. Gallery still wins on every
     viewport > 900px at a 1fr : 1fr ratio. */
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  margin-bottom: 2rem;
  align-items: start;
}
.pe-pdp__gallery { min-width: 0; }
.pe-pdp__buy {
  position: sticky;
  top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.2rem 1.2rem 1.4rem;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  background: var(--pe-paper);
  min-width: 0;
}
.pe-pdp__buy .pe-pdp__head {
  padding: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
.pe-pdp__buy-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--pe-line);
  padding-top: 0.9rem;
}
.pe-pdp__buy-now {
  font-family: var(--pe-display);
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  font-weight: 700;
  color: var(--pe-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pe-pdp__buy-was {
  font-family: var(--pe-mono);
  font-size: 0.9rem;
  color: var(--pe-ink-dim);
  text-decoration: line-through;
}
.pe-pdp__buy-save {
  flex-basis: 100%;
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pe-cut);
}
.pe-pdp__buy-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.2rem;
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  border: none;
  border-radius: var(--pe-radius);
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  justify-content: flex-start;
}
.pe-pdp__buy-cta:hover { background: var(--pe-accent-deep); transform: translateY(-1px); }
.pe-pdp__buy-cta[data-queued="true"] { background: var(--pe-good); }
.pe-pdp__buy-cta-price {
  margin-left: auto;
  font-family: var(--pe-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.pe-pdp__buy-tr {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--pe-line);
  display: grid;
  gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--pe-ink-muted);
}
.pe-pdp__buy-tr li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}
.pe-pdp__buy-tr svg { color: var(--pe-accent); margin-top: 0.2rem; }
.pe-pdp__buy-tr b { color: var(--pe-ink); font-weight: 600; }

@media (max-width: 820px) {
  .pe-pdp__top {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .pe-pdp__buy { position: static; }
}

.pe-pdp__hero {
  aspect-ratio: 16/9;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.pe-pdp__hero img { width: 100%; height: 100%; object-fit: cover; }

.pe-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.4rem;
  margin-bottom: 2.6rem;
}
.pe-pdp__thumb {
  aspect-ratio: 16/9;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.pe-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-pdp__thumb[data-active="true"] { opacity: 1; outline: 1px solid var(--pe-accent); outline-offset: -1px; }
.pe-pdp__thumb:hover { opacity: 1; }

/* Default placement — below the top fold, full-width 4-cell strip. The
   `--in-gallery` modifier overrides this when the band is tucked inside
   .pe-pdp__gallery below the slider on desktop, where a 2×2 grid fits
   the narrower column better than a 4-cell row. */
.pe-pdp__sess {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  background: var(--pe-paper);
  margin-bottom: 2.6rem;
  overflow: hidden;
}
.pe-pdp__sess-cell {
  padding: 1.1rem 1rem;
  border-right: 1px solid var(--pe-line);
}
.pe-pdp__sess-cell:last-child { border-right: none; }
.pe-pdp__sess-k {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
  display: block;
  margin-bottom: 0.3rem;
}
.pe-pdp__sess-v {
  font-family: var(--pe-display);
  font-size: 1.1rem;
  font-weight: 500;
}
.pe-pdp__sess-v a { color: var(--pe-accent); border-bottom: none; }

@media (max-width: 760px) {
  .pe-pdp__sess { grid-template-columns: repeat(2, 1fr); }
  .pe-pdp__sess-cell:nth-child(2n) { border-right: none; }
  .pe-pdp__sess-cell:nth-child(-n+2) { border-bottom: 1px solid var(--pe-line); }
}

/* Session band inside the gallery column on desktop — 2×2 so the four
   cells breathe inside the narrower left column; reverts to the normal
   4-cell strip below 820px where the PDP top-fold becomes single-column
   and the band can use the full width again. */
.pe-pdp__sess--in-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 0;
}
.pe-pdp__sess--in-gallery .pe-pdp__sess-cell { border-right: 1px solid var(--pe-line); }
.pe-pdp__sess--in-gallery .pe-pdp__sess-cell:nth-child(2n) { border-right: none; }
.pe-pdp__sess--in-gallery .pe-pdp__sess-cell:nth-child(-n+2) { border-bottom: 1px solid var(--pe-line); }
@media (max-width: 820px) {
  /* Top fold collapses at 820px (.pe-pdp__top breakpoint), so the band
     follows suit: same stacked 2×2 pattern as the default one. */
  .pe-pdp__sess--in-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pe-pdp__desc {
  max-width: 62ch;
  color: var(--pe-ink);
  font-size: 1rem;
  line-height: 1.72;
  margin-bottom: 2.6rem;
}
.pe-pdp__desc p { margin: 0 0 1em; }

.pe-pdp__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-top: 1px solid var(--pe-line);
  border-bottom: 1px solid var(--pe-line);
  margin-bottom: 2.6rem;
}
.pe-pdp__meta dl {
  margin: 0;
  padding: 0.9rem 0.4rem;
  border-right: 1px solid var(--pe-line);
}
.pe-pdp__meta dl:last-child { border-right: none; }
.pe-pdp__meta dt {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
  margin-bottom: 0.3rem;
}
.pe-pdp__meta dd {
  margin: 0;
  font-family: var(--pe-display);
  font-weight: 500;
  font-size: 0.95rem;
}

/* Floating cue pill — always visible on PDP. Stays compact (never spans
   the viewport) so it can't "escape" the content column or collide
   with the left rail. width: max-content hugs the text+button naturally;
   max-width caps it at the column-gutter on narrow phones. */
.pe-pill-cue {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  width: max-content;
  max-width: calc(100vw - 3rem);
  background: var(--pe-paper);
  border: 1px solid var(--pe-line-strong);
  border-radius: var(--pe-radius-pill);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  font-family: var(--pe-display);
}
.pe-pill-cue__p {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pe-accent);
  letter-spacing: -0.01em;
}
.pe-pill-cue__p-old {
  text-decoration: line-through;
  color: var(--pe-ink-dim);
  font-size: 0.8rem;
  margin-left: 0.4rem;
  font-weight: 400;
}
.pe-pill-cue__btn {
  border: none;
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  padding: 0.55rem 0.95rem;
  border-radius: var(--pe-radius-pill);
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pe-pill-cue__btn:hover { background: var(--pe-accent-deep); color: var(--pe-ink); }
.pe-pill-cue__btn[data-queued="true"] {
  background: var(--pe-good);
  color: var(--pe-ink-inv);
}
@media (max-width: 960px) {
  .pe-pill-cue {
    right: 1.1rem;
    bottom: calc(var(--pe-tabbar-h) + 0.8rem);
    max-width: calc(100vw - 2.2rem);
  }
}

/* Related rail under PDP — uses pe-pl__scroll */

/* =========================================================================
   WIZARD — /queue/ single-page three steps
   ========================================================================= */

.pe-wz {
  max-width: var(--pe-col-max);
  margin: 0 auto;
}

.pe-wz__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 2.2rem;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  overflow: hidden;
  background: var(--pe-paper);
}
.pe-wz__step {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--pe-line);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  border-top: none;
  border-bottom: none;
  cursor: pointer;
  text-align: left;
  color: var(--pe-ink-muted);
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.pe-wz__step:last-child { border-right: none; }
.pe-wz__step:hover { background: var(--pe-paper-soft); color: var(--pe-ink); }
.pe-wz__step[aria-current="step"] {
  color: var(--pe-ink);
  background: var(--pe-accent-soft);
}
.pe-wz__step-k {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--pe-radius-pill);
  border: 1px solid var(--pe-line-strong);
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.pe-wz__step[aria-current="step"] .pe-wz__step-k {
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  border-color: var(--pe-accent);
}
.pe-wz__step[data-done="true"] .pe-wz__step-k {
  background: var(--pe-good);
  color: var(--pe-ink-inv);
  border-color: var(--pe-good);
}
.pe-wz__step-t {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@media (max-width: 760px) {
  .pe-wz__steps { grid-template-columns: 1fr; }
  .pe-wz__step { border-right: none; border-bottom: 1px solid var(--pe-line); }
  .pe-wz__step:last-child { border-bottom: none; }
}

.pe-wz__panel {
  padding: 1.6rem 0;
}
.pe-wz__panel[hidden] { display: none; }
.pe-wz__h {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.pe-wz__lede {
  color: var(--pe-ink-muted);
  margin-bottom: 1.4rem;
  max-width: 58ch;
}

/* Stack review — list of queue items */
.pe-q-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 120px 120px 40px;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0.3rem;
  border-bottom: 1px solid var(--pe-line);
}
.pe-q-row__thumb {
  width: 56px; height: 56px; background: var(--pe-paper);
  border-radius: 3px; overflow: hidden; border: 1px solid var(--pe-line);
}
.pe-q-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-q-row__t {
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 500;
}
.pe-q-row__t a { color: var(--pe-ink); border-bottom: none; }
.pe-q-row__t a:hover { color: var(--pe-accent); }
.pe-q-row__sub { font-family: var(--pe-mono); font-size: 0.62rem; color: var(--pe-ink-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.1rem; }
.pe-q-row__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pe-line-strong);
  border-radius: var(--pe-radius);
  overflow: hidden;
}
.pe-q-row__qty button {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--pe-ink);
  font-family: var(--pe-mono);
  font-size: 1rem;
}
.pe-q-row__qty button:hover { background: var(--pe-paper-soft); }
.pe-q-row__qty input {
  width: 40px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--pe-line);
  border-right: 1px solid var(--pe-line);
  text-align: center;
  font-family: var(--pe-mono);
  color: var(--pe-ink);
}
.pe-q-row__price {
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--pe-accent);
  text-align: right;
}
.pe-q-row__rm {
  background: transparent; border: none;
  color: var(--pe-ink-dim);
  cursor: pointer;
  font-family: var(--pe-mono);
  font-size: 1.1rem;
}
.pe-q-row__rm:hover { color: var(--pe-cut); }

@media (max-width: 760px) {
  .pe-q-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb main rm"
      "thumb qty  price";
    gap: 0.5rem 0.8rem;
  }
  .pe-q-row__thumb { grid-area: thumb; width: 44px; height: 44px; }
  .pe-q-row__main  { grid-area: main; }
  .pe-q-row__qty   { grid-area: qty; }
  .pe-q-row__price { grid-area: price; }
  .pe-q-row__rm    { grid-area: rm; align-self: start; justify-self: end; }
}

/* Tally card */
.pe-tally {
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  padding: 1.1rem 1.2rem;
  margin-top: 1.4rem;
}
.pe-tally__row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.pe-tally__row--total {
  border-top: 1px solid var(--pe-line);
  padding-top: 0.7rem;
  margin-top: 0.5rem;
  font-family: var(--pe-display);
  font-size: 1.2rem;
  font-weight: 600;
}
.pe-tally__row--total span:last-child { color: var(--pe-accent); }
.pe-tally__note {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pe-ink-dim);
  margin-top: 0.8rem;
  line-height: 1.6;
}

/* Step actions (bottom of each wizard panel) */
.pe-wz__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--pe-line);
}
.pe-wz__actions-l { display: flex; gap: 0.5rem; align-items: center; }

/* Forms inside wizard */
.pe-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.pe-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.pe-form__field--full { grid-column: 1 / -1; }
.pe-form__lbl {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
}
.pe-form input[type=text],
.pe-form input[type=email],
.pe-form input[type=tel],
.pe-form input[type=number],
.pe-form textarea,
.pe-form select {
  background: var(--pe-base-soft);
  border: 1px solid var(--pe-line-strong);
  color: var(--pe-ink);
  padding: 0.7rem 0.8rem;
  border-radius: var(--pe-radius);
  font-family: var(--pe-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.pe-form input:focus, .pe-form textarea:focus, .pe-form select:focus { border-color: var(--pe-accent); }
.pe-form textarea { resize: vertical; min-height: 88px; }

.pe-radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.pe-radio {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.8rem 1rem;
  background: var(--pe-base-soft);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pe-radio:hover { border-color: var(--pe-line-strong); }
.pe-radio input[type=radio] { accent-color: var(--pe-accent); margin-top: 0.2rem; }
.pe-radio strong { font-family: var(--pe-display); font-weight: 500; font-size: 0.95rem; }
.pe-radio small { font-family: var(--pe-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pe-ink-muted); display: block; margin-top: 0.2rem; }
.pe-radio:has(input:checked) { border-color: var(--pe-accent); background: var(--pe-accent-soft); }

@media (max-width: 760px) {
  .pe-form { grid-template-columns: 1fr; }
}

/* =========================================================================
   Confirmed — receipt screen
   ========================================================================= */

.pe-ok {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0 4rem;
}
.pe-ok__k {
  font-family: var(--pe-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pe-accent);
  margin-bottom: 1rem;
}
.pe-ok__t {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}
.pe-ok__lede {
  color: var(--pe-ink-muted);
  max-width: 44ch;
  margin: 0 auto 1.4rem;
}
.pe-ok__ref {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--pe-accent-soft);
  color: var(--pe-accent);
  font-family: var(--pe-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  border-radius: var(--pe-radius);
  margin-bottom: 2.4rem;
}
.pe-ok__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}
.pe-ok__panel {
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  padding: 1rem 1.1rem;
}
.pe-ok__panel h3 { font-size: 0.85rem; margin-bottom: 0.6rem; font-family: var(--pe-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--pe-ink-muted); }

@media (max-width: 760px) {
  .pe-ok__panels { grid-template-columns: 1fr; }
}

/* =========================================================================
   Editorial static pages (long-form, single column)
   ========================================================================= */

.pe-ed {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.pe-ed__k {
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pe-accent);
  margin-bottom: 1.2rem;
}
.pe-ed__t {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  line-height: 1.02;
}
.pe-ed__lede {
  font-size: 1.12rem;
  color: var(--pe-ink-muted);
  line-height: 1.58;
  max-width: 56ch;
  margin-bottom: 2.4rem;
}
.pe-ed__body {
  font-size: 1rem;
  line-height: 1.76;
  color: var(--pe-ink);
}
.pe-ed__body p { margin: 0 0 1.1em; }
.pe-ed__body h2 {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--pe-line);
}
.pe-ed__body h3 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.pe-ed__body ul, .pe-ed__body ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.pe-ed__body li { margin-bottom: 0.4em; }
.pe-ed__body a { color: var(--pe-accent); border-bottom: 1px solid var(--pe-accent-soft); }
.pe-ed__body a:hover { border-bottom-color: var(--pe-accent); }
.pe-ed__body code {
  font-family: var(--pe-mono);
  font-size: 0.9em;
  background: var(--pe-paper);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.pe-ed__body blockquote {
  margin: 1.4em 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid var(--pe-accent);
  color: var(--pe-ink);
  font-family: var(--pe-display);
  font-size: 1.08rem;
  font-style: italic;
}

/* Editorial rule ladder (condition tiers etc.) */
.pe-ladder {
  display: grid;
  grid-template-columns: 48px 140px minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--pe-line);
  margin: 1.4rem 0 1.8rem;
}
.pe-ladder__r {
  display: contents;
}
.pe-ladder__r > * {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--pe-line);
}
.pe-ladder__k {
  font-family: var(--pe-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--pe-accent);
  line-height: 1;
}
.pe-ladder__t {
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 500;
}
.pe-ladder__n {
  color: var(--pe-ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .pe-ladder { grid-template-columns: 40px minmax(0, 1fr); }
  .pe-ladder__t, .pe-ladder__n { grid-column: 2; }
  .pe-ladder__k { grid-row: span 2; padding-bottom: 0; }
}

.pe-qa {
  border-top: 1px solid var(--pe-line);
  margin-top: 1.6rem;
}
.pe-qa__i {
  border-bottom: 1px solid var(--pe-line);
  padding: 1rem 0;
}
.pe-qa__q {
  font-family: var(--pe-display);
  font-weight: 500;
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}
.pe-qa__a {
  color: var(--pe-ink-muted);
  line-height: 1.68;
  margin: 0;
}

/* Sessions (news) index */
.pe-sx {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--pe-line);
}
.pe-sx__i {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--pe-line);
  text-decoration: none;
  color: var(--pe-ink);
  border-bottom: 1px solid var(--pe-line);
}
.pe-sx__i:hover .pe-sx__i-t { color: var(--pe-accent); }
.pe-sx__i-date {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pe-ink-dim);
  padding-top: 0.3rem;
}
.pe-sx__i-t {
  font-family: var(--pe-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  transition: color 0.15s ease;
}
.pe-sx__i-d {
  color: var(--pe-ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .pe-sx__i { grid-template-columns: 1fr; gap: 0.4rem; }
  .pe-sx__i-date { padding-top: 0; }
}

/* =========================================================================
   Footer — thin inline strip
   ========================================================================= */

.pe-foot {
  max-width: var(--pe-col-wide);
  margin: 3rem auto 0;
  padding: 1.2rem 0 1rem;
  border-top: 1px solid var(--pe-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  align-items: baseline;
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-dim);
}
.pe-foot__b { color: var(--pe-ink); font-weight: 500; }
.pe-foot__sp { flex: 1; }
.pe-foot a { color: var(--pe-ink-muted); border-bottom: none; }
.pe-foot a:hover { color: var(--pe-accent); }
.pe-foot__dot { color: var(--pe-ink-dim); margin: 0 0.3rem; }

/* =========================================================================
   Accessibility / misc
   ========================================================================= */

.pe-only-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   Toast — bottom-left status strip; sits above tabbar on mobile.
   ========================================================================= */

.pe-toasts {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 90;
  max-width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.pe-toast {
  padding: 0.7rem 0.9rem;
  background: var(--pe-paper);
  color: var(--pe-ink);
  border: 1px solid var(--pe-line-strong);
  border-left: 2px solid var(--pe-ink-muted);
  border-radius: var(--pe-radius);
  font-size: 0.82rem;
  line-height: 1.35;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.pe-toast[data-in="true"] {
  transform: translateX(0);
  opacity: 1;
}
.pe-toast--accent { border-left-color: var(--pe-accent); }

@media (max-width: 960px) {
  .pe-toasts { bottom: calc(var(--pe-tabbar-h) + 0.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   Row thumb fallback — if the <img> fails / is missing, the thumb cell
   shows a monogram initial in the muted ink.
   ========================================================================= */

.pe-row__thumb:not(:has(img)),
.pe-row__thumb img:not([src]) {
  background:
    linear-gradient(135deg, var(--pe-paper-soft) 0%, var(--pe-paper) 100%);
}

/* =========================================================================
   Background glyph field — subtle hairline icons floating behind content.
   Two layered SVGs: outlined d-pad + vinyl-disc + play-triangle glyph set.
   ========================================================================= */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
}
/* Layer 1 — dense hairline glyph grid (dpad, disc, arcade stick, cartridge,
   play-triangle, power-button, heart, coin). Tile 320px; ~22% opacity so the
   pattern actually reads instead of whispering. Slow drift keeps it alive. */
body::before {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none'><g stroke='%239A7AFF' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M34 58l14-14 14 14-14 14z M40 58h16M48 50v16'/><circle cx='110' cy='52' r='18'/><circle cx='110' cy='52' r='4' fill='%239A7AFF'/><path d='M170 38l18 14-18 14z' fill='%239A7AFF' fill-opacity='0.22'/><rect x='220' y='38' width='40' height='28' rx='4'/><circle cx='230' cy='52' r='1.8' fill='%239A7AFF'/><circle cx='244' cy='52' r='1.8' fill='%239A7AFF'/><circle cx='252' cy='46' r='1.8' fill='%239A7AFF'/><circle cx='252' cy='58' r='1.8' fill='%239A7AFF'/><path d='M50 140v22M40 151h20' /><rect x='90' y='130' width='42' height='32' rx='3'/><path d='M96 138h30M96 146h30M96 154h20'/><circle cx='180' cy='148' r='16'/><path d='M174 148l12-8v16z' fill='%239A7AFF' fill-opacity='0.35'/><path d='M230 130v30M222 145a12 12 0 0 0 16 0'/><path d='M40 234c6-10 18-10 24 0 6-10 18-10 24 0' /><rect x='120' y='220' width='44' height='30' rx='14'/><circle cx='132' cy='235' r='3' fill='%239A7AFF'/><circle cx='152' cy='235' r='3' fill='%239A7AFF'/><circle cx='220' cy='236' r='14'/><path d='M220 222v10M214 236h12'/><path d='M266 220v32M260 228h12M260 244h12'/></g></svg>");
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.26;
  mix-blend-mode: screen;
  animation: pe-bg-drift 80s linear infinite;
}
/* Layer 2 — aurora blobs that gently breathe. This is the "wow" layer that
   makes the dark canvas feel neon-lit rather than a flat wall. */
body::after {
  background:
    radial-gradient(40% 35% at 8% 12%, rgba(154, 122, 255, 0.22), transparent 60%),
    radial-gradient(34% 32% at 92% 18%, rgba(255, 92, 138, 0.18), transparent 64%),
    radial-gradient(50% 40% at 70% 92%, rgba(122, 224, 176, 0.12), transparent 66%),
    radial-gradient(32% 28% at 22% 88%, rgba(255, 166, 107, 0.14), transparent 62%);
  filter: blur(2px);
  animation: pe-bg-aurora 24s ease-in-out infinite alternate;
}
@keyframes pe-bg-drift {
  from { background-position: 0 0; }
  to   { background-position: 320px -320px; }
}
@keyframes pe-bg-aurora {
  0%   { opacity: 0.85; transform: translate3d(0, 0, 0) scale(1); }
  50%  { opacity: 1;    transform: translate3d(-18px, 12px, 0) scale(1.05); }
  100% { opacity: 0.9;  transform: translate3d(20px, -14px, 0) scale(1.02); }
}
/* Hairline grid overlay — a third pass of 4px dots, very subtle, for the
   "arcade monitor" texture. Only on wide screens so mobile stays quick. */
@media (min-width: 720px) {
  body {
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 44px 44px, 88px 88px;
    background-position: 0 0, 22px 22px;
    background-attachment: fixed;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
/* Elevate real content above the fixed background ::before/::after glyph
   field. We scope this to the shell + its children without overriding the
   fixed positioning of the rail / tabbar / cmdk — those declare their own
   position and need to keep it. */
.pe-shell { position: relative; z-index: 1; }
.pe-main, .pe-foot { position: relative; z-index: 1; }
.pe-rail, .pe-tabbar, .pe-cmdk { z-index: 2; }

/* Reading surface — a semi-opaque panel under the main column so the
   glyph pattern + aurora sit around the content, not through it. The
   left rail + tabbar stay over their own background stripe. */
main.pe-main::before {
  content: "";
  position: absolute;
  inset: 0 max(0rem, calc((100% - var(--pe-col-wide)) / 2 - 1.6rem)) 0 max(0rem, calc((100% - var(--pe-col-wide)) / 2 - 1.6rem));
  background:
    linear-gradient(180deg, rgba(14, 12, 22, 0.84) 0%, rgba(14, 12, 22, 0.78) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: -1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
main.pe-main > * { position: relative; z-index: 1; }
@media (max-width: 960px) {
  main.pe-main::before {
    inset: 0;
    border-left: 0; border-right: 0;
  }
}

/* Same reading surface under the footer so the pay-strip / trust grid /
   address block do not float over the bare aurora pattern on short pages.
   Previously only .pe-main had this panel — on long pages (home) the
   visual flow from panel → footer looked continuous, but on short pages
   (/terms/, /welcome-present/, /queue/) the footer dropped onto the raw
   glyph background and read as "outside the container". Matching the
   ::before geometry keeps the two surfaces flush. */
.pe-foot-wrap { position: relative; }
.pe-foot-wrap > * { position: relative; z-index: 1; }
.pe-foot-wrap::before {
  content: "";
  position: absolute;
  inset: 0 max(0rem, calc((100% - var(--pe-col-wide)) / 2 - 1.6rem)) 0 max(0rem, calc((100% - var(--pe-col-wide)) / 2 - 1.6rem));
  background:
    linear-gradient(180deg, rgba(14, 12, 22, 0.78) 0%, rgba(14, 12, 22, 0.86) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 960px) {
  .pe-foot-wrap::before {
    inset: 0;
    border-left: 0; border-right: 0;
  }
}

/* =========================================================================
   WELCOME — welcome-present offer hero (new customers + gift)
   Two-column editorial block with a Pexels/Unsplash photo on the left and a
   numbered list + CTAs on the right. No card-grid, no gradient panel.
   ========================================================================= */

.pe-welcome {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  padding: 1.2rem 0 1.8rem;
  border-bottom: 1px solid var(--pe-line);
  margin-bottom: 2.2rem;
}
.pe-welcome__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--pe-radius);
  aspect-ratio: 4 / 3;
  max-height: 340px;
  background: linear-gradient(135deg, var(--pe-paper) 0%, var(--pe-base-soft) 100%);
}
.pe-welcome__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  mix-blend-mode: luminosity;
  opacity: 0.78;
}
.pe-welcome__glow {
  position: absolute; inset: 0;
  background:
    linear-gradient(210deg, rgba(154, 122, 255, 0.34) 0%, transparent 42%),
    linear-gradient(20deg, rgba(255, 92, 138, 0.22) 0%, transparent 42%);
  mix-blend-mode: screen;
}
.pe-welcome__badge {
  position: absolute;
  top: 1rem; right: 1rem;
  display: grid;
  place-items: center;
  gap: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--pe-accent);
  color: var(--pe-ink-inv);
  border: 3px solid var(--pe-base);
  box-shadow: 0 6px 24px rgba(154, 122, 255, 0.5);
  transform: rotate(-8deg);
  animation: pe-badge-pulse 3s ease-in-out infinite;
}
.pe-welcome__badge b {
  font-family: var(--pe-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.pe-welcome__badge small {
  font-family: var(--pe-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
@keyframes pe-badge-pulse {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.05); }
}
.pe-welcome__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.pe-welcome__k {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pe-accent);
}
.pe-welcome__t {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.pe-welcome__t strong { color: var(--pe-accent); font-weight: 700; }
.pe-welcome__d { color: var(--pe-ink-muted); font-size: 1rem; line-height: 1.65; max-width: 48ch; }
.pe-welcome__d strong { color: var(--pe-ink); font-weight: 600; }
.pe-welcome__list { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: grid; gap: 0.5rem; }
.pe-welcome__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pe-line);
  color: var(--pe-ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.pe-welcome__list li:last-child { border-bottom: 1px solid var(--pe-line); }
.pe-welcome__list li > span {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--pe-ink-dim);
}
.pe-welcome__list li > p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pe-welcome__list li > p b { color: var(--pe-ink); font-weight: 600; }
.pe-welcome__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }

@media (max-width: 820px) {
  .pe-welcome { grid-template-columns: 1fr; padding-top: 1rem; }
  .pe-welcome__media { aspect-ratio: 16 / 10; max-height: 260px; }
}

/* =========================================================================
   PLAYLIST CARD — replaces the text-only .pe-pl__it with an image + cue
   button treatment. Vertical card on scroll rails.
   ========================================================================= */

.pe-card {
  flex: 0 0 232px;
  scroll-snap-align: start;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pe-card:hover { border-color: var(--pe-line-strong); transform: translateY(-2px); }

.pe-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--pe-line);
  border-radius: 0;
}
.pe-card__media:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: -4px; }
.pe-card__thumb {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--pe-paper-soft) 0%, var(--pe-base) 100%);
  display: grid; place-items: center;
}
.pe-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.pe-card:hover .pe-card__thumb img { transform: scale(1.03); }
.pe-card__thumb::before {
  content: attr(data-initial);
  position: absolute;
  font-family: var(--pe-display);
  font-weight: 700;
  font-size: 3.4rem;
  color: var(--pe-ink-dim);
  letter-spacing: -0.03em;
  opacity: 0.26;
  pointer-events: none;
}
.pe-card__thumb:has(img)::before { display: none; }

.pe-card__cut {
  position: absolute;
  top: 0.55rem; left: 0.55rem;
  padding: 0.22rem 0.5rem;
  background: var(--pe-cut);
  color: var(--pe-ink-inv);
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  border-radius: var(--pe-radius);
  font-weight: 700;
}
.pe-card__mood {
  position: absolute;
  bottom: 0.55rem; left: 0.55rem;
  padding: 0.2rem 0.5rem;
  background: rgba(12, 10, 20, 0.72);
  backdrop-filter: blur(4px);
  color: var(--pe-ink);
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--pe-line-strong);
  border-radius: var(--pe-radius);
}

.pe-card__body { padding: 0.8rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; min-height: 140px; }
.pe-card__k {
  font-family: var(--pe-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
}
.pe-card__t {
  font-family: var(--pe-display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.22;
  color: var(--pe-ink);
  border-bottom: none;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.pe-card__t:hover { color: var(--pe-accent); }

.pe-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--pe-line);
}
.pe-card__price {
  font-family: var(--pe-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--pe-accent);
  display: flex; align-items: baseline; gap: 0.35rem;
}
.pe-card__price small {
  text-decoration: line-through;
  color: var(--pe-ink-dim);
  font-size: 0.72rem;
  font-weight: 400;
}
.pe-card__cue {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.36rem 0.7rem 0.36rem 0.55rem;
  background: var(--pe-accent-soft);
  color: var(--pe-accent);
  border: 1px solid rgba(154, 122, 255, 0.35);
  border-radius: var(--pe-radius);
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pe-card__cue:hover { background: var(--pe-accent); color: var(--pe-ink-inv); border-color: var(--pe-accent); }
.pe-card__cue[data-queued="true"] {
  background: transparent;
  color: var(--pe-ink-muted);
  border-color: var(--pe-line-strong);
}

/* =========================================================================
   EDITORIAL ESSAY — two long-form home sections (why seven nights / bench)
   ========================================================================= */

.pe-essay {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  padding: 3rem 0;
  border-top: 1px solid var(--pe-line);
  align-items: start;
}
.pe-essay + .pe-essay { border-top: 1px solid var(--pe-line); }
.pe-essay--flip .pe-essay__media { order: 2; }
.pe-essay--flip .pe-essay__body  { order: 1; }

.pe-essay__media {
  position: sticky;
  top: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pe-essay__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pe-radius);
  filter: saturate(0.9) contrast(1.04);
}
.pe-essay__cap {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--pe-ink-dim);
  line-height: 1.4;
}

.pe-essay__body { max-width: 62ch; }
.pe-essay__k {
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pe-ink-muted);
}
.pe-essay__t {
  margin-top: 0.4rem;
  margin-bottom: 1.2rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}
.pe-essay__lede {
  font-family: var(--pe-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--pe-ink);
  margin: 0 0 1.2rem;
}
.pe-essay__body p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--pe-ink-muted);
  margin: 0 0 1.1rem;
}
.pe-essay__pull {
  margin: 1.4rem 0;
  padding: 1rem 0 1rem 1.2rem;
  border-left: 2px solid var(--pe-accent);
  font-family: var(--pe-display);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--pe-ink);
  letter-spacing: -0.01em;
}
.pe-essay__kicker {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pe-line);
  font-family: var(--pe-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--pe-ink-dim) !important;
  line-height: 1.6;
}

/* Sub-heading inside an essay body. Small, accent-dotted. */
.pe-essay__h {
  font-family: var(--pe-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pe-ink);
  margin: 1.4rem 0 0.5rem;
  padding-left: 0.9rem;
  position: relative;
  line-height: 1.3;
}
.pe-essay__h::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pe-accent);
  box-shadow: 0 0 0 3px rgba(154, 122, 255, 0.22);
}
.pe-essay__body em {
  color: var(--pe-ink);
  font-style: normal;
  font-weight: 500;
  border-bottom: 1px dotted var(--pe-line-strong);
}

/* Mood ladder for the "tonight's play" essay. Each row is a session slot
   with a mono key, a bold verdict, and concrete title examples. */
.pe-moods { list-style: none; padding: 0; margin: 0.6rem 0 1.2rem; display: grid; gap: 0; }
.pe-moods li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.6rem 1.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--pe-line);
  align-items: baseline;
}
.pe-moods li:last-child { border-bottom: 1px solid var(--pe-line); }
.pe-moods__k {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pe-accent);
  grid-row: span 2;
  align-self: start;
  padding-top: 0.3rem;
}
.pe-moods li b {
  font-family: var(--pe-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pe-ink);
  letter-spacing: -0.01em;
}
.pe-moods li p {
  margin: 0.3rem 0 0;
  color: var(--pe-ink-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  grid-column: 2;
}
@media (max-width: 600px) {
  .pe-moods li { grid-template-columns: 1fr; }
  .pe-moods__k { grid-row: auto; }
  .pe-moods li p { grid-column: 1; }
}

/* Numbered "how a copy lands" path */
.pe-path { list-style: none; padding: 0; margin: 0.6rem 0 1.2rem; display: grid; gap: 0; }
.pe-path li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--pe-line);
}
.pe-path li:last-child { border-bottom: 1px solid var(--pe-line); }
.pe-path__n {
  font-family: var(--pe-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pe-accent);
  letter-spacing: 0.02em;
  line-height: 1;
}
.pe-path li h3 {
  font-family: var(--pe-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pe-ink);
  margin: 0 0 0.3rem;
}
.pe-path li p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--pe-ink-muted);
}

@media (max-width: 820px) {
  .pe-essay { grid-template-columns: 1fr; padding: 2rem 0; }
  .pe-essay__media { position: static; }
  .pe-essay__media img { aspect-ratio: 16 / 10; }
  .pe-essay--flip .pe-essay__media { order: 0; }
  .pe-essay--flip .pe-essay__body  { order: 1; }
}

/* =========================================================================
   TIERS — named grading tiers on /condition/.
   Replaces the A/B/C/D letter-card pattern. No letter codes, named tiers
   with 4-cell meter bars. Vertical stepper layout.
   ========================================================================= */

.pe-tiers { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; counter-reset: tier; }
.pe-tiers__i {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--pe-line);
}
.pe-tiers__i:last-child { border-bottom: 1px solid var(--pe-line); }
.pe-tiers__no {
  font-family: var(--pe-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pe-accent);
  letter-spacing: 0.02em;
}
.pe-tiers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.pe-tiers__name {
  font-family: var(--pe-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--pe-ink);
}
.pe-tiers__meter { display: inline-flex; gap: 3px; }
.pe-tiers__meter i {
  width: 22px; height: 6px;
  background: var(--pe-line-strong);
  border-radius: 1px;
}
.pe-tiers__meter i.is-on { background: var(--pe-accent); }
.pe-tiers__short {
  margin: 0 0 0.4rem;
  font-family: var(--pe-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--pe-accent);
}
.pe-tiers__note {
  margin: 0 0 0.5rem;
  color: var(--pe-ink-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.pe-tiers__bench {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
}

@media (max-width: 600px) {
  .pe-tiers__i { grid-template-columns: 44px 1fr; gap: 0.8rem; }
  .pe-tiers__head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* =========================================================================
   EDITORIAL MAGAZINE HEADER — two-column page head used by static and
   sessions renderers. Left column carries a "mastheadlet" with issue no,
   published date, read-time, contact anchors. Right column holds the
   eyebrow / h1 / lede. No more lonely-left-column feel on subpages.
   ========================================================================= */

.pe-ed--mag {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  padding-top: 0.6rem;
}
.pe-ed__rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 1rem;
}
.pe-ed__rail-no {
  font-family: var(--pe-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pe-accent);
}
.pe-ed__rail-no::before {
  content: "№ ";
  font-size: 1rem;
  color: var(--pe-ink-dim);
  letter-spacing: 0;
  vertical-align: 0.4em;
  margin-right: 0.25rem;
}
.pe-ed__rail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.8rem;
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  border-top: 1px solid var(--pe-line);
  padding-top: 0.8rem;
}
.pe-ed__rail-meta dt { color: var(--pe-ink-dim); min-width: 0; }
.pe-ed__rail-meta dd {
  margin: 0;
  color: var(--pe-ink);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pe-ed__rail-meta dd a { color: var(--pe-ink); border-bottom: 1px dotted var(--pe-line-strong); }
.pe-ed__rail-meta dd a:hover { color: var(--pe-accent); border-bottom-color: var(--pe-accent); }
.pe-ed__rail-nav {
  border-top: 1px solid var(--pe-line);
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pe-ed__rail-nav-k {
  font-family: var(--pe-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  margin-bottom: 0.2rem;
}
.pe-ed__rail-nav a {
  font-size: 0.86rem;
  color: var(--pe-ink);
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px dotted var(--pe-line-strong);
  padding-bottom: 0.15rem;
  display: inline-block;
}
.pe-ed__rail-nav a:hover { border-bottom-color: var(--pe-accent); color: var(--pe-accent); }
.pe-ed__rail-glyph {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(154, 122, 255, 0.22), rgba(255, 92, 138, 0.15));
  border: 1px solid var(--pe-line-strong);
  display: grid;
  place-items: center;
  color: var(--pe-accent);
  align-self: flex-start;
}
.pe-ed__rail-glyph svg { width: 28px; height: 28px; }

.pe-ed__main > .pe-ed__k,
.pe-ed__main > .pe-ed__t,
.pe-ed__main > .pe-ed__lede { margin-left: 0; margin-right: 0; }

@media (max-width: 820px) {
  .pe-ed--mag { grid-template-columns: 1fr; }
  .pe-ed__rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.8rem 1.2rem; padding: 0.9rem 1rem; }
  .pe-ed__rail-no { font-size: 1.6rem; }
  .pe-ed__rail-meta { border-top: 0; padding-top: 0; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; }
  .pe-ed__rail-nav { border-top: 0; padding-top: 0; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
  .pe-ed__rail-glyph { width: 40px; height: 40px; }
  .pe-ed__rail-glyph svg { width: 22px; height: 22px; }
}

/* Footer contact block — stacked rows with hairline icon + value. */
.pe-foot-addr {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--pe-line);
  border-bottom: 1px solid var(--pe-line);
}
.pe-foot-addr__row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-family: var(--pe-mono);
  font-size: 0.78rem;
  color: var(--pe-ink);
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.pe-foot-addr__row svg { margin-top: 0.22rem; color: var(--pe-accent); }
.pe-foot-addr__row a { color: var(--pe-ink); text-decoration: none; border-bottom: 1px dotted var(--pe-line-strong); }
.pe-foot-addr__row a:hover { color: var(--pe-accent); border-bottom-color: var(--pe-accent); }

/* =========================================================================
   FIGURE / SPLIT — editorial imagery blocks for static pages.
   `figure` renders a full-width hero with optional caption.
   `split` renders a two-column media/body strip mid-article.
   ========================================================================= */

.pe-fig {
  margin: 1.4rem 0 1.8rem;
  padding: 0;
}
.pe-fig img {
  width: 100%;
  border-radius: var(--pe-radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
  border: 1px solid var(--pe-line);
}
.pe-fig--tall img { aspect-ratio: 4 / 5; }
.pe-fig--wide img { aspect-ratio: 21 / 9; }
.pe-fig figcaption {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--pe-ink-dim);
  margin-top: 0.5rem;
  line-height: 1.45;
}

.pe-split {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 1.6rem;
  margin: 1.6rem 0 1.8rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--pe-line);
  border-bottom: 1px solid var(--pe-line);
  align-items: start;
}
.pe-split--flip .pe-split__media { order: 2; }
.pe-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--pe-radius);
  border: 1px solid var(--pe-line);
}
.pe-split__cap {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--pe-ink-dim);
  line-height: 1.45;
}
.pe-split__body > :first-child { margin-top: 0; }
.pe-split__body h3 {
  font-family: var(--pe-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.pe-split__body p { margin: 0 0 0.9rem; color: var(--pe-ink-muted); line-height: 1.7; }

@media (max-width: 720px) {
  .pe-split { grid-template-columns: 1fr; }
  .pe-split--flip .pe-split__media { order: 0; }
  .pe-split__media img { aspect-ratio: 16 / 10; }
}

/* =========================================================================
   FOOTER — extend thin strip with a trust block + payment chips row.
   Payment SVGs reused from prev site /img/pay/, here displayed as dark
   chips in a vertical-stacked block rather than a horizontal logo parade.
   ========================================================================= */

.pe-foot-wrap {
  /* Match .pe-main geometry exactly so the footer column lines up with
     the article column above it: same rail offset on the left, same
     lateral padding, same content width cap. A previous version used
     `margin: 3.2rem auto 0` which centred the footer in the viewport
     and left the content column shifted ~36px against the main column. */
  margin: 3.2rem 0 0 var(--pe-rail-w);
  padding: 2rem 2.4rem 0;
  border-top: 1px solid var(--pe-line);
}
.pe-foot-wrap > .pe-col {
  /* Lock footer column to the same --pe-col-max as the article column
     above it so the two left edges align and the footer reads as part
     of the same container, not a wider band bolted on underneath. */
  max-width: var(--pe-col-max);
}
@media (max-width: 960px) {
  .pe-foot-wrap {
    margin-left: 0;
    padding: 2rem 1.1rem 0;
  }
}
.pe-foot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding: 1rem 0 1.4rem;
  align-items: start;
}
.pe-foot-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.pe-foot-cell > *:last-child { margin-top: auto; }
.pe-foot-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.pe-foot-nav li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: baseline;
  font-size: 0.84rem;
  line-height: 1.3;
  min-width: 0;
}
.pe-foot-nav li a {
  color: var(--pe-ink);
  border-bottom: 1px dotted var(--pe-line-strong);
  padding-bottom: 0.1rem;
}
.pe-foot-nav li a:hover { color: var(--pe-accent); border-bottom-color: var(--pe-accent); }
.pe-foot-nav li span {
  font-family: var(--pe-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Trust strip — three inline notes sitting below the columns, not inside
   them. Matches the width of the grid so every cell remains balanced. */
.pe-trust-strip {
  list-style: none;
  margin: 0;
  padding: 1.2rem 0 0.4rem;
  border-top: 1px solid var(--pe-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 2rem;
}
.pe-trust-strip__i {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  align-items: start;
  color: var(--pe-ink-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  min-width: 0;
}
.pe-trust-strip__i svg { width: 16px; height: 16px; stroke: var(--pe-accent); margin-top: 0.15rem; }
.pe-trust-strip__i b { color: var(--pe-ink); font-weight: 600; display: block; margin-bottom: 0.1rem; }
@media (max-width: 720px) {
  .pe-trust-strip { grid-template-columns: 1fr; gap: 0.8rem; }
}
.pe-foot-col__k {
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pe-ink-dim);
  margin-bottom: 0.6rem;
  display: block;
}
.pe-foot-col__t {
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pe-ink);
  margin: 0 0 0.5rem;
}
/* Footer brand lockup — logo mark + wordmark on a shared baseline, so the
   footer brand-card echoes the rail brand without the tiny 40px square. */
.pe-foot-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.pe-foot-brand__mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  display: block;
}
.pe-foot-brand__t { margin: 0; font-size: 1.15rem; letter-spacing: 0.02em; }

/* =========================================================================
   GIFT BANNER — compact "welcome present for new customers" block reused
   at the foot of cloaked ad-landing pages (/quest/persona-4/, /rush/) and
   as a hero card inside /lanternkeep/giftmark/. Two-column on desktop,
   stack on mobile. No promo-banner vibes — editorial, same ink palette.
   ========================================================================= */
.pe-gift {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: stretch;
  margin: 2.4rem 0;
  padding: 1.2rem;
  background: linear-gradient(180deg, var(--pe-paper-soft) 0%, var(--pe-paper) 100%);
  border: 1px solid var(--pe-line);
  border-radius: calc(var(--pe-radius) + 4px);
  position: relative;
  overflow: hidden;
}
.pe-gift__media {
  position: relative;
  border-radius: var(--pe-radius);
  overflow: hidden;
  min-height: 220px;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
}
.pe-gift__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pe-gift__ribbon {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  font-family: var(--pe-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: var(--pe-radius-pill);
  background: rgba(8, 8, 14, 0.72);
  color: var(--pe-accent);
  border: 1px solid var(--pe-accent-soft);
  backdrop-filter: blur(4px);
}
.pe-gift__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.3rem 0.3rem 0.5rem;
  min-width: 0;
}
.pe-gift__k {
  font-family: var(--pe-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-accent);
}
.pe-gift__t {
  font-family: var(--pe-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--pe-ink);
}
.pe-gift__d {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--pe-ink-muted);
  margin: 0;
}
.pe-gift__list {
  list-style: none;
  margin: 0.3rem 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.pe-gift__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  align-items: baseline;
  min-width: 0;
}
.pe-gift__list p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--pe-ink); }
.pe-gift__n {
  font-family: var(--pe-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pe-accent);
  letter-spacing: 0.06em;
}
.pe-gift .pe-btn { align-self: flex-start; margin-top: 0.4rem; }

@media (max-width: 720px) {
  .pe-gift { grid-template-columns: 1fr; padding: 1rem; }
  .pe-gift__media { min-height: 180px; }
}

/* =========================================================================
   GIFTMARK (/lanternkeep/giftmark/) — dedicated gift + discount landing.
   Editorial scale, not promotional. Hero / numbered runbook / prose cards /
   FAQ dl / openers row — each block visually distinct so the page stops
   feeling like one long wall of text.
   ========================================================================= */
.pe-gm__hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.8rem 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pe-line);
}
.pe-gm__k {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pe-accent);
}
.pe-gm__t {
  font-family: var(--pe-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
  color: var(--pe-ink);
  max-width: 22ch;
}
.pe-gm__lede {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--pe-ink-muted);
  max-width: 62ch;
  margin: 0;
}
.pe-gm__lede strong { color: var(--pe-ink); font-weight: 600; }
.pe-gm__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  padding: 0;
}
.pe-gm__stats > div {
  padding: 0.9rem 0.9rem 1rem;
  background: var(--pe-paper-soft);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
}
.pe-gm__stats dt {
  font-family: var(--pe-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pe-ink-muted);
  margin-bottom: 0.3rem;
}
.pe-gm__stats dd {
  font-family: var(--pe-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pe-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
@media (max-width: 720px) {
  .pe-gm__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pe-gm__sec {
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--pe-line);
}
.pe-gm__sec:first-of-type { padding-top: 0; border-top: 0; }
.pe-gm__sec-hd { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.6rem; max-width: 70ch; }
.pe-gm__sec-k {
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-accent);
}
.pe-gm__sec-t {
  font-family: var(--pe-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--pe-ink);
}
.pe-gm__sec-p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--pe-ink-muted);
  margin: 0.2rem 0 0;
  max-width: 62ch;
}

/* Three prose cards side by side. */
.pe-gm__grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 820px) { .pe-gm__grid3 { grid-template-columns: 1fr; } }
.pe-gm__card {
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pe-gm__card h3 {
  font-family: var(--pe-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--pe-ink);
}
.pe-gm__card p {
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--pe-ink-muted);
  margin: 0;
}

/* Numbered runbook steps. */
.pe-gm__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.pe-gm__steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
}
.pe-gm__step-k {
  font-family: var(--pe-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pe-accent);
  line-height: 1;
  padding-top: 0.15rem;
}
.pe-gm__steps h3 {
  font-family: var(--pe-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: var(--pe-ink);
}
.pe-gm__steps p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--pe-ink-muted);
}

/* FAQ — definition list with a proper two-column split on desktop. */
.pe-gm__faq {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.pe-gm__faq > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--pe-line);
}
.pe-gm__faq > div:last-child { border-bottom: 0; }
.pe-gm__faq dt {
  font-family: var(--pe-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pe-ink);
  line-height: 1.35;
  margin: 0;
}
.pe-gm__faq dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--pe-ink-muted);
}
.pe-gm__faq dd em { color: var(--pe-ink); font-style: italic; }
@media (max-width: 720px) {
  .pe-gm__faq > div { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Openers — four real SKUs as compact image cards. */
.pe-gm__picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (max-width: 920px) { .pe-gm__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pe-gm__picks { grid-template-columns: 1fr; } }
.pe-gm__pick {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pe-gm__pick:hover { border-color: var(--pe-accent-soft); transform: translateY(-2px); }
.pe-gm__pick-media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--pe-paper-soft);
  border-radius: calc(var(--pe-radius) - 2px);
  overflow: hidden;
  border: 1px solid var(--pe-line);
}
.pe-gm__pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-gm__pick-initial {
  font-family: var(--pe-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--pe-accent);
}
.pe-gm__pick-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 0.2rem 0.2rem; }
.pe-gm__pick-k {
  font-family: var(--pe-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pe-ink-muted);
}
.pe-gm__pick-t {
  font-family: var(--pe-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pe-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pe-gm__pick-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.25rem;
}
.pe-gm__pick-price {
  font-family: var(--pe-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pe-accent);
  letter-spacing: -0.01em;
}
.pe-gm__pick-len {
  font-family: var(--pe-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--pe-ink-muted);
}

/* Closing vocab note — quiet prose, no heading. */
.pe-gm__note {
  margin: 3rem 0 2rem;
  padding: 1.5rem 1.6rem;
  background: var(--pe-paper-soft);
  border-left: 2px solid var(--pe-accent);
  border-radius: 0 var(--pe-radius) var(--pe-radius) 0;
  display: grid;
  gap: 0.9rem;
}
.pe-gm__note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--pe-ink-muted);
  max-width: 72ch;
}
.pe-gm__note em { font-style: italic; color: var(--pe-ink); }

.pe-foot-col__n {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--pe-ink-muted);
  margin: 0 0 0.8rem;
}

.pe-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.pe-pay__chip {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--pe-paper);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  font-family: var(--pe-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pe-ink-muted);
}
.pe-pay__chip img {
  width: 22px; height: 22px;
  object-fit: contain;
  filter: saturate(0) brightness(1.4) contrast(0.85);
  opacity: 0.9;
}
.pe-pay__chip:hover { border-color: var(--pe-line-strong); color: var(--pe-ink); }

.pe-trust {
  display: grid;
  gap: 0.5rem;
}
.pe-trust__i {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--pe-line);
  color: var(--pe-ink-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
.pe-trust__i:last-child { border-bottom: 0; }
.pe-trust__i svg { width: 16px; height: 16px; stroke: var(--pe-accent); margin-top: 2px; }
.pe-trust__i b { color: var(--pe-ink); font-weight: 600; display: block; }

@media (max-width: 720px) {
  .pe-foot-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .pe-pay { grid-template-columns: repeat(3, 1fr); }
}