/* SMEG case study: light industrial editorial layout. */
.smeg-page {
  --smeg-paper: #f3f3f2;
  --smeg-hero: #e5e5e5;
  --smeg-ink: #1b1d20;
  --smeg-muted: #65696d;
  --smeg-line: #c9ccce;
  --smeg-red: #c41a10;
  background: var(--smeg-paper);
}

/* The dark foreground exists only while the fixed nav crosses the light hero. */
.smeg-nav-on-light .nav,
.smeg-nav-on-light .nav.scrolled {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.smeg-nav-on-light .nav-logo img { filter: brightness(0); }
.smeg-nav-on-light .nav-link { color: var(--smeg-ink); }
.smeg-nav-on-light .nav-link:hover,
.smeg-nav-on-light .nav-link.active { color: #000; }
.smeg-nav-on-light .nav-social-link { color: #3a3d40; }
.smeg-nav-on-light .nav-social-link:hover { color: #000; }
.smeg-nav-on-light .hbar { background: var(--smeg-ink); }
.smeg-back-on-light .proj-back {
  color: var(--smeg-ink);
  text-shadow: none;
}
.smeg-back-on-light .proj-back:hover { color: #000; }
.smeg-page .proj-back { transition: color .25s ease, text-shadow .25s ease; }

/* Project context */
.smeg-intro {
  background: var(--smeg-paper);
  color: var(--smeg-ink);
  padding-block: clamp(7rem, 13vw, 13rem) clamp(8rem, 14vw, 14rem);
}
.smeg-intro-grid,
.smeg-credits-grid {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr);
  gap: clamp(3rem, 8vw, 10rem);
}
.smeg-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 2.5rem 2rem;
}
.smeg-facts > div { border-top: 1px solid var(--smeg-line); padding-top: .8rem; }
.smeg-facts dt {
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smeg-muted);
}
.smeg-facts dd {
  margin: .55rem 0 0;
  font: 400 clamp(14px, 1.1vw, 17px)/1.4 var(--sans);
  color: var(--smeg-ink);
}
.smeg-intro-copy { max-width: 760px; }
.smeg-intro-copy h2,
.smeg-study-lead h2,
.smeg-credits h2 {
  margin: 0;
  font: 300 clamp(40px, 5.1vw, 74px)/1.04 var(--sans);
  letter-spacing: -.045em;
}
.smeg-intro-copy p {
  margin: clamp(1.75rem, 3vw, 3rem) 0 0;
  max-width: 58ch;
  font: 300 clamp(19px, 1.65vw, 25px)/1.42 var(--sans);
  color: #33373a;
}
.smeg-chapter,
.smeg-study-index {
  display: block;
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smeg-muted);
}
.smeg-chapter { margin-bottom: 1.6rem; }

/* Mechanism narrative: a side view, a full-width disassembly, then a close study. */
.smeg-study {
  background: var(--smeg-paper);
  color: var(--smeg-ink);
  padding-bottom: clamp(8rem, 12vw, 13rem);
}
.smeg-study-lead { padding-bottom: clamp(3rem, 6vw, 6rem); }
.smeg-study-pair {
  display: grid;
  grid-template-columns: minmax(270px, .36fr) minmax(0, .64fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.smeg-study-pair img,
.smeg-study-wide img {
  display: block;
  width: 100%;
  height: auto;
}
.smeg-study-pair img { background: #d4d4d4; }
.smeg-study-copy { max-width: 410px; }
.smeg-study-copy h3,
.smeg-study-wide-caption h3 {
  margin: 1.4rem 0 1rem;
  font: 300 clamp(32px, 3.4vw, 52px)/1.1 var(--sans);
  letter-spacing: -.035em;
}
.smeg-study-copy p,
.smeg-study-wide-caption p {
  max-width: 36ch;
  margin: 0;
  font: 300 clamp(16px, 1.25vw, 19px)/1.52 var(--sans);
  color: #55595d;
}
.smeg-study-wide {
  margin: clamp(7rem, 10vw, 11rem) 0;
}
.smeg-study-wide img {
  height: auto;
  max-height: 78svh;
  object-fit: cover;
  object-position: center;
}
.smeg-study-wide-caption {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, .64fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding-top: 2rem;
}
.smeg-study-wide-caption h3 { margin-top: 0; }
.smeg-study-pair--motor {
  grid-template-columns: minmax(0, .64fr) minmax(270px, .36fr);
}
.smeg-study-pair--motor .smeg-study-copy { justify-self: center; }

/* Existing film player remains unchanged; its chapter is the dark payoff. */
.smeg-film-section {
  background: #111317;
  color: #fff;
  padding-block: clamp(7rem, 12vw, 12rem) clamp(8rem, 12vw, 12rem);
}
.smeg-film-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.smeg-film-head .smeg-chapter { color: #aeb4b9; }
.smeg-film-head h2 {
  margin: 0;
  font: 300 clamp(52px, 6vw, 88px)/1.02 var(--sans);
  letter-spacing: -.05em;
}
.smeg-film-section .moove-player { max-width: none; border-radius: 0; }

/* Factual closing notes, then a visual handoff. */
.smeg-credits {
  background: #ebebea;
  color: var(--smeg-ink);
  padding-block: clamp(7rem, 12vw, 12rem);
}
.smeg-credits h2 { max-width: 620px; }
.smeg-credits .smeg-facts { gap: 2rem; }
.smeg-next {
  background: #111317;
}
.smeg-next a {
  position: relative;
  display: block;
  min-height: 540px;
  height: 76svh;
  overflow: hidden;
  color: #fff;
}
.smeg-next img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% center;
  transition: transform .9s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .smeg-next a:hover img { transform: scale(1.025); }
}
.smeg-next-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,7,11,.84), rgba(5,7,11,.07) 65%);
}
.smeg-next-copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(3rem, 8vh, 7rem);
  display: grid;
  gap: .6rem;
}
.smeg-next-copy small,
.smeg-next-copy span {
  font: 400 12px/1.4 var(--sans);
  letter-spacing: .04em;
  color: #e0e3e6;
}
.smeg-next-copy strong {
  font: 300 clamp(56px, 8vw, 116px)/.92 var(--sans);
  letter-spacing: -.055em;
}
.smeg-next a:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

