/* ==========================================================================
   pages.css — layout for the secondary pages (case study, work, playground,
   about, contact). Loaded AFTER responsive.css, on sub-pages only. index.html
   does not use this file.

   Everything here is built from the design-system tokens and reuses the shared
   components (.container, .section, .section-head, .frame, .btn, .eyebrow,
   torn edges). Media queries for these pages live at the bottom of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: page hero — a lighter hero than the landing page. Big display
   title, clears the fixed nav, sits on a light section.
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--section-pad-y) + 4.5rem);
  padding-bottom: var(--section-pad-y);
}
.page-hero__eyebrow { margin-bottom: var(--sp-4); }
.page-hero__title {
  font-size: var(--fs-section);
  max-width: 16ch;
}
.page-hero__lede {
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-lede);           /* hero-scale lede, matches .hero__lede / .cs-hero__summary */
  line-height: var(--lh-lede);
  letter-spacing: normal;
  max-width: 54ch;
  color: var(--c-ink);
}
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__title,
.page-hero--center .page-hero__lede { max-width: none; margin-inline: auto; }

/* Studio and Work: the grid below the hero copy is the point of the page —
   follow the lede closely instead of stacking the hero's own bottom padding
   on top of the grid section's default top padding. */
.page-hero + .studio,
.page-hero + .work {
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Services: How I Work runs straight into FAQ with nothing between them
   (no marquee, unlike the home page) — trim the doubled section padding
   at that seam the same way. */
.how + .faq {
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ==========================================================================
   CASE STUDY  (case-study.html)
   ========================================================================== */
.cs-hero { padding-top: calc(var(--section-pad-y) + 4.5rem); }
.cs-hero .crumbs { margin-bottom: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.cs-hero__eyebrow { margin-bottom: var(--sp-4); }
.cs-hero__title { font-size: var(--fs-section); max-width: 18ch; }
.cs-hero__summary {
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: normal;
  max-width: 60ch;
  color: var(--c-ink);
}

/* meta strip — Role / Timeline / Team / Status */
.cs-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-hairline-light);
}
.cs-meta div { display: flex; flex-direction: column; gap: var(--sp-1); }
.cs-meta dt {
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-grey-mid);
}
.cs-meta dd { font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); }

/* cover image — bleeds to the container edges */
.cs-cover {
  margin-top: var(--sp-8);
  border-radius: var(--r-xl);
}
.cs-cover img { border-radius: var(--r-xl); aspect-ratio: 16 / 9; object-fit: cover; }

/* a content block: optional label + heading + prose + media */
.cs-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.cs-section__label { margin-bottom: var(--sp-4); }
.cs-section__title {
  font-size: var(--fs-manifesto);
  line-height: var(--lh-heading);       /* matches .bio__lead / .philosophy__statement at this size */
  max-width: 20ch;
  margin-bottom: var(--sp-5);
}

.cs-prose { max-width: 57rem; }
.cs-prose > * + * { margin-top: var(--sp-5); }
.cs-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.cs-prose--lead p { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--c-ink); }
.cs-prose ul { padding-left: 1.2em; }
.cs-prose li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
  margin-top: var(--sp-2);
}

/* media inside a case study */
.cs-media { margin-top: var(--sp-7); }
.cs-media figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--c-grey-mid);
}
.cs-media img { border-radius: var(--r-xl); }
.cs-media--wide { width: 100%; }
.cs-media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

/* pull quote */
.cs-quote {
  margin-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  font-family: var(--font-display);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  max-width: 24ch;
}
/* attributed variant — testimonials quoting someone else, not the designer's
   own pull-quote, so the line reads a size down with a byline underneath */
.cs-quote--credited {
  font-size: var(--fs-md);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
  max-width: 46ch;
  color: var(--c-ink);
}
.cs-quote--credited cite {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
  font-style: normal;
  color: var(--c-grey-mid);
}

/* quiet credit / attribution block — smaller and muted, sits apart from
   the main narrative prose */
.cs-prose--fine p {
  font-size: var(--fs-sm);
  color: var(--c-grey-mid);
}

/* numbered legal-page headings, and an underline on inline links so an
   email address reads as a link within a paragraph, not just inherited text */
