/* ══════════════════════════════════════════════════════════
   sydney's desktop — faithful Figma implementation
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Handwriting accent — used only on the "open to work" pill and the shared
     footer's closing line ("Let's get in touch!"). Keep it to those two grace
     notes; the rest of the site stays on --font-sans. */
  --font-hand: 'Mynerve', var(--font-sans);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans); }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; }
img { display: block; }

/* ── Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Iosevka Charon Mono';
  src: local('Iosevka Charon Mono'), local('IosevkaCharonMono-Medium');
}

/* ── Base ───────────────────────────────────────────────── */
/* Force hide system cursor on every element — custom cursor handles all states */
*, *::before, *::after { cursor: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f2f2f0;
  font-family: var(--font-sans);
}

/* ── Custom cursor — single glass circle ─────────────────── */
.cursor-dot {
  width: 9px;
  height: 9px;
  background: linear-gradient(-45deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%),
              rgba(18, 18, 18, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%,-50%);
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
  will-change: left, top;
}
/* Hover — subtle grow */
body.cursor-hover .cursor-dot {
  transform: translate(-50%,-50%) scale(1.35);
  box-shadow: 0 3px 12px rgba(0,0,0,0.14);
}
/* Click flash */
body.cursor-click .cursor-dot {
  transform: translate(-50%,-50%) scale(0.75);
  background: linear-gradient(-45deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 65%),
              rgba(0, 0, 0, 0.95);
}
/* Hide the ring — not used */
.cursor-ring { display: none; }

/* ── Page load fade-in ──────────────────────────────────── */
#desktop-canvas {
  animation: fadeInDesktop 0.7s ease-out both;
}
@keyframes fadeInDesktop {
  from { opacity: 0; transform: scale(0.995); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Desktop Canvas — fills viewport ────────────────────── */
#desktop-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   UNIFIED GLASS MATERIAL
   Matches Figma Glass: #FFFFFF 69%, refraction 80, frost 10,
   light -45° 80% — applied consistently to all UI surfaces
   ══════════════════════════════════════════════════════════ */
:root {
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-blur:   blur(18px) saturate(1.6);
  --glass-border: 1px solid rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  /* Light highlight from -45° at 80% — simulates Figma Glass light */
  --glass-light:  linear-gradient(-45deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 65%);
}

/* ── Three-column desktop layout ────────────────────────────
   Left: anchored to left edge   (fixed px from left)
   Middle: floats between them   (min-left so it never hides)
   Right: anchored to right edge (fixed px from right)
   Columns compress toward each other but never leave viewport.
   ─────────────────────────────────────────────────────────── */
#desktop-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Each column contains absolutely-positioned items */
/* top: 58px pushes content below the menubar */
.dc-left, .dc-middle, .dc-right {
  position: absolute;
  top: 58px;
  bottom: 0;
  overflow: visible;
  pointer-events: none;
}
.dc-left *, .dc-middle *, .dc-right * {
  pointer-events: all;
}

/* LEFT — compact sidebar, 320px wide */
.dc-left  { left: 0;   width: 320px; }

/* MIDDLE — floats at ~27% of viewport; never closer than 550px from left */
.dc-middle { left: max(550px, 27.1vw); width: 550px; }

/* RIGHT — always flush to right edge, 825px wide */
.dc-right  { right: 0; width: 825px; }

/* ── Background — fills 100% of viewport ────────────────── */
.desktop-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f0;
  z-index: 0;
}

/* ── Menu Bar — stretches full browser width, never scales ── */
.menubar {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 58px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-light), var(--glass-bg);
  border-bottom: var(--glass-border);
  display: flex;
  align-items: center;
  padding: 0 17px;
  z-index: 100;
}

/* pf-links inside the menubar */
.menubar-pf-link {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #1a1a1a !important;
  gap: 5px !important;
}
.menubar-pf-link:hover {
  background: rgba(255,255,255,0.85) !important;
  transform: translateY(-1px);
}

.menubar-apple {
  width: 32px;
  height: 33px;
  object-fit: contain;
  flex-shrink: 0;
}

.menubar-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 20px;
  color: #1a1a1a;
  margin-left: 22px;
  white-space: nowrap;
}

.menubar-sub {
  position: absolute;
  left: 253px;
  top: 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  color: #696967;
  white-space: nowrap;
  z-index: 101;
}

/* 200px breathing zone below the menu bar */
.menubar::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom,
    rgba(247,247,245,0.55) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.menubar-right {
  position: absolute;
  right: 28px;  /* always flush to the right edge */
  top: 0;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menubar-icon {
  height: 15px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
.menubar-search { height: 17px; }
.menubar-toggle { height: 17px; }

/* ── Menubar Ticker — center looping activity text ──────── */
.menubar-ticker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  overflow: hidden;
  pointer-events: none;
}


.menubar-back {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  margin-right: 14px;
  transition: color 0.15s;
}
.menubar-back:hover { color: #1a1a1a; }

.menubar-clock {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  color: #1a1a1a;
  white-space: nowrap;
  margin-left: 4px;
  min-width: 157px;
  text-align: right;
}

/* ── Open to Work badge ──────────────────────────────────── */
.open-to-work-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  background: linear-gradient(to bottom, #f0f0ee, #e2e2e0);
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  white-space: nowrap;
}
.open-to-work-badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3dbf6e;
  box-shadow: 0 0 0 2px rgba(61,191,110,0.25), 0 0 6px rgba(61,191,110,0.5);
  flex-shrink: 0;
}
.otw-text {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(100deg, #d44f70, #8255cc, #2e96cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero Text — flows in left column ─────────────────────── */
.hero-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 6px;
}
.hero-h1 {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.25;
  color: #1a1a1a;
}

.hero-sub {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  line-height: 1.5;
  color: #777;
}

/* ── Calendar Widget ────────────────────────────────────── */
.calendar-widget {
  position: absolute;
  left: 325px;
  top: 234px;
  width: 235px;
  height: 222px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-light), var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
  padding: 16px 18px 12px;
  z-index: 2;
}

.cal-month {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  color: #1a1a1a;
  line-height: 93.15%;
  margin-bottom: 8px;
}

.cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 3px;
}

.cal-header {
  margin-bottom: 5px;
}

.cal-row span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1;
  text-align: center;
  padding: 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-dim { color: #888; }
.cal-bold { color: #1a1a1a; font-weight: 600 !important; }

/* Today's date — white circle highlight */
.cal-today {
  color: #19251c !important;
  font-weight: 600 !important;
  background: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 0 !important;
  align-self: center;
  justify-self: center;
  font-size: 12px;
}

/* ── Sticky Notes ───────────────────────────────────────── */
.sticky-note {
  display: none; /* removed for cleaner layout */
  position: absolute;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: #2a2a2a;
  z-index: 3;
  cursor: grab;
  overflow: hidden;
}
/* Thin pastel accent bar across the top */
.sticky-note::before {
  content: '';
  display: block;
  height: 4px;
  margin: -14px -16px 12px;
  border-radius: 18px 18px 0 0;
}
.sticky-sm::before  { background: linear-gradient(90deg, #f5afbc, #c3b1e1); }
.sticky-lg::before  { background: linear-gradient(90deg, #80d5cf, #b8f0b8); }

.sticky-sm {
  left: 240px;
  right: auto;
  top: 310px;   /* below both icon rows */
  width: 200px;
  height: auto;
  padding: 14px 16px 16px;
}

.sticky-lg {
  position: absolute;
  right: clamp(5px, 525px, calc(100vw - 350px));
  left: auto;
  top: 265px;
  width: 186px;   /* fits within left zone of sidebar */
  min-height: 120px;
  height: auto;
  padding: 18px 16px 20px;
}

/* ── Photos ─────────────────────────────────────────────── */
.photo-frosted {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.photo-frosted img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.photo-matcha {
  display: none; /* removed for cleaner layout */
  position: absolute;
  left: 325px;
  top: 478px;
  width: 182px;
  height: 148px;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}
.photo-matcha img { width: 100%; height: 100%; object-fit: cover; }

.photo-drinks {
  position: absolute;
  right: 5px;
  left: auto;
  top: 528px;
  width: 281px;
  height: 192px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}
.photo-drinks img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.photo-working {
  position: absolute;
  right: 5px;
  left: auto;
  top: 263px;
  width: 282px;
  height: 225px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}
.photo-working img { width: 100%; height: 100%; object-fit: cover; }

.photo-cat {
  position: absolute;
  left: auto;
  top: 260px;
  width: 140px;
  height: 195px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}
.photo-cat img {
  width: 135%;
  height: 124%;
  margin: -12% -17.34%;
  object-fit: cover;
}
.photo-caption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 28px;
  padding: 9px 20px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  color: #1a1a1a;
  text-align: center;
  max-width: 82%;
  width: max-content;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 2;
  pointer-events: none;
}

.photo-frosted:hover  .photo-caption,
.photo-matcha:hover   .photo-caption,
.photo-drinks:hover   .photo-caption,
.photo-working:hover  .photo-caption,
.photo-cat:hover      .photo-caption,
.photo-friend-half:hover .photo-caption,
.photo-friend-half.friend-half-left:hover .photo-caption,
.photo-friend-half.friend-half-right:hover .photo-caption {
  opacity: 1;
}

/* Two side-by-side friend photos */
.photo-friends-pair {
  position: absolute;
  right: 5px;
  left: auto;
  top: 42px;
  display: flex;
  gap: 10px;
  z-index: 1;
}

.photo-friend-half {
  width: 220px;
  height: 175px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: grab;
}

/* Use img element with object-fit to show each half */
.photo-friend-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.friend-half-left  img { object-position: left center; }
.friend-half-right img { object-position: right center; }
.friends-combined {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Desktop App Icons ───────────────────────────────────── */
.desktop-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 4;
}
.desktop-icon img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  border-radius: 12px;
  transition: transform 0.15s;
}
.desktop-icon:hover img { transform: scale(1.08); }
.desktop-icon span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 11px;
  color: #aaa;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
  letter-spacing: -0.1px;
}

/* ── Scattered Sticker Decorations ──────────────────────── */
.desktop-logo-btn {
  position: absolute;
  width: 62px;
  height: 52px;
  z-index: 4;
  cursor: default;
}
.desktop-logo-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── VINYL TURNTABLE PLAYER ──────────────────────────────── */
.cdplayer {
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* Top row: art + meta */
.cdp-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Album art square */
.cdp-art-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.cdp-art-wrap.spinning .cdp-art-inner {
  animation: cdpSpin 8s linear infinite;
}
@keyframes cdpSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cdp-art-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.cdp-art-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Waveform — overlaid bottom-left on art when playing */
.cdp-waveform {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.cdp-waveform.playing { opacity: 1; }
.cdp-waveform span {
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.9);
  height: 30%;
}
.cdp-waveform.playing span:nth-child(1) { animation: cdpWave 0.9s ease infinite 0.00s; }
.cdp-waveform.playing span:nth-child(2) { animation: cdpWave 0.9s ease infinite 0.18s; }
.cdp-waveform.playing span:nth-child(3) { animation: cdpWave 0.9s ease infinite 0.09s; }
.cdp-waveform.playing span:nth-child(4) { animation: cdpWave 0.9s ease infinite 0.27s; }
.cdp-waveform.playing span:nth-child(5) { animation: cdpWave 0.9s ease infinite 0.13s; }
@keyframes cdpWave {
  0%, 100% { height: 20%; }
  50%       { height: 100%; }
}

/* Meta: name + artist + dots */
.cdp-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cdp-track-name {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdp-track-artist {
  font-size: 11px;
  color: #aaa;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Track dots — small pill buttons with numbers */
.cdp-track-dots {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.cdp-td {
  width: 24px; height: 22px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #888;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.cdp-td:hover:not(.active) { background: rgba(0,0,0,0.1); color: #444; }
.cdp-td.active { background: #1a1a1a; color: #fff; border-color: transparent; }

/* Progress row */
.cdp-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#cdp-time-cur, #cdp-time-total {
  font-size: 10px;
  color: #ccc;
  font-weight: 400;
  flex-shrink: 0;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
}
#cdp-time-total { text-align: right; }
.cdp-progress-wrap {
  flex: 1;
  height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}
.cdp-progress-fill {
  height: 100%;
  width: 0%;
  background: #1a1a1a;
  border-radius: 2px;
  transition: width 0.5s linear;
}

/* Bottom section: controls centered, volume full-width below */
.cdp-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cdp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cdp-ctrl-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: #555;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.cdp-ctrl-btn:hover { background: rgba(0,0,0,0.06); color: #1a1a1a; }
.cdp-ctrl-btn:active { transform: scale(0.92); }
.cdp-play-btn {
  width: 34px; height: 34px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 50%;
}
.cdp-play-btn:hover { background: #333; color: #fff; }

/* Volume slider — slim, full width */
.cdp-vol-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  outline: none;
}
.cdp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #1a1a1a;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Dock ─────────────────────────────────────────────────── */
/* Dock pill — floats above bottom edge */
.dock-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  top: auto;
  transform: translateX(-50%);
  width: 573px;
  height: 47px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-light), var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 30px;
  z-index: 10;
}

/* Dock icons — fixed at bottom, label centred on pill */
.dock-icons {
  position: fixed;
  left: 50%;
  bottom: 36px;  /* maintains pill-centre relationship */
  top: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  z-index: 11;
}

.dock-icon {
  position: relative;
  width: 74px;
  height: 74px;
  cursor: pointer;
}
.dock-icon img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dock-icon:hover img {
  transform: translateY(-22px);
}

/* Dock label — absolutely pinned so its center = pill center (994.5px)
   dock-icons top (929) + label top (59) + half line-height (7) = 995px ≈ 994.5px */
.dock-label {
  position: absolute;
  top: 59px;
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  color: #1a1a1a;
  text-shadow: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}
.dock-icon:hover .dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Bounce animations ───────────────────────────────────── */
@keyframes dock-bounce {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-22px) scale(1.08); }
  40%  { transform: translateY(-8px)  scale(1.03); }
  60%  { transform: translateY(-16px) scale(1.06); }
  80%  { transform: translateY(-3px)  scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes sticker-bounce {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.18) translateY(-10px); }
  55%  { transform: scale(1.1)  translateY(-4px); }
  75%  { transform: scale(1.15) translateY(-8px); }
  100% { transform: scale(1.1)  translateY(-5px); }
}

.dock-icon.bounce-active {
  animation: dock-bounce 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.desktop-logo-btn.bounce-active img {
  animation: sticker-bounce 0.4s ease-out forwards;
}

/* ══════════════════════════════════════════════════════════
   OVERLAYS
   ══════════════════════════════════════════════════════════ */

.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.overlay-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.overlay-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 300;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.77);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: 0px 4px 60px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: min(1302px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.overlay-window.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Window chrome / title bar */
.window-chrome {
  position: relative;
  height: 40px;
  background: #e6e6e6;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 0 14px;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
}

.traffic-lights-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 2px 0;
}
.tl-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  border: 0.5px solid rgba(0,0,0,0.1);
}
.tl-red    { background: #ff5f57; }
.tl-yellow { background: #febc2e; }
.tl-green  { background: #28c840; }

.chrome-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  color: #000;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   ABOUT OVERLAY
   ══════════════════════════════════════════════════════════ */

#overlay-about {
  background: #f3f3f3;
}

.about-scroll {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Intro section */
.about-intro-section {
  display: flex;
  gap: 56px;
  padding: 28px 60px 20px;
  background: #f3f3f3;
  align-items: flex-start;
}

.about-photo-col {
  flex-shrink: 0;
  position: relative;
  width: 430px;
}

.about-portrait-wrap {
  position: relative;
  width: 430px;
  height: 440px;
}

.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 8px 14.8px 4px rgba(0,0,0,0.08);
}

.about-sticker {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}
.sticker-star  { width: 61px; top: 212px; left: 75px; transform: rotate(-5.81deg); }
.sticker-box   { width: 155px; bottom: -35px; right: -55px; transform: rotate(6.95deg); }
.sticker-star2 { width: 54px; top: 102px; right: -28px; transform: rotate(-5.81deg); }

/* Text column */
.about-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  min-width: 0;
}

.about-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 48px;
  color: black;
  letter-spacing: -0.96px;
  line-height: 1.2;
}

.about-bio {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 20px;
  color: black;
  letter-spacing: -0.1px;
  line-height: 1.45;
}

.about-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 30px;
  border-radius: 30px;
  border: 1px solid rgba(193,193,193,0.42);
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  white-space: nowrap;
  position: relative;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.23);
  overflow: hidden;
  align-self: flex-start;
}
.about-tag-pink { background: rgba(244,193,193,0.95); color: #511818; }
.about-tag-blue { background: rgba(193,214,244,0.95); color: #1c2e51; padding: 0 29px; }

/* Stat cards */
.about-stats-row {
  background: #f3f3f3;
  padding: 16px 60px 28px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.about-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 16px;
  padding: 15px;
  height: 84px;
  flex: 1;
  min-width: 0;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.02), 0px 12px 32px rgba(0,0,0,0.04);
  overflow: hidden;
}

.stat-emoji {
  font-size: 28px;
  flex-shrink: 0;
  width: 42px;
  text-align: center;
}

.stat-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  color: black;
  line-height: 1.5;
}

.stat-value {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  color: rgba(0,0,0,0.69);
  line-height: 1.4;
}

/* ── Compact About Card overlay ──────────────────────────── */
.overlay-about-card {
  width: min(420px, 92vw) !important;
  max-height: none !important;
  background: #ffffff;
}

.about-card-body {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
}

.about-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.about-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8e8e8;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.about-card-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
}

.about-card-location {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

.about-card-headline {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin: 0 0 16px;
  text-wrap: balance;
}

.about-card-text {
  font-size: 13px;
  font-weight: 300;
  color: #4a4a4a;
  line-height: 1.65;
  margin: 0 0 12px;
}
.about-card-text:last-of-type {
  margin-bottom: 0;
}
.about-card-text strong {
  color: #1a1a1a;
  font-weight: 500;
}

.about-chunk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.about-chunk-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
}
.about-chunk-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-chunk-text {
  font-size: 13px;
  font-weight: 300;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0;
}
.about-chunk-text strong {
  color: #1a1a1a;
  font-weight: 500;
}

.about-card-closing {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.about-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.about-fact {
  position: relative;
  cursor: default;
}
.about-fact-img {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f2;
}
.about-fact-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.about-fact:hover .about-fact-img img {
  transform: scale(1.06);
  filter: brightness(0.82);
}

/* Floating tooltip card — matches .ring-tooltip-global styling */
.about-fact-caption {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 150px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}
.about-fact:hover .about-fact-caption {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Keep edge widgets' tooltips from spilling past the panel — anchor to the
   inner edge instead of centering over the image. */
.about-fact:first-child .about-fact-caption {
  left: 0;
  transform: translateY(6px) scale(0.96);
}
.about-fact:first-child:hover .about-fact-caption {
  transform: translateY(0) scale(1);
}
.about-fact:last-child .about-fact-caption {
  left: auto;
  right: 0;
  transform: translateY(6px) scale(0.96);
}
.about-fact:last-child:hover .about-fact-caption {
  transform: translateY(0) scale(1);
}
.about-fact-title {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 3px;
}
.about-fact-sub {
  font-size: 11px;
  color: #888;
  line-height: 1.35;
}

.about-card-footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #f0f0f0;
}

.about-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.about-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Contact callout */
.about-contact {
  background: #f3f3f3;
  padding: 0 60px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.about-contact-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

.about-contact-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.about-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 30px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.about-contact-item:hover {
  transform: translateY(-1px);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
.contact-icon {
  font-size: 14px;
  opacity: 0.5;
}

/* Timeline section — hidden for flat layout */
.about-timeline {
  display: none;
}

.timeline-header {
  text-align: center;
  padding: 0 120px 40px;
}
.timeline-header h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 36px;
  color: white;
  letter-spacing: -0.72px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.timeline-header p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 24px;
  color: rgba(255,255,255,0.72);
  letter-spacing: -0.48px;
  line-height: 1.2;
}

.timeline-gallery-1 {
  display: flex;
  gap: 32px;
  padding: 0 120px 40px;
  align-items: flex-start;
}

.timeline-col-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 236px;
  flex-shrink: 0;
}
.timeline-col-text p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 18px;
  color: white;
  letter-spacing: -0.09px;
  line-height: 1.45;
}

.timeline-img-sm {
  width: 236px;
  height: 221px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 1px 5.4px rgba(0,0,0,0.3);
}
.timeline-img-lg {
  flex: 1;
  height: 375px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 1px 5.4px rgba(0,0,0,0.3);
  min-width: 0;
}

.timeline-gallery-2 {
  display: flex;
  gap: 32px;
  padding: 0 120px 40px;
  align-items: center;
}
.timeline-img-port {
  flex: 1;
  height: 375px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 1px 5.4px rgba(0,0,0,0.3);
  min-width: 0;
}
.timeline-img-mid {
  width: 100%;
  height: 258px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 1px 5.4px rgba(0,0,0,0.3);
  margin-bottom: 20px;
}

.timeline-gallery-3 {
  padding: 0 120px 0;
}
.timeline-row-3 {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}
.timeline-row-3 img {
  flex: 1;
  height: 255px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 1px 5.4px rgba(0,0,0,0.3);
  min-width: 0;
}
.timeline-final-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 18px;
  color: white;
  letter-spacing: -0.09px;
  line-height: 1.45;
}
.timeline-final-text strong { font-weight: 500; }

