@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  /* Units */
  --u: 0.25rem;

  /* Font Families */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* ---------------------------------------------------------------
     NERO PALETTE — black ground, white type, red signal.
     Only three hues exist. Anything else is a bug.
     --------------------------------------------------------------- */
  --background: 0 0% 4%;        /* #0A0A0A — near black, the default ground */
  --foreground: 0 0% 96%;       /* #F5F5F5 — off-white type */

  --void: 0 0% 0%;              /* #000000 — deepest sections: hero, header, footer */
  --card: 0 0% 7%;
  --secondary: 0 0% 8%;         /* alternating band */
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 62%; /* #9E9E9E — 6.4:1 on #0A0A0A */

  --border: 0 0% 16%;
  --radius: 0rem;               /* nothing is rounded */

  /* Red — two tokens, deliberately.
     --color-accent is THE brand red, taken from NERO_3_COLORS_VECTOR_CMYK.pdf.
     It measures 3.39:1 on the black ground: fine for fills, rules, borders and
     large display type, but below the 4.5:1 needed for body copy.
     --color-accent-text is the same hue (358°) lifted to 5.40:1 for anything
     set small — the mono labels run as low as 10px. Never swap them. */
  --color-accent: #C1272D;
  --color-accent-text: #F2454B;      /* 5.40:1 on #0A0A0A */
  --color-accent-strong: #9B1F24;    /* pressed / hover on filled elements */
  --color-accent-contrast: #FFFFFF;  /* 5.84:1 on #C1272D */
  --color-accent-rgb: 193 39 45;
  --color-accent-soft: rgb(193 39 45 / 0.08);
  --color-accent-muted: rgb(193 39 45 / 0.18);
  --color-accent-line: rgb(193 39 45 / 0.38);

  /* Resolved colors */
  --color-background: hsl(var(--background));
  --color-void: hsl(var(--void));
  --color-foreground: hsl(var(--foreground));
  --color-text-main: hsl(var(--foreground));
  --color-text-muted: hsl(var(--muted-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-surface: hsl(var(--card));
  --color-muted: hsl(var(--muted));
  --color-border: hsl(var(--border));
  --color-link: var(--color-accent-text);

  /* Heights */
  --header-height: 76px;
  --marquee-height: 34px;
  --bottom-nav-height: 54px;

  /* Spacing */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-lg: clamp(2.5rem, 5vw, 4.5rem);
  --space-xl: clamp(3rem, 6vw, 6rem);

  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;

  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Fluid Typography — display runs hot, Anton is a condensed face */
  --text-fluid-h1: clamp(2.75rem, 8vw + 1rem, 7rem);
  --text-fluid-h2: clamp(1.875rem, 4.5vw + 1rem, 4rem);
  --text-fluid-h3: clamp(1.375rem, 2.5vw + 1rem, 2.25rem);
  --text-fluid-p: clamp(1rem, 1vw + 0.5rem, 1.125rem);

  --container-width: 1280px;
  --text-max-width: 68ch;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton ships one weight */
  line-height: 0.95;
  margin-top: 0;
  color: var(--color-text-main);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-fluid-h1); margin-bottom: 2rem; }
h2 { font-size: var(--text-fluid-h2); margin-bottom: 1.5rem; }
h3 { font-size: var(--text-fluid-h3); margin-bottom: 1.25rem; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0, 0, 0.2, 1);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

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

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.section-padding { padding-block: var(--space-xl); }
.section-padding-lg { padding-block: calc(var(--space-xl) * 1.5); }
.pt-0 { padding-top: 0; }

.bg-secondary { background-color: var(--color-secondary); }
.bg-void { background-color: var(--color-void); }
.text-muted { color: var(--color-text-muted); }

/* Mono eyebrow label — the workhorse of the whole system */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent-text);
  margin-bottom: 1.5rem;
}

.label--muted { color: var(--color-text-muted); }

.section-title { max-width: 22ch; }

.section-description {
  font-size: var(--text-fluid-p);
  line-height: 1.75;
  max-width: var(--text-max-width);
  color: var(--color-text-muted);
  margin-bottom: 3rem;
}

.section-description b,
.section-description strong { color: var(--color-text-main); }

/* A hard red rule used to open sections */
.rule {
  width: 4rem;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0625rem 2.25rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  border: 1px solid var(--color-foreground);
  background: transparent;
  color: var(--color-foreground);
  transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn-primary {
  background: var(--color-foreground);
  color: var(--color-void);
  border-color: var(--color-foreground);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-contrast);
}

.btn-outline {
  background: transparent;
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--color-accent);
  background: transparent;
  color: var(--color-accent-text);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Underlined text action. The rule wipes in from the left on hover. */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 4px;
  position: relative;
  color: var(--color-foreground);
}

.btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-border);
}

.btn-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.2s cubic-bezier(0, 0, 0.2, 1);
  z-index: 1;
}

