/* ============================================
 * SYSTEMM Theme · v1.0.0
 * Editorial dark mode for the people who run the world.
 * ============================================ */

:root {
  --ink: #000000;
  --ink-2: #0A0A0A;
  --ink-3: #141414;
  --rule: rgba(255, 255, 255, 0.08);
  --rule-2: rgba(255, 255, 255, 0.16);
  --text: rgba(255, 255, 255, 0.92);
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.35);
  --accent: #00A39B;
  --accent-2: #00BFB6;
  --brass: #C9A961;
  --warn: #E5594A;

  --sans: 'Inter', 'Söhne', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --serif: 'Tiempos Headline', 'Tiempos', 'Charter', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent); }

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

::selection { background: var(--accent); color: var(--ink); }
::-webkit-scrollbar { width: 8px; background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ============================================
 * GLOBAL OVERLAYS
 * ============================================ */

.systemm-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.systemm-scan {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 199;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 3px);
}

/* ============================================
 * TOP HEADER + TOP NAV
 * ============================================ */

.systemm-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 80px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}

.systemm-header-inner {
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.systemm-wordmark {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--text);
}
.systemm-wordmark:hover { color: var(--text); opacity: 0.7; }

.systemm-top-nav {
  display: flex;
  align-items: center;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 8px;
}

.systemm-top-nav a {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-2);
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.systemm-top-nav a:hover { color: var(--text); }
.systemm-top-nav a.active { background: var(--text); color: var(--ink); }
.systemm-top-nav a.cta { background: var(--accent); color: var(--text); padding: 10px 18px; }
.systemm-top-nav a.cta:hover { background: var(--accent-2); color: var(--text); }

.systemm-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--rule-2);
  margin: 0 4px;
}

@media (max-width: 900px) {
  .systemm-header { height: 64px; }
  .systemm-top-nav { display: none; }
}

/* ============================================
 * CORNER DATA LABELS
 * ============================================ */

.systemm-corner {
  position: fixed;
  z-index: 50;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1.7;
  mix-blend-mode: difference;
}
.systemm-corner em { font-style: normal; color: var(--accent); }
.systemm-corner strong { color: var(--text); font-weight: 400; }
.systemm-corner-tl { top: 100px; left: 32px; }
.systemm-corner-tr { top: 100px; right: 32px; text-align: right; }
.systemm-corner-bl { bottom: 32px; left: 32px; }
.systemm-corner-br { bottom: 32px; right: 32px; text-align: right; }

@media (max-width: 900px) {
  .systemm-corner-tl, .systemm-corner-tr { top: 80px; }
  .systemm-corner-bl, .systemm-corner-br { display: none; }
}

/* ============================================
 * PROTOCOL SPOTLIGHT (homepage block)
 * ============================================ */

.protocol-spotlight {
  position: relative;
  min-height: 80vh;
  padding: 96px 64px;
  background: var(--ink);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.protocol-spotlight-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #1c2826 0%, #060a0a 70%),
    linear-gradient(135deg, #0a1614 0%, #02050a 100%);
}

.protocol-spotlight-corner-num {
  position: absolute;
  top: 48px; left: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-2);
  text-transform: uppercase;
  z-index: 4;
}

.protocol-spotlight-corner-cat {
  position: absolute;
  top: 48px; right: 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--brass);
  text-transform: uppercase;
  z-index: 4;
}
.protocol-spotlight-corner-cat em { font-style: italic; font-weight: 400; }

.protocol-spotlight-link {
  position: relative;
  z-index: 4;
  display: block;
  text-align: center;
  color: var(--text);
}
.protocol-spotlight-link:hover { color: var(--text); }

.protocol-spotlight-content {
  max-width: 1100px;
  margin: 0 auto;
}

.protocol-spotlight-title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(64px, 12vw, 180px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--text);
}

.protocol-spotlight-dek {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--text-2);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.protocol-spotlight-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.protocol-spotlight-data {
  position: absolute;
  bottom: 48px; left: 48px; right: 48px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 16px;
}

.protocol-spotlight-data .protocol-data-item strong {
  color: var(--text);
  font-weight: 400;
  margin-left: 8px;
}

@media (max-width: 900px) {
  .protocol-spotlight { padding: 64px 24px; min-height: 60vh; }
  .protocol-spotlight-corner-num, .protocol-spotlight-corner-cat { top: 24px; }
  .protocol-spotlight-corner-num { left: 24px; }
  .protocol-spotlight-corner-cat { right: 24px; }
  .protocol-spotlight-data { bottom: 24px; left: 24px; right: 24px; gap: 12px; font-size: 9px; }
}

/* ============================================
 * GLOSSARY STRIP (homepage section)
 * ============================================ */

.glossary-strip {
  background: var(--ink);
  padding: 96px 32px;
  border-top: 1px solid var(--rule);
}

.glossary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}

.glossary-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 12px;
}

.glossary-view-all {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-2);
  text-transform: uppercase;
}
.glossary-view-all:hover { color: var(--accent); }

.glossary-subsection {
  margin-bottom: 64px;
}
.glossary-subsection:last-child { margin-bottom: 0; }

.glossary-sub-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.glossary-sub-view-all {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-2);
  text-transform: uppercase;
}
.glossary-sub-view-all:hover { color: var(--accent); }

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}

/* Modular layout: large feature card + 3 term tiles in a row */
.glossary-modular {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}

.glossary-feature {
  position: relative;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  overflow: hidden;
  transition: background 0.2s ease;
  color: var(--text);
}

.glossary-feature:hover {
  background: var(--ink-2);
  color: var(--text);
}

.glossary-feature-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.glossary-feature-art svg {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.glossary-feature:hover .glossary-feature-art svg {
  opacity: 0.55;
}

.glossary-feature-content {
  position: relative;
  z-index: 2;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.glossary-feature-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.glossary-feature-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
}

.glossary-feature-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.glossary-feature-dek {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 380px;
  margin: 0 0 auto 0;
}

.glossary-feature-cta {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-block;
  transition: transform 0.2s ease;
}

.glossary-feature:hover .glossary-feature-cta {
  transform: translateX(6px);
}

@media (max-width: 1100px) {
  .glossary-modular {
    grid-template-columns: repeat(2, 1fr);
  }
  .glossary-feature {
    grid-column: 1 / -1;
    min-height: 220px;
  }
}

@media (max-width: 600px) {
  .glossary-modular {
    grid-template-columns: 1fr;
  }
  .glossary-feature {
    grid-column: auto;
  }
}

.glossary-term {
  background: var(--ink);
  padding: 32px 24px;
  display: block;
  color: var(--text);
  transition: background 0.2s ease;
  min-height: 220px;
}

.glossary-term:hover {
  background: var(--ink-2);
  color: var(--text);
}
.glossary-term:hover .glossary-name { color: var(--accent); }

.glossary-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.glossary-name {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--text);
  transition: color 0.2s ease;
}

.glossary-def {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

@media (max-width: 1100px) {
  .glossary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .glossary-grid { grid-template-columns: 1fr; }
  .glossary-strip { padding: 64px 24px; }
}

/* ============================================
 * HERO (homepage featured)
 * ============================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--ink);
}

.hero-bg-animated {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(70,70,75,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(40,40,45,0.6) 0%, transparent 60%),
    conic-gradient(from 200deg at 50% 50%, #0a0a0a, #1a1a1c, #0a0a0a, #000, #1a1a1c, #0a0a0a);
  animation: systemmRotate 60s linear infinite;
  filter: blur(80px) brightness(0.8);
  transform: scale(1.4);
}

@keyframes systemmRotate {
  from { transform: scale(1.4) rotate(0deg); }
  to { transform: scale(1.4) rotate(360deg); }
}

.hero-feature-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: contrast(1.1) saturate(0.6);
}

.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.hero-silhouette {
  display: none;
}

/* ============================================
 * HERO INSTRUMENT (animated protocol-completing gauge)
 * ============================================ */

.hero-instrument {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 56vw, 720px);
  height: clamp(420px, 56vw, 720px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

.instrument-sublabel {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 4px;
}

/* Slow rotating tick frame in the background */
.instrument-ticks {
  transform-origin: 0px 0px;
  animation: systemm-rotate 240s linear infinite;
}

@keyframes systemm-rotate {
  to { transform: rotate(360deg); }
}

/* Concentric orbits — three dots circling at staggered speeds, alternating directions */
.instrument-orbit-1 { transform-origin: 0px 0px; animation: systemm-rotate 18s linear infinite; }
.instrument-orbit-2 { transform-origin: 0px 0px; animation: systemm-rotate 32s linear infinite reverse; }
.instrument-orbit-3 { transform-origin: 0px 0px; animation: systemm-rotate 11s linear infinite; }

/* Mid-ring teal arc that sweeps in and holds */
.instrument-arc-progress {
  animation: systemm-progress 14s cubic-bezier(0.45, 0, 0.45, 1) infinite;
}
@keyframes systemm-progress {
  0%   { stroke-dashoffset: 1257; }
  45%  { stroke-dashoffset: 200; }
  55%  { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 1257; }
}

/* Subtle pulse on the central wordmark */
.instrument-wordmark {
  animation: systemm-wordmark-pulse 8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes systemm-wordmark-pulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 0.95; }
}

/* Brand-statement hero: instrument can be larger and more central */
.hero-brand .hero-instrument {
  width: clamp(480px, 64vw, 820px);
  height: clamp(480px, 64vw, 820px);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .hero-instrument {
    width: 380px;
    height: 380px;
  }
  .instrument-sublabel { font-size: 8px; letter-spacing: 4px; }
}

.hero-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 64px;
  color: var(--text);
}
.hero-link:hover { color: var(--text); }

.hero-content { max-width: 1100px; }

.hero-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 32px;
}
.hero-tag { color: var(--brass); font-style: italic; font-weight: 400; }

.hero-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--text);
}

.hero-dek {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 580px;
}

.hero-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Brand-statement fallback hero (when no eligible article for hero) */
.hero-brand .hero-content-brand {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 64px;
  pointer-events: none;
}

.hero-content-brand .hero-title {
  max-width: 1100px;
}

.hero-content-brand .hero-title em {
  font-style: italic;
  font-weight: 200;
  color: var(--text);
}

.hero-accent {
  color: var(--accent);
}

/* Hero stacking: brand-statement variant */
.hero-brand .hero-bg-animated { z-index: 1; }
.hero-brand .hero-vignette { z-index: 3; }
.hero-brand .hero-instrument { z-index: 2; }
.hero-brand .hero-content-brand { z-index: 5; }

@media (max-width: 900px) {
  .hero-brand .hero-content-brand { padding: 0 24px; }
}

main.site-main {
  padding-top: 80px;
}

@media (max-width: 900px) {
  main.site-main { padding-top: 64px; }
}

@media (max-width: 900px) {
  .hero { min-height: 100vh; }
  .hero-link { padding: 0 24px; }
  .hero-title { font-size: clamp(40px, 12vw, 80px); }
}

/* ============================================
 * SECTION HEADERS
 * ============================================ */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 96px 64px 48px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 16px;
}

.section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.section-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1;
}

.section-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .section-head { padding: 64px 24px 32px; }
}

/* ============================================
 * ARTICLE GRID
 * ============================================ */

.latest { padding-bottom: 96px; }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: 0 32px;
}

.article-tile {
  background: var(--ink);
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}

.article-tile a {
  display: block;
  height: 100%;
  position: relative;
  color: var(--text);
}
.article-tile a:hover { color: var(--text); }

.tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.article-tile:hover .tile-img { transform: scale(1.04); }

.tile-img-fallback {
  background:
    radial-gradient(ellipse at 50% 50%, #1a1a1a 0%, #0a0a0a 70%),
    linear-gradient(180deg, #161616 0%, #050505 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-fallback-num {
  font-family: var(--mono);
  font-size: 80px;
  font-weight: 200;
  color: var(--text-3);
  letter-spacing: 0.05em;
}

.tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.92) 100%);
}

.tile-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

.tile-cat em {
  color: var(--brass);
  font-style: italic;
  font-weight: 400;
}

.tile-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
}

.tile-cta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr 1fr; margin: 0 16px; }
}
@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; }
}

/* ============================================
 * POST PAGE
 * ============================================ */

.post-article { background: var(--ink); }

.post-hero {
  position: relative;
  min-height: 70vh;
  padding: 120px 64px 64px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.post-hero-bg-animated {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #1c2826 0%, #060a0a 70%),
    linear-gradient(135deg, #0a1614 0%, #02050a 100%);
}

.post-hero-feature-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  filter: contrast(1.1) saturate(0.5);
}

.post-hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 70%, transparent 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.post-hero-content {
  position: relative;
  z-index: 4;
  max-width: 1100px;
}

.post-hero-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 32px;
}

.post-hero-tag em {
  color: var(--brass);
  font-style: italic;
  font-weight: 400;
}

.post-hero-num { color: var(--accent); }

.post-hero-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  max-width: 1100px;
}

.post-hero-dek {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--text-2);
  max-width: 720px;
}

.protocol-data-strip {
  position: relative;
  z-index: 4;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

.protocol-data-item strong {
  color: var(--text);
  font-weight: 400;
  margin-left: 8px;
}

@media (max-width: 900px) {
  .post-hero { padding: 100px 24px 48px; }
}

/* ============================================
 * POST BODY (article reading view)
 * ============================================ */

.post-body {
  padding: 96px 0;
  background: var(--ink);
}

.post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.post-content > p,
.post-content > ul,
.post-content > ol,
.post-content > blockquote {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

.post-content > p:first-of-type::first-letter {
  font-family: var(--sans);
  font-size: 64px;
  line-height: 0.9;
  float: left;
  padding: 4px 12px 0 0;
  color: var(--accent);
  font-weight: 200;
}

.post-content h2 {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 32px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text);
  margin-top: 64px;
  margin-bottom: 16px;
}

.post-content h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 40px;
  margin-bottom: 12px;
}

