/* ==================== GOOGLE FONTS ==================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}

/* ==================== VARIABLES ==================== */
:root {
  /* Layout */
  --header-height: 72px;
  --page-gutter: clamp(16px, 2vw, 32px);
  --section-vspace: clamp(32px, 6vw, 96px);
  /* a bit more top space (like the reference hero) */
  --hero-top: clamp(72px, 14vh, 160px);
  --visual-h: clamp(420px, 48vh, 560px);
  

  /* Colors */
  --hue-color: 250;
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

  /* Typography */
  --body-font: 'Inter', system-ui, sans-serif;
  --display-font: 'ClashGrotesk', sans-serif;
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /* Weights */
  --font-medium: 500;
  --font-semi-bold: 600;

  /* Spacing scale */
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /* Z-index */
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;

  /* Editorial content grid, shared by the hero and portfolio layouts */
  --grid-cols: 12;
  --grid-gap: clamp(10px, 1.2vw, 20px);
  --container-max: 1200px;

  /* Shared content container: aliases --container-max/--page-gutter so
     it always matches the header nav's rendered edges (see .content-container
     below), under names meant to be reused page-by-page without touching
     the legacy .container every page already depends on. */
  --content-max: var(--container-max);
  --gutter: var(--page-gutter);
}

/* Column count follows the same breakpoints as the container/gutter system */
@media (max-width: 1279px) {
  :root { --grid-cols: 6; }
}
@media (max-width: 767px) {
  :root { --grid-cols: 2; }
}

/* Larger type on wide screens */
@media (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/* ==================== BASE ==================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Always reserve the scrollbar's width so the viewport-relative grid
   lines (position:fixed) and the normal-flow content (width:100%)
   agree on how wide "the page" is, otherwise they drift apart by the
   scrollbar's width, showing up as a mismatched rightmost column. */
html { scrollbar-gutter: stable; }
/* make in-page anchors land below the fixed header */
html { scroll-padding-top: var(--header-height); }

body {
  margin: var(--header-height) 0 0 0;     /* keep content below fixed header */
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3, h4 { color: var(--title-color); font-weight: var(--font-semi-bold); }

h1, h2, h3, h4, h5,
.home__title, .brand, .hero-title,
.footer__title, .project__title, .portfolio__title {
  font-family: var(--display-font);
}

.text-mint {
  font-weight: 600; /* Semibold */
}
.site-menu{ list-style: none; }
/* portfolio tags container */
/* portfolio tags container */
.portfolio__tags{
  list-style: none;
  padding-left: 0;
  margin: 0.6rem 0 0.4rem;
  display: flex;
  flex-wrap: nowrap;         /* stay on one line */
  gap: 0.25rem 0.4rem;       /* tighter gaps so they fit */
  overflow-x: visible;       /* don't grow the card / no scrolling */
}

/* pill-style tag (no hover effect) */
.portfolio__tags .tag{
  --mint-color: #1a7a5e;  /* mint outline color */

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

  /* smaller padding so three tags fit inside half-width cards */
  padding: 0.32rem 0.8rem;

  border-radius: 999px;
  border: 1.2px solid var(--mint-outline);
  background-color: #ffffff;

  color: #4b5563;            /* requested text color */
  font-size: 0.62rem;        /* smaller font */
  letter-spacing: 0.12em;    /* a bit tighter than before */
  text-transform: uppercase;
  white-space: nowrap;       /* keep each tag itself on one line */
  text-decoration: none;
  line-height: 1;            /* vertical centering */
}
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ==================== LAYOUT HELPERS ==================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ===== SHARED CONTENT CONTAINER (reusable across pages) =====
   Same recipe as .container, under new tokens so it can be adopted
   page-by-page (see --content-max/--gutter above) without touching
   .container's existing sitewide usage. Matches the header nav's edges
   exactly since --content-max/--gutter alias the same underlying values. */
.content-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Figures (figure-80's own max-width is narrower/independent) share the
   same edges as body text once they also carry .content-container. */
.figure-80.content-container {
  max-width: var(--content-max);
  padding-inline: var(--gutter);
}
/* Hero banner: the wrapping .content-container owns the edges/padding,
   the media block just fills it (only applies when actually nested this
   way, so pages that use .hero-media on its own are unaffected). */
.content-container > .hero-media {
  width: 100%;
  max-width: none;
  margin: 0;
}
.section { padding-block: var(--section-vspace); }
.grid { display: grid; gap: 1.5rem; }

.section-title {
  text-align: center;
  margin: 0 0 1.25rem;
}
/* optional supporting text center */
.section-title + p { text-align: center; }

/* ==================== HEADER / NAV ==================== */
.header{
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-height);
  z-index: var(--z-fixed);
  background: var(--body-color);
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
}

.site-nav{
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--page-gutter);
}

/* Left brand: always black, never underlined */
.brand{
  color: var(--title-color) !important;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
}

/* Right menu: horizontal row */
.site-menu{
  display: flex; align-items: center;
  gap: clamp(16px, 3.2vw, 48px);
  margin: 0; padding: 0;
}

/* default: grey, hover: black; active: black + underline */
.site-menu .nav-link{
  position: relative;
  font-weight: 600;
  color: rgba(17,17,17,.45);
  transition: color .2s ease;
  text-decoration: none;
}
.site-menu .nav-link:hover{ color: var(--title-color); }
.site-menu .nav-link.active{ color: var(--title-color); }

.site-menu .nav-link::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.site-menu .nav-link.active::after{ transform: scaleX(1); }

/* Mobile sizing for nav text */
@media (max-width: 640px){
  .site-menu{ gap: 16px; font-size: .95rem; }
  .brand{ font-size: 1rem; }
}

/* ==================== HOME (HERO) ==================== */
.section__title{
  text-align:center;
  margin:0 0 1.25rem;
}
.section-title, .section-kicker{ text-align: center; }
.section-title{ margin-top: 0; }

/* ==================== PORTFOLIO ==================== */
/* Less top padding than other sections. The hero is already capped
   to ~65vh specifically so the first card row peeks into view */
.portfolio.section {
  padding-top: clamp(16px, 2vw, 32px);
}

/* Real grid: same --grid-cols as the hero, so cards sit on the same
   column tracks as the rest of the page. column-gap is its own,
   wider value (not the shared --grid-gap, which other grids on the
   page also use) so a tile's hover-scale never reaches its neighbor. */
.portfolio .container{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: clamp(40px, 6vw, 64px);
  /* Tile media now sizes to its own natural aspect ratio (see
     .tile-framed below), so rows can hold tiles of different heights,
     don't stretch every card in a row to match the tallest one. */
  align-items: start;
}

/* Mobile (2 cols): one card per row, full width */
.portfolio__content{
  grid-column: 1 / -1;
}

/* Tablet (8 cols) & desktop (16 cols): two cards per row, each spanning half */
@media (min-width: 768px){
  .portfolio__content{
    grid-column: span calc(var(--grid-cols) / 2);
  }
}

/* allow cards to shrink inside the grid cell */
.portfolio__content{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;                 /* <-- important so tags can't force width */
}
.portfolio__data{ padding-top: .25rem; }
.portfolio__title{ font-size: 1.125rem; line-height: 1.25; }
.portfolio__description{ color: var(--text-color); font-size: var(--small-font-size); }

/* Quiet maturity/status line: one dot + small uppercase text, no badge */
.portfolio__status{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-color-light);
}
.portfolio__status-dot{
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--text-color-light);
  background: var(--text-color-light);
}
.portfolio__status[data-status="shipped"] .portfolio__status-dot{
  background: var(--mint-color);
  border-color: var(--mint-color);
}
.portfolio__status[data-status="research"] .portfolio__status-dot{
  background: var(--title-color);
  border-color: var(--title-color);
}
.portfolio__status[data-status="concept"] .portfolio__status-dot{
  background: transparent;
  border-color: var(--text-color-light);
}

/* Clickable thumbnail box with fixed ratio + rounded corners */
.portfolio__img-link{
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f6f7;
}

/* Image fills and crops (.tile-media is the video equivalent, same fill/crop) */
.portfolio__img,
.tile-media{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.portfolio__img--contain {
  object-fit: contain !important;   /* prevent crop/zoom */
}

/* give the contain area a subtle backdrop so empty bands look clean */
.thumb {
  background: #f5f6f7;
}

/* Larger screens: wider ratio + softer corners */
@media (min-width: 992px){
  .portfolio__img-link{
    aspect-ratio: 16 / 9;
    border-radius: 24px;
  }
}

/* Mint/turquoise accent for title hover */
:root{
  --mint-color: #1a7a5e;  /* tweak if you want it lighter/darker */
}

.text-mint{
  color: var(--mint-color);              /* or var(--accent-color) if you have one */
}
/* Mint underlined external link that doesn't change after visit */
.ext-link-mint{
  color: var(--mint-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--mint-color);
  text-underline-offset: 3px;
}
.ext-link-mint:visited,
.ext-link-mint:hover,
.ext-link-mint:active,
.prose .ext-link-mint,
.prose .ext-link-mint:visited{
  color: var(--mint-color) !important;   /* keep mint even after click */
}

/* Title link: default same as headings; hover = mint */
.portfolio__title a,
.portfolio__title-link{
  color: var(--title-color);
  text-decoration: none;
  transition: color .2s ease;
}

.portfolio__title a:hover,
.portfolio__title a:focus-visible,
.portfolio__title-link:hover,
.portfolio__title-link:focus-visible{
  color: var(--mint-color);
  outline: none;
}

/* Optional: give keyboard users a subtle focus ring on the title link */
.portfolio__title-link:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-color) 35%, transparent);
  border-radius: 4px;
}

.portfolio__tags{
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;              /* <-- was nowrap / overflow-x */
  gap: 0.45rem 0.6rem;
}

.portfolio__tags .tag{
  --mint-outline: #1a7a5e;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1.2px solid var(--mint-outline);
  background-color: #ffffff;
  color: #4b5563;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;          /* tag text stays on a single line */
  line-height: 1;
}

/*==================== FOOTER – LET'S TALK ====================*/

