/* ==========================================================================
   Theme: Berliner (electric blue, concrete grey, raw and graphic)
   Source: Figma "Portfolio_themes" / Berliner
   (https://www.figma.com/design/VVcFQP1lOQFEWkH7g6eECY/Portfolio_themes?node-id=23-278)
   White page, electric blue blocks, black type. A blue tunnel photo runs
   across the top of Home with a giant slab-serif "Hi! I'm Lina." standing
   on its bottom edge; a grey Berlin bunker photo sits beside the intro.
   Links are plain underlined text, also where other themes have buttons.

   This theme moves a few things around (allowed for Berliner only, and only
   in CSS, so the page markup is the same in every theme): the Home header
   floats over the photo, and the hero is a full-width photo band.

   Palette contrast (WCAG):
     black on white 21 · on light-blue 12.1
     blue on white 10.8 · on light-blue 6.2
     white on blue 10.8 · light-blue on blue 6.2
     on black (footer): white 21 · light-blue 12.1
   Black on blue is only 1.9: never used.

   Fonts: M PLUS 1 Code for headings and body (Figma had Kosugi, swapped
   2026-11-07 because Kosugi has no Å, Ä, Ö, ä or ö; M PLUS 1 Code is the
   closest match with every Swedish letter) and Boxing (Figma: the big
   titles) by Ruosi Huang / Indian Type Foundry, free from Fontshare under
   the ITF Free Font License. That license allows self-hosting with
   @font-face on our own site, but not converting or subsetting the file,
   so the .otf is served exactly as downloaded (45 KB).
   ========================================================================== */

/* ---- Fonts (self-hosted, only downloaded while this theme is active) ---- */
@font-face {
  font-family: "M PLUS 1 Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/m-plus-1-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: "M PLUS 1 Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/m-plus-1-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Boxing";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Boxing-Regular.otf") format("opentype");
}

/* ---- Tokens ---- */
html[data-theme="berliner"] {
  /* Figma palette */
  --bl-blue: #0002d3;
  --bl-white: #ffffff;
  --bl-black: #000000;
  --bl-light-blue: #bfc0f4;

  --color-bg: var(--bl-white);
  --color-bg-alt: var(--bl-light-blue);
  --color-surface: var(--bl-white);
  --color-surface-alt: var(--bl-white);
  --color-text: var(--bl-black);
  --color-text-muted: var(--bl-black);
  --color-heading: var(--bl-black);
  --color-accent: var(--bl-blue);
  --color-on-accent: var(--bl-white);
  --color-link: var(--bl-blue);
  --color-link-hover-bg: var(--bl-blue);
  --color-link-hover-text: var(--bl-white);
  --color-highlight: var(--bl-light-blue);
  --color-highlight-text: var(--bl-black);
  --color-border: var(--bl-black);
  --color-focus: var(--bl-blue);
  --color-header-bg: var(--bl-blue);
  --color-header-text: var(--bl-white);
  --color-footer-bg: var(--bl-black);
  --color-footer-text: var(--bl-white);
  --color-footer-link: var(--bl-light-blue);
  --color-bar-bg: transparent;
  --color-bar-text: var(--bl-black);
  --color-placeholder-bg: var(--bl-light-blue);
  --color-placeholder-text: var(--bl-black);

  --font-body: "M PLUS 1 Code", "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-display: "Boxing", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --font-mono: var(--font-body);
  --font-size-base: 1.125rem; /* the letters are narrow and small, so a step up */
  --line-height: 1.6;
  --heading-weight: 400;
  --display-weight: 400;
  --display-color: var(--bl-blue);
  --display-shadow: none;
  --display-size: clamp(2.4rem, 6vw, 4.5rem);
  /* Big enough to span most of the page, small enough to stay on one line
     (in Boxing the title is about 7.5 times as wide as its font size, and
     the page is at most 1120px wide) */
  --display-size-hero: clamp(2.5rem, 11vw, 9.25rem);
  --display-line-height: 1;
  --display-letter-spacing: -0.02em;

  --radius: 0;
  --border-width: 2px;
  --shadow: none;
  --shadow-hover: none;
  --duration: 160ms;
  --easing: ease;
  --page-pattern: none;

  scrollbar-color: var(--bl-blue) var(--bl-white);
}

