/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Typography */
  --font-family-main: "Cormorant Garamond", serif;
  --fs-hero: 60px;
  --fs-heading: 32px;
  --fs-body: 24px;
  --fs-footer: 24px;
  --fs-caption: 16px;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 600;
  --line-height-tight: 1.1;
  --line-height-body: 1.5;

  /* Spacing (8pt grid): base scale + semantic aliases */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-page-top: var(--space-8);
  --space-header-title: 104px;
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-11);
  --space-xl: var(--space-8);
  --space-xxl: var(--space-12);

  /* Layout */
  --max-width: 1200px;
  --breakpoint-md: 720px;

  /* Borders & radius */
  --border-subtle: 2px solid rgba(0, 0, 0, 0.08);
  --border-subtle-color: rgba(0, 0, 0, 0.08);
  --border-link: 1px solid rgba(0, 0, 0, 0.2);
  --border-link-hover: rgba(0, 0, 0, 0.6);
  --radius-block: 8px;

  /* Colors */
  --color-bg: #F0F0DD;
  --color-text: #252311;
  --color-link: #848403;
  --color-muted: rgba(37, 35, 17, 0.4);
  --bg-placeholder: rgba(0, 0, 0, 0.06);

  /* Transitions */
  --ease-default: 0.2s ease;
}

/*
  Structure:
  1. Layout      – page, grid, containers
  2. Typography  – tokens in :root; applied in components
  3. Components  – site-header, menu, page header, panels, footer, case-study
  4. Utilities   – reusable margin, list, text classes
  5. Responsive  – @media (max-width: 720px)

  Case study subsections: header & hero, sections & title, details grid,
  research grid & quotes, two-col & images, goals & four-col phases,
  exploration section, final designs, impact grid.
*/

/* ==========================================================================
   Layout
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-main);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-page-top) var(--space-md) var(--space-xl);
}

.page__header,
.page__main,
.page__footer {
  width: 100%;
  max-width: var(--max-width);
}

.page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.page__footer {
  position: relative;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  text-align: right;
}

.page__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

/* ==========================================================================
   Typography (base text styles)
   ========================================================================== */

/* Applied via components; tokens in :root */

/* ==========================================================================
   Components
   ========================================================================== */

/* ----- Site header ----- */

.site-header {
  width: 100%;
  max-width: var(--max-width);
  margin-bottom: var(--space-header-title);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.site-header__left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.menu-trigger {
  font-family: var(--font-family-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  color: var(--color-link);
  outline: none;
}

/* ----- Menu ----- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-bg);
  padding: var(--space-page-top) var(--space-md) var(--space-xl);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility var(--ease-default), opacity var(--ease-default);
}

.menu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.menu[hidden] {
  display: block !important;
}

.menu[hidden][aria-hidden="false"] {
  display: block !important;
}

.menu .menu__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--space-lg);
}

.menu__link {
  display: block;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  color: var(--color-link);
  text-decoration: none;
  border-bottom: var(--border-link);
  padding: var(--space-sm) 0;
}

.menu__link:hover,
.menu__link:focus-visible {
  border-bottom-color: var(--border-link-hover);
  outline: none;
}

.menu__heading {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list .menu__link {
  font-size: var(--fs-body);
}

.menu__close {
  position: absolute;
  top: var(--space-page-top);
  right: max(var(--space-md), env(safe-area-inset-right));
  font-family: var(--font-family-main);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu__close:hover,
.menu__close:focus-visible {
  color: var(--color-link);
  outline: none;
}

.site-header__brand,
.site-header__meta,
.site-header__time {
  color: var(--color-text);
}

a.site-header__brand {
  text-decoration: none;
}

a.site-header__brand:hover,
a.site-header__brand:focus-visible {
  color: var(--color-link);
  outline: none;
}

.site-header__meta::before,
.site-header__time::before {
  content: "·";
  margin-right: var(--space-md);
  color: var(--color-muted);
}

/* ----- Page header / hero ----- */

.page__header {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xxl);
}

/* ----- Avatar / intro ----- */

.avatar {
  width: 46px;
  height: 64px;
  border-radius: 999px;
  background: var(--bg-placeholder);
}

.intro__eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-hero);
  letter-spacing: 0.04em;
}