.footer {
  background-color: #f3f4f6;                /* light cool gray tint */
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) 0 3rem;
  color: #111827;
}

.footer__inner {
  /* .container already sets max-width + side padding */
}

/* ---------- top row (headline + back to top) ---------- */

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.footer__headline {
  max-width: 640px;
}

.footer__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4b5563;
}

/* big ghost "LET'S TALK" text */
.footer__title {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(3.8rem, 11vw, 7rem);
  line-height: 0.9;
  color: rgba(15, 23, 42, 0.06);  
  white-space: nowrap;   /* very light gray */
}

/* BACK TO TOP pill + circle on the right */

.footer__back {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: #111827;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer__back-label {
  margin-top: 0.1rem;
}

.footer__back-circle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: #3f3f46;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__back-circle i {
  font-size: 1.2rem;
}

/* hover state – mint */
.footer__back:hover {
  color: #064e3b;                     /* dark mint text */
}

.footer__back:hover .footer__back-circle {
  background-color: var(--mint-color);          /* mint fill (same as buttons) */
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

/* ---------- bottom row (buttons + credits) ---------- */

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* pill button row */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

/* pill buttons – same vibe as reference */
.footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2.1rem;
  border-radius: 999px;                       /* rounded rectangle / pill */
  border: 1px solid #d4d4d8;                 /* light gray outline */
  background-color: #ffffff;
  color: #111827;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.footer__btn:hover {
  background-color: var(--mint-color);
  border-color: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

/* credits bottom-right */
.footer__meta {
  text-align: right;
  font-size: 0.9rem;
  color: #4b5563;
}

.footer__meta p {
  margin: 0;
}

/* hide old floating scroll-up button, if present */
.scrollup {
  display: none !important;
}

/* ---------- responsive tweaks ---------- */

@media (max-width: 768px) {
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__back {
    align-self: flex-end;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__meta {
    text-align: left;
    margin-top: 1rem;
  }

  .footer__title {
    font-size: clamp(3rem, 16vw, 4.5rem);
    white-space: normal;  
  }
}


/* ========== Project pager (prev / next) ========== */

.project-pager {
  padding: 3rem 0 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 3rem;
}

.project-pager__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-pager__next{
  margin-left: auto;
}

.project-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--text-color);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-pager__link i {
  font-size: 1.2rem;
}

.project-pager__link:hover {
  color: var(--mint-color);
}

@media (max-width: 640px) {
  .project-pager__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .project-pager__link {
    font-size: 0.9rem;
  }
}

/* ==================== Project: TELL-Tool ==================== */
/* ===== PROJECT PAGE ===== */
.project-hero.section{
  /* same generous top spacing as home */
  padding-top: 0;             /* keep the top tight */
  padding-block-start: 0;
  margin-top: 0;  
}

.project-hero + .project-intro{
  margin-top: clamp(24px, 3vw, 48px);
}

.project__title{
  /* match home hero scale/feel */
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(32px, 6vw, 64px);
  color: var(--title-color);
  max-width: 1100px;
}

.project__lede{
  margin-top: clamp(28px, 3.5vw, 44px);
  max-width: 1000px;
  color: var(--text-color);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.9;
}

.main{ padding-top: var(--header-height); }
/* --- Project hero banner --- */
.project-hero.section{
  padding-block-start: 0;   /* kill the top padding from .section */
  padding-top: 0;
}

.project-intro.section { 
  padding-top: var(--section-vspace); 
}

.project-hero + .project-intro{
   margin-top: clamp(12px, 1.6vw, 20px);
}

.header{ z-index: var(--z-fixed); }     /* already high, but explicit */
.hero-media{ 
  width: 100%;
  max-width: 100%;
  height: calc(100vh - var(--header-height));
  border-radius: 0;                /* remove rounding so it truly fills */
  margin: 0;  
}
.hero-overlay{
  position: absolute; inset: 0;
  display: grid; place-content: center;
  padding: clamp(24px, 3vw, 40px);
}

.hero-media{ 
  margin: 0 auto clamp(24px, 3vw, 48px);
}

.hero-media {
  position: relative;
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Overlay text */
.hero-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: clamp(16px, 4vw, 48px);
  /* subtle top/bottom gradient to help legibility */
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.20) 35%, rgba(0,0,0,.28));
}
.hero-title{
  color: #fff;
  font-weight: 800;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: .2px;
}
.hero-subtitle{
  margin-top: .6rem;
  color: #fff;
  opacity: .95;
  font-size: clamp(16px, 1.6vw, 22px);
}

/* ===== Project detail: 4×2 meta ===== */
/* 4 columns on desktop, 2 rows (labels row visually paired with values) */
.project-meta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 48px);
  margin-top: clamp(24px, 3vw, 40px);
}

.meta-label{
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 18px);   /* slightly larger than body */
  color: var(--title-color);
  margin-bottom: 8px;
}

.meta-value{
  color: var(--text-color);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.6;
}

/* Tablet: two columns, items pair vertically (label above value) */
@media (max-width: 900px){
  .project-meta{ grid-template-columns: repeat(2, 1fr); }
}

/* Phone: single column, each item stacks label then value */
@media (max-width: 560px){
  .project-meta{ grid-template-columns: 1fr; }
}

/* ===== Typographic spacing for project pages ===== */
/* Paragraphs: “one line space” between paragraphs */
/* ==================== PROJECT PAGE TYPOGRAPHY & SPACING ==================== */

/* Give each project section its own internal vertical padding */
.project .project-section{
    padding-block: calc(var(--section-vspace) * 0.85);
}

/* Triple the gap *between* consecutive sections */
.project .project-section + .project-section{
  margin-top: clamp(36px, 6vh, 90px);
  padding-top: 0;
  border-top: none;
}

/* Paragraphs: comfy line height + ~1 line of space after */
.project .project-section p{
  line-height: 1.9;
  margin: 0 0 1.15em;
}

/* Headings: larger and double gap before first sentence */
.project .project-section > h2,
.project .project-section > h3{
  line-height: 1.2;
  color: var(--title-color);
  margin: 0 0 clamp(22px, 2.2vw, 34px);   /* “double” gap under heading */
}

/* ---- List fixes (override the global 'ul { list-style: none }') ---- */
.project .project-section ul{
  list-style: disc inside;
  margin: 0 0 1.15em;
  padding-left: 0.5em;                      /* nudge text off the bullet */
}
.project .project-section ol{
  list-style-position: inside;   /* bullet starts inside the text box */
  list-style-type: disc;         /* or decimal for <ol> below */
  padding-left: 0;               /* no extra indent (inside already indents) */
  margin: 0 0 1.15em;            /* same after-space as paragraphs */
}
.project .project-section ol{ list-style-type: decimal; }

.project .project-section li{
  line-height: 1.9;              /* match paragraph line-height */
  margin: 0.35em 0;               /* comfortable gap between list items */
}

/* Project pages: no body offset; header offset handled by <main> */
.project-page { margin-top: 0; }
.project-page .main { padding-top: var(--header-height); }

/* Make sure the hero isn’t adding its own top gap */
.project-page .project-hero.section { padding-top: 0; margin-top: 0; }

/* Optional: if you have any paragraphs not wrapped in .project-section,
   keep them nicely spaced too */
.project p { line-height: 1.85; margin: 0 0 1.1em; }
main.project{ padding-bottom: clamp(80px, 10vh, 160px); }

/* ==================== SECTION NAV (per-case rail / pill bar) ====================
   Reusable across project pages. Drop the same three-part markup on any
   case page: `.section-nav-layout` wrapping a `.section-nav` (an <a
   class="section-nav__back"> plus a `.section-nav__list` of anchors) and
   a `.section-nav-content` (everything that used to sit directly in
   <main>). Only the anchor list + section ids need to change per
   case. The wrapper reuses --content-max/--gutter so the rail+content
   pair still lines up with every other page's content-container width.
   Scroll-spy is wired in assets/js/main.js; the scroll itself is native
   anchor navigation + the sitewide `scroll-behavior: smooth`, so
   keyboard use and reduced-motion both fall out for free. */
.section-nav-layout {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
}
.section-nav-content {
  flex: 1 1 auto;
  min-width: 0; /* let wide children (tables, etc.) scroll instead of stretching the rail's column */
}
.section-nav {
  flex: 0 0 176px;
  position: sticky;
  top: calc(var(--header-height) + 40px);
  align-self: flex-start;
  max-height: calc(100vh - var(--header-height) - 64px);
  overflow-y: auto;
  padding-left: var(--gutter);
}
.section-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color-light);
  text-decoration: none;
}
.section-nav__back i { font-size: 0.95rem; }
.section-nav__back:hover,
.section-nav__back:focus-visible { color: var(--mint-color); }

.section-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.section-nav__link {
  display: block;
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color-light);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.section-nav__link:hover { color: var(--title-color); }
.section-nav__link:focus-visible {
  outline: 2px solid var(--mint-color);
  outline-offset: 2px;
  border-radius: 2px;
}
.section-nav__link.is-active {
  color: var(--mint-color);
  border-left-color: var(--mint-color);
  font-weight: 600;
}

/* Base offset so a direct link/back-forward jump also clears the fixed
   header; the pill-bar breakpoint below adds its own extra height on
   top of this instead of replacing it. */
.section-nav-target { scroll-margin-top: var(--header-height); }

/* Below ~1024px the rail's left gutter disappears (content-container
   is already edge-to-edge there), so the same nav markup switches to a
   horizontal-scroll pill strip stuck under the header instead of
   trying to reserve column width from the case content. */
