/* Cardinal Studio — v5 (FireRed Modern, game-feel)
   Brand spec source: clients/1777680000000-cardinal-studio/profile.json
   Direction: FEEL like a game, don't BE a game.
   Components: stat-block hero, loadout card, achievement card, HUD chrome.
*/

:root {
  /* Palette — FireRed Modern (paletteCandidates[0]) */
  --primary: #D62828;          /* Vermelho FireRed   — CTAs, brand mark, signal */
  --primary-deep: #A81E1E;     /* hover/active */
  --secondary: #F4B41A;        /* Amarelo Pokéball — never as text on light bg */
  --accent: #1F3A93;           /* Azul Cobalto      — links, hover */
  --accent-deep: #15296B;
  --bg: #F4EBD0;               /* neutralLight cream — 60% of the site */
  --surface: #FBF6E5;          /* lifted card surface on cream */
  --text: #14171F;             /* neutralDark        — body/heading */
  --text-muted: #5A5747;       /* warm muted on cream */
  --text-inverse: #F4EBD0;
  --border-hair: rgba(20, 23, 31, 0.12);
  --border-soft: rgba(20, 23, 31, 0.22);
  --border-strong: #14171F;

  --font-heading: 'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --space-10: 9rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --container: 72rem;
  --container-narrow: 52rem;

  --shadow-card: 0 1px 2px rgba(20, 23, 31, 0.05), 0 8px 24px rgba(20, 23, 31, 0.08);
  --shadow-frame: 0 0 0 1px var(--border-strong), 4px 4px 0 0 var(--border-strong);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

/* Subtle grain over cream — gives the FireRed bg some texture
   without being noisy. Multiply blend so it darkens cream slightly. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection {
  background: var(--primary);
  color: var(--text-inverse);
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--accent-deep); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* ─── Container ──────────────────────────────────────────── */
.container {
  width: min(100% - 2rem, var(--container));
  margin: 0 auto;
}

/* ─── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--text);
  color: var(--bg);
  z-index: 1000;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

/* ─── Scroll progress (HUD bar) ──────────────────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--primary);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
}

/* ─── Reveal on scroll ──────────────────────────────────────
   .js class is added in <head> before paint by an inline script.
   Without JS, content is visible by default — no opacity-0 trap. */
[data-reveal] {
  transition: opacity 520ms ease, transform 520ms ease;
}
.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── Section base + section-number HUD prefix ──────────── */
.site-main { counter-reset: section; }

.section {
  padding: var(--space-9) 0;
  position: relative;
}
@media (min-width: 768px) {
  .section { padding: var(--space-10) 0; }
}

.section h2 {
  counter-increment: section;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6) 0;
}
.section:not(.hero) h2::before {
  content: "// " counter(section, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.section .lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 36em;
  margin: 0 0 var(--space-6) 0;
}

/* ─── Eyebrow / HUD label ────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
  box-shadow: 3px 3px 0 0 var(--text);
}
.btn-primary:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--text);
}
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--text);
}

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

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ─── Site nav ──────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-hair);
  z-index: 100;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0.85rem 0;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: block;
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

/* Status pulse — meaningful (signals availability), not decorative */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius-pill);
}
.nav-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
  animation: pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-status-dot { animation: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
}
.nav-link:hover { text-decoration: none; }
.nav-link.is-current {
  color: var(--primary);
}
.nav-link.is-current::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 2px;
  background: var(--primary);
}
.nav-link:hover { color: var(--primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lang-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.lang-link {
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
}
.lang-link.is-current {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 720px) {
  .nav-status { display: none; }
  .nav-row {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.25rem 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-hair);
    gap: var(--space-4);
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link {
    flex-shrink: 0;
    font-size: 0.92rem;
  }
}

/* ─── Hero (stat-block) ────────────────────────────────── */
.hero {
  padding: clamp(var(--space-8), 10vw, 9rem) 0 var(--space-9) 0;
}
.hero .container {
  max-width: var(--container-narrow);
}
.hero-stat-block {
  position: relative;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  background: var(--surface);
  border: 2px solid var(--border-strong);
  box-shadow: 10px 10px 0 0 var(--text);
}

/* Rotating 3D `#` brand mark — appears beside the headline on desktop.
   Position absolute in the top-right area of the stat-block, vertically
   centred so it sits next to the two headline lines. Mobile/narrow viewports
   hide it (no horizontal room + battery cost). hero-3d.js also no-ops on
   <768px, this CSS covers narrower desktop too. */
.hero-3d {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  width: clamp(110px, 13vw, 160px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 1024px) {
  .hero-3d { display: block; }
}
/* Game-HUD corner brackets — drawn with box-shadow on small absolute squares.
   No clip-path, so the heavy box-shadow on .hero-stat-block stays intact. */
.hero-stat-block::before,
.hero-stat-block::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--primary);
  pointer-events: none;
}
.hero-stat-block::before {
  top: -2px;
  right: -2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.hero-stat-block::after {
  bottom: -2px;
  left: -2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.hero-headline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-5) 0;
}
.hero-headline em {
  color: var(--primary);
  font-style: normal;
}
.hero-sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  max-width: 38em;
  margin: 0;
  line-height: 1.55;
}

