/* ═══════════════════════════════════════════════════════════════
   LAWRYSE — LAYOUT & COMPONENTS

   Design brief (Alice, 2026-07-31): keep the News24/eNCA structure, but
   make it "pretty neat and beautiful". Four rules do most of that work,
   and they are why this file looks the way it does:

     1. ONE card system in three sizes, never six competing styles.
     2. Red is an ACCENT — chips, rules, hover. Never a background slab.
     3. Generous, consistent vertical rhythm from the --lw-s* scale only.
     4. Ads always labelled, never dressed as editorial (MASTER §17.0).

   Every value comes from a token in style.css. No raw hex below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip link ───────────────────────────────────────────────────── */

.lw-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--lw-s3) var(--lw-s4);
  background: var(--lw-ink);
  color: #fff;
  border-radius: 0 0 var(--lw-radius-sm) 0;
}
.lw-skip-link:focus {
  left: 0;
  color: #fff;
}

/* ── Shared shell ────────────────────────────────────────────────── */

.lw-wrap {
  max-width: var(--lw-max);
  margin-inline: auto;
  padding-inline: var(--lw-s5);
}

/* The content + right-hand sidebar grid (Alice: sidebar is required). */
.lw-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lw-sidebar-w);
  gap: var(--lw-gutter);
  align-items: start;
  max-width: var(--lw-max);
  margin-inline: auto;
  padding: var(--lw-s6) var(--lw-s5) var(--lw-s8);
}

/* Sidebar becomes a stacked section below the article on smaller screens.
   Expressed as BOTH states in media queries, never as `hidden md:block` —
   see the standing rule in CURRENT; equal specificity means the later rule
   wins and the element stays hidden at every width. */
@media (max-width: 1023px) {
  .lw-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* z-index:100 (2026-08-20) — position:sticky ALWAYS creates a new stacking
   context, with or without an explicit z-index. Without one here, the poll
   nudge's own z-index:150 (a descendant) was trapped inside this element's
   context and compared as z-index:auto against the page — meaning the
   header (z-index:99, outside this context) could sit ABOVE an open poll
   panel tall enough to reach the header's screen area, silently eating
   clicks on its close button despite the panel visually looking on top.
   Found via elementFromPoint(), not visual inspection — the intercepting
   header element has no visible fill at that point, so nothing LOOKED
   wrong. Any future sticky/fixed wrapper needs its own explicit z-index
   for the same reason, not just position:sticky/fixed alone. */
.lw-sidebar {
  position: sticky;
  top: var(--lw-s5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--lw-s5);
  min-width: 0;
}
@media (max-width: 1023px) {
  .lw-sidebar { position: static; }
}

/* A nav dropdown (Legal Topics, Public Voices, Subscriptions, Pause & Play)
   lives INSIDE Astra's own .site-header, which the theme leaves at its
   default z-index:99 — deliberately BELOW .lw-sidebar's 100 above, so the
   poll-nudge trapped inside the sidebar's own stacking context keeps
   beating the header (the exact 2026-08-20 fix this file already
   documents). That makes the header a hard ceiling for everything painted
   inside it: a dropdown panel long enough to reach the sidebar (Pause &
   Play's 4 items, found 2026-09-24) renders its lower rows BEHIND the
   sidebar's first widget, no matter what z-index the panel itself carries,
   because the comparison that actually decides paint order is the HEADER's
   99 vs the sidebar's 100, not the panel's own 40.
   Raising the header's z-index outright would just invert the problem and
   reopen the 2026-08-20 bug (header eating the poll-nudge's close button).
   Instead, only step the header above the sidebar WHILE a dropdown is
   actually open — :has() is already used above (laria.css) so this repo
   treats it as safe to rely on. !important per the standing Astra-fight
   rule: no matching PHP filter exists for a theme-core inline z-index. */
.site-header:has(.lw-nav__details[open]) {
  z-index: 110 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.lw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lw-s2);
  padding: var(--lw-s3) var(--lw-s5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.lw-btn--primary {
  background: var(--lw-red);
  border-color: var(--lw-red);
  color: #fff;
}
.lw-btn--primary:hover,
.lw-btn--primary:focus-visible {
  background: var(--lw-red-dark);
  border-color: var(--lw-red-dark);
  color: #fff;
}

.lw-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--lw-ink);
}
.lw-btn--light:hover,
.lw-btn--light:focus-visible {
  background: var(--lw-pink);
  border-color: var(--lw-pink);
  color: var(--lw-ink);
}

/* ── Fields ──────────────────────────────────────────────────────── */

.lw-field {
  min-width: 0;
  padding: var(--lw-s3) var(--lw-s4);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  background: #fff;
  font-family: var(--lw-font);
  /* !important: Astra's own Customizer-generated inline CSS
     (#astra-theme-css-inline-css) sets `input[type="email"]` etc. and
     `textarea`/`select` to a flat 16px — an attribute selector, so it
     out-specificities this single class regardless of source order. Same
     family as the button:hover and root-font-size fights already
     documented (Standing Rules) — found 2026-09-24 chasing why the footer
     subscribe field's placeholder read larger than the rest of the site's
     text, everywhere .lw-field is used, not just there. */
  font-size: var(--lw-fs-sm) !important;
  color: var(--lw-ink);
}
.lw-field::placeholder { color: var(--lw-muted); }

/* ── 0. Practice-area ticker (top of every page) ─────────────────── */

.lw-ticker {
  overflow: hidden;
  background: var(--lw-red);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lw-ticker__track {
  display: flex;
  width: max-content;
  animation: lw-ticker-scroll 60s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lw-ticker__track { animation: none; }
}
/* Each item is a link to its practice-area archive — pause the scroll on
   hover or keyboard focus so a moving target is actually clickable. */
.lw-ticker:hover .lw-ticker__track,
.lw-ticker:focus-within .lw-ticker__track {
  animation-play-state: paused;
}

.lw-ticker__set {
  display: flex;
  flex: none;
}

.lw-ticker__item {
  padding: var(--lw-s2) var(--lw-s4);
  color: #fff;
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s ease;
}
a.lw-ticker__item:hover,
a.lw-ticker__item:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lw-ticker__item::after {
  content: "•";
  display: inline-block; /* stops the hover underline reaching the bullet */
  margin-left: var(--lw-s4);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

@keyframes lw-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 1. Attorney invitation banner ───────────────────────────────── */

.lw-attorney-banner {
  background: var(--lw-ink);
  color: #fff;
}

/* Grid, not flex: logo pinned left, Log in + CTA pinned right (Alice,
   2026-08-03: the promotional message that used to fill the middle was
   deleted outright, so this is just a two-column split now). */
/* Three columns since 2026-08-06: logo pinned left, the attorney search
   CENTRED in the middle (Alice: "center it between the logo and the 'see
   our attorney plans'"), CTA + Log in pinned right. The middle track is the
   flexible one, and the search centres inside it. */
.lw-attorney-banner__inner {
  max-width: var(--lw-max);
  margin-inline: auto;
  padding: var(--lw-s3) var(--lw-s5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lw-s5);
}

.lw-attorney-banner__search {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Capped so the control keeps a sensible width instead of stretching across
   the whole middle track now that it fills its container. */
.lw-attorney-banner__search .lw-attsearch { width: 100%; max-width: 33rem; }

.lw-attorney-banner__logo { display: inline-flex; flex: none; }
.lw-attorney-banner__logo img {
  display: block;
  /* Matches AdminControl's own header logo (Alice, 2026-08-03: "see 2nd
     screenshot how big logo is on admin control") — that's h-10 in
     components/admin/AdminHeader.tsx, i.e. 40px. Was 28px. */
  height: 40px;
  width: auto;
}

/* Log in/Register + the CTA button, together in the banner's right
   column (Alice, 2026-08-03 — Log in used to be its own row below this
   banner; see the note in inc/header.php). */
.lw-attorney-banner__right {
  display: flex;
  align-items: center;
  gap: var(--lw-s4);
  justify-self: end;
}

@media (max-width: 1023px) {
  /* The search needs the full width well before phone sizes — at ~900px the
     three columns squeeze it to a couple of unusable centimetres. */
  .lw-attorney-banner__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--lw-s3) var(--lw-s5);
  }
  .lw-attorney-banner__search {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .lw-attorney-banner__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--lw-s3);
  }
  .lw-attorney-banner__right { justify-self: center; }
}

/* ── Member links (Register / Log in) ────────────────────────────── */

.lw-member-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lw-s3);
  font-size: var(--lw-fs-sm);
}
.lw-member-links__item {
  color: #fff;
  font-weight: 600;
}
.lw-member-links__item:hover { color: rgba(255, 255, 255, 0.75); }
.lw-member-links__register {
  padding: 0.1rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
}
.lw-member-links__register:hover { background: #fff; color: var(--lw-ink); }
.lw-member-links__sep { align-self: stretch; width: 1px; background: rgba(255, 255, 255, 0.3); }

/* ── White "Are you an Attorney? Join Us" block (Alice, 2026-10-12) ──
   Kept compact so it does not overwhelm the banner. */
.lw-join-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1rem 0.45rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: #fff;
}
.lw-join-card__line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
}
.lw-join-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: #fff;
  font-weight: 700;
}
.lw-join-card__link:hover { color: rgba(255, 255, 255, 0.75); }
.lw-join-card__link svg { width: 14px; height: 14px; }


/* ── 2. Masthead — Astra's own logo/title block is fully replaced ──────
   No menu was ever assigned to Astra's own header, so the stock masthead
   rendered as a bare, oversized logo with nothing beside it (Alice,
   2026-08-03). Astra's own block is hidden outright; this theme's own
   logo now lives INSIDE the attorney banner (see "1. Attorney banner"
   below), not as a separate row here — a stray white block against the
   dark banner above it read wrong, so it moved in with it instead. */
/* !important: Astra's own dynamic CSS sets this via a compound selector
   (".ast-logo-title-inline .ast-site-identity") whose specificity a plain
   single-class rule can't beat — confirmed live, not guessed (the earlier
   container-width fight was the same shape, solved with a PHP filter
   instead; there is no equivalent filter for this one). */
.ast-site-identity { display: none !important; }

/* The "stubborn white space" Alice flagged (2026-08-03): hiding the logo
   INSIDE Astra's masthead left the masthead ROW itself still rendering.
   Astra's header builder outputs the whole primary-header-bar markup
   TWICE — #ast-desktop-header and #ast-mobile-header, swapped by its own
   responsive CSS — and #ast-mobile-header was the one left visible,
   ~80px of empty space where a now-hidden duplicate logo used to sit.
   Neither is used: this theme's own logo/ticker/nav (astra_masthead_bottom
   in inc/header.php, inc/ticker.php, inc/nav.php) replaces both. */
#ast-desktop-header,
#ast-mobile-header {
  display: none !important;
}

/* ── 2b. Primary nav ──────────────────────────────────────────────── */

.lw-nav {
  background: var(--lw-ink);
}

.lw-nav__inner {
  max-width: var(--lw-max);
  margin-inline: auto;
  padding-inline: var(--lw-s5);
}

.lw-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lw-nav__item { position: relative; }

.lw-nav__link {
  display: flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s3) var(--lw-s4);
  color: #fff;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.lw-nav__link::-webkit-details-marker { display: none; }
.lw-nav__item:hover > .lw-nav__link,
.lw-nav__link:focus-visible {
  color: var(--lw-pink);
}

/* Dropdown/flyout caret, drawn in CSS so no icon asset is needed. */
.lw-nav__item--dropdown > .lw-nav__details > .lw-nav__link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.lw-nav__details[open] > .lw-nav__link::after {
  transform: rotate(-135deg);
}

.lw-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 220px;
  margin: 0;
  padding: var(--lw-s3);
  list-style: none;
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: 0 0 var(--lw-radius-sm) var(--lw-radius-sm);
  box-shadow: var(--lw-shadow-card);
  /* Set here, not only on the <a> below (Alice, 2026-08-03: "double
     spacing... needs to be more single spacing"). A <li> with no
     font-size/line-height of its own inherits the BODY's, so its line box
     stayed tall even once the link inside it was set smaller — the gap
     between items was coming from the LI, not the link. */
  font-size: var(--lw-fs-xs);
  line-height: var(--lw-lh-tight);
}
.lw-nav__panel li + li { margin-top: 1px; }
.lw-nav__panel a {
  display: block;
  padding: var(--lw-s1) var(--lw-s2);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-weight: 500;
}
.lw-nav__panel a:hover { background: var(--lw-pink-soft); color: var(--lw-red); }

