/* ============================================================
   GLOBAL RESET & BASE STYLES
   Applies to all pages in the portfolio
============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Yantramanav', sans-serif;
  background-color: #FAFAFC;
  color: #000000;
  min-height: 100vh;

  /* UPDATED: Reserves scrollbar space on all pages so nothing jumps */
  scrollbar-gutter: stable;
}

/* ============================================================
   HIDE SCROLLBAR (PREVENT LAYOUT SHIFTS)
   Page remains fully scrollable, but scrollbar is invisible
============================================================ */

/* Chrome, Edge, Safari, and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Firefox and Internet Explorer/Edge Legacy */
html,
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* ============================================================
   PAGE WRAPPER
   Full viewport height, used as positioning context
   for the hero, footer, and bottom nav
============================================================ */

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #FAFAFC;
}


/* ============================================================
   HERO SECTION
   Vertically and horizontally centered content block
   Offset upward slightly to breathe above the bottom nav
============================================================ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 35px));

  width: 400px;
  text-align: center;
  padding: 0 24px;
}


/* ============================================================
   HERO: LOGO
============================================================ */

.hero__logo {
  width: 36px;
  height: 49px;
  object-fit: contain;
  display: block;
}


/* ============================================================
   HERO: IDENTITY BLOCK
============================================================ */

.hero__identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;
}

.hero__name {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
}

.hero__title {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}


/* ============================================================
   HERO: BIO / TAGLINE
============================================================ */

.hero__bio {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  max-width: 369px;
  width: 100%;
}

.hero__bio-headword {
  font-weight: 400;
}


/* ============================================================
   FOOTER
   Fixed bottom-right on all pages and all screen sizes
============================================================ */

.footer {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 20;
}

.footer__copyright {
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  text-align: right;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}


/* ============================================================
   BOTTOM NAVIGATION BAR
   Dark pill-shaped floating nav, centered at the bottom
   Static — no entrance animation
============================================================ */

.bottom-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;

  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);

  background-color: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(10px) saturate(280%);
  -webkit-backdrop-filter: blur(10px) saturate(280%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 36px;

  max-width: calc(100vw - 48px);

  /* Sits above the fade gradient */
  z-index: 20;
}

.bottom-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Soft directional light sheen, top-left to bottom-right.
     Muted compared to a "Clear" glass look, since a strong
     bloom is exactly what hurts icon contrast, Apple's own
     "Tinted" Liquid Glass mode mutes this same highlight. */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    rgba(255, 255, 255, 0) 65%
  );

  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   BOTTOM FADE GRADIENT
   A full-width fade from transparent to the background
   colour, sticky to the bottom of the viewport.
   Sits behind the nav pill but above page content.
   Only shown on scrollable pages via .page--scrollable
============================================================ */

.bottom-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  /* Tall enough to bridge from nav pill top to page content */
  height: 150px;

  /* Fade from background colour at bottom to transparent at top */
  background: linear-gradient(
    to top,
    #FAFAFC 0%,
    #FAFAFC 30%,
    transparent 100%
  );

  /* Behind nav pill, above page content */
  z-index: 15;

  /* No pointer events — clicks pass through to content below */
  pointer-events: none;
}


/* ============================================================
   NAV ITEMS
============================================================ */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-decoration: none;
  color: #FFFFFF;

  /* UPDATED: Increased from 0.5 to 0.75 for lighter/brighter icons */
  opacity: 0.75; 

  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

/* --------------------------------------------------------
   HOVER/CLICK HIT-AREA EXPANSION
   The visible icon stays 24x24px so the pill's tight visual
   spacing is untouched, but an invisible pseudo-element
   extends the actual hoverable/clickable box out to ~44x44px
   — the accessibility-recommended minimum touch target
   (Apple HIG / Material Design both use 44-48px). Absolute
   positioning takes it out of flow, so it overlaps neighbouring
   icons' padding without shifting layout or affecting gap.
-------------------------------------------------------- */
.nav-item::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

.nav-item .material-icons {
  font-size: 20px;
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item--active {
  opacity: 1;
}

/* Forest icon: two custom SVGs (outline + filled) swapped via display,
   rather than the ligature-swap used for About/Work or a variable-font
   FILL axis. Sized to fill the nav-item's 24x24 box directly — the
   artwork's own internal padding already reads as a ~20px glyph,
   matching the visual weight of the other 20px icons. */
.forest-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
}

.forest-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.forest-icon--outline {
  display: flex;
}

.nav-item--active .forest-icon--outline {
  display: none;
}

.nav-item--active .forest-icon--filled {
  display: flex;
}

/* ============================================================
   NAV GLOW + GLEAM
   A soft blue glow sits behind the active icon, and a thin
   gradient line traces the pill's bottom edge beneath it.
============================================================ */

.bottom-nav {
  --nav-glow-color: 200, 209, 222;   /* soft blue */
}

/* Clips the glow + gleam to the pill's rounded shape, without
   clipping the Work icon's hover preview (a separate element
   elsewhere in the nav, which needs to render outside the pill) */
.nav-glow-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nav-glow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--nav-glow-color), 0.65) 0%,
    rgba(var(--nav-glow-color), 0.2) 40%,
    rgba(var(--nav-glow-color), 0) 72%
  );
  filter: blur(6px);
  transform: translate(0, -50%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
}

.nav-gleam {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(var(--nav-glow-color), 0),
    rgba(var(--nav-glow-color), 0.9),
    rgba(var(--nav-glow-color), 0.9),
    rgba(var(--nav-glow-color), 0)
  );
  transform: translate(0, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
}

/* ============================================================
   BOTTOM NAV PILL — CLICK ZOOM
   Subtle scale bump, plays once on tap
============================================================ */

@keyframes navPillZoom {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.03); }
  100% { transform: translateX(-50%) scale(1); }
}