.post-content h4 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  margin-top: 32px;
  margin-bottom: 8px;
}

.post-content a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.post-content a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

.post-content blockquote {
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--text-2);
}

.post-content code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--ink-3);
  padding: 2px 6px;
  border-radius: 2px;
}

.post-content pre {
  background: var(--ink-2);
  padding: 24px;
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

.post-content ul, .post-content ol {
  padding-left: 32px;
}

.post-content li {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}

.post-content img {
  max-width: 100%;
  margin: 32px 0;
  border: 1px solid var(--rule);
}

.post-content figure { margin: 32px 0; }
.post-content figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
  text-align: center;
}

/* ============================================
 * POST FOOTER
 * ============================================ */

.post-footer {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

.post-tags-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 16px;
}

.post-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.post-tag em {
  color: var(--brass);
  font-style: italic;
  font-weight: 400;
}

.post-tag-sep { color: var(--text-3); margin: 0 8px; }

.post-byline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.post-byline-name { color: var(--text); margin-left: 8px; }

.post-related { padding: 96px 0; }

/* ============================================
 * PAGE TEMPLATE
 * ============================================ */

.page-hero {
  position: relative;
  min-height: 50vh;
  padding: 120px 64px 64px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero-bg-animated {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

.page-hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 4;
  max-width: 1100px;
}

.page-hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.page-hero-title {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}

.page-hero-dek {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--text-2);
  max-width: 720px;
}

.page-body { padding: 64px 0 96px; }

@media (max-width: 900px) {
  .page-hero { padding: 100px 24px 48px; }
}

/* ============================================
 * ARCHIVE / TAG / AUTHOR
 * ============================================ */

.archive-hero {
  position: relative;
  padding: 160px 64px 64px;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.archive-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #0a0a0a 0%, #000 70%);
}

.archive-hero-content {
  position: relative;
  z-index: 4;
  max-width: 1100px;
}

.archive-hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.archive-hero-title {
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.025em;
  line-height: 1;
}

.archive-hero-dek {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-2);
  max-width: 720px;
}

.archive-hero-meta {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

.archive-grid { padding: 48px 0 96px; }

@media (max-width: 900px) {
  .archive-hero { padding: 120px 24px 48px; }
}

/* ============================================
 * SUBSCRIBE BLOCK
 * ============================================ */

.subscribe-block {
  padding: 96px 32px;
  border-top: 1px solid var(--rule);
  position: relative;
  background: var(--ink);
}

.subscribe-block::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 48px;
  background: var(--accent);
}

.subscribe-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.subscribe-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.subscribe-title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(40px, 5.5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 24px;
}

.subscribe-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: 200;
}

.subscribe-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-2);
  margin-bottom: 48px;
  line-height: 1.5;
}

.subscribe-form {
  display: flex;
  align-items: stretch;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid var(--rule);
}

.subscribe-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: lowercase;
}
.subscribe-form input:focus { outline: none; }
.subscribe-form input::placeholder { color: var(--text-3); }

.subscribe-form button {
  background: var(--text);
  color: var(--ink);
  border: none;
  padding: 18px 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  font-weight: 500;
}
.subscribe-form button:hover { background: var(--accent); color: var(--text); }

.subscribe-fineprint {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ============================================
 * FOOTER
 * ============================================ */

.systemm-footer {
  padding: 48px 32px 120px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  gap: 16px;
  background: var(--ink);
}

.footer-left {
  justify-self: start;
  display: flex;
  gap: 24px;
}

.footer-center {
  justify-self: center;
}

.footer-right {
  justify-self: end;
  text-align: right;
}

.footer-wordmark {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--text);
  /* Optical correction: the wide letter-spacing pushes the visual center
     slightly right, so nudge left by half the trailing tracking value */
  margin-left: -0.4em;
}

@media (max-width: 700px) {
  .systemm-footer {
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: 24px;
  }
  .footer-left, .footer-center, .footer-right {
    justify-self: center;
  }
  .footer-right { text-align: center; }
  .footer-wordmark { margin-left: 0; }
}

/* ============================================
 * ERROR PAGE
 * ============================================ */

.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.error-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.error-title {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.025em;
}

.error-dek {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-2);
}

.error-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}

/* ============================================
 * PAGINATION (Ghost-generated)
 * ============================================ */

.pagination {
  margin: 64px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pagination a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ============================================
 * GHOST KOENIG / EDITOR CARDS
 * Required for Koenig editor compatibility.
 * ============================================ */

/* Width classes for Koenig content cards */
.gh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gh-content > * {
  width: 100%;
  max-width: 720px;
}

.gh-content > .kg-width-wide {
  max-width: 1100px;
}

.gh-content > .kg-width-full {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.gh-content > figure.kg-width-wide,
.gh-content > figure.kg-width-full {
  margin-top: 48px;
  margin-bottom: 48px;
}

.kg-width-wide img,
.kg-width-full img {
  width: 100%;
  height: auto;
}

/* Ghost editor card defaults */

.kg-bookmark-card {
  border: 1px solid var(--rule);
  background: var(--ink-2);
  padding: 24px;
  margin: 32px 0;
}

.kg-bookmark-title { color: var(--text); }
.kg-bookmark-description { color: var(--text-2); }
.kg-bookmark-publisher { color: var(--text-3); }

.kg-callout-card {
  background: var(--ink-2);
  border-left: 3px solid var(--accent);
  padding: 24px;
  margin: 32px 0;
}

.kg-toggle-card {
  border: 1px solid var(--rule);
  margin: 24px 0;
}

.kg-button-card a {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
}

/* ============================================
 * PEPTIDES INDEX (custom tag-peptides template)
 * ============================================ */

.peptides-hero {
  position: relative;
  padding: 120px 64px 80px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.peptides-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(0,163,155,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(201,169,97,0.04) 0%, transparent 55%);
  pointer-events: none;
}

.peptides-hero-content {
  position: relative;
  max-width: 920px;
  z-index: 2;
}

.peptides-hero-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 24px;
}

.peptides-hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 28px;
}

.peptides-hero-dek {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 40px;
  max-width: 760px;
}

.peptides-hero-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.peptides-meta-item {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peptides-meta-item strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* Category strips */
.peptide-category {
  padding: 80px 64px 40px;
  border-bottom: 1px solid var(--rule);
}

.peptide-category:last-of-type {
  border-bottom: none;
}

.peptide-cat-head {
  max-width: 760px;
  margin-bottom: 48px;
}

.peptide-cat-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.peptide-cat-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 18px;
}

.peptide-cat-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.peptide-cat-dek {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 640px;
}

.peptide-cat-grid {
  /* reuses .glossary-grid base styles */
  margin-top: 0;
}

@media (max-width: 720px) {
  .peptides-hero { padding: 80px 24px 56px; }
  .peptide-category { padding: 56px 24px 24px; }
  .peptides-hero-meta { gap: 28px; }
}

/* ============================================
 * GLOSSARY LANDING (3-axis chooser)
 * ============================================ */

.glossary-axes {
  padding: 80px 64px 120px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.glossary-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 48px 36px 36px;
  min-height: 480px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.glossary-axis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(0,163,155,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glossary-axis:hover {
  border-color: var(--rule-2);
  background: var(--ink-3);
  color: var(--text);
}

.glossary-axis:hover::before {
  opacity: 1;
}

.glossary-axis-num {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  z-index: 2;
}

.glossary-axis-body {
  flex: 1;
  z-index: 2;
  position: relative;
}

.glossary-axis-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 24px;
}

.glossary-axis-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
}

.glossary-axis-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.glossary-axis-dek {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 32px;
}

.glossary-axis-foot {
  z-index: 2;
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.axis-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.axis-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.glossary-axis:hover .axis-cta {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .glossary-axes { grid-template-columns: 1fr; gap: 16px; padding: 56px 24px 80px; }
  .glossary-axis { min-height: 320px; padding: 40px 28px 28px; }
}

/* ============================================
 * LATEST-FEATURE (homepage editorial spotlight on most recent article)
 * ============================================ */

.latest-feature {
  position: relative;
  padding: 96px 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,163,155,0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%);
  overflow: hidden;
}

.latest-feature-link {
  display: block;
  max-width: 1400px;
  color: var(--text);
  position: relative;
  z-index: 2;
}

.latest-feature-link:hover { color: var(--text); }

.latest-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 36px;
}

.latest-feature-label {
  color: var(--brass);
}

.latest-feature-tag em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
}

.latest-feature-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 32px;
  max-width: 980px;
}

.latest-feature-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 760px;
  margin: 0 0 40px;
}

.latest-feature-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  transition: transform 0.2s ease;
}

.latest-feature-link:hover .latest-feature-cta {
  transform: translateX(6px);
}

@media (max-width: 720px) {
  .latest-feature { padding: 64px 24px; }
  .latest-feature-meta { gap: 16px; margin-bottom: 24px; }
  .latest-feature-dek { margin-bottom: 28px; }
}

/* ============================================
 * LATEST-FEATURE — image banner / 2-column treatment
 * ============================================ */

.latest-feature-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 2;
  min-height: 460px;
}

.latest-feature-content {
  padding-right: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.latest-feature-banner {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  min-height: 460px;
}

.latest-feature-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.latest-feature-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.30) 100%);
  pointer-events: none;
}

.latest-feature-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

/* When there's a real feature image, let it dominate the section background too */
.latest-feature-imaged {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

@media (max-width: 900px) {
  .latest-feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
  }
  .latest-feature-content {
    padding-right: 0;
  }
  .latest-feature-banner {
    min-height: 280px;
    order: -1;
  }
}

/* ============================================
 * MOBILE MENU — hamburger + full-screen overlay
 * ============================================ */

.systemm-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  z-index: 110;
  transition: border-color 0.2s ease;
}
.systemm-menu-toggle:hover { border-color: var(--rule-2); }

.menu-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 1px;
}

/* X icon when open */
body.menu-open .menu-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .menu-toggle-bar:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.systemm-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 96px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.menu-open .systemm-mobile-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.menu-open { overflow: hidden; }

.systemm-mobile-link {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text);
  padding: 8px 0;
  transition: color 0.2s ease;
}
.systemm-mobile-link:hover { color: var(--accent); }

.systemm-mobile-cta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--text);
  padding: 16px 32px;
  border-radius: 999px;
}
.systemm-mobile-cta:hover { background: var(--accent-2); color: var(--text); }

@media (max-width: 900px) {
  .systemm-menu-toggle { display: flex; }
}

/* ============================================================
 * ATMOSPHERIC LAYER (v1.7) — bringing the OG card's signature
 * (radial teal wash + brass corner marks + magazine-cover
 *  composition) across every major surface of the site.
 * ============================================================ */

/* Reusable wash: drop ::before with a radial teal glow into any container */
.atmo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.atmo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 25%, rgba(0,163,155,0.14) 0%, rgba(0,163,155,0.03) 45%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(201,169,97,0.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.atmo > * { position: relative; z-index: 1; }

/* Soft variant for tiles and quieter blocks */
.atmo-soft::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,163,155,0.08) 0%, transparent 60%);
}

/* Brass corner stamps (issue number, location, status) */
.atmo-corner {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  z-index: 4;
  pointer-events: none;
  line-height: 1.6;
}
.atmo-corner em { font-style: normal; color: var(--accent); }
.atmo-corner strong { color: var(--text); font-weight: 400; }
.atmo-corner-tl { top: 32px; left: 32px; }
.atmo-corner-tr { top: 32px; right: 32px; text-align: right; }
.atmo-corner-bl { bottom: 32px; left: 32px; }
.atmo-corner-br { bottom: 32px; right: 32px; text-align: right; }

/* Bottom hairline rule (magazine-cover signature line) */
.atmo-rule {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  height: 1px;
  background: rgba(255,255,255,0.10);
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 720px) {
  .atmo-corner { font-size: 9px; letter-spacing: 0.18em; }
  .atmo-corner-tl, .atmo-corner-tr { top: 20px; }
  .atmo-corner-bl, .atmo-corner-br { bottom: 20px; }
  .atmo-corner-tl, .atmo-corner-bl { left: 20px; }
  .atmo-corner-tr, .atmo-corner-br { right: 20px; }
  .atmo-rule { left: 20px; right: 20px; }
}

/* ============================================
 * APPLY ATMOSPHERIC TO KEY SURFACES
 * ============================================ */

/* Homepage dial hero — bring the wash forward */
.hero-brand {
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0,163,155,0.14) 0%, rgba(0,163,155,0.04) 45%, transparent 72%),
    radial-gradient(ellipse 40% 40% at 20% 90%, rgba(201,169,97,0.05) 0%, transparent 55%),
    var(--ink);
}

/* Latest-feature — magazine treatment */
.latest-feature {
  background:
    radial-gradient(ellipse 65% 55% at 25% 30%, rgba(0,163,155,0.11) 0%, rgba(0,163,155,0.02) 50%, transparent 72%),
    radial-gradient(ellipse 45% 45% at 85% 80%, rgba(201,169,97,0.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%);
  position: relative;
  overflow: hidden;
}

/* Article (post-hero) — full magazine cover treatment */
.post-hero {
  background:
    radial-gradient(ellipse 70% 55% at 70% 30%, rgba(0,163,155,0.14) 0%, rgba(0,163,155,0.03) 50%, transparent 72%),
    radial-gradient(ellipse 45% 45% at 15% 85%, rgba(201,169,97,0.06) 0%, transparent 55%),
    var(--ink) !important;
}

.post-hero-bg-animated, .post-hero-vignette { display: none !important; }

/* Hide the brass corner marks if a real feature_image is loaded — image takes over */
.post-hero.has-feature-image .atmo-corner,
.post-hero.has-feature-image .atmo-rule { display: none; }

/* Protocol Spotlight — replace the green-only gradient with the brand wash */
.protocol-spotlight-bg {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,163,155,0.20) 0%, rgba(0,163,155,0.04) 50%, transparent 72%),
    radial-gradient(ellipse 40% 40% at 15% 85%, rgba(201,169,97,0.06) 0%, transparent 55%),
    linear-gradient(135deg, #060a0a 0%, #02050a 100%) !important;
}

