/* ==========================================================================
   STELLA MATHESON — PORTFOLIO SITE
   V2 design pass: Home + Senior Project rebuilt in the quiet-luxury /
   clean-beauty aesthetic *category* the rhodeskin.com brief asked for —
   warm neutrals, generous whitespace, restrained premium motion — but with
   the site's own sharp-edged, bold-uppercase, no-rounded-corners voice
   rather than rhode's soft pill/rounded look, and back on the site's
   original Archivo/Arimo/DM Serif Display fonts after Fraunces/Inter
   (tried in an earlier pass) didn't read right against the rest of the
   brand. See README.md "The Rhode-inspired redesign" for the full history.

   Font notes: "Anantason" from the original Canva file is a Canva-licensed
   font not free to self-host, so Archivo substitutes for it everywhere.
   ========================================================================== */

/* display=fallback (not swap, not optional): "swap" was letting the page
   reflow *after* it had already painted a tall photo section, and that
   layout shift combined with an in-progress scroll was producing a
   genuine (if intermittent) rendering glitch — a duplicated sliver of a
   background photo. "optional" avoided that, but its tolerance for a
   slow or first-time font load is so tight that Archivo Black (new to
   this stylesheet, so never already cached the way the rest of Archivo
   is from being used everywhere) was frequently missing its window and
   silently, permanently falling back for that visit — which is what kept
   reading as "the title reverted to the thin font" even though the CSS
   itself never changed back. "fallback" briefly shows invisible text,
   then still gives the real font a few seconds to arrive before
   committing to the system font — long enough to actually load in the
   common case, short enough that a late swap should land well before
   anyone's scrolled past the hero. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,900;1,600&family=Archivo+Black&family=Arimo:wght@400;500;700&family=DM+Serif+Display:ital@0;1&display=fallback');

:root {
  /* ---- colour palette: warm ivory neutrals + a soft clay accent ----
     Playful-color pass (request: keep every layout/spacing/font rule in
     this file exactly as it was, only retint the existing block-background
     and accent variables below to be lighter and more colorful). Nothing
     else in this stylesheet was touched -- same fonts, same sharp corners,
     same spacing, same hero/scrim/flipbook treatment as before. Three of
     these five section-background variables get a light pastel tint
     instead of a beige/grey one (still light, nothing dark added), and
     --c-accent-bg -- referenced in several places below (stat numbers,
     process-card icons, the "Read More" underline) but never actually
     given a value -- now has one, which is a pure color addition with no
     layout effect since it only ever sets a `color`/`background` on
     already-existing elements. */
  --c-white:        #ffffff;
  --c-cream:        #F7F4EF;   /* blush note-card / button bg -- was beige, now a pale pink */
  --c-warm-grey:    var(--brand);   /* main secondary section bg -- was beige-grey, now pale sky blue */
  --c-lavender:     #F7F4EF;   /* case-study / lessons section bg -- now an actual pale lavender */
  --c-orange:       var(--brand);   /* NYC / industry-experience accent, brightened */
  --c-ink:          #33302F;   /* near-black, warm rather than cool -- unchanged */
  --c-ink-soft:     #5E5853;
  --c-line:         rgba(51,48,47,0.16);
  --c-line-on-dark: rgba(255,255,255,0.45);

  --c-bg:           #F7F4EF;   /* page background -- unchanged */
  --c-accent:       var(--brand);   /* soft clay/terracotta -- now a playful raspberry pink */
  --c-accent-deep:  var(--brand);   /* accent hover / text-on-light -- deeper raspberry to match */
  --c-accent-bg:    var(--brand);   /* was referenced but never defined -- stat numbers, process-card
                                   icons/play-buttons and the Read More underline were quietly
                                   falling back to plain ink; this gives them their own color.
                                   Matched to the pink from the swatch you sent (#d72f6c), nudged
                                   one notch darker so it still clears 4.5:1 text contrast on the
                                   cream background everywhere it's used as running text, not just
                                   as large bold numerals. */

  /* ---- second pass: the four swatch colors you sent, used as named
     roles rather than replacing anything above -- titles get the blue,
     quotes/subtitles/nav-hover reuse --c-accent-bg (the pink) above, and
     one specific section (Work Experience) gets the lime as its
     background. The brown from your swatch isn't spent anywhere yet --
     easy to wire in once you point at a spot for it. */
  --c-blue:         var(--brand);   /* section titles (.hero__title--ink) */
  --c-lime:         #F6D4D6;   /* Work Experience section background */
  --c-brown:        #33302F;   /* from your swatch, not yet used anywhere */

  /* ---- third pass: a second accent trio, scoped only to the "process"
     material -- the Senior Project cards and the Mike White interview
     callout -- rather than replacing the pink/blue system above anywhere
     else. One role each, reused consistently everywhere this trio shows up:
       --c-mint    soft tinted surface -- the interview callout's panel
       --c-leaf    the one repeated bright mark -- every play button and
                   every small file-type tag (PDF/Audio) in this section
       --c-walnut  a dark, grounding detail spent in exactly two spots on
                   purpose (the "Process" title's underline, the play-icon
                   triangle on the featured interview callout) -- per
                   "use the dark brown sparingly", never a general text color */
  --c-mint:         #F7F4EF;
  --c-leaf:         var(--brand);
  --c-walnut:       #33302F;
  --c-card:         #FFFFFF;

  /* No rounded corners anywhere — sharp edges, per the site's own brief. */
  --radius-s:  0px;
  --radius-m:  0px;
  --radius-pill: 0px;

  /* ---- type: back to the site's original pairing ---- */
  --f-display: 'Archivo', Arial, sans-serif;
  --f-serif:   'DM Serif Display', Georgia, serif;
  --f-body:    'Arimo', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --container: 1400px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* Fade only — no translateY. A transform doesn't move an element's flow
     position, only how it's painted, so an element sitting just below a
     full-bleed photo section that hadn't yet been "revealed" was visually
     overlapping — painting several pixels of its own photo over the top of
     the section after it. That's the duplicated-photo-sliver bug reported
     on the Video Profile section. Opacity alone can't cause that: it never
     changes where anything is positioned. */
  .reveal {
    opacity: 0;
    transition: opacity .7s ease;
  }
  .reveal.is-visible { opacity: 1; }
  .reveal-stagger.is-visible > * { transition-delay: calc(var(--stagger-i, 0) * 70ms); }
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- utility: screen-reader only text (kept for accessibility/SEO on
   sections where the visible heading is baked into a photo) ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--c-ink); color: var(--c-white); padding: 12px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(18px, 3.2vw, 44px);
  padding: 16px var(--gutter);
  background: var(--c-bg);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 40;
  transition: border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  /* Solid background rather than a blurred one — a backdrop-filter here
     was causing an intermittent rendering glitch in Chrome where a stale
     frame of page content briefly "ghosted" through on scroll. */
  background: var(--c-bg);
  border-bottom-color: var(--c-line);
}
.site-nav a {
  position: relative;
  text-decoration: none;
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9a9a9a;
  white-space: nowrap;
  padding-bottom: 3px;
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right .3s cubic-bezier(.16,.8,.24,1);
}
.site-nav a:hover { color: var(--c-accent-bg); }
.site-nav a:hover::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--c-ink); font-weight: 700; }
.nav-toggle { display: none; }
.nav-brand {
  display: inline-block;
  text-decoration: none;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 15px;
  color: var(--c-ink);
  margin-right: auto;
  white-space: nowrap;
}
/* Without this, the links inside .nav-links were plain inline content, so
   the only thing separating two adjacent items was a single ordinary
   space character in the markup — the same width as the space between
   the two words of a label like "Senior Project". Turning this into its
   own flex row with a real gap makes separate menu items read clearly
   apart from a two-word item's own internal word-spacing. Overridden by
   the column layout + its own gap in the mobile menu below. */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 26px);
}

@media (max-width: 860px) {
  .site-nav {
    padding: 16px var(--gutter);
    justify-content: space-between;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    order: 2;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    display: block;
    width: 24px; height: 2px;
    background: var(--c-ink);
    position: relative;
  }
  .nav-toggle::before { margin-bottom: 6px; }
  .nav-toggle::after { margin-top: 6px; }
  .nav-brand { order: 1; margin-right: 0; font-size: 18px; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line);
    margin-top: 14px;
  }
  .nav-links a { padding: 10px 2px; border-bottom: 1px solid var(--c-line); }
  .site-nav.is-open .nav-links { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 82vh;
  overflow: hidden;
  color: var(--c-white);
}
/* Full-bleed photo, as a real <img> rather than a CSS background-image.
   A couple of the very tall/wide background-image sections on this site
   (the home-page video thumbnail in particular) were showing a repeated/
   duplicated sliver of the image where Chrome's compositor tiled a very
   large background layer — a real rendering bug, not a screenshot fluke.
   A plain <img> with object-fit:cover doesn't hit that code path, so
   hero photos, media-band photos and video thumbnails all use this now. */
.bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--gutter);
  width: 100%;
}
.hero__top {
  position: absolute; top: 88px; left: 0; right: 0;
  z-index: 2; padding: 0 var(--gutter);
}
.hero__bottom {
  position: absolute; left: 0; right: 0; bottom: 40px;
  z-index: 2; padding: 0 var(--gutter);
}
/* One-off: the Reflection photo is a wide selfie with a face filling almost
   the full height at both the left and right edge, so left-aligned text
   (the site's default) lands on someone's face wherever it sits vertically.
   Centering it instead drops it into the clear gap in the middle of the
   frame — same bottom position as every other title, just centered here
   because this particular photo's composition calls for it. */
.hero__bottom--center { text-align: center; }
.hero__bottom--center > .hero__body {
  margin-left: auto;
  margin-right: auto;
}
/* The lead paragraph is the widest thing in this block by default (60ch) —
   narrow it specifically here so it forms a tight column sitting in the
   gap between the two faces, rather than a wide block stretching toward
   either edge of the photo. The block itself still sits centered between
   the two faces, but the copy inside reads as normal left-aligned prose
   rather than centered lines. */
.hero__bottom--center .hero__body { max-width: 38ch; text-align: left; }
/* The title and quote are NOT part of the centered treatment above — by
   request, they sit exactly like Concept's title + quote (plain, flush to
   the left gutter, full width, default alignment). Only the lead
   paragraph gets the special centered/narrowed handling for this photo. */
.hero__bottom--center .hero__title-group { text-align: left; }
/* Another one-off, same idea as the centered Reflection treatment above but
   mirrored: the Synopsis photo has Stella sitting left-of-centre, so the
   site's default left-aligned text block was landing right over her. Moving
   the whole block to the right side of the photo (not just right-aligning
   the text within the same full-width box) clears her completely. The lead
   paragraph gets a matching max-width so it forms a readable right-hand
   column instead of a full-width block of right-aligned prose. */
.hero__bottom--right { text-align: right; }
.hero__bottom--right > .hero__body {
  margin-left: auto;
  max-width: 46ch;
}
/* .hero__subtitle also carries its own max-width (60ch) so a normal prose
   line doesn't stretch too wide -- fine when it's a left-aligned block that
   already starts flush with the container's left edge, but on this
   right-aligned variant that narrower box was still starting flush-LEFT
   (text-align only aligns the text *inside* a box, not the box itself),
   landing the subtitle under the paragraph instead of under the title.
   margin-left:auto pushes the (still narrower) box itself over to the
   right so its text sits directly under the title, matching the title's
   own right edge. */
.hero__bottom--right > .hero__subtitle { margin-left: auto; }
/* Synopsis + Reflection (wig photo / floral photo): now that
   .media-band--read-more's whole-photo scrim is much lighter (see that
   rule's comment), both photos are bright enough that the white text loses
   contrast against them. Rather than re-darkening the whole photo (the
   exact thing that was just fixed), this fades a soft dark wash in behind
   just the text.
   A plain linear-gradient on the full-width .hero__bottom box faded the
   wash left-to-right, but the box itself still had a hard top and bottom
   edge -- the background filled the box's full height at whatever opacity
   that column had, then stopped dead at the box boundary, showing up as a
   visible rectangle floating over the photo. Fix: shrink the box to hug
   its own text (width: fit-content, extra padding on every side for the
   fade to resolve into) and use a radial-gradient anchored at the box's
   own bottom-left corner with "farthest-side" sizing -- that sizes the
   ellipse to the box's own now-tight width and height, so it reaches fully
   transparent exactly at the box's top and right edges (and the padding
   gives it room to actually get there rather than being clipped mid-fade).
   Net effect: one smooth vignette that fades out in every direction at
   once, confined to a box just big enough for the text, instead of a
   horizontal-only fade inside a hard-edged rectangle. */
.media-band--synopsis .hero__bottom,
.media-band--reflection-floral .hero__bottom {
  left: 0; right: auto;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 64px 64px 64px var(--gutter);
  /* Anchored at the box's left edge but vertically CENTERED (50%, not
     100%/bottom) -- centering it gives the ellipse equal room to fade out
     before both the top AND the bottom of the (padded) box, rather than
     pinning the darkest point to the bottom-left corner where it would
     hit maximum opacity right at the box's own edge with nothing left to
     fade into (that mismatch between the box's edge and the near-zero
     scrim just outside it was the other hard line reported). Left stays
     at 0% since fading to nothing at the image's edge isn't needed -- the
     box already starts exactly where the text starts. */
  background: radial-gradient(ellipse farthest-side at 0% 50%,
    rgba(10,9,8,0.58) 0%,
    rgba(10,9,8,0.42) 30%,
    rgba(10,9,8,0.22) 55%,
    rgba(10,9,8,0.08) 78%,
    rgba(10,9,8,0) 100%);
}
/* Reflection's flowers are busier/brighter right behind the text than the
   wig photo's plain concrete wall, so the same wash read as not-quite-dark
   enough there -- same soft shape, just a deeper peak (0.58 -> 0.74) and
   the darker stops held a little longer, still fading out fully by 100%. */