.bottom-nav.nav-zoom {
  animation: navPillZoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ============================================================
   SLIDE-IN ANIMATION
   Reusable class applied to any element that should
   animate in from below. JS adds .is-visible to trigger it.
============================================================ */

/* Default state — hidden, shifted down 20px */
.animate {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Triggered state — fully visible, in position */
.animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — applied to child elements in order */
.animate-delay-1 { transition-delay: 0.05s; }
.animate-delay-2 { transition-delay: 0.10s; }
.animate-delay-3 { transition-delay: 0.15s; }
.animate-delay-4 { transition-delay: 0.20s; }
.animate-delay-5 { transition-delay: 0.25s; }
.animate-delay-6 { transition-delay: 0.30s; }
.animate-delay-7 { transition-delay: 0.35s; }
.animate-delay-8 { transition-delay: 0.40s; }


/* ============================================================
   KEYFRAME: SLIDE UP
   Used for the bottom nav on page load
============================================================ */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


/* ============================================================
   ABOUT PAGE STYLES
============================================================ */

.about-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;

  width: 500px;
  margin: 0 auto;

  padding-top: 300px;
  padding-bottom: 120px;
}

.about__headshot {
  width: 48px;
  height: 48px;
  border-radius: 400px;
  object-fit: cover;
  background-color: #CCCCCC;

  filter:
    drop-shadow(6px 15px 6px rgba(0, 0, 0, 0.02))
    drop-shadow(3px 8px 5px rgba(0, 0, 0, 0.07))
    drop-shadow(1px 4px 4px rgba(0, 0, 0, 0.12))
    drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.14));
}

.about__bio {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.about__link {
  color: #383B3E;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.about__link:hover {
  opacity: 0.6;
}

.about-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.about-section__label {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.about-section__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.experience-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.experience-item__company {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.experience-item__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.experience-item__role {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.experience-item__date {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  white-space: nowrap;
  text-align: right;
}

.goal-item {
  width: 100%;
}

.goal-item__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.goal-item__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.goal-item__status {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  white-space: nowrap;
  text-align: right;
}


/* ============================================================
   RESPONSIVE: TABLET — 768px
============================================================ */

@media (max-width: 768px) {

  .hero {
    width: 100%;
    max-width: 400px;
    padding: 0 32px;
    transform: translate(-50%, calc(-50% - 52px));
  }

  .about-container {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 300px;
  }

  /* Hide copyright on small screens to avoid nav overlap */
  .footer {
    display: none;
  }

}


/* ============================================================
   RESPONSIVE: MOBILE — 480px
============================================================ */

@media (max-width: 480px) {

  .hero {
    width: 100%;
    padding: 0 24px;
    transform: translate(-50%, calc(-50% - 48px));
    gap: 32px;
  }

  .about-container {
    padding-left: 32px;
    padding-right: 24px;
    padding-top: 48px;
    gap: 32px;
  }

}


/* ============================================================
   RESPONSIVE: SMALL MOBILE — 375px
============================================================ */

@media (max-width: 375px) {

  .hero {
    padding: 0 20px;
    transform: translate(-50%, calc(-50% - 44px));
    gap: 28px;
  }

  .about-container {
    padding-left: 32px;
    padding-right: 20px;
    gap: 28px;
  }

  .experience-item__role,
  .goal-item__text {
    max-width: 60%;
  }

}


/* ============================================================
   RESPONSIVE: MINIMUM WIDTH — 320px
============================================================ */

@media (max-width: 320px) {

  .hero {
    padding: 0 16px;
    transform: translate(-50%, calc(-50% - 40px));
    gap: 24px;
  }

  .about-container {
    padding-left: 32px;
    padding-right: 16px;
    gap: 24px;
  }

  .experience-item__company {
    font-size: 15px;
  }

  .bottom-nav {
    gap: 24px;
    padding: 10px 20px;
  }

}

/* ============================================================
   WORK PAGE STYLES
============================================================ */


/* ============================================================
   WORK: PAGE CONTAINER
   Scrollable column of project cards, centered
============================================================ */

.work-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;

  width: 550px;
  margin: 0 auto;

  padding-top: 300px;
  padding-bottom: 140px;
}


/* ============================================================
   WORK: PROJECT CARD
   Shared styles for all project cards
============================================================ */

.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;

  /* Reset link styles */
  text-decoration: none;
  color: inherit;

  /* Establish stacking context */
  position: relative;
  z-index: 1;

  /* Slower, luxurious transition (0.55s instead of 0.35s) */
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle 3% scale on hover — gentle and controlled */
a.work-card:hover {
  transform: scale(1.03);
  z-index: 10;
}

/* Prevent zoom effect on unclickable 'Coming Soon' cards */
.work-card--coming-soon:hover {
  transform: scale(1);
  z-index: 1;
}


/* ============================================================
   WORK: THUMBNAIL CONTAINER
   Rounded card with light border, centers the image
============================================================ */

.work-card__thumbnail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;

  width: 100%;
  height: 350px;

  background: #FCFCFC;
  border: 2px solid #F5F5F7;
  border-radius: 24px;

  overflow: hidden;
}

/* Project image inside thumbnail */
.work-card__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
}


/* ============================================================
   WORK: COMING SOON OVERLAY
   Dimmed card with a centered "Coming Soon" badge
============================================================ */

/* Dim the entire coming soon card */
.work-card--coming-soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Dark overlay on top of the thumbnail */
.work-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 252, 0.7);
  border-radius: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Badge text */
