/*
Theme Name:  DPL
Theme URI:   https://thedigitalplaylab.com
Author:      The Digital Play Lab
Description: Custom theme for The Digital Play Lab. Deep ground so box art glows rather than sits flat, CRT amber as the primary accent, platform colour-coding for structure you can read at a glance, and white cards so the objects themselves carry the colour.
Version:     0.5.1
Requires PHP: 8.0
Text Domain: dpl
*/

/* ═══════════════════════════════════════════════════════════════════
   TOKENS
   Single-theme, deliberately dark. Cover art is saturated and mostly
   mid-to-dark: on light grey it reads flat, on near-black it glows.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ground */
  --bg:        #0B1113;   /* page, deep with a cool cast */
  --bg-deep:   #070C0D;   /* utility bar, footer */
  --panel:     #141B1E;   /* raised panels, sub-nav */
  --hair:      #222C30;   /* borders */
  --hair-soft: #1A2225;

  /* type */
  --on-dark:   #E8EDEE;
  --dim:       #8A9699;
  --faint:     #6B7679;

  /* content cards */
  --card:      #FFFFFF;
  --on-card:   #14181A;
  --on-card-2: #6C7679;
  --card-hair: #E4E7E7;

  /* accents */
  --amber:     #FFA31A;   /* CRT phosphor / arcade marquee - the primary */
  --amber-ink: #101010;   /* text on amber */
  --cyan:      #3FD0E0;   /* interactive, links */
  --cyan-dim:  #1F7A85;

  /* platform identity */
  --ps:  #0070D1;
  --xb:  #107C10;
  --nin: #E60012;
  --pc:  #8B5CF6;

  /* semantic - separate from accents, never decorative */
  --ok:   #3FBF7F;
  --warn: #E0A33A;
  --bad:  #E0614F;

  --f-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --measure: 68ch;
  --wrap:    2200px;
  --wrap-narrow: 74ch;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;   --s-8:4.5rem;
}

/* ── Light mode. Dark is the brand default; this is the opt-in,
      toggled from the utility bar and remembered in localStorage. ── */
:root[data-theme="light"] {
  --bg:        #F7F6F3;
  --bg-deep:   #ECE9E3;
  --panel:     #FFFFFF;
  --hair:      #D8D3CA;
  --hair-soft: #E7E3DB;

  --on-dark:   #14181A;   /* name kept so components need no changes */
  --dim:       #55605F;
  --faint:     #79837F;

  --card:      #FFFFFF;
  --on-card:   #14181A;
  --on-card-2: #6C7679;
  --card-hair: #E4E7E7;

  --amber:     #B4600A;   /* darkened so it passes contrast on light */
  --amber-ink: #FFFFFF;
  --cyan:      #0D6470;
  --cyan-dim:  #0A525C;

  /* The chrome stays dark and coloured in BOTH modes. Light mode changes
     the reading surface, not the brand furniture - otherwise the page goes
     colourless, which is exactly what went wrong the first time. */
  --chrome-1:  #10171A;   /* utility bar */
  --chrome-2:  #17211F;   /* main header */
}

:root {
  --chrome-1: #05090A;
  --chrome-2: #0B1113;
}

