/*
 * Shared case study layout, spacing & responsive scaling
 * Linked by all detail_project*.html pages and future case studies.
 *
 * Page-specific theme (hero palette, :root CSS vars) stays in each HTML
 * file's inline <style> — only accent/hero color overrides per project.
 *
 * New case study: copy a detail_project*.html, set :root vars + hero text
 * colors inline, link css/case-study.css?v=60 (match cache buster on both files).
 *
 * Hero Project Focus block (required on every case study):
 *   <div class="w-layout-grid work-grid is-project-focus">
 *     <div class="project-focus-label">Project Focus</div>
 *     <div class="project-focus-value">Area + Area + Area</div>
 *   </div>
 *
 * Structure:
 *   ._1st-section / ._1st-section-wrapper   → hero title + Project Focus block
 *   #content
 *     .spacer-large / .is-compact           → section breaks
 *     .feature-media-section                → text block + media group
 *     .work-info / .work-stats              → two-column content blocks
 *     .projects-list / .espn-tc-intro       → gallery & intro media
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

html,
body {
  width: 100%;
  background-color: var(--canvas);
}

.safari-chrome-tint {
  position: fixed;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--canvas);
}

.safari-chrome-tint::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url('../images/noise.gif');
  background-size: 200px;
}

.safari-chrome-tint--top {
  top: 0;
  height: max(24px, env(safe-area-inset-top, 0px));
}

.safari-chrome-tint--bottom {
  bottom: 0;
  height: max(24px, env(safe-area-inset-bottom, 0px));
}

@media (hover: hover) and (pointer: fine) {
  .safari-chrome-tint {
    display: none !important;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layout {
  background-color: var(--canvas-muted);
  width: 100%;
}

.content {
  overflow: visible;
}

/* ── Hero section ─────────────────────────────────────────────────────── */

._1st-section {
  background-color: var(--canvas) !important;
  overflow: visible;
  position: relative;
}

.noise {
  display: none;
}

._1st-section::after,
#content::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url('../images/noise.gif');
  background-size: 200px;
  pointer-events: none;
  z-index: 1;
}

._1st-section-wrapper {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

._1st-section-wrapper .caption,
._1st-section-wrapper .caption-eyebrow {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 400;
}

._1st-section-wrapper .about-title {
  font-family: Humane, sans-serif;
  font-weight: 600;
}

.about-title-wrapper {
  mix-blend-mode: normal;
  align-items: center;
  padding-top: 5rem;
  width: 100%;
  max-width: none;
}

/* Webflow .about-title-row is flex but lacks justify-content — title sits left */
._1st-section-wrapper .about-title-row {
  width: 100%;
  justify-content: center;
}

h1.about-title,
._1st-section-wrapper .about-title {
  white-space: nowrap;
  font-size: min(33.125em, 900px);
  width: 100%;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  letter-spacing: normal;
}

/*
 * Hero Project Focus block (Figma node 103:8284)
 * Centered vertical stack — label + focus areas, both Scto Grotesk 24px.
 */
._1st-section-wrapper .about-title-wrapper .w-layout-grid.work-grid {
  display: flex !important;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 582px;
  gap: 0;
  font-size: 24px;
  position: relative;
  z-index: 1;
}

._1st-section-wrapper .about-title-wrapper .work-grid .project-focus-label,
._1st-section-wrapper .about-title-wrapper .work-grid .project-focus-value {
  font-family: 'Scto Grotesk A', sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 28.75px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  color: var(--text) !important;
  font-variation-settings: normal !important;
  width: 100%;
}

.about-title-wrapper .spacer-large {
  height: 6vh;
}

/* ── Navigation & footer (theme via :root vars) ───────────────────────── */

.footer .footer-content {
  z-index: 2;
}

.footer .magnetic-link,
.footer-link,
.text-link {
  color: var(--text);
}

.navigation .navbar,
.navigation .navbar-name {
  mix-blend-mode: normal !important;
}

.navigation .magnetic-link,
.navigation .link-label,
.navigation .link-block,
.navigation .navbar-name {
  color: var(--text) !important;
}

.navigation .link-label,
.navigation .link-label.on-hover,
.navigation .navbar-caption {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 400;
}

.navigation .navbar-caption {
  color: var(--text) !important;
}

/* Scroll-away nav: hide on scroll down, reveal on scroll up */
@media screen and (min-width: 768px) {
  .navigation {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .navigation.is-nav-hidden {
    transform: translateY(calc(-100% - 3vw));
    pointer-events: none;
  }
}

@media screen and (max-width: 767px) {
  .navigation .navbar-name,
  .navigation .navbar {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .navigation.is-nav-hidden .navbar-name,
  .navigation.is-nav-hidden .navbar {
    transform: translateY(calc(-100% - 32px));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation,
  .navigation .navbar-name,
  .navigation .navbar {
    transition: none;
  }
}

/* ── Content layout ───────────────────────────────────────────────────── */

/*
 * Content column max: 97.561vw (1600px @ 1640px viewport).
 * Caps at 1600px on wider screens so assets/text don't over-scale.
 */
:root {
  --case-study-content-max-vw: 97.561vw;
  --case-study-content-max-px: 1600px;
}

#content {
  position: relative;
  --case-study-content-max: min(var(--case-study-content-max-vw), var(--case-study-content-max-px));
}

#content > .espn-tc-intro,
#content > .work-info-section,
#content > .work-stats-section,
#content > .w-dyn-list,
#content > .feature-media-section {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--case-study-content-max);
  margin-left: auto;
  margin-right: auto;
}

#content .spacer-large {
  height: 200px;
}

#content .spacer-large.is-compact {
  height: 54px;
}

