/*
 * Calvin Hickey portfolio stylesheet.
 *
 * Cascade layers keep specificity predictable: later layers win regardless
 * of selector weight, so theme overrides never need !important.
 */
@layer tokens, base, layout, components, themes, utilities;

/* ===== Fonts (self-hosted, Latin subset; see site/fonts/*-OFL.txt) ===== */
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces.woff2') format('woff2');
}

@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2');
}

/* Cross-fade between pages (and slide the switcher pill) where browsers support it */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Mostly dark theme: browsers skip these downloads until a rule uses them
   (Permanent Marker also hand-letters the About collage captions in both themes) */
@font-face {
  font-family: Anton;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton.woff2') format('woff2');
}

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/permanent-marker.woff2') format('woff2');
}

/* ===== Tokens: every color, font and size the site uses ===== */
@layer tokens {
  :root {
    color-scheme: light;

    /* Color */
    --color-bg: #f5f2eb;
    --color-surface: #fbf9f4;
    --color-ink: #18231f;
    --color-ink-muted: #4a5752;
    --color-line: #d9d4c8;
    --color-accent: #e9693d; /* decorative and large text only */
    --color-accent-text: #b3441b; /* 5:1 on --color-bg for small text */
    --color-on-accent: #f5f2eb;
    --color-tint-1: #b8d9d4;
    --color-tint-2: #f2c9b4;
    --color-tint-3: #b9c8a5;
    --color-focus: #b3441b;

    /* Type */
    --font-display: 'Fraunces', georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-label: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --text-h2: clamp(2.2rem, 1.4rem + 3vw, 3.75rem);
    --text-h1: clamp(3rem, 1.6rem + 6vw, 6.5rem);
    --tracking-label: 0.1em;

    /* Space and shape */
    --gutter: clamp(16px, 5vw, 64px);
    --space-section: clamp(72px, 10vw, 128px);
    --max-width: 1160px;
    --radius: 4px;
    --header-height: 72px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 200ms;

    /* Faint paper grain, drawn with an SVG noise filter */
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /*
   * Dark theme: neon tubes and spray paint on a concrete wall, matching the
   * banner on github.com/00Calvin00. The theme is resolved by an inline
   * script in <head>, so it only needs this one selector.
   */
  :root[data-theme='dark'] {
    color-scheme: dark;

    --color-bg: #050805;
    --color-surface: #0c120c;
    --color-ink: #e8f5e3;
    --color-ink-muted: #a7bfa2;
    --color-line: rgb(57 255 20 / 18%);
    --color-accent: #39ff14;
    --color-accent-text: #39ff14;
    --color-on-accent: #050805;
    --color-neon-core: #eaffe0;
    --color-pink: #ff4fa0;
    --color-cyan: #22e6ff;
    --color-tint-1: #0b2326;
    --color-tint-2: #26091a;
    --color-tint-3: #0f210b;
    --color-focus: #ff4fa0;
    --font-display: 'Anton', impact, 'Arial Narrow Bold', sans-serif;
    --font-tag: 'Permanent Marker', 'Comic Sans MS', cursive;
    --font-label: ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
    --glow-green:
      0 0 4px var(--color-neon-core), 0 0 12px var(--color-accent), 0 0 32px var(--color-accent),
      0 0 64px rgb(57 255 20 / 45%);
    --glow-pink: 0 0 6px rgb(255 79 160 / 90%), 0 0 22px rgb(255 79 160 / 60%);
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --drips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ff4fa0' d='M0 0h120v4c-3 0-4 2-4 5s-2 4-3 0-1-5-5-5H88c-2 0-2 3-2 9s-3 6-3 0 0-9-3-9H52c-3 0-3 2-3 4s-2 3-2 0-1-4-4-4H20c-2 0-3 3-3 12s-3 9-3 0-1-12-4-12H0z'/%3E%3C/svg%3E");
  }
}

/* ===== Base: element defaults ===== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    color: var(--color-ink);
    background-color: var(--color-bg);
    background-image: var(--texture);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;

    /* Decorative layers may bleed past the edge; never let them cause sideways scroll */
    overflow-x: clip;
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  h1,
  h2,
  h3,
  p,
  ul,
  ol {
    margin-top: 0;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    text-wrap: balance;
  }

  h1 em,
  h2 em {
    color: var(--color-accent);
    font-style: italic;
  }

  p {
    text-wrap: pretty;
  }

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

  button {
    font: inherit;
    color: inherit;
  }

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

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

  /* Author display rules (grid, flex) would otherwise override the hidden attribute */
  [hidden] {
    display: none !important;
  }

  /* Sprite icons take the current text color and scale with font size */
  .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentcolor;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ===== Layout: page frame and section rhythm ===== */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--max-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(10px);
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--header-height);
  }

  .section {
    border-top: 1px solid var(--color-line);
    padding-block: var(--space-section);
  }

  .section-header {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr;
    gap: 24px 48px;
    align-items: baseline;
    margin-bottom: clamp(40px, 6vw, 72px);
  }

  .site-footer {
    border-top: 1px solid var(--color-line);
    padding-block: 32px 48px;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .footer-inner p {
    margin: 0;
  }

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
  }

  @media (width <= 720px) {
    .section-header {
      grid-template-columns: 1fr;
    }
  }
}

