:root {
  /* Color system */
  --bg: #191919;
  --surface: #202020;
  --surface-soft: #252525;
  --text: #f1f1ef;
  --muted: #c7c5bd;
  --muted-light: #aaa8a0;
  --accent: #d3d1cb;
  --accent-mid: #aaa7a0;
  --accent-soft: #2b2b29;
  --accent-border: #454541;
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);
  --success-border: rgba(34, 197, 94, 0.32);
  --border: rgba(255, 255, 255, 0.1);
  --dark-button: #2f2f2c;

  /* Canonical aliases used by both pages */
  --bg-soft: var(--surface-soft);
  --surface-2: var(--surface-soft);
  --surface-3: var(--accent-soft);
  --ink: var(--text);
  --ink-soft: var(--muted);
  --muted-2: var(--muted-light);
  --line: var(--border);
  --line-strong: #4b4b47;
  --card-line: rgba(255, 255, 255, 0.08);
  --accent-strong: var(--accent);

  /* Case surfaces and outlines */
  --portfolio-accent: #3268e5;
  --case-accent: var(--portfolio-accent);
  --case-card-bg: rgba(255, 255, 255, 0.035);
  --case-card-bg-strong: rgba(255, 255, 255, 0.052);
  --case-card-border: rgba(255, 255, 255, 0.065);
  --case-card-border-soft: rgba(255, 255, 255, 0.05);
  --case-chip-bg: rgba(255, 255, 255, 0.032);
  --case-chip-border: rgba(241, 241, 239, 0.1);
  --case-screen-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.022);
  --case-screen-border: rgba(255, 255, 255, 0.11);
  --case-callout-border: rgba(255, 255, 255, 0.38);
  --link-underline: rgba(170, 168, 160, 0.62);

  /* Typography from the case page */
  --font-sans: "Onest", "Inter", system-ui, sans-serif;
  --font-size-h1: clamp(42px, 3.7vw, 54px);
  --line-height-h1: 1.05;
  --font-size-h2: clamp(44px, 4vw, 52px);
  --line-height-h2: 1.1;
  --font-size-lead: clamp(19px, 1.45vw, 20px);
  --line-height-lead: 1.55;
  --font-size-body: 16.5px;
  --line-height-body: 1.65;
  --font-size-caption: 14px;
  --line-height-caption: 1.45;
  --font-size-eyebrow: 13px;
  --line-height-eyebrow: 1.35;
  --font-size-chip: 13.5px;
  --font-size-mini-chip: 11px;
  --font-size-card-title: clamp(36px, 2.7vw, 40px);
  --font-size-card-title-mobile: 30px;
  --line-height-card-title: 1.15;

  /* Spacing and readable width */
  --space-section: 150px;
  --space-block: 60px;
  --space-inner: 20px;
  --case-copy-width: 68ch;

  /* Radius and media-container system */
  --radius: 8px;
  --radius-pill: 999px;
  --case-card-radius: 14px;
  --case-panel-radius: 18px;
  --case-screen-radius: 20px;
  --case-screen-inner-radius: 16px;
  --case-card-padding: 16px;
  --case-screen-padding: clamp(24px, 2.4vw, 32px);
  --case-screen-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
  --case-cover-radius: 24px;
  --case-cover-padding: clamp(32px, 3.2vw, 40px);
  --case-cover-desktop-width: 84%;
  --case-cover-mobile-width: 21%;
  --case-cover-desktop-radius: 16px;
  --case-cover-mobile-radius: 20px;
  --telderi-mockup-desktop-radius: 16px;
  --telderi-mockup-mobile-radius: 20px;
  --telderi-mockup-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --case-cover-screen-border: rgba(255, 255, 255, 0.16);
  --case-cover-screen-shadow: 0 24px 64px rgba(0, 7, 20, 0.34);
  --preview-content-max-height: 280px;

  /* Shared controls */
  --button-height: 48px;
  --button-radius: var(--radius-pill);
  --button-padding-inline: 22px;

  /* Page layout */
  --container: 1180px;
  --sidebar: 388px;
  --intro-sticky-top: clamp(140px, 18vh, 160px);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Case reading rhythm: sections > internal groups > local label/copy pairs.
   Prose flow sits within an internal group; emphasis is reserved for a key section. */
.case-page {
  --case-rhythm-section: 96px;
  --case-rhythm-internal: 24px;
  --case-rhythm-flow: 16px;
  --case-rhythm-local: 8px;
  --case-rhythm-emphasis: 8px;
}

.case-page.guider-page {
  --space-section: var(--case-rhythm-section);
}

@media (max-width: 1020px) {
  :root {
    --sidebar: 340px;
  }
}

@media (max-width: 900px) {
  .case-page {
    --case-rhythm-section: 88px;
    --space-section: 96px;
    --space-block: 42px;
    --space-inner: 16px;
  }

  .case-page.guider-page {
    --space-section: var(--case-rhythm-section);
  }

  .portfolio-feed {
    --space-inner: 16px;
  }
}

@media (max-width: 620px) {
  .case-page {
    --case-rhythm-section: 64px;
    --case-rhythm-internal: 20px;
    --case-rhythm-flow: 12px;
    --case-rhythm-local: 6px;
    --case-rhythm-emphasis: 4px;
    --space-section: 76px;
    --space-block: 34px;
    --space-inner: 14px;
  }

  .case-page.guider-page {
    --space-section: var(--case-rhythm-section);
  }

  .portfolio-feed {
    --space-inner: 14px;
    --case-screen-padding: 10px;
    --case-screen-radius: 16px;
    --case-screen-inner-radius: 12px;
  }
}