@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Alice&family=Baskervville&display=swap');

:root {
  --color-accent: #a4b25d;      /* olive-green accent */
  --color-accent-dark: #8a9650;
  --color-button: #c49f8f;      /* warm tan for buttons/borders */
  --color-tag: #c0d387;         /* light green tag badges */
  --color-text: #1a1a1a;
  --color-text-muted: #555;
  --color-grey: #8f8f8f;        /* dates, location line (Figma "grey") */
  --color-dark-grey: #767676;   /* "Up next ->" headings (Figma "dark-grey") */
  --color-bg: #ffffff;
  --color-line: #e3e3e3;
  --font-body: 'Instrument Sans', sans-serif;
  --font-serif: 'Alice', serif;
  --max-width: 1160px;
  --radius: 25px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ----------
   Redesign (Home v2): a three-part bar — left nav / centered monogram /
   right links — with a hairline divider underneath. The monogram is
   absolutely centered so the two nav groups can't shift it off-center. */
.site-header {
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 115px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.site-header .logo img {
  width: 120px;
  height: auto;
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 19px;
  white-space: nowrap;
}
.site-nav a { padding: 4px 2px; color: var(--color-text); }
.site-nav a.active { color: var(--color-accent); font-weight: 500; }
.site-nav a:hover { color: var(--color-accent); }

/* Mobile: monogram centered on its own row, nav groups wrap below it */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    padding-top: 14px;
  }
  .site-header .logo {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    text-align: center;
  }
  .site-header .logo img { margin: 0 auto; }
  .site-nav { font-size: 16px; gap: 22px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 2px solid var(--color-button);
  color: var(--color-button);
  border-radius: 15px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--color-button); color: #fff; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.section-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 24px;
}
hr.divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

/* ---------- Hero (Home v2): illustration left, intro + CTA right ---------- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  padding: 20px 20px 40px;
  /* Pull the hero up so the top of the drawing overlaps above the header
     divider line, matching Figma (hero group y=-165). */
  margin-top: -60px;
  position: relative;
}
.hero .hero-figure { flex: 0 1 560px; min-width: 0; position: relative; top: 9px; }
.hero .hero-figure img { width: 100%; height: auto; display: block; }
.hero .hero-text { flex: 0 1 367px; min-width: 0; }
.hero .hero-eyebrow {
  font-size: 24px;
  font-weight: 500;
  color: #8f8f8f;
  margin: 0 0 5px;
}
.hero .hero-name {
  font-family: 'Baskervville', var(--font-serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: #000;
  margin: 0 0 15px;
}
.hero .hero-tagline {
  font-size: 28px;
  line-height: 1.3;
  color: #000;
  margin: 0 0 30px;
}

/* Filled CTA buttons (Home v2): green "See my work", tan "See more" */
.btn-cta, .btn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  border: none;
  border-radius: 15px;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.btn-cta:hover, .btn-more:hover { filter: brightness(0.94); }
.btn-cta { background: var(--color-accent); font-size: 22px; font-weight: 500; padding: 14px 18px; }
.btn-more { background: var(--color-button); font-size: 19px; font-weight: 400; padding: 12px 18px; }
.btn-cta svg, .btn-more svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* Section header row: title left, "See more" button right */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
}
.section-head .section-title { margin: 0; }

@media (max-width: 720px) {
  .hero { gap: 32px; }
  .hero .hero-name { font-size: 40px; }
  .hero .hero-tagline { font-size: 22px; }
}

/* Mobile: nudge the hero drawing down 15px (from the desktop 9px offset). */
@media (max-width: 640px) {
  .hero .hero-figure { top: 24px; }
}

/* ---------- About blurb (Home) ---------- */
.about-blurb {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.about-blurb .graphic { flex: 0 0 260px; position: relative; margin-left: 16px; }
/* Peach arch (ellipse-topped rectangle) behind the figure, matching Figma. */
.about-blurb .graphic::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -5%;
  width: 105.5%;
  height: 81%;
  background: #ffeedd;
  border-radius: 50% 50% 0 0 / 33% 33% 0 0;
  z-index: 0;
}
.about-blurb .graphic img { position: relative; z-index: 1; }
.about-blurb .text { flex: 1 1 380px; }
.about-blurb .text p.lede {
  font-size: 26px;
  line-height: 1.4;
  margin: 0 0 20px;
}
.about-blurb .text .accent-word { color: var(--color-accent); font-weight: 600; }
.bullet-list { list-style: none; margin: 0 0 24px; padding: 0; }
.bullet-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-text);
}
.bullet-list .accent { color: var(--color-accent); font-weight: 600; }