/* Subscribe block — bring atmospheric wash + brass moments */
.subscribe-block {
  position: relative;
  overflow: hidden;
}
.subscribe-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 30%, rgba(0,163,155,0.12) 0%, rgba(0,163,155,0.02) 50%, transparent 72%),
    radial-gradient(ellipse 45% 45% at 85% 85%, rgba(201,169,97,0.05) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.subscribe-block .subscribe-container { position: relative; z-index: 2; }

/* Tag-page heroes (peptides-hero / hormones / etc.) — strengthen wash */
.peptides-hero {
  background:
    radial-gradient(ellipse 70% 60% at 70% 25%, rgba(0,163,155,0.13) 0%, rgba(0,163,155,0.03) 50%, transparent 72%),
    radial-gradient(ellipse 40% 40% at 15% 85%, rgba(201,169,97,0.05) 0%, transparent 55%),
    var(--ink);
  overflow: hidden;
}

.peptides-hero-bg { display: none; }

/* Article tile hover — soft teal wash bloom */
.article-tile a:hover .tile-img,
.article-tile a:hover .tile-img-fallback {
  background-color: var(--ink-2);
}
.article-tile a {
  position: relative;
  transition: transform 0.3s ease;
}
.article-tile a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,163,155,0.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.article-tile a:hover::before { opacity: 1; }

/* Glossary feature card — bring the same wash inside the card */
.glossary-feature {
  background:
    radial-gradient(ellipse 75% 60% at 75% 25%, rgba(0,163,155,0.10) 0%, transparent 65%),
    var(--ink) !important;
}

/* Post-hero feature image overlay — keep text legible when image is present */
.post-hero-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.post-hero.has-feature-image .post-hero-feature-image {
  opacity: 0.55;
}

/* ============================================================
 * ATMOSPHERIC v1.7.1 — STRONGER. The OG card vibe was getting
 * lost at 0.10 alpha. Bumping wash intensity + brass accent
 * weight + adding a hero tagline composition to .hero-brand.
 * ============================================================ */

/* Hero — dial-and-tagline composition, with strong wash */
.hero-brand {
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(0,163,155,0.28) 0%, rgba(0,163,155,0.08) 35%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 12% 90%, rgba(201,169,97,0.10) 0%, transparent 55%),
    var(--ink) !important;
}

/* Latest feature — stronger wash */
.latest-feature {
  background:
    radial-gradient(ellipse 70% 55% at 22% 30%, rgba(0,163,155,0.22) 0%, rgba(0,163,155,0.05) 45%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 88% 85%, rgba(201,169,97,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%) !important;
}

/* Post hero — stronger */
.post-hero {
  background:
    radial-gradient(ellipse 70% 55% at 70% 30%, rgba(0,163,155,0.26) 0%, rgba(0,163,155,0.05) 45%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 12% 88%, rgba(201,169,97,0.11) 0%, transparent 55%),
    var(--ink) !important;
}

/* Subscribe block — much stronger so it's a moment, not a fade */
.subscribe-block::before {
  background:
    radial-gradient(ellipse 65% 60% at 50% 30%, rgba(0,163,155,0.24) 0%, rgba(0,163,155,0.05) 45%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 85% 88%, rgba(201,169,97,0.10) 0%, transparent 55%) !important;
}

/* Tag-page heroes (peptides/hormones/supplements/etc.) — stronger */
.peptides-hero {
  background:
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(0,163,155,0.24) 0%, rgba(0,163,155,0.05) 45%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 88%, rgba(201,169,97,0.10) 0%, transparent 55%),
    var(--ink) !important;
}

/* Glossary feature card — stronger */
.glossary-feature {
  background:
    radial-gradient(ellipse 80% 65% at 75% 25%, rgba(0,163,155,0.20) 0%, rgba(0,163,155,0.03) 50%, transparent 70%),
    var(--ink) !important;
}

/* Brass corner stamps — bigger, more deliberate */
.atmo-corner {
  font-size: 11px !important;
  letter-spacing: 0.26em !important;
}
.atmo-corner em { color: var(--accent); font-weight: 500; }

/* Atmospheric hairline rule — more visible */
.atmo-rule {
  background: rgba(255,255,255,0.14) !important;
  height: 1px;
}

/* ============================================
 * HERO BRAND TAGLINE — bring the OG card composition
 * to the homepage. Tagline anchored to the bottom of
 * the hero block, between the dial and the next section.
 * ============================================ */

.hero-brand {
  position: relative;
  padding-bottom: 64px;
}

.hero-brand::after {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 96px;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

.hero-tagline {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.005em;
  z-index: 5;
  pointer-events: none;
}

.hero-tagline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.hero-tagline-mono {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--text-3);
  font-style: normal;
}

@media (max-width: 720px) {
  .hero-brand::after { left: 20px; right: 20px; bottom: 84px; }
  .hero-tagline { bottom: 20px; padding: 0 24px; }
  .hero-tagline-mono { letter-spacing: 0.22em; }
}

/* ============================================================
 * v1.8.0 — OG CARD AESTHETIC ACROSS THE ENTIRE SITE
 * Body-level wash, magazine masthead, redesigned footer,
 * section-head treatment, brass touchpoints everywhere.
 * ============================================================ */

/* ---- BODY ATMOSPHERIC BASE ---- */
/* A subtle radial wash anchored to the top, fading down.
 * Every page gets warmth without being garish.            */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(0,163,155,0.10) 0%, rgba(0,163,155,0.02) 40%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 110%, rgba(201,169,97,0.04) 0%, transparent 60%);
}

main, header.systemm-header, footer.systemm-footer-v2, .systemm-grain, .systemm-scan { position: relative; z-index: 1; }

/* ---- MASTHEAD (tagline strip below the fixed header) ---- */
.systemm-masthead {
  position: relative;
  top: 80px;
  z-index: 90;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.systemm-masthead-rule {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.systemm-masthead-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 32px;
  gap: 24px;
}

.masthead-left, .masthead-right {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

.masthead-right { text-align: right; }

.masthead-center {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--text-2);
  text-align: center;
  letter-spacing: -0.005em;
}

.masthead-center em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Push main content down to account for header (80) + masthead (~44) */
main.site-main { padding-top: 124px; }

/* Hero brand on homepage already takes full viewport — let it sit beneath the masthead naturally */
.hero-brand { margin-top: -124px; padding-top: 124px; }

@media (max-width: 900px) {
  .systemm-masthead { top: 64px; }
  .systemm-masthead-content {
    grid-template-columns: 1fr;
    padding: 12px 20px;
    gap: 4px;
    text-align: center;
  }
  .masthead-left, .masthead-right { font-size: 9px; letter-spacing: 0.22em; text-align: center; }
  .masthead-center { font-size: 13px; }
  main.site-main { padding-top: 130px; }
  .hero-brand { margin-top: -130px; padding-top: 130px; }
}

/* ---- SECTION HEADER TREATMENT ---- */
/* Apply the OG-card composition to .section-head (used in .latest, etc.) */
.section-head {
  position: relative;
  padding: 64px 64px 32px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: transparent;
}

.section-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 64px;
  width: 60px;
  height: 1px;
  background: var(--accent);
}

.section-head .section-label {
  color: var(--brass);
  letter-spacing: 0.28em;
}

.section-head .section-title {
  font-family: var(--serif);
  font-weight: 300;
}

/* ---- ARTICLE TILE REFRESH ---- */
.article-tile {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.article-tile:hover {
  border-color: rgba(0,163,155,0.30);
  background: var(--ink-3);
}

.article-tile::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  background: var(--brass);
  border-radius: 50%;
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.article-tile:hover::after {
  opacity: 1;
  transform: scale(1.4);
}

/* ---- MAGAZINE FOOTER v2 ---- */
.systemm-footer-v2 {
  position: relative;
  padding: 80px 64px 40px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,163,155,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 100%, rgba(201,169,97,0.05) 0%, transparent 55%),
    var(--ink);
  border-top: 1px solid var(--rule);
}

.footer-v2-rule {
  height: 1px;
  background: rgba(255,255,255,0.10);
}

.footer-v2-content {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 64px;
  padding: 48px 0;
  align-items: start;
}

.footer-v2-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-v2-wordmark {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: 0.12em;
  color: var(--text);
  line-height: 1;
}

.footer-v2-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--text-2);
  margin: 0;
  max-width: 420px;
  letter-spacing: -0.005em;
}

.footer-v2-tagline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.footer-v2-strip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--text-3);
  margin: 8px 0 0;
  line-height: 1.7;
}

.footer-v2-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.footer-v2-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-v2-col-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}

.footer-v2-col a {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--text-2);
  transition: color 0.2s ease;
  line-height: 1.6;
}

.footer-v2-col a:hover {
  color: var(--accent);
}

.footer-v2-stamps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 32px 0 0;
  gap: 24px;
}

.footer-v2-stamp-left,
.footer-v2-stamp-center,
.footer-v2-stamp-right {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}

.footer-v2-stamp-left {
  color: var(--brass);
}

.footer-v2-stamp-right { text-align: right; color: var(--brass); }

.footer-v2-stamp-center { text-align: center; }

@media (max-width: 900px) {
  .systemm-footer-v2 { padding: 56px 24px 32px; }
  .footer-v2-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-v2-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .footer-v2-stamps {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .footer-v2-stamp-left, .footer-v2-stamp-right { text-align: center; }
}

/* ---- KILL the old footer (in case index.hbs cache lingers) ---- */
.systemm-footer { display: none !important; }

/* ============================================================
 * ABOUT PAGE (page-about.hbs) — magazine cover layout
 * ============================================================ */

.about-hero {
  position: relative;
  padding: 96px 64px 80px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 80% 60% at 30% 25%, rgba(0,163,155,0.20) 0%, rgba(0,163,155,0.04) 50%, transparent 72%),
    radial-gradient(ellipse 45% 45% at 85% 90%, rgba(201,169,97,0.08) 0%, transparent 55%),
    var(--ink);
  overflow: hidden;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.about-hero-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 32px;
}

.about-hero-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 32px;
}

.about-hero-title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 200;
}

.about-hero-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 760px;
  margin: 0;
}

/* Section structure */
.about-section {
  position: relative;
  padding: 96px 64px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.about-section-head {
  position: sticky;
  top: 140px;
}

.about-section-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.about-section-rule {
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.about-section-body { max-width: 760px; }

.about-section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 32px;
}

.about-section-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.about-section-body p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 18px;
}

.about-section-body p:last-child { margin-bottom: 0; }

/* Method principles grid */
.about-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 16px;
}

.about-principle {
  position: relative;
  padding: 24px 24px 24px 48px;
  border-left: 1px solid var(--rule);
}

.about-principle-num {
  position: absolute;
  left: 0;
  top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--brass);
  padding-left: 12px;
}

.about-principle-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 8px;
}

.about-principle-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

/* Founders grid */
.about-founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  max-width: 760px;
}

.about-founder {
  position: relative;
  padding: 32px 32px 32px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
}

.about-founder-stamp {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--brass);
  z-index: 2;
}

.about-founder-stamp em { font-style: normal; color: var(--accent); }

.about-founder-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 70% 70% at 50% 30%, rgba(0,163,155,0.18) 0%, transparent 60%),
    var(--ink-3);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-founder-photo-placeholder {
  font-family: var(--sans);
  font-weight: 100;
  font-size: 64px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.18);
}

.about-founder-content { display: flex; flex-direction: column; }

.about-founder-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
}

.about-founder-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.about-founder-content p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 14px;
}

.about-founder-content p:last-of-type { margin-bottom: 20px; }

.about-founder-content p em { font-style: italic; }

.about-founder-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  transition: transform 0.2s ease;
  display: inline-block;
  align-self: flex-start;
}

.about-founder-link:hover { transform: translateX(4px); color: var(--accent); }

/* CTA block */
.about-cta {
  position: relative;
  padding: 96px 64px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,163,155,0.18) 0%, rgba(0,163,155,0.03) 50%, transparent 72%),
    radial-gradient(ellipse 45% 45% at 85% 88%, rgba(201,169,97,0.08) 0%, transparent 55%),
    var(--ink);
  text-align: center;
  overflow: hidden;
}

.about-cta-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.about-cta-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.about-cta-title em { font-style: italic; color: var(--accent); font-weight: 400; }

.about-cta-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 32px;
}

.about-extra {
  padding: 64px 64px;
  border-top: 1px solid var(--rule);
}

