/* ==========================================================================
   Theme: NeuroSpiceGirl (retro 90s tech)
   Source: Figma "Portfolio_themes" / NeuroSpiceGirl

   Cream page with dark text; the top nav bar and footer are crimson with
   cream text.

   Palette contrast (WCAG):
     crimson on cream 11.9 · on beige 8.1 · on pink 9.4 · on blush 10.6
     dark on cream 19.5 · on beige 13.3 · on pink 15.3 · on blush 17.4
     on crimson: cream 11.9 · pink 9.4
   Never pair crimson + dark, or two of the pastels, for text.
   ========================================================================== */

/* ---- Fonts (self-hosted, only downloaded while this theme is active) ---- */
@font-face {
  font-family: "Jersey 15";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jersey-15-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jersey 15";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jersey-15-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cascadia-code-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cascadia-code-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cascadia-code-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cascadia-code-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
html[data-theme="neurospicegirl"] {
  --nsg-crimson: #5f1e28;
  --nsg-cream: #fcfce9;
  --nsg-beige: #d6d2b9;
  --nsg-pink: #fcd7de;
  --nsg-blush: #faebe3; /* soft peach-pink for alternating section backgrounds */
  --nsg-dark: #0e0406;

  --color-bg: var(--nsg-cream);
  --color-bg-alt: var(--nsg-blush);
  --color-surface: var(--nsg-cream);
  --color-surface-alt: var(--nsg-beige);
  --color-text: var(--nsg-dark);
  --color-text-muted: var(--nsg-crimson);
  --color-heading: var(--nsg-crimson);
  --color-accent: var(--nsg-crimson);
  --color-on-accent: var(--nsg-cream);
  --color-link: var(--nsg-crimson);
  --color-link-hover-bg: var(--nsg-crimson);
  --color-link-hover-text: var(--nsg-cream);
  --color-highlight: var(--nsg-pink);
  --color-highlight-text: var(--nsg-crimson);
  --color-border: var(--nsg-crimson);
  --color-focus: var(--nsg-crimson);
  --color-header-bg: var(--nsg-crimson);
  --color-header-text: var(--nsg-cream);
  --color-footer-bg: var(--nsg-crimson);
  --color-footer-text: var(--nsg-cream);
  --color-footer-link: var(--nsg-pink);
  --color-bar-bg: var(--nsg-crimson);
  --color-bar-text: var(--nsg-pink);
  --color-placeholder-bg: var(--nsg-beige);
  --color-placeholder-text: var(--nsg-crimson);

  --font-body: "DM Sans", system-ui, sans-serif;
  --font-heading: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  --font-display: "Jersey 15", "Cascadia Code", monospace;
  --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
  --heading-weight: 700;
  --display-weight: 400;
  --display-color: var(--nsg-pink);
  /* Pink letters stay readable on light backgrounds ONLY thanks to this
     crimson outline + hard drop shadow. Don't remove it. */
  --display-shadow:
    -2px -2px 0 var(--nsg-crimson), 0 -2px 0 var(--nsg-crimson), 2px -2px 0 var(--nsg-crimson),
    -2px 0 0 var(--nsg-crimson), 2px 0 0 var(--nsg-crimson),
    -2px 2px 0 var(--nsg-crimson), 0 2px 0 var(--nsg-crimson), 2px 2px 0 var(--nsg-crimson),
    5px 5px 0 var(--nsg-crimson);
  --display-shadow-hero:
    -3px -3px 0 var(--nsg-crimson), 0 -3px 0 var(--nsg-crimson), 3px -3px 0 var(--nsg-crimson),
    -3px 0 0 var(--nsg-crimson), 3px 0 0 var(--nsg-crimson),
    -3px 3px 0 var(--nsg-crimson), 0 3px 0 var(--nsg-crimson), 3px 3px 0 var(--nsg-crimson),
    7px 7px 0 var(--nsg-crimson);
  --display-size: clamp(2.75rem, 7vw, 4.5rem);
  --display-size-hero: clamp(3.5rem, 11vw, 7rem);
  --display-line-height: 0.95;
  --display-letter-spacing: 0.02em;

  --radius: 0;
  --border-width: 2px;
  --shadow: 5px 5px 0 var(--nsg-crimson);
  --shadow-hover: 8px 8px 0 var(--nsg-crimson);
  --portrait-border: 3px solid var(--nsg-crimson);
  --portrait-shadow: 6px 6px 0 var(--nsg-crimson);
  --duration: 120ms;
  --easing: steps(3, end);

  scrollbar-color: var(--nsg-crimson) var(--nsg-beige);
}

/* ---- Home portrait: Lina's pink-tinted photo instead of the plain one,
   still round with the crimson outline and hard shadow (the --portrait-*
   tokens above). Made with `npm run photos`. ---- */
[data-theme="neurospicegirl"] .portrait {
  display: none;
}
[data-theme="neurospicegirl"] .portrait--neurospicegirl {
  display: block;
}

/* ---- Header: crimson bar with cream text ---- */
[data-theme="neurospicegirl"] .site-header {
  --color-focus: var(--nsg-pink);
  border-bottom: 3px solid var(--nsg-dark);
}
[data-theme="neurospicegirl"] .site-name {
  font-size: 1.2rem;
}
[data-theme="neurospicegirl"] .site-name:hover {
  background: none;
  color: var(--nsg-pink);
}
[data-theme="neurospicegirl"] .site-nav a,
[data-theme="neurospicegirl"] .nav-menu summary,
[data-theme="neurospicegirl"] .menu-toggle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}
[data-theme="neurospicegirl"] .site-nav a:hover,
[data-theme="neurospicegirl"] .site-nav a[aria-current],
[data-theme="neurospicegirl"] .nav-menu summary:hover,
[data-theme="neurospicegirl"] .nav-menu summary.is-current,
[data-theme="neurospicegirl"] .menu-toggle:hover,
[data-theme="neurospicegirl"] .menu-toggle[aria-expanded="true"] {
  background: var(--nsg-pink);
  border-color: var(--nsg-pink);
  color: var(--nsg-crimson);
}