#content .feature-media-section {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

#content .feature-media-section .work-feature-section,
#content .feature-media-section .w-dyn-list {
  padding: 0;
}

#content .feature-media-images {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

#content .feature-media-images .w-dyn-list {
  margin: 0;
}

/* ── Intro hero & gallery ───────────────────────────────────────────────── */

#content .projects-list {
  grid-template-columns: 1fr;
  position: relative;
  z-index: 2;
}

#content .espn-tc-intro {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

#content .espn-tc-intro > img {
  width: 100%;
  height: auto;
  border-radius: 32px;
  display: block;
  object-fit: cover;
}

#content .iphone-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
}

/*
 * Phone shell — fluid on all viewports.
 * Width prefers ~38% of overlay, but never exceeds ~78% of overlay height
 * (keeps the frame inside the hero from mobile through mid desktop).
 * Mobile baseline at ~375px: ~80×171, 2px stroke, 12px radius.
 * Large desktop: approaches 400×855, 6px stroke, 37px radius.
 */
#content .iphone-shell {
  --shell-radius: clamp(12px, 2.25vw + 3.5px, 37px);
  --shell-stroke: clamp(2px, 0.375vw + 0.6px, 6px);
  position: relative;
  width: clamp(80px, min(38cqw, calc(78cqh * 80 / 171)), 400px);
  height: auto;
  aspect-ratio: 80 / 171;
  border: var(--shell-stroke) solid #3e4041;
  border-radius: var(--shell-radius);
  box-shadow:
    0 0 clamp(12px, 3.8vw, 62px) rgba(0, 0, 0, 0.4),
    clamp(4px, 1.2vw, 19px) clamp(4px, 1.2vw, 19px) clamp(10px, 2.7vw, 44px) rgba(0, 0, 0, 0.8);
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
  pointer-events: auto;
}

#content .iphone-shell-notch {
  position: absolute;
  top: clamp(3px, 1.1cqw + 2px, 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 4.5%;
  min-height: clamp(8px, 3.5cqh, 22px);
  background: #000;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}

#content .iphone-shell-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--shell-radius) - var(--shell-stroke));
  display: block;
}

#content .projects-list .w-dyn-item {
  width: 100%;
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#content .projects-list img,
#content .feature-media-section img,
#content .work-feature-section img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