.about-extra-inner {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .about-hero { padding: 64px 24px 56px; }
  .about-section {
    padding: 64px 24px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-section-head { position: static; }
  .about-principles { grid-template-columns: 1fr; }
  .about-founder {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .about-founder-photo { max-width: 160px; }
  .about-cta { padding: 64px 24px; }
}

/* ============================================================
 * HEADER WORDMARK — use the actual SYSTEMM logo image instead
 * of typed text. Pulls the same asset we use in the OG card.
 * ============================================================ */

.systemm-wordmark {
  display: inline-block;
  width: auto;
  height: 22px;
  background-image: url("../img/systemm-wordmark.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 0;
  letter-spacing: 0;
  color: transparent;
  overflow: hidden;
  text-indent: -9999px;
  /* Make the image fill via width derived from aspect ratio (568x93 ≈ 6.11) */
  aspect-ratio: 568 / 93;
}

.systemm-wordmark:hover {
  opacity: 0.7;
}

/* Footer wordmark — use the same image, but larger */
.footer-v2-wordmark {
  display: inline-block;
  width: auto;
  height: clamp(48px, 5.5vw, 72px);
  background-image: url("../img/systemm-wordmark.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 0;
  letter-spacing: 0;
  color: transparent;
  overflow: hidden;
  text-indent: -9999px;
  aspect-ratio: 568 / 93;
}

@media (max-width: 900px) {
  .systemm-wordmark { height: 18px; }
}

/* ============================================================
 * v1.8.3 — MOBILE FOOTER CLEANUP
 * Single column, centered, tighter type, properly spaced.
 * ============================================================ */

@media (max-width: 900px) {
  .footer-v2-cols {
    grid-template-columns: 1fr !important;
    gap: 28px;
    text-align: center;
  }
  .footer-v2-content {
    text-align: center;
    padding: 36px 0;
    gap: 36px;
  }
  .footer-v2-brand {
    align-items: center;
  }
  .footer-v2-tagline {
    max-width: 320px;
    text-align: center;
  }
  .footer-v2-strip {
    font-size: 9px;
    letter-spacing: 0.20em;
    line-height: 1.8;
    max-width: 320px;
  }
  .footer-v2-col {
    align-items: center;
    gap: 10px;
  }
  .footer-v2-col-label {
    margin-bottom: 0;
  }
  .footer-v2-wordmark {
    height: 44px !important;
  }
  .footer-v2-stamps {
    gap: 6px;
    padding: 20px 0 0;
  }
  .footer-v2-stamp-left,
  .footer-v2-stamp-center,
  .footer-v2-stamp-right {
    font-size: 9px;
    letter-spacing: 0.20em;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .systemm-footer-v2 { padding: 40px 20px 24px; }
  .footer-v2-wordmark { height: 38px !important; }
  .footer-v2-tagline { font-size: 15px; }
  .footer-v2-strip {
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }
}

/* ============================================================
 * v1.9.0 — MOBILE OPTION A
 * Wrap tiles in .glossary-modular-tiles (display:contents on
 * desktop so grid keeps working; horizontal scroll on mobile).
 * Mobile feature card carries the full OG-card composition.
 * ============================================================ */

.glossary-modular-tiles { display: contents; }

@media (max-width: 900px) {
  .glossary-modular {
    display: block !important;
    background: transparent !important;
    grid-template-columns: none !important;
  }

  .glossary-modular-tiles {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 16px 24px 20px;
    margin: 0 -24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .glossary-modular-tiles::-webkit-scrollbar { display: none; }

  .glossary-modular-tiles .glossary-term {
    flex: 0 0 240px;
    min-width: 240px;
    max-width: 240px;
    scroll-snap-align: start;
    min-height: auto !important;
    padding: 22px 18px !important;
    background:
      radial-gradient(ellipse 80% 70% at 80% 20%, rgba(0,163,155,0.10) 0%, transparent 60%),
      var(--ink-2) !important;
    border: 1px solid var(--rule);
    position: relative;
  }

  /* Brass corner dot on each tile */
  .glossary-modular-tiles .glossary-term::after {
    content: '';
    position: absolute;
    top: 16px; right: 16px;
    width: 5px; height: 5px;
    background: var(--brass);
    border-radius: 50%;
    opacity: 0.85;
  }

  .glossary-modular-tiles .glossary-num {
    color: var(--brass) !important;
  }

  .glossary-modular-tiles .glossary-name {
    font-family: var(--serif) !important;
    font-style: italic;
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .glossary-modular-tiles .glossary-def {
    font-family: var(--sans) !important;
    font-style: normal !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* ---- FEATURE CARD: OG-card composition on mobile ---- */
  .glossary-feature {
    position: relative;
    min-height: 360px !important;
    padding: 60px 20px 60px !important;
    overflow: hidden;
  }

  /* Stronger teal radial wash, per-category color accent */
  .glossary-feature-pep {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(0,163,155,0.40) 0%, rgba(0,163,155,0.10) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(201,169,97,0.08) 0%, transparent 60%),
      var(--ink) !important;
  }
  .glossary-feature-horm {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(201,169,97,0.32) 0%, rgba(201,169,97,0.06) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(0,163,155,0.10) 0%, transparent 60%),
      var(--ink) !important;
  }
  .glossary-feature-supp {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(0,163,155,0.36) 0%, rgba(0,163,155,0.08) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(201,169,97,0.06) 0%, transparent 60%),
      var(--ink) !important;
  }
  .glossary-feature-rx {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(201,169,97,0.30) 0%, rgba(201,169,97,0.05) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(0,163,155,0.08) 0%, transparent 60%),
      var(--ink) !important;
  }
  .glossary-feature-fit {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(0,163,155,0.36) 0%, rgba(0,163,155,0.08) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(201,169,97,0.07) 0%, transparent 60%),
      var(--ink) !important;
  }

  /* Background dial — visible on the right side */
  .glossary-feature-art {
    opacity: 0.95 !important;
    pointer-events: none;
  }
  .glossary-feature-art svg {
    opacity: 0.55 !important;
    transform: scale(1.1);
    transform-origin: 75% 50%;
  }

  /* Hide the desktop feature label — replaced by corner stamp below */
  .glossary-feature-label {
    display: none !important;
  }

  /* Title becomes italic serif on mobile */
  .glossary-feature-title {
    font-family: var(--serif) !important;
    font-style: italic;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.0 !important;
    margin: 0 0 14px !important;
    max-width: 240px;
  }

  /* Hide the desktop dek */
  .glossary-feature-dek {
    display: none !important;
  }

  /* Hide the desktop CTA — replaced by bottom-left brass stamp */
  .glossary-feature-cta {
    display: none !important;
  }

  /* Corner stamps via pseudo-elements + per-category content */
  .glossary-feature::before,
  .glossary-feature::after {
    position: absolute;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass);
    z-index: 3;
    pointer-events: none;
  }

  /* Top-left stamp = ISSUE 01 with bullet */
  .glossary-feature::before {
    content: '● ISSUE 01';
    top: 20px;
    left: 20px;
    color: var(--accent);
  }

  /* Top-right stamp = category name */
  .glossary-feature-pep::after  { content: 'PEPTIDES'; }
  .glossary-feature-horm::after { content: 'HORMONES'; }
  .glossary-feature-supp::after { content: 'SUPPLEMENTS'; }
  .glossary-feature-rx::after   { content: 'LIFESTYLE Rx'; }
  .glossary-feature-fit::after  { content: 'FITNESS'; }

  .glossary-feature::after {
    top: 20px;
    right: 20px;
    text-align: right;
  }

  /* Hairline rule + bottom labels — use feature-content pseudo-elements */
  .glossary-feature-content {
    position: static !important;
  }

  .glossary-feature-content::before,
  .glossary-feature-content::after {
    position: absolute;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass);
    z-index: 3;
  }

  /* Bottom-left CTA stamp */
  .glossary-feature-content::before {
    content: 'EXPLORE →';
    bottom: 20px;
    left: 20px;
  }

  /* Bottom-right entry count — per-category */
  .glossary-feature-pep .glossary-feature-content::after  { content: '22 ENTRIES · 7 CATEGORIES'; }
  .glossary-feature-horm .glossary-feature-content::after { content: '16 ENTRIES · 4 CATEGORIES'; }
  .glossary-feature-supp .glossary-feature-content::after { content: '35 ENTRIES · 6 CATEGORIES'; }
  .glossary-feature-rx .glossary-feature-content::after   { content: '12 ENTRIES · 4 CATEGORIES'; }
  .glossary-feature-fit .glossary-feature-content::after  { content: '23 ENTRIES'; }

  .glossary-feature-content::after {
    bottom: 20px;
    right: 20px;
    text-align: right;
  }

  /* Hairline rule via background of feature-art container */
  .glossary-feature::before {
    box-shadow: none;
  }
  .glossary-feature-art::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 44px;
    height: 1px;
    background: rgba(255,255,255,0.18);
    z-index: 2;
  }

  /* Mono micro-strip showing subcategories */
  .glossary-feature-art::before {
    position: absolute;
    bottom: 60px;
    left: 20px;
    max-width: 240px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--text-3);
    text-transform: uppercase;
    line-height: 1.8;
    z-index: 2;
  }
  .glossary-feature-pep  .glossary-feature-art::before { content: 'GLP · GH · RECOVERY · COSMETIC · COGNITIVE · LONGEVITY · SEXUAL'; }
  .glossary-feature-horm .glossary-feature-art::before { content: 'ANABOLIC · THYROID · ADRENAL · METABOLIC'; }
  .glossary-feature-supp .glossary-feature-art::before { content: 'FOUNDATION · SLEEP · COGNITIVE · MITO · PERFORMANCE · GUT'; }
  .glossary-feature-rx   .glossary-feature-art::before { content: 'SEXUAL · METABOLIC · AESTHETIC · MIND'; }
  .glossary-feature-fit  .glossary-feature-art::before { content: 'TRAINING · MOBILITY · CONDITIONING · RECOVERY · NUTRITION'; }
}

/* ============================================================
 * v1.9.1 — JAW SILHOUETTE in the hero
 * Subtle ghost-layer of the deck cover portrait behind the dial.
 * Sits between the radial wash and the dial SVG.
 * ============================================================ */

.hero-brand .hero-bg-animated {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-jaw.jpg");
  background-size: cover;
  background-position: 28% center;
  background-repeat: no-repeat;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  filter: contrast(1.05) saturate(0);
}

.hero-brand .hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 50% 50%, transparent 0%, rgba(0,0,0,0.50) 70%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Make sure the dial sits above the jaw + vignette */
.hero-brand .hero-instrument {
  position: relative;
  z-index: 3;
}

/* And the hero tagline */
.hero-brand .hero-tagline {
  z-index: 5;
}

@media (max-width: 720px) {
  .hero-brand .hero-bg-animated {
    background-position: 30% center;
    opacity: 0.10;
  }
}

/* ============================================================
 * v1.9.2 — JAW PORTRAIT FIX
 * Drop screen blend-mode (was creating rotating-square artifact
 * through the spinning dial). Bump opacity. Mask the rectangular
 * edges to fade into the surrounding black.
 * ============================================================ */

.hero-brand .hero-bg-animated {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-jaw.jpg");
  background-size: cover;
  background-position: 28% center;
  background-repeat: no-repeat;
  opacity: 0.42;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 1;
  filter: contrast(1.10) brightness(0.95) saturate(0);

  /* Soft radial mask — fades the rectangular edges into black so no hard frame */
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 35% 50%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 90%);
  mask-image: radial-gradient(ellipse 75% 80% at 35% 50%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 90%);
}

/* Vignette stays — softens the center where dial sits */
.hero-brand .hero-vignette {
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(0,0,0,0.50) 85%, rgba(0,0,0,0.92) 100%);
}

@media (max-width: 720px) {
  .hero-brand .hero-bg-animated {
    background-position: 50% center;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 92%);
    mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0) 92%);
  }
}

/* ============================================================
 * v1.9.3 — JAW: kill rotation + blur from base v1.0 CSS,
 *          make it a real, static portrait
 * ============================================================ */

.hero-brand .hero-bg-animated {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-jaw.jpg");
  background-size: cover;
  background-position: 60% center;  /* nudge face left of dial center */
  background-repeat: no-repeat;
  opacity: 0.60;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 1;
  /* Hard overrides — base CSS had rotation + blur + scale, all killed */
  animation: none !important;
  filter: contrast(1.15) brightness(0.85) saturate(0) !important;
  transform: none !important;

  -webkit-mask-image: radial-gradient(ellipse 95% 100% at 50% 50%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0) 95%);
  mask-image: radial-gradient(ellipse 95% 100% at 50% 50%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0) 95%);
}

/* Vignette over the portrait — slightly darker center so the dial reads */
.hero-brand .hero-vignette {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 50% 50%, rgba(0,0,0,0.50) 0%, transparent 65%),
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(0,0,0,0.40) 80%, rgba(0,0,0,0.92) 100%);
}

@media (max-width: 720px) {
  .hero-brand .hero-bg-animated {
    background-position: 50% center;
    opacity: 0.50;
  }
}

/* ============================================================
 * v1.9.6 — "INTEGRATED." as the punch
 * Pull it out of the list, italic serif teal, lands like a period.
 * ============================================================ */

.hero-tagline-punch {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--accent);
}

.hero-tagline-punch em {
  font-style: italic;
  color: var(--accent);
}

.footer-v2-punch {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--accent);
}

.footer-v2-punch em {
  font-style: italic;
  color: var(--accent);
}

@media (max-width: 720px) {
  .footer-v2-punch {
    font-size: 18px;
    text-align: center;
  }
  .hero-tagline-punch {
    font-size: 20px;
  }
}

/* ============================================================
 * v1.9.8 — MOBILE: kill fixed corner labels, replace with a
 * clean data block in document flow under the masthead.
 * ============================================================ */

/* Desktop default — hide the new mobile-only data block */
.systemm-data-block {
  display: none;
}

@media (max-width: 900px) {
  /* Hide the fixed-position corner labels — they were the scrambled,
     scroll-following text. We replace them with the static data block. */
  .systemm-corner-tl,
  .systemm-corner-tr,
  .systemm-corner-bl,
  .systemm-corner-br {
    display: none !important;
  }

  /* Show + style the mobile data block */
  .systemm-data-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 24px 16px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    background: rgba(0,0,0,0.4);
    position: relative;
    z-index: 80;
  }

  .systemm-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    line-height: 1.4;
  }

  .systemm-data-row > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .systemm-data-live em {
    font-style: normal;
    color: var(--accent);
    margin-right: 6px;
  }

  .systemm-data-issue {
    color: var(--text-2);
  }
}