/* ---- Type ---- */
[data-theme="berliner"] h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
}
[data-theme="berliner"] h3 {
  font-size: 1.4rem;
  line-height: 1.25;
}
[data-theme="berliner"] .statement {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}
[data-theme="berliner"] .eyebrow,
[data-theme="berliner"] .facts dt,
[data-theme="berliner"] .card__facts dt,
[data-theme="berliner"] .contact-list__label,
[data-theme="berliner"] .pager__label,
[data-theme="berliner"] .post-meta {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="berliner"] a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
[data-theme="berliner"] a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Header: electric blue with white, uppercase links (Figma). On Home
   it floats over the tunnel photo instead (see "Home hero" below). ---- */
[data-theme="berliner"] .site-header {
  --color-focus: var(--bl-white);
  border-bottom: 0;
}
[data-theme="berliner"] .site-name {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="berliner"] .site-name:hover {
  background: none;
  color: var(--bl-white);
  text-decoration: underline;
}
[data-theme="berliner"] .site-nav a,
[data-theme="berliner"] .nav-menu summary,
[data-theme="berliner"] .menu-toggle {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="berliner"] .site-nav a:hover,
[data-theme="berliner"] .site-nav a[aria-current],
[data-theme="berliner"] .nav-menu summary:hover,
[data-theme="berliner"] .nav-menu summary.is-current,
[data-theme="berliner"] .menu-toggle:hover,
[data-theme="berliner"] .menu-toggle[aria-expanded="true"] {
  background: var(--bl-white);
  border-color: var(--bl-white);
  color: var(--bl-blue);
}
/* The "Case studies" panel is white with black links, so on wide screens
   its hover is light-blue */
@media (min-width: 56rem) {
  [data-theme="berliner"] .site-nav .nav-menu__list {
    --color-focus: var(--bl-blue);
    border-color: var(--bl-black);
    text-transform: none;
  }
  [data-theme="berliner"] .site-nav .nav-menu__list a:hover,
  [data-theme="berliner"] .site-nav .nav-menu__list a[aria-current] {
    background: var(--bl-light-blue);
    border-color: transparent;
    color: var(--bl-black);
  }
}

/* ---- Header from 56rem to 60rem: the uppercase, letter-spaced links need
   about 920px for name, links and dropdown on one row, so until then the
   tablet layout carries on (base.css): links and dropdown on a row of their
   own under the name, the word "Home" lined up with the name, and the
   same smaller text. (Lina, 2026-11-07: the links wrapped onto two lines
   around 900px.) ---- */
@media (min-width: 56rem) and (max-width: 59.99rem) {
  [data-theme="berliner"] .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name name"
      "nav  switch";
  }
  [data-theme="berliner"] .site-nav > ul {
    justify-content: flex-start;
    margin-left: calc(-1 * (var(--space-xs) + var(--border-width)));
  }
  html[data-theme="berliner"] .site-header .site-nav a,
  html[data-theme="berliner"] .site-header .nav-menu summary {
    font-size: 0.875rem;
  }
  [data-theme="berliner"] .theme-switcher {
    font-size: 0.8rem;
  }
}

/* ---- Theme dropdown ---- */
[data-theme="berliner"] .theme-switcher select {
  border-color: var(--bl-white);
  background: var(--bl-white);
  color: var(--bl-black);
}

/* ---- "Buttons": underlined text links, as in the Figma sample ("My case
   studies.", "Book a coffee."). Blue block with white text on hover. ---- */