#content .projects-list img {
  border-radius: 32px;
  object-fit: contain;
}

#content .projects-list img.projects-gallery-image--tall {
  height: auto;
  object-fit: contain;
}

#content .projects-list img.projects-gallery-image--wireframe,
#content .projects-list img.projects-gallery-image--brackets,
#content .projects-list img.projects-gallery-image--quick-brackets,
#content .projects-list img.projects-gallery-image--birdseye,
#content .projects-list img.projects-gallery-image--bracketcast,
#content .projects-list img.projects-gallery-image--brand-color,
#content .projects-list img.projects-gallery-image--my-champ {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Work feature blocks ──────────────────────────────────────────────── */

#content .work-feature {
  max-width: 53.75vw;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#content .work-feature .caption-eyebrow.is-title {
  margin-bottom: 0;
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  font-variation-settings: normal;
}

#content .work-feature-headline {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 500;
  font-variation-settings: "wght" 500, "opsz" 32;
}

#content .work-feature-copy {
  font-size: 1em;
}

#content .work-feature-copy p {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 31.25vw;
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1.6; /* was 32px — scales with font-size */
  font-variation-settings: normal;
}

/* ── Work info ────────────────────────────────────────────────────────── */

#content .work-info-section .divider {
  height: 1px;
  margin-bottom: 3em;
}

#content .work-info {
  width: 100%;
  grid-column-gap: 5em;
  grid-row-gap: 3em;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: start;
}

@media screen and (min-width: 1280px) {
  #content .work-info {
    grid-column-gap: 8em;
  }
}

#content .work-info-details {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

#content .work-info-right {
  width: 100%;
  min-width: 0;
}

#content .work-info-section .caption-eyebrow.is-title,
#content .work-info-section .work-info-details .caption,
#content .work-info-section .work-info-lead {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 400;
  font-variation-settings: normal;
}

#content .work-info-section .work-info-details .caption {
  letter-spacing: -1px;
}

#content .work-info-section .caption-eyebrow.is-title {
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -0.54px;
  text-transform: uppercase;
}

#content .work-info-section .work-info-copy p:not(.work-info-lead) {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 400;
  font-variation-settings: normal;
}

#content .work-info-section .work-info-headline {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 500;
  font-size: 2.625em;
  line-height: 1.1;
  /* Figma 375px @ 42px (2.625em) — scale with type so wrap stays consistent */
  max-width: 8.928571em;
  font-variation-settings: "wght" 500, "opsz" 32;
  text-transform: uppercase;
}

#content .work-info-headline {
  margin-bottom: 32px;
}

#content .work-info-right .caption-eyebrow:before {
  content: none;
}

#content .work-info-copy {
  max-width: none;
  width: 100%;
  font-size: 2.375em;
}

#content .work-info-copy p,
#content .text-medium.w-richtext p {
  margin-top: 0;
  margin-bottom: 1.25em;
}

#content .work-info-copy p:last-child,
#content .text-medium.w-richtext p:last-child {
  margin-bottom: 0;
}

#content .work-info-lead {
  padding-left: 0;
}

#content .work-info-lead:before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  background-color: currentColor;
  border-radius: 50%;
  margin-right: 0.35em;
  vertical-align: 0.12em;
}

@media screen and (max-width: 991px) {
  #content .work-info {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 2em;
  }
}

/* ── Work stats ───────────────────────────────────────────────────────── */

#content .work-stats-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#content .work-stats {
  grid-column-gap: 5em;
  grid-row-gap: 3em;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: center;
}

#content .work-stats-headline {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 500;
  font-variation-settings: "wght" 500, "opsz" 32;
}

#content .work-stats-section .caption-eyebrow.is-title {
  margin-bottom: 0;
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: -0.54px;
  text-transform: uppercase;
  font-variation-settings: normal;
}

#content .work-stats-section .work-stats-item .caption {
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 400;
  font-size: 1em;
  font-variation-settings: normal;
  text-transform: uppercase;
  max-width: 11em;
  text-wrap: pretty;
}