.media-band--reflection-floral .hero__bottom {
  background: radial-gradient(ellipse farthest-side at 0% 50%,
    rgba(10,9,8,0.74) 0%,
    rgba(10,9,8,0.58) 30%,
    rgba(10,9,8,0.34) 55%,
    rgba(10,9,8,0.13) 78%,
    rgba(10,9,8,0) 100%);
}
.media-band--synopsis .hero__body,
.media-band--synopsis .hero__subtitle {
  max-width: 30ch;
}
@media (max-width: 700px) {
  .hero__top { top: 100px; }
  .hero__bottom { bottom: 28px; }
}
.hero__eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
  max-width: 46ch;
}
.hero__kicker {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  margin: 0 0 10px;
  color: var(--c-ink);
}
.hero__title {
  /* Archivo at weight 900 (used elsewhere on the site) reads noticeably
     thinner than the big titles were originally — confirmed by comparing
     actual stroke-width against letter-height across screenshots, not
     just a loading fluke. Archivo Black is a dedicated black-weight cut
     of the same family, so these titles get their heavier, blockier look
     back without touching the weight used anywhere else on the site.
     Weight stays 900 (not 400) even though Archivo Black itself only has
     one real weight: with font-display:optional, a brand-new family like
     this one can miss its load window on a given visit and fall back to
     plain Archivo — setting 400 here meant that fallback silently landed
     on Archivo's thin *regular* cut instead of its bold one, which made
     the miss-the-font case look worse than before this change, not just
     "not as heavy as intended." 900 keeps the fallback at least as bold
     as it's always been, whether or not Archivo Black itself loads. */
  font-family: 'Archivo Black', var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  /* The film title ("There I Am") stays the one big, standout size on the
     page. Every other big section title — "Concept", "Reflection", and
     "Process" (via .process-title, below) — shares the smaller size set by
     .hero__title--md just below, so those three match each other without
     competing with the film title itself. */
  font-size: clamp(46px, 10vw, 132px);
  color: var(--c-white);
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero__title--ink { color: var(--c-blue); text-shadow: none; }
.hero__title--md { font-size: clamp(40px, 7vw, 84px); }
/* On a Read-More Band, the lead paragraph + its "Read More" control sit
   above the title (by request — a quieter line leading into the bold
   title, quote as the closing note below it), so the title needs its own
   top margin here instead of relying on being the first thing in the box. */
.read-more__btn + .hero__title,
.read-more__btn + .hero__title-group { margin-top: 24px; }
.hero__tagline {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 3.4vw, 40px);
  margin: 0;
}
.hero__tagline small {
  display: block;
  font-weight: 400;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Quote line under a hero/video title — same treatment everywhere a photo
   carries a title + a line of quoted copy, so it reads as one consistent
   pattern site-wide rather than a one-off. */
.hero__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  /* The film title's quote runs at its own larger size, matching the
     scale it had before quotes were standardized site-wide (that
     standard size lives below, scoped to Read-More Band quotes only —
     Concept and Reflection — which is where it was actually tuned for). */
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.4;
  margin: 14px 0 0;
  max-width: 68ch;
  color: var(--c-white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
/* Nudge the film title's quote right so its left edge lines up with the
   upright stroke of the "T" in "There", not the far-left edge of the T's
   top crossbar (a capital T's stem sits roughly a third of the letter's
   own width in from that edge). Scaled off the title's own font-size via
   calc() so the offset tracks it at every viewport width, since the two
   elements don't scale at the same rate. This is an estimate based on
   typical sans-serif letter proportions, not a live measurement of the
   actual font file — nudge the 0.33 multiplier up or down if it's off
   once you see it rendered with the real font. */
header.hero .hero__quote {
  margin-left: calc(0.33 * clamp(46px, 10vw, 132px));
}
/* Standard quote size for a Read-More Band (Concept, Reflection) — tuned
   so a typical one-line pull-quote (with an em-dash attribution) fits on
   one line at desktop widths instead of wrapping, while still scaling
   down gracefully on phones. Kept smaller than the film title's quote on
   purpose, since these sit under a smaller heading. */
.media-band--read-more .hero__quote {
  font-size: clamp(19px, 1.6vw, 26px);
}
/* ---- Subtitle (directly under a title) ---- deliberately shares the
   quote's exact typographic DNA (same italic serif, same size), so a
   subtitle reads as the same "voice" as a quote relative to its title,
   rather than as a small printed label. This replaces using the plain
   .eyebrow treatment as a subtitle -- .eyebrow (tiny uppercase caps) stays
   in use for its original job: small utility labels like kickers
   (.hero__eyebrow, "Watch"/"Short Film") and standalone caption-style
   text, which are meant to stay quiet. A subtitle sitting right under a
   title is a different job -- it's part of the title's own moment, the
   way a quote is -- so it gets the bigger, warmer serif italic instead.
   Color is left to the instance (inline, same as quotes) since subtitles
   appear over photos and on plain panels alike. */
.hero__subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.4;
  margin: 10px 0 0;
  max-width: 60ch;
}
/* Standard body-copy size for a full paragraph laid over a photo (Media
   Band / Read-More lead + full text) — regular weight, not bold, because
   bold reads heavy over more than a line or two. Same family as the rest
   of the site's running text (Arimo). */
.hero__body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  max-width: 60ch;
  color: var(--c-white);
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
  margin: 16px 0 0;
}
.hero--placeholder-bg { background-color: #a9a29a; }

/* Reusable placeholder block for assets we could not carry over
   (trademarked screenshots, third-party book covers, etc.) */
.placeholder-asset {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, #cfc9c1, #cfc9c1 12px, #c3bcb2 12px, #c3bcb2 24px);
}
.placeholder-asset__label {
  background: rgba(20,18,15,0.82);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  padding: 14px 18px;
  max-width: 380px;
  text-align: center;
  border-radius: 2px;
}
.placeholder-asset__label b { display:block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; margin-bottom:4px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: clamp(90px, 11vw, 150px) 0; }
.section--tight { padding: clamp(60px, 7vw, 90px) 0; }
.section--white  { background: var(--c-white); }
.section--warm   { background: var(--c-warm-grey); }
.section--lavender { background: var(--c-lavender); }
.section--cream  { background: var(--c-cream); }
.section--ink    { background: var(--c-ink); color: var(--c-white); }
.section--lime   { background: var(--c-lime); }

.eyebrow-line {
  border: none; border-top: 2px solid currentColor;
  width: 100%; margin: 18px 0 26px; opacity: .5;
}

.h1 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1;
  margin: 0 0 8px;
}
/* Third tier of the site's title hierarchy (see .hero__title--md above):
   bigger than a plain .h1 normally runs, so "Process" reads as a genuine
   section title rather than a small label, but still clearly a step down
   from the Read-More Band headings above and below it on the page. */
.process-title {
  font-size: clamp(40px, 7vw, 84px);
  /* Same heavier cut as the film title / Concept / Reflection (see
     .hero__title) — plain .h1 elsewhere on the site stays on regular
     Archivo, but Process is meant to match this page's other big titles,
     not a generic section heading. */
  font-family: 'Archivo Black', var(--f-display);
  font-weight: 900;
  /* Lines up with the right edge of the grid above it (same container,
     same width) — the rightmost card, "Building The Film", sits directly
     above the end of this line. */
  text-align: right;
  position: relative;
  /* Room for the short underline mark below, without nudging the grid
     that follows (margin stays on the wrapping .h1 rule above). */
  padding-bottom: 14px;
}
/* The other walnut touchpoint for this round's "process" accent trio --
   one short mark under "Process", not a full-width rule, so the brown
   stays a restrained detail rather than a loud new heading color. */
.process-title::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 64px; height: 6px;
  background: var(--c-walnut);
}
.h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px);
  margin: 0;
}
.eyebrow {
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  font-size: 13px;
  opacity: .75;
}
.body-copy {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 62ch;
}
.body-copy p { margin: 0 0 1.1em; }
.serif-copy {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35;
}
.serif-copy p { margin: 0 0 0.7em; }

.draft-flag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a6a2e;
  background: #fbe9c8;
  border: 1px solid #e6c07a;
  padding: 3px 9px;
  border-radius: 3px;
  margin-bottom: 14px;
}

/* ==========================================================================
   MEDIA BANDS (full-bleed photo sections with overlaid text)
   ========================================================================== */
.media-band {
  position: relative;
  color: var(--c-white);
  padding: 110px var(--gutter);
  min-height: 480px;
  display: flex;
  align-items: center;
}
.media-band--right { margin-left: auto; text-align: right; }
/* Overlaid text on a Media Band sits in .hero__bottom (the same bottom-
   anchored block the Hero and Video Profile use) rather than a bespoke
   inner wrapper, so every full-bleed photo section on the site anchors its
   title/quote/body to the same spot for a consistent rhythm down the page. */

/* ---- "Read-More band" ---- a Media Band that carries a full paragraph
   instead of a one-line tagline: title + quote as usual, then an opening
   line or two of body copy and a Read More control that opens the whole
   piece in a reading-friendly overlay (.text-modal below), so the photo
   never has to carry an entire long paragraph's worth of scrim. ---- */
.media-band--read-more {
  /* These bands carry more overlaid content (title + quote + lead paragraph
     + button) than a standard Media Band, so they need a taller floor than
     the base .media-band min-height (480px) to avoid the text overflowing
     the box on narrow screens, where aspect-ratio alone would make the box
     very short. The trade-off is the photo cropping via object-fit:cover
     instead of showing in full, which is acceptable for these text-heavy
     bands — but that means this variant must NOT also carry an aspect-ratio
     at narrow widths: a box with both aspect-ratio and a min-height taller
     than that ratio derives its WIDTH from the taller height to keep the
     ratio, blowing the box out past the viewport (a real bug hit here).
     Default (mobile-safe): cancel any aspect-ratio and let min-height alone
     drive the height; .bg-img (absolute, inset:0, object-fit:cover) fills
     whatever box results either way. */
  aspect-ratio: auto !important;
  min-height: 620px;
}
/* ---- "Full photo" Read-More Band ---- opt-in, per-instance: some
   Read-More bands need to show the WHOLE photo with zero cropping (no
   heads cut off) rather than accept the min-height crop above. Set the
   exact source-image aspect ratio via the --band-ratio custom property in
   the section's inline style (e.g. style="--band-ratio:3000/2001;", no
   !important needed on a custom property) and add this class. It only
   takes effect above the breakpoint where the ratio-derived height would
   still clear the 620px text floor — below that, on phones, it falls back
   to the safe min-height crop above rather than blowing the box out
   sideways (the exact bug the comment above warns about). */
@media (min-width: 701px) {
  .media-band--full-photo {
    aspect-ratio: var(--band-ratio) !important;
    min-height: 0;
  }
}
/* ---- Read-More Band with EXTRA overlaid content ---- the Mentorship
   page's Case Study band carries a paragraph + button + title + quote AND
   a whole audio card stacked in the same bottom-anchored block, so it
   needs more vertical room than the standard 620px floor gives it below
   ~960px (where the audio card wraps under the text column instead of
   sitting beside it) — otherwise the bottom-anchored content grows upward
   past the top of its own (too-short) box and paints over whatever section
   comes before it. Ladder the floor down to what the content actually
   needs at each width, then switch to the real photo aspect-ratio once
   there's enough width that the card no longer wraps. */
/* Autobiography's "Synopsis of My Life" band carries a longer lead
   paragraph (~100 words, by request) than the other Read-More bands'
   shorter copy, so on the narrowest phones (~520px and below) it needs
   more than the standard 620px floor -- the same overflow-past-the-top-
   of-the-box bug documented on .media-band--read-more above, just
   triggered by copy length here instead of extra stacked content. Measured
   the paragraph + button + title's actual flow height down to 360px
   (worst case ~640px) via Playwright and set the floor just above that;
   drops back to the standard 620px from 520px up, where the measured
   height never exceeds ~535px anyway. */
/* Was a flat 700px/620px floor, which is fine for the TEXT but meant the
   photo crop (object-fit:cover) got more aggressive the wider the screen
   got -- past ~900px it was cropping into her chin/smile, cutting her face
   in half. Height now scales with viewport width (58vw) above the point
   where that already clears the text floor, so the fraction of the photo
   shown -- and therefore how much of her face is visible -- stays constant
   instead of shrinking as the window widens. Below that crossover the flat
   800px floor still applies, and actually shows MORE of the photo than a
   plain crop would at those widths since object-fit:cover switches to
   height-matching there (full photo height visible, cropped left/right
   instead) -- also a strict improvement, never a regression. Floor and
   multiplier bumped up from 700px/50vw so the block sits taller overall,
   giving the lead paragraph more breathing room top-to-bottom. */
.media-band--synopsis { min-height: max(800px, 58vw); }
.media-band--case-study { min-height: 860px; }
@media (min-width: 600px) {
  .media-band--case-study { min-height: 740px; }
}
@media (min-width: 960px) {
  .media-band--case-study {
    aspect-ratio: 2000 / 1334 !important;
    min-height: 0;
  }
}
/* Was a uniform 0.30->0.58 wash over the whole photo top to bottom --
   noticeably duller/darker than the source photos even well above where
   the text actually sits. Softened to match the same "nearly clear at
   the top, darkens only where the text is" curve the plain .hero__scrim
   uses, just with a slightly stronger floor since Read-More bands stack
   more text (body copy + button + title + subtitle) than a hero title alone. */
.media-band--read-more .hero__scrim {
  background: linear-gradient(180deg, rgba(10,9,8,0.06) 0%, rgba(10,9,8,0.04) 35%, rgba(10,9,8,0.48) 100%);
}
.read-more__btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--c-accent-bg);
  padding: 0 0 3px;
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  color: var(--c-white);
  cursor: pointer;
}
.read-more__btn::after { content: "\2192"; transition: transform .25s ease; display:inline-block; }
.read-more__btn:hover::after { transform: translateX(4px); }
/* Ink variant for the same control sitting on a light panel (the file-info
   modal below) instead of over a photo, with a download-style arrow. */
.read-more__btn--ink { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.read-more__btn--download::after { content: "\2193"; }
.read-more__btn--download:hover::after { transform: translateY(3px); }

/* ---- Text modal ---- the Read-More control's overlay: just the full
   piece of writing, set for reading (not a photo + caption like
   .card-modal), same overlay language as the other modals on the site. */
.text-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,0.82);
  display: none;
  align-items: center; justify-content: center;
  padding: 6vh 4vw;
}
.text-modal.is-open { display: flex; }
.text-modal__panel {
  position: relative;
  background: var(--c-bg);
  color: var(--c-ink);
  max-width: 700px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 48px clamp(24px, 5vw, 56px) 56px;
}
.text-modal__eyebrow {
  font-family: var(--f-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; color: var(--c-accent-deep);
  margin: 0 0 8px;
}
.text-modal__title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
  margin: 0 0 20px;
}
.text-modal__body {
  font-family: var(--f-body); font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;
  max-width: 62ch;
}
/* The pitch deck is a visual document (mood-board stills, quote slides,
   framing diagrams) — a text transcript alone loses most of what it
   actually communicates, so its modal gets a wider panel and the deck's
   own pages are shown as images, full width, in order, underneath the
   written pitch. */