/* ---------- About page ---------- */
.about-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding: 56px 0;
}
.about-hero .text { flex: 1 1 380px; max-width: 470px; }
.about-hero .location {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-grey);
  font-size: 16px;
  margin: 0 0 10px;
}
.about-hero .location svg { width: 28px; height: 28px; color: #b7b7b7; }
.about-hero h1 { font-size: 36px; font-weight: 400; margin: 0 0 14px; }
.about-hero .lede { font-size: 26px; line-height: 1.4; margin: 0 0 20px; }
.about-hero .accent-word { color: var(--color-accent); font-weight: 600; }
.about-hero .btn { margin-top: 4px; }

/* Portrait illustration over an offset peach rectangle. The clip box
   reproduces the Figma crop: the raw drawing is oversized and shifted
   up-left inside a fixed-aspect window. */
.about-hero .graphic { position: relative; flex: 0 1 502px; min-width: 300px; }
.about-hero .peach {
  position: absolute;
  right: 0;
  top: 4%;
  width: 48%;
  height: 82%;
  background: #ffeedd;
  border-radius: var(--radius);
}
.about-hero .portrait-clip {
  position: relative;
  width: 88.5%;              /* 444 of the 502px graphic block */
  aspect-ratio: 444 / 531;
  overflow: hidden;
}
.about-hero .portrait-clip img {
  width: 100%;              /* new portrait matches the 444/531 clip aspect exactly */
  max-width: none;
  display: block;
}

/* "Available for Summer 2027" badge (Figma About). White pill, soft olive
   border, accent-green text, with a green status dot that softly pulses. */
.avail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #d1d8ae;
  color: var(--color-accent);
  border-radius: 999px;
  padding: 9px 20px 9px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.avail-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b4c94c;
  animation: avail-pulse 2s ease-out infinite;
}
@keyframes avail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(180, 201, 76, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(180, 201, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 201, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .avail-dot { animation: none; }
}
/* Desktop: badge sits below the bullets in the text column. */
.avail--desk { margin-top: 16px; }
/* Mobile copy: full-width row forces it below the portrait; hidden on desktop. */
.avail-wrap { flex: 0 0 100%; display: none; margin-top: 4px; }
@media (max-width: 720px) {
  .avail--desk { display: none; }
  .avail-wrap { display: block; text-align: center; }
}



/* ---------- Card grids ---------- */
.card-row {
  display: flex;
  gap: 49px;   /* Figma: 49.5px between cards */
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
/* Home teaser cards match the Figma card component: 485px wide, the thumbnail
   inset ~22px on top/left/right with its own rounded corners, body below. */
.project-card {
  flex: 0 0 485px;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
  padding: 21px 22px 26px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.project-card:hover { transform: translateY(-4px); }
.project-card img {
  width: 100%;
  aspect-ratio: 440 / 256;
  object-fit: cover;
  border-radius: 25px;
  display: block;
}
.project-card .card-body { padding: 20px 0 0; }
.project-card h3 { font-size: 24px; font-weight: 500; margin: 0 0 13px; }
.project-card p { font-size: 19px; line-height: 1.3; color: var(--color-text); margin: 0 0 13px; }
.project-card .tag-row { gap: 14px; }
.project-card .tag { font-size: 15.7px; padding: 6px 16px; border-width: 1.6px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12.5px;
}

.art-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.art-card {
  flex: 0 0 280px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 3px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  background: #fff;
  transition: transform 0.2s ease;
}
.art-card:hover { transform: translateY(-4px); }
.art-card img { width: 100%; aspect-ratio: 0.85; object-fit: cover; }
.art-card .caption {
  padding: 12px 14px;
  font-size: 15px;
}
.art-card .caption em { font-style: italic; font-weight: 500; }
.art-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--color-tag);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 15px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.25);
}

/* ---------- Portfolio page ---------- */
.portfolio-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 44px 0 8px;
}
.portfolio-toggle {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  position: sticky;
  top: 24px;
}
/* Left padding leaves room for the active-tab accent bar (per Figma v3). */
.portfolio-toggle a { position: relative; padding: 2px 0 2px 15px; }
.portfolio-toggle a.active { color: var(--color-accent); font-weight: 500; }
.portfolio-toggle a:hover { color: var(--color-accent); }
/* Olive vertical line to the left of the active tab; moves with `.active`. */
.portfolio-toggle a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--color-accent);
}
.portfolio-content { flex: 1; min-width: 0; }

.portfolio-section { padding: 0 0 56px; }
.category-title {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-grey);
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Project cards (Design view): padded card, rounded image inside */
.portfolio-card {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 5px rgba(0,0,0,0.22);
  padding: 21px 22px 26px;
  transition: transform 0.2s ease;
}
a.portfolio-card:hover { transform: translateY(-4px); }
.portfolio-card img {
  width: 100%;
  aspect-ratio: 440 / 256;
  object-fit: cover;
  border-radius: 20px;
}
.portfolio-card h3 { font-size: 19px; font-weight: 500; margin: 18px 0 8px; }
.portfolio-card p { font-size: 15px; line-height: 1.45; margin: 0 0 14px; }

/* Artwork cards (Art view): same .art-card + modal wiring as Home,
   but in a padded-card grid instead of a scroll row */
.art-grid .art-card { padding: 19px 20px 10px; }
.art-grid .art-card img {
  border-radius: 20px;
  aspect-ratio: 396 / 433;
}
.art-grid .art-card .caption { padding: 14px 2px 8px; font-weight: 500; }
.art-grid .art-badge { top: 34px; left: 36px; }

/* Portfolio goes "mobile" at the same 640px width where the header hamburger
   appears: layout stacks, grid drops to one column, and the Design/Art tabs
   switch from the desktop vertical sidebar to horizontal underline tabs. */