[data-theme="berliner"] .button,
[data-theme="berliner"] .button--secondary {
  padding: 0.15rem 0.3rem;
  margin-left: -0.3rem;
  border: 0;
  background: transparent;
  color: var(--bl-black);
  font-family: var(--font-body);
  font-size: 1.35rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
[data-theme="berliner"] .button:hover,
[data-theme="berliner"] .button--secondary:hover {
  background: var(--bl-blue);
  color: var(--bl-white);
  transform: none;
}
[data-theme="berliner"] .button-row {
  gap: var(--space-xs) var(--space-l);
}

/* ---- Sub-page headers: a solid blue band with the white slab title ---- */
[data-theme="berliner"] .page-header {
  --color-text: var(--bl-white);
  --color-text-muted: var(--bl-light-blue);
  --color-heading: var(--bl-white);
  --color-link: var(--bl-white);
  --color-link-hover-bg: var(--bl-white);
  --color-link-hover-text: var(--bl-blue);
  --color-focus: var(--bl-white);
  --display-color: var(--bl-white);
  border-bottom: 0;
  background: var(--bl-blue);
  color: var(--bl-white);
}

/* ---- Numbers band: blue, with white slab figures ---- */
[data-theme="berliner"] .section--proof {
  --color-text: var(--bl-white);
  --color-heading: var(--bl-white);
  --color-focus: var(--bl-white);
  --display-color: var(--bl-white);
  background: var(--bl-blue);
  color: var(--bl-white);
}
[data-theme="berliner"] .stat__label {
  font-size: 1.4rem;
  line-height: 1.25;
}

/* ---- Home portrait: Lina's blue-tinted photo, square instead of round
   (src/assets/img/berliner/portrait-*.webp, made with `npm run berliner`) */
[data-theme="berliner"] .portrait {
  display: none;
}
[data-theme="berliner"] .portrait--berliner {
  display: block;
  border-radius: 0;
}

/* ---- My values: the same blue as the numbers band, with a white heading
   (10.8; black would be 1.9). The cards stay white with black text. ---- */
[data-theme="berliner"] .section--values {
  --color-heading: var(--bl-white);
  --color-focus: var(--bl-white);
  background: var(--bl-blue);
}
[data-theme="berliner"] .section--values .card {
  --color-heading: var(--bl-black);
  --color-focus: var(--bl-blue);
}

/* ---- Cards: white, square, black 2px frame, no window title bar ---- */
[data-theme="berliner"] .card__bar {
  display: none;
}
[data-theme="berliner"] .card__body h3,
[data-theme="berliner"] .card__title,
[data-theme="berliner"] .post-card .card__body .card__title {
  font-size: 1.4rem;
  line-height: 1.25;
}
[data-theme="berliner"] .card--lead .card__title,
[data-theme="berliner"] .post-card--featured .card__body .card__title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}
[data-theme="berliner"] .card__more {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Hover (case studies, blog posts, What I do and My values): a hard blue
   shadow drops out to the lower right; light-blue on the blue My values
   band, where blue wouldn't show */
[data-theme="berliner"] :is(.card--link, .section--services .card, .section--values .card) {
  transition: box-shadow var(--duration) var(--easing);
}
@media (hover: hover) {
  [data-theme="berliner"] :is(.card--link, .section--services .card, .section--values .card):hover {
    box-shadow: 8px 8px 0 var(--bl-blue);
    transform: none;
  }
  [data-theme="berliner"] .section--values .card:hover {
    box-shadow: 8px 8px 0 var(--bl-light-blue);
  }
}
[data-theme="berliner"] .card--link:focus-within {
  box-shadow: 8px 8px 0 var(--bl-blue);
}

/* ---- How I work with AI: the tool logos flat in the Berliner blue, with
   no sticker shadow (layout and hover wiggle in base.css) ---- */
[data-theme="berliner"] .ai-logos__sticker {
  color: var(--bl-blue);
}

/* ---- About page bands (Books, More projects; layout in base.css): the
   same blue as the numbers and My values bands on Home, with white text and
   headings (10.8) and light-blue links (6.2). On the blue the covers' hover
   shadow turns light blue, like the My values cards. ---- */
[data-theme="berliner"] .about-band {
  --about-band-bg: var(--bl-blue);
  --color-heading: var(--bl-white);
  --color-link: var(--bl-light-blue);
  --color-link-hover-bg: var(--bl-light-blue);
  --color-link-hover-text: var(--bl-blue);
  --color-focus: var(--bl-white);
  color: var(--bl-white);
}
[data-theme="berliner"] .about-band .books__link:focus-visible .books__cover {
  box-shadow: 8px 8px 0 var(--bl-light-blue);
}
@media (hover: hover) {
  [data-theme="berliner"] .about-band .books__link:hover .books__cover {
    box-shadow: 8px 8px 0 var(--bl-light-blue);
  }
}

/* ---- Book covers (About): square with the cards' black frame, and the
   same hard blue shadow on hover or keyboard focus ---- */
[data-theme="berliner"] .books {
  gap: var(--space-m);
}
[data-theme="berliner"] .books__cover {
  transition: box-shadow var(--duration) var(--easing);
}
[data-theme="berliner"] .books__link:focus-visible .books__cover {
  box-shadow: 8px 8px 0 var(--bl-blue);
}
@media (hover: hover) {
  [data-theme="berliner"] .books__link:hover .books__cover {
    box-shadow: 8px 8px 0 var(--bl-blue);
  }
}

/* ---- Blog tags ---- */
[data-theme="berliner"] .tag-list li {
  border-color: var(--bl-light-blue);
  background: var(--bl-light-blue);
  color: var(--bl-black);
}

/* ---- Talent stack and Pyramid: see-through blue shapes, black labels
   (12.1 on one shape, 7.3 where two overlap; no label sits where three
   do). The talent stack uses rectangles instead of circles here, like city
   blocks on a map (the rectangles are in the markup for every theme,
   hidden unless swapped in). ---- */
[data-theme="berliner"] .talent-stack {
  --talent-circle: var(--bl-blue);
  --talent-circle-opacity: 0.25;
  --talent-text: var(--bl-black);
  --talent-font: var(--font-body);
}
[data-theme="berliner"] .talent-stack__bubble circle {
  display: none;
}
[data-theme="berliner"] .talent-stack__block {
  display: inline;
}
/* "AI adoption" and "Service architecture & strategy" move out a little,
   and the big middle block a little down (blockShift in talentStack.json),
   so no label sits where blocks overlap. translate adds to the bounce-in's
   transform. */
[data-theme="berliner"] .talent-stack__bubble {
  translate: var(--block-shift, 0px 0px);
}
[data-theme="berliner"] .talent-stack__list li {
  border-color: var(--bl-black);
}
[data-theme="berliner"] .pyramid {
  --pyramid-fill: var(--bl-blue);
  --pyramid-fill-opacity: 0.25;
  --pyramid-text: var(--bl-black);
  --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="berliner"]:not([data-motion="paused"]) .pyramid__level:hover polygon {
    animation: pyramid-pulse 1s ease-in-out infinite;
  }
}