/* ---- Header from 56rem to 62rem: name, links and dropdown need about
   970px on one row in this theme, so until then the tablet layout carries
   on (base.css): links and dropdown on a row of their own under the name,
   "Home" lined up with the name, the same smaller text. (Lina, 2026-11-07,
   as in Berliner, which switches at 60rem.) ---- */
@media (min-width: 56rem) and (max-width: 61.99rem) {
  [data-theme="neurospicegirl"] .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name name"
      "nav  switch";
  }
  [data-theme="neurospicegirl"] .site-nav > ul {
    justify-content: flex-start;
    margin-left: calc(-1 * (var(--space-xs) + var(--border-width)));
  }
  html[data-theme="neurospicegirl"] .site-header .site-nav a,
  html[data-theme="neurospicegirl"] .site-header .nav-menu summary {
    font-size: 0.875rem;
  }
  [data-theme="neurospicegirl"] .theme-switcher {
    font-size: 0.8rem;
  }
}

/* ---- Theme dropdown (sits on the crimson header) ---- */
[data-theme="neurospicegirl"] .theme-switcher {
  font-family: var(--font-heading);
}
[data-theme="neurospicegirl"] .theme-switcher label {
  color: var(--nsg-cream);
}
[data-theme="neurospicegirl"] .theme-switcher select {
  border: 2px solid var(--nsg-cream);
  background: var(--nsg-crimson);
  color: var(--nsg-cream);
  box-shadow: 3px 3px 0 var(--nsg-pink);
  font-family: var(--font-heading);
}
[data-theme="neurospicegirl"] .theme-switcher select:hover {
  border-color: var(--nsg-pink);
  box-shadow: 4px 4px 0 var(--nsg-pink);
}
/* The opened list: light, like the rest of the page */
[data-theme="neurospicegirl"] .theme-switcher option {
  background: var(--nsg-cream);
  color: var(--nsg-crimson);
}