@media (max-width: 1024px) {
  .section-nav-layout { display: block; }
  .section-nav__back { display: none; } /* same destination as the header's own Work link, so it's not duplicated in the pill strip */
  .section-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 5;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0.6rem 0;
    background: var(--body-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .section-nav__list {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--page-gutter);
  }
  .section-nav__list::-webkit-scrollbar { display: none; }
  .section-nav__item { flex: 0 0 auto; }
  .section-nav__link {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    white-space: nowrap;
  }
  .section-nav__link.is-active {
    background: var(--mint-color);
    border-color: var(--mint-color);
    color: #fff;
  }
  .section-nav-target { scroll-margin-top: calc(var(--header-height) + 56px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.project-image{
  display:block; position:relative;
  border-radius:16px; overflow:hidden; background:#f5f6f7;
}
.project-image img{
  width:100%; height:auto; display:block;
}
@media (min-width: 992px){ .project-image{ border-radius:24px; } }

/* ---- Tighten hero → lede and match lede → meta ---- */
:root { --block-gap: clamp(8px, 1.2vw, 16px); }

/* Kill the big padding that was pushing the lede down */
.project-intro.section { 
  padding-top: 0;
  padding-bottom: 0;
}

/* Space under the lede equals the same gap */
.project__lede { margin: 0 0 var(--block-gap); }

/* Meta grid starts after the same gap */
.project-meta { margin-top: 0; }

/* If you keep this selector, make sure it doesn't re-add extra space */
.project-hero + .project-intro { margin-top: 0; padding-bottom: 0; }

/* ====== 3-column sketches (80% screen cap, equal heights, no crop) ====== */
.logo-sketches{
  /* cap to 80% of screen and center */
  max-width: 80vw;
  height: min(80vh, 900px);
  margin: clamp(8px, 1.2vw, 16px) auto 0;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  align-items: stretch;            /* equalize column heights */
}

/* column 1 = stack of two images */
.logo-sketches .col-stack{
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 24px);
}

/* each block (single or stacked) fills its grid cell */
.logo-sketches .sketch{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  overflow: hidden;
  background: #fff;                /* so "contain" has a clean backdrop */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* show ORIGINAL image (no cropping) and scale inside the box */
.logo-sketches .sketch img{
  width: 100%;
  height: 100%;
  object-fit: contain;             /* <-- preserve original aspect ratio */
  display: block;
}

/* Responsive fallbacks */
@media (max-width: 1024px){
  .logo-sketches{ max-width: 90vw; height: min(70vh, 750px); }
}
@media (max-width: 900px){
  .logo-sketches{ grid-template-columns: 1fr 1fr; height: min(65vh, 680px); }
}
@media (max-width: 560px){
  .logo-sketches{ grid-template-columns: 1fr; height: auto; }
  .logo-sketches .sketch{ min-height: 240px; }
}


/* width cap + centering for your figure wrapper */
.w-80 {
  max-width: min(1200px, 80vw);
  margin-left: auto;
  margin-right: auto;
}

/* ====== 3-column sketches (80% screen cap, equalized, no crop) ====== */
.logo-sketches{
  /* cap to 80% of screen and center via .w-80 wrapper */
  margin: clamp(8px, 1.2vw, 16px) auto 0;

  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: clamp(12px, 1.6vw, 24px);

  /* give rows real height so items never collapse */
  grid-auto-rows: minmax(220px, 1fr);
  align-items: stretch;
}

/* column 1 = stack of two images (grid is sturdier than flex here) */
.logo-sketches .col-stack{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  min-height: 0; /* allow shrinking without overflow */
}

/* each block (single or stacked) fills its grid cell */
.logo-sketches .sketch{
  min-height: 0;  /* critical so children can shrink */
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* show ORIGINAL image (no cropping) and scale inside the box */
.logo-sketches .sketch img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* preserve original aspect ratio */
  display: block;
}

/* Responsive fallbacks */
@media (max-width: 1024px){
  .logo-sketches{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 560px){
  .logo-sketches{ grid-template-columns: 1fr; }
  .logo-sketches{ grid-auto-rows: minmax(240px, auto); }
  .logo-sketches .col-stack{
    grid-template-rows: auto auto; /* let the stacked images size naturally */
  }
}

/* Shared utility to cap width at 80% of viewport and center */
.figure-80 { 
  max-width: min(1200px, 80vw);
  margin: var(--block-gap) auto 0;
}

/* Small, subtle caption */
.figure-caption {
  margin: 8px 0 var(--block-gap);
  font-size: clamp(12px, .9vw, 14px);
  color: var(--text-color-light);
  text-align: center;
}

/* 2×2 grid that preserves original image dimensions (no cropping) */
.logo-22 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;                     /* equal row heights */
  gap: clamp(12px, 2vw, 24px);
}

/* Equal-height tiles using an aspect box; images are letterboxed (object-fit: contain) */
.logo-22 .cell {
  aspect-ratio: 16 / 9;                    /* adjust if you want taller tiles */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f7;
  border-radius: 16px;
  padding: clamp(8px, 1.2vw, 16px);
  overflow: hidden;                         /* hide any accidental overflow, we don't crop the image itself */
}

.logo-22 img {
  max-width: 100%;
  max-height: 100%;
  width: auto;                              /* preserve original proportions */
  height: auto;                             /* preserve original proportions */
  object-fit: contain;                      /* never crop */
}

/* Mobile: stack into a single column */
@media (max-width: 680px){
  .logo-22 { grid-template-columns: 1fr; }
}

/* ---- 2×2 logo grid (max 80% viewport width, no cropping) ---- */
.logo-2x2{
  max-width: min(1200px, 80vw);
  margin: var(--block-gap) auto;
}

.logo-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}

/* cells never crop the image; keep a gentle card bg */
.logo-cell{
  margin: 0;
  padding: clamp(10px, 1.2vw, 16px);
  background: #f3f4f6;
  border-radius: 16px;
  /* give the cell some natural height so images never "disappear" */
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-cell img{
  /* show original dimensions without cropping */
  width: 100%;
  height: auto;            /* key: prevents cropping & vanishing on small screens */
  object-fit: contain;
  display: block;          /* keep this; it removes inline-gap, doesn’t hide images */
}

/* row captions centered between rows */
.row-caption{
  margin: 8px 0 var(--block-gap);
  font-size: clamp(12px, .9vw, 14px);
  color: var(--text-color-light);
  text-align: center;
}

/* Small screens: stack each row to one column so nothing gets squeezed away */
@media (max-width: 900px){
  .logo-row{ grid-template-columns: 1fr; }
  .logo-cell{ min-height: 180px; }
}

/* ---------- Visual 3-column (scoped) ---------- */
/* --- kill .prose figure/figcaption behaviors INSIDE this component --- */
.prose .figure-80.visual-3col :is(figure, figcaption, img, p){
  margin: 0 !important;
}
.figure-80.visual-3col figcaption{
  display: block;  /* neutral baseline before we flex it below */
}

/* container */
.figure-80.visual-3col{
  width: min(80vw, 1400px);
  margin: clamp(16px, 2vw, 28px) auto var(--block-gap, 32px);
}

/* 3 equal columns: force grid on the wrapper */
.figure-80.visual-3col .visual-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: clamp(12px, 1.6vw, 24px);
}

/* each column (your figure.vcell) must be flex, not table/block */
.figure-80.visual-3col .vcell{
  display: flex !important;
  flex-direction: column;
}

/* shared image-block height */
.figure-80.visual-3col .media{
  width: 100%;
  height: var(--visual-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* images fill without cropping */
.figure-80.visual-3col .media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* captions centered & tight spacing (overrides .prose figcaption) */
.figure-80.visual-3col .col-caption{
  margin: 8px 0 var(--block-gap) !important;
  min-height: 0;                 /* remove extra vertical padding */
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

:root{ --visual-h: clamp(420px, 48vh, 560px); }


/* responsive collapse */
@media (max-width: 1024px){
  .figure-80.visual-3col .visual-grid{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px){
  .figure-80.visual-3col .visual-grid{ grid-template-columns: 1fr !important; }
  :root{ --visual-h: clamp(320px, 44vh, 480px); }
}


/* Figure container: same 80% cap as your other sections */
.figure-80.apps-figure{
  width: min(80vw, 1400px);
  margin: clamp(16px, 2vw, 28px) auto var(--block-gap, 32px);
}

/* 3-col grid, airy gaps */
.apps-grid{
  --gap: clamp(12px, 1.6vw, 24px);
  --app-row-h: clamp(300px, 44vh, 520px); /* SAME height per row for every card */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* Rounded cards like logo-sketches (no visible border) */
.app-card{
  height: var(--app-row-h);          /* keeps all cards same height per row */
  background: #f3f4f6;
  border-radius: 24px;               /* rounded rectangle */
  padding: clamp(10px, 1.2vw, 16px); /* breathing room so images never kiss edge */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                  /* keeps rounded corners clean */
}

/* Image behaves like the content itself; no crop, no zoom-in */
.app-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;               /* full artwork preserved */
  display: block;
}

/* Make extra-wide assets occupy two columns on desktop/tablet */
.app-card.span-2{ grid-column: span 2; }

/* Responsive steps */
@media (max-width: 1024px){
  .apps-grid{ grid-template-columns: repeat(2, 1fr); }
  .app-card.span-2{ grid-column: span 2; } /* still spans entire row */
}
@media (max-width: 640px){
  .apps-grid{
    grid-template-columns: 1fr;
    --app-row-h: clamp(240px, 48vh, 460px); /* keep rows balanced on mobile */
  }
  .app-card.span-2{ grid-column: span 1; }
}

/* Full-bleed tiles for Applications grid */
.apps-grid .app-card{
  border-radius: 24px;
  padding: 0;                 /* remove inner gutter so image can touch edges */
  overflow: hidden;           /* clip to rounded corners */
  background: transparent;    /* no gray card bg since image fills tile */
}

.apps-grid .app-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* fill tile; allow zoom/crop as needed */
  object-position: center;
}

.apps-grid .app-card.span-2{
  background: #f3f4f6;   /* soft backdrop for the empty bands */
  padding: 0;            /* keep edges clean */
  overflow: hidden;      /* preserve rounded corners */
}

.apps-grid .app-card.span-2 img{
  object-fit: contain;   /* show whole image */
  background: transparent;
}

/* If you ever want a specific tile NOT to crop, add class 'contain' to that app-card */
.apps-grid .app-card.contain img{ object-fit: contain; background:#f3f4f6; }

/* Deliverables link: same color as body text, mint on hover */
.project-section .prose ul li a.nav-link{
  color: inherit;             /* match other list items */
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
  border-bottom: none;
}

.project-section .prose ul li a.nav-link:hover{
  color: #13c4a3;             /* mint hover */
}

/* Project deliverable links: normal text color, mint on hover */
.project-section .prose ul li a.nav-link,
.project-section .prose ul li a.ext-link-mint {
  color: inherit;            /* same as surrounding text */
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
  border-bottom: none;
}

/* Hover state: mint */
.project-section .prose ul li a.nav-link:hover,
.project-section .prose ul li a.ext-link-mint:hover {
  color: #13c4a3;            /* mint */
}

/* ==================== Project: UU Arts ==================== */
/* ---- 2-up tiles: no crop, keep original aspect, rounded ---- */

.two-up-figure{
  max-width: min(1200px, 80vw);
  margin: var(--block-gap) auto;
}

/* 2 columns; rows auto-size to the tallest item in that row */
.two-up-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: stretch;      /* grid items fill row height */
}

/* Each tile stretches to the row height; acts as a rounded frame */
.two-up-tile{
  display: flex;             /* center the image inside */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;              /* stretch to the grid row height */
  border-radius: 16px;
  overflow: hidden;          /* clean rounded corners */
  background: none;          /* no card bg */
  line-height: 0;            /* remove inline image gap */
}

/* Image keeps original aspect; no crop; touches left/right edges */
.two-up-tile > img{
  width: 100%;
  height: auto;              /* preserve aspect ratio */
  object-fit: contain;       /* never crop */
  object-position: center;
  display: block;
}

/* Caption */
.two-up-figure .figure-caption{
  margin: 8px 0 var(--block-gap);
  text-align: center;
  color: var(--text-color-light);
  font-size: clamp(12px, .9vw, 14px);
}

/* Stack on small screens */
@media (max-width: 680px){
  .two-up-grid{ grid-template-columns: 1fr; }
}

/* Kill any inherited prose/figure spacing inside this component */
.prose .two-up-figure :is(figure, figcaption, img){ margin: 0 !important; }


/* Kill any prose defaults inside this figure */
.single-tile-figure,
.single-tile {
  aspect-ratio: auto !important;
  height: auto !important;
}

/* Container: just a rounded frame that clips the image edges */
.single-tile{
  display:block;
  padding:0;
  background:none;
  border-radius:24px;
  overflow:hidden;       /* clip to rounded corners */
  line-height:0;         /* kill inline image gap */
}

/* Strong, scoped reset to beat any global "cover" rules */
.single-tile > img{
  display:block;
  width:100% !important;
  height:auto !important;              /* preserve original aspect */
  object-fit: contain !important;      /* never crop */
  object-position:center !important;
  border-radius:0;                     /* corners come from the wrapper */
}

/* In case .prose adds margins around figure/img/caption */
.prose .single-tile-figure :is(img, figure, figcaption){
  margin:0 !important;
}
.single-tile-figure .figure-caption{
  margin:8px 0 var(--block-gap,16px) !important;
  text-align:center;
}

/* ==================== Project: Turbo ==================== */
/* ===== 2-col: equal height, no crop, rounded; widths may differ ===== */
.two-col-fit-figure{
  max-width: min(1200px, 80vw);
  margin: var(--block-gap) auto;
}

/* shared height for both tiles (tweak as needed) */
:root{ --pair-h: clamp(300px, 46vh, 560px); }

.two-col-fit{
  --gap: clamp(12px, 2vw, 24px);
  display: flex;
  gap: var(--gap);
  align-items: center;     /* vertical centering while they size */
}

/* the tile is a rounded “frame” that clips the image’s corners */
.pair-tile{
  height: var(--pair-h);          /* <-- equal height */
  max-width: calc(50% - var(--gap)/2);   /* prevent overflow; widths may differ */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;               /* optional subtle card bg */
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* image fills vertically, keeps aspect ratio; no cropping */
.pair-tile > img{
  height: 100%;
  width: auto;                    /* width derives from aspect ratio */
  object-fit: contain;            /* never crop */
  display: block;
}

/* stack on small screens */
@media (max-width: 760px){
  .two-col-fit{ flex-direction: column; }
  .pair-tile{ max-width: 100%; }
}

/* ====== 5-up tiles: no crop, keep original aspect, rounded ====== */

.five-up-figure{
  max-width: min(1200px, 90vw);
  margin: var(--block-gap) auto;
}

/* 5 columns; row height driven by tallest image */
.five-up-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  align-items: stretch;   /* all tiles share row height */
  grid-auto-rows: auto;   /* row height = tallest item */
}

/* Each tile is a rounded frame */
.five-up-tile{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  line-height: 0;         /* remove inline img gap */
}

/* Image keeps original aspect; never cropped */
.five-up-tile > img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;    /* preserve aspect ratio */
  object-position: center;
  display: block;
}

/* Responsive: collapse columns on small screens (optional) */
@media (max-width: 900px){
  .five-up-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .five-up-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px){
  .five-up-grid{
    grid-template-columns: 1fr;
  }
}

/* === 3-col same-height, no-crop, rounded === */
:root{ --fit-h: clamp(260px, 38vh, 420px); }   /* tweak tile height */

.figure-80.three-col-fit-figure{
  max-width: min(1300px, 90vw);
  margin: var(--block-gap) auto;
}

.three-col-fit{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  align-items: stretch;                      /* equal tile heights in row */
}

.fit-tile{
  height: var(--fit-h);
  border-radius: 16px;
  overflow: hidden;                          /* clean rounded edges */
  background: #fff;                          /* letterbox color */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;                            /* kill inline-img gap */
}

/* Keep original aspect; never crop */
.fit-tile > img{
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center;
  display: block;
}

/* Responsive: 2 columns on tablets, 1 on phones */
@media (max-width: 980px){
  .three-col-fit{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .three-col-fit{ grid-template-columns: 1fr; }
  :root{ --fit-h: clamp(220px, 36vh, 360px); }
}


.video-wrapper{
  position: relative;
  /* pick whatever aspect ratio you want; this is 16:9 */
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden; /* rounded corners clip the video */
}

/* iframe fills the frame */
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== FILM FRAME (Vimeo embed, same edges as the rest of the page) =====
   .film-frame is a plain content-container-width wrapper (no card
   background); .film-embed is the rounded, shadowed, responsive 16:9
   box the iframe fills. Reused by both the "Robot" demo and the Sam
   interaction concept film on the OCT page. Left at .content-container's
   own padding (no padding:0 override) so the video's edges line up
   with the surrounding text/figures instead of bleeding past them. */
.film-frame {
  background: none;
}
.film-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.film-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-frame .figure-caption {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ===== HOMEPAGE TILE VIDEOS: EDGE-TO-EDGE, UNIFORM 16:9 =====
   No inner padded card: the video fills its tile directly. A fixed
   16:9 aspect-ratio on the card matches the hero videos' own export
   ratio, so object-fit:cover shows the full frame with no cropping
   and every tile stays the same height. The media is positioned
   absolute/inset:0 (same recipe as .film-embed's iframe above) rather
   than a normal-flow height:100% child. That keeps it out of the
   card's own auto-sizing entirely, so a poster image whose ratio
   doesn't match 16:9 (shown before a video's first frame decodes)
   can't drag the card's height along with it. That also means
   overflow can stay visible, so the video's own shadow isn't clipped
   at the card edge (nothing left to hold it, with no padding). Grid
   spacing (gutter to the page edge, gap between the two tiles) comes
   from the existing --page-gutter/--grid-gap tokens on
   .container/.portfolio .container, unchanged. */
.portfolio__img-link.tile-framed {
  aspect-ratio: 16 / 9;
  overflow: visible;
}
.tile-framed .tile-media,
.tile-framed .portfolio__img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* ========== 2-up paired tiles – same height, no crop, no empty space ========== */

.paired-figure{
  margin: var(--block-gap) auto;
  text-align: center;            /* keeps caption centered */
}

/* shrink-to-fit row that’s just as wide as its images */
.paired-grid{
  display: inline-flex;
  gap: clamp(12px, 2vw, 24px);
  align-items: flex-start;
}

/* override inline flex="1"/"2" so width comes only from aspect ratio */
.paired-tile{
  margin: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  flex: 0 0 auto !important;     /* important beats inline flex values */
}

/* KEY PART:
   – same height for both images in the row
   – width auto → preserves original aspect ratio
   – tile exactly matches the image → no crop, no empty space
*/
.paired-figure .paired-tile > img{
  display: block;
  height: clamp(260px, 40vw, 420px);  /* shared row height, responsive */
  width: auto;
}

/* Mobile: stack and just use full width */
@media (max-width: 700px){
  .paired-grid{
    display: block;
  }
  .paired-tile + .paired-tile{
    margin-top: clamp(12px, 2vw, 24px);
  }
  .paired-figure .paired-tile > img{
    width: 100%;
    height: auto;
  }
}

/* --- 2v3 stacks: same width as persona figure, auto height, no crop --- */

/* small gap between tiles */
:root{
  --stack-gap: clamp(10px, 1.2vw, 16px);
}

/* same width + horizontal position as other figure-80 figures */
.figure-80.stacks-2v3-figure{
  max-width: min(1200px, 80vw);   /* matches .figure-80 & .two-col-fit-figure */
  width: 100%;
  margin: var(--block-gap) auto;  /* same vertical spacing as persona figure */
}

/* two columns; height is auto (no fixed vh height) */
.stacks-2v3{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;  /* left column slightly wider, like before */
  column-gap: var(--stack-gap);
  align-items: flex-start;
}

/* each column is a vertical stack of images */
.stacks-2v3 .stack{
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* rounded tiles; height driven by image aspect ratio */
.stacks-2v3 .stack-tile{
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  line-height: 0;
}

/* images scale down, keep ratio, never crop */
.stacks-2v3-figure .stack-tile > img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* responsive: stack columns on small screens */
@media (max-width: 720px){
  .stacks-2v3{
    grid-template-columns: 1fr;
  }
}
/* ===== ABOUT PAGE ===== */
.about-hero.section {
  padding-top: calc(var(--header-height) + clamp(2rem, 4vh, 3rem));
  padding-bottom: clamp(2rem, 4vh, 3rem);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
}

.about-hero__img {
  width: 100%;
}

.about-hero__img img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.about-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint-color);
  margin-bottom: 0.75rem;
}

.about-name {
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--title-color);
  font-family: var(--display-font);
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.about-role {
  font-size: 0.95rem;
  color: var(--text-color-light);
  margin-bottom: 1.75rem;
}

.about-bio {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-color);
  max-width: 52ch;
}
.about-bio + .about-bio {
  margin-top: 1.25rem;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.about-tag {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  color: var(--text-color);
  background: #f9fafb;
}

.about-section.section {
  padding-block: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid #f3f4f6;
}

.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
}

.about-col-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-color-light);
  margin-bottom: 0.75rem;
}

.about-col-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-color);
}

