/* ---------- Case study page (Figma 141:598 "Campaign Intro – Hero Image") ----------
   Template for individual campaign pages (Forever 10 first).
   1440 frame: content inset to the logo edge (120px); header block → 78px → body copy → 36px →
   button; then 48px → full-bleed 16:9 hero. */

/* Content starts directly under the site header (its 24px bottom padding is the gap).
   Copy lines up with the logo's left edge: the header's page margin (120 → 48 → 24). */
.case-study {
  --cs-inset: var(--page-margin);
}
@media (max-width: 960px) {
  .case-study { --cs-inset: var(--space-md); }
}

.cs-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--cs-inset);
}

/* Eyebrow + Display/XL title, divider runs to the page edge */
.cs-title-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.cs-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--neutral-surface);
}
.cs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 900;
  line-height: 96px;
  color: var(--neutral-surface);
}
.cs-title-block::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 4px;
  background: var(--signal-orange);
}

/* Display/S lede, sentence case */
.cs-lede {
  min-height: 56px; /* Figma's lede box: body copy starts 6px below it */
  margin: var(--space-sm) var(--cs-inset) 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: var(--neutral-surface);
}

/* Body/L copy: runs out to the right page margin (the About button's edge) */
.cs-body {
  margin: 6px var(--cs-inset) 0 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--neutral-surface);
}
.cs-body p { margin: 0; }
.cs-body p + p { margin-top: 30px; }

.cs-actions { margin-top: 36px; }

/* Full-bleed hero, 1440×810 at the design width; keeps 16:9 as it scales */
.cs-hero {
  display: block;
  width: 100%;
  margin-top: 48px;
}
.cs-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Tablet: Display/XL Mobile title, slightly smaller lede/eyebrow */
@media (max-width: 1100px) {
  .cs-title { font-size: 64px; line-height: 68px; }
  .cs-meta { font-size: 10px; line-height: 14px; letter-spacing: 0.09em; }
  .cs-lede { font-size: 24px; line-height: 28px; }
}

/* Phone: 24px margins, Display/L Mobile title, Body/M copy, 4:5 hero crop */
@media (max-width: 640px) {
  .case-study { --cs-inset: var(--space-md); }
  .cs-meta {
    font-size: min(10px, calc((100vw - 2 * var(--space-md)) / 30));
    white-space: nowrap;
  }
  .cs-title { font-size: 40px; line-height: 44px; }
  .cs-lede { min-height: 0; font-size: 20px; line-height: 24px; }
  .cs-body { margin-top: var(--space-sm); font-size: 16px; line-height: 26px; }
  .cs-body p + p { margin-top: 26px; }
  .cs-actions { margin-top: var(--space-md); }
  .cs-actions .btn { position: relative; min-width: 0; height: 32px; padding: 0 var(--space-sm); font-size: 12px; line-height: 18px; }
  .cs-actions .btn::after { content: ""; position: absolute; inset: -6px 0; }
  .cs-hero { margin-top: var(--space-xl); }
  .cs-hero img { aspect-ratio: 4 / 5; }
}

/* ---------- Brand toolkit (Figma 143:746) ----------
   1196px column centred on the 1440 frame (≈ the page margin), 128px (3XL)
   below the hero. Primary mark and colorways butt together; the key sits
   24px below. Boards share the page background, so they read as one sheet. */
.cs-toolkit {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 1196px;
  margin: var(--space-2xl) auto 0;
  padding: 0 var(--page-margin);
  box-sizing: content-box;
}
.cs-toolkit-boards { display: flex; flex-direction: column; }
.cs-toolkit img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .cs-toolkit { padding-inline: var(--space-md); }
}
@media (max-width: 640px) {
  .cs-toolkit { gap: var(--space-sm); margin-top: var(--space-xl); }
}

/* Toolkit key: the board image on desktop; on tablet/phone its three pieces
   are laid out in HTML so the captions stay a readable 12px. */
.cs-key { display: none; }

