/*
Theme Name: Axioms
Theme URI: https://theaxioms.org
Author: Justin Hallman
Author URI: https://theaxioms.org
Description: A serialized publication of declarative principles. Brutalist-editorial theme for a consultancy and creative practice. Dark, type-forward, intentionally volatile.
Version: 1.20.7
Requires at least: 5.5
Requires PHP: 7.2
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: axioms
Tags: dark, editorial, blog, one-column, custom-menu, threaded-comments
*/

:root {
  --bg: #1c1a18;
  --fg: #f5f0e8;
  --accent: #6054e8;
  --muted: #807a72;
  --rule: rgba(245, 240, 232, 0.13);
  --strike: #5a544e;

  --font-serif: "JetBrains Mono", "Courier New", monospace;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --measure: 38rem;
  --gutter: 2rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Override WordPress.com root padding which constrains pages */
  padding: 0 !important;
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-right: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
  --wp--style--root--padding-left: 0 !important;
}

/* Override WordPress block-level constraints that may add padding */
.wp-site-blocks {
  padding: 0 !important;
}

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

a { color: var(--accent); }

/* === TICKER (30-DAY VIEW) === */
.ticker {
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem var(--gutter) 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 900px) {
  .ticker {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.ticker__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}

.ticker__metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  min-width: 14rem;
}

.ticker__value {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.85rem;
  font-feature-settings: "tnum" 1;
}

/* Chart */
.ticker__chart {
  flex: 1;
  min-width: 0;
}

.ticker__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  gap: 1rem;
}

.ticker__chart-bars {
  display: flex;
  align-items: flex-end;
  height: 56px;
  gap: 3px;
  width: 100%;
}

.ticker__chart-bar {
  flex: 1;
  background: var(--accent);
  opacity: 0.5;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  transition: opacity 0.2s;
  position: relative;
}

.ticker__chart-bar:hover {
  opacity: 0.85;
}

.ticker__chart-bar--today {
  opacity: 1;
  animation: ticker-pulse 2s infinite;
  box-shadow: 0 0 8px rgba(96, 84, 232, 0.5);
}

@keyframes ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.ticker__chart-axis {
  display: flex;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  width: 100%;
  gap: 3px;
}

.ticker__chart-tick {
  flex: 1;
  text-align: center;
  position: relative;
  white-space: nowrap;
}

.ticker__chart-tick--visible {
  color: var(--muted);
}

.ticker__chart-tick--today {
  color: var(--accent);
  font-weight: 500;
}

/* Tooltip on bar hover */
.ticker__chart-bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--fg);
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
  font-family: var(--font-mono);
}

.ticker__chart-bar:hover::after {
  opacity: 1;
}

/* === MASTHEAD === */
.masthead {
  padding: 4rem var(--gutter) 2.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.masthead__title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.masthead__title a { color: var(--fg); text-decoration: none; }

.masthead__tagline-wrap {
  text-align: center;
  margin-bottom: 0;
}

/* Indigo block with slanted left + right edges matching tile slant */
.masthead__sub {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.3rem 1.2rem;
  margin: 0;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

/* ── Ticker band ─────────────────────────────────────────────── */
.masthead__ticker-band {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--accent);
  margin-top: 0;
  overflow: visible;
}

.masthead__ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.3rem 1.5rem 0.3rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  position: relative;
}

.masthead__ticker-label::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: skewX(-8deg);
  transform-origin: top center;
}

.masthead__ticker-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.masthead__ticker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  animation: masthead-ticker 90s linear infinite;
}

.masthead__ticker span {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.45;
}

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

@media (prefers-reduced-motion: reduce) {
  .masthead__ticker { animation: none; }
}

@media (max-width: 640px) {
  /* Tagline: tighter font so it fits one line, keep slant */
  .masthead__sub {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    padding: 0.3rem 1rem;
  }

  /* Band: stack Experience above ticker */
  .masthead__ticker-band { flex-direction: column; }

  .masthead__ticker-label {
    justify-content: center;
    padding: 0.2rem 0.7rem;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--accent);
  }

  .masthead__ticker-label::after { display: none; }

  /* flex:none resets flex-basis:0 so explicit height takes effect */
  .masthead__ticker-scroll { flex: none; height: 1.6rem; }

  .masthead__ticker span { font-size: 0.55rem; }
  .masthead__ticker { animation-duration: 45s; }
}

.masthead__nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  flex-wrap: wrap;
  list-style: none;
}

.masthead__nav li { list-style: none; }

.masthead__nav a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  transition: color 0.2s, border-color 0.2s;
}

.masthead__nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Axioms dropdown */
.nav-item--axioms {
  position: relative;
}
.axioms-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.axioms-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--accent);
  flex-direction: row;
  min-width: 22rem;
  z-index: 200;
}
.nav-item--axioms:hover .axioms-dropdown,
.nav-item--axioms.is-open .axioms-dropdown {
  display: flex;
}
.axioms-dropdown__col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  border-bottom: none;
}
.axioms-dropdown__col:first-child {
  border-right: 1px solid var(--accent);
}
.axioms-dropdown__col:hover {
  color: var(--accent);
  background: rgba(96,84,232,0.07);
  border-bottom: none;
}
.axioms-dropdown__dot {
  color: var(--accent);
  flex-shrink: 0;
  font-size: 0.5rem;
}
@media (max-width: 640px) {
  .axioms-dropdown {
    position: static;
    transform: none;
    flex-direction: column;
    min-width: 0;
    border: none;
    border-top: 1px solid var(--rule);
    margin-top: 0.5rem;
  }
  .axioms-dropdown__col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
}

/* === FEATURED AXIOM === */
.featured {
  padding: 5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.featured__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  display: inline-block;
  font-weight: 500;
}

.featured__number {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--accent);
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
}

.featured__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  margin: 1.5rem auto;
  max-width: 24ch;
}

.featured__title a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s ease;
}

.featured__title a:hover { background-size: 100% 1px; }

.featured__excerpt {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: 1.26rem;
  line-height: 1.5;
}