.work-card__overlay-text {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;

  /* Pill badge */
  background: #FFFFFF;
  border: 1px solid #F5F5F7;
  border-radius: 100px;
  padding: 6px 14px;

  /* Subtle shadow so it lifts off the overlay */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   WORK: CARD INFO
   Title and meta row below the thumbnail
============================================================ */

.work-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.work-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Project title */
.work-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

/* Meta row — description left, company tag right */
.work-card__meta {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* Short description */
.work-card__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  flex: 1;
}

/* Company tag — uppercase, right-aligned */
.work-card__company {
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  white-space: nowrap;
}


/* ============================================================
   WORK: RESPONSIVE — TABLET 768px
============================================================ */

@media (max-width: 768px) {

  .work-container {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 300px;
    gap: 48px;
  }

  .work-card__image {
    width: 100%;
    height: auto;
    max-height: 238px;
  }

}


/* ============================================================
   WORK: RESPONSIVE — MOBILE 480px
============================================================ */

@media (max-width: 480px) {

  .work-container {
    padding-left: 32px;
    padding-right: 24px;
    padding-top: 48px;
    gap: 40px;
  }

  .work-card__thumbnail {
    height: 240px;
  }

  .work-card__image {
    height: 180px;
  }

}


/* ============================================================
   WORK: RESPONSIVE — SMALL MOBILE 375px
============================================================ */

@media (max-width: 375px) {

  .work-container {
    padding-left: 32px;
    padding-right: 20px;
    gap: 36px;
  }

  .work-card__thumbnail {
    height: 220px;
  }

}


/* ============================================================
   WORK: RESPONSIVE — MINIMUM WIDTH 320px
============================================================ */

@media (max-width: 320px) {

  .work-container {
    padding-left: 32px;
    padding-right: 16px;
    gap: 32px;
  }

  .work-card__thumbnail {
    height: 200px;
    border-radius: 16px;
  }

  .work-card__title {
    font-size: 15px;
  }

}


/* ============================================================
   LIFE LATELY SECTION (FIGMA IMPORT)
============================================================ */

.life-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.life-grid__image {
  width: 100%;
  /* Preserves the exact aspect ratio from your Figma design */
  aspect-ratio: 242 / 325;
  object-fit: cover;
  border: 2px solid #EDEDED;
  border-radius: 8px;
  background-color: #F9F9F9;
}

/* Mobile responsive: stack into one column */
@media (max-width: 480px) {
  .life-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BOTTOM NAV PILL — TAP SCALE
   Slight enlarge when a nav item is clicked
============================================================ */

@keyframes navPillPress {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.03); }
  100% { transform: translateX(-50%) scale(1); }
}

.bottom-nav.nav-press {
  animation: navPillPress 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   WORK NAV ICON — HOVER PREVIEW (DESKTOP ONLY)
   Shows quick links to all three case studies when hovering the
   Work icon in the bottom nav. Gated to devices that actually
   support hover, so touch devices never see it.

   Rendered as a sibling of .bottom-nav, not a descendant. The
   pill itself has backdrop-filter, and nesting another
   backdrop-filter element inside it causes the inner blur to
   silently fail in Chrome and Safari. Position is set via JS
   (see animate.js) since it's no longer a DOM descendant of the
   icon it belongs to.
============================================================ */

.nav-item-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   UNIFIED NAV PREVIEW (About + Work share one popover shell)
   A single floating "pill" that slides between the About and
   Work icons and morphs its size to fit whichever content is
   active, instead of two independent popovers fading in/out.
   That's what made the old hand-off between them feel like a
   flicker rather than one continuous motion.
============================================================ */

.nav-preview {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);

  pointer-events: none;
  z-index: 50;

  /* Glides to the new icon's position when hopping between
     About and Work while already visible */
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-preview.is-visible {
  pointer-events: auto;
}

/* Handles the pop-in animation on first appearance. Kept
   separate from the glass card below it — animating transform
   and backdrop-filter on the same element causes the blur to
   fail to render in Chrome and Safari, so this wrapper owns the
   transform and the glass card stays static. This bounce only
   plays going from fully-hidden to visible; sliding between the
   two icons while already open skips it entirely. */
.nav-preview__anim {
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  transform-origin: bottom center;
  /* Opacity is intentionally NOT transitioned. Backdrop-filter blur
     strength scales with this element's own opacity, so fading
     opacity also fades the blur — which is what let background text
     stay readable for the first chunk of the animation. Opacity now
     snaps instantly to full so the blur is at full strength the
     moment the popover appears; only the pop-in motion animates. */
  transition: transform 0.4s cubic-bezier(0.34, 2, 0.64, 1);
}

.nav-preview.is-visible .nav-preview__anim {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The glass shell itself. Width/height are set inline by JS to
   match whichever content is active, and transition smoothly so
   the pill visibly resizes as it slides between icons. */
.nav-preview__card {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 65%),
    rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(10px) saturate(280%);
  -webkit-backdrop-filter: blur(10px) saturate(280%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;

  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  /* Keeps this element promoted to its own compositing layer at
     all times, even while hidden. Without this, the browser only
     builds the blur layer the moment the popover becomes visible,
     which lags a frame or two behind the opacity fade-in — long
     enough to see unblurred page content through the glass before
     the blur catches up. */
  will-change: backdrop-filter, width, height;
}

/* Both content panels sit stacked on top of each other inside
   the card and simply crossfade — the card itself (sized by JS)
   is what does the sliding/resizing motion. */
.nav-preview__content {
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.nav-preview__content.is-active {
  opacity: 1;
  pointer-events: auto;
}

.work-preview__list {
  display: flex;
  flex-direction: column;
  width: 268px;
  padding: 8px;
}

.work-preview__label {
  display: block;
  padding: 12px 16px;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #B6B6B6;
}

.work-preview__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;

  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.work-preview__item:hover,
.work-preview__item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.work-preview__item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.work-preview__icon {
  font-size: 20px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.work-preview__title {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #FFFFFF;
  white-space: nowrap;
}

.work-preview__year {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #B6B6B6;
  white-space: nowrap;
  flex-shrink: 0;
}

/* No hover on touch devices, so there's nothing to trigger this with */
@media not all and (hover: hover) and (pointer: fine) {
  .nav-preview {
    display: none;
  }
}


/* ============================================================
   ABOUT NAV ICON — HOVER PREVIEW (DESKTOP ONLY)
   Shows a small profile card when hovering the About icon in
   the bottom nav. The whole card is one link to the About page.

   Rendered as a sibling of .bottom-nav, not a descendant, for
   the same reason as the Work popover above: nesting one
   backdrop-filter element inside another breaks the blur.
============================================================ */

.about-preview__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 270px;
  padding: 24px;
  gap: 16px;

  text-decoration: none;
  cursor: pointer;

  transition: background-color 0.15s ease;
}

.about-preview__card:hover,
.about-preview__card:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.about-preview__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.about-preview__label {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #B6B6B6;
}

.about-preview__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 16px;

  background: #DAFFF2;
  border-radius: 36px;
  white-space: nowrap;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #1F8561;
}

.about-preview__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.about-preview__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.about-preview__name {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #FFFFFF;
}

.about-preview__email {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #B6B6B6;
}

.about-preview__meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #FFFFFF;
  white-space: nowrap;
}

.about-preview__meta-icon {
  font-size: 16px;
  color: #FFFFFF;
  flex-shrink: 0;
}


/* ============================================================
   CASE STUDY PAGE
============================================================ */

.case-study__back {
  position: fixed;
  top: 48px;
  left: 280px;
  z-index: 30;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* While the left side Forest panel is open, drop this below its
   stacking level (backdrop: 28, panel: 29) so it's tucked behind
   both instead of floating on top of the glass panel. */
body.side-panel-open .case-study__back {
  z-index: 10;
}

.case-study__back:hover {
  color: #383B3E;
  font-weight: 500;
}

.case-study {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 96px;

  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  padding: 300px 24px 140px;
}

.case-study__quote {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

/* Hero */
.case-study-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-study-hero__meta {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-hero__meta-accent {
  display: inline-block;
  margin-top: 4px;
  color: #8B1D41;
}

.case-study-hero__thumbnail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  width: 100%;
  height: 400px;
  background: #FCFCFC;
  border: 2px solid #EDEDED;
  border-radius: 24px;
  overflow: hidden;
}

.case-study-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Sections */
.case-study-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-study-section--outcome,
.case-study-section--decisions,
.case-study-section--ai {
  position: relative;
}

.case-study-section--outcome {
  padding-bottom: 128px;
}

.case-study-section__lead {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
  width: 100%;
}

.case-study-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
}

.case-study-section__label {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-section__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
  width: 100%;
}

.case-study-section__title--upper {
  text-transform: uppercase;
}

.case-study-section__divider {
  width: 100%;
  border: none;
  border-top: 1px solid #383B3E;
  margin: 0;
}

.case-study-section__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.case-study-section__body--medium {
  font-weight: 500;
}

.case-study-section__body strong {
  font-weight: 500;
  color: #383B3E;
}

.case-study-outcome-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.case-study-outcome-badge {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  height: 26px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #383B3E;
  white-space: nowrap;
}

.case-study-outcome-badge--current {
  background: #F2F2F2;
  border: 1px solid #383B3E;
}

.case-study-outcome-badge--future {
  background: #EEF4FA;
  border: 1px solid #5C99D6;
}

.case-study-outcome-row .case-study-section__body {
  width: auto;
  flex: 1;
}

/* Metadata grid */
.case-study-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  width: 100%;
}

.case-study-meta__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.case-study-meta__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
}

