/* ─────────────────────────────────────────────────────────────────────
   portfolio.css — reusable component library for /portfolio/<slug> pages.
   Inherits brand tokens from each page's :root (mirrors about/index).
   Components are prefixed `pf-*` (page chrome) and `c-*` (content blocks).
   ───────────────────────────────────────────────────────────────────── */

/* Cross-document View Transitions — opt in. Chrome 126+/Edge 126+. */
@view-transition { navigation: auto; }

/* ═══ BRAND TOKENS — single source of truth for portfolio detail pages. */
:root {
  --bg:           #ffffff;
  --bg-2:         #f7f7f7;
  --ink:          #0a0a0a;
  --ink-2:        #222222;
  --ink-dim:      #666666;
  --ink-low:      #767676;
  --line:         #dddddd;
  --green:        #127a12;
  --green-bright: #00cc00;
  --green-soft:   #d5f0c0;
  --green-deep:   #033003;
  --lavender:     #ebe3ff;
  --highlight:    #f0ed5e;
  --red:          #9d3a2a;

  /* ─── TYPE FAMILIES (kept, do not add a 5th — see PORTFOLIO-GUIDELINES.md) ─── */
  --font-serif:   'Newsreader', Georgia, serif;
  --font-display: 'Fraunces', serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ─── TYPE SIZES — only the four that recur. Component-specific values stay inline. ─── */
  --text-body:    15px;                       /* prose, answers, dd, .v */
  --text-meta:    11px;                       /* eyebrows, labels, when */
  --text-cta:     12.5px;                     /* nav links, pf-visit, CTA mono */
  --text-quote:   clamp(18px, 2.4vw, 22px);   /* pullquote, narrative__h, summary */
}

/* ═══ A11Y UTILITY ═══ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
  padding: 0; margin: -1px; border: 0;
}

/* ═══ RESET + BASE ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

.top-line {
  height: 5px; width: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 50%, var(--green) 100%);
}

/* ═══ PAGE CHROME — nav, crumb ═══ */
.legal-nav {
  max-width: 720px; margin: 0 auto;
  padding: 24px 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.legal-nav a {
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px dashed var(--ink-low);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.legal-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.legal-nav .brand {
  font-family: 'Fraunces', serif;
  font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em;
  border-bottom: 0;
}
.legal-nav .right { display: inline-flex; align-items: center; gap: 14px; }
@media (max-width: 640px) {
  .legal-nav { padding: 16px 16px 0; font-size: 11.5px; }
  .legal-nav .brand { font-size: 16px; }
}

.crumb-row {
  max-width: 720px; margin: 18px auto 0;
  padding: 0 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-low);
  display: flex; align-items: center; gap: 6px;
}
.crumb-row a {
  color: var(--ink-low); text-decoration: none;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.crumb-row a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumb-row .sep { color: var(--line); }
.crumb-row .here { color: var(--ink-2); border-bottom: 0; }
@media (max-width: 640px) { .crumb-row { padding: 0 16px; margin-top: 14px; } }

/* ═══ HERO (title block above bento) ═══ */
.pf-hero {
  max-width: 720px; margin: 0 auto;
  padding: 24px 24px 24px;
}
@media (max-width: 640px) { .pf-hero { padding: 16px 16px 18px; } }
.pf-headrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pf-title-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-wordmark {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 22px; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.pf-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  line-height: 1; flex: none;
}
.pf-pill--live {
  background: var(--green-soft); color: var(--green-deep);
  border: 1px solid var(--green-deep);
}
.pf-pill--soon {
  background: var(--highlight); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 4px;
}
.pf-pill--neutral {
  background: var(--bg); color: var(--ink-low);
  border: 1px solid var(--line);
}
.pf-visit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px dashed var(--ink-low);
  padding-bottom: 1px; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pf-visit:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }

.pf-h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--ink);
  margin: 6px 0 12px;
  max-width: 22ch;
}
.pf-h1 em { font-style: italic; color: var(--green-deep); font-weight: 500; }

.pf-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-low);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.pf-meta .dot { color: var(--line); }

/* ═══ BENTO HEADER ═══ */
.pf-bento { max-width: 720px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .pf-bento { padding: 0 16px; } }

.bento-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 16 / 9;
}

.bento-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
  display: flex;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.06s ease;
}
/* Vignette only on light tiles — multiply on the dark-green demo tile crushes it. */
.bento-tile:not(.bento-tile--demo)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 110%, rgba(10,10,10,0.06) 0%, transparent 60%);
  mix-blend-mode: multiply;
}
@media (hover: hover) {
  .bento-tile:hover { border-color: var(--ink); box-shadow: 0 6px 28px -10px rgba(10,10,10,0.18); }
}

/* Tile A — keyart */
.bento-tile--keyart { grid-column: 1; grid-row: 1 / 3; }
.bento-tile--keyart img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  display: block;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (hover: hover) {
  .bento-tile--keyart:hover img { transform: scale(1.025); }
}
.bento-tile--keyart .bento-tag {
  position: absolute; left: 12px; top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(10,10,10,0.78);
  padding: 4px 8px; border-radius: 999px;
  z-index: 2;
}

