/* =============================================================
   Astrid Andersin — Portfolio
   Apple-inspired minimalism · Liquid-glass nav · NATS display
   ============================================================= */

:root {
  --c-ink:        #000000;
  --c-slate:      #344D5A;
  --c-muted:      #A3B9CC;
  --c-action:     #0078CB;
  --c-paper:      #FFFFFF;

  --c-ink-70:     rgba(0, 0, 0, 0.70);
  --c-ink-55:     rgba(0, 0, 0, 0.55);
  --c-ink-35:     rgba(0, 0, 0, 0.35);
  --c-ink-12:     rgba(0, 0, 0, 0.12);
  --c-slate-08:   rgba(52, 77, 90, 0.08);
  --c-slate-16:   rgba(52, 77, 90, 0.16);

  --radius-sm:    10px;
  --radius-md:    18px;
  --radius-lg:    28px;
  --radius-pill:  999px;

  --shadow-soft:  0 10px 40px rgba(52, 77, 90, 0.08);
  --shadow-deep:  0 20px 60px rgba(52, 77, 90, 0.14);

  --easing:       cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: 'NATS', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;      /* anchor scrolls clear the fixed nav */
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  /* Prevent rubber-band scrolling chaining to parents */
  overscroll-behavior-y: none;
}

/* Soft gradient canvas — nearly imperceptible, Apple-style.
   Note: avoid `filter` here — it forces a fullscreen GPU layer on every paint. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(60vmax 60vmax at 20% 10%, rgba(163, 185, 204, 0.35), transparent 60%),
    radial-gradient(50vmax 50vmax at 90% 0%, rgba(163, 185, 204, 0.22), transparent 65%),
    radial-gradient(70vmax 70vmax at 80% 100%, rgba(163, 185, 204, 0.18), transparent 70%),
    var(--c-paper);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* =============================================================
   Intro loader · 3D fluid in a portrait vessel
   A tall rectangle is drawn in the centre. Inside, a WebGL canvas
   raymarches a smin-blended SDF fluid — Baccus-style but in blue.
   The whole layer fades out after ~2.6s.
   ============================================================= */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Same atmospheric hue as the home page (body::before) so the
     transition into the home page feels continuous. */
  background:
    radial-gradient(60vmax 60vmax at 20% 10%, rgba(163, 185, 204, 0.35), transparent 60%),
    radial-gradient(50vmax 50vmax at 90% 0%,  rgba(163, 185, 204, 0.22), transparent 65%),
    radial-gradient(70vmax 70vmax at 80% 100%, rgba(163, 185, 204, 0.18), transparent 70%),
    var(--c-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wait for progress complete (2.1s) → linger 0.3s → drain 0.3s → fade */
  animation: loader-out 0.6s var(--easing) 2.7s forwards;
}
@keyframes loader-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.loader-vessel {
  position: relative;
  width: clamp(140px, 18vmin, 200px);
  aspect-ratio: 130 / 240;        /* portrait — vertical longer than horizontal */
  /* Border is now drawn by the SVG inside, so a stroke can animate */
  animation: vessel-fade 0.8s var(--easing) 0.1s both;
  /* Whisper of a shadow — lifts the vessel off the page without being noticed */
  box-shadow: 0 30px 60px rgba(52, 77, 90, 0.05);
}

/* Reproduce the home nav-shell layout exactly so A.A. lands in
   the identical position. Mirrors `.nav-shell` and `.nav` but with
   no glass background — just the wordmark. The .logo class itself
   is reused (same font, size, letter-spacing, padding). */
.loader-nav-shell {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  animation: vessel-fade 0.8s var(--easing) 0.1s both;
}
.loader-nav {
  width: 100%;
  max-width: 1040px;
  display: flex;
  align-items: center;
  padding: 10px 14px 10px 22px;
  /* Match the 1px glass border on the home nav so the logo lands
     in the exact same coordinates as on the home page. */
  border: 1px solid transparent;
}
@keyframes vessel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The drifting circles SVG fills the rectangle. The clipPath inside
   the SVG keeps anything past the rectangle bounds invisible — so
   parts of circles that drift beyond the edge are hidden. */