/* A second-level dropdown nested inside a panel (Pause & Play, inside
   Public Voices — Alice's Quizzes brief, 2026-09-24). Expands INLINE and
   indented rather than as a side flyout, which would risk running off
   the viewport at 220px wide on both desktop and mobile. */
.lw-nav__subitem--dropdown { list-style: none; }
.lw-nav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lw-s1) var(--lw-s2);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.lw-nav__sublink::-webkit-details-marker { display: none; }
.lw-nav__sublink:hover { background: var(--lw-pink-soft); color: var(--lw-red); }
.lw-nav__sublink::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: var(--lw-s2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.lw-nav__subdetails[open] > .lw-nav__sublink::after { transform: rotate(-135deg); }
.lw-nav__subpanel {
  margin: 2px 0 4px var(--lw-s2);
  padding-left: var(--lw-s2);
  list-style: none;
  border-left: 2px solid var(--lw-border);
}
.lw-nav__subpanel a {
  display: block;
  padding: var(--lw-s1) var(--lw-s2);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-weight: 500;
}
.lw-nav__subpanel a:hover { background: var(--lw-pink-soft); color: var(--lw-red); }

/* Legal Topics — a wider, multi-column flyout rather than a single list. */
.lw-nav__panel--topics {
  display: flex;
  gap: var(--lw-s5);
  min-width: 560px;
  max-width: calc(100vw - var(--lw-s6));
}
.lw-nav__col { flex: 1 1 0; margin: 0; padding: 0; list-style: none; min-width: 0; }

@media (max-width: 1023px) {
  .lw-nav__list { flex-direction: column; }
  .lw-nav__panel { position: static; box-shadow: none; border: none; border-top: 1px solid var(--lw-border); border-radius: 0; }
  .lw-nav__panel--topics { flex-direction: column; min-width: 0; max-width: none; }
}

/* ── 3. Attorney/firm directory search (hidden until ATTORNEYS LIVE) ──
   Alice's 2026-08-06 specification, from her attorneys.co.za reference:
   a Firm/Attorney selector, then Area of Practice · Region · Name.
   Lives in the dark banner, so the legend is white and the fields light.

   ASTRA OWNS FORM FIELDS UNTIL TOLD OTHERWISE. Measured on staging: inputs
   render 40px tall with a 1px border, 4px radius and a white background,
   and selects are forced to width:100% — which is what pushed the earlier
   version out of alignment and let one dropdown eat the whole row. The
   reset below overrides only those properties, at the specificity Astra
   uses. Per CURRENT'''s standing rule, a CSS-only fight with no matching
   PHP filter takes !important. */

/* Firm/Attorney sits ABOVE the search bar, not beside it (Alice,
   2026-08-06): "intuitively, one sees the search bar before one sees this."
   Beside it, the selector was read second — after the thing it governs. */
.lw-attsearch__form {
  display: flex;
  flex-direction: column;
  align-items: center;   /* pills centred over the bar, not left-aligned */
  gap: var(--lw-s2);
  min-width: 0;
  width: 100%;
}

/* ── SEARCH BY: Firm / Attorney ─────────────────────────────────── */

.lw-attsearch__by {
  display: flex;
  align-items: center;
  gap: var(--lw-s2);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Visually hidden, kept for screen readers. Two pills reading "Firm" and
   "Attorney" above a search bar explain themselves, and Alice asked to
   conserve space — the legend was the widest thing in the row. */
.lw-attsearch__by-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lw-attsearch__by-opt { display: inline-flex; }

/* The radio itself is hidden but still focusable and still the thing that
   is checked — the visible control is its label, so keyboard and screen
   readers get real radio semantics (Alice'''s reference uses radios). */
.lw-attsearch__by-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Real radio look (Alice, 2026-10-12): a visible "SEARCH BY" label and a
   ring that fills red when chosen. The native input stays in the DOM, hidden
   but focusable, so keyboard and screen-reader behaviour is unchanged. */
.lw-attsearch__by { gap: var(--lw-s3); }
.lw-attsearch__by-legend {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0.15rem 0 0;
  float: left;
  overflow: visible;
  clip: auto;
  color: #fff;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-attsearch__by-opt label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--lw-fs-sm);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.lw-attsearch__by-opt label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lw-attsearch__by-opt label:hover::before { border-color: #fff; }
.lw-attsearch__by-opt input:checked + label::before {
  border-color: #fff;
  background: var(--lw-red);
  box-shadow: inset 0 0 0 2px var(--lw-ink);
}
.lw-attsearch__by-opt input:focus-visible + label::before {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── The joined field row ────────────────────────────────────────── */

.lw-attsearch__fields {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

/* flex:none, NOT the default flex:0 1 auto. As a shrinkable item the cell
   collapsed 12px narrower than the select inside it, so Region overlapped
   the Name field — the control looked broken while every part was the right
   size. Only the Name field flexes. */
.lw-attsearch__cell {
  position: relative;
  display: flex;
  flex: none;
}

.lw-attsearch__form input.lw-attsearch__control,
.lw-attsearch__form select.lw-attsearch__control {
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--lw-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: var(--lw-field) !important;
  background-image: none !important;
  color: var(--lw-ink) !important;
  font-family: inherit !important;
  font-size: var(--lw-fs-sm) !important;
  line-height: 1.4 !important;
  padding: 0.3rem 1.5rem 0.3rem 0.6rem !important;
  appearance: none;
  -webkit-appearance: none;
  min-width: 6.5rem;
}

.lw-attsearch__form select.lw-attsearch__control { cursor: pointer; }

.lw-attsearch__form input.lw-attsearch__control::placeholder { color: var(--lw-muted); }

/* Whatever leads the row rounds on the left — since 2026-08-06 that is the
   Name field, not a cell, so both shapes are covered rather than assuming
   the order. */
.lw-attsearch__fields > .lw-attsearch__control:first-child,
.lw-attsearch__fields > .lw-attsearch__cell:first-child .lw-attsearch__control,
.lw-attsearch__form input.lw-attsearch__control--name {
  border-radius: var(--lw-radius-sm) 0 0 var(--lw-radius-sm) !important;
}

/* The two free-text fields flex; the pickers keep their content width.
   Neither carries a chevron, so normal right padding. */
.lw-attsearch__form input.lw-attsearch__control--name,
.lw-attsearch__form input.lw-attsearch__control--city {
  flex: 1 1 8rem;
  min-width: 5rem;
  padding-right: 0.6rem !important;
}

.lw-attsearch__chevron {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--lw-muted);
  display: block;
}
.lw-attsearch__chevron svg { width: 12px; height: 12px; display: block; }

.lw-attsearch__submit {
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 var(--lw-radius-sm) var(--lw-radius-sm) 0;
  background: var(--lw-red);
  color: #fff;
  padding-inline: var(--lw-s4);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lw-attsearch__submit:hover { background: var(--lw-red-dark); }
.lw-attsearch__submit svg { width: 16px; height: 16px; display: block; }

@media (max-width: 1023px) {
  .lw-attsearch__form { align-items: stretch; }
  .lw-attsearch__by { justify-content: center; }
}

@media (max-width: 560px) {
  .lw-attsearch__fields { flex-wrap: wrap; }
  .lw-attsearch__cell,
  .lw-attsearch__form input.lw-attsearch__control--name,
  .lw-attsearch__form input.lw-attsearch__control--city { flex: 1 1 100%; }
  .lw-attsearch__form input.lw-attsearch__control,
  .lw-attsearch__form select.lw-attsearch__control {
    border-radius: var(--lw-radius-sm) !important;
    border: 1px solid var(--lw-border) !important;
    margin-bottom: var(--lw-s2) !important;
  }
  .lw-attsearch__submit { border-radius: var(--lw-radius-sm); padding-block: 0.5rem; }
}


/* ── Advertising zones ───────────────────────────────────────────────
   There is deliberately NO min-height, NO reserved box and NO empty-state
   rule anywhere here. An unsold zone is never rendered at all (see
   inc/ad-zones.php), so it cannot leave a gap. Do not add spacing to a
   zone's PARENT to fake a gutter — that would reintroduce the empty space
   Alice explicitly asked us not to leave.                              */

.lw-ad {
  display: flex;
  flex-direction: column;
  gap: var(--lw-s4);
}

/* A real (attorney-booked) ad unit gets NO shell at all — no background,
   no border, no padding (Alice, 2026-08-10: "delete all the teal blocks
   for attorney ads... keep the teal blocks for Lawryse"). Just the
   creative itself, sitting on the page. */
.lw-ad__unit {
}

/* House creatives sit bare like every other ad. The teal shell was removed
   2026-10-12 (Alice: "we're not going to do that anymore"). */

/* Disclosure label — MASTER §17.0. Quiet but always present, so paid
   material is never mistaken for Lawryse editorial. Default is dark-on-page
   (a real ad has no shell to sit on any more); house units override to
   light-on-teal. */
.lw-ad__label {
  display: block;
  margin-bottom: var(--lw-s2);
  font-size: var(--lw-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-muted);
}

.lw-ad__link { display: block; }
.lw-ad__image { display: block; width: 100%; border-radius: var(--lw-radius-sm); }
.lw-ad__text { font-size: var(--lw-fs-sm); color: var(--lw-body); }

/* Per-zone aspect-ratio + object-fit (Alice, 2026-08-10 — the In-Feed/Native
   creative "cuts off hopelessly" report). Without this, .lw-ad__image had NO
   size constraint beyond width:100% — a source image whose real proportions
   didn't match its zone rendered at whatever height it naturally came out to,
   and a grid cell with a fixed height simply clipped the overflow from the
   top. These numbers mirror the dashboard's lib/commercial/ad-requirements.ts
   BannerSpec values — two codebases, so the numbers can't be imported
   directly, but they must be changed together if either side's spec changes.
   object-fit: cover means this now protects correct display EVEN against an
   older upload that predates the dashboard's own crop tool. */
.lw-ad--homepage-banner .lw-ad__image,
.lw-ad--article-top-banner .lw-ad__image,
.lw-ad--footer-banner .lw-ad__image {
  aspect-ratio: 728 / 90;
  object-fit: cover;
  height: auto;
}
.lw-ad--site-sidebar .lw-ad__image,
.lw-ad--article-sidebar .lw-ad__image,
.lw-ad--in-article-banner .lw-ad__image {
  aspect-ratio: 300 / 250;
  object-fit: cover;
  height: auto;
}
.lw-ad--in-feed-native .lw-ad__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}

/* House creatives (Alice's own designed cards, 2026-08-10) are NOT the
   dashboard's fixed banner sizes — each is its own pre-cropped graphic at
   whatever proportions the design actually needs. Cancels the per-zone
   forcing above; must come AFTER it (equal specificity, source order wins)
   so a house card never gets sliced into a paid banner's aspect ratio. */
.lw-ad__unit--house .lw-ad__image {
  aspect-ratio: auto;
  height: auto;
}

/* NEVER UPSCALE A PAID CREATIVE (Alice, 2026-08-11 — the In-Article banner
   rendering "blown up hopelessly").

   width:100% made every zone stretch its creative to whatever the column
   happened to be, with no ceiling. Measured live on staging: the 300x250
   In-Article MPU was rendering at 666x504 (2.22x) and the 728x90 footer
   leaderboard at 1152x142 (1.58x). Alice's uploads were correct — every one
   matched its spec ratio exactly — so this was never a re-upload problem;
   the browser was inventing the missing pixels, which is precisely the
   softness she reported as "losing quality". The crop tool already exports
   at 2x (ImageCropModal's EXPORT_SCALE), so the spec size IS the real
   ceiling; beyond it there is nothing left to draw with.

   Cap at the creative's own pixel width and centre what's left. Declared as
   a per-zone variable so the cap and the centring are written once — adding
   a zone is one line, not another selector list to keep in sync. Sizes
   mirror lib/commercial/ad-requirements.ts (two codebases, so they must be
   changed together — same standing note as the aspect ratios above).

   Zones with no --lw-ad-max (in-feed-native, sponsored-insight-card,
   article-inline-text, directory-featured) resolve to max-width:none and
   keep filling their container: IN_FEED_NATIVE is a "native" spec (16:9, no
   fixed pixel size) that is MEANT to match the feed cell it sits in. */
.lw-ad--homepage-banner,
.lw-ad--article-top-banner,
.lw-ad--footer-banner {
  --lw-ad-max: 728px;
}
.lw-ad--site-sidebar,
.lw-ad--article-sidebar,
.lw-ad--in-article-banner {
  --lw-ad-max: 300px;
}

/* The LINK is capped as well as the image. A full-width anchor around a
   centred creative makes the empty space beside it clickable, so a stray
   click on blank page opens the advertiser — and it would count as a real
   click on the campaign's beacon. */
.lw-ad__unit:not(.lw-ad__unit--house) .lw-ad__link,
.lw-ad__unit:not(.lw-ad__unit--house) .lw-ad__image {
  max-width: var(--lw-ad-max, none);
  margin-inline: auto;
}

/* ── Poll cards + the vote pop-up (Alice, 2026-09-23) ─────────────
   One card everywhere (Polls page grid, every sidebar): topic label,
   question, short description, "Vote now". The pop-up is a native
   <dialog>, so focus trapping, Escape-to-close and the backdrop come
   from the browser. Replaces the 2026-08-10 long-poll corner nudge. */
.lw-poll-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s4);
}
@media (max-width: 640px) {
  .lw-poll-grid { grid-template-columns: 1fr; }
}
.lw-poll-stack { display: grid; gap: var(--lw-s3); }

.lw-poll-card {
  display: flex;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s4) var(--lw-s5);
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
}
.lw-poll-card[hidden] { display: none; }
.lw-widget .lw-poll-card { padding: var(--lw-s4); }
.lw-poll-card__topic {
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-poll-card__q {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-widget .lw-poll-card__q { font-size: var(--lw-fs-md); }
.lw-poll-card__desc {
  margin: 0;
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-snug);
}
.lw-widget .lw-poll-card__desc { font-size: var(--lw-fs-sm); }
.lw-poll-card__foot {
  margin-top: auto;
  padding-top: var(--lw-s2);
}
.lw-poll-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s4);
  background: #fff;
  border: 1px solid var(--lw-red);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-red);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Explicit hover/focus colours so Astra's default blue button:hover can
   never leak through (the same bug class as the LARIA launcher). */