@media (max-width: 640px) {
  .portfolio-layout { flex-direction: column; gap: 50px; padding-top: 18px; }
  /* Figma's Portfolio (Mobile) has no line under the header — the tabs sit on a
     single full-width line lower down. Hide the top divider AND the header's own
     bottom border (portfolio page only) so the tabs' baseline is that one line. */
  .portfolio-top-divider { display: none; }
  .portfolio-page .site-header { border-bottom: none; }
  /* Keep the header and the Design/Art tabs pinned while scrolling so the nav is
     always reachable (portfolio mobile only). The header sticks at the top; the
     tabs stick directly beneath it — --pf-header-h is set by JS to the real
     header height (fallback below). */
  .portfolio-page .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
  }
  /* Mobile tabs (Figma "Portfolio (Mobile)"): horizontal Design/Art that sit on
     a full-width baseline line, with a thick green underline under the active
     tab (replacing the desktop left accent bar). The active class is toggled by
     the existing JS, so the underline follows the active tab. */
  .portfolio-toggle {
    position: sticky;
    top: var(--pf-header-h, 120px);   /* pinned right below the sticky header */
    z-index: 90;
    background: var(--color-bg);
    flex-direction: row;
    gap: 36px;
    flex-basis: auto;
    align-self: stretch;
    /* Full-bleed to the viewport edges so scrolling content (and card shadows)
       can't peek beside the tabs; padding keeps the tabs on the content column. */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    /* Solid 10px band below the line so scrolling content always clears the
       line by 10px (paints with the sticky tabs, no layout shift). */
    box-shadow: 0 10px 0 0 var(--color-bg);
  }
  /* Baseline line, inset to the content column (Figma) even though the bar's
     background is full-bleed. Drawn as ::before so it paints beneath the active
     tab's green underline (a child ::after), matching the old border-bottom. */
  .portfolio-toggle::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: var(--color-line);
  }
  .portfolio-toggle a { padding: 0 0 12px; }
  .portfolio-toggle a.active::before { display: none; }
  .portfolio-toggle a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-accent);
  }
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---------- About: communities / art-first / what-I-make ---------- */
.communities {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  padding: 56px 40px;
}
.communities .intro { flex: 1 1 340px; min-width: 0; }
.communities .intro h2 { font-size: 26px; font-weight: 400; margin: 0 0 18px; }
.communities .intro .cs-eyebrow { margin: 0 0 14px; }
.communities .intro p { font-size: 17px; margin: 0; }
.communities .intro p + p { margin-top: 1em; }
.comm-list { display: flex; flex-direction: column; gap: 40px; }
.comm-row { display: flex; align-items: center; gap: 40px; }
.comm-logo {
  flex: 0 0 100px;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.comm-logo img { max-width: 100%; max-height: 100%; }
/* Figma wraps this logo in a white circle with a soft shadow */
.comm-logo.circle {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  padding: 12px;
}
.comm-row .name { font-weight: 600; font-size: 17px; margin: 0; }
.comm-row .role { font-size: 17px; margin: 0; color: var(--color-grey); }

.art-first {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 70px;
  padding: 52px 0;
}
.polaroid {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  padding: 18px 20px 12px;
  max-width: 360px;
  margin: 0;
}
.polaroid img { width: 100%; aspect-ratio: 350 / 352; object-fit: cover; border-radius: 13px; }
.polaroid figcaption { text-align: center; font-size: 13.5px; line-height: 1.35; margin-top: 12px; color: var(--color-grey); }
.art-first .text { max-width: 430px; }
.art-first .text h2 { font-size: 26px; font-weight: 400; margin: 0 0 24px; }
.art-first .text p { font-size: 17px; line-height: 1.25; margin: 0 0 16px; }
.art-first .text p:last-child { margin-bottom: 0; }

.make-section { padding: 20px 0 40px; }
.make-title {
  font-size: 21px;
  font-weight: 400;
  color: var(--color-grey);
  margin: 0 0 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}
.make-block { margin-bottom: 64px; padding-left: 22px; }
.make-block .label { margin-bottom: 34px; }
.make-block .label h3 { font-size: 26px; font-weight: 400; margin: 0 0 14px; }
.make-block .label .desc { font-size: 17px; margin: 0; }
.make-gallery { display: grid; gap: 24px; }
.make-gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.make-gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.make-gallery figure { margin: 0; }
/* Show each image at its own (Figma) crop aspect — Rachel re-cropped the source
   files, so no forced aspect-ratio/object-fit that would re-crop them. */
.make-gallery img { width: 100%; height: auto; border-radius: 12px; display: block; }
/* Equal-height row for galleries whose crops differ (Made For One): flex with
   each figure's flex-grow set to its image aspect ratio (inline), basis 0, so
   widths track the crops and image heights come out equal — no cropping. */
.make-gallery.mg-even { display: flex; align-items: flex-start; }
.make-gallery.mg-even figure { flex-basis: 0; flex-shrink: 1; min-width: 0; }
.make-gallery .img-outline { border: 1px solid #d8d8d8; }
.make-gallery figcaption { text-align: center; font-size: 16px; line-height: 1.3; margin-top: 18px; color: var(--color-grey); }

@media (max-width: 880px) {
  .make-gallery.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .make-gallery.cols-3 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  /* Stack the equal-height flex row into one column on mobile. */
  .make-gallery.mg-even { flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; }
  .make-gallery.mg-even figure { flex-basis: auto; }
  .communities { padding: 40px 0; }
}

/* Modal prev/next: white circles matching the close button, floating
   on the overlay just outside the box edges so they never cover the
   pop-up's content. The shell is the positioning context around the
   box; on narrow screens the buttons tuck inside over the image. */
.modal-shell { position: relative; }
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
  z-index: 3;
}
.modal-nav svg { width: 20px; height: 20px; }
.modal-nav:hover { color: var(--color-accent); }
.modal-prev { left: -56px; }
.modal-next { right: -56px; }
@media (max-width: 840px) {
  .modal-prev { left: 8px; }
  .modal-next { right: 8px; }
}

/* ---------- Case study pages ---------- */
/* Shared template for the project case studies. Content sits in a 916px
   column; body copy and headers in an 850px column inside it. */
/* padding-top only, never the shorthand: a shorthand here would zero out the
   20px left/right gutter .wrap provides, which only shows up once the viewport
   is narrower than the content column. */
.case-study { padding-top: 10px; }
/* Heroes render in Figma's 852.8x479.7 box with a cover crop (never
   stretches; 16:9 sources are unaffected). Anchor varies per page. */
.cs-hero {
  display: block;
  width: 100%;
  max-width: 916px;   /* match .cs-main so the hero's edges align with the content below (per Figma) */
  aspect-ratio: 852.8 / 479.7;
  object-fit: cover;
  margin: 0 auto 48px;
  border-radius: 20px;
}
.cs-hero--bottom { object-position: bottom; }
.cs-hero--top { object-position: top; }
.cs-main { max-width: 916px; margin: 0 auto; }
.cs-header { max-width: 850px; }
.cs-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 18px;
}
.cs-intro { font-size: 17px; line-height: 1.25; margin: 0 0 36px; }
/* Always one row of four columns (Role/Tools/Timeline/Team) per the
   design; long values wrap within their own column, not to a new row. */
