/* Bundled fonts: pinned versions and licenses in assets/fonts/README.md. */
@font-face {
  font-family: "D2Coding";
  src: url("../assets/fonts/D2Coding-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "D2Coding";
  src: url("../assets/fonts/D2Coding-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono NF";
  src: url("../assets/fonts/JetBrainsMonoNerdFont-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* JSG shared palette. Only this file owns literal UI colors. */
:root {
  --media-play: ">";
  --media-pause: "‖";
  --palette-cyan: #04f8fd; /* optional CI accent */
  --palette-blue: #226cf5;
  --palette-navy: #001d6c;
  --palette-yellow: #e8b51b;
  --palette-red: #dc2626;
  --palette-gray-light: #f4f4f4;
  --palette-gray-medium: #d4d4d4;
  --palette-gray-dark: #656565;
  --palette-black: #000000;
  --palette-white: #ffffff;

  /* Roles reference the same palette on the home and detail pages. */
  --bg-page: var(--palette-white);
  --bg-soft: var(--palette-gray-light);
  --shell-bg: var(--palette-navy);
  --shell-depth: var(--palette-navy);
  --surface-main: var(--palette-white);
  --surface-muted: var(--palette-gray-medium);
  --text-strong: var(--palette-black);
  --text-inverse: var(--palette-white);
  --accent-cool: var(--palette-cyan);
  --brand-royal-blue: var(--palette-blue);
  --brand-deep-blue: var(--palette-navy);
  --base-white: var(--palette-white);
  --text-main: var(--palette-black);
  --text-muted: var(--palette-gray-dark);
  --border-light: var(--palette-gray-medium);
  --accent-royal-purple: var(--palette-blue);
  --accent-crimson-red: var(--palette-red);
  --accent-cyan: var(--palette-cyan);
  --accent-swedish-yellow: var(--palette-yellow);
  --action-primary-bg: var(--palette-blue);
  --action-primary-text: var(--palette-blue);
  --action-disabled: var(--palette-gray-dark);
  --portfolio-title-bg: var(--palette-blue);
  --inverse-text-stroke: 0.22px var(--palette-navy);
  --notice-title-bg: var(--palette-navy);
  --board-control-hover: color-mix(in srgb, currentColor 10%, transparent);

  /* Directional navigation: JetBrains Mono Nerd Font angle glyphs. */
  --chevron-left: "\f104";
  --chevron-right: "\f105";
  --chevron-up: "\f106";
  --chevron-down: "\f107";
  --nav-chevron-size: 18px;
  --nav-chevron-control-size: 20px;

  /* Typography */
  --font-family-base: "JetBrainsMono NF", "D2Coding", monospace;
  --font-family-title: var(--font-family-base);

  --h1-size: 28px;
  --h1-weight: 700;

  --h2-size: 22px;
  --h2-weight: 600;

  --h3-size: 18px;
  --h3-weight: 600;

  --body-size: 18px;
  --body-weight: 400;

  --caption-size: 13px;
  --section-title-size: clamp(40px, 5.8vw, 80px);
  --section-title-leading: 1.08;
  --section-title-tracking: -0.045em;
  --subheading-size: 40px;
  --subheading-leading: 1.4;
  --subheading-tracking: -0.03em;
  --section-band-space: 72px;
  --section-lead-size: 18px;
  --section-lead-leading: 1.85;

  /* Dimensions */
  --header-height: 116px;
  --site-width: 1200px;
  --site-gutter: max(clamp(24px, 5.5vw, 88px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max-width-desktop: 800px;
}

@media (max-width: 699px) {
  :root {
    --section-title-size: clamp(40px, 10vw, 64px);
    --section-band-space: 48px;
    --section-lead-size: 17px;
  }
}