/* === INDEX === */
.index {
  max-width: 70rem;
  margin: 0 auto;
  padding: 4rem var(--gutter);
  width: 100%;
}

.index__heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.index__heading > span:first-child {
  color: var(--fg);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
}

.index__viewall {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: border-color 0.2s;
}

.index__viewall:hover {
  border-bottom-color: var(--accent);
}

.index + .index {
  padding-top: 1rem;
}

.axiom-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto 64px;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: padding-left 0.25s ease;
}

.axiom-row:hover { padding-left: 1rem; }

.axiom-row__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.axiom-row__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 400;
}

.axiom-row__title a { color: var(--fg); text-decoration: none; transition: color 0.2s; }
.axiom-row__title a:hover { color: var(--accent); font-style: normal; }

.axiom-row__date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .axiom-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num date spark"
      "title title title";
    gap: 0.75rem 1rem;
  }
  .axiom-row__num { grid-area: num; }
  .axiom-row__date { grid-area: date; text-align: right; }
  .axiom-row__title { grid-area: title; font-size: 1.3rem; }
  .axiom-row .axiom-spark { grid-area: spark; align-self: center; }
}

/* === SPARKLINE — DATA → AXIOM WAVE ===
   Reads left-to-right. Data bricks (uniform low) sit on the left; axiom bars
   (varying heights from post-ID hash) sit on the right. A white pulse sweeps
   left-to-right: as it passes each bar, the bar flashes white and either
   stays at its baseline (data) or grows to its target height (axiom), then
   settles into indigo. All bars hold indigo at full height for ~5s, then
   shrink back to gray and the wave restarts.

   Cycle duration varies per post (10-13s, set via --cycle-ms inline), so
   different sparklines run on different intervals. */
.axiom-spark {
  display: block;
  align-self: center;
}
.axiom-spark--featured {
  margin: 0.875rem auto 0;
  /* Mobile keeps the intrinsic 200×22 size; desktop scales up to ~3x. */
  width: clamp(200px, 50vw, 600px);
  height: clamp(22px, 5.5vw, 66px);
}
.axiom-spark__bar {
  fill: var(--muted);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: axiom-wave var(--cycle-ms, 11000ms) ease-in-out infinite;
}
@keyframes axiom-wave {
  0%, 12%   { transform: scaleY(var(--dormant-scale, 0.25)); fill: var(--muted); }
  18%       { transform: scaleY(1); fill: var(--fg); }
  22%, 88%  { transform: scaleY(1); fill: var(--accent); }
  92%, 100% { transform: scaleY(var(--dormant-scale, 0.25)); fill: var(--muted); }
}

/* Reduced motion: skip the cycle, render the resolved state directly. */
@media (prefers-reduced-motion: reduce) {
  .axiom-spark__bar {
    transform: scaleY(1);
    fill: var(--accent);
    animation: none !important;
  }
}

/* === SINGLE === */
.single {
  max-width: 70rem;
  margin: 0 auto;
  padding: 5rem var(--gutter);
  width: 100%;
}

.single__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.single__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 1rem;
}

.single__num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

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

.single__title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 3rem;
}

.single__body { font-size: 1.15rem; line-height: 1.65; }
.single__body p { margin-bottom: 1.4rem; }

.single__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.single__body h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: normal;
  margin: 3rem 0 1rem;
  font-weight: 400;
  line-height: 1.15;
}

.single__body h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin: 2.5rem 0 1rem;
  font-weight: 500;
}

.single__body blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: normal;
  color: var(--fg);
}

.single__body img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  filter: grayscale(0.15) contrast(1.05);
}

.single__body ul,
.single__body ol { margin: 1.4rem 0 1.4rem 1.5rem; }
.single__body li { margin-bottom: 0.4rem; }

.single__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255, 61, 0, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  color: var(--fg);
}

.single__body pre {
  font-family: var(--font-mono);
  background: rgba(245, 240, 232, 0.04);
  padding: 1.25rem;
  overflow-x: auto;
  border-left: 2px solid var(--accent);
  margin: 1.5rem 0;
  font-size: 0.85rem;
}

.single__body pre code { background: none; padding: 0; }

.single__body hr {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

/* Post navigation */
.post-nav {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.post-nav a { color: var(--fg); text-decoration: none; display: block; transition: color 0.2s; }
.post-nav a:hover { color: var(--accent); }

.post-nav__label {
  color: var(--muted);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.65rem;
}

.post-nav__right { text-align: right; }

/* === PAGE === */
.page {
  max-width: 70rem;
  margin: 0 auto;
  padding: 5rem var(--gutter);
  width: 100%;
}

.page__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 400;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
  line-height: 1.05;
}

.page__body { font-size: 1.1rem; line-height: 1.65; }
.page__body p { margin-bottom: 1.4rem; }
.page__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.page__body h2, .page__body h3 { font-family: var(--font-serif); font-style: normal; font-weight: 400; margin: 2.5rem 0 1rem; }

/* === AXIOMS INDEX (50/50 split page) === */
.axioms-index {
  padding: 4rem var(--gutter) 5rem;
}

.axioms-index__split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  gap: 0 3rem;
  max-width: 90rem;
  margin: 0 auto;
}

.axioms-index__divider {
  background: var(--rule);
  width: 1px;
}

.axioms-index__col-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.25rem;
}

.axioms-index__dot {
  color: var(--accent);
  font-size: 0.55rem;
  flex-shrink: 0;
}

.axioms-index__col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin: 0;
}

.axioms-index__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: color 0.2s;
}

.axioms-index__item:hover { color: var(--accent); }

.axioms-index__num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 3.5rem;
}

.axioms-index__title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.axioms-index__empty {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.85rem 0;
  margin: 0;
}