@media (max-width: 380px) {
  .systemm-data-block {
    font-size: 8.5px;
    letter-spacing: 0.18em;
    padding: 12px 20px 14px;
  }
}

/* ============================================================
 * v1.9.9 — DESKTOP: same data block treatment as mobile.
 * Kill the fixed scrolling corner labels everywhere; replace
 * with a static, in-flow data strip under the masthead.
 * ============================================================ */

/* Kill the fixed corner labels site-wide */
.systemm-corner-tl,
.systemm-corner-tr,
.systemm-corner-bl,
.systemm-corner-br {
  display: none !important;
}

/* Show the data block on every screen size */
.systemm-data-block {
  display: flex;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  background: rgba(0,0,0,0.4);
  position: relative;
  z-index: 80;
  padding: 12px 32px;
  border-bottom: 1px solid var(--rule);
}

/* Desktop: 3-column horizontal layout */
@media (min-width: 901px) {
  .systemm-data-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 32px;
  }

  .systemm-data-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .systemm-data-row:first-child {
    flex: 1;
  }

  /* Second row: lat/long + clock, right-aligned */
  .systemm-data-row:last-child {
    flex: 1;
    justify-content: flex-end;
    text-align: right;
  }

  .systemm-data-live em {
    font-style: normal;
    color: var(--accent);
    margin-right: 8px;
  }

  .systemm-data-issue {
    color: var(--text-2);
  }

  /* Show a vertical separator between Live and Issue */
  .systemm-data-issue::before {
    content: '·';
    margin-right: 12px;
    color: var(--text-3);
  }

  /* Vertical separator between lat/long and clock */
  .systemm-clock::before {
    content: '·';
    margin-right: 12px;
    color: var(--text-3);
  }
}

/* ============================================================
 * v1.10.0 — TOP BAR STACK: masthead, data strip, nav
 * All three fixed at top, stacked in this order. Content scrolls
 * underneath all of them. Lat and Lon are split into separate
 * spans so neither gets squeezed off-screen.
 * ============================================================ */

/* === MASTHEAD (top, fixed) === */
.systemm-masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 102;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}

.systemm-masthead-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 32px;
  gap: 24px;
}

/* === DATA STRIP (below masthead, fixed) === */
.systemm-data-block {
  position: fixed !important;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  padding: 10px 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.systemm-data-row {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.systemm-data-row-right { text-align: right; }

.systemm-data-live em {
  font-style: normal;
  color: var(--accent);
}

.systemm-data-issue { color: var(--text-2); }

.systemm-data-coord {
  color: var(--text-3);
}

/* Add visual separators between siblings inside each row */
.systemm-data-row > * + *::before {
  content: '·';
  margin-right: 14px;
  color: var(--text-3);
}

/* === NAV (below data strip, fixed) === */
.systemm-header {
  position: fixed !important;
  top: 80px !important;  /* masthead 42 + data 38 */
  left: 0;
  right: 0;
  z-index: 100;
}

/* === MAIN CONTENT padding to clear the 3 stacked fixed bars === */
body { padding-top: 160px; }  /* masthead 42 + data 38 + nav 80 */

main.site-main { padding-top: 0; }

.hero-brand { margin-top: 0; padding-top: 0; }

/* === MOBILE: smaller header, stacked data rows for narrow screens === */
@media (max-width: 900px) {
  .systemm-masthead-content {
    grid-template-columns: 1fr;
    padding: 10px 20px;
    gap: 4px;
    text-align: center;
  }
  .masthead-left, .masthead-right {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-align: center;
  }
  .masthead-center { font-size: 12px; }

  .systemm-data-block {
    top: 64px;  /* mobile masthead is ~64px tall when stacked vertically */
    flex-direction: column;
    gap: 4px;
    padding: 8px 20px 10px;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-align: center;
  }
  .systemm-data-row {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .systemm-data-row > * + *::before {
    margin-right: 10px;
  }

  .systemm-header {
    top: 110px !important;  /* masthead ~64 + data ~46 */
    height: 64px;
  }

  body { padding-top: 174px; }  /* masthead 64 + data 46 + nav 64 */
}

@media (max-width: 480px) {
  .masthead-center { font-size: 11px; }
  .systemm-data-block {
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }
  body { padding-top: 178px; }
}

/* ============================================================
 * v1.10.1 — FLIP: nav at the very top, masthead and data below
 * ============================================================ */

/* Nav: top of stack */
.systemm-header {
  top: 0 !important;
}

/* Masthead: just below nav */
.systemm-masthead {
  top: 80px !important;
}

/* Data strip: below masthead */
.systemm-data-block {
  top: 122px !important;  /* nav 80 + masthead 42 */
}

@media (max-width: 900px) {
  .systemm-header {
    top: 0 !important;
  }
  .systemm-masthead {
    top: 64px !important;
  }
  .systemm-data-block {
    top: 128px !important;  /* nav 64 + masthead ~64 */
  }
}

/* ============================================================
 * v1.10.2 — Nav stays fixed at top. Masthead + data strip
 * scroll away with the page. Mobile data strip restored
 * to its 2-row stacked layout.
 * ============================================================ */

/* Nav stays fixed at top */
.systemm-header {
  position: fixed !important;
  top: 0 !important;
  z-index: 100;
}

/* Masthead: static (in flow), no top offset */
.systemm-masthead {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
}

/* Data block: static (in flow), no top offset */
.systemm-data-block {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
}

/* Body padding only clears the fixed nav */
body {
  padding-top: 80px !important;
}

main.site-main {
  padding-top: 0 !important;
}

.hero-brand {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* MOBILE: 2-row stacked data strip with left/right alignment */
@media (max-width: 900px) {
  body { padding-top: 64px !important; }

  .systemm-data-block {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 24px 16px !important;
    text-align: left !important;
    align-items: stretch !important;
  }

  .systemm-data-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Push the right-side items to the end of each row */
  .systemm-data-issue,
  .systemm-clock {
    margin-left: auto !important;
  }

  /* Remove the auto-separator BEFORE clock (it's pushed by margin, no · needed) */
  .systemm-clock::before {
    content: none !important;
    margin: 0 !important;
  }

  /* Remove auto-separator before issue label too */
  .systemm-data-issue::before {
    content: none !important;
    margin: 0 !important;
  }

  /* Keep · between Lat and Lon */
  .systemm-data-coord + .systemm-data-coord::before {
    content: '·' !important;
    margin-right: 12px !important;
    color: var(--text-3);
  }
}

/* ============================================================
 * v1.10.3 — Nav z-index actually wins.
 * Earlier rule (`header.systemm-header { z-index: 1 }`)
 * had higher specificity than my class-only rule. Forcing it
 * with !important now so the nav always sits above content.
 * ============================================================ */

header.systemm-header,
.systemm-header {
  position: fixed !important;
  top: 0 !important;
  z-index: 150 !important;
}

/* Make sure no in-flow content can ever stack over the nav.
   Main, footer, and section blocks stay below it. */
main.site-main,
footer.systemm-footer-v2 {
  z-index: 1 !important;
}

/* ============================================================
 * v1.10.5 — Blend nav + masthead + data strip into one band.
 * Remove the borders between them. Keep one bottom border on
 * the whole stack (on .systemm-data-block) to separate from
 * content. Unify backgrounds.
 * ============================================================ */

/* Unified dark background, same opacity across all three */
header.systemm-header,
.systemm-header,
.systemm-masthead,
.systemm-data-block {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* No borders between them */
header.systemm-header,
.systemm-header {
  border-bottom: none !important;
}

.systemm-masthead {
  border-bottom: none !important;
}

/* Only the bottom of the stack gets a rule, separating from content */
.systemm-data-block {
  border-bottom: 1px solid var(--rule) !important;
  border-top: none !important;
}

/* Center the single-row data strip on desktop */
@media (min-width: 901px) {
  .systemm-data-block {
    justify-content: center !important;
  }
  .systemm-data-row {
    justify-content: center !important;
  }
}

/* Mobile: still center, single row */
@media (max-width: 900px) {
  .systemm-data-block {
    flex-direction: row !important;
    text-align: center !important;
  }
  .systemm-data-row {
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .systemm-data-row > * {
    margin-left: 0 !important;  /* undo earlier auto-margin */
  }
}

/* ============================================================
 * v1.10.6 — Mobile centering + hamburger menu fix
 * ============================================================ */

@media (max-width: 900px) {
  /* Center the wordmark in the nav, fix-position the hamburger so it
     stays above the mobile menu when it opens and remains clickable. */
  .systemm-header-inner {
    justify-content: center !important;
    position: relative;
  }

  .systemm-wordmark {
    /* Center the wordmark image */
    margin: 0 auto;
  }

  .systemm-menu-toggle {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 250 !important;
  }

  /* Bump the mobile menu above the nav so it actually covers the page
     when open (was z-index 99, nav was 150, so menu was hidden behind nav) */
  .systemm-mobile-menu {
    z-index: 160 !important;
  }

  /* Make sure the data strip + masthead are truly centered on mobile */
  .systemm-data-block,
  .systemm-data-row {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .systemm-masthead-content {
    text-align: center !important;
  }
  .masthead-left,
  .masthead-center,
  .masthead-right {
    text-align: center !important;
  }
}

/* Section head: "View all" link styling + mobile centering */
.section-label-link {
  color: var(--accent) !important;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}
.section-label-link:hover {
  color: var(--accent-2) !important;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .section-head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .section-title {
    text-align: center !important;
  }
}

/* ============================================================
 * v1.10.7 — GLOSSARY A–Z page (page-glossary-az.hbs)
 * ============================================================ */

.az-jumpnav {
  position: sticky;
  top: 80px;  /* under the fixed nav */
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}

.az-jumpnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-transform: uppercase;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}

.az-jumpnav a:hover {
  background: var(--accent);
  color: var(--ink);
}

.az-jump-empty {
  color: var(--text-3) !important;
  opacity: 0.35;
  pointer-events: none;
}

.az-list {
  padding: 32px 64px 96px;
  max-width: 1280px;
  margin: 0 auto;
}

.az-letter {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--accent);
  margin: 56px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 140px;
}

.az-letter:first-child { margin-top: 0; }

.az-term {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr auto;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  color: var(--text);
  transition: background 0.2s ease, padding 0.2s ease;
}

.az-term:hover {
  background: rgba(0, 163, 155, 0.05);
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
}

.az-term:hover .az-term-name {
  color: var(--accent);
}

.az-term-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  transition: color 0.2s ease;
}

.az-term-def {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

.az-term-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .az-list { padding: 24px 24px 80px; }

  .az-term {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .az-term:hover {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .az-term-name { font-size: 22px; }
  .az-term-cat {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .az-letter {
    margin: 40px 0 12px;
    font-size: 56px;
  }

  .az-jumpnav {
    padding: 12px 16px;
    gap: 0;
  }
  .az-jumpnav a {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
}

.peptides-hero-az-link {
  color: var(--accent);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(0, 163, 155, 0.30);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.peptides-hero-az-link:hover {
  text-decoration-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
 * v1.11.0 — LONGEVITY category mobile feature-card styling
 * ============================================================ */

@media (max-width: 900px) {
  .glossary-feature-long {
    background:
      radial-gradient(ellipse 90% 80% at 65% 30%, rgba(0,163,155,0.36) 0%, rgba(0,163,155,0.08) 35%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 10% 95%, rgba(201,169,97,0.08) 0%, transparent 60%),
      var(--ink) !important;
  }

  .glossary-feature-long::after { content: 'LONGEVITY'; }

  .glossary-feature-long .glossary-feature-content::after {
    content: '30 ENTRIES · 5 CATEGORIES';
  }

  .glossary-feature-long .glossary-feature-art::before {
    content: 'METABOLIC · CELLULAR · CARDIO · RECOVERY · MIND';
  }
}

/* ============================================================
 * v1.11.1 — SECTION BAND header (above each glossary subsection)
 * Thin sans title (wordmark DNA), brass section label, italic
 * serif descriptor, meta stamp. Sharper editorial proportions.
 * ============================================================ */

.section-band {
  position: relative;
  padding: 0 0 32px;
  margin: 96px 0 32px;
  border-bottom: 1px solid var(--rule);
}

.section-band-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
  position: relative;
  padding-left: 28px;
}

.section-band-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--brass);
}

.section-band-title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  text-align: left;
}

.section-band-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.section-band-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin: 12px 0 0;
  max-width: 540px;
}

.section-band-meta {
  position: absolute;
  right: 0;
  bottom: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
  line-height: 1.5;
}

.section-band-meta strong {
  display: block;
  color: var(--brass);
  font-weight: 400;
  font-size: 11px;
  margin-top: 4px;
}

/* Hide redundant feature-card label (category name now lives in the band above) */
.glossary-subsection .glossary-feature-label {
  display: none !important;
}

@media (max-width: 900px) {
  .section-band {
    margin: 64px 0 24px;
    padding: 0 0 20px;
  }
  .section-band-meta {
    position: static;
    margin-top: 16px;
    text-align: left;
  }
  .section-band-meta strong {
    display: inline;
    margin-left: 8px;
  }
}

/* ============================================================
 * v1.11.2 — PROTOCOL BODY STYLING
 * Custom typography for protocol posts. Uses the launch-card
 * style guide: thin sans titles, italic serif descriptors,
 * brass mono stamps, hairline rules, atmospheric washes.
 * Scoped to .proto-* classes so it only applies where intended.
 * ============================================================ */

/* Reset the gh-content defaults for sections so they don't add extra spacing */
.gh-content .proto-section,
.gh-content .proto-intro {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---- INTRO ---- */
.proto-intro {
  max-width: 760px;
  margin: 0 auto 96px;
  padding: 0 0 48px;
  border-bottom: 1px solid var(--rule);
}

.gh-content .proto-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 32px;
}

.gh-content .proto-lead em {
  font-style: italic;
  color: var(--accent);
}

.gh-content .proto-strip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

/* ---- SECTION ---- */
.proto-section {
  max-width: 980px;
  margin: 0 auto 96px;
}

/* ---- BAND (section header) ---- */
.proto-band {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.proto-band-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
  padding-left: 28px;
  position: relative;
}

.proto-band-num::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--brass);
}

.gh-content .proto-band-title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 14px;
}

.gh-content .proto-band-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.gh-content .proto-band-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 640px;
}

/* ---- TABLE ---- */
.proto-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gh-content .proto-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}