/* Hero stat-line — quick mono facts under the sub.
   Adds trust signals (location, role, reply time, status) without an extra CTA. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 0 0;
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border-soft);
}
.hero-stats dt,
.hero-stats dd {
  margin: 0;
}
.hero-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 8rem;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.hero-stat-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.3;
}
.hero-stat-value .pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 0.4rem;
  animation: pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  vertical-align: middle;
}

/* ─── About-narrative + Loadout ─────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-5);
}
@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}
.about-portrait {
  margin: 0;
  position: relative;
}
.about-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--border-strong);
  filter: saturate(0.92) contrast(1.02);
}
.player-tag {
  /* HUD-style player tag below the portrait */
  position: absolute;
  bottom: -10px;
  left: 12px;
  padding: 0.25rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: var(--text);
  color: var(--bg);
}
.about-body p {
  margin: 0 0 var(--space-4) 0;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.about-pullquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Loadout: skill chips become equipment slots — mono label, dot, frame */
.skills-row {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  position: relative;
}
.skill-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--primary);
  flex-shrink: 0;
}

/* ─── Portfolio / achievement cards ─────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .portfolio-grid {
    /* auto-fit means a single card stays sized but doesn't span; with
       max-width on the case-card we keep it readable instead of stretched. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: var(--space-7);
  }
}
.portfolio-grid .case-card {
  max-width: 560px;
  width: 100%;
}
/* Single-child centering — when only one card is in the grid, center it. */
.portfolio-grid:has(> .case-card:only-child) {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.case-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 4px 4px 0 0 var(--text);
}
.case-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--text);
}
.case-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--text);
}

.case-cover {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 2px solid var(--border-strong);
  position: relative;
}
.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.case-card:hover .case-cover img {
  transform: scale(1.03);
}

/* Status stamp — top-right of cover, on dark plate */
.case-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--text);
  color: var(--secondary);
}
.case-stamp::before {
  content: "✓";
  color: var(--secondary);
  font-weight: 700;
}

/* Project tag — top-left of cover */
.case-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0.3rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
}

.case-body {
  padding: var(--space-5) var(--space-5) var(--space-6) var(--space-5);
}
.case-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3) 0;
}
.case-summary {
  margin: 0 0 var(--space-4) 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
/* Tech-tag chips on case cards — small mono labels above the title.
   Inspired by hugo.fyi's project-tag pattern. */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 var(--space-3) 0;
  list-style: none;
  padding: 0;
}
.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

/* Bracketed mono link — [ VISIT SITE → ] — rauno.me reference.
   Brackets slide outward on hover for a tiny game-UI flourish. */
.case-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0;
}
.case-link::before {
  content: "[";
  margin-right: 0.4rem;
  transition: transform var(--transition);
}
.case-link::after {
  content: "→ ]";
  margin-left: 0.4rem;
  transition: transform var(--transition);
}
.case-card:hover .case-link {
  color: var(--primary-deep);
}
.case-card:hover .case-link::before {
  transform: translateX(-3px);
}
.case-card:hover .case-link::after {
  transform: translateX(3px);
}

/* Empty state for /work when there are no cases */
.cases-empty {
  margin: var(--space-6) 0 0 0;
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--border-soft);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--text-muted);
}

/* ─── Patch notes — game-style changelog timeline ───────────
   Adds living-studio signal between work and closing. Mono-driven, dense. */