/* Tile B — live demo terminal */
.bento-tile--demo {
  grid-column: 2; grid-row: 1;
  background: var(--green-deep);
  color: var(--green-soft);
  flex-direction: column; justify-content: center;
  padding: 16px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.01em;
}
.bento-tile--demo::before {
  /* Tiny scanline texture for monitor feel. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.bento-tile--demo .demo-prompt { color: var(--green-bright); font-weight: 600; }
.bento-tile--demo .demo-q  { color: #fff; }
.bento-tile--demo .demo-arr { color: rgba(213, 240, 192, 0.72); }
.bento-tile--demo .demo-a  { color: var(--green-soft); }
.bento-tile--demo pre {
  font: inherit; color: inherit;
  white-space: pre; margin: 0;
}
.bento-tile--demo .demo-cursor {
  display: inline-block; width: 6px; height: 11px;
  background: var(--green-bright); margin-left: 2px; vertical-align: middle;
  animation: bento-blink 1.1s steps(2, end) infinite;
}
@keyframes bento-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Tile C — proof stat */
.bento-tile--stat {
  grid-column: 2; grid-row: 2;
  background: var(--bg);
  flex-direction: column; justify-content: center;
  padding: 14px 18px;
  /* Inner ring restores the print-card feel that the base tile no longer carries. */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.bento-tile--stat .stat-n {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(36px, 5.6vw, 56px);
  line-height: 0.95; letter-spacing: -0.03em; color: var(--ink);
  display: block;
}
.bento-tile--stat .stat-l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-low);
  display: block; margin-top: 8px; max-width: 22ch;
  line-height: 1.45;
}
.bento-tile--stat .stat-l em { font-style: italic; color: var(--green-deep); font-weight: 500; }

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    aspect-ratio: auto; gap: 6px;
  }
  .bento-tile--keyart { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
  .bento-tile--demo  { grid-column: 1; grid-row: 2; min-height: 130px; }
  .bento-tile--stat  { grid-column: 2; grid-row: 2; min-height: 130px; }
}

/* ═══ SECTIONS ═══ */
.pf-section { max-width: 720px; margin: 36px auto 0; padding: 0 24px; }
@media (max-width: 640px) { .pf-section { padding: 0 16px; margin-top: 28px; } }
.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 14px; display: inline-block;
}
.section-label::before { content: "// "; color: var(--ink-low); }
.section-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-dim); opacity: 0.85;
  margin: -6px 0 16px; display: block; max-width: 56ch;
}

.pf-prose {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2); max-width: 56ch;
}
.pf-prose p + p { margin-top: 10px; }
.pf-prose em { font-style: italic; color: var(--green-deep); font-weight: 500; }

/* ═══ COMPONENT — KEY/VALUE BUILD LIST ═══ */
.c-build {
  list-style: none; display: flex; flex-direction: column; gap: 0;
  border-top: 1px dashed var(--line);
}
.c-build li {
  border-bottom: 1px dashed var(--line);
  padding: 10px 0;
  display: grid; grid-template-columns: 110px 1fr;
  gap: 14px; align-items: baseline;
}
.c-build .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-low); line-height: 1.4;
  padding-top: 1px; /* nudge mono cap-height onto sans baseline */
}
.c-build .v {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.c-build .v em { font-style: italic; color: var(--green-deep); font-weight: 500; }
@media (max-width: 640px) {
  .c-build li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* ═══ COMPONENT — KPI STRIP (count-up + sparkline) ═══ */
.c-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;
}
.c-kpi {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 14px 12px; background: var(--bg);
  position: relative; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.06s ease;
}
@media (hover: hover) {
  .c-kpi:hover { border-color: var(--ink); }
}
.c-kpi .n {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); display: block;
  font-variant-numeric: tabular-nums;
}
.c-kpi .n em { font-style: italic; color: var(--green-deep); font-weight: 600; }
.c-kpi .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
  display: block; margin-top: 6px;
}
.c-kpi .spark {
  position: absolute; right: 10px; top: 12px;
  width: 60px; height: 18px; opacity: 0.85;
}
.c-kpi .spark path { fill: none; stroke: var(--green-deep); stroke-width: 1.6; }
@media (max-width: 640px) {
  .c-kpis { grid-template-columns: 1fr 1fr; }
  .c-kpis .c-kpi:last-child { grid-column: span 2; }
}

/* ═══ COMPONENT — INLINE BAR GRAPH ═══ */
.c-graph {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); padding: 16px 18px;
}
.c-graph__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.c-graph__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.c-graph__legend {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-low);
}
.c-graph__rows { display: flex; flex-direction: column; gap: 10px; }
.c-graph__row { display: grid; grid-template-columns: 80px 1fr 56px; gap: 12px; align-items: center; }
.c-graph__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
  text-align: left;
}
.c-graph__bar {
  position: relative; height: 14px;
  background: var(--bg-2); border-radius: 4px; overflow: hidden;
}
.c-graph__bar > span {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* Transition (not @keyframes) so var(--w-scale) is interpolated as a resolved
     value — Chrome won't animate var() inside @keyframes without @property. */
  transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--w-delay, 0ms);
}
.c-graph.is-in-view .c-graph__bar > span {
  transform: scaleX(var(--w-scale, 1));
}
.c-graph__bar--neutral > span {
  background: linear-gradient(90deg, var(--ink-low) 0%, var(--ink-2) 100%);
  opacity: 0.55;
}
.c-graph__val {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 14px; letter-spacing: -0.01em; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .c-graph__row { grid-template-columns: 70px 1fr 44px; gap: 8px; }
}