.cs-meta {
  display: grid;
  grid-template-columns: 82px 89px 123px 164px;
  justify-content: start;
  gap: 24px 95px;   /* 95px between columns, per Figma */
  margin: 0 0 44px;
  font-size: 17px;
}
@media (max-width: 640px) {
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cs-meta .label { color: var(--color-grey); margin: 0 0 16px; }
.cs-meta .value { color: var(--color-text); margin: 0; }

.cs-section { padding: 44px 0 12px; }
.cs-eyebrow {
  color: var(--color-accent);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 16px;
}
.cs-section h2 { font-size: 26px; font-weight: 400; margin: 0 0 14px; }
.cs-desc { font-size: 17px; line-height: 1.35; margin: 0 0 30px; max-width: 916px; }
/* Tighten the gap between consecutive paragraphs (30px -> 20px), matching Figma. */
.cs-desc + .cs-desc { margin-top: -10px; }

/* Two-up image gallery (e.g. Instagram posts) */
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 845px;
  margin: 0 auto;
}
.cs-gallery img { width: 100%; border-radius: 10px; }

/* Call-to-action card: copy left, clipped phone mockup right */
.cs-cta {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 24px;
  max-width: 845px;
  height: 405px;
  margin: 52px auto;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  overflow: hidden;
}
.cs-cta .cta-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 300px;
  padding: 20px;
}
.cs-cta .cta-headline { font-size: 26px; margin: 0; }
.cs-cta .cta-handle { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.cs-cta .cta-handle svg { width: 24px; height: 24px; }
.cs-cta .phone {
  flex: 0 0 auto;
  width: 258px;
  align-self: flex-start;
  margin-top: 40px;
}

/* Numbered component list (olive circled numbers, two columns) */
.cs-numlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 48px;
  list-style: none;
  margin: 4px 0 30px 20px;   /* small left indent, matching Figma */
  padding: 0;
  max-width: 850px;
}
/* The li must NOT be a flex/grid container. Its children are bare text runs
   and <strong>, and both become flex items — so `gap` would space out every
   bold word, and each item would wrap on its own (breaking words mid-phrase).
   Keeping the li a block leaves the text in one inline run; the number is
   positioned out of flow, centred against however many lines the text takes. */