@media (max-width: 768px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
  }
  .about-hero__img {
    order: -1;
    max-width: 280px;
  }
  .about-two-col {
    grid-template-columns: 1fr;
  }
}
/* smooth scroll for in-page anchors */
html {
  scroll-behavior: smooth;
}

/* ---------- HEADER NAV ---------- */

.site-menu {
  list-style: none;
  display: flex;
  gap: 3rem;                 /* adjust spacing between items if you like */
  align-items: center;
  margin: 0;
  padding: 0;
}

.site-menu .nav-link {
  position: relative;
  color: #6b7280;            /* grey */
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 0.2rem;
  transition: color 0.25s ease;
}

/* single underline that animates in */
.site-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 0;
  height: 2px;
  background-color: #111827; /* black */
  transition: width 0.25s ease;
}

/* active state: black text + full-width underline */
.site-menu .nav-link.active {
  color: #111827;
}

.site-menu .nav-link.active::after {
  width: 100%;
}
/* (keeps your earlier rules for columns/tiles/heights as-is) */

/* ===== Reveal Up Animation ===== */
/* ===== Global scroll reveal ===== */
.reveal-up {
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* slightly softer version for small text blocks if needed later */
.reveal-up--soft {
  transform: translate3d(0, 28px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-up.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== PERSONA SWITCHER ===== */
.persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2.25rem;
}

.persona-tab {
  background: transparent;
  border: 1.5px solid #ccc;
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: #888;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.persona-tab:hover {
  border-color: #555;
  color: #333;
}

.persona-tab.active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.home__resume-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--mint-color);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.home__resume-link[hidden] { display: none; }

/* ===== HERO TAB-SWITCH REVEAL =====
   Click-triggered only (see main.js). Base state is fully visible,
   safe if JS hasn't run yet. .is-exiting fades old copy out quickly;
   .is-priming snaps new copy invisible with no transition so that
   removing it (in main.js) animates it back in, staggered per line
   via an inline transition-delay. */
#heroCopy [data-copy-title],
#heroCopy [data-copy-line],
#heroCopy [data-copy-link] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
#heroCopy .is-exiting {
  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
  opacity: 0;
  transform: translateY(-6px);
}
#heroCopy .is-priming {
  transition: none;
  opacity: 0;
  transform: translateY(12px);
}