/* ---- Headings: terminal prompt ---- */
[data-theme="neurospicegirl"] h2::before {
  content: "> ";
  content: "> " / "";
  color: var(--nsg-crimson);
  opacity: 0.6;
}

/* ---- "Case studies" dropdown panel (desktop): a little 90s window ---- */
@media (min-width: 56rem) {
  [data-theme="neurospicegirl"] .site-nav .nav-menu__list {
    --color-focus: var(--nsg-crimson);
    border-width: 2px;
    box-shadow: 5px 5px 0 var(--nsg-dark);
  }
}

/* ---- Big numbers: the hero title look ---- */
[data-theme="neurospicegirl"] .stat__value {
  letter-spacing: 0.02em;
}

/* ---- Buttons ---- */
[data-theme="neurospicegirl"] .button {
  box-shadow: 4px 4px 0 var(--nsg-dark);
}
[data-theme="neurospicegirl"] .button:hover {
  box-shadow: 6px 6px 0 var(--nsg-dark);
}
[data-theme="neurospicegirl"] .button--secondary {
  box-shadow: 4px 4px 0 var(--nsg-crimson);
}
[data-theme="neurospicegirl"] .button--secondary:hover {
  background: var(--nsg-pink);
  box-shadow: 6px 6px 0 var(--nsg-crimson);
}

