/* Diogenes — askdiogenes.ai
 *
 * Palette sampled from the site illustration and lantern logo:
 * parchment ground, deep sepia ink, lantern-flame orange.
 *
 * No external fonts. No trackers. Font: Cormorant Garamond (system fallback). */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('Cormorant Garamond'), url('/assets/fonts/cormorant-garamond.woff2') format('woff2');
}
/* Italic face deliberately omitted. The italic woff2 was missing on
   disk, which produced a noisy 404 on every page load. The browser
   synthesises italics from the regular face when no italic source
   is present, which is visually close enough for the lightly-italic
   typographic accents used on the site. Add a real italic woff2
   here later if the synthesised slant looks wrong. */

:root {
  /* Browser hint: this is a light parchment palette, not auto. Without
     this, form controls inherit dark-mode-style colours on systems set
     to a dark default, breaking the input + select look on the signup
     form and Privy connect button. */
  color-scheme: light;

  /* Palette sampled from diogenes-image.jpg + diogenes-logo.jpg */
  --bg:         #d9cbae;   /* parchment ground — matches logo background exactly */
  --bg-elev:    #e3d3b3;   /* brighter recessed surfaces */
  --fg:         #2f1d05;   /* near-black sepia — matches logo line ink */
  --muted:      #5e422a;   /* warm mid-sepia from illustration shadows */
  --accent:     #ec9a37;   /* lantern flame — orange core from logo */
  --accent-hot: #f3d67a;   /* flame halo / candlelight glow */
  --accent-dim: #7a5418;   /* iron lantern frame */
  --low:        #7a2418;   /* deep oxblood */
  --high:       #58502a;   /* warm moss */
  --rule:       #a89472;   /* warm tan line */
  --stone:      #5b412a;   /* weathered sepia stone */

  /* Typography */
  --serif: 'Cormorant Garamond', 'EB Garamond', 'Iowan Old Style',
           'Palatino Linotype', 'URW Palladio L', P052, ui-serif,
           Georgia, Cambria, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono:  ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  /* Global safety: any future content (long URLs, oversized tables,
     wide images) cannot trigger horizontal page scroll on any viewport.
     Previously this was scoped to ≤600px only. Promoting it to global
     means tiny phones and tablets share the same guarantee. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain across the body. SVG fractal noise tinted to the parchment.
 * Sits behind all content; the cinematic hero covers it via its own background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.29  0 0 0 0 0.13  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
main, footer, header, section { position: relative; z-index: 1; }

a {
  color: var(--accent-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s, border-color 0.2s;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Polish: selection, focus, motion, skip-link ───────────────────── */

/* Selection — Firefox needs its own prefixed rule */
::selection      { background: var(--accent); color: var(--bg); text-shadow: none; }
::-moz-selection { background: var(--accent); color: var(--bg); text-shadow: none; }

/* Focus rings — lantern-gold, keyboard-only via :focus-visible so a
   mouse click never gets the ring (which the existing site has been
   quietly suppressing with browser-default behaviour). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-connect:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.signup-form button:focus-visible {
  outline-offset: 4px;
}

/* Skip-to-content link for keyboard and screen-reader users. Hidden
   off-canvas until focused; slides in as a lantern-gold pill in the
   top-left when the user tabs into the page. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  background: var(--accent-hot);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: none;
  box-shadow: 0 4px 14px rgba(47, 29, 5, 0.25);
  transform: translateY(-200%);
  transition: transform 0.18s ease-out;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 6px;
}

/* Motion safety. Users who request reduced motion get a near-instant
   version of every animation + transition. The hero fade-ins, the
   scroll-bounce arrow, the flicker keyframes — all become single-tick
   transitions. Critical for accessibility (WCAG 2.3.3) and respectful
   of vestibular-disorder users. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 96px 32px 96px;
}

/* Header — full-bleed so it spans the viewport regardless of the
   820px main column, with safe inner padding. The "50% - 50vw"
   trick anchors the left edge to the viewport left edge from any
   container.  This works whether the header sits inside <main> or
   is a direct child of <body>. Brand goes left, nav (with the
   Connect-wallet button) goes right, and there is always room. */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: 24px 32px 16px;
  margin-bottom: 56px;
  font-family: var(--sans);
  font-size: 13px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
/* On pages where the header is the first child of <main>, main's
   96px top padding pushes the header down with a parchment gap
   above it. Pull the header back up to the page top so it matches
   the homepage flow. The negative top margin is the same as the
   main top padding. */
main > header.site:first-child {
  margin-top: -96px;
}
header.site .brand {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--fg);
  border-bottom: none;
  letter-spacing: 0.04em;
}
header.site .brand .lantern-glow { width: 88px; height: 88px; }
header.site .brand strong {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg);
  line-height: 1;
}
@media (max-width: 700px) {
  header.site .brand { gap: 12px; }
  header.site .brand .lantern-glow { width: 52px; height: 52px; }
  header.site .brand strong { font-size: 24px; }
}
header.site nav {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
header.site nav a {
  color: var(--muted);
  border-bottom: none;
  letter-spacing: 0.03em;
  /* WCAG 2.5.5 touch-target: every interactive element needs to be at
     least 44×44 CSS pixels. Inline nav links previously inherited the
     line-height only, which fell below the threshold on mobile. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

/* Tiny phones (≤380px, e.g. iPhone SE portrait, 13 mini): the static
   nav links + the JS-injected .nav-connect button outgrow the row and
   the Connect button gets orphaned on its own line. Order the connect
   button to the FRONT of the flex row so it stays anchored at the
   right of the brand even when nav links wrap below. */
@media (max-width: 380px) {
  header.site nav { gap: 12px 14px; }
  header.site nav a { min-height: 40px; padding: 0 2px; }
  header.site .nav-connect { order: -1; margin-left: auto; }
}
header.site nav a:hover { color: var(--accent); }

/* Connect wallet button — clean pill, white background, thin
   light-grey border, black text with a small wallet glyph on the
   left. Compact size so it reads as the primary nav action
   without dominating the header. Connected state flips to the
   lantern-flame accent so the holder sees their tier at a glance.
   Two variants: default (light header) and overlay (homepage
   cinematic hero where the header sits over a dark image). */
/* Default variant (every page except the cinematic-hero homepage):
   dark sepia pill with parchment text so the CTA reads loud against
   the light parchment header background. */
.nav-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 7px 14px;
  margin-left: 12px;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(47, 29, 5, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.nav-connect:hover {
  background: var(--muted);
  border-color: var(--muted);
  box-shadow: 0 2px 6px rgba(47, 29, 5, 0.25);
}
.nav-connect:active { transform: translateY(1px); }
.nav-connect[data-connected="1"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg);
}
.nav-connect[data-connected="1"]:hover {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
}
.nav-connect:disabled {
  opacity: 0.55;
  cursor: progress;
}
.nav-connect svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Cinematic-hero homepage variant: the header sits over a dark
   photograph, so flip back to a light parchment pill with sepia
   text + a soft drop shadow so it reads cleanly against the image.
   Connected state still flips to the flame-orange accent. */
header.site-overlay .nav-connect {
  background: var(--bg-elev);
  border-color: var(--rule);
  color: var(--fg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
header.site-overlay .nav-connect:hover {
  background: var(--bg);
  border-color: var(--accent-dim);
}
header.site-overlay .nav-connect[data-connected="1"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg);
}

/* Hamburger toggle — hidden on desktop, replaces nav on mobile */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 11;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fg);
  margin: 5px auto;
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
header.site-overlay .nav-toggle span {
  background: var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
 * CINEMATIC HERO, home page only.
 * Full-bleed 100vh video with overlay header, animated H1.
 * ============================================================ */
.hero-cinematic {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* iOS Safari: dvh excludes the URL bar so content doesn't get clipped */
  min-height: 580px;
  max-height: 1100px;
  overflow: hidden;
  background: #1a0f04;
}
.hero-cinematic__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-cinematic__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-cinematic__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(26, 15, 4, 0.55) 0%,
      rgba(26, 15, 4, 0.08) 22%,
      rgba(26, 15, 4, 0.18) 50%,
      rgba(26, 15, 4, 0.78) 85%,
      rgba(26, 15, 4, 0.95) 100%);
  pointer-events: none;
}
.hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:
    max(96px, env(safe-area-inset-top))
    clamp(24px, 7vw, 96px)
    max(14vh, calc(72px + env(safe-area-inset-bottom)));
  pointer-events: none;
}
.hero-cinematic__overlay > * { pointer-events: auto; }
.hero-cinematic__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-hot);
  margin: 0 0 22px;
  opacity: 0;
  animation: hero-fade-in 1.2s ease-out 0.05s both;
}
.hero-cinematic__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(46px, 8.4vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
  color: var(--bg);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
}
.hero-cinematic__title span {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-line-in 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-cinematic__title span:nth-child(1) { animation-delay: 0.12s; }
.hero-cinematic__title span:nth-child(2) { animation-delay: 0.30s; color: var(--accent-hot); }
.hero-cinematic__title span:nth-child(3) { animation-delay: 0.48s; }
@keyframes hero-line-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-cinematic__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.5;
  margin: 28px 0 36px;
  max-width: 44ch;
  color: rgba(227, 211, 179, 0.92);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
  text-wrap: balance;
  opacity: 0;
  animation: hero-fade-in 1.2s ease-out 0.75s both;
}
.hero-cinematic__cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  animation: hero-fade-in 1.2s ease-out 0.95s both;
}
.btn-ghost {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bg);
  background: transparent;
  border: 1px solid rgba(227, 211, 179, 0.45);
  border-radius: 3px;
  padding: 12px 22px;
  transition: all 0.2s;
}
.btn-ghost:hover {
  color: #1a0f04;
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  border-bottom: 1px solid var(--accent-hot);
}
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll cue at the bottom of the hero */
.hero-cinematic__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(227, 211, 179, 0.68);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: hero-fade-in 1.6s ease-out 1.5s both;
  transition: color 0.2s;
}
.hero-cinematic__scroll:hover { color: var(--accent-hot); border-bottom: none; }
.hero-cinematic__scroll-arrow {
  font-size: 18px;
  display: inline-block;
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* Header overlay variant, for the cinematic hero only.
 * Specificity needs to beat base `header.site .brand strong` etc., so
 * every selector below is qualified with `header.site-overlay`. */
header.site-overlay {
  position: absolute;
  top: 0;
  /* Match inner-page header.site's scrollbar-symmetric math exactly.
     Inner header is `width: 100vw; margin-left: calc(50% - 50vw)`
     inside main, which makes it 100vw (includes scrollbar) and pulls
     it left by half the scrollbar width so it overhangs symmetrically.
     The overlay header lives outside main; reproduce the same offset
     directly via `left: calc(50% - 50vw); width: 100vw` so the brand
     lands at the same x position. */
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: 10;
  padding: 24px 32px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  background: linear-gradient(180deg, rgba(26, 15, 4, 0.62) 0%, transparent 100%);
  font-family: var(--sans);
  font-size: 13px;
}
header.site-overlay .brand {
  gap: 18px;
  color: var(--bg);
}
header.site-overlay .brand strong {
  color: var(--bg);
  font-size: 34px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}
/* Cinematic-hero variant: warm-tint inverts the dark sepia ink to
 * parchment light against the dark video. No drop-shadow — the halo
 * extends the visible lantern past its 88px layout box and reads as
 * a position shift compared to the (unfiltered) inner-page lantern. */
header.site-overlay .brand .lantern-glow {
  width: 88px;
  height: 88px;
  filter:
    brightness(0)
    invert(1)
    sepia(0.45)
    hue-rotate(348deg)
    saturate(1.4)
    brightness(0.96);
}
@media (max-width: 700px) {
  header.site-overlay .brand .lantern-glow { width: 52px; height: 52px; }
  header.site-overlay .brand strong { font-size: 24px; }
}
/* Overlay nav inherits gap (18px) and letter-spacing (0.03em) from
 * header.site nav above. Only override what genuinely differs on the
 * dark hero: text colour, text-shadow for legibility. The gap/spacing
 * match avoids the tabs shifting horizontally when navigating from
 * homepage to any other page. */
header.site-overlay nav a {
  color: var(--bg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
header.site-overlay nav a:hover { color: var(--accent-hot); }

/* Pre-launch tag (login page header) */
.prelaunch-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-hot);
  border: 1px solid rgba(243, 214, 122, 0.4);
  padding: 6px 14px;
  border-radius: 2px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Password form in the cinematic hero (login page) */
.hero-cinematic__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  max-width: 500px;
  opacity: 0;
  animation: hero-fade-in 1.2s ease-out 0.95s both;
}
.hero-cinematic__input {
  flex: 1 1 240px;
  font-family: var(--serif);
  font-size: 17px;
  padding: 13px 18px;
  border: 1px solid rgba(243, 214, 122, 0.35);
  border-radius: 3px;
  background: rgba(26, 15, 4, 0.55);
  color: var(--bg);
  outline: none;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hero-cinematic__input::placeholder { color: rgba(227, 211, 179, 0.55); }
.hero-cinematic__input:focus {
  border-color: var(--accent-hot);
  background: rgba(26, 15, 4, 0.75);
  box-shadow: 0 0 0 3px rgba(243, 214, 122, 0.18);
}
.hero-cinematic__form .btn-primary,
.hero-cinematic__form .btn-ghost {
  cursor: pointer;
}
.hero-cinematic__form .btn-primary { border: none; }

/* Password form is the secondary path — smaller, less prominent. */
.hero-cinematic__form--pw {
  max-width: 400px;
  margin-top: 14px;
  animation-delay: 1.25s;
}
.hero-cinematic__form--pw .hero-cinematic__input {
  font-size: 15px;
  padding: 10px 14px;
  flex-basis: 200px;
}

/* "Got the password?" toggle link */
.hero-cinematic__pw-toggle {
  margin: 22px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  animation: hero-fade-in 1.4s ease-out 1.15s both;
}
.hero-cinematic__pw-toggle a {
  color: rgba(227, 211, 179, 0.58);
  border-bottom: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero-cinematic__pw-toggle a:hover {
  color: var(--accent-hot);
  border-bottom: none;
}
.hero-cinematic__error {
  width: 100%;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb38a;
  min-height: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* "Built on Virtuals" badge — large, right of the lantern in the cinematic hero */
.hero-cinematic__virtuals {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(24px, 8vw, 96px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border-bottom: none;
  opacity: 0;
  animation: hero-fade-in 1.4s ease-out 1.1s both;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
  text-decoration: none;
}
.hero-cinematic__virtuals:hover {
  border-bottom: none;
  transform: translateY(calc(-50% - 3px));
}
.hero-cinematic__virtuals-label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(227, 211, 179, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  padding-left: 2px;
}
.hero-cinematic__virtuals img {
  height: clamp(48px, 6vw, 78px);
  width: auto;
  display: block;
  /* Match the title text-shadow so the logo reads the same colour as
   * "out of circulation." against the dark hero. */
  filter: drop-shadow(0 2px 32px rgba(0, 0, 0, 0.45));
}
@media (max-width: 900px) {
  .hero-cinematic__virtuals {
    top: auto;
    bottom: 18%;
    right: 24px;
    transform: none;
    gap: 8px;
  }
  .hero-cinematic__virtuals:hover { transform: translateY(-3px); }
  .hero-cinematic__virtuals img { height: 42px; }
  .hero-cinematic__virtuals-label { font-size: 11px; }
}
@media (max-width: 600px) {
  .hero-cinematic__virtuals { display: none; }
}

/* Mobile: dial down the cinematic */
@media (max-width: 700px) {
  .hero-cinematic {
    height: 100vh;
    height: 100dvh;
    min-height: 520px;
  }
  .hero-cinematic__overlay {
    padding:
      max(96px, calc(80px + env(safe-area-inset-top)))
      22px
      max(48px, calc(32px + env(safe-area-inset-bottom)));
  }
  .hero-cinematic__title {
    font-size: clamp(38px, 11vw, 60px);
    max-width: 14ch;
  }
  .hero-cinematic__tagline {
    font-size: 16px;
    margin: 20px 0 26px;
  }
  .hero-cinematic__eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
  }
  .hero-cinematic__cta { gap: 12px; }
  .hero-cinematic__cta .btn-primary,
  .hero-cinematic__cta .btn-ghost {
    padding: 14px 22px;
    font-size: 12px;
  }
  .hero-cinematic__scroll { display: none; }

  /* Hamburger replaces inline nav on mobile */
  .nav-toggle { display: block; }
  header.site nav,
  header.site-overlay nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 14px 22px 22px;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    box-shadow: 0 10px 24px -10px rgba(42, 24, 16, 0.35);
    z-index: 10;
  }
  header.site-overlay nav {
    background: rgba(26, 15, 4, 0.97);
    border-top: 1px solid rgba(243, 214, 122, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  header.site nav a,
  header.site-overlay nav a {
    display: block;
    padding: 12px 4px;
    font-size: 15px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--rule);
  }
  header.site nav a:last-child,
  header.site-overlay nav a:last-child { border-bottom: none; }
  header.site-overlay nav a {
    color: var(--bg);
    border-bottom-color: rgba(243, 214, 122, 0.12);
  }
  header.site.nav-open nav,
  header.site-overlay.nav-open nav {
    display: flex;
  }
}

/* Legacy .hero (asymmetric) kept for any other page using it.
 * Home no longer uses it. */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  margin: 8px -120px 72px;
}
.hero .painting-hero {
  margin: 0;
  padding: 0;
  position: relative;
  max-width: none;
}
.hero-text { max-width: 460px; }
.hero-text h1 { margin-top: 0; }
.hero-tagline {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  margin: 24px 0 32px;
  font-style: italic;
  text-wrap: balance;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-primary,
.btn-secondary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-primary {
  background: var(--accent-dim);
  color: var(--bg);
  padding: 13px 22px;
  border-radius: 3px;
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--bg);
  border-bottom: none;
  transform: translateY(-1px);
}
.btn-secondary {
  color: var(--accent-dim);
  background: transparent;
  padding: 13px 14px;
}
.btn-secondary:hover {
  color: var(--accent);
  border-bottom: none;
}

.painting-hero img,
.painting-hero video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 6px 32px rgba(42, 24, 16, 0.28);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 8px 0 56px;
  }
  .hero-text { max-width: none; }
}
.painting-credit {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}
.painting-credit em { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/* Diogenes detail — same painting, framed tight on Diogenes + the raised lantern */
.diogenes-detail {
  margin: 40px 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.diogenes-detail .frame {
  position: relative;
  width: 200px;
  height: 280px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(42, 24, 16, 0.22);
}
.diogenes-detail .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 42%;
  max-width: none;
}
.diogenes-detail .detail-caption {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  padding-top: 8px;
}
.diogenes-detail .detail-caption strong {
  display: block;
  color: var(--fg);
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Epigraph — historical note before the agent speaks */
.epigraph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 32px;
  margin-bottom: 56px;
  max-width: 580px;
  text-wrap: pretty;
}
.epigraph p { margin: 0; }
.epigraph .quoted {
  color: var(--accent-dim);
  font-style: italic;
}

/* Headings */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--fg);
}
h1 {
  font-size: 72px;
  margin-top: 0;
  font-style: italic;
  font-weight: 500;
  text-wrap: balance;
}
h1 small {
  display: block;
  font-style: normal;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 24px;
  font-weight: 500;
}
h2 {
  font-size: 34px;
  margin-top: 64px;
  margin-bottom: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
h3 {
  font-size: 22px;
  margin-top: 36px;
  color: var(--accent-dim);
  font-style: italic;
}

p { margin: 0 0 22px; }

em, i { color: var(--fg); }
strong, b { color: var(--accent-dim); font-weight: 600; }

blockquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--fg);
}
blockquote.tagline {
  font-size: 28px;
  font-style: italic;
  font-family: var(--serif);
  margin: 40px 0;
  border-left-width: 3px;
  border-left-color: var(--accent);
  color: var(--fg);
  text-wrap: balance;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 56px 0;
}