.gh-content .proto-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--rule-2);
}

.gh-content .proto-table tbody td {
  padding: 20px 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  vertical-align: top;
}

.gh-content .proto-table tbody tr:last-child td {
  border-bottom: 1px solid var(--rule-2);
}

.gh-content .proto-table tbody tr:hover td {
  background: rgba(0, 163, 155, 0.04);
}

.gh-content .proto-table-name {
  color: var(--text) !important;
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.005em;
}

.gh-content .proto-mono {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Pills for activity column */
.gh-content .proto-table-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.02);
}

.gh-content .proto-pill-accent {
  border-color: rgba(0, 163, 155, 0.5);
  color: var(--accent);
  background: rgba(0, 163, 155, 0.08);
}

.gh-content .proto-pill-rest {
  border-color: rgba(201, 169, 97, 0.5);
  color: var(--brass);
  background: rgba(201, 169, 97, 0.06);
}

/* ---- SPECS (definition list) ---- */
.gh-content .proto-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.gh-content .proto-spec {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.gh-content .proto-spec:first-child {
  border-top: 1px solid var(--rule);
}

.gh-content .proto-spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
  margin: 0;
}

.gh-content .proto-spec dd {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}

.gh-content .proto-spec dd em {
  font-style: italic;
  color: var(--accent);
}

/* ---- RULES (numbered list) ---- */
.gh-content .proto-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.gh-content .proto-rule {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.gh-content .proto-rule:first-child {
  border-top: 1px solid var(--rule);
}

.gh-content .proto-rule-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--brass);
  padding-top: 4px;
}

.gh-content .proto-rule-body h4 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 8px;
}

.gh-content .proto-rule-body p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ---- TIMELINE ---- */
.gh-content .proto-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}

.gh-content .proto-tl-item {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,163,155,0.10) 0%, transparent 60%),
    var(--ink);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.gh-content .proto-tl-window {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}

.gh-content .proto-tl-item h4 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.1;
}

.gh-content .proto-tl-item p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

/* ---- DISCLAIMER (subtle warn variant) ---- */
.proto-disclaimer-section {
  margin-top: 128px;
}

.proto-band-warn .proto-band-num {
  color: var(--warn, #E5594A);
}

.proto-band-warn .proto-band-num::before {
  background: var(--warn, #E5594A);
}

.proto-disclaimer-body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(229, 89, 74, 0.05) 0%, transparent 60%),
    var(--ink-2);
  border: 1px solid var(--rule);
  padding: 40px 36px;
}

.gh-content .proto-disclaimer-body p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 18px;
}

.gh-content .proto-disclaimer-body p strong {
  color: var(--text);
  font-weight: 500;
}

.gh-content .proto-disc-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 28px 0 16px;
}

.gh-content .proto-disc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.gh-content .proto-disc-list li {
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  position: relative;
}

.gh-content .proto-disc-list li::before {
  content: '·';
  position: absolute;
  left: 8px;
  top: 12px;
  color: var(--brass);
  font-weight: 700;
}

.gh-content .proto-disc-list li:last-child {
  border-bottom: none;
}

.gh-content .proto-disc-list li strong {
  color: var(--text);
  font-weight: 500;
}

.gh-content .proto-disc-closer {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 15px !important;
  color: var(--text-3) !important;
  border-top: 1px solid var(--rule);
  padding-top: 24px !important;
  margin-top: 32px !important;
}

/* ---- MOBILE ---- */
@media (max-width: 720px) {
  .proto-intro,
  .proto-section { padding-left: 24px; padding-right: 24px; margin-bottom: 64px; }
  .proto-intro { padding-bottom: 32px; margin-bottom: 64px; }

  .gh-content .proto-spec {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .gh-content .proto-rule {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gh-content .proto-rule-num {
    padding-top: 0;
  }

  .gh-content .proto-timeline {
    grid-template-columns: 1fr;
  }

  .proto-disclaimer-section { margin-top: 80px; }
  .proto-disclaimer-body { padding: 28px 22px; }

  .gh-content .proto-table thead { display: none; }
  .gh-content .proto-table,
  .gh-content .proto-table tbody,
  .gh-content .proto-table tr,
  .gh-content .proto-table td {
    display: block;
    width: 100%;
  }
  .gh-content .proto-table tbody tr {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule-2);
    padding-bottom: 12px;
  }
  .gh-content .proto-table tbody td {
    padding: 4px 0;
    border-bottom: none;
  }
  .gh-content .proto-table-name {
    font-size: 22px;
    padding-top: 12px !important;
  }
}

/* ============================================================
 * v1.11.4 — HERO SUBSCRIBE
 * Newsletter signup integrated into the dial hero. Sits below
 * the dial, above the mono tagline strip. Pill-style form.
 * ============================================================ */

.hero-subscribe {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 160px;
  width: 100%;
  max-width: 600px;
  padding: 0 24px;
  z-index: 5;
  text-align: center;
}

.hero-subscribe-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.hero-subscribe-title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 26px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.hero-subscribe-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.hero-subscribe-form {
  display: flex;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  transition: border-color 0.25s ease;
}

.hero-subscribe-form:focus-within {
  border-color: var(--accent);
}

.hero-subscribe-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 20px 16px 24px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0;
}

.hero-subscribe-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.40);
}

.hero-subscribe-form button {
  background: var(--accent);
  color: var(--ink);
  border: none;
  padding: 16px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
}

.hero-subscribe-form button:hover {
  background: var(--accent-2);
  transform: translateX(2px);
}

.hero-subscribe-fineprint {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Push the tagline lower so it doesn't crowd the form */
.hero-brand .hero-tagline {
  bottom: 32px;
}

/* Move the dial up slightly to make room for the form below */
.hero-brand .hero-instrument {
  transform: translateY(-60px);
}

@media (max-width: 900px) {
  .hero-subscribe {
    bottom: 180px;
    padding: 0 20px;
  }
  .hero-subscribe-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .hero-subscribe-form input[type="email"] {
    padding: 14px 16px 14px 20px;
    font-size: 13px;
  }
  .hero-subscribe-form button {
    padding: 14px 18px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .hero-subscribe-fineprint {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .hero-brand .hero-instrument {
    transform: translateY(-40px);
  }
}

@media (max-width: 480px) {
  .hero-subscribe {
    bottom: 170px;
  }
  .hero-subscribe-form {
    flex-direction: column;
    border-radius: 16px;
    max-width: 360px;
  }
  .hero-subscribe-form input[type="email"] {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .hero-subscribe-form button {
    padding: 14px 20px;
    border-radius: 0;
  }
}

/* ============================================================
 * v1.11.5 — HERO SIGNUP (inline data-bar style)
 * Bottom-left corner of the hero. Transparent background.
 * Mono caps + brass label + underlined email + teal Join.
 * Replaces the v1.11.4 pill form (which is overridden below).
 * ============================================================ */

/* Reset the dial offset that v1.11.4 added — page goes back to normal */
.hero-brand .hero-instrument {
  transform: none !important;
}

/* Restore tagline bottom position */
.hero-brand .hero-tagline {
  bottom: 24px !important;
}

/* Hide the old pill subscribe block (in case any cache lingers) */
.hero-subscribe { display: none !important; }

/* ---- the new inline signup ---- */
.hero-signup {
  position: absolute;
  bottom: 64px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 0 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border: none;
  z-index: 5;
  margin: 0;
}

.hero-signup::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--brass);
}

.hero-signup-label {
  color: var(--brass);
  white-space: nowrap;
}

.hero-signup-sep {
  opacity: 0.5;
  user-select: none;
}

.hero-signup-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: lowercase;
  outline: none;
  padding: 4px 0;
  width: 220px;
  transition: border-bottom-color 0.2s ease;
}

.hero-signup-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.hero-signup-input:focus {
  border-bottom-color: var(--accent);
}

.hero-signup-cta {
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  padding: 0;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hero-signup-cta:hover {
  color: var(--accent-2);
  transform: translateX(2px);
}

@media (max-width: 720px) {
  .hero-signup {
    bottom: 84px;
    left: 20px;
    font-size: 9px;
    letter-spacing: 0.18em;
    gap: 10px;
    padding-left: 24px;
  }
  .hero-signup::before { width: 14px; }
  .hero-signup-input { width: 160px; }
}

@media (max-width: 480px) {
  .hero-signup {
    flex-wrap: wrap;
    max-width: calc(100% - 40px);
    bottom: 92px;
  }
  .hero-signup-sep { display: none; }
  .hero-signup-input {
    width: 100%;
    margin: 4px 0;
  }
}

/* ============================================================
 * v1.11.6 — HERO LAYOUT FIX
 * v1.11.4 broke the dial centering by replacing transform with
 * a translateY-only value. v1.11.5 used 'none' which is also wrong.
 * Restore the proper translate(-50%, -50%) centering.
 * ============================================================ */

.hero-brand .hero-instrument {
  transform: translate(-50%, -50%) !important;
}

/* ============================================================
 * v1.12.0 — HOMEPAGE TWEAKS
 * 1. Email signup moves into the tagline stack (above the
 *    TRAINING strip and the Integrated. punch, centered).
 * 2. Article block becomes a 1-big + 2-stacked featured trio
 *    instead of a single magazine-cover hero.
 * ============================================================ */

/* ---- Hero signup: now centered, sits at top of tagline stack ---- */
.hero-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-tagline .hero-signup {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 0 6px !important;
  justify-content: center;
  padding-left: 28px;
  pointer-events: auto;  /* restore — parent .hero-tagline disables clicks */
}

.hero-tagline .hero-signup-input,
.hero-tagline .hero-signup-cta {
  pointer-events: auto;
}

.hero-tagline .hero-signup::before {
  /* keep the hairline dash anchor */
}

.hero-tagline-mono {
  margin-top: 4px;
}

@media (max-width: 720px) {
  /* On mobile: stack email input + Join button vertically, centered.
     Hide the "— Subscribe" label, the dot separators, and the brass hairline. */
  .hero-tagline .hero-signup {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    padding-left: 0;
  }
  .hero-tagline .hero-signup::before { display: none; }
  .hero-tagline .hero-signup-label,
  .hero-tagline .hero-signup-sep { display: none; }
  .hero-tagline .hero-signup-input {
    width: 240px;
    text-align: center;
  }
  .hero-tagline .hero-signup-input::placeholder { text-align: center; }
  .hero-tagline .hero-signup-cta { text-align: center; }
}

/* ---- FEATURED TRIO ---- */
.latest-trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  min-height: 580px;
  margin: 0;
}

.trio-feature {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 30% 30%, rgba(0,163,155,0.18) 0%, rgba(0,163,155,0.03) 50%, transparent 72%),
    var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 56px;
  overflow: hidden;
  color: var(--text);
  min-height: 580px;
  transition: background 0.3s ease;
}

.trio-feature:hover { color: var(--text); }

.trio-feature .trio-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.trio-feature .trio-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

.trio-feature-content {
  position: relative;
  z-index: 3;
  max-width: 540px;
}

.trio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}

.trio-label { color: var(--brass); }
.trio-tag em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
}

.trio-title-big {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
}

.trio-dek {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 28px;
  max-width: 440px;
}

.trio-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.trio-feature:hover .trio-cta {
  transform: translateX(6px);
}

/* ---- SUB STACK (two stacked tiles, right half) ---- */
.trio-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}

.trio-sub {
  position: relative;
  background:
    radial-gradient(ellipse 80% 70% at 70% 30%, rgba(0,163,155,0.10) 0%, transparent 60%),
    var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 36px;
  overflow: hidden;
  color: var(--text);
  min-height: 290px;
  transition: background 0.3s ease;
}

.trio-sub .trio-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

.trio-sub .trio-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.90) 100%);
}

.trio-sub-content {
  position: relative;
  z-index: 3;
  max-width: 440px;
}

.trio-sub .trio-meta {
  margin-bottom: 16px;
  gap: 14px;
}

.trio-title-sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
}

.trio-sub:hover { background: var(--ink-2); }
.trio-sub:hover .trio-cta { transform: translateX(4px); }

@media (max-width: 1100px) {
  .latest-trio {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .trio-feature {
    min-height: 460px;
    padding: 40px 32px;
  }
  .trio-stack {
    grid-template-rows: auto auto;
  }
  .trio-sub {
    min-height: 240px;
    padding: 28px 32px;
  }
}

@media (max-width: 720px) {
  .trio-feature { padding: 32px 24px; min-height: 380px; }
  .trio-sub { padding: 24px 22px; min-height: 200px; }
}

/* ============================================================
 * v1.12.6 — Mobile menu close button, latest articles header,
 *           inline read-time CTA, mobile spacing under Integrated.
 * ============================================================ */

/* ---- Mobile menu close button (X in top-right of menu) ---- */
.systemm-mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-family: var(--sans);
  font-weight: 200;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
  z-index: 105;
}
.systemm-mobile-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Section header above the featured trio ---- */
.section-head-trio {
  padding: 56px 64px 24px;
  max-width: none;
}