.cs-numlist li {
  display: block;
  position: relative;
  padding-left: 59px;   /* 35px circle + the 24px gap it used to have */
  min-height: 35px;
  font-size: 17px;
}
.cs-numlist .num {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px; height: 35px;
  border: 2.4px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Captioned figures */
.cs-figure { margin: 6px 0 20px; }
.cs-figure img { width: 100%; }
/* Quanta Careers & Contact lo-fi comparisons: their Figma frame border box is
   detached from the image, so the export has no frame border. Reproduce the
   same thin rounded border the Home/About/Services comparisons carry (baked in
   from their nested frames) so all five read consistently. */
/* padding: 36px above/below matches Figma's border box, which is taller than the
   image (the Home/About/Services exports include this padding; the detached
   Careers/Contact images don't, so add it here). */
.cs-lofi-frame { border: 1px solid #d7d7d7; border-radius: 14px; padding: 36px 0; }
/* Lo-fi diagram images: centered + indented (~40px each side) within the
   full-width section headers, per Figma. */
.cs-figure--indent { max-width: 836px; margin-left: auto; margin-right: auto; }
.cs-figure figcaption,
.cs-caption {
  color: var(--color-grey);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  margin-top: 20px;
}
.cs-figure figcaption a { color: var(--color-accent); text-decoration: underline; }
/* logo-iterations block: collage + caption, then arrow+badge + caption */
.cs-logo-iter figcaption + img { margin-top: 12px; }
.cs-figrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 6px 0 20px;
}
.cs-figrow figure { margin: 0; }
.cs-figrow img { width: 100%; }
/* Before/after variant: an arrow sits between the two images (per Figma). */
.cs-figrow--arrow { grid-template-columns: 1fr 46px 1fr; align-items: center; }
@media (max-width: 640px) {
  .cs-figrow--arrow { grid-template-columns: 1fr; }
  .cs-figrow--arrow .cs-abarrow svg { transform: rotate(90deg); }
}
/* Acuity screen recording (Current Solution): ~20% larger than the other
   case-study screen recordings (640px -> 768px) and centered in the content
   column. */
.cs-acuity-video { margin: 6px auto 20px; max-width: 768px; }
.cs-acuity-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #000;
}
.cs-acuity-video figcaption { margin-top: 12px; }
/* Side-by-side image pair (per Figma): both images at EQUAL height — each
   figure's flex is proportional to its aspect ratio (set inline) — with a gap
   between the two and horizontal padding on both sides of the pair. Read the
   spacing off the Figma frame per section; here it is 25px left/right padding
   and a 15px gap (Figma group inset x=25, image gap 15). */
.cs-imgpair { display: flex; gap: 15px; align-items: flex-start; padding: 0 25px; margin: 6px 0 20px; }
.cs-imgpair figure { margin: 0; min-width: 0; }
.cs-imgpair img { width: 100%; height: auto; display: block; }
/* Photo / screenshot / screen-mockup images get rounded corners to match Figma,
   which rounds photos & screens at 10px but leaves charts, tables, diagrams,
   collages, and illustrations square. Apply `cs-screens` to a container (rounds
   all its images) or directly to an individual <img>. */
.cs-screens img,
img.cs-screens { border-radius: 10px; }

/* Homie Key Lo-Fi / Color Testing: 3-column screen masonry (per Figma).
   Col 1 = one full-height screen; col 2 = a tall screen + a short card;
   col 3 = two medium screens, vertically centered. Column widths mirror the
   Figma slots (318 : 286 : 258); images display at their natural aspect. */