ul, ol { padding-left: 24px; margin: 0 0 22px; }
li { margin-bottom: 10px; }

code, pre {
  font-family: var(--mono);
  font-size: 14px;
}
code {
  background: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent-dim);
  border: 1px solid var(--rule);
}
/* Block code (e.g. JSON schema examples). Wrap long lines so the
 * mitigation strings don't overflow the 820px content column. */
pre {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 18px;
  margin: 16px 0 22px;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.muted { color: var(--muted); }
.sans  { font-family: var(--sans); }
.small { font-size: 14px; }

/* Verdict cards */
.verdict-list { list-style: none; padding: 0; margin: 0; }
.verdict-card {
  border-top: 1px solid var(--rule);
  padding: 28px 0;
  margin: 0;
}
.verdict-card:last-child { border-bottom: 1px solid var(--rule); }
.verdict-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.verdict-score {
  font-family: var(--serif);
  font-size: 44px;
  font-style: italic;
  color: var(--accent-dim);
  line-height: 1;
  font-weight: 500;
}
.verdict-score.low  { color: var(--low); }
.verdict-score.high { color: var(--high); }
.verdict-body { color: var(--fg); }
.verdict-watch {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
  letter-spacing: 0.01em;
}
.verdict-watch strong { color: var(--accent-dim); font-weight: 600; }

/* Live counter — pre-launch and ongoing stat block */
.counter-strip {
  display: flex;
  gap: 32px;
  padding: 22px 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 40px 0 48px;
  font-family: var(--sans);
  align-items: baseline;
  flex-wrap: wrap;
}
.counter-item { display: flex; flex-direction: column; gap: 4px; }
.counter-item .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--accent-dim);
  line-height: 1;
  font-weight: 500;
}
.counter-item .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.counter-strip .counter-note {
  flex: 1;
  font-style: italic;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  align-self: center;
  text-align: right;
  min-width: 200px;
}