.patch-notes {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.patch-notes h2 {
  margin-bottom: var(--space-3);
}
.patch-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  max-width: 44rem;
}
.patch-list::before {
  /* Vertical timeline rail on the left. */
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: 1px;
  background: var(--border-soft);
}
.patch-entry {
  position: relative;
  padding-left: var(--space-5);
}
.patch-entry::before {
  /* Dot on the rail. */
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -3px;
  width: 7px;
  height: 7px;
  background: var(--bg);
  border: 1.5px solid var(--primary);
  border-radius: 50%;
}
.patch-entry:first-child::before {
  background: var(--primary);
}
.patch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  margin: 0 0 0.2rem 0;
}
.patch-version {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.patch-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.patch-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
}
.patch-desc {
  margin: 0.25rem 0 0 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Step list — process page ──────────────────────────────
   Numbered list with mono counter chip on a vertical rail. Heavier than
   .patch-list since this IS the page content, not a side-detail. */
.step-list {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  counter-reset: step-counter;
}
.step-entry {
  position: relative;
  padding-left: clamp(2.4rem, 5vw, 3.6rem);
  border-left: 2px solid var(--border-soft);
  padding-bottom: var(--space-4);
}
.step-entry::before {
  content: counter(step-counter, decimal-leading-zero);
  counter-increment: step-counter;
  position: absolute;
  top: -0.4rem;
  left: -1.1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--primary);
  background: var(--bg);
  padding: 0 0.55rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.step-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.step-title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.step-body {
  margin: 0 0 var(--space-3) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.step-body:last-child { margin-bottom: 0; }
.step-meta {
  margin-top: var(--space-3);
  padding: 0.4rem 0.6rem;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-left: 2px solid var(--primary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ─── Pillar grid — about page ──────────────────────────────
   Two-up on desktop, stack on mobile. Each pillar is title (h3) + body. */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-8);
  }
}
.pillar h3 {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.pillar h3::before {
  content: "//";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.pillar p {
  margin: 0 0 var(--space-3) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.pillar p:last-child { margin-bottom: 0; }

/* ─── FAQ list — contact page ────────────────────────────── */
.faq-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0 0;
  border-top: 1px solid var(--border-soft);
}
.faq-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-soft);
}
.faq-q {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.faq-q::before {
  content: "Q.";
  color: var(--primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85em;
  margin-right: 0.6rem;
  letter-spacing: 0.06em;
}
.faq-a {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Contact page — Direct Line panel rendered on cream bg
   (the talk-direct-line variant for the room-talk gradient is darker). */
.contact-direct-line {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--text);
  color: var(--text-inverse);
  border: 2px solid var(--text);
  box-shadow: 8px 8px 0 0 var(--primary);
  position: relative;
  max-width: 38rem;
}
.contact-direct-line::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: var(--secondary);
  border: 2px solid var(--text);
}
.contact-direct-line .talk-direct-label,
.contact-direct-line .talk-direct-email,
.contact-direct-line .talk-direct-meta {
  /* Reuses the existing .talk-direct-* styles which target var(--text-inverse)
     for the foreground — works on this dark panel too. */
}

/* Copy-clipboard toast — small "[Copied]" pill that pops up next to email links
   when clicked. rauno.me micro-interaction reference. */
.copy-toast {
  position: fixed;
  z-index: 500;
  padding: 0.4rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: 2px solid var(--text);
  box-shadow: 3px 3px 0 0 var(--primary);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.copy-toast.is-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* ─── Closing room (talk) — full-saturated FireRed→Pokéball ─ */
.room-talk {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 55%, var(--secondary) 100%);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}
.room-talk::before {
  /* Subtle dot grid — game-HUD texture without busyness. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--text-inverse) 18%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0;
  mask-image: linear-gradient(135deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, black 30%, black 70%, transparent 100%);
  pointer-events: none;
}
.room-talk .container {
  position: relative;
  max-width: var(--container-narrow);
  text-align: left;
}
.room-talk h2 {
  color: var(--text-inverse);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}
.room-talk h2::before {
  color: color-mix(in srgb, var(--text-inverse) 75%, transparent) !important;
}
.room-talk p {
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--text-inverse) 92%, transparent);
  max-width: 32em;
}
.room-talk .btn-primary {
  background: var(--text);
  color: var(--text-inverse);
  border-color: var(--text);
  box-shadow: 3px 3px 0 0 var(--bg);
}
.room-talk .btn-primary:hover {
  background: var(--text-inverse);
  color: var(--text);
  border-color: var(--text-inverse);
  box-shadow: 5px 5px 0 0 var(--bg);
}
.room-talk .btn-ghost {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}
.room-talk .btn-ghost:hover {
  background: var(--text-inverse);
  color: var(--text);
}

/* How-it-works strip — 4 micro-steps just above the closing CTAs.
   Addresses "what happens if I email?" without bloating the page. */
.how-it-works {
  margin: var(--space-6) 0 var(--space-7) 0;
  padding: var(--space-4) 0;
  border-top: 1px dashed color-mix(in srgb, var(--text-inverse) 28%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--text-inverse) 28%, transparent);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .how-it-works {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}
.how-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.how-step-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}
.how-step-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1.3;
}

/* Direct-line panel — visible email + reply-time trust signal,
   framed like a dialog box at the bottom of the talk room. */
.talk-direct-line {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--text) 92%, transparent);
  border: 2px solid var(--text);
  box-shadow: 6px 6px 0 0 var(--text-inverse);
  position: relative;
  max-width: 38rem;
}
.talk-direct-line::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: var(--secondary);
  border: 2px solid var(--text);
}
.talk-direct-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}
.talk-direct-label::before {
  content: "▸";
  color: var(--primary);
}
.talk-direct-email {
  display: block;
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  color: var(--text-inverse);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-inverse) 35%, transparent);
  text-underline-offset: 4px;
  word-break: break-all;
}
.talk-direct-email:hover {
  color: var(--text-inverse);
  text-decoration-color: var(--secondary);
}
.talk-direct-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
}
.talk-direct-meta strong {
  color: var(--text-inverse);
  font-weight: 600;
}