/* ══════════════════════════════════════════════════════════
   FINDER OVERLAYS (CASE STUDIES + CREATIVE)
   ══════════════════════════════════════════════════════════ */

.overlay-finder {
  background: white;
}

.finder-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;   /* allow flex child to shrink below content size */
}

.finder-sidebar {
  width: 229px;
  flex-shrink: 0;
  background: #e4e4e4;
  border-right: 1px solid #e2e3e1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.sidebar-section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  color: #a2a3a1;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  margin-bottom: 4px;
}

/* Case Studies file items */
.cs-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.cs-file:hover { background: rgba(0,0,0,0.06); }
.cs-file.active-file { background: #0065e1; }
.cs-file.active-file span { color: white; }

.cs-file-thumb {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 1px 1px 1.3px rgba(0,0,0,0.1);
  flex-shrink: 0;
  background: #d9d9d9;
}

.cs-file span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Creative sidebar tabs */
.sidebar-tab {
  padding: 6px 15px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 18px;
  color: black;
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-tab:hover { background: rgba(0,0,0,0.06); }
.sidebar-tab.active { background: #c4c4c4; }

/* Finder content — column flex so cs-preview-pane can scroll inside */
.finder-content {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── CS Preview Pane ─────────────────────────────────────── */
/* Case studies overlay — matches Figma: 1616×1010px */
#overlay-casestudies {
  width: min(1616px, 98vw);
  height: min(1010px, 96vh);
}

.cs-preview-pane {
  flex: 1;          /* grow to fill finder-content */
  min-height: 0;    /* critical: allows overflow-y to activate */
  overflow-y: auto;
  background: white;
}

/* ── CS View — new Figma-matched layout ─────────────────── */
.cs-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.cs-view-hero {
  width: 100%;
  height: 280px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e8e8;
}
.cs-view-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cs-view-body {
  padding: 32px 48px 52px;
}

.cs-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid #ebebeb;
}

.cs-view-header-left { flex: 1; min-width: 0; }

.cs-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa;
}
.cs-label.green { color: #3a9a55; }

.cs-view-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 56px;
  color: black;
  letter-spacing: -1.5px;
  line-height: 1.0;
  margin: 8px 0 10px;
}

.cs-file-info {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #bbb;
}

.cs-link-btn {
  display: inline-block;
  padding: 11px 26px;
  background: black;
  color: white !important;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cs-link-btn:hover { background: #333; }

.cs-view-cols {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

.cs-view-meta-col {
  display: flex;
  flex-direction: column;
}

.cs-meta-block { margin-bottom: 22px; }

.cs-meta-key {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #bbb;
  margin-bottom: 4px;
}

.cs-meta-val {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #222;
  line-height: 1.55;
}

.cs-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cs-tag {
  background: rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 5px 13px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #444;
}

.cs-view-desc-col { padding-top: 2px; }

.cs-desc-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: #444;
  line-height: 1.75;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   room2talk — 1:1 Figma case study (real text)
   Colors exactly from Figma: #c37180 labels, #1a1a1a title,
   #393939 body, #696967 meta keys, #5e4242 stats
   ══════════════════════════════════════════════════════════ */
.r2t { background: #fff; display: flex; flex-direction: column; }

/* Hero */
.r2t-hero { width: 100%; display: block; height: 320px; object-fit: cover; }

/* Title block */
.r2t-title-block { padding: 32px 48px 28px; border-bottom: 1px solid #ebebeb; }

.r2t-label {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  color: #c37180; letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.r2t-title {
  font-family: var(--font-sans);
  font-size: 48px; font-weight: 600;
  color: #1a1a1a; letter-spacing: -1px; line-height: 1.05;
  margin-bottom: 8px;
}
.r2t-fileinfo {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 400; color: #696967;
  margin-bottom: 20px;
}
.r2t-meta-table { margin-bottom: 20px; }
.r2t-meta-row {
  display: flex; gap: 24px; padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 400;
}
.r2t-meta-key { color: #696967; min-width: 100px; flex-shrink: 0; }
.r2t-meta-val { color: #000; }
.r2t-meta-divider { height: 1px; background: #e8e8e8; }

.r2t-tools-row { display: flex; align-items: center; gap: 12px; }
.r2t-tools-heading {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; color: #000;
}
.r2t-tool-tags { display: flex; gap: 6px; }
.r2t-tool-tag {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 400; color: #333;
  background: #d9d9d9; border-radius: 4px;
  padding: 2px 10px;
}

/* Section base */
.r2t-section { padding: 48px 48px 40px; border-bottom: 1px solid #f0f0f0; }
.r2t-section-header { margin-bottom: 24px; }
.r2t-section:last-of-type { border-bottom: none; }

.r2t-h2 {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 500;
  color: #000; letter-spacing: -0.3px; line-height: 1.15;
  margin: 4px 0 0;
}
.r2t-body {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 300;
  color: #393939; line-height: 1.7;
  margin: 0 0 16px;
}

/* Full-width images */
.r2t-full-img { width: 100%; display: block; }
.r2t-research-photo { margin: 24px 0; }

/* Design section */
.r2t-section-design { background: #fff; }
.r2t-screen-block { padding: 32px 0 0; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.r2t-screen-block:first-of-type { border-top: none; margin-top: 0; }
.r2t-counter {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500; color: #c37180;
  margin-bottom: 8px; letter-spacing: 0.5px;
}
.r2t-screen-title {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 400; color: #191919;
  margin-bottom: 12px; line-height: 1.3;
}
.r2t-screen-body {
  font-family: var(--font-sans);
  font-size: 15px; color: #393939;
  line-height: 1.7; margin-bottom: 24px;
}
.r2t-screen-img { width: 100%; display: block; }

/* Research quotes */
.r2t-quotes {
  display: flex; gap: 0;
  margin: 24px 0 28px;
}
.r2t-quote-bar {
  width: 2px; background: #d3aab1;
  flex-shrink: 0; margin-right: 24px;
  border-radius: 2px;
}
.r2t-quotes-list { display: flex; flex-direction: column; gap: 28px; }
.r2t-quote-label {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; color: #c37180;
  margin-bottom: 5px; letter-spacing: 0.3px;
}
.r2t-quote-text {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 400; color: #191919;
  line-height: 1.5; margin-bottom: 4px;
}
.r2t-quote-attr {
  font-family: var(--font-sans);
  font-size: 13px; color: #8f8f8f;
}

/* Stats */
.r2t-stats-intro {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; color: #393939;
  margin-bottom: 16px;
}
.r2t-stats-row {
  display: flex; gap: 20px;
  flex-wrap: wrap;
}
.r2t-stat {
  background: #ecc3c3; border-radius: 8px;
  padding: 16px 20px 14px; flex: 1; min-width: 140px;
}
.r2t-stat-pct {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 600; color: #5e4242;
  line-height: 1; margin-bottom: 8px;
}
.r2t-stat-label {
  font-family: var(--font-sans);
  font-size: 12px; color: #000; line-height: 1.4;
}

/* Process */
.r2t-process-block { margin-bottom: 36px; }
.r2t-process-title {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 500; color: #000;
  margin-bottom: 12px;
}

/* Footer */
.r2t-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 36px 48px 48px;
  border-top: 1px solid #ebebeb;
}
.r2t-footer-text {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 500; color: #333;
}

/* ── Coming soon ────────────────────────────────────────── */
.cs-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: #999;
  font-family: var(--font-sans);
  font-size: 16px;
  text-align: center;
  gap: 8px;
  padding: 40px;
}
.cs-coming-soon strong {
  font-size: 28px;
  color: #666;
  display: block;
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════
   CREATIVE OVERLAY — matches Figma Art Overlay design
   ══════════════════════════════════════════════════════════ */
.cr-overlay {
  width: min(1302px, 96vw);
  height: min(965px, 95vh);
  display: flex;
  flex-direction: row;
  padding: 0;
  background: white;
  overflow: hidden;
  border-radius: 10px;
}

/* ── Left panel (230px, #e4e4e4) ── */
.cr-left {
  width: 230px;
  flex-shrink: 0;
  background: #e4e4e4;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cr-tl-row {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.cr-fav-label {
  font-size: 16px;
  font-weight: 500;
  color: #a2a3a1;
  padding: 16px 20px 10px;
}
.cr-tabs {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  gap: 2px;
}
.cr-tab {
  font-size: 20px;
  font-weight: 400;
  color: black;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.cr-tab:hover { background: rgba(0,0,0,0.07); }
.cr-tab-active {
  background: #c4c4c4;
  font-weight: 500;
}

/* ── Right area ── */
.cr-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* Chrome bar */
.cr-chrome {
  height: 79px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
}
.cr-nav { display: flex; gap: 4px; }
.cr-arrow {
  font-size: 22px;
  font-weight: 300;
  color: #696967;
  line-height: 1;
  cursor: default;
  user-select: none;
  padding: 0 2px;
}
.cr-arrow-inactive { color: #b5b6b4; }
.cr-chrome-title {
  font-size: 20px;
  font-weight: 500;
  color: black;
}

/* Body: file list + preview */
.cr-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* File list column */
.cr-file-list {
  width: 238px;
  flex-shrink: 0;
  border-right: 1px solid #ddd;
  background: #f0f0f0;
  overflow-y: auto;
  padding: 4px 0;
}
.cr-section-label {
  font-size: 13px;
  font-weight: 500;
  color: #696967;
  padding: 8px 14px 4px;
  text-transform: none;
  letter-spacing: 0;
}
.cr-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 6px;
  transition: background 0.1s;
}
.cr-file-item:hover { background: rgba(0,0,0,0.06); }
.cr-file-item.cr-active { background: #0065e1; }
.cr-file-item.cr-active .cr-file-name { color: white; }
.cr-thumb {
  width: 23px;
  height: 22px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: #ccc;
}
.cr-file-name {
  font-size: 16px;
  font-weight: 400;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview pane */
.cr-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
}
/* Empty state */
.cr-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #bbb;
  font-size: 16px;
}
/* Selected state */
.cr-preview-content {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.cr-img-area {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 24px;
  overflow: hidden;
}
.cr-img-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.cr-info-panel {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid #e0e0e0;
  padding: 20px 16px;
  overflow-y: auto;
  background: white;
}
.cr-info-filename {
  font-size: 20px;
  font-weight: 400;
  color: black;
  line-height: 1.3;
  margin-bottom: 4px;
  word-break: break-word;
}
.cr-info-filesize {
  font-size: 16px;
  font-weight: 400;
  color: #696967;
  margin-bottom: 16px;
}
.cr-info-header {
  font-size: 16px;
  font-weight: 500;
  color: black;
  margin-bottom: 8px;
}
.cr-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 400;
  color: #555;
  padding: 3px 0;
}
.cr-info-row span:first-child { color: black; }

/* ── room2talk screen frames ─────────────────────────────── */
.r2t-dual-frame {
  border-radius: 16px;
  padding: 32px 24px 20px;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 0;
}
.r2t-dual-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 340px;
}
/* Wrapper crops any GIF to consistent portrait ratio (matching 498:780) */
.r2t-gif-wrap {
  width: 100%;
  aspect-ratio: 498 / 780;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.r2t-dual-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.r2t-dual-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  letter-spacing: 0.3px;
}
.r2t-single-frame {
  border-radius: 16px;
  padding: 32px 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}
.r2t-single-gif {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.r2t-frame-caption {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.5);
  text-align: center;
}

.cr-youtube {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: block;
  border: none;
}
.cr-thumb-video {
  background: #555;
  border-radius: 3px;
  position: relative;
}
.cr-thumb-video::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: white;
}

.cr-tag {
  display: inline-block;
  background: rgba(0,0,0,0.07);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  color: #333;
  margin: 3px 4px 0 0;
}

/* ══════════════════════════════════════════════════════════
   MINECRAFT SCREENSHOTS OVERLAY
   ══════════════════════════════════════════════════════════ */
#overlay-minecraft {
  width: min(860px, 92vw);
  background: #f5f5f5;
}

.mc-body {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.mc-header img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

.mc-header-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}

.mc-header-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #999;
  margin-left: auto;
}

.mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mc-shot {
  border-radius: 10px;
  overflow: hidden;
  background: #e8e8e8;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.mc-shot:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

.mc-shot img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.mc-shot-label {
  padding: 8px 12px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

/* Lightbox for full-screen screenshot */
.mc-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mc-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.mc-lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
  display: block;
}

/* ══════════════════════════════════════════════════════════
   PHOTO FOLDER OVERLAYS (school + cat)
   ══════════════════════════════════════════════════════════ */
#overlay-school {
  width: min(960px, 94vw);
  background: #f5f5f5;
}

#overlay-cat {
  width: min(720px, 92vw);
  background: #fff8f9;
}

/* School — 3-col grid */
.mc-grid-school {
  grid-template-columns: repeat(3, 1fr);
}

/* Cat — 2-col grid */
.mc-grid-cat {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Legacy creative gallery (keep for ref) ──────────────── */
/* ── Creative Finder Content ─────────────────────────────── */
.creative-finder-content {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.creative-file-col {
  width: 238px;
  flex-shrink: 0;
  border-right: 1px solid #e4e4e4;
  background: #f0f0f0;
  padding: 12px 8px;
  overflow-y: auto;
}

.creative-section-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  color: #696967;
  padding: 6px 8px;
  margin-bottom: 4px;
}

.creative-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.creative-file:hover { background: rgba(0,0,0,0.05); }
.creative-file.active-file { background: #0065e1; }
.creative-file.active-file span { color: white; }

.creative-file-thumb {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 1px 1px 1.3px rgba(0,0,0,0.1);
  flex-shrink: 0;
  background: #d9d9d9;
}
.creative-file span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gallery view */
.creative-gallery {
  flex: 1;
  overflow-y: auto;
  background: #18232e;
  padding: 48px 60px;
  min-width: 0;
}

.creative-gallery-header {
  margin-bottom: 40px;
}
.creative-gallery-header h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: 48px;
  color: white;
  letter-spacing: -1.2px;
  line-height: 1.1;
  margin-bottom: 8px;
}
.creative-gallery-header p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 20px;
  color: rgba(255,255,255,0.75);
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.gallery-row {
  display: flex;
  gap: 29px;
  margin-bottom: 36px;
  align-items: flex-end;
}

.gallery-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gallery-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 4px 40px rgba(0,0,0,0.1);
  display: block;
}
.gallery-card-img-tall {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 4px 40px rgba(0,0,0,0.1);
  display: block;
}
.gallery-card-img-empty {
  width: 100%;
  aspect-ratio: 1/1;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-sans);
  font-size: 14px;
}

.gallery-card-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.gallery-card-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  font-size: 20px;
  color: white;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.gallery-card-year {
  font-family: var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Photo scroll row */
.photo-scroll-container {
  overflow-x: auto;
  margin-bottom: 36px;
  padding-bottom: 8px;
}
.photo-scroll-container::-webkit-scrollbar { height: 4px; }
.photo-scroll-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.photo-scroll-row {
  display: flex;
  gap: 20px;
  width: max-content;
}

.photo-scroll-item {
  width: 220px;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   STICKER SHEET — peeker + window + desktop stickers
   ══════════════════════════════════════════════════════════ */

/* Sticker + music buttons — matching pair in the corner cluster.
   No circle/fill/border: the icons sit directly on the page. The 40px
   box is an invisible hit target so they stay easy to click even though
   the visible strokes are thin. */
#sticker-peeker, #music-peeker {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#sticker-peeker:hover, #music-peeker:hover { transform: scale(1.12); }
#sticker-peeker img, #music-peeker img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
/* Hand-drawn note icon — inherits the doodle ink colour. */
#music-peeker .fab-doodle {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--ink, #1a1a1a);
}

/* Sticker overlay window */
.sticker-overlay {
  width: min(420px, 90vw);
  background: #fafafa;
}
.sticker-sheet-body {
  padding: 10px 14px 16px;
  overflow-y: auto;
  max-height: 70vh;
}
.sticker-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #aaa;
  margin-bottom: 10px;
  text-align: center;
}
/* Individual sticker grid in window */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 2px;
}
.sticker-thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  background: rgba(0,0,0,0.03);
}
.sticker-thumb:hover {
  background: rgba(0,0,0,0.07);
  transform: scale(1.1);
}
.sticker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Individual stickers spawned on desktop — below overlays (z:300) and backdrop (z:200) */
.desktop-sticker-placed {
  position: fixed;
  z-index: 150;
  cursor: grab;
  user-select: none;
  pointer-events: all;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2));
}
.desktop-sticker-placed img {
  width: 72px;
  height: auto;
  display: block;
  pointer-events: none;
}
.desktop-sticker-placed:hover { transform: scale(1.12) rotate(-3deg); }
.desktop-sticker-placed.dragging { cursor: grabbing; transform: scale(1.18) rotate(4deg); z-index: 9990; transition: none; }

/* ── Cursor Sparkle ─────────────────────────────────────── */
.cursor-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  user-select: none;
  line-height: 1;
  animation: sparkle-pop 600ms ease-out forwards;
  transform-origin: center;
  filter: url(#sparkle-wobble);   /* subtle hand-drawn wobble on the glyph edge */
}
@keyframes sparkle-pop {
  0%   { opacity: 1; transform: scale(0.4) translate(0, 0) rotate(0deg); }
  50%  { opacity: 0.9; transform: scale(1.2) translate(calc(var(--tx)*0.6), calc(var(--ty)*0.6)) rotate(120deg); }
  100% { opacity: 0; transform: scale(0.1) translate(var(--tx), var(--ty)) rotate(360deg); }
}

/* ── Draggable — universal shadow on all desktop items ───── */
.draggable {
  cursor: grab;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.draggable.dragging { cursor: grabbing; z-index: 50 !important; user-select: none; }

/* Calendar shadow */
.calendar-widget {
  box-shadow: 0 0 10px rgba(0,0,0,0.15) !important;
}
/* Icons: shadow on the image only, not the whole container */
.desktop-icon {
  box-shadow: none !important;
}
.desktop-icon img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  border-radius: 14px;
}
/* Folder icons — SVG has its own shape, no extra border-radius */
.desktop-icon[data-layout-id^="folder_"] img {
  border-radius: 0;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
   EXPERIENCE PANEL — fixed button + upward-expanding panel
   ══════════════════════════════════════════════════════════ */

/* Icon-only social buttons in bottom row */
.bottom-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-radius: 50%;
  color: #444;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.bottom-icon-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  color: #111;
}

/* About Me pill button */
#about-peeker {
  width: auto;
  padding: 11px 20px;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 30px;
  cursor: pointer;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
  user-select: none;
  text-decoration: none;
}
#about-peeker:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
#about-peeker.panel-open .resume-peeker-arrow {
  transform: rotate(180deg);
}

