/* ==========================================================================
   Theme: Nordic forest (calm, natural, editorial)
   Source: Figma "Portfolio_themes" / Nordic forest
   (https://www.figma.com/design/VVcFQP1lOQFEWkH7g6eECY/Portfolio_themes?node-id=14-124)

   Near-white page with warm beige bands, bark-brown italic serif titles,
   outlined buttons with 8px corners, no shadows. Imagery: a mushroom photo in the
   hero and a soft beige blob behind the hero text.

   Palette contrast (WCAG):
     ink on paper 19.2 · beige 17.8 · white 19.6 · sand 16.1
     bark on paper 12.8 · beige 11.9 · white 13.1 · sand 10.7
     umber on paper 5.4 · beige 5.0 · white 5.5      (muted text, AA)
     on moss (footer): beige 11.3 · tan 8.2
   Taupe (the Figma secondary-button border) is 2.9 on paper: decorative
   only, never for text.
   ========================================================================== */

/* ---- Fonts (self-hosted, only downloaded while this theme is active) ---- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-ext-400-italic.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: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-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: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-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: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-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: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-500-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="nordic-forest"] {
  /* Figma palette: warm browns, blue-grays and wood browns */
  --nf-paper: #fcfdfb;  /* page: white with a 10% tint of #E0EED5, as in the Figma sample */
  --nf-white: #ffffff;
  --nf-beige: #faf3e8;
  --nf-sand: #f4e7d2;
  --nf-tan: #eacea5;
  --nf-umber: #756752;
  --nf-moss: #3a3329;
  --nf-mist: #e7ecef;
  --nf-frost: #cfdadf;
  --nf-sky: #9eb5c0;
  --nf-slate: #4f5a60;
  --nf-ink: #140903;    /* body text */
  --nf-bark: #4f250b;   /* headings */
  --nf-taupe: #a79285;
  --nf-stone: #d3c9c2;

  --color-bg: var(--nf-paper);
  --color-bg-alt: var(--nf-beige);
  --color-surface: var(--nf-white);
  --color-surface-alt: var(--nf-beige);
  --color-text: var(--nf-ink);
  --color-text-muted: var(--nf-umber);
  --color-heading: var(--nf-bark);
  --color-accent: var(--nf-bark);
  --color-on-accent: var(--nf-paper);
  --color-link: var(--nf-bark);
  --color-link-hover-bg: transparent;
  --color-link-hover-text: var(--nf-ink);
  --color-highlight: var(--nf-sand);
  --color-highlight-text: var(--nf-ink);
  --color-border: var(--nf-stone);
  --color-focus: var(--nf-bark);
  --color-header-bg: var(--nf-paper);
  --color-header-text: var(--nf-ink);
  --color-footer-bg: var(--nf-moss);
  --color-footer-text: var(--nf-beige);
  --color-footer-link: var(--nf-tan);
  --color-bar-bg: transparent;
  --color-bar-text: var(--nf-umber);
  --color-placeholder-bg: var(--nf-beige);
  --color-placeholder-text: var(--nf-bark);

  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Instrument Serif", Georgia, serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono: var(--font-body); /* small labels: sans, uppercase, tracked */
  --line-height: 1.6;
  --heading-weight: 400;
  --display-weight: 400;
  --display-color: var(--nf-bark);
  --display-shadow: none;
  --display-size: clamp(3rem, 7vw, 5rem);
  --display-size-hero: clamp(3.5rem, 9vw, 7rem);
  --display-line-height: 1;
  --display-letter-spacing: -0.01em;

  --radius: 8px; /* buttons, cards, nav items, chips, the dropdown (Lina, 2026-10-31; the Figma sample was square) */
  --border-width: 1px;
  --shadow: none;
  --shadow-hover: none;
  --duration: 220ms;
  --easing: ease;
  --page-pattern: none;

  scrollbar-color: var(--nf-umber) var(--nf-beige);
}