.intro__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: var(--line-height-tight);
  max-width: 48ch;
}

/* ----- Panels ----- */

.panel__label:has(img) {
  margin-bottom: var(--space-4);
}

.panel {
  position: relative;
  padding-top: var(--space-lg);
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.panel:last-of-type {
  padding-bottom: var(--space-lg);
}

/* Bottom horizontal line: only when panel is not --grid (grid panels use ::after for vertical divider) */
.panel:last-of-type:not(.panel--grid)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

/* Hide panel top line when panel has no top border */
.case-study__section + .case-study__section--no-top > .panel::before,
.case-study__section-title + .panel::before {
  display: none;
}

.panel--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.panel--grid::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: calc(-1 * var(--space-xl));
  width: 0;
  border-left: var(--border-subtle);
}

.panel--grid .panel__item:first-child {
  padding-right: var(--space-xl);
}

.panel--grid .panel__item:not(:first-child) {
  padding-left: var(--space-xl);
}

.panel--spacious {
  padding-top: var(--space-xxl);
}

.panel--stacked .panel__item:first-child {
  padding-bottom: var(--space-lg);
}

.panel--stacked__divider {
  position: relative;
  margin-bottom: var(--space-lg);
}

.panel--stacked__divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.panel--stacked__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  position: relative;
}

.panel--stacked__grid::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: calc(-1 * var(--space-lg));
  bottom: calc(-1 * var(--space-xl));
  width: 0;
  border-left: var(--border-subtle);
}

.panel--stacked__grid .panel__item:first-child {
  padding-right: var(--space-xl);
}

.panel--stacked__grid .panel__item:not(:first-child) {
  padding-left: var(--space-xl);
}

.panel__item--full {
  max-width: 100ch;
}

