/* ===========================================================
   akynna — section styles
   =========================================================== */

/* =================== NAV =================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: var(--nav-pad-y) var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  transition: backdrop-filter 300ms, background 300ms;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--nav-brand-fs);
  letter-spacing: -0.01em;
}
.brand-mark {
  width: var(--nav-brand-mark); height: var(--nav-brand-mark);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lilac), var(--pink));
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--nav-brand-mark-fs);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.nav-links {
  display: flex; align-items: center; gap: var(--nav-gap);
  font-size: var(--fs-nav-link);
  font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  transition: color 200ms;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::before {
  content: "✦";
  position: absolute;
  left: -14px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--accent-deep);
}

@media (max-width: 760px) {
  .nav-links a:not(.toggle-wrap) { display: none; }
}

/* theme toggle */
.theme-toggle {
  width: var(--toggle-w); height: var(--toggle-h);
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 3px;
  display: flex; align-items: center;
  position: relative;
  cursor: pointer;
  transition: background 300ms;
}
.theme-toggle .knob {
  width: var(--toggle-knob); height: var(--toggle-knob);
  border-radius: 50%;
  background: var(--accent-deep);
  display: grid; place-items: center;
  color: var(--bg);
  font-size: 12px;
  transition: transform 380ms var(--ease-out), background 300ms;
  box-shadow: var(--shadow-sm);
}
.theme-night .theme-toggle .knob {
  transform: translateX(26px);
  box-shadow: var(--glow);
}

/* language pill (EN · FR) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  height: var(--toggle-h);
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  gap: 2px;
}
.lang-toggle .lang-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0 10px;
  height: calc(var(--toggle-h) - 8px);
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms, background 300ms;
}
.lang-toggle .lang-opt:hover { color: var(--ink); }
.lang-toggle .lang-opt.on {
  background: var(--accent-deep);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.theme-night .lang-toggle .lang-opt.on { box-shadow: var(--glow); }

@media (max-width: 760px) {
  .lang-toggle .lang-opt { padding: 0 8px; font-size: 10px; }
}

/* =================== HERO =================== */
.hero {
  min-height: 100vh;
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bot);
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--hero-grid-gap);
  align-items: center;
  width: 100%;
  position: relative; z-index: 2;
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}
.hero h1 .line { display: block; }
.hero h1 .line + .line { margin-top: 0.05em; }
.hero h1 .amp {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--hero-meta-gap);
  margin-top: var(--hero-meta-mt);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--hero-tag-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--hero-tag-fs);
  color: var(--ink-soft);
}
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); }
.hero-tag .dot.live { background: var(--live-red); box-shadow: 0 0 0 4px rgba(255,85,119,0.18); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,85,119,0.18); } 50% { box-shadow: 0 0 0 8px rgba(255,85,119,0.04); } }

.hero-cta { display: flex; align-items: center; gap: 9px; margin-top: var(--hero-cta-mt); flex-wrap: wrap; }
/* keep the two secondary buttons together so they wrap as a pair if ever needed */
.hero-cta-group { display: flex; gap: 9px; flex-wrap: wrap; }
/* compact the hero buttons so all three fit side by side on one desktop line */
.hero-cta .btn { padding: 11px 15px; font-size: 13px; white-space: nowrap; }
.hero-cta .btn-ghost { gap: 7px; }
.hero-cta .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 380px) { .hero-cta-group { width: 100%; } }

.hero-portrait {
  position: relative;
  aspect-ratio: 1;
  max-width: var(--hero-portrait-max);
  margin-left: auto;
  border-radius: var(--r-xl);
  overflow: visible;
}
.hero-portrait .frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lilac) 0%, var(--pink) 50%, var(--peach) 100%);
  display: grid; place-items: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 30px 80px -20px rgba(183,168,255,0.55),
    0 0 90px rgba(255,182,210,0.55),
    0 0 140px rgba(183,168,255,0.45);
  overflow: hidden;
  animation: heroHalo 7s ease-in-out infinite;
}
@keyframes heroHalo {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.6) inset,
      0 30px 80px -20px rgba(183,168,255,0.55),
      0 0 90px rgba(255,182,210,0.55),
      0 0 140px rgba(183,168,255,0.45);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.7) inset,
      0 30px 80px -20px rgba(183,168,255,0.7),
      0 0 110px rgba(255,182,210,0.7),
      0 0 170px rgba(183,168,255,0.55);
  }
}
.theme-night .hero-portrait .frame {
  background: linear-gradient(135deg, var(--grad-purple-2) 0%, var(--grad-purple-3) 50%, var(--grad-purple-1) 100%);
  box-shadow: 0 0 100px rgba(183,168,255,0.45);
  animation: heroHaloNight 7s ease-in-out infinite;
}
@keyframes heroHaloNight {
  0%, 100% { box-shadow: 0 0 100px rgba(183,168,255,0.45); }
  50%      { box-shadow: 0 0 140px rgba(183,168,255,0.65), 0 0 60px rgba(255,158,199,0.35); }
}
.hero-portrait .frame img {
  width: 92%; height: 92%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

/* dual portrait: main + smaller inset */
.hero-portrait.dual .frame-main {
  position: relative;
  width: 100%; height: 100%;
}
.hero-portrait.dual .frame-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hero-portrait.dual .frame-inset {
  position: absolute;
  bottom: var(--hero-inset-bottom);
  right: var(--hero-inset-right);
  width: var(--hero-inset-w);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lilac), var(--pink));
  padding: var(--hero-inset-pad);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  z-index: 5;
  border: var(--hero-inset-border) solid var(--bg);
  animation: floatY 6s ease-in-out infinite;
  box-sizing: border-box;
}
.theme-night .hero-portrait.dual .frame-inset {
  background: linear-gradient(135deg, var(--grad-purple-3), var(--grad-purple-2));
  border-color: var(--surface);
  box-shadow: 0 0 32px rgba(183,168,255,0.5);
}
.hero-portrait.dual .frame-inset img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* The two "tim" / "akynna" name tags. Styled to pop more than the decorative
   mono orbit tags: bolder display font, vivid gradient fill, white text and a
   soft glowing ring so they read as the hero's identity badges. */
.portrait-label {
  position: absolute;
  z-index: 6;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--portrait-label-fs);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 12px;          /* rounded-rectangle sticker — distinct from the round orbit tags */
  padding: 5px 16px;
  white-space: nowrap;
}
.portrait-label.main-label {
  top: 36%; left: -14%;
  transform: rotate(-10deg);
  background: linear-gradient(135deg, var(--lilac-deep), var(--pink-hot));
  box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in oklab, var(--lilac) 35%, transparent);
}
.portrait-label.inset-label {
  bottom: -2%; right: -10%;
  transform: translate(40%, 40%) rotate(8deg);
  background: linear-gradient(135deg, var(--pink-hot), var(--peach));
  box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in oklab, var(--pink-hot) 35%, transparent);
}
.theme-night .portrait-label {
  border-color: color-mix(in oklab, var(--surface) 70%, transparent);
  box-shadow: var(--glow), 0 0 22px rgba(255,158,199,0.4);
}

.orbit {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  animation: spin 60s linear infinite;
  opacity: 0.6;
}
.orbit.o2 { inset: -16%; animation-duration: 90s; animation-direction: reverse; opacity: 0.35; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.orbit-tag {
  position: absolute;
  z-index: 7;                  /* sit on top of the portrait + inset chibi */
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: var(--orbit-tag-pad);
  font-size: var(--orbit-tag-fs);
  font-family: var(--font-mono);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.theme-night .orbit-tag {
  background: var(--surface-2);
  box-shadow: 0 0 18px rgba(183,168,255,0.25);
}

/* Interactive tags (those with a `funny` field in content.js) — wiggle and
   swap to a joke text on hover/focus/tap. */
.orbit-tag.is-interactive {
  cursor: pointer;
  user-select: none;
  transition:
    transform   260ms var(--ease-out),
    background  220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    color       220ms var(--ease-out),
    box-shadow  220ms var(--ease-out);
}
.orbit-tag.is-interactive:focus { outline: none; }
.orbit-tag.is-interactive.is-open {
  background: var(--accent-soft);
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  box-shadow: 0 10px 28px rgba(183,168,255,0.45);
  transform: translateX(var(--shift, 0px)) scale(1.10);
  animation: orbit-tag-wiggle 520ms var(--ease-out);
}
.theme-night .orbit-tag.is-interactive.is-open {
  box-shadow: 0 0 26px rgba(183,168,255,0.55);
}
@keyframes orbit-tag-wiggle {
  0%   { transform: translateX(var(--shift, 0px)) scale(1)    rotate(0deg); }
  18%  { transform: translateX(var(--shift, 0px)) scale(1.18) rotate(-8deg); }
  36%  { transform: translateX(var(--shift, 0px)) scale(1.10) rotate(6deg); }
  54%  { transform: translateX(var(--shift, 0px)) scale(1.14) rotate(-4deg); }
  72%  { transform: translateX(var(--shift, 0px)) scale(1.08) rotate(3deg); }
  100% { transform: translateX(var(--shift, 0px)) scale(1.10) rotate(0deg); }
}

.scroll-cue {
  position: absolute;
  bottom: var(--scroll-cue-bottom); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--scroll-cue-fs);
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .line-down {
  width: 1px; height: var(--scroll-cue-line-h);
  background: linear-gradient(to bottom, var(--accent-deep), transparent);
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop { 0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }

/* =================== ABOUT =================== */
.about .section-head { gap: 8px; margin-bottom: 12px; }
.about .section-head h2.section-title { margin: 2px 0 8px; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--about-grid-gap);
  align-items: start;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-img {
  position: sticky; top: var(--about-img-sticky);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--lilac) 0%, var(--pink) 100%);
  overflow: hidden;
  position: relative;
}
.theme-night .about-img {
  background: linear-gradient(160deg, var(--grad-purple-2), var(--grad-purple-1));
}
.about-img .av {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 2;
}
.about-img .av-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.about-img .av-real + * { position: relative; z-index: 3; }
.about-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(34, 26, 58, 0.4) 100%);
  z-index: 2;
  pointer-events: none;
}
.about-stat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--about-stat-fs);
  line-height: 1;
  color: rgba(255,255,255,0.65);
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 4;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(34, 26, 58, 0.35);
}
.theme-night .about-stat { color: rgba(255,255,255,0.5); }