/* ---- Type ---- */
[data-theme="nordic-forest"] h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}
[data-theme="nordic-forest"] h3 {
  font-size: 1.5rem;
}
/* Numbers section labels ("reduced support contacts"): the same size as
   the card headings ("AI adoption and change") */
[data-theme="nordic-forest"] .stat__label {
  font-size: 1.6rem;
  line-height: 1.15;
}
/* The numbers band gets as much space above the numbers as below them, so
   they sit centred with more room under the hero (the shared layout makes
   the section after the hero tighter at the top) */
[data-theme="nordic-forest"] .hero + .section--proof {
  padding-top: var(--space-2xl);
}
[data-theme="nordic-forest"] .display-title {
  font-style: italic;
}
/* Home hero: 48px from the intro to the buttons (the shared layout has 36px);
   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="nordic-forest"] .hero h1 .display-title {
  margin-bottom: calc(var(--font-size-base) * var(--line-height));
}
[data-theme="nordic-forest"] .hero .button-row {
  margin-top: 48px;
}
[data-theme="nordic-forest"] .eyebrow,
[data-theme="nordic-forest"] .facts dt,
[data-theme="nordic-forest"] .card__facts dt,
[data-theme="nordic-forest"] .contact-list__label,
[data-theme="nordic-forest"] .pager__label,
[data-theme="nordic-forest"] .post-meta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="nordic-forest"] a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
[data-theme="nordic-forest"] a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Header: quiet, on the page color, wordmark in the serif ---- */
[data-theme="nordic-forest"] .site-name {
  font-size: 1.6rem;
}
[data-theme="nordic-forest"] .site-name:hover {
  background: none;
  color: var(--nf-bark);
}
[data-theme="nordic-forest"] .site-nav a,
[data-theme="nordic-forest"] .nav-menu summary,
[data-theme="nordic-forest"] .menu-toggle {
  font-size: 0.95rem;
}
[data-theme="nordic-forest"] .site-nav a:hover,
[data-theme="nordic-forest"] .site-nav a[aria-current],
[data-theme="nordic-forest"] .nav-menu summary:hover,
[data-theme="nordic-forest"] .nav-menu summary.is-current,
[data-theme="nordic-forest"] .menu-toggle:hover,
[data-theme="nordic-forest"] .menu-toggle[aria-expanded="true"] {
  background: var(--nf-sand);
  border-color: transparent;
  color: var(--nf-ink);
}

/* ---- Theme dropdown ---- */
[data-theme="nordic-forest"] .theme-switcher select {
  border-color: var(--nf-bark);
  background: var(--nf-white);
  color: var(--nf-ink);
}

/* ---- Buttons: outlined, as in the Figma sample, with 8px corners (2px; bark
   for the main one, taupe for the others). Fill with bark on hover. ---- */