/* ═══ COMPONENT — ACCORDION (FAQ) ═══ */
.c-accordion { display: flex; flex-direction: column; }
.c-accordion details {
  border-top: 1px dashed var(--line);
  padding: 14px 0;
}
.c-accordion details:last-of-type { border-bottom: 1px dashed var(--line); }
.c-accordion summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  /* `quote` token — frågor är frågor; samma typografiska röst som pullquote/narrative-h. */
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: "opsz" 36;
  font-weight: 400; font-style: italic;
  font-size: 17px; letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink);
  transition: color 0.15s ease;
}
.c-accordion summary::-webkit-details-marker { display: none; }
/* The question text is a single flex item so inline flow (incl. <em>) is preserved. */
.c-accordion summary > .q { flex: 1 1 auto; min-width: 0; }
.c-accordion summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px; font-weight: 500; line-height: 1;
  color: var(--ink-low);
  transition: transform 0.25s ease, color 0.15s ease;
}
/* SR-only state hint — flips text via CSS so AT announces "öppna" / "stäng". */
.c-accordion summary > .sr-only::before { content: attr(data-closed-text); }
.c-accordion details[open] summary > .sr-only::before { content: attr(data-open-text); }
.c-accordion details[open] summary::after { content: '−'; color: var(--green-deep); }
.c-accordion summary:hover { color: var(--green-deep); }
.c-accordion .answer {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
  margin-top: 10px; max-width: 56ch;
}
.c-accordion .answer em { font-style: italic; color: var(--green-deep); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .c-accordion details[open] .answer {
    animation: acc-rise 0.3s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  @keyframes acc-rise { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
}

/* ═══ COMPONENT — PULLQUOTE ═══ */
.c-pullquote {
  border-left: 3px solid var(--green-deep);
  padding: 4px 0 4px 22px;
  margin: 0;
}
.c-pullquote blockquote {
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: "opsz" 36;
  font-weight: 400; font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 48ch;
}
.c-pullquote cite {
  display: block; margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
  font-style: normal;
}
.c-pullquote cite::before { content: '— '; color: var(--line); }

/* ═══ COMPONENT — STACK CHIPS ═══ */
.c-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.c-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px;
  line-height: 1.2;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.c-chip:hover { border-color: var(--ink); color: var(--ink); }
.c-chip--accent {
  border-color: var(--green-deep); color: var(--green-deep);
  background: var(--green-soft);
}

/* ═══ COMPONENT — NARRATIVE (PROBLEM / LÖSNING / UTFALL) ═══ */
/* Three vertically-stacked story blocks. Always-visible (not an accordion).
   Each block has a mono eyebrow + serif heading + prose. Reads top-to-bottom
   as a single arc — exactly the rhythm a portfolio reader needs. */
.c-narrative { display: flex; flex-direction: column; gap: 22px; }
.c-narrative__step {
  position: relative;
  padding-left: 22px;
  border-left: 2px solid var(--line);
}
.c-narrative__step--problem  { border-left-color: var(--red); }
.c-narrative__step--solution { border-left-color: var(--green-deep); }
.c-narrative__step--outcome  { border-left-color: var(--green-bright); }
.c-narrative__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-low); display: block; margin-bottom: 6px;
}
.c-narrative__step--problem  .c-narrative__eyebrow { color: var(--red); }
.c-narrative__step--solution .c-narrative__eyebrow { color: var(--green-deep); }
.c-narrative__step--outcome  .c-narrative__eyebrow { color: var(--green); }
.c-narrative__h {
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: "opsz" 36;
  font-weight: 400; font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink); margin-bottom: 8px;
  max-width: 50ch;
}
.c-narrative__h em { font-style: italic; color: var(--green-deep); font-weight: 500; }
.c-narrative__step--problem .c-narrative__h em { color: var(--red); }
.c-narrative__p {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
  max-width: 56ch;
}
.c-narrative__p em { font-style: italic; color: var(--green-deep); font-weight: 500; }
@media (max-width: 640px) { .c-narrative__step { padding-left: 16px; } }

/* ═══ COMPONENT — FAILS (TUI-style attempt log) ═══ */
/* Inspired by terminal TUIs (hermes, nous, k9s). Each fail is rendered as
   a logged "attempt" with a left rail, a numbered header, an animated
   strike glyph, and a FAILED chip. Reveal staggers on intersection. */
.c-fails {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
  font-family: 'IBM Plex Mono', monospace;
  counter-reset: fail;
}
.c-fails li {
  counter-increment: fail;
  position: relative;
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--line);
  /* Pre-reveal state — IntersectionObserver flips .is-in-view on the parent. */
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1),
              border-color 0.4s ease;
}
.c-fails.is-in-view li {
  opacity: 1; transform: translateX(0);
  border-left-color: var(--red);
}
.c-fails.is-in-view li:nth-child(1) { transition-delay: 60ms,  60ms,  120ms; }
.c-fails.is-in-view li:nth-child(2) { transition-delay: 200ms, 200ms, 260ms; }
.c-fails.is-in-view li:nth-child(3) { transition-delay: 340ms, 340ms, 400ms; }
.c-fails.is-in-view li:nth-child(4) { transition-delay: 480ms, 480ms, 540ms; }
.c-fails.is-in-view li:nth-child(5) { transition-delay: 620ms, 620ms, 680ms; }

.c-fails__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.c-fails .num::before {
  content: '#' counter(fail, decimal-leading-zero);
}
.c-fails .num {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}
.c-fails .glyph {
  width: 14px; height: 14px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--red);
}
.c-fails .glyph line {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.c-fails.is-in-view .glyph line { stroke-dashoffset: 0; }
.c-fails.is-in-view li:nth-child(1) .glyph line { transition-delay: 220ms; }
.c-fails.is-in-view li:nth-child(2) .glyph line { transition-delay: 360ms; }
.c-fails.is-in-view li:nth-child(3) .glyph line { transition-delay: 500ms; }
.c-fails.is-in-view li:nth-child(4) .glyph line { transition-delay: 640ms; }
.c-fails.is-in-view li:nth-child(5) .glyph line { transition-delay: 780ms; }
.c-fails.is-in-view .glyph line:nth-child(2) { transition-delay: calc(var(--g2-delay, 220ms) + 80ms); }

.c-fails .status {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 2px 6px; border-radius: 3px;
  line-height: 1.2;
  background: var(--bg);
}
.c-fails .rule {
  flex: 1; height: 1px;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--red) 30%, transparent),
    transparent);
}