.lw-poll-card__btn:hover,
.lw-poll-card__btn:focus-visible,
.lw-poll-card__btn:active {
  background: var(--lw-red) !important;
  border-color: var(--lw-red) !important;
  color: #fff !important;
  outline: none;
}
.lw-poll-card__btn[hidden] { display: none; }
.lw-poll-card__voted {
  margin: 0;
  color: var(--lw-muted);
  font-size: var(--lw-fs-sm);
}
.lw-poll-card__voted[hidden] { display: none; }

/* ── Poll in the first in-article banner (Alice, 2026-10-12) ──────────
   The same poll card, drawn as a faint-tint band with a red top rule across the article column.
   Alice tried navy, white and gold on 2026-10-12 and settled on this: it is the
   template for in-article banners. */
.lw-poll-banner { margin: var(--lw-s6) 0; }
.lw-poll-banner { position: relative; }
.lw-poll-banner__tag {
  position: absolute;
  top: -0.55rem;
  left: var(--lw-s5);
  z-index: 1;
  background: #fff;
  padding: 0 0.55rem;
  border: 1px solid var(--lw-border);
  border-radius: 999px;
  color: var(--lw-muted);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
}
.lw-poll-banner .lw-poll-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--lw-s5);
  row-gap: var(--lw-s2);
  align-items: start;
  padding: var(--lw-s4) var(--lw-s5);
  background: #f4f6f9;
  border: 1px solid var(--lw-border);
  border-top: 3px solid var(--lw-red);
  color: var(--lw-ink);
}
/* The text wrapper dissolves here so the question and the button share a row:
   the question's first line lines up with the top of the Vote button. */
.lw-poll-banner .lw-poll-card__text { display: contents; }
.lw-poll-banner .lw-poll-card__topic,
.lw-poll-banner .lw-poll-card__q,
.lw-poll-banner .lw-poll-card__desc { grid-column: 1; }
.lw-poll-banner .lw-poll-card__q { font-size: var(--lw-fs-md); margin: 0 !important; }
.lw-poll-banner .lw-poll-card__desc { font-size: var(--lw-fs-sm); }
.lw-poll-banner .lw-poll-card__foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
.lw-poll-banner .lw-poll-card:has(.lw-poll-card__topic) .lw-poll-card__foot { grid-row: 2; }
.lw-poll-banner .lw-poll-card__voted { max-width: 12rem; }
@media (max-width: 640px) {
  .lw-poll-banner .lw-poll-card { grid-template-columns: 1fr; }
  .lw-poll-banner .lw-poll-card__foot,
  .lw-poll-banner .lw-poll-card:has(.lw-poll-card__topic) .lw-poll-card__foot { grid-column: 1; grid-row: auto; padding-top: var(--lw-s2); }
}

.lw-poll-more {
  display: flex;
  justify-content: center;
  margin-top: var(--lw-s5);
}
.lw-poll-more[hidden] { display: none; }
.lw-poll-more__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s5);
  background: var(--lw-field);
  border: 1px solid var(--lw-border-strong);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.lw-poll-more__btn:hover,
.lw-poll-more__btn:focus-visible {
  background: var(--lw-border) !important;
  color: var(--lw-ink) !important;
  outline: none;
}

.lw-poll-modal {
  width: min(440px, calc(100vw - 2 * var(--lw-s4)));
  max-height: min(85dvh, 640px);
  padding: 0;
  border: 0;
  border-radius: var(--lw-radius);
  background: #fff;
  box-shadow: var(--lw-shadow-card);
  color: var(--lw-ink);
}
.lw-poll-modal { overflow-x: hidden; box-sizing: border-box; }
.lw-poll-modal__form { box-sizing: border-box; }
.lw-poll-modal .lw-poll__opts li label { position: relative; }
.lw-poll-modal::backdrop { background: rgba(1, 28, 60, 0.45); }
.lw-poll-modal__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lw-s3);
  padding: var(--lw-s5);
}
.lw-poll-modal__close {
  position: absolute;
  z-index: 1;
  top: var(--lw-s3);
  right: var(--lw-s3);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lw-field) !important;
  color: var(--lw-ink) !important;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lw-poll-modal__close:hover { background: var(--lw-border) !important; }
.lw-poll-modal__kicker {
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-poll-modal__q {
  margin: 0;
  padding-right: var(--lw-s6);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-poll-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--lw-s3);
}
.lw-poll-modal__cancel {
  padding: var(--lw-s3) var(--lw-s4);
  background: transparent !important;
  border: 0;
  color: var(--lw-muted) !important;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.lw-poll-modal__cancel:hover { color: var(--lw-ink) !important; }

/* Nav "Soon" row (Quizzes, 2026-09-23) — visible, never a link. */
.lw-nav__soon {
  display: block;
  padding: var(--lw-s1) var(--lw-s2);
  color: var(--lw-muted);
  font-weight: 500;
  cursor: default;
}
.lw-nav__soon em {
  margin-left: var(--lw-s1);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--lw-field);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Poll status message (2026-08-20) — was unstyled, inheriting plain body
   text, which read too faint against the nudge panel (Alice: "should be
   darker and in bold so I can see it better"). Now the pop-up's own
   status line (errors, "Submitting…"). */
.lw-poll__status {
  margin: 0;
  color: var(--lw-ink);
  font-weight: 700;
}
.lw-poll__status:empty { display: none; }
.lw-poll__status.is-error { color: var(--lw-red); }

/* Homepage banner spans the full shell width rather than sitting in a column. */
.lw-ad--homepage-banner {
  max-width: var(--lw-max);
  margin: var(--lw-s5) auto 0;
  padding-inline: var(--lw-s5);
}

/* In-article text ad — deliberately plainer, it sits mid-prose. */
.lw-ad--article-inline-text {
  margin-block: var(--lw-s5);
}

/* SITE_POPUP (W6) — only ever rendered when a real creative exists
   (inc/ad-zones.php's lawryse_render_site_popup()), so no [hidden] state
   here needs to account for "empty popup". */
.lw-popup[hidden] { display: none; }
.lw-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lw-s5);
}
.lw-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 16, 29, 0.6);
}
.lw-popup__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--lw-radius);
  background: #fff;
  padding: var(--lw-s5);
  box-shadow: var(--lw-shadow-soft);
}
.lw-popup__panel .lw-ad__unit { border: 0; padding: 0; background: none; }
.lw-popup__close {
  position: absolute;
  top: var(--lw-s3);
  right: var(--lw-s3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--lw-field);
  color: var(--lw-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lw-popup__close:hover { background: var(--lw-border); }
/* Prevent background scroll while the popup is open. */
body.lw-popup-open { overflow: hidden; }

/* ── Sidebar widgets ─────────────────────────────────────────────── */

.lw-widget {
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius);
  padding: var(--lw-s5);
  background: #fff;
}

.lw-widget__title {
  margin: 0 0 var(--lw-s4);
  padding-bottom: var(--lw-s3);
  border-bottom: 2px solid var(--lw-red);   /* red as a RULE, not a slab */
  font-size: var(--lw-fs-md);
  font-weight: 600;
  color: var(--lw-ink);
}

.lw-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lw-widget li + li {
  margin-top: var(--lw-s3);
  padding-top: var(--lw-s3);
  border-top: 1px solid var(--lw-border);
}

/* Popular Reads — headline only, no thumbnail (Alice, 2026-08-03).
   Base .lw-widget ul/li rules already give the list-style:none and the
   divider between rows; this just styles the link itself. */
.lw-popular-reads__link {
  display: block;
  color: var(--lw-ink);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: var(--lw-lh-snug);
}
.lw-popular-reads__link:hover { color: var(--lw-red); }

.lw-widget--ad-placeholder {
  border-style: dashed;
  border-color: var(--lw-border-strong);
  background: var(--lw-canvas-alt);
  text-align: center;
}
.lw-widget--ad-placeholder .lw-ad__label { margin-bottom: var(--lw-s2); }

/* ── Card system — ONE component, three sizes ────────────────────────
   Used by the homepage grid, category rows and the sidebar in W3. Defined
   here in W1 because it IS the design system: three sizes is the rule that
   stops the six-competing-styles problem in the reference sites.        */

.lw-card {
  display: flex;
  flex-direction: column;
  gap: var(--lw-s3);
  min-width: 0;
}

.lw-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--lw-radius);
  background: var(--lw-field);
  aspect-ratio: 16 / 9;
  /* Capped so a 2-up card (wider column, Alice, 2026-08-03) doesn't grow
     the image purely because the column got wider — same fix as the
     Expert Insights portrait box, .lw-card--hero excluded (it needs the
     room). */
  max-height: 220px;
}
.lw-card--hero .lw-card__media { max-height: none; }
.lw-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.lw-card:hover .lw-card__media img { transform: scale(1.03); }

/* Category label — plain red caps under the image, no pill (Alice's
   reference screenshot, 2026-08-03; was a filled pink chip before). */