/* Blocks bounce in one by one when the graphic scrolls into view, and a
   block (not its label) pulses while the cursor is over it: the same motion as the
   other themes (keyframes 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="berliner"]:not([data-motion="paused"]) .talent-stack[data-reveal="waiting"] .talent-stack__bubble {
    opacity: 0;
  }
  html[data-theme="berliner"]: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="berliner"]:not([data-motion="paused"]) .talent-stack[data-reveal="in"] .talent-stack__bubble:hover .talent-stack__block {
    animation: talent-pulse 1s ease-in-out infinite;
  }
}

/* ---- Placeholders, pager, quotes ---- */
[data-theme="berliner"] .placeholder {
  border: 2px solid var(--bl-black);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="berliner"] .pager__link {
  font-size: 1.2rem;
}
[data-theme="berliner"] .pager__link:hover {
  border-color: var(--bl-blue);
  background: var(--bl-blue);
  color: var(--bl-white);
}
[data-theme="berliner"] .prose blockquote {
  border-left: 6px solid var(--bl-blue);
  font-style: normal;
  font-size: 1.3rem;
}

/* ---- Footer: black, with white text and light-blue links ---- */
[data-theme="berliner"] .site-footer {
  --color-focus: var(--bl-light-blue);
}
[data-theme="berliner"] .site-footer__heading {
  font-size: 1.8rem;
}

/* ==========================================================================
   Home hero (src/assets/img/berliner/, made from assets-source/berliner/
   with `npm run berliner`). Laid out as in the Figma sample:

     [ header, floating over the photo                         ]
     [ blue tunnel photo, full width                            ]
     [ HI! I'M LINA.  (standing on the photo's bottom edge)     ]
       eyebrow, intro and links          | grey bunker photo,
                                         | out to the right edge
     [ blue block, from the left edge ]  |
     [ blue numbers band ...                                    ]

   The intro's wrapper is "display: contents", so the title, text and photo
   are placed directly in the hero's grid. Only the order on screen changes:
   the title still comes first in the page for screen readers.
   ========================================================================== */