/* ===== Components ===== */
@layer components {
  /* --- Skip link: hidden until focused --- */
  .skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 16px;
    color: var(--color-on-accent);
    background: var(--color-ink);
    font-size: var(--text-sm);
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }

  /* --- Header and navigation --- */
  .logo {
    margin-right: auto;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .logo span {
    color: var(--color-accent);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  .nav-links a {
    position: relative;
    text-decoration: none;
  }

  .nav-links a:not(.button)::after {
    content: '';
    position: absolute;
    inset: auto 0 -4px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease-out);
  }

  .nav-links a:not(.button):hover::after {
    transform: scaleX(1);
  }

  /* --- Mobile menu: only takes over when JavaScript is running (html.js, set in js/head.js) --- */
  .menu-toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .menu-toggle .icon-close,
  .menu-toggle[aria-expanded='true'] .icon-open {
    display: none;
  }

  .menu-toggle[aria-expanded='true'] .icon-close {
    display: block;
  }

  @media (width <= 720px) {
    .js .menu-toggle {
      display: grid;
    }

    .js .site-nav .nav-links {
      position: absolute;
      inset: 100% 0 auto;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 8px var(--gutter) 24px;
      border-bottom: 1px solid var(--color-line);
      background: var(--color-bg);
      background-image: var(--texture);
      font-size: var(--text-lg);
    }

    .js .site-nav .nav-links a:not(.button) {
      display: block;
      padding-block: 14px;
      border-bottom: 1px solid var(--color-line);
    }

    .js .site-nav .nav-links .button {
      justify-content: center;
      width: 100%;
      margin-top: 20px;
    }

    .js .site-nav [aria-expanded='true'] + .nav-links {
      display: flex;
    }

    /* Without JavaScript the links simply wrap below the logo */
    :root:not(.js) .site-nav .nav-links {
      flex-wrap: wrap;
      gap: 8px 18px;
    }

    .header-inner {
      flex-wrap: wrap;
    }

    .theme-toggle {
      width: 44px;
      height: 44px;
      justify-content: center;
      padding: 0;
    }

    .theme-toggle span[aria-hidden] {
      display: none;
    }

    [data-theme='dark'] .theme-toggle span[aria-hidden] {
      display: none;
    }
  }

  /* --- Theme toggle: the accessible name stays "Dark mode"; aria-pressed carries state --- */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition:
      border-color var(--duration),
      box-shadow var(--duration);
  }

  .theme-toggle:hover {
    border-color: var(--color-ink);
  }

  .theme-toggle .when-dark,
  [data-theme='dark'] .theme-toggle .when-light {
    display: none;
  }

  [data-theme='dark'] .theme-toggle .when-dark {
    display: inline;
  }

  [data-theme='dark'] .theme-toggle .icon.when-dark {
    display: block;
  }

  /* --- Buttons and links --- */
  .button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius);
    color: var(--color-bg);
    background: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition:
      background var(--duration),
      border-color var(--duration),
      color var(--duration),
      transform var(--duration) var(--ease-out);
  }

  .button:hover {
    border-color: var(--color-accent-text);
    background: var(--color-accent-text);
    transform: translateY(-2px);
  }

  .button-small {
    padding: 8px 16px;
  }

  .button-ghost {
    color: var(--color-ink);
    background: transparent;
  }

  .button-ghost:hover {
    color: var(--color-on-accent);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid currentcolor;
    padding-bottom: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
  }

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

  .text-link .icon {
    font-size: 0.75em;
  }

  /* --- Small uppercase labels --- */
  .eyebrow,
  .section-label,
  .kicker {
    margin-bottom: 0;
    color: var(--color-ink-muted);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

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

  .section-label {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-label span {
    color: var(--color-accent-text);
  }

  .section-header h2 {
    max-width: 18ch;
    margin-bottom: 0;
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
  }

  /* --- "What are you here for?" switcher under the intro, linking the three pages --- */
  .mode-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-block: 8px 28px;
  }

  .mode-switch p {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .mode-switch ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    list-style: none;
  }

  .mode-switch a {
    display: block;
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration) var(--ease-out);
  }

  .mode-switch a:hover {
    background: var(--color-tint-2);
  }

  /* The filled pill; named so it slides between pages during the view transition */
  .mode-switch a[aria-current='page'] {
    background: var(--color-ink);
    color: var(--color-bg);
    view-transition-name: mode-indicator;
  }

  @media (width <= 420px) {
    .mode-switch a {
      padding-inline: 12px;
    }
  }

  /* --- Hero --- */
  .hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.75fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: center;
    padding-block: clamp(56px, 9vw, 120px) clamp(72px, 10vw, 136px);
  }

  /* Giant spray-painted tag behind the hero; shown only in the dark theme */
  .hero-tag {
    display: none;
    position: absolute;
    top: 4%;
    right: 18%;
    z-index: -1;
    color: rgb(255 79 160 / 16%);
    font-family: var(--font-tag, cursive);
    font-size: clamp(7rem, 22vw, 18rem);
    line-height: 1;
    white-space: nowrap;
    text-shadow:
      0 0 18px rgb(255 79 160 / 35%),
      0 0 60px rgb(255 79 160 / 20%);
    transform: rotate(-9deg);
    pointer-events: none;
    user-select: none;
  }

  .hero h1 {
    margin-block: 20px 28px;
    font-size: var(--text-h1);
    font-variation-settings: 'opsz' 144;
    letter-spacing: -0.035em;
  }

  .hero-intro {
    max-width: 52ch;
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
  }

  .status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block: 4px 0;
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* Pulses a few times on load, then holds still (WCAG 2.2.2) */
  .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2f9e44;
    box-shadow: 0 0 0 0 rgb(47 158 68 / 50%);
    animation: pulse 1.6s ease-out 3;
  }

  @keyframes pulse {
    to {
      box-shadow: 0 0 0 10px rgb(47 158 68 / 0%);
    }
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 36px;
  }

  .hero-portrait {
    position: relative;
    margin: 0;
  }

  /* Offset color block behind the photo, like a print mount */
  .hero-portrait::before {
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    border-radius: var(--radius);
    background: var(--color-tint-2);
  }

  .hero-portrait img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
  }

  /* Two-sided card: clicking spins it on a vertical pivot to reveal the back photo */
  .portrait-card {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    cursor: pointer;
    transform-style: preserve-3d;
  }

  .portrait-face {
    display: block;
    backface-visibility: hidden;
  }

  .portrait-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
  }

  .portrait-card.is-spinning {
    animation: portrait-spin 2.6s ease-in-out;
  }

  /* Reduced motion: main.js swaps to the back instantly instead of spinning */
  .portrait-card.is-flipped {
    transform: rotateY(180deg);
  }

  @keyframes portrait-spin {
    0% {
      transform: perspective(1200px) rotateY(0);
    }

    30%,
    70% {
      transform: perspective(1200px) rotateY(180deg);
    }

    100% {
      transform: perspective(1200px) rotateY(360deg);
    }
  }

  .hero-portrait figcaption {
    position: absolute;
    right: -44px;
    bottom: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  /* --- About ---
     The scrapbook photos are grid items too, scattered around the text by named area */
  .about-body {
    display: grid;
    grid-template-areas:
      'rec copy copy'
      'climbing copy copy'
      'drums cosplay camera';
    grid-template-columns: minmax(140px, 1fr) 1.5fr 1.5fr;
    gap: 48px;
  }

  @media (width > 1080px) {
    .about-body {
      grid-template-areas:
        'rec copy drums'
        'climbing copy camera'
        'climbing cosplay camera';
      grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr) minmax(200px, 1fr);
    }
  }

  .about-copy {
    grid-area: copy;
    max-width: 62ch;
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
  }

  .about-copy strong {
    color: var(--color-ink);
    font-weight: 600;
  }

  .recognition {
    grid-area: rec;
    align-self: start;
    padding: 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: var(--text-sm);
  }

  .recognition h3 {
    margin-bottom: 12px;
  }

  .recognition ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .recognition li {
    padding-left: 16px;
    border-left: 2px solid var(--color-accent);
    line-height: 1.45;
  }

  .recognition strong {
    font-weight: 600;
  }

  /* --- Experience timeline --- */
  .timeline {
    display: grid;
    gap: clamp(40px, 6vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timeline-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr;
    gap: 16px 48px;
  }

  .timeline-meta {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .timeline-meta .kicker {
    margin-bottom: 4px;
    color: var(--color-accent-text);
  }

  .timeline-body {
    position: relative;
    padding-left: 32px;
    border-left: 1px solid var(--color-line);
  }

  /* Dot on the line, level with the role title */
  .timeline-body::before {
    content: '';
    position: absolute;
    top: 0.55em;
    left: -7px;
    width: 13px;
    height: 13px;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }

  .timeline-body h3 {
    margin-bottom: 6px;
    font-size: var(--text-h3);
  }

  .timeline-org {
    margin-bottom: 16px;
    font-weight: 600;
  }

  .timeline-points {
    display: grid;
    gap: 8px;
    max-width: 68ch;
    margin: 0;
    padding-left: 1.1em;
    color: var(--color-ink-muted);
  }

  .timeline-points li::marker {
    color: var(--color-accent);
  }

  /* --- Skills --- */
  .skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 40px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .skill-group {
    border-top: 3px solid var(--color-accent);
    padding-top: 20px;
  }

  .skill-group h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 1.5rem;
  }

  .skill-group .icon {
    color: var(--color-accent);
    font-size: 1.1rem;
  }

  .skill-group p {
    margin-bottom: 0;
    color: var(--color-ink-muted);
  }

  /* --- Projects --- */
  .project-list {
    display: grid;
    gap: clamp(56px, 8vw, 104px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .project-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
  }

  .project-card:nth-child(even) .project-media {
    order: 2;
  }

  .project-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    background: var(--project-tint, var(--color-tint-1));
  }

  .project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
  }

  .project-card:hover .project-media img {
    transform: scale(1.03);
  }

  .project-tint-3 {
    --project-tint: var(--color-tint-3);
  }

  .project-number {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 2px;
    color: var(--color-ink);
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  /* Hubble has no screenshot yet, so its card gets a drawn "Genre Nebula":
     layered radial gradients for the gas clouds and a tiled star field. */
  .nebula {
    background:
      radial-gradient(circle at 30% 40%, rgb(255 120 170 / 55%), transparent 38%),
      radial-gradient(circle at 70% 60%, rgb(80 200 255 / 45%), transparent 40%),
      radial-gradient(circle at 55% 25%, rgb(255 180 90 / 35%), transparent 30%), #0b1026;
  }

  .nebula::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 20px 30px, #fff, transparent),
      radial-gradient(1px 1px at 90px 80px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 150px 20px, #fff, transparent),
      radial-gradient(1px 1px at 60px 140px, #fff, transparent),
      radial-gradient(1px 1px at 170px 120px, #fff, transparent);
    background-size: 200px 160px;
    opacity: 0.8;
  }

  .nebula-art {
    position: relative;
    height: 100%;
    color: #fff;
  }

  .nebula-word {
    position: absolute;
    inset: 50% auto auto 50%;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-style: italic;
    text-shadow: 0 0 30px rgb(255 255 255 / 45%);
    transform: translate(-50%, -50%);
  }

  .genre {
    position: absolute;
    padding: 2px 10px;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    background: rgb(11 16 38 / 55%);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    transition: transform 600ms var(--ease-out);
  }

  .genre-1 {
    top: 18%;
    left: 14%;
  }

  .genre-2 {
    top: 22%;
    right: 12%;
  }

  .genre-3 {
    bottom: 18%;
    left: 22%;
  }

  .genre-4 {
    right: 20%;
    bottom: 14%;
  }

  .genre-5 {
    top: 46%;
    left: 6%;
  }

  .genre-6 {
    top: 58%;
    right: 6%;
  }

  /* Genres drift outward on hover, a nod to Hubble's spatial navigation */
  .project-card:hover .genre-1,
  .project-card:hover .genre-5 {
    transform: translate(-8px, -6px);
  }

  .project-card:hover .genre-2,
  .project-card:hover .genre-6 {
    transform: translate(8px, -6px);
  }

  .project-card:hover .genre-3 {
    transform: translate(-6px, 8px);
  }

  .project-card:hover .genre-4 {
    transform: translate(8px, 6px);
  }

  .project-body h3 {
    margin-block: 10px 14px;
    font-size: var(--text-h3);
  }

  .project-body > p:not(.kicker, .project-links) {
    color: var(--color-ink-muted);
  }

  .project-links {
    margin: 22px 0 0;
  }

  .more-title {
    margin-block: clamp(64px, 9vw, 112px) 24px;
  }

  .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mini-card {
    position: relative;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition:
      transform var(--duration) var(--ease-out),
      box-shadow var(--duration);
  }

  .mini-card:hover {
    box-shadow: 6px 6px 0 var(--color-tint-2);
    transform: translate(-3px, -3px);
  }

  .mini-card h4 {
    margin-block: 8px 10px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.1;
  }

  .mini-card > p:not(.kicker) {
    margin-bottom: 0;
    color: var(--color-ink-muted);
  }

  /* --- Now --- */
  .now-body {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 3fr;
    gap: 16px 48px;
  }

  .now-list {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .now-list > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 4px 24px;
    padding-block: 18px;
    border-bottom: 1px solid var(--color-line);
  }

  .now-list > div:first-child {
    padding-top: 0;
  }

  .now-list dt {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
  }

  .now-list dd {
    margin: 0;
    font-size: var(--text-lg);
  }

  /* --- Off the clock --- */
  .section-intro {
    max-width: 52ch;
    margin: calc(-1 * clamp(16px, 3vw, 40px)) 0 clamp(32px, 5vw, 56px);
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
  }

  .interest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Pinned paper notes: each card sits at a slight tilt under a strip of tape */
  .interest {
    --tilt: -1.2deg;

    position: relative;
    padding: 28px 22px 22px;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    box-shadow: 0 10px 20px -16px rgb(24 35 31 / 45%);
    transform: rotate(var(--tilt));
    transition:
      transform 300ms var(--ease-out),
      box-shadow 300ms;
  }

  .interest:nth-child(3n + 2) {
    --tilt: 1deg;
  }

  .interest:nth-child(4n + 3) {
    --tilt: -0.4deg;
  }

  .interest:nth-child(5n + 4) {
    --tilt: 1.6deg;
  }

  @media (width > 560px) {
    .interest-wide {
      grid-column: span 2;
    }
  }

  .interest::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 72px;
    height: 20px;
    background: rgb(233 105 61 / 28%);
    transform: translateX(-50%) rotate(-3deg);
  }

  .interest:hover {
    box-shadow: 0 18px 30px -18px rgb(24 35 31 / 55%);
    transform: rotate(0) translateY(-4px);
  }

  .interest > .icon {
    margin-bottom: 14px;
    color: var(--color-accent);
    font-size: 1.6rem;
  }

  .interest h3 {
    margin-bottom: 8px;
    font-size: 1.35rem;
  }

  .interest p {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .interest-photo {
    width: calc(100% + 22px);
    max-width: none;
    margin: -14px -11px 16px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* --- About scrapbook: photos on torn paper, taped on (chained up in the dark theme).
     Each photo picks its grid area in .about-body; --drop staggers them vertically. --- */
  .collage-item {
    --tilt: -3deg;
    --tape-tilt: -4deg;
    --drop: 0px;

    position: relative;
    align-self: start;
    width: min(100%, 200px);
    margin-top: var(--drop);
    transform: rotate(var(--tilt));
    transition: transform 300ms var(--ease-out);
  }

  .collage-drums {
    grid-area: drums;
    justify-self: end;
  }

  .collage-climbing {
    --tilt: 2.5deg;
    --tape-tilt: 6deg;
    --drop: 24px;

    grid-area: climbing;
    justify-self: center;
    width: min(100%, 190px);
  }

  .collage-cosplay {
    --tilt: -1.5deg;
    --tape-tilt: -2deg;
    --drop: 8px;

    grid-area: cosplay;
    justify-self: center;
    width: min(100%, 300px);
  }

  .collage-camera {
    --tilt: 3.5deg;
    --tape-tilt: 3deg;
    --drop: 40px;

    grid-area: camera;
    justify-self: start;
    width: min(100%, 210px);
  }

  .collage-item:hover {
    transform: rotate(0) translateY(-4px);
  }

  /* The filter shadow follows the torn paper shape instead of a rectangle */
  .collage-photo {
    position: relative;
    margin: 0;
    padding: 12px 12px 0;
    filter: drop-shadow(0 10px 12px rgb(24 35 31 / 28%));
  }

  /* Torn paper: the mask is inline because mask images are fetched with CORS, and a data URI never fails it */
  .collage-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fffdf8;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L3.8 2.8L7.7 0.9L11.5 0.6L15.4 2.2L19.2 1.6L23.1 1L26.9 2.3L30.8 2.3L34.6 1.6L38.5 2.1L42.3 1.9L46.2 2.5L50 0.7L53.8 1.1L57.7 2.1L61.5 2.1L65.4 0.2L69.2 2.1L73.1 1.4L76.9 2.8L80.8 2.4L84.6 0.4L88.5 1.5L92.3 2.8L96.2 2.1L100 1.9L98.3 3.8L97.3 7.7L97.3 11.5L98.9 15.4L99 19.2L97.5 23.1L99 26.9L99.5 30.8L99.1 34.6L98.7 38.5L99.1 42.3L97.2 46.2L98.3 50L97.8 53.8L97.4 57.7L99.8 61.5L99.2 65.4L98.3 69.2L98.5 73.1L98.7 76.9L99.4 80.8L97.3 84.6L99.8 88.5L98.9 92.3L99 96.2L98 100L96.2 97.2L92.3 98.5L88.5 99.5L84.6 98.8L80.8 99.1L76.9 98.9L73.1 98.7L69.2 99L65.4 98.4L61.5 98.2L57.7 99.3L53.8 97.3L50 98.6L46.2 97.4L42.3 98.1L38.5 98.1L34.6 98.5L30.8 98.5L26.9 97.9L23.1 97.2L19.2 98.8L15.4 97.9L11.5 99.2L7.7 98.2L3.8 98.9L0 99L1.2 96.2L2.4 92.3L2.6 88.5L0.3 84.6L2.5 80.8L0.2 76.9L1.2 73.1L0.5 69.2L0.2 65.4L3 61.5L0.7 57.7L1.9 53.8L0.4 50L1.4 46.2L1.8 42.3L0.4 38.5L2.8 34.6L2.7 30.8L2.7 26.9L2.7 23.1L2.7 19.2L2.3 15.4L0.8 11.5L0 7.7L0.7 3.8Z'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
  }

  /* Mirror some sheets so no two torn edges match */
  .collage-climbing .collage-photo::before,
  .collage-camera .collage-photo::before {
    scale: -1 1;
  }

  .collage-photo::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 84px;
    height: 24px;
    background: rgb(233 105 61 / 28%);
    transform: translateX(-50%) rotate(var(--tape-tilt));
  }

  .collage-photo figcaption {
    padding: 10px 4px 16px;
    color: #2b2b2b;
    font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
  }

  @media (width <= 720px) {
    .collage-item {
      justify-self: center;
      width: 100%;
    }
  }

  /* --- Drum groove sequencer --- */
  .groove {
    margin-top: clamp(56px, 8vw, 96px);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .groove-intro {
    max-width: 60ch;
  }

  .groove-intro h3 {
    margin-bottom: 8px;
    font-size: var(--text-h3);
  }

  .groove-intro p {
    color: var(--color-ink-muted);
  }

  .groove-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-block: 24px;
  }

  .groove-controls .icon-stop,
  .is-playing .icon-play {
    display: none;
  }

  .is-playing .icon-stop {
    display: block;
  }

  .groove-tempo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .groove-tempo input {
    width: 140px;
    accent-color: var(--color-accent-text);
  }

  .groove-tempo output {
    min-width: 3ch;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .groove-reset {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: none;
    cursor: pointer;
  }

  .groove-grid {
    display: grid;
    gap: 10px;
  }

  .groove-row {
    display: grid;
    grid-template-columns: 6.5rem repeat(16, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
  }

  .groove-voice {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .step {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-bg);
    cursor: pointer;
    transition:
      background 120ms,
      transform 120ms;
  }

  .beat-alt .step {
    background: color-mix(in srgb, var(--color-line) 55%, var(--color-bg));
  }

  .step:hover {
    border-color: var(--color-ink-muted);
  }

  .voice-hh .step[aria-pressed='true'] {
    border-color: #4f8f88;
    background: var(--color-tint-1);
  }

  .voice-sn .step[aria-pressed='true'] {
    border-color: var(--color-accent-text);
    background: var(--color-accent);
  }

  .voice-bd .step[aria-pressed='true'] {
    border-color: var(--color-ink);
    background: var(--color-ink);
  }

  .step.is-current {
    box-shadow: 0 0 0 2px var(--color-accent-text);
    transform: scale(1.12);
  }

  .groove-notation {
    margin-top: 24px;
    font-size: var(--text-sm);
  }

  .groove-notation summary {
    width: fit-content;
    font-weight: 600;
    cursor: pointer;
  }

  .groove-notation pre {
    overflow-x: auto;
    padding: 16px;
    border-radius: var(--radius);
    color: var(--color-bg);
    background: var(--color-ink);
    font-size: var(--text-sm);
  }

  .groove-notation p {
    color: var(--color-ink-muted);
  }

  @media (width <= 560px) {
    .groove-row {
      grid-template-columns: repeat(16, minmax(0, 1fr));
      gap: 3px;
    }

    .groove-voice {
      grid-column: 1 / -1;
    }
  }

  /* --- 404 page --- */
  .not-found {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
  }

  .not-found h1 {
    margin-block: 16px 24px;
    font-size: var(--text-h1);
    letter-spacing: -0.035em;
  }

  .not-found .hero-tag {
    top: 12%;
    right: 8%;
  }

  /* Placeholder pages (photography, drums) reuse the 404 layout, minus the full-screen height */
  .coming-soon {
    min-height: 0;
    padding-block: clamp(56px, 10vw, 136px);
  }

  /* --- Scroll reveal: only hides content once main.js has confirmed it can reveal it --- */
  @media (prefers-reduced-motion: no-preference) {
    .reveal-ready .reveal {
      opacity: 0;
      translate: 0 24px;
      transition:
        opacity 700ms var(--ease-out),
        translate 700ms var(--ease-out);
    }

    .reveal-ready .reveal.is-visible {
      opacity: 1;
      translate: none;
    }
  }

  /* --- Contact --- */
  .contact-inner {
    position: relative;
    text-align: center;
  }

  .contact h2 {
    max-width: 16ch;
    margin: 0 auto 24px;
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
  }

  .contact-copy {
    max-width: 58ch;
    margin-inline: auto;
    color: var(--color-ink-muted);
    font-size: var(--text-lg);
  }

  .contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
  }

  /* Rubber "open" stamp in light mode; becomes a neon sign in dark mode */
  .open-sign {
    display: inline-block;
    margin-bottom: 28px;
    padding: 6px 18px;
    border: 3px solid var(--color-accent-text);
    border-radius: 6px;
    color: var(--color-accent-text);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transform: rotate(-5deg);
    opacity: 0.9;
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }

  .tag-list li {
    padding: 3px 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 500;
  }

  @media (width <= 720px) {
    .hero {
      grid-template-columns: 1fr;
    }

    .hero-portrait {
      width: min(320px, 78%);
    }

    .about-body {
      grid-template-areas:
        'copy copy'
        'rec rec'
        'drums climbing'
        'cosplay camera';
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 18px;
    }

    .timeline-item,
    .now-body,
    .now-list > div {
      grid-template-columns: 1fr;
    }

    .project-card {
      grid-template-columns: 1fr;
    }

    .project-card:nth-child(even) .project-media {
      order: 0;
    }
  }
}

/* ===== Themes: dark "neon and spray paint" overrides ===== */
@layer themes {
  [data-theme='dark'] body {
    transition: background-color 300ms;
  }

  /* Wall: concrete grain, CRT scanlines and two colored light spills.
     A fixed pseudo-element avoids the repaint cost of background-attachment: fixed. */
  [data-theme='dark'] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(60rem 40rem at 90% -10%, rgb(255 79 160 / 13%), transparent 60%),
      radial-gradient(50rem 40rem at -10% 110%, rgb(57 255 20 / 9%), transparent 60%),
      repeating-linear-gradient(to bottom, rgb(57 255 20 / 3.5%) 0 1px, transparent 1px 4px);
  }

  [data-theme='dark'] h1,
  [data-theme='dark'] h2,
  [data-theme='dark'] h3 {
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.98;
    text-transform: uppercase;
  }

  /* Emphasis becomes a hand-sprayed pink tag over the neon lettering */
  [data-theme='dark'] h1 em,
  [data-theme='dark'] h2 em {
    display: inline-block;
    color: var(--color-pink);
    font-family: var(--font-tag);
    font-size: 0.82em;
    font-style: normal;
    text-shadow: var(--glow-pink);
    text-transform: none;
    transform: rotate(-4deg) translateY(-0.04em);
  }

  [data-theme='dark'] .hero h1,
  [data-theme='dark'] .not-found h1 {
    color: var(--color-neon-core);
    font-variation-settings: normal;
    letter-spacing: 0.01em;
    text-shadow: var(--glow-green);
    transform: skewX(-6deg);
    animation: tube-warmup 2.4s ease-out 1 both;
  }

  /* One-time fluorescent "warming up" flicker, then steady (from the GitHub banner) */
  @keyframes tube-warmup {
    0% {
      opacity: 0;
    }

    8% {
      opacity: 0.9;
    }

    11% {
      opacity: 0.1;
    }

    18% {
      opacity: 0.8;
    }

    21% {
      opacity: 0.2;
    }

    30%,
    40%,
    100% {
      opacity: 1;
    }

    34% {
      opacity: 0.4;
    }
  }

  [data-theme='dark'] .hero-tag {
    display: block;
  }

  [data-theme='dark'] .eyebrow {
    color: var(--color-pink);
    font-family: var(--font-tag);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: var(--glow-pink);
    text-transform: none;
  }

  [data-theme='dark'] .section-label {
    position: relative;
    align-self: start;
    padding-bottom: 14px;
    color: var(--color-ink);
    font-family: var(--font-tag);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transform: rotate(-3deg);
  }

  [data-theme='dark'] .section-label span {
    color: var(--color-accent);
    text-shadow: var(--glow-green);
  }

  /* Paint drips running off the section label */
  [data-theme='dark'] .section-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(150px, 100%);
    height: 16px;
    background: var(--drips) no-repeat;
    background-size: 100% 100%;
    opacity: 0.85;
  }

  [data-theme='dark'] .logo {
    font-weight: 400;
    letter-spacing: 0.06em;
    text-shadow: var(--glow-green);
  }

  [data-theme='dark'] .logo span {
    color: var(--color-pink);
    text-shadow: var(--glow-pink);
  }

  [data-theme='dark'] .site-header {
    border-bottom-color: var(--color-line);
  }

  [data-theme='dark'] .nav-links a:not(.button)::after {
    background: var(--color-pink);
    box-shadow: var(--glow-pink);
  }

  /* Stenciled neon buttons */
  [data-theme='dark'] .button {
    border-color: var(--color-accent);
    border-radius: 0;
    color: var(--color-accent);
    background: transparent;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow:
      0 0 12px rgb(57 255 20 / 35%),
      inset 0 0 12px rgb(57 255 20 / 20%);
  }

  [data-theme='dark'] .button:hover {
    color: var(--color-on-accent);
    background: var(--color-accent);
    box-shadow: 0 0 28px rgb(57 255 20 / 70%);
  }

  [data-theme='dark'] .button-small {
    font-size: 0.85rem;
  }

  [data-theme='dark'] .text-link {
    color: var(--color-accent);
  }

  [data-theme='dark'] .text-link:hover {
    color: var(--color-pink);
  }

  [data-theme='dark'] .hero-portrait::before {
    border: 2px solid var(--color-pink);
    background: transparent;
    box-shadow:
      var(--glow-pink),
      inset 0 0 18px rgb(255 79 160 / 35%);
  }

  [data-theme='dark'] .hero-portrait img {
    filter: contrast(1.08) saturate(1.1);
  }

  [data-theme='dark'] .hero-portrait figcaption {
    color: var(--color-accent);
    font-family: var(--font-label);
  }

  /* Switcher: a pink neon tube with the current page lit up green */
  [data-theme='dark'] .mode-switch p {
    font-family: var(--font-label);
  }

  [data-theme='dark'] .mode-switch ul {
    border-color: var(--color-pink);
    background: transparent;
    box-shadow: var(--glow-pink);
  }

  [data-theme='dark'] .mode-switch a {
    font-family: var(--font-label);
    text-transform: uppercase;
  }

  [data-theme='dark'] .mode-switch a:hover {
    background: rgb(255 79 160 / 18%);
  }

  [data-theme='dark'] .mode-switch a[aria-current='page'] {
    background: var(--color-accent);
    color: var(--color-bg);
    box-shadow: 0 0 12px var(--color-accent);
  }

  [data-theme='dark'] .about-copy strong {
    color: var(--color-accent);
  }

  [data-theme='dark'] .skill-group {
    border-top-color: var(--color-accent);
    box-shadow: 0 -8px 16px -12px var(--color-accent);
  }

  [data-theme='dark'] .skill-group h3 {
    font-size: 1.7rem;
  }

  /* HUD corner brackets framing project media, like the banner */
  [data-theme='dark'] .project-media {
    border: 1px solid var(--color-line);
    border-radius: 0;
  }

  [data-theme='dark'] .project-media::after {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background:
      linear-gradient(var(--color-accent), var(--color-accent)) top left / 22px 2px,
      linear-gradient(var(--color-accent), var(--color-accent)) top left / 2px 22px,
      linear-gradient(var(--color-accent), var(--color-accent)) top right / 22px 2px,
      linear-gradient(var(--color-accent), var(--color-accent)) top right / 2px 22px,
      linear-gradient(var(--color-accent), var(--color-accent)) bottom left / 22px 2px,
      linear-gradient(var(--color-accent), var(--color-accent)) bottom left / 2px 22px,
      linear-gradient(var(--color-accent), var(--color-accent)) bottom right / 22px 2px,
      linear-gradient(var(--color-accent), var(--color-accent)) bottom right / 2px 22px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px var(--color-accent));
  }

  [data-theme='dark'] .project-media img {
    opacity: 0.88;
  }

  [data-theme='dark'] .project-number {
    border: 1px solid var(--color-accent);
    border-radius: 0;
    color: var(--color-accent);
    background: var(--color-bg);
    font-family: var(--font-label);
  }

  [data-theme='dark'] .nebula-word {
    color: var(--color-pink);
    font-family: var(--font-tag);
    font-style: normal;
    text-shadow: var(--glow-pink);
    transform: translate(-50%, -50%) rotate(-6deg);
  }

  [data-theme='dark'] .genre {
    border-color: rgb(34 230 255 / 60%);
    color: var(--color-cyan);
    font-family: var(--font-label);
  }

  [data-theme='dark'] .status {
    border-color: var(--color-line);
    background: transparent;
    font-family: var(--font-label);
    font-size: var(--text-xs);
  }

  [data-theme='dark'] .status-dot {
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
    animation-name: none;
  }

  [data-theme='dark'] .recognition,
  [data-theme='dark'] .mini-card {
    border-color: var(--color-line);
    border-radius: 0;
    background: rgb(12 18 12 / 70%);
  }

  [data-theme='dark'] .recognition li {
    border-left-color: var(--color-pink);
  }

  [data-theme='dark'] .timeline-body {
    border-left-color: rgb(57 255 20 / 35%);
  }

  [data-theme='dark'] .timeline-body::before {
    border-color: var(--color-bg);
    background: var(--color-pink);
    box-shadow: var(--glow-pink);
  }

  [data-theme='dark'] .timeline-meta .kicker {
    color: var(--color-accent);
  }

  [data-theme='dark'] .timeline-points li::marker {
    color: var(--color-pink);
  }

  [data-theme='dark'] .mini-card h4 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  [data-theme='dark'] .mini-card:hover {
    box-shadow:
      6px 6px 0 var(--color-pink),
      0 0 24px rgb(255 79 160 / 35%);
  }

  /* Now list reads like a terminal status readout */
  [data-theme='dark'] .now-list dt {
    color: var(--color-accent);
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-style: normal;
    text-transform: lowercase;
  }

  [data-theme='dark'] .now-list dt::before {
    content: '> ';
    color: var(--color-pink);
  }

  [data-theme='dark'] .now-list dd {
    font-family: var(--font-label);
    font-size: var(--text-md);
  }

  /* Interests become stickers slapped on the wall */
  [data-theme='dark'] .interest {
    --sticker: var(--color-accent);

    border: 2px solid var(--sticker);
    border-radius: 10px;
    background: rgb(5 8 5 / 85%);
    box-shadow:
      0 0 14px color-mix(in srgb, var(--sticker) 35%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--sticker) 12%, transparent);
  }

  [data-theme='dark'] .interest:nth-child(3n + 2) {
    --sticker: var(--color-pink);
  }

  [data-theme='dark'] .interest:nth-child(3n) {
    --sticker: var(--color-cyan);
  }

  [data-theme='dark'] .interest::before {
    display: none;
  }

  [data-theme='dark'] .interest > .icon {
    color: var(--sticker);
    filter: drop-shadow(0 0 6px var(--sticker));
  }

  [data-theme='dark'] .interest h3 {
    font-family: var(--font-tag);
    font-size: 1.3rem;
    line-height: 1.15;
    text-transform: none;
  }

  [data-theme='dark'] .groove {
    border-color: var(--color-line);
    border-radius: 0;
    background: rgb(5 8 5 / 80%);
  }

  [data-theme='dark'] .groove-voice,
  [data-theme='dark'] .groove-tempo {
    font-family: var(--font-label);
    font-weight: 400;
  }

  [data-theme='dark'] .groove-tempo input {
    accent-color: var(--color-accent);
  }

  [data-theme='dark'] .step {
    border-color: rgb(232 245 227 / 18%);
    border-radius: 2px;
    background: transparent;
  }

  [data-theme='dark'] .beat-alt .step {
    background: rgb(232 245 227 / 7%);
  }

  [data-theme='dark'] .voice-hh .step[aria-pressed='true'] {
    border-color: var(--color-cyan);
    background: var(--color-cyan);
    box-shadow: 0 0 10px var(--color-cyan);
  }

  [data-theme='dark'] .voice-sn .step[aria-pressed='true'] {
    border-color: var(--color-pink);
    background: var(--color-pink);
    box-shadow: var(--glow-pink);
  }

  [data-theme='dark'] .voice-bd .step[aria-pressed='true'] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
  }

  [data-theme='dark'] .step.is-current {
    box-shadow:
      0 0 0 2px var(--color-neon-core),
      0 0 18px var(--color-neon-core);
  }

  [data-theme='dark'] .groove-notation pre {
    border: 1px solid var(--color-line);
    color: var(--color-accent);
    background: #000;
  }

  /* Easter egg for the Dark Souls card */
  [data-theme='dark'] .interest-games::after {
    content: 'YOU DIED' / '';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #c8202a;
    background: linear-gradient(transparent 25%, rgb(0 0 0 / 88%) 40% 60%, transparent 75%);
    font-family: Fraunces, georgia, serif;
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    text-shadow: 0 0 12px rgb(200 32 42 / 60%);
    opacity: 0;
    transition: opacity 900ms ease-in;
    pointer-events: none;
  }

  [data-theme='dark'] .interest-games:hover::after {
    opacity: 1;
  }

  /* Collage: dimmer paper, and the tape swapped for chains hanging from above */
  [data-theme='dark'] .collage-item {
    margin-top: calc(var(--drop) + 90px);
  }

  [data-theme='dark'] .collage-photo::before {
    background: #d8d3c6;
  }

  [data-theme='dark'] .collage-photo::after {
    display: none;
  }

  [data-theme='dark'] .collage-item::before,
  [data-theme='dark'] .collage-item::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 20px);
    z-index: 1;
    width: 14px;
    height: 120px;
    background: url('../img/chain.svg') center bottom / 14px 24px repeat-y;
    filter: drop-shadow(0 0 3px rgb(255 79 160 / 60%));
    transform-origin: bottom center;
    pointer-events: none;
  }

  [data-theme='dark'] .collage-item::before {
    left: 14px;
    transform: rotate(22deg);
  }

  [data-theme='dark'] .collage-item::after {
    right: 14px;
    transform: rotate(-22deg);
  }

  @media (width <= 720px) {
    [data-theme='dark'] .collage-item {
      margin-top: calc(var(--drop) + 70px);
    }

    [data-theme='dark'] .collage-item::before,
    [data-theme='dark'] .collage-item::after {
      height: 84px;
    }
  }

  [data-theme='dark'] .contact h2 {
    color: var(--color-neon-core);
    text-shadow: var(--glow-green);
  }

  [data-theme='dark'] .open-sign {
    border-color: var(--color-pink);
    border-radius: 14px;
    color: #ffe3f0;
    font-family: var(--font-tag);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-shadow: var(--glow-pink);
    box-shadow:
      var(--glow-pink),
      inset 0 0 14px rgb(255 79 160 / 45%);
    animation: tube-warmup 2.4s ease-out 1 both;
  }

  [data-theme='dark'] .tag-list li {
    border-color: var(--color-line);
    border-radius: 0;
    color: var(--color-accent);
    background: transparent;
    font-family: var(--font-label);
  }

  [data-theme='dark'] .menu-toggle {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: transparent;
    box-shadow: 0 0 10px rgb(57 255 20 / 35%);
  }

  [data-theme='dark'] .theme-toggle {
    border-color: var(--color-pink);
    color: var(--color-pink);
    background: transparent;
    font-family: var(--font-label);
    box-shadow: var(--glow-pink);
  }

  [data-theme='dark'] ::selection {
    color: var(--color-bg);
    background: var(--color-pink);
  }
}

/* ===== Utilities ===== */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}