.lw-card__kicker {
  align-self: flex-start;
  padding: 0;
  background: none;
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lw-card__title {
  margin: 0;
  font-size: var(--lw-fs-md);
  line-height: var(--lw-lh-snug);
  font-weight: 600;
}
.lw-card__title a { color: var(--lw-ink); }
.lw-card__title a:hover { color: var(--lw-red); }

/* The standfirst on a card (Alice, 2026-08-02: "cut the summary to much less
   wording... make the fonts much smaller in the summary on the website").
   TWO separate problems in her screenshot: the type was the same size as body
   copy, and — because summaries run from one line to six — the cards in a row
   ended at wildly different heights, which is what made the grid look untidy.
   Smaller type fixes the first; the clamp fixes the second WITHOUT depending on
   every summary being written to the same length, which no editorial process
   ever achieves. The full standfirst still prints on the article page. */
.lw-card__excerpt {
  margin: 0;
  font-size: var(--lw-fs-xs);
  line-height: 1.5;
  color: var(--lw-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lw-card__meta {
  font-size: var(--lw-fs-xs);
  color: var(--lw-muted);
}

/* Size 1 — hero. */
.lw-card--hero .lw-card__title { font-size: var(--lw-fs-2xl); letter-spacing: -0.02em; }
/* The hero gets a touch more room — it is the one card with space. */
.lw-card--hero .lw-card__excerpt { font-size: var(--lw-fs-sm); -webkit-line-clamp: 4; }
.lw-card__readmore { margin: var(--lw-s3, 0.75rem) 0 0; }

/* Size 2 — standard (the grid default) is the base .lw-card above. */

/* Size 3 — compact sidebar card (the satire teaser and future dense lists).
   Rebuilt 2026-08-07 (Alice: "pic on top, and just the head[line], not the
   dates") — a small VERTICAL card (image on top, base .lw-card's own
   column layout, unchanged), not the horizontal thumbnail-beside-text row
   this used to be. Kicker stays (it's the accessible satire label); excerpt
   and the date/read-time meta line are dropped — a sidebar teaser needs
   just enough to make someone click. */
.lw-card--row .lw-card__media { max-height: 140px; }
.lw-card--row .lw-card__title { font-size: var(--lw-fs-sm); }
.lw-card--row .lw-card__excerpt,
.lw-card--row .lw-card__meta { display: none; }

/* Stack of 'row' cards in a sidebar widget — the satire teaser (Alice,
   2026-08-07). */
.lw-satire-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--lw-s4);
}

/* ── Section headings ────────────────────────────────────────────── */

.lw-section { margin-bottom: var(--lw-s7); }

.lw-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--lw-s3);
  margin: 0 0 var(--lw-s5);
  padding-bottom: var(--lw-s3);
  border-bottom: 1px solid var(--lw-border);
  font-size: var(--lw-fs-lg);
}
.lw-section__title::before {
  content: "";
  width: 4px;
  height: 1em;
  background: var(--lw-red);
  border-radius: 2px;
}

/* ── Single article ──────────────────────────────────────────────── */

.lw-article__title {
  font-size: var(--lw-fs-3xl);
  margin-bottom: var(--lw-s4);
}

.lw-article__body {
  font-size: var(--lw-fs-md);
  line-height: var(--lw-lh-body);
}
.lw-article__body h2 { margin-top: var(--lw-s6); }
.lw-article__body h3 { margin-top: var(--lw-s5); }
.lw-article__body ul,
.lw-article__body ol { margin: 0 0 var(--lw-s4) var(--lw-s5); }
.lw-article__body li { margin-bottom: var(--lw-s2); }

@media (max-width: 767px) {
  :root { --lw-fs-3xl: 2rem; --lw-fs-2xl: 1.625rem; }
}

/* Wide content must scroll inside its own container, never the page body. */
.lw-article__body table,
.lw-article__body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────
   SATIRE CARD TREATMENT (MASTER §12.5.4 — Alice's design, 2026-08-01)

   Applied AUTOMATICALLY to any article whose format is Satire, everywhere a
   card appears: homepage blocks, sidebars, category rows, featured cards,
   related articles, search results.

   The badge sits INSIDE the image area on purpose. Lawryse's distribution is
   social, so cards get cropped and screenshotted constantly — a label living
   in the surrounding page furniture is lost the moment the card travels, which
   is exactly when the reader has least context. The yellow rules above and
   below the image tie the badge to the card so the pairing survives a crop.

   Everything degrades without a thumbnail: the kicker and the top rule carry
   the treatment on text-only cards, so it can never depend on an image
   existing.
   ───────────────────────────────────────────────────────────── */

.lw-card--satire .lw-card__media {
  position: relative;
  border-radius: var(--lw-radius);
  border-top: 5px solid var(--lw-satire);
  border-bottom: 5px solid var(--lw-satire);
  /* The base .lw-card__media is border-box with a fixed aspect-ratio, so a
     border normally eats into the CONTENT area — object-fit: cover then
     crops that little bit tighter, which is what was clipping Alice's
     baked-in "SATIRE" text near the image edge (2026-08-07). content-box
     here means the border adds to the total size instead, and the image
     keeps its full intended crop. */
  box-sizing: content-box;
}

/* The corner "SATIRE" badge was removed 2026-08-07 (Alice) — her satire
   featured images now carry the word baked in themselves, inside this same
   yellow frame, so an overlaid label repeated it a third time on one card.
   The frame above/below the image and the grey kicker below (next rule)
   remain: between the two, satire is still labelled by real, accessible
   text (the kicker) wherever a card renders, image or not — §12.5.4's
   actual requirement, just carried by one element instead of two. */

/* The kicker replaces the practice-area chip on a satire card: what a reader
   most needs to know about this piece is that it is a joke, not that it is
   about Family Law. Flat and grey rather than another yellow block, so the
   badge stays the loud element and the card doesn't shout twice. */
.lw-card--satire .lw-card__kicker {
  background: transparent;
  color: var(--lw-muted);
  padding-inline: 0;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* Text-only fallback — no thumbnail, so the rule carries the signal. */
.lw-card--satire:not(:has(.lw-card__media)) {
  border-top: 5px solid var(--lw-satire);
  padding-top: var(--lw-s3);
}

/* ── Generic page content (About, Advertise, White Papers, Events…) ─── */

.lw-page__content {
  max-width: 46rem;
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
}
.lw-page__content p { margin: 0 0 var(--lw-s4); }

/* A deliberately understated text CTA — a paragraph-style page's own
   secondary link (e.g. About's "Are you an attorney?"), never a button,
   so it stays visually secondary to the page's real public-facing content. */
.lw-subtle-link {
  color: var(--lw-navy);
  text-decoration: underline;
}
.lw-subtle-link:hover { color: var(--lw-red); }

/* A code-level "Coming Soon" ribbon overlaid on a house-ad image (the
   LARIA card, 2026-09-21) — never baked into the artwork, so it's a
   one-line removal (drop the 'badge' key, house-ads.php) at Full
   Commercial Activation rather than a re-export of the image. */
.lw-house-ad-badge-wrap { position: relative; display: block; }
.lw-house-ad__badge {
  position: absolute;
  top: var(--lw-s3);
  right: var(--lw-s3);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--lw-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* A visible, labelled "not built yet" stub (Rule L) — never a bare gap. */
.lw-coming-soon {
  max-width: 46rem;
  padding: var(--lw-s5);
  border: 1px dashed var(--lw-border-strong);
  border-radius: var(--lw-radius);
  background: var(--lw-canvas-alt);
}
.lw-coming-soon__badge {
  display: inline-block;
  margin-bottom: var(--lw-s3);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--lw-ink);
  color: #fff;
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-coming-soon p {
  margin: 0;
  color: var(--lw-body);
  line-height: var(--lw-lh-snug);
}

/* ── Subscribe banner (Alice, 2026-08-10) — just above the footer, every
   page. Real designed artwork, not a card component: full width up to the
   shell max, no forced aspect ratio (the graphic is its own wide banner
   shape, ~8:1). */
/* ── "Stay updated with Lawryse" banner ──────────────────────────────
   Rebuilt as real markup 2026-09-10 (was one baked PNG that squashed on
   phones). One row on desktop; reflows to a stack on small screens. */
.lw-subscribe-banner {
  max-width: var(--lw-max);
  margin: var(--lw-s7) auto 0;
  padding-inline: var(--lw-s5);
}
.lw-subscribe-banner__inner {
  display: flex;
  align-items: stretch;
  gap: var(--lw-s5);
  padding-right: var(--lw-s5);
  background: var(--lw-canvas);
  border: 2px solid var(--lw-ink);
  border-radius: var(--lw-radius);
  box-shadow: var(--lw-shadow-card);
  overflow: hidden;
}

/* Navy left block with the letterspaced wordmark + a short red rule —
   flush to the frame's left/top/bottom, like a split card. */
.lw-subscribe-banner__brand {
  display: flex;
  flex: none;
  align-items: center;
  padding: var(--lw-s5) var(--lw-s5);
  background: var(--lw-ink);
  color: #fff;
  font-family: var(--lw-font-head);
  font-weight: 700;
  font-size: var(--lw-fs-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lw-subscribe-banner__brand::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-left: 0.6em;
  background: var(--lw-red);
}

/* The middle column: headline + copy, then the feature pills in one
   straight centred line beneath them (Alice, 2026-09-10 — the pills used
   to wrap 2-then-1 in the flex row, which read as disjointed). */
.lw-subscribe-banner__main {
  flex: 1 1 20rem;
  align-self: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lw-s3);
  padding-block: var(--lw-s4);
}
.lw-subscribe-banner__body { min-width: 0; }
.lw-subscribe-banner__title {
  margin: 0 0 var(--lw-s1);
  font-family: var(--lw-font-head);
  font-weight: 700;
  font-size: var(--lw-fs-lg);
  color: var(--lw-ink);
}
.lw-subscribe-banner__text {
  margin: 0;
  font-size: var(--lw-fs-sm);
  color: var(--lw-muted);
  line-height: var(--lw-lh-snug);
}
.lw-subscribe-banner__text strong { color: var(--lw-body); }

/* The three feature pills — one straight, centred line. */
.lw-subscribe-banner__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lw-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lw-subscribe-banner__feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s3);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--lw-body);
  white-space: nowrap;
}
.lw-subscribe-banner__feature-icon {
  display: inline-flex;
  flex: none;
  color: var(--lw-red);
}
.lw-subscribe-banner__feature-icon svg { width: 18px; height: 18px; }

/* The CTA — a rounded-rect red button, not the pill .lw-btn variant. */
.lw-subscribe-banner__cta {
  position: relative;
  display: inline-flex;
  flex: none;
  align-self: center;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s3) var(--lw-s5);
  background: var(--lw-red);
  color: #fff;
  font-family: var(--lw-font-head);
  font-weight: 700;
  font-size: var(--lw-fs-sm);
  letter-spacing: 0.02em;
  border-radius: var(--lw-radius-sm);
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lw-subscribe-banner__cta:hover,
.lw-subscribe-banner__cta:focus-visible {
  background: var(--lw-red-dark);
  color: #fff;
  transform: translateY(-1px);
}
.lw-subscribe-banner__arrow { width: 18px; height: 18px; }

/* Stack: navy strip on top, then copy + pills, then a full-width CTA. */
@media (max-width: 900px) {
  .lw-subscribe-banner__inner {
    flex-wrap: wrap;
    gap: 0;
    padding-right: 0;
  }
  .lw-subscribe-banner__brand { width: 100%; justify-content: center; }
  .lw-subscribe-banner__main {
    flex-basis: 100%;
    padding: var(--lw-s4) var(--lw-s4) 0;
  }
  .lw-subscribe-banner__features { justify-content: stretch; }
  .lw-subscribe-banner__feature { flex: 1 1 100%; }
  .lw-subscribe-banner__cta {
    width: calc(100% - 2 * var(--lw-s4));
    margin: var(--lw-s4);
    justify-content: center;
  }
}

/* ── Footer ────────────────────────────────────────────────────────── */

.lw-footer {
  background: var(--lw-ink);
  color: #fff;
  margin-top: var(--lw-s8);
}

.lw-footer__inner {
  max-width: var(--lw-max);
  margin-inline: auto;
  padding: var(--lw-s7) var(--lw-s5);
  display: flex;
  flex-direction: column;
  gap: var(--lw-s6);
}

/* Social icons — Alice, 2026-08-03: top-right of the footer. */
.lw-footer__social {
  display: flex;
  justify-content: flex-end;
  gap: var(--lw-s4);
}
.lw-footer__social-link {
  display: flex;
  color: rgba(255, 255, 255, 0.75);
}
.lw-footer__social-link:hover { color: #fff; }
.lw-footer__social-link svg { width: 18px; height: 18px; }

.lw-footer__newsletter-title {
  margin: 0 0 var(--lw-s2);
  color: #fff;
  /* Alice, 2026-08-03: "FOOTER fonts should be much smaller" — a step
     below the sitewide reduction, not just inheriting it. */
  font-size: var(--lw-fs-md);
}
.lw-footer__newsletter-lede {
  margin: 0 0 var(--lw-s4);
  max-width: 32rem;
  color: var(--lw-border-strong);
  font-size: var(--lw-fs-xs);
  line-height: var(--lw-lh-snug);
}
.lw-footer__newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s2);
  max-width: 26rem;
}
.lw-footer__newsletter-form .lw-field { flex: 1 1 0; }