#content .work-stats-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

#content .work-stats-item {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  border-top: 1px solid var(--divider-2);
  padding-top: 1.25em;
}

#content .work-stats-value {
  margin: 0;
  font-family: 'Scto Grotesk A', sans-serif;
  font-weight: 500;
  font-size: 4em;
  line-height: 0.95;
  font-variation-settings: normal;
}

@media screen and (max-width: 991px) {
  #content .work-stats {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 2em;
  }

  #content .work-stats-metrics {
    grid-template-columns: 1fr;
  }
}

/* ── Bottom thumb / next-project theme ─────────────────────────────────── */

:root {
  --case-study-theme-bg: #222222;
  --case-study-theme-text: #ffffff;
}

html.is-case-study-in-transition .layout > .footer {
  background-color: transparent;
}

html.is-case-study-in-transition #content::before {
  content: none;
}

.layout > .footer .footer-content,
.layout > .footer .footer-bg-title {
  visibility: hidden;
}

html.is-case-study-footer-visible .layout > .footer .footer-content,
html.is-case-study-footer-visible .layout > .footer .footer-bg-title {
  visibility: visible;
}

html.is-case-study-thumb-themed {
  --canvas: var(--case-study-theme-bg);
  --canvas-muted: var(--case-study-theme-bg);
  --text: var(--case-study-theme-text);
  --link: var(--case-study-theme-text);
  --accent: var(--case-study-theme-text);
  --dim-grey: color-mix(in srgb, var(--case-study-theme-text) 65%, transparent);
  --divider: color-mix(in srgb, var(--case-study-theme-text) 18%, transparent);
  --divider-2: color-mix(in srgb, var(--case-study-theme-text) 10%, transparent);
}

.thumb-wrapper.is-work .thumb-title-wrapper {
  mix-blend-mode: screen;
}

html.is-case-study-thumb-themed .thumb-wrapper.is-work .thumb-title-wrapper {
  mix-blend-mode: normal;
  background-color: transparent;
  z-index: 2;
}

html.is-case-study-thumb-themed .thumb-wrapper.is-work .thumb-perspective {
  z-index: 0;
}

html.is-case-study-thumb-themed .thumb-wrapper.is-work .thumb-title,
html.is-case-study-thumb-themed .thumb-wrapper.is-work .thumb-title-overflow {
  color: var(--case-study-theme-text);
  mix-blend-mode: normal;
}

html.is-case-study-thumb-themed .navigation .navbar,
html.is-case-study-thumb-themed .navigation .navbar-name {
  mix-blend-mode: normal !important;
}

html.is-case-study-thumb-themed .navigation .magnetic-link,
html.is-case-study-thumb-themed .navigation .link-label,
html.is-case-study-thumb-themed .navigation .link-block,
html.is-case-study-thumb-themed .navigation .navbar-name {
  color: var(--case-study-theme-text) !important;
}

html.is-case-study-thumb-themed .navigation .navbar-caption {
  color: var(--case-study-theme-text) !important;
}

/* Luminosity thumb image + noise overlay (matches index.html thumb treatment) */
.thumb-wrapper.is-work {
  position: relative;
}

.thumb-wrapper.is-work .thumb-aspect-ratio {
  position: relative;
  overflow: hidden;
  background-color: var(--canvas);
}

.thumb-wrapper.is-work .thumb-tilt {
  position: absolute;
  /* No mouse tilt on work/detail thumbs, so no bleed needed */
  inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.thumb-wrapper.is-work .thumb-luminosity {
  position: absolute;
  inset: 0;
  isolation: isolate;
  transform: translateZ(0);
  overflow: hidden;
}

.thumb-wrapper.is-work .thumb-luminosity::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--canvas);
  z-index: 0;
}

.thumb-wrapper.is-work .thumb-image {
  mix-blend-mode: luminosity;
  filter: none;
  z-index: 1;
}