.c-fails .title {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink);
  margin-bottom: 4px;
}
.c-fails .why {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.01em; line-height: 1.55;
  color: var(--ink-dim);
  display: flex; gap: 6px;
  max-width: 64ch;
}
.c-fails .why::before {
  content: '↳';
  color: var(--ink-low);
  flex-shrink: 0;
}
.c-fails .why em {
  font-style: normal; /* mono is already enough emphasis */
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .c-fails li,
  .c-fails .glyph line { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

@media (max-width: 640px) {
  .c-fails li { padding-left: 14px; }
  .c-fails .why { font-size: 11.5px; }
}

/* ═══ COMPONENT — DECISIONS (Övervägdes / Valdes / Varför) ═══ */
.c-decisions {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); overflow: hidden;
}
.c-decisions__head, .c-decisions__row {
  display: grid; grid-template-columns: 1fr 1fr 1.6fr;
  gap: 0;
}
.c-decisions__head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.c-decisions__head > span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-low);
  padding: 10px 14px;
  border-right: 1px dashed var(--line);
}
.c-decisions__head > span:last-child { border-right: 0; }
.c-decisions__row {
  border-bottom: 1px dashed var(--line);
}
.c-decisions__row:last-child { border-bottom: 0; }
.c-decisions__row > span {
  padding: 12px 14px;
  border-right: 1px dashed var(--line);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.c-decisions__row > span:last-child { border-right: 0; }
.c-decisions__row .considered {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; color: var(--ink-low);
  text-decoration: line-through;
  text-decoration-color: var(--ink-low);
  text-decoration-thickness: 1px;
}
.c-decisions__row .chosen {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 14.5px; color: var(--green-deep);
  letter-spacing: -0.005em;
}
.c-decisions__row .chosen em { font-style: italic; }
.c-decisions__row .why em { font-style: italic; color: var(--green-deep); font-weight: 500; }

/* ─── Modifier: --impact ─── leans the row toward consequence.
   The "why" cell carries an arrow glyph and a soft green left-edge,
   visualising the cause→effect relationship between "valdes" and "varför". */
.c-decisions--impact .c-decisions__row .why {
  position: relative;
  background: linear-gradient(to right, color-mix(in oklab, var(--green-soft) 38%, transparent) 0%, transparent 28px);
  padding-left: 28px;
}
.c-decisions--impact .c-decisions__row .why::before {
  content: '→';
  position: absolute;
  left: 10px; top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--green-bright);
}
@media (max-width: 640px) {
  .c-decisions--impact .c-decisions__row .why {
    padding-left: 32px;
    background: linear-gradient(to right, color-mix(in oklab, var(--green-soft) 38%, transparent) 0%, transparent 32px);
  }
  .c-decisions--impact .c-decisions__row .why::before { left: 14px; top: 8px; }
}

@media (max-width: 640px) {
  .c-decisions__head { display: none; }
  .c-decisions__row {
    grid-template-columns: 1fr;
    padding: 6px 0;
  }
  .c-decisions__row > span {
    border-right: 0; border-bottom: 0;
    padding: 6px 14px;
  }
  .c-decisions__row .considered::before { content: "övervägdes: "; color: var(--ink-low); text-decoration: none; }
  .c-decisions__row .chosen::before { content: "valdes: "; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-right: 6px; }
  .c-decisions__row .why::before { content: "varför: "; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-low); margin-right: 6px; }
}

/* ═══ COMPONENT — HEATMAP CALENDAR (GitHub-style) ═══ */
/* 53-week × 7-day grid. Each cell is a CSS-grid square colored by intensity 0-4.
   Intensity is set per-cell via inline style="--lvl:N". No JS required for layout. */
.c-heatmap {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); padding: 14px 16px 12px;
  overflow: hidden;
}
.c-heatmap__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.c-heatmap__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.c-heatmap__legend {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--ink-low);
  display: flex; align-items: center; gap: 4px;
}
.c-heatmap__legend .swatch {
  width: 9px; height: 9px; border-radius: 2px;
  display: inline-block; background: var(--bg-2);
  border: 1px solid var(--line);
}
.c-heatmap__legend .swatch[data-lvl="1"] { background: #d5f0c0; border-color: #d5f0c0; }
.c-heatmap__legend .swatch[data-lvl="2"] { background: #88d077; border-color: #88d077; }
.c-heatmap__legend .swatch[data-lvl="3"] { background: #2fa12f; border-color: #2fa12f; }
.c-heatmap__legend .swatch[data-lvl="4"] { background: var(--green-deep); border-color: var(--green-deep); }
.c-heatmap__grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.c-heatmap__cell {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.c-heatmap__cell[style*="--lvl:1"] { background: #d5f0c0; border-color: #cce6b8; }
.c-heatmap__cell[style*="--lvl:2"] { background: #88d077; border-color: #7ec46d; }
.c-heatmap__cell[style*="--lvl:3"] { background: #2fa12f; border-color: #298f29; }
.c-heatmap__cell[style*="--lvl:4"] { background: var(--green-deep); border-color: var(--green-deep); }
.c-heatmap__months {
  display: flex; gap: 0; margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-low);
}
.c-heatmap__months span { flex: 1; }

/* ═══ COMPONENT — CHANNEL MIX (stacked bar) ═══ */
/* One horizontal bar split into segments by channel %. Reads as "where did
   the audience come from" without needing a real chart library. */
.c-channels {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); padding: 14px 16px;
}
.c-channels__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px; display: block;
}
.c-channels__bar {
  display: flex; height: 14px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
}
.c-channels__bar > span {
  display: block; height: 100%;
  width: var(--pct, 0%);
  transition: filter 0.2s ease;
}
.c-channels__bar > span:hover { filter: brightness(0.92); }
.c-channels__legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ink-2);
}
.c-channels__legend li { display: flex; align-items: center; gap: 6px; }
.c-channels__legend .dot {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.c-channels__legend .pct {
  color: var(--ink-low); font-variant-numeric: tabular-nums;
}

/* ═══ COMPONENT — CAMPAIGN CARD (Mål/Hypotes/Mätning/Resultat) ═══ */
.c-campaign {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); overflow: hidden;
}
.c-campaign__head {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.c-campaign__name {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em; color: var(--ink);
}
.c-campaign__date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
}
.c-campaign__body {
  padding: 14px 16px 16px;
  display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px;
  align-items: baseline;
}
.c-campaign__body dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-low); padding-top: 1px;
}
.c-campaign__body dd {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.c-campaign__body dd em { font-style: italic; color: var(--green-deep); font-weight: 500; }
.c-campaign__body dd b { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .c-campaign__body { grid-template-columns: 1fr; gap: 4px 0; }
  .c-campaign__body dt { padding-top: 8px; }
  .c-campaign__body dt:first-child { padding-top: 0; }
}

/* ═══ COMPONENT — PRESS STRIP (logo / mention row) ═══ */
.c-press {
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 14px 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.c-press__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-low); margin-right: 4px;
}
.c-press a, .c-press span.c-press__item {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px;
  letter-spacing: -0.005em; color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.c-press a:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }
.c-press .sep { color: var(--line); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* ═══ COMPONENT — TOOLTIP (CSS-only on hover/focus) ═══ */
/* Use on inline terms: <span class="c-tip" data-tip="...">3:12</span>
   Pure CSS — no JS, no popover API dependency, works everywhere. */
.c-tip {
  position: relative;
  border-bottom: 1px dotted var(--ink-low);
  padding-bottom: 1px;
  cursor: help;
}
.c-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 220px; max-width: 320px;
  padding: 9px 12px;
  background: var(--ink); color: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; line-height: 1.5; letter-spacing: 0.01em;
  font-style: normal; font-weight: 400;
  border-radius: 8px;
  white-space: normal; text-align: left;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0.18s ease;
  z-index: 50;
  box-shadow: 0 12px 32px -10px rgba(10,10,10,0.32);
}
.c-tip::before {
  content: '';
  position: absolute;
  left: 50%; bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 50;
}
.c-tip:hover, .c-tip:focus-visible { outline: none; }
.c-tip:hover::after, .c-tip:focus-visible::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.c-tip:hover::before, .c-tip:focus-visible::before {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .c-tip::after, .c-tip::before { transition: none; }
}

/* ═══ COMPONENT — CMD+K SPOTLIGHT ═══ */
.c-cmdk { position: fixed; inset: 0; z-index: 100; display: none; }
.c-cmdk[data-open] { display: block; }
.c-cmdk__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: cmdk-fade 0.18s ease;
}
.c-cmdk__panel {
  position: absolute;
  left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  background: var(--bg);
  border: 1px solid var(--ink-low);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.35);
  overflow: hidden;
  animation: cmdk-rise 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.c-cmdk__input {
  width: 100%; appearance: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 1.4;
  color: var(--ink); background: var(--bg);
  border: 0; outline: 0;
  padding: 16px 18px;
  border-bottom: 1px dashed var(--line);
}
.c-cmdk__input::placeholder { color: var(--ink-low); }
.c-cmdk__list {
  list-style: none; max-height: 60vh; overflow-y: auto;
  padding: 6px 0;
}
.c-cmdk__item {
  padding: 10px 18px;
  display: grid; grid-template-columns: 80px 1fr 60px; gap: 12px;
  align-items: baseline;
  cursor: pointer;
  transition: background 0.1s ease;
}
.c-cmdk__item[hidden] { display: none; }
.c-cmdk__item:hover, .c-cmdk__item[aria-selected="true"] {
  background: var(--bg-2);
}
.c-cmdk__item .kind {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-low);
}
.c-cmdk__item .label {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 15px; color: var(--ink); letter-spacing: -0.005em;
}
.c-cmdk__item .label em { font-style: italic; color: var(--green-deep); font-weight: 600; }
.c-cmdk__item .url {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--ink-low); text-align: right;
}
.c-cmdk__hint {
  display: flex; justify-content: space-between;
  padding: 8px 18px;
  border-top: 1px dashed var(--line);
  background: var(--bg-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--ink-low); letter-spacing: 0.04em;
}
.c-cmdk__hint kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
}
.c-cmdk__empty {
  padding: 16px 18px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; color: var(--ink-low);
}
@keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdk-rise { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .c-cmdk__overlay, .c-cmdk__panel { animation: none; }
}

/* The hint pill on the page that tells users Cmd+K exists */
.c-cmdk-launcher {
  position: fixed; right: 18px; bottom: 18px;
  z-index: 50;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 7px 11px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px -10px rgba(10,10,10,0.18);
  cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.c-cmdk-launcher:hover { border-color: var(--ink); color: var(--ink); }
.c-cmdk-launcher:active { transform: scale(0.98); }
.c-cmdk-launcher kbd {
  font-family: inherit; font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .c-cmdk-launcher { display: none; } /* mobile users use Tap-to-search via the panel itself */
}

/* ═══ MODIFIER — PLACEHOLDER CARD ═══ */
/* Use when a card has no case page yet — visually present but not clickable.
   Signals "nothing to look at here" without removing the project from the grid. */
.pf-card--placeholder { cursor: default; border-style: dashed; border-color: var(--ink-low); }
.pf-card--placeholder .pf-card__media { position: relative; }
.pf-card--placeholder .pf-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0) 0 14px,
    rgba(10, 10, 10, 0.06) 14px 28px);
}
.pf-card--placeholder .pf-card__media img { filter: grayscale(0.4) opacity(0.7); }
@media (hover: hover) {
  .pf-card--placeholder:hover { border-color: var(--ink-low); box-shadow: none; }
  .pf-card--placeholder:hover .pf-card__media img { transform: none; }
  .pf-card--placeholder:hover .pf-card__title { color: var(--ink); }
}
.pf-card--placeholder:active { transform: none; }