/* W8, built 2026-08-28 — the fetch() result message under the footer form. */
.lw-footer__newsletter-status {
  flex-basis: 100%;
  margin: var(--lw-s1) 0 0;
  font-size: var(--lw-fs-xs);
  color: var(--lw-border-strong);
  min-height: 1em;
}
.lw-footer__newsletter-status.is-error { color: var(--lw-red); }

/* ── /subscribe/ page (W8, built 2026-08-28) ────────────────────── */

.lw-subscribe-page {
  max-width: 28rem;
  padding: var(--lw-s6) var(--lw-s5);
  background: var(--lw-canvas-alt);
  border-radius: var(--lw-radius);
}
.lw-subscribe-page__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s2);
}
.lw-subscribe-page__form .lw-field { flex: 1 1 14rem; }
.lw-subscribe-page__error {
  margin: 0 0 var(--lw-s3);
  font-size: var(--lw-fs-sm);
  color: var(--lw-red);
}
.lw-subscribe-page__fineprint {
  flex-basis: 100%;
  margin: var(--lw-s3) 0 0;
  font-size: var(--lw-fs-xs);
  color: var(--lw-muted);
  line-height: var(--lw-lh-snug);
}
.lw-subscribe-page__fineprint a { color: inherit; text-decoration: underline; }
.lw-subscribe-page__result {
  font-family: var(--lw-font-head);
}
.lw-subscribe-page__result p { margin: 0 0 var(--lw-s2); font-size: var(--lw-fs-sm); color: var(--lw-ink); }
.lw-subscribe-page__result p:last-child { margin-bottom: 0; }

/* ── /events/ listing (W9, built 2026-08-28) ────────────────────── */

.lw-events-list {
  display: grid;
  gap: var(--lw-s5);
  padding: 0;
  list-style: none;
}
.lw-events-list__item {
  padding: var(--lw-s5);
  background: var(--lw-canvas-alt);
  border-radius: var(--lw-radius);
  border-left: 3px solid var(--lw-red);
}
.lw-events-list__title {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 600;
  color: var(--lw-ink);
}
.lw-events-list__meta {
  margin: 0 0 var(--lw-s1);
  font-size: var(--lw-fs-sm);
  color: var(--lw-muted);
}
.lw-events-list__desc {
  margin: var(--lw-s3) 0 0;
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-snug);
  color: var(--lw-ink);
}

/* ── Cookie banner (W9, built 2026-08-28; fixed 2026-08-29) ───────
   Was z-index:60 — below the sidebar's own stacking context (100) AND
   the LARIA launcher (200, laria.css), so both painted over it the
   moment either was in view. This is the same "fixed/sticky wrapper
   needs its own explicit z-index" lesson as the sidebar comment above
   and the poll nudge — the banner sits highest of anything on the page
   on purpose, so its z-index must beat every other fixed overlay, not
   just look high in isolation. Background switched navy → red (Alice:
   "one of those slightly annoying ones so they get it out of the
   way") — the accept button flips to --light (white) so it still
   reads against the red instead of disappearing into it. */
/* The [hidden] guard — WITHOUT this, `display: flex` below (specificity
   0,1,0, and later in the cascade) beats the UA stylesheet's
   `[hidden] { display: none }`, so the JS setting `banner.hidden = true`
   on "Got it" does nothing and the banner never dismisses. Same guard
   `.lw-popup[hidden]` and `.lw-laria__screen[hidden]` already carry. */
.lw-cookie-banner[hidden] { display: none; }
.lw-cookie-banner {
  position: fixed;
  /* Left-anchored, not centred (Alice, 2026-09-23: centred-and-stretched
     put it dead centre of the bottom edge, colliding with the LARIA
     launcher that docks bottom-right — "it just ends up looking like the
     website is broken and messy"). Docking left keeps it clear of LARIA
     and the poll-nudge tab entirely, rather than juggling z-index/spacing
     between the two every time either one's size changes. */
  left: var(--lw-s4);
  right: auto;
  bottom: var(--lw-s4);
  z-index: 300;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lw-s4);
  width: min(40rem, calc(100vw - 2 * var(--lw-s4)));
  padding: var(--lw-s4) var(--lw-s5);
  background: var(--lw-red);
  color: #fff;
  border-radius: var(--lw-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.lw-cookie-banner__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--lw-fs-xs);
  line-height: var(--lw-lh-snug);
}
.lw-cookie-banner__text a { color: #fff; text-decoration: underline; }
.lw-cookie-banner__accept { flex-shrink: 0; }

/* ── Draft-legal-document notice (W9, built 2026-08-28) — same "not yet
   reviewed" warning the dashboard's LegalDocument component shows,
   reused here for the one legal document that lives on lawryse.com
   itself rather than the dashboard. ─────────────────────────────── */
.lw-legal-draft-notice {
  max-width: 46rem;
  margin: 0 0 var(--lw-s5);
  padding: var(--lw-s4);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--lw-radius);
  color: #92400e;
  font-size: var(--lw-fs-sm);
}

/* 4 columns — Lawryse, Legal, Stay informed, Disclaimer (Alice's
   reference screenshot, 2026-08-03). Grid, not the old flex-wrap: with
   the newsletter form and the disclaimer paragraph both variable-width,
   a grid keeps all four the same width instead of wrapping unevenly. */