/* fancy decorations around the about photo */
.about-img { isolation: isolate; }
.about-img::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px dashed var(--line-strong);
  border-radius: calc(var(--r-lg) + 14px);
  pointer-events: none;
  z-index: 5;
  opacity: 0.65;
}
.theme-night .about-img::before { opacity: 0.35; }

/* curved badge with ribbon copy around the photo (top) */
.about-badge {
  position: absolute;
  top: var(--about-badge-top); left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--about-badge-fs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--about-badge-pad);
  border-radius: 999px;
  white-space: nowrap;
  z-index: 7;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 88%;
}
.theme-night .about-badge { background: var(--accent-deep); color: var(--on-dark); box-shadow: var(--glow); }
.about-badge-inner {
  display: inline-block;
  white-space: nowrap;
  animation: ribbonScroll 22s linear infinite;
}
@keyframes ribbonScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* handwritten signature on the photo */
.about-sig {
  position: absolute;
  top: var(--about-sig-offset); right: var(--about-sig-offset);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--about-sig-fs);
  color: rgba(255,255,255,0.9);
  z-index: 5;
  transform: rotate(-6deg);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  letter-spacing: 0.01em;
}

/* small handwritten float tags around the photo */
.about-float {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--about-float-fs);
  letter-spacing: 0.06em;
  padding: var(--about-float-pad);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  z-index: 6;
  animation: floatY 6s ease-in-out infinite;
  white-space: nowrap;
}
.theme-night .about-float { background: var(--surface-2); }
.about-float-1 { top: 38%; right: -22px; transform: rotate(6deg); animation-delay: 0s; }
.about-float-2 { bottom: 22%; left: -28px; transform: rotate(-6deg); animation-delay: 1.2s; }
.about-float-3 { top: 16%; left: -18px; transform: rotate(-10deg); animation-delay: 2.4s; color: var(--accent-deep); }

@media (max-width: 860px) {
  .about-float-1 { right: -10px; }
  .about-float-2 { left: -10px; }
  .about-float-3 { left: -10px; top: 8%; }
}

.about-prose p {
  font-size: var(--fs-about-prose);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.about-prose p .hl { color: var(--ink); font-weight: 500; }
.about-prose p .it { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); font-size: var(--about-it-fs); }

/* framed highlight around the "mon intention" statement */
.about-prose p .intent-frame {
  display: block;
  margin-top: 12px;
  padding: 14px 20px 14px 22px;
  border-left: 4px solid var(--accent-deep);
  border-radius: 4px 16px 16px 4px;
  background: linear-gradient(
    105deg,
    color-mix(in oklab, var(--accent) 24%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 6%, var(--surface)) 60%,
    transparent 100%);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* unfolded full-width row below the grid */
  gap: var(--facts-gap);
  margin-top: var(--facts-mt);
}
@media (max-width: 640px) {
  .facts { grid-template-columns: repeat(2, 1fr); }   /* fall back on narrow screens */
}
.fact {
  padding: var(--fact-pad);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.fact .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fact-num-fs);
  line-height: 1;
  color: var(--accent-deep);
}
.fact .lbl {
  font-size: var(--fact-lbl-fs);
  color: var(--ink-soft);
  margin-top: 8px;
}

/* =================== ABOUT — JOURNEY TIMELINE =================== */
/* The About column is narrower (.wrap-tight) than the rest of the site, so the
   timeline breaks out to the full site width and re-centres in the viewport —
   using margins only, so the reveal transform stays intact. */
.timeline {
  margin-top: 40px;
  --tl-w: min(1140px, calc(100vw - 2 * var(--pad-x)));
  width: var(--tl-w);
  margin-left: calc((100% - var(--tl-w)) / 2);
  /* the two career colours: soft light purple (dev) vs Twitch purple (stream) */
  --tl-dev: #b3a1f2;
  --tl-dev-ink: var(--accent-deep);
  --tl-stream: #9146ff;
}
.timeline-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 10px;
}
.timeline-heading {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}
/* legend: which coloured line is which career */
.tl-legend { display: flex; gap: 18px; }
.tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.tl-legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.tl-legend-dev    .tl-legend-dot { background: var(--tl-dev); }
.tl-legend-stream .tl-legend-dot { background: var(--tl-stream); }
/* viewport holds the track + the two nav arrows; the side padding is the
   gutter the arrows live in, so they never overlap the timeline line. */
.timeline-viewport { position: relative; padding: 0 52px; }
@media (max-width: 560px) { .timeline-viewport { padding: 0 40px; } }

/* horizontal track — scrolls sideways via the arrows or by grabbing it; never
   vertically. touch-action keeps the browser's native horizontal swipe (with
   momentum) on mobile while still letting a vertical swipe scroll the page. */
.timeline-track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* firefox */
  -ms-overflow-style: none;         /* old edge */
  touch-action: pan-x pan-y;
  cursor: grab;
  overscroll-behavior-x: contain;   /* no back-swipe navigation at the ends */
}
.timeline-track::-webkit-scrollbar { display: none; }   /* chrome / safari */
/* mid-drag: closed fist, no text selection, and bubbles stay down so they
   don't flash past under the cursor while the track slides. */
.timeline-track.is-dragging,
.timeline-track.is-dragging .tl2-card,
.timeline-track.is-dragging .tl2-dot { cursor: grabbing; user-select: none; }
.timeline-track.is-dragging .tl2-card:hover .tl2-bubble {
  opacity: 0;
  visibility: hidden;
}

/* fixed-size canvas everything is absolutely placed on */
.tl2 { position: relative; }

/* period spans — dev hugs just above the axis, stream just below, so two
   overlapping periods read as both colours straddling the line. */
.tl2-span {
  position: absolute;
  height: 6px;
  border-radius: 999px;
  z-index: 1;
}
.tl2-span-dev    { background: var(--tl-dev); }
.tl2-span-stream { background: var(--tl-stream); }
/* their labels sit just outside the dots (dev above, stream below) */
.tl2-span-lbl {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  z-index: 2;
}
.tl2-span-lbl-dev    { color: var(--tl-dev-ink); }
.tl2-span-lbl-stream { color: var(--tl-stream); }

/* short connector stem from a node out to its card — tinted to its career */
.tl2-stem {
  position: absolute;
  width: 2px;
  transform: translateX(-50%);
  z-index: 1;
}
.tl2-stem-dev    { background: var(--tl-dev); }
.tl2-stem-stream { background: var(--tl-stream); }

/* node — a small circle carrying the event's emoji, sitting on the axis */
.tl2-dot {
  position: absolute;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; line-height: 1;
  background: var(--surface);
  border: 2px solid var(--tl-dev);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tl-dev) 26%, transparent);
  cursor: pointer;
  z-index: 3;
}
.tl2-dot-stream {
  border-color: var(--tl-stream);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tl-stream) 22%, transparent);
}

/* event card branching off the lane (up for dev, down for stream) */
.tl2-card {
  position: absolute;
  width: 108px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.tl2-card:hover, .tl2-card.is-pinned { z-index: 7; }   /* lift above neighbours when its bubble is up */
.tl2-card:focus-visible { outline: none; }
.tl2-card:focus-visible .tl2-title { text-decoration: underline; }
.tl2-card-up { flex-direction: column-reverse; }   /* year ends up nearest the line */
.tl2-year {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  white-space: nowrap;             /* keep "Décembre 2023" on one line */
  color: var(--tl-dev-ink);
}
.tl2-card-down .tl2-year { color: var(--tl-stream); }
.tl2-card-down .tl2-year { margin-bottom: 2px; }
.tl2-card-up   .tl2-year { margin-top: 2px; }
.tl2-title {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.71rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* description speech bubble — hidden until the card is hovered or pinned */
.tl2-bubble {
  position: absolute;
  left: 50%;
  width: max-content;
  /* wider than the card so long descriptions wrap to 3 lines instead of 5 —
     the track clips vertically, so bubble height is the budget here. */
  min-width: 110px;
  max-width: 172px;
  padding: 9px 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 8;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* dev cards open upward, stream cards downward */
.tl2-card-up   .tl2-bubble { bottom: calc(100% + 11px); transform: translateX(-50%) translateY(6px) scale(0.96); }
.tl2-card-down .tl2-bubble { top: calc(100% + 11px);    transform: translateX(-50%) translateY(-6px) scale(0.96); }
.tl2-card:hover .tl2-bubble,
.tl2-card:focus-visible .tl2-bubble,
.tl2-card.is-pinned .tl2-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* a little tail pointing back to the event */
.tl2-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  transform: translateX(-50%) rotate(45deg);
}
.tl2-card-up   .tl2-bubble::after { bottom: -6px; border-top: none;    border-left: none;  }  /* points down */
.tl2-card-down .tl2-bubble::after { top: -6px;    border-bottom: none; border-right: none; }  /* points up */
/* pinned bubbles get an accent edge so it's clear they're "kept open" */
.tl2-card.is-pinned .tl2-bubble-dev    { border-color: var(--tl-dev); }
.tl2-card.is-pinned .tl2-bubble-dev::after    { border-color: var(--tl-dev); }
.tl2-card.is-pinned .tl2-bubble-stream { border-color: var(--tl-stream); }
.tl2-card.is-pinned .tl2-bubble-stream::after { border-color: var(--tl-stream); }

/* side navigation arrows — tall carousel-style pills in the gutters, centred
   on the lane stack, tinted in the brand accent. */
.tl-arrow {
  position: absolute;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px; height: 76px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background 200ms, color 200ms, opacity 220ms, transform 200ms var(--ease-out);
}
.tl-arrow:hover {
  background: var(--accent-deep);
  color: var(--bg);
  transform: translateY(-50%) scale(1.06);
}
.theme-night .tl-arrow { background: var(--surface-2); }
.theme-night .tl-arrow:hover { background: var(--accent-deep); color: var(--on-dark); }
.tl-arrow svg { width: 20px; height: 20px; }
.tl-arrow-l { left: 0; }
.tl-arrow-r { right: 0; }
.tl-arrow-l svg { transform: scaleX(-1); }   /* flip the right-pointing arrow */
.tl-arrow.is-hidden { opacity: 0; pointer-events: none; }

/* =================== PROJECTS =================== */
.projects-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 4px 40px;            /* tiny vertical gap when title + subtitle stack */
  margin-bottom: var(--proj-head-mb);
  flex-wrap: wrap;
}
/* --- featured / upcoming project spotlight -------------------------------- */
/* One project pulled out of the grid and given the middle of the section to
   itself: screenshots on the left, the pitch + launch CTA on the right. */
.feat-project {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: center;
  margin-bottom: var(--proj-grid-gap, 28px);
  padding: 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--lilac) 34%, var(--surface)) 0%,
      color-mix(in oklab, var(--pink)  26%, var(--surface)) 52%,
      color-mix(in oklab, var(--peach) 24%, var(--surface)) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 900px) {
  .feat-project { grid-template-columns: 1fr; gap: 26px; padding: 22px; }
}