.text-modal__panel--wide { max-width: 960px; }
.deck-slides { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.deck-slides img { display: block; width: 100%; height: auto; }
/* ---- Industry Experience card galleries ---- each of the 7 work-
   experience cards opens a wide text-modal with a short description above
   a grid of thumbnails; every thumbnail already carries the site's
   existing "lightbox-trigger" class, so clicking one opens it full-size
   with zero new JS. Square crops keep the grid tidy regardless of each
   source photo's own orientation. */
.ie-gallery__label {
  font-family: var(--f-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12px; color: var(--c-ink);
  opacity: .6; margin: 30px 0 14px;
}
.ie-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ie-gallery img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ie-gallery video { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #000; }
@media (max-width: 560px) {
  .ie-gallery { grid-template-columns: repeat(2, 1fr); }
}
.text-modal__body p { margin: 0 0 1.1em; }
.text-modal__body p:last-child { margin-bottom: 0; }
.text-modal__body ol {
  margin: 0; padding: 0 0 0 1.3em;
}
.text-modal__body ol li { margin: 0 0 0.75em; }
.text-modal__body ol li:last-child { margin-bottom: 0; }
.text-modal__close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: var(--c-ink);
  font-family: var(--f-body); font-weight: 700; font-size: 14px; cursor: pointer;
}
@media (max-width: 560px) {
  .text-modal__panel { padding: 40px 20px 44px; }
}

/* ==========================================================================
   VIDEO EMBED PLACEHOLDER
   ========================================================================== */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  overflow: hidden;
}
.video-embed[data-ratio="tall"] { aspect-ratio: 3 / 4; }
/* full-bleed treatment: edge-to-edge, sized to the photo's own shape
   rather than sitting inside a boxed container */
.video-embed--bleed { max-width: none !important; }
.video-embed__scrim {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.28);
  transition: background .2s ease;
}
.video-embed:hover .video-embed__scrim { background: rgba(10,10,10,0.42); }
.video-embed__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(1);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.16,.8,.24,1);
}
.video-embed:hover .video-embed__play { transform: translate(-50%,-50%) scale(1.1); }
.video-embed__play::after {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--c-ink);
  margin-left: 4px;
}
.video-embed__label {
  position: absolute; left: 18px; bottom: 16px;
  color: var(--c-white);
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}
.video-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,0.9);
  display: none;
  align-items: center; justify-content: center;
  padding: 0;
  background: #000;
}
.video-modal.is-open { display: flex; }
.video-modal__frame-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
}
.video-modal__frame-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal__close {
  position: absolute; top: 18px; right: 22px; z-index: 2;
  background: rgba(0,0,0,.45); border: none; color: #fff; border-radius: 999px; padding: 8px 16px;
  font-family: var(--f-body); font-size: 15px; cursor: pointer;
}

/* ---- image lightbox: enlarge a photo (reference, report/doc scan, etc)
   over the current page, without navigating away. Add class
   "lightbox-trigger" to any <img> to wire it up — see main.js. ---- */
img.lightbox-trigger { cursor: zoom-in; }
.lightbox-modal {
  /* Higher than the other modals (all z-index:100): this is the only one
     that can be opened from *inside* another modal (a gallery thumbnail
     inside a .text-modal, on the Industry Experience page), so it needs to
     paint above an already-open text-modal/card-modal, not just above the
     page. */
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10,10,10,0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 6vh 4vw;
}
.lightbox-modal.is-open { display: flex; }
.lightbox-modal figure {
  margin: 0; position: relative;
  max-width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-modal img {
  display: block;
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  object-fit: contain;
  background: #111;
}
.lightbox-modal__caption {
  color: #f2f2f2;
  font-family: var(--f-body);
  font-size: 13px;
  margin-top: 14px;
  text-align: center;
  max-width: 60ch;
}
.lightbox-modal__caption:empty { display: none; }
.lightbox-modal__close {
  position: absolute; top: 18px; right: 22px; z-index: 2;
  background: rgba(0,0,0,.45); border: none; color: #fff; border-radius: 999px; padding: 8px 16px;
  font-family: var(--f-body); font-size: 15px; cursor: pointer;
}
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   CARD "POP OUT" MODAL — click a reference or process card to see its full
   photo and full text enlarged in its own overlay window, instead of the
   text being squeezed into the small card on the page.
   ========================================================================== */
.card-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 5vh 4vw;
}
.card-modal.is-open { display: flex; }
.card-modal__panel {
  position: relative;
  background: var(--c-white);
  color: var(--c-ink);
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
}
.card-modal__figure {
  margin: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #eee;
}
.card-modal__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-modal__meta {
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-modal__number {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--c-accent-deep);
  margin-bottom: 14px;
}
.card-modal__number:empty { display: none; }
.card-modal__title {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 22px;
}
.card-modal__body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.card-modal__body p { margin: 0 0 1em; }
.card-modal__body p:last-child { margin-bottom: 0; }
.card-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  font-family: var(--f-body); font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .card-modal__panel { grid-template-columns: 1fr; max-height: 92vh; }
  .card-modal__figure { aspect-ratio: 16/10; }
  .card-modal__meta { padding: 30px 26px 40px; }
}

/* the small "expand" affordance shown on every card so it reads as
   clickable, not just decorative */
.people-card, .process-card { cursor: pointer; }
.people-card__meta, .process-card__meta { position: relative; }
.people-card__meta::after, .process-card__meta::after {
  content: "+";
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: var(--c-white);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

/* ==========================================================================
   GRIDS: story/reference photos, process row, generic photo grid
   ========================================================================== */
.grid-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
}
/* ---- card chrome: photo on top, a solid dark "credit block" underneath
   carrying the name/step and copy — the text gets the same bold, high-
   contrast treatment as the rest of the site's headlines, so the card
   "pops" as a whole rather than only the photo doing the work. Sharp
   corners throughout, no drop shadows, no rounded pills. ---- */
.people-card, .process-card {
  transition: transform .45s cubic-bezier(.16,.8,.24,1);
  /* every card in a row stretches to the same height by default (grid
     items do that automatically) — display:flex here makes the dark
     panel itself grow to fill that height too, so all the panels in a
     row line up at the same bottom edge instead of each one stopping
     wherever its own (shorter or longer) text happens to end. */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.people-card:hover, .process-card:hover {
  transform: translateY(-8px);
}
.people-card figure, .process-card figure {
  margin: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #eee;
  flex-shrink: 0;
}
.process-card figure { aspect-ratio: 4/3; }
/* A photo we've deliberately left out (see placeholder-asset) needs room to
   explain why — let it grow to fit that text instead of cropping it. */
.people-card figure.figure--placeholder { aspect-ratio: auto; overflow: visible; }
.people-card figure.figure--placeholder .placeholder-asset { position: static; min-height: 230px; }
.people-card figure img, .process-card figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.people-card:hover figure img, .process-card:hover figure img { transform: scale(1.06); }

.people-card__meta, .process-card__meta {
  background: var(--c-ink);
  color: var(--c-white);
  padding: 20px 20px 26px;
  flex: 1;
}
.people-card h3 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.1;
  margin: 0 0 10px;
}
.people-card p {
  font-family: var(--f-body);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.72);
  text-transform: none;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* step number, added purely with CSS (no HTML change) — "01", "02"... */
.process-grid { counter-reset: step; }
.process-card { counter-increment: step; position: relative; }
.process-card__number {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.process-card__number::before { content: "0" counter(step); }
.process-card h3 {
  font-family: var(--f-body); font-weight: 700; text-transform: uppercase;
  color: var(--c-white);
  font-size: 16px; letter-spacing: .01em;
  margin: 0 0 10px;
}
.process-card .body-copy {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
}

/* ---- Process cards that open a file instead of the card-modal (a PDF, or
   an audio recording) ---- same card frame as every other card on the
   site, but the "photo" is a plain icon + file type on the ink ground,
   and the expand-hint "+" badge becomes an external-link arrow (or
   disappears entirely for the audio card, which is already one big
   play button). ---- */
/* `.process-card figure { background:#eee }` above is a class+type selector
   (higher specificity than a single class), so it would otherwise beat this
   rule regardless of source order — matched here as `figure.process-card__icon-figure`
   to win outright rather than relying on where it sits in the file. */
figure.process-card__icon-figure {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: var(--c-ink);
}
.process-card__icon-figure svg { width: 42px; height: 42px; color: var(--c-accent-bg); display: block; }
.process-card__filetag {
  font-family: var(--f-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; color: rgba(255,255,255,0.5);
}
[data-link] .people-card__meta::after, [data-link] .process-card__meta::after { content: "\2197"; }

/* Used by both the Senior Project cards and the Mike White interview
   callout -- the one bright mark this accent trio repeats, so leaf (not
   the site's main pink) now means "you can press play" wherever it shows
   up. Triangle stays ink by default for contrast against the bright
   green; the featured callout below swaps it to walnut, the one other
   spot that color is spent. */
.process-card__play-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-leaf);
  display: flex; align-items: center; justify-content: center;
}
.process-card__play-icon::before {
  content: "";
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--c-ink);
  margin-left: 4px;
}
.process-card--audio.is-playing .process-card__play-icon { background: var(--c-white); }
.process-card--audio.is-playing .process-card__play-icon::before {
  border-style: none; width: 5px; height: 18px;
  border-left: 5px solid var(--c-ink); border-right: 5px solid var(--c-ink);
  margin-left: 0;
}
.process-card--audio .process-card__meta::after { display: none; }

/* ---- Senior Project cards, photo variant: a real photo instead of the
   plain icon-on-ink figure above, with a small leaf file-type tag in the
   corner standing in for the dim white-on-ink label, and -- for the one
   audio card in the row -- the same play button centered over the photo
   instead of over a blank ground. Same card frame and meta panel as every
   other process-card; only what sits inside the figure changed. */
.process-card__media-figure { position: relative; }
.process-card__media-figure .process-card__filetag {
  position: absolute; top: 12px; left: 12px;
  background: var(--c-leaf); color: var(--c-ink);
  padding: 4px 10px;
}
.process-card__media-figure .process-card__play-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ---- The Mike White interview, moved up to the "Who Is Mike White?"
   band and given a standout treatment so it doesn't get missed the way it
   could easily get lost lower down the page as a plain card: a soft mint
   panel instead of the ink ground, a bigger leaf play button, and this
   round's one other walnut touchpoint on the triangle. */
.process-card--feature figure.process-card__icon-figure { background: var(--c-mint); }
.process-card--feature .process-card__play-icon { width: 72px; height: 72px; }
.process-card--feature .process-card__play-icon::before {
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--c-walnut);
}
.process-card--feature .process-card__filetag { color: var(--c-walnut); font-weight: 700; }
.process-card--feature .process-card__meta { border-top: 3px solid var(--c-leaf); }

.photo-grid { display: grid; gap: 14px; }
.photo-grid img, .photo-grid .placeholder-asset-inline { width: 100%; height: 100%; object-fit: cover; }
.placeholder-asset-inline {
  position: relative;
  display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(135deg, #cfc9c1, #cfc9c1 10px, #c3bcb2 10px, #c3bcb2 20px);
  min-height: 120px;
  color: #4a453f;
  font-family: var(--f-body);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

@media (max-width: 900px) {
  .grid-row { grid-template-columns: repeat(3, 1fr); }
  .grid-row[data-cols-mobile="2"] { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .grid-row { grid-template-columns: repeat(2, 1fr); }
  /* The Internship page's 2-card "big" grid (Pitch Deck / Reading Report)
     is meant to read as two large, detailed cards — squeezed to phone-
     half-width they're too narrow to make out. Stack them instead. */
  .process-grid--big2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CARDS: script note / read-here link / document images
   ========================================================================== */
.two-col {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 40px;
  align-items: center;
}
.three-col {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .two-col, .three-col { grid-template-columns: 1fr; }
}

.note-card {
  background: var(--c-cream);
  padding: 28px 30px 40px;
}
.note-card img { max-width: 100%; }

.text-card {
  background: #9b9791;
  color: #17140f;
  padding: 34px;
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.5;
}

.link-card {
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 30px;
}
.link-card a {
  font-family: var(--f-body);
  font-size: 26px;
  text-decoration: none;
  border-bottom: 2px solid var(--c-ink);
  padding-bottom: 4px;
  transition: opacity .3s ease, letter-spacing .3s ease;
}
.link-card a:hover { opacity: .55; letter-spacing: .01em; }

.doc-figure { margin: 0; }
.doc-figure img { border: 1px solid var(--c-line); }
.doc-figure figcaption {
  font-family: var(--f-body);
  font-size: 13px;
  margin-top: 10px;
  opacity: .7;
}

/* ==========================================================================
   QUOTE BAND — recurring "heading over textured background" template
   (the source design used screenshots of Miu Miu's site here; replaced
   with a neutral paper-grain texture — see README)
   ========================================================================== */
.quote-band {
  position: relative;
  padding: 90px var(--gutter);
  background: var(--c-warm-grey);
  overflow: hidden;
  color: var(--c-ink);
}
.quote-band__texture {
  position: absolute; inset: 0;
  opacity: .5;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 40%),
                     repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 2px, transparent 2px 40px);
}
.quote-band__inner { position: relative; z-index: 1; max-width: 720px; }
.quote-band .h1 { font-size: clamp(30px, 4.6vw, 54px); }

/* ==========================================================================
   BUTTONS / LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
  padding: 14px 28px;
  background: var(--c-ink);
  color: var(--c-white) !important;
  text-decoration: none;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  transition: letter-spacing .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: transparent; color: var(--c-ink) !important; letter-spacing: .06em; }
.btn--outline { background: transparent; color: var(--c-ink) !important; }
.btn--outline:hover { background: var(--c-ink); color: var(--c-white) !important; letter-spacing: .06em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--c-white); border-top: 1px solid var(--c-line); padding: 70px 0 0; }
.footer-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
}
.accordion-item { border-bottom: 1px solid var(--c-line); }
.accordion-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .03em;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: "+"; font-size: 20px; font-weight: 400; }
.accordion-item[open] summary::after { content: "–"; }
.accordion-item .accordion-body { padding: 0 0 18px; font-size: 14px; line-height: 1.6; }
.accordion-item .accordion-body a { display:block; padding: 3px 0; text-decoration:none; opacity:.75; }
.accordion-item .accordion-body a:hover { opacity: 1; text-decoration: underline; }

.newsletter label { font-family: var(--f-body); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.03em; }
.newsletter-form { display:flex; border-bottom: 1px solid var(--c-ink); margin: 14px 0; }
.newsletter-form input {
  flex: 1; border: none; background: none; padding: 10px 4px;
  font-family: var(--f-body); font-size: 15px;
}
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  border: none; background: none; font-family: var(--f-body);
  font-weight: 700; text-transform: uppercase; font-size: 13px; cursor: pointer;
}
.newsletter small { display:block; font-size: 12px; opacity: .6; margin-top: 6px; }

.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-white);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size: 15px;
  transition: transform .3s cubic-bezier(.16,.8,.24,1), background-color .3s ease;
}
.social-row a:hover { transform: translateY(-3px); background: var(--c-ink-soft); }

.footer-base {
  border-top: 1px solid var(--c-line);
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; opacity: .6; flex-wrap: wrap; gap: 10px;
}

@media (max-width: 760px) {
  .footer-columns { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================================================
   CONTACT PAGE EXTRAS
   ========================================================================== */
.contact-hero { padding: 130px var(--gutter) 70px; }
.contact-form { display: grid; gap: 20px; max-width: 640px; }
.contact-form label { font-family: var(--f-body); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.03em; display:block; margin-bottom:6px;}
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 4px; border: none; border-bottom: 1px solid var(--c-ink);
  background: none; font-family: var(--f-body); font-size: 16px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; }
.contact-form textarea { resize: vertical; min-height: 120px; }

/* misc spacing helpers */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}

/* ==========================================================================
   INTERNSHIP PAGE EXTRAS
   ========================================================================== */