/* ─── Footer ──────────────────────────────────────────── */
.site-footer {
  margin-top: 0;
  padding: var(--space-8) 0 var(--space-7) 0;
  background: var(--text);
  color: var(--text-inverse);
  border-top: 1px solid var(--text);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: var(--space-7);
  }
}
.footer-brand .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-inverse);
}
.brand-mark-footer text { fill: var(--primary); }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text-inverse) 75%, transparent);
  text-decoration: none;
}
.footer-link:hover { color: var(--text-inverse); }
.footer-tagline {
  margin: 0.4rem 0 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
  max-width: 24ch;
}
.footer-direct {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-direct-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-inverse);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-inverse) 30%, transparent);
  text-underline-offset: 3px;
  word-break: break-all;
}
.footer-direct-link:hover {
  text-decoration-color: var(--secondary);
  color: var(--text-inverse);
}
.footer-legal,
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
}
.footer-legal-line,
.footer-id { margin: 0 0 var(--space-2) 0; }

/* System status bar — full-width strip at the very bottom of the footer.
   Game-HUD micro-detail with status pulse + patch date + copyright. */
.footer-status {
  margin-top: var(--space-7);
  padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--text-inverse) 14%, transparent);
}
.footer-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.footer-status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-inverse) 65%, transparent);
}
.footer-status-item strong {
  color: var(--text-inverse);
  font-weight: 600;
}
.footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .footer-status-dot { animation: none; }
}

/* ─── Cookie banner ─────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: var(--text);
  color: var(--text-inverse);
  border: 0;
  border-top: 2px solid var(--primary);
  z-index: 400;
}
.cookie-banner[open] { display: block; }
.cookie-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.cookie-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
}
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cookie-actions .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 3px 3px 0 0 var(--bg);
}
.cookie-actions .btn-primary:hover {
  box-shadow: 5px 5px 0 0 var(--bg);
}
.cookie-actions .btn-ghost {
  color: var(--text-inverse);
  border-color: color-mix(in srgb, var(--text-inverse) 50%, transparent);
}
.cookie-actions .btn-ghost:hover {
  background: var(--text-inverse);
  color: var(--text);
}

/* ─── Responsive tweaks ─────────────────────────────────── */
@media (max-width: 640px) {
  .nav-row { gap: var(--space-3); }
  .brand-name { font-size: 1rem; }
  .hero-stat-block {
    box-shadow: 5px 5px 0 0 var(--text);
  }
  .case-card {
    box-shadow: 3px 3px 0 0 var(--text);
  }
  .case-card:hover {
    box-shadow: 6px 6px 0 0 var(--text);
  }
  .about-portrait { max-width: 70%; }
}