/* ---- Tab 1 (For Anyone): marker-stroke mint reveal ----
   Scoped to the .mint-text descendant, not [data-mint-mode="reveal"]
   itself: that attribute sits on .reveal-trigger, which also holds
   the absolutely-positioned .hero-reveal-img popup. clip-path clips
   the whole element's painted output including out-of-flow children,
   so putting it directly on .reveal-trigger clipped the popup image
   away permanently (clip-path: inset(0 0 0 0) still only paints within
   .reveal-trigger's own box, and the image renders outside that box
   by design). Scoping it to .mint-text leaves .reveal-trigger itself
   clip-free, so the sibling popup image can render normally. */
[data-mint-mode="reveal"] .mint-text {
  /* inline-block gives the phrase one unified border box (even when
     its own text wraps onto a 2nd line), so clip-path has a single
     consistent box to animate. clip-path on a plain `inline` element
     clips per line fragment and gets stuck once the phrase wraps. */
  display: inline-block;
  max-width: 100%;
  clip-path: inset(0 100% 0 0);
  /* delay matches the headline's own enter animation (0ms stagger,
     0.3s duration) so the marker-stroke reveal starts once it lands */
  transition: clip-path 0.4s ease-out 0.3s;
}
[data-mint-mode="reveal"].is-revealed .mint-text {
  clip-path: inset(0 0 0 0);
}

/* ---- Tab 2 (Recruiters): scramble mint + stat chips ----
   The scramble effect is driven entirely by main.js swapping
   textContent, so the span itself needs no extra transition, just
   the same wrap-safe box as the reveal mode. */
[data-mint-mode="scramble"] {
  display: inline-block;
  max-width: 100%;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.hero-chips[hidden] { display: none; }

/* Pill styling matches .persona-tab: light border, no fill */
.hero-chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #ccc;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  color: #555;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.hero-chip.is-in {
  opacity: 1;
  transform: scale(1);
}

/* ---- Tab 3 (Designers): pipeline word reveal + segmented subline ---- */
.text-mint-word {
  position: relative;
  color: var(--mint-color);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.text-mint-word.is-in {
  opacity: 1;
}
/* thin underline marks a step as "done" once the next one starts */
.text-mint-word.is-done::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  opacity: 0.45;
}

.pipeline-segment {
  /* pale/unlit, clearly lighter than the line's own resting color
     (--text-color-light) so "lighting up" reads as a real change */
  color: #dde0e5;
  transition: color 0.25s ease-out;
}
.pipeline-segment.is-lit {
  color: var(--text-color);
}
.pipeline-arrow {
  color: #dde0e5;
}

@media (prefers-reduced-motion: reduce) {
  #heroCopy [data-copy-title],
  #heroCopy [data-copy-line],
  #heroCopy [data-copy-link],
  #heroCopy .is-exiting,
  #heroCopy .is-priming {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-mint-mode="reveal"] .mint-text {
    transition: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .hero-chip {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .text-mint-word {
    transition: none !important;
    opacity: 1 !important;
  }
  .pipeline-segment {
    transition: none !important;
    color: var(--text-color) !important;
  }
}

/* ===== HERO LOAD-IN ANIMATION =====
   Load-triggered only (not scroll). main.js toggles body.loaded;
   everything else is CSS. Hidden by default so there's no flash of the
   settled state before the animation runs; .loaded's animation uses
   `both` fill-mode so it holds the "from" values through its own delay
   and the "to" values after it finishes. Once main.js is confident the
   animation has had time to finish, it adds body.is-settled, which
   pins the resting opacity/transform explicitly (independent of the
   animation's hold) and clears each element's inline animation so the
   persona tab-switch transitions underneath work normally again. */
@keyframes heroLoadIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.persona-tabs,
#heroCopy [data-copy-title],
#heroCopy [data-copy-line] {
  opacity: 0;
  transform: translateY(12px);
}

body.loaded .persona-tabs {
  animation: heroLoadIn 0.7s ease both;
  animation-delay: 0.1s;
}
body.loaded #heroCopy [data-copy-title] {
  animation: heroLoadIn 0.7s ease both;
  animation-delay: 0.25s;
}
body.loaded #heroCopy [data-copy-line] {
  animation: heroLoadIn 0.7s ease both;
  animation-delay: 0.4s;
}

body.is-settled .persona-tabs,
body.is-settled #heroCopy [data-copy-title],
body.is-settled #heroCopy [data-copy-line] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .persona-tabs,
  #heroCopy [data-copy-title],
  #heroCopy [data-copy-line] {
    opacity: 1 !important;
    transform: none !important;
  }
  body.loaded .persona-tabs,
  body.loaded #heroCopy [data-copy-title],
  body.loaded #heroCopy [data-copy-line] {
    animation: none !important;
  }
}

/* ===== RESPONSIVE LAYOUT FIX ===== */

/* Wider container on large screens */
@media (min-width: 1400px) {
  :root { --container-max: 1400px; }
}

@media (min-width: 1600px) {
  :root { --container-max: 1560px; }
}

/* Reduce excessive side padding on large screens */
@media (min-width: 1200px) {
  :root {
    --page-gutter: clamp(20px, 2vw, 36px);
  }
}

/* Hero: capped to ~65vh so the first portfolio row peeks into the
   first viewport on a 13" laptop instead of requiring a scroll */
.home.section {
  padding-top: calc(var(--header-height) + clamp(1rem, 2vh, 1.5rem));
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  /* no max-height: #heroCopy reserves its own min-height (main.js) to
     fit the tallest persona's copy, so this can grow past 65vh rather
     than clip/overlap the portfolio section on longer copy */
  min-height: calc(65vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  /* very faint depth wash behind the hero copy */
  background-image: radial-gradient(ellipse at 20% 30%, rgba(26, 122, 94, 0.04), transparent 60%);
}

/* Hero uses the same .container box as the nav and the portfolio grid
   below it (already in the HTML's class list) instead of its own
   full-bleed grid, so its left edge lines up with the nav logo and
   the tiles instead of sitting one grid column further in. */
.home__data {
  width: 100%;
}

/* ===== HERO REVEAL IMAGE (see assets/js/main.js renderTitleHTML) =====
   Pure CSS: hovering/focusing the mint phrase reveals a small tilted
   image nested inside it, positioned just to its right. Adds info
   rather than gating it, exempt from the site's no-hover-dependent-
   interaction rule for that reason. Hidden outright on touch devices,
   where hover has no equivalent. */
.reveal-trigger {
  position: relative;
  color: var(--mint-color);
  cursor: pointer;
  border-radius: 2px;
}
.reveal-trigger:focus-visible {
  outline: 2px solid var(--mint-color);
  outline-offset: 2px;
}
.hero-reveal-img {
  position: absolute;
  left: calc(100% + 1rem);
  top: 50%;
  width: clamp(150px, 20vw, 260px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.9) rotate(-6deg);
  transition: opacity 0.4s ease, transform 0.5s ease;
  z-index: 5;
}
.reveal-trigger:hover .hero-reveal-img,
.reveal-trigger:focus-visible .hero-reveal-img {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal-img {
    transition: opacity 0.2s ease;
    transform: translateY(-50%);
  }
  .reveal-trigger:hover .hero-reveal-img,
  .reveal-trigger:focus-visible .hero-reveal-img {
    transform: translateY(-50%);
  }
}
@media (hover: none) {
  .hero-reveal-img { display: none; }
}

.home__title {
  font-family: "ClashGrotesk", "Inter", sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 4rem);
  font-weight: 500;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  /* fills whatever column span .home__data is placed on */
  width: 100%;
  color: #1f1f29;
  text-wrap: balance;
}