/* Signup — pre-launch waitlist form */
.signup {
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 24px 28px;
  margin: 48px 0;
}
.signup h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  margin: 0 0 8px;
}
.signup p {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 16px;
}
.signup-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.signup-form input[type="email"],
.signup-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 14px;
  font-family: var(--serif);
  font-size: 16px; /* keep ≥16px so iOS doesn't auto-zoom on focus */
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.signup-form input[type="email"]:focus,
.signup-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.signup-form button {
  padding: 11px 22px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s;
}
.signup-form button:hover { background: var(--accent-dim); color: var(--bg); }
.signup .signup-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 12px 0 0;
}

/* Lede paragraph — illuminated drop cap + small-caps opener */
.lede {
  font-size: 21px;
  line-height: 1.55;
  margin-bottom: 32px;
}
.lede::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 6.2em;
  float: left;
  line-height: 0.82;
  margin: 8px 16px -6px 0;
  background: linear-gradient(155deg, #a06618 0%, #d4992d 35%, #f3d67a 55%, #b27015 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 0 rgba(94, 66, 42, 0.06);
  filter: drop-shadow(0 1px 0 rgba(94, 66, 42, 0.18));
}
.lede .smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--fg);
}

/* Hero lede — value claim, sized like the lede but without the drop cap */
.hero-lede {
  font-size: 21px;
  line-height: 1.55;
  margin-bottom: 32px;
}