.case-study-meta__value {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

/* Metric cards */
.case-study-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.case-study-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 16px;
  gap: 16px;
  background: #FCFCFC;
  border: 2px solid #EDEDED;
  border-radius: 24px;
  min-height: 200px;
}

.case-study-metric__icon {
  font-size: 24px;
  color: #8B1D41;
}

.case-study-metric__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-metric__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

/* Sticky notes */
.case-study-sticky {
  position: absolute;
  width: 200px;
  z-index: 10;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

.case-study-sticky--right {
  left: 78.63px;
  top: 512px;
}

.case-study-sticky--left {
  position: static;
  width: 210px;
  margin-top: 24px;
  pointer-events: auto;
}

.case-study-sticky--ai {
  right: 8px;
  bottom: 170px;
  width: 210px;
}

.case-study-sticky--remedies {
  position: static;
  width: 210px;
  flex-shrink: 0;
  pointer-events: auto;
}

.case-study-sticky__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
  border-radius: 16px 16px 0 0;
}

.case-study-sticky__tag {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: rgba(85, 85, 85, 0.75);
}

.case-study-sticky__body {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-sticky--right .case-study-sticky__body {
  color: #383B3E;
}

.case-study-sticky__footer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 20px 16px;
  gap: 12px;
  background: #FFFCF5;
  border: 2px solid #EDEDED;
  border-top: none;
  border-radius: 0 0 16px 16px;
}

.case-study-sticky__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.case-study-sticky__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-study-sticky__date {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-sticky__type {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: rgba(85, 85, 85, 0.75);
}

/* Callout card */
.case-study-callout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 36px;
  gap: 10px;
  width: 100%;
  background: #FCFCFC;
  border: 2px solid #EDEDED;
  border-radius: 24px;
  text-align: center;
}

.case-study-callout__icon {
  font-size: 24px;
  color: #8B1D41;
}

.case-study-callout__text {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
  max-width: 628px;
}

/* Content cards */
.case-study-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 36px 24px;
  gap: 24px;
  width: 100%;
  background: #FCFCFC;
  border: 2px solid #EDEDED;
  border-radius: 24px;
}

.case-study-card--centered {
  align-items: center;
  position: relative;
  padding-bottom: 36px;
}

.case-study-card__label {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  padding-bottom: 8px;
  width: 100%;
}

.case-study-card__label--green {
  font-weight: 500;
  color: #1F8561;
}

.case-study-card__divider {
  width: 100%;
  border: none;
  border-top: 1px solid #EDEDED;
  margin: 0;
}

.case-study-card__caption {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #EDEDED;
  border-radius: 8px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  white-space: nowrap;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Key Decisions image card: slightly different padding, scoped
   to this one instance so it doesn't affect the same components
   reused in the Remedies section. Its caption used to be sized
   up separately from the (smaller) shared default above — now
   that the shared default itself is 12px, this rule is just
   inherited and no longer needs its own font-size override. */
#key-decisions .case-study-card--centered {
  padding: 24px;
}

/* List items inside cards */
.case-study-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.case-study-list-item--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.case-study-list-item__icon {
  font-size: 24px;
  color: #8B1D41;
  flex-shrink: 0;
}

.case-study-list-item p {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  flex: 1;
}

/* Image placeholder */
.case-study-image-placeholder {
  width: 100%;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.case-study-image-placeholder__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Numbered steps */
.case-study-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.case-study-steps__divider {
  width: 100%;
  border: none;
  border-top: 1px solid #EDEDED;
  margin: 0;
}

.case-study-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.case-study-step__number {
  font-weight: 500;
  font-size: 36px;
  line-height: 47px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #8B1D41;
  flex-shrink: 0;
}

.case-study-step__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.case-study-step__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
}