/* ---- Cards as 90s windows ---- */
[data-theme="neurospicegirl"] .card__bar {
  padding: 0.3rem 0.6rem;
  font-weight: 700;
}
[data-theme="neurospicegirl"] .card__bar[data-label]::before {
  content: attr(data-label);
  flex: 1;
}
[data-theme="neurospicegirl"] .card__bar-buttons {
  display: block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: auto;
  margin-right: 0.1rem;
  background: var(--nsg-pink);
  box-shadow: -1.05rem 0 0 var(--nsg-pink), -2.1rem 0 0 var(--nsg-pink);
}
[data-theme="neurospicegirl"] .card__body h3 {
  font-size: 1.15rem;
}
[data-theme="neurospicegirl"] .card--link:hover .card__more {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---- Book covers (About): framed like the cards, crimson outline and a
   hard shadow that deepens on hover, like the buttons ---- */
[data-theme="neurospicegirl"] .books {
  gap: var(--space-m);
}
[data-theme="neurospicegirl"] .books__cover {
  border: 2px solid var(--nsg-crimson);
  box-shadow: 4px 4px 0 var(--nsg-crimson);
}
[data-theme="neurospicegirl"] .books__link:hover .books__cover {
  box-shadow: 6px 6px 0 var(--nsg-crimson);
}

/* ---- About page bands (Books, More projects; layout in base.css) in
   crimson, with cream text and pink links (cream on crimson is 12.4, pink
   9.7). On the crimson the covers get a cream frame and a pink shadow. ---- */
[data-theme="neurospicegirl"] .about-band {
  --about-band-bg: var(--nsg-crimson);
  --color-heading: var(--nsg-cream);
  --color-link: var(--nsg-pink);
  --color-link-hover-bg: var(--nsg-pink);
  --color-link-hover-text: var(--nsg-crimson);
  --color-focus: var(--nsg-cream);
  --color-highlight: var(--nsg-cream);
  color: var(--nsg-cream);
}
[data-theme="neurospicegirl"] .about-band h2::before {
  color: var(--nsg-pink);
  opacity: 1;
}
[data-theme="neurospicegirl"] .about-band .books__cover {
  border-color: var(--nsg-cream);
  box-shadow: 4px 4px 0 var(--nsg-pink);
}
[data-theme="neurospicegirl"] .about-band .books__link:hover .books__cover {
  box-shadow: 6px 6px 0 var(--nsg-pink);
}

/* ---- Summary, placeholders, pager ---- */
[data-theme="neurospicegirl"] .placeholder {
  background-image:
    linear-gradient(45deg, rgb(95 30 40 / 0.07) 25%, transparent 25%, transparent 75%, rgb(95 30 40 / 0.07) 75%),
    linear-gradient(45deg, rgb(95 30 40 / 0.07) 25%, transparent 25%, transparent 75%, rgb(95 30 40 / 0.07) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
[data-theme="neurospicegirl"] .placeholder span::before {
  content: "[img] ";
  content: "[img] " / "";
}
[data-theme="neurospicegirl"] .pager__link:hover {
  background: var(--nsg-pink);
  color: var(--nsg-crimson);
  box-shadow: var(--shadow-hover);
}

/* ---- Page header ---- */
[data-theme="neurospicegirl"] .page-header {
  border-bottom-width: 3px;
}

/* ---- Blog tags: pink chips like the talent stack list (crimson on pink
   is 9.4) ---- */
[data-theme="neurospicegirl"] .tag-list li {
  border-color: var(--nsg-pink);
  border-radius: 0;
  background: var(--nsg-pink);
  color: var(--nsg-crimson);
}

/* ---- Talent stack: soft pink bubbles that deepen where they overlap,
   no outlines, Cascadia Code labels.
   Crimson text is 10.7 on one bubble and 10.1 where two overlap (no label
   sits on more than two). ---- */
[data-theme="neurospicegirl"] .talent-stack {
  --talent-circle: var(--nsg-pink);
  --talent-circle-opacity: 0.45;
  --talent-text: var(--nsg-crimson);
  --talent-font: var(--font-mono);
}

/* Bubbles bounce in one by one (centre first) when the graphic scrolls into
   view, and pulse while the cursor is over one (keyframes talent-bounce-in
   and talent-pulse in base.css). Nothing moves under reduced motion, and
   with "Pause animations" on, the bubbles are simply shown. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) .talent-stack[data-reveal="waiting"] .talent-stack__bubble {
    opacity: 0;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) .talent-stack[data-reveal="in"] .talent-stack__bubble {
    animation: talent-bounce-in 0.75s calc(var(--i) * 100ms) both;
  }
}
/* Only the circle pulses; the label stays put, since scaling text by a few
   percent looks shaky. */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) .talent-stack[data-reveal="in"] .talent-stack__bubble:hover circle {
    animation: talent-pulse 1s ease-in-out infinite;
  }
}
[data-theme="neurospicegirl"] .talent-stack__list li {
  background: var(--nsg-pink);
  color: var(--nsg-crimson);
  font-family: var(--font-mono);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--nsg-crimson);
}

/* ---- Pyramid of Design: same blush pink and Cascadia Code as the talent
   stack bubbles. Crimson text on the blush is 10.7. ---- */
[data-theme="neurospicegirl"] .pyramid {
  --pyramid-fill: var(--nsg-pink);
  --pyramid-fill-opacity: 0.45;
  --pyramid-text: var(--nsg-crimson);
  --pyramid-font: var(--font-mono);
}
/* A level's shape pulses (to 105%, keyframes pyramid-pulse in base.css)
   while the cursor is over it or its label, like the talent stack bubbles;
   the label stays put. Mouse only; not under reduced motion or "Pause
   animations". */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) .pyramid__level:hover polygon {
    animation: pyramid-pulse 1s ease-in-out infinite;
  }
}