@media (max-width: 900px) {
  /* The floating back link would cover chapter labels on narrow layouts. */
  .smeg-page:not(.smeg-nav-on-light) .proj-back {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .smeg-intro-grid,
  .smeg-credits-grid { grid-template-columns: 1fr; gap: 4rem; }
  .smeg-intro { padding-block: 7rem 9rem; }
  .smeg-facts { max-width: 650px; }
  .smeg-study-pair,
  .smeg-study-pair--motor { grid-template-columns: 1fr; gap: 2rem; }
  .smeg-study-pair--detail img { grid-row: 1; }
  .smeg-study-pair--motor .smeg-study-copy { justify-self: start; }
  .smeg-study-wide-caption { grid-template-columns: 1fr; gap: .6rem; }
  .smeg-study-wide { margin-block: 6rem; }
}

@media (max-width: 600px) {
  .smeg-page .proj-back { top: calc(var(--nav-h) + .5rem); }
  .smeg-intro { padding-block: 6rem 7rem; }
  .smeg-facts { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .smeg-intro-copy p { line-height: 1.48; }
  .smeg-study-lead { padding-bottom: 2.5rem; }
  .smeg-study-wide { margin-block: 5rem; }
  .smeg-study-wide img { min-height: 0; }
  .smeg-film-section { padding-block: 6rem 7rem; }
  .smeg-next a { min-height: 470px; height: 66svh; }
  .smeg-next-copy strong { font-size: clamp(48px, 14vw, 72px); }
  .smeg-next img { object-position: 85% center; }
}

@media (prefers-reduced-motion: reduce) {
  .smeg-next img { transition: none; }
}