@media (max-width: 900px) {
  .axioms-index__split {
    grid-template-columns: 1fr 1px 1fr;
    gap: 2rem 2.5rem;
  }
  .axioms-index__divider:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .axioms-index__split {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
  .axioms-index__divider { display: none; }
}

/* === FOOTER === */
.site-footer {
  margin-top: auto;
  padding: 0 0 2rem;
}

.engage {
  max-width: 50rem;
  margin: 0 auto 4rem;
  padding: 0 var(--gutter);
  text-align: center;
}

.engage__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.engage__line {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  margin-bottom: 2rem;
  font-weight: 400;
}

.engage__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 1rem 2rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  font-weight: 500;
}

.engage__cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fg);
}

.colophon {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem var(--gutter) 0;
  border-top: 1px solid var(--rule);
}

/* === SELECTION === */
::selection { background: var(--accent); color: var(--bg); }

/* === RETRACTED (use category 'retracted' to strike through) === */
.retracted .axiom-row__title a,
.retracted .featured__title a {
  text-decoration: line-through;
  color: var(--strike);
}

/* === SEARCH FORM === */
.search-form {
  display: flex;
  gap: 0;
  max-width: 30rem;
  margin: 1rem 0;
}

.search-form input[type="search"] {
  flex: 1;
  background: transparent;
  border: 1px solid var(--rule);
  border-right: none;
  padding: 0.75rem 1rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  outline: none;
}

.search-form input[type="search"]:focus { border-color: var(--accent); }

.search-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  font-weight: 500;
}

/* === PAGINATION === */
.pagination,
.nav-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex-wrap: wrap;
}

.pagination a,
.pagination .current,
.nav-links a,
.nav-links .current {
  color: var(--fg);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule);
  transition: all 0.2s;
}

.pagination a:hover,
.nav-links a:hover { border-color: var(--accent); color: var(--accent); }

.pagination .current,
.nav-links .current { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* === COMMENTS === */
.comments {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 0 var(--gutter);
}

.comments__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.comment-list { list-style: none; padding: 0; margin: 0 0 3rem; }
.comment-list li { list-style: none; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.comment-author { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.comment-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-bottom: 0.75rem; }
.comment-content { font-size: 1rem; }

.comment-respond { margin-top: 2rem; }
.comment-respond label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.65rem 0.8rem;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  outline: none;
}

.comment-respond input:focus,
.comment-respond textarea:focus { border-color: var(--accent); }

.comment-respond textarea { min-height: 8rem; resize: vertical; font-family: var(--font-serif); font-size: 1rem; }

.comment-respond .submit,
.comment-respond input[type="submit"] {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  margin-top: 1.5rem;
  font-weight: 500;
}

/* === Filed under === */
.filed-under {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.filed-under a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); }
.filed-under a:hover { color: var(--accent); border-color: var(--accent); }

/* === ANIMATED AXIOMS LOGO === */
.masthead__logo {
  display: inline-flex;
  gap: clamp(2px, 0.6vw, 5px);
  text-decoration: none;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  /* Slight overall slant — left edge slightly higher, like the original lockup */
  transform: skewX(-8deg);
  padding: 0.5rem 0;
}

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

.logo__tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  /* Wider than tall — matches the brick proportion */
  --logo-tile-h: clamp(3.2rem, 11vw, 8.2rem);
  width: clamp(2.4rem, 8vw, 6rem);
  height: var(--logo-tile-h);
  font-size: clamp(1.4rem, 5vw, 3.8rem);
  letter-spacing: 0;
  transition: transform 0.18s ease;
}

/* Counter-skew the inner letter so it stands upright while the tile slants */
.logo__char {
  display: inline-block;
  transform: skewX(8deg);
}

/* Stack alt character on top of the original; only one shows at a time */
.logo__tile--a,
.logo__tile--i,
.logo__tile--o,
.logo__tile--x,
.logo__tile--m,
.logo__tile--s {
  position: relative;
}