.btn-link:hover,
.btn-link:focus-visible { color: var(--color-accent-text); }
.btn-link:hover::before,
.btn-link:focus-visible::before { width: 100%; }

/* ---------------------------------------------------------------
   Animation
   --------------------------------------------------------------- */
.animate-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; opacity: 1; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------
   Marquee ticker — announces the live drop directly under the header
   --------------------------------------------------------------- */
.marquee {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  overflow: hidden;
  white-space: nowrap;
  height: var(--marquee-height);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 49;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  /* No will-change: it keeps a compositing layer alive for the whole session,
     which competes with the masked hero artwork for GPU memory. The animation
     promotes the layer on its own while it runs. */
  animation: marquee 38s linear infinite;
}

.marquee-item {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-inline: 1.25rem;
  flex: 0 0 auto;
}

.marquee-item::after {
  content: "\25C6";
  margin-left: 1.25rem;
  opacity: 0.55;
  font-size: 0.5rem;
  vertical-align: middle;
}

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

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.page-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-void);
  border-bottom: 1px solid var(--color-border);
}

.page-header > .container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-block: 1.375rem;
  color: var(--color-foreground);
}

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

.desktop-nav { display: none; }

.desktop-nav ul {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav a {
  display: flex;
  align-items: center;
  padding-block: 1.375rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-main);
  position: relative;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.desktop-nav a.active { color: var(--color-accent-text); }

.desktop-nav a.active::after,
.desktop-nav a:hover::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.language-picker { display: flex; align-items: stretch; }

.lang-link {
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
}

.lang-link:hover,
.lang-link:focus-visible { color: var(--color-accent-text); }

/* ---------------------------------------------------------------
   Bottom nav (mobile)
   --------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-void);
  border-top: 1px solid var(--color-border);
  padding: 0.625rem 0;
  z-index: 50;
}

.bottom-nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text-muted);
}

.bottom-nav-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bottom-nav-link svg { width: 1.0625rem; height: 1.0625rem; }

.bottom-nav-link.active { color: var(--color-accent-text); }

@media (min-width: 1024px) {
  :root { --bottom-nav-height: 0px; }
  .desktop-nav { display: block; margin-left: auto; margin-right: 2.5rem; }
  .bottom-nav { display: none; }
}

@media (max-width: 1023px) {
  body { padding-bottom: 4.75rem; }
}

/* ---------------------------------------------------------------
   Metrics strip
   --------------------------------------------------------------- */
.metrics-section {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-void);
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; }
}

.metric-item { display: flex; flex-direction: column; gap: 0.5rem; }

.metric-value {
  font-family: var(--font-display);
  font-size: var(--text-fluid-h2);
  color: var(--color-accent);
  line-height: 0.95;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-void);
  color: var(--color-foreground);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.hero-section--home { min-height: 78vh; }
.hero-section--page { min-height: 42vh; padding-block: 3rem; }

/* Faint red grid so pure black never reads as an unloaded page */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgb(193 39 45 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(193 39 45 / 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 15% 40%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 15% 40%, #000 10%, transparent 75%);
}

.hero-overlay--with-bg {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.9) 100%);
  background-image: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 4rem;
  width: 100%;
}

.hero-content--with-aside {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hero-content--with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 4rem;
    align-items: start;
  }
}

.hero-aside {
  width: 100%;
}

.hero-main-column { max-width: 62rem; }

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 1.75rem;
  color: var(--color-accent-text);
}

.hero-title-row { margin-bottom: 2rem; }

.hero-title {
  color: var(--color-foreground);
  margin-bottom: 0;
  letter-spacing: -0.015em;
}

.hero-description-short,
.hero-description {
  font-size: var(--text-fluid-p);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 2.75rem;
  max-width: var(--text-max-width);
}

.hero-description-short { display: block; }
.hero-description { display: none; }

@media (min-width: 768px) {
  .hero-description-short { display: none; }
  .hero-description { display: block; }
}

.hero-section--page .hero-description-short { display: block; }
.hero-section--page .hero-description { display: none; }

.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-contact-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.hero-email {
  font-family: var(--font-display);
  font-size: var(--text-fluid-h2);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

.hero-email:hover,
.hero-email:focus-visible { color: var(--color-accent-text); }

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.cta-section {
  padding-block: var(--space-xl);
  background-color: var(--color-accent-soft);
  border-top: 2px solid var(--color-accent);
}

.cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin: 0 0 1.5rem;
  color: var(--color-accent-text);
}

.cta-title {
  font-size: var(--text-fluid-h2);
  margin-bottom: 1.5rem;
  max-width: 24ch;
}

.cta-description {
  font-size: var(--text-fluid-p);
  color: var(--color-text-muted);
  margin-bottom: 3rem;
  max-width: var(--text-max-width);
}

.cta-action { display: flex; flex-direction: column; align-items: flex-start; }