.lw-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lw-s7);
  align-items: start;
}
@media (max-width: 1023px) {
  .lw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lw-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

.lw-footer__col-title {
  margin: 0 0 var(--lw-s3);
  color: var(--lw-border-strong);
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lw-footer__col ul { list-style: none; margin: 0; padding: 0; }
.lw-footer__col li + li { margin-top: var(--lw-s2); }
.lw-footer__col a {
  color: #fff;
  font-size: var(--lw-fs-xs);
}
.lw-footer__col a:hover { color: var(--lw-red); }
.lw-footer__col--disclaimer p {
  margin: 0;
  color: var(--lw-border-strong);
  font-size: var(--lw-fs-xs);
  line-height: var(--lw-lh-snug);
}

.lw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lw-s1);
  max-width: var(--lw-max);
  margin-inline: auto;
  padding: var(--lw-s4) var(--lw-s5);
}
.lw-footer__bottom p {
  margin: 0;
  color: var(--lw-border-strong);
  font-size: var(--lw-fs-xs);
  text-align: center;
}
.lw-footer__bottom a { color: var(--lw-border-strong); text-decoration: underline; }
.lw-footer__bottom a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE LEGIBILITY PASS (Alice, 2026-08-25, from a real handset:
   "the website itself looks pretty terrible at the top… font in
   mobile (only) needs to be a size bigger").

   Measured on staging at 375px before changing anything, because
   "looks small" has several possible causes and guessing between
   them is how you fix the wrong one:

     · root font-size resolved to 14.59px, not 16px
     · the attorney-search fields rendered at 10.94px in 32px boxes
     · "Area of Practice" and "Province" sat side by side at 182px
       and 117px on a 375px screen

   Everything here is scoped to ≤767px. Desktop is untouched —
   Alice's words were "desktop works great", and it does.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ⚑ THE PARENT THEME OWNS THE ROOT FONT SIZE, and it is shrinking it.
     Astra's Customizer emits `html { font-size: 91.2% }` below 921px and
     again below 544px — invisible to this repo, invisible to code review,
     and the reason EVERY rem on the site renders ~9% small on a phone.
     Nothing in the child theme was wrong, which is exactly the trap the
     container-width fight taught (see CURRENT's Standing Rules): measure
     the rendered page before reading the source.

     Pinned back to the browser default here. `!important` matches the
     posture already used against Astra's inline customizer CSS elsewhere —
     there is no filter to hook for this one, and equal specificity against
     an inline <style> that loads later is a fight we would lose. */
  html { font-size: 100% !important; }

  /* ── The attorney search: stack it ──────────────────────────────
     Four controls in one horizontal row needs ~500px to breathe. At
     375px they were being crushed to 117–182px each with 10.9px text.
     Stacked, each gets the full width and can be read and tapped. */
  .lw-attsearch__fields {
    flex-direction: column;
    gap: 0;
  }
  .lw-attsearch__cell {
    flex: 1 1 auto;
    width: 100%;
  }
  .lw-attsearch__form input.lw-attsearch__control,
  .lw-attsearch__form select.lw-attsearch__control {
    width: 100% !important;
    min-width: 0;
    /* 1rem = 16px, and that number is not cosmetic: iOS Safari zooms the
       whole page in when a focused input is under 16px, which is its own
       kind of broken — the user taps a field and the layout lurches. */
    font-size: 1rem !important;
    /* ~44px total height — the minimum comfortable touch target. The old
       32px was a mouse-sized control on a touch screen. */
    padding: 0.7rem 1.75rem 0.7rem var(--lw-s3) !important;
    /* Stacked, the separator belongs between rows, not beside them. */
    border-right: 0 !important;
    border-bottom: 1px solid var(--lw-border) !important;
  }
  /* Rounding follows the new axis: first row tops, last row bottoms. */
  .lw-attsearch__fields > .lw-attsearch__control:first-child,
  .lw-attsearch__fields > .lw-attsearch__cell:first-child .lw-attsearch__control {
    border-radius: var(--lw-radius-sm) var(--lw-radius-sm) 0 0 !important;
  }
  .lw-attsearch__fields > .lw-attsearch__control:last-child,
  .lw-attsearch__fields > .lw-attsearch__cell:last-child .lw-attsearch__control {
    border-bottom: 0 !important;
    border-radius: 0 0 var(--lw-radius-sm) var(--lw-radius-sm) !important;
  }

  /* ═══ THE HERO, DECLUTTERED (Alice, 2026-08-25) ═══
     "People should reach the news website and see features first."

     Before: a four-field attorney search, a red practice-area ticker and a
     stacked section list — the entire first screen of a phone spent before
     a single headline. After: logo, one search bar, one hamburger, then
     articles. Register / Login stay visible (Alice's choice); the ticker
     and the whole nav go behind the button.

     ⚑ EVERY COLLAPSE IS GATED ON `.lw-js`. The class is added by script, so
     if that script never runs the nav renders open and long instead of
     closed and unopenable. Navigation must not be the thing that breaks
     when JavaScript does. */

  /* ── Banner row: burger far left, on the logo's line ────────────
     Alice: "like most mobile hamburgers… not the middle underneath the
     logo." It was centred below because the mobile grid was a single
     centred column. Two columns now — burger, then logo — with the
     Register/Login row dropping underneath on its own line. */
  .lw-attorney-banner__inner {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: var(--lw-s3);
  }
  /* Rows are pinned explicitly. With only grid-column set, auto-placement
     put the logo in row 1 and pushed the burger to row 2 — because the logo
     comes first in the DOM and claimed column 2 of the first row, leaving
     the burger to start a new one. That is exactly the "centred underneath
     the logo" Alice was looking at, just one column to the left. */
  .lw-burger { grid-column: 1; grid-row: 1; }
  .lw-attorney-banner__logo { grid-column: 2; grid-row: 1; justify-self: start; }
  .lw-attorney-banner__right {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  /* The attorney search leaves the hero completely — it is now the last
     row of the menu (see inc/nav.php). This is the single biggest thing
     standing between a visitor and a headline. */
  .lw-attorney-banner__search { display: none; }

  .lw-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;               /* full touch target, not an icon-sized tap */
    height: 44px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--lw-radius-sm);
    background: transparent;
    cursor: pointer;
  }
  /* Three bars drawn from one element — the middle is the box's own
     background, the outer two are box-shadows. Fewer nodes than three
     spans, and the "X" state is a transform away rather than a re-render. */
  .lw-burger__bars,
  .lw-burger__bars::before,
  .lw-burger__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .lw-burger__bars::before,
  .lw-burger__bars::after {
    content: "";
    position: relative;
  }
  .lw-burger__bars::before { top: -6px; }
  .lw-burger__bars::after  { top: 4px; }
  .lw-nav-open .lw-burger__bars { background: transparent; }
  .lw-nav-open .lw-burger__bars::before { transform: translateY(6px) rotate(45deg); }
  .lw-nav-open .lw-burger__bars::after  { transform: translateY(-4px) rotate(-45deg); }

  /* The decorative practice-area ticker is pure noise on a phone — it is
     already aria-hidden, so nothing is lost by removing it visually. */
  .lw-ticker { display: none; }

  /* The nav itself, behind the button. */
  .lw-js .lw-nav { display: none; }
  .lw-js.lw-nav-open .lw-nav { display: block; }
  .lw-nav__list { flex-direction: column; align-items: stretch; }
  .lw-nav__link {
    display: block;
    padding: 0.85rem var(--lw-s4);
    font-size: 1rem;
  }
  /* A dropdown inside a stacked menu should push the list down, not float
     over it — an overlay panel inside an overlay panel is a maze. */
  .lw-nav__panel,
  .lw-nav__panel--topics {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    columns: initial !important;
  }
  .lw-nav__panel--topics { display: block !important; }
  .lw-nav__col { padding-left: var(--lw-s4); }

  /* ⚑ THE MENU MUST BE CLOSEABLE FROM WHERE IT OPENS (Alice: "once you
     open the menu, there is no way to close it again and keep browsing").

     The bug was subtle and entirely invisible to my own testing, which
     clicked the button twice and saw it toggle correctly. On a real phone
     the open menu is longer than the screen, so the moment you scroll to
     read it the banner — and the X with it — scrolls away off the top.
     The toggle worked perfectly; it just could not be reached.

     Sticking the banner while the menu is open keeps the X where the
     thumb expects it. Escape and tapping any menu link also close it (see
     inc/mobile-nav.php), but neither is any use to someone halfway down a
     list on a touch screen. */
  .lw-nav-open .lw-attorney-banner {
    position: sticky;
    top: 0;
    z-index: 60;
  }
  /* The panel scrolls under the banner rather than the page scrolling
     behind it — no "which thing am I scrolling" confusion.
     
     ⚑ TWO FIXES HERE, both from Alice reaching Subscriptions and stopping:
     
     1. `--lw-banner-h` is MEASURED, not guessed. The old
        `calc(100vh - 3.5rem)` assumed a one-line banner; the real one is
        two rows (logo + Register/Login), so the panel was sized taller
        than the space it had and its last rows fell off the bottom with
        nothing to scroll them into view. inc/mobile-nav.php sets the real
        height on open.
     
     2. `padding-bottom` clears the LARIA launcher. It is fixed to the
        bottom of the screen and was sitting on top of the final menu
        entries — Alice: "the LARIA app blocks whatever else there is, and
        I can't scroll down further." She wants LARIA exactly where it is,
        so the menu gets out of ITS way rather than the reverse: the extra
        padding means the last row can always be scrolled clear above it.
     
     `dvh` tracks the mobile browser's collapsing address bar; `vh` does
     not, and the difference is roughly one menu row. */
  .lw-nav-open .lw-nav {
    max-height: calc(100vh - var(--lw-banner-h, 7rem));
    max-height: calc(100dvh - var(--lw-banner-h, 7rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 5.5rem;
  }

  /* ── House ad shells ────────────────────────────────────────────
     The teal shell's padding is sized for a desktop column. On a 375px
     screen it was eating 72px — the creative rendered 245px wide inside a
     317px slot, so nearly a quarter of the width went to margin around a
     picture that was already too small to read. */

  /* The ad wrapper's own 24px side inset goes too. Measured: every sibling
     on the page (.lw-hero, .lw-sec) starts at x=32, while the ad's creative
     started at x=56 — so that inset was not aligning the ad to the page
     grid, it was indenting it PAST the grid, and charging 48px of a 375px
     screen for the privilege. Removing it lines the creative up with
     everything else AND is the single biggest width win here. */
  .lw-ad { padding-inline: 0; }
}

/* ── Mobile hamburger + collapsed search: desktop hides both ────────
   Scoped to a MIN-WIDTH query rather than left unscoped. Unscoped, this
   sits after the mobile block in source order and — at equal specificity —
   wins at every width, which hid the hamburger AND the nav it opens: a menu
   with no way in. Caught on staging within a minute of deploying, but it is
   the kind of thing that reads as fine in the diff. */
@media (min-width: 768px) {
  .lw-burger,
  .lw-nav__item--mobile-only { display: none; }
}

/* Poll option rows — moved here from home.css (2026-09-23) so the vote
   pop-up is styled on every page, not only those that load home.css. */
.lw-poll__opts { margin: 0; padding: 0; list-style: none; }
/* Tighter row spacing (Alice, 2026-08-10) — the old var(--lw-s2) padding
   read as a long poll even for a normal-length one, especially once a
   4th "Other" option is added. */
.lw-poll__opts li {
  display: flex; align-items: center; gap: var(--lw-s3);
  padding: 4px 0;
  font-size: var(--lw-fs-sm);
  border: 0;
  margin: 0;
}
.lw-poll__dot {
  width: 14px; height: 14px; flex: none;
  border: 1px solid var(--lw-border-strong);
  border-radius: 50%;
}

/* Poll — real voting (W7). .lw-poll__opts li now wraps a <label><input></label>
   instead of plain text; the radio replaces the decorative dot visually but
   the dot stays in the markup as its checked-state ring. */
.lw-poll__opts li label {
  display: flex; align-items: center; gap: var(--lw-s3);
  cursor: pointer;
}
.lw-poll__opts input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 14px; height: 14px;
}
.lw-poll__opts input[type="radio"]:checked + .lw-poll__dot {
  border-color: var(--lw-red);
  background: var(--lw-red);
  box-shadow: inset 0 0 0 2px #fff;
}
.lw-poll__opts input[type="radio"]:focus-visible + .lw-poll__dot {
  outline: 2px solid var(--lw-red);
  outline-offset: 2px;
}


/* Poll options read larger inside the pop-up than in the old sidebar form. */
.lw-poll-modal .lw-poll__opts li {
  padding: 6px 0;
  font-size: var(--lw-fs-base);
}

/* ── "From the polls" + the Polls page's "View results" link (2026-09-23) */
.lw-polls-head { position: relative; }
/* One identical head on both poll tabs, so switching tabs only swaps the
   content below. Pinned here because archive.css (loaded on the results
   page only, it's a format archive) would otherwise give that page a navy
   rule, a smaller title and extra spacing. Values match the Polls page as
   Alice approved it. */
/* The results page is a format archive, whose main column is a flex
   stack with a 32px gap; the Polls page is not. Same spacing on both. */
.tax-lawryse_format .lw-main.lw-page { gap: 0; }
.lw-archive__head.lw-polls-head {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.lw-polls-head .lw-archive__title {
  margin: 0 0 var(--lw-s4);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lw-polls-head .lw-archive__standfirst {
  margin: 0 0 var(--lw-s4);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
}

/* "Take a Vote | Poll Results" sub-tabs (2026-09-23). */
.lw-poll-tabs {
  display: flex;
  gap: var(--lw-s5);
  margin: 0 0 var(--lw-s5);
  border-bottom: 1px solid var(--lw-border);
}
.lw-poll-tabs__tab {
  margin-bottom: -1px;
  padding: var(--lw-s2) 0;
  border-bottom: 3px solid transparent;
  color: var(--lw-muted);
  font-size: var(--lw-fs-base);
  font-weight: 600;
}
.lw-poll-tabs__tab:hover { color: var(--lw-ink); }
.lw-poll-tabs__tab.is-current {
  border-bottom-color: var(--lw-red);
  color: var(--lw-ink);
}

.lw-pollres-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
}
.lw-pollres-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lw-ink); }
/* Alice's standardised poll-result image (2026-09-23) carries its own thin
   white canvas margin around the blue design — checked against her first
   two uploads, roughly 1–5% per side, inconsistent enough that clipping an
   exact amount per image isn't reliable. A modest zoom pushes that margin
   out of frame on any image built the same way, without visibly cropping
   into the design itself. */
.lw-pollres-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transform-origin: center;
}
.lw-pollres-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s4) var(--lw-s5) var(--lw-s5);
}
.lw-pollres-card__title {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  line-height: var(--lw-lh-tight);
}
.lw-pollres-card__title a { color: var(--lw-ink); }
.lw-pollres-card__title a:hover { color: var(--lw-red); }
.lw-pollres-card__desc {
  margin: 0;
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-snug);
}
.lw-pollres-card__cta {
  margin-top: auto;
  padding-top: var(--lw-s2);
  color: var(--lw-red);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
}
.lw-pollres-card__cta:hover { color: var(--lw-red-dark); }

.lw-polls-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s5) var(--lw-s4);
  background: var(--lw-canvas-alt);
  border-radius: var(--lw-radius-sm);
  text-align: center;
}
.lw-polls-cta__icon { color: var(--lw-ink); }
.lw-polls-cta__title {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  color: var(--lw-ink);
}
.lw-polls-cta__text { margin: 0; color: var(--lw-body); font-size: var(--lw-fs-sm); }
.lw-polls-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lw-s2);
  width: 100%;
  margin-top: var(--lw-s2);
  padding: var(--lw-s3) var(--lw-s4);
  background: var(--lw-red);
  border-radius: var(--lw-radius-sm);
  color: #fff;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
}
.lw-polls-cta__btn:hover,
.lw-polls-cta__btn:focus-visible { background: var(--lw-red-dark); color: #fff; }

/* ── Public Voices → Pause & Play → Quizzes (Alice's brief, 2026-09-23) ──
   Cards match the Polls-card language (same radius/border/type scale);
   the "Lawryse-orange thumbnail" is Alice's own uploaded artwork, not a
   forced brand colour in the chrome — every button here stays Lawryse red,
   per the standing "no orange outside satire/attention" rule. */
.lw-quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s4);
}
@media (max-width: 640px) {
  .lw-quiz-grid { grid-template-columns: 1fr; }
}
.lw-quiz-stack { display: grid; gap: var(--lw-s3); }

.lw-quiz-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
}
/* The same orange frame every Pause & Play card carries (Alice, 2026-09-24:
   "put the orange banner that's around the satire thumbnail on all pause
   and play thumbnails") — box-sizing:content-box for the same reason as
   .lw-card--satire .lw-card__media: a border-box border would eat into
   the fixed aspect-ratio and crop the image tighter than intended. */
.lw-quiz-card__media {
  aspect-ratio: 16 / 9;
  background: var(--lw-ink);
  overflow: hidden;
  border-top: 5px solid var(--lw-satire);
  border-bottom: 5px solid var(--lw-satire);
  box-sizing: content-box;
}
.lw-quiz-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lw-quiz-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s4) var(--lw-s5) var(--lw-s5);
}
.lw-widget .lw-quiz-card__body { padding: var(--lw-s4); }
/* Compact-mode kicker (Alice, 2026-09-24) — same grey/bold/tracked
   treatment as .lw-card--satire .lw-card__kicker, so a Quiz/Knowledge
   Ladder/Crossword card reads exactly like a satire card on the homepage
   Pause & Play row: image, kicker, title, nothing else.
   Sized a notch below --lw-fs-xs and with tighter letter-spacing than the
   quiz/KL/crossword pages' own full-size kickers (Alice, 2026-09-24: "let
   the headings of each start in the same row") — "Knowledge Ladder" and
   "Crossword Puzzle" are long enough to wrap onto a second line at the
   normal size, pushing that card's title down against its shorter
   siblings ("Satire", "Quiz"). One line, every time, is the point. */
.lw-quiz-card__kicker,
.lw-kl-card__kicker,
.lw-cw-card__kicker {
  display: block;
  color: var(--lw-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The satire card's own kicker (.lw-card--satire .lw-card__kicker, above)
   keeps its normal larger size everywhere else on the site — only on THIS
   mixed row does it need to match its three compact siblings exactly
   (Alice, 2026-09-24: "make SATIRE the same font size as the rest"). */
.lw-pauseplay-spotlight .lw-card--satire .lw-card__kicker {
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}
.lw-quiz-card__title {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-widget .lw-quiz-card__title { font-size: var(--lw-fs-md); }
.lw-quiz-card__teaser {
  margin: 0;
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-snug);
}
.lw-widget .lw-quiz-card__teaser { font-size: var(--lw-fs-sm); }
.lw-quiz-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lw-s2);
  margin-top: auto;
  padding-top: var(--lw-s2);
}
.lw-quiz-card__time { color: var(--lw-muted); font-size: var(--lw-fs-xs); font-weight: 600; }
.lw-quiz-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s4);
  background: #fff;
  border: 1px solid var(--lw-red);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-red);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lw-quiz-card__btn:hover,
.lw-quiz-card__btn:focus-visible,
.lw-quiz-card__btn:active {
  background: var(--lw-red) !important;
  border-color: var(--lw-red) !important;
  color: #fff !important;
  outline: none;
}