.cs-hm-mason {
  display: flex;
  gap: 3%;
  max-width: 916px;
  margin: 6px 0 20px;
  align-items: flex-start;
}
.cs-hm-mason .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cs-hm-mason .col-1 { flex: 318 1 0; }
.cs-hm-mason .col-2 { flex: 286 1 0; }
.cs-hm-mason .col-3 { flex: 258 1 0; align-self: center; }
.cs-hm-mason img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* BruinLife design-system elements: color swatches (Tier-1) + type specimen */
.ds-elements { max-width: 640px; margin: 6px auto 20px; }
.ds-block { margin: 0 0 34px; }
.ds-block:last-child { margin-bottom: 0; }
.ds-subhead { font-size: 15px; font-weight: 400; margin: 0 0 14px; text-align: left; }
.ds-swatches { display: flex; gap: 12px; }
.ds-swatch {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 80 / 62.4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(10px, 2.1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.ds-swatch.is-light { color: var(--color-grey); }
.ds-type { display: block; width: 100%; }

/* Loose strip of cutout illustrations */
.cs-illrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 6px 0 20px;
}
.cs-illrow img { flex: 0 1 auto; min-width: 0; }

/* Grey placeholder for embeds that don't exist yet (e.g. PDF reader) */
.cs-placeholder {
  background: #d4d4d4;
  border-radius: 24px;
  width: 100%;
  aspect-ratio: 916 / 517;
  margin: 6px 0 20px;
}

/* Inline PDF reader / video embed — same box as the placeholder it replaces */
.cs-pdf,
.cs-video {
  display: block;
  border: 0;
  border-radius: 24px;
  width: 100%;
  aspect-ratio: 916 / 517;
  margin: 6px 0 20px;
}

/* Bruin Collection — The Designs: three product cards (title / photo / caption) */
.cs-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 916px;
  margin: 6px 0 20px;
}
.cs-product {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  padding: 19px 19px 24px;
  text-align: center;
}
.cs-product .pname { font-size: 19px; font-weight: 600; margin: 0 0 14px; }
.cs-product img {
  width: 100%;
  aspect-ratio: 255 / 249;
  object-fit: cover;
  border-radius: 13px;
  display: block;
  margin: 0 0 16px;
}
.cs-product p:not(.pname) {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-dark-grey);
  margin: 0;
}
@media (max-width: 640px) {
  .cs-products { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

/* Bruin Collection — The Photoshoot: two-column masonry with a tall image
   spanning two rows (short cells define the row height; the tall image fills
   its 2-row area) + a full-width banner. */
.bc-photos { max-width: 917px; margin: 6px 0 8px; display: flex; flex-direction: column; gap: 23px; }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.bc-grid img { width: 100%; object-fit: cover; border-radius: 10px; display: block; }
.bc-grid > img:not(.tall) { aspect-ratio: 4 / 3; }
.bc-grid > img.tall { height: 100%; }
.bc-grid--a { grid-template-areas: "t p" "t q" "r s"; }
.bc-grid--c { grid-template-areas: "p t" "q t" "r s"; }
.bc-banner { width: 100%; aspect-ratio: 917 / 517; object-fit: cover; border-radius: 10px; display: block; }
.bc-credit { color: var(--color-grey); font-size: 17px; margin: 16px 0 0; text-align: center; }
.bc-credit a { color: var(--color-accent); text-decoration: underline; }

/* Problem / Goal comparison cards (white, olive pill label) */
.cs-pgrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 740px;
  margin: 14px auto 32px;
}
.cs-pgcard {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 2px rgba(0,0,0,0.18);
  padding: 30px 38px 40px;
  text-align: center;
  font-size: 17px;
  line-height: 1.25;
}
.cs-pgcard .pill {
  display: inline-block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 500;
  font-size: 20px;
  border-radius: 49px;
  padding: 4px 18px;
  margin-bottom: 24px;
}
.cs-pgcard p { margin: 0; }

/* B2C vs B2B comparison (Quanta): reuses the pg card shell but left-aligns a
   bulleted list under a centered outline pill. */
.cs-pgcard.cs-uxcard { text-align: left; padding: 26px 34px 30px; }
.cs-pgcard.cs-uxcard .pill { display: block; width: fit-content; margin: 0 auto 22px; }
.cs-pgcard.cs-uxcard ul { margin: 0; padding-left: 20px; line-height: 1.3; }
.cs-pgcard.cs-uxcard li { margin-bottom: 12px; }
.cs-pgcard.cs-uxcard li:last-child { margin-bottom: 0; }
.cs-pgcard.cs-uxcard li::marker { color: var(--color-grey); }

/* Dashed presentation boxes for final-design flows. 768px wide,
   centered under the 850px text column (not the 916px cs-main), so the
   left and right insets match the paragraph edges. The max() guard
   zeroes the offset when the viewport is narrower than the column. */
.cs-flowbox {
  border: 2px dashed var(--color-grey);
  border-radius: 16px;
  padding: 38px 64px;
  margin: 14px 0 30px;
  margin-left: max(0px, calc((min(100%, 850px) - 768px) / 2));
  max-width: 768px;
}
.cs-flowbox .fb-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 18px;
}
.cs-flowbox .fb-title svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--color-accent); }
.cs-flowbox .fb-media {
  background: #d4d4d4;
  border-radius: 16px;
  width: 100%;
  aspect-ratio: 613 / 349;
  margin-top: 26px;
}
/* When the fb-media slot holds a screen-recording video, let the video's own
   dimensions drive the height (recordings vary in shape) so nothing is cropped. */
.cs-flowbox video.fb-media {
  aspect-ratio: auto;
  height: auto;
  background: #000;
  display: block;
}
.cs-flowbox > img { width: 100%; margin-top: 10px; }
/* Split flowbox (Homie): tall phone-shaped placeholder on the left, copy on the
   right. Placeholder aspect matches the Figma screen frame (231 x 502). */
.cs-flowbox.fb-split {
  display: flex;
  align-items: center;
  gap: 44px;
}
.cs-flowbox.fb-split .fb-phone {
  flex: 0 0 30%;
  max-width: 200px;
  aspect-ratio: 588 / 1206;   /* matches the phone screen-recording videos */
  background: #000;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}
.cs-flowbox.fb-split > div:last-child { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
  .cs-flowbox.fb-split { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cs-flowbox.fb-split .fb-phone { flex-basis: auto; width: 55%; }
}

/* User personas (Homie): 2x2 grid of cards, centered name + icon, bulleted body.
   Dimensions match Figma: 734px grid centered, 28px gap, ~14px card padding,
   64.8px icon, 17.5px name, 14.4px body, uniform card heights. */
.cs-personas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 28px;
  max-width: 734px;
  margin: 4px auto 30px;
}
.cs-persona {
  background: #fff;
  border-radius: 22.5px;
  box-shadow: 0 3.6px 1.8px rgba(0, 0, 0, 0.25);
  padding: 28px 14px 22px;
}
.cs-persona .pname { text-align: center; font-size: 17.5px; font-weight: 500; margin: 0 0 11px; }
.cs-persona .picon { display: flex; justify-content: center; margin: 0 0 14px; }
.cs-persona .picon svg { width: 64.8px; height: 64.8px; }
.cs-persona p:not(.pname) {
  position: relative;
  padding-left: 21.6px;
  font-size: 14.4px;
  line-height: 1.38;
  margin: 0 0 16px;
}
.cs-persona p:not(.pname):last-child { margin-bottom: 0; }
.cs-persona p:not(.pname)::before {
  content: "\2022";
  position: absolute;
  left: 8px;
  color: var(--color-text);
}
@media (max-width: 640px) {
  .cs-personas { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* User-testing / takeaway cards: label left, content right.
   Capped at the 850px text column so card edges align with paragraphs. */
.cs-testcard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 4px 2px rgba(0,0,0,0.18);
  padding: 36px 48px;
  margin-bottom: 30px;
  max-width: 850px;
}
.cs-testcard .tlabel {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  color: var(--color-accent);   /* green card titles, per Figma */
}
.cs-testcard .tlabel svg { width: 26px; height: 26px; flex: 0 0 auto; }
.cs-testcard.olive .tlabel { color: var(--color-accent); }
.cs-testcard ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 720px) {
  .cs-testcard { grid-template-columns: 1fr; gap: 18px; padding: 28px 30px; }
}

/* Ability before/after rows (mere.html): card | arrow | card */
.cs-abrow {
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  gap: 24px;
  align-items: center;
  justify-items: center;
  max-width: 850px;
  margin: 0 auto 34px;
}
.cs-abcard {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
  padding: 26px 30px;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
}
.cs-abcard p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  width: 100%;
}
.cs-abarrow { color: var(--color-text); }
.cs-abarrow svg { width: 46px; height: 16px; display: block; }
@media (max-width: 720px) {
  .cs-abrow { grid-template-columns: 1fr; gap: 16px; }
  .cs-abarrow svg { transform: rotate(90deg); }
}