/* ---- Document-cover card (Reading Report): the card frame is shared with
   every other .process-card (same 4/3 figure, same dark meta panel), but
   this cover is a plain document screenshot rather than a photo — cropping
   it with object-fit:cover cuts off its left/right edges. object-fit:contain
   on a white ground shows the whole page instead, like a framed document
   thumbnail, while keeping the same card height as its neighbour. ---- */
.process-card--doc figure { background: #fff; }
.process-card--doc figure img { object-fit: contain; }
.process-card--doc:hover figure img { transform: scale(1.03); }

/* ---- Journal flipbook ---- an interactive page-turner for a scanned
   journal/notebook: pages are stacked absolutely (top of stack = current
   page), and "turning" a page rotates it away on its left (spine) edge in
   3D, revealing the page underneath — the classic pure-CSS book effect,
   no library. Add/remove ".flipbook__leaf" elements to add more entries
   later; the JS below reads whatever leaves are present, so nothing else
   needs to change when a new journal page is added. ---- */
.flipbook-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.flipbook {
  position: relative;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 1440 / 810;
  perspective: 2600px;
  /* Contain the turning page. Without this, a leaf mid-rotation is not
     clipped to the book's own box, and combined with the missing
     backface-visibility fix below, a leaf rotating past 90deg (where you're
     briefly looking at the BACK of the page) rendered as an unclipped,
     wildly foreshortened mirror image that visually ballooned and slid off
     past the left edge of the screen instead of staying inside the book. */
  overflow: hidden;
}
.flipbook__leaf {
  position: absolute;
  inset: 0;
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  /* The rotation and the fade run on their own timings on purpose: opacity
     finishes (.45s) well before the turn does (.85s), so the page visibly
     softens and dissolves as it lifts, rather than staying fully solid
     right up to the 90deg mark where backface-visibility would otherwise
     cut it off in one hard, sudden step -- that abrupt cut is what read as
     the page "just disappearing" instead of gently opening. */
  transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .45s ease-out;
  opacity: 1;
  background: #efe9de;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  /* Hide the mirrored back of the page once it's rotated past 90deg, so it
     simply (and correctly) disappears there instead of showing a distorted
     reverse image under perspective -- the other half of the fix above. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flipbook__leaf img { width: 100%; height: 100%; object-fit: contain; display: block; background: #efe9de; }
.flipbook__leaf.is-flipped {
  /* A full 180deg turn (was 165deg) now that backface-visibility hides the
     page cleanly once it passes 90deg -- the earlier, shy-of-180 angle was
     an attempt to leave a "peek" of page thickness, but paired with the
     missing backface fix it's what caused the fly-off/balloon effect above. */
  transform: rotateY(-180deg);
  opacity: 0;
  /* Closing (next) needs its own, DELAYED opacity transition rather than
     the base rule's immediate one above. The base timing is what makes
     opening (prev) feel gentle: opacity there races ahead of the turn, so
     the page is already fully solid again well before it finishes
     un-rotating -- a "materialise, then settle" feel. Reusing that same
     immediate fade for closing did the opposite: opacity raced ahead of
     the turn in this direction too, so the page was already ~90%
     transparent while it had barely started turning, reading as "it just
     vanishes" rather than a flip. Delaying the fade keeps the page crisp
     through most of the turn and lets it soften only in the last stretch,
     right around where backface-visibility would hide it anyway. */
  transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .2s ease-in .3s;
  box-shadow: 0 6px 30px rgba(0,0,0,0.2);
}
.flipbook__controls {
  display: flex;
  align-items: center;
  gap: 22px;
}
.flipbook__nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line-on-dark);
  background: none;
  color: var(--c-white);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, opacity .25s ease;
}
.flipbook__nav:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.flipbook__nav:disabled { opacity: .3; cursor: default; }
.flipbook__counter {
  font-family: var(--f-body); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: 12px; color: var(--c-white); opacity: .75;
}
/* ---- Autobiography Block 1 + "Pitch Deck" book ---- Simplified per
   request: Block 1 is now just a plain, ordinary full-bleed <header
   class="hero"> (no button, no 3D transforms, nothing that animates) --
   the same pattern every other page's header already uses. The book
   lives in its own section directly below, already open to its first
   spread (no closed cover leaf inside the book at all -- the cover only
   ever appears once, in the header above). (An earlier version tried
   making the flipbook itself BE the full-bleed header, and a version
   after that gave the book its own closed-cover leaf with a title that
   faded on open -- both replaced by this simpler structure.) */
/* ---- Page-turn ---- turning only animates a single right-hand page
   (".flipbook__leaf--recto") rather than a whole double-wide spread
   rotating as one flat card, so a flip reads as "one page turning,"
   matching a real book. Reuses the exact same generic leaf/is-flipped/
   render() mechanism the Journal already uses (untouched by any of
   this). The left page and spine are NOT part of any leaf -- they're
   separate elements main.js updates the instant "current" changes, from
   each leaf's own data-left-src attribute: in a real book the left page
   doesn't animate either, it was always sitting there under the leaf
   that just turned, and simply becomes visible once that leaf lifts
   away.
   Geometry: the source page photos are a fixed 4:5 (0.8) aspect, and the
   spine graphic is a fixed 0.1471 aspect at full box height -- so rather
   than splitting the box 50/50 (which left gaps of empty background on
   the outer edges, because a 0.8-ratio page doesn't fill a 50%-wide
   half) the box is reshaped (aspect-ratio override below, book-only) so
   the two pages plus the spine's true width fill it exactly edge to
   edge with zero letterboxing: each page gets 45.79% of the box width,
   the spine sliver gets the remaining 8.42% between them -- reserved as
   its own column rather than overlaid on top of the pages, so it no
   longer covers any page content. The recto leaf's hinge (transform-
   origin, inherited from the base .flipbook__leaf rule) is therefore
   exactly at the spine's own right edge, not the box's centerline.
   Page-turn realism: each recto leaf is a two-sided card (front face =
   the page photo, back face = a plain paper-back tone) using the
   standard flip-card technique, so as it rotates past 90 degrees you see
   the back of the paper turning over instead of it just vanishing. A
   soft shadow sweeps across the turning leaf and peaks at the midpoint
   of the flip (.is-turning, toggled briefly by main.js) to suggest the
   page arching up and catching a shadow, the way a real page does. */
.flipbook--pageturn { aspect-ratio: 1.7473; perspective: 1700px; }
.flipbook__left-page {
  position: absolute; left: 0; top: 0; width: 45.79%; height: 100%;
  object-fit: cover; display: block; background: #efe9de;
}
.flipbook__spine {
  position: absolute; left: 45.79%; top: 0; width: 8.42%; height: 100%;
  object-fit: cover; display: block;
  z-index: 30; pointer-events: none;
}
.flipbook--pageturn .flipbook__leaf--recto {
  inset: auto; left: 54.21%; top: 0; bottom: 0; width: 45.79%;
  /* The base rule hinges every leaf at its own left edge (0% 50%). That's
     right for a full-box leaf, but this leaf's own left edge sits at the
     FAR side of the spine (54.21%), not the spine's true center -- so
     rotating 180deg around it swept the page an extra spine-width too
     far, landing it to the left of, and only partly overlapping, the
     static left page (the visible "stuck/doubled page" glitch). A real
     book's pages hinge at the spine's actual center, not at the edge of
     whatever margin sits next to it, and that center is the box's exact
     midpoint here since both pages are equal width -- so the origin is
     pulled left, out past the leaf's own edge and into the spine, to
     land there instead. With that fix, the flipped leaf's back face
     comes to rest in EXACTLY the same place as the static left page. */
  transform-origin: -9.19% 50%;
  backface-visibility: visible;
  /* Real flicker fix (the z-index timing fix in the previous round reduced
     it but a slight flicker was still visible on every turn, confirmed by
     tracing the live transform matrix frame-by-frame -- the rotation itself
     interpolates perfectly smoothly with no dropped or duplicate frames, so
     the glitch isn't in the animation's math). What IS true on every single
     turn: main.js swaps in a page image (both this leaf's back face and the
     static left page) that the browser has never actually decoded and
     painted before -- each turn reveals two brand-new page photos, never
     the same ones twice going forward -- right at the same instant this
     leaf's transform starts. Chrome doing that first decode+layer-promotion
     work in the same frame the 3D transform kicks off is a well-known
     source of exactly this kind of one-frame flash. Fixed two ways: this
     leaf now gets `will-change` up front so it's already on its own GPU
     layer before any turn starts, instead of being promoted mid-transition
     (the other half of the fix, decoding every page image ahead of time, is
     in main.js). */
  will-change: transform;
  /* The Journal's leaves fade to opacity:0 as they turn (see the base
     rule above) because, with no back face, that's what keeps a page
     from just vanishing at the 90deg mark. A recto leaf HAS a back face
     now, so it does the opposite: opacity stays at 1 for the whole turn,
     transform is the only thing animating, so the front face stays
     crisp until it hides itself (backface-visibility) and the back face
     -- not a fade -- is what takes over for the second half. */
  opacity: 1 !important;
  transition: transform .85s cubic-bezier(.4,0,.2,1) !important;
  /* Still-reported flicker, second real cause: the base .flipbook__leaf
     rule (further up this file) gives .is-flipped a DIFFERENT box-shadow
     than the resting state, and unlike transform that swap isn't
     transitioned -- it happens in a single instant, on the very same leaf,
     at the very same moment its 3D transform starts. An un-transitioned
     shadow repaint landing on the same frame as a transform start is
     another well-known compositor-flicker trigger, on top of the layer-
     promotion and image-decode ones already fixed above. A recto leaf's
     own two faces already carry their own inner edge-shadows for depth
     (see .flipbook__leaf-face--front/--back below), so this outer box-
     shadow is removed for recto leaves entirely, in both states, rather
     than made to match -- nothing about a turning page's paint should
     change except its transform. */
  box-shadow: none !important;
}
.flipbook--pageturn .flipbook__leaf--recto img { object-fit: cover; }
/* Two-sided card faces: front = the recto page photo, back = the actual
   next page (the same image data-left-src points the static left page
   to -- physically it's the same leaf, printed on both sides, so the
   back shows real content, not a blank sheet). Because the back carries
   its own local rotateY(180deg), combined with the leaf's own animating
   rotation it reads right-way-round (not mirrored) by the time it's far
   enough round to be visible at all -- this is what makes a two-sided
   card work. Only the very last leaf has no real "page after it" to
   show (there's no page 26), so it alone falls back to a plain paper
   tone. Each face is independently backface-hidden so exactly one of
   the two is ever showing. */
.flipbook__leaf-face {
  position: absolute; inset: 0; backface-visibility: hidden;
}
.flipbook__leaf-face--back {
  transform: rotateY(180deg);
  background: linear-gradient(100deg, #f7f2e6 0%, #ece3d1 55%, #ddd0b6 100%);
  box-shadow: inset 26px 0 22px -18px rgba(0,0,0,.22), inset -26px 0 22px -18px rgba(0,0,0,.22);
}
.flipbook__leaf-face--back img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Soft inner-edge shadows toward the spine on both the static left page
   and the front face of every recto leaf, echoing the natural
   fold-shadow of an open book. */
.flipbook__left-page::after,
.flipbook__leaf-face--front::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16%;
  pointer-events: none;
}
.flipbook__left-page::after {
  right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.22));
}
.flipbook__leaf-face--front::after {
  left: 0;
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.22));
}
/* Shadow that arcs over a leaf mid-turn, briefly applied by main.js for
   the duration of one flip so the page reads as lifting and catching
   light rather than snapping flat between two static states. */
.flipbook--pageturn .flipbook__leaf--recto.is-turning::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,0,0,.32), rgba(0,0,0,0) 65%);
  animation: leaf-turn-shade .85s ease-in-out;
}
@keyframes leaf-turn-shade {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.stack { display:flex; flex-direction:column; gap: 18px; }

/* ==========================================================================
   SOCIAL ACTION PAGE -- three components built specifically for this page's
   brief that don't exist anywhere else on the site yet.
   ========================================================================== */

/* ---- Stat column ---- three numbered statistics sitting on the RIGHT side
   of "About Food Circle"'s full-bleed photo, alongside (not inside) the
   usual bottom-left .hero__bottom lead-paragraph + title block. Always
   absolutely positioned (never in normal flow) so it can't be pushed around
   by the flex-centering the .media-band base rule uses for its one normal-
   flow child -- top-anchored on narrow screens, where the bottom-left text
   block needs the bottom of the box to itself, and vertically centered
   alongside it once there's enough height to do that without the two
   colliding. ---- */
.stat-col {
  position: absolute; z-index: 2; top: 32px; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 20px;
  padding: 0 var(--gutter);
  align-items: flex-end;
}
/* Numeral sits at the START of its stat, in-line with the caption text
   (not stacked above it). Sized down once already from an oversized first
   pass, then doubled back up again by request -- both the numeral and its
   caption are now twice the size of that smaller pass. max-width and gap
   are widened to match so the bigger trio still fits the band without
   wrapping awkwardly. Right-aligned to match the column; the number and
   its text sit on one row, number first. */
.stat-item {
  display: flex; flex-direction: row; align-items: center;
  gap: 22px;
  max-width: 560px; text-align: left;
}
/* Above 860px this column sits BESIDE the lead paragraph (see .stat-col's
   860px rule below), sharing the same box with it rather than stacking --
   so the two widths have to be coordinated or they can simply add up to
   more than the viewport and overlap in the middle. That's exactly what
   happened once the fixed 560px max-width above (widened to fit the
   doubled font) met the paragraph's own fixed 60ch: the two totalled more
   than the available width everywhere from ~860px up to ~1300px, and only
   looked fine at the one width (1440px) this was eyeballed at. Capping
   both to a share of viewport width (vw) instead of a flat px/ch number
   means they can never out-grow the space next to each other, at any
   width -- and the min() keeps the original fixed numbers as the ceiling
   once the viewport is wide enough that percentages alone would grow
   past them (matching the original look from ~1500px up). */
@media (min-width: 860px) {
  .stat-item { max-width: min(560px, 38vw); }
  .media-band--stats .hero__body { max-width: min(634px, 42vw); }
  /* The "About Food Circle" title has no max-width at all by default (see
     the base .hero__title rule) since normally nothing sits beside it --
     here something does. A flat px cap isn't enough on its own either: it
     stops the title from being wider than that number, but doesn't stop
     it from being wider than the (now-shrunk-by-vw) paragraph column
     above it once the viewport narrows, so it still poked out into the
     stat column at in-between widths. Same vw-based cap as the paragraph,
     for the same reason. */
  .media-band--stats .hero__title--md { max-width: min(620px, 42vw); }
}
.stat-item__num {
  font-family: 'Archivo Black', var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 6.8vw, 88px);
  line-height: 1;
  color: var(--c-accent-bg);
  flex: none;
}
.stat-item__text {
  font-family: var(--f-body);
  font-size: clamp(28px, 2.6vw, 32px);
  line-height: 1.45;
  color: var(--c-white);
  padding-top: 4px;
}
@media (min-width: 860px) {
  .stat-col { top: 0; bottom: 0; justify-content: center; gap: 24px; }
}
/* Below 860px the paragraph+title (bottom-anchored, .hero__bottom) and the
   3-item stat column (top-anchored, .stat-col) are two independent
   absolutely-positioned overlays sharing one box rather than a true
   stacked layout, so avoiding overlap between them is purely a matter of
   making the box tall enough for BOTH their real, measured heights plus
   their own top/bottom offsets. Doubling the stat font meant the stat
   column got much taller, so these floors were re-measured (Playwright,
   real rendered heights at each width) and raised well past the values a
   smaller stat column got away with. Numbers here are the measured
   content height at each width (top offset 32px + stat column height +
   24px gap + paragraph/title block height + bottom offset 40px),
   rounded up. */