.panel__label {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.panel__body {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.panel__meta {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.panel__list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.panel__list--stacked li + li {
  margin-top: 1em;
}

.panel__prompt {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.panel--grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.panel--grid-3 > .panel__label:first-child {
  grid-column: 1 / -1;
  margin-bottom: var(--space-sm);
}

.panel--grid-3__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.panel--grid-3__items .panel__item:nth-child(1) {
  padding-right: var(--space-xl);
}

.panel--grid-3__items .panel__item:nth-child(2) {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.panel--grid-3__items .panel__item:nth-child(3) {
  padding-left: var(--space-xl);
}

.panel--grid-3::before {
  content: '';
  position: absolute;
  left: calc(33.333% - 1px);
  top: 0;
  bottom: calc(-1 * var(--space-xl));
  width: 0;
  border-left: var(--border-subtle);
  pointer-events: none;
}

.panel--grid-3::after {
  content: '';
  position: absolute;
  left: calc(66.666% - 1px);
  top: 0;
  bottom: calc(-1 * var(--space-xl));
  width: 0;
  border-left: var(--border-subtle);
  pointer-events: none;
}

.panel--skills .panel__item {
  min-height: 7rem;
}

/* ----- Footer ----- */

.footer__text {
  margin: 0;
  font-size: var(--fs-footer);
  font-weight: var(--fw-medium);
}

.footer__link {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: var(--border-link);
}

.footer__link:hover,
.footer__link:focus-visible {
  border-bottom-color: var(--border-link-hover);
}

/* ----- Case study ----- */

.case-study {
  padding-top: var(--space-page-top);
}

.case-study .page__main {
  gap: var(--space-xxl);
}

/* Case study: header & hero */
.case-study__header {
  margin-bottom: 0;
  row-gap: 0;
}

.case-study__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-tight);
}

.case-study__subtitle {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.case-study__title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-6);
}

.case-study__title-row .case-study__subtitle {
  margin: 0;
}

.case-study__meta-label {
  flex-shrink: 0;
}

.case-study__overview {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__hero-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-block);
  background: var(--bg-placeholder);
  margin-top: var(--space-4);
  margin-bottom: 0;
  display: block;
  vertical-align: top;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.case-study__header + .page__main {
  padding-top: var(--space-8);
}

/* Case study: sections & section title */
.case-study__section {
  padding-top: var(--space-lg);
  position: relative;
}

.case-study__section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__section:has(.case-study__goals-grid)::before,
.case-study__section--no-top::before,
.case-study__section:has(.final-designs)::before,
.case-study__section:has(.case-study__impact-grid)::before,
.case-study__section:has(.case-study__impact-grid) + .case-study__section::before {
  display: none;
}

/* Key Research section: show top border (exception to --no-top) */
.case-study__section--no-top:has(.case-study__research-grid)::before {
  display: block;
}

/* Impact grid: hide bottom line on last row (all three tiles) to avoid duplicate with What's Next; no line above What's Next */
.case-study__impact-grid > .case-study__impact-tile:nth-child(n+3)::after {
  display: none;
}

/* Ensure first section inside block shows top border (Problem/Opportunity) */
.case-study__block {
  overflow: visible;
}

.case-study__block > .case-study__section:first-child::before {
  display: block;
}

.page__main > .case-study__section:last-child {
  padding-top: var(--space-sm);
  padding-bottom: 0;
}

.case-study__section:has(.case-study__goals-grid),
.case-study__section--no-top {
  padding-top: 0;
}

.case-study__section:has(.final-designs) {
  padding-top: 0;
}

.case-study__section:has(.case-study__impact-grid) {
  padding-top: 0;
  margin-top: var(--space-xxl);
}

.case-study__section:has(.case-study__impact-grid) + .case-study__section {
  padding-top: 0;
  margin-top: var(--space-xxl);
}

.case-study__section--no-top > .panel {
  padding-top: var(--space-lg);
}

/* When a no-top section with panel follows another section, drop panel top line to avoid double line */
.case-study__section + .case-study__section--no-top > .panel::before {
  display: none;
}

/* Section with panel--grid as last child: full-width bottom line (panel uses ::after for vertical divider) */
.case-study__section:has(> .panel.panel--grid:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

/* Avoid duplicate: when next section is Key Research, only show Key Research’s top line */
.case-study__section:has(> .panel.panel--grid:last-child):has(+ .case-study__section--no-top:has(.case-study__research-grid))::after {
  display: none;
}

/* No-top sections with a section title keep top padding (e.g. spacing above Role & Collaboration) */
.case-study__section--no-top:has(> .case-study__section-title) {
  padding-top: var(--space-lg);
}

/* When Product Goals panel follows Key Research Insight, reduce top spacing */
.case-study__section--no-top:has(.case-study__research-grid) + .case-study__section--no-top > .panel {
  padding-top: var(--space-sm);
}

/* Vertical divider in no-top section extends up to meet horizontal border above (previous section’s top) */
.case-study__section--no-top .panel--grid::after {
  top: -100vh;
  bottom: 0;
}

/* Project Details section: same panel styling as homepage, with vertical borders touching top and bottom */
.case-study__section:has(.case-study__details) {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: none;
}

/* Next section’s top border meets the vertical borders (cancel main gap) */
.case-study__section:has(.case-study__details) + .case-study__section {
  margin-top: calc(-1 * var(--space-xxl));
}

.case-study__section-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.case-study__section-title:has(+ .panel) {
  margin-bottom: 0;
}

.case-study__section-title + .panel {
  border-top: none;
  padding-top: var(--space-5);
}

/* Align right column (image) with section title */
.case-study__section-title + .panel .panel__item:nth-child(2) {
  margin-top: calc(-1 * (var(--space-5) + var(--fs-heading)));
}

/* Vertical divider meets section top and bottom horizontal borders */
.case-study__section-title + .panel.panel--grid::after {
  top: calc(-1 * (var(--space-5) + var(--space-lg) + var(--fs-heading) * var(--line-height-tight) + var(--space-lg)));
  bottom: 0;
}

/* Base: keep local grid divider within its own panel */
.panel.panel--grid.panel--grid--local::after {
  top: 0;
  bottom: 0;
}

/* Problem/Opportunity: extend divider to meet section borders above/below */
.panel.panel--grid.panel--grid--problem::after {
  top: -128px;
  bottom: 0;
}

/* Product Goals / Design Principles: slightly shorter extension to meet Key Research Insight border */
.panel.panel--grid.panel--grid--goals::after {
  top: -88px;
  bottom: 0;
}

/* When next section is no-top with a grid, only that section’s divider is shown (it extends up with -100vh) */
.case-study__section:has(+ .case-study__section--no-top .panel--grid) .panel--grid::after {
  content: none;
}

/* Case study: project details grid */
.case-study__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
}

.case-study__details::after,
.case-study__details::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-8));
  bottom: calc(-1 * var(--space-8));
  width: 0;
  border-left: var(--border-subtle);
  pointer-events: none;
}

