/* aaroncphelps.com — the case-study template (v2). Ported from
   design/project-sbdc-ai. Paper, the site's GT type (fonts.css), the shared
   masthead and mobile sheet (menu.css), the charcoal close. One page in
   six modules, content-driven: the project opening (title, promise, lead
   image on the project's accent), the facts, the starting point, the
   experience, the product evidence and the design decisions, then the next
   project. SBDC.AI's evidence module is the full-width charcoal film
   section: its heading and video reveal with the scroll (project.js), the
   poster blends into the section, the mark sits once beside the chapter
   label. A case study loads fonts.css, this stylesheet and menu.css. */

:root {
  --paper: #e8e6e1;
  --charcoal: #2b2b29;
  --ink: #2b2b29;
  --muted: #666661;
  --orange: #c9502b;
  --blue: #9fd3ec;
  --sage: #d3d9c3;
  --lav: #cbc7dc;
  --project-accent: var(--blue);
  --next-accent: var(--sage);
  --rule: rgba(43, 43, 41, .23);
  --gutter: clamp(1.25rem, 3vw, 3.25rem);
  --max: 1600px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* html carries the paper too: with a background of its own, the body's
   paint stays inside the body's isolated group, so the masthead's
   difference blend has paper to invert against (not the transparent canvas) */
html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}
::selection { background: var(--blue); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2d559f; outline-offset: 7px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }

h2 {
  font-family: var(--statement);
  font-size: clamp(2.4rem, 4.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.045em;
}
h2 em, .project-promise em { font-family: var(--turn); font-weight: 700; font-style: italic; letter-spacing: -.02em; }
h3 { font-family: var(--display); font-size: 1.125rem; font-weight: 700; line-height: 1.35; letter-spacing: -.045em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.caption {
  font-family: var(--caption);
  font-size: .875rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: .02em;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- the atmosphere: a dot screen behind the opening, the grain ---------- */

.paper-grid {
  position: absolute;
  inset: 0 0 auto;
  height: 780px;
  background-image: radial-gradient(rgba(66, 76, 103, .18) .85px, transparent .9px);
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 20%, transparent 72%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 20%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.grain {
  position: fixed;
  inset: -20%;
  z-index: 60;
  pointer-events: none;
  background-image: url("/assets/home/grain.png");
  background-size: 180px 180px;
  opacity: .1;
  mix-blend-mode: overlay;
  animation: grain-shift .35s steps(1) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -2%); }
  50% { transform: translate(-2%, 1%); }
  75% { transform: translate(1%, 2%); }
}
body.motion-paused .grain { animation-play-state: paused; }

/* ---------- masthead and the brand mark (shared with every page) ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter);
  mix-blend-mode: difference;
  color: #fff;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 52px);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
}
.masthead nav a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.masthead nav a:hover { opacity: .55; }
.masthead .wordmark, .masthead nav a { white-space: nowrap; }

/* the falling dominoes (design/homepage-v10/BRAND-MARK.md): nine bars that
   topple left to right on hover and stand back up on leave. The
   a.wordmark:hover selectors must out-rank the rest-state delays that
   follow, so keep the order */
.wordmark{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;color:inherit;text-decoration:none}
.wordmark:hover{opacity:1}   /* override any global link-dim on hover — the animation is the hover state */
.site-foot a.wordmark:hover { opacity: 1; }
.mark{display:inline-flex;align-items:flex-end;gap:5px;height:22px;padding-right:12px}
.mark i{width:2px;height:22px;background:var(--ink);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.4,.9,.5,1)}
.mark i:last-child{background:var(--orange);width:2.5px}
a.wordmark:hover .mark i{transform:rotate(52deg)}
a.wordmark:hover .mark i:nth-child(1){transition-delay:0s}
a.wordmark:hover .mark i:nth-child(2){transition-delay:.06s}
a.wordmark:hover .mark i:nth-child(3){transition-delay:.12s}
a.wordmark:hover .mark i:nth-child(4){transition-delay:.18s}
a.wordmark:hover .mark i:nth-child(5){transition-delay:.24s}
a.wordmark:hover .mark i:nth-child(6){transition-delay:.3s}
a.wordmark:hover .mark i:nth-child(7){transition-delay:.36s}
a.wordmark:hover .mark i:nth-child(8){transition-delay:.42s}
a.wordmark:hover .mark i:nth-child(9){transition-delay:.5s;transform:rotate(44deg)}
.wordmark .mark i:nth-child(9){transition-delay:0s}
.wordmark .mark i:nth-child(8){transition-delay:.05s}
.wordmark .mark i:nth-child(7){transition-delay:.1s}
.wordmark .mark i:nth-child(6){transition-delay:.15s}
.wordmark .mark i:nth-child(5){transition-delay:.2s}
.wordmark .mark i:nth-child(4){transition-delay:.25s}
.wordmark .mark i:nth-child(3){transition-delay:.3s}
.wordmark .mark i:nth-child(2){transition-delay:.35s}
.wordmark .mark i:nth-child(1){transition-delay:.4s}
/* masthead sits under mix-blend-mode:difference, so everything is white there (incl. the orange bar) */
.masthead .mark i,.masthead .mark i:last-child{background:#fff}

.ar {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vertical-align: -.08em;
  flex: none;
}
.ar-up { transform: rotate(-45deg); }
.px { width: .9em; height: .9em; fill: currentColor; display: inline-block; vertical-align: -.05em; flex: none; }

/* ---------- module 1: the project opening and the lead image ---------- */

.project-opening { padding-top: 130px; }
.eyebrow-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.back-link { display: inline-flex; gap: 10px; align-items: center; }
.back-link:hover { gap: 15px; }
.project-title-row { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; margin: 29px 0 39px; }
.project-title-row h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4rem, 9.8vw, 10.5rem);
  line-height: .94;
  letter-spacing: -.075em;
  white-space: nowrap;
}
.project-promise {
  font-family: var(--statement);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.3vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  justify-self: end;
  padding-bottom: 2px;
}