[data-theme="nordic-forest"] .button,
[data-theme="nordic-forest"] .button--secondary {
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--nf-bark);
  background: transparent;
  color: var(--nf-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
[data-theme="nordic-forest"] .button--secondary {
  border-color: var(--nf-taupe);
}
[data-theme="nordic-forest"] .button:hover,
[data-theme="nordic-forest"] .button--secondary:hover {
  border-color: var(--nf-bark);
  background: var(--nf-bark);
  color: var(--nf-paper);
  transform: none;
}

/* ---- Cards: white with a warm hairline; no window title bar ---- */
[data-theme="nordic-forest"] .card__bar {
  display: none;
}
[data-theme="nordic-forest"] .card__body h3,
[data-theme="nordic-forest"] .card__title,
[data-theme="nordic-forest"] .post-card .card__body .card__title {
  font-size: 1.6rem;
  line-height: 1.15;
}
[data-theme="nordic-forest"] .card--lead .card__title,
[data-theme="nordic-forest"] .post-card--featured .card__body .card__title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
}
[data-theme="nordic-forest"] .card--link {
  transition: border-color var(--duration) var(--easing);
}
[data-theme="nordic-forest"] .card--link:hover {
  border-color: var(--nf-bark);
  transform: none;
}
[data-theme="nordic-forest"] .card__more {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Blog tags ---- */
[data-theme="nordic-forest"] .tag-list li {
  border-color: var(--nf-sand);
  background: var(--nf-sand);
  color: var(--nf-ink);
}

/* ---- Talent stack and Pyramid: tan shapes, bark labels (10.8 on one
   bubble, 9.8 where two overlap) ---- */
[data-theme="nordic-forest"] .talent-stack {
  --talent-circle: var(--nf-tan);
  --talent-circle-opacity: 0.45;
  --talent-text: var(--nf-bark);
  --talent-font: var(--font-heading); /* Instrument Serif for every label */
  --talent-size-s: 26px; /* the serif runs small, so the small labels are a bit bigger */
  --talent-size-xl: 54px;
  --talent-size-l: 38px;
}
[data-theme="nordic-forest"] .talent-stack__list li {
  border-color: var(--nf-stone);
}
[data-theme="nordic-forest"] .pyramid {
  --pyramid-fill: var(--nf-tan);
  --pyramid-fill-opacity: 0.45;
  --pyramid-text: var(--nf-bark);
  --pyramid-font: var(--font-body);
}
/* A level's shape pulses (to 105%, keyframes pyramid-pulse in base.css)
   while the cursor is over it or its label, as in NeuroSpiceGirl; 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="nordic-forest"]:not([data-motion="paused"]) .pyramid__level:hover polygon {
    animation: pyramid-pulse 1s ease-in-out infinite;
  }
}

/* Bubbles bounce in one by one (centre first) when the graphic scrolls into
   view, and a bubble's circle pulses while the cursor is over it: the same
   motion as NeuroSpiceGirl (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="nordic-forest"]:not([data-motion="paused"]) .talent-stack[data-reveal="waiting"] .talent-stack__bubble {
    opacity: 0;
  }
  html[data-theme="nordic-forest"]:not([data-motion="paused"]) .talent-stack[data-reveal="in"] .talent-stack__bubble {
    animation: talent-bounce-in 0.75s calc(var(--i) * 100ms) both;
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
  html[data-theme="nordic-forest"]:not([data-motion="paused"]) .talent-stack[data-reveal="in"] .talent-stack__bubble:hover circle {
    animation: talent-pulse 1s ease-in-out infinite;
  }
}

/* What I do and My values: the same quiet highlight as the case study
   cards, the hairline border turning bark while the cursor is over a card. */
[data-theme="nordic-forest"] :is(.section--services, .section--values) .card {
  transition: border-color var(--duration) var(--easing);
}
@media (hover: hover) {
  [data-theme="nordic-forest"] :is(.section--services, .section--values) .card:hover {
    border-color: var(--nf-bark);
  }
}

/* How I work with AI: the tool logos flat in sky blue, as in Berliner, with
   no outline or shadow (Lina, 2026-11-01). The die-cut edge takes the page
   colour, so it only shows where two logos overlap. Layout and hover wiggle
   in base.css. */
[data-theme="nordic-forest"] .ai-logos {
  --ai-logo-edge: var(--color-bg);
}
[data-theme="nordic-forest"] .ai-logos__sticker {
  color: var(--nf-sky);
}

/* Book covers (About): the cards' stone hairline and 8px corners, with the
   same quiet hover, the hairline turning bark */
[data-theme="nordic-forest"] .books__cover {
  transition: border-color var(--duration) var(--easing);
}
@media (hover: hover) {
  [data-theme="nordic-forest"] .books__link:hover .books__cover {
    border-color: var(--nf-bark);
  }
}

/* ---- Placeholders, pager, quotes ---- */
[data-theme="nordic-forest"] .placeholder {
  border: 1px solid var(--nf-stone);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="nordic-forest"] .pager__link {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
}
[data-theme="nordic-forest"] .pager__link:hover {
  border-color: var(--nf-bark);
  background: none;
}
[data-theme="nordic-forest"] .prose blockquote {
  border-left-color: var(--nf-tan);
  font-family: var(--font-heading);
  font-size: 1.35rem;
}

/* ---- Footer: moss, with beige text and tan links ---- */
[data-theme="nordic-forest"] .site-footer {
  --color-focus: var(--nf-tan);
}
[data-theme="nordic-forest"] .site-footer__heading {
  font-size: 2rem;
  font-style: italic;
}

/* ==========================================================================
   Imagery (src/assets/img/nordic-forest/, made from assets-source/
   nordic-forest/ with `npm run nordic`). Decorative only.
   ========================================================================== */

/* Home hero art slot. The mushroom itself is drawn across the hero on wide
   screens (below); the slot stays in place, empty, with 36px of space plus
   10% of the slot above and below it, so the layout doesn't change. On
   phones, where the hero stacks, the mushroom only took up space below the
   text, so there's no slot and no mushroom at all (Lina, 2026-11-07). */
[data-theme="nordic-forest"] .theme-art--hero {
  margin-right: 0;
  margin-block: calc(36px + min(26rem, 100%) / 10);
}
[data-theme="nordic-forest"] .theme-art--hero span {
  display: none;
}
@media (max-width: 51.99rem) {
  [data-theme="nordic-forest"] .theme-art--hero {
    display: none;
  }
}

/* Wide screens: the cut-out is drawn large across the hero instead, as in
   the Figma sample (frame 14:125): it starts 54.5% across and is 67.4% of
   the screen's width, so it runs off the right edge (only its left 67%
   shows) and on wide screens the tip of the mushroom is cut off at the top.
   It's anchored to the hero's bottom edge rather than its top, so the
   numbers band always cuts through the solid part of the blue shadow:
   72% down the image (row 1440 of 2000), where the shadow is unbroken from
   near its left edge to past where the screen ends. The cut-out has no
   background, so a shadow that ended above the band would leave a gap of
   bare page under it. */
@media (min-width: 52rem) {
  [data-theme="nordic-forest"] .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 54.5%;
    width: 67.4vw;
    bottom: calc(-67.4vw * 2000 / 1499 * 0.28);
    aspect-ratio: 1499 / 2000;
    background: url("/assets/img/nordic-forest/mushroom-cutout.webp") center / cover no-repeat;
    pointer-events: none;
  }
}

