/* ---------- Our Work: archive + case-study pages ----------
   Loaded by work.html and project.html on top of styles.css. Dark editorial
   pages: big lowercase titles, media in native ratios (never cropped),
   flowing 12-column gallery, restrained scroll-linked motion. Motion lives
   in work.js; everything here degrades to static, readable content. */

/* Cross-document page transitions (archive <-> case study). Navigation is
   never delayed; unsupported browsers simply navigate. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(wk-hero),
::view-transition-new(wk-hero) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  mix-blend-mode: normal;
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.wk-page {
  background: var(--black);
  color: var(--white);
  min-height: 100svh;
}
/* The site header has no plate of its own; over full-bleed work media it
   needs one so the nav never sits on busy footage. */
body:has(.wk-page) .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
}
.wk-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---- Reveal (IO-driven) ---- */
.wk-reveal {
  --wk-delay: 0ms;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 720ms ease var(--wk-delay),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--wk-delay);
}
.wk-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Line reveal: block clipped from below, used on titles */
.wk-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.wk-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--wk-delay, 0ms);
}
.is-in .wk-line > span,
.wk-line.is-in > span {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wk-reveal,
  .wk-line > span {
    opacity: 1;
    transform: none;
    transition: opacity 240ms ease;
  }
}

/* ---- Parallax targets (work.js writes --wk-y / --wk-s) ---- */
.wk-par {
  transform: translate3d(0, var(--wk-y, 0px), 0) scale(var(--wk-s, 1));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .wk-par {
    transform: none;
    will-change: auto;
  }
}

/* ---------- Archive opener ---------- */
.wk-opener {
  position: relative;
  z-index: 31;
  padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px));
  padding-bottom: clamp(32px, 5vh, 56px);
}
.wk-opener__title {
  margin: 0;
  font-size: clamp(56px, 11vw, 160px);
  line-height: 0.92;
  font-weight: 750;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--white);
}
.wk-opener__lede {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
}
.wk-opener__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 3vh, 28px);
  color: var(--text-dim);
}

/* Category navigation: one row of lowercase words, current one lit */
.wk-cats {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(var(--header-h) + 6px) 0 18px;
  margin-top: calc(-1 * var(--header-h) - 6px);
  pointer-events: none;
  isolation: isolate;
}
/* Backdrop only once the row is actually stuck (work.js toggles is-stuck) */
.wk-cats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.8) 72%, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
}
.wk-cats.is-stuck::before {
  opacity: 1;
}
.wk-cat--empty {
  display: none;
}
.wk-cats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.6vw, 40px);
  pointer-events: auto;
}
.wk-cat {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: rgba(234, 234, 234, 0.62);
  text-decoration: none;
  transition: color 240ms ease;
}
.wk-cat sup {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(234, 234, 234, 0.62);
  font-feature-settings: "tnum" 1;
}
.wk-cat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wk-cat:hover,
.wk-cat:focus-visible {
  color: var(--white);
}
.wk-cat[aria-current="true"] {
  color: var(--white);
}
.wk-cat[aria-current="true"]::after {
  transform: scaleX(1);
}