/* Full-viewport noise for thumb + footer — fixed so sticky footer reveal never clips */
html.is-case-study-in-transition .layout::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url('../images/noise.gif');
  background-size: 200px;
  pointer-events: none;
  z-index: 1;
}

/* ── Page transition ────────────────────────────────────────────────────── */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  pointer-events: none;
}

.page-transition.is-active,
html.is-transition-enter .page-transition {
  display: flex;
  pointer-events: auto;
}

.blind {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background-color: var(--blind-color, #222222);
  transform: scaleX(0);
  transform-origin: center center;
}

html.is-transition-enter .blind {
  transform: scaleX(1);
}

/* ── Responsive overrides ─────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  ._1st-section-wrapper .about-title-wrapper .work-grid {
    max-width: 100%;
  }

  h1.about-title,
  ._1st-section-wrapper .about-title {
    font-size: 34vw;
  }
}

@media screen and (max-width: 1279px) {
  #content .work-feature {
    max-width: 688px;
  }

  #content .work-feature-copy p {
    max-width: 400px;
  }
}

@media screen and (max-width: 991px) {
  .content,
  #content {
    overflow-x: clip;
    max-width: 100%;
  }

  #content .work-feature {
    max-width: 100%;
  }

  #content .work-feature-copy p {
    max-width: 100%;
  }

  h1.about-title,
  ._1st-section-wrapper .about-title {
    white-space: nowrap;
    font-size: 34vw;
    line-height: 0.8;
    letter-spacing: normal;
    max-width: none;
    overflow: visible;
  }

  ._1st-section-wrapper .about-title-wrapper .w-layout-grid.work-grid,
  ._1st-section-wrapper .about-title-wrapper .work-grid .project-focus-label,
  ._1st-section-wrapper .about-title-wrapper .work-grid .project-focus-value {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  #content .work-feature-headline,
  #content .work-stats-headline,
  #content .work-stats-value {
    font-size: 2.75em;
  }

  /* Scale work-info type on the containers — avoid em compounding on .work-info-lead */
  #content .work-info-section .work-info-headline {
    font-size: 2em;
    max-width: none;
  }

  #content .work-info-copy {
    font-size: 1.375em;
  }
}

@media screen and (max-width: 767px) {
  /* #content also has .section — neutralize so child 24px gutters don't stack */
  #content.section {
    padding-left: 0;
    padding-right: 0;
  }

  #content > .espn-tc-intro,
  #content > .work-info-section,
  #content > .work-stats-section,
  #content > .w-dyn-list,
  #content > .feature-media-section {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  #content .spacer-large {
    height: 96px;
  }

  #content .spacer-large.is-compact {
    height: 40px;
  }

  #content .feature-media-section,
  #content .feature-media-images {
    gap: 32px;
  }

  #content .work-feature {
    max-width: 100%;
    gap: 20px;
  }

  #content .work-feature-copy p {
    max-width: 100%;
    font-size: 1.125em;
  }

  #content .work-feature-headline,
  #content .work-stats-headline,
  #content .work-stats-value {
    font-size: 2.25em;
  }

  #content .work-info-section .work-info-headline {
    font-size: 1.75em;
    margin-bottom: 24px;
  }

  #content .work-info-copy {
    font-size: 1.375em;
  }

  #content .espn-tc-intro > img,
  #content .iphone-video-overlay,
  #content .projects-list img {
    border-radius: 24px;
  }
}

@media screen and (max-width: 479px) {
  #content .spacer-large {
    height: 72px;
  }

  h1.about-title,
  ._1st-section-wrapper .about-title {
    font-size: 34vw;
  }

  #content .work-feature-headline,
  #content .work-stats-headline,
  #content .work-stats-value {
    font-size: 1.875em;
  }

  #content .work-info-section .work-info-headline {
    font-size: 1.5em;
  }

  #content .work-info-copy {
    font-size: 1.3125em;
  }

  #content .espn-tc-intro > img,
  #content .iphone-video-overlay,
  #content .projects-list img {
    border-radius: 20px;
  }
}