.feat-media {
  position: relative;
  display: block;              /* definite width for the frame's % sizing */
  padding: 6px 0;
}
.feat-media > svg { width: 60%; height: auto; margin: 0 auto; display: block; }

/* phone mockup — the screenshots are from a mobile game, so they're shown in
   a device frame with its own island + side buttons. */
.phone-showcase { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* the frame plus the gutters its prev/next arrows sit in */
.phone-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.phone-nav {
  width: 38px; height: 38px;
  z-index: 3;
}
.phone-nav svg { width: 16px; height: 16px; }
.phone-nav-prev { left: 0; }
.phone-nav-prev svg { transform: rotate(180deg); }
.phone-nav-next { right: 0; }
@media (max-width: 420px) {
  /* no room for outside gutters — tuck the arrows over the bezel */
  .phone-nav-prev { left: -6px; }
  .phone-nav-next { right: -6px; }
}
.phone-frame {
  position: relative;
  width: min(250px, 70%);
  max-width: 100%;
  flex: none;
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(155deg, #3a3155 0%, #1b1630 46%, #0f0c1c 100%);
  box-shadow:
    0 26px 60px rgba(34, 26, 58, 0.38),
    0 2px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1.5px rgba(255, 255, 255, 0.12) inset;
}
.phone-screen {
  position: relative;
  width: 100%;
  /* matches the screenshots' own ratio, so nothing gets cropped and the
     frame's height follows from the artwork instead of a guessed device size */
  aspect-ratio: 375 / 670;
  border-radius: 34px;
  overflow: hidden;
  background: #06050c;
}
.phone-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
}
.phone-shot.on { opacity: 1; }
/* dynamic-island style pill */
.phone-island {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 16px;
  border-radius: 999px;
  background: #06050c;
  z-index: 2;
}
/* side buttons */
.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
}
.phone-btn-power  { right: -2px; top: 27%; height: 11%; }
.phone-btn-vol-up { left: -2px;  top: 20%; height: 7%;  }
.phone-btn-vol-dn { left: -2px;  top: 29%; height: 7%;  }

.phone-dots { display: flex; justify-content: center; gap: 8px; }
.phone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 220ms, transform 220ms var(--ease-out);
}
.phone-dot.on { background: var(--accent-deep); border-color: var(--accent-deep); transform: scale(1.15); }

.feat-body { position: relative; z-index: 2; }
.feat-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feat-status {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.theme-night .feat-status { background: var(--accent-deep); color: var(--on-dark); }
.feat-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 8px;
}
.feat-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent-deep);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.feat-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 54ch;
}
.feat-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feat-points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.feat-point-icon { font-size: 15px; line-height: 1.45; }
.feat-tags { margin-top: 18px; }
.feat-cta { margin-top: 24px; }
.feat-stores-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
/* official store badges — Apple's and Google's own artwork, so no restyling
   beyond size. Google's asset ships with built-in clear space, hence the
   larger height + negative margins that make both buttons read the same. */
.store-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.store-badge { display: inline-flex; transition: transform 220ms var(--ease-out); }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { display: block; width: auto; }
.store-badge-apple  img { height: 44px; }
.store-badge-google img { height: 65px; margin: -10.5px -9px; }
.feat-meta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--ink-mute);
}

.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--proj-grid-gap);
}
@media (max-width: 800px) { .proj-grid { grid-template-columns: 1fr; } }

/* The "VR / past work" career card spans the full grid width. On desktop it
   lays the art and meta side-by-side so the wide banner doesn't get a giant
   square of empty illustration. */
.proj.proj-wide {
  grid-column: 1 / -1;
  /* bolder gradient shade — lilac → pink → peach, blended with the surface so
     it's clearly visible while keeping text readable. */
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--lilac) 42%, var(--surface)) 0%,
      color-mix(in oklab, var(--pink)  34%, var(--surface)) 48%,
      color-mix(in oklab, var(--peach) 44%, var(--surface)) 100%);
  border-color: var(--line-strong);
}
.theme-night .proj.proj-wide {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--lilac) 30%, var(--grad-purple-4)) 0%,
      var(--grad-purple-1) 50%,
      color-mix(in oklab, var(--pink-hot) 22%, var(--grad-purple-5)) 100%);
}
@media (min-width: 801px) {
  .proj.proj-wide {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
    gap: 32px;
    align-items: center;
  }
  .proj.proj-wide .proj-art { height: 100%; min-height: var(--proj-art-h); margin-bottom: 0; }
  .proj.proj-wide .proj-meta { align-self: center; }
}

.proj {
  position: relative;
  padding: var(--proj-pad);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: transform 360ms var(--ease-out), box-shadow 360ms, border-color 360ms;
  min-height: var(--proj-min-h);
  display: flex; flex-direction: column; justify-content: space-between;
}
.proj:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.theme-night .proj:hover { box-shadow: 0 0 40px rgba(183,168,255,0.18); }

.proj-cover {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.proj.feat-pink .proj-cover { background: linear-gradient(135deg, var(--pink) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-peach .proj-cover { background: linear-gradient(135deg, var(--peach) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-mint .proj-cover { background: linear-gradient(135deg, var(--mint) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-sky .proj-cover { background: linear-gradient(135deg, var(--sky) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.theme-night .proj-cover { opacity: 0.18 !important; }

.proj-art {
  position: relative;
  height: var(--proj-art-h);
  border-radius: var(--r-md);
  margin-bottom: var(--proj-art-mb);
  overflow: hidden;
  background: var(--surface-2);
  display: grid; place-items: center;
  z-index: 1;
}
.proj-art svg { width: 70%; height: 70%; }

/* Collage preview for the career ("VR / past work") card — a tidy grid of each
   game's cover image instead of a single illustration. data-count sets the
   layout: 1 fills, 2 side-by-side, 3 = banner + two, 4 = 2x2. */
.proj-art-collage {
  position: absolute; inset: 0;
  display: grid;
  gap: 3px;
  width: 100%; height: 100%;
}
.proj-art-collage[data-count="1"] { grid-template-columns: 1fr; }
.proj-art-collage[data-count="2"] { grid-template-columns: 1fr 1fr; }
.proj-art-collage[data-count="3"],
.proj-art-collage[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.proj-art-collage[data-count="3"] .collage-cell:first-child { grid-column: 1 / -1; }
.collage-cell { position: relative; overflow: hidden; }
.collage-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.proj-meta { position: relative; z-index: 1; }
.proj-title {
  font-family: var(--font-display);
  font-size: var(--proj-title-fs);
  font-weight: 500;
  line-height: 1.1;
  margin: 12px 0 8px;
}
.proj-title .it { font-style: italic; color: var(--accent-deep); }
.proj-desc { color: var(--ink-soft); font-size: var(--proj-desc-fs); margin: 0 0 16px; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* case study modal */
.modal-back {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  max-width: var(--modal-max-w);
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--modal-pad);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.98);
  transition: transform 300ms var(--ease-out);
}
.modal-back.open .modal { transform: none; }

/* tiny floating lavender pill scrollbar — the track is kept well clear of
   the modal's rounded corners so all four corners read as round. the thumb
   itself is super thin (visible width = scrollbar width − 2 × transparent
   border) so it feels like a delicate floating pill rather than a rail. */
.modal {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep) transparent;
}
.modal::-webkit-scrollbar {
  width: 14px;
}
.modal::-webkit-scrollbar-track {
  background: transparent;
  margin: calc(var(--r-lg) + 4px) 0;
}
.modal::-webkit-scrollbar-thumb {
  background-color: var(--accent-deep);
  border: 5px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  min-height: 60px;
  transition: background-color 200ms;
}
.modal::-webkit-scrollbar-thumb:hover {
  background-color: var(--pink-hot);
  background-clip: padding-box;
}

.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: var(--modal-close-size); height: var(--modal-close-size); border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.modal-close:hover { background: var(--accent-soft); }
.modal-art {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  margin: 20px 0 32px;
  display: grid; place-items: center;
  overflow: hidden;
}

/* project image carousel (inside .modal-art) */
.carousel-backdrop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(36px) saturate(1.4) brightness(0.95);
  transform: scale(1.12); /* hide the blurred edge bleed */
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.theme-night .carousel-backdrop { filter: blur(36px) saturate(1.2) brightness(0.7); }

.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* applies to <img>/<video> — iframes ignore it */
  z-index: 1;
  display: block;
  border: 0;
  background: transparent;
  animation: carousel-fade 320ms var(--ease-out);
}
/* video player chrome should sit above the blurred backdrop */
video.carousel-img { background: transparent; }
iframe.carousel-img { background: #000; }
@keyframes carousel-fade {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink);
  z-index: 2;
  transition: background 200ms, color 200ms, transform 220ms var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover {
  background: var(--accent-deep);
  color: var(--bg);
  transform: translateY(-50%) scale(1.08);
}
.carousel-prev { left: 12px; }
.carousel-prev svg { transform: rotate(180deg); }
.carousel-next { right: 12px; }

.carousel-counter {
  position: absolute;
  top: 12px; right: 12px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  z-index: 2;
}

.carousel-dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 56%, transparent);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklab, var(--ink) 35%, transparent);
  cursor: pointer;
  padding: 0;
  transition: background 200ms, transform 220ms var(--ease-out);
}
.carousel-dot:hover { background: color-mix(in oklab, var(--accent-deep) 70%, transparent); }
.carousel-dot.on {
  background: var(--accent-deep);
  transform: scale(1.45);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-deep) 25%, transparent);
}

@media (max-width: 560px) {
  .carousel-btn { width: 36px; height: 36px; }
  .carousel-btn svg { width: 14px; height: 14px; }
  .carousel-prev { left: 8px; } .carousel-next { right: 8px; }
}

/* CV timeline media — a single game screenshot (.tl-single-img) or, when a
   game has several, a compact slideshow box (.tl-carousel) reusing the
   .carousel-* chrome above but sized to the timeline thumbnail. */
.tl-single-img {
  display: block;
  max-width: min(680px, 100%);
  max-height: 400px;
  width: auto; height: auto;
  border-radius: 12px;
  margin: 14px 0 8px;
  border: 1px solid var(--line-strong);
}
.tl-carousel {
  position: relative;
  width: min(680px, 100%);
  aspect-ratio: 16 / 10;
  max-height: 440px;
  border-radius: 12px;
  margin: 14px 0 8px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2);
}
/* shrink the shared carousel chrome to fit the smaller timeline box */
.tl-carousel .carousel-btn { width: 40px; height: 40px; }
.tl-carousel .carousel-btn svg { width: 16px; height: 16px; }
.tl-carousel .carousel-prev { left: 10px; }
.tl-carousel .carousel-next { right: 10px; }
.tl-carousel .carousel-counter { top: 10px; right: 10px; padding: 4px 10px; font-size: 11px; }
.tl-carousel .carousel-dots { bottom: 10px; }

/* "+N" badge on project cards when the project has more than one image */
.proj-more {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  pointer-events: none;
}

/* =================== STREAMING =================== */
.stream-wrap {
  position: relative;
}
.stream-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--stream-grid-gap);
  align-items: stretch;
}
@media (max-width: 880px) { .stream-grid { grid-template-columns: 1fr; } }