/* The quiz-taking pop-up — same shape as .lw-poll-modal, wider to fit a
   progress bar + question comfortably. */
.lw-quiz-modal {
  width: min(480px, calc(100vw - 2 * var(--lw-s4)));
  max-height: min(85dvh, 640px);
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--lw-radius);
  background: #fff;
  box-shadow: var(--lw-shadow-card);
  color: var(--lw-ink);
}
.lw-quiz-modal::backdrop { background: rgba(1, 28, 60, 0.45); }
.lw-quiz-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--lw-s3);
  right: var(--lw-s3);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lw-field) !important;
  color: var(--lw-ink) !important;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lw-quiz-modal__close:hover { background: var(--lw-border) !important; }
.lw-quiz-modal__question,
.lw-quiz-modal__result {
  padding: var(--lw-s5);
  box-sizing: border-box;
}
.lw-quiz-modal__progress {
  margin: 0 0 var(--lw-s2);
  color: var(--lw-muted);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lw-quiz-modal__progressbar {
  height: 4px;
  margin-bottom: var(--lw-s4);
  background: var(--lw-border);
  border-radius: 999px;
  overflow: hidden;
}
.lw-quiz-modal__progressbar span {
  display: block;
  height: 100%;
  background: var(--lw-red);
  transition: width 0.2s ease;
}
.lw-quiz-modal__title {
  margin: 0 0 var(--lw-s4);
  padding-right: var(--lw-s6);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-quiz-modal__opts { margin: 0 0 var(--lw-s4); padding: 0; list-style: none; }
.lw-quiz-modal__opts li { padding: 6px 0; font-size: var(--lw-fs-base); }
.lw-quiz-modal__opts li label { position: relative; display: flex; align-items: center; gap: var(--lw-s3); cursor: pointer; }
.lw-quiz-modal__opts input[type="radio"] { position: absolute; opacity: 0; width: 14px; height: 14px; }
.lw-quiz-modal__opts input[type="radio"]:checked + .lw-poll__dot {
  border-color: var(--lw-red);
  background: var(--lw-red);
  box-shadow: inset 0 0 0 2px #fff;
}
.lw-quiz-modal__opts input[type="radio"]:focus-visible + .lw-poll__dot {
  outline: 2px solid var(--lw-red);
  outline-offset: 2px;
}
.lw-quiz-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lw-s3);
}
.lw-quiz-modal__back {
  padding: var(--lw-s3) var(--lw-s4);
  background: transparent !important;
  border: 0;
  color: var(--lw-muted) !important;
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.lw-quiz-modal__back:hover:not(:disabled) { color: var(--lw-ink) !important; }
.lw-quiz-modal__back:disabled { visibility: hidden; }
.lw-quiz-modal__status {
  margin: var(--lw-s3) var(--lw-s5) 0;
  color: var(--lw-ink);
  font-weight: 700;
  font-size: var(--lw-fs-sm);
}
.lw-quiz-modal__status:empty { display: none; }
.lw-quiz-modal__status.is-error { color: var(--lw-red); }

.lw-quiz-modal__kicker {
  display: block;
  margin-bottom: var(--lw-s2);
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-quiz-modal__result-heading {
  margin: 0 0 var(--lw-s3);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-xl);
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-quiz-modal__result-paragraph {
  margin: 0 0 var(--lw-s5);
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
}
.lw-quiz-modal__result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lw-s3);
}

.lw-quiz-share { position: relative; }
.lw-quiz-share__menu {
  position: absolute;
  bottom: calc(100% + var(--lw-s2));
  left: 0;
  z-index: 3;
  display: flex;
  min-width: 160px;
  flex-direction: column;
  padding: var(--lw-s2);
  background: #fff;
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  box-shadow: var(--lw-shadow-card);
}
/* Author CSS beats the UA stylesheet's [hidden]{display:none} regardless
   of specificity, so setting display:flex above silently broke the native
   hidden attribute — found testing this live. Same fix shape as every
   other [hidden] guard on this site. */
.lw-quiz-share__menu[hidden] { display: none; }
.lw-quiz-share__menu a,
.lw-quiz-share__menu button {
  display: block;
  padding: var(--lw-s2) var(--lw-s3);
  border: 0;
  background: none;
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lw-quiz-share__menu a:hover,
.lw-quiz-share__menu button:hover { background: var(--lw-field); }

/* The "Pause & Play" hub page. */
.lw-pauseplay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lw-s4);
}
@media (max-width: 720px) {
  .lw-pauseplay-grid { grid-template-columns: 1fr; }
}
.lw-pauseplay-card {
  display: block;
  padding: var(--lw-s5);
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  transition: box-shadow 0.15s ease;
}
a.lw-pauseplay-card:hover { box-shadow: var(--lw-shadow-soft); }
.lw-pauseplay-card h2 {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  color: var(--lw-ink);
}
.lw-pauseplay-card p { margin: 0; color: var(--lw-body); font-size: var(--lw-fs-sm); }
.lw-pauseplay-card--soon { opacity: 0.6; }
.lw-pauseplay-card--soon h2 em {
  margin-left: var(--lw-s2);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--lw-field);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Public Voices → Pause & Play → The Knowledge Ladder (brief,
   2026-09-23). Orange is the deliberate motif here (Alice's own brief),
   unlike Quizzes' incidental thumbnail — every interactive control still
   stays Lawryse red per the standing "no orange outside satire/attention"
   rule; orange is reserved for the ladder/progress graphic only. */
.lw-kl-scoreboard {
  margin: 0 0 var(--lw-s5);
  padding: var(--lw-s4);
  border-radius: var(--lw-radius-sm);
  background: var(--lw-field);
  color: var(--lw-muted);
  font-size: var(--lw-fs-sm);
  text-align: center;
}
.lw-kl-scoreboard:empty { display: none; }

.lw-kl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s4);
}
@media (max-width: 640px) {
  .lw-kl-grid { grid-template-columns: 1fr; }
}

.lw-kl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
}
.lw-kl-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--lw-orange);
  overflow: hidden;
  border-top: 5px solid var(--lw-satire);
  border-bottom: 5px solid var(--lw-satire);
  box-sizing: content-box;
}
.lw-kl-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lw-kl-card__edition-no {
  position: absolute;
  left: var(--lw-s3);
  bottom: var(--lw-s3);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lw-navy);
  color: #fff;
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lw-kl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s4) var(--lw-s5) var(--lw-s5);
}
.lw-kl-card__title {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-kl-card__teaser { margin: 0; color: var(--lw-body); font-size: var(--lw-fs-base); line-height: var(--lw-lh-snug); }

/* The ten-rung progress strip — shared shape between a card's small preview
   and the modal's full-size version (data-lw-kl-ladder). */
.lw-kl-rungs { display: flex; gap: 3px; }
.lw-kl-rung { flex: 1; height: 4px; border-radius: 999px; background: var(--lw-border); }

.lw-kl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lw-s2);
  margin-top: auto;
  padding-top: var(--lw-s2);
}
.lw-kl-card__stat { color: var(--lw-muted); font-size: var(--lw-fs-xs); font-weight: 600; }
.lw-kl-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s4);
  background: #fff;
  border: 1px solid var(--lw-red);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-red);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lw-kl-card__btn:hover,
.lw-kl-card__btn:focus-visible {
  background: var(--lw-red) !important;
  border-color: var(--lw-red) !important;
  color: #fff !important;
  outline: none;
}

/* The play pop-up — same shape as .lw-quiz-modal, a little wider for the
   ladder strip + four large choice buttons. */
.lw-kl-modal {
  width: min(520px, calc(100vw - 2 * var(--lw-s4)));
  max-height: min(88dvh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--lw-radius);
  background: #fff;
  box-shadow: var(--lw-shadow-card);
  color: var(--lw-ink);
}
.lw-kl-modal::backdrop { background: rgba(1, 28, 60, 0.45); }
.lw-kl-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--lw-s3);
  right: var(--lw-s3);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--lw-field) !important;
  color: var(--lw-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lw-kl-modal__close:hover { background: var(--lw-border) !important; }
.lw-kl-modal__play,
.lw-kl-modal__result,
.lw-kl-modal__remind { padding: var(--lw-s5); box-sizing: border-box; }
.lw-kl-modal__title {
  margin: 0 0 var(--lw-s3);
  padding-right: var(--lw-s6);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-xl);
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}

/* The full-size ladder — ten numbered rungs, climbing bottom to top on
   screen (rung 10 rendered first in markup, top of the strip). */
.lw-kl-ladder {
  display: flex;
  gap: 3px;
  margin-bottom: var(--lw-s3);
}
.lw-kl-ladder__rung {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: var(--lw-radius-sm);
  background: var(--lw-field);
  color: var(--lw-muted);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
}
.lw-kl-ladder__rung.is-passed { background: var(--lw-orange); color: #fff; }
.lw-kl-ladder__rung.is-current { background: var(--lw-navy); color: #fff; }
.lw-kl-ladder--result { margin: var(--lw-s4) 0; }

.lw-kl-modal__score {
  margin: 0 0 var(--lw-s4);
  color: var(--lw-muted);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lw-kl-modal__prompt {
  margin: 0 0 var(--lw-s4);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}

.lw-kl-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s3);
  margin-bottom: var(--lw-s4);
}
@media (max-width: 480px) {
  .lw-kl-choices { grid-template-columns: 1fr; }
}
.lw-kl-choice {
  display: flex;
  align-items: center;
  gap: var(--lw-s3);
  padding: var(--lw-s3) var(--lw-s4);
  background: var(--lw-field);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-ink);
  font-size: var(--lw-fs-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lw-kl-choice:hover:not(:disabled) { border-color: var(--lw-border-strong); }
.lw-kl-choice.is-selected { border-color: var(--lw-red); background: #fff; }
.lw-kl-choice.is-correct { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.lw-kl-choice.is-wrong { border-color: var(--lw-red); background: var(--lw-pink-soft); color: var(--lw-red); }
.lw-kl-choice:disabled { cursor: default; }
.lw-kl-choice__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: var(--lw-navy);
  color: #fff;
  font-size: var(--lw-fs-xs);
  font-weight: 700;
}
.lw-kl-choice.is-correct .lw-kl-choice__letter { background: #16a34a; }
.lw-kl-choice.is-wrong .lw-kl-choice__letter { background: var(--lw-red); }

.lw-kl-modal__feedback { margin-bottom: var(--lw-s4); }
.lw-kl-modal__feedback-headline {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  color: var(--lw-red);
}
.lw-kl-modal__feedback-headline.is-correct { color: #16a34a; }
.lw-kl-modal__feedback-explanation {
  margin: 0 0 var(--lw-s4);
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
}

.lw-kl-modal__kicker {
  display: block;
  margin-bottom: var(--lw-s2);
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lw-kl-modal__result-heading {
  margin: 0 0 var(--lw-s3);
  font-family: var(--lw-font-head);
  font-size: 2.5rem;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-kl-modal__result-paragraph {
  margin: 0 0 var(--lw-s3);
  color: var(--lw-body);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
}
.lw-kl-modal__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s3);
  margin-top: var(--lw-s4);
}

.lw-kl-modal__status {
  margin: var(--lw-s3) var(--lw-s5) 0;
  color: var(--lw-ink);
  font-weight: 700;
  font-size: var(--lw-fs-sm);
}
.lw-kl-modal__status:empty { display: none; }
.lw-kl-modal__status.is-error { color: var(--lw-red); }

/* ── Crossword Puzzles (brief, 2026-09-24) ──────────────────────────
   Same card/modal shell as Quizzes/Knowledge Ladder, plus a real
   interactive grid. No uploaded thumbnail — the card's "media" is a small
   render of the grid's own black/white pattern (Alice: "use the block
   itself"), built with the same --lw-cw-cols custom property the full
   board uses, just at card scale.

   .lw-cw-grid, not the home-page-only .lw-grid/.lw-grid--2 (home.css) —
   found live 2026-09-24, Alice: the Crossword Puzzles page showed one
   card per row with no error, because .lw-grid--2 is defined in home.css,
   which is never enqueued outside the homepage. Quizzes/Knowledge Ladder
   never hit this because they already had their own .lw-quiz-grid/
   .lw-kl-grid in this file. */
.lw-cw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s4);
}
@media (max-width: 640px) {
  .lw-cw-grid { grid-template-columns: 1fr; }
}
.lw-cw-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lw-canvas);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
}
.lw-cw-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lw-s4);
  background: var(--lw-field);
}
/* A real uploaded thumbnail (migration 148) fills the media block
   edge to edge, same treatment as .lw-kl-card__media/.lw-quiz-card__media
   — the padded/centred layout above stays as the pattern-only fallback
   for a puzzle with no artwork yet. */
