/**
 * Global L1–L4 typography (index, case studies).
 * Requires: Instrument Serif (italic), Roboto 300 & 400.
 */

/* —— Global layout tokens (shared: home + case studies). Use var(--grid-gutter) in page grids. —— */
:root {
  --container-pad: clamp(20px, 2.2vw, 24px);
  --grid-gutter: clamp(16px, 2vw, 24px);
  --case-section-gap: 100px;
  /*
   * Shared NE arrow (45° shaft + two-segment head). Same stroke/geometry everywhere;
   * scale only via width/height on each ::after. vector-effect keeps hairline consistent.
   */
  --arrow-ne-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Cpath vector-effect='non-scaling-stroke' d='M3.5 24.5L24.5 3.5M24.5 3.5L13.5 3.5M24.5 3.5L24.5 14.5' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
  :root {
    --grid-gutter: clamp(12px, 1.85vw, 20px);
    --case-section-gap: clamp(72px, 9vw, 96px);
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 20px;
    --grid-gutter: 16px;
    --case-section-gap: clamp(48px, 10vw, 64px);
  }
}

html {
  overflow-x: hidden;
}

/* —— L1: Case study hero titles — Roboto 48px Light, ALL CAPS —— */
.case-hero-title,
.case-health-hero-title {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 100px 0 0;
  margin: 0 0 12px;
}

/* —— L2: Section headers — Roboto Regular 20px, ALL CAPS —— */
.case-subhead,
.case-now-ds-item .case-subhead,
.case-now-cs-stack--vertical .case-now-cs-style3-heading {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
}

/* —— L3: Nav, contact label, project names — Roboto Regular 16px, sentence case from markup —— */
nav,
nav .brand,
.site-contact__label,
.project-card__caption-name,
.project-card__caption-sep {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: normal;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

nav ul a {
  text-transform: none;
}

nav .brand {
  text-transform: none;
}

/*
 * Primary site nav: full-width bar, same side padding as `.container` (--container-pad).
 * Optional cap: set --site-grid-max-width on :root to match a global content max-width.
 * Brand (left) ↔ links (right): space-between; Work / About: fixed gap, never wrap.
 */
nav:not(.case-next-project) .container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 3vw, 24px);
  width: 100%;
  max-width: var(--site-grid-max-width, none);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--container-pad, 24px);
  padding-right: var(--container-pad, 24px);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

nav:not(.case-next-project) .brand {
  flex: 0 1 auto;
  min-width: 0;
}

nav:not(.case-next-project) .container > ul {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

nav:not(.case-next-project) .container > ul > li {
  flex-shrink: 0;
  white-space: nowrap;
}

nav:not(.case-next-project) .container > ul > li > a {
  white-space: nowrap;
}

/* Top strip: reveals scroll-hidden nav on hover (below nav z-index; hits pass through nav when pointer-events: none) */
.site-nav-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 4999;
  pointer-events: auto;
  background: transparent;
}

body.case-page .site-nav-hover-zone {
  z-index: 9999;
}