.home__subtitle {
  font-size: clamp(0.9rem, 1.1vw, 1.25rem);
  color: var(--text-color-light);
  margin-top: 0.75rem !important;
  letter-spacing: 0.01em;
}

/* tighter gap between the two subtitle lines than title → first subtitle */
.home__subtitle + .home__subtitle {
  margin-top: 0.35rem !important;
}

.persona-tabs {
  margin-bottom: 1.5rem;
}

/* ===== PROBLEM / SOLUTION ROW: REVISED ===== */
.problem-solution-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 3rem;
  align-items: start;
  padding: 3rem 0 2rem;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 3rem;
}

.ps-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-color);
  font-weight: 700;
  margin-bottom: 1rem;
}

.ps-text {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.65;
  color: var(--title-color);
  font-weight: 500;
}

.ps-divider {
  background: #e5e7eb;
  height: 100%;
  min-height: 100px;
}

@media (max-width: 680px) {
  .problem-solution-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ps-divider { display: none; }
}

/* ===== DECISION CARDS: REVISED ===== */
.decision-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.decision-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem 1.75rem;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: auto;          /* ← 추가: 고정 height 제거 */
  min-height: 0;         /* ← 추가 */
  overflow: visible;  
}

.decision-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mint-color);
  margin-bottom: 0.25rem;
}

.decision-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0;
  line-height: 1.3;
}

.decision-card p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-color);
  margin: 0;
}

@media (max-width: 1024px) {
  .decision-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .decision-cards { grid-template-columns: 1fr; }
}

/* ===== PROJECT SECTION HEADINGS: MORE CONTRAST ===== */
.project .project-section h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--title-color);
  margin-bottom: 0.5rem;
}

.project .project-section h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--title-color);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.project .project-section h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-color);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* Section label eyebrow above h2 */
.section-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-color-light);
  display: block;
  margin-bottom: 0.6rem;
}

/* Larger intro lede */
.project__lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  line-height: 1.8 !important;
  color: var(--title-color) !important;
  font-weight: 400;
}

/* More breathing room between sections */
.project .project-section {
  padding-block: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid #f3f4f6;
}

.project .project-section:first-of-type {
  border-top: none;
}

/* ===== PORTFOLIO GRID REDESIGN ===== */

/* Section header: left-aligned, small eyebrow style */
.portfolio.section .section__title {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color-light);
  margin-bottom: 3rem;
}

/* Card layout */
.portfolio__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Homepage tile hover-lift: an intentional affordance for the
   clickable project cards (distinct from decorative hover on plain
   images/figures elsewhere on the site, which stays removed). Whole
   card lifts + scales as one unit; .tile-framed's overflow:visible
   means nothing clips. Gap between tiles (.portfolio .container's
   column-gap/row-gap) is already sized so a scaled tile can't touch
   its neighbor. */
.portfolio__content {
  transform-origin: center;
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .portfolio__content:hover {
    transform: translateY(-8px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio__content {
    transition: none;
  }
  .portfolio__content:hover {
    transform: none;
  }
}

/* Image (or .tile-media video, same frame either way, see below) */
.portfolio__img-link {
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Data block */
.portfolio__data {
  padding: 1.1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Title + year row */
.portfolio__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.portfolio__title {
  margin: 0;
  font-family: "ClashGrotesk", "Inter", sans-serif;
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1f1f29;
}

.portfolio__title-link {
  color: inherit;
  text-decoration: none;
}

.portfolio__title a,
.portfolio__title-link {
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.portfolio__title a:hover,
.portfolio__title-link:hover {
  color: var(--mint-color);
}

/* Tags: small, right-aligned, minimal */
.portfolio__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  margin: 0;
}

.portfolio__tags .tag {
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: transparent;
  color: #9ca3af;
  white-space: nowrap;
}

/* Description: short, one line, muted */
.portfolio__description {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}


/* Mobile: all single column */
@media (max-width: 767px) {
  .portfolio__tags {
    justify-content: flex-start;
  }
}

/* Blinking cursor for designers panel */
.mint-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--mint-color);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.9s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Prose max-width: the single biggest readability fix */
.project-section .prose p,
.project-section .prose ul,
.project-section .prose ol {
  max-width: 68ch;
}

/* Takeaway line per section */
.section-takeaway {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mint-color);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  max-width: none;
}

/* Flow path */
.flow-path {
  font-style: italic;
  color: var(--text-color-light);
  font-size: 0.95rem;
}

/* Section subhead (below h2) */
.section-subhead {
  color: var(--text-color);
  margin-bottom: 2rem;
}

/* WIP tag */
.wip-tag {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--text-color-light);
}

/* ===== SECTION NUMBER + TITLE ===== */
.section-number {
  font-size: 0.85rem;
  color: var(--mint-color);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
.section-icon-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

/* ===== PULL QUOTE ===== */
.pull-quote-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.pull-quote {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote-headline {
  font-family: var(--display-font);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--title-color);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.pull-quote-body {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.7;
  margin: 0;
}

/* ===== ALERT STATEMENT (icon + bold ink line, subtle tinted card) =====
   For a single plain-language problem statement, no big colored
   headline, just a small icon and normal-weight bold ink text inside
   a light mint-tinted card. Reusable anywhere a mint-pullquote would
   be too loud. */
.alert-statement {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: color-mix(in oklab, var(--mint-color) 6%, transparent);
  border-radius: 12px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
}
.alert-statement__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--mint-color) 14%, transparent);
}
.alert-statement__icon i {
  font-size: 1.05rem;
  color: var(--mint-color);
}
.alert-statement__headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--title-color);
  line-height: 1.5;
  margin: 0 0 0.35rem;
}
.alert-statement__support {
  font-size: 0.9rem;
  color: var(--text-color-light);
  line-height: 1.6;
  margin: 0;
}
/* Danger variant: same shape, red instead of mint (real-stakes problem framing) */
.alert-statement--danger {
  background: color-mix(in oklab, #dc2626 7%, transparent);
}
.alert-statement--danger .alert-statement__icon {
  background: color-mix(in oklab, #dc2626 15%, transparent);
}
.alert-statement--danger .alert-statement__icon i {
  color: #dc2626;
}
/* Success variant: same shape, green (what worked, not what's wrong) */
.alert-statement--success {
  background: color-mix(in oklab, #16a34a 7%, transparent);
}
.alert-statement--success .alert-statement__icon {
  background: color-mix(in oklab, #16a34a 15%, transparent);
}
.alert-statement--success .alert-statement__icon i {
  color: #16a34a;
}
/* Bulleted-list body, for when an alert-statement holds findings
   instead of a single headline + support line. */
.alert-statement__list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--text-color-light);
  line-height: 1.6;
}
.alert-statement__list li {
  margin-bottom: 0.4rem;
}
.alert-statement__list li:last-child {
  margin-bottom: 0;
}
.alert-statement__list strong {
  color: var(--title-color);
}

/* ===== MINT PULL-QUOTE (accented callout, left-aligned) ===== */
.mint-pullquote {
  max-width: 640px;
  margin: 0 auto;
  border-left: 3px solid var(--mint-color);
  background: color-mix(in oklab, var(--mint-color) 6%, transparent);
  border-radius: 0 12px 12px 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
}
.mint-pullquote-headline {
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 700;
  color: var(--mint-color);
  margin: 0 0 0.85rem;
  line-height: 1.25;
}
.mint-pullquote-body {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.7;
  margin: 0;
}

/* ===== PRINCIPLE CALLOUT (centered, bold statement) =====
   For a single hard-won principle stated as fact, not a question:
   centered instead of left-rule-accented so it reads as a standalone
   declaration rather than a quoted excerpt. */
.principle-callout {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: color-mix(in oklab, var(--mint-color) 6%, transparent);
  border-radius: 16px;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}
.principle-callout__headline {
  font-family: var(--display-font);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--mint-color);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.principle-callout__body {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== FEATURE TAB SHOWCASE (click-only ARIA tabs) =====
   Reusable tabbed panel: a mint-underlined tab bar switches which
   panel (image + heading + caption) is visible below it. Switching
   is a hard show/hide via the `hidden` attribute, no animation to
   gate under prefers-reduced-motion, only the tab underline's own
   color transition needs disabling there. See assets/js/main.js for
   the click/arrow-key switching logic (role=tablist/tab/tabpanel). */
.hbom-tabs__bar {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem auto 0;
  gap: 0.25rem;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 0.3rem;
}
.hbom-tabs__tab {
  appearance: none;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color-light);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.hbom-tabs__tab:hover {
  color: var(--title-color);
}
.hbom-tabs__tab:focus-visible {
  outline: 2px solid var(--mint-color);
  outline-offset: 2px;
}
.hbom-tabs__tab[aria-selected="true"] {
  background: var(--mint-color);
  color: #fff;
}
.hbom-tabs__panel {
  display: none;
  grid-template-columns: 1.85fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: 2rem;
}
.hbom-tabs__panel.is-active {
  display: grid;
}
.hbom-tabs__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f6f7;
}
.hbom-tabs__media img {
  display: block;
  width: 100%;
  height: auto;
}
.hbom-tabs__copy h3 {
  font-family: "ClashGrotesk", "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0 0 0.6rem;
}
.hbom-tabs__copy p {
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 760px) {
  .hbom-tabs__panel {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hbom-tabs__tab { transition: none; }
}

/* ===== HMW CALLOUT (mint-accent, left-aligned) ===== */
.hmw-callout {
  max-width: 720px;
  margin: 0 auto;
  border-left: 3px solid var(--mint-color);
  background: color-mix(in oklab, var(--mint-color) 6%, transparent);
  border-radius: 0 12px 12px 0;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3.5vw, 2.25rem);
}
.hmw-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--mint-color);
  margin: 0 0 0.6rem;
}
.hmw-callout p {
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: var(--title-color);
  line-height: 1.4;
  margin: 0;
}