.cs-prose h2 {
  font-size: var(--fs-svc-title);
  color: var(--c-ink);
  margin-top: var(--sp-8);
}
.cs-prose a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   LEGAL  (privacy-policy.html, terms-of-service.html) — the same editorial
   hero/section-numeral treatment as About, with .cs-prose for the body at
   a comfortable reading measure.
   ========================================================================== */
.legal-updated {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-grey-mid);
  margin-top: var(--sp-4);
}
.cs-prose--fine strong { color: var(--c-ink); }

/* outcome — TRUTHFUL points only, never invented metrics */
.cs-outcome { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.cs-outcome li {
  display: flex;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink);
}
.cs-outcome .icon--check {
  margin-top: 0.3em;
  flex: none;
  /* .icon--check defaults to --c-mint, tuned for dark sections (15:1) — on
     this light section mint reads at ~1.3:1, well under the 3:1 minimum for
     meaningful graphics (WCAG 1.4.11). Deeper on-brand green, same hue. */
  color: #00795a;
}

/* prev / next case study */
.cs-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-9);
  border-top: 1px solid var(--c-hairline-light);
}
.cs-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-body);
}
.cs-nav__dir {
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-grey-mid);
}
.cs-nav__name { font-family: var(--font-display); font-size: var(--fs-svc-title); letter-spacing: normal; color: var(--c-ink); }
.cs-nav a:last-child { text-align: right; }

/* ==========================================================================
   MY WORK  (work.html) — reuses .work__collage / .work-card from sections.css
   ========================================================================== */
/* every card here is a case-study link, so always show the CTA (sections.css
   hides .work-card__cta--link on cards without [data-href]) */
.work-index a.work-card .work-card__cta--link { display: inline-flex; align-items: center; }
.work-index .work-card__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.work-index .work-card__context { color: var(--c-grey-mid); }

/* Two case studies per row on tablet/desktop — reads as a proper grid to
   scan rather than a long one-at-a-time scroll through four full-width
   cards. This selector (.work-index.work__collage) is more specific than
   the plain .work__collage mobile reset in responsive.css, so the "back to
   one column" override below has to live in this same file to actually win
   the cascade — a same-specificity rule in responsive.css would still lose
   to this one since pages.css loads after it. */
.work-index.work__collage {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}
.work-index .work-card { gap: var(--sp-5); }
.work-index .work-card__media { aspect-ratio: 16 / 9; }
/* .work-index .work-card__media (above) is more specific than the plain
   .work-card__media--contain rule in sections.css, so it would otherwise
   win here and override YONA's taller box back down to 16:9 — repeat the
   override at matching specificity so it actually applies on this page. */