/* left column holds the big feature + the chat panel stacked vertically */
.stream-l {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
.stream-l .stream-feature { flex: 0 0 auto; }

/* mini twitch-chat panel under the feature box */
.stream-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  min-height: 96px;
}
.stream-chat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stream-chat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live-red);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--live-red) 22%, transparent);
  animation: pulse 1.6s infinite;
}
.stream-chat-msg {
  color: var(--ink);
  text-wrap: pretty;
  animation: chat-msg-fade 380ms var(--ease-out);
}
.stream-chat-user { font-weight: 600; }
.stream-chat-sep  { color: var(--ink-mute); margin: 0 6px 0 2px; }
.stream-chat-text { color: var(--ink-soft); }

/* twitch-style chat badges shown before the username */
.chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  margin-right: 4px;
  vertical-align: -3px;
  font-family: var(--font-sans);
  font-style: normal;
}
.chat-badge-sub         { background: var(--lilac); }
.chat-badge-vip         { background: var(--pink-hot); }
.chat-badge-mod         { background: var(--mint); color: #1f2540; }
.chat-badge-founder     { background: var(--accent-deep); }
.chat-badge-prime       { background: var(--sky); }
.chat-badge-broadcaster { background: var(--live-red); }
.theme-night .chat-badge-mod { color: #1f2540; }

/* fallback-style emote chips appended at the end of a message */
.chat-emote {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent-deep) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-deep) 30%, transparent);
  vertical-align: 1px;
}
.stream-chat-dots {
  position: absolute;
  bottom: 8px; right: 12px;
  display: flex; gap: 4px;
}
.stream-chat-tick {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 25%, transparent);
  transition: background 250ms, transform 250ms var(--ease-out);
}
.stream-chat-tick.on {
  background: var(--accent-deep);
  transform: scale(1.4);
}
@keyframes chat-msg-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stream-feature {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--grad-purple-1), var(--grad-purple-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.stream-feature .live-badge {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: white;
  font-size: var(--fs-mono-md);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  z-index: 4;
}
.stream-feature .live-badge .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live-red);
  box-shadow: 0 0 0 4px rgba(255,85,119,0.25);
  animation: pulse 1.6s infinite;
}
/* Offline VOD-preview variant of the corner pill — same chip shape as LIVE,
   minus the pulsing red dot since nothing is broadcasting. */
.stream-feature .live-badge.vod-badge {
  color: rgba(255,255,255,0.92);
}
.stream-feature .viewers {
  position: absolute; top: 20px; right: 20px;
  background: rgba(0,0,0,0.5); color: white;
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: var(--fs-mono-md);
  font-family: var(--font-mono);
  z-index: 4;
}
.stream-feature .stream-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.stream-feature .stream-title {
  position: absolute; left: var(--stream-title-pad); bottom: var(--stream-title-pad); right: var(--stream-title-pad);
  color: white;
  z-index: 4;
}
.stream-feature .stream-title h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--stream-title-fs);
  margin: 0 0 4px;
  font-weight: 500;
}
.stream-feature .stream-title p {
  margin: 0;
  font-size: var(--stream-sub-fs);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
}
.stream-feature .watch-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--watch-btn-size); height: var(--watch-btn-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  display: grid; place-items: center;
  color: white;
  z-index: 4;
  transition: transform 320ms var(--ease-out);
}
.stream-feature:hover .watch-btn { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,0.24); }

/* Live mode — the static cover is replaced by the real twitch iframe. We
   drop the bottom title overlay (it would block the player's progress bar +
   chrome) and surface a small "open on twitch" pill bottom-right so viewers
   can pop the stream into a full tab. */
.stream-feature-live .stream-title { display: none; }
.stream-feature-live .watch-btn    { display: none; }
.stream-open-twitch {
  position: absolute; bottom: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: white;
  text-decoration: none;
  font-size: var(--fs-mono-md);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  z-index: 5;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.stream-open-twitch:hover { background: rgba(0,0,0,0.7); transform: translateY(-1px); }

/* schedule */
/* right column of the stream grid — stacks the optional banner above the
   weekly schedule. The reveal animation lives here so banner + schedule
   slide in together. */
.stream-r {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
.schedule-banner {
  width: 100%;
  aspect-ratio: 5 / 2;        /* designed for 1200×480 art */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.schedule-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.schedule {
  padding: var(--sched-pad);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.schedule h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--sched-h4-fs);
  margin: 0 0 var(--sched-h4-mb);
  font-weight: 500;
}
.schedule-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row.today { color: var(--accent-deep); font-weight: 500; }
.schedule-row .day {
  font-family: var(--font-mono);
  font-size: var(--sched-day-fs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.schedule-row .time { font-size: var(--sched-time-fs); color: var(--ink-soft); }
.schedule-row.today .time { color: var(--accent-deep); }
.schedule-row.off .time { color: var(--ink-mute); font-style: italic; }

.clips-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;            /* let each card use its own aspect ratio */
  gap: var(--clips-gap);
  margin-top: var(--clips-mt);
}
@media (max-width: 920px) { .clips-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .clips-row { grid-template-columns: 1fr; } }
.clip {
  position: relative;
  aspect-ratio: 9 / 13;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform 320ms var(--ease-out);
}
.clip:hover { transform: translateY(-4px); }
.clip-art { position: absolute; inset: 0; }
.clip-art > video,
.clip-art > iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  border: 0;
  object-fit: cover;          /* applies to <video>; iframes ignore it */
}
/* Fixed-size embeds (TikTok). The inner frame keeps the player's natural px
   size and is scaled down to the card width in JS — see ClipEmbedScaler. */
.clip-embed-scale { position: absolute; inset: 0; overflow: hidden; }
.clip-embed-frame {
  position: relative;
  transform-origin: top left;
}
.clip-embed-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  border: 0;
}

/* Click-to-play poster for TikTok clips — the real iframe only mounts on click
   (see ClipCard). Loading several TikTok embeds at once makes the later ones
   render blank, so we show a thumbnail up front and load one player on demand. */
.clip-facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: var(--surface-2);
  cursor: pointer;
  display: block;
}
.clip-facade > img { object-fit: cover; }
.clip-facade-blank { position: absolute; inset: 0; background: var(--surface-2); }
.clip-facade-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  backdrop-filter: blur(2px);
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.clip-facade:hover .clip-facade-play,
.clip-facade:focus-visible .clip-facade-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent-deep);
}
.clip-facade-play svg { width: 20px; height: 20px; margin-left: 2px; }
.clip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.clip.clip-interactive { cursor: default; }