/* ---- Mobile spacing under "Integrated." ---- */
@media (max-width: 720px) {
  .hero-tagline-punch {
    margin-bottom: 18px;
  }
  .hero-brand {
    padding-bottom: 32px;
  }
  .section-head-trio {
    padding: 32px 24px 16px;
  }
}

/* ---- Trio CTA: inline read-time pill next to "Read →" ---- */
.trio-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: gap 0.2s ease, color 0.2s ease;
}
.trio-cta-arrow {
  color: var(--accent);
  transition: transform 0.2s ease;
  display: inline-block;
}
.trio-cta-time {
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.22em;
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}
.trio-feature:hover .trio-cta,
.trio-sub:hover .trio-cta {
  gap: 14px;
}
.trio-feature:hover .trio-cta-arrow,
.trio-sub:hover .trio-cta-arrow {
  transform: translateX(3px);
}

/* Ensure CTA stays above image overlay on sub tiles */
.trio-sub-content { position: relative; z-index: 3; }

/* ============================================================
 * v1.12.7 — Typography polish + remove orphaned teal streak
 *   - Hide the section-head teal hairline on the trio header
 *     (it sits directly under "Integrated." and reads as a
 *      random streak rather than a section marker)
 *   - "Latest articles" on mobile: Inter thin caps, wider track
 *   - Hamburger menu links: Inter thin caps (was serif italic)
 * ============================================================ */

/* Kill the teal accent stripe ONLY on the trio section header */
.section-head-trio::before { display: none !important; }

/* Mobile: sleeker "LATEST ARTICLES" treatment */
@media (max-width: 720px) {
  .section-head-trio .section-title {
    font-family: var(--sans) !important;
    font-style: normal !important;
    font-weight: 200 !important;
    font-size: 22px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: var(--text) !important;
  }
}

/* Hamburger menu items — switch from serif italic to Inter thin caps */
.systemm-mobile-link {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 200;
  font-size: 22px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Keep the rounded teal Subscribe CTA distinct from the regular links */
.systemm-mobile-cta {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
}

/* ============================================================
 * v1.12.8 — Protocol tables (Hair Regrowth + future protocols)
 *   Brand-aligned data grids: hairline rules, mono headers,
 *   brass labels, teal accent cells, no row striping.
 * ============================================================ */

.protocol-table-wrap {
  margin: 32px 0 40px;
  overflow-x: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.protocol-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text);
}

.protocol-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
}

.protocol-table tbody td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
  color: var(--text-2);
}

.protocol-table tbody tr:last-child td {
  border-bottom: none;
}

/* First column — component / day label */
.protocol-table tbody td:first-child {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  width: 22%;
  letter-spacing: -0.005em;
}

.protocol-table tbody td:first-child strong {
  font-weight: 500;
  color: var(--text);
}

/* Dosage / activity column gets mono treatment for that data-strip feel */
.protocol-table thead th:nth-child(2),
.protocol-table thead th:nth-child(3) {
  /* keep mono header */
}

.protocol-table tbody td:nth-child(2) {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  width: 18%;
}

.protocol-table tbody td:nth-child(3) {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-transform: uppercase;
  white-space: nowrap;
  width: 14%;
}

/* On the weekly schedule (3-col tables), the third col is the topical
   protocol body — restore proper text styling */
.protocol-table tbody td:nth-child(3):last-child {
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  width: auto;
  white-space: normal;
}

.protocol-table tbody td:last-child {
  color: var(--text-2);
}

/* Accent / warning cells */
.protocol-table .cell-accent {
  color: var(--accent);
  font-family: var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.protocol-table .cell-warn {
  color: var(--brass);
  font-family: var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Protocol body refinements (lede + disclaimer) */
.post-content .protocol-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

.post-content .protocol-disclaimer {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  padding: 24px;
  border: 1px solid var(--rule);
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.02);
}

/* Mobile */
@media (max-width: 720px) {
  .protocol-table thead { display: none; }
  .protocol-table,
  .protocol-table tbody,
  .protocol-table tr,
  .protocol-table td { display: block; width: 100%; }

  .protocol-table tbody tr {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
  }
  .protocol-table tbody tr:last-child { border-bottom: none; }
  .protocol-table tbody td {
    padding: 4px 20px;
    border: none;
    white-space: normal !important;
    width: auto !important;
  }
  .protocol-table tbody td:first-child {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
    padding-bottom: 8px;
  }
  .protocol-table tbody td:nth-child(2),
  .protocol-table tbody td:nth-child(3) {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    padding-bottom: 2px;
  }
  .protocol-table tbody td:last-child {
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
    padding-top: 8px;
  }
}

/* ============================================================
 * v1.12.9 — Footer legal links row
 *   Privacy / Terms / Disclaimers above the existing stamps row.
 * ============================================================ */

.footer-v2-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.footer-v2-legal a {
  color: var(--text-3);
  transition: color 0.2s ease;
}

.footer-v2-legal a:hover {
  color: var(--accent);
}

.footer-v2-legal-sep {
  color: var(--text-3);
  opacity: 0.55;
  user-select: none;
}

@media (max-width: 720px) {
  .footer-v2-legal {
    gap: 10px;
    font-size: 9px;
    letter-spacing: 0.20em;
    padding: 14px 16px 12px;
  }
}

/* ============================================================
 * v1.12.10 — Definitions banner (peptides + future categories)
 *            + desktop "Latest articles" matches mobile typeface
 * ============================================================ */

/* ---------- DEFINITIONS BAR (brand banner for category pages) ---------- */
.definitions-bar {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 1600 / 700;
  max-height: 560px;
}

.definitions-bar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.definitions-bar-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* Intro section below the banner — formerly the hero meta block */
.peptides-intro {
  padding: 56px 64px 72px;
  border-bottom: 1px solid var(--rule);
}

.peptides-intro-content {
  max-width: 920px;
}

.peptides-intro .peptides-hero-label {
  margin-bottom: 24px;
}

.peptides-intro .peptides-hero-dek {
  margin: 0 0 40px;
}

@media (max-width: 900px) {
  .definitions-bar {
    aspect-ratio: 16 / 9;
    max-height: 380px;
  }
  .peptides-intro { padding: 36px 24px 52px; }
}

@media (max-width: 720px) {
  .definitions-bar {
    aspect-ratio: 4 / 3;
    max-height: 320px;
  }
  .peptides-intro { padding: 28px 22px 44px; }
  .peptides-intro .peptides-hero-meta { gap: 28px; }
}

/* ---------- Desktop "Latest articles" matches mobile typeface ---------- */
/* Override the earlier serif/italic rule for the trio section only.
   Mobile sizing (22px) is preserved below 720px via the existing rule. */
.section-head-trio .section-title {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 200 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
}

/* ============================================================
 * v1.12.13 — Banners integrated into the glossary scroll.
 *   Each category subsection on /tag/glossary/ now opens with
 *   its category banner instead of the old section-band header.
 * ============================================================ */

.glossary-subsection {
  margin-top: 0;
}

.glossary-subsection > .definitions-bar {
  /* Slightly shorter in the scroll context so subsections don't dominate. */
  max-height: 460px;
  margin: 0;
}

.glossary-subsection + .glossary-subsection > .definitions-bar {
  /* Breathing room between stacked subsections. */
  margin-top: 32px;
}

@media (max-width: 900px) {
  .glossary-subsection > .definitions-bar { max-height: 340px; }
  .glossary-subsection + .glossary-subsection > .definitions-bar { margin-top: 24px; }
}

@media (max-width: 720px) {
  .glossary-subsection > .definitions-bar { max-height: 280px; }
}

/* ============================================================
 * v1.12.14 — Definitions banner v2
 *   - Compact 1600x480 aspect ratio (smaller type, more breathing)
 *   - Whole banner is a hyperlink to the category page
 *   - Subtle brightness/scale hover affordance
 * ============================================================ */

.definitions-bar-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* New aspect ratio for the compact banner; override the earlier rule */
.definitions-bar {
  aspect-ratio: 1600 / 480 !important;
  max-height: 460px !important;
  cursor: pointer;
  transition: filter 0.3s ease;
}
.definitions-bar img,
.definitions-bar-svg {
  transition: transform 0.5s ease;
}

.definitions-bar-link:hover .definitions-bar {
  filter: brightness(1.08) saturate(1.08);
}
.definitions-bar-link:hover .definitions-bar img,
.definitions-bar-link:hover .definitions-bar-svg {
  transform: scale(1.01);
}

@media (max-width: 900px) {
  .definitions-bar { max-height: 340px !important; }
}
@media (max-width: 720px) {
  .definitions-bar { max-height: 280px !important; }
}

/* Glossary-scroll spacing — the link wraps the banner, so target it */
.glossary-subsection > .definitions-bar-link { margin: 0; }
.glossary-subsection + .glossary-subsection > .definitions-bar-link { margin-top: 32px; }
@media (max-width: 900px) {
  .glossary-subsection + .glossary-subsection > .definitions-bar-link { margin-top: 24px; }
}

/* ============================================================
 * v1.12.16 — Unified .page-hero across Articles / Glossary /
 *            Protocols + three homepage hero adjustments.
 * ============================================================ */

/* ---------- Unified top-level page hero ---------- */
.page-hero {
  position: relative;
  padding: 120px 64px 80px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(0,163,155,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(201,169,97,0.05) 0%, transparent 55%);
  pointer-events: none;
}
.page-hero-content {
  position: relative;
  max-width: 1180px;
  z-index: 2;
}
.page-hero-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}
/* Title uses the post-hero font treatment — Inter thin, tight tracking */
.page-hero-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(56px, 8vw, 120px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  margin: 0 0 28px;
}
.page-hero-title em {
  font-family: var(--sans);
  font-style: normal;
  color: var(--accent);
  font-weight: 200;
}
.page-hero-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 40px;
  max-width: 820px;
}
.page-hero-dek a,
.page-hero-az-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,163,155,0.40);
  transition: border-bottom-color 0.2s ease;
}
.page-hero-dek a:hover,
.page-hero-az-link:hover { border-bottom-color: var(--accent); }

.page-hero-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.page-hero-meta .meta-item {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-hero-meta .meta-item strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
}

@media (max-width: 900px) {
  .page-hero { padding: 80px 24px 56px; }
  .page-hero-meta { gap: 28px; }
}

/* ---------- Homepage tweak 1 — drop the mono strip down ----------
   The TRAINING · SUPPLEMENTS · PEPTIDES · NUTRITION · WEARABLES line
   used to sit right under the email signup. Push it down so it sits
   centered between Integrated. and the top border of the tagline block. */
.hero-brand .hero-tagline-mono {
  margin-top: 64px;
}

/* ---------- Homepage tweak 2 — email signup +20% ---------- */
.hero-brand .hero-signup {
  font-size: 12px;          /* was 10px (+20%) */
  letter-spacing: 0.24em;
  gap: 17px;                /* was 14px (+20%) */
  padding-left: 34px;       /* was 28px */
}
.hero-brand .hero-signup::before {
  width: 22px;              /* was 18px (+20%) */
}
.hero-brand .hero-signup-input {
  width: 264px;             /* was 220px (+20%) */
  padding: 5px 0;
}

/* ---------- Homepage tweak 3 — teal underline on HOVER, not click ----
   Hovering anywhere on the signup form, or hovering the input itself,
   turns the underline teal. Keep :focus so the teal sticks when typing. */
.hero-brand .hero-signup:hover .hero-signup-input,
.hero-brand .hero-signup-input:hover,
.hero-brand .hero-signup-input:focus {
  border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
  .hero-brand .hero-tagline-mono { margin-top: 44px; }
  .hero-brand .hero-signup {
    font-size: 11px;
    letter-spacing: 0.20em;
    gap: 12px;
  }
  .hero-brand .hero-signup-input { width: 220px; }
}

/* ============================================================
 * v1.12.17 — Homepage hero fixes (corrected)
 *   • Mono strip pulled OUT of the flex flow and positioned
 *     absolutely so it sits centered between the hairline rule
 *     above it (the top border of the tagline block) and the
 *     Integrated. punch at the bottom.
 *   • Email signup returns to its original vertical position
 *     (no longer pushed up by my v1.12.16 margin-top change).
 *   • Placeholder "your email address" goes near-white to pop.
 * ============================================================ */

/* Undo the v1.12.16 push */
.hero-brand .hero-tagline-mono {
  margin-top: 0 !important;
}

/* Take the mono strip out of flex flow.
   .hero-tagline is position:absolute, so this anchors to it.
   bottom: 50% puts it midway between the bottom of the tagline
   block (where Integrated sits) and the top of it (the hairline).
   translateY(50%) recenters on the strip's own height. */
.hero-brand .hero-tagline-mono {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(50%);
  pointer-events: none;
  /* nudge into the visual middle of the block above Integrated */
  margin-bottom: 24px;
}

/* Email signup placeholder — bump from 32% opacity to 95% so the
   "your email address" text reads white instead of dim grey */
.hero-brand .hero-signup-input::placeholder {
  color: rgba(255, 255, 255, 0.95) !important;
}

@media (max-width: 720px) {
  .hero-brand .hero-tagline-mono {
    bottom: 56%;
    margin-bottom: 18px;
  }
}

/* ============================================================
 * v1.12.18 — Homepage hero tagline layout fix
 * Three independent absolute-positioned elements anchored to
 * .hero-brand (not stacked in a flex column).
 *   • Hairline (.hero-brand::after) stays at its existing position.
 *   • Mono strip (.hero-tagline-mono) sits at bottom: 130px.
 *   • Email signup (.hero-signup) sits at bottom: 70px.
 *   • Integrated punch (.hero-tagline-punch) sits at bottom: 30px.
 *   • Brass ::before dash on .hero-signup is removed.
 *   • Hovering anywhere on .hero-signup turns input underline teal.
 *   • Placeholder near-white (carried forward from v1.12.17).
 * ============================================================ */