/* ---- What I do and My values: each section's four cards slide up into
   place one after another (0.2s apart) when they scroll into view
   (Animate.css slideInUp), and a
   card's hard shadow deepens while the cursor is over it (the card itself
   stays put, so it doesn't read as clickable). The section clips the slide,
   so the cards rise out of its bottom edge instead of over the next section.
   "backwards" applies the start position only while a card waits for its
   turn; once it's in, the animation lets go of the card. ---- */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) {
    overflow: clip;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) [data-reveal="waiting"] > .card {
    visibility: hidden;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) [data-reveal="in"] > .card {
    animation: nsg-slide-in-up 1s backwards;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) [data-reveal="in"] > .card:nth-child(2) {
    animation-delay: 0.2s;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) [data-reveal="in"] > .card:nth-child(3) {
    animation-delay: 0.4s;
  }
  html[data-theme="neurospicegirl"]:not([data-motion="paused"]) :is(.section--services, .section--values) [data-reveal="in"] > .card:nth-child(4) {
    animation-delay: 0.6s;
  }
}
@media (hover: hover) {
  /* 5px deeper than the resting 5px shadow (deeper than --shadow-hover,
     which buttons use) */
  [data-theme="neurospicegirl"] :is(.section--services, .section--values) .card:hover {
    box-shadow: 10px 10px 0 var(--nsg-crimson);
  }
}
/* Under reduced motion the shadow still deepens, just without the glide */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  [data-theme="neurospicegirl"] :is(.section--services, .section--values) .card {
    transition: box-shadow 0.3s ease-in-out;
  }
}
@keyframes nsg-slide-in-up {
  from {
    transform: translateY(100%);
    visibility: visible;
  }
  to {
    transform: translateY(0);
  }
}

/* ---- Footer ---- */
[data-theme="neurospicegirl"] .site-footer {
  --color-focus: var(--nsg-pink);
  border-top: 3px solid var(--nsg-dark);
}
[data-theme="neurospicegirl"] .site-footer__heading {
  color: var(--nsg-pink);
}
[data-theme="neurospicegirl"] .site-footer__meta {
  font-family: var(--font-mono);
}

/* ==========================================================================
   Footer retro grid: a pink grid floor scrolling toward the viewer.
   Rebuilt in plain CSS from Magic UI's RetroGrid
   (https://magicui.design/docs/components/retro-grid), which uses React +
   WebGL. Same geometry as its CSS fallback (65° tilt, 200px perspective,
   60px cells), but on a single pseudo-element, and each loop moves exactly
   one cell so the restart is seamless.

   Contrast: the lines are capped at 30% opacity, so even where a line runs
   behind text the blend (#8e565f) keeps cream text at 6.0 and pink at 4.7.
   Motion: still under prefers-reduced-motion, paused by the footer's
   "Pause animations" button, and hidden in forced-colors mode and print.
   ========================================================================== */
[data-theme="neurospicegirl"] .site-footer {
  --grid-cell: 60px;
  --grid-tilt: perspective(200px) rotateX(65deg);
  --grid-horizon: 55%;  /* where the plane pivots; the horizon sits ~95px above */
  --grid-depth: 30rem;  /* how far the plane reaches back from the pivot */
  position: relative;
  isolation: isolate;   /* keeps the grid above the footer background, below the text */
  overflow: clip;
}
[data-theme="neurospicegirl"] .site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--grid-horizon) - var(--grid-depth));
  left: 50%;
  width: 400vw;
  /* the depth behind the pivot, plus enough in front to pass the camera */
  height: calc(var(--grid-depth) + 20rem);
  margin-left: -200vw;
  background-image:
    linear-gradient(to right, var(--nsg-pink) 1px, transparent 0),
    linear-gradient(to bottom, var(--nsg-pink) 1px, transparent 0);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: center top;
  opacity: 0.3;
  transform-origin: 50% var(--grid-depth);
  transform: var(--grid-tilt) translateY(0);
  pointer-events: none;
}
/* Melts the far edge of the grid into the crimson */
[data-theme="neurospicegirl"] .site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--nsg-crimson) calc(var(--grid-horizon) - 6.5rem),
    transparent calc(var(--grid-horizon) + 3rem)
  );
  pointer-events: none;
}
[data-theme="neurospicegirl"] .motion-toggle {
  display: inline-flex;
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="neurospicegirl"] .site-footer::before {
    animation: nsg-grid-scroll 1.5s linear infinite;
  }
}
@keyframes nsg-grid-scroll {
  from {
    transform: var(--grid-tilt) translateY(calc(-1 * var(--grid-cell)));
  }
  to {
    transform: var(--grid-tilt) translateY(0);
  }
}
/* Nothing moves, so there's nothing to pause */
@media (prefers-reduced-motion: reduce) {
  [data-theme="neurospicegirl"] .motion-toggle {
    display: none;
  }
}
@media (forced-colors: active), print {
  [data-theme="neurospicegirl"] .site-footer::before,
  [data-theme="neurospicegirl"] .site-footer::after,
  [data-theme="neurospicegirl"] .motion-toggle {
    display: none;
  }
}