.work-index .work-card__media--contain { aspect-ratio: 8 / 5; }
.work-index .work-card__name { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.work-index .work-card__context { font-size: var(--fs-md); }

@media (max-width: 760px) {
  .work-index.work__collage { grid-template-columns: 1fr; }
}

.work-more {
  margin-top: clamp(3rem, 2rem + 5vw, 6rem);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-hairline-light);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
}
.work-more__title { font-size: var(--fs-manifesto); line-height: var(--lh-heading); max-width: 18ch; }
.work-more__text {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-mid);
  max-width: 46ch;
}
.work-more .btn--solid { width: auto; }
.work-more__thumbs {
  grid-column: 1 / -1;
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* ==========================================================================
   STUDIO  (studio.html) — a vertical wall of project showcase panels,
   a faithful port of Figma "playground" 504:44131. Each panel is a single
   rendered mockup on its own colour field; the two motion pieces are the
   supplied clips sitting in a matching colour field. Purely visual — no
   captions (alt text carries the description).
   ========================================================================== */
.studio-wall {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  margin-top: clamp(2rem, 1.4rem + 3vw, 4rem);
}
.studio-shot {
  margin: 0;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--cs2-tint, #f4f1ea);
}
.studio-shot > img {
  display: block;
  width: 100%;
  height: auto;
}
/* the two clips get a generous colour field like the mockup panels */
.studio-shot--video {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 1rem + 4vw, 4.5rem);
}
.studio-shot--olive  { background: #98a158; }
.studio-shot--purple { background: #6b1a9c; }
.studio-shot__media {
  overflow: hidden;
  border-radius: var(--r-xl);
  line-height: 0;
  width: 100%;
  max-width: 860px;
}
.studio-shot__media video,
.studio-shot__media .studio-shot__still {
  width: 100%;
  height: auto;
  /* the clips carry a "jitter.video" export badge in the bottom margin —
     pull it out of frame */
  margin-bottom: -6.4%;
}
.studio-shot__media video { display: block; }
.studio-shot__media .studio-shot__still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .studio-shot__media video { display: none; }
  .studio-shot__media .studio-shot__still { display: block; }
}

/* ==========================================================================
   ABOUT  (about.html) — faithful port of the client-supplied Figma
   ("Consultancy" file, node 374:123 "about-editorial"). This page
   deliberately does NOT use the VERITE hand-drawn system — no torn edges,
   no brush-stroke borders — per explicit direction to reproduce the Figma
   exactly. Colour/type map 1:1 onto existing tokens: every hex in the
   source file happens to already equal a token here (#250e13 = --c-ink,
   #00ffbc = --c-mint, #334f78 = --c-banner, #b8b8bd = --c-grey, #4e4e4e =
   --c-grey-dark, #666666 = --c-grey-soft) — nothing new was invented.
   Narrative copy, skills/focus tags and the process line reproduce the
   *layout and styling* of the Figma but keep the real content already
   confirmed (actual case studies, actual service categories, the real
   How-I-Work steps) rather than the template's placeholder text.
   ========================================================================== */
.craft-hero {
  position: relative;
  overflow: hidden;
  /* top clearance matches .page-hero (Work/Studio) so the nav sits the same
     distance from the content on every secondary page */
  padding-top: calc(var(--section-pad-y) + 4.5rem);
  padding-bottom: clamp(3rem, 2rem + 5vw, 7.5rem);
}
.craft-hero__inner { position: relative; z-index: 1; }
.craft-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
  margin-bottom: var(--sp-5);
}
.craft-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-transform: uppercase;
  max-width: 16ch;
}
.craft-hero__lede {
  margin-top: var(--sp-6);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  font-weight: 500;
  color: var(--c-grey-dark);
  max-width: 44ch;
}
.craft-pill {
  position: absolute;
  z-index: 1;
  top: clamp(6.5rem, 5rem + 4vw, 8.5rem);
  right: var(--gutter);
  display: inline-flex;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  border: 2px solid var(--c-mint);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.08);
}
.craft-numeral {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--c-ink);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}
.craft-numeral--hero {
  top: -1rem;
  right: var(--gutter);
  font-size: clamp(6rem, 3rem + 13vw, 19rem);
}
.craft-numeral--section {
  /* was a negative top offset, which pushed the numeral's own top edge
     above the section's box — since .craft-section clips overflow, that
     top portion of the glyph was being cut off instead of just bleeding
     into the (nonexistent) padding above it. keep it inside the box. */
  top: 0;
  left: clamp(0.5rem, -0.5rem + 4vw, 3.5rem);
  font-size: clamp(5rem, 2.5rem + 11vw, 17.5rem);
}

/* split layout — "The Craftsman": title + skills/focus/process, narrative right */
.craft-section { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 7.5rem); }
.craft-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--sp-8) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.craft-split__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.3125rem);
  line-height: 1.1;
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
}
.craft-split__lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-grey-dark);
  margin-bottom: var(--sp-6);
}
.craft-meta-group + .craft-meta-group { margin-top: var(--sp-6); }
.craft-meta-label {
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-grey-soft);
  margin-bottom: var(--sp-3);
}
.craft-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.craft-tag {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-grey);
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 500;
  white-space: nowrap;
}
.craft-tag--dark { background: var(--c-ink); color: var(--c-white); }
.craft-tag--light { background: var(--c-white); color: var(--c-ink); }
.craft-process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.craft-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.craft-narrative p:first-child { color: var(--c-ink); }
.craft-narrative p:last-child { color: var(--c-grey-dark); }

/* "Off The Grid" — full-width title, two paragraphs side by side, no tags */
.craft-curator__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  position: relative;
  z-index: 1;
}
.craft-narrative--cols {
  position: relative;
  z-index: 1;
  flex-direction: row;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  margin-top: var(--sp-6);
}
.craft-narrative--cols > * { flex: 1; min-width: 0; }
.craft-narrative--cols > :first-child { color: var(--c-ink); }
.craft-narrative--cols > :last-child { color: var(--c-grey-dark); }
/* second paragraph groups with a third under one flex item, so a 3-paragraph
   narrative still reads as two balanced columns rather than three thin ones */