/* Primary nav auto-hide (scroll) — home + case studies */
nav.site-header,
body.case-page > nav:not(.case-next-project) {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

nav.site-header.is-header-hidden,
body.case-page > nav:not(.case-next-project).is-header-hidden {
  /* Beat home landing keyframes (forwards) so scroll hide / hover zone work */
  animation: none !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none;
}

.site-contact__label {
  text-transform: none;
}

.project-card__caption-name {
  text-transform: none;
}

.case-subhead {
  text-align: left;
  margin-bottom: 1.25rem;
}

/* —— L4: Project hero metadata (type, field, time, year) — Roboto Light 16px —— */
.case-meta-part,
.case-meta-sep {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: normal;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.case-meta-part {
  text-transform: lowercase;
}

.case-meta-sep {
  flex-shrink: 0;
  user-select: none;
}

.case-main .case-meta-row {
  gap: 12px var(--grid-gutter, 16px);
}

/* Uniform rhythm: title (L1 margin-bottom 12px) → metadata (L4) → external link (L3) */
.case-main .case-prototype-link-wrap {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
  padding: 0;
}

/* L3: External project links — Roboto Regular 16px, NE arrow via ::after (same asset as next-project / about) */
.case-prototype-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  color: #000000;
  text-transform: lowercase;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  filter: none;
  transition: all 0.3s ease;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.case-prototype-link::after {
  content: '';
  display: block;
  width: 0.88em;
  height: 0.8em;
  flex-shrink: 0;
  margin-left: 0.22em;
  align-self: center;
  background: var(--arrow-ne-svg) no-repeat center / contain;
}

@media (hover: hover) {
  .case-prototype-link:hover {
    filter: blur(2px);
  }
}

.case-prototype-link:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
  filter: none;
}

/* —— L4: Body, footer detail, UI chrome —— */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.case-body,
.case-now-research-copy,
.case-now-cs-stack--vertical .case-now-cs-challenge-body,
.case-now-cs-stack--vertical .case-now-cs-solution-body,
.site-contact__line,
.research-intro-para,
.video-walkthrough-overlay-inner span {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
}

.project-card__caption-type {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  text-transform: lowercase;
  letter-spacing: normal;
}

/* Landing custom cursor: black scroll/view label only (no pill), same L4 type metrics */
.custom-cursor,
.custom-cursor__label {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
}

.case-body,
.case-now-research-copy,
.research-intro-para {
  line-height: 1.4;
}

.research-intro-para .research-label,
.research-intro-para .research-regular {
  font-weight: 400;
}

.case-body strong {
  font-weight: 400;
}

/* —— L1: “Next project” — Roboto 48px Light, ALL CAPS (matches case hero title) —— */
.case-next-project {
  width: 100%;
  margin: 0;
  margin-top: clamp(6rem, 14vw, 15rem);
  padding: 0 0 5rem;
  box-sizing: border-box;
  text-align: center;
}

.case-next-project__link {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  transition: filter 0.4s ease;
}

/* “Next project”: same NE arrow as .case-prototype-link; larger box (cap-sized title) */
.case-next-project__link::after {
  content: '';
  display: block;
  width: 1.15cap;
  height: 1cap;
  flex-shrink: 0;
  margin-bottom: 0.04em;
  background: var(--arrow-ne-svg) no-repeat center / contain;
}

@media (hover: hover) {
  .case-next-project__link:hover {
    filter: blur(4px);
  }
}

.case-next-project__link:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 10px;
}

/* Tablet / small laptop: ~20% smaller type to reduce overlap */
@media (min-width: 768px) and (max-width: 1024px) {
  .case-subhead,
  .case-now-ds-item .case-subhead,
  .case-now-cs-stack--vertical .case-now-cs-style3-heading {
    font-size: 16px;
  }

  .case-body,
  .case-now-research-copy,
  .case-now-cs-stack--vertical .case-now-cs-challenge-body,
  .case-now-cs-stack--vertical .case-now-cs-solution-body,
  .case-meta-part,
  .case-prototype-link,
  .site-contact__line,
  .project-card__caption-type {
    font-size: 13px;
  }

  nav,
  nav .brand,
  nav ul a,
  nav:not(.case-next-project) .container > ul > li > a,
  .project-card__caption-name,
  .project-card__caption-sep,
  .site-contact__label {
    font-size: 13px;
  }

  .case-hero-title,
  .case-health-hero-title {
    font-size: 42px;
  }

  .case-next-project__link {
    font-size: 42px;
  }
}

/* Mobile: single-column case grids, tighter hero, compact nav */
@media (max-width: 767px) {
  .case-hero-title,
  .case-health-hero-title {
    font-size: clamp(28px, 8vw, 48px);
    padding: 48px 0 0;
    margin-bottom: 12px;
  }

  .case-next-project {
    margin-top: clamp(3rem, 10vw, 8rem);
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }

  .case-next-project__link {
    font-size: clamp(28px, 8vw, 48px);
  }

  nav:not(.case-next-project) .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  nav:not(.case-next-project) .container > ul {
    gap: 24px;
  }

  nav,
  nav .brand,
  nav:not(.case-next-project) .container > ul > li > a {
    font-size: 14px;
  }

  /* Collapse 12-col-style grids inside case studies to one column */
  .case-page .case-main *[class*='grid'],
  .case-page .case-main *[class*='-stack'],
  .case-page .case-main .metgala-mosaic,
  .case-page .case-main .case-health-triptych,
  .case-page .case-main .screens-mosaic,
  .case-page .case-main .case-hero-meta-shell {
    grid-template-columns: 1fr !important;
    column-gap: var(--grid-gutter) !important;
  }

  .case-page .case-main *[class*='grid'] > *,
  .case-page .case-main *[class*='-stack'] > *,
  .case-page .case-main .metgala-mosaic > *,
  .case-page .case-main .case-health-triptych > *,
  .case-page .case-main .screens-mosaic > *,
  .case-page .case-main .case-hero-meta-shell > * {
    grid-column: 1 / -1 !important;
  }
}