/* ---------- Archive flow ---------- */
.wk-archive {
  padding: clamp(24px, 5vh, 64px) 0 clamp(80px, 12vh, 160px);
}
.wk-archive.is-swapping {
  opacity: 0;
  transition: opacity 180ms ease;
}
.wk-archive {
  transition: opacity 320ms ease;
}
.wk-chapter + .wk-chapter {
  margin-top: clamp(80px, 14vh, 180px);
}
.wk-chapter__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(28px, 5vh, 56px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.wk-chapter__name {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 750;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}
.wk-chapter__cue {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wk-chapter__count {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-feature-settings: "tnum" 1;
}

/* Entry: media-led. Width and side alternate per --wk-w / --wk-side. */
.wk-entry {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* Media entries ring their media (the link itself is the whole block);
   text entries keep the standard ring. */
.wk-entry--media:focus-visible {
  outline: none;
}
.wk-entry--text:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}
.wk-entry + .wk-entry {
  margin-top: clamp(56px, 10vh, 140px);
}
.wk-entry--media {
  --wk-w: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
}
.wk-entry--media.is-right {
  justify-items: end;
}
.wk-entry__media {
  position: relative;
  width: min(var(--wk-w), calc(78vh * var(--ar, 1.7778)));
  aspect-ratio: var(--ar, 16 / 9);
  background: #0b0b0b;
  overflow: clip;
}
.wk-entry__media img,
.wk-entry__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 600ms ease;
}
.wk-entry__media video {
  opacity: 0;
}
.wk-entry.is-previewing .wk-entry__media video {
  opacity: 1;
}
.wk-entry__text {
  width: min(var(--wk-w), calc(78vh * var(--ar, 1.7778)));
  padding-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px clamp(20px, 4vw, 64px);
  align-items: start;
}
.wk-entry__eyebrow,
.wk-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wk-eyebrow b {
  font-weight: 600;
  color: var(--white);
}
.wk-eyebrow i {
  font-style: normal;
  opacity: 0.5;
}
.wk-entry__title {
  grid-column: 1;
  margin: 6px 0 0;
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.wk-entry__summary {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  max-width: 44ch;
  color: var(--text-dim);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.55;
}
.wk-entry__cta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .wk-entry__summary,
  .wk-entry__cta {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 420ms ease,
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wk-entry:hover .wk-entry__summary,
  .wk-entry:hover .wk-entry__cta,
  .wk-entry:focus-visible .wk-entry__summary,
  .wk-entry:focus-visible .wk-entry__cta {
    opacity: 1;
    transform: none;
  }
  .wk-entry:hover .wk-entry__media img,
  .wk-entry:focus-visible .wk-entry__media img {
    transform: scale(1.025);
  }
}
.wk-entry:focus-visible .wk-entry__media {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

/* Entry: text-only (public projects without approved media) */
.wk-entry--text {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(22px, 3.4vh, 34px) 0;
  border-top: 1px solid var(--hairline);
}
.wk-entry--text + .wk-entry--text {
  margin-top: 0;
}
.wk-entry--text:last-child {
  border-bottom: 1px solid var(--hairline);
}
.wk-entry--media + .wk-entry--text {
  margin-top: clamp(56px, 10vh, 140px);
}
.wk-entry__no {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.14em;
  font-feature-settings: "tnum" 1;
}
.wk-entry--text .wk-entry__title {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: clamp(24px, 2.6vw, 40px);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wk-entry--text .wk-entry__eyebrow {
  grid-column: 2;
}
.wk-entry--text .wk-entry__summary {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: baseline;
  opacity: 1;
  transform: none;
}
.wk-entry--text .wk-entry__cta {
  grid-column: 3;
}
@media (hover: hover) and (pointer: fine) {
  .wk-entry--text:hover .wk-entry__title,
  .wk-entry--text:focus-visible .wk-entry__title {
    transform: translateX(10px);
  }
}

/* Status flags (preview mode only) */
.wk-flag {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid rgba(255, 242, 0, 0.6);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.wk-flag--red {
  border-color: rgba(255, 80, 80, 0.7);
  color: #ff6b6b;
}
.wk-preview-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  max-width: calc(100vw - 24px);
  text-align: center;
  padding: 10px 14px;
  background: var(--yellow);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wk-preview-bar a {
  color: inherit;
}
.wk-empty {
  padding: clamp(40px, 8vh, 96px) 0;
  color: var(--text-dim);
  max-width: 46ch;
}

/* ---------- Case study ---------- */
.wk-project {
  padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px));
}
.wk-head {
  display: grid;
  gap: clamp(16px, 2.4vh, 26px);
  padding-bottom: clamp(28px, 5vh, 56px);
}
.wk-title {
  margin: 0;
  font-size: clamp(42px, 8.4vw, 132px);
  line-height: 0.94;
  font-weight: 750;
  letter-spacing: -0.045em;
  max-width: 14ch;
  text-wrap: balance;
}
.wk-headline {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(234, 234, 234, 0.82);
}

/* Hero: full-bleed, native ratio, capped to the viewport height */
.wk-hero {
  position: relative;
  width: 100%;
  overflow: clip;
  background: #0b0b0b;
}
.wk-hero__media {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc(92svh * var(--ar, 1.7778)));
  aspect-ratio: var(--ar, 16 / 9);
  view-transition-name: wk-hero;
}
.wk-hero__media img,
.wk-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.wk-hero__media video:focus-visible,
.wk-item__frame video:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
/* Overlay layout: title over the image, anchored to its negative space */
.wk-hero--overlay {
  min-height: 70svh;
}
.wk-hero--overlay .wk-hero__media {
  width: 100%;
  max-height: none;
  aspect-ratio: auto;
  min-height: 82svh;
}
.wk-hero--overlay .wk-hero__media img {
  object-fit: cover;
}
.wk-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wk-hero--scrim-dark.wk-hero--bl .wk-hero__scrim {
  background: radial-gradient(at 0% 100%, rgba(0, 0, 0, 0.72), transparent 62%);
}
.wk-hero--scrim-dark.wk-hero--br .wk-hero__scrim {
  background: radial-gradient(at 100% 100%, rgba(0, 0, 0, 0.72), transparent 62%);
}
.wk-hero--scrim-dark.wk-hero--tl .wk-hero__scrim {
  background: radial-gradient(at 0% 0%, rgba(0, 0, 0, 0.72), transparent 62%);
}
.wk-hero--scrim-light .wk-hero__scrim {
  background: radial-gradient(at 0% 100%, rgba(234, 234, 234, 0.78), transparent 62%);
}
.wk-hero__text {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 6vh, 64px);
  display: grid;
  gap: clamp(12px, 2vh, 20px);
  max-width: 62rem;
}
.wk-hero--br .wk-hero__text {
  justify-items: end;
  text-align: right;
  margin-left: auto;
}
.wk-hero--tl .wk-hero__text {
  top: calc(var(--header-h) + clamp(20px, 4vh, 40px));
  bottom: auto;
}
.wk-hero--scrim-light .wk-hero__text {
  color: #141416;
}
.wk-hero--scrim-light .wk-hero__text .wk-headline {
  color: rgba(20, 20, 22, 0.82);
}
.wk-hero--scrim-light .wk-eyebrow,
.wk-hero--scrim-light .wk-eyebrow b {
  color: #141416;
}

/* Overview + meta */
.wk-overview {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 80px);
  padding: clamp(56px, 10vh, 128px) 0 clamp(40px, 7vh, 88px);
}
.wk-label {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wk-overview__copy {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.wk-meta {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 80px);
  padding: clamp(24px, 4vh, 36px) 0;
  border-top: 1px solid var(--hairline);
}
.wk-meta + .wk-meta {
  border-top: 1px solid var(--hairline);
}
.wk-meta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
}
.wk-meta__list li + li::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--yellow);
}
.wk-meta__value {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 18px);
}
.wk-meta__note {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 300;
}