/* big circular play/pause overlay that sits in the middle of a video clip */
.clip-toggle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklab, var(--bg) 68%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background 200ms;
}
.clip-toggle.paused {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.clip:hover .clip-toggle.playing {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.clip-toggle:hover { background: var(--accent-deep); color: var(--bg); }
.clip-toggle svg { width: 22px; height: 22px; }

/* sound + volume pill — top-left of a video clip. Resting state is just a
   small circular icon; hovering the pill (or focusing inside it) expands it
   to reveal an inline volume slider. */
.clip-sound-wrap {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  overflow: hidden;
  transition: padding 240ms var(--ease-out), background 200ms;
}
.clip-sound-wrap:hover,
.clip-sound-wrap:focus-within { padding-right: 12px; }

.clip-sound {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 0; padding: 0;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink);
  transition: color 200ms;
}
.clip-sound:hover { color: var(--accent-deep); }
.clip-sound svg { width: 14px; height: 14px; }

.clip-volume {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 0;
  width: 0;
  height: 4px;
  margin: 0;
  opacity: 0;
  background: transparent;
  cursor: pointer;
  transition: width 240ms var(--ease-out), opacity 200ms, margin 240ms var(--ease-out);
}
.clip-sound-wrap:hover .clip-volume,
.clip-sound-wrap:focus-within .clip-volume {
  width: 70px;
  margin-left: 6px;
  opacity: 1;
}
/* Slider track + thumb — lavender to match the rest of the site. */
.clip-volume::-webkit-slider-runnable-track {
  height: 4px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  border-radius: 999px;
}
.clip-volume::-moz-range-track {
  height: 4px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  border-radius: 999px;
}
.clip-volume::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent-deep);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-deep) 50%, transparent);
  cursor: pointer;
  transition: transform 180ms var(--ease-out);
}
.clip-volume::-webkit-slider-thumb:hover { transform: scale(1.15); }
.clip-volume::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-deep);
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* small "view original" link button — sits in the top-right of a clip card */
.clip-external {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  display: grid; place-items: center;
  color: var(--ink);
  text-decoration: none;
  transition: background 200ms, color 200ms, transform 220ms var(--ease-out);
}
.clip-external:hover {
  background: var(--accent-deep);
  color: var(--bg);
  transform: scale(1.08);
}
.clip-external svg { width: 13px; height: 13px; }
/* TikTok/Instagram-style bottom-left text stack: @handle · caption · ♪ music.
   Becomes an <a> when `clip.link` is set, opening the original post. */
.clip-meta {
  position: absolute;
  left: 14px; right: 60px;   /* leave room for the right-side action stack */
  bottom: 14px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  gap: 3px;
  text-decoration: none;
  transition: transform 220ms var(--ease-out), filter 200ms;
}
a.clip-meta { cursor: pointer; }
a.clip-meta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
a.clip-meta:hover .clip-handle { text-decoration: underline; }
.clip-handle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.clip-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.95);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip-music {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
  max-width: 100%;
}
.clip-music-note {
  display: inline-block;
  animation: clip-music-spin 4.2s linear infinite;
  font-size: 13px;
  line-height: 1;
}
.clip-music-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes clip-music-spin {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(12deg); }
}
.clip-views {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* Right-edge action stack (heart · comment · share) — same vibe as the
   floating buttons on the right of a TikTok feed. Heart toggles a local
   "liked" state; the other two open the clip's external link. */
.clip-actions {
  position: absolute;
  right: 10px; bottom: 16px;
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.clip-action {
  appearance: none;
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 220ms var(--ease-out), filter 200ms;
}
.clip-action:hover { transform: scale(1.1); filter: brightness(1.1); }
.clip-action:active { transform: scale(0.96); }
.clip-action-static { cursor: default; }
.clip-action-static:hover { transform: none; filter: none; }
.clip-action-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  transition: color 200ms;
}
.clip-action-icon svg { width: 22px; height: 22px; }
.clip-action-count {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* "liked" heart — fills with TikTok-style hot pink and pulses once. */
.clip-action.is-liked .clip-action-icon {
  color: var(--pink-hot);
  animation: heart-pop 360ms var(--ease-out);
}
@keyframes heart-pop {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1);   }
}
.clip-play {
  position: absolute; top: 12px; right: 12px;
  width: var(--clip-play-size); height: var(--clip-play-size);
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: white;
  z-index: 2;
}

/* =================== COLLABORATIONS & COMMUNITY (dual) =================== */
.dual-collab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dual-gap);
  align-items: start;
}
@media (max-width: 880px) { .dual-collab { grid-template-columns: 1fr; gap: var(--dual-gap-sm); } }

.dual-col {
  padding: var(--dual-pad);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.dual-col:first-child {
  background: linear-gradient(160deg, var(--surface) 0%, color-mix(in oklab, var(--accent-soft) 60%, var(--surface)) 100%);
}
.dual-col:last-child {
  background: linear-gradient(160deg, var(--surface) 0%, color-mix(in oklab, var(--bg-pink) 70%, var(--surface)) 100%);
}
.theme-night .dual-col:first-child {
  background: linear-gradient(160deg, var(--surface) 0%, var(--grad-purple-4) 100%);
}
.theme-night .dual-col:last-child {
  background: linear-gradient(160deg, var(--surface) 0%, var(--grad-pink-deep) 100%);
}

.dual-head { margin-bottom: var(--dual-head-mb); }
.dual-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--dual-tag-fs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--dual-tag-pad);
  border-radius: 999px;
  background: var(--accent-deep);
  color: var(--bg);
  margin-bottom: 14px;
}
.theme-night .dual-tag { color: var(--on-dark); box-shadow: var(--glow); }
.dual-tag.pink { background: var(--pink); color: var(--on-pink-deep); }
.theme-night .dual-tag.pink { background: var(--pink-hot); box-shadow: 0 0 18px rgba(255, 158, 199, 0.5); }

.dual-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--dual-h-fs);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
.dual-h .it { font-style: italic; color: var(--accent-deep); }

/* dev clients list */
.collab-list { display: flex; flex-direction: column; gap: 0; }
.collab-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: var(--collab-row-gap);
  padding: var(--collab-row-pad-y) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.collab-row:last-child { border-bottom: none; padding-bottom: 4px; }
.collab-row-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--collab-name-fs);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.collab-row-role {
  font-family: var(--font-mono);
  font-size: var(--collab-role-fs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 4px;
}
.collab-row-note {
  font-size: var(--collab-note-fs);
  color: var(--ink-soft);
  text-wrap: pretty;
  line-height: 1.45;
}

@media (max-width: 540px) {
  .collab-row { grid-template-columns: 1fr; gap: 6px; }
}

/* stream community quotes */
.stream-quotes { display: flex; flex-direction: column; gap: var(--quote-gap); }
.stream-quote {
  margin: 0;
  padding: var(--quote-pad);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  position: relative;
}
.theme-night .stream-quote { background: rgba(255,255,255,0.04); }
.stream-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--quote-fs);
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--ink);
  text-wrap: pretty;
}
.stream-quote::before {
  content: "“";
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--quote-mark-fs);
  line-height: 1;
  position: absolute;
  top: 6px; right: 14px;
  color: var(--pink);
  opacity: 0.7;
}
.theme-night .stream-quote::before { color: var(--pink-hot); }
.stream-quote-who {
  font-family: var(--font-mono);
  font-size: var(--quote-who-fs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.causes {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.causes-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.causes-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* =================== CONTACT =================== */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--contact-gap);
  align-items: start;
}
@media (max-width: 820px) { .contact-wrap { grid-template-columns: 1fr; } }

.contact-l h2 { margin-bottom: 24px; }
.contact-l p { color: var(--ink-soft); font-size: var(--contact-p-fs); max-width: 36ch; }
.contact-l .email-line {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: var(--contact-email-mt);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--contact-email-fs);
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 4px;
}

.form {
  display: flex; flex-direction: column; gap: var(--form-gap);
  padding: var(--form-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--field-label-fs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--field-input-pad);
  color: var(--ink);
  font: inherit;
  font-size: var(--field-input-fs);
  transition: border-color 200ms, background 200ms;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-deep);
  background: var(--surface-2);
}
.field textarea { min-height: var(--textarea-min-h); resize: vertical; }

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip {
  padding: var(--topic-chip-pad);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--topic-chip-fs);
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 200ms;
}
.topic-chip.on {
  background: var(--accent-deep);
  color: var(--bg);
  border-color: var(--accent-deep);
}
.theme-night .topic-chip.on { color: var(--on-dark); box-shadow: var(--glow); }

.form-success {
  padding: var(--form-success-pad);
  text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--line-strong);
}
.form-success .check {
  width: var(--form-success-check); height: var(--form-success-check);
  border-radius: 50%;
  background: var(--accent-deep);
  margin: 0 auto 16px;
  display: grid; place-items: center;
  color: var(--bg);
  font-size: 26px;
}
.form-success h4 { font-family: var(--font-display); font-style: italic; font-size: var(--form-success-h-fs); margin: 0 0 8px; font-weight: 500; }
.form-success p { color: var(--ink-soft); margin: 0; }

/* Error banner shown above the send button when FormSubmit returns an error
   (or the network fails). Sits inline so it doesn't push the layout too much. */
.form-error {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--pink-hot) 18%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--pink-hot) 60%, var(--line-strong));
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.theme-night .form-error {
  background: color-mix(in oklab, var(--pink-hot) 22%, var(--surface-2));
}

/* =================== FOOTER =================== */
footer {
  padding: var(--footer-pad);
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--footer-grid-gap);
  align-items: start;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--footer-brand-fs);
  margin: 0 0 8px;
  font-weight: 500;
  line-height: 1;
}
.footer-brand p { color: var(--ink-soft); max-width: 30ch; margin: 0 0 20px; }
.footer-col h6 {
  font-family: var(--font-mono);
  font-size: var(--footer-col-h-fs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  padding: 4px 0;
  color: var(--ink-soft);
  font-size: var(--footer-col-a-fs);
  transition: color 200ms, transform 200ms;
}
.footer-col a:hover {
  color: var(--accent-deep);
  transform: translateX(4px);
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--footer-bottom-mt); padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--footer-bottom-fs); color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.footer-mega {
  position: absolute;
  bottom: -40px; right: -20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--footer-mega-fs);
  line-height: 0.85;
  color: var(--accent-soft);
  opacity: 0.6;
  pointer-events: none;
  white-space: nowrap;
}
.theme-night .footer-mega { color: var(--surface-2); opacity: 0.5; }