/* Home only: the header floats over the photo, without its blue */
html[data-theme="berliner"]:has(.hero) .site-header {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 10;
  background: transparent;
}
/* ...but blue while the phone menu is open, as it then lies over the title */
html[data-theme="berliner"]:has(.hero) .site-header[data-menu="open"] {
  background: var(--bl-blue);
}

[data-theme="berliner"] .hero {
  --block-height: clamp(5rem, 11vw, 9rem); /* the blue block at the bottom */
  isolation: isolate;
  overflow: clip;
  padding-block: 0 var(--block-height);
  background-color: var(--color-bg);
}
[data-theme="berliner"] .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--space-xl);
}
[data-theme="berliner"] .hero__text {
  display: contents;
}

/* The photo band. It is the h1 itself, pulled out to the screen's edges
   (its padding puts the text back in line with the page). The header's
   height is kept free at the top. Blue fades at the top and bottom keep the
   white menu and title readable over the lit doorway. */
[data-theme="berliner"] .hero h1 {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 68vh, 44rem);
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--space-l);
  padding: 10rem calc(50vw - 50%) 0;
  background:
    linear-gradient(to bottom, rgb(0 2 211 / 0.8), rgb(0 2 211 / 0) 30%, rgb(0 2 211 / 0) 40%, rgb(0 2 211 / 0.75) 85%),
    url("/assets/img/berliner/tunnel.webp") center 30% / cover no-repeat,
    var(--bl-blue);
}
[data-theme="berliner"] .hero h1 .display-title {
  margin: 0;
  color: var(--bl-white);
  line-height: 1;
  /* Trim the line box to the letters, so they stand right on the edge */
  text-box: trim-both cap alphabetic;
}
/* Phones: bigger, on two lines ("Hi! I'm / Lina."), poster style */
@media (max-width: 35.99rem) {
  [data-theme="berliner"] .hero h1 .display-title {
    font-size: 17vw;
  }
}
/* No eyebrow ("Service Architect | AI adoption | Service design") in this
   theme: the intro starts right under the photo band (Lina's choice) */
[data-theme="berliner"] .hero .eyebrow {
  display: none;
}
[data-theme="berliner"] .hero .button-row {
  margin-block: 36px 0;
}

/* The bunker photo, running off the right edge of the screen and down into
   the blue block, which shows through it (multiply) where they overlap */
[data-theme="berliner"] .theme-art--hero {
  max-width: none;
  aspect-ratio: 3 / 2;
  margin: var(--space-l) 0 calc(-0.6 * var(--block-height));
  margin-right: calc((min(100vw - 2 * var(--gutter), var(--container)) - 100vw) / 2);
  width: auto;
}
[data-theme="berliner"] .theme-art--hero span:nth-child(1) {
  inset: 0;
  background: url("/assets/img/berliner/bunker.webp") center / cover no-repeat;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
[data-theme="berliner"] .theme-art--hero span:nth-child(n + 2) {
  display: none;
}
[data-theme="berliner"] .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 72%; /* reaches in under the bottom-left of the photo */
  height: var(--block-height);
  background: var(--bl-blue);
  pointer-events: none;
}
/* ...which then runs straight into the blue numbers band */
[data-theme="berliner"] .hero + .section--proof {
  padding-top: var(--space-xl);
}

@media (min-width: 52rem) {
  [data-theme="berliner"] .hero__grid {
    grid-template-columns: 7fr 5fr;
  }
  [data-theme="berliner"] .hero__text > * {
    grid-column: 1;
  }
  [data-theme="berliner"] .theme-art--hero {
    grid-column: 2;
    grid-row: 2 / span 4;
    align-self: end;
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }
}

@media (forced-colors: active) {
  [data-theme="berliner"] .hero h1 {
    background: none;
  }
  [data-theme="berliner"] .hero h1 .display-title {
    color: CanvasText;
  }
  [data-theme="berliner"] .hero::after,
  [data-theme="berliner"] .theme-art--hero {
    display: none;
  }
}