/* ═══ RESET ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--on-dark);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ═══ TYPOGRAPHY ══════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.13;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}
h1 { font-size: clamp(2rem,5vw,3.2rem); letter-spacing: -.038em; line-height: 1.04; }
h2 { font-size: clamp(1.35rem,3vw,1.9rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--cyan); text-underline-offset: 2px; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
strong, b { font-weight: 700; }

blockquote {
  margin: var(--s-5) 0; padding-left: var(--s-4);
  border-left: 3px solid var(--amber);
  font-size: 1.14rem; color: var(--on-dark);
}
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-6) 0; }
code, pre { font-family: var(--f-mono); font-size: .88em; }
code { background: var(--panel); color: var(--cyan); padding: .1em .36em; }

/* The signature: every fact about an object is set in mono */
.meta-line {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.eyebrow {
  font-family: var(--f-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}

/* ═══ LAYOUT ══════════════════════════════════════════════════════ */
.wrap        { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem,3vw,3.5rem); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: clamp(1rem,3vw,3.5rem); }
.site-main   { padding-bottom: var(--s-8); min-height: 50vh; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ═══ HEADER, three solid bars ═══════════════════════════════════ */
.dpl-header { position: sticky; top: 0; z-index: 100; }

/* tier 1, solid near-black utility bar */
.dpl-utility { background: var(--chrome-1); color: #C8D0D2; }
.dpl-utility__inner {
  max-width: var(--wrap); margin-inline: auto; padding: .4rem clamp(1rem,3vw,3.5rem);
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--f-display); font-size: .72rem; font-weight: 600; color: #98A3A5;
}
.dpl-utility__right { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.dpl-utility a { color: #98A3A5; text-decoration: none; }
.dpl-utility a:hover { color: var(--amber); }

/* rotating headline, replaces the ticker */
.dpl-rotator { position: relative; height: 1.15rem; overflow: hidden; flex: 1 1 auto; min-width: 0; }
.dpl-rotator__item {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--f-display); font-size: .72rem; font-weight: 600; color: #98A3A5;
}
.dpl-rotator__item.is-on { opacity: 1; }
.dpl-rotator__item b { color: var(--amber); font-weight: 700; }
.dpl-rotator__item a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .dpl-rotator { height: auto; }
  .dpl-rotator__item { position: static; opacity: 1; transition: none; }
  .dpl-rotator__item + .dpl-rotator__item { display: none; }
}

/* tier 2, solid dark main bar */
.dpl-header__bar { background: var(--chrome-2); }
.dpl-header__inner {
  display: flex; align-items: center; gap: clamp(1rem,3vw,2.2rem);
  max-width: var(--wrap); margin-inline: auto;
  padding: .8rem clamp(1rem,3vw,3.5rem);
}
.dpl-logo {
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .1em; line-height: 1.22; text-transform: uppercase;
  color: var(--amber); text-decoration: none;
  border: 1.5px solid var(--amber); padding: .28rem .42rem;
  white-space: nowrap; flex-shrink: 0;
}
.dpl-logo img { max-height: 42px; width: auto; }
.dpl-logo:has(img) { border: 0; padding: 0; }

.dpl-nav ul { display: flex; gap: clamp(.8rem,1.8vw,1.5rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.dpl-nav a {
  font-family: var(--f-display); font-size: .88rem; font-weight: 700;
  letter-spacing: -.012em; color: #E8EDEE; text-decoration: none;
  padding-block: .35rem; display: inline-block; border-bottom: 2px solid transparent;
}
.dpl-nav a:hover { color: var(--amber); }
.dpl-nav .current-menu-item > a,
.dpl-nav .current_page_item > a { color: var(--amber); border-bottom-color: var(--amber); }

/* search + cart share the nav's face, not the mono */
.dpl-actions {
  margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem,1.6vw,1.1rem);
  font-family: var(--f-display); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.dpl-actions a { color: #A8B2B4; text-decoration: none; }
.dpl-actions a:hover { color: var(--amber); }
.dpl-cart__count {
  display: inline-block; min-width: 1.4em; text-align: center;
  background: var(--amber); color: var(--amber-ink); padding: .05em .38em; margin-left: .25em;
  font-weight: 700; font-size: .78em;
}
.dpl-cart--empty .dpl-cart__count { background: #2A3437; color: #8A9699; }

/* tier 3. SOLID amber section bar */
.dpl-platforms { background: var(--amber); overflow-x: auto; }
.dpl-platforms__inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem,3vw,3.5rem);
  display: flex; gap: 0;
}
.dpl-platforms a {
  font-family: var(--f-display); font-size: .76rem; font-weight: 700;
  color: var(--amber-ink); opacity: .86; text-decoration: none;
  padding: .42rem .85rem; white-space: nowrap; border-bottom: 3px solid transparent;
}
.dpl-platforms a:hover { color: var(--amber-ink); opacity: 1; background: rgba(0,0,0,.09); }
.dpl-platforms a.is-ps  { border-bottom-color: var(--ps); }
.dpl-platforms a.is-xb  { border-bottom-color: var(--xb); }
.dpl-platforms a.is-nin { border-bottom-color: var(--nin); }
.dpl-platforms a.is-pc  { border-bottom-color: var(--pc); }
.dpl-platforms a span { opacity: .55; font-weight: 600; }

/* ═══ MEGA MENU ═══════════════════════════════════════════════════ */
/* THE HOVER GAP, and why this is built the way it is.
   The panel is positioned against .dpl-navwrap (the whole header bar), not
   against its own <li>, because it has to span the full header width. That
   means its top edge sits at the bar's bottom, while the <li> ends higher up,
   wherever the flex row centred it. Between the two is dead space. Move the
   pointer down towards the panel, cross that dead space, and :hover on the
   <li> goes false and the panel vanishes before you ever reach it.

   Two fixes, both needed:
   1. Stretch the nav items to the full height of the bar's content box, so the
      <li> is as tall as it can be.
   2. Bridge the remaining gap (the bar's own padding) with transparent
      padding on the panel, and paint the visible panel on a ::before inset by
      exactly that amount. The bridge is hoverable, the panel looks unchanged.

   Once the pointer is inside the panel the <li> stays hovered on its own,
   since :hover propagates to ancestors regardless of positioning. */
:root { --mega-gap: .8rem; }   /* == .dpl-header__inner vertical padding */

.dpl-mega {
  display: none; position: absolute; left: 0; right: 0;
  top: calc(100% - var(--mega-gap));
  padding-top: var(--mega-gap);        /* the bridge, transparent but hoverable */
  z-index: 300;
}
.dpl-mega::before {
  content: ''; position: absolute; inset: var(--mega-gap) 0 0 0; z-index: -1;
  background: var(--chrome-2); border-top: 3px solid var(--amber);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
/* Specificity matters here: `.dpl-nav li` (0,1,1) beats a bare `.dpl-has-mega`
   (0,1,0), which left the panel trapped inside a 96px list item instead of
   spanning the header. Qualify it so it wins. */
.dpl-nav li.dpl-has-mega { position: static; }
.dpl-navwrap { position: relative; }

/* Full-height nav items, so the pointer never leaves the trigger on its way
   down. Three steps, and all three are load-bearing: stretch the <nav> in the
   header's flex row, make the <nav> itself a flex container so the <ul> is a
   flex item that can stretch too (a block-level <nav> leaves the list at its
   own content height, which was the whole reason the first attempt left a
   10px gap), then stretch the <li>s inside the <ul>. */
.dpl-nav { align-self: stretch; display: flex; }
.dpl-nav > ul { align-items: stretch; flex: 1; }
.dpl-nav li { display: flex; align-items: center; }

.dpl-navwrap li:hover > .dpl-mega,
.dpl-navwrap li:focus-within > .dpl-mega { display: block; }
/* Columns are a FIXED width, not 1fr. auto-fit with 1fr stretched three short
   link lists across 1320px, so "Games" sat alone in a 430px column with a
   quarter of the screen of dead air beside it. Link lists want to be link
   width; the leftover space gets a feature panel instead of being shared out. */
.dpl-mega__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 1.4rem clamp(1rem,3vw,3.5rem) 1.7rem;
  display: grid; grid-template-columns: repeat(auto-fill, 190px); gap: 0 2.2rem;
  justify-content: start; align-items: start;
}
/* Feature panel fills the remainder rather than leaving a hole.
   An explicit count, not auto-fill: mixing repeat(auto-fill,..) with a 1fr
   track makes the browser lay the feature out as just another 190px column,
   which is the hole this was meant to close. Every mega has three link
   columns, so say three. */
.dpl-mega__inner:has(.dpl-mega__feature) { grid-template-columns: repeat(3, 190px) 1fr; }
@media (max-width: 1100px) {
  .dpl-mega__inner:has(.dpl-mega__feature) { grid-template-columns: repeat(auto-fill, 190px); }
  .dpl-mega__feature { display: none; }
}
.dpl-mega__feature {
  justify-self: end; max-width: 320px; padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,.1);
}
.dpl-mega__feature h4 {
  font-family: var(--f-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin: 0 0 .5rem;
}
.dpl-mega__feature p { font-size: .84rem; line-height: 1.5; color: #A8B2B4; margin: 0 0 .7rem; max-width: none; }
.dpl-mega__feature .dpl-btn { font-size: .76rem; padding: .4rem .9rem; }
.dpl-mega__col h4 {
  font-family: var(--f-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
  margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.dpl-mega__col a {
  display: flex; justify-content: space-between; gap: .6rem;
  font-family: var(--f-display); font-size: .82rem; font-weight: 600;
  color: #C9D2D4; text-decoration: none; padding: .24rem 0; border: 0;
}
.dpl-mega__col a:hover { color: var(--amber); }
.dpl-mega__col a i { font-style: normal; opacity: .45; font-size: .74em; }
.dpl-mega__col a.is-ps  { box-shadow: inset 3px 0 0 var(--ps);  padding-left: .5rem; }
.dpl-mega__col a.is-xb  { box-shadow: inset 3px 0 0 var(--xb);  padding-left: .5rem; }
.dpl-mega__col a.is-nin { box-shadow: inset 3px 0 0 var(--nin); padding-left: .5rem; }
.dpl-mega__col a.is-pc  { box-shadow: inset 3px 0 0 var(--pc);  padding-left: .5rem; }
@media (max-width: 960px) {
  /* No gap to bridge on mobile: the panel drops inline under its link inside
     the burger drawer, so the bridge, the painted ::before and the flex row
     all have to be undone or the panel lands beside the link. */
  .dpl-mega { position: static; box-shadow: none; border-top: 0; padding-top: 0; }
  .dpl-mega::before { content: none; }
  .dpl-nav li { display: block; }
  .dpl-mega__inner { padding: .4rem 0 .8rem .8rem; grid-template-columns: 1fr; gap: .8rem; }
}

.dpl-burger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.dpl-burger span { display: block; width: 20px; height: 2px; background: var(--on-dark); margin: 4px 0; }

@media (max-width: 960px) {
  .dpl-burger { display: block; order: 3; margin-left: auto; }
  .dpl-actions { order: 2; margin-left: auto; }
  .dpl-nav { order: 4; flex-basis: 100%; display: none; padding-block: var(--s-3); border-top: 1px solid var(--hair); }
  .dpl-nav.is-open { display: block; }
  .dpl-nav ul { flex-direction: column; gap: .1rem; }
  .dpl-header__inner { flex-wrap: wrap; }
}

/* ═══ HERO + STAT STRIP ═══════════════════════════════════════════ */
.dpl-hero { padding-block: clamp(2.2rem,6vw,4rem) clamp(1.6rem,3vw,2.4rem); }
.dpl-hero__title {
  font-size: clamp(2rem,5.5vw,3.5rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.03; max-width: 19ch;
  margin: var(--s-3) 0 var(--s-4);
}
.dpl-hero__lede { font-size: clamp(1rem,1.8vw,1.15rem); color: var(--dim); max-width: 46ch; margin-bottom: var(--s-5); }
.dpl-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); max-width: none; margin: 0; }

.dpl-statbar { background: var(--bg-deep); border-block: 1px solid var(--hair); }
.dpl-statbar__inner { display: flex; flex-wrap: wrap; padding-inline: 0; max-width: var(--wrap); margin-inline: auto; }
.dpl-stat { flex: 1 1 8rem; padding: var(--s-4) clamp(1rem,3vw,3.5rem); border-right: 1px solid var(--hair); }
.dpl-stat:last-child { border-right: 0; }
.dpl-stat b {
  display: block; font-family: var(--f-display); font-size: clamp(1.4rem,3vw,1.9rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.dpl-stat span {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}

/* hero: copy beside the single most valuable object in the archive */
.dpl-hero__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0.9fr); gap: clamp(1.5rem,4vw,3rem); align-items: center; }
@media (max-width: 780px) { .dpl-hero__grid { grid-template-columns: 1fr; } }
.dpl-hero__object { margin: 0; background: var(--card); color: var(--on-card); }
.dpl-hero__object img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dpl-hero__object figcaption { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.dpl-hero__object strong { font-family: var(--f-display); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.dpl-hero__object .meta-line { color: var(--on-card-2); }

/* ═══ EDITORIAL ═══════════════════════════════════════════════════ */
.dpl-editorial { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px), 1fr)); gap: clamp(.7rem,1.4vw,1.1rem); }
.dpl-article { background: var(--card); color: var(--on-card); display: flex; flex-direction: column; }
.dpl-article__art { display: block; aspect-ratio: 16/9; background: var(--panel); overflow: hidden; }
.dpl-article__art img { width: 100%; height: 100%; object-fit: cover; }
.dpl-article__body { padding: .8rem .85rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.dpl-article__body .eyebrow { color: var(--cyan-dim); }
.dpl-article__title { font-family: var(--f-display); font-size: .98rem; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; margin: 0; }
.dpl-article__title a { color: var(--on-card); text-decoration: none; }
.dpl-article__title a:hover { color: var(--cyan-dim); }
.dpl-article__ex { font-size: .84rem; color: var(--on-card-2); margin: 0; }
.dpl-article .meta-line { color: var(--on-card-2); font-size: .6rem; }

/* ═══ RAIL, the workhorse component ══════════════════════════════ */
.dpl-rail { padding-block: var(--s-5); }
.dpl-rail__head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  border-left: 4px solid var(--amber); padding-left: .7rem; margin-bottom: var(--s-4);
}
.dpl-rail__head h2 { margin: 0; font-size: clamp(1rem,2.2vw,1.25rem); font-weight: 800; letter-spacing: -.02em; }
.dpl-rail__count { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.dpl-rail__more { margin-left: auto; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.dpl-rail--ps  .dpl-rail__head { border-left-color: var(--ps); }
.dpl-rail--xb  .dpl-rail__head { border-left-color: var(--xb); }
.dpl-rail--nin .dpl-rail__head { border-left-color: var(--nin); }
.dpl-rail--pc  .dpl-rail__head { border-left-color: var(--pc); }

/* ═══ OBJECT TILE, white card, art carries the colour ════════════ */
.dpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(128px,14vw,178px), 1fr));
  gap: clamp(.5rem,1vw,.8rem);
}
.dpl-tile {
  background: var(--card); color: var(--on-card);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .12s ease;
}
.dpl-tile:hover { transform: translateY(-2px); }
.dpl-tile__art { aspect-ratio: 3/4; background: var(--panel); overflow: hidden; }
.dpl-tile__art img { width: 100%; height: 100%; object-fit: cover; }
.dpl-tile__body { padding: .5rem .55rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.dpl-tile__name { font-family: var(--f-display); font-size: .78rem; font-weight: 700; line-height: 1.24; letter-spacing: -.012em; margin: 0; }
.dpl-tile__name a { color: var(--on-card); text-decoration: none; }
.dpl-tile__name a:hover { color: var(--cyan-dim); }
.dpl-tile__meta { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--on-card-2); }
.dpl-tile__price { font-family: var(--f-display); font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }

.dpl-chip {
  display: inline-block; font-family: var(--f-mono); font-size: .54rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .14rem .34rem;
  align-self: flex-start;
}
.dpl-chip--cib  { background: #E7F5EE; color: #1E7A4F; }
.dpl-chip--sale { background: #FFF1DC; color: #9A5A00; }
.dpl-chip--ps   { background: #E3F0FC; color: #05509B; }

/* ═══ BUTTONS ═════════════════════════════════════════════════════ */
.dpl-btn, .entry-content .wp-block-button__link {
  display: inline-block; font-family: var(--f-display); font-size: .85rem; font-weight: 700;
  padding: .65rem 1.2rem; background: var(--amber); color: var(--amber-ink);
  border: 1.5px solid var(--amber); text-decoration: none; cursor: pointer;
}
.dpl-btn:hover { background: transparent; color: var(--amber); }
.dpl-btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--hair); }
.dpl-btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.dpl-btn--sm { padding: .38rem .7rem; font-size: .74rem; margin-top: .15rem; }
/* inside a white tile the ghost button needs card colours, not page colours */
.dpl-tile .dpl-btn--ghost { color: var(--on-card); border-color: var(--card-hair); }
.dpl-tile .dpl-btn--ghost:hover { border-color: var(--amber); color: var(--amber-ink); background: var(--amber); }

/* ═══ ENTRY / ARTICLE ═════════════════════════════════════════════ */
.entry-header { margin-bottom: var(--s-6); padding-top: var(--s-6); }
.entry-title { margin-bottom: var(--s-3); }
.entry-content > * + * { margin-top: var(--s-4); }
.entry-content h2 { margin-top: var(--s-6); }
.entry-content h3 { margin-top: var(--s-5); }
.entry-content ul, .entry-content ol { max-width: var(--measure); padding-left: 1.2rem; }
.entry-content li + li { margin-top: .35rem; }
.entry-content a { text-decoration: underline; }
.entry-content img { margin-block: var(--s-4); }

.entry-content table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.entry-content th, .entry-content td {
  text-align: left; padding: .6rem .9rem .6rem 0;
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.entry-content th {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); border-bottom: 1px solid var(--hair);
}
.table-scroll { overflow-x: auto; }

/* ═══ FOOTER, sitemap grade, dark in both modes ══════════════════ */
.dpl-footer { background: var(--chrome-1); color: #C2CBCD; margin-top: var(--s-8); border-top: 4px solid var(--amber); }
.dpl-footer__top {
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,3fr);
  gap: clamp(1.5rem,4vw,3rem); padding-block: var(--s-6) var(--s-5);
}
@media (max-width: 820px) { .dpl-footer__top { grid-template-columns: 1fr; } }
.dpl-footer__brand h2 {
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.03em; color: #fff; margin: 0 0 .5rem;
}
.dpl-footer__brand p { font-size: .9rem; color: #8E9A9C; max-width: 34ch; }
.dpl-footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--s-5);
}
.dpl-footer__col h3 {
  font-family: var(--f-display); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 .55rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.dpl-footer__col ul { list-style: none; margin: 0; padding: 0; }
.dpl-footer__col a {
  display: block; font-family: var(--f-display); font-size: .84rem; font-weight: 500;
  color: #A7B1B3; text-decoration: none; padding: .2rem 0;
}
.dpl-footer__col a:hover { color: var(--amber); }
.dpl-footer__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-family: var(--f-display); font-size: .76rem; color: #7C8688;
}
.dpl-footer__legal p { margin: 0; }
.dpl-footer__rule { display: flex; height: 4px; }
.dpl-footer__rule i { flex: 1; }

/* ═══ WOOCOMMERCE ═════════════════════════════════════════════════ */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap: clamp(.5rem,1vw,.8rem); margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products li.product {
  background: var(--card); color: var(--on-card); padding: 0 0 .8rem;
  margin: 0; width: auto; float: none;
}
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-display); font-size: .85rem; font-weight: 700;
  padding: .6rem .6rem 0; margin: 0; color: var(--on-card);
}
.woocommerce ul.products li.product .price {
  font-family: var(--f-display); font-weight: 800; color: var(--on-card);
  display: block; padding: .3rem .6rem;
}
.woocommerce ul.products li.product .button { margin: .3rem .6rem 0; }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--amber); color: var(--amber-ink); border-radius: 0;
  font-family: var(--f-display); font-weight: 700;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: #E08F12; color: var(--amber-ink); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--amber); background: var(--panel); color: var(--on-dark); }
.woocommerce .woocommerce-breadcrumb { color: var(--dim); font-family: var(--f-mono); font-size: .7rem; }

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL DENSITY
   Front-page texture comes from many small dated items separated by
   hairline rules, not from big tiles. The Verge runs 74 story links and
   108 timestamps above the fold; that is the effect being chased here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ticker: live archive data, the way a market strip works ── */
.dpl-ticker { background: var(--bg-deep); border-bottom: 1px solid var(--hair); overflow: hidden; }
.dpl-ticker__track {
  display: flex; gap: 2.2rem; align-items: center; white-space: nowrap;
  font-family: var(--f-mono); font-size: .63rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
  padding: .4rem 0; width: max-content;
  animation: dpl-ticker 64s linear infinite;
}
.dpl-ticker:hover .dpl-ticker__track { animation-play-state: paused; }
.dpl-ticker b { color: var(--amber); font-weight: 500; }
.dpl-ticker .up { color: var(--ok); }
@keyframes dpl-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .dpl-ticker__track { animation: none; overflow-x: auto; }
}