/* =================== CURSOR / SPARKLES =================== */
.cursor-sparkle {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, var(--sparkle-a), transparent 70%);
  animation: csp 800ms ease-out forwards;
}
.theme-night .cursor-sparkle {
  mix-blend-mode: screen;
}
@keyframes csp {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.2) translateY(-30px); opacity: 0; }
}

/* confetti container */
.confetti-piece {
  position: fixed;
  top: -20px;
  width: 10px; height: 14px;
  z-index: 9998;
  pointer-events: none;
  border-radius: 2px;
}

/* keyboard hint */
.kb-hint {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--kb-hint-pad);
  font-size: var(--kb-hint-fs);
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: opacity 400ms, transform 400ms;
}
.kb-hint.hide { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* sound toggle floating */
.sound-toggle {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 40;
  width: var(--sound-toggle-size); height: var(--sound-toggle-size);
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: all 220ms;
}
.sound-toggle:hover { color: var(--accent-deep); border-color: var(--line-strong); }
.sound-toggle.on { background: var(--accent-deep); color: var(--bg); }
.theme-night .sound-toggle.on { box-shadow: var(--glow); }

/* music toggle */
.music-toggle {
  position: fixed;
  bottom: 24px; left: var(--music-toggle-left);
  z-index: 40;
  height: var(--music-toggle-h);
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: all 220ms;
}
.music-toggle:hover { color: var(--accent-deep); border-color: var(--line-strong); }
.music-toggle.on { background: var(--accent-deep); color: var(--bg); }
.theme-night .music-toggle.on { box-shadow: var(--glow); }

.music-wave {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: var(--music-wave-h);
}
.music-wave > span {
  display: inline-block;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
  height: 4px;
  transform-origin: bottom;
}
.music-toggle.on .music-wave > span {
  opacity: 1;
  animation: music-bar 1.2s ease-in-out infinite;
}
.music-toggle.on .music-wave > span:nth-child(1) { animation-delay: 0s; }
.music-toggle.on .music-wave > span:nth-child(2) { animation-delay: 0.2s; }
.music-toggle.on .music-wave > span:nth-child(3) { animation-delay: 0.4s; }

@keyframes music-bar {
  0%, 100% { height: 3px; }
  50% { height: 12px; }
}

/* mini section labels */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 4px 32px;            /* tiny vertical gap when title + subtitle stack */
  margin-bottom: var(--section-head-mb);
  flex-wrap: wrap;
}
.section-head .right { color: var(--ink-soft); font-size: var(--section-head-r-fs); max-width: 36ch; text-wrap: pretty; }

/* =================== SERVICES / WORK WITH ME =================== */
.services { overflow: hidden; }

/* service cards — each box presents a skill and carries its own rate */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .svc-cards { grid-template-columns: 1fr; } }

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms, border-color 320ms;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.svc-card-icon { font-size: 30px; line-height: 1; display: block; }
.svc-card-title {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 16px 0 9px;
}
.svc-card-desc { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; text-wrap: pretty; }

/* price + note pinned to the bottom of each card so they line up across the row */
.svc-card-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-card-desc + .svc-card-foot { margin-top: 18px; }
.svc-card-price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
}
.svc-card-note { color: var(--ink-soft); font-size: 0.86rem; margin-top: 3px; }

/* cards that have a `detail` block open a popup, so they read as clickable */
.svc-card.is-openable { cursor: pointer; }
.svc-card.is-openable:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}
.svc-card-more {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--accent-deep);
}
.svc-card-more svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-out); }
.svc-card.is-openable:hover .svc-card-more svg { transform: translateX(4px); }

.svc-cta { margin-top: 44px; display: flex; justify-content: center; }

/* --- service detail popup ------------------------------------------------- */
.svc-modal { position: relative; }
.svc-modal-icon { font-size: 34px; line-height: 1; display: block; }
.svc-modal-title {
  margin: 14px 0 8px;
  font-size: clamp(32px, 4.4vw, 54px);
}
.svc-modal-lead { margin: 0; }
.svc-modal-body {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 62ch;
}
.svc-modal-block { margin-top: 32px; }
.svc-modal-head {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.svc-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-modal-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.svc-modal-mark { color: var(--pink-hot); font-size: 0.9rem; line-height: 1.5; }
.svc-modal-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.svc-modal-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.svc-modal-step-n {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--lilac) 22%, var(--surface-2));
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-deep);
}
.svc-modal-step-h {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.84rem;
  color: var(--ink);
  margin: 5px 0 4px;
}
.svc-modal-step-p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

.svc-modal-facts {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.svc-modal-fact {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.svc-modal-fact-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.svc-modal-fact-v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent-deep);
  text-wrap: pretty;
}
.svc-modal-fact-n { color: var(--ink-soft); font-size: 0.84rem; }

.svc-modal-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* =================== GAME JAMS CARD =================== */
.jam-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  padding: var(--jam-pad);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-pink) 50%, var(--bg-warm) 100%);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.theme-night .jam-card {
  background:
    linear-gradient(135deg, var(--grad-purple-4) 0%, var(--grad-purple-1) 50%, var(--grad-purple-5) 100%);
}
.jam-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.jam-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--jam-h3-fs);
  line-height: 1.1;
  margin: 14px 0 20px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.jam-card h3 .it { font-style: italic; color: var(--accent-deep); }
.jam-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--jam-link-fs);
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
}
.jam-card:hover .jam-link { color: var(--accent-deep); border-color: var(--accent-deep); }

.jam-r {
  position: relative;
  height: var(--jam-r-h);
}
.jam-stack {
  position: absolute; inset: 0;
}
.jam-tile {
  position: absolute;
  width: var(--jam-tile-w); height: var(--jam-tile-h);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.4);
  overflow: hidden;
}
.jam-tile.t1 { background: linear-gradient(160deg, var(--pink-hot), var(--lilac)); left: 8%; top: 8%; transform: rotate(-8deg); }
.jam-tile.t2 { background: linear-gradient(160deg, var(--lilac), var(--sky)); left: 32%; top: 14%; transform: rotate(4deg); }
.jam-tile.t3 { background: linear-gradient(160deg, var(--peach), var(--pink-hot)); left: 54%; top: 6%; transform: rotate(-3deg); }
.jam-tile.t4 { background: linear-gradient(160deg, var(--mint), var(--lilac)); left: 70%; top: 22%; transform: rotate(10deg); }

/* Optional screenshot inside each tile — sits over the gradient. The same
   gradient is then layered on top at low opacity with `soft-light` so the
   tile keeps its lilac/peach/sky tint while still showing the image. */
.jam-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.jam-tile.has-img::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}
.jam-tile.has-img.t1::after { background: linear-gradient(160deg, var(--pink-hot), var(--lilac)); }
.jam-tile.has-img.t2::after { background: linear-gradient(160deg, var(--lilac), var(--sky)); }
.jam-tile.has-img.t3::after { background: linear-gradient(160deg, var(--peach), var(--pink-hot)); }
.jam-tile.has-img.t4::after { background: linear-gradient(160deg, var(--mint), var(--lilac)); }

@media (max-width: 760px) {
  .jam-card { grid-template-columns: 1fr; padding: var(--jam-pad-sm); }
  .jam-r { height: var(--jam-r-h-sm); }
}

/* =================== MINI PANELS (under projects) =================== */
/* Layout under the projects grid:
     +-----------+ +-----------+
     |  webtoon  | |           |
     +-----------+ | drawings  |
     | game jams | | (spans 2) |
     +-----------+ +-----------+
   Drawings spans both rows of the right column and dictates the total
   height — webtoon + jams + gap stretch to match. Game jams is the
   short one; webtoon takes whatever's left in the top-left cell. */
.proj-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row 1 = webtoon, stretches to fill leftover space.
     Row 2 = game jams, sized to its (small) content.
     Drawings spans both rows on the right and pins the total height. */
  grid-template-rows: 1fr auto;
  gap: var(--proj-grid-gap);
  align-items: stretch;
}
.proj-mini-grid .webtoon-card { grid-column: 1; grid-row: 1; }
.proj-mini-grid .jam-card     { grid-column: 1; grid-row: 2; }
.proj-mini-grid .draw-card    { grid-column: 2; grid-row: 1 / span 2; }
.proj-mini-grid .webtoon-card.mini-panel { min-height: 0; }
@media (max-width: 800px) {
  .proj-mini-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .proj-mini-grid .webtoon-card,
  .proj-mini-grid .jam-card,
  .proj-mini-grid .draw-card { grid-column: auto; grid-row: auto; }
}

.mini-panel {
  min-height: 360px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Compact variant of the existing jam-card when it sits inside the mini-grid:
   keep the original side-by-side layout (text left, decorative tiles right)
   but shrink everything down. The four tiles sit fanned like a hand of
   playing cards in the default state, then spread out on hover to "unveil". */
.jam-card.mini-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  padding: 22px 24px;
  min-height: 0;
  gap: 16px;
  align-items: center;
}
.jam-card.mini-panel .jam-l { display: flex; flex-direction: column; gap: 4px; }
.jam-card.mini-panel h3 {
  font-size: clamp(18px, 2vw, 24px);
  margin: 4px 0 6px;
}

/* Right column — fanned card hand. Default state: cards stacked close to the
   center with overlapping tilt. On panel hover, each card spreads outward
   along an arc, like dealing a hand. */
.jam-card.mini-panel .jam-r {
  height: 130px;
  margin-top: 0;
  align-self: center;
}
.jam-card.mini-panel .jam-tile {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  top: 50%;
  left: 50%;
  /* --tx, --ty: offset from center; --rot: angle. JS not needed — these
     are set per tile below and animated via the card's hover state. */
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg));
  transition: transform 360ms var(--ease-out), box-shadow 360ms;
  transform-origin: 50% 60%;
}
/* Idle state — cards lightly fanned, just enough to read as a hand of cards
   rather than a stack. */