/* ═══ COMPONENT — COMING SOON ═══ */
/* Honest placeholder for sections that don't yet have full content.
   Use as a section-level callout OR as a small inline pill on cards. */
.c-soon {
  border: 1px dashed var(--ink-low);
  border-radius: 12px;
  background: repeating-linear-gradient(135deg,
    var(--bg-2) 0 12px,
    var(--bg) 12px 24px);
  padding: 18px 20px;
  display: flex; gap: 12px; align-items: flex-start;
}
.c-soon__mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--highlight);
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--ink);
  white-space: nowrap;
  line-height: 1.3;
  flex-shrink: 0;
}
.c-soon__body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  max-width: 56ch;
}
.c-soon__body em { font-style: italic; color: var(--green-deep); font-weight: 500; }
.c-soon__body b { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .c-soon { flex-direction: column; gap: 8px; padding: 16px; }
}

/* Inline coming-soon chip (e.g. inside a card meta row) */
.c-soon-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--highlight);
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--ink);
  line-height: 1.2;
  display: inline-block;
}

/* ═══ COMPONENT — TIMELINE ═══ */
.c-timeline {
  list-style: none; position: relative;
  padding-left: 18px;
}
.c-timeline::before {
  content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.c-timeline li {
  position: relative; padding-bottom: 14px;
  display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: baseline;
}
.c-timeline li::before {
  content: ''; position: absolute; left: -18px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--green-deep);
}
.c-timeline li:last-of-type { padding-bottom: 0; }
.c-timeline .when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
}
.c-timeline .what {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.c-timeline .what em { font-style: italic; color: var(--green-deep); font-weight: 500; }
@media (max-width: 640px) {
  .c-timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ═══ VISIT ROW + BUTTON ═══ */
.pf-visit-row {
  max-width: 720px; margin: 36px auto 0; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
}
@media (max-width: 640px) { .pf-visit-row { padding: 0 16px; } }
.pf-visit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--bg); background: var(--ink);
  text-decoration: none;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--ink);
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.pf-visit-btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.pf-visit-btn:active { transform: scale(0.99); }
.pf-visit-btn svg { width: 13px; height: 13px; }
.pf-visit-secondary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--ink-low);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-visit-secondary:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }

/* ═══ PAGER + FOOTER ═══ */
.pf-pager {
  max-width: 720px; margin: 56px auto 0;
  padding: 18px 24px 0;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-low);
}
.pf-pager a {
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px dashed var(--ink-low); padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-pager a:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }
@media (max-width: 640px) { .pf-pager { padding: 16px 16px 0; } }

.pf-footer {
  max-width: 720px; margin: 24px auto 0;
  padding: 18px 24px 56px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.pf-footer a {
  color: var(--ink-low); text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.pf-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer-signature {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-low); opacity: 0.6;
}
@media (max-width: 640px) { .pf-footer { padding: 16px 16px 48px; } }

/* ═══ SUBTLE PAGE REVEAL ═══ */
/* Sections opt into the cascade with style="--pf-i: N" — order-stable on insert/move. */
@media (prefers-reduced-motion: no-preference) {
  .pf-hero, .pf-bento, .pf-section, .pf-visit-row {
    animation: pf-rise 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  .pf-bento     { animation-delay: 60ms; }
  .pf-section   { animation-delay: calc(120ms + (var(--pf-i, 1) - 1) * 40ms); }
  .pf-visit-row { animation-delay: 380ms; }
}
@keyframes pf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ COMPONENT — HERO EYEBROW ═══ */
.pf-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-low);
  margin: 0 0 10px;
}

/* ═══ COMPONENT — NARRATIVE PRE (broken-output example) ═══ */
.c-narrative__pre {
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.6;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 6px; padding: 12px 14px;
  margin-top: 14px; white-space: pre-wrap; word-break: break-word;
  color: var(--ink);
}

/* ═══ COMPONENT — SIGN-OFF LINE ═══ */
.pf-signoff {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 36;
  font-weight: 400; font-style: italic;
  font-size: var(--text-quote);
  letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink-dim);
  margin-top: 18px;
}

/* ═══ COMPONENT — PILL VARIANT: APPLICATION ═══ */
.pf-pill--application {
  background: var(--green-soft);
  color: var(--green-deep);
  border: 1px solid var(--green-deep);
}