/* ── theme toggle ── */
.dpl-toggle {
  background: none; border: 1px solid var(--hair); color: var(--dim);
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; padding: .2rem .5rem; cursor: pointer; line-height: 1.5;
}
.dpl-toggle:hover { color: var(--amber); border-color: var(--amber); }

/* ── dropdown sub-menus on the primary nav ── */
.dpl-nav li { position: relative; }
.dpl-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: -.6rem;
  min-width: 12rem; background: var(--panel); border: 1px solid var(--hair);
  padding: .35rem 0; z-index: 200; flex-direction: column; gap: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dpl-nav li:hover > .sub-menu,
.dpl-nav li:focus-within > .sub-menu { display: flex; }
.dpl-nav .sub-menu a {
  display: block; padding: .38rem .8rem; font-size: .78rem;
  font-weight: 600; border-bottom: 0; white-space: nowrap;
}
.dpl-nav .sub-menu a:hover { background: rgba(255,163,26,.1); color: var(--amber); }
.dpl-nav .menu-item-has-children > a::after { content: " ▾"; opacity: .5; font-size: .8em; }
@media (max-width: 960px) {
  .dpl-nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 .3rem .8rem; background: none; }
}

/* ── lead block: one big story + a dense column beside it ── */
.dpl-lead { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: clamp(1.2rem,3vw,2.4rem); padding-block: var(--s-5); }
@media (max-width: 860px) { .dpl-lead { grid-template-columns: 1fr; } }
.dpl-lead__main { display: flex; flex-direction: column; gap: .7rem; }
.dpl-lead__art { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--panel); }
.dpl-lead__art img { width: 100%; height: 100%; object-fit: cover; }
.dpl-lead__title { font-size: clamp(1.5rem,3.6vw,2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin: 0; }
.dpl-lead__title a { color: inherit; text-decoration: none; }
.dpl-lead__title a:hover { color: var(--amber); }
.dpl-lead__ex { color: var(--dim); font-size: .96rem; margin: 0; max-width: 52ch; }

/* ── dense dated list, the newspaper texture ── */
.dpl-list { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.dpl-list__item { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: .62rem 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.dpl-list__item h3 { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.28; letter-spacing: -.015em; }
.dpl-list__item h3 a { color: var(--on-dark); text-decoration: none; }
.dpl-list__item h3 a:hover { color: var(--amber); }
.dpl-list__kicker { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); display: block; margin-bottom: .18rem; }
.dpl-list__time { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .07em; color: var(--faint); white-space: nowrap; }
.dpl-list__thumb { width: 54px; aspect-ratio: 3/4; object-fit: cover; background: var(--panel); }

/* ── section band: label + rule, the Bloomberg spine ── */
.dpl-band { border-top: 2px solid var(--on-dark); padding-top: .5rem; margin-top: var(--s-6); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.dpl-band h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.dpl-band .more { margin-left: auto; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }

/* ── two-column page: 2/3 main, 1/3 rail ── */
.dpl-two { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: clamp(1.5rem,3.5vw,3rem); align-items: start; }
@media (max-width: 900px) { .dpl-two { grid-template-columns: 1fr; } }
.dpl-side { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: var(--s-5); }
@media (max-width: 900px) { .dpl-side { position: static; } }
.dpl-side__box { border: 1px solid var(--hair); }
.dpl-side__box > h3 {
  margin: 0; padding: .55rem .75rem; background: var(--chrome-2); color: #fff;
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.dpl-side__box > h3 .n { float: right; color: var(--amber); }
.dpl-side__body { padding: .7rem .75rem; }
.dpl-side .dpl-list { border-top: 0; }
.dpl-side .dpl-list__item { padding: .5rem 0; }
.dpl-side .dpl-list__item h3 { font-size: .84rem; }

/* section header with a colour block, used down the main column */
.dpl-sect { margin-top: var(--s-6); }
.dpl-sect__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: var(--s-4); }
.dpl-sect__tag {
  font-family: var(--f-display); font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .6rem; background: var(--amber); color: var(--amber-ink);
}
.dpl-sect__tag--ps  { background: var(--ps);  color: #fff; }
.dpl-sect__tag--lab { background: var(--cyan); }
.dpl-sect__tag--lab { color: #062124; }
.dpl-sect__tag--shop{ background: var(--nin); color: #fff; }
.dpl-sect__tag--miss{ background: var(--pc);  color: #fff; }
.dpl-sect__head h2 { margin: 0; font-size: clamp(1.1rem,2.4vw,1.4rem); font-weight: 800; letter-spacing: -.025em; }
.dpl-sect__head .more { margin-left: auto; font-family: var(--f-display); font-size: .74rem; font-weight: 700; color: var(--cyan); text-decoration: none; }
.dpl-sect__lede { color: var(--dim); max-width: 60ch; margin: -.4rem 0 var(--s-4); }

/* mission block */
.dpl-mission { border: 1px solid var(--hair); border-left: 4px solid var(--pc); padding: var(--s-5); background: var(--panel); }
.dpl-mission blockquote { border: 0; margin: 0 0 .8rem; padding: 0; font-size: 1.12rem; line-height: 1.45; }
.dpl-mission cite { display: block; font-family: var(--f-display); font-size: .76rem; font-weight: 700; color: var(--dim); font-style: normal; }

/* ── archive browse: filters, pills, pager ── */
.dpl-arch-head { padding-block: var(--s-6) var(--s-4); }
.dpl-arch-head h1 { margin: .3rem 0 .6rem; }

.dpl-filters { display: flex; flex-direction: column; gap: .5rem; padding: var(--s-4) 0; border-block: 1px solid var(--hair); margin-top: var(--s-4); }
.dpl-filters__row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dpl-filters__label { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); min-width: 4.5rem; }
.dpl-filters__search { display: flex; gap: .35rem; flex: 1 1 16rem; max-width: 26rem; }
.dpl-filters__search input {
  flex: 1; background: var(--panel); border: 1px solid var(--hair); color: var(--on-dark);
  padding: .45rem .6rem; font-size: .85rem;
}
.dpl-filters__search input:focus { outline: none; border-color: var(--amber); }
.dpl-filters__search .dpl-btn { padding: .45rem .9rem; font-size: .78rem; }

.dpl-pill {
  font-family: var(--f-display); font-size: .76rem; font-weight: 650;
  color: var(--dim); text-decoration: none; padding: .28rem .6rem;
  border: 1px solid var(--hair); white-space: nowrap;
}
.dpl-pill:hover { color: var(--on-dark); border-color: var(--dim); }
.dpl-pill i { font-style: normal; opacity: .5; font-size: .88em; }
.dpl-pill.is-on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.dpl-pill.is-ps.is-on  { background: var(--ps);  border-color: var(--ps);  color: #fff; }
.dpl-pill.is-xb.is-on  { background: var(--xb);  border-color: var(--xb);  color: #fff; }
.dpl-pill.is-nin.is-on { background: var(--nin); border-color: var(--nin); color: #fff; }
.dpl-pill.is-pc.is-on  { background: var(--pc);  border-color: var(--pc);  color: #fff; }

.dpl-tile__noart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; height: 100%; padding: .6rem; text-align: center;
  font-family: var(--f-display); font-size: .82rem; font-weight: 750; line-height: 1.2;
  color: var(--dim); background: var(--panel);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
}
.dpl-tile__noart i {
  font-style: normal; font-family: var(--f-mono); font-size: .5rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.dpl-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-6) 0; }
.dpl-pager__at { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; color: var(--faint); }

/* ── multi-column dense area ── */
.dpl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px), 1fr)); gap: clamp(1rem,2.5vw,2rem); padding-block: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══ SINGLE PRODUCT ══════════════════════════════════════════════ */
.dpl-crumbs { display: flex; gap: .4rem; padding: var(--s-4) 0 0; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.dpl-crumbs a { color: var(--dim); text-decoration: none; }
.dpl-crumbs a:hover { color: var(--amber); }

/* Media column is deliberately the smaller of the two, and capped in height.
   Box art is portrait: at half of a 1320px page that is a 640px-wide image
   roughly 800px tall, which pushed the price and the buy button below the
   fold on first load. Cap the height and letterbox inside the white card
   instead, so the whole offer is visible without scrolling. */
.dpl-product { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); padding-block: var(--s-5) var(--s-6); align-items: start; }
@media (max-width: 860px) { .dpl-product { grid-template-columns: 1fr; } }
.dpl-product__media { background: var(--card); position: sticky; top: 7rem; }
@media (max-width: 860px) { .dpl-product__media { position: static; } }
.dpl-product__media img {
  width: 100%; height: auto;
  max-height: min(66vh, 560px); object-fit: contain;
}
.dpl-product__media .dpl-tile__noart { aspect-ratio: 1; }
.dpl-product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px,1fr)); gap: 1px; background: var(--hair); margin-top: 1px; }
.dpl-product__thumbs img { width: 100%; }

.dpl-product__title { font-size: clamp(1.6rem,3.6vw,2.4rem); margin: .3rem 0 .5rem; }
.dpl-product__price { font-family: var(--f-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--amber); margin: .4rem 0 1rem; }
.dpl-product__price del { color: var(--faint); font-size: .6em; font-weight: 600; }

.dpl-assure { border: 1px solid var(--hair); border-left: 4px solid var(--amber); padding: var(--s-4); margin-top: var(--s-5); background: var(--panel); }
.dpl-assure h2 { font-size: .8rem; font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin: 0 0 .6rem; }
.dpl-assure ul { margin: 0; padding-left: 1.1rem; }
.dpl-assure li { font-size: .88rem; color: var(--dim); margin-bottom: .4rem; }
.dpl-assure li strong { color: var(--on-dark); font-weight: 700; }
.dpl-assure--archive { border-left-color: var(--ps); }
.dpl-assure--archive h2 { color: var(--ps); }

/* WooCommerce add-to-cart form inside our layout */
.dpl-product__buy form.cart { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 var(--s-4); }
.dpl-product__buy .quantity input { background: var(--panel); border: 1px solid var(--hair); color: var(--on-dark); padding: .55rem .4rem; width: 4.5rem; }
.dpl-product__buy button.button, .dpl-product__buy .single_add_to_cart_button {
  background: var(--amber); color: var(--amber-ink); border: 0; border-radius: 0;
  font-family: var(--f-display); font-weight: 700; padding: .65rem 1.3rem; cursor: pointer;
}
.dpl-product__buy button.button:hover { background: #E08F12; }

/* ═══ BUILT PAGES ═════════════════════════════════════════════════
   Every explanatory page uses page.php: a full-width masthead, then the
   same 2fr / 1fr split as the homepage.

   THE WIDTH RULE. On a wide monitor the old wrap-narrow layout put a 74ch
   column of text in the middle of the screen with nothing either side of it,
   which read as an unfinished page rather than a comfortable measure. The
   fix is not to stretch the paragraphs, it is to give the page a second
   column: main + rail together span the full --wrap, so the content lines up
   with the logo on the left and the cart on the right. Inside the main
   column the prose then fills its own width, because at 2/3 of 1320px that
   is already close to a sensible measure without any extra constraint.
   ══════════════════════════════════════════════════════════════════ */
.dpl-pagehead {
  border-bottom: 1px solid var(--hair);
  padding-block: var(--s-6) var(--s-5);
  margin-bottom: var(--s-6);
  background: var(--bg-deep);
}
.dpl-pagehead h1 { margin: .3rem 0 0; max-width: 22ch; }
.dpl-pagehead__lede {
  margin: var(--s-4) 0 0; max-width: 58ch;
  font-size: clamp(1.02rem,1.6vw,1.2rem); line-height: 1.5; color: var(--dim);
}
.dpl-page__art { margin: 0 0 var(--s-5); }
.dpl-page__art img { width: 100%; }

/* Prose fills the column it is given. The column is the measure. */
.entry-content--wide { font-size: 1.04rem; line-height: 1.68; }
.entry-content--wide p,
.entry-content--wide ul,
.entry-content--wide ol,
.entry-content--wide blockquote { max-width: none; }
.entry-content--wide > h2 {
  border-top: 2px solid var(--on-dark); padding-top: .6rem;
  margin-top: var(--s-7); font-size: clamp(1.25rem,2.6vw,1.6rem);
}
.entry-content--wide > h2:first-child { margin-top: 0; }
.entry-content--wide > h3 { color: var(--amber); font-size: 1.08rem; }
.entry-content--wide > ul { padding-left: 1.1rem; }
.entry-content--wide > ul > li::marker { color: var(--amber); }

/* Rail items can carry a line of explanation under the label. */
.dpl-list__note {
  margin: .12rem 0 0; font-size: .74rem; line-height: 1.4;
  color: var(--faint); max-width: none;
}

@media (max-width: 900px) {
  .dpl-pagehead { padding-block: var(--s-5) var(--s-4); margin-bottom: var(--s-5); }
  .dpl-pagehead h1 { max-width: none; }
}

/* ═══ SHOP FURNITURE ══════════════════════════════════════════════ */
/* Trust strip, above the grid rather than below it. The claim only does any
   work if it arrives before the decision, and at the bottom of the page it
   was arriving after. */
.dpl-trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair);
  margin-top: calc(var(--s-6) * -1 + var(--s-4));
}
.dpl-trust__item {
  background: var(--bg); padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .22rem;
}
.dpl-trust__item b {
  font-family: var(--f-display); font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--amber);
}
.dpl-trust__item span { font-size: .84rem; line-height: 1.45; color: var(--dim); }
.dpl-trust__item a {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; margin-top: auto; padding-top: .3rem;
}

