/*
Theme Name: Kadence Major Tom
Theme URI: https://majortomm.com
Description: Dark finance child theme for Major Tom. Built on Kadence. Owns all custom design tokens, typography, and base component styling for the Major Tom market research console.
Author: Major Tom
Author URI: https://majortomm.com
Template: kadence
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-majortom
Tags: dark, finance, custom-colors, custom-menu, full-width-template, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   Source of truth: docs/design-system.md
   ========================================================================== */
:root {
  /* ==========================================================================
     Major Tom scale — derived from the logo.
     The logo is pure #00FFFF. That is an sRGB gamut corner: 1.25:1 against
     white, no headroom for a brighter hover state, and it glows at small
     sizes. So #00FFFF stays the LOGO color and the UI runs on this ramp,
     which starts at the logo hue (195) and drifts to true blue (248) as it
     darkens. Built in OKLCH so the steps are perceptually even.
     Every pairing below is WCAG 2.1 AA verified. See docs/design-system.md.
     ========================================================================== */

  /* Brand blue ramp — cyan at the light end, blue at the dark end */
  --blue-50:  #D2FEFD;
  --blue-100: #A0F9F8;
  --blue-200: #56ECED;
  --blue-300: #00D5DE;
  --blue-400: #00B6CD;
  --blue-500: #0096BC;
  --blue-600: #0070A1;
  --blue-700: #004E81;
  --blue-800: #00315B;
  --blue-900: #001837;
  --blue-950: #000A1F;

  /* Logo — the mark only. Never a text or UI fill. */
  --logo-cyan: #00FFFF;
  --logo-yellow: #FFFF00;

  /* Surfaces — blue-tinted near-black, never neutral grey */
  --bg-void: #03080E;
  --bg-base: #08121A;
  --bg-surface: #132029;
  --bg-elevated: #20303C;
  --bg-hover: #2D404C;
  --bg-active: #3B505E;

  /* Accents — the interactive blue */
  --accent-primary: var(--blue-300);
  --accent-secondary: var(--blue-600);
  /* Starts at --blue-500, not --blue-600. The button carries --text-inverse,
     and dark text on --blue-600 measures 3.67:1, which fails WCAG AA on the
     darkest corner of the gradient. --blue-500 measures 5.83:1 and keeps the
     blue-into-cyan gesture. Corrected 2026-08-27; the original contrast table
     only checked text against --bg-base and never checked a gradient fill. */
  --accent-gradient: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-300) 100%);
  --accent-glow: 0 0 0 1px rgba(0, 213, 222, 0.35), 0 0 24px rgba(0, 213, 222, 0.18);
  --hero-gradient:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 213, 222, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 82% 8%, rgba(0, 112, 161, 0.20), transparent 70%);

  /* Text — blue-tinted, never pure grey */
  --text-primary: #F1F8FD;
  --text-secondary: #ACBAC3;
  --text-tertiary: #77868F;
  --text-disabled: #515D65;
  --text-inverse: #03080E;

  /* Market data. Never the only signal — always pair with a sign or arrow. */
  --bull: #4BDA77;
  --bear: #F64E4D;
  --flat: #77868F;
  --bull-bg: rgba(75, 218, 119, 0.12);
  --bear-bg: rgba(246, 78, 77, 0.12);

  /* Premium — the logo's second color, reserved for the gate and nothing else */
  --premium: #E9D63A;
  --premium-dim: #C2A200;
  --premium-bg: rgba(233, 214, 58, 0.10);

  /* Status */
  --warn: #F8B734;
  --info: #51BFEE;

  /* Conviction scale — pick confidence meters */
  --conv-low: #77868F;
  --conv-med: var(--blue-300);
  --conv-high: var(--bull);

  /* Structure */
  --border: #1E2C36;
  --border-strong: #2D404C;
  --border-accent: rgba(0, 213, 222, 0.30);

  /* Color — asset classes (used by mtom_asset_class term meta + badges) */
  --asset-equities: var(--blue-300);
  --asset-crypto: #F7931A;
  --asset-forex: #4BDA77;
  --asset-commodities: #F8B734;
  --asset-etfs: #8FB8FF;

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-base: 16px;
  --lh-base: 1.65;
  --lh-tight: 1.2;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Layout */
  --content-max: 1200px;
  --section-pad-y: 80px;
  --section-pad-y-mobile: 48px;
  --gutter: 24px;
  --grid-gap: 24px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 8px 28px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  /* Z-index scale */
  --z-nav: 1000;
  --z-overlay: 1100;

  /* Sticky nav height (referenced for scroll offsets) */
  --nav-height: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; }
}