/* ═══ COMPONENT — AGENT SURFACE STRIP ═══ */
.pf-agent-strip {
  max-width: 720px; margin: 0 auto;
  padding: 10px 24px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--line);
}
.pf-agent-strip .label {
  font-family: var(--font-mono); font-size: var(--text-meta);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-low); white-space: nowrap;
}
.pf-agent-strip a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--green-deep); background: var(--green-soft);
  border: 1px solid var(--green-deep); padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; text-decoration: none;
  transition: background 0.15s ease;
}
.pf-agent-strip a:hover { background: #c2e8a8; }
.pf-agent-strip .sep { color: var(--line); font-size: 12px; }
@media (max-width: 640px) { .pf-agent-strip { padding: 8px 16px 12px; } }

/* ═══ COMPONENT — CONTACT TERMINAL ═══ */
.pf-contact-terminal {
  max-width: 720px; margin: 48px auto 0; padding: 0 24px;
}
@media (max-width: 640px) { .pf-contact-terminal { padding: 0 16px; } }

.contact-term {
  background: var(--green-deep); border-radius: 14px; overflow: hidden;
  font-family: var(--font-mono); position: relative;
}
.contact-term::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.contact-term__bar {
  background: rgba(255,255,255,0.06); padding: 10px 18px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-term__bar .dots { display: flex; gap: 5px; }
.contact-term__bar .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.15); display: block;
}
.contact-term__bar .title {
  font-size: var(--text-meta); letter-spacing: 0.06em;
  color: rgba(213,240,192,0.5); flex: 1; text-align: center;
}
.contact-term__body { padding: 20px 24px 22px; }
.contact-term__body .prompt-line {
  font-size: 12px; color: rgba(213,240,192,0.55);
  letter-spacing: 0.04em; margin-bottom: 16px;
}
.contact-term__body .prompt-line .prompt {
  color: var(--green-bright); font-weight: 600; margin-right: 6px;
}
.contact-rows { list-style: none; }
.contact-row {
  display: grid; grid-template-columns: 90px 1fr;
  align-items: baseline;
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px;
}
.contact-row + .contact-row {
  border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 10px;
}
.contact-key {
  font-size: var(--text-meta); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(213,240,192,0.5); padding-top: 1px;
}
.contact-val {
  font-size: 13px; letter-spacing: 0.02em; color: var(--green-soft);
}
.contact-val a {
  color: var(--green-soft);
  border-bottom: 1px dashed rgba(213,240,192,0.4); padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-val a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.contact-val .bright { color: var(--green-bright); }
.contact-cursor {
  display: inline-block; width: 7px; height: 13px;
  background: var(--green-bright); vertical-align: -2px;
  animation: bento-blink 1.1s steps(2,end) infinite; margin-left: 4px;
}
@media (max-width: 640px) {
  .contact-term__body { padding: 16px 18px 18px; }
  .contact-row { grid-template-columns: 76px 1fr; }
}

/* ═══ REDUCED MOTION OVERRIDE ═══ */
@media (prefers-reduced-motion: reduce) {
  .bento-tile,
  .bento-tile--keyart img,
  .c-graph__bar > span,
  .bento-tile--demo .demo-cursor,
  .pf-hero, .pf-bento, .pf-section, .pf-visit-row { animation: none !important; transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   FUN · "side quests" easter-egg card
   Full-width <details> at the bottom of the projects column. Collapsed =
   one summary row; open = a list of one-day builds / dead ends. The
   confetti-at-pointer-on-hover is wired up in /assets/portfolio/fun.js.
   ═══════════════════════════════════════════════════════════════════ */

/* fun pill — sits alongside pf-pill--live / --soon / --neutral */
.pf-pill--fun {
  background: var(--lavender); color: var(--green-deep);
  border: 1px solid var(--green-deep);
}

/* container mirrors .pf-index-grid so the card aligns with the project cards */
.fun-wrap { max-width: 720px; margin: 14px auto 0; padding: 0 24px; }
@media (max-width: 640px) { .fun-wrap { padding: 0 16px; } }

.fun {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.fun[open] { border-color: var(--ink); }
@media (hover: hover) {
  .fun:hover { border-color: var(--ink); box-shadow: 0 6px 28px -10px rgba(10,10,10,0.12); }
}

/* summary row (the clickable header) */
.fun__summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-bottom: 1px dashed transparent;
}
.fun__summary::-webkit-details-marker { display: none; }
.fun[open] .fun__summary { border-bottom-color: var(--line); }

.fun__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fun__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fun__title {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink);
  transition: color 0.18s ease;
}
.fun__title em { font-style: italic; color: var(--green-deep); font-weight: 600; }
.fun__sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-low); line-height: 1.3;
}
@media (hover: hover) { .fun:hover .fun__title { color: var(--green-deep); } }

.fun__meta { display: flex; align-items: center; gap: 10px; flex: none; }
.fun__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-low);
}
.fun__caret {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-low);
  display: inline-block; transition: transform 0.2s ease, color 0.2s ease;
}
.fun[open] .fun__caret { transform: rotate(180deg); color: var(--ink); }

/* the list */
.fun__list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; }
.fun__item {
  position: relative;            /* containing block for the stretched link */
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px;
  transition: background 0.15s ease;
}
@media (hover: hover) { .fun__item:hover { background: var(--bg-2); } }