/* Sort row. WooCommerce prints a bare <select>, so it has to be dressed here. */
.dpl-filters__row--sort { gap: .6rem; }
.dpl-filters__count { margin-left: auto; font-size: .78rem; color: var(--dim); }
.dpl-filters__count b { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
  background: var(--panel); color: var(--on-dark); border: 1px solid var(--hair);
  padding: .4rem 2rem .4rem .6rem; font-size: .8rem; font-family: var(--f-display);
  border-radius: 0; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--amber) 50%),
                    linear-gradient(135deg, var(--amber) 50%, transparent 50%);
  background-position: right 1rem center, right .65rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.woocommerce-ordering select:focus { outline: none; border-color: var(--amber); }
.woocommerce-result-count { display: none; }  /* replaced by .dpl-filters__count */

/* Slightly larger tiles in the shop than in the archive: fewer products, and
   each one has a price and a button to fit under it. */
.dpl-grid--shop { grid-template-columns: repeat(auto-fill, minmax(clamp(160px,16vw,215px),1fr)); margin-top: var(--s-5); }
.dpl-grid--shop .dpl-tile__name { font-size: .86rem; }
.dpl-grid--shop .dpl-tile__body { padding: .6rem .65rem .7rem; gap: .3rem; }

/* Sold flag sits on the art, not under it, so the grid stays scannable. */
.dpl-tile__art { position: relative; }
.dpl-tile__flag {
  position: absolute; top: 0; left: 0;
  background: var(--chrome-1); color: var(--amber);
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .22rem .5rem;
}