.case-study__details::before {
  left: calc(33.333% - 1px);
}

.case-study__details::after {
  left: calc(66.666% - 1px);
}

.case-study__detail {
  padding-right: var(--space-xl);
}

.case-study__details .case-study__detail:nth-child(2) {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.case-study__details .case-study__detail:nth-child(3) {
  padding-left: var(--space-xl);
  padding-right: 0;
}

.case-study__detail-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
}

.case-study__detail-body {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__detail-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

/* Case study: research grid & quotes */
.case-study__research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.case-study__research-grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__research-column:first-child {
  padding-right: var(--space-xl);
}

.case-study__research-column:last-child {
  padding-left: var(--space-xl);
}

.case-study__quote-mark {
  display: block;
  font-size: 120px;
  line-height: 0.7;
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: 0;
}

.case-study__quote-text {
  margin: -24px 0 var(--space-sm);
  font-size: 28px;
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

.case-study__quote-attribution {
  margin: 0;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-muted);
}

/* Case study: two-col layout & images */
.case-study__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
}

.case-study__two-col--asymmetric {
  grid-template-columns: 2fr 1fr;
}

.case-study__two-col--centered {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 192px;
}

.case-study__img-block {
  width: 90%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-block);
}

.case-study__img-block--video {
  width: 320px;
  height: auto;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
  vertical-align: top;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.case-study__img-block--hero {
  aspect-ratio: 16 / 9;
}

.case-study__img-caption {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  text-align: center;
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.case-study__img--support {
  width: 90%;
  height: auto;
  display: block;
  margin-inline: auto;
}

.case-study__overview + .case-study__overview,
.case-study__body-top {
  margin-top: var(--space-md);
}

/* Case study: goals grid & four-col phases */
.case-study__goals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
}

.case-study__four-col {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  column-gap: max(24px, 2vw);
  row-gap: var(--space-sm);
  width: 100%;
  position: relative;
}

.case-study__four-col .case-study__phase {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Align first column with section title; align fourth column with main’s right edge */
.case-study__four-col .case-study__phase:first-child {
  padding-left: 0;
}

.case-study__four-col .case-study__phase:last-child {
  padding-right: 0;
}

.case-study__four-col .case-study__phase:nth-child(n + 2) {
  border-left: var(--border-subtle);
}

/* Role & Collaboration (no-top section with four-col): no vertical dividers, add spacing below */
.case-study__section--no-top .case-study__four-col .case-study__phase:nth-child(n + 2) {
  border-left: none;
}

.case-study__section--no-top:has(.case-study__four-col) {
  padding-bottom: var(--space-lg);
}

.case-study__phase {
  padding-right: var(--space-md);
}

.case-study__phase-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.case-study__phase-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
}

/* Case study: exploration section (full-width background with grid) */
.case-study__section--exploration {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.case-study__section--exploration .case-study__exploration-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--space-md);
}

.case-study__exploration-inner > .case-study__detail-body {
  margin-bottom: var(--space-md);
}