/* Take .hero-tagline out of the box tree so its children anchor
   to .hero-brand directly. This kills the flex column added in
   v1.12.0 and the absolute positioning at bottom: 24px. */
.hero-brand .hero-tagline {
  display: contents !important;
}

/* --- INTEGRATED PUNCH (bottom) --- */
.hero-brand .hero-tagline-punch {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  z-index: 5;
}

/* --- EMAIL SIGNUP (mid) --- */
.hero-brand .hero-signup {
  position: absolute !important;
  bottom: 70px !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
  border: none;
  z-index: 6;
  pointer-events: auto;
}

/* Kill the brass ::before dash that used to float off to the left */
.hero-brand .hero-signup::before {
  content: none !important;
  display: none !important;
}

/* --- MONO CATEGORY STRIP (top, above the hairline) --- */
.hero-brand .hero-tagline-mono {
  position: absolute;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--text-3);
  font-style: normal;
  transform: none;
  pointer-events: none;
  z-index: 5;
}

/* --- HOVER + FOCUS: teal underline on the email input --- */
.hero-brand .hero-signup:hover .hero-signup-input,
.hero-brand .hero-signup-input:hover,
.hero-brand .hero-signup-input:focus {
  border-bottom-color: var(--accent);
}

/* Placeholder reads near-white instead of dim grey */
.hero-brand .hero-signup-input::placeholder {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* --- MOBILE: shrink the gaps a touch but keep the same stacking --- */
@media (max-width: 720px) {
  .hero-brand .hero-tagline-mono {
    bottom: 116px;
    letter-spacing: 0.22em;
    padding: 0 24px;
  }
  .hero-brand .hero-signup {
    bottom: 62px;
    font-size: 9px;
    letter-spacing: 0.18em;
    gap: 10px;
    max-width: calc(100% - 40px);
  }
  .hero-brand .hero-tagline-punch {
    bottom: 24px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .hero-brand .hero-signup {
    flex-wrap: wrap;
  }
  .hero-brand .hero-signup .hero-signup-label,
  .hero-brand .hero-signup .hero-signup-sep {
    display: none;
  }
  .hero-brand .hero-signup-input {
    width: 240px;
    text-align: center;
  }
  .hero-brand .hero-signup-input::placeholder {
    text-align: center;
  }
}

/* ============================================================
 * v1.12.20 — Editorial tweaks
 *
 * 1. HERO TAGLINE LAYOUT v3
 *    The v1.12.18 layout placed the email signup BETWEEN the mono
 *    strip and the "Integrated." punch, which visually split the
 *    slogan. Move the signup ABOVE the slogan and reposition the
 *    hairline rule to divide signup (above) from slogan + punch
 *    (below). Final stack from top: signup -> hairline -> mono
 *    strip -> Integrated.
 *
 * 2. HOMEPAGE GLOSSARY BANNERS
 *    index.hbs now uses the same .definitions-bar magazine SVG
 *    banner for Peptides / Hormones / Fitness that /tag/glossary/
 *    already uses. No CSS change required; the existing
 *    .definitions-bar-* styles handle it.
 *
 * 3. HOMEPAGE GLOSSARY HEAD
 *    "Definitions" -> "Indexed." (with teal italic period via <em>).
 *    No CSS change required; .glossary-title em is already styled.
 * ============================================================ */

/* Override v1.12.18 hero positions */
.hero-brand .hero-signup        { bottom: 180px !important; }
.hero-brand .hero-tagline-mono  { bottom: 100px !important; margin-top: 0 !important; }
.hero-brand .hero-tagline-punch { bottom: 50px  !important; }
.hero-brand::after              { bottom: 140px; }

@media (max-width: 720px) {
  .hero-brand .hero-signup        { bottom: 160px !important; }
  .hero-brand .hero-tagline-mono  { bottom: 90px  !important; }
  .hero-brand .hero-tagline-punch { bottom: 32px  !important; }
  .hero-brand::after              { bottom: 124px; }
}

/* ============================================================
 * v1.12.21 — Centered "Indexed." block (variant B)
 *
 * Replaces the left-aligned .glossary-head on the homepage with a
 * centered block: brass-rule eyebrow, massive Inter thin title
 * (clamp 80 to 168), italic-serif tagline, single CTA with the live
 * glossary count.
 * ============================================================ */

.glossary-indexed {
  position: relative;
  text-align: center;
  padding: 80px 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.glossary-indexed-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.glossary-indexed-eyebrow::before,
.glossary-indexed-eyebrow::after {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--brass);
}

.glossary-indexed-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(80px, 11vw, 168px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--text);
  margin: 0 0 24px;
}
.glossary-indexed-title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 200;
}

.glossary-indexed-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--text-2);
  margin: 0 0 28px;
}

.glossary-indexed-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,163,155,0.4);
  padding-bottom: 4px;
  transition: border-bottom-color 0.2s ease;
}
.glossary-indexed-cta:hover { border-bottom-color: var(--accent); }

@media (max-width: 720px) {
  .glossary-indexed { padding: 56px 24px; }
  .glossary-indexed-eyebrow { margin-bottom: 24px; gap: 10px; }
  .glossary-indexed-eyebrow::before,
  .glossary-indexed-eyebrow::after { width: 32px; }
  .glossary-indexed-title { font-size: clamp(56px, 16vw, 96px); }
}

/* ============================================================
 * v1.12.22 — Bug fixes + density pass
 *
 * Six changes:
 *  1. /recovery-reset/ hero: suppress the feature-image background on
 *     protocol posts. The protocol diagram (set as feature image for
 *     email/social card compatibility per the brand pattern) was leaking
 *     its W1–W8 timeline labels up through the post hero title at
 *     opacity 0.4. The diagram stays in the body where it belongs.
 *  2. /about/ h1 brand-rule fix (sans thin, not italic serif) — applied
 *     above by editing .about-hero-title directly.
 *  3. Homepage footer subscribe form: drop the bright-white button +
 *     boxed border. Replace with transparent input + underline + teal
 *     text CTA, matching .hero-signup.
 *  4. Strip masthead + data block on every non-homepage view. Adjust
 *     main padding so content sits flush under the nav.
 *  5. Tighten glossary entry hero top padding to surface the title.
 *  6. Drop the redundant "— Glossary · <Category>" eyebrow on tag
 *     pages where the magazine SVG banner already labels the page.
 * ============================================================ */

/* ---- 1. Protocol posts: kill the leaky feature-image background ---- */
body.tag-protocols .post-hero-feature-image,
body.tag-protocols .post-hero-img-overlay {
  display: none !important;
}

/* ---- 3. Subscribe form: transparent + underline (homepage footer) ---- */
.subscribe-form {
  border: none;
  border-bottom: 1px solid var(--rule-2);
  align-items: center;
  gap: 12px;
}
.subscribe-form input {
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.subscribe-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.subscribe-form button {
  background: transparent;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.22em;
  padding: 14px 0 14px 16px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.subscribe-form button:hover {
  background: transparent;
  color: var(--accent-2);
  transform: translateX(2px);
}
.subscribe-form:hover {
  border-bottom-color: var(--accent);
}
.subscribe-form:focus-within {
  border-bottom-color: var(--accent);
}

/* ---- 4. Inner pages: drop the masthead + data block stack ---- */
body:not(.home-template) .systemm-masthead,
body:not(.home-template) .systemm-data-block {
  display: none !important;
}
/* main.site-main was padded 124px to account for nav (80) + masthead (~44).
   With masthead gone on inner pages, pull content up so it sits under nav only. */
body:not(.home-template) main.site-main {
  padding-top: 80px !important;
}
@media (max-width: 900px) {
  body:not(.home-template) main.site-main {
    padding-top: 64px !important;
  }
}

/* ---- 5. Glossary entry hero: tighten top padding ---- */
body.tag-glossary .post-hero {
  min-height: auto;
  padding-top: 64px;
  padding-bottom: 56px;
}
@media (max-width: 900px) {
  body.tag-glossary .post-hero {
    padding-top: 48px;
    padding-bottom: 40px;
  }
}

/* ---- 6. Tag pages: drop redundant eyebrow under the magazine banner ---- */
.peptides-intro .peptides-hero-label { display: none; }

/* ============================================================
 * v1.12.23 — Articles breathing room + Protocol block (Hybrid 3)
 *
 *  • Articles section: 120px top/bottom padding, new left-aligned
 *    head treatment with brass-rule eyebrow and "Latest." h2,
 *    24px gaps between trio cards.
 *  • Protocol spotlight rebuilt as Hybrid 3: magazine frame (brass
 *    corner ticks + top label row + bottom stamps) wrapping a
 *    giant "N° 01" anchor with italic-serif title, slogan, and a
 *    3-cell horizontal data rule (HRV / RHR / Sleep with teal
 *    values). Reads as a magazine chapter front page.
 * ============================================================ */

/* ---- Articles section wrapper ---- */
.articles-section {
  padding: 120px 0;
  background: var(--ink);
}

/* New left-aligned head (replaces .section-head-trio for the homepage) */
.section-head-trio { display: none !important; }

.latest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1320px;
  margin: 0 auto 56px;
  padding: 0 64px 32px;
  border-bottom: 1px solid var(--rule);
}
.latest-head-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.latest-head-eyebrow::before {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--brass);
}
.latest-head-h2 {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.latest-head-h2 em {
  font-style: normal;
  color: var(--accent);
  font-weight: 200;
}
.latest-head-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,163,155,0.4);
  padding-bottom: 4px;
  transition: border-bottom-color 0.2s ease;
}
.latest-head-cta:hover { border-bottom-color: var(--accent); }

/* Trio gaps: replace hairline grid with 24px gaps + bordered cards */
.articles-section .latest-trio {
  background: transparent !important;
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 64px;
}
.articles-section .trio-stack {
  background: transparent !important;
  gap: 24px;
}
.articles-section .trio-feature,
.articles-section .trio-sub {
  border: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .articles-section { padding: 72px 0; }
  .latest-head { padding: 0 24px 24px; margin-bottom: 32px; }
  .articles-section .latest-trio { padding: 0 24px; gap: 16px; }
  .articles-section .trio-stack { gap: 16px; }
}


/* ============================================================
   PROTOCOL SPOTLIGHT — HYBRID 3 (full rebuild)
   ============================================================ */

/* Wipe the v1.11.x defaults */
.protocol-spotlight {
  position: relative;
  padding: 96px 64px 64px;
  text-align: center;
  overflow: hidden;
}

/* Brass corner ticks */
.ps-tick {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.ps-tick-tl { top: 32px; left: 32px; border-right: none; border-bottom: none; }
.ps-tick-tr { top: 32px; right: 32px; border-left: none; border-bottom: none; }
.ps-tick-bl { bottom: 32px; left: 32px; border-right: none; border-top: none; }
.ps-tick-br { bottom: 32px; right: 32px; border-left: none; border-top: none; }

/* Top label row */
.ps-top-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 56px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
}
.ps-top-r em {
  font-style: normal;
  color: var(--text-3);
}

/* Giant N° XX anchor */
.ps-number {
  position: relative;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(120px, 18vw, 280px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--text);
  margin-bottom: 16px;
}
.ps-number em {
  font-style: normal;
  color: var(--accent);
  font-weight: 200;
}

/* Italic-serif title */
.ps-title {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--text);
  margin: 0 0 24px;
}
.ps-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ps-title a:hover { color: var(--accent); }

/* Slogan / dek */
.ps-slogan {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto 32px;
}

/* Horizontal data rule (3 cells) */
.ps-data-rule {
  position: relative;
  display: inline-flex;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 18px 0;
  margin: 0 auto 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ps-data-item {
  padding: 0 32px;
  border-right: 1px solid var(--rule);
}
.ps-data-item:last-child { border-right: none; }
.ps-data-item strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text);
  margin-left: 10px;
}
.ps-data-item strong.teal { color: var(--accent); }

/* CTA */
.ps-cta-row {
  position: relative;
  margin-bottom: 48px;
}
.ps-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,163,155,0.4);
  padding-bottom: 4px;
  transition: border-bottom-color 0.2s ease;
}
.ps-cta:hover { border-bottom-color: var(--accent); }

/* Bottom stamps */
.ps-stamps {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Retire the old protocol-spotlight pieces — they're not in the new HTML
   but kill any leftover styling just in case Ghost caches the old markup. */
.protocol-spotlight-link,
.protocol-spotlight-content,
.protocol-spotlight-title,
.protocol-spotlight-dek,
.protocol-spotlight-cta,
.protocol-spotlight-data,
.protocol-spotlight-corner-num,
.protocol-spotlight-corner-cat { display: none !important; }

/* Mobile */
@media (max-width: 900px) {
  .protocol-spotlight { padding: 72px 24px 48px; }
  .ps-tick { width: 20px; height: 20px; }
  .ps-tick-tl, .ps-tick-tr { top: 20px; }
  .ps-tick-bl, .ps-tick-br { bottom: 20px; }
  .ps-tick-tl, .ps-tick-bl { left: 20px; }
  .ps-tick-tr, .ps-tick-br { right: 20px; }
  .ps-top-row { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 32px; }
  .ps-number { font-size: clamp(72px, 22vw, 140px); margin-bottom: 12px; }
  .ps-title { font-size: clamp(24px, 6vw, 36px); margin-bottom: 16px; }
  .ps-slogan { font-size: 16px; margin-bottom: 24px; }
  .ps-data-rule {
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--rule);
  }
  .ps-data-item {
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .ps-data-item:last-child { border-bottom: none; }
  .ps-cta-row { margin-bottom: 28px; }
  .ps-stamps { font-size: 8px; }
}