.media-band--stats { min-height: 1660px; }
@media (min-width: 480px) { .media-band--stats { min-height: 1220px; } }
@media (min-width: 640px) { .media-band--stats { min-height: 1090px; } }
@media (min-width: 700px) { .media-band--stats { min-height: 1040px; } }
@media (min-width: 800px) { .media-band--stats { min-height: 1020px; } }
@media (min-width: 860px) { .media-band--stats { min-height: 680px; } }
/* The lead paragraph was landing right on top of "About Food Circle" --
   this block has no Read More button between them (the button + title
   spacing rule further up this file only fires when a button sits in
   between), so it never got that rule's breathing room. Reflection, right
   below it on the same page, DOES have a button and reads noticeably more
   open above its title -- matching that gap here even without a button of
   its own. */
.media-band--stats .hero__body { margin-bottom: 24px; }

/* ---- Video band ---- a real, playable-in-place <video> full-bleed, for
   "How They Operate" -- unlike every other video on the site (.video-embed,
   a click-to-open Vimeo modal), this is actual footage of the project
   itself, so it plays right there in the page with native controls instead
   of opening an overlay. The title/eyebrow overlay sits in the usual
   .hero__bottom, but by request fades out the instant the video starts
   playing (main.js toggles .is-playing on .video-band on the video's own
   play/pause/ended events) so it's not competing with the footage, and
   fades back in the moment it's paused or finishes. */