/* Up next: reuses .portfolio-grid / .portfolio-card */
.cs-upnext { padding: 44px 0 56px; }
.cs-upnext h2 {
  color: var(--color-dark-grey);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 30px;
}

@media (max-width: 720px) {
  .cs-cta { flex-direction: column; height: auto; }
  .cs-cta .phone { align-self: center; margin: 0 0 -60px; }
  .cs-meta { gap: 20px 44px; }
}

/* ---------- Modal (artwork pop-up) ---------- */
/* Fits entirely within the viewport at all times; no page/box-level scrolling.
   Stacked (image on top) by default; switches to side-by-side when the
   window is short, so the image doesn't eat all the vertical space. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 25px;
  width: auto;
  max-width: min(680px, 94vw);
  max-height: 94vh;
  max-height: 94dvh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Image area: never shrinks, sized by a definite viewport-based cap on the
   image itself. Avoids percentage heights, which can't resolve against an
   auto-height flex parent. */
.modal-img-wrap {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefec;
  overflow: hidden;
}
.modal-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Must stay in sync with the 0.75 factor in main.js fitBoxToImage. */
  max-height: 75vh;
  max-height: 75dvh;
  object-fit: contain;
}
/* Stacked layout: the box width is synced to the image by main.js, so the
   image can fill it edge to edge (sub-pixel rounding absorbed by cover). */
.modal-box:not(.sidebyside) .modal-img {
  width: 100%;
  object-fit: cover;
}

/* Text panel: opaque white, always below the image, shrinks and scrolls
   internally if the copy is too long to fit the remaining space. */
.modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  padding: 20px 28px 26px;
}
/* Badge pill: filled light-green per Figma, unlike the outlined project tags.
   align-self matters — the sidebyside modal-body is a flex column, and
   stretch (the default) would pull the pill to the full column width. */
.modal-body .tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  background: var(--color-tag);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.modal-body h3 { font-size: 19px; margin: 0 0 10px; font-weight: 500; }
.modal-body h3 em { font-style: italic; }
.modal-body p.exhibited { font-size: 14px; color: var(--color-accent); font-weight: 500; margin: 0 0 14px; }
.modal-body p.description { font-size: 15px; line-height: 1.6; margin: 0; }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.9);
  border: none; border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* ---- Side-by-side variant ----
   Applied when the artwork's Figma layer name contains "sidebyside".
   Image left, copy right — regardless of window height. */