.logo__tile--a .logo__char,
.logo__tile--i .logo__char,
.logo__tile--o .logo__char,
.logo__tile--x .logo__char,
.logo__tile--m .logo__char,
.logo__tile--s .logo__char {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover: tiles lift slightly, like the buttons on the rest of the site */
.masthead__logo:hover .logo__tile {
  transform: translateY(-2px);
}

/* === FLICKER ANIMATIONS ===
   Each prime duration prevents synchronized loops.
   Char shows at 0%, briefly hides during the flicker window, returns.
   Alt char does the inverse — only visible during the flicker. */

/* A → 4  (11s loop, ~0.4s flicker around the 92% mark) */
.logo__tile--a .logo__char:not(.logo__char--alt) {
  animation: flicker-out-a 11s infinite;
}
.logo__tile--a .logo__char--alt {
  opacity: 0;
  animation: flicker-in-a 11s infinite;
}

/* I → 1  (13s loop, offset start) */
.logo__tile--i .logo__char:not(.logo__char--alt) {
  animation: flicker-out-i 13s infinite;
  animation-delay: -4s;
}
.logo__tile--i .logo__char--alt {
  opacity: 0;
  animation: flicker-in-i 13s infinite;
  animation-delay: -4s;
}

/* O → 0  (17s loop, different offset) */
.logo__tile--o .logo__char:not(.logo__char--alt) {
  animation: flicker-out-o 17s infinite;
  animation-delay: -9s;
}
.logo__tile--o .logo__char--alt {
  opacity: 0;
  animation: flicker-in-o 17s infinite;
  animation-delay: -9s;
}

/* X → 8  (19s loop, primes throughout to keep desync) */
.logo__tile--x .logo__char:not(.logo__char--alt) {
  animation: flicker-out-x 19s infinite;
  animation-delay: -2s;
}
.logo__tile--x .logo__char--alt {
  opacity: 0;
  animation: flicker-in-x 19s infinite;
  animation-delay: -2s;
}

/* M → #  (23s loop) */
.logo__tile--m .logo__char:not(.logo__char--alt) {
  animation: flicker-out-m 23s infinite;
  animation-delay: -7s;
}
.logo__tile--m .logo__char--alt {
  opacity: 0;
  animation: flicker-in-m 23s infinite;
  animation-delay: -7s;
}

/* S → 5  (29s loop) */
.logo__tile--s .logo__char:not(.logo__char--alt) {
  animation: flicker-out-s 29s infinite;
  animation-delay: -14s;
}
.logo__tile--s .logo__char--alt {
  opacity: 0;
  animation: flicker-in-s 29s infinite;
  animation-delay: -14s;
}

/* The "out" curves — original char visible most of the time, briefly disappears.
   Three subtly different patterns so flickers feel hand-glitched, not templated. */

@keyframes flicker-out-a {
  0%, 88% { opacity: 1; }
  88.5% { opacity: 0; }
  89% { opacity: 1; }
  89.5% { opacity: 0; }
  92% { opacity: 0; }
  92.3% { opacity: 1; }
  92.6% { opacity: 0; }
  94% { opacity: 0; }
  94.5%, 100% { opacity: 1; }
}
@keyframes flicker-in-a {
  0%, 88% { opacity: 0; }
  88.5% { opacity: 1; }
  89% { opacity: 0; }
  89.5% { opacity: 1; }
  92% { opacity: 1; }
  92.3% { opacity: 0; }
  92.6% { opacity: 1; }
  94% { opacity: 1; }
  94.5%, 100% { opacity: 0; }
}

@keyframes flicker-out-i {
  0%, 70% { opacity: 1; }
  70.4% { opacity: 0; }
  71% { opacity: 1; }
  73% { opacity: 1; }
  73.3% { opacity: 0; }
  76% { opacity: 0; }
  76.5%, 100% { opacity: 1; }
}
@keyframes flicker-in-i {
  0%, 70% { opacity: 0; }
  70.4% { opacity: 1; }
  71% { opacity: 0; }
  73% { opacity: 0; }
  73.3% { opacity: 1; }
  76% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}

@keyframes flicker-out-o {
  0%, 45% { opacity: 1; }
  45.3% { opacity: 0; }
  45.8% { opacity: 1; }
  48% { opacity: 1; }
  48.4% { opacity: 0; }
  51% { opacity: 0; }
  51.5%, 100% { opacity: 1; }
}
@keyframes flicker-in-o {
  0%, 45% { opacity: 0; }
  45.3% { opacity: 1; }
  45.8% { opacity: 0; }
  48% { opacity: 0; }
  48.4% { opacity: 1; }
  51% { opacity: 1; }
  51.5%, 100% { opacity: 0; }
}

@keyframes flicker-out-x {
  0%, 30% { opacity: 1; }
  30.4% { opacity: 0; }
  31% { opacity: 1; }
  33% { opacity: 1; }
  33.5% { opacity: 0; }
  35% { opacity: 0; }
  35.5%, 100% { opacity: 1; }
}
@keyframes flicker-in-x {
  0%, 30% { opacity: 0; }
  30.4% { opacity: 1; }
  31% { opacity: 0; }
  33% { opacity: 0; }
  33.5% { opacity: 1; }
  35% { opacity: 1; }
  35.5%, 100% { opacity: 0; }
}

@keyframes flicker-out-m {
  0%, 60% { opacity: 1; }
  60.5% { opacity: 0; }
  61% { opacity: 1; }
  63.5% { opacity: 1; }
  64% { opacity: 0; }
  66% { opacity: 0; }
  66.4%, 100% { opacity: 1; }
}
@keyframes flicker-in-m {
  0%, 60% { opacity: 0; }
  60.5% { opacity: 1; }
  61% { opacity: 0; }
  63.5% { opacity: 0; }
  64% { opacity: 1; }
  66% { opacity: 1; }
  66.4%, 100% { opacity: 0; }
}

@keyframes flicker-out-s {
  0%, 80% { opacity: 1; }
  80.3% { opacity: 0; }
  80.8% { opacity: 1; }
  82% { opacity: 1; }
  82.4% { opacity: 0; }
  84% { opacity: 0; }
  84.5%, 100% { opacity: 1; }
}
@keyframes flicker-in-s {
  0%, 80% { opacity: 0; }
  80.3% { opacity: 1; }
  80.8% { opacity: 0; }
  82% { opacity: 0; }
  82.4% { opacity: 1; }
  84% { opacity: 1; }
  84.5%, 100% { opacity: 0; }
}

/* Respect motion preferences — accessibility */
@media (prefers-reduced-motion: reduce) {
  .logo__tile--a .logo__char,
  .logo__tile--i .logo__char,
  .logo__tile--o .logo__char,
  .logo__tile--x .logo__char,
  .logo__tile--m .logo__char,
  .logo__tile--s .logo__char {
    animation: none !important;
  }
  .logo__tile--a .logo__char--alt,
  .logo__tile--i .logo__char--alt,
  .logo__tile--o .logo__char--alt,
  .logo__tile--x .logo__char--alt,
  .logo__tile--m .logo__char--alt,
  .logo__tile--s .logo__char--alt {
    opacity: 0 !important;
  }
  .masthead__logo:hover .logo__tile {
    transform: none;
  }
  /* Also skip the entrance reel — JS already short-circuits, but if the
     reel ever renders for any reason, don't let it move. */
  .logo__reel-track {
    transition: none !important;
    transform: none !important;
  }
  .logo__reel {
    display: none !important;
  }
}

/* On mobile, slightly reduce the slant + tighten gap */
@media (max-width: 640px) {
  .masthead__logo {
    transform: skewX(-6deg);
    gap: 1px;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .logo__char {
    transform: skewX(6deg);
  }
}

/* === ENTRANCE REEL ===
   Injected by JS on first page load per session. Sits absolutely over
   the tile, scrolls digits down to land on the letter, then fades out
   and removes itself — leaving the standing flicker animation visible. */
.logo__reel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--accent);
  pointer-events: none;
  z-index: 2;
}
.logo__reel-track {
  display: block;
  transform: translateY(0);
  will-change: transform;
}
.logo__reel-track > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-tile-h);
  /* Counter-skew so digits stand upright like the underlying chars */
  transform: skewX(8deg);
}
@media (max-width: 640px) {
  .logo__reel-track > span {
    transform: skewX(6deg);
  }
}