.loader-circles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.loader-circle {
  fill: #ffffff;
  stroke: var(--c-ink);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  /* cx and cy are CSS-animatable in modern browsers since SVG2. */
  will-change: cx, cy;
}

/* Three independent drift paths, each with its own period and offset
   so the circles never sync up. Endpoints intentionally cross past
   the rectangle edges (clipped) so the motion feels like it goes
   into the unvisible area. */
.c1 { animation: drift-1 9.0s ease-in-out infinite; }
.c2 { animation: drift-2 11.0s ease-in-out -3.4s infinite; }
.c3 { animation: drift-3 7.5s ease-in-out -1.8s infinite; }

@keyframes drift-1 {
  0%, 100% { cx: 45px;  cy: 70px;  }
  25%      { cx: 115px; cy: 35px;  }   /* past right edge */
  50%      { cx: 75px;  cy: 200px; }   /* past bottom */
  75%      { cx: 8px;   cy: 110px; }   /* past left */
}
@keyframes drift-2 {
  0%, 100% { cx: 90px;  cy: 130px; }
  30%      { cx: 25px;  cy: 80px;  }
  60%      { cx: 122px; cy: 220px; }   /* past right */
  85%      { cx: 60px;  cy: 30px;  }   /* past top (cy < r) */
}
@keyframes drift-3 {
  0%, 100% { cx: 55px;  cy: 190px; }
  35%      { cx: 124px; cy: 165px; }   /* past right */
  70%      { cx: 22px;  cy: 235px; }   /* past bottom */
}

/* Progress-stroke frame ----------------------------------------- */
.loader-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.loader-frame rect {
  fill: none;
  stroke-width: 1.5;
  /* Without this, preserveAspectRatio="none" stretches the stroke,
     making the vertical sides thinner than the horizontal ones. */
  vector-effect: non-scaling-stroke;
}
.loader-frame-track {
  stroke: rgba(52, 77, 90, 0.18);
}

.loader-frame-progress {
  stroke: var(--c-slate);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: loader-progress 2.0s ease-in-out 0.1s forwards;
}
@keyframes loader-progress {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #loader { animation: loader-out 0.3s linear 0.6s forwards; }
  .loader-vessel { animation: none; }
  .loader-frame-progress, .c1, .c2, .c3 { animation: none; }
  .loader-frame-progress { stroke-dashoffset: 0; }
}

/* ---------- Glass primitive ----------
   Blur radius is the biggest GPU cost in this design — keeping it
   modest (12px) and applying it sparingly. */
.glass {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    var(--shadow-soft);
}

/* ---------- Navigation ---------- */
.nav-shell {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1040px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  border-radius: var(--radius-pill);
  transition: box-shadow 0.5s var(--easing), transform 0.5s var(--easing);
  /* Force the nav onto its own GPU layer so backdrop-filter on scroll
     doesn't recompute against constantly-changing underlying content. */
  transform: translateZ(0);
  will-change: backdrop-filter;
}

.nav.scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    var(--shadow-deep);
}

.logo {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.3s var(--easing);
}
.logo:hover { color: var(--c-action); }

.nav-links {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-slate);
  border-radius: var(--radius-pill);
  transition: color 0.3s var(--easing), background-color 0.3s var(--easing);
  white-space: nowrap;
}

.nav-links a:hover { color: var(--c-ink); }

.nav-links a.active {
  color: var(--c-action);
  background: rgba(0, 120, 203, 0.08);
}

.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--c-slate);
  border-radius: var(--radius-sm);
}

/* ---------- Page scaffold ---------- */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 140px 28px 120px;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  line-height: 1;
}

/* Project pages have no lede, so the content needs its own gap below the title */
.page-title + .projects-grid,
.page-title + .coding-grid,
.page-title + .research-list,
.page-title + .af-grid { margin-top: 48px; }

.page-lede {
  max-width: 640px;
  color: var(--c-ink-70);
  font-size: 18px;
  margin: 0 0 64px;
}