.case-study__exploration-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/playlists/grid-tile.svg");
  background-size: 60px 60px;
  background-position: 0 0;
  background-repeat: repeat;
  pointer-events: none;
}

/* 2 columns: left col stacks 1st, 3rd… right col stacks 2nd, 4th… so 4th sits below 2nd */
.case-study__exploration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-lg);
  margin-bottom: var(--space-xxl);
}

.case-study__exploration-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.case-study__exploration-col > * {
  margin: 0;
}

/* Exploration grid: any figure with an img – fill column width, auto height */
.case-study__exploration-grid figure:has(img) {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: auto;
  min-width: 0;
}

.case-study__exploration-grid figure:has(img) img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.8;
}

.case-study__exploration-grid figure:has(img) .case-study__img-caption {
  font-size: 14px;
  margin-top: var(--space-sm);
  flex-shrink: 0;
  opacity: 1;
  text-align: left;
}

.case-study__exploration-label {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

/* Case study: final designs (centred image with left/right annotations).
   Position each annotation vertically with --annotation-y (percentage from top of image):
   e.g. style="--annotation-y: 20%;" places the annotation centre at 20% from the top. */
.final-designs {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr minmax(0, 200px);
  align-items: stretch;
  column-gap: 16px;
  margin-top: var(--space-4);
}

.final-designs__image-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.final-designs__annotations {
  position: relative;
  height: 100%;
  min-height: 120px;
  min-width: 120px; /* so auto-sized grid column doesn’t collapse (content is absolute) */
}

.final-designs__annotation {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--annotation-y, 0);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
  max-width: 100%;
}

.final-designs__annotations--left .final-designs__annotation {
  text-align: left;
}

.final-designs__annotations--right .final-designs__annotation {
  flex-direction: row-reverse;
}

.final-designs__annotations--right .final-designs__annotation-text {
  text-align: left;
}

.final-designs__annotation-pipe {
  flex: 0 0 3px;
  width: 3px;
  min-height: 1.5em;
  align-self: stretch;
  background: currentColor;
  opacity: 0.6;
  border-radius: 2px;
}

.final-designs__annotation-text {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  min-width: 100px;
  overflow-wrap: break-word;
}

.final-designs__annotation-text strong {
  font-weight: var(--fw-semibold);
}

.case-study__final-sketch-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-block);
  background: var(--bg-placeholder);
  margin: 0;
  display: block;
  vertical-align: top;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Case study: impact grid */
.case-study__impact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* Full-width top rule for the Impact block */
.case-study__impact-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__impact-intro {
  position: relative;
  grid-column: 1;
  padding: var(--space-4);
  border-right: var(--border-subtle);
}

/* Impact headline: spans cols 2–3; draws the full-width rule between rows */
.case-study__impact-tile--headline {
  position: relative;
  grid-column: 2 / 4;
  padding: var(--space-4);
  gap: 0;
  border-right: none;
}

.case-study__impact-tile--headline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__impact-tile {
  position: relative;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 0;
  border-right: var(--border-subtle);
}

/* Full-width rule under the bottom row tiles */
.case-study__impact-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 2px;
  background: var(--border-subtle-color);
  pointer-events: none;
}

.case-study__impact-grid > .case-study__impact-tile:last-child {
  border-right: none;
}

.case-study__impact-tile-text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.case-study__impact-tile-support {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.case-study__impact-tile--headline .case-study__impact-tile-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-tight);
}

.case-study__impact-stat {
  margin: -20px 0 0;
  padding-left: 24px;
  font-size: 128px;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: -20px;
}

.case-study__impact-symbol {
  font-size: 40px;
  font-weight: var(--fw-medium);
  margin: 0 -24px;
  display: inline-block;
  vertical-align: middle;
}

.case-study__impact-symbol--bottom {
  vertical-align: baseline;
}

.case-study__impact-number {
  font-size: 128px;
  font-weight: 300;
}

.case-study__impact-tile--headline .case-study__impact-tile-support {
  margin-top: 0;
}