/* Inscription — pullquote treatment for the recurring one-liners */
.inscription {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  color: var(--fg);
  margin: 64px 0;
  padding: 28px 24px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Ornament — small lantern flanked by tan rules, used as section break */
.ornament {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 64px 0;
  color: var(--rule);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.ornament > span {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url('/assets/diogenes-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 160% auto;
  flex-shrink: 0;
}

/* Verdict preview card — pre-launch placeholder styled as a sealed artefact */
.verdict-preview {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 28px 32px 26px;
  margin: 24px 0 16px;
  position: relative;
  font-family: var(--serif);
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.55) inset,
    0 1px 3px rgba(42, 24, 16, 0.06),
    0 18px 36px -22px rgba(42, 24, 16, 0.45);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.verdict-preview:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.55) inset,
    0 1px 3px rgba(42, 24, 16, 0.08),
    0 30px 52px -28px rgba(42, 24, 16, 0.55);
}
.verdict-preview .preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}
.verdict-preview .badge {
  background: var(--accent);
  color: var(--bg);
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.verdict-preview .preview-body {
  font-style: italic;
  font-size: 18px;
  color: var(--fg);
  line-height: 1.5;
  margin: 0;
}
.verdict-preview .preview-foot {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 14px;
}

/* Tables — used on the playbook page */
.prose-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0 48px;
  font-size: 16px;
  line-height: 1.55;
}
.prose-table th,
.prose-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.prose-table th {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 12px;
}
.prose-table tbody tr:nth-child(odd) { background: rgba(184, 134, 42, 0.04); }
.prose-table tr:last-child td { border-bottom: none; }
.prose-table td:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent-dim);
  white-space: nowrap;
  line-height: 1;
  padding-top: 16px;
}
.prose-table td:nth-child(2) {
  font-weight: 500;
  color: var(--fg);
}
.launch-anchor {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  margin: 28px 0 40px;
  border-radius: 2px;
}
.launch-anchor strong { color: var(--fg); font-weight: 600; }
.launch-anchor em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 16px;
  color: var(--fg);
  display: block;
  margin-top: 4px;
}