/* About panel — flat white panel rising above the buttons */
.about-panel {
  position: fixed;
  left: 20px;
  bottom: 100px;
  width: 400px;
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  border-radius: 16px;
  z-index: 299;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  opacity: 0;
}
.about-panel.open {
  max-height: var(--panel-max-h, 72vh);
  overflow-y: auto;
  opacity: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

/* Org logos */
.org-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

#resume-peeker {
  width: auto;
  padding: 11px 20px;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 30px;
  cursor: pointer;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
  user-select: none;
  text-decoration: none;
}
#resume-peeker:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
/* Pulsing dot on panel buttons */
.peeker-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a0c878;
  margin-right: 7px;
  flex-shrink: 0;
  animation: peeker-ping 2.2s ease-in-out infinite;
}
@keyframes peeker-ping {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.5); }
}
#about-peeker.panel-open .peeker-pulse,
#resume-peeker.panel-open .peeker-pulse { animation: none; opacity: 0.3; }

.resume-peeker-label {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}
.resume-peeker-arrow {
  font-size: 14px;
  color: #aaa;
  transition: transform 0.3s ease;
  margin-left: 10px;
}
#resume-peeker.panel-open .resume-peeker-arrow {
  transform: rotate(180deg);
}

/* Panel — expands upward above the buttons */
.resume-panel {
  position: fixed;
  left: 20px;
  bottom: 100px;
  width: 440px;
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  border-radius: 16px;
  z-index: 299;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
  opacity: 0;
}
.resume-panel.open {
  max-height: var(--panel-max-h, 72vh);
  overflow-y: auto;
  opacity: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.resume-panel-inner {
  padding: 22px 22px 20px;
}

/* ══════════════════════════════════════════════════════════
   PORTFOLIO CONTENT — scrollable right column
   ══════════════════════════════════════════════════════════ */

/* MIDDLE COLUMN — case studies + footer */
.dc-middle {
  left: 320px !important;
  right: 310px !important;
  width: auto !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  scrollbar-width: none;
}
.dc-middle::-webkit-scrollbar { display: none; }

/* RIGHT COLUMN — other projects + gallery */
.dc-right {
  left: auto !important;
  right: 0 !important;
  width: 310px !important;
  overflow: hidden !important;
}

/* dc-left: flex column layout, scrollable */
.dc-left {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
}
.dc-left::-webkit-scrollbar { display: none; }

/* Thin vertical dividers */
.dc-middle::before, .dc-right::before {
  content: '';
  position: fixed;
  top: 58px;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,0.07);
  pointer-events: none;
  z-index: 10;
}
.dc-middle::before { left: 319px; }
.dc-right::before  { right: 309px; }

/* Portfolio wrapper */
.portfolio-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px 0 20px;
  pointer-events: all;
}

/* Middle column: generous side padding + footer pinned to bottom */
.dc-middle .portfolio-content {
  padding-left: 56px;
  padding-right: 56px;
  min-height: 100%;
}

/* Right column: projects get 58%, gallery gets 42% */
.dc-right .portfolio-content {
  position: absolute;
  inset: 0;
  padding: 24px 16px 0 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dc-right .port-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.dc-right .port-section::-webkit-scrollbar { display: none; }
.dc-right .port-section-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: visible;
}
.dc-right .port-section-gallery > .port-section-label { flex-shrink: 0; }
.dc-right .port-section-gallery > #art-gallery-track {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dc-right .port-section-gallery > .art-static-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-bottom: 24px;
  columns: 2;
  column-gap: 8px;
}