.case-study__impact-date {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.case-study__impact-intro .case-study__section-title {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.case-study__impact-intro .case-study__detail-body {
  margin-bottom: 0;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.u-mb-0 { margin-bottom: 0; }
.u-list-none { list-style: none; margin: 0; padding: 0; }
.u-text-body { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--line-height-body); }
.u-text-muted { color: var(--color-muted); }

/* ==========================================================================
   Responsive (720px = --breakpoint-md)
   ========================================================================== */

@media (max-width: 720px) {
  /* Page layout */
  .page {
    padding-inline: var(--space-sm);
  }

  .page__header {
    grid-template-columns: 1fr;
    row-gap: var(--space-md);
  }

  .avatar {
    width: 40px;
    height: 56px;
  }

  .intro__title {
    max-width: 100%;
  }

  /* Panels */
  .panel--grid {
    grid-template-columns: 1fr;
  }

  .panel--grid::after {
    display: none;
  }

  .panel--grid .panel__item:first-child {
    padding-right: 0;
  }

  .panel--grid .panel__item:not(:first-child) {
    padding-left: 0;
  }

  .panel--stacked__grid {
    grid-template-columns: 1fr;
  }

  .panel--stacked__grid::after {
    display: none;
  }

  .panel--stacked__grid .panel__item:first-child {
    display: none;
  }

  .panel--stacked__grid .panel__item:not(:first-child) {
    padding-left: 0;
  }

  .panel--grid-3 {
    grid-template-columns: 1fr;
  }

  .panel--grid-3__items {
    grid-template-columns: 1fr;
  }

  .panel--grid-3::before,
  .panel--grid-3::after {
    display: none;
  }

  .panel--grid-3__items .panel__item:nth-child(1),
  .panel--grid-3__items .panel__item:nth-child(2),
  .panel--grid-3__items .panel__item:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: header & title */
  .case-study__title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-study__section-title + .panel .panel__item:nth-child(2) {
    margin-top: 0;
  }

  /* Case study: details grid */
  .case-study__details {
    grid-template-columns: 1fr;
  }

  .case-study__details::before,
  .case-study__details::after {
    display: none;
  }

  .case-study__detail,
  .case-study__details .case-study__detail:nth-child(2),
  .case-study__details .case-study__detail:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: research grid */
  .case-study__research-grid {
    grid-template-columns: 1fr;
  }

  .case-study__research-grid::after {
    display: none;
  }

  .case-study__research-column:first-child,
  .case-study__research-column:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  /* Case study: two-col, goals, four-col */
  .case-study__goals-grid,
  .case-study__four-col {
    grid-template-columns: 1fr;
  }

  .case-study__four-col .case-study__phase:nth-child(n + 2) {
    border-left: none;
    padding-left: 0;
  }

  .case-study__phase {
    padding-left: 0;
    padding-right: 0;
  }

  .case-study__two-col,
  .case-study__two-col--asymmetric {
    grid-template-columns: 1fr;
  }

  /* Case study: exploration */
  .case-study__exploration-grid {
    grid-template-columns: 1fr;
  }

  .case-study__section--exploration .case-study__exploration-inner {
    padding-inline: var(--space-sm);
  }

  /* Case study: final designs */
  .final-designs {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .final-designs__annotations {
    min-height: 0;
    height: auto;
    padding-top: var(--space-md);
  }

  .final-designs__annotation {
    position: static;
    transform: none;
    margin-bottom: var(--space-md);
  }

  .final-designs__annotations--left {
    order: 2;
  }

  .final-designs__image-wrap {
    order: 1;
  }

  .final-designs__annotations--right {
    order: 3;
  }

  /* Case study: impact grid */
  .case-study__impact-grid {
    grid-template-columns: 1fr;
  }

  .case-study__impact-intro {
    border-right: none;
  }

  .case-study__impact-tile--headline {
    grid-column: 1;
  }

  .case-study__impact-tile {
    border-right: none;
  }

  .case-study__impact-grid > .case-study__impact-tile:last-child::after {
    display: none;
  }
}