/* Placeholder */
.placeholder {
  text-align: center;
  padding: 56px 0 40px;
  color: var(--muted);
  font-style: italic;
  font-size: 18px;
}
.placeholder .lantern-glow--lg {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 28px;
}

/* Footer */
footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding-top: 36px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
footer.site a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
footer.site a:hover {
  color: var(--accent-dim);
  border-bottom-color: var(--accent);
}
footer.site .footer-col h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg);
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 600;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 6px; }

/* The lantern — transparent PNG so the outline floats on whatever background. */
.lantern-glow {
  display: inline-block;
  vertical-align: middle;
  background-image: url('/assets/diogenes-logo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 160% auto;
  animation: flicker 4.5s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; filter: none; }
  47%      { opacity: 0.93; filter: brightness(0.97); }
  53%      { opacity: 0.99; filter: brightness(1.03); }
  72%      { opacity: 0.95; filter: brightness(0.99); }
}

/* Mobile */
@media (max-width: 600px) {
  html, body { font-size: 17px; }
  body { overflow-x: hidden; }
  main { padding: 28px 18px 56px; }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; margin-top: 48px; }
  h2::after { width: 32px; }
  h3 { font-size: 19px; }
  blockquote.tagline { font-size: 22px; }

  .painting-hero { margin: 0 0 32px; }
  .painting-hero img { box-shadow: 0 2px 14px rgba(42, 24, 16, 0.18); }

  .diogenes-detail {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .diogenes-detail .frame {
    width: 100%;
    height: 240px;
  }
  .diogenes-detail .frame img {
    width: 200%;
    top: -10%;
    left: -55%;
  }

  header.site {
    padding: 16px 0;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    position: relative;
  }
  header.site .brand { gap: 10px; }
  header.site .brand .lantern-glow { width: 32px; height: 32px; }
  header.site .brand strong { font-size: 22px; }

  /* New-design components shrunk for narrow viewports */
  .lede { font-size: 18px; }
  .lede::first-letter { font-size: 4em; margin: 4px 8px 0 0; }
  .inscription {
    font-size: 22px;
    margin: 44px 0;
    padding: 22px 18px;
  }
  .ornament { margin: 44px 0; gap: 14px; }
  .ornament > span { width: 18px; height: 18px; }

  .launch-anchor {
    font-size: 11px;
    padding: 12px 14px;
    margin: 22px 0 32px;
  }
  .launch-anchor em { font-size: 14px; }

  /* Tables become horizontally scrollable rather than overflow */
  .prose-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 14px;
  }
  .prose-table th,
  .prose-table td { padding: 10px 12px; }
  .prose-table td:first-child { font-size: 18px; padding-top: 12px; }

  .verdict-head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .verdict-score { font-size: 32px; }
  .verdict-preview { padding: 18px 20px; }
  .verdict-preview .preview-body { font-size: 16px; }

  /* Counter strip stacks cleanly on narrow screens */
  .counter-strip {
    gap: 18px 28px;
    padding: 18px 18px;
    margin: 32px 0 36px;
  }
  .counter-strip .counter-note {
    text-align: left;
    flex: 1 1 100%;
    font-size: 14px;
    margin-top: 6px;
  }
  .counter-item .num { font-size: 26px; }

  /* Signup card fits the column, full-width button stacks below input */
  .signup { padding: 20px 18px; margin: 36px 0; }
  .signup h3 { font-size: 20px; }
  .signup p { font-size: 15px; }
  .signup-form { gap: 12px; }
  .signup-form input[type="email"],
  .signup-form input[type="text"] {
    flex: 1 1 100%;
  }
  .signup-form button {
    flex: 1 1 100%;
    padding: 14px 22px;
    min-height: 48px;
  }

  /* Footer: each column on its own row, consistent left-align */
  footer.site {
    gap: 28px;
    flex-direction: column;
    align-items: stretch;
  }
  footer.site .footer-col { width: 100%; }
}