.craft-narrative--cols > div { display: flex; flex-direction: column; gap: var(--sp-5); }
.craft-narrative strong { color: var(--c-ink); font-weight: 600; }

@media (max-width: 900px) {
  .craft-split { grid-template-columns: 1fr; }
  .craft-narrative--cols { flex-direction: column; }
}

/* below this width the hero headline wraps onto more lines than the
   absolutely-positioned pill can reliably clear — drop it into normal
   flow instead of risking an overlap */
@media (max-width: 700px) {
  .craft-pill {
    position: static;
    display: inline-flex;
    margin: 0 var(--gutter) var(--sp-5);
  }
  .craft-hero__eyebrow { margin-top: 0; }
}

/* ==========================================================================
   SERVICES  (services.html) — a plain divided list, not a card grid. Reused
   for both "what you can hire me for" and "engagement options": a short
   label (number or duration) beside the content, hairline brush-rule
   dividers between rows.
   ========================================================================== */
.svc-list { display: flex; flex-direction: column; }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}
.svc-row__num {
  font-family: var(--font-display);
  font-size: var(--fs-manifesto);
  color: var(--c-grey-mid);
}
.svc-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  color: var(--c-ink);
  margin: 0 0 var(--sp-2);
}
.svc-row__pitch {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 var(--sp-3);
}
.svc-row__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-grey-dark);
  max-width: 56ch;
  margin: 0;
}
@media (max-width: 640px) {
  .svc-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ==========================================================================
   ABOUT — legacy VERITE bio treatment. No longer used by about.html (kept
   only in case the hand-drawn version is wanted again); superseded above.
   Exception: .bio__filmstrip / .bio__gallery further down ARE still live —
   the craft-* markup reuses them purely for filmstrip image sizing.
   ========================================================================== */
.bio { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.bio__grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  column-gap: var(--sp-8);
  row-gap: var(--sp-6);
  align-items: start;
}
.bio__label { position: sticky; top: 6rem; }
.bio__body { max-width: 60ch; }
.bio__body > * + * { margin-top: var(--sp-5); }
.bio__lead {
  font-family: var(--font-display);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}
.bio__body p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-grey-dark);
}
.bio__media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.bio__media--two { grid-template-columns: repeat(2, 1fr); }
.bio__media img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; }
.bio__divider { margin-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* skills / focus / process — a scannable strip under the narrative,
   reuses the shared .tag/.tag-list pill (built for dark sections) with a
   light-bg treatment scoped to this context */
.bio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7) var(--sp-8);
  padding-top: var(--sp-6);
  margin-top: var(--sp-6) !important;
  border-top: 1px solid var(--c-hairline-light);
}
.bio__meta-label {
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-grey-mid);
  margin-bottom: var(--sp-3);
}
.bio__meta .tag {
  background: var(--c-field-bg);
  border: 1px solid var(--c-hairline-light);
  color: var(--c-ink);
}
.bio__process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.bio__process span[aria-hidden] { color: var(--c-mint-74); font-weight: 400; }

/* filmstrip placement inside a bio section — full-bleed, breaks out of
   .container the way the marquee does elsewhere on the site */
.bio__filmstrip { margin-top: var(--sp-8); }
.bio__filmstrip .filmstrip figure { width: 380px; }
.bio__filmstrip .filmstrip img { height: 260px; }
.bio__gallery { margin-top: var(--sp-7); }
.bio__gallery .filmstrip figure { width: 260px; }
.bio__gallery .filmstrip img { height: 340px; }

/* ==========================================================================
   RESPONSIVE — all sub-page media queries
   ========================================================================== */
@media (max-width: 1024px) {
  .bio__grid { grid-template-columns: 1fr; }
  .bio__label { position: static; }
  .cs-hero__title, .page-hero__title { max-width: none; }
}

@media (max-width: 760px) {
  .cs-media--pair { grid-template-columns: 1fr; }
  .cs-nav { grid-template-columns: 1fr; }
  .cs-nav a:last-child { text-align: left; }
  .studio-shot--video { padding: clamp(1rem, 0.5rem + 3vw, 2rem); }
  .work-more { grid-template-columns: 1fr; }
  .work-more__thumbs { grid-template-columns: repeat(2, 1fr); }
  .bio__media, .bio__media--two { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .bio__media, .bio__media--two { grid-template-columns: 1fr; }
}