/* ---------- Home · Hero ---------- */
.home { padding-top: 0; }

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 28px 80px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin: 0 0 28px;
  opacity: 0;
  animation: rise 1s var(--easing) 0.1s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: 0.4em;
  line-height: 1.2;
  margin: 0;
  color: var(--c-ink);
  opacity: 0;
  animation: rise 1.1s var(--easing) 0.25s forwards;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  max-width: 100%;
  /* compensate for trailing letter-spacing so the word stays optically centered */
  padding-left: 0.4em;
}
.hero-word { display: inline-block; white-space: nowrap; }

.hero-rule {
  width: 64px;
  height: 1px;
  background: var(--c-slate-16);
  margin: 40px auto 28px;
  opacity: 0;
  animation: fade 1s var(--easing) 0.55s forwards;
}

.hero-subtitle {
  font-size: 17px;
  color: var(--c-ink-70);
  max-width: 540px;
  margin: 0 auto;
  opacity: 0;
  animation: rise 1s var(--easing) 0.7s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; } to { opacity: 1; }
}

/* ---------- AI Insight ---------- */
.ai-insight {
  max-width: 720px;
  margin: 40px auto 120px;
  padding: 10px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.4s var(--easing), box-shadow 0.4s var(--easing);
}

.ai-insight:focus-within {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(0, 120, 203, 0.12),
    var(--shadow-deep);
}

.ai-insight input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 18px;
  font-size: 16px;
  color: var(--c-ink);
  font-family: var(--font-body);
}
.ai-insight input::placeholder {
  color: var(--c-ink-35);
  font-style: italic;
  letter-spacing: 0.01em;
}

.ai-submit {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  background: var(--c-ink);
  color: var(--c-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--easing), transform 0.3s var(--easing);
}
.ai-submit:hover { background: var(--c-action); transform: translateY(-1px); }
.ai-submit:disabled { opacity: 0.5; cursor: progress; }

.ai-insight-wrap {
  max-width: 720px;
  margin: 40px auto 120px;
}
.ai-insight-wrap .ai-insight { margin: 0 auto; }

.ai-answer {
  margin: 20px auto 0;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
  color: var(--c-ink-70);
  font-size: 15.5px;
  line-height: 1.65;
  animation: rise 0.5s var(--easing);
}
.ai-answer.error { color: #7a2a2a; background: rgba(255, 240, 240, 0.7); }
/* A limit was reached: informational, so it is styled calmly rather than as an error */
.ai-answer.notice { color: var(--c-slate); background: rgba(163, 185, 204, 0.18); text-align: center; }
.ai-answer p { margin: 0 0 10px; }
.ai-answer ul { margin: 0 0 10px; padding-left: 20px; }
.ai-answer li { margin-bottom: 6px; }
.ai-answer > :last-child { margin-bottom: 0; }
.ai-answer strong { color: var(--c-ink); font-weight: 600; }

.ai-hint {
  text-align: center;
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-slate);
  opacity: 0.7;
}

/* ---------- Home · About section ---------- */
.portrait-frame {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(163, 185, 204, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  overflow: hidden;
  position: relative;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(163,185,204,0.28), transparent 60%);
  pointer-events: none;
}
.portrait-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* All images stacked; opacity drives the crossfade */
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  /* Promote to a composite layer so opacity transitions and scroll
     paint don't compound. */
  will-change: opacity;
  transform: translateZ(0);
}
.portrait-image.is-active {
  opacity: 1;
}

.home-about-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.home-about-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 56px);
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--c-ink);
}
/* Empty placeholder when a rotator has no images yet */
.portrait-empty {
  position: absolute;
  inset: 0;
}

/* ---------- Home · buttons beside a picture ---------- */
.home-gate {
  max-width: 1120px;
  margin: 40px auto 80px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.home-gate-media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
}
.home-gate-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-gate-button {
  min-width: 240px;
  padding: 18px 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-slate-16);
  background: rgba(255, 255, 255, 0.6);
  color: var(--c-slate);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.home-gate-button:hover,
.home-gate-button:focus-visible {
  background: var(--c-action);
  border-color: var(--c-action);
  color: #fff;
}
@media (max-width: 720px) {
  /* Picture first, the buttons underneath */
  .home-gate { grid-template-columns: 1fr; gap: 18px; }
  .home-gate-media { order: -1; }
  .home-gate-button { min-width: 200px; padding: 14px 36px; font-size: 13px; }
}