/* Tiny phones — iPhone SE / 13 mini portrait */
@media (max-width: 380px) {
  main { padding: 24px 14px 48px; }
  h1 { font-size: 34px; }
  h2 { font-size: 23px; margin-top: 40px; }
  .hero-cinematic__title { font-size: clamp(32px, 12vw, 44px); }
  .hero-cinematic__overlay { padding-left: 18px; padding-right: 18px; }
  header.site-overlay nav { font-size: 10.5px; gap: 10px; }
}

/* ─── Per-verdict (/v/) + per-defacement (/d/) pages ──────────────────── */

/* Banner shown when a verdict's Defacement was blocked because every
 * finding has an active state-level remediation on-chain. Reads as
 * factual statement, not exoneration. */
.remediation-banner {
  margin: 24px 0 32px;
  padding: 18px 22px;
  background: rgba(243, 214, 122, 0.16);
  border-left: 4px solid var(--accent, #b97a2a);
  border-radius: 2px;
  font-size: 16px;
  line-height: 1.55;
}
.remediation-banner strong { display: block; margin-bottom: 6px; }
.remediation-banner em {
  font-style: normal;
  color: var(--accent-dim, #7a5418);
  font-weight: 500;
}
.remediation-banner .muted {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted, #6b5d4d);
}

.score-line {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 34px;
  margin: 18px 0 28px;
  letter-spacing: 0.01em;
}
.score-line strong { font-weight: 600; }
.score-line em {
  font-size: 16px;
  font-style: italic;
  color: var(--accent-dim, #7a5418);
  margin-left: 8px;
}
.score-low strong  { color: #7a1f1f; }
.score-mid strong  { color: var(--ink, #2f1d05); }
.score-high strong { color: #3a4a2a; }

.verdict-text p {
  margin: 0 0 16px;
}

.verdict-text p:first-child {
  font-size: 19px;
  line-height: 1.6;
}