.cta-email-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cta-email {
  font-family: var(--font-display);
  font-size: var(--text-fluid-h3);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.cta-email:hover,
.cta-email:focus-visible { color: var(--color-accent-text); }

.copy-email-trigger {
  background: none;
  border: 1px solid var(--color-accent-line);
  padding: 0.45rem 0.85rem;
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-email-trigger:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.page-footer {
  background: var(--color-void);
  color: var(--color-foreground);
  padding-block: 5rem 2.5rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
    align-items: flex-start;
  }
}

.footer-branding {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-brand { color: var(--color-foreground); }

.footer-slogan {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  max-width: 30ch;
  line-height: 1.7;
  margin: 0;
}

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent-text);
  margin: 0 0 0.25rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-links--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.footer-links a:hover { color: var(--color-accent-text); }

.footer-contact-list { display: flex; flex-direction: column; gap: 0.875rem; }

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-contact-item a:hover { color: var(--color-accent-text); }

.footer-socials { display: flex; gap: 1.125rem; }

.footer-socials a { color: var(--color-text-muted); display: inline-flex; }
.footer-socials a:hover { color: var(--color-accent-text); }

.page-footer .copyright {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding-top: 1.75rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--color-border);
}

.copyright-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-legal-links { display: flex; gap: 1.5rem; }

.privacy-link { color: inherit; text-decoration: underline; }
.privacy-link:hover { color: var(--color-accent-text); }

/* ---------------------------------------------------------------
   Status pills — shared by product cards, detail pages, drop headers
   --------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.3rem 0.6rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.status--live { color: var(--color-accent-text); }

.status--live::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

.status--sold-out { color: var(--color-text-muted); }
.status--archive { color: var(--color-text-muted); }
.status--soon { color: var(--color-foreground); }

/* ---------------------------------------------------------------
   Prose (markdown output)
   --------------------------------------------------------------- */
.prose {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-foreground);
  max-width: var(--text-max-width);
}

.prose h2 {
  font-size: var(--text-fluid-h3);
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.prose p { margin-bottom: 1.75rem; }

.prose a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose strong { color: var(--color-text-main); font-weight: 600; }

.prose ul, .prose ol { margin-bottom: 2rem; padding-left: 1.5rem; }
.prose li { padding-block: 0.3rem; }
.prose li::marker { color: var(--color-accent); }

.prose blockquote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-main);
  font-size: 1.1875rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: 3rem;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-muted);
  padding: 0.15em 0.4em;
}

/* Tables scroll inside their own box rather than pushing the page wide */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 2.5rem;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}

.prose th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-accent-line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.prose td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* The leading cell is usually a label or a numeric range ("230–280"); letting
   it wrap splits the value across two lines. The table scrolls instead. */
.prose td:first-child {
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Wordmark
   Live text in the display face. Sized by font-size so it scales with
   whatever context it sits in; the slash is a skewed pseudo-element.
   --------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.2em;
  line-height: 1;
  color: inherit;
}

.wordmark-text {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  /* Anton is condensed; a touch of horizontal scale matches the poster mark. */
  transform: scaleX(1.04);
  transform-origin: left center;
}

.wordmark-extension {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent-text);
  margin-left: 0.1em;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: 0.12em;
}

.wordmark-slash {
  width: 0.22em;
  height: 1em;
  background: var(--color-accent);
  transform: skewX(-18deg);
  flex: 0 0 auto;
}

/* Poster orientation: reads bottom-to-top, as on the artwork. */
.wordmark--vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.wordmark--header { font-size: 1.5rem; }
.wordmark--footer { font-size: 2rem; }

/* ---------------------------------------------------------------
   Hero artwork
   The poster is a tall portrait. On narrow screens it sits behind the
   copy at low opacity; from 900px it moves to the right-hand side and
   comes up to full strength.
   --------------------------------------------------------------- */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
}

/* The left edge is faded with a gradient painted OVER the artwork rather than a
   mask-image on it. A mask forces the whole full-height image through an extra
   compositing pass every frame the ticker animates; an overlay is a plain paint
   and gets the same result. */
.hero-section:has(.hero-art)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, var(--color-void) 0%, rgb(0 0 0 / 0.55) 45%, transparent 70%);
}

@media (min-width: 900px) {
  .hero-art {
    opacity: 1;
    right: max(0px, calc(50vw - var(--container-width) / 2));
  }

  .hero-section:has(.hero-art)::after {
    background: linear-gradient(to right, var(--color-void) 0%, var(--color-void) 30%, rgb(0 0 0 / 0.35) 55%, transparent 78%);
  }

  /* Keep the copy clear of the artwork. */
  .hero-content--with-art .hero-main-column { max-width: 52%; }
}

@media (min-width: 1400px) {
  .hero-content--with-art .hero-main-column { max-width: 56%; }
}