/* ==========================================================================
   2. Base / reset
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

p {
  color: var(--text-secondary);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img,
iframe {
  max-width: 100%;
  height: auto;
}

/* Monospace utility for figures and dates. Tabular numerals so columns of
   numbers line up rather than wobbling. */
.mtom-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Directional data color helpers */
/* These class names must match what mtom_dir_class(), mtom_outlook_chip() and
   mtom_pick_direction_chip() actually emit. They did not until 2026-08-27: the
   helpers returned mtom-up / mtom-down / mtom-flat while this file defined
   .mtom-bull and .mtom-bear, so every direction chip on the site rendered with
   no colour at all. The tokens keep their bull/bear names, which is correct -
   it is the class names that had drifted.

   Colour is never the only signal here: every caller pairs these with a glyph
   and a word, per WCAG 1.4.1 and because blue and green stay partly confusable
   under deuteranopia. */
.mtom-up { color: var(--bull); }
.mtom-down { color: var(--bear); }
.mtom-flat { color: var(--flat); }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.mtom-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mtom-section {
  padding-block: var(--section-pad-y-mobile);
}

.mtom-grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Modifiers of the two primitives above. Kept here rather than beside the
   components that use them, so there is one place to look for "how wide is
   this" and one place to change it. */
/* Caps the reading measure of each child rather than narrowing the container
   itself. Narrowing the container centres the column, which leaves these
   sections visibly indented against every full-width section above them.
   Capping the children keeps one left gutter running down the whole page. */
.mtom-container--narrow > * {
  max-width: 46rem;
}

.mtom-section--tight {
  padding-block: calc(var(--section-pad-y-mobile) * 0.7);
}

@media (min-width: 1024px) {
  .mtom-section--tight {
    padding-block: calc(var(--section-pad-y) * 0.7);
  }
}

/* ==========================================================================
   4. Component — Card
   ========================================================================== */
.mtom-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--gutter);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}

.mtom-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}

/* ==========================================================================
   Removed 2026-08-27 — the old hyphen-named button system
   .mtom-btn-primary / .mtom-btn-secondary were superseded by the BEM variants
   (.mtom-btn--primary / .mtom-btn--ghost) defined further down beside the
   locked panel, which is where the complete .mtom-btn base rule lives. Nothing
   in this repo emitted the hyphen names. Two button systems in one stylesheet
   is how you end up restyling the one nobody uses.
   ========================================================================== */

/* ==========================================================================
   6. Component — Asset class badge
   Color comes from mtom_color term meta; these are sensible fallbacks.
   ========================================================================== */
.mtom-asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.02);
}

.mtom-asset-badge[data-asset="equities"] { color: var(--asset-equities); }
.mtom-asset-badge[data-asset="crypto"] { color: var(--asset-crypto); }
.mtom-asset-badge[data-asset="forex"] { color: var(--asset-forex); }
.mtom-asset-badge[data-asset="commodities"] { color: var(--asset-commodities); }
.mtom-asset-badge[data-asset="etfs"] { color: var(--asset-etfs); }

/* ==========================================================================
   Removed 2026-08-27 — sticky navigation, 4-column footer, confidence bar
   Kadence renders the header and footer; assets/css/kadence-bridge.css is what
   styles them onto these tokens. Nothing in this repo has ever emitted
   .mtom-nav, .mtom-footer or .mtom-confidence, so 22 selectors here were
   styling markup that does not exist. That is worse than nothing: it invites
   someone to restyle the header in this file and wonder why the page never
   changes. The conviction meter on the pick page is .mtom-conviction.
   Recover from git history if a self-rendered header is ever wanted.
   ========================================================================== */

/* ==========================================================================
   10. Responsive — mobile-first scale-ups
   ========================================================================== */
@media (min-width: 1024px) {
  .mtom-section {
    padding-block: var(--section-pad-y);
  }
}

/* ==========================================================================
   11. Accessibility — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Component — Gated content and the locked panel
   Consumed by mtom_gate_content() in major-tom-core.
   The mask fades the teaser into the page rather than cutting it mid-line,
   so the truncation reads as deliberate instead of broken.
   ========================================================================== */