/* ===== CASE STUDY LEAD BANNER (contained, cropped from top) ===== */
.case-hero-banner {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background: #f7f9f8;
}
.case-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 640px) {
  .case-hero-banner { aspect-ratio: 4 / 3; }
}

/* ===== DESIGNING UNDER CONSTRAINTS ===== */
.constraint-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: 2rem;
}
.constraint-num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mint-color);
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
.constraint-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0 0 1.25rem;
}
.constraint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.constraint-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.constraint-label--constraint {
  color: var(--text-color-light);
}
.constraint-label--response {
  color: var(--mint-color);
}
.constraint-text {
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 700px) {
  .constraint-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ===== DESIGN PRINCIPLES (reuses .constraint-block/.constraint-num above) ===== */
.principle-rows {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.principle-statement {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: var(--title-color);
  margin: 0;
}

/* ===== INTERACTION SYSTEM: PRINCIPLES STRIP ===== */
.principles-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.principles-strip-item {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--title-color);
}
.principles-strip-sep {
  color: var(--mint-color);
  font-weight: 700;
}
.spec-link {
  display: inline-block;
  margin-top: 2rem;
  color: var(--mint-color);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== INTERACTION SYSTEM: SWIMLANE TIMELINE (reuses .principle-card look) ===== */
.swimlane-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.swimlane-col {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.swimlane-stage {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0 0 0.15rem;
}
.swimlane-row {
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
}
.swimlane-row--sam {
  background: rgba(26, 122, 94, 0.08);
}
.swimlane-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-color-light);
  margin: 0 0 0.3rem;
}
.swimlane-row-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-color);
  margin: 0;
}
.swimlane-caption {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-color-light);
  font-style: italic;
}
@media (max-width: 1100px) {
  .swimlane-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .swimlane-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .swimlane-grid { grid-template-columns: 1fr; }
}

/* ===== INTERACTION SYSTEM: FAILURE STATES TABLE ===== */
.failure-intro {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-color);
}
.failure-assumptions {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: var(--text-color-light);
}
.failure-table-wrap {
  width: 100%;
  overflow-x: visible;
}
.failure-table {
  width: 100%;
  border-collapse: collapse;
}
.failure-table th,
.failure-table td {
  text-align: left;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-color);
  vertical-align: top;
}
.failure-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-color-light);
  border-bottom: 2px solid #d1d5db;
}
.failure-never {
  margin-top: 2rem;
}
.failure-never-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--title-color);
  margin: 0 0 0.75rem;
}
.failure-never-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.failure-never-list li {
  position: relative;
  padding-left: 1.1rem;
  font-weight: 600;
  color: var(--title-color);
  font-size: 0.95rem;
  line-height: 1.5;
}
.failure-never-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-color);
}
@media (max-width: 720px) {
  .failure-table thead { display: none; }
  .failure-table, .failure-table tbody, .failure-table tr, .failure-table td {
    display: block;
    width: 100%;
  }
  .failure-table tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid #e5e7eb;
  }
  .failure-table td {
    border: none;
    padding: 0.35rem 0;
  }
  .failure-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: 0.2rem;
  }
}

/* ===== PRINCIPLE CARDS (Research section) ===== */
.principle-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.principle-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.principle-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.principle-icon i { font-size: 1rem; }
.principle-card strong {
  font-size: 0.95rem;
  color: var(--title-color);
}
.principle-card p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-color);
  margin: 0;
}
@media (max-width: 700px) {
  .principle-row { grid-template-columns: 1fr; }
}

/* ===== VISUAL SYSTEM SPEC CARDS ===== */
.visual-system-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.vspec-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vspec-icon-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.vspec-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vspec-icon i { font-size: 0.9rem; }
.vspec-card strong {
  font-size: 0.9rem;
  color: var(--title-color);
}
.vspec-card p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-color);
  margin: 0;
}
@media (max-width: 700px) {
  .visual-system-specs { grid-template-columns: 1fr; }
}

/* ===== DELIVERABLES TAGS ===== */
.deliverables-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.deliverable-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--title-color);
  border: 1px solid #e5e7eb;
  text-decoration: none;
}
.deliverable-tag--link {
  background: var(--mint-color);
  color: #fff;
  border-color: var(--mint-color);
}
.deliverable-tag--link:hover { opacity: 0.88; }

/* ===== TL;DR 2×2 CARD GRID ===== */
.tldr-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.tldr-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tldr-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tldr-card-icon i {
  font-size: 1.6rem;
  color: #fff;
}

.tldr-card-icon--red    { background-color: #ef4444; }
.tldr-card-icon--amber  { background-color: #f59e0b; }
.tldr-card-icon--mint   { background-color: var(--mint-color); }
.tldr-card-icon--blue   { background-color: #3b82f6; }

.tldr-card-label {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 700;
  color: var(--title-color);
  font-family: var(--display-font);
  margin: 0;
}

.tldr-card-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-color);
  margin: 0;
}

@media (max-width: 600px) {
  .tldr-grid-2x2 { grid-template-columns: 1fr; }
}

.testing-outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
}
.testing-outcome p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-color);
  margin: 0;
}

/* ===== TESTING SCENARIO BOX ===== */
.testing-scenario-box {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.testing-box-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-color-light);
  margin-bottom: 1.25rem;
}
.testing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.testing-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.testing-card i {
  font-size: 1.5rem;
  color: var(--mint-color);
}
.testing-card strong {
  font-size: 0.9rem;
  color: var(--title-color);
}
.testing-card p {
  font-size: 0.8rem;
  color: var(--text-color);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .testing-cards { grid-template-columns: repeat(2, 1fr); }  /* ← 추가 */
}

@media (max-width: 700px) {
  .testing-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ===== PHYSICAL COMPANION: THUMBNAIL GRID + LIGHTBOX =====
   Click-only enlargement (see assets/js/main.js). No hover reveal,
   no auto-play, no decorative motion; the only animation is a
   ~150ms opacity fade on open/close, itself disabled below under
   prefers-reduced-motion. */
.physical-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22vw, 200px), 1fr));
  gap: var(--grid-gap);
}
.physical-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  cursor: pointer;
  line-height: 0;
}
.physical-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.physical-thumb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-color) 35%, transparent);
}
@media (max-width: 900px) {
  .physical-thumb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .physical-thumb-grid { grid-template-columns: 1fr; }
}

/* ---- Lightbox ---- */
.physical-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.physical-lightbox[hidden] { display: none; }
.physical-lightbox.is-open { opacity: 1; }
.physical-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.6);
}
.physical-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(90vw, 900px);
  padding: 0 clamp(2.25rem, 6vw, 3.5rem);
  box-sizing: border-box;
}
.physical-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.physical-lightbox-caption {
  color: #fff;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  max-width: 60ch;
}
.physical-lightbox-close,
.physical-lightbox-prev,
.physical-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--title-color);
  font-size: 1.1rem;
  cursor: pointer;
}
.physical-lightbox-close { top: -0.5rem; right: 0; }
.physical-lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); }
.physical-lightbox-next { right: 0; top: 50%; transform: translateY(-50%); }
.physical-lightbox-close:focus-visible,
.physical-lightbox-prev:focus-visible,
.physical-lightbox-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-color) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .physical-lightbox { transition: none !important; }
}

/* ===== GENERIC LIGHTBOX (reusable) =====
   Same pattern as .physical-lightbox above, generalized: centered,
   capped to 90vw/85vh, closes via backdrop/Esc/close button. Content
   is open-ended (.lightbox-content), not tied to a single image. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.6);
}
.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-sizing: border-box;
}
.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--title-color);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-color) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none !important; }
}

/* ===== CHARACTER BEFORE/AFTER (Wearby: sketches → final) =====
   Fully static: no JS, no toggle, no drag. Side-by-side on desktop,
   stacks with the arrow rotated 90deg on narrow screens. */
.char-before-after {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.char-before-after-item {
  flex: 1;
  min-width: 0;
}
.char-before-after-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}
.char-before-after-img {
  display: block;
  width: 100%;
  max-width: clamp(200px, 30vw, 320px);
  height: auto;
  border-radius: 16px;
  background: #f7f9f8;
}
.char-before-after-arrow {
  flex-shrink: 0;
  color: var(--mint-color);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1;
}
.char-evolution-caption {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--text-color-light);
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 640px) {
  .char-before-after {
    flex-direction: column;
    align-items: flex-start;
  }
  .char-before-after-arrow {
    align-self: center;
    transform: rotate(90deg);
  }
  .char-before-after-img {
    max-width: clamp(200px, 60vw, 320px);
  }
}

/* ===== MISC CLUSTER (radial nodes on desktop, collapses to a
   single-column list below ~760px). See assets/js/main.js for the
   drag-to-rotate and optional auto-drift logic. Node positions are
   plain translate() offsets computed in JS from --cluster-radius, so
   the radius itself stays a normal responsive CSS value here. ===== */
.misc-cluster-section {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.misc-cluster {
  --cluster-radius: clamp(189px, 46.2vw, 462px);
  position: relative;
  width: 100%;
  max-width: 1344px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  touch-action: none;
  cursor: grab;
}
.misc-cluster.is-dragging {
  cursor: grabbing;
}
/* Invisible probe so JS can read --cluster-radius as a resolved pixel
   value (getComputedStyle().getPropertyValue on a custom property
   returns its literal clamp() text, not the computed length). */
.misc-cluster-radius-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  width: var(--cluster-radius);
  height: 0;
}
.misc-cluster-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.misc-cluster-center-label {
  font-family: var(--display-font);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--title-color);
  margin: 0;
}
/* IDs, not just classes: .project .project-section ul/li (further up
   this file) outrank a single class on specificity and would otherwise
   restore bullets and prose line-height/margin here. */