@media (max-width: 960px) {
  .cs-toolkit .cs-key-board { display: none; }
  .cs-key {
    --key-h: 180px;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin: var(--space-sm) 0 0;
    padding: 0 6%;
    list-style: none;
  }
  .cs-key-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .cs-key-art {
    display: flex;
    align-items: center;
    height: var(--key-h);
  }
  .cs-toolkit .cs-key-art img { width: auto; height: 100%; }
  .cs-toolkit .cs-key-item--type img { height: calc(var(--key-h) * 363 / 686); }
  .cs-key-item--type { max-width: 300px; }
  .cs-key-caption {
    font-size: 14px;
    line-height: 22px;
    color: var(--neutral-surface);
  }
}

/* Phone: numeral + silhouette side by side, typefaces full width below */
@media (max-width: 640px) {
  .cs-key {
    --key-h: 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-sm);
    margin-top: var(--space-md);
    padding: 0;
  }
  .cs-key-item--type { grid-column: 1 / -1; max-width: none; }
}

/* ---------- Placements (Figma 166:452) ----------
   Same 1196 column. Labels start 122px under the toolkit (96px section gap +
   the frame's 26px inset). 464 / 708 columns, 24px apart; billboard and web
   banner stack 18px apart; Body/M caption centred 8px below. */
.cs-placements {
  max-width: 1196px;
  margin: var(--space-2xl) auto 0;
  padding: 0 var(--page-margin);
  box-sizing: content-box;
}
.cs-placements-grid {
  display: grid;
  grid-template-columns: 464fr 708fr;
  align-items: start;
  gap: 30px;
}
.cs-placements-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-placement {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.cs-placement figcaption {
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-hairline);
}
.cs-placement img {
  display: block;
  width: 100%;
  height: auto;
}
.cs-placement--social img { aspect-ratio: 464 / 580.79; object-fit: cover; }
.cs-placement--billboard img { aspect-ratio: 708 / 218; object-fit: cover; }
.cs-placements-caption {
  max-width: 578px;
  margin: var(--space-xs) auto 0;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--neutral-hairline);
}

@media (max-width: 960px) {
  .cs-placements { padding-inline: var(--space-md); }
}
/* Phone: one column — social, billboard, web — then the caption */
@media (max-width: 640px) {
  .cs-placements { margin-top: var(--space-xl); }
  .cs-placements-grid { grid-template-columns: 1fr; }
  .cs-placements-caption { margin-top: var(--space-md); }
}

/* =====================================================================
   Campaign sections (Figma 417:1213 → 171:778)
   Every section sits 96px (2XL) below the one before it, in the same
   1196px column. Captions are Neutral/Hairline; image pairs and trios
   are 30px apart; captions sit 8px under their image.
   ===================================================================== */
.case-study { overflow-x: clip; } /* the phone mockup bleeds past the column */
:where(.case-study) figure { margin: 0; } /* drop the browser's 40px figure inset */

.cs-section {
  max-width: 1196px;
  margin: var(--space-2xl) auto 0;
  padding: 0 var(--page-margin);
  box-sizing: content-box;
}
.cs-section img {
  display: block;
  width: 100%;
  height: auto;
}

/* Caption styles */
.cs-cap {
  margin: var(--space-xs) 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-hairline);
}
.cs-cap--center { padding: 0 28px; text-align: center; }
.cs-cap--m { font-size: 16px; line-height: 26px; }
.cs-cap--l small { display: block; font-size: 14px; line-height: 22px; } /* photo credit, Body/S */
.cs-label {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-hairline);
}

/* Grids */
.cs-pair, .cs-trio {
  display: grid;
  align-items: start;
  gap: 30px;
}
.cs-pair { grid-template-columns: 1fr 1fr; row-gap: var(--space-md); } /* 24px between rows, like trios */
.cs-trio { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-md); } /* 24px between rows of a 2×3 */
.cs-block + .cs-block { margin-top: 48px; }
.cs-img-4x5 { aspect-ratio: 4 / 5; object-fit: cover; }


/* 2 · Print & media — Seattle Times page + note, then GoHuskies pair */
.cs-split {
  display: grid;
  grid-template-columns: 705fr 443fr;
  align-items: center;
  gap: 48px;
}
.cs-split .cs-cap { margin: 0; }
.cs-print .cs-pair img { aspect-ratio: 582 / 752; object-fit: cover; }

/* 3 · Court decals — two labelled 16:9 mockups, caption 16px below */
.cs-court figure + figure { margin-top: var(--space-xs); }