.case-study-step__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

/* Remedies section: sticky note + card side by side, bottom-aligned */
.case-study-remedies-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}

/* Roadblocks and Remedies cards share this width so the two
   blocks always line up visually, even though they live in
   different layout contexts (Remedies sits beside a sticky note
   in a row; Roadblocks floats alone, right-aligned) */
.case-study-remedies-card,
.case-study-roadblocks-card {
  width: 420px;
  max-width: 100%;
}

/* Without this, the row's flex-shrink default lets the card
   squeeze a couple pixels narrower than 420px to make room for
   the sticky note beside it — breaking the width match with the
   Roadblocks card, which isn't in a row and never shrinks. */
.case-study-remedies-card {
  flex-shrink: 0;
}

/* Roadblocks section: card floats right-aligned below the full-width intro */
.case-study-roadblocks-card {
  align-self: flex-end;
}

/* Reflection grid */
.case-study-reflection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 60px;
  width: 100%;
}

.case-study-reflection-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-study-reflection-item--full {
  width: 100%;
  margin-top: 24px;
}

.case-study-reflection-item__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #000000;
}

.case-study-reflection-item__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-reflection-item__body strong {
  font-weight: 500;
  color: #383B3E;
}

/* Image blocks */
.case-study-image-block {
  width: 100%;
  border: 2px solid #EDEDED;
  border-radius: 8px;
  overflow: hidden;
}

.case-study-image-block__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Closing */
.case-study__closing {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study__link {
  color: #383B3E;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.case-study__link:hover {
  opacity: 0.6;
}

/* ============================================================
   TABLE OF CONTENTS
   Fixed left sidebar, tracks scroll position via JS in
   animate.js. Positioned 280px from the left, clear of the
   left side panel's edge handle. Hidden below 1728px, where
   there isn't room beside the centered 700px content column
   without overlapping it.
============================================================ */

.case-study-toc {
  display: none;
  flex-direction: column;
  gap: 20px;

  position: fixed;
  top: 300px;
  left: 280px;
  width: 180px;

  z-index: 12;
}

.case-study-toc__label {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.case-study-toc__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-study-toc__link {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #999999;
  text-decoration: none;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.case-study-toc__link:hover,
.case-study-toc__link.is-active {
  color: #383B3E;
  font-weight: 500;
}

@media (min-width: 1728px) {
  .case-study-toc {
    display: flex;
  }
}


/* ============================================================
   CASE STUDY — RESPONSIVE
============================================================ */

@media (max-width: 768px) {

  .case-study__back {
    top: 24px;
    left: 24px;
    background: #FFFFFF;
    border-radius: 100px;
    padding: 6px 14px;
  }

  .case-study {
    width: 100%;
    padding: 120px 32px 100px;
    gap: 72px;
  }

  .case-study-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .case-study-metrics {
    grid-template-columns: 1fr;
  }

  .case-study-remedies-row {
    flex-direction: column;
    align-items: stretch;
  }

  .case-study-remedies-card,
  .case-study-roadblocks-card {
    width: 100%;
  }

  .case-study-roadblocks-card {
    align-self: stretch;
  }

  .case-study-reflection-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-study-sticky {
    display: none;
  }

  .case-study-hero__thumbnail {
    height: 280px;
  }
}

@media (max-width: 480px) {

  .case-study__back {
    top: 20px;
    left: 20px;
    font-size: 14px;
  }

  .case-study {
    padding: 100px 24px 80px 32px;
    gap: 56px;
  }

  .case-study-meta {
    grid-template-columns: 1fr;
  }

  .case-study-section__title,
  .case-study-section__lead,
  .case-study-callout__text {
    font-size: 18px;
    line-height: 24px;
  }

  .case-study-hero__thumbnail {
    height: 220px;
    border-radius: 16px;
  }

  .case-study-card,
  .case-study-callout,
  .case-study-metric {
    border-radius: 16px;
    padding: 24px 20px;
  }

  .case-study-step {
    flex-direction: column;
    gap: 12px;
  }

  .case-study-step__number {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ============================================================
   PASSWORD GATE PAGE
   Full-viewport centered card that gates access to
   casestudy1.html. Figma's spec is a fixed 500x416px frame on a
   1440x1024 canvas, but that's swapped here for a fluid
   max-width card (matching the pattern already used everywhere
   else on this site) so it holds up across breakpoints instead
   of forcing a hardcoded pixel box.
============================================================ */

.password-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 24px;
}

.password-gate__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;

  width: 100%;
  max-width: 500px;
  padding: 36px;

  background: #FFFFFF;
  border: 2px solid #EDEDED;
  border-bottom-width: 1px;
  border-radius: 16px;
}

.password-gate__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.password-gate__icon {
  font-size: 32px;
  color: #383B3E;
}

.password-gate__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.password-gate__subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #707070;
  width: 100%;
}

.password-gate__link {
  color: #707070;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.password-gate__link:hover {
  opacity: 0.6;
}

.password-gate__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.password-gate__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.password-gate__input-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;

  width: 100%;
  border: 1px solid #EDEDED;
  border-radius: 16px;
  transition: border-color 0.2s ease;
}

/* Keyboard/mouse focus lands on the input itself, but the ring
   reads better around the whole pill-shaped row than just the
   bare text field, so :focus-within is used on the parent
   instead of styling .password-gate__input directly */
.password-gate__input-row:focus-within {
  border-color: #383B3E;
}

/* Wrong password: overrides the focus/default border with the
   site's one existing accent color rather than introducing an
   off-brand red, so the error still feels like part of this
   design system rather than a generic form-validation red */
.password-gate__input-row.has-error {
  border-color: #8B1D41;
}

.password-gate__input-row.has-error:focus-within {
  border-color: #8B1D41;
}

.password-gate__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.password-gate__input::placeholder {
  color: #999999;
}

.password-gate__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #383B3E;
}

.password-gate__toggle .material-icons {
  font-size: 20px;
}