.jam-card.mini-panel .jam-tile.t1 { --tx: -42px; --ty: 6px;  --rot: -14deg; z-index: 1; }
.jam-card.mini-panel .jam-tile.t2 { --tx: -14px; --ty: -3px; --rot: -6deg;  z-index: 2; }
.jam-card.mini-panel .jam-tile.t3 { --tx: 12px;  --ty: -3px; --rot: 6deg;   z-index: 3; }
.jam-card.mini-panel .jam-tile.t4 { --tx: 38px;  --ty: 6px;  --rot: 14deg;  z-index: 4; }

/* Hover state — full fan animation: cards spread out along an arc and lift,
   like dealing them across the table. */
.jam-card.mini-panel:hover .jam-tile.t1 { --tx: -96px; --ty: 10px; --rot: -26deg; }
.jam-card.mini-panel:hover .jam-tile.t2 { --tx: -34px; --ty: -6px; --rot: -10deg; }
.jam-card.mini-panel:hover .jam-tile.t3 { --tx: 32px;  --ty: -6px; --rot: 10deg;  }
.jam-card.mini-panel:hover .jam-tile.t4 { --tx: 92px;  --ty: 10px; --rot: 26deg;  }
.jam-card.mini-panel:hover .jam-tile { box-shadow: var(--shadow-md); }

/* DRAWINGS + COMMISSIONS panel ----------------------------------------- */
.draw-card {
  position: relative;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--peach) 0%, var(--accent-soft) 55%, var(--bg-pink) 100%);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.theme-night .draw-card {
  background:
    linear-gradient(135deg, var(--grad-purple-3) 0%, var(--grad-purple-1) 55%, var(--grad-purple-5) 100%);
}
.draw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.draw-card .draw-head { display: flex; flex-direction: column; gap: 6px; }
.draw-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  margin: 6px 0 4px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.draw-card h3 .it { font-style: italic; color: var(--accent-deep); }
.draw-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  flex: 1;
  min-height: 180px;
  margin-top: auto;
}
.draw-tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1;
  /* button reset — element is now <button> so the lightbox can open. */
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  --rot: 0deg;
  transform: rotate(var(--rot));
  transition: transform 240ms var(--ease-out), box-shadow 240ms;
}
.draw-tile.has-img:hover {
  transform: rotate(0deg) scale(1.06) translateY(-2px);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.draw-tile.has-img:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.draw-tile:disabled { cursor: default; opacity: 1; }
.draw-tile.dt1 { --rot: -2deg;   background: linear-gradient(160deg, var(--pink-hot), var(--lilac));  }
.draw-tile.dt2 { --rot: 1.5deg;  background: linear-gradient(160deg, var(--peach),   var(--pink-hot)); }
.draw-tile.dt3 { --rot: -1deg;   background: linear-gradient(160deg, var(--mint),    var(--sky));      }
.draw-tile.dt4 { --rot: 2deg;    background: linear-gradient(160deg, var(--lilac),   var(--sky));      }
.draw-tile.dt5 { --rot: -1.5deg; background: linear-gradient(160deg, var(--sky),     var(--mint));     }
.draw-tile.dt6 { --rot: 1deg;    background: linear-gradient(160deg, var(--pink),    var(--peach));    }
.draw-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.draw-card .jam-link { align-self: flex-start; }
.draw-card:hover .jam-link { color: var(--accent-deep); border-color: var(--accent-deep); }

/* Footer row of the drawings card: shop link on the left, "order a commission"
   on the right. Wraps to two stacked rows on narrow widths. */
.draw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.draw-footer .jam-link { align-self: auto; }
.draw-commission-link { color: var(--accent-deep); border-color: var(--accent-deep); }
.draw-commission-link:hover { color: var(--ink); border-color: var(--ink); }

/* WEBTOON panel -------------------------------------------------------- */
.webtoon-card {
  position: relative;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--lilac) 0%, var(--accent-soft) 50%, var(--sky) 100%);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
  /* No overflow:hidden — let the rotated/scaled cover breathe past the
     padding on hover instead of getting its corners clipped. The card's own
     gradient is already kept inside the rounded corners by border-radius. */
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: center;
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.theme-night .webtoon-card {
  background:
    linear-gradient(135deg, var(--grad-purple-2) 0%, var(--grad-purple-1) 50%, var(--grad-purple-4) 100%);
}
.webtoon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.webtoon-l { display: flex; flex-direction: column; gap: 8px; }
.webtoon-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  margin: 6px 0 6px;
  letter-spacing: -0.01em;
}
.webtoon-card h3 .it { font-style: italic; color: var(--accent-deep); }
.webtoon-title-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  object-position: center;
  margin: 4px 0 8px;
  border-radius: var(--r-md);
}
.webtoon-desc {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.webtoon-card .jam-link { align-self: flex-start; }
.webtoon-card:hover .jam-link { color: var(--accent-deep); border-color: var(--accent-deep); }
.webtoon-r {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow-md);
  transform: rotate(1.5deg);
  transform-origin: center;
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  /* Aspect ratio tuned for portrait webtoon covers (5/7 ≈ A4 portrait) so
     `object-fit: cover` doesn't crop large chunks off the top + bottom. The
     container grows in height to fit the image instead of squishing it. */
  aspect-ratio: 5 / 7;
  width: 100%;
  max-height: 360px;
  margin-block: auto;
  align-self: center;
}
/* Hover: tilt the other way + scale up with a deeper shadow so the cover
   lifts off the panel. Lives on the cover, not the whole card. */
.webtoon-card:hover .webtoon-r {
  transform: rotate(-2.5deg) scale(1.06);
  box-shadow: 0 24px 48px -12px rgba(34, 26, 58, 0.45);
}
.webtoon-cover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--lilac), var(--pink));
}
.webtoon-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.webtoon-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 4px 24px rgba(34, 26, 58, 0.35);
}

/* KOFI big panel + supporter wall -------------------------------------- */
.kofi-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: stretch;
  padding: var(--jam-pad);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--bg-pink) 0%, var(--accent-soft) 45%, var(--peach) 100%);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}

/* The card is now the ko-fi trigger, so hide the overlay widget's own floating
   button — but keep it laid out (opacity/pointer-events, not display:none) so the
   widget can still measure its position and slide the donation panel open. */
.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi {
  opacity: 0 !important;
  pointer-events: none !important;
}
.theme-night .kofi-card {
  background:
    linear-gradient(135deg, var(--grad-purple-5) 0%, var(--grad-purple-2) 45%, var(--grad-purple-4) 100%);
}
.kofi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kofi-l { display: flex; flex-direction: column; gap: 10px; }
.kofi-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--jam-h3-fs);
  line-height: 1.1;
  margin: 14px 0 12px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.kofi-card h3 .it { font-style: italic; color: var(--accent-deep); }
.kofi-desc {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 38ch;
}
.kofi-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  background: var(--accent-deep);
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent-deep);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-out), box-shadow 220ms;
  margin-top: auto;
}
.kofi-card:hover .kofi-cta {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.theme-night .kofi-cta { box-shadow: var(--glow); }

.kofi-r {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.kofi-wall-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  align-self: flex-end;
}
.kofi-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  align-content: center;
  justify-content: center;
  flex: 1;
  padding: 6px;
}
.kofi-name {
  --rot: 0deg;
  --delay: 0s;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transform: rotate(var(--rot));
  transition: transform 260ms var(--ease-out), box-shadow 260ms;
  animation: kofi-name-float 5.5s ease-in-out infinite;
  animation-delay: var(--delay);
  white-space: nowrap;
}
.kofi-card:hover .kofi-name { transform: rotate(calc(var(--rot) * 0.4)); }
.kofi-name:hover { transform: rotate(0deg) scale(1.08) !important; box-shadow: var(--shadow-md); z-index: 2; }
.kofi-name.k1 { background: var(--surface);                                                 color: var(--accent-deep); }
.kofi-name.k2 { background: color-mix(in oklab, var(--pink)  60%, var(--surface));          color: var(--ink); }
.kofi-name.k3 { background: color-mix(in oklab, var(--lilac) 55%, var(--surface));          color: var(--ink); }
.kofi-name.k4 { background: color-mix(in oklab, var(--peach) 65%, var(--surface));          color: var(--ink); }
.kofi-name.k5 { background: color-mix(in oklab, var(--mint)  55%, var(--surface));          color: var(--ink); }
.theme-night .kofi-name { background: var(--surface-2); box-shadow: 0 0 14px rgba(183,168,255,0.18); }
.theme-night .kofi-name.k2 { background: color-mix(in oklab, var(--grad-purple-3) 70%, var(--surface-2)); }
.theme-night .kofi-name.k3 { background: color-mix(in oklab, var(--grad-purple-2) 70%, var(--surface-2)); }
.theme-night .kofi-name.k4 { background: color-mix(in oklab, var(--grad-purple-4) 70%, var(--surface-2)); }
.theme-night .kofi-name.k5 { background: color-mix(in oklab, var(--grad-purple-5) 70%, var(--surface-2)); }

@keyframes kofi-name-float {
  0%, 100% { transform: rotate(var(--rot)) translateY(0); }
  50%      { transform: rotate(calc(var(--rot) + 1.5deg)) translateY(-3px); }
}

@media (max-width: 760px) {
  .kofi-card { grid-template-columns: 1fr; padding: var(--jam-pad-sm); }
  .kofi-r { min-height: 220px; }
  .webtoon-card { grid-template-columns: 1fr; }
  .webtoon-r { aspect-ratio: 16 / 10; transform: none; max-height: 220px; }
}

/* =================== GALLERY · SOUVENIRS =================== */
.gallery-section { overflow: hidden; }