/* ---------- Home · right now ---------- */
.home-now {
  max-width: 1120px;
  margin: 0 auto 56px;
  padding: 0 28px;
}
.home-now-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.home-now-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.home-now-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-deep); }
.home-now-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-action);
}
.home-now-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.home-now-sub { font-size: 13.5px; color: var(--c-ink-55); line-height: 1.35; }

/* ---------- Home · numbers ---------- */
.home-stats {
  max-width: 1120px;
  margin: 0 auto 110px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 28px;
}
.home-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--c-ink-12);
  padding-top: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--easing);
}
.home-stat:hover { border-top-color: var(--c-action); }
.home-stat:hover .home-stat-value,
.home-stat:hover .home-stat-label { color: var(--c-action); }
.home-stat-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-ink);
}
.home-stat-label { font-size: 13.5px; line-height: 1.4; color: var(--c-ink-55); max-width: 22ch; }
@media (max-width: 720px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 80px; }
}

/* ---------- Home · flowing carousel of work ---------- */
.home-work {
  /* Full-bleed: break out of the centred page column */
  margin: 0 calc(50% - 50vw) 100px;
}
/* 56px = the page gutter plus the section gutter the other home sections sit in */
.home-work-head { max-width: 1120px; margin: 0 auto 22px; padding: 0 56px; }
.home-work-head .home-about-title { margin-top: 12px; }
.work-row {
  overflow: hidden;
  padding: 10px 0 18px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.work-track {
  display: flex;
  width: max-content;
  animation: work-flow 90s linear infinite;
  will-change: transform;
}
.work-row.reverse .work-track { animation-direction: reverse; }
.work-row:hover .work-track,
.work-row:focus-within .work-track { animation-play-state: paused; }
@keyframes work-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.work-card {
  flex: 0 0 auto;
  width: 260px;
  height: 270px;
  margin-right: 18px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--c-slate-16);
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing), border-color 0.3s var(--easing);
}
.work-card:hover,
.work-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-deep); border-color: var(--c-action); }
.work-card img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  background: #f6f8fa;
}
.work-card img.is-contain { object-fit: contain; object-position: center; background: #fff; padding: 10px 10px 0; }
.work-card-text {
  flex: 1;
  min-height: 0;
  padding: 18px 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-70);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(163, 185, 204, 0.2) 100%);
}
.work-card-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 12px; border-top: 1px solid var(--c-slate-08); }
.work-card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-card-kind { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-slate); }
@media (max-width: 720px) {
  .work-card { width: 210px; height: 225px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No auto-flow: the rows become plain horizontally scrollable strips */
  .work-row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .work-track { animation: none; }
  .work-card[aria-hidden="true"] { display: none; }
}

/* ---------- Home · Contact section ---------- */
.home-contact {
  max-width: 720px;
  margin: 40px auto 80px;
  padding: 64px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.home-contact .home-about-eyebrow,
.home-contact .home-about-title { text-align: center; }
.home-contact .contact-email { margin-top: 4px; }
.home-contact .social-row { margin-top: 22px; }

/* ---------- Projects · index hub ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 12px;
}
@media (max-width: 720px) {
  .projects-grid { grid-template-columns: 1fr; }
}

.project-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.project-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-deep);
}
.project-tile:hover .project-arrow { transform: translateX(4px); }
.project-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.6), transparent 60%);
  pointer-events: none;
}

.project-research { background: linear-gradient(155deg, #ffffff 0%, #e7eef4 100%); }
.project-coding   { background: linear-gradient(155deg, #ffffff 0%, rgba(0, 120, 203, 0.15) 130%); }
.project-art      { background: linear-gradient(155deg, #ffffff 0%, rgba(163, 185, 204, 0.55) 130%); }

/* Rotating pictures from the group's projects */
.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}
.project-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 28px 26px;
}
/* Keeps the arrow at the bottom of the tile */
.project-body .project-arrow { margin-top: auto; }

.project-index {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-slate);
  opacity: 0.7;
}

.project-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  line-height: 1.05;
}

.project-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--c-ink);
  transition: transform 0.4s var(--easing);
}

/* Back link inside a project sub-page */
.projects-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-slate);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: color 0.3s var(--easing), background 0.3s var(--easing);
}
.projects-back:hover { color: var(--c-action); background: rgba(0, 120, 203, 0.06); }