/* 4 · In arena — full-bleed court, banner + note, three detail shots */
/* The court photo sits in the 1196 column like the other visuals (2.4:1 crop) */
.cs-fullcourt img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 600;
  object-fit: cover;
  object-position: 50% 14.7%;
}
.cs-arena > .cs-section:not(.cs-fullcourt) { margin-top: 48px; } /* same as blocks inside a section */
.cs-banner-row {
  display: grid;
  grid-template-columns: 830fr 318fr;
  align-items: center;
  gap: 48px;
}
.cs-banner-row .cs-cap { margin: 0; }
.cs-detail .cs-cap { padding: 0; }
.cs-detail .cs-cap small { display: block; font-size: inherit; }

/* 5 · Merch — Shop Now promo | store photo over the hoodie + tee */
.cs-merch-grid {
  display: grid;
  grid-template-columns: 613fr 552fr;
  align-items: center;
  gap: 32px;
}
.cs-merch-side { display: flex; flex-direction: column; gap: 27px; }
.cs-merch-side img:first-child { aspect-ratio: 551.56 / 413.67; object-fit: cover; }

/* 6 · E-commerce — Seattle Times digital ad set, then ticket pair */
.cs-ads {
  display: grid;
  grid-template-columns: 390fr 787fr;
  gap: 18px;
}
.cs-ads-tall { position: relative; }
.cs-section .cs-ads-tall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-ads-stack { display: flex; flex-direction: column; gap: 18px; }

/* 7 · Social system — quotes, gameday pair, phone wallpaper */
.cs-wallpaper {
  position: relative;
  aspect-ratio: 1196 / 1380;
}
.cs-section .cs-wallpaper img {
  position: absolute;
  left: -10.56%;
  top: 4.63%;
  width: 50.85%;
}
.cs-wallpaper .cs-cap {
  position: absolute;
  left: 47.9%;
  top: 39.88%;
  width: 52.1%;
  margin: 0;
}

/* 8 · Results — three numbers, caveat, Plum's post, wallpaper note */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(82px, 5.7vw);
  width: min(1196px, 100% - 2 * var(--page-margin));
  margin: var(--space-2xl) auto 0;
  text-align: center;
}
.cs-stat { margin: 0; }
.cs-stat-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #766b68; /* Neutral/Text - Secondary */
}
.cs-stat-number {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: clamp(48px, 5.72vw, 82px);
  font-weight: 900;
  line-height: 0.89;
  color: var(--neutral-surface);
}
.cs-stat-label {
  display: block;
  margin-top: 21px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.62vw, 38px);
  font-weight: 700;
  line-height: 0.93;
  text-transform: uppercase;
  color: var(--neutral-surface);
}
.cs-stat .cs-cap { display: block; margin-top: 14px; font-size: 17px; line-height: 26px; }
.cs-caveat {
  max-width: 1196px; /* one line at desktop widths */
  margin: 48px auto 0;
  padding: 0 var(--space-md);
  box-sizing: content-box;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--neutral-hairline);
}
/* Plum's post: screenshot 15% larger than Figma (420 vs 365), caption at the
   caveat's Body/M size, three balanced lines, centred on the photo */
.cs-post {
  display: grid;
  grid-template-columns: 420fr 675fr;
  align-items: center;
  gap: min(100px, 7vw);
}
.cs-post .cs-cap {
  max-width: 320px;
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  text-wrap: balance;
}
.cs-takeaway {
  max-width: 954px;
  margin: var(--space-2xl) auto 0;
  padding: 72px var(--space-md);
  box-sizing: content-box;
  font-size: 24px;
  line-height: 30px;
  color: var(--neutral-surface);
}
.cs-takeaway p { margin: 0; }