/* the stage: the accent surface, the pixel field behind, the product on top */
.hero-stage {
  background: var(--project-accent);
  position: relative;
  isolation: isolate;
  height: clamp(440px, 47vw, 710px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pixel-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.hero-product { height: calc(100% - 65px); width: 94%; object-fit: contain; position: relative; transform: translate(-1.8%, 5px); }
.stage-topline, .stage-footline {
  position: absolute;
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 2;
}
.stage-topline { top: 22px; }
.stage-footline { bottom: 24px; }
.motion-control { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.motion-symbol { font-family: var(--sans); font-size: .875rem; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: .85rem; font-weight: 700; line-height: 1.5; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.play-mini { font-family: Arial, sans-serif; font-size: .75rem; }
.hero-caption { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* the facts */
.project-facts {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 32px;
  margin: 47px 0 0;
  padding: 0 0 51px;
  border-bottom: 1px solid var(--rule);
}
.project-facts dt { margin-bottom: 13px; color: var(--muted); }
.project-facts dd { font-size: 1rem; line-height: 1.6; margin: 0; }

/* ---------- module 2: the starting point ---------- */

.chapter { padding-block: 100px; }
.chapter-label { margin-bottom: 38px; color: var(--muted); }
.editorial-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 8.5%; }
.reading-copy { padding-top: 5px; max-width: 650px; }
.reading-copy p { font-size: 1rem; line-height: 1.75; margin-bottom: 23px; }
.reading-copy p:last-child { margin: 0; }
.reading-copy .emphasis-copy {
  font-family: var(--lede);
  font-weight: 300;
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.2;
  max-width: 550px;
  margin-top: 30px;
  letter-spacing: -.015em;
}
.challenge { padding-bottom: 110px; }

/* ---------- module 3: the experience ---------- */

.experience { background: #dcdfdf; padding-block: 79px 63px; position: relative; }
.section-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-aside { font-size: .95rem; line-height: 1.7; padding-bottom: 5px; }
.sequence { list-style: none; padding: 0; margin: 55px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.sequence li { border-top: 1px solid var(--rule); padding-top: 23px; }
.sequence-index { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sequence h3 { font-size: 1.25rem; margin-bottom: 16px; }
.sequence p { font-size: 1rem; line-height: 1.7; max-width: 350px; color: #52524e; }
/* the three geometric accents */
.sequence-glyph { width: 27px; height: 27px; position: relative; background: currentColor; color: #626e8e; }
.glyph-focus { -webkit-mask-image: conic-gradient(from 90deg at 6px 6px, transparent 90deg, #000 0); mask-image: conic-gradient(from 90deg at 6px 6px, transparent 90deg, #000 0); -webkit-mask-size: 9px 9px; mask-size: 9px 9px; }
.glyph-connect { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); clip-path: polygon(0 28%, 28% 28%, 28% 0, 72% 0, 72% 28%, 100% 28%, 100% 72%, 72% 72%, 72% 100%, 28% 100%, 28% 72%, 0 72%); }
.glyph-forward { clip-path: polygon(0 33%, 53% 33%, 53% 0, 70% 0, 70% 17%, 85% 17%, 85% 33%, 100% 33%, 100% 66%, 85% 66%, 85% 83%, 70% 83%, 70% 100%, 53% 100%, 53% 66%, 0 66%); }
.sequence-note { margin-top: 47px; color: var(--muted); }

/* ---------- module 4: the product film, full width on charcoal ---------- */

/* outside the max-width wrapper: the surface and the video stage run edge
   to edge, the text keeps the site's gutters */
.product-film {
  --film-bg: #272727;
  --film-muted: #bcbcb7;
  background: var(--film-bg);
  color: var(--paper);
  padding-block: clamp(80px, 8vw, 130px);
  position: relative;
  width: 100%;
  max-width: none;
  overflow: clip;
  scroll-margin-top: 0;
}
.product-film .chapter-label { color: var(--film-muted); }
.film-chapter-label { display: flex; align-items: center; gap: 18px; }
/* the mark, once, in grey: the PNG's alpha masks a flat fill in the
   section's secondary tone. The 1254px original sits at 114px inside a
   52px window, which accounts for its transparent padding */
.film-mark {
  display: block;
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  background: var(--film-muted);
  -webkit-mask: url("/assets/projects/sbdc-ai/sbdc-ai-mark.png") center / 114px 114px no-repeat;
  mask: url("/assets/projects/sbdc-ai/sbdc-ai-mark.png") center / 114px 114px no-repeat;
}
.film-heading-wrap { position: relative; z-index: 1; }
.film-heading-row { margin-bottom: clamp(24px, 3vw, 48px); }
.film-heading-row h2 { font-size: clamp(2.6rem, 5.5vw, 5.8rem); }
/* each heading line in a clipped wrapper, so it can rise into view */
.film-heading-line { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.film-heading-line > span, .film-heading-line > em { display: block; }
.film-tabs { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 5px; }
.film-tab {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid transparent;
  padding: 12px 0;
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
}
.film-tab[aria-selected="true"] { border-color: var(--paper); }
.film-tab[aria-selected="false"] { color: var(--film-muted); }
.film-tab:hover { color: var(--paper); }
.film-tab .caption { font-size: .75rem; }
.product-film :focus-visible { outline-color: var(--blue); }
.film-panel { width: 100%; max-width: none; }
.film-reveal { width: 100%; position: relative; }
.film-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--film-bg);
  overflow: hidden;
  transform-origin: 50% 45%;
}
/* The published JPEG's flat edge is RGB 44. A display-only correction
   maps it to RGB 39 (#272727), keeping the original asset untouched. */
.film-poster { width: 100%; height: 100%; object-fit: contain; filter: brightness(.8863636364); }
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--paper);
  background: transparent;
}
.play-disc {
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  width: 76px;
  height: 76px;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--film-bg);
  transition: transform .25s;
}
.film-play:hover .play-disc { transform: scale(1.08); }
.play-label { font-family: var(--display); font-weight: 700; font-size: .85rem; background: var(--film-bg); padding: 10px 15px; }
.film-frame { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; background: var(--film-bg); }
.film-frame[hidden] { display: none; }
.film-caption {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  margin-top: 22px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--film-muted);
}
.film-external { white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.product-observation { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-top: 45px; padding-bottom: 0; border: 0; }
.product-observation > .caption { color: var(--film-muted); }
.product-observation p { font-size: .95rem; line-height: 1.7; max-width: 760px; }
.product-film + .decisions { padding-top: clamp(70px, 7vw, 110px); }
/* the reveal: project.js sets the variables from the scroll */
.scroll-reveal-ready .film-heading-line:first-child > span { transform: translateY(var(--film-line-one, 0%)); }
.scroll-reveal-ready .film-heading-line:last-child > em { transform: translateY(var(--film-line-two, 0%)); }
.scroll-reveal-ready .film-heading-wrap > .chapter-label, .scroll-reveal-ready .film-tabs { opacity: var(--film-heading-opacity, 1); }
.scroll-reveal-ready .film-screen { transform: translateY(var(--film-lift, 0px)) scale(var(--film-scale, 1)); opacity: var(--film-opacity, 1); }
/* keyboard focus inside the section, or a playing film, shows it all */
.product-film:focus-within .film-heading-line > span, .product-film:focus-within .film-heading-line > em { transform: none; }
.product-film:focus-within .film-heading-wrap > .chapter-label, .product-film:focus-within .film-tabs { opacity: 1; }
.product-film:focus-within .film-screen, .film-panel.is-playing .film-screen { transform: none; opacity: 1; }

/* ---------- module 5: the design decisions ---------- */

.decisions { padding-top: 49px; padding-bottom: 104px; }
.decisions h2 { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
.decisions-intro > p { font-size: 1rem; line-height: 1.75; max-width: 465px; margin-top: 30px; }
.decision-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 35px; }
.decision-list li { display: grid; grid-template-columns: 26px 1fr; gap: 18px; }
.decision-list h3 { font-size: 1rem; margin-bottom: 11px; }
.decision-list p { font-size: .95rem; line-height: 1.75; color: #565652; }
.decision-number { padding-top: 1px; color: var(--muted); }

/* ---------- module 6: the next project ---------- */

.next-project { margin-bottom: 80px; }
.next-project-link {
  background: var(--next-accent);
  padding: 46px 40px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  min-height: 400px;
}
.next-copy { position: relative; z-index: 1; }
.next-copy > .caption { display: block; margin-bottom: 42px; }
.next-copy h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 4.3vw, 4.7rem); line-height: 1; letter-spacing: -.055em; }
.next-copy p { font-size: 1rem; line-height: 1.5; margin: 20px 0 25px; }
.next-cta { font-family: var(--display); font-weight: 700; font-size: .85rem; display: inline-flex; gap: 22px; align-items: center; }
.next-cta span { font-size: 1.3rem; transition: transform .2s; }
.next-project-link > img { width: 100%; height: auto; max-height: 355px; object-fit: contain; transform: scale(1.1); transition: transform .5s; }
.next-project-link:hover > img { transform: scale(1.14); }
.next-project-link:hover .next-cta span { transform: translate(3px, -3px); }

/* ---------- the close: the CTA and the footer, on charcoal like every page ---------- */

.close {
  background: var(--charcoal);
  color: var(--paper);
  --ink: #e8e6e1;
  --muted: #a9a8a3;
  --body: #c4c2bc;
  --rule: rgba(232, 230, 225, .22);
  padding: 0 var(--gutter);
}
.close .cta {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px var(--gutter);
  padding: 12vh 0 10vh;
  align-items: end;
}
.close .cta .caption { display: block; margin-bottom: 26px; color: var(--muted); }
.close .cta h2 { font-size: clamp(2.7rem, 4.8vw, 5rem); line-height: .94; letter-spacing: -.02em; }
.close .email {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 30px);
  letter-spacing: -.03em;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 12px;
  overflow-wrap: anywhere;
}
.close .email:hover { opacity: .7; }
.site-foot {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 0 36px;
  border-top: 1px solid var(--rule);
}
.site-foot .caption { font-size: 14px; letter-spacing: .02em; color: var(--muted); }
.site-foot a:hover { opacity: .6; }

/* ---------- responsive ---------- */

@media (min-width: 1700px) {
  .hero-stage { height: 710px; }
  .project-title-row h1 { font-size: 10.5rem; }
}

@media (max-width: 1100px) {
  .project-title-row { grid-template-columns: 1.25fr 1fr; gap: 20px; }
  .project-title-row h1 { font-size: 9.5vw; }
  .project-promise { font-size: 3.25vw; }
  .editorial-split { gap: 6%; }
  .chapter { padding-block: 75px; }
  .film-heading-row { align-items: start; }
  .film-tabs { flex-direction: column; gap: 0; min-width: 225px; }
  .film-tab { justify-content: space-between; }
  .sequence { gap: 4%; }
  .sequence h3 { font-size: 1.1rem; }
  .next-project-link { padding: 35px; min-height: 340px; }
  .next-copy > .caption { margin-bottom: 30px; }
  .next-project-link > img { transform: scale(1.2); }
  .next-project-link:hover > img { transform: scale(1.24); }
  .product-film { padding-block: 80px; }
  .decisions { padding-top: 35px; }
}

@media (max-width: 900px) {
  .close .cta { grid-template-columns: 1fr; padding: 10vh 0 8vh; }
  .close .email { justify-self: start; }
}

@media (max-width: 760px) {
  .project-opening { padding-top: 110px; }
  .eyebrow-row { gap: 10px; }
  .eyebrow-row .caption { font-size: .75rem; }
  .project-title-row { grid-template-columns: 1fr; margin-block: 27px 27px; gap: 22px; }
  .project-title-row h1 { font-size: clamp(3.6rem, 14vw, 6.5rem); }
  .project-promise { justify-self: start; font-size: clamp(1.9rem, 5.5vw, 2.65rem); line-height: 1.04; }
  .project-promise br { display: none; }
  .hero-stage { height: 400px; margin-inline: calc(-1 * var(--gutter)); }
  .hero-product { height: auto; width: 115%; max-width: none; transform: translate(-1.8%, 4px); }
  .stage-topline, .stage-footline { left: var(--gutter); right: var(--gutter); }
  .stage-topline { top: 18px; align-items: start; gap: 20px; }
  .stage-topline > .caption { font-size: .75rem; max-width: 190px; }
  .motion-label { display: none; }
  .motion-control { padding: 0 3px; }
  .motion-symbol { font-size: .85rem; }
  .stage-footline { bottom: 18px; }
  .stage-footline > .caption { font-size: .72rem; max-width: 150px; }
  .stage-footline .text-link { font-size: .7rem; gap: 8px; }
  .stage-footline .play-mini { display: none; }
  .hero-caption { font-size: .75rem; padding-top: 13px; }
  .hero-caption > .caption { display: none; }
  .project-facts { grid-template-columns: 1fr 1fr; gap: 30px 24px; margin-top: 33px; padding-bottom: 36px; }
  .project-facts > div:last-child { grid-column: 1 / -1; }
  .project-facts > div:last-child dd br { display: none; }
  .project-facts dt { font-size: .8rem; margin-bottom: 8px; }
  .project-facts dd { font-size: .875rem; }
  .chapter { padding-block: 60px; }
  .chapter-label { margin-bottom: 26px; font-size: .8rem; }
  .editorial-split { grid-template-columns: 1fr; gap: 28px; }
  h2 { font-size: clamp(2.35rem, 7.2vw, 3.3rem); }
  .challenge h2 br:nth-child(1) { display: none; }
  .challenge h2 em br { display: none; }
  .reading-copy p { font-size: 1rem; line-height: 1.7; margin-bottom: 20px; }
  .reading-copy .emphasis-copy { font-size: 1.8rem; margin-top: 23px; max-width: 480px; }
  .experience { padding-block: 56px 43px; }
  .section-heading-row { display: block; }
  .section-aside { display: none; }
  .sequence { grid-template-columns: 1fr; margin-top: 34px; gap: 29px; }
  .sequence li { padding-top: 18px; }
  .sequence-index { margin-bottom: 13px; }
  .sequence h3 { font-size: 1.15rem; margin-bottom: 11px; }
  .sequence p { max-width: 560px; font-size: .95rem; line-height: 1.7; }
  .sequence-glyph { width: 23px; height: 23px; }
  .sequence-note { margin-top: 33px; font-size: .8rem; }
  .film-heading-row { margin-bottom: 22px; }
  .film-tabs { margin-top: 26px; flex-direction: row; gap: 24px; }
  .film-tab { font-size: .72rem; gap: 9px; padding-bottom: 9px; flex: 1; }
  .film-tab .caption { font-size: .75rem; }
  .play-disc { width: 53px; height: 53px; font-size: 1rem; }
  .film-play { gap: 8px; }
  .play-label { font-size: .65rem; padding: 7px 10px; }
  .film-caption { font-size: .75rem; gap: 14px; }
  .film-external { font-size: .75rem; }
  .product-observation { grid-template-columns: 1fr; gap: 11px; margin-top: 25px; padding-bottom: 36px; }
  .product-observation p { font-size: .95rem; }
  .product-film { padding-block: 60px; }
  .decisions { padding-top: 20px; padding-bottom: 57px; }
  .decisions h2 { font-size: clamp(2.25rem, 7vw, 3.3rem); }
  .decisions-intro > p { max-width: 560px; margin-top: 22px; }
  .decision-list { gap: 27px; }
  .decision-list li { gap: 13px; }
  .decision-list h3 { font-size: .95rem; }
  .decision-list p { font-size: .95rem; }
  .next-project { margin-bottom: 50px; }
  .next-project-link { grid-template-columns: 1fr; padding: 27px 24px 20px; gap: 25px; min-height: 0; }
  .next-copy > .caption { font-size: .8rem; margin-bottom: 28px; }
  .next-copy h2 { font-size: clamp(2.6rem, 10vw, 4rem); }
  .next-copy h2 br { display: none; }
  .next-copy p { font-size: .9rem; margin: 15px 0 20px; }
  .next-cta { font-size: .75rem; }
  .next-project-link > img { width: 100%; transform: scale(1.06); max-height: 280px; }
  .next-project-link:hover > img { transform: scale(1.1); }
  .close .cta h2 { font-size: 3rem; }
  .close .email { font-size: 1rem; }
}

@media (max-width: 390px) {
  .disciplines { max-width: 120px; text-align: right; }
  .hero-stage { height: 330px; }
  .stage-footline .text-link { max-width: 148px; font-size: .65rem; }
  .stage-footline > .caption { max-width: 122px; }
  .film-tabs { gap: 14px; }
  .film-tab { font-size: .65rem; }
  .project-facts { gap: 25px 15px; }
  .close .email { font-size: .9rem; }
}

/* ---------- reduced motion & print ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { transform: none; }
  .motion-control { display: none; }
  .mark i { transition: none; }
  .product-film .film-heading-line > span, .product-film .film-heading-line > em, .product-film .film-screen { transform: none !important; opacity: 1 !important; }
  .product-film .chapter-label, .product-film .film-tabs { opacity: 1 !important; }
}

@media print {
  .masthead, .paper-grid, .grain, .motion-control, .film-play, .next-project, .close, .skip-link, .menu-button, .mobile-menu { display: none; }
  body { background: white; color: black; }
  .hero-stage { height: 330px; }
  .chapter { padding-block: 35px; }
  .experience { background: #eee; }
  .product-film { background: white; color: black; }
  .product-film .film-screen, .product-film .film-heading-line > span, .product-film .film-heading-line > em { transform: none !important; opacity: 1 !important; }
  .product-film .chapter-label, .product-film .film-tabs { opacity: 1 !important; color: black; }
  .film-mark { background: black; }
  .film-screen { max-height: 400px; }
  .wrap { padding-inline: 0; }
  .chapter, .sequence li, .project-facts { break-inside: avoid; }
  h2 { font-size: 32px; }
}