.fun__mono {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px;
  background: var(--mono, var(--bg-2)); color: var(--mono-ink, var(--ink));
  border: 1px solid rgba(10,10,10,0.08);
}
.fun__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fun__name {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.fun__name em { font-style: normal; }
.fun__tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-low);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
  vertical-align: middle;
}
.fun__desc {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
/* whole row is the click target — stretch the anchor across the item */
.fun__link::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.fun__link {
  flex: none; text-decoration: none; color: var(--ink-low);
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.fun__link > svg { width: 15px; height: 15px; display: block; }
/* row hover lifts + greens the external-link chip so "opens elsewhere" reads clearly */
@media (hover: hover) {
  .fun__item:hover .fun__link { color: var(--green-deep); border-color: var(--green-deep); transform: translate(1px, -1px); }
}
.fun__link:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fun, .fun__caret, .fun__item, .fun__link, .fun__title { transition: none !important; }
}

/* ═══ Hi, I'm Gustaf — interactive portrait (compact hero replacement) ═══
   Click / hover the face, suit or background zones to swap variants.
   Auto-demo pulses zones on idle so it reads as interactive on touch. */
.hd-portrait-wrap {
  max-width: 380px;
  margin: 28px auto 32px;
  padding: 0 16px;
}
.hd-portrait-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  text-align: center;
  margin: 0 0 12px;
}
.hd-portrait-eyebrow em { font-style: normal; color: var(--ink-2); }
.hd-portrait {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 28px -14px rgba(10,10,10,0.32), 0 1px 0 rgba(10,10,10,0.04);
  isolation: isolate;
}
.hd-portrait > svg {
  display: block;
  width: 100%;
  height: auto;
}
.hd-portrait__base,
.hd-portrait__variant { pointer-events: none; }
.hd-portrait__variant {
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-portrait__variant.on { opacity: 1; }
.hd-portrait__zone {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.hd-portrait__zone:hover {
  fill: rgba(255, 255, 255, 0.22);
  stroke: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.hd-portrait__zone.hl {
  stroke: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  animation: hdPortraitPulse 1.2s ease-in-out infinite;
}
@keyframes hdPortraitPulse {
  0%, 100% { fill: rgba(255, 255, 255, 0.12); }
  50%      { fill: rgba(255, 255, 255, 0.34); }
}
@media (max-width: 480px) {
  .hd-portrait-wrap { max-width: 320px; margin: 20px auto 24px; }
  .hd-portrait-eyebrow { font-size: 10.5px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-portrait__variant,
  .hd-portrait__zone { transition: none; }
  .hd-portrait__zone.hl { animation: none; }
}

/* Stack as a footer line, not a numbered section — metadata, not a beat. */
.pf-stack-line {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-low);
  text-align: center;
}
.pf-stack-line em { font-style: normal; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════
   IMAGE CAROUSEL — drag-to-scroll enhancement for .c-artefakter
   carousel.js wraps each .c-artefakter in .c-carousel and injects nav
   buttons. Rules are scoped under .c-carousel so they override the
   page-local .c-artefakter base by specificity, regardless of load order.
   No JS → .c-artefakter still scrolls natively (graceful degradation).
   ═══════════════════════════════════════════════════════════════════════ */
.c-carousel { position: relative; margin: 12px -24px 0; }
.c-carousel .c-artefakter { margin: 0; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.c-carousel .c-artefakter::-webkit-scrollbar { width: 0; height: 0; display: none; }
.c-carousel .c-artefakter.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
/* snap off while the rAF tween (arrows/keyboard/flick) writes scrollLeft */
.c-carousel .c-artefakter.is-animating { scroll-snap-type: none; }
.c-carousel .c-artefakt img { -webkit-user-drag: none; user-select: none; }

/* Edge fades — hint that more cards live beyond the viewport edge */
.c-carousel::before,
.c-carousel::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(14px, 3vw, 36px);
  z-index: 2; pointer-events: none;
  opacity: 1; transition: opacity 0.28s ease;
}
/* soft eased fade — multi-stop so the falloff is gradual, not a hard band */
.c-carousel::before { left: 0;  background: linear-gradient(90deg,  var(--bg), rgba(255,255,255,0.6) 38%, transparent); }
.c-carousel::after  { right: 0; background: linear-gradient(270deg, var(--bg), rgba(255,255,255,0.6) 38%, transparent); }
.c-carousel.at-start::before { opacity: 0; }
.c-carousel.at-end::after   { opacity: 0; }

/* Nav buttons — fine-pointer (mouse) only; touch keeps native swipe */
.c-car-nav {
  position: absolute; z-index: 3;
  top: var(--car-ctr, 44%);
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -8px rgba(10,10,10,0.22), 0 1px 0 rgba(10,10,10,0.04);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform 0.16s cubic-bezier(0.2,0.6,0.2,1), box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.2s ease;
}
.c-car-nav svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.c-car-nav--prev { left: 12px; }
.c-car-nav--next { right: 12px; }
.c-car-nav:hover {
  background: var(--ink); color: var(--bg);
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 10px 26px -8px rgba(10,10,10,0.32);
}
.c-car-nav:active { transform: translateY(-50%) scale(0.96); }
.c-car-nav:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.c-car-nav[disabled] { pointer-events: none; }
/* hide the arrow that points past an edge (state classes set by carousel.js).
   !important beats the inherited pf-rise reveal animation on these buttons. */
.c-carousel.at-start .c-car-nav--prev,
.c-carousel.at-end .c-car-nav--next {
  opacity: 0 !important;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .c-car-nav { display: inline-flex; }
}
@media (max-width: 560px) {
  .c-carousel { margin: 12px -16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-carousel .c-artefakter { scroll-behavior: auto; }
  .c-car-nav { transition: none; }
}

/* ═══ Zoom-to-enlarge — button per image frame + lightbox (carousel.js) ═══ */
.c-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 253, 248, 0.92); color: var(--ink);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: zoom-in;
  opacity: 0; transform: translateY(-4px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.16s ease, color 0.16s ease;
}
.c-zoom svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.c-zoom:hover { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .c-artefakt-frame:hover .c-zoom,
  .c-look-frame:hover .c-zoom,
  .c-proof-frame:hover .c-zoom { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) { .c-zoom { opacity: 1; transform: none; } }
.c-zoom:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--green-deep); outline-offset: 2px; }

.c-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 12, 12, 0.84);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
}
.c-lightbox.is-open { opacity: 1; visibility: visible; }
.c-lightbox-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.7);
  transform: scale(0.97);
  transition: transform 0.26s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.c-lightbox.is-open .c-lightbox-img { transform: scale(1); }
.c-lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px);
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.c-lightbox-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.c-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.c-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .c-lightbox, .c-lightbox-img, .c-zoom, .c-lightbox-close { transition: none; }
  .c-lightbox-img { transform: none; }
}