/* Hidden by default per the updated Figma spec: this line now
   only ever appears as an inline error after a wrong attempt,
   rather than sitting there as a standing hint. JS toggles
   .is-visible on it; role="alert" on the element (in the HTML)
   means screen readers announce it the moment it appears. */
.password-gate__message {
  display: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #8B1D41;
  width: 100%;
}

.password-gate__message.is-visible {
  display: flex;
  align-items: center;
}

.password-gate__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  width: 100%;

  /* Figma spaces this row 36px below the fields above it, but
     those fields (label/input/message) already sit 8px apart via
     .password-gate__form's own gap, so this margin only makes up
     the remaining 28px rather than bumping every gap to 36px */
  margin-top: 28px;
}

/* Plain text link, no button chrome around it, unlike submit
   below which is a real filled button */
.password-gate__back {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.password-gate__back:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Explicit font-family here because <button> elements don't
   inherit the page's font-family by default the way <a> does,
   they fall back to the browser's system UI font unless told
   otherwise. Without this, "Unlock case study" (a <button>) was
   rendering in the OS default font while "Back to work" (an <a>)
   correctly picked up Yantramanav on its own. */
.password-gate__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;

  background: #383B3E;
  border: none;
  color: #FFFFFF;
}

/* No hover feedback while disabled — a hover state on a button
   that can't be clicked yet implies it's interactive when it
   isn't, which is more misleading than reassuring */
.password-gate__submit:hover:not(:disabled) {
  opacity: 0.85;
}

.password-gate__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ============================================================
   PASSWORD GATE — RESPONSIVE
============================================================ */

@media (max-width: 480px) {
  .password-gate {
    padding: 16px;
  }

  .password-gate__card {
    padding: 28px;
    gap: 28px;
  }

  /* Desktop's content-sized, space-between buttons get cramped
     as touch targets on narrow screens, so this reverts to
     full-width stacked buttons here regardless of their natural
     content width */
  .password-gate__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }

  .password-gate__submit {
    width: 100%;
  }
}


/* ============================================================
   LEFT SIDE PANEL — EDGE HANDLE
   A tall visible rail pinned to the left edge of the viewport.
   At rest it's a narrow light-gray strip showing just the
   handle; hovering (or tapping, on touch) reveals the "Current
   view" pill and the rail widens to fit it. This is the
   resting/teaser state for the left side panel below — same
   idea as the Forest bottom sheet, just approached from the
   edge instead of a click-to-open nav trigger.

   Mirrored from a right-edge version of this component: the
   shadow's x-offsets are flipped positive (cast toward the page,
   away from the edge) and the child order is handle-then-pill so
   the handle stays flush against the true left edge, with the
   pill unfolding away from the edge, into the page, on hover.
============================================================ */

.side-panel-edge {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  gap: 28px;

  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 100vh;

  border-radius: 0 12px 12px 0;

  cursor: pointer;
  z-index: 25;
}

/* The visible F5F5F5 rail shape lives on its own pseudo-element,
   separate from .side-panel-edge itself (which stays put as the
   hover/click hit area). That lets the shape nudge right on hover
   — same motion as the handle — without shifting the hit area
   under the cursor, which would otherwise risk a hover flicker. */
.side-panel-edge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #F3F3F3;
  border-radius: inherit;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.side-panel-edge:hover::before {
  transform: translateX(4px);
}

/* The always-visible grabber rectangle. Comes first in the DOM
   so it stays flush against the true left edge while the pill
   unfolds to its right. */
.side-panel-handle {
  width: 4px;
  height: 36px;
  flex-shrink: 0;

  background: #B6B6B6;
  border-radius: 36px;

  transition: height 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nudges right on hover — reads as "pull me into view", the
   same affordance as macOS/iOS edge-panel grabbers, rather than
   a scale which can look like it's just growing in place */
.side-panel-edge:hover .side-panel-handle {
  transform: translateX(4px);
}

/* The pill: hidden at rest, slides + fades in when the rail is
   hovered. The rail itself (28px, background above) stays a
   fixed size; the pill simply overflows past its right edge,
   since the rail doesn't clip its contents. Kept out of
   pointer-events until visible so it doesn't intercept clicks
   meant for the page underneath. */
.side-panel-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 10px;

  width: auto;
  height: 38px;
  flex-shrink: 0;

  background: #FFFFFF;
  box-shadow:
    5px 16px 7px rgba(0, 0, 0, 0.01),
    3px 9px 6px rgba(0, 0, 0, 0.02),
    1px 4px 4px rgba(0, 0, 0, 0.03),
    0px 1px 2px rgba(0, 0, 0, 0.04);
  border-radius: 8px;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  white-space: nowrap;

  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.side-panel-edge:hover .side-panel-pill {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ============================================================
   LEFT SIDE FOREST PANEL
   A portrait version of the Forest sheet's content, opened by
   clicking the left edge handle/pill instead of the bottom nav
   icon. Same information, but column 1 (clock + player) and
   column 2 (currently) are stacked into one vertical, scrollable
   column rather than sitting side by side. This reuses the
   .forest-sheet__* classes below for fonts and internal spacing,
   since those are already width:100%-based and adapt cleanly to
   this panel's narrower inner column, per the Figma dev-mode
   spec (530px panel, 402px inner column, 96px gap between the
   two stacked groups). The Figma spec's own height (1517px) is
   swapped for 100vh with internal scroll, since the panel needs
   to fit the viewport rather than force page scroll.
============================================================ */

.side-panel-backdrop {
  position: fixed;
  inset: 0;

  /* No visible dim, this stays purely as an invisible click
     target so clicking outside the panel still closes it */
  background: transparent;

  z-index: 28;
  pointer-events: none;
}

.side-panel-backdrop.is-visible {
  pointer-events: auto;
}

/* Locks page scroll behind the panel while it's open */
body.side-panel-open {
  overflow: hidden;
}

.side-forest-panel {
  position: fixed;
  top: 0;
  left: 0;
  /* 100vh is the fallback for browsers without dvh support. On mobile
     Safari/Chrome, 100vh is measured against the viewport's largest
     possible size (address bar hidden), so a fixed element sized to
     it can run taller than what's actually visible the moment the
     panel opens — reading as a gap at the top and/or bottom once the
     toolbar is on screen. 100dvh tracks the real, current visible
     viewport instead, so the panel always meets both edges exactly. */
  height: 100vh;
  height: 100dvh;
  width: 530px;
  max-width: 100vw;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 110px 64px;
  gap: 72px;

  background-color: rgba(235, 235, 235, 0.6);
  backdrop-filter: blur(10px) saturate(280%);
  -webkit-backdrop-filter: blur(10px) saturate(280%);
  border: none;
  border-radius: 0 12px 12px 0;

  /* Soft, layered shadow along the open (right) edge, the same
     treatment macOS uses to lift Control Center/Notification
     Center off the desktop behind it. Stacked layers (a wide
     faint one plus a tighter, slightly stronger one) read as a
     soft falloff rather than one hard-edged shadow, the same
     approach already used for the About page headshot elsewhere
     in this file. Only offset horizontally since the panel is
     flush to the top/bottom/left edges, so there's no edge there
     to cast a shadow against. */
  box-shadow:
    16px 0 40px rgba(0, 0, 0, 0.035),
    4px 0 12px rgba(0, 0, 0, 0.045);

  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;

  z-index: 29;
  transform-origin: left center;
  transform: translateX(-100%) scale(0.97);
  /* Opacity is intentionally left untransitioned, same reasoning as
     the bottom Forest sheet: backdrop-filter blur strength scales
     with an element's own opacity, so animating opacity alongside
     the slide would fade the blur too and let content behind it
     stay briefly readable mid-transition. Only transform animates.

     This default (fast, accelerating) transition is the CLOSE
     motion — mirrors how macOS panels like Control Center dismiss
     quickly with no bounce. animate.js swaps in a snappier ease-out
     curve just for the open, then hands it back to this default
     right after, so closing always uses this snap regardless of
     how the panel was opened. */
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;

  will-change: backdrop-filter, transform;
}

.side-forest-panel::-webkit-scrollbar {
  display: none;
}

/* Soft directional light sheen, same treatment as the bottom nav
   pill and hover popover, so the glass reads consistently across
   the site rather than sitting flat */
.side-forest-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    rgba(255, 255, 255, 0) 65%
  );
  pointer-events: none;
  z-index: 1;
}