/* ── Split row: Other Projects + Gallery side by side ─── */
.port-split-row {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.port-split-left {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.port-split-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.port-split-right > .port-section-label {
  flex-shrink: 0;
  margin-bottom: 10px;
}
.port-split-right > .art-static-grid {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 24px;
}

/* ── Portfolio Footer with grass scene ───────────────────── */
.portfolio-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pf-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 24px;
  flex-wrap: wrap;
}
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.09);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pf-link:hover { background: rgba(255,255,255,0.9); color: #222; }
.pf-link-resume {
  background: rgba(255,255,255,0.85) !important;
  color: #444 !important;
  border-color: rgba(0,0,0,0.09) !important;
  font-weight: 500 !important;
}
.pf-link-resume:hover { background: rgba(255,255,255,0.9) !important; color: #111 !important; }

/* Grass scene */
.pf-scene {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.pf-scene-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.pf-scene-sticker {
  position: absolute;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
  animation: sticker-bob 3s ease-in-out infinite;
}
.pf-scene-sticker:nth-child(2) { animation-delay: 0.4s; }
.pf-scene-sticker:nth-child(3) { animation-delay: 0.8s; }
.pf-scene-sticker:nth-child(4) { animation-delay: 1.2s; }
.pf-scene-sticker:nth-child(5) { animation-delay: 1.6s; }
@keyframes sticker-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pf-grass-hill {
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 52px;
  background: linear-gradient(to bottom, #88c98a 0%, #6ab86d 60%, #5aaa5d 100%);
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}
.pf-grass-hill::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -3%;
  right: -3%;
  height: 10px;
  background: #a8d9aa;
  border-radius: 50%;
  filter: blur(3px);
  opacity: 0.7;
}
.port-split-right .art-static-grid {
  columns: 4;
  column-gap: 8px;
}

/* ── Site-wide text hierarchy ────────────────────────────
   Label      11px / 700 / uppercase / tracked / #aaa
   Heading    15px / 700 / #1a1a1a   (box titles like "Exp & Edu")
   Subheading 12px / 700 / #555      (section titles inside boxes)
   Body       13px / 400 / #555      (bullets, descriptions)
   Meta       12px / 500 / #999      (dates, roles, sub-info)
   Detail     11px / 400 / #bbb      (secondary meta)
   ─────────────────────────────────────────────────────── */

/* Section container — fills full width, no scroll */
.port-section {
  margin-bottom: 0;
  max-width: none;
  margin-left: 0;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.port-section-fill {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Art Preview Grid ────────────────────────────────── */
.art-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.art-preview-cell {
  overflow: hidden;
  background: #e0dcd6;
  min-height: 0;
}
.art-preview-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.art-preview-grid:hover .art-preview-cell img { transform: scale(1.06); }
.art-preview-more {
  position: absolute;
  bottom: 9px; right: 16px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  pointer-events: none;
  transition: background 0.2s;
}
.art-preview-grid:hover .art-preview-more { background: rgba(0,0,0,0.58); }

/* ── Art Arc Carousel ────────────────────────────────── */
.port-section-arc {
  margin-left: -56px;
  margin-right: -56px;
  padding: 32px 0 48px;
  overflow: visible;
}
.port-section-arc > .port-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 24px;
  padding-left: 56px;
}
.art-arc-link {
  display: block;
  width: 100%;
  text-decoration: none;
  overflow: visible;
}
.art-arc-wrap {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: visible;
}
.art-arc-card {
  position: absolute;
  width: 76px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: #e0dcd6;
  box-shadow: 0 6px 22px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.10);
  transform-origin: center bottom;
  transition: box-shadow 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
}
.art-arc-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.art-arc-link:hover .art-arc-card {
  box-shadow: 0 10px 32px rgba(0,0,0,0.22), 0 3px 8px rgba(0,0,0,0.12);
}
/* on hover, lift all cards up slightly along their arc direction */
.art-arc-link:hover .art-arc-card:nth-child(1)  { translate: 0 -6px; }
.art-arc-link:hover .art-arc-card:nth-child(2)  { translate: 0 -8px; }
.art-arc-link:hover .art-arc-card:nth-child(3)  { translate: 0 -9px; }
.art-arc-link:hover .art-arc-card:nth-child(4)  { translate: 0 -10px; }
.art-arc-link:hover .art-arc-card:nth-child(5)  { translate: 0 -10px; }
.art-arc-link:hover .art-arc-card:nth-child(6)  { translate: 0 -9px; }
.art-arc-link:hover .art-arc-card:nth-child(7)  { translate: 0 -8px; }
.art-arc-link:hover .art-arc-card:nth-child(8)  { translate: 0 -6px; }

/* ── Static Art Grid ─────────────────────────────────── */
.art-static-grid {
  columns: 2;
  column-gap: 10px;
  padding-bottom: 12px;
}
.art-grid-item {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 0 0 1.5px rgba(255,255,255,0.85);
  break-inside: avoid;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.art-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.13), 0 0 0 1.5px white;
}
.art-grid-img {
  width: 100%;
  overflow: hidden;
}
.art-grid-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.art-grid-item:hover .art-grid-img img {
  transform: scale(1.03);
}
.art-grid-info {
  padding: 10px 12px 12px;
  background: white;
}
.art-grid-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 3px;
}
.art-grid-meta {
  font-size: 10px;
  color: #999;
  font-weight: 400;
}
.port-section-wide { max-width: none; }
.port-section-700  { max-width: none; }

/* ── Hero Intro Card ─────────────────────────────────── */
.hero-intro-card {
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 32px 36px;
  width: 100%;
}
.hero-intro-eyebrow {
  font-size: 13px;
  color: #aaa;
  font-weight: 400;
  margin-bottom: 10px;
}
.hero-intro-heading {
  font-size: 26px;
  font-weight: 600;
  font-style: italic;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 14px;
}
.hero-intro-body {
  font-size: 14px;
  color: #666;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 20px;
}
.hero-intro-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-pill {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  background: rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 5px 14px;
}

/* ── Currently Mini — left column compact stack ─────── */
.currently-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.currently-mini-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
  padding: 10px 14px;
}
.currently-mini-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.currently-mini-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bbb;
  line-height: 1;
  margin-bottom: 3px;
}
.currently-mini-value {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1;
}

/* ── Currently Section ───────────────────────────────── */
.currently-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.currently-item {
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.currently-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
.currently-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bbb;
}
.currently-value {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
}

/* Section label */
.port-section-label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: #bbb;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.port-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.07);
}

/* ── Case Study Folder Cards ──────────────────────────── */
.cs-inline-grid {
  position: relative;
  width: 100%;
  min-height: 640px;
}

/* ── iOS Folder–style case study cards (draggable) ──────── */
/* ── Case study cards — new stacked-thumb style ── */
.cs-card {
  --border: #E4E4E4;
  position: absolute;
  width: 260px;
  background: transparent;   /* transparent at rest — no fill or shadow; fills white on hover */
  padding: 14px;             /* clearance so content never touches the hand-drawn outline */
  border-radius: 16px;       /* rounds the white hover fill to match the outline's corners */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: visible;         /* the outline may wobble a hair past the card edge */
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  z-index: 1;
}
/* Specificity bumped (+ own transition re-declared) so the hover lift wins
   over [data-reveal].is-visible, which otherwise shares this card's `transform`
   and would both cancel the lift and slow it to the 0.6s reveal curve. */
/* Hover signal: the card fills white AND the hand-drawn outline draws in. */
.cs-inline-grid .cs-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: #fff;
  z-index: 10;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hand-drawn outline around the whole card — the shared pen (handStroke), a
   filled variable-width ribbon built in JS at each card's live size. Not a CSS
   border: an absolutely-positioned SVG that never affects layout and is free to
   overshoot a hair past the card edge. Shown on HOVER only. */
.csc-outline {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;                 /* ink sits over the white card fill */
  opacity: 0;                 /* hidden at rest — appears on hover */
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-inline-grid .cs-card:hover .csc-outline {
  opacity: 1;
}

/* Top: text section. Horizontal clearance comes from the card's own padding now,
   so this only spaces text from the thumbnail below it. */
.csc-top {
  padding: 0 2px 14px;
  display: flex;
  flex-direction: column;
}
.csc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.csc-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.csc-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  background: #1a1a1a;
  color: #fff;
}
.csc-meta {
  font-size: 11px;
  color: #bbb;
  font-weight: 400;
}
.csc-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.csc-desc {
  font-size: 12px;
  color: #999;
  line-height: 1.55;
}

/* Bottom: image panel. Insets from the card edge via the card's padding, and
   keeps its own radius + overflow:hidden so the img/video clip to clean corners.
   No stroke of its own — the hand-drawn outline now wraps the whole card. */
.csc-img-panel {
  position: relative;
  width: 100%;
  height: 170px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  margin-top: auto;
}
.csc-img-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.csc-static {
  transition: opacity 0.3s ease;
  z-index: 1;
}
.csc-vid {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s ease;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
.csc-vid:not(.csc-vid-contain) {
  transform: scale(1.04);
}
.csc-vid-active .csc-vid {
  opacity: 1;
}
.csc-vid-active .csc-static {
  opacity: 0;
}
.csc-vid-contain {
  position: absolute;
  inset: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 16% / 7.5%;
  overflow: hidden;
  width: auto; height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ── Hackathon crown badge + hover speech bubble ──────────────────
   A persistent hand-drawn crown (bottom-right of the card image) marks a
   hackathon project; on card hover a hand-drawn speech bubble (same pen as
   the avatar bubble) rises out of the crown with the placement + event name.
   Both the crown and the bubble sit ABOVE the card's overflow:hidden image
   panel — they're direct children of .cs-card (overflow:visible), so the
   bubble is free to spill past the panel edges. */
.csc-crown {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  z-index: 6;
  pointer-events: none;   /* clicks fall through to the card; bubble is hover-driven */
}
.csc-crown-icon {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.csc-crown-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 260px;
  height: 96px;
  opacity: 0;
  transform: translate(-80%, 8px) scale(0.92);
  transform-origin: 80% 100%;   /* grows up out of the tail, over the crown */
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 20;
}
.cs-inline-grid .cs-card:hover .csc-crown-bubble {
  opacity: 1;
  transform: translate(-80%, 0) scale(1);
}
.csc-bubble-shape {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}
.csc-bubble-text {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 74%;                  /* the bubble body; the lower 26% is the tail */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  text-align: center;
  font-family: var(--font-sans);
}
.csc-bubble-place {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.csc-bubble-name {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 1.3;
  margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .csc-crown-bubble { transition: opacity 0.2s linear; transform: translate(-80%, 0) scale(1); }
}

/* ── Auto-scroll gallery card ────────────────────────── */
.gallery-card {
  max-width: 100%;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 14px 0 14px;
  overflow: hidden;
}

.gallery-scroll-outer {
  overflow: hidden;
  position: relative;
}
/* soft fade on left and right edges */
.gallery-scroll-outer::before,
.gallery-scroll-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.gallery-scroll-outer::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.72), transparent);
}
.gallery-scroll-outer::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.72), transparent);
}

.gallery-scroll-track {
  display: flex;
  gap: 10px;
  padding: 4px 20px 6px;
  width: max-content;
  animation: gallery-auto-scroll 28s linear infinite;
}
/* pause on hover */
.gallery-scroll-outer:hover .gallery-scroll-track {
  animation-play-state: paused;
}

@keyframes gallery-auto-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Horizontal scroll gallery (legacy, kept for compat) ─ */
.h-gallery-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.h-gallery-wrap::-webkit-scrollbar { display: none; }

.h-gallery-row {
  display: flex;
  gap: 12px;
  width: max-content;
}

.h-gallery-item {
  width: 200px;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  background: #e8e8e4;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.h-gallery-item:hover { transform: scale(1.05); }
.h-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.92) saturate(0.85); }
.h-gallery-item:hover img { filter: brightness(1) saturate(1); transition: filter 0.2s ease; }

.h-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
}
.h-gallery-item:hover .h-gallery-overlay { opacity: 1; }
.h-gallery-overlay-title { font-size: 11px; font-weight: 500; color: #fff; line-height: 1.3; }

/* ── Two-column: artwork + side works ────────────────── */
.port-two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
  align-items: start;
}

/* ── Side Works — CD player widgets ─────────────────────── */
.side-works-list { display: flex; flex-direction: column; gap: 7px; }

.side-work-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 11px 52px 11px 14px; /* right padding leaves room before CD */
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 14px;
  text-decoration: none;
  color: #1a1a1a;
  overflow: visible;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
  min-height: 64px;
}
.side-work-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

/* ── CD disc — frosted full-image ── */
.side-work-cd {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.22);
  z-index: 5;
  transition: right 0.32s cubic-bezier(0.34,1.56,0.64,1), transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
}
.side-work-item:hover .side-work-cd {
  right: -10px;
  transform: translateY(-62%) rotate(18deg);
}