/* 9 · Next project + View all work (footer follows 48px below) */
.cs-next {
  display: block;
  margin-top: calc(var(--space-2xl) + 41px);
  padding-left: var(--page-margin);
  color: var(--neutral-surface);
  text-decoration: none;
}
/* Hover: Signal Orange gradient text, same as the home page headlines */
.cs-next .cs-title {
  /* Sized to the font's full text box (1.2em), like the home page's inline
     links, so the fade lands on the letters the same way */
  background: linear-gradient(to bottom, var(--signal-orange), var(--signal-orange-dark)) 0 50% / 100% 1.2em no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.2s ease;
}
.cs-next:hover .cs-title,
.cs-next:focus-visible .cs-title { color: transparent; }
.cs-next:focus-visible { outline: none; }
.cs-next-desc {
  display: block;
  margin: var(--space-sm) var(--page-margin) 0 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--neutral-surface);
}
.cs-all-work {
  margin-top: calc(41px + 48px);
  padding-left: var(--page-margin);
}
.btn-outline-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 82px;
  padding: 0 89px;
  border: 0.8px solid var(--signal-orange);
  border-radius: 6.4px;
  font-size: 20px;
  line-height: 30px;
  color: var(--neutral-surface);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.btn-outline-lg:hover,
.btn-outline-lg:focus-visible { background: var(--signal-tint); outline: none; }
.case-study + .site-footer { margin-top: 48px; }

/* Tablet */
@media (max-width: 960px) {
  .cs-section { padding-inline: var(--space-md); }
  .cs-pair, .cs-trio { gap: var(--space-md); }
  .cs-split, .cs-banner-row { gap: var(--space-lg); }
  .cs-stat .cs-cap { font-size: 14px; line-height: 22px; }
  .cs-stats { width: calc(100% - 2 * var(--space-md)); }
  .cs-takeaway { font-size: 20px; line-height: 28px; }
  .cs-next { padding-left: var(--space-md); }
  .cs-next .cs-title { font-size: 64px; line-height: 68px; }
  .cs-next-desc { margin-right: var(--space-md); }
  .cs-all-work { padding-left: var(--space-md); }
}

/* Phone: everything stacks in one column on the 24px margins */
@media (max-width: 640px) {
  .cs-section { margin-top: var(--space-xl); }
  .cs-fullcourt img { aspect-ratio: 4 / 3; }
  .cs-fullcourt .cs-cap { margin-top: var(--space-xs); text-align: left; }
  .cs-arena > .cs-section:not(.cs-fullcourt) { margin-top: var(--space-lg); }
  .cs-cap--center { padding: 0; }
  .cs-pair, .cs-trio, .cs-split, .cs-banner-row, .cs-merch-grid, .cs-post { grid-template-columns: 1fr; gap: var(--space-md); }
  .cs-detail .cs-cap, .cs-print .cs-cap { padding: 0; }
  .cs-merch-side { gap: var(--space-md); }
  .cs-ads { grid-template-columns: 1fr; gap: var(--space-sm); }
  .cs-ads-tall { width: 62%; margin: 0 auto; aspect-ratio: 1 / 2; }
  .cs-ads-stack { gap: var(--space-sm); }
  .cs-block + .cs-block { margin-top: var(--space-lg); }
  .cs-wallpaper { aspect-ratio: auto; }
  .cs-section .cs-wallpaper img { position: static; width: 82%; margin: 0 auto; }
  .cs-wallpaper .cs-cap { position: static; width: auto; margin-top: var(--space-md); }
  .cs-stats { grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
  .cs-stat-number { font-size: 64px; }
  .cs-stat-label { font-size: 30px; margin-top: 14px; }
  .cs-post .cs-cap { padding-top: 0; }
  .cs-takeaway { margin-top: var(--space-xl); padding-block: 0; font-size: 18px; line-height: 26px; }
  .cs-next { margin-top: var(--space-xl); }
  .cs-next .cs-title { font-size: 40px; line-height: 44px; }
  .cs-next-desc { font-size: 16px; line-height: 26px; }
  .cs-all-work { margin-top: var(--space-lg); }
  .btn-outline-lg { height: 56px; padding: 0 var(--space-lg); font-size: 18px; }
  .case-study + .site-footer { margin-top: var(--space-xl); }
}

/* ---------- Motion players (js/motion.js) ----------
   Looping, muted animations: the cover image sits on top until the video is
   playing, then fades out (same as the home page Our State player). */
.cs-motion {
  position: relative;
  overflow: hidden;
  background: var(--neutral-bg);
}
.cs-section .cs-motion > img,
.cs-motion > video,
.cs-motion > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-motion > img { transition: opacity 0.3s ease; }
.cs-motion.is-playing > img { opacity: 0; }