/* Flowing gallery: 12 columns, native ratios, spans set per item */
.wk-flow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(32px, 6vh, 80px) 0 0;
}
.wk-item {
  grid-column: span var(--wk-span, 12);
  margin: 0;
  min-width: 0;
}
.wk-item[data-start="right"] {
  grid-column: calc(13 - var(--wk-span, 12)) / span var(--wk-span, 12);
}
.wk-item[data-start="mid"] {
  grid-column: 4 / span var(--wk-span, 12);
}
.wk-item__frame {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  background: #0b0b0b;
  overflow: clip;
}
.wk-item__frame img,
.wk-item__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.wk-item__frame img.is-loaded {
  animation: wk-fade 700ms ease both;
}
@keyframes wk-fade {
  from {
    opacity: 0;
  }
}
.wk-item__cap {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
}
/* Approval label (preview only): a real element, not generated content */
.wk-gate {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Pause / play for decorative motion covers */
.wk-loopctl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.66);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.wk-loopctl:hover {
  background: rgba(0, 0, 0, 0.86);
}
/* Campaign lines interleaved with the media */
.wk-quote {
  grid-column: 2 / span 10;
  margin: clamp(24px, 5vh, 64px) 0;
  font-size: clamp(24px, 3.4vw, 54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  text-align: center;
}
.wk-quote em {
  font-style: normal;
  color: var(--white);
  /* highlighter stroke under the words: yellow on dark only */
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 88% / 100% 0.14em;
  padding: 0 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Text-only case study (no approved media yet): editorial statement */
.wk-statement {
  padding: clamp(40px, 8vh, 96px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.wk-statement__lines {
  display: grid;
  gap: clamp(10px, 2vh, 20px);
  max-width: 62rem;
}
.wk-statement__line {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.wk-statement__line:first-child {
  color: var(--white);
}
.wk-statement__line:not(:first-child) {
  color: rgba(234, 234, 234, 0.45);
}

/* Prev / next */
.wk-nav {
  margin-top: clamp(80px, 14vh, 180px);
  border-top: 1px solid var(--hairline);
}
.wk-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wk-nav__link {
  display: grid;
  gap: 12px;
  padding: clamp(28px, 5vh, 56px) 0;
  color: inherit;
  text-decoration: none;
}
.wk-nav__link--next {
  text-align: right;
  justify-items: end;
  border-left: 1px solid var(--hairline);
  padding-left: clamp(16px, 3vw, 40px);
}
.wk-nav__link--prev {
  padding-right: clamp(16px, 3vw, 40px);
}
.wk-nav__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wk-nav__thumb {
  width: min(100%, 320px);
  aspect-ratio: var(--ar, 16 / 9);
  background: #0b0b0b;
  overflow: clip;
}
.wk-nav__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .wk-nav__link--next:hover .wk-nav__title {
    transform: translateX(-10px);
  }
  .wk-nav__link--prev:hover .wk-nav__title {
    transform: translateX(10px);
  }
}
.wk-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(20px, 3vh, 28px) 0 clamp(56px, 8vh, 96px);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.wk-back:hover span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Missing route */
.wk-missing {
  padding: calc(var(--header-h) + 20vh) var(--pad) 20vh;
  max-width: 40rem;
}

/* ---------- Responsive: tablets + phones ---------- */
@media (max-width: 1024px), (orientation: portrait) {
  .wk-flow {
    gap: clamp(12px, 2vw, 22px);
  }
  .wk-item,
  .wk-item[data-start] {
    --wk-span: 12 !important;
    grid-column: span 12;
  }
  .wk-item--pair,
  .wk-item--pair[data-start] {
    --wk-span: 6 !important;
    grid-column: span 6;
  }
  .wk-quote {
    grid-column: 1 / -1;
  }
}
@media (max-width: 899px), (orientation: portrait) {
  .wk-entry--media {
    --wk-w: 100% !important;
    justify-items: start !important;
  }
  .wk-entry__media,
  .wk-entry__text {
    width: min(100%, calc(70vh * var(--ar, 1.7778)));
  }
  .wk-entry__text {
    grid-template-columns: 1fr;
  }
  .wk-entry__summary,
  .wk-entry__cta {
    grid-column: 1;
    grid-row: auto;
    opacity: 1;
    transform: none;
  }
  .wk-entry--text {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .wk-entry--text .wk-entry__summary,
  .wk-entry--text .wk-entry__cta {
    grid-column: 2;
    grid-row: auto;
  }
  /* Overlay heroes recompose: text above the media, media uncropped */
  .wk-hero--overlay {
    min-height: 0;
  }
  .wk-hero--overlay .wk-hero__media {
    min-height: 0;
    aspect-ratio: var(--ar, 16 / 9);
  }
  .wk-hero--overlay .wk-hero__media img {
    object-fit: contain;
  }
  .wk-hero__scrim {
    display: none;
  }
  .wk-hero__text,
  .wk-hero--br .wk-hero__text,
  .wk-hero--tl .wk-hero__text {
    position: static;
    padding: 0 var(--pad) clamp(20px, 4vh, 32px);
    max-width: none;
    text-align: left;
    justify-items: start;
    margin-left: 0;
    color: var(--white);
  }
  .wk-hero--scrim-light .wk-hero__text,
  .wk-hero--scrim-light .wk-hero__text .wk-headline,
  .wk-hero--scrim-light .wk-eyebrow,
  .wk-hero--scrim-light .wk-eyebrow b {
    color: var(--white);
  }
  .wk-hero--overlay {
    display: flex;
    flex-direction: column-reverse;
  }
  .wk-overview,
  .wk-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wk-nav__grid {
    grid-template-columns: 1fr;
  }
  .wk-nav__link--next {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    text-align: left;
    justify-items: start;
  }
  .wk-nav__link--prev {
    padding-right: 0;
  }
  .wk-cats {
    padding-top: calc(var(--header-h) + 6px);
  }
}
@media (max-width: 599px) {
  .wk-chapter__head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .wk-chapter__cue {
    flex-basis: 100%;
    order: 3;
  }
  .wk-item--pair,
  .wk-item--pair[data-start] {
    --wk-span: 12 !important;
    grid-column: span 12;
  }
  .wk-entry__title {
    font-size: clamp(24px, 7vw, 32px);
  }
  .wk-title {
    font-size: clamp(36px, 11vw, 56px);
  }
  .wk-cats__row {
    gap: 4px 16px;
  }
}

/* Reduced motion: hover/scroll transforms off, content unchanged */
@media (prefers-reduced-motion: reduce) {
  .wk-entry__media img,
  .wk-entry__media video,
  .wk-entry--text .wk-entry__title,
  .wk-nav__title,
  .wk-cat::after {
    transition: none;
  }
  .wk-entry:hover .wk-entry__media img,
  .wk-entry--text:hover .wk-entry__title,
  .wk-nav__link--next:hover .wk-nav__title,
  .wk-nav__link--prev:hover .wk-nav__title {
    transform: none;
  }
}