.side-forest-panel.is-visible {
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* The two stacked groups (player, currently). Widths are 100% of
   the panel's inner column (402px, per the padding math above),
   matching the Figma spec's own 402px column width. */
.side-forest-panel__col {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.side-forest-panel__col--player {
  gap: 36px;
}

.side-forest-panel__col--currently {
  gap: 72px;
}

/* Inside the side panel, the player card sits nested inside the
   "Current view" column (Now playing header → art → info →
   progress), so it uses a tighter 12px internal gap here than the
   bottom sheet's standalone player (16px, unaffected). */
.side-forest-panel__col--currently .forest-sheet__player {
  gap: 12px;
}

.side-forest-panel__col--currently .forest-sheet__player-title {
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------
   PODCAST ROWS (side panel only)
   Replaces the bottom sheet's numbered-index row layout with a
   40x40 thumbnail beside a stacked title + meta, per the updated
   Current view spec. Uses a placeholder icon tile in place of
   real cover art until actual thumbnail images are supplied.
-------------------------------------------------------- */

.side-forest-panel__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.side-forest-panel__row-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;

  object-fit: cover;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.side-forest-panel__row-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.side-forest-panel__row-text .forest-sheet__row-meta {
  width: auto;
}

/* --------------------------------------------------------
   NOW PLAYING HEADER
   Sits above the album art, mirrors the "Podcasts"/"High
   Conviction Holdings"/"Pondering" section headers already
   used further down the panel — title left, icon right.
-------------------------------------------------------- */

.side-forest-panel__player-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.side-forest-panel__player-header-title {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.side-forest-panel__player-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #383B3E;
}

.side-forest-panel__player-play.material-icons {
  font-size: 18px;
}

/* --------------------------------------------------------
   LAST UPDATED LABEL
   Sits at the very bottom of the panel, styled like the
   "Current view" label at the top of the column.
-------------------------------------------------------- */

.side-forest-panel__updated {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #727272;
}

/* Hidden by default (desktop/tablet), where the panel is a
   fixed-width sidebar and the edge handle plus click-outside area
   both remain reachable to close it. Only revealed inside the
   600px breakpoint below, where the panel takes over the full
   screen and neither of those exits is reachable anymore. */
.side-forest-panel__close {
  display: none;
}

@media (max-width: 600px) {
  .side-forest-panel {
    width: 100vw;
    border-radius: 0;
    padding: 40px 24px 80px;
    gap: 64px;
  }

  /* Sticky rather than a one-time fixed position, so it stays
     reachable at the top of the viewport no matter how far the
     user has scrolled down the panel's content. Pulled up with a
     negative margin so it doesn't add its own gap on top of the
     column's existing 64px gap below it. */
  .side-forest-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex-shrink: 0;

    position: sticky;
    top: 0;
    z-index: 2;

    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    margin-bottom: -40px;

    /* White circle backdrop, since the panel itself is a
       translucent glass over whatever content happens to be
       scrolled behind it, an icon alone could lose contrast
       against a light photo or bright patch of page */
    background: #FFFFFF;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;

    color: #383B3E;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .side-forest-panel__close:hover,
  .side-forest-panel__close:focus-visible {
    opacity: 0.85;
  }

  .side-forest-panel__close .material-icons {
    font-size: 24px;
  }
}


/* ============================================================
   FOREST SHEET SHARED COMPONENTS
   The bottom-nav "Forest" icon used to open a sliding sheet with
   this content; it now links to garden.html instead, so the
   sheet's own container/backdrop/close-button CSS is gone. These
   component-level classes (clock, player, ticker, pondering,
   etc.) are kept because the Left Side Forest Panel still reuses
   them verbatim for fonts and spacing (see .side-forest-panel__*
   further up this file).
============================================================ */

/* --------------------------------------------------------
   CLOCK
-------------------------------------------------------- */

.forest-sheet__time-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.forest-sheet__clock-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.forest-sheet__clock-label {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__clock-city {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__clock-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

/* Groups day + date into a single stacked column so they sit as
   one unit to the left of the digital time, per the updated spec */
.forest-sheet__clock-daydate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.forest-sheet__clock-day {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__clock-mmdd {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__clock-time {
  font-family: 'Digital Numbers', 'Yantramanav', monospace;
  font-weight: 400;
  font-size: 48px;
  line-height: 31px;
  letter-spacing: 0em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__divider {
  width: 100%;
  border: none;
  border-top: 1px solid #6E6E6E;
  margin: 0;
}

/* --------------------------------------------------------
   PLAYER (static visual mockup, no real playback)
-------------------------------------------------------- */

.forest-sheet__player {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.forest-sheet__player-art-wrap {
  width: 100%;
}

.forest-sheet__player-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background-color: #2A2A2A;
}

.forest-sheet__player-like {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;

  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.forest-sheet__player-like .material-icons {
  font-size: 20px;
  color: #6B6E70;
}

.forest-sheet__player-like[aria-pressed="true"] .material-icons {
  color: #8B1D41;
}

.forest-sheet__player-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.forest-sheet__player-title {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0em;
  color: #383B3E;
}

.forest-sheet__player-artist-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.forest-sheet__player-artist {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #6B6E70;
}

.forest-sheet__player-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.forest-sheet__progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: #D6D6D6;
  border-radius: 4px;
}

.forest-sheet__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 18.6%;
  background: #383B3E;
  border-radius: 4px;
}

.forest-sheet__progress-handle {
  position: absolute;
  left: 18.6%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #383B3E;
  border-radius: 50%;
}

.forest-sheet__progress-times {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  color: #6B6E70;
}

/* --------------------------------------------------------
   CURRENTLY COLUMN
-------------------------------------------------------- */

.forest-sheet__currently-label {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #727272;
}

.forest-sheet__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.forest-sheet__section-title {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: #383B3E;
}

/* Section title paired with a leading icon (Podcasts, Holdings, Pondering) */
.forest-sheet__section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.forest-sheet__section-icon {
  font-size: 20px;
  color: #383B3E;
  flex-shrink: 0;
}

.forest-sheet__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.forest-sheet__row-num {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #383B3E;
  flex-shrink: 0;
}

.forest-sheet__row-title {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #383B3E;
  flex: 1;
  min-width: 0;
}

.forest-sheet__row-meta {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #727272;
  white-space: nowrap;
  flex-shrink: 0;
  width: 96px;
  text-align: left;
}

.forest-sheet__musing {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  color: #383B3E;
  width: 100%;
}

/* --------------------------------------------------------
   HIGH CONVICTION HOLDINGS
   Two columns of stacked ticker rows (logo, symbol, company)
-------------------------------------------------------- */

.forest-sheet__holdings-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.forest-sheet__holdings-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.forest-sheet__ticker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.forest-sheet__ticker-logo {
  width: 40px;
  height: 40px;
  border-radius: 400px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #FFFFFF;
}

/* Now redundant since all ticker logos get a white circle backdrop
   above, but kept in the markup as a semantic marker for which
   logos specifically need it (Micron, Google) vs. which merely
   also benefit from it */
.forest-sheet__ticker-logo--on-light {
  background-color: #FFFFFF;
}

.forest-sheet__ticker-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.forest-sheet__ticker-symbol {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.forest-sheet__ticker-name {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #727272;
}

/* --------------------------------------------------------
   PONDERING
-------------------------------------------------------- */

.forest-sheet__pondering {
  font-family: 'Yantramanav', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.forest-sheet__photo-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.forest-sheet__photo {
  flex: 1 1 150px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #EDEDED;
  border-radius: 4px;
  background-color: #2A2A2A;
}

/* --------------------------------------------------------
   RESPONSIVE
   These two rules still apply inside the Left Side Forest
   Panel, which reuses .forest-sheet__player-title and
   .forest-sheet__holdings-columns for its own narrow layout.
-------------------------------------------------------- */

@media (max-width: 480px) {
  .forest-sheet__player-title {
    font-size: 20px;
  }

  .forest-sheet__holdings-columns {
    flex-direction: column;
    gap: 16px;
  }
}


/* ============================================================
   GARDEN PAGE
   Reached via the bottom-nav "Garden" (forest) icon — a simple
   running log of short reflections, each with an image, a date
   planted, and a topic tag. Mirrors the same container pattern
   as the About/Work pages (centered 500px column, same vertical
   rhythm), per Figma dev-mode spec.
============================================================ */

.garden-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;

  width: 500px;
  margin: 0 auto;

  padding-top: 300px;
  padding-bottom: 140px;
}

.garden-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.garden-header__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.garden-header__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
}

.garden-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #383B3E;
}

.garden-header__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.garden-header__bio {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

/* --------------------------------------------------------
   ENTRIES
-------------------------------------------------------- */

.garden-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.garden-entry__thumbnail {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.garden-entry__thumbnail-img {
  width: 100%;
  height: auto;
  display: block;
}

.garden-entry__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.garden-entry__text {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #383B3E;
  width: 100%;
}

.garden-entry__meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.garden-entry__date {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #727272;
  white-space: nowrap;
}

.garden-entry__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 16px;
  gap: 4px;

  background: #383B3E;
  border-radius: 36px;
  white-space: nowrap;

  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #FFFFFF;
}

/* --------------------------------------------------------
   GARDEN: RESPONSIVE
-------------------------------------------------------- */

@media (max-width: 768px) {
  .garden-container {
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 300px;
  }
}

@media (max-width: 480px) {
  .garden-container {
    padding-left: 32px;
    padding-right: 24px;
    padding-top: 48px;
    gap: 40px;
  }
}

@media (max-width: 375px) {
  .garden-container {
    padding-left: 32px;
    padding-right: 20px;
    gap: 36px;
  }
}

@media (max-width: 320px) {
  .garden-container {
    padding-left: 32px;
    padding-right: 16px;
    gap: 32px;
  }
}