/* Home hero: the soft beige blob from the Figma sample, bleeding off the
   left edge behind the intro text. Behind the content, never clickable.
   The hero gets the page color as its own background and is isolated, so
   the photo above has something to multiply against. */
[data-theme="nordic-forest"] .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--color-bg);
}
[data-theme="nordic-forest"] .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 25%;
  left: clamp(-14rem, -12vw, -4rem);
  width: clamp(20rem, 38vw, 34rem); /* small enough to end inside the hero */
  aspect-ratio: 652 / 553;
  background: url("/assets/img/nordic-forest/hero-blob.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Home portrait: Lina's watercolor portrait instead of the photo, still
   round (src/assets/img/nordic-forest/portrait-*.webp, `npm run nordic`) */
[data-theme="nordic-forest"] .portrait {
  display: none;
}
[data-theme="nordic-forest"] .portrait--nordic-forest {
  display: block;
}

/* Home portrait: the tall beige blob from the Figma "Background shapes"
   (node 14:158) behind the round photo. It reaches out above, below and to
   the left, but only a little to the right, so it stays clear of the text.
   Only where the photo sits beside the text: on phones the photo stacks
   above the text and the blob ran into it (Lina, 2026-11-07). */
@media (min-width: 48rem) {
  [data-theme="nordic-forest"] .split__media--portrait {
    position: relative;
    isolation: isolate;
    margin-block: 24px; /* extra room above and below the blob */
  }
  [data-theme="nordic-forest"] .split__media--portrait::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -22% -6% -26% -20%;
    background: url("/assets/img/nordic-forest/portrait-blob.svg") center / contain no-repeat;
    pointer-events: none;
  }
}

@media (forced-colors: active) {
  [data-theme="nordic-forest"] .hero::before,
  [data-theme="nordic-forest"] .split__media--portrait::before {
    display: none;
  }
}