/* ==========================================================================
   Hero sticker collage: decorative only (aria-hidden), and lives in the
   hero's theme-art slot, so it never pushes content around.
   ========================================================================== */
/* Home hero text: 48px from the intro to the buttons (the shared layout
   has 36px), as in Nordic forest; the title-to-intro gap is set just
   below. The eyebrow above the title keeps its 8px. */
/* The title-to-intro gap is one empty line of the intro, the same as the
   gap between the intro's paragraphs (27.2px; Lina, 2026-11-08, was 48px) */
[data-theme="neurospicegirl"] .hero h1 .display-title {
  margin-bottom: calc(var(--font-size-base) * var(--line-height));
}
[data-theme="neurospicegirl"] .hero .button-row {
  margin-top: 48px;
}
/* The numbers band under the hero: 72px above and below the numbers, so
   they sit centred in a slimmer band (the shared layout has 40px above and
   up to 104px below) */
[data-theme="neurospicegirl"] .hero + .section--proof {
  padding-block: 72px;
}

/* 36px of extra space above and below the collage, so the hero is a bit
   taller and less crowded (the collage is the taller column on wide
   screens, so the whole hero grows by 72px) */
[data-theme="neurospicegirl"] .theme-art--hero {
  margin-block: 36px;
}
/* On phones the collage comes below the buttons, so it's smaller and closer,
   to keep the numbers within reach */
@media (max-width: 47.99rem) {
  [data-theme="neurospicegirl"] .theme-art--hero {
    max-width: 14rem;
    margin-block: var(--space-s) 0;
  }
}
[data-theme="neurospicegirl"] .theme-art span {
  transition: transform 200ms steps(2, end);
}
[data-theme="neurospicegirl"] .theme-art--hero span:nth-child(1) {
  inset: 14% 10% 16% 2%;
  background-image: url("/assets/img/stickers/computer.webp");
  transform: rotate(-4deg);
}
[data-theme="neurospicegirl"] .theme-art--hero span:nth-child(2) {
  top: 0;
  right: 0;
  width: 34%;
  height: 34%;
  background-image: url("/assets/img/stickers/floppy.webp");
  transform: rotate(9deg);
}
[data-theme="neurospicegirl"] .theme-art--hero span:nth-child(3) {
  bottom: 2%;
  right: 4%;
  width: 46%;
  height: 26%;
  background-image: url("/assets/img/stickers/heart-sunglasses.webp");
  transform: rotate(-8deg);
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="neurospicegirl"] .theme-art span:hover {
    transform: rotate(0deg) scale(1.06);
  }
}

/* Phones (Lina, 2026-11-07): the stickers spread out instead of a collage
   below the buttons. The art slot takes no room and stops being their
   frame, so they're placed in the hero itself:
   - the floppy disk a little above and right of "Hi! I'm Lina."
   - the computer, 20% smaller, on the edge between the hero and the pink
     numbers band
   - the heart sunglasses move to the edge between Talent stack and Case
     studies (drawn there by .section--work::before below; no wiggle, as a
     background picture can't be hovered on its own) */