/* Shop masthead is deliberately shorter than a built page's. A shop is a grid
   with a label on it, and 600px of furniture before the first product means
   the visitor scrolls before seeing anything they can buy. */
.dpl-pagehead--tight { padding-block: var(--s-5) var(--s-4); margin-bottom: var(--s-4); }
.dpl-pagehead--tight h1 { font-size: clamp(1.7rem,3.4vw,2.3rem); max-width: none; }
.dpl-pagehead--tight .dpl-pagehead__lede { margin-top: .5rem; font-size: 1rem; }
.dpl-pagehead--tight + .wrap .dpl-trust { margin-top: 0; }
.dpl-trust__item { padding: .6rem .8rem; }
.dpl-trust__item span { font-size: .8rem; }


/* Every mega parent gets the same affordance. Previously only The Lab showed a
   caret, because it was the only item with real WordPress child pages, so the
   arrow was signalling "has children" rather than "opens a panel". */
.dpl-nav li.dpl-has-mega > a::after,
.dpl-nav li.menu-item-has-children > a::after {
  content: ''; display: inline-block; margin-left: .38em; vertical-align: .12em;
  border: 4px solid transparent; border-top-color: currentColor; opacity: .55;
  transition: transform .12s ease, opacity .12s ease;
}
.dpl-nav li.dpl-has-mega:hover > a::after,
.dpl-nav li.menu-item-has-children:hover > a::after { opacity: 1; transform: translateY(1px); }
/* Do not double the caret on an item that is both. */
.dpl-nav li.dpl-has-mega.menu-item-has-children > a::after { margin-left: .38em; }

/* ═══ PRICING / MEMBERSHIP ════════════════════════════════════════
   A pricing page is a decision surface, not an article. Cards, a toggle,
   a matrix, a button. The prose sits below the decision, not above it. */
.dpl-billing {
  display: inline-flex; gap: 0; border: 1px solid var(--hair);
  background: var(--panel); margin: 0 0 var(--s-5);
}
.dpl-billing button {
  background: none; border: 0; cursor: pointer; color: var(--dim);
  font-family: var(--f-display); font-size: .82rem; font-weight: 700;
  padding: .55rem 1.1rem; display: flex; align-items: center; gap: .45rem;
}
.dpl-billing button.is-on { background: var(--amber); color: var(--amber-ink); }
.dpl-billing button i {
  font-style: normal; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: .75;
}

.dpl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: var(--s-5); align-items: start; }
.dpl-plan {
  position: relative; border: 1px solid var(--hair); background: var(--panel);
  padding: var(--s-5); display: flex; flex-direction: column; gap: .5rem;
}
.dpl-plan--primary { border-color: var(--amber); border-width: 2px; }
.dpl-plan__flag {
  position: absolute; top: -1px; right: -1px;
  background: var(--amber); color: var(--amber-ink);
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; padding: .25rem .6rem;
}
.dpl-plan h2 { margin: 0; font-size: 1.25rem; }
.dpl-plan__price { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; }
.dpl-plan__price b {
  font-family: var(--f-display); font-size: 2.6rem; font-weight: 800;
  letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.dpl-plan__price span { color: var(--dim); font-size: .9rem; }
.dpl-plan__note { margin: 0; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--amber); }
.dpl-plan__lede { margin: .3rem 0 0; color: var(--dim); font-size: .93rem; max-width: none; }
.dpl-plan__cta { margin: var(--s-4) 0 .2rem; text-align: center; display: block; }
.dpl-plan__list { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: .45rem; }
.dpl-plan__list li { font-size: .88rem; padding-left: 1.3rem; position: relative; line-height: 1.4; }
.dpl-plan__list li::before { content: '\2713'; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.dpl-plan__list i { font-style: normal; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; color: var(--amber); }

.dpl-compare__scroll { overflow-x: auto; }
.dpl-compare { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.dpl-compare th, .dpl-compare td { border-bottom: 1px solid var(--hair); padding: .6rem .7rem; text-align: left; }
.dpl-compare thead th { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border-bottom-width: 2px; }
.dpl-compare thead th:not(:first-child), .dpl-compare td { text-align: center; width: 150px; }
.dpl-compare tbody th { font-weight: 600; color: var(--on-dark); }
.dpl-compare tbody tr:hover { background: var(--panel); }
.dpl-tick { color: var(--ok); font-weight: 700; }
.dpl-no { color: var(--faint); }
.dpl-cell { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em; color: var(--amber); }

/* ═══ PRODUCT: condition, shipping, scarcity, sticky buy ══════════ */
.dpl-cond { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.dpl-cond__badge {
  font-family: var(--f-display); font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--panel); color: var(--on-dark);
  border: 1px solid var(--hair); padding: .28rem .6rem;
}
.dpl-cond__badge.is-cib { background: var(--ok); color: #06210F; border-color: var(--ok); }
.dpl-cond__what { font-size: .78rem; text-decoration: underline; }

/* Delivery cost stated BEFORE the button, not discovered at checkout. */
.dpl-ship {
  border-left: 3px solid var(--amber); background: var(--panel);
  padding: .6rem .8rem; margin: 0 0 var(--s-4); font-size: .88rem; max-width: none;
}
.dpl-ship span {
  display: block; margin-top: .25rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; color: var(--dim);
}
.dpl-only-one {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber); margin: -.4rem 0 var(--s-4);
}

.dpl-stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--chrome-1); border-top: 2px solid var(--amber);
  box-shadow: 0 -8px 30px rgba(0,0,0,.4);
}
.dpl-stickybuy[hidden] { display: none; }
.dpl-stickybuy__inner { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.dpl-stickybuy__title {
  font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: #E8EDEE;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpl-stickybuy__price { margin-left: auto; font-weight: 800; color: var(--amber); white-space: nowrap; }
.dpl-stickybuy .dpl-btn { flex-shrink: 0; }
@media (max-width: 600px) { .dpl-stickybuy__title { display: none; } .dpl-stickybuy__price { margin-left: 0; } }

/* ═══ ARTICLE: a reading surface, not a scanning one ══════════════
   66 characters, single column, nothing in the margins. Reading and
   scanning are different activities and want different pages. */
/* 74ch, not 66ch, and the reason is a trap worth writing down: `ch` resolves
   against the font size of the element it is declared on. This wrapper is 1rem,
   the prose inside it is 1.12rem, so a 66ch wrapper produced a 54-character
   line at the size people actually read. 66 x (1.12/1) = 74. */
.dpl-read {
  --read-pad: clamp(1rem,4vw,2rem);
  /* box-sizing is border-box, so padding eats the measure. Add it back or the
     line lands at 61 characters instead of 66. */
  max-width: calc(74ch + var(--read-pad) * 2);
  margin-inline: auto; padding-inline: var(--read-pad);
}
.dpl-artichead { padding-block: var(--s-7) var(--s-5); }
.dpl-artichead h1 { margin: .5rem 0 0; font-size: clamp(2rem,4.4vw,3rem); }
.dpl-artichead .eyebrow { text-decoration: none; }
.dpl-artichead__lede {
  margin: var(--s-4) 0 0; font-size: clamp(1.05rem,2vw,1.28rem);
  line-height: 1.5; color: var(--dim); max-width: none;
}
.dpl-artichead__meta {
  margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--hair);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.dpl-artichead__meta span { opacity: .5; margin: 0 .4rem; }
/* Constrained and cropped. Previously this figure sat outside the reading
   column with width:100%, so on a widescreen it stretched a 1200px image
   across 1920px of viewport. Cap it a little wider than the text so it reads
   as a deliberate lead image rather than a background. */
.dpl-artic__art { margin: 0 auto var(--s-6); max-width: min(920px, 92vw); }
.dpl-artic__art img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--panel);
}

.entry-content--read { font-size: 1.12rem; line-height: 1.72; }
.entry-content--read p,
.entry-content--read ul,
.entry-content--read ol { max-width: none; }
.entry-content--read > h2 { margin-top: var(--s-7); font-size: 1.55rem; }
.entry-content--read > h3 { margin-top: var(--s-6); font-size: 1.2rem; color: var(--amber); }
.entry-content--read blockquote { font-size: 1.24rem; line-height: 1.45; margin-block: var(--s-6); }
.entry-content--read img { margin-block: var(--s-6); }

.dpl-artic__foot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.dpl-artic__terms { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--s-5); }
.dpl-artic__cta { border: 1px solid var(--hair); border-left: 4px solid var(--amber); background: var(--panel); padding: var(--s-5); }
.dpl-artic__cta h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.dpl-artic__cta p { color: var(--dim); font-size: .92rem; max-width: none; }
.dpl-artic__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: var(--s-5); }
@media (max-width: 600px) { .dpl-artic__nav { grid-template-columns: 1fr; } }
.dpl-artic__nav a { background: var(--bg); padding: .9rem 1rem; text-decoration: none; display: block; }
.dpl-artic__nav a:hover { background: var(--panel); }
.dpl-artic__nav a.is-next { text-align: right; }
.dpl-artic__nav span { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .25rem; }
.dpl-artic__nav b { color: var(--on-dark); font-size: .92rem; font-weight: 700; line-height: 1.3; display: block; }