#miscNodeList {
  list-style: none;
  margin: 0;
  padding: 0;
}
#miscNodeList .misc-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  line-height: normal;
  margin: 0;
}
.misc-node-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  padding: 0.35rem;
  border-radius: 12px;
  transition: transform 0.15s ease;
}
.misc-node-link:hover,
.misc-node-link:focus-visible {
  transform: scale(1.08);
}
.misc-node-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-color) 40%, transparent);
}
.misc-node-thumb {
  width: clamp(110px, 16.8vw, 159px);
  height: clamp(110px, 16.8vw, 159px);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.misc-node-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.misc-node-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--title-color);
  white-space: nowrap;
}
.misc-node-desc {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .misc-node-link { transition: none !important; }
}

/* ---- Custom "View" cursor pill (see assets/js/main.js) ----
   Replaces the default pointer with a mint pill while hovering a node;
   scoped to misc nodes only, mouse/trackpad only. */
@media (hover: hover) and (pointer: fine) {
  .misc-node-link {
    cursor: none;
  }
}
.misc-cursor-pill {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--mint-color);
  color: #fdfcf9;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.15s ease;
  white-space: nowrap;
}
.misc-cursor-pill.is-visible {
  opacity: 1;
}
.misc-cursor-pill i {
  font-size: 0.85rem;
}
@media (hover: none), (pointer: coarse) {
  .misc-cursor-pill { display: none; }
}

/* ---- Collapse to a single-column list below ~760px: required, not optional ---- */
@media (max-width: 760px) {
  .misc-cluster {
    max-width: none;
    aspect-ratio: auto;
    touch-action: auto;
    cursor: auto;
  }
  .misc-cluster-center { display: none; }
  #miscNodeList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #miscNodeList .misc-node {
    position: static;
    margin: 0;
    transform: none !important;
  }
  .misc-node-link {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
  }
  .misc-node-link:hover,
  .misc-node-link:focus-visible {
    transform: none;
  }
  .misc-node-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  .misc-node-title {
    white-space: normal;
  }
  .misc-node-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--text-color-light);
    line-height: 1.5;
  }
}

/* ===== ITERATION LIST ===== */
.iteration-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.iteration-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.iteration-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-color-light);
  padding-top: 1rem;
  flex-shrink: 0;
  width: 24px;
}
.iteration-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.iteration-problem {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.iteration-solution {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.iteration-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.iteration-label--problem { color: #dc2626; }
.iteration-label--solution { color: #16a34a; }
.iteration-problem p,
.iteration-solution p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-color);
  margin: 0;
}
@media (max-width: 700px) {
  .iteration-body { grid-template-columns: 1fr; }
  .iteration-item { flex-direction: column; }
}

/* ===== CHART AXIS LABELS + LEGEND (shared by the journey scrubber) ===== */
.arc-axis-label {
  font-size: 11px;
  font-family: var(--body-font);
  fill: var(--text-color-light);
}
.arc-x-label {
  font-size: 11px;
  font-family: var(--body-font);
  fill: var(--text-color-light);
  text-anchor: middle;
}
.emotional-arc-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-color);
}
.arc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.arc-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.arc-legend-swatch--standard {
  background-image: repeating-linear-gradient(to right, var(--text-color-light) 0 4px, transparent 4px 7px);
}
.arc-legend-swatch--sam {
  background: #1a7a5e;
}

/* ===== JOURNEY CHART (static, see the "Journey We Set Out to Change"
   section in projects/oct/index.html) ===== */
.journey-chart {
  max-width: 680px;
  margin: 0 auto;
}
.journey-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.scrubber-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scrubber-line--without {
  stroke: var(--text-color-light);
  stroke-dasharray: 6 5;
}
.scrubber-line--with {
  stroke: #1a7a5e;
}
.arc-points circle {
  stroke: #fff;
  stroke-width: 1.5;
}
.arc-points--without circle {
  fill: var(--text-color-light);
}
.arc-points--with circle {
  fill: #1a7a5e;
}
/* Widest-gap annotation: First contact -> During exam */
.arc-zone-band {
  fill: rgba(26, 122, 94, 0.07);
}
.arc-zone-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: #1a7a5e;
}
.journey-chart-takeaway {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-color);
  line-height: 1.6;
}

/* ===== IMPACT GRID ===== */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%; 
}
.impact-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.impact-number {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--mint-color);
  font-family: var(--display-font);
  margin: 0;
  line-height: 1;
}
.impact-label {
  font-size: 0.85rem;
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 700px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== QUOTE CARDS ===== */
.quote-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.quote-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quote-card::before {
  content: "\201C";
  font-size: 3rem;
  line-height: 1;
  color: var(--mint-color);
  opacity: 0.4;
  font-family: var(--display-font);
  display: block;
  margin-bottom: -0.5rem;
}

.quote-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--title-color);
  font-style: italic;
  margin: 0;
}

.quote-card span {
  font-size: 0.75rem;
  color: var(--text-color-light);
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .quote-cards { grid-template-columns: 1fr; }
}

/* ===== LEARNINGS LIST ===== */
.learnings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.learning-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.learning-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--mint-color);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.learning-item strong {
  font-size: 0.95rem;
  color: var(--title-color);
  display: block;
  margin-bottom: 0.3rem;
}

.learning-item p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-color);
  margin: 0;
}

.user-context-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}
.user-context-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-color);
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .user-context-row { grid-template-columns: 1fr; }
}

/* portfolio card: name / description / tags 순서 */
.portfolio__title-row {
  display: contents; /* wrapper 제거 효과 */
}

.portfolio__tags {
  justify-content: flex-start;
  margin-top: 0.4rem;
}

.portfolio__tags .tag {
  border-radius: 20px;
}

/* ===== STORY STEPS ===== */
.story-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 100%;
}
.story-step-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mint-color);
  padding-top: 0.25rem;
  flex-shrink: 0;
  width: 24px;
}
.story-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 0.5rem;
}
.story-step-body p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0;
}

/* ===== PERSONA CARDS ===== */
.persona-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.persona-card {
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.persona-card--red {
  background: #fff5f5;
  border: 1px solid #fecaca;
}
.persona-card--blue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.persona-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.persona-age {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color-light);
}
.persona-emotion {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--title-color);
}
.persona-quote {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--title-color);
  margin: 0;
  line-height: 1.6;
}
.persona-need {
  font-size: 0.85rem;
  color: var(--text-color);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .persona-pair { grid-template-columns: 1fr; }
  .story-step { flex-direction: column; gap: 0.5rem; }
  .iteration-body { grid-template-columns: 1fr; }
}

/* Three-up variant of .persona-card (the pair grid above is hardcoded
   to two columns), neutral mint tint since these three aren't an
   emotional contrast pair, just parallel personas. */
.persona-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.persona-card--mint {
  background: color-mix(in oklab, var(--mint-color) 6%, #fff);
  border: 1px solid color-mix(in oklab, var(--mint-color) 25%, transparent);
}
.persona-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-color);
}
@media (max-width: 760px) {
  .persona-trio { grid-template-columns: 1fr; }
}

/* ===== EDITORIAL LABEL/CONTENT ROW =====
   Grace Ma/Helios-style rhythm: a narrow mint caps label on the left,
   prose on the right, repeated section to section instead of each
   getting its own full heading treatment. Reusable beyond hbom. */
.case-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: 1.5rem;
  border-top: 1px solid #eee;
}
.case-row:first-child {
  border-top: none;
  padding-top: 0;
}
.case-row__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-color);
  padding-top: 0.15rem;
}
.case-row__body {
  color: var(--text-color);
  line-height: 1.7;
  max-width: 640px;
}
.case-row__body p { margin: 0; }
@media (max-width: 700px) {
  .case-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* Slim meta line under the hero image (role/timeline/team/tools as
   one quiet line, not a 4-box grid, the hero should read fast). */
.case-hero-meta {
  margin-top: 1.25rem;
  color: var(--text-color-light);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* Journey map columns: small label above each always-visible tile */
.journey-map-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.journey-map-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color-light);
  text-align: center;
}

/* ===== CHARACTER VERDICT (badge + slide-up overlay, see assets/js/main.js) ===== */
.character-tile {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .character-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  }
}

.verdict-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  pointer-events: none;
}
.verdict-badge--priority {
  background: rgba(26, 122, 94, 0.12);
  border-color: #1a7a5e;
  color: #1a7a5e;
}

.character-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: rgba(185, 28, 28, 0.9); /* red tint: all finalists except Sam */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.character-overlay--sam {
  background: rgba(26, 122, 94, 0.88); /* mint tint, Sam only */
}
.character-tile.is-open .character-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.character-overlay-name {
  font-family: "ClashGrotesk", "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4rem;
}
.character-overlay-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .character-tile,
  .character-overlay {
    transition: none !important;
  }
}

/* ===== SECTION INTRO TEXT: FULL WIDTH ===== */
/* Subhead/intro text above full-width components (cards, grids, story-steps)
   should span the same width as those components, not be constrained to 68ch */
.decision-cards-section .section-subhead,
.decision-cards-section > p,
.story-section .section-subhead,
.story-section > p,
.project-section:has(.decision-cards) .section-subhead,
.project-section:has(.decision-cards) > p:not(.prose p),
.project-section:has(.story-step) .section-subhead,
.project-section:has(.story-step) > p,
.project-section:has(.decision-cards) .prose p,
.project-section:has(.story-step) .prose p {
  max-width: none;
}

/* Story step bodies shouldn't be constrained either */
.story-step,
.story-step-body,
.story-step-body p {
  max-width: none;
  width: 100%;
}

/* ==================== MEDIA-QUERY SLOTS ==================== */
/* For small devices  : @media (max-width: 640px){ ... }   */
/* For medium devices : @media (min-width: 768px){ ... }   */
/* For large devices  : @media (min-width: 992px){ ... }   */