.gallery-stage {
  position: relative;
  padding: var(--gallery-stage-pad);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--bg-pink) 70%, var(--surface)) 0%,
      color-mix(in oklab, var(--accent-soft) 60%, var(--surface)) 60%,
      color-mix(in oklab, var(--bg-warm) 60%, var(--surface)) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
.theme-night .gallery-stage {
  background: linear-gradient(160deg, var(--grad-purple-6) 0%, var(--grad-purple-4) 55%, var(--grad-purple-1) 100%);
}
.gallery-stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
  opacity: 0.55;
}

.gallery-ribbon {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--gallery-ribbon-fs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: var(--gallery-ribbon-pad);
  border-radius: 999px;
  white-space: nowrap;
  z-index: 4;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 80%;
}
.theme-night .gallery-ribbon { background: var(--accent-deep); color: var(--on-dark); box-shadow: var(--glow); }
.gallery-ribbon-inner {
  display: inline-block;
  white-space: nowrap;
  animation: ribbonScroll 28s linear infinite;
}

.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--polaroid-gap);
  padding: var(--polaroid-grid-pad);
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) { .polaroid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .polaroid-grid { grid-template-columns: repeat(2, 1fr); gap: var(--polaroid-gap-sm); } }
@media (max-width: 440px) { .polaroid-grid { grid-template-columns: 1fr; } }

.polaroid {
  position: relative;
  margin: 0;
  padding: var(--polaroid-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 18px 30px -18px rgba(34, 26, 58, 0.35), 0 2px 6px rgba(34,26,58,0.08);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 380ms var(--ease-out), box-shadow 380ms;
  animation: polaroidIn 700ms var(--ease-out) both;
}
@keyframes polaroidIn {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
.polaroid:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.04);
  box-shadow: 0 30px 50px -22px rgba(34, 26, 58, 0.45), 0 4px 12px rgba(34,26,58,0.12);
  z-index: 3;
}
.polaroid.clickable { cursor: pointer; }
.polaroid.clickable:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.06);
}
.polaroid.clickable:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 4px;
}
.theme-night .polaroid {
  background: var(--polaroid-night-bg);
  border-color: var(--line-strong);
  box-shadow: 0 0 30px rgba(183,168,255,0.18);
}
.theme-night .polaroid:hover { box-shadow: 0 0 60px rgba(183,168,255,0.32); }

/* Polaroid pin — flat brand-colored disc that matches the polaroid's own
   tone (lilac / pink / peach / mint / sky). Soft inner highlight + a small
   drop shadow keep just enough dimensionality to read as a pin without
   fighting the lavender aesthetic. */
.polaroid-pin {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: var(--pin-size); height: var(--pin-size);
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow:
    0 2px 5px rgba(34, 26, 58, 0.28),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(34, 26, 58, 0.18);
  z-index: 5;
}
.polaroid.tone-lilac .polaroid-pin { background: var(--lilac); }
.polaroid.tone-pink  .polaroid-pin { background: var(--pink-hot); }
.polaroid.tone-peach .polaroid-pin { background: var(--peach); }
.polaroid.tone-mint  .polaroid-pin { background: var(--mint); }
.polaroid.tone-sky   .polaroid-pin { background: var(--sky); }
.theme-night .polaroid-pin {
  box-shadow:
    0 0 10px color-mix(in oklab, currentColor 40%, transparent),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
}

.polaroid-photo {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--lilac) 0%, var(--pink) 100%);
}
.polaroid.tone-lilac .polaroid-photo { background: linear-gradient(140deg, var(--lilac-pale), var(--pink-hot)); }
.polaroid.tone-pink  .polaroid-photo { background: linear-gradient(140deg, var(--pink), var(--peach)); }
.polaroid.tone-peach .polaroid-photo { background: linear-gradient(140deg, var(--peach), var(--peach-soft)); }
.polaroid.tone-mint  .polaroid-photo { background: linear-gradient(140deg, var(--mint), var(--sky)); }
.polaroid.tone-sky   .polaroid-photo { background: linear-gradient(140deg, var(--sky), var(--lilac-pale)); }
.theme-night .polaroid-photo { filter: brightness(0.78) saturate(0.85); }

.polaroid-photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.0) 0 18px,
      rgba(255,255,255,0.18) 18px 19px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.polaroid-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 35%, rgba(255,255,255,0.25), transparent 70%);
  pointer-events: none;
}
.polaroid-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--polaroid-glyph-fs);
  color: rgba(255,255,255,0.85);
  text-shadow: 0 4px 18px rgba(0,0,0,0.18);
  z-index: 2;
  line-height: 1;
}
.polaroid-placeholder {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--polaroid-placeholder-fs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.18);
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 2;
}

.polaroid-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 4px 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--polaroid-cap-fs);
  color: var(--ink);
  line-height: 1.2;
}
.polaroid-cap-l { letter-spacing: 0.005em; }
.polaroid-cap-r {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--polaroid-cap-r-fs);
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}

.gallery-foot {
  position: relative;
  z-index: 2;
  margin-top: var(--gallery-foot-mt);
  padding: 14px 8px 0;
  border-top: 1px dashed var(--line-strong);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--gallery-foot-fs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.gallery-foot .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
  margin-right: 8px;
  vertical-align: middle;
}
.gallery-foot-r { color: var(--ink); }

@media (max-width: 760px) {
  .gallery-stage { padding: var(--gallery-stage-pad-sm); }
  .polaroid-grid { padding: var(--polaroid-grid-pad-sm); }
}

/* lightbox modal opened when a polaroid (with a real image) is clicked.
   The photo container hugs the image so any aspect ratio shows at its
   natural shape — portrait, square, landscape, ultrawide. */
.polaroid-modal {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: min(1100px, 96vw);
  max-height: 96vh;
  animation: polaroid-modal-in 360ms var(--ease-out);
}
@keyframes polaroid-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.polaroid-modal-photo {
  position: relative;
  display: inline-block;
  line-height: 0;             /* removes the inline whitespace under img */
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.polaroid-modal-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1000px, 92vw);
  max-height: 80vh;
  animation: carousel-fade 320ms var(--ease-out);
}
.polaroid-modal-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink);
}
.polaroid-modal-cap-r {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}
.polaroid-modal-desc {
  margin: 0 6px;
  padding-top: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 60ch;
}
.polaroid-modal .modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
}
/* the close button sits top-right, so the "x / y" counter moves to the
   opposite corner instead of hiding underneath it. */
.polaroid-modal .carousel-counter {
  top: 12px; left: 12px;
  right: auto;
}

/* =================== DRAWING LIGHTBOX =================== */
/* Opens when a drawing tile in the commissions panel is clicked. Two-column
   layout: artwork on the left at natural aspect, caption + "buy on redbubble"
   CTA on the right. Falls back to a stacked single-column layout on narrow
   screens. */
.draw-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px);
  gap: 24px;
  align-items: stretch;
  max-width: min(1100px, 96vw);
  max-height: 96vh;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: polaroid-modal-in 360ms var(--ease-out);
}
.theme-night .draw-modal { background: var(--surface-2); }
.draw-modal-photo {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 280px;
}
.draw-modal-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  animation: carousel-fade 320ms var(--ease-out);
}
.draw-modal-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 8px 6px;
}
.draw-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}
.draw-modal-client {
  margin: -4px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.draw-modal-client a {
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 200ms;
}
.draw-modal-client a:hover { color: var(--ink); }
.draw-modal .btn { align-self: flex-start; }
.draw-modal .modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
}
@media (max-width: 720px) {
  .draw-modal {
    grid-template-columns: 1fr;
    max-height: 94vh;
    overflow: auto;
  }
  .draw-modal-photo { min-height: 220px; }
  .draw-modal-img { max-height: 60vh; }
  .draw-modal-meta { padding-top: 0; }
}



/* ============================================================================
   MEDIA KIT / BRAND PARTNERSHIPS
   Sponsor-facing section. Mirrors the services look (surface cards, lilac
   accents) but tuned for reach numbers, audience, impact and collab formats.
   ============================================================================ */
.mediakit { overflow: hidden; }

.mk-block { margin-top: 40px; }
.mk-block-head {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* --- headline metric row -------------------------------------------------- */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 780px) { .mk-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .mk-stats { grid-template-columns: 1fr; } }

.mk-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--lilac) 22%, var(--surface)),
    color-mix(in oklab, var(--pink) 12%, var(--surface)));
  border: 1px solid var(--line-strong);
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.mk-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mk-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
}
.mk-stat-lbl {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* --- audience + why two-column ------------------------------------------- */
.mk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) { .mk-two-col { grid-template-columns: 1fr; } }

.mk-audience, .mk-why {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 24px;
}

.mk-loc-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-bottom: 2px;
}

/* content-pillar chips */
.mk-pillars { margin-top: 22px; }
/* pillars are the only thing left in the audience card, so they sit right
   under its heading rather than after a bar chart. */
.mk-audience .mk-block-head + .mk-pillars { margin-top: 0; }
.mk-pillar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mk-pillar {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.74rem;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--lilac) 16%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* why-collaborate checked list */
.mk-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mk-why-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
.mk-why-mark { color: var(--pink-hot); font-size: 0.9rem; line-height: 1.6; }

/* --- downloadable PDF media kit ------------------------------------------ */
/* lives at the bottom of the "who's watching" card, under a dashed rule: the
   icon + blurb sit on one row, the button spans the full width beneath. */
.mk-download {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-strong);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}
.mk-download-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm, 10px);
  background: color-mix(in oklab, var(--lilac) 18%, var(--surface-2));
  border: 1px solid var(--line);
  color: var(--accent-deep);
}
.mk-download-title {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  color: var(--ink);
  margin: 0 0 4px;
}
.mk-download-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.mk-download-meta {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--ink-mute);
}
.mk-download-btn {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 4px;
  padding: 12px 20px;
}

/* --- CTA row -------------------------------------------------------------- */
.mk-cta {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}