/* Hide the existing italic title-text styles when wrapping the logo —
   the .masthead__title h1 still wraps everything for semantics. */
.masthead__title:has(.masthead__logo) {
  font-size: 0;  /* collapse any whitespace text nodes */
}


/* === ENGAGE FORM (v2 — placeholder-as-label, slider, button group) === */
.ef {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Each text field is just an underlined input — no separate label */
.ef__field {
  position: relative;
}

/* Icon variant — adds left padding to make room for the SVG */
.ef__field--icon input {
  padding-left: 2rem !important;
}

.ef__field-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 0.2s;
}

.ef__field--icon:focus-within .ef__field-icon {
  color: var(--accent);
}

.ef__field input,
.ef__field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0;
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  outline: none;
  transition: border-color 0.2s, padding 0.2s;
}

.ef__field textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: 4rem;
}

.ef__field input::placeholder,
.ef__field textarea::placeholder {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  opacity: 1;
  font-style: normal;
  transition: opacity 0.2s, color 0.2s;
}

.ef__field input:focus,
.ef__field textarea:focus {
  border-bottom-color: var(--accent);
}

.ef__field input:focus::placeholder,
.ef__field textarea:focus::placeholder {
  color: var(--strike);
  opacity: 0.6;
}

.ef__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* === SLIDER === */
.ef__slider {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.ef__slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.25rem;
}

.ef__slider-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.ef__slider-value {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.75rem;
  color: var(--accent);
  line-height: 1;
}

.ef__slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Range track + thumb — styled cross-browser */
.ef__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--rule);
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.ef__range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rule);
}

.ef__range::-moz-range-track {
  height: 2px;
  background: var(--rule);
  border: none;
}

.ef__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--accent);
  cursor: grab;
  margin-top: -10px;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.ef__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--accent);
  cursor: grab;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.ef__range::-webkit-slider-thumb:hover,
.ef__range:focus::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(96, 84, 232, 0.2);
}

.ef__range::-moz-range-thumb:hover,
.ef__range:focus::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(96, 84, 232, 0.2);
}

.ef__range::-webkit-slider-thumb:active { cursor: grabbing; }
.ef__range::-moz-range-thumb:active     { cursor: grabbing; }

/* === TIMELINE BUTTON GROUP === */
.ef__buttongroup {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.ef__buttongroup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.ef__buttongroup-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

@media (max-width: 540px) {
  .ef__buttongroup-options { grid-template-columns: repeat(2, 1fr); }
}

/* Hide native radios, style the labels as buttons */
.ef__buttongroup input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ef__buttongroup label {
  display: block;
  text-align: center;
  padding: 0.85rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.ef__buttongroup label:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ef__buttongroup input[type="radio"]:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.ef__buttongroup input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === SUBMIT === */
.ef__submit {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 1.1rem 2.5rem;
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  font-weight: 500;
  margin-top: 2.5rem;
}

.ef__submit:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fg);
}

.ef__submit:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* === ERRORS === */
.engage-errors {
  border-left: 2px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  background: rgba(96, 84, 232, 0.08);
}

.engage-errors p { margin: 0.25rem 0; color: var(--fg); }

/* === SUCCESS === */
.engage-success {
  padding: 4rem 0 2rem;
  text-align: center;
}

.engage-success__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.engage-success__line {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
}

/* === FORM ARROW INDICATOR === */
.ef__arrow {
  position: absolute;
  right: -3rem;
  top: 0;
  font-size: 1.5rem;
  color: var(--accent);
  pointer-events: none;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
  transform: translateY(-50%);
  animation: arrow-pulse 1.8s infinite;
  z-index: 10;
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); }
  50% { opacity: 0.4; transform: translateY(-50%) translateX(4px); }
}

/* On smaller screens, move arrow to left side */
@media (max-width: 900px) {
  .ef__arrow {
    right: auto;
    left: -2.5rem;
    font-size: 1.2rem;
  }
}

/* On mobile, hide the arrow entirely — screen too narrow */
@media (max-width: 640px) {
  .ef__arrow { display: none; }
}

/* === PORTFOLIO TEMPLATE === */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3rem 2rem;
  margin-top: 4rem;
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
  transition: border-color 0.2s;
}

.portfolio-card:hover {
  border-bottom-color: var(--accent);
}

.portfolio-card__image {
  display: block;
  margin-bottom: 1.25rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(245, 240, 232, 0.04);
}

.portfolio-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s, filter 0.3s;
  filter: grayscale(0.3);
}

.portfolio-card:hover .portfolio-card__image img {
  transform: scale(1.03);
  filter: grayscale(0);
}

.portfolio-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}

.portfolio-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.portfolio-card__title a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s;
}

.portfolio-card__title a:hover {
  color: var(--accent);
}

.portfolio-card__excerpt {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 1rem;
}

.portfolio-card__link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  align-self: flex-start;
  transition: border-color 0.2s;
}

.portfolio-card__link:hover {
  border-bottom-color: var(--accent);
}

.portfolio-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 3rem 0;
  text-align: center;
}

/* === PROCESS TEMPLATE === */
.process-body {
  font-size: 1.32rem;
  line-height: 1.65;
  counter-reset: process-step;
}

.process-body p {
  margin-bottom: 1.4rem;
}

/* Auto-number H2s as steps */
.process-body h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
  margin: 4rem 0 1.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
  position: relative;
  counter-increment: process-step;
}

.process-body h2:first-of-type {
  margin-top: 2rem;
}

.process-body h2::before {
  content: counter(process-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.process-body h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin: 2.5rem 0 1rem;
  font-weight: 500;
}

.process-body ul,
.process-body ol {
  margin: 1.4rem 0 1.4rem 1.5rem;
}

.process-body li {
  margin-bottom: 0.4rem;
}

.process-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* === THANK YOU PAGE === */
.thank-you {
  text-align: center;
  padding: 6rem 0 4rem;
}

.thank-you__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.thank-you__body {
  font-size: 1.32rem;
  line-height: 1.65;
  max-width: 40rem;
  margin: 0 auto 3rem;
}

.thank-you__cta {
  margin-top: 3rem;
}

.thank-you__link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25rem;
  transition: border-color 0.2s;
}