.mtom-gate {
  position: relative;
  overflow: hidden;
  max-height: 16rem;
}

.mtom-gate::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--bg-base) 88%);
  pointer-events: none;
}

.mtom-locked {
  margin: var(--gutter) 0 0;
  padding: 1.75rem;
  background: var(--premium-bg);
  border: 1px solid var(--premium);
  border-radius: var(--radius-lg);
}

.mtom-locked__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--premium);
}

.mtom-locked__body {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
}

.mtom-locked__actions {
  margin: 0;
}

.mtom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.mtom-btn--primary {
  background: var(--accent-gradient);
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
}

.mtom-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.mtom-btn--ghost:hover,
.mtom-btn--ghost:focus-visible {
  background: var(--bg-hover);
  border-color: var(--premium);
  color: var(--text-primary);
}

/* ==========================================================================
   Component — Front page
   Consumed by front-page.php and template-parts/card-brief.php.

   Mobile-first: every rule here is the small-screen state, and the
   scale-ups live in the one media query at the end of this block rather
   than being scattered through it.

   No live data lives on this page by design, so there is nothing here for
   a chart, a table or a ticker. If a rule for one appears in this file,
   something has been built in the wrong place.
   ========================================================================== */

.mtom-front {
  display: block;
}

.mtom-eyebrow {
  margin-block-end: 0.75rem;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mtom-section__title {
  margin-block: 0 2rem;
}

.mtom-grid--3 {
  grid-template-columns: 1fr;
}

/* ---------- Hero ---------- */

.mtom-hero {
  padding-block: 3.5rem 3rem;
  background: var(--hero-gradient), var(--bg-base);
  border-block-end: 1px solid var(--border);
}

/* A child of .mtom-container, not the container itself. Putting the cap on
   the container would centre a narrow column inside a wide page; putting it
   on a child left-aligns the text against the same gutter every other
   section uses. */
.mtom-hero__inner {
  max-width: 44rem;
}

.mtom-hero__title {
  margin-block: 0 1.25rem;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.mtom-hero__lede {
  margin-block: 0 2rem;
  max-width: 38rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.mtom-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.mtom-hero__trust {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* ---------- Method cards ---------- */

.mtom-method__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Decorative, and marked aria-hidden in the template. The number is a
   visual rhythm device, not information a screen reader needs to hear. */
.mtom-method__step {
  margin: 0;
  color: var(--accent-secondary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.mtom-method__title {
  margin: 0;
  font-size: 1.25rem;
}

.mtom-method__body {
  margin: 0;
  color: var(--text-secondary);
}

.mtom-method__note {
  margin-block: 1.5rem 0;
  max-width: 60ch;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  line-height: var(--lh-base);
}

/* ---------- Latest brief ---------- */

.mtom-latest__title {
  margin-block: 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--lh-tight);
}

.mtom-latest__title a {
  color: inherit;
  text-decoration: none;
}

.mtom-latest__title a:hover,
.mtom-latest__title a:focus-visible {
  color: var(--accent-primary);
}

.mtom-latest__date {
  margin-block: 0 1.25rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.mtom-latest__teaser {
  margin-block: 0 1.5rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

/* ---------- Brief card ---------- */

.mtom-brief-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.mtom-brief-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
}

.mtom-brief-card__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.mtom-brief-card__title a {
  color: inherit;
  text-decoration: none;
}

.mtom-brief-card__title a:hover,
.mtom-brief-card__title a:focus-visible {
  color: var(--accent-primary);
}

.mtom-brief-card__teaser {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* Pushed to the bottom so dates line up across cards of unequal height.

   Colour is --text-secondary, not --text-tertiary, on purpose: tertiary on
   --bg-surface measures 4.42:1, which fails WCAG AA for text this size. The
   de-emphasis comes from the size, the mono face and the tracking instead of
   from a colour that cannot carry it here. Same pair passes on --bg-base
   (5.03:1), which is why it is fine on the hero trust line. */
.mtom-brief-card__date {
  margin-block: auto 0;
  padding-block-start: 0.5rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.mtom-archive__more {
  margin-block: 2rem 0;
}

/* ---------- Signup ---------- */

.mtom-signup__lede {
  margin-block: 0 1.5rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.mtom-signup__form :is(input[type="email"], input[type="text"]) {
  width: 100%;
  max-width: 22rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
}

.mtom-signup__form :is(input[type="email"], input[type="text"]):focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-color: var(--accent-primary);
}

/* ---------- Disclaimer ---------- */

.mtom-front-disclaimer {
  border-block-start: 1px solid var(--border);
}

.mtom-front-disclaimer__body {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ---------- Scale-ups ---------- */

/* Below the narrowest common handset the two hero buttons wrap to unequal
   widths, which reads as a mistake rather than a hierarchy. Stack them full
   width instead. */
@media (max-width: 479px) {
  .mtom-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mtom-hero__actions .mtom-btn {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .mtom-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .mtom-hero {
    padding-block: 5rem 4rem;
  }
}

@media (min-width: 1024px) {
  .mtom-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .mtom-hero {
    padding-block: 7rem 5.5rem;
  }
  .mtom-hero__inner {
    max-width: 52rem;
  }
}

/* ==========================================================================
   Component — Single post, archive and pick card
   Consumed by single-mtom_brief.php, single-mtom_pick.php, the two archive
   templates and template-parts/card-pick.php.

   Note what is absent: there is no rule here for a price ticker, a return
   figure or a sparkline, because none of those render on this site. A pick
   page shows what was said at publication; how it is doing lives in the
   console. If a style for one appears in this block, something was built in
   the wrong place.
   ========================================================================== */

.mtom-single__header {
  margin-block-end: 2rem;
}

.mtom-single__title {
  margin-block: 0 0.75rem;
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.mtom-single__symbol {
  display: inline-block;
  margin-inline-end: 0.5rem;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.6em;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.mtom-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 0 1rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.mtom-single__byline::before {
  content: '·';
  margin-inline-end: 0.75rem;
  color: var(--text-tertiary);
}

.mtom-single__chips,
.mtom-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.mtom-single__figure {
  margin-block: 0 2rem;
}

.mtom-single__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.mtom-single__body > * + * {
  margin-block-start: 1.25rem;
}

.mtom-single__body h3 {
  margin-block-start: 2rem;
  font-size: 1.25rem;
}

.mtom-single__footer {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}

.mtom-single__back {
  margin-block: 1.5rem 0;
}

/* ---------- Chips ---------- */

.mtom-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Status is not directional, so it never borrows the bull/bear colours. */
.mtom-chip--quiet {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

/* ---------- Locked facts ---------- */

.mtom-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 0 0.75rem;
  padding: 1.25rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.mtom-facts__item dt {
  margin: 0 0 0.25rem;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mtom-facts__item dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.125rem;
}

.mtom-facts__note {
  margin-block: 0 2rem;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* ---------- Conviction meter ---------- */

.mtom-conviction {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.mtom-conviction__pip {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--bg-hover);
}

.mtom-conviction__pip.is-on {
  background-color: var(--conv-med);
}

/* ---------- Pick card ---------- */

.mtom-pick-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.mtom-pick-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.mtom-pick-card__symbol {
  color: var(--accent-primary);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.mtom-pick-card__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.mtom-pick-card__title a {
  color: inherit;
  text-decoration: none;
}

.mtom-pick-card__title a:hover,
.mtom-pick-card__title a:focus-visible {
  color: var(--accent-primary);
}

.mtom-pick-card__teaser {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.mtom-pick-card__date {
  margin-block: auto 0;
  padding-block-start: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ---------- Archive shell ---------- */

.mtom-archive-page__lede {
  max-width: 46rem;
  margin-block: 0 2rem;
  color: var(--text-secondary);
}

.mtom-empty {
  color: var(--text-secondary);
}

.mtom-archive-page .navigation.pagination {
  margin-block-start: 2.5rem;
}

.mtom-archive-page .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.mtom-archive-page .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.375rem 0.625rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.mtom-archive-page .page-numbers:hover,
.mtom-archive-page .page-numbers:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.mtom-archive-page .page-numbers.current {
  color: var(--text-inverse);
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

@media (min-width: 768px) {
  .mtom-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Component — 404
   ========================================================================== */

.mtom-404__title {
  margin-block: 0 1rem;
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: var(--lh-tight);
}

.mtom-404__lede {
  margin-block: 0 2rem;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.mtom-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mtom-404__recent {
  margin-block-start: 3rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}

.mtom-404__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtom-404__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--border);
}

.mtom-404__list a {
  color: var(--text-primary);
  text-decoration: none;
}

.mtom-404__list a:hover,
.mtom-404__list a:focus-visible {
  color: var(--accent-primary);
}

.mtom-404__list time {
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}