.modal-box.sidebyside {
  flex-direction: row;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  max-height: 90dvh;
}
.modal-box.sidebyside .modal-img-wrap {
  flex: 0 1 auto;
  max-width: 58%;
}
.modal-box.sidebyside .modal-img {
  max-height: 90vh;
  max-height: 90dvh;
}
.modal-box.sidebyside .modal-body {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tall + skinny (portrait phone, or a narrow tall desktop window):
   two columns would squeeze the copy into an unreadable ribbon, so stack.
   Keyed off aspect ratio, not just width, so "tall and skinny" is what triggers it. */
@media (max-aspect-ratio: 4 / 5), (max-width: 640px) {
  .modal-box.sidebyside { flex-direction: column; }
  .modal-box.sidebyside .modal-img-wrap { max-width: 100%; }
  .modal-box.sidebyside .modal-img {
    max-height: 55vh;
    max-height: 55dvh;
  }
  .modal-box.sidebyside .modal-body {
    flex: 0 1 auto;
    display: block;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  margin-top: 40px;
  padding: 40px 0;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
.footer-grid .logo img { width: 200px; height: auto; }
.footer-col h4 { font-size: 14px; margin: 0 0 12px; font-weight: 400; }
.footer-col a, .footer-col p { display: block; font-size: 16px; margin-bottom: 10px; }
.footer-col a { text-decoration: underline; cursor: pointer; }
.footer-col a.footer-contact { display: flex; align-items: center; gap: 14px; }
.footer-icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .about-blurb { flex-direction: column; text-align: center; }
  /* Center the stacked figure and cap its width so the peach arch's -8%
     overhang stays ≥12px clear of the window edge at every width. */
  .about-blurb .graphic { flex: 0 0 auto; width: 82%; max-width: 340px; margin: 0 auto; }
  /* Left-justify the copy column (lede + inline-flex button); figure stays centered. */
  .about-blurb .text { text-align: left; }
  .about-blurb .text .lede { font-size: 22px; }
  .bullet-list li { text-align: left; }
  /* Footer (Figma About mobile): signature logo on its own row, then the page
     links and "Let's stay in touch!" columns side by side. "Pages" heading is
     hidden; the touch column fills the remaining width. */
  .footer-grid { justify-content: flex-start; gap: 28px 48px; }
  .footer-grid .logo { flex: 1 1 100%; }
  .footer-grid .footer-col { flex: 0 1 auto; }
  .footer-grid .footer-col:nth-of-type(3) { flex: 1 1 auto; }
  .footer-grid .footer-col:nth-of-type(2) h4 { display: none; }
}

/* Selected Design Work cards on mobile: the fixed 485px card is wider than a
   phone, so only Quanta showed with no hint of horizontal scroll. Size each
   card to ~86% of the row and trim the gap so the Quanta card plus ~half of the
   next card are visible, per Figma's Home (Mobile). */
@media (max-width: 640px) {
  .card-row { gap: 18px; }
  .project-card { flex-basis: 86%; }
  .project-card .tag { font-size: 13.5px; }
}

/* Resume button in the about hero shows only on mobile (per request);
   hidden at desktop widths. */
@media (min-width: 721px) {
  .about-hero .btn { display: none; }
}

/* About "art first" section: desktop is image-left / text-right, but Figma's
   About (Mobile) stacks the text ABOVE the polaroid. The image is first in the
   markup, so reverse the order when the section collapses to one column. */
@media (max-width: 900px) {
  .art-first { flex-direction: column-reverse; gap: 24px; }
}

/* Footer signature logo scales down on narrow screens. */
@media (max-width: 720px) {
  .footer-grid .logo img { width: 160px; }
}

/* ---------- Legal / prose pages (privacy policy) ----------
   Simple constrained reading column, site fonts, olive links. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 72px;
  font-size: 17px;
  line-height: 1.6;
}
.legal h1 {
  font-size: 34px;
  font-weight: 500;
  margin: 0 0 6px;
}
.legal .updated {
  color: var(--color-grey);
  font-size: 15px;
  margin: 0 0 30px;
}
.legal h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 40px 0 12px;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal li:last-child { margin-bottom: 0; }
.legal a { color: var(--color-accent); text-decoration: underline; }
.legal a:hover { color: var(--color-accent-dark); }
.legal strong { font-weight: 600; }
/* Lead "short version" callout */
.legal .lead {
  font-size: 18px;
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 18px;
  margin: 0 0 30px;
}

/* ---------- Mobile hamburger drawer (JS-injected; shown ≤640px) ----------
   The header markup is shared across pages, so js/main.js injects the
   hamburger + off-canvas drawer once. `.js-drawer` (added by that script)
   gates the mobile swap, so with JS off the existing stacked nav remains. */
.m-hamburger, .m-drawer, .m-backdrop { display: none; }

.m-hamburger {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px; cursor: pointer;
  color: var(--color-grey); z-index: 2;
}
.m-hamburger svg { width: 28px; height: 28px; display: block; }

.m-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.m-backdrop.open { opacity: 1; pointer-events: auto; }

.m-drawer {
  position: fixed; top: 0; right: 0; z-index: 100;
  height: 100vh; height: 100dvh;
  width: 76%; max-width: 340px;
  flex-direction: column;
  padding: 20px 26px 40px;
  background: #fff;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.m-drawer-top .logo img { width: 84px; height: auto; display: block; }
.m-close { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-grey); }
.m-close svg { width: 26px; height: 26px; display: block; }
.m-nav { display: flex; flex-direction: column; }
.m-nav > a { color: var(--color-text); font-size: 21px; padding: 11px 0; }
.m-nav > a.active { color: var(--color-accent); font-weight: 500; }
.m-portfolio-row { display: flex; align-items: center; gap: 4px; padding: 11px 0; }
.m-portfolio-row a { padding: 0; font-size: 21px; color: var(--color-text); }
.m-portfolio-row a.active { color: var(--color-accent); font-weight: 500; }
.m-caret { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--color-text); display: inline-flex; }
.m-caret svg { width: 20px; height: 20px; display: block; transition: transform 0.2s ease; }
.m-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-submenu { display: none; flex-direction: column; padding-left: 22px; }
.m-submenu.open { display: flex; }
.m-submenu a { color: var(--color-text); font-size: 19px; padding: 8px 0; }
.m-nav-gap { height: 20px; }

@media (max-width: 640px) {
  .js-drawer .site-header .site-nav { display: none; }
  .js-drawer .m-hamburger { display: block; }
  .js-drawer .m-drawer { display: flex; }
  .js-drawer .m-backdrop { display: block; }
  .js-drawer .site-header .header-inner { flex-wrap: nowrap; justify-content: center; }
  .js-drawer .site-header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); order: 0; width: auto; }
}