.thank-you__link:hover {
  border-bottom-color: var(--accent);
}

/* === SERVICE PAGES === */
.service-page {
  /* inherits .page styling */
}

.service-meta {
  margin-bottom: 1.5rem;
}

.service-meta__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.service-lede {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--fg);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  max-width: 50rem;
}

.service-body h2 {
  font-size: 1.75rem;
  font-weight: 400;
  margin: 3rem 0 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.service-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.service-body h3 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 2.5rem 0 1rem;
}

.service-body ul,
.service-body ol {
  margin: 1.4rem 0 1.4rem 1.5rem;
}

.service-body li {
  margin-bottom: 0.6rem;
}

.service-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Service CTA block at bottom */
.service-cta {
  margin-top: 5rem;
  padding: 3rem var(--gutter);
  border: 1px solid var(--rule);
  text-align: center;
}

.service-cta__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.service-cta__copy {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto;
}

.service-cta__button {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 1.1rem 2.5rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  font-weight: 500;
}

.service-cta__button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fg);
}


/* === DASHBOARD HOMEPAGE === */
.dashboard {
  max-width: 70rem;
  margin: 0 auto;
  padding: 4rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 900px) {
  .dashboard {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Featured article styles override centered defaults */
.dashboard .featured {
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  max-width: none;
}

.dashboard .featured__label {
  margin-bottom: 1rem;
}

.dashboard .featured__number {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.dashboard .featured__title {
  margin: 0 0 2rem;
  text-align: left;
  max-width: none;
}

/* Desktop layout: № sits at the bottom-left, sparkline fills the rest of
   the row to the right edge. Mobile keeps the current centered/stacked
   layout. The 901px breakpoint matches when the dashboard becomes
   two-column. */
@media (min-width: 901px) {
  .dashboard .featured {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label label"
      "num   spark"
      "title title"
      "body  body";
    column-gap: 2rem;
    row-gap: 0;
    align-items: end;
  }
  .dashboard .featured__label {
    grid-area: label;
    justify-self: start;
    margin-bottom: 0.25rem;
  }
  .dashboard .featured__number {
    grid-area: num;
    margin: 0;
    align-self: baseline;
    line-height: 1;
  }
  .dashboard .featured > .axiom-spark--featured {
    grid-area: spark;
    align-self: baseline;
    width: 100%;
    height: clamp(50px, 6vw, 90px);
    margin: 0;
  }
  .dashboard .featured__title {
    grid-area: title;
    margin: 1.5rem 0 2rem;
  }
  .dashboard .featured__body {
    grid-area: body;
  }
}

.featured__body {
  font-size: 1.05rem;
  line-height: 1.65;
}

.featured__body p {
  margin-bottom: 1.4rem;
  color: var(--fg);
}

.featured__more {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bg);
  background: var(--accent);
  text-decoration: none;
  padding: 0.6rem 1rem;
  font-weight: 500;
  transition: transform 0.18s, box-shadow 0.18s;
}

.featured__more:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fg);
}

/* Sidebar */
.dashboard__sidebar {
  position: sticky;
  top: 2rem;
}

.dashboard__section {
  margin-bottom: 3rem;
}

.dashboard__section:last-child {
  margin-bottom: 0;
}

.dashboard__heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}

.dashboard__heading-dot {
  color: var(--accent);
}

.dashboard__item {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: padding 0.2s, color 0.2s;
}

.dashboard__item:hover {
  padding-left: 0.5rem;
  color: var(--accent);
}

.dashboard__item-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
  display: block;
}

.dashboard__item:hover .dashboard__item-num {
  color: var(--accent);
}

.dashboard__item-title {
  font-size: 0.9rem;
  line-height: 1.35;
}

.dashboard__more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-decoration: none;
  transition: padding 0.2s;
}

.dashboard__more:hover {
  padding-left: 0.4rem;
}

/* On mobile, sidebar moves below and isn't sticky */
@media (max-width: 900px) {
  .dashboard__sidebar {
    position: static;
    border-top: 1px solid var(--rule);
    padding-top: 3rem;
  }
}

/* === AUDIT PAGE === */
.audit-meta {
  margin-bottom: 1.5rem;
}

.audit-meta__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  display: inline-block;
  font-weight: 500;
}

.audit-lede {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  max-width: 50rem;
}

.audit-grid {
  display: block;
  margin-top: 2rem;
}

.audit-content {
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 50rem;
  margin-bottom: 4rem;
}

.audit-content h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.audit-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.audit-content h3 {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 2rem 0 0.75rem;
}

.audit-content ul,
.audit-content ol {
  margin: 1.4rem 0 1.4rem 1.5rem;
}

.audit-content li {
  margin-bottom: 0.6rem;
}

.audit-content p {
  margin-bottom: 1.4rem;
}

.audit-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Booking section - full width below copy */
.audit-booking {
  border-top: 1px solid var(--rule);
  padding-top: 3rem;
  margin-top: 2rem;
}

.audit-booking__head {
  text-align: center;
  margin-bottom: 2rem;
}

.audit-booking__title {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.audit-booking__sub {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.audit-booking .calendly-inline-widget {
  width: 100%;
}

/* Footer email link */
.colophon__email {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.2s;
}

.colophon__email:hover {
  color: var(--accent);
}

/* === ENGAGE ROUTER === */
.engage-router__lede {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: 2rem;
  max-width: 50rem;
}

.engage-router__intro {
  max-width: 50rem;
  margin-bottom: 2rem;
}

.engage-router__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.engage-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.engage-banner:hover {
  transform: translate(-3px, -3px);
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--accent);
}

.engage-banner__left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.engage-banner__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.3rem 0.6rem;
  display: inline-block;
  align-self: flex-start;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.engage-banner__title {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
}

.engage-banner__desc {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.engage-banner__cta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.25rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: padding 0.2s;
}

.engage-banner:hover .engage-banner__cta {
  padding-left: 0.4rem;
}

@media (max-width: 800px) {
  .engage-router__paths {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .engage-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
  .engage-banner__cta {
    align-self: flex-start;
  }
}

.engage-path {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.25rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  background: transparent;
}

.engage-path:hover {
  transform: translate(-3px, -3px);
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--accent);
}

.engage-path__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.engage-path__tag--alt {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.35rem 0.7rem;
}

.engage-path__title {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--fg);
}