@media (max-width: 47.99rem) {
  [data-theme="neurospicegirl"] .hero .theme-art--hero {
    position: static;
    height: 0;
    aspect-ratio: auto;
    margin: 0;
  }
  [data-theme="neurospicegirl"] .hero .theme-art--hero span:nth-child(1) {
    inset: auto var(--gutter) -3.9rem auto;
    z-index: 1;
    width: 9.9rem;
    height: 7.85rem;
    transform: rotate(4deg); /* leans right, like the floppy */
  }
  [data-theme="neurospicegirl"] .hero .theme-art--hero span:nth-child(2) {
    /* centred on the title's line: the hero's top padding (where the
       title starts, as the eyebrow is hidden) plus half the title's
       height (53px), minus half the floppy's; 12px in from the gutter */
    top: calc(var(--space-xl) + 26.5px - 1.9rem);
    right: calc(var(--gutter) + 12px);
    width: 3.8rem;
    height: 3.8rem;
  }
  [data-theme="neurospicegirl"] .hero .theme-art--hero span:nth-child(3) {
    display: none;
  }
  [data-theme="neurospicegirl"] .section--work {
    position: relative;
  }
  [data-theme="neurospicegirl"] .section--work::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--gutter);
    width: 7rem;
    height: 4.25rem;
    background: url("/assets/img/stickers/heart-sunglasses.webp") center / contain no-repeat;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
  }
}
/* The computer's phone tilt above outranks the shared hover rule, so its
   wiggle is repeated here */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  [data-theme="neurospicegirl"] .hero .theme-art--hero span:nth-child(1):hover {
    transform: rotate(0deg) scale(1.06);
  }
}
@media (max-width: 47.99rem) and (forced-colors: active) {
  [data-theme="neurospicegirl"] .section--work::before {
    display: none;
  }
}

/* ---- How I work with AI: the tool logos as die-cut stickers (layout and
   hover wiggle in base.css), all four in the theme pink with a crimson
   outline so they show on the cream, and a soft shadow like the hero
   stickers ---- */
[data-theme="neurospicegirl"] .ai-logos__sticker {
  color: var(--nsg-pink);
  filter: drop-shadow(2px 3px 2px rgb(14 4 6 / 0.25));
}
[data-theme="neurospicegirl"] .ai-logos__mark {
  stroke: var(--nsg-crimson);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* ==========================================================================
   Mouse cursors: the pink "wing pointer" set (still versions; browsers
   can't play the animated ones). PNGs made from assets-source/cursors/ with
   `npm run cursors`; the numbers after each image are its hotspot, the pixel
   that clicks. Each falls back to the normal system cursor of the same kind.
   The winged arrow is used everywhere, over text, links and buttons too
   (Lina's choice); only disabled things get the "not allowed" sign.
   ========================================================================== */
html[data-theme="neurospicegirl"] {
  --nsg-cursor: url("/assets/img/cursors/default.png") 0 0, default;
  --nsg-cursor-not-allowed: url("/assets/img/cursors/not-allowed.png") 13 15, not-allowed;
}
html[data-theme="neurospicegirl"],
html[data-theme="neurospicegirl"] * {
  cursor: var(--nsg-cursor);
}
html[data-theme="neurospicegirl"] :is(:disabled, [aria-disabled="true"]) {
  cursor: var(--nsg-cursor-not-allowed);
}

/* High-contrast / forced-colors mode: drop the decorative effects, and give
   back the system cursors (which may be set larger or bolder there) */
@media (forced-colors: active) {
  [data-theme="neurospicegirl"] .display-title {
    text-shadow: none;
  }
  html[data-theme="neurospicegirl"],
  html[data-theme="neurospicegirl"] * {
    cursor: revert;
  }
}