/* CD label — full-disc image */
.side-work-cd-label {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.side-work-cd-label img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* shimmer overlay removed */
.side-work-cd-label::after { display: none; }

/* Groove shimmer — now hidden (shimmer lives on label::after) */
.side-work-cd-grooves { display: none; }

/* Center hole */
.side-work-cd-hole {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* hide old thumb */
.side-work-thumb {
  display: none;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.side-work-text { flex: 1; min-width: 0; }
.side-work-name { font-size: 13px; font-weight: 500; color: #1a1a1a; line-height: 1.35; }
.side-work-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.swt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #666;
  background: rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}
.side-work-desc {
  font-size: 11px; color: #888; line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-work-tag {
  display: none;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 5px;
  margin-right: 4px;
}
.swt-challenge { background: #e8f0ff; color: #3060c8; }
.swt-sim       { background: #fff0e0; color: #c07020; }
.swt-hack      { background: #f0e8ff; color: #7038c8; }
.swt-uxui      { background: #e4f5ec; color: #1f8a5a; }
.swt-mobile    { background: #e0f4f8; color: #1c7f96; }
.swt-ai        { background: #ffe8f2; color: #c8307e; }
.swt-physical  { background: #fff0e0; color: #c07020; }
.swt-food      { background: #fdeee4; color: #b65c2e; }
.swt-exercise  { background: #eaf3ff; color: #2a6fc2; }
.swt-spec      { background: #fdf6dc; color: #a8861d; }
.side-work-arrow { font-size: 14px; color: #ccc; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.side-work-item:hover .side-work-arrow { opacity: 1; }

/* ── Work Chips — quiet "more work" footer, wraps on small screens ── */
.work-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s, border-color 0.22s;
}
.work-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.14);
}
.work-chip-arrow {
  font-size: 12px;
  color: #bbb;
  transition: color 0.2s ease, transform 0.2s ease;
}
.work-chip:hover .work-chip-arrow {
  color: #1a1a1a;
  transform: translate(1px, -1px);
}

/* ── Resume Box — Experience + Education + Skills combined ── */
.resume-box {
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 28px 28px 24px;
  max-width: 650px;
}

/* Box title — e.g. "Experience & Education" */
.resume-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

/* Sub-section title inside box — e.g. "Experience", "Skills" */
.resume-subheading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  margin-top: 4px;
}

/* Thick divider between sections */
.resume-section-divider {
  height: 1px;
  background: rgba(0,0,0,0.09);
  margin: 24px 0;
}

/* Thin divider between experience rows */
.resume-inner-divider {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 0;
}

/* Experience rows */
.exp-row { overflow: hidden; }

.exp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  cursor: pointer;
}
.exp-logo-box {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.exp-info { flex: 1; }
.exp-company { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.exp-role    { font-size: 11.5px; color: #999; margin-top: 2px; }
.exp-dot     { margin: 0 4px; }
.exp-chevron { font-size: 18px; color: #ccc; transition: transform 0.25s; user-select: none; flex-shrink: 0; }
.exp-row.exp-open .exp-chevron { transform: rotate(180deg); }

.exp-body {
  padding: 0 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.exp-row.exp-open .exp-body {
  max-height: 600px;
  padding: 0 4px 18px;
}

.exp-sub {
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}
.exp-bullets {
  list-style: disc;
  padding-left: 16px;
  font-size: 12.5px;
  color: #666;
  line-height: 1.65;
  margin-bottom: 12px;
}
.exp-bullets li + li { margin-top: 4px; }
.edu-detail { font-size: 11px; color: #bbb; margin-top: 2px; }

/* Metric badges */
.exp-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-metric {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
}
.exp-metric.green  { background: #e6f9ee; color: #1a8a52; }
.exp-metric.blue   { background: #e8f0ff; color: #3060c8; }
.exp-metric.purple { background: #f0ebff; color: #7040c0; }

/* Education row */
.edu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
}
.edu-logo-box {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.edu-info { flex: 1; }
.edu-school { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.edu-meta   { font-size: 11.5px; color: #999; margin-top: 2px; }

/* ── Resume top row (Education | Skills side by side) ─── */
.resume-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.resume-col { min-width: 0; }

/* Icon placeholder — blank square for user to fill with assets later */
.org-icon-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f0ee;
  border: 1.5px dashed #d8d8d4;
  flex-shrink: 0;
}

/* Small inline icon placeholder next to section headings */
.resume-icon-placeholder {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f0f0ee;
  border: 1.5px dashed #d8d8d4;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -2px;
}

/* Education entries */
.edu-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.edu-degree { font-weight: 500; font-size: 14px; color: #1a1a1a; line-height: 1.4; }
.edu-link   { color: #3b82f6; font-weight: 500; }
.edu-dates  { font-size: 12px; color: #52a882; margin-top: 3px; font-weight: 400; }
.edu-detail { font-size: 12px; color: #52a882; font-weight: 400; }

/* Skills two-column list */
.skills-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.resume-skill-list {
  list-style: disc;
  padding-left: 16px;
  font-size: 13px;
  color: #444;
  line-height: 1.8;
}
.resume-skill-list li strong { color: #1a1a1a; }

/* Flat experience entries (no accordion) */
.exp-flat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.exp-flat:last-child { margin-bottom: 0; }
.exp-flat-left { padding-top: 2px; }
.exp-flat-body { flex: 1; min-width: 0; }

.exp-flat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.exp-flat-title {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
}
.exp-link   { color: #3b82f6; font-weight: 600; }
.exp-flat-dates { font-size: 12px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.exp-flat-sub {
  font-size: 12px;
  color: #999;
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* ── Skills ──────────────────────────────────────────── */
.skills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skills-wrap + .skills-wrap {
  margin-top: 10px;
}
.skill-chip {
  padding: 6px 14px;
  background: #f4f4f2;
  backdrop-filter: none;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.skill-chip-icon {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  object-fit: contain;
  flex-shrink: 0;
}
.skill-chip-icon-crop {
  width: 18px;
  height: 18px;
  object-fit: cover;
  transform: scale(1.35);
}

/* ══════════════════════════════════════════════════════════
   NEW LAYOUT ZONES — replaces 3-column system
   ══════════════════════════════════════════════════════════ */

/* ── Case Studies zone — full-width top strip ───────────── */
.cs-zone {
  position: absolute;
  top: 68px;
  left: 16px;
  right: 16px;
  z-index: 20;
  padding: 0;
  pointer-events: all;
}

.cs-zone .port-section-label {
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Force single row — override any multi-row grid */
.cs-zone .cs-inline-grid {
  position: relative;
  height: 420px;
  min-height: 0;
  width: 100%;
}

/* ── Ring section — centered below case studies ─────────── */
.ring-section {
  position: absolute;
  top: 58px;
  bottom: 20px;
  left: 280px;
  right: 340px;
  pointer-events: none;
  z-index: 25;
  overflow: visible;
}

/* Drag-to-spin hit area — starts below the case-study cards so it never
   blocks their hover/click events, which sit at a lower z-index above this. */
.ring-drag-zone {
  position: absolute;
  top: 470px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: all;
  touch-action: none;
  z-index: 1;
}

.ring-stage {
  position: absolute;
  width: 0;
  height: 0;
  top: 91%;
  left: 50%;
  pointer-events: none;
  overflow: visible;
}

/* ── Ring cards — square photos with a hand-drawn ink frame ─────────────── */
/* The card is now just the positioning/rotation box (overflow visible) so the
   frame stroke can wobble slightly past the edge. The photo lives in an inner
   clip (.ring-card-photo) that keeps the square crop + rounded corners; the
   hand-drawn <svg> frame (built in initRing) overlays it. */
.ring-card {
  position: absolute;
  width: 64px;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;           /* let the drawn frame overshoot the edge */
  cursor: pointer;
  pointer-events: all;
  transform: translate(-50%, -50%) rotate(var(--card-rot, 0deg));
  will-change: left, top, opacity, transform;
}

/* Inner clip — the square crop + rounded corners + soft shadow live here now. */
.ring-card-photo {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;            /* clips the photo to the rounded corners */
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
  transition: box-shadow 0.3s;
}

/* The photo fills its clip edge-to-edge — seamless. */
.ring-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Hand-drawn frame — traced around the photo, scales with the card on hover. */
.ring-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;           /* wobble may reach just outside the viewBox */
  pointer-events: none;
  z-index: 2;                  /* ink sits over the photo edge */
}

.ring-card:hover {
  transform: translate(-50%, calc(-50% - 18px)) scale(1.2) rotate(var(--card-rot, 0deg)) !important;
  z-index: 500 !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.ring-card:hover .ring-card-photo {
  box-shadow: 0 12px 32px rgba(0,0,0,0.26);
}

/* ── Ring center — photo + name + badge ─────────────────── */
.ring-center {
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  pointer-events: all;
}

.ring-photo {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  cursor: pointer;
}

.ring-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ring-name {
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 400;
  font-style: normal;
  color: #1a1a1a;
  letter-spacing: -0.025em;
  text-align: center;
  /* All children share one grid cell: the hidden sizers set the box to the
     widest phrase, the live text overlays it — so the width never changes. */
  display: inline-grid;
  justify-items: center;
}
.ring-name > span { grid-area: 1 / 1; }
/* padding-right reserves the cursor (2px bar + 3px margin) so the box width
   stays fixed even when the longest phrase is fully typed with cursor shown. */
.rn-sizer { visibility: hidden; pointer-events: none; padding-right: 5px; }
.rn-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rn-cursor {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 3px;
  background: currentColor;
  animation: rn-blink 1.06s steps(1) infinite;
}
@keyframes rn-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-cursor { display: none; }
}

/* Visually hidden but readable by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ring-tagline {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: #888;
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
  margin-top: -4px;
}

.ring-otw {
  /* Handwriting accent — this pill and the footer closing line use --font-hand. */
  font-family: var(--font-hand);
  font-size: 18px;              /* Mynerve reads small; bumped up from 13px Manrope */
  font-weight: 400;            /* Mynerve ships a single 400 weight */
  letter-spacing: 0.01em;
  line-height: 1;
  color: #2f7a45;
  background: rgba(82,160,104,0.12);
  padding: 5px 17px 7px;       /* extra bottom offsets Mynerve's low baseline so text sits centered */
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Keep the geometric status dot optically centered against the handwriting text */
.ring-otw .peeker-pulse { align-self: center; margin-top: -1px; }

/* ── Scroll nudge ─────────────────────────────────────────
   Quiet ↓ at the bottom of the hero. Absolutely positioned so it never shifts
   the arc, name, or avatar. Hidden until JS fades it in ~1s after load; fades
   out for good on the first scroll (.is-out). pointer-events:none — a nudge,
   not a button. */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  color: #1a1a1a;              /* black — a touch heavier than the old grey nudge */
  pointer-events: none;
  opacity: 0;                  /* fade-in handled by .is-in */
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-indicator.is-in  { opacity: 1; }
.scroll-indicator.is-out { opacity: 0; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* The whole line bobs now — arrows flank the handwriting text, all on one
   baseline. Arrows stay on --font-sans (Manrope); the text is --font-hand
   (Mynerve), sized up so its lighter face carries the same visual weight. */
.scroll-nudge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  animation: scroll-bob 2s ease-in-out infinite;
}
.scroll-nudge-arrow {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1;
}
.scroll-nudge-text {
  font-family: var(--font-sans);
  font-size: 18px;            /* smaller than the arrows */
  line-height: 1;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-nudge { animation: none; }   /* static, no bob; still fades */
}

/* ── Ring tooltip (global, follows cursor) ──────────────── */
.ring-tooltip-global {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 8px 13px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.11);
  max-width: 200px;
  opacity: 0;
  transition: opacity 0.15s;
  transform: translate(-50%, calc(-100% - 14px));
}

.ring-tooltip-global.visible { opacity: 1; }

.ring-tt-title {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 3px;
}

.ring-tt-meta {
  font-size: 11px;
  color: #999;
  line-height: 1.3;
}

/* ── Ring lightbox ──────────────────────────────────────── */
.ring-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}

.ring-lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.ring-lightbox img {
  max-width: 82vw;
  max-height: 74vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  object-fit: contain;
  display: block;
}

.ring-lb-info {
  text-align: center;
  color: #fff;
}

.ring-lb-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.ring-lb-meta {
  font-size: 13px;
  opacity: 0.6;
}

.ring-lb-close {
  position: absolute;
  top: 24px;
  right: 28px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  opacity: 0.65;
  background: none;
  border: none;
  line-height: 1;
  transition: opacity 0.15s;
}

.ring-lb-close:hover { opacity: 1; }

/* ── Bottom Left zone — music player only, anchored to bottom ── */
.bl-zone {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 280px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px 20px;
  pointer-events: all;
}

.bl-zone .cdplayer {
  margin: 0 !important;
}

.bl-action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.bl-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-resume-link {
  height: 42px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.bl-action-stack #about-peeker,
.bl-action-stack #resume-peeker {
  width: 100%;
  box-sizing: border-box;
}

/* ── Bottom Right zone — other projects, anchored to bottom ─── */
.br-zone {
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 340px;
  height: auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: visible;
  padding: 8px 20px 20px;
  scrollbar-width: none;
  pointer-events: all;
  overflow-anchor: none;
  z-index: 5;
}

.br-zone::-webkit-scrollbar { display: none; }

.br-zone .port-section-label {
  margin-bottom: 10px;
}

.side-work-mktg {
  align-items: flex-start;
  padding-right: 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.side-work-mktg-imgs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.side-work-mktg-img {
  background: #ede9e3;
  border-radius: 8px;
  height: 52px;
  overflow: hidden;
}
.side-work-mktg-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.br-zone .side-work-item {
  overflow: visible;
}

.br-zone .side-works-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.br-zone .side-work-cd {
  right: 4px;
}

.br-zone .side-work-item:hover .side-work-cd {
  right: 4px;
  transform: translateY(-62%) rotate(18deg);
}


/* ══════════════════════════════════════════════════════════
   MARKETING & BRAND — home-page bento board (Section 2)
   Small self-contained widgets surfacing marketing.html content.
   Reuses site tokens: Manrope, 16px radius, swt-style pills,
   the side-work card shadow + spring hover. One accent (rose) ties
   it together. Sizes vary (2×2 / 2×1 / 1×1) on a tidy 4-col grid.
   ══════════════════════════════════════════════════════════ */
.mktg-bento {
  --mkw-accent: #d44f70;   /* single accent, still used by the .mkw-panel modals */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px; /* row col — equal-sized cards, generous gutters (matches Graphic Work) */
}
@media (max-width: 860px) { .mktg-bento { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } }
@media (max-width: 560px) { .mktg-bento { grid-template-columns: 1fr; gap: 32px; } }

/* ── Portfolio card — shared image-forward "door" ──────────────────────────
   The image IS the card; title + one-line subtitle sit centered below it.
   Built to mirror the Graphic Work cards; when that section moves into this
   repo it can adopt .pcard verbatim instead of duplicating these values.
   Border + radius + overflow all live on .pcard-img (never the wrapper), so
   the card wrapper carries no shadow or fill. */
.pcard {
  display: block;
  color: #1a1a1a;
  scroll-margin-top: 84px; /* clears the sticky nav if scrolled into view */
}
.pcard-img {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border, #E4E4E4);
  border-radius: 22px;
  overflow: hidden;
  background: #ECEAE6; /* neutral fill behind placeholder tiles */
  transition: border-color 0.2s ease;
}
/* Hover is triggered by the card, darkening the image border only. */
.pcard:hover .pcard-img { border-color: #1A1A1A; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-title {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 500; /* Medium */
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pcard-sub {
  margin-top: 5px;
  text-align: center;
  font-size: 13px;
  font-weight: 400; /* Regular */
  color: #8a8a8a;   /* secondary */
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* one line */
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE OF WORK — stack browser (#marketing section)
   Four stacks fan on hover; clicking one opens its item row below.
   Item cards reuse .pcard / .pcard-img / .pcard-title / .pcard-sub.
   Built by initStacks() in script.js. Namespaced under .stacks.
   ══════════════════════════════════════════════════════════════ */
.stacks {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Tunables — size, scatter, and gaps in ONE place ──────────────
     Retune the whole component from here; nothing below hard-codes these. */
  --stack-size: 176px;      /* cover card edge — smaller so four fit across   */
  --sub-gap: 34px;          /* gap from the cover's BOTTOM edge down to its
                               label. Layers peek UP now, so nothing sits below
                               the cover — this is pure cover-to-label breathing */
  --cover-radius: 18px;     /* corner radius on the cover + under-layers      */

  /* Under-layer resting scatter — offset (x, y) + rotation, one per layer.
     All four peek UPWARD (negative y) with only a slight sideways splay, so the
     pile reads as a stack that's slightly askew — not a fan opened at rest. The
     outer pair (3,4) peeks up a touch more than the inner pair (1,2). Horizontal
     offsets are ~a third of the old wide spread; rotations roughly halved.
     Transform-only: these never change the container's size. */
  --l1-x:  -6px; --l1-y: -10px; --l1-rot: -3deg;   /* inner, slight left  */
  --l2-x:   7px; --l2-y: -13px; --l2-rot:  2.5deg; /* inner, slight right */
  --l3-x:  -5px; --l3-y: -17px; --l3-rot:  3.5deg; /* outer, slight left  */
  --l4-x:   6px; --l4-y: -20px; --l4-rot: -2.5deg; /* outer, slight right */

  /* One flat row of four, centered in the shared 900px .section-inner. Each
     column is an equal fraction and the stack is centered inside it, so the
     gaps between all four read even with no stretched/dead columns. The drawer
     is the 5th grid child; it spans the full width (grid-column: 1 / -1) and,
     because its `order` is higher than every stack, always lands below the row.
     On the ≤720px 2×2 fallback its order is overridden to slot it row-aware. */
  /* Layers peek UPWARD now, so the pile's spread reaches above the cover — this
     reserves room between the "Archive" heading and the top of the piles so a
     hovered stack's raised layers never touch the heading. */
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: start;
  column-gap: 28px;
}

/* ── A single stack: a bounded container (cover + under-layers) with its
   label below. Fixed width; the scatter lives inside via transforms only, so a
   stack can never blow out its grid cell. ── */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--stack-size);
  color: #1a1a1a;
  border: none; background: none;
  position: relative;   /* stacking context so a hover lift can rise above neighbours */
  z-index: 1;
  cursor: pointer;
}
.stack:hover, .stack:focus-within { z-index: 10; }
.stack:focus-visible { outline: none; }
.stack:focus-visible .stack-cover { border-color: #1A1A1A; box-shadow: 0 0 0 3px rgba(26,26,26,0.18); }

/* Pile: the bounded box — exactly --stack-size square. Cover on top, 4 layers
   behind scattered around it. overflow stays visible so the scatter shows, but
   the box itself never grows (layers are position:absolute + transform-only). */
.stack-pile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.stack-layer,
.stack-cover {
  position: absolute;
  inset: 0;
  border-radius: var(--cover-radius);
  transition: transform 0.34s var(--ease), opacity 0.34s var(--ease), filter 0.34s var(--ease), border-color 0.2s ease;
}
/* Depth from REAL work — each layer carries an item thumbnail from the stack's
   own contents (built in initStacks), so the spread-on-hover reveals actual
   pieces. Centre pivot so the layers read as scattered cards set down, not a
   hinged fan. White card backing shows while the image loads / behind any
   transparency. */
.stack-layer {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  overflow: hidden;
  transform-origin: 50% 50%;
  opacity: 0;             /* hidden at rest — the pile reads as a single cover; layers appear only on hover */
  filter: grayscale(1);   /* revealed in B&W first, then resolve to color as they spread (hover, below) */
  pointer-events: none;   /* decorative only — the cover is the hit target */
}
.stack-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* z-order: outer pair behind inner pair behind cover. */
.stack-layer-3, .stack-layer-4 { z-index: 1; }
.stack-layer-1, .stack-layer-2 { z-index: 2; }
/* Resting scatter — each layer to a different quadrant (constants above). */
.stack-layer-1 { transform: translate(var(--l1-x), var(--l1-y)) rotate(var(--l1-rot)); }
.stack-layer-2 { transform: translate(var(--l2-x), var(--l2-y)) rotate(var(--l2-rot)); }
.stack-layer-3 { transform: translate(var(--l3-x), var(--l3-y)) rotate(var(--l3-rot)); }
.stack-layer-4 { transform: translate(var(--l4-x), var(--l4-y)) rotate(var(--l4-rot)); }

.stack-cover {
  z-index: 4;
  /* The hand-drawn ink (.stack-outline) IS the cover's frame now — this border
     stays transparent so it never competes with the ink. Kept as a 1px box (not
     removed) so the focus-visible ring and the is-active selected state can still
     colour it without shifting the cover by a pixel. */
  border: 1px solid transparent;
  overflow: hidden;
  background: #fff;      /* covers are logos on white — card reads as white */
}
.stack-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hand-drawn outline on the cover — the same shared pen as the case-study cards
   (built in initStacks). It REPLACES the old grey cover border: the ink is the
   cover's frame, shown at rest, not a hover-only accent (the cards are transparent
   text tiles that only become cards on hover; a cover is always a card, so its
   frame is always drawn). An absolutely-positioned SVG that never affects layout
   and is free to overshoot past the cover edge, so it lives in .stack-pile (which
   is overflow:visible) rather than inside .stack-cover (overflow:hidden would clip
   it). Sits just above the cover; the cover is stationary on hover, so the ink
   rides with it as the layers spread. */
.stack-outline {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;                 /* above the cover (z-index 4) */
}

/* Hover — the pile opens UPWARD along each layer's existing lean: the vertical
   push grows more than the sideways one, so it lifts open rather than fanning
   wide. Proportional to the restrained rest — noticeably more open, still tight.
   (x ×1.5, y ×1.8, rot ×1.35.) */
@media (hover: hover) {
  /* No border-colour change on hover — the hand-drawn ink is the frame in every
     state, so a solid border would just double up behind the wobble. */
  /* Layers resolve to full opacity + full color as they spread — the reveal is
     opacity + color + movement, landing together on the same curve/duration. */
  .stack:hover .stack-layer { opacity: 1; filter: grayscale(0); }
  .stack:hover .stack-layer-1 { transform: translate(calc(var(--l1-x) * 1.5), calc(var(--l1-y) * 1.8)) rotate(calc(var(--l1-rot) * 1.35)); }
  .stack:hover .stack-layer-2 { transform: translate(calc(var(--l2-x) * 1.5), calc(var(--l2-y) * 1.8)) rotate(calc(var(--l2-rot) * 1.35)); }
  .stack:hover .stack-layer-3 { transform: translate(calc(var(--l3-x) * 1.5), calc(var(--l3-y) * 1.8)) rotate(calc(var(--l3-rot) * 1.35)); }
  .stack:hover .stack-layer-4 { transform: translate(calc(var(--l4-x) * 1.5), calc(var(--l4-y) * 1.8)) rotate(calc(var(--l4-rot) * 1.35)); }
}

/* Active/selected stack — highlighted; layers stay tucked at rest (no fan). */
.stack.is-active .stack-cover { border-color: #1A1A1A; }

/* ── Stack label — the sole text now (titles removed; the cover carries the
   name). Sits below the pile with real clearance, centered under the cover,
   styled as a label rather than faint caption copy. ── */
.stack-label {
  margin-top: var(--sub-gap);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: #4a4a46;
  max-width: 100%;
}

/* ── Drawer: the clicked stack's items as a wrapping GRID, appearing directly
   under that stack's ROW. Two drawer slots exist in the DOM (one between the
   two rows, one after them); only the slot under the active stack's row is
   populated. No horizontal scroll, no arrows, no peek — all items show at
   once and the grid grows as tall as it needs. ── */
.stack-drawer {
  grid-column: 1 / -1;           /* full container width, below the row */
  order: 10;                     /* after all four stacks (orders 1–4)  */
  margin-top: 40px;
  overflow: hidden;              /* clip the enter/leave y-shift */
}
.stack-drawer:empty { margin-top: 0; } /* no gap when nothing is open */

/* Wrapping grid — 4 per row at desktop, spanning the full shared container so
   its left edge lines up with the stacks + heading above it. Photo & Video and
   Art hold more items, so their grids simply wrap to more rows and run tall —
   that's expected. */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}

/* Item card — the shared .pcard, filling its grid cell. */
.stack-item {
  width: auto;
  display: block;
  color: #1a1a1a;
  position: relative;
}
.stack-item .pcard-img { position: relative; }

/* ↗ badge — external-link cards ONLY. Signals a new tab before the click. */
.stack-item-arrow {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1a1a1a;
  font-size: 13px; line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s var(--ease), background 0.2s ease;
  z-index: 2;
}
.stack-item:hover .stack-item-arrow { transform: translate(1px,-1px); background:#fff; }

/* Neutral placeholder tile (until real item images land). */
.stack-item-ph {
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg,#ECEAE6 0 12px,#E7E4DF 12px 24px);
  color: #b0aca4;
  font-size: 13px; font-weight: 500; text-align: center; padding: 12px;
}

/* Enter / leave motion for the drawer contents (AnimatePresence-style).
   Cards fade + rise with a per-card stagger; the stagger is capped so a long
   stack (11+ items) still finishes in ~0.5s instead of trickling for a second. */
.stack-drawer.is-entering .stack-item {
  animation: stackItemIn 0.32s var(--ease) both;
  animation-delay: calc(min(var(--i), 6) * 0.08s);   /* cap total stagger ≈ 0.48s */
}
@keyframes stackItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stack-drawer.is-leaving .stack-grid {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

/* ── Narrow (≤720px): four-across won't fit, so degrade to a 2×2. The drawer
   then slots ROW-AWARE — between the rows for a top stack (indices 0–1), below
   both rows for a bottom stack (2–3) — driven entirely by [data-active-row]
   overriding the drawer's grid `order`. (order 2 → after stack #2 / before #3;
   the base order 10 already sits it below everything for a bottom stack.) ── */
@media (max-width: 720px) {
  .stacks { --stack-size: 132px; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px; }
  .stacks[data-active-row="top"] .stack-drawer { order: 2; margin-top: 0; }
  .stacks[data-active-row="top"] .stack-drawer:not(:empty) { margin: 24px 0; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* ── Reduced motion: keep the resting scatter, no spread, no stagger. ── */
@media (prefers-reduced-motion: reduce) {
  .stack-layer, .stack-cover { transition: none !important; }
  /* No spread — hover holds each layer at its resting scatter position and its
     resting opacity (no brighten). */
  .stack:hover .stack-layer { opacity: 0.4; }
  .stack:hover .stack-layer-1 { transform: translate(var(--l1-x), var(--l1-y)) rotate(var(--l1-rot)); }
  .stack:hover .stack-layer-2 { transform: translate(var(--l2-x), var(--l2-y)) rotate(var(--l2-rot)); }
  .stack:hover .stack-layer-3 { transform: translate(var(--l3-x), var(--l3-y)) rotate(var(--l3-rot)); }
  .stack:hover .stack-layer-4 { transform: translate(var(--l4-x), var(--l4-y)) rotate(var(--l4-rot)); }
  .stack-drawer.is-entering .stack-item { animation: none; }
  .stack-drawer.is-leaving .stack-grid { transition: none; }
}

/* Base widget — matches the case-study card treatment: flat, transparent,
   1px border that darkens on hover (no shadow, no lift). */
.mkw {
  --border: #E4E4E4;
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: #1a1a1a;
  scroll-margin-top: 84px; /* clears the sticky nav when an opening card scrolls into view */
  transition: border-color 0.2s ease;
}
/* Only clickable widgets (expandable cards + image tiles) invite hover. */
.mkw-clickable:hover { border-color: #1A1A1A; }

/* Collapsed face — the clickable card content. Holds the flex layout that
   used to live on .mkw so the variants (.mkw-feature / .mkw-split) keep
   working; the expanded .mkw-panel is a separate sibling. */
.mkw-summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Bento spans */
.mkw-2x2 { grid-column: span 2; grid-row: span 2; }
.mkw-2x1 { grid-column: span 2; grid-row: span 1; }
.mkw-1x1 { grid-column: span 1; grid-row: span 1; }

/* Header: logo + name/role */
/* flex-shrink:0 keeps these from being crushed: -webkit-line-clamp forces
   overflow:hidden, which otherwise lets flexbox shrink the text below its
   content height and clip it inside fixed-height bento tiles. */
.mkw-head, .mkw-blurb, .mkw-tags { flex-shrink: 0; }
.mkw-head { display: flex; align-items: center; gap: 10px; }
.mkw-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0ede8;
  display: flex; align-items: center; justify-content: center;
}
.mkw-logo img { width: 100%; height: 100%; object-fit: cover; }
.mkw-titles { min-width: 0; }
.mkw-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.mkw-role {
  font-size: 11px; color: #8a8a8a; line-height: 1.3; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkw-blurb {
  font-size: 12px; color: #777; line-height: 1.5; margin-top: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mkw-blurb strong { color: var(--mkw-accent); font-weight: 600; }
.mkw-1x1 .mkw-blurb,
.mkw-split .mkw-blurb { -webkit-line-clamp: 2; }
.mkw-feature .mkw-blurb { -webkit-line-clamp: 2; }

/* Tag pills — same visual weight as .swt */
.mkw-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 12px; }
.mkw-tag {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em;
  color: #666; background: rgba(0,0,0,0.06);
  border-radius: 20px; padding: 3px 8px; white-space: nowrap;
}

/* Corner arrow — reveals + tints on hover */
.mkw-arrow {
  position: absolute; top: 14px; right: 14px;
  font-size: 14px; color: #ccc;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.mkw-clickable:hover .mkw-arrow { opacity: 1; color: var(--mkw-accent); }

/* Feature (2×2): image band bleeds to the bottom edge */
.mkw-feature .mkw-summary { padding-bottom: 0; }
.mkw-feature .mkw-tags { margin-top: 10px; padding-top: 0; }
.mkw-feature .mkw-media {
  margin: 14px -16px 0;
  flex: 1 1 auto;
  min-height: 90px;
  overflow: hidden;
}
.mkw-feature .mkw-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Split (wide 2×1): text left, media/stat panel right */
.mkw-split .mkw-summary { flex-direction: row; gap: 14px; align-items: stretch; }
.mkw-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mkw-split .mkw-media {
  width: 40%;
  flex-shrink: 0;
  margin: -16px -16px -16px 0;
  overflow: hidden;
}
.mkw-split .mkw-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stat panel (Amazon storefront +20%) */
.mkw-stat {
  width: 34%;
  flex-shrink: 0;
  margin: -16px -16px -16px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(212,79,112,0.10), rgba(212,79,112,0.04));
  border-left: 1px solid rgba(0,0,0,0.06);
}
.mkw-stat-val {
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--mkw-accent); line-height: 1;
}
.mkw-stat-cap {
  font-size: 10.5px; font-weight: 500; color: #9a7480;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* Testimonials widget — static (no .mkw-summary), so it carries its own
   padding + flex now that the base .mkw is just the bordered box. */
.mkw-quotes { display: flex; flex-direction: column; padding: 16px; justify-content: flex-start; }
.mkw-quotes-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: #bbb; margin-bottom: 10px;
}
.mkw-quotes-row { display: flex; gap: 16px; flex: 1; min-height: 0; }
.mkw-quote {
  flex: 1; min-width: 0; position: relative;
  padding-left: 16px; margin: 0;
  display: flex; align-items: center;
}
.mkw-quote::before {
  content: "“";
  position: absolute; left: -2px; top: -6px;
  font-family: var(--font-sans);
  font-size: 30px; line-height: 1; color: var(--mkw-accent); opacity: 0.55;
}
.mkw-quote p {
  font-size: 11.5px; line-height: 1.5; color: #5a5450; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Pure-image widgets */
.mkw-img { padding: 0; }
.mkw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkw-img .mkw-cap {
  position: absolute; left: 10px; bottom: 10px;
  font-size: 10.5px; font-weight: 500; color: #1a1a1a;
  background: var(--glass-light), var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 20px; padding: 4px 11px;
}

/* ══════════════════════════════════════════════════════════
   MARKETING & BRAND — modal (portal at body level)
   A clicked card opens its write-up as a floating modal over a
   shared frosted scrim. The bento grid NEVER moves: panels live
   outside the grid (#mkw-panels) and the scrollbar is compensated
   on lock. Enter/exit + one-at-a-time are driven from script.js.
   ══════════════════════════════════════════════════════════ */

/* Shared scrim token — every modal on the site uses this. */
:root {
  --scrim-bg: rgba(240, 240, 240, 0.7);
  --scrim-blur: blur(12px);
  --modal-border: #E4E4E4;
}
/* No backdrop-filter → raise opacity so it still reads as a scrim. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  :root { --scrim-bg: rgba(240, 240, 240, 0.92); }
}

/* Scroll-lock: freeze the page and pad for the removed scrollbar so the
   grid (and sticky nav) never shift by the scrollbar's width. */
html.mkw-modal-lock { overflow: hidden; padding-right: var(--mkw-sbw, 0px); }

.mkw-modal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.mkw-modal-overlay[hidden] { display: none; }

/* Frosted scrim — fades on its own timing, sits under the modal. */
.site-scrim {
  position: absolute; inset: 0;
  background: var(--scrim-bg);
  -webkit-backdrop-filter: var(--scrim-blur);
  backdrop-filter: var(--scrim-blur);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mkw-modal-overlay.is-open .site-scrim { opacity: 1; }

/* The dialog box — solid white, flat 1px border, no shadow. */
.mkw-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: 85vh;
  background: #fff;
  border: 1px solid var(--modal-border);
  border-radius: 12px;
  overflow: hidden;            /* clip the internal scroll to the radius */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mkw-modal-overlay.is-open .mkw-modal { opacity: 1; transform: scale(1); }

.mkw-modal-scroll { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mkw-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--modal-border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: #888; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.mkw-modal-close:hover { border-color: #1A1A1A; color: #1A1A1A; }

/* Panels are normal blocks once moved into the modal; hidden at rest
   because their store (#mkw-panels) carries the [hidden] attribute. */
.mkw-panel { display: block; }

/* Reduced motion — fade only, no scale. */
@media (prefers-reduced-motion: reduce) {
  .site-scrim, .mkw-modal { transition: opacity 0.15s ease; }
  .mkw-modal, .mkw-modal-overlay.is-open .mkw-modal { transform: none; }
}

.mkw-panel-inner { padding: 22px 24px 26px; }

/* Panel header — logo + name/role/dates (× lives on the modal shell) */
.mkw-panel-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-right: 34px; }
.mkw-panel-logo {
  width: 46px; height: 46px; border-radius: 12px; background: #f0ede8;
  flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.mkw-panel-logo img { width: 100%; height: 100%; object-fit: contain; }
.mkw-panel-titles { flex: 1; min-width: 0; }
.mkw-panel-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mkw-panel-role { font-size: 12.5px; color: #8a8a8a; margin-top: 2px; }
.mkw-panel-dates { font-size: 11.5px; color: #aaa; margin-top: 2px; }

.mkw-panel-blurb {
  font-size: 14px; color: #666; line-height: 1.65; margin-bottom: 20px; max-width: 72ch;
}

/* ── Ported panel media styles (scoped to .mkw-panel) ─────────────
   Migrated as-is from marketing.html so the write-ups look identical. */
.mkw-panel .lwb-gallery { margin-top: 4px; }
.mkw-panel .lwb-section { margin-top: 16px; }
.mkw-panel .lwb-section:first-child { margin-top: 0; }
.mkw-panel .lwb-section-label,
.mkw-panel .img-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #bbb; margin-bottom: 10px;
}
.mkw-panel .lwb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkw-panel .img-section + .img-section { margin-top: 20px; }

/* Instagram/embed masonry */
.mkw-panel .ig-grid { columns: 3; column-gap: 8px; }
.mkw-panel .ig-cell {
  position: relative; overflow: hidden; border-radius: 10px;
  background: #ede9e3; break-inside: avoid; margin-bottom: 8px; display: block;
}
.mkw-panel .ig-cell.sq { aspect-ratio: 1 / 1; }
.mkw-panel .ig-cell.pt { aspect-ratio: 9 / 16; }
.mkw-panel .ig-cell.ld { aspect-ratio: 4 / 3; }
.mkw-panel .ig-cell iframe {
  position: absolute; top: -56px; left: 0; width: 100%; height: 600px;
  border: none; pointer-events: all;
}
.mkw-panel .ig-cell.sq iframe { height: 460px; }
.mkw-panel .ig-cell.pt iframe { width: 160%; left: -30%; top: -56px; height: 600px; }
.mkw-panel .ig-cell.ld iframe { height: 400px; }
.mkw-panel .ig-cell.img-cell img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}

/* YouTube + LinkedIn embeds */
.mkw-panel .yt-embed { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.mkw-panel .yt-embed iframe { width: 100%; height: 100%; border: none; display: block; }
.mkw-panel .li-embed-row { display: flex; gap: 10px; margin-top: 12px; }
.mkw-panel .li-embed { flex: 1; min-width: 0; border-radius: 12px; overflow: hidden; }
.mkw-panel .li-embed iframe { width: 100%; border: none; display: block; border-radius: 12px; }

/* Slideshow */
.mkw-panel .ig-slideshow { margin-top: 16px; }
.mkw-panel .ss-slide { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkw-panel .ss-slide.active { display: grid; }
.mkw-panel .ss-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.mkw-panel .ss-btn {
  background: none; border: 1.5px solid #d0cbc5; border-radius: 50%;
  width: 28px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer;
  color: #888; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.mkw-panel .ss-btn:hover { border-color: #888; color: #333; }
.mkw-panel .ss-dots { display: flex; gap: 6px; align-items: center; }
.mkw-panel .ss-dot { width: 6px; height: 6px; border-radius: 50%; background: #d0cbc5; transition: background 0.15s; }
.mkw-panel .ss-dot.active { background: #888; }

/* Testimonials */
.mkw-panel .testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.mkw-panel .testimonial-card {
  background: #f5f2ee; border-radius: 12px; padding: 14px 16px;
  font-size: 12.5px; line-height: 1.6; color: #4a4540; font-style: italic;
}

/* Link buttons */
.mkw-panel .role-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mkw-panel .role-link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: 20px; background: #f0ede8; font-size: 12.5px; font-weight: 500;
  color: #444; text-decoration: none; transition: background 0.15s;
}
.mkw-panel .role-link-btn:hover { background: #e4e0da; }
.mkw-panel .role-link-btn svg { flex-shrink: 0; }

/* On the narrow 1-col board, no card can grow wider — just let it be full width. */

/* Responsive folding for .mktg-bento (3 → 2 → 1) lives with the base rule
   above (see the @media blocks next to .mktg-bento). Nothing needed here. */


/* ══════════════════════════════════════════════════════════
   MOBILE VIEW  (max-width: 768px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  #mobile-view { display: none !important; }
}

@media (max-width: 768px) {
  #desktop-canvas { display: none !important; }
  #cdplayer { display: none !important; }
  .corner-controls { display: none !important; }
  .overlay-window, .overlay-backdrop { display: none !important; }
  #resume-panel, #about-panel, .cursor-dot, .cursor-ring,
  .ring-tooltip-global, .ring-lightbox, .mc-lightbox { display: none !important; }
  body { overflow: auto; background: #f5f4f1; }

  #mobile-view {
    display: block;
    font-family: var(--font-sans);
    background: #f5f4f1;
    min-height: 100vh;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
  }

  .mob-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 52px;
    background: rgba(245,244,241,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .mob-bar-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
  .mob-bar-title { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-left: 9px; flex: 1; }
  .mob-hamburger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 36px; height: 36px; padding: 8px;
    background: none; border: none; outline: none; cursor: pointer; border-radius: 8px;
    -webkit-appearance: none; appearance: none;
  }
  .mob-hamburger span {
    display: block; height: 2px; background: #1a1a1a;
    border-radius: 2px; transition: opacity 0.15s;
  }
  .mob-hamburger:hover span { opacity: 0.6; }

  /* Drawer backdrop */
  .mob-drawer-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.3); z-index: 199;
    backdrop-filter: blur(2px);
  }
  .mob-drawer-backdrop.open { display: block; }

  /* Sidebar drawer */
  .mob-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 280px; background: #faf9f6;
    z-index: 200; transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32,0,0.16,1);
    display: flex; flex-direction: column;
    padding: 0 0 40px;
    box-shadow: -4px 0 32px rgba(0,0,0,0.12);
  }
  .mob-drawer.open { transform: translateX(0); }

  .mob-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .mob-drawer-identity { display: flex; align-items: center; gap: 11px; }
  .mob-drawer-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .mob-drawer-name { font-size: 13.5px; font-weight: 600; color: #1a1a1a; margin-bottom: 1px; }
  .mob-drawer-role { font-size: 11.5px; color: #999; }
  .mob-drawer-close {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(0,0,0,0.06); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #555; flex-shrink: 0;
  }
  .mob-drawer-close:hover { background: rgba(0,0,0,0.1); }

  .mob-drawer-section-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: #aaa;
    padding: 20px 20px 8px;
  }

  .mob-drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
  .mob-drawer-link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 10px; border-radius: 12px;
    font-size: 14px; font-weight: 500; color: #1a1a1a;
    text-decoration: none;
    transition: background 0.15s;
  }
  .mob-drawer-link svg { color: #888; flex-shrink: 0; }
  .mob-drawer-link:hover { background: rgba(0,0,0,0.05); }
  .mob-drawer-link:active { background: rgba(0,0,0,0.08); }

  .mob-drawer-contact { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
  .mob-drawer-contact-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px; border-radius: 12px;
    font-size: 13px; font-weight: 400; color: #555;
    text-decoration: none;
    transition: background 0.15s;
  }
  .mob-drawer-contact-link svg { flex-shrink: 0; color: #bbb; }
  .mob-drawer-contact-link:hover { background: rgba(0,0,0,0.05); color: #1a1a1a; }


  .mob-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px 32px;
  }
  .mob-avatar {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    margin-bottom: 16px; border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  .mob-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.2; }
  .mob-tagline { font-size: 13.5px; color: #666; line-height: 1.65; max-width: 280px; margin: 0 0 14px; }
  .mob-otw {
    display: inline-flex; align-items: center; gap: 7px;
    /* Handwriting accent — same scoped token as the desktop pill, nowhere else. */
    font-family: var(--font-hand);
    font-size: 16px; font-weight: 400; line-height: 1; color: #1a1a1a;
    background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.1);
    border-radius: 999px; padding: 5px 15px 7px; margin-bottom: 20px;
  }
  .mob-otw .peeker-pulse { align-self: center; margin-top: -1px; }
  .mob-cta-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .mob-cta {
    font-size: 13px; font-weight: 500; color: #fff; background: #1a1a1a;
    border-radius: 999px; padding: 9px 20px; text-decoration: none;
  }
  .mob-cta-ghost { background: transparent; color: #1a1a1a; border: 1.5px solid rgba(0,0,0,0.2); }

  .mob-section { padding: 0 18px 32px; }
  .mob-section-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: #999; margin: 0 0 14px;
  }

  .mob-section-collapsible {
    padding: 0;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-bottom: 4px;
  }
  .mob-section-hd {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left;
  }
  .mob-section-hd .mob-section-label { margin: 0; }
  .mob-chev { font-size: 15px; color: #aaa; transition: transform 0.22s ease; display: inline-block; }
  .mob-chev.open { transform: rotate(180deg); }
  .mob-collapse-body { display: none; padding: 0 18px 24px; }
  .mob-collapse-body.open { display: block; }

  .mob-cs-list { display: flex; flex-direction: column; gap: 12px; }
  .mob-cs-card {
    display: block; text-decoration: none; background: #fff; border-radius: 18px;
    overflow: hidden; border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); color: inherit;
  }
  .mob-cs-card:active { opacity: 0.9; }
  .mob-cs-thumb { width: 100%; height: 155px; overflow: hidden; }
  .mob-cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mob-cs-body { padding: 14px 16px 16px; }
  .mob-cs-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
  .mob-tag { font-size: 10px; font-weight: 600; background: #f0ede8; color: #666; border-radius: 999px; padding: 3px 9px; }
  .mob-tag-meta { font-size: 10.5px; font-weight: 400; color: #bbb; }
  .mob-cs-title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; letter-spacing: -0.01em; }
  .mob-cs-desc { font-size: 12.5px; color: #777; line-height: 1.5; }

  .mob-about-content p { font-size: 13.5px; color: #555; line-height: 1.7; margin: 0 0 12px; }
  .mob-about-content p strong { color: #1a1a1a; }
  .mob-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .mob-fact { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
  .mob-fact img { width: 100%; height: 76px; object-fit: cover; display: block; }
  .mob-fact-title { font-size: 12px; font-weight: 600; color: #1a1a1a; padding: 8px 10px 2px; }
  .mob-fact-sub { font-size: 11px; color: #999; padding: 0 10px 10px; line-height: 1.4; }

  .mob-exp-list { display: flex; flex-direction: column; }
  .mob-exp-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .mob-exp-row:last-child { border-bottom: none; }
  .mob-exp-icon { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex-shrink: 0; background: #f0ede8; padding: 2px; }
  .mob-exp-company { font-size: 12.5px; font-weight: 500; color: #1a1a1a; line-height: 1.4; margin-bottom: 2px; }
  .mob-exp-date { font-size: 11.5px; color: #999; }
  .mob-edu-divider { height: 1px; background: rgba(0,0,0,0.08); margin: 6px 0; }

  .mob-mktg-widget {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border-radius: 18px; padding: 16px 16px 0;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    margin-bottom: 10px; overflow: hidden;
  }
  .mob-mktg-widget:active { opacity: 0.9; }
  .mob-mktg-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
  .mob-mktg-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; }
  .mob-mktg-desc { font-size: 12px; color: #999; line-height: 1.4; }
  .mob-mktg-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
  .mob-mktg-strip { display: grid; grid-template-columns: repeat(5, 1fr); height: 52px; margin: 0 -16px; }
  .mob-mktg-swatch { height: 100%; }

  .mob-other-list { display: flex; flex-direction: column; gap: 10px; }
  .mob-other-item {
    display: flex; align-items: center; gap: 12px; background: #fff;
    border-radius: 14px; padding: 12px 14px; text-decoration: none;
    color: inherit; border: 1px solid rgba(0,0,0,0.06);
  }
  .mob-other-item:active { opacity: 0.8; }
  .mob-other-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f0ede8; }
  .mob-other-body { flex: 1; min-width: 0; }
  .mob-other-title { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; }
  .mob-other-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 3px; }
  .mob-other-desc { font-size: 11.5px; color: #999; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-other-arrow { font-size: 16px; color: #ccc; flex-shrink: 0; }

  .mob-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .mob-gallery-item {
    position: relative; border-radius: 10px; overflow: hidden;
    aspect-ratio: 1; background: #e0ddd8;
  }
  .mob-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mob-gallery-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 18px 6px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    font-size: 9px; font-weight: 500; color: #fff;
    letter-spacing: 0.02em; line-height: 1.3;
    opacity: 0; transition: opacity 0.15s;
  }
  .mob-gallery-item:active .mob-gallery-label { opacity: 1; }

  /* ── Page-link cards (About / Experience) ── */
  .mob-page-links { display: flex; flex-direction: column; gap: 10px; }
  .mob-page-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border-radius: 16px; padding: 14px 16px;
    text-decoration: none; color: inherit;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  }
  .mob-page-card:active { opacity: 0.85; }
  .mob-page-card-img {
    width: 44px; height: 44px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
  }
  .mob-page-card-info { flex: 1; min-width: 0; }
  .mob-page-card-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
  .mob-page-card-sub { font-size: 12px; color: #999; }
  .mob-page-card-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }

  .mob-footer {
    padding: 24px 24px 48px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
  }
  .mob-footer-copy { font-size: 11px; color: #bbb; letter-spacing: 0.04em; }
}


/* ══════════════════════════════════════════════════════════
   SCROLL-TRIGGERED REVEAL — IntersectionObserver adds .is-visible
   ══════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion — show everything immediately, no movement */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════
   BOOT LOADER — additive load screen over the desktop, plays
   once per session then auto-resolves (a beat, not a gate).
   Sits below the custom cursor (z 999999) so it stays visible.
   ══════════════════════════════════════════════════════════ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 500000;
  background: #f2f2f0; /* matches .desktop-bg */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Grow toward where the ring profile sits so the resolve "settles" into
     place rather than just fading in the middle. */
  transform-origin: 50% 60%;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Centered stack: munching avatar over the "booting up…" tagline. */
.boot-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: 0 24px;
}

/* Match the hero avatar's box (200px) so the handoff has no size jump.
   Transparent line art shown whole — no disc, crop, or shadow. */
.boot-avatar {
  width: 200px;
  height: 200px;
}
.boot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* "booting up" + animated ellipsis. Manrope Regular, small, secondary.
   The hidden sizer reserves the width of the longest string ("booting up...")
   and the live text overlays it in the same grid cell, so adding dots never
   shifts the line. */
.boot-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #888;
  display: inline-grid;
  justify-items: start;
}
.boot-tagline > span { grid-area: 1 / 1; }
.boot-tagline-sizer { visibility: hidden; pointer-events: none; }

/* Dismiss: fade out + scale up slightly, then JS removes it */
#intro-overlay.intro-dismissed {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* Desktop: pin the boot avatar's centre to the shared --avatar-cy so it lands
   on the exact spot the hero avatar occupies — the loader resolves straight
   into the page with no jump. (--avatar-cy is defined to reproduce this stack's
   original centred position, so the boot itself looks unchanged.) The tagline
   still flows below the avatar as before. Mobile keeps the plain flex-centred
   stack below — there's no ring hero there to align with. */
@media (min-width: 769px) {
  .boot-stage {
    position: absolute;
    top: var(--avatar-cy);
    left: 50%;
    transform: translateX(-50%);
  }
  .boot-avatar { margin-top: -100px; }   /* raise the 200px avatar so its centre = --avatar-cy */
}

/* Responsive — smaller avatar + neutral settle origin */
@media (max-width: 768px) {
  #intro-overlay { transform-origin: 50% 50%; }
  .boot-avatar { width: 132px; height: 132px; }
  .boot-tagline { font-size: 14px; }
  .boot-stage { gap: 18px; }
}

/* ══════════════════════════════════════════════════════════
   SCROLLING PAGE LAYOUT
   Converts the old fixed, no-scroll "desktop" into a normal
   vertically-scrolling page: sticky nav → hero → 3 sections.
   These rules are appended last so they override the earlier
   fixed-viewport positioning.
   ══════════════════════════════════════════════════════════ */
:root {
  --nav-h: 60px;
  /* ── Single source of truth for the mascot avatar's vertical position ──
     The boot loader and the hero both anchor the avatar's centre here, so the
     two can never drift apart on hand-off. It's the viewport centre raised by
     half of the (gap + tagline) that sits below the avatar in the boot stack —
     i.e. the boot loader's own resting position, which is the one we keep. */
  --avatar-cy: calc(50vh - 21.25px);
  /* Fixed geometry between the avatar and the art ring, so the arc stays
     locked to the avatar wherever --avatar-cy puts it. */
  --ring-avatar-half: 100px;   /* half of the 200px focal avatar */
  --ring-arc-drop:    89.5px;  /* the arc's origin sits this far below the avatar's centre */

  /* ── ONE shared page container ────────────────────────────────────────
     Every content section (Case Studies, Archive, …) is centred at this
     max-width with this fluid gutter — a single source of truth so their
     left/right edges line up and the whole page reads as one column. The cap
     keeps line lengths sane on a 34" monitor; below it the container is fluid
     (100% − gutters), so there are no fixed width jumps between breakpoints.
     1440 uses ~55% of a 2560 screen (was 900px ≈ a third) and leaves real
     margins on ultra-wide where the decorative doodles now live. */
  --page-max:    1120px;
  --page-gutter: clamp(40px, 5vw, 88px);
}

/* Enable page scroll (was overflow:hidden on html/body) */
html { scroll-behavior: smooth; }
html, body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Canvas is now normal document flow, not a fixed viewport layer */
#desktop-canvas {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* Background sits behind everything and stays put while scrolling */
.desktop-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* The top nav (.site-nav / .nav-*) now lives entirely in nav.js — the
   single shared implementation injected on every page. --nav-h stays here
   because the hero height calc below depends on it. */

/* ── Hero — first viewport ─────────────────────────────── */
.hero-section {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  overflow: hidden;              /* clip orbiting ring cards to the hero */
  /* The hero box starts one nav-height down the document (the sticky nav sits
     in flow above it), so #home would otherwise scroll to y=var(--nav-h) and
     tuck the hero under the bar. Offsetting the anchor by the same amount lands
     the Home link at the very top of the page (y=0), nav floating transparent. */
  scroll-margin-top: var(--nav-h);
}

/* Art ring re-anchored to the hero (was anchored to viewport) */
.ring-section {
  position: absolute;
  inset: 0;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.ring-drag-zone { top: 0; }              /* whole hero is the spin surface */

/* Focal cluster + orbit are pinned to the shared --avatar-cy (offset by the
   sticky nav, since these `top`s are measured from the hero box which starts
   below it) rather than centered in the hero. This lands the hero avatar on the
   exact viewport point the boot loader leaves it — no jump on hand-off — and
   keeps the arc locked to the avatar because both derive from --avatar-cy. */
.ring-center {                           /* column top = avatar top */
  top: calc(var(--avatar-cy) - var(--nav-h) - var(--ring-avatar-half));
  left: 50%;
  transform: translateX(-50%);           /* horizontal only; top already positions it */
}
.ring-stage {                            /* orbit origin, --ring-arc-drop below the avatar */
  top: calc(var(--avatar-cy) - var(--nav-h) + var(--ring-arc-drop));
  left: 50%;
}

/* Larger focal photo + name — the anchor of the whole site */
.ring-photo { width: 200px; height: 200px; }
.ring-name { font-size: 46px; }
.ring-tagline { font-size: 17px; max-width: 360px; }

/* Center icon — hand-drawn mascot (transparent PNGs), shown whole with no
   disc, shadow, or crop so it floats on the page. Flips through expressions on
   its own (see script.js). */
.ring-photo.ring-icon {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  position: relative; /* anchor the hover speech bubble */
}
.ring-photo.ring-icon img { object-fit: contain; }

/* ── Hover speech bubble ──────────────────────────────────────
   Sits above the avatar, absolutely positioned so it never shifts the arc or
   the headline below. The outline is a single hand-drawn SVG stroke (bubble +
   tail as one continuous imperfect line — same pen as the avatar), NOT a CSS
   border + rotated-square tail. Fixed width (204px): the drawn outline can't
   reflow to the text, so the copy is constrained to one line (nowrap) and the
   box is sized for the longest phrase. Grows out of the tail on hover; animates
   back out on leave. Purely decorative — never appears on touch. */
/* The motion (opacity/transform/transition + is-visible + reduced-motion)
   now lives on the shared .hand-bubble base in nav.js; this only sets what's
   unique to the avatar bubble: its size, its place above the avatar, and the
   --hb-* knobs that steer the shared motion (centered, grows up out of the
   tail). Keep the class="avatar-bubble hand-bubble" pairing in the markup. */
.avatar-bubble {
  bottom: calc(100% + 16px);   /* body clears the avatar; the tail fills the gap */
  left: 50%;
  z-index: 60;                 /* above the orbiting arc photos */
  width: 204px;                /* fixed — sized for the longest line (~158px) + padding */
  height: 52px;                /* bubble body; the SVG tail extends below it */
  padding: 0 18px;             /* keeps text off the drawn edge */
  --hb-x: -50%;                /* centered on the avatar */
  --hb-y: 6px;                 /* slides up into place */
  --hb-origin: bottom center;  /* scale up out of the tail */
}
/* Hand-drawn outline (bubble + tail, one continuous stroke). Sits behind the
   text; the tail dips below the body toward the avatar. White fill separates it
   from the arc photos; ink stroke at 1.5 matches the avatar's contour weight. */
.avatar-bubble-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;                /* 204×66 viewBox → tail extends ~14px below body */
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.avatar-bubble-text {
  position: relative;
  z-index: 1;                  /* above the drawn outline */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: #1a1a1a;
  text-align: center;
  white-space: nowrap;         /* fixed-width outline → copy stays on one line */
}
/* Reduced-motion (fade only) is handled by the shared .hand-bubble base. */

/* Hero accents — CD player + sticker (easy to delete as a block) */
.hero-accents { pointer-events: none; }
.hero-accents > * { pointer-events: all; }
.bl-zone {
  position: absolute;
  left: 0; bottom: 24px;
  top: auto; right: auto;
  width: 300px;
  z-index: 8;
}
.hero-sticker-peeker {
  position: absolute;
  right: 28px; bottom: 28px;
  width: 66px; height: 66px;
  z-index: 8;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-sticker-peeker:hover { transform: rotate(-8deg) scale(1.1); }
.hero-sticker-peeker img { width: 100%; height: 100%; object-fit: contain; }

/* ── Stacked page sections ─────────────────────────────── */
.page-section {
  position: relative;                 /* re-anchor any absolute child here */
  scroll-margin-top: var(--nav-h);    /* anchor lands below the sticky nav */
  min-height: 100vh;                  /* each section reads as its own screen */
  display: flex;
  flex-direction: column;
  justify-content: center;            /* vertically center the section's content */
  padding: 9vh 0;                     /* generous breathing room top/bottom */
}
.section-inner {
  width: 100%;                        /* keep definite width so the flex-centered
                                         parent can't collapse it to content width
                                         (the case-study grid is absolutely laid out) */
  max-width: var(--page-max);         /* the shared container — same cap everywhere */
  margin: 0 auto;                     /* centred in the viewport */
  padding-inline: var(--page-gutter); /* fluid gutter (was a fixed 32px) */
  position: relative;                 /* anchor margin doodles to THIS column, not
                                         the viewport, so they can't drift to the
                                         screen edges as the window widens */
}
.section-inner-wide { max-width: var(--page-max); }

/* Margin doodles only make sense once the content column no longer fills the
   viewport — i.e. once real side margins exist (viewport wider than the
   container plus a gutter each side, ≈1440 + 2×72). Below that the container
   fills the screen, so a doodle offset out into the "margin" would just clip to
   a sliver at the edge; hide it instead. (doodles.js already hides ALL doodles
   ≤1080px; this is the extra floor the widened container needs on index.) */
@media (max-width: 1240px) {
  .section-inner > .doodle { display: none; }
}

/* Other Projects is a short chip list — forcing it to min-height:100vh with
   justify-content:center floats its content to the middle of the viewport,
   opening a viewport-tall gap above the heading (grows with screen height).
   Let this last section fit its content so the spacing above it collapses to
   the normal 9vh + 9vh padding rhythm the taller sections already read at. */
#other {
  min-height: 0;
  justify-content: flex-start;
}

/* Archive is the last section before the shared footer. With the drawer closed
   its content (heading + one row of piles) is short, so min-height:100vh +
   justify-content:center floated it to the middle of the viewport and stranded
   a viewport-tall gap below the row before the footer. Let it fit its content
   like #other — the section rhythm collapses back to the 8–9vh padding + the
   footer's own top padding (~15–25vh total). It still grows freely when the
   drawer opens. */
#marketing {
  min-height: 0;
  justify-content: flex-start;
}
.section-heading {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

/* Case-studies strip — de-absolute; lives in the section flow now */
.cs-zone {
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  z-index: auto;
}

/* Scale the case-study cards up so the section reads as its own screen.
   Scoped to .cs-zone so other pages' .cs-card usage is untouched. The JS
   layout (layoutCSCards) uses a matching CARD_W of 300 + GAP 36. */
/* 2×2 grid so each card stretches wider (was a single absolute-positioned row). */
.cs-zone .cs-inline-grid {
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cs-zone .cs-card {
  position: relative;   /* was absolute (JS row layout) */
  width: auto;          /* fill the grid cell → stretched horizontally */
  left: auto; top: auto;
  padding: 16px;        /* clearance from the hand-drawn outline at this larger size */
  /* Win over [data-reveal]'s transition so the white fill animates on hover
     out too; keep the reveal's opacity/transform timing intact. */
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-zone .csc-top { padding: 2px 4px 16px; }
.cs-zone .csc-title { font-size: 26px; margin-bottom: 10px; }
.cs-zone .csc-desc { font-size: 13px; }
.cs-zone .csc-img-panel { height: 210px; }

/* Marketing card — standalone (was scoped inside .br-zone) */
#marketing .side-work-mktg { max-width: 440px; }

/* Other-projects list — cap width so it reads as a tidy column */
#other .side-works-list { max-width: 560px; }

/* ── Other-projects — compact cards (icon · title · subtitle · arrow) ──
   A lighter tier than the Marketing & Brand cards: no fill, no shadow,
   the cards sit on the flat grey page bg and only the icon carries a frame.
   Single row, content-sized (uneven) widths — must not creep up in size. */
#other .work-chips {
  flex-wrap: nowrap;      /* keep all four on one row */
  gap: 14px;
  align-items: stretch;
}
#other .work-chip {
  /* strip the pill treatment */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  white-space: normal;
  align-items: center;
  gap: 10px;
  padding: 0;             /* height ends at the text block — no trailing space */
  min-width: 0;           /* allow the body to shrink so subtitle can truncate */
  flex: 0 1 auto;         /* content-sized, may shrink; never forced equal */
}
#other .work-chip:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
#other .work-chip-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border, #E4E4E4);
  border-radius: 8px;
  overflow: hidden;       /* clip the image to the rounded frame */
  background: #f0ede8;
  transition: border-color 0.2s ease;
}
#other .work-chip:hover .work-chip-icon {
  border-color: #1A1A1A;
}
#other .work-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;           /* enables ellipsis on children */
  gap: 3px;
}
#other .work-chip-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #1a1a1a;
  white-space: nowrap;
}
#other .work-chip-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;      /* room for descenders — was clipping (g/y/p) */
  color: #999;
  white-space: nowrap;    /* one line — truncate rather than wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
#other .work-chip-arrow { align-self: center; }

/* ── Corner controls — fixed matching pair (music + sticker) ─────────
   Both little buttons live together in the bottom-right corner and stay put
   while the page scrolls. z-index above content, below the nav (2000). */
.corner-controls {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 200;
}
/* Keep the peekers in normal flex flow inside the fixed cluster (guards
   against any stray absolute positioning); size/style come from the shared
   #sticker-peeker, #music-peeker rule above. */
.corner-peeker {
  position: static;
  right: auto; bottom: auto; top: auto; left: auto;
  z-index: auto;
}

/* ── Music player popup — hidden until launched from #music-peeker ───────
   Anchored just above the corner controls (bottom-right). Fades + scales in
   over ~0.2s. Sits above page content but below the sticky nav (2000). */
#cdplayer {
  position: fixed;
  right: 24px;
  bottom: 76px;                 /* sits just above the 36px corner buttons */
  left: auto; top: auto;
  width: 300px;
  max-width: calc(100vw - 48px);
  z-index: 190;
  box-shadow: 0 10px 34px rgba(0,0,0,0.16);
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  pointer-events: none;         /* not interactive while hidden */
  transition: opacity 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cdplayer.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
/* Close ✕ — top-right of the popup */
.cdp-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #888;
  background: rgba(0,0,0,0.05);
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}
.cdp-close:hover { background: rgba(0,0,0,0.1); color: #1a1a1a; }

/* (Old bento sizing/override rules removed — .pcard grid is defined once,
   next to .mktg-bento above.) */