.engage-path__desc {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 1.5rem;
  flex: 1;
}

.engage-path__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.engage-path__meta-item {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  position: relative;
  padding-right: 0.75rem;
}

.engage-path__meta-item:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--rule);
}

.engage-path__cta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.25rem;
  transition: padding 0.2s;
}

.engage-path:hover .engage-path__cta {
  padding-left: 0.4rem;
}

/* === DIAGRAM SHORTCODE === */
.axdg {
  margin: 3rem 0;
  padding: 0;
  width: 100%;
}

.axdg__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* DEFAULT animation: scroll-in fade + arrow draws itself */
.axdg--default .axdg__before,
.axdg--default .axdg__after,
.axdg--default .axdg__col-header,
.axdg--default .axdg__result {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.axdg--default.axdg--in .axdg__before { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.axdg--default.axdg--in .axdg__after  { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.axdg--default.axdg--in .axdg__col-header { opacity: 1; transform: translateY(0); }
.axdg--default.axdg--in .axdg__result { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }

/* Arrow draws itself (default + sequence both get this) */
.axdg--default .axdg__arrow line,
.axdg--sequence .axdg__arrow line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 0.7s ease 0.4s;
}
.axdg--default.axdg--in .axdg__arrow line,
.axdg--sequence.axdg--in .axdg__arrow line {
  stroke-dashoffset: 0;
}
.axdg--default .axdg__arrow text,
.axdg--sequence .axdg__arrow text {
  opacity: 0;
  transition: opacity 0.4s ease 1s;
}
.axdg--default.axdg--in .axdg__arrow text,
.axdg--sequence.axdg--in .axdg__arrow text {
  opacity: 1;
}

/* SEQUENCE animation: amber appears first, then each indigo stage cascades in */
.axdg--sequence .axdg__before,
.axdg--sequence .axdg__col-header {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.axdg--sequence.axdg--in .axdg__before { opacity: 1; transition-delay: 0.1s; }
.axdg--sequence.axdg--in .axdg__col-header { opacity: 1; }

.axdg--sequence .axdg__after-stage {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.axdg--sequence.axdg--in .axdg__after-stage[data-stage="0"] { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
.axdg--sequence.axdg--in .axdg__after-stage[data-stage="1"] { opacity: 1; transform: translateY(0); transition-delay: 1.6s; }
.axdg--sequence.axdg--in .axdg__after-stage[data-stage="2"] { opacity: 1; transform: translateY(0); transition-delay: 2.0s; }
.axdg--sequence.axdg--in .axdg__after-stage[data-stage="3"] { opacity: 1; transform: translateY(0); transition-delay: 2.4s; }

.axdg--sequence .axdg__result {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.axdg--sequence.axdg--in .axdg__result {
  opacity: 1;
  transition-delay: 2.9s;
}

/* NONE: no animation, all visible immediately (the animate="none" case) */
.axdg--none * { opacity: 1; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .axdg * {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Mobile: shrink padding around diagrams */
@media (max-width: 640px) {
  .axdg {
    margin: 2rem 0;
  }
}

/* === PARTNERSHIPS PAGE === */
.partnerships-meta {
  margin-bottom: 1.5rem;
}

.partnerships-meta__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.4rem 0.7rem;
  display: inline-block;
  font-weight: 500;
}

.partnerships-lede {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  max-width: 50rem;
}

.partnerships-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 50rem;
  margin-bottom: 3rem;
}

.partnerships-section {
  margin: 4rem 0;
}

.partnerships-section__heading {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

/* Visibility (white-label vs branded) */
.visibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 800px) {
  .visibility-grid {
    grid-template-columns: 1fr;
  }
}

.visibility-card {
  border: 1px solid var(--rule);
  padding: 2rem 1.75rem;
}

.visibility-card__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.35rem 0.7rem;
  display: inline-block;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.visibility-card__tag--alt {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.7rem;
}

.visibility-card__title {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.visibility-card__desc {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}

.partnerships-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  max-width: 50rem;
  margin-top: 1.5rem;
}

/* Engagement structures */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1000px) {
  .engagement-grid {
    grid-template-columns: 1fr;
  }
}

.engagement-card {
  border: 1px solid var(--rule);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.engagement-card:hover {
  border-color: var(--accent);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent);
}

/* Featured card — Retainer is the primary path */
.engagement-card--featured {
  border-color: var(--accent);
  border-width: 1.5px;
  background: rgba(96, 84, 232, 0.04);
}

.engagement-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.35rem 0.7rem;
  font-weight: 500;
}

.engagement-card__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.engagement-card__title {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0 0 1rem;
  line-height: 1.1;
}

.engagement-card__desc {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.engagement-card__list-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 0.75rem;
}

.engagement-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.engagement-card__list li {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.5rem 0 0.5rem 1.25rem;
  position: relative;
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}

.engagement-card__list li:last-child {
  border-bottom: none;
}

.engagement-card__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Standards section */
.standards-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
}

@media (max-width: 800px) {
  .standards-list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.standards-item__title {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  color: var(--fg);
}

.standards-item__desc {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}

/* CTA at bottom */
.partnerships-cta {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}

.partnerships-cta__inner {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}

.partnerships-cta__heading {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}

.partnerships-cta__sub {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: 2rem;
}

.partnerships-cta__button {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bg);
  background: var(--accent);
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.18s, box-shadow 0.18s;
}

.partnerships-cta__button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fg);
}

/* Footer partnership link — same subtle treatment as email */
.colophon__link {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.2s;
}

.colophon__link:hover {
  color: var(--accent);

/* ==========================================================================
   QIQO Article Visual — axv-qiqo
   ========================================================================== */

.axv-qiqo {
  font-family: var(--font-mono);
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  padding: 1.75rem 1.25rem;
  border-radius: 2px;
  margin: 1.5rem 0;
}
.axv-qiqo *, .axv-qiqo *::before, .axv-qiqo *::after { box-sizing: border-box; }
.axv-qiqo__title {
  text-align: center;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  white-space: nowrap;
}
.axv-qiqo__toggle {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 0 1.75rem;
}
.axv-qiqo__btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(244, 239, 232, 0.12);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  padding: 0.55rem 1rem;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.axv-qiqo[data-state="raw"] .axv-qiqo__btn[data-state="raw"] {
  background: #e2a24a;
  border-color: #e2a24a;
  color: var(--bg);
}
.axv-qiqo[data-state="quality"] .axv-qiqo__btn[data-state="quality"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.axv-qiqo__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.9fr 1.05fr 0.85fr;
  column-gap: clamp(0.6rem, 2vw, 1.5rem);
  row-gap: 0.85rem;
  align-items: center;
}
.axv-qiqo__head {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.axv-qiqo__row { display: contents; }
.axv-qiqo__row > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.axv-qiqo__row.is-visible > * { opacity: 1; transform: translateY(0); }
.axv-qiqo__label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.axv-qiqo__row--summary .axv-qiqo__label { color: #c0b8b0; }
.axv-qiqo__bars {
  align-items: end;
  display: grid;
  grid-template-columns: repeat(12, 7px);
  gap: 4px;
  min-height: 28px;
}
.axv-qiqo__bar {
  background: #7e7770;
  height: 4px;
  width: 7px;
  transform-origin: bottom;
  transition: height 0.28s ease, background 0.28s ease;
}
.axv-qiqo__bar.is-good                      { height: 28px; }
.axv-qiqo[data-state="raw"]     .axv-qiqo__bar.is-good { background: #e2a24a; }
.axv-qiqo[data-state="quality"] .axv-qiqo__bar.is-good { background: var(--accent); }
.axv-qiqo__bars--month {
  grid-template-columns: repeat(24, 3.5px);
  gap: 2px;
}
.axv-qiqo__bars--month .axv-qiqo__bar { width: 3.5px; }
.axv-qiqo__ratio {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.axv-qiqo__delta {
  color: var(--accent);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  margin-left: 0.3rem;
  opacity: 0.85;
}
.axv-qiqo__conversion {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.axv-qiqo[data-state="raw"]     .axv-qiqo__conversion { color: #e2a24a; }
.axv-qiqo[data-state="quality"] .axv-qiqo__conversion { color: var(--accent); }
.axv-qiqo__sep {
  grid-column: 1 / -1;
  border-top: 1px dashed rgba(244, 239, 232, 0.14);
  margin: 0.15rem 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.axv-qiqo__sep.is-visible { opacity: 1; }
.axv-qiqo__divider {
  border-top: 1px dashed rgba(244, 239, 232, 0.14);
  margin: 1.5rem 0 1.1rem;
}
.axv-qiqo__caption {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}
.axv-qiqo__caption strong { color: var(--fg); display: block; font-weight: 400; }
.axv-qiqo__sr {
  border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}
@media (max-width: 640px) {
  .axv-qiqo                { padding: 1.25rem 0.75rem; }
  .axv-qiqo__title         { font-size: 0.58rem; letter-spacing: 0.1em; white-space: normal; text-align: center; }
  .axv-qiqo__grid          { grid-template-columns: auto 1fr auto auto; column-gap: 0.4rem; row-gap: 0.75rem; }
  .axv-qiqo__head          { font-size: 0.44rem; letter-spacing: 0.08em; }
  .axv-qiqo__label         { font-size: 0.6rem;  letter-spacing: 0.1em; }
  .axv-qiqo__bars          { grid-template-columns: repeat(12, 5px); gap: 3px; }
  .axv-qiqo__bar           { width: 5px; }
  .axv-qiqo__bars--month   { grid-template-columns: repeat(24, 2.5px); gap: 1.5px; }
  .axv-qiqo__bars--month .axv-qiqo__bar { width: 2.5px; }
  .axv-qiqo__ratio         { font-size: 0.62rem; }
  .axv-qiqo__conversion    { font-size: 0.72rem; }
}

/* Hide Jetpack Boost score ring — visibility:hidden keeps it in DOM,
   change to visibility:visible to re-enable when needed */
#jetpack-boost-score,
.jb-score-ring,
.jetpack-boost-score-prompt,
[class*="jb-boost"] { display: none !important; }

/* ── Platforms ticker band ───────────────────────────────────── */
.masthead__platforms-band {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--accent);
  overflow: visible;
}

.masthead__platforms-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.masthead__platforms-ticker {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  animation: masthead-ticker 40s linear infinite;
}

.pf-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pf-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 1.25rem;
  flex-shrink: 0;
  opacity: 0.45;
}

.pf-logo {
  height: 16px;
  width: auto;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.pf-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

/* Label on the right, separator on its left */
.masthead__platforms-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.3rem 0.8rem 0.3rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  position: relative;
}

.masthead__platforms-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: skewX(-8deg);
  transform-origin: top center;
}

@media (max-width: 640px) {
  .masthead__platforms-band { flex-direction: column-reverse; }
  .masthead__platforms-label {
    justify-content: center;
    padding: 0.2rem 0.7rem;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    border-top: 1px solid var(--accent);
  }
  .masthead__platforms-label::before { display: none; }
  .masthead__platforms-scroll { flex: none; height: 1.6rem; }
  .masthead__platforms-ticker { animation-duration: 25s; }
  .pf-item { margin: 0 1rem; }
  .pf-logo { height: 13px; }
  .pf-name { font-size: 0.52rem; }
}