.video-band {
  position: relative;
  aspect-ratio: 16 / 9;
  /* No min-height here: pairing aspect-ratio with a min-height taller than
     that ratio would give at the current width is the exact box-blowout
     bug documented on .media-band--read-more above (the box derives its
     WIDTH from the taller height to preserve the ratio, pushing it past
     the viewport on narrow screens) -- aspect-ratio alone is enough here
     since this band's only overlaid content is a short title, not a full
     paragraph. */
  background: #000;
  color: var(--c-white);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.video-band video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-band .hero__bottom {
  transition: opacity .35s ease;
  /* Purely decorative here (title + eyebrow, no buttons) -- never let it
     sit in front of the native <video> controls bar. */
  pointer-events: none;
}
.video-band.is-playing .hero__bottom { opacity: 0; }
/* Centred play icon -- by request, the same affordance as every other
   video on the site (.video-embed's click-to-open Vimeo thumbnail, used by
   the Short Film and Video Profile), reusing its exact classes so this
   looks identical rather than inventing a second play-button style. Shown
   over the poster frame before playback; main.js hides it (and swaps in
   native controls) the moment the video actually starts, and brings it
   back on pause/end. */
.video-band:hover .video-embed__scrim { background: rgba(10,10,10,0.42); }
.video-band:hover .video-embed__play { transform: translate(-50%,-50%) scale(1.1); }
.video-band.is-playing .video-embed__scrim,
.video-band.is-playing .video-embed__play { opacity: 0; pointer-events: none; }
.video-embed__play { cursor: pointer; transition: transform .4s cubic-bezier(.16,.8,.24,1), opacity .3s ease; }
.video-embed__scrim { transition: background .2s ease, opacity .3s ease; }

/* ---- Card grid: 3 large cards ---- same .process-card / .process-grid
   component the Internship page's 2-card grid uses (see
   .process-grid--big2), just for three cards instead of two -- collapse to
   a single column on phones rather than an uneven 2-then-1 wrap. */
@media (max-width: 560px) {
  .process-grid--big3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COLOUR + SHAPE ROUND 14 (2026-10-10)
   Orange-red var(--brand) blocks on an off-white page. Every block is rounded and
   inset; at 900px and wider every photo block and card block is 900px tall.
   Cards are one size (286 x 300), white, with mid-dark grey type and a plain
   grey "+". Titles sit either left or right at one inset (--inset, the page
   gutter) from the block edge and 40px up from the bottom.
   To go back: restore the zip in site-versions/ (site_2026-10-09_round13.zip
   is the version before this round, ..._before-colour-rework.zip the one
   before the whole colour rework) -- or delete this block.
   ========================================================================== */
:root{--c-accent:var(--brand);--c-accent-deep:var(--brand);--c-accent-bg:var(--brand);--c-blue:var(--brand);--c-leaf:var(--brand);--c-orange:var(--brand);
  --inset:var(--gutter);--inset-bottom:40px;--card-grey:#4B4744}
body{background:#F7F4EF;color:#33302F}
.section--white,.site-footer{background:#F7F4EF!important}
.section--warm,.section--lime,.quote-band{background:var(--brand)!important}
.site-nav a{color:#6b6560}
.site-nav .nav-brand{color:#33302F}
.nav-brand,.site-nav a{transition:color .3s ease-in-out}
.site-nav a:hover,.site-nav .nav-brand:hover,.site-nav a[aria-current="page"]{color:var(--brand)}
.hero__title--ink,.process-title,.h1{color:var(--brand)!important}
.process-title::after{display:none!important}
.hero__eyebrow{color:#fff;margin-bottom:22px}
.read-more__btn{border-bottom:0!important;padding-bottom:0!important;color:#fff!important}
.social-row a{background:var(--brand);color:#fff}
.newsletter-form button{color:var(--brand)!important}
.btn,.newsletter-form button{border-radius:999px}

/* orange-red blocks: one type colour (white) for everything sitting on the block itself */
.section--warm :is(p,h1,h2,h3,h4,li,a,span,small,cite,.hero__title,.hero__subtitle,.body-copy,.hero__body),
.section--lime :is(p,h1,h2,h3,h4,li,a,span,small,cite,.hero__title,.hero__subtitle,.body-copy,.hero__body),
.quote-band :is(.h1,.hero__quote,p){color:#fff!important}
.quote-band p[style*="opacity"]{opacity:1!important}

/* cards: white, mid-dark grey type, plain grey + (no circle) */
.people-card,.process-card{background:#fff;border:0;border-radius:24px;overflow:hidden}
.people-card__meta,.process-card__meta{background:#fff!important;color:var(--card-grey);padding:14px 16px 18px;border-top:0!important;display:flex;flex-direction:column;gap:5px}
.people-card h3,.process-card h3{font-family:var(--f-body);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:0;text-transform:none!important;margin:0;padding-right:54px}
.people-card p,.process-card .body-copy,.process-card .body-copy p{font-family:var(--f-body);font-style:normal;font-weight:400;font-size:14px;line-height:1.45;letter-spacing:0;text-transform:none!important;margin:0;padding-right:54px}
.section--warm .people-card :is(h3,p,.body-copy,.body-copy p),.section--lime .people-card :is(h3,p,.body-copy,.body-copy p),
.section--warm .process-card :is(h3,p,.body-copy,.body-copy p),.section--lime .process-card :is(h3,p,.body-copy,.body-copy p),
.people-card :is(h3,p),.process-card :is(h3,.body-copy,.body-copy p){color:var(--card-grey)!important}
.people-card__meta::after,.process-card__meta::after,[data-link] .people-card__meta::after,[data-link] .process-card__meta::after{content:""!important;box-sizing:border-box;width:36px;height:36px;border:0!important;border-radius:50%;top:14px;right:14px;background:linear-gradient(#fff,#fff) center/16px 2.5px no-repeat,linear-gradient(#fff,#fff) center/2.5px 16px no-repeat,var(--brand)}
.process-card__filetag,.process-card__media-figure .process-card__filetag{background:var(--brand)!important;color:#fff!important;border-radius:999px}
.process-card__play-icon{background:var(--brand)!important}
.process-card--feature .process-card__play-icon::before{border-color:transparent transparent transparent #fff}
.people-card figure:not(.figure--placeholder),.process-card figure{aspect-ratio:16/10}
.people-card figure img{object-position:50% 28%}

/* every block rounded and inset */
.hero,.media-band,.video-band,.video-embed--bleed,.section--warm,.section--lime,.section--ink,.quote-band{width:calc(100% - 40px)!important;max-width:none!important;margin:0 20px 16px!important;border-radius:32px;overflow:hidden}

/* titles: left or right at the same inset, never floating in the middle */
.hero__bottom{padding-left:var(--inset);padding-right:var(--inset)}
.quote-band{padding-left:0!important;padding-right:0!important}
.quote-band__inner{max-width:none!important;margin:0!important;width:100%}
.quote-band .hero__quote{margin-left:0!important}

@media (min-width:900px){
  .hero,.media-band:not(.media-band--full-photo),.video-band,.video-embed--bleed{height:900px!important;min-height:0!important;aspect-ratio:auto!important}
  .section--warm,.section--lime,.quote-band{min-height:900px!important;display:flex!important;flex-direction:column;padding-top:40px!important;padding-bottom:var(--inset-bottom)!important}
  .section--warm>.container,.section--lime>.container{flex:1;display:flex;flex-direction:column;width:100%}
  .quote-band{justify-content:flex-end}
  .quote-band>.container{width:100%}
  .grid-row:has(>.people-card),.grid-row:has(>.process-card){grid-template-columns:repeat(3,286px)!important;justify-content:center;gap:18px;margin-top:auto!important;margin-bottom:auto!important}
  .section--lime .grid-row:has(>.process-card){grid-template-columns:repeat(4,286px)!important}
  .people-card,.process-card{height:300px}
  .section--warm .process-title,.section--warm .hero__title--ink,.section--lime .hero__title-group{margin-top:56px!important;margin-bottom:0!important}
  .section--lime .hero__title-group{text-align:right}
  .section--lime .hero__title-group .hero__subtitle{max-width:none!important;margin-left:auto}
}

/* Small screens: the photo sits on top and the title, text and button sit on a dark caption strip underneath it, so text can never land on anyone's face. (Photo blocks with a fixed shape keep their own ratio; the Food Circle stats block is left as it was.) */
@media (max-width:899.98px){
  .hero,.media-band:not(.media-band--stats),.video-embed--bleed{
    display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;aspect-ratio:auto!important;background:#33302F}
  .hero>.bg-img,.media-band:not(.media-band--stats)>.bg-img,.video-embed--bleed>.bg-img{
    position:relative!important;inset:auto!important;width:100%!important;height:min(100vw,620px)!important;flex:none}
  .media-band--full-photo>.bg-img{height:auto!important;aspect-ratio:var(--band-ratio,4/3)}
  .hero>.hero__scrim,.media-band:not(.media-band--stats)>.hero__scrim,.video-embed--bleed>.video-embed__scrim{display:none}
  .hero>.hero__bottom,.media-band:not(.media-band--stats)>.hero__bottom,.video-embed--bleed>.hero__bottom{
    position:static!important;width:auto!important;max-width:none!important;padding:22px var(--inset) 30px!important;background:none!important;text-align:left}
  .video-embed--bleed>.video-embed__play{top:calc(min(100vw,620px)/2 - 10px)}
  .hero__bottom--right>.hero__body,.hero__bottom--center>.hero__body{margin-left:0;margin-right:auto}
  .hero__bottom--center{text-align:left}
}

/* small-screen caption layout, part 2: no inherited section padding around the photo; video band gets the same photo-on-top treatment */
@media (max-width:899.98px){
  .hero,.media-band:not(.media-band--stats),.video-embed--bleed,.video-band{padding:0!important}
  .video-band{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;aspect-ratio:auto!important;background:#33302F}
  .video-band>video{position:relative!important;inset:auto!important;width:100%!important;height:min(100vw,620px)!important;object-fit:cover;flex:none}
  .video-band>.hero__scrim,.video-band>.video-embed__scrim{display:none}
  .video-band>.hero__bottom{position:static!important;width:auto!important;max-width:none!important;padding:22px var(--inset) 30px!important;background:none!important;text-align:left}
  .video-band>.video-embed__play{top:calc(min(100vw,620px)/2)!important}
}
@media (max-width:480px){.hero__title--fit{font-size:clamp(32px,9.2vw,46px)!important}}

/* Right-hand titles sit the same distance from the block's right edge as left-hand titles do from the left, at every screen width (the card blocks' inner container used to stop at a max width, pulling right-aligned titles inward on wide screens). */
@media (min-width:900px){
  .section--warm>.container,.section--lime>.container,.section--ink>.container{max-width:none!important;width:100%!important;margin:0!important;padding-left:var(--inset)!important;padding-right:var(--inset)!important}
  .grid-row:has(>.people-card),.grid-row:has(>.process-card){margin-left:auto!important;margin-right:auto!important}
}

:root{--brand:#FF3F00}
/* Brand orange-red = rgb(244,82,38) in Display P3, exactly as picked in Photoshop. Browsers read plain hex as sRGB, which showed the same numbers duller; on P3 screens this matches Photoshop. The hex above is the nearest sRGB for other screens. */
@supports (color: color(display-p3 1 1 1)){:root{--brand:color(display-p3 0.957 0.322 0.149)}}


/* Big hero film: opens out to the full width of the screen and plays in place (900px+ wide screens) */
@media (min-width:900px){
  .video-embed--bleed{transition:width .7s cubic-bezier(.65,0,.2,1),margin .7s cubic-bezier(.65,0,.2,1),border-radius .7s cubic-bezier(.65,0,.2,1),height .7s cubic-bezier(.65,0,.2,1)}
  .video-embed--bleed.is-expanded{width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:0!important;cursor:default}
  .video-embed--bleed.is-expanded>.hero__bottom,.video-embed--bleed.is-expanded>.video-embed__play,.video-embed--bleed.is-expanded>.video-embed__scrim,.video-embed--bleed.is-expanded>.hero__scrim{opacity:0;pointer-events:none;transition:opacity .4s ease}
  .video-embed__player{position:absolute;inset:0;z-index:5;background:#000;opacity:0;transition:opacity .5s ease}
  .video-embed--bleed.is-playing>.video-embed__player{opacity:1}
  .video-embed__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video-embed__close{position:absolute;top:18px;right:22px;z-index:6;background:rgba(0,0,0,.45);border:0;color:#fff;border-radius:999px;padding:8px 16px;font-family:var(--f-body);font-size:15px;cursor:pointer}
}


/* ==== BUTTONS: every button is an orange circle with a white symbol ==== */
.flipbook__nav{width:46px;height:46px;border:0!important;border-radius:50%;font-size:0!important;color:transparent!important;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/22px 22px no-repeat!important}
.flipbook__nav--prev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")!important}
.flipbook__nav:hover:not(:disabled){filter:brightness(1.08);transform:scale(1.05)}
.flipbook__nav:disabled{opacity:.35}
.video-embed__play,.video-band .video-embed__play{background:var(--brand)!important}
.video-embed__play::after{border-color:transparent transparent transparent #fff!important}
.process-card__play-icon::before{border-color:transparent transparent transparent #fff!important}
.text-modal__close,.lightbox-modal__close,.card-modal__close,.video-modal__close,.video-embed__close{
  width:44px;height:44px;padding:0!important;border:0!important;border-radius:50%;font-size:0!important;color:transparent!important;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/18px 18px no-repeat!important;cursor:pointer}
.text-modal__close:hover,.lightbox-modal__close:hover,.card-modal__close:hover,.video-modal__close:hover,.video-embed__close:hover{filter:brightness(1.08)}
.read-more__btn{display:inline-flex;align-items:center;gap:12px}
.read-more__btn::after{content:""!important;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.read-more__btn--download::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")}
.newsletter-form button,.btn{font-size:0!important;color:transparent!important;border:0!important;border-radius:50%!important;padding:0!important;letter-spacing:0!important;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px 20px no-repeat!important;cursor:pointer}
.newsletter-form button{width:40px;height:40px;flex:none;align-self:center}
.btn{width:52px;height:52px;justify-content:center}
.newsletter-form button:hover,.btn:hover{filter:brightness(1.08);letter-spacing:0!important}
@media (max-width:760px){
  .nav-toggle{background:var(--brand)!important;border-radius:50%;flex-direction:column}
  .nav-toggle::before{margin-bottom:3px!important}.nav-toggle::after{margin-top:3px!important}
  .nav-toggle span,.nav-toggle::before,.nav-toggle::after{background:#fff!important;width:18px}
}

/* ==========================================================================
   Round 16 -- document pop-ups (mood board, script, references): orange
   background, white type, white close button with an orange cross.
   Kept above the --brand block so --brand is still the last rule at the end
   of the file (see the final block).
   ========================================================================== */
.text-modal--brand{background:var(--brand)}
.text-modal--brand .text-modal__panel{background:transparent;color:#fff}
.text-modal--brand .text-modal__eyebrow,.text-modal--brand .text-modal__title{color:#fff}
.text-modal--brand .text-modal__close{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F45226' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/18px 18px no-repeat!important;position:fixed;top:20px;right:20px;z-index:2}
.text-modal--brand .deck-slides img{border-radius:12px}
.text-modal__panel--doc{max-width:820px}
.text-modal--brand .ref-soon{font-family:var(--f-body);font-size:18px;margin:0}
/* Orange pop-ups sit over the dimmed page as a rounded panel (like the
   Social Action discoveries), not full screen. */
.text-modal--brand{background:rgba(10,10,10,.82);overflow:hidden;align-items:center;padding:5vh 4vw}
.text-modal--brand .text-modal__panel{background:var(--brand);color:#fff;border-radius:32px;max-height:90vh;overflow-y:auto;margin:0;padding:56px clamp(24px,4vw,48px) 48px;max-width:960px;width:100%}
.text-modal--brand .text-modal__panel--doc{max-width:760px}
.text-modal--brand .text-modal__close{position:sticky;top:0;float:right;right:auto;margin:-28px -20px 0 0;z-index:2}

/* Round 17b -- every pop-up gets rounded corners (matches the orange ones);
   the Readers Report pop-up uses the same width as the Script pop-up. */
.text-modal__panel{border-radius:32px}
.card-modal__panel{border-radius:32px;overflow-y:auto}
.card-modal__figure{overflow:hidden}
.lightbox-modal img{border-radius:24px}
.text-modal__panel--doc{max-width:760px}
.ie-video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:20px;overflow:hidden;background:#1f1d1c;color:#fff;font-family:var(--f-body);cursor:pointer;margin-top:10px}
.ie-video__label{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.ie-video__btn{position:absolute;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--brand)}
.ie-video__btn::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -7px;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.ie-video.is-playing .ie-video__btn::after{border-width:0;width:6px;height:22px;margin:-11px 0 0 -10px;background:#fff;border-radius:2px;box-shadow:12px 0 0 #fff}
@media (min-width:900px){.section--lime .grid-row.iv-grid:has(>.process-card){grid-template-columns:repeat(3,286px)!important}}
/* Interview With Maddie: position slider along the bottom of the photo */
.audio-scrub{position:absolute;left:14px;right:14px;bottom:12px;width:calc(100% - 28px);height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:3}
.audio-scrub::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.55)}
.audio-scrub::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.55)}
.audio-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--brand);border:2px solid #fff}
.audio-scrub::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid #fff}

/* Easy Tiger Journal -- same page-turn book as the Autobiography pitch deck,
   re-proportioned for the journal's page shape (each page 940:1125, spiral
   binding in the middle) and starting closed on the cover, centred. */
.flipbook--pageturn.flipbook--journal{aspect-ratio:2000/1125;transition:transform .85s cubic-bezier(.4,0,.2,1)}
.flipbook--journal.is-closed{transform:translateX(-26.5%)}
.flipbook--journal .flipbook__left-page{width:47%;transition:opacity .5s ease}
.flipbook--journal .flipbook__spine{left:47%;width:6%;transition:opacity .5s ease}
.flipbook--journal.is-closed .flipbook__left-page,.flipbook--journal.is-closed .flipbook__spine{opacity:0}
.flipbook--pageturn.flipbook--journal .flipbook__leaf--recto{left:53%;width:47%;transform-origin:-6.38% 50%}

/* References: with five cards the bottom two sit centred under the top three. */
@media (min-width:900px){
  .grid-row.ref-grid:has(>.people-card){grid-template-columns:repeat(6,134px)!important;gap:18px!important}
  .ref-grid>.people-card{grid-column:span 2}
  .ref-grid>.people-card:nth-child(4){grid-column:2 / span 2}
  .ref-grid>.people-card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:899px){
  .ref-grid>.people-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 9px)}
}

/* ==========================================================================
   ROUND 21
   ========================================================================== */

/* Document pages inside the orange pop-ups (reference letters, script,
   mood board, case studies) have sharp corners; the pop-ups stay rounded. */
.text-modal--brand .deck-slides img{border-radius:0}

/* Industry Experience: Vimeo interviews -- square-cornered video inside the rounded pop-up */
.ie-vimeo{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:0;overflow:hidden;margin-top:10px}
.ie-vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Industry Experience: 7 work-experience cards = 4 on top, 3 centred underneath */
@media (min-width:900px){
  .grid-row.we-grid:has(>.process-card){grid-template-columns:repeat(8,1fr)!important}
  .we-grid>.process-card{grid-column:span 2}
  .we-grid>.process-card:nth-child(5){grid-column:2 / span 2}
  .we-grid>.process-card:nth-child(6){grid-column:4 / span 2}
  .we-grid>.process-card:nth-child(7){grid-column:6 / span 2}
}
@media (max-width:899px){
  .we-grid>.process-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 9px)}
}

/* Pink backgrounds: Easy Tiger Journal + Autobiography pitch deck */
.section--pink{background:#F59FA8!important}
.section--pink .hero__subtitle{color:#fff!important}

/* Easy Tiger: the short text above the two pop-out boxes */
.work-intro{max-width:760px;margin:0 0 44px;padding-left:22px;border-left:3px solid rgba(255,255,255,.75)}
.work-intro p{font-family:var(--f-body);font-size:clamp(17px,1.45vw,20px);line-height:1.65;color:var(--c-ink);margin:0 0 16px}
.work-intro p:last-child{margin-bottom:0}
.work-intro em{font-style:italic}

/* Autobiography pitch deck: same book as the Easy Tiger Journal, for 4:5 pages;
   the last turn closes the book on the final page (centred). */
.flipbook--pageturn.flipbook--journal.flipbook--deck{aspect-ratio:2000/1175}
.flipbook--journal.is-closed-end{transform:translateX(26.5%)}
.flipbook--journal.is-closed-end .flipbook__spine{opacity:0}

/* Audio box (Mentorship page + Mike White / Ailsa Chang interview pop-ups): all orange, white play circle
   with an orange triangle, white text, position slider along the bottom of the orange top part */
.process-card--feature{background:var(--brand)!important}
.process-card--feature figure.process-card__icon-figure{background:var(--brand);position:relative}
.process-card--feature .process-card__play-icon,
.process-card--feature.is-playing .process-card__play-icon{background:#fff!important}
.process-card--feature .process-card__play-icon::before{border-color:transparent transparent transparent var(--brand)!important}
.process-card--feature.is-playing .process-card__play-icon::before{border-left-color:var(--brand)!important;border-right-color:var(--brand)!important;border-top-color:transparent!important;border-bottom-color:transparent!important}
.process-card--feature .process-card__filetag{color:#fff;background:transparent;font-weight:700}
.process-card--feature .process-card__meta{background:var(--brand)!important;border-top:0}
.process-card--feature .process-card__meta h3{color:#fff!important}
.process-card--feature figure.process-card__icon-figure{padding-bottom:14px}
.process-card--feature .audio-scrub{bottom:6px}
.process-card--feature .audio-scrub::-webkit-slider-thumb{background:#fff;border-color:#fff}
.process-card--feature .audio-scrub::-moz-range-thumb{background:#fff;border-color:#fff}
.process-card--feature .audio-scrub::-webkit-slider-runnable-track{background:rgba(255,255,255,.45)}
.process-card--feature .audio-scrub::-moz-range-track{background:rgba(255,255,255,.45)}
.modal-split{display:flex;gap:36px;align-items:flex-start}
.modal-split .text-modal__body{flex:1;min-width:0}
.modal-split .process-card--feature{flex:none;width:260px;height:auto}
@media (max-width:700px){.modal-split{flex-direction:column}.modal-split .process-card--feature{width:min(260px,100%)}}

/* ---- Custom video controls (Senior Project short film + Industry Experience interviews):
   Vimeo's own overlay is off; one orange pause/play button, a position slider and (short film) the
   orange Close button -- all visible only while hovering over the video. ---- */
.vctl{position:absolute;inset:0;z-index:5;pointer-events:none}
.vctl__shield{position:absolute;inset:0;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.vctl__btn{width:64px;height:64px;padding:0;border:0;border-radius:50%;background-color:var(--brand);cursor:pointer;pointer-events:none;
  opacity:0;transform:scale(.92);transition:opacity .25s ease,transform .25s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='5' width='4.2' height='14' rx='1.2'/%3E%3Crect x='13.8' y='5' width='4.2' height='14' rx='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:26px 26px}
.vctl-host.is-paused .vctl__btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.2v13.6a1 1 0 0 0 1.5.86l11-6.8a1 1 0 0 0 0-1.7l-11-6.8A1 1 0 0 0 8 5.2z'/%3E%3C/svg%3E");background-size:28px 28px}
.vctl-host.ui-on .vctl__btn,.vctl-host.is-active .vctl__btn,.vctl-host.is-fresh .vctl__btn{opacity:1;transform:scale(1)}
.vctl__bar{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 14px;pointer-events:auto;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}
.vctl-host.ui-on .vctl__bar,.vctl-host.is-active .vctl__bar{opacity:1}
.vctl__bar .audio-scrub{position:static;display:block;width:100%;left:auto;right:auto;bottom:auto;margin:0}
.vctl-host.is-holding .vctl{pointer-events:none}
.vctl-host.is-holding::after{content:"";position:absolute;inset:0;z-index:4;background:#000}
.ie-vimeo.vctl-host.is-holding::after{background:#000}
/* the short film's Close button: only while hovering */
.video-embed__player .video-embed__close{opacity:0;transition:opacity .25s ease}
.video-embed__player.ui-on .video-embed__close,.video-embed__player.is-active .video-embed__close,.video-embed__close:focus-visible{opacity:1}

/* ---- round 22: flicker, work-split, 13-inch fit ---- */
.section--pink,.section--ink{overflow:visible!important}
.flipbook--pageturn{overflow:visible}
.flipbook--pageturn .flipbook__leaf{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.work-split{display:flex;gap:18px;align-items:flex-start}
.work-split>:first-child{flex:1 1 0;min-width:0}
.work-split>:last-child{flex:0 0 auto}
.work-split .card-grid,.work-split .process-grid{display:grid;grid-template-columns:repeat(2,286px);gap:20px}
@media(max-width:900px){.work-split{flex-direction:column}.work-split .card-grid,.work-split .process-grid{grid-template-columns:repeat(2,1fr);width:100%}}
@media(min-width:900px) and (max-height:960px){
  /* 13-inch laptops: every full-width block is one screen tall (below the nav), never taller */
  .hero,.media-band:not(.media-band--full-photo),.video-band,.video-embed--bleed{height:calc(100vh - 67px)!important;min-height:0!important}
  .section--warm,.section--lime,.quote-band{min-height:calc(100vh - 67px)!important}
  .media-band--full-photo{max-height:calc(100vh - 67px)}
  .media-band--stats{height:auto!important;min-height:calc(100vh - 67px)!important}
}
}

/* ---- round 23: poster stills, full-screen button, case-study scroller ---- */
.vctl-host{overflow:hidden}
.vctl__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none}
.vctl-host.has-started .vctl__poster{display:none}
.vctl__bar{display:flex;align-items:center;gap:16px}
.vctl__bar .audio-scrub{flex:1 1 auto;width:auto}
.vctl__fs{flex:0 0 auto;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center/20px no-repeat;cursor:pointer}
.vctl__fs:hover{background-color:var(--brand)}
.vctl-host:fullscreen,.vctl-host:-webkit-full-screen{background:#000}
.doc-scroll{display:flex;flex-direction:column;align-items:center;gap:14px}
.doc-scroll__hint{margin:0;color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.doc-scroll__view{width:min(780px,100%);height:min(78vh,820px);overflow-y:auto;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.28);-webkit-overflow-scrolling:touch;overscroll-behavior:auto}
.doc-scroll__view img{display:block;width:100%;height:auto;border-radius:0}

/* ---- round 24 ---- */
/* case study scrolls beside the band's own text, on the right */
.media-band--with-doc{overflow:hidden}
.doc-side{position:absolute;z-index:6;top:28px;bottom:28px;right:var(--inset,48px);width:min(44%,500px);height:auto;background:#fff;overflow-y:auto;box-shadow:0 18px 50px rgba(0,0,0,.35);overscroll-behavior:auto}
.doc-side img{display:block;width:100%;height:auto;border-radius:0}
.media-band--with-doc .hero__bottom{max-width:calc(100% - min(44%,500px) - 80px)}
@media(max-width:899.98px){.doc-side{position:static;width:100%;height:70vh;margin:0}.media-band--with-doc .hero__bottom{max-width:none}}
/* internship: intro text sits in the same 286 x 300 footprint as the cards */
.work-split{justify-content:center;gap:18px;align-items:stretch}
.work-split>.work-intro{flex:0 0 286px;width:286px;height:300px;margin:0;padding:0 0 0 14px;box-sizing:border-box;overflow:hidden;align-self:flex-start;display:flex;flex-direction:column;justify-content:center}
.work-split>.work-intro p{font-size:11.5px;line-height:1.42;margin:0 0 8px}
.work-split>.work-intro p:last-child{margin-bottom:0}
@media(max-width:899.98px){.work-split>.work-intro{width:100%;flex:0 0 auto;height:auto}.work-split>.work-intro p{font-size:15px}}

.vctl-host.is-playing-ui:not(.ui-on),.video-embed__player.vctl-host:not(.ui-on):not(.is-paused){cursor:none}

/* ---- round 25: every title/subtitle ends at the same height in its block ----
   --tb is the distance from the block's bottom edge to the BASELINE of the
   last line of text (title, tagline, quote or subtitle). The margins below
   cancel out each element's own line-height so they all land on that line. */
:root{--tb:56px}
.hero__bottom{bottom:0!important;padding-bottom:0!important}
.hero__title{line-height:.9!important}
.hero__title,.hero__tagline,.hero__quote,.hero__subtitle{margin-bottom:0}
.hero__title:last-child,.process-title:last-child{margin-bottom:calc(var(--tb) - .15em)!important}
:is(.hero__quote,.hero__subtitle):last-child{margin-bottom:calc(var(--tb) - .4em)!important}
.hero__tagline:last-child{margin-bottom:calc(var(--tb) - .17em)!important}
.hero__title-group{margin-bottom:0!important}
.hero__bottom>.hero__title-group:last-child>*:last-child{margin-bottom:inherit}
.process-title{padding-bottom:0!important;line-height:.9!important}
@media(min-width:900px){
  .section--warm,.section--lime,.section--ink,.quote-band{padding-bottom:0!important}
}
.media-band--synopsis .hero__bottom,.media-band--reflection-floral .hero__bottom{bottom:-64px!important;padding-bottom:64px!important}

main{padding-bottom:20px}

/* ---- case study card (orange card with the cover, on the Case Study band) ---- */
.cs-card{position:absolute;z-index:6;right:var(--inset,48px);top:50%;transform:translateY(-50%);width:min(27%,300px);background:var(--brand);border:0;border-radius:24px;padding:22px 22px 20px;text-align:left;color:#fff;font-family:inherit;cursor:pointer;box-shadow:0 20px 50px rgba(0,0,0,.3);transition:transform .25s ease}
.cs-card:hover{transform:translateY(calc(-50% - 4px))}
.cs-card__thumb{position:relative;display:block;margin:0 auto 18px;width:58%}
.cs-card__thumb img{display:block;width:100%;height:auto;box-shadow:0 8px 20px rgba(0,0,0,.35);position:relative}
.cs-card__thumb::before,.cs-card__thumb::after{content:"";position:absolute;inset:0;background:#fff}
.cs-card__thumb::before{transform:translate(8px,-6px) rotate(3deg);opacity:.85}
.cs-card__thumb::after{transform:translate(-7px,-3px) rotate(-3deg);opacity:.6}
.cs-card small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.92}
.cs-card strong{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:19px;line-height:1.2;margin-top:8px}
.cs-card__go{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--brand);font-size:17px}
.hero__body+.hero__title,.hero__body+.hero__title-group{margin-top:26px}
@media(max-width:899.98px){.cs-card{position:static;transform:none;width:calc(100% - 2*var(--inset,24px));margin:20px var(--inset,24px)}.cs-card:hover{transform:none}}

/* internship "Work I Produced": text on the left (same look as every other
   placeholder paragraph), the two pop-out cards to the right */
.work-split{justify-content:space-between!important;align-items:center!important;gap:48px!important}
.work-split>.work-intro{flex:0 1 560px!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;display:block!important}
.work-split>.work-intro p{font-family:var(--f-body);font-size:clamp(16px,1.6vw,19px)!important;line-height:1.65!important;margin:0 0 16px!important;text-shadow:0 1px 12px rgba(0,0,0,.2)}
.work-split>.work-intro p:last-child{margin-bottom:0!important}
.work-split .process-grid{grid-template-columns:repeat(2,286px)!important;gap:24px!important;flex:none!important}
@media(max-width:899.98px){.work-split{flex-direction:column!important;align-items:stretch!important}.work-split>.work-intro{flex:none!important}.work-split .process-grid{grid-template-columns:repeat(2,1fr)!important}}
.work-split .process-grid{margin:0 0 0 auto!important;justify-content:end!important}

/* Journal + Autobiography deck blocks: the book keeps its size; the title
   moves up beside the controls so the whole block fits a laptop screen */
@media(min-width:900px){
  .section--pink{padding-top:6px!important;padding-bottom:0!important;position:relative}
  .section--pink .flipbook__controls{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;margin:0;z-index:7}
  .section--pink .flipbook-wrap{margin-bottom:0}
  .section--pink h2.hero__title{margin-top:-2px!important}
}
.section--pink>.container{display:flow-root}
@media(min-width:900px){.section--pink.section--tight{padding-top:0!important}.section--pink.section--tight h2.hero__title{margin-top:-8px!important}}

/* About Food Circle: the three statistics are sized to sit fully inside the block and stay readable */
.media-band--stats::after{content:"";position:absolute;inset:0 0 0 40%;background:linear-gradient(to left,rgba(0,0,0,.62),rgba(0,0,0,.3) 60%,rgba(0,0,0,0));z-index:1;pointer-events:none}
@media(min-width:860px){
  .stat-col{top:32px!important;bottom:32px!important;gap:clamp(14px,2.4vh,26px)!important}
  .stat-item{max-width:min(520px,36vw)!important;gap:18px!important}
  .stat-item__num{font-size:clamp(44px,4.4vw,62px)!important}
  .stat-item__text{font-size:clamp(17px,1.5vw,21px)!important;line-height:1.5!important;text-shadow:0 1px 10px rgba(0,0,0,.5)}
}
.media-band--stats::after{inset:0!important;background:linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.38) 38%,rgba(0,0,0,0) 55%),linear-gradient(to left,rgba(0,0,0,.62),rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 62%)!important}

/* Industry Experience (Work Experience + Interviews): tighter so each block fits one laptop screen */
@media(min-width:900px){
  .section--lime{padding-top:26px!important}
  .section--lime .process-card{height:248px!important}
  .section--lime .grid-row:has(>.process-card){gap:14px!important}
  .section--lime .hero__title-group{margin-top:22px!important}
  .section--lime .process-card figure{height:164px}
}
.media-band--synopsis .hero__body,.media-band--synopsis .hero__subtitle{max-width:46ch!important}

/* Easy Tiger "Work I Produced": content centred in the free space, title block at the standard bottom baseline */
@media(min-width:900px){.section--warm .work-split{margin-top:auto!important;margin-bottom:auto!important}}

/* Journal + deck: smaller books with the same breathing room as the other blocks, plus a hover magnifier */
@media(min-width:900px){
  .section--pink,.section--pink.section--tight{padding-top:40px!important}
  .section--pink .flipbook{max-width:860px}
  .section--pink h2.hero__title,.section--pink.section--tight h2.hero__title{margin-top:0!important}
}
.flipbook-wrap{position:relative}

/* Journal + deck blocks: same height as every other block, controls sit under the book, title at the standard bottom baseline */
@media(min-width:900px){
  .section--pink{min-height:900px!important;display:flex!important;flex-direction:column;padding-bottom:var(--inset-bottom)!important}
  .section--pink>.container{flex:1;display:flex!important;flex-direction:column;width:100%}
  .section--pink .flipbook-wrap{gap:0}
  .section--pink .flipbook__controls{position:static!important;transform:none!important;margin:16px 0 0!important}
  .section--pink h2.hero__title{margin-top:auto!important}
  .section--pink .flipbook-wrap~*{flex:none}
}
@media(min-width:900px) and (max-height:960px){.section--pink{min-height:calc(100vh - 67px)!important}}
@media(min-width:900px){
  .section--pink,.section--pink.section--tight{padding-bottom:0!important}
  .section--pink h2.hero__title,.section--pink.section--tight h2.hero__title{margin-top:auto!important;margin-bottom:0!important}
  .section--pink .flipbook{max-width:min(1040px,calc((100vh - 320px)*1.7))}
}
@media(min-width:900px){.section--pink h2.hero__title,.section--pink.section--tight h2.hero__title{margin-bottom:43px!important}}

/* Hover-to-enlarge: the book grows (scale/translate, independent of the page-turn transforms) and the block rises above its neighbours while it does */
.flipbook--pageturn.flipbook--journal.flipbook--journal{transition:transform .85s cubic-bezier(.4,0,.2,1),scale .55s cubic-bezier(.2,1.12,.35,1),translate .55s cubic-bezier(.2,1.12,.35,1)!important}
.section--pink.is-zoom{z-index:60!important}
.section--pink .flipbook.is-enlarged{box-shadow:0 30px 80px rgba(0,0,0,.4)}
.section--pink .flipbook__controls{transition:opacity .25s ease}
/* a closed book (cover only / back cover only) only reacts to the part that is actually showing */
.section--pink .flipbook.is-closed,.section--pink .flipbook.is-closed-end{pointer-events:none}
.section--pink .flipbook.is-closed .flipbook__leaf,.section--pink .flipbook.is-closed-end .flipbook__leaf,.section--pink .flipbook.is-closed-end .flipbook__left-page{pointer-events:auto}

/* While the book is enlarged the original arrows stay exactly where they are, showing through the book */
.section--pink .flipbook__controls.is-over{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;z-index:80}
.section--pink .flipbook__controls.is-over .flipbook__counter{visibility:hidden}
.section--pink .flipbook__controls.is-over .flipbook__nav{background-color:rgba(255,61,0,.42)!important;box-shadow:none}
.section--pink .flipbook__controls.is-over .flipbook__nav:hover:not(:disabled){background-color:rgba(255,61,0,.85)!important}

/* Industry Experience, Work Experience cards: photo back to its full 16:10 shape (no squashing), white caption strip unchanged, whole card a little smaller */
@media(min-width:900px){
  .grid-row.we-grid:has(>.process-card){grid-template-columns:repeat(8,124px)!important;column-gap:14px!important;justify-content:center}
  .section--lime .we-grid>.process-card{height:248px!important}
  .section--lime .we-grid>.process-card figure{height:164px!important;aspect-ratio:auto}
}

/* Food Circle "About" band: the stat column spans the band, so let clicks pass through it to the Read More button */
.media-band--stats .stat-col{pointer-events:none}
.media-band--stats .hero__bottom{z-index:3}

/* Social Action discovery cards: taller so the full front-of-card wording fits */
@media(min-width:900px){
  .process-card[data-text-target^="sa-discovery"]{height:352px!important}
}

/* ===== round 34 ===== */
/* Senior Project process pop-ups: plain white, text across the whole panel */
.text-modal.tm-full .text-modal__body{max-width:none}
.text-modal.tm-full .text-modal__body p{max-width:none}
.text-modal.tm-full .text-modal__panel{max-width:960px}
.tm-subtitle{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin:26px 0 12px;color:var(--c-ink);opacity:.7}
.text-modal.tm-full .deck-slides{margin-top:22px}
.text-modal.tm-full .deck-slides img{border-radius:0}
.tm-cards{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px}
.cs-card--inline{position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:min(100%,290px)!important;flex:0 0 auto}
.cs-card--inline:hover{transform:translateY(-4px)!important}
.cs-card--soon{cursor:default;opacity:.85}
.cs-card--soon:hover{transform:none!important}
.cs-card__blank{display:block;aspect-ratio:3/4;background:#f4f1ec;box-shadow:0 8px 20px rgba(0,0,0,.35);position:relative}

/* Blocks that hold two rows of cards: card size follows the window height so the whole block always fits one laptop screen (same 16:10 photo + caption strip, just scaled) */
:root{--ch:clamp(196px,calc(50vh - 148px),300px);--chl:clamp(190px,calc(50vh - 168px),300px);--chw:clamp(200px,calc(50vh - 126px),290px)}
@media(min-width:900px){
  .section--warm{padding-top:28px!important}
  .section--warm .grid-row:has(>.people-card),.section--warm .grid-row:has(>.process-card):not(.process-grid--big3):not(.process-grid--big2){grid-template-columns:repeat(3,calc(var(--ch)*.953))!important}
  .section--warm .grid-row:has(>.people-card)>.people-card,.section--warm .grid-row:has(>.process-card):not(.process-grid--big3):not(.process-grid--big2)>.process-card{height:var(--ch)!important}
  .section--warm .grid-row:has(>.people-card) .people-card__meta{padding:8px 14px 9px!important}
  .section--warm .grid-row:has(>.people-card) .people-card p{font-size:12px;line-height:1.28}
  .section--warm .grid-row:has(>.process-card):not(.process-grid--big3):not(.process-grid--big2) .process-card__meta{padding:10px 14px 12px!important}
  .section--lime .grid-row.iv-grid:has(>.process-card){grid-template-columns:repeat(3,calc(var(--chl)*.953))!important}
  .grid-row.we-grid:has(>.process-card){grid-template-columns:repeat(8,calc(var(--chw)*.4765 - 7px))!important;column-gap:14px!important}
  .section--lime .process-card{height:var(--chl)!important}
  .section--lime .we-grid>.process-card{height:var(--chw)!important}
  .we-grid .process-card__meta .body-copy,.we-grid .process-card__meta .body-copy p{font-size:13px!important;line-height:1.3!important}
  .section--lime .process-card figure,.section--lime .we-grid>.process-card figure{height:auto!important;aspect-ratio:16/10}
  .section--lime .process-card__meta{padding:10px 14px 12px!important}
}
@media(min-width:900px){
  .section--warm .grid-row.ref-grid:has(>.people-card){grid-template-columns:repeat(6,calc(var(--ch)*.4765 - 9px))!important;column-gap:18px!important}
}

/* Internship "Manuscript to Pitch": text and cards sized to the window so the block always fits */
@media(min-width:900px){
  .work-split>.work-intro p{font-size:clamp(13px,calc(.95vh + 8px),17px)!important;line-height:1.55!important;margin:0 0 12px!important}
  .work-split>.work-intro{flex:0 1 600px!important}
}

/* Contact: details on the left, message box on the right so the page fits one screen */
@media(min-width:900px){
  .contact-hero{padding-top:110px;padding-bottom:50px}
  .contact-hero .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:70px;align-items:start}
  .contact-hero .container>h1,.contact-hero .container>.eyebrow-line,.contact-hero .container>.body-copy{grid-column:1}
  .contact-hero .contact-form{grid-column:2;grid-row:1 / span 3;margin-top:8px!important;max-width:none}
}

/* Journal + Pitch Deck: same-height books sitting bottom right, arrows level with the middle of the title; hovering still opens the book to the middle of the page */
:root{--bkh:clamp(300px,calc(100vh - 246px),640px)}
@media(min-width:900px){
  .section--pink .flipbook-wrap{align-items:flex-end!important}
  .section--pink .flipbook,.section--pink .flipbook.flipbook--pageturn{height:var(--bkh)!important;width:auto!important;max-width:none!important;margin-left:auto!important}
  .section--pink .flipbook--journal.is-closed{transform:none!important}
  .section--pink .flipbook--journal.is-closed-end{transform:translateX(53%)!important}
  .section--pink .flipbook__controls,.section--pink .flipbook__controls.is-over{position:absolute!important;left:auto!important;top:auto!important;right:var(--inset,58px)!important;bottom:62px!important;transform:none!important;margin:0!important;z-index:80}
}
@media(min-width:900px){ .section--pink .flipbook-wrap{position:static!important} }

/* Mike White: the interview card sits on his shirt, its bottom lined up with the subtitle line */
@media(min-width:900px){
  .media-band--case-study .process-card--feature{margin-bottom:var(--tb,56px)}
}

/* Round 35 — Mike White "Who Is" block: interview card top-right with the
   text in a tall thin column under it, on a gradient pulled in from the right
   edge; title is one long line at the bottom over a bottom gradient. */
@media (min-width:900px){
  .media-band--case-study{position:relative}
  .media-band--case-study .hero__scrim{background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 14%,rgba(0,0,0,.25) 26%,rgba(0,0,0,0) 36%)!important}
  .mw-who__shade{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:2;pointer-events:none;border-radius:0 28px 28px 0;background:linear-gradient(to left,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.35) 62%,rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 90%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 90%)}
  .mw-who__col{position:absolute;right:58px;top:40px;width:400px;z-index:6;display:flex;flex-direction:column;gap:26px;color:#fff}
  .mw-who__col .hero__body{font-size:15px!important;line-height:1.55!important;margin:0 0 14px!important;max-width:none!important}
  .media-band--case-study .hero__bottom.mw-who{display:block!important;max-width:none}
  .mw-who .hero__title--md{white-space:nowrap!important;max-width:none!important;font-size:min(5.3vw,78px)!important;margin:0!important}
  .mw-who__col .process-card--audio.process-card--feature{width:100%!important;box-sizing:border-box;height:auto!important;min-height:0!important;aspect-ratio:auto!important;display:grid!important;grid-template-columns:52px 1fr;grid-template-areas:"p t" "p h" "p s";column-gap:14px;row-gap:3px;align-items:center;padding:12px 22px 12px 14px!important;border-radius:32px!important;margin:0!important;transform:none!important}
  .mw-who__col .process-card--audio figure{display:contents!important}
  .mw-who__col .process-card__play-icon{grid-area:p;position:static!important;transform:none!important;width:52px!important;height:52px!important;margin:0!important}
  .mw-who__col .process-card__filetag{grid-area:t;position:static!important;transform:none!important;margin:0!important;font-size:10px!important;text-align:left}
  .mw-who__col .audio-scrub{grid-area:s;position:static!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important}
  .mw-who__col .process-card__meta{grid-area:h;padding:0!important;margin:0!important;background:none!important}
  .mw-who__col .process-card__meta h3{margin:0!important;font-size:17px!important;white-space:nowrap!important}
}
@media (max-width:899px){
  .mw-who__shade{display:none}
  .mw-who__col{position:relative;z-index:6;padding:0 20px;margin-top:20px}
}

/* Round 36 — Mike White "Case Study" band: gentle bottom-up gradient, just enough for legibility */
.mw-casestudy .hero__scrim{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.45) 36%,rgba(0,0,0,.18) 56%,rgba(0,0,0,0) 76%)!important}

/* Round 36 — Social Action "Reflection" band: same strength of fade as the Mike White
   Case Study band, but pulled out of the bottom-left corner (where the text sits). */
.sa-reflection .hero__scrim{background:radial-gradient(ellipse 140% 118% at 0% 100%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.75) 20%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 100%)!important}

/* Round 37 — silent background-mode Vimeo clips inside pop-ups (no Vimeo buttons at all) */
.bg-vimeo{position:relative;overflow:hidden;background-color:#1a1a1a;background-size:cover;background-position:center}
.bg-vimeo iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;max-width:none}
.ie-gallery .bg-vimeo{display:block;width:100%;aspect-ratio:1/1}
.text-modal .bg-vimeo--wide{width:100%;aspect-ratio:16/9;margin:0 0 4px}
.iv-src{display:block;margin-top:14px;font-size:.88em;opacity:.8;font-style:italic}

.tm-subtitle--block{margin:34px 0 0}
.text-modal.tm-full .tm-subtitle--block+.deck-slides,.text-modal.tm-full .tm-subtitle--block+.bg-vimeo{margin-top:12px}
.tm-doc{background:#fff;color:#1a1a1a;padding:34px 42px;box-shadow:0 2px 14px rgba(0,0,0,.22);max-width:760px;margin:0 auto;border-radius:2px}
.tm-doc ol{margin:0;padding-left:1.4em}
.tm-doc li{color:#1a1a1a}



/* Round 37 — References: red space above the top row equals the red space between the last row and the title */
@media(min-width:900px){
  .section--warm:has(.ref-grid){padding-top:50px!important}
  .section--warm:has(.ref-grid) .hero__title--md{margin-top:42px!important}
}

/* Round 37 — Journal book (and its arrows) sit further toward the middle of the page */
@media(min-width:900px){
  .section--pink .flipbook.flipbook--journal:not(.flipbook--deck){margin-right:calc((100% ) * .18)!important}
  .section--pink:has(.flipbook--journal:not(.flipbook--deck)) .flipbook__controls,.section--pink:has(.flipbook--journal:not(.flipbook--deck)) .flipbook__controls.is-over{right:calc(var(--inset,58px) + (100% - 2*var(--inset,58px))*.18)!important}
}

/* Round 37 — the menu bar always stays above the flipbook arrows when scrolling */
.site-nav{z-index:90}

/* Round 37 — Manuscript to Pitch: the writing sits just above the title like every other band; the two cards sit
   with equal red space above them (to the top of the block) and below them (to the title) */
@media(min-width:900px){
  .ms-pitch .container{position:relative}
  .ms-pitch .work-split{justify-content:flex-end!important;align-items:flex-start!important;margin-top:calc((100vh - 67px)*.131)!important;margin-bottom:auto!important}
  .ms-pitch .work-split .process-grid{transform:none!important;flex:none}
  .ms-pitch .work-split>.work-intro{position:absolute!important;left:58px;bottom:192px;width:max(calc(100% - 740px),400px)!important;max-width:820px;flex:none!important}
  .ms-pitch .work-split>.work-intro p{font-size:clamp(16px,1.6vw,19px)!important;line-height:1.65!important;margin:0 0 14px!important}
  .ms-pitch .work-split>.work-intro p:last-child{margin-bottom:0!important}
  .ms-pitch .work-split>.work-intro p{text-wrap:pretty}
}

/* Round 37 — Case Study cards sit in the bottom-right corner, their bottom edge level with the bottom of the title (Internship) / the quote (Mentorship) */
@media(min-width:900px){
  .media-band>.cs-card{top:auto!important;bottom:var(--tb,56px);transform:none!important}
  .media-band>.cs-card:hover{transform:translateY(-4px)!important}
}

/* Round 37 — Social Action discovery cards: bigger, and true squares */
@media(min-width:900px){
  .process-grid--big3:has(>.process-card[data-text-target^="sa-discovery"]){--dc:clamp(310px,calc(100vh - 430px),410px);grid-template-columns:repeat(3,var(--dc))!important;justify-content:center;column-gap:20px!important}
  .process-card[data-text-target^="sa-discovery"]{height:var(--dc,352px)!important;width:var(--dc,auto)}
  .process-card[data-text-target^="sa-discovery"] figure{flex:0 0 auto!important;height:55%!important;aspect-ratio:auto!important}
  .process-card[data-text-target^="sa-discovery"] .process-card__meta{padding:12px 18px 16px!important}
}

/* Round 38 — no blue browser focus ring on the close buttons: plain orange circle with a white cross.
   On the white case-study page the button is white, so it gets an orange outline instead. */
.text-modal__close,.lightbox-modal__close,.card-modal__close,.video-modal__close,.video-embed__close,.vctl__btn,.vctl__fs,
.text-modal__close:focus,.text-modal__close:focus-visible,.lightbox-modal__close:focus,.lightbox-modal__close:focus-visible,
.card-modal__close:focus,.card-modal__close:focus-visible,.video-modal__close:focus,.video-modal__close:focus-visible,
.video-embed__close:focus,.video-embed__close:focus-visible{outline:none!important;-webkit-tap-highlight-color:transparent}
.text-modal--brand .text-modal__close,.text-modal--brand .text-modal__close:focus,.text-modal--brand .text-modal__close:focus-visible{outline:none!important;box-shadow:none!important}

.process-card:focus,.process-card:focus-visible,.people-card:focus,.people-card:focus-visible{outline:none!important}

/* Round 39 — close buttons: plain orange circle, white cross, no ring (on orange pop-up panels the circle is white with an orange cross so it stays visible); no blue focus ring on the READ MORE buttons */
.text-modal__close,.lightbox-modal__close,.card-modal__close,.video-modal__close,.video-embed__close{box-shadow:none!important;outline:none!important}
.read-more__btn,.read-more__btn:focus,.read-more__btn:focus-visible,.read-more__btn:active,.cs-card:focus,.cs-card:focus-visible,.process-card:focus,.process-card:focus-visible{outline:none!important;-webkit-tap-highlight-color:transparent}

/* Round 39 — Synopsis (autobiography): the Mike White gradient behind the writing: bottom scrim + a shade from the left edge */
.media-band--synopsis .hero__scrim{background:
 linear-gradient(to top,rgba(84,80,62,.85) 0%,rgba(84,80,62,.55) 12%,rgba(84,80,62,.2) 22%,rgba(84,80,62,0) 32%),
 linear-gradient(to right,rgba(84,80,62,.88) 0%,rgba(84,80,62,.7) 16%,rgba(84,80,62,.34) 30%,rgba(84,80,62,0) 42%)!important}

/* Round 40 — same body-text size everywhere (19px) incl. the Mike White "Who is" column */
@media(min-width:900px){
  .mw-who__col{width:470px}
  .mw-who__col .hero__body{font-size:clamp(16px,1.6vw,19px)!important;line-height:1.65!important}
}

/* Round 40 — Synopsis: the writing never runs over her face. The column is capped to a share of the block and the photo is nudged right so the glasses stay clear on taller / narrower windows */
@media(min-width:900px) and (max-aspect-ratio:3/2){
  .media-band--synopsis .hero__body,.media-band--synopsis .hero__subtitle{max-width:min(46ch,38%)!important}
  .media-band--synopsis .bg-img{object-position:20% 20%!important}
}

/* Round 41 — Senior Project Concept: a bit of sea-blue gradient behind the writing (bottom up + from the left), colour pulled from the water */
.media-band--read-more:has([data-target="concept-full-text"]) .hero__scrim{background:
 linear-gradient(to top,rgba(22,58,88,.72) 0%,rgba(22,58,88,.5) 18%,rgba(22,58,88,.2) 34%,rgba(22,58,88,0) 52%),
 linear-gradient(to right,rgba(22,58,88,.3) 0%,rgba(22,58,88,0) 45%)!important}

/* Round 41 — Manuscript to Pitch: the writing and the cards sit as one row, bottom-anchored above the title, with the top of the cards level with the top line of the writing */
@media(min-width:900px){
  .ms-pitch .work-split{margin-top:auto!important;margin-bottom:-28px!important;justify-content:space-between!important;align-items:flex-start!important}
  .ms-pitch .work-split>.work-intro{position:static!important;flex:none!important;width:calc(100% - 624px)!important;max-width:820px;align-self:flex-start!important}
  .ms-pitch .work-split .process-grid{align-self:flex-start!important;margin-left:auto}
  .ms-pitch .work-split{gap:24px!important}
}

/* Round 41 — Mike White case study close button: orange circle, white cross (same as every other close button). A thin white edge keeps it visible where it overlaps the orange panel. */
.text-modal--brand .text-modal__close{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/18px 18px no-repeat!important;border:3px solid #fff!important;box-sizing:border-box}

/* Round 41 — case-study close button sits fully on the white page: top-right corner of the first page, then follows the scroll */
#casestudy-full-text .text-modal__close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0!important;border:0!important;z-index:5}

/* Round 41 — Easy Tiger "Who Are They?": subtle warm bottom-up gradient, colour from the photo */
.media-band--read-more:has([data-target="whoarethey-full-text"]) .hero__scrim{background:linear-gradient(to top,rgba(52,44,38,.74) 0%,rgba(52,44,38,.5) 18%,rgba(52,44,38,.2) 34%,rgba(52,44,38,0) 52%)!important}

/* Round 45 — Senior Project Process: the six cards sit evenly between the top of the block and the top of the "Process" title (same space above and below) */
@media(min-width:900px){
  .section:has(.process-title) .process-grid{margin-top:auto!important;margin-bottom:auto!important}
  .section:has(.process-title) .process-title{margin-top:0!important}
  .section:has(.process-title){padding-top:0!important}
}

/* Round 45: interview questions page sits exactly like the Final Script page */
.text-modal .tm-doc{background:#fff!important;color:#000!important;box-shadow:none!important;border-radius:0!important;max-width:none!important;width:100%!important;margin:12px 0 0!important;padding:96px 100px 96px!important;font-family:Arimo,Arial,"Helvetica Neue",sans-serif!important;font-size:15px!important;line-height:1.3!important}
.text-modal .tm-doc ol{padding-left:1.6em!important}
.text-modal .tm-doc li{color:#000!important;font-size:15px!important;line-height:1.3!important;margin:0 0 14px!important;padding-left:.3em}
@media (max-width:899px){.text-modal .tm-doc{padding:36px 24px!important}}

/* Round 45: pop-ups with a video are kept loaded (invisible) so they play the instant they open; no placeholder photo */
.text-modal.has-bgv:not(.is-open){display:flex!important;visibility:hidden;opacity:0;pointer-events:none;z-index:-1}
.bg-vimeo{background-image:none!important}

/* Round 46: pop-up headings for the Manuscript to Pitch pop-ups: bold dark title, light film name beneath */
.text-modal__sub{font-family:var(--f-body);font-weight:400;font-size:clamp(15px,1.4vw,18px);color:#8a8680;margin:-8px 0 22px;line-height:1.3}
#report-full-text .text-modal__close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0!important;border:0!important;z-index:5}

/* Round 45: Industry Experience pop-ups (work experience + interviews): text spans the whole panel like the Senior Project process pop-ups */
.text-modal[id^="ie-"] .text-modal__body,.text-modal[id^="iv-"] .text-modal__body,
.text-modal[id^="ie-"] .text-modal__body p,.text-modal[id^="iv-"] .text-modal__body p{max-width:none!important}

/* Round 46: Vimeo audio cards, play control, pause icon with two white bars (Maddie card too) */
.process-card--audio[data-vimeo-id]{position:relative}
.process-card--audio:not(.process-card--feature).is-playing .process-card__play-icon::before{border-style:none!important;width:5px!important;height:18px!important;border-left:5px solid #fff!important;border-right:5px solid #fff!important;border-top:0!important;border-bottom:0!important;margin-left:0!important}
.process-card--audio:not(.process-card--feature).is-playing .process-card__play-icon{background:var(--brand)!important}
.audio-note{margin:6px 0 0;font-size:12px;line-height:1.3;color:#b00020;font-weight:400}
.process-card--feature .audio-note{color:#fff}