.lw-cw-card__media:has(img) {
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top: 5px solid var(--lw-satire);
  border-bottom: 5px solid var(--lw-satire);
  box-sizing: content-box;
}
.lw-cw-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lw-cw-pattern {
  display: grid;
  grid-template-columns: repeat(var(--lw-cw-cols), 8px);
  gap: 1px;
  width: max-content;
}
.lw-cw-pattern__cell { width: 8px; height: 8px; background: #fff; border: 1px solid var(--lw-border); }
.lw-cw-pattern__cell.is-black { background: var(--lw-ink); border-color: var(--lw-ink); }
.lw-cw-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--lw-s2);
  padding: var(--lw-s4) var(--lw-s5) var(--lw-s5);
}
.lw-cw-card__title {
  margin: 0;
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}
.lw-cw-card__teaser { margin: 0; color: var(--lw-body); font-size: var(--lw-fs-base); line-height: var(--lw-lh-snug); }
.lw-cw-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lw-s2);
  margin-top: auto;
  padding-top: var(--lw-s2);
}
.lw-cw-card__meta { color: var(--lw-muted); font-size: var(--lw-fs-xs); font-weight: 600; text-transform: capitalize; }
.lw-cw-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lw-s2);
  padding: var(--lw-s2) var(--lw-s4);
  background: #fff;
  border: 1px solid var(--lw-red);
  border-radius: var(--lw-radius-sm);
  color: var(--lw-red);
  font-size: var(--lw-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lw-cw-card__btn:hover,
.lw-cw-card__btn:focus-visible {
  background: var(--lw-red) !important;
  border-color: var(--lw-red) !important;
  color: #fff !important;
  outline: none;
}

/* The play pop-up — wider than Quizzes/Knowledge Ladder's, room for a
   real grid plus a two-column clue list. */
.lw-cw-modal {
  width: min(720px, calc(100vw - 2 * var(--lw-s4)));
  max-height: min(92dvh, 800px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--lw-radius);
  background: #fff;
  box-shadow: var(--lw-shadow-card);
  color: var(--lw-ink);
}
.lw-cw-modal::backdrop { background: rgba(1, 28, 60, 0.45); }
.lw-cw-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--lw-s3);
  right: var(--lw-s3);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--lw-field) !important;
  color: var(--lw-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lw-cw-modal__close:hover { background: var(--lw-border) !important; }
.lw-cw-modal__play,
.lw-cw-modal__result { padding: var(--lw-s5); box-sizing: border-box; }
.lw-cw-modal__title {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-xl);
  font-weight: 700;
  color: var(--lw-navy);
  padding-right: var(--lw-s6);
}
.lw-cw-modal__clue-active {
  min-height: 1.4em;
  margin: 0 0 var(--lw-s3);
  color: var(--lw-red);
  font-weight: 700;
  font-size: var(--lw-fs-sm);
}

.lw-cw-modal__board-wrap { overflow-x: auto; margin-bottom: var(--lw-s4); }
.lw-cw-board {
  display: grid;
  grid-template-columns: repeat(var(--lw-cw-cols), 34px);
  gap: 1px;
  width: max-content;
  background: var(--lw-border);
  border: 1px solid var(--lw-border);
}
.lw-cw-cell {
  position: relative;
  width: 34px;
  height: 34px;
  background: #fff;
}
.lw-cw-cell.is-black { background: var(--lw-ink); }
.lw-cw-cell.is-active-word { background: var(--lw-pink-soft); }
.lw-cw-cell.is-selected { background: #ffe08a; }
.lw-cw-cell.is-wrong input { color: var(--lw-red); }
.lw-cw-cell.is-revealed input { color: var(--lw-navy); font-weight: 700; }
.lw-cw-cell__number {
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 8px;
  font-weight: 700;
  color: var(--lw-muted);
  pointer-events: none;
}
.lw-cw-cell input {
  /* border-box + padding:0 (Alice, 2026-09-24: typed letters barely
     visible — a browser's own default text-input padding, on top of
     content-box width/height:100%, was rendering the input larger than
     its 34px cell with no box-sizing reset here to stop it, pushing the
     glyph's baseline out of the visible square). line-height:1 removes
     any further ambiguity in vertical centering across browsers. */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--lw-fs-lg);
  line-height: 1;
  font-weight: 700;
  color: var(--lw-ink);
  caret-color: transparent;
}
.lw-cw-cell input:focus { outline: 2px solid var(--lw-red); outline-offset: -2px; }

.lw-cw-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lw-s2);
  margin-bottom: var(--lw-s4);
}

.lw-cw-clues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lw-s5);
}
@media (max-width: 480px) {
  .lw-cw-clues { grid-template-columns: 1fr; }
}
.lw-cw-clues__col h3 {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lw-muted);
}
.lw-cw-clues__col ul { margin: 0; padding: 0; list-style: none; }
.lw-cw-clue {
  padding: var(--lw-s1) 0;
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-snug);
  color: var(--lw-ink);
  cursor: pointer;
}
.lw-cw-clue:hover { color: var(--lw-red); }
.lw-cw-clue.is-active { color: var(--lw-red); font-weight: 700; }

.lw-cw-modal__result-heading {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-xl);
  font-weight: 700;
  color: var(--lw-navy);
}
.lw-cw-modal__result-paragraph { margin: 0 0 var(--lw-s4); color: var(--lw-body); }
.lw-cw-modal__result-actions { display: flex; flex-wrap: wrap; gap: var(--lw-s3); }
.lw-cw-modal__status {
  margin: var(--lw-s3) var(--lw-s5) 0;
  color: var(--lw-ink);
  font-weight: 700;
  font-size: var(--lw-fs-sm);
}
.lw-cw-modal__status:empty { display: none; }
.lw-cw-modal__status.is-error { color: var(--lw-red); }

/* City/Town keeps a fixed width so its placeholder is never clipped (2026-10-12). */
@media (min-width: 1024px) {
  .lw-attsearch__form input.lw-attsearch__control--city { flex: 0 0 7rem; }
}

/* Signed-in note sits under the Join block and takes no room of its own, so
   the logo and search never shift when it appears (Alice, 2026-10-12). */
.lw-attorney-banner__right { position: relative; }
.lw-attorney-banner__inner { padding-bottom: 1.1rem; }
.lw-signed-in-note {
  position: absolute;
  top: calc(100% + 0.15rem);
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);
}
.lw-signed-in-note[hidden] { display: none; }
.lw-signed-in-note a { color: #fff; font-weight: 600; text-decoration: underline; }
.lw-signed-in-note a:hover { text-decoration: none; }
.lw-signed-in-note__close {
  padding: 0 0.2rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* ── Phones: poll tag bottom right; house banners run edge to edge ──
   (Alice, 2026-10-12.) The "Quick poll" tag overlapped the topic line on a
   narrow card, so on phones it moves to the bottom right corner. A house
   in-article banner is a wide picture whose small print became unreadable
   inside the text margins, so on phones ONLY it breaks out to the full
   screen width. A paid attorney banner is never stretched (never upscale a
   paid creative), it stays at its booked size, centred. */
@media (max-width: 640px) {
  .lw-ad--in-article-banner .lw-ad__unit--house {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .lw-ad--in-article-banner .lw-ad__unit--house .lw-ad__label {
    padding-inline: var(--lw-s4);
  }
  .lw-ad--in-article-banner .lw-ad__unit--house .lw-ad__image {
    border-radius: 0;
  }
}

/* ── Article search in the nav, on every page (Alice, 2026-10-12) ── */
.lw-nav__item--search { margin-left: auto; display: flex; align-items: center; }
.lw-nav-search {
  display: flex;
  align-items: stretch;
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
}
.lw-nav-search:focus-within { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); }
.lw-nav .lw-nav-search__input {
  width: 11rem;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: var(--lw-fs-sm);
  line-height: 1.3;
}
.lw-nav .lw-nav-search__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.lw-nav .lw-nav-search__btn {
  display: grid;
  place-items: center;
  padding: 0 0.8rem;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.lw-nav .lw-nav-search__btn:hover { background: rgba(255, 255, 255, 0.2) !important; }
@media (max-width: 767px) {
  /* First row of the opened phone menu. */
  .lw-nav__item--search { order: -1; flex: 0 0 100%; margin: var(--lw-s3) 0; padding-inline: var(--lw-s3); }
  .lw-nav-search { width: 100%; }
  .lw-nav .lw-nav-search__input { width: 100%; flex: 1 1 auto; font-size: 1rem; padding-block: 0.55rem; }
}

/* Share this page (inc/share-bar.php, 2026-10-14) */
.lw-share {
  max-width: var(--lw-max);
  margin: var(--lw-s7) auto 0;
  padding-inline: var(--lw-s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lw-s3) var(--lw-s4);
}
.lw-share__label {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-ink);
}
.lw-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lw-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--lw-ink);
  background: #fff;
  border: 1.5px solid var(--lw-ink);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.lw-share__btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.lw-share__btn:hover,
.lw-share__btn:focus-visible {
  color: #fff;
  background: var(--lw-ink);
  text-decoration: none;
}

/* Share bar under an article body, and the nav search pill clear of the nav's bottom edge (0.48.1) */
.lw-share--article { max-width: none; margin: var(--lw-s6, 2rem) 0 0; padding-inline: 0; }
@media (min-width: 768px) {
  .lw-nav__item--search { padding-bottom: 0.45rem; }
}

/* ── Country chip in the header (Alice, 2026-10-15) ──────────────── */
.lw-country { position: relative; }
.lw-country__chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.2rem 0.65rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.lw-country__chip::-webkit-details-marker { display: none; }
.lw-country__chip--static { cursor: default; }
.lw-country__chip:hover:not(.lw-country__chip--static) { background: rgba(255, 255, 255, 0.22); }
.lw-country__flag { display: block; border-radius: 2px; flex: none; }
.lw-country[open] .lw-country__caret { transform: rotate(180deg); }
.lw-country__menu {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 1000;
  min-width: 12rem; margin: 0; padding: 0.3rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--lw-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(1, 28, 60, 0.25);
}
.lw-country__menu a {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  color: var(--lw-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
.lw-country__menu a:hover, .lw-country__menu a[aria-current] { background: var(--lw-canvas-alt); }
@media (max-width: 600px) {
  .lw-country__name { font-size: 0.8125rem; }
  .lw-country__menu { right: auto; left: 0; }
}

/* United States header (Alice, 2026-10-16): the flag and Log in sit under the Register-your-interest
   box, not inside it; the signed-in note moves to the very top, centred. */
.lw-attorney-banner__right > .lw-join-card + .lw-member-links { justify-content: center; margin-top: 0.45rem; }
.lw-attorney-banner { position: relative; }
.lw-attorney-banner > .lw-signed-in-note {
  top: 0.2rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* United States: gold "Attorneys, Find out more, Join the waitlist" call-out above Popular Reads (Alice, 2026-10-16). */
.lw-us-cta {
  margin: 0 0 var(--lw-s5, 1.5rem);
  padding: 1.15rem 1.25rem 1.25rem;
  text-align: center;
  color: #011C3C;
  background: linear-gradient(135deg, #f6d56a 0%, #e0aa2c 52%, #b9831a 100%);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(150, 105, 10, 0.38), 0 2px 6px rgba(150, 105, 10, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.lw-us-cta__kicker { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(1, 28, 60, 0.75); }
.lw-us-cta__line { margin: 0.15rem 0 0.85rem; font-family: var(--lw-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #011C3C; }
.lw-us-cta__btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.55rem 1.15rem;
  background: #011C3C; color: #f6d56a !important;
  border-radius: 999px; font-size: 0.9rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 14px rgba(1, 28, 60, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lw-us-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(1, 28, 60, 0.45); }
.lw-us-cta__btn svg { width: 14px; height: 14px; }

/* The navigation row sits a little lower so the Search articles box no longer touches the red topic ticker (Alice, 2026-10-16). */
@media (min-width: 1024px) {
  .lw-nav__inner { padding-block: 0.6rem 0.45rem; }
}