/* Membership nudge, shown where the cost appears. */
.dpl-nudge {
  border: 1px solid var(--amber); background: var(--panel);
  padding: .8rem .9rem; margin: 0 0 var(--s-4);
  display: flex; flex-direction: column; gap: .35rem;
}
.dpl-nudge b {
  font-family: var(--f-display); font-size: .8rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--amber);
}
.dpl-nudge span { font-size: .88rem; line-height: 1.45; color: var(--dim); }
.dpl-nudge__aside { font-size: .8rem !important; opacity: .8; }
.dpl-nudge .dpl-btn { align-self: start; margin-top: .3rem; }
.dpl-nudge--member { border-color: var(--ok); }
.dpl-nudge--member b { color: var(--ok); }


/* ═══ POST INDEX ══════════════════════════════════════════════════
   Browse, not read: one lead, then a dense list with thumbnails. */
.dpl-feature { display: block; margin-bottom: var(--s-6); }
.dpl-feature__art { display: block; background: var(--panel); overflow: hidden; }
.dpl-feature__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; }
.dpl-feature:hover .dpl-feature__art img { transform: scale(1.02); }
.dpl-feature__body { padding-top: var(--s-4); }
.dpl-feature__body h2 { margin: .35rem 0 .5rem; font-size: clamp(1.5rem,3.2vw,2.1rem); }
.dpl-feature__body h2 a { color: var(--on-dark); text-decoration: none; }
.dpl-feature__body h2 a:hover { color: var(--amber); }
.dpl-feature__body p { color: var(--dim); max-width: 62ch; margin: 0; }
.dpl-feature__meta { display: block; margin-top: .6rem; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

.dpl-postlist { border-top: 1px solid var(--hair); }
.dpl-postrow { display: grid; grid-template-columns: 150px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
@media (max-width: 560px) { .dpl-postrow { grid-template-columns: 92px 1fr; gap: .8rem; } }
.dpl-postrow__art { display: block; background: var(--panel); overflow: hidden; align-self: start; }
.dpl-postrow__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dpl-postrow__art .dpl-tile__noart { aspect-ratio: 4 / 3; }
.dpl-postrow__kicker { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.dpl-postrow h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; line-height: 1.28; }
.dpl-postrow h3 a { color: var(--on-dark); text-decoration: none; }
.dpl-postrow h3 a:hover { color: var(--amber); }
.dpl-postrow p { color: var(--dim); font-size: .88rem; margin: 0; max-width: 60ch; }
@media (max-width: 560px) { .dpl-postrow p { display: none; } }
.dpl-postrow__meta { display: block; margin-top: .4rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; color: var(--faint); }

/* Sectioned index: a block per category as you scroll. */
.dpl-filters--sticky { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.dpl-newssec { scroll-margin-top: 5rem; margin-top: var(--s-6); }
.dpl-newssec__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-5); margin-top: var(--s-4); }
@media (max-width: 720px) { .dpl-newssec__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.dpl-postrow--lead { grid-template-columns: 1fr; gap: .7rem; padding: 0; border: 0; }
.dpl-postrow--lead .dpl-postrow__art img { aspect-ratio: 16 / 9; }
.dpl-postrow--lead h3 { font-size: 1.15rem; }
.dpl-newssec__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.dpl-newssec__list li { display: flex; gap: .8rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--hair-soft); }
.dpl-newssec__list a { color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.dpl-newssec__list a:hover { color: var(--amber); }
.dpl-newssec__list span { margin-left: auto; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .07em; color: var(--faint); white-space: nowrap; }

/* The standard is one question, so it gets set like one. */
.dpl-bigq {
  font-family: var(--f-display); font-size: clamp(1.5rem,4vw,2.4rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  color: var(--amber); border-left: 4px solid var(--amber);
  padding: .2rem 0 .2rem 1.1rem; margin: var(--s-5) 0; max-width: 22ch;
}
.dpl-lede { font-size: clamp(1.05rem,1.9vw,1.22rem); color: var(--dim); line-height: 1.5; max-width: 54ch; }

.dpl-currency {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .05em;
  color: var(--faint); margin: -.6rem 0 var(--s-4); line-height: 1.5; max-width: none;
}

/* ── Product buy column, quietened ─────────────────────────────── */
.dpl-product__price--ask { color: var(--dim); font-size: 1.2rem; }
.dpl-product__buy form.cart { margin-bottom: .9rem; }
.dpl-product__buy .single_add_to_cart_button { font-size: 1rem; padding: .85rem 1.8rem; }

/* Contents: the actual answer to "what does it come with", per copy. */
.dpl-contents { margin: 0 0 var(--s-4); }
.dpl-contents h2 {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem;
}
.dpl-contents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
.dpl-contents li { font-size: .9rem; padding-left: 1.5rem; position: relative; }
.dpl-contents li::before { position: absolute; left: 0; font-weight: 700; }
.dpl-contents li.is-yes::before { content: '\2713'; color: var(--ok); }
.dpl-contents li.is-no { color: var(--dim); }
.dpl-contents li.is-no::before { content: '\2715'; color: var(--bad); }
.dpl-contents li i { font-style: normal; font-size: .72rem; color: var(--faint); }
.dpl-contents__link { display: inline-block; margin-top: .5rem; font-size: .78rem; }

/* Two quiet lines under the button instead of two boxes. */
.dpl-fineprint { font-size: .82rem; color: var(--dim); line-height: 1.5; margin: 0 0 .5rem; max-width: none; }
.dpl-fineprint b { color: var(--on-dark); }
.dpl-nudge-line { font-size: .8rem; color: var(--faint); margin: 0; max-width: none; }
.dpl-sect--quiet { border-top: 1px solid var(--hair); padding-top: var(--s-5); }
.dpl-sect--quiet h3 { font-size: .95rem; }
.dpl-sect--quiet p { font-size: .88rem; color: var(--dim); }

/* Gallery thumbs are buttons now, because they do something. */
.dpl-product__thumbs button { padding: 0; border: 0; background: none; cursor: pointer; display: block; opacity: .55; transition: opacity .12s ease; }
.dpl-product__thumbs button:hover, .dpl-product__thumbs button.is-on { opacity: 1; }
.dpl-product__thumbs button.is-on { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ═══ SEARCH, a real field ════════════════════════════════════════ */
.dpl-search { display: flex; align-items: stretch; border: 1px solid #2A3437; background: #0F1618; }
.dpl-search input {
  background: none; border: 0; color: #E8EDEE; font-size: .8rem;
  padding: .38rem .6rem; width: clamp(9rem, 15vw, 15rem); min-width: 0;
}
.dpl-search input::placeholder { color: #6B7679; }
.dpl-search input:focus { outline: none; }
.dpl-search:focus-within { border-color: var(--amber); }
.dpl-search button {
  background: none; border: 0; cursor: pointer; padding: 0 .55rem;
  display: flex; align-items: center; color: #A8B2B4;
}
.dpl-search button:hover { color: var(--amber); }
.dpl-search svg { width: 15px; height: 15px; fill: currentColor; display: block; }
@media (max-width: 1080px) {
  .dpl-search input { width: 7rem; }
}
@media (max-width: 960px) {
  /* Never let search squeeze the nav on small screens. */
  .dpl-search input { display: none; }
  .dpl-search { border-color: transparent; background: none; }
  .dpl-search button { padding: 0; }
}

/* ═══ SOCIAL ══════════════════════════════════════════════════════ */
.dpl-social { display: inline-flex; align-items: center; gap: .5rem; }
.dpl-social a { display: flex; color: #98A3A5; }
.dpl-social a:hover { color: var(--amber); }
.dpl-social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.dpl-social--big { margin-top: .9rem; gap: .8rem; }
.dpl-social--big svg { width: 21px; height: 21px; }
.dpl-social--big a { color: #8E9A9C; }

.dpl-stockart {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .05em;
  color: var(--faint); background: var(--panel); border-left: 3px solid var(--warn);
  padding: .45rem .6rem; margin: .5rem 0 0; line-height: 1.5; max-width: none;
}


/* ------------------------------------------------------------------ *
 * Become a member
 *
 * Lives in the utility bar rather than the nav. The nav is where you go
 * to look at things; this is the one thing on the site we are actually
 * asking somebody to do, so it is the only amber element up there and it
 * disappears entirely once they have done it.
 * ------------------------------------------------------------------ */
.dpl-joincta {
  display: inline-block;
  padding: .28rem .8rem;
  border-radius: 3px;
  background: var(--amber);
  color: var(--amber-ink) !important;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .12s;
}
.dpl-joincta:hover { filter: brightness(1.1); color: var(--amber-ink) !important; }

/* Below this the utility bar is already tight, and the rotator matters
   less than the ask, so the label shortens rather than wrapping. */
@media (max-width: 600px) {
  .dpl-joincta { padding: .26rem .6rem; font-size: .68rem; }
}


/* ==================================================================== *
 * THE MEMBER AREA
 *
 * Not a shop settings screen. The account navigation runs horizontally
 * under the header, WooCommerce's vertical list is suppressed, and the
 * content gets the full width because a collection is a working surface.
 * ==================================================================== */

/* --- signed-in menu in the utility bar --- */
.dpl-usermenu { position: relative; display: inline-flex; }
.dpl-usermenu__btn {
  display: inline-flex; align-items: center; gap: .38rem;
  background: none; border: 0; padding: .2rem .1rem;
  font: inherit; font-size: .78rem; color: inherit; cursor: pointer;
}
.dpl-usermenu__btn:hover { color: var(--amber); }
.dpl-usermenu__pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); display: inline-block;
}
.dpl-usermenu__pop {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
  min-width: 200px; padding: .4rem;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.dpl-usermenu__pop[hidden] { display: none; }
.dpl-usermenu__who {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .6rem .6rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--hair);
}
.dpl-usermenu__who b { font-size: .86rem; }
.dpl-usermenu__who i { font-style: normal; font-size: .72rem; color: var(--amber); letter-spacing: .05em; text-transform: uppercase; }
.dpl-usermenu__pop a {
  padding: .48rem .6rem; border-radius: 4px;
  font-size: .84rem; text-decoration: none; color: var(--on-dark);
}
.dpl-usermenu__pop a:hover { background: rgba(255,255,255,.07); color: var(--amber); }
.dpl-usermenu__out { margin-top: .3rem; border-top: 1px solid var(--hair); border-radius: 0 0 4px 4px; opacity: .75; }

/* --- horizontal account navigation --- */
.dpl-acctnav { background: var(--panel); border-bottom: 1px solid var(--hair); }
.dpl-acctnav__inner { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.dpl-acctnav__inner::-webkit-scrollbar { display: none; }
.dpl-acctnav__link {
  padding: .85rem .9rem; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: .84rem;
  color: var(--dim); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.dpl-acctnav__link:hover { color: var(--on-dark); }
.dpl-acctnav__link.is-on { color: var(--amber); border-bottom-color: var(--amber); }
.dpl-acctnav__link--out { margin-left: auto; opacity: .6; }

/* The account page is its own shell: no masthead, no rail, no vertical nav. */
.dpl-account { padding-block: var(--s-6) var(--s-8); }
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; margin: 0; }

/* --- the collection --- */
.dpl-col__flash {
  padding: .7rem 1rem; margin: 0 0 1.2rem; border-radius: 4px;
  background: rgba(63,191,127,.14); border: 1px solid rgba(63,191,127,.4);
  font-size: .92rem;
}
.dpl-col__nav { display: flex; gap: 1.3rem; margin: 0 0 1.6rem; border-bottom: 1px solid var(--card-hair); }
.dpl-col__nav a {
  padding: 0 0 .6rem; font-weight: 700; font-size: .92rem;
  text-decoration: none; color: inherit; opacity: .6;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dpl-col__nav a:hover { opacity: 1; }
.dpl-col__nav a.is-on { opacity: 1; border-bottom-color: var(--amber); }

.dpl-col__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin: 0 0 2rem; }
.dpl-col__stat {
  padding: 1.1rem 1.2rem; border: 1px solid var(--card-hair); border-radius: 6px;
  display: flex; flex-direction: column; gap: .15rem;
}
.dpl-col__stat b { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dpl-col__stat span { font-size: .82rem; opacity: .65; }
.dpl-col__stat i { font-style: normal; font-size: .74rem; opacity: .5; margin-top: .2rem; }

.dpl-col__h { font-size: 1rem; margin: 2rem 0 .8rem; }
.dpl-col__bars { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 2rem; }
.dpl-col__bar { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: .8rem; font-size: .86rem; }
.dpl-col__bar-track { height: 8px; border-radius: 4px; background: rgba(127,127,127,.18); overflow: hidden; }
.dpl-col__bar-track i { display: block; height: 100%; background: var(--amber); }
.dpl-col__bar-n { text-align: right; font-variant-numeric: tabular-nums; opacity: .7; }

.dpl-col__search { display: flex; gap: .5rem; margin: 0 0 1rem; }
.dpl-col__search input { flex: 1; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--card-hair); border-radius: 4px; font: inherit; }
.dpl-col__search button { padding: .55rem 1.1rem; border: 1px solid currentColor; border-radius: 4px; background: none; font: inherit; cursor: pointer; }

.dpl-col__tablewrap { overflow-x: auto; }
.dpl-col__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dpl-col__table th { text-align: left; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; opacity: .55; padding: .5rem .6rem; border-bottom: 1px solid var(--card-hair); }
.dpl-col__table td { padding: .65rem .6rem; border-bottom: 1px solid rgba(127,127,127,.14); }
.dpl-col__t { font-weight: 700; }
.dpl-col__ed { display: block; font-weight: 400; font-size: .78rem; opacity: .55; }
.dpl-col__yes { color: #1a7f37; font-weight: 700; }
.dpl-col__no { opacity: .45; }
.dpl-col__muted { opacity: .4; font-size: .84rem; }

.dpl-col__empty { max-width: 52ch; padding: 2.2rem 0; }
.dpl-col__empty h3 { font-size: 1.4rem; margin: 0 0 .7rem; }
.dpl-col__empty p { line-height: 1.65; }

.dpl-col__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.dpl-col__cta {
  display: inline-block; padding: .7rem 1.25rem; border: 0; border-radius: 4px;
  font: inherit; font-weight: 800; cursor: pointer; text-decoration: none;
  background: var(--amber); color: var(--amber-ink);
}
.dpl-col__cta:hover { filter: brightness(1.07); color: var(--amber-ink); }
.dpl-col__cta--ghost { background: none; border: 1px solid currentColor; color: inherit; }
.dpl-col__cta--ghost:hover { background: rgba(127,127,127,.1); color: inherit; }
.dpl-col__cta--quiet { background: none; color: var(--bad); font-weight: 600; padding-inline: .4rem; }

/* --- the add form --- */
.dpl-col__form, .dpl-col__importform { max-width: 780px; }
.dpl-col__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.dpl-col__field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; }
.dpl-col__field--wide { grid-column: 1 / -1; }
.dpl-col__field label { font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.dpl-col__field input, .dpl-col__field select {
  padding: .6rem .7rem; border: 1px solid var(--card-hair); border-radius: 4px;
  font: inherit; font-size: .94rem; background: transparent; color: inherit;
}
.dpl-col__hint { font-size: .8rem; opacity: .6; line-height: 1.5; }

.dpl-col__parts { border: 1px solid var(--card-hair); border-radius: 6px; padding: 1.1rem 1.2rem; margin: .6rem 0 1.6rem; }
.dpl-col__parts legend { font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 0 .4rem; }
.dpl-col__part { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(127,127,127,.12); font-size: .92rem; }
.dpl-col__part:last-child { border-bottom: 0; }
.dpl-col__seg { display: inline-flex; border: 1px solid var(--card-hair); border-radius: 4px; overflow: hidden; }
.dpl-col__seg label { padding: .32rem .7rem; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.dpl-col__seg label.is-on { background: var(--amber); color: var(--amber-ink); font-weight: 700; }
.dpl-col__seg input { position: absolute; opacity: 0; pointer-events: none; }

.dpl-col__steps { line-height: 1.7; padding-left: 1.2rem; }
.dpl-col__steps code { font-family: var(--f-mono); font-size: .84em; background: rgba(127,127,127,.14); padding: .1rem .3rem; border-radius: 3px; }

@media (max-width: 600px) {
  .dpl-col__part { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .dpl-col__bar { grid-template-columns: 80px 1fr 34px; }
}


/* --- catalogue search on the add form --- */
.dpl-col__find { max-width: 780px; margin: 0 0 1.8rem; }
.dpl-col__find label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .3rem; }
.dpl-col__find input[type=search] {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: 1.05rem;
  border: 2px solid var(--card-hair); border-radius: 5px; background: transparent; color: inherit;
}
.dpl-col__find input[type=search]:focus { border-color: var(--amber); outline: none; }

.dpl-col__results {
  margin-top: .5rem; border: 1px solid var(--card-hair); border-radius: 5px;
  max-height: 380px; overflow-y: auto;
}
.dpl-col__result {
  display: flex; gap: .8rem; align-items: center; width: 100%; text-align: left;
  padding: .6rem .7rem; border: 0; border-bottom: 1px solid rgba(127,127,127,.14);
  background: none; font: inherit; color: inherit; cursor: pointer;
}
.dpl-col__result:last-child { border-bottom: 0; }
.dpl-col__result:hover { background: rgba(127,127,127,.09); }
.dpl-col__result img,
.dpl-col__result-noart { width: 40px; height: 54px; object-fit: cover; border-radius: 3px; flex: none; background: rgba(127,127,127,.16); }
.dpl-col__result-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.dpl-col__result-txt b { font-size: .94rem; }
.dpl-col__result-txt i { font-style: normal; font-size: .78rem; opacity: .6; }

/* What was picked, shown instead of a title field they could contradict. */
.dpl-col__chosen {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 1.3rem;
  padding: .7rem .9rem; border: 1px solid var(--amber); border-radius: 5px;
}
.dpl-col__chosen img { width: 38px; height: 51px; object-fit: cover; border-radius: 3px; }
.dpl-col__chosen span { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.dpl-col__chosen b { font-size: .96rem; }
.dpl-col__chosen i { font-style: normal; font-size: .8rem; opacity: .6; }
.dpl-col__chosen a { font-size: .82rem; }

/* Until a release is chosen the form is out of the way rather than gone, so
   the manual route is always one click away. */
.dpl-col__form.is-waiting { display: none; }

/* [hidden] loses to the display rules above it, which is how the title field
   stayed on screen after a release was picked. */
.dpl-col__field[hidden],
.dpl-col__chosen[hidden],
.dpl-col__results[hidden],
select.dpl-col__pick[hidden] { display: none !important; }

/* ------------------------------------------------------------------ *
 * Selects in the member area
 *
 * The browser default is a grey system widget that looks nothing like the
 * text inputs beside it, which is why the platform dropdown stood out so
 * badly. Same height, weight and border as an input, with our own chevron.
 * ------------------------------------------------------------------ */
.dpl-col__field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; box-sizing: border-box;
  padding: .62rem 2.1rem .62rem .8rem;
  font: inherit; font-size: .94rem; line-height: 1.35;
  color: inherit; background-color: transparent;
  border: 1px solid var(--card-hair); border-radius: 4px;
  cursor: pointer; transition: border-color .12s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%277%27 viewBox=%270 0 10 7%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}
.dpl-col__field select:hover { border-color: rgba(127,127,127,.6); }
.dpl-col__field select:focus { border-color: var(--amber); outline: none; }
.dpl-col__field select:disabled { opacity: .6; cursor: default; background-image: none; }
/* Options are drawn by the operating system, so without this a dark theme
   renders white text on white. */
.dpl-col__field select option { background: var(--card); color: var(--on-card); }
.dpl-col__field input[readonly] { opacity: .7; cursor: default; }

/* ---------------------------------------------------------------
   REFERENCE CONTENT. Added 2026-08-31.
   The reference pages in business/REFERENCE-DATA.md are mostly
   tables, and the theme had no table styling at all, so a data
   page rendered as raw browser default. Styled once here rather
   than per page. All colours come from the tokens so this works
   in both the light and dark palettes without a second rule.
   --------------------------------------------------------------- */

.entry-content .dpl-intro{
  font-size:1.1rem;line-height:1.6;opacity:.92;
  padding-bottom:1.1rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--hair-soft)
}

/* Wide tables scroll inside their own box. The page body must
   never scroll sideways. */
.dpl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.7rem 0}

.dpl-table{
  width:100%;min-width:660px;border-collapse:collapse;
  font-family:var(--f-body);font-size:.94rem;line-height:1.45
}
.dpl-table th,.dpl-table td{
  text-align:left;padding:.72rem .85rem;vertical-align:top;
  border-bottom:1px solid var(--hair-soft)
}
.dpl-table thead th{
  font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--dim);
  border-bottom:1px solid var(--hair);white-space:nowrap
}
.dpl-table tbody tr:last-child td{border-bottom:0}
.dpl-table tbody tr:hover{background:var(--hair-soft)}

/* Outcome cells, so the shape of a table is readable before it is
   read. The colour is a hint; the word still carries the meaning,
   which matters for anyone who cannot see the difference. */
.dpl-table td.is-ok{box-shadow:inset 3px 0 0 var(--ok)}
.dpl-table td.is-good{box-shadow:inset 3px 0 0 var(--cyan)}
.dpl-table td.is-bad{box-shadow:inset 3px 0 0 var(--bad)}

@media (max-width:700px){
  .dpl-table{font-size:.88rem}
  .dpl-table th,.dpl-table td{padding:.6rem .65rem}
}

/* ---------------------------------------------------------------
   THE REFERENCE BOARD. Added 2026-08-31.
   Used by page-switched-off.php and intended for every dataset in
   business/REFERENCE-DATA.md. A data board, not an article: full
   width, its own toolbar, and rows that read at a glance before
   they are read properly.
   --------------------------------------------------------------- */

.dpl-board{margin:0 0 3rem}

/* Toolbar */
.dpl-board__bar{
  display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;
  padding:1rem 1.1rem;margin-bottom:1rem;
  background:var(--panel);border:1px solid var(--hair);border-radius:12px
}
.dpl-board__search{flex:1 1 240px;min-width:200px}
.dpl-board__search input{
  width:100%;padding:.6rem .85rem;font:inherit;font-size:.95rem;
  color:var(--on-dark);background:var(--bg);
  border:1px solid var(--hair);border-radius:8px
}
.dpl-board__search input:focus{outline:2px solid var(--cyan);outline-offset:1px}

.dpl-board__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dpl-chip{
  font:inherit;font-size:.82rem;line-height:1;cursor:pointer;
  padding:.5rem .75rem;border-radius:999px;
  color:var(--dim);background:transparent;
  border:1px solid var(--hair);transition:.15s
}
.dpl-chip span{opacity:.6;margin-left:.3rem;font-variant-numeric:tabular-nums}
.dpl-chip:hover{color:var(--on-dark);border-color:var(--dim)}
.dpl-chip.is-on{color:var(--on-dark);border-color:var(--on-dark);background:var(--bg-deep)}
.dpl-chip--ok.is-on{border-color:var(--ok);box-shadow:inset 0 -2px 0 var(--ok)}
.dpl-chip--good.is-on{border-color:var(--cyan);box-shadow:inset 0 -2px 0 var(--cyan)}
.dpl-chip--bad.is-on{border-color:var(--bad);box-shadow:inset 0 -2px 0 var(--bad)}

.dpl-board__selects{display:flex;gap:.4rem;flex-wrap:wrap}
.dpl-board__selects select{
  font:inherit;font-size:.82rem;padding:.5rem .7rem;border-radius:8px;
  color:var(--on-dark);background:var(--bg);border:1px solid var(--hair)
}
.dpl-board__selects select option{background:var(--bg);color:var(--on-dark)}

/* Locked controls stay visible. Hiding them would hide the reason to
   make an account, and the point is that you can see what you unlock. */
.is-locked{opacity:.55}
.dpl-board__selects.is-locked select{cursor:not-allowed}

.dpl-board__gate{
  margin:0 0 1rem;padding:.7rem .95rem;font-size:.88rem;
  color:var(--dim);background:var(--bg-deep);
  border:1px dashed var(--hair);border-radius:10px
}
.dpl-board__gate a{color:var(--amber)}

.dpl-board__count{margin:0 0 .6rem;font-size:.82rem;color:var(--faint)}
.dpl-board__count strong{color:var(--on-dark);font-variant-numeric:tabular-nums}

/* The rows */
.dpl-board__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dpl-board__table{width:100%;min-width:720px;border-collapse:collapse;font-size:.94rem}
.dpl-board__table thead th{
  text-align:left;padding:.55rem .9rem;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--faint);white-space:nowrap;
  border-bottom:1px solid var(--hair)
}
.dpl-row td{padding:.9rem;vertical-align:top;border-bottom:1px solid var(--hair-soft)}
.dpl-row:hover td{background:var(--panel)}
.dpl-row td:first-child{box-shadow:inset 3px 0 0 var(--hair)}
.dpl-row--ok   td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.dpl-row--good td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.dpl-row--bad  td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

.dpl-row__game{font-weight:600;font-size:1rem;display:block}
.dpl-row td time{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}
.dpl-row__note{display:block;margin-top:.35rem;color:var(--dim);font-size:.88rem;max-width:46ch}
.dpl-row__conf{
  display:inline-block;margin-top:.4rem;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)
}

/* Tags and pills */
.dpl-tag{
  display:inline-block;margin:0 .25rem .25rem 0;padding:.2rem .45rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;
  border-radius:4px;color:var(--dim);border:1px solid var(--hair);white-space:nowrap
}
.dpl-tag--ps3,.dpl-tag--ps4,.dpl-tag--ps5{color:#5AA8F0;border-color:rgba(0,112,209,.45)}
.dpl-tag--x360,.dpl-tag--xone,.dpl-tag--xsx{color:#57B857;border-color:rgba(16,124,16,.45)}
.dpl-tag--pc{color:#A88BF5;border-color:rgba(139,92,246,.45)}
.dpl-tag--soon{color:var(--amber);border-color:rgba(255,163,26,.45)}

.dpl-pill{
  display:inline-block;padding:.25rem .55rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.dpl-pill--ok{color:var(--ok);background:rgba(63,191,127,.13)}
.dpl-pill--good{color:var(--cyan);background:rgba(63,208,224,.13)}
.dpl-pill--bad{color:var(--bad);background:rgba(224,97,79,.15)}

.dpl-board__empty{margin:2rem 0;color:var(--dim);text-align:center}

/* Legend */
.dpl-board__legend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair-soft)
}
.dpl-board__legend p{margin:.45rem 0 0;font-size:.85rem;color:var(--dim);line-height:1.45}

.dpl-board__notes{max-width:var(--measure);margin-top:2.5rem}

/* Narrow screens: the table becomes cards */
@media (max-width:760px){
  .dpl-board__scroll{overflow-x:visible}
  .dpl-board__table{min-width:0}
  .dpl-board__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dpl-row{display:block;margin-bottom:.8rem;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
  .dpl-row td{display:block;border-bottom:0;padding:.5rem .9rem}
  .dpl-row td:first-child{padding-top:.85rem}
  .dpl-row td:last-child{padding-bottom:.9rem}
  .dpl-row td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:.2rem;
    font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)
  }
  .dpl-row td:first-child::before{display:none}
  .dpl-row__note{max-width:none}
}

/* ── Shop submenu: the header bar is dark in both themes, so its dropdown must be too.
   In the light theme --panel is light, which left pale text on a white panel. ── */
.dpl-nav .sub-menu { background: var(--chrome-2); border: 0; border-top: 3px solid var(--amber); }
.dpl-nav .sub-menu a { color: #E1E8E9; opacity: 1; }
.dpl-nav .sub-menu a:hover { background: rgba(255,163,26,.14); color: var(--amber); }

/* ── My account overview: the orders / addresses / details strip ── */
.dpl-acct__mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.dpl-acct__mini > div { border: 1px solid var(--hair); padding: .9rem 1rem; background: var(--panel); }
.dpl-acct__mini h3 { font-size: .95rem; margin: 0 0 .4rem; }
.dpl-acct__mini p { margin: 0 0 .6rem; font-size: .88rem; color: var(--dim); overflow-wrap: anywhere; }
.dpl-acct__mini a { font-weight: 700; font-size: .85rem; }