/* ---------- Cards · shared ---------- */
.card {
  display: block;
  padding: 28px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.card p { margin: 0; color: var(--c-ink-70); font-size: 15px; }

/* ---------- Research / Arts / Blog grids ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.entry {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--c-slate-16);
  transition: padding 0.4s var(--easing), color 0.4s var(--easing);
}
.entry:hover { padding-left: 10px; color: var(--c-action); }
.entry .meta { color: var(--c-slate); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.entry h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.06em;
  margin: 0;
}

/* ---------- Research · detailed list ---------- */
.research-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.research-item {
  padding: 32px 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.research-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

.research-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 14px;
}

.research-meta {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.research-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--c-ink);
}

.research-tag {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-action);
  background: rgba(0, 120, 203, 0.08);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.research-summary {
  margin: 0 0 14px;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.6;
}

.research-body {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--c-ink-70);
  font-size: 15px;
  line-height: 1.65;
}
.research-body li { margin-bottom: 6px; }
.research-body li::marker { color: var(--c-muted); }

.research-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.research-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-action);
  background: transparent;
  border: 1px solid rgba(0, 120, 203, 0.25);
  border-radius: var(--radius-pill);
  transition: background 0.3s var(--easing), color 0.3s var(--easing), border-color 0.3s var(--easing);
}
.research-links a:hover {
  background: var(--c-action);
  color: #fff;
  border-color: var(--c-action);
}

@media (max-width: 640px) {
  .research-item { padding: 24px 22px; }
  .research-head { flex-direction: column; gap: 12px; }
  .research-tag { align-self: flex-start; }
}

/* ---------- Experience timeline ---------- */
/* Scroll-driven timeline — years on the left, whatever was happening then on the right */
.tl {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 40px;
  margin-top: 48px;
}

.tl-axis {
  position: relative;
  /* Lets the oldest year scroll all the way up to the playhead while the stage stays pinned */
  margin-bottom: calc(100vh - 250px);
  width: calc(60px + var(--tl-lanes) * 12px);
}
.tl-year {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--c-ink-12);
}
.tl-year span {
  display: block;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--c-slate);
}

.tl-lanes { position: absolute; top: 0; left: 60px; }
.tl-bar {
  position: absolute;
  left: calc(var(--tl-lane) * 12px);
  width: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-muted);
  opacity: 0.55;
  transition: background 0.4s var(--easing), opacity 0.4s var(--easing);
}
.tl-bar.is-active { background: var(--c-action); opacity: 1; }
/* Education is the darker bar closest to the years */
.tl-bar.is-edu { background: var(--c-slate); opacity: 0.35; }
.tl-bar.is-edu.is-active { background: var(--c-slate); opacity: 1; }
/* Projects get a thinner bar than roles */
.tl-bar.is-project { width: 4px; margin-left: 2px; }

.tl-playhead {
  position: absolute;
  top: -1px;
  left: -8px;
  right: -28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-action), rgba(0, 120, 203, 0.15));
  will-change: transform;
}

.tl-stage {
  position: sticky;
  top: 110px;
  align-self: start;
}
.tl-now {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--c-action);
  font-variant-numeric: tabular-nums;
}
/* What I was studying at that moment, as a slim line above the role cards */
.tl-edu {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid var(--c-slate);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  background: var(--c-slate-08);
  animation: tl-in 0.45s var(--easing) both;
}
.tl-edu-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 14px;
  line-height: 1.35;
}
.tl-edu-label,
.tl-edu-period {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.tl-edu-school { font-weight: 600; }
.tl-edu-degree { color: var(--c-ink-70); }
.tl-edu-body { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--c-ink-55); }

.tl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.tl-card {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
  animation: tl-in 0.45s var(--easing) both;
}
@keyframes tl-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tl-period,
.tl-meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.tl-org {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 4px 0 0;
}
.tl-org a { color: inherit; text-decoration: none; transition: color 0.3s var(--easing); }
.tl-org a:hover { color: var(--c-action); }
.tl-org a span { font-family: var(--font-body); font-size: 0.6em; color: var(--c-action); }
.tl-role { margin: 0; font-size: 14px; font-weight: 500; color: var(--c-slate); }
.tl-card.is-ongoing .tl-role { color: var(--c-action); }

/* Projects running at the same moment, as compact chips under the role cards */
.tl-projects { margin-top: 16px; }
.tl-cards:empty + .tl-projects { margin-top: 0; }
.tl-projects-label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.tl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-slate-16);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--easing), box-shadow 0.3s var(--easing);
  animation: tl-in 0.45s var(--easing) both;
}
.tl-chip:hover,
.tl-chip:focus-visible { border-color: var(--c-action); box-shadow: var(--shadow-soft); }
.tl-chip:hover .tl-chip-kind,
.tl-chip:focus-visible .tl-chip-kind { color: var(--c-action); opacity: 1; }

/* The card a timeline chip jumped to */
.coding-card.is-target,
.research-item.is-target { animation: target-flash 2.4s var(--easing) 0.2s both; }
@keyframes target-flash {
  0%, 60% { box-shadow: 0 0 0 2px var(--c-action), var(--shadow-deep); }
  100%    { box-shadow: 0 0 0 2px transparent, var(--shadow-soft); }
}
.tl-chip-title { font-weight: 500; }
.tl-chip-kind {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
  opacity: 0.8;
}
.tl-meta { margin: 2px 0 8px; opacity: 0.8; }
.tl-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--c-ink-70); }
.tl-empty { margin: 0; font-size: 14px; color: var(--c-ink-55); }

@media (max-width: 720px) {
  .tl { column-gap: 18px; }
  .tl-axis { width: calc(38px + var(--tl-lanes) * 5px); }
  .tl-year span { font-size: 14px; }
  .tl-lanes { left: 38px; }
  .tl-bar { left: calc(var(--tl-lane) * 5px); width: 3px; }
  .tl-bar.is-project { width: 2px; margin-left: 0.5px; }
  .tl-stage { top: 96px; }
  .tl-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tl-card { padding: 12px 14px; }
  .tl-org { font-size: 17px; }
  .tl-now { margin-bottom: 10px; }
  .tl-cards { gap: 8px; }
  .tl-projects { margin-top: 12px; }
  .tl-chips { gap: 4px 5px; }
  .tl-chip { padding: 2px 9px; font-size: 11.5px; }
  .tl-projects-label { margin-bottom: 6px; }
  .tl-chip-kind { font-size: 0; }
  .tl-chip-kind span { font-size: 11px; }
  /* With three or more roles at once, drop the descriptions so everything fits on a phone */
  .tl-cards:has(> :nth-child(3)) .tl-body,
  .tl-cards:has(> :nth-child(3)) .tl-meta,
  .tl-cards:has(> :nth-child(3)) .tl-period { display: none; }
  .tl-cards:has(> :nth-child(3)) .tl-org { margin-top: 0; }
  .tl-edu { margin-bottom: 8px; padding: 6px 10px; }
  .tl-edu-head { font-size: 12.5px; }
  .tl-edu-period,
  .tl-edu-body { display: none; }
  .tl-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Short windows: trim descriptions so the pinned panel stays on screen */
@media (max-height: 760px) and (min-width: 721px) {
  .tl-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-card,
  .tl-chip,
  .tl-edu,
  .coding-card.is-target,
  .research-item.is-target { animation: none; }
  .tl-bar { transition: none; }
}

/* ---------- Art and Fashion ---------- */
.af-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.af-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
}
.af-card.is-wide { grid-column: 1 / -1; }
.af-card.is-target { animation: target-flash 2.4s var(--easing) 0.2s both; }
/* Photos sit side by side at one height; a long set scrolls sideways */
.af-images {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  height: 380px;
  padding: 16px 16px 0;
  background: #fff;
  overflow-x: auto;
}
.af-images img { height: 100%; width: auto; flex: 0 0 auto; border-radius: var(--radius-sm); }
/* A single wide picture fits the card's width instead of its height */
.af-images.is-landscape { height: auto; align-items: center; min-height: 380px; }
.af-images.is-landscape img { width: 100%; height: auto; flex: 1 1 auto; min-width: 0; }
.af-meta { padding: 18px 22px 22px; border-top: 1px solid var(--c-slate-08); margin-top: 16px; }
.af-kind {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-action);
}
.af-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 4px 0 6px;
}
.af-blurb { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink-70); }
@media (max-width: 820px) {
  .af-grid { grid-template-columns: 1fr; }
  .af-images { height: 300px; }
  .af-images.is-landscape { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .af-card.is-target { animation: none; }
}

/* ---------- Contact ---------- */
.contact-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px;
  border-radius: var(--radius-lg);
  text-align: center;
}
.contact-email {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 0.1em;
  color: var(--c-action);
  transition: color 0.3s var(--easing);
}
.contact-email:hover { color: var(--c-ink); }

.social-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.social-row a {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-slate-16);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-slate);
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing);
}
.social-row a:hover { color: var(--c-action); border-color: var(--c-action); }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 40px 20px 30px;
  color: var(--c-slate);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Responsive nav ---------- */
@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 10px;
    right: 10px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 2px;
    border-radius: var(--radius-md);
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--c-slate-16);
    box-shadow: var(--shadow-deep);
  }
  .nav-links.open a { padding: 12px 16px; text-align: left; }
  .nav-burger { display: inline-flex; }
}


/* =============================================================
   Projects · Coding · grid + cards
   ============================================================= */
.coding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

.coding-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.coding-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

/* The whole card opens the project: the main link is stretched over it,
   and any other link sits on top so it stays separately clickable. */
.coding-card { position: relative; }
.coding-card.is-clickable { cursor: pointer; }
.coding-link.is-card-link { position: static; }
.coding-link.is-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.coding-link:not(.is-card-link) { position: relative; z-index: 2; }

/* Featured card spans both columns */
.coding-card.is-featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
.coding-card.is-featured .coding-preview {
  flex: 1.4;
  aspect-ratio: auto;
}
.coding-card.is-featured .coding-meta {
  flex: 1;
}

/* Image preview area */
.coding-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f6f8fa;
  border-bottom: 1px solid var(--c-slate-16);
  overflow: hidden;
}
.coding-preview img,
.coding-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--easing);
}
.coding-card:hover .coding-preview img,
.coding-card:hover .coding-preview video {
  transform: scale(1.02);
}

/* Placeholder when no screenshot yet */
.coding-preview-pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(163,185,204,0.20) 100%);
}
.coding-preview-mark {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.1em;
  color: var(--c-slate);
  opacity: 0.55;
}
.coding-preview-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-slate);
  opacity: 0.6;
}

/* Meta block */
.coding-meta {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.coding-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--c-ink);
}
.coding-blurb {
  margin: 0;
  color: var(--c-ink-70);
  font-size: 15px;
  line-height: 1.6;
}

/* Stack chips */
.coding-stack {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.coding-stack li {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-slate);
  background: var(--c-slate-08);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* Links */
.coding-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.coding-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-slate-16);
  color: var(--c-slate);
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.coding-link.primary {
  color: var(--c-action);
  border-color: rgba(0, 120, 203, 0.25);
}
.coding-link:hover {
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.coding-link.primary:hover {
  background: var(--c-action);
  color: #fff;
  border-color: var(--c-action);
}
.coding-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Agent / system card — text-forward, no image */
.coding-system {
  padding: 32px 28px 28px;
  background: linear-gradient(160deg, var(--c-slate) 0%, #1a2a33 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.coding-system .coding-title {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 38px);
}
.coding-system-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.coding-system-body {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
  max-width: 600px;
}
.coding-system .coding-stack li {
  color: var(--c-muted);
  background: rgba(255, 255, 255, 0.07);
}
.coding-system .coding-link.disabled { color: rgba(255, 255, 255, 0.6); }
.coding-cursor {
  display: inline-block;
  margin-left: 6px;
  color: var(--c-action);
  animation: cursor-blink 1.1s steps(2) infinite;
}
@keyframes cursor-blink {
  50% { opacity: 0; }
}

@media (max-width: 820px) {
  .coding-grid { grid-template-columns: 1fr; gap: 20px; }
  .coding-card.is-featured { flex-direction: column; }
  .coding-card.is-featured .coding-preview { aspect-ratio: 16 / 10; }
}