/* assets/rn/pages/work.css — /work.html (3-work-featured). Linked LAST, after components.css.
   The page is assembled from the shared parts (rn-eyebrow, rn-feature, rn-stat, rn-card, rn-media, rn-link, rn-band);
   this file only lays them out for Work and adds the few page pieces (the hero, the highlights list, the JANBARI.TV
   rundown, the lighter lists and the next-row). Tokens only, no raw colours. Studio family: --rn-signal is lime
   (tokens.css), and lime appears only as the eyebrow dots, the H1 phrase, the highlight behind "Square Enix." and the
   JANBARI.TV 2007–2018 bar. No red on this page.

    1. Hero                    3. Highlights and stats      6. Closing band
    2. The EDAMAME feature     4. Featured cards            7. Reduced motion and pause
    2b. The JANBARI.TV feature 5. More credits, next row                                                          */

/* 1. Hero ──────────────────────────────────────────────────────────────────────────────────────────────────────
   Short, so the feature starts in the first view: eyebrow and the display H1 on the left, two plain sentences and
   the one disclaimer on the right. The 88px grid is the hero's own (its .rm-grid), fading out to the right. */
body.studio-work-page .wk-hero {
  min-height: 0;
  padding: calc(var(--rn-header-top) + var(--rn-header-h) + clamp(40px, 5.6vw, 80px)) 0 clamp(48px, 5vw, 72px);
  border-bottom: 0;
  background-color: var(--rn-ink);
}

body.studio-work-page .wk-hero::before {
  opacity: 1;
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-size: var(--rn-grid) var(--rn-grid);
  -webkit-mask-image: linear-gradient(90deg, black 20%, transparent 90%);
  mask-image: linear-gradient(90deg, black 20%, transparent 90%);
}

.wk-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  gap: var(--rn-space-6) clamp(40px, 6vw, 96px);
}

.wk-hero h1 {
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-text-on-ink);
}

.wk-hero-aside {
  max-width: 46ch;
  justify-self: end;
}

.wk-hero-aside > p:first-child {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

.wk-note {
  margin: var(--rn-space-5) 0 0;
  padding-top: var(--rn-space-4);
  border-top: 1px solid var(--rn-line-on-ink);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.5 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .wk-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .wk-hero-aside {
    justify-self: start;
  }
}

/* 2. The EDAMAME feature ───────────────────────────────────────────────────────────────────────────────────────
   The shared rn-feature card (stage ink, the 88px grid, ring, radius 20) laid out as the page's one big moment:
   the kinetic headline across the top; the key art shown whole (16:9) with the channel figures under it; the story
   and the highlights beside them. Stacks at 900px and below in reading order: headline, key art, story,
   highlights, figures, links. Motion (assets/rn/pages/work.js): headline words rise and "Square Enix." lands on its
   lime block, the key art fades and settles once, the story fades in, the rows land, the figures roll on their
   reels, the links arrive. */
.wk-feature-section {
  padding-block: clamp(16px, 2.8vw, 40px) 0;
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.wk-feature {
  contain: layout paint;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "head  head"
    "media copy"
    "proof copy";
  align-items: start;
  column-gap: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 4.4vw, 64px);
  background-position: -1px -1px;
}

.wk-feature-head {
  grid-area: head;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.wk-feature-head h2 {
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
  font: var(--rn-weight-display) var(--rn-fs-h2)/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

/* The key art, whole: its own 16:9 frame (the shared feature media is a cover-fitted column). */
.rn-feature-media.wk-feature-media {
  grid-area: media;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: var(--rn-radius-media);
  box-shadow: var(--rn-ring-on-ink);
}

.wk-feature-media > img {
  min-height: 0;
  object-fit: cover;
}

.wk-feature-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-6);
  min-width: 0;
}

.wk-feature-lede {
  max-width: 52ch;
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

.wk-feature-proof {
  grid-area: proof;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-3);
  min-width: 0;
  margin-top: var(--rn-space-6);
}

.wk-proof-label {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.wk-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rn-space-6);
  margin: var(--rn-space-2) 0 0;
}

@media (max-width: 900px) {
  .wk-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "media" "copy" "proof";
  }

  .wk-feature-copy {
    margin-top: var(--rn-space-6);
  }
}

/* 2b. The JANBARI.TV feature ───────────────────────────────────────────────────────────────────────────────────
   The second feature, one step down from EDAMAME: the same stage card, no picture. The headline (it names the years)
   and a rule under it (twelve year ticks, 2007 to 2018, and a lime bar drawn across them) run over the top. Tom's own
   account sits on the left and the programmes on the right as a rundown, each row one link to the programme's
   official playlist (or an official episode where the channel has no playlist). The channel's public figures sit
   under the account, one row each, as EDAMAME's sit under its key art, so the two columns end together. Stacks at
   1180px and below in reading order: headline, rule, account, rundown, figures (a narrower rundown breaks the
   display names), the figures then three across the card's width. Motion
   (assets/rn/pages/work.js, the same per-part clock as EDAMAME): the eyebrow, the headline's words, the bar drawing
   across on the CAM spring, the account, the rows landing one after another, the figures on their reels, then the
   link. */
.jb-section {
  padding-top: clamp(24px, 3.4vw, 48px);
}

.jb-feature {
  contain: layout paint;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "head  head"
    "copy  list"
    "proof list";
  align-items: start;
  column-gap: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 4.4vw, 64px);
  background-position: -1px -1px;
}

.jb-head {
  grid-area: head;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* --jb-h2-size and --jb-name-size let ja.css fit the Japanese headline and names to their columns. */
.jb-head h2 {
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
  font: var(--rn-weight-display) var(--jb-h2-size, var(--rn-fs-h2))/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

/* The years as a rule: a track of twelve ticks, one a year, and the bar drawn across them. The headline says the
   years, so the rule carries no labels of its own. */
.jb-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(24px, 3vw, 40px);
}

.jb-run-track {
  position: relative;
  height: 14px;
}

.jb-run-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}

.jb-run-ticks > i {
  width: 1px;
  background: var(--rn-ring);
}

.jb-run-bar {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--rn-signal, var(--rn-text));
}

.jb-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-4);
  min-width: 0;
}

.jb-onscreen {
  margin: 0;
  color: var(--rn-text);
  font: 600 var(--rn-fs-body)/var(--rn-lh-body) var(--rn-font-body);
  text-wrap: pretty;
}

/* The rundown: the kind of programme in mono, the name large with its Japanese title beside it, one line on what it
   is, and the cue on the right. The name is the row's link, stretched over the whole row by its ::after, so the row
   is one target while a screen reader still reads the kind and the line as they are; the cue is visual only. Rows are
   split by hairlines; the cue thickens and its arrow nudges on hover, like the next-row links below. */
.jb-programmes {
  grid-area: list;
  min-width: 0;
}

.jb-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rn-line);
  list-style: none;
}

.jb-list > li {
  border-bottom: 1px solid var(--rn-line);
}

.jb-prog {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  grid-template-areas:
    "kind name cue"
    ".    what cue";
  align-items: baseline;
  gap: 6px var(--rn-space-5);
  padding: var(--rn-space-5) 0;
  color: var(--rn-text);
}

.jb-kind {
  grid-area: kind;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.jb-name {
  grid-area: name;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--rn-space-3);
  min-width: 0;
}

.jb-link {
  color: inherit;
  font: var(--rn-weight-display) var(--jb-name-size, var(--rn-fs-h3))/var(--jb-name-lh, 1.05) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
  text-decoration: none;
}

/* The stretch, and the focus ring drawn round the whole row (the link's own ring would circle only the name). */
.jb-link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  outline: var(--jb-ring, none);
  outline-color: var(--rn-text);
  outline-offset: var(--rn-focus-offset);
}

.jb-ja {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.3 var(--rn-font-body);
}

.jb-what {
  grid-area: what;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
  text-wrap: pretty;
}

.jb-cue {
  grid-area: cue;
  text-decoration-thickness: var(--jb-cue-line, 1px);
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 9px;
  min-height: var(--rn-target);
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  transition: text-decoration-thickness var(--rn-dur-snap) var(--rn-ease-snap);
}

.jb-cue > span {
  display: inline-block;
  translate: var(--jb-nudge, 0 0);
  transition: translate var(--rn-dur-snap) var(--rn-ease-snap);
}

/* Hover reaches the cue through custom properties, so the selectors stay one class and a state. */
.jb-prog:hover {
  --jb-cue-line: 2px;
}

.jb-link:focus-visible {
  --jb-ring: var(--rn-focus-outline);
  outline: 0;
  box-shadow: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jb-prog:hover {
    --jb-nudge: 3px -3px;
  }
}

.jb-more {
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
}

/* The figures: one row each, figure then label, under the account (and on a phone); three across while the card is
   stacked, from 1180px down to 641px. */
.jb-proof {
  grid-area: proof;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-3);
  min-width: 0;
  margin-top: clamp(32px, 4vw, 48px);
}

.rn-stat.jb-stat {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
}

/* Each figure is its own layout and paint island, as on EDAMAME: the reel's measuring stays inside it. */
.rn-stat.jb-stat > * {
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--rn-space-4);
  padding: clamp(16px, 1.8vw, 24px);
  contain: layout paint;
}

.rn-stat.jb-stat > * + * {
  border-top: 1px solid var(--rn-card-ring);
  border-left: 0;
}

.jb-stat dd {
  flex: none;
  min-width: 5.4ch; /* the widest figure (19,531), so the labels line up when the figures are rows */
  font-size: var(--rn-fs-h2-sm);
}

.jb-stat dt {
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .jb-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "copy" "list" "proof";
  }

  .jb-programmes {
    margin-top: var(--rn-space-6);
  }

  .rn-stat.jb-stat {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rn-stat.jb-stat > * {
    flex-direction: column-reverse;
    align-items: normal;
    gap: var(--rn-space-2);
  }

  .rn-stat.jb-stat > * + * {
    border-top: 0;
    border-left: 1px solid var(--rn-card-ring);
  }
}

@media (max-width: 640px) {
  .rn-stat.jb-stat {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-stat.jb-stat > * {
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--rn-space-4);
  }

  .rn-stat.jb-stat > * + * {
    border-top: 1px solid var(--rn-card-ring);
    border-left: 0;
  }

  .jb-prog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kind" "name" "what" "cue";
    gap: 6px;
    padding-bottom: var(--rn-space-2);
  }

  .jb-cue {
    justify-self: start;
  }
}

/* 3. Highlights and stats ──────────────────────────────────────────────────────────────────────────────────────
   The highlights read like the hero's findings list: a mono label for the kind of work, then the work, one row
   each, split by hairlines (data-rn-stagger-rows lands them one after another; no finding rule, no red). */
.wk-highlights {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rn-line);
  list-style: none;
}

.wk-highlights > li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--rn-space-4);
  padding: 13px 0;
  border-bottom: 1px solid var(--rn-line);
}

.wk-hl-kind {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.wk-hl-what {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
  text-wrap: pretty;
}

.wk-hl-what > strong {
  color: var(--rn-text);
  font-weight: 700;
  font-size: 0.9375rem;
}

/* Three figures in one ringed strip, three across wherever they fit; on a phone one row each, figure then label. */
body.studio-work-page .wk-feature .wk-stat {
  grid-auto-flow: column;
  grid-template-columns: none;
}

/* Each figure is its own layout and paint island: the reel's measuring and its strips stay inside it. */
body.studio-work-page .wk-feature .wk-stat > div {
  padding: clamp(16px, 1.8vw, 24px);
  contain: layout paint;
}

body.studio-work-page .wk-feature .wk-stat > div + div {
  border-top: 0;
  border-left: 1px solid var(--rn-card-ring);
}

body.studio-work-page .wk-feature .wk-stat dd {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}

/* A label that needs two lines breaks between phrases ("Views on the / most-viewed video"), never at the hyphen. */
body.studio-work-page .wk-feature .wk-stat dt {
  text-wrap: balance;
}

.wk-nobr {
  white-space: nowrap;
}

@media (max-width: 640px) {
  body.studio-work-page .wk-feature .wk-stat {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  body.studio-work-page .wk-feature .wk-stat > div {
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--rn-space-4);
  }

  body.studio-work-page .wk-feature .wk-stat > div + div {
    border-top: 1px solid var(--rn-card-ring);
    border-left: 0;
  }

  body.studio-work-page .wk-feature .wk-stat dd {
    flex: none;
    min-width: 4.2ch;
    font-size: 2rem;
  }

  .wk-highlights > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* 4. Featured cards ────────────────────────────────────────────────────────────────────────────────────────────
   Five shared rn-cards: two wide, then three (a 6-column grid), each whole card one link. Cards in a row share their
   bottom edge. Two columns up to 1180px, where the odd one out runs full width with its picture beside the text;
   one column on a phone. No words over the pictures, no badges, no scrims. Motion: the card rises in once and its
   picture settles from 104% (below); hover lifts it and turns the ring up (components.css), press gives a little. */
.wk-featured {
  padding-block: clamp(64px, 8vw, 120px) var(--rn-section-tight);
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.wk-section-head {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.wk-section-head h2 {
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
}

.wk-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk-card {
  grid-column: span 2;
}

.wk-card.is-wide {
  grid-column: span 3;
}

.wk-card .rn-card-body {
  gap: var(--rn-space-2);
  padding: clamp(20px, 2vw, 28px);
}

.wk-card .rn-card-body > p:not(.rn-card-kicker) {
  max-width: 48ch;
  font: 500 var(--rn-fs-body)/var(--rn-lh-body) var(--rn-font-body);
}

.wk-card .rn-card-cue {
  align-self: flex-start;
  min-height: var(--rn-target);
  padding-top: var(--rn-space-2);
}

.wk-card .rn-media > img {
  object-position: var(--rn-media-pos, 50% 0%);
}

/* The press: a small give on the SNAP spring (the hover lift stays on the card's UI spring). */
@media (prefers-reduced-motion: no-preference) {
  .wk-card:active {
    scale: 0.99;
    transition-duration: var(--rn-dur-snap);
    transition-timing-function: var(--rn-ease-snap);
  }
}

@media (max-width: 1180px) {
  .wk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wk-card,
  .wk-card.is-wide {
    grid-column: auto;
  }

  .wk-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .wk-card:last-child:nth-child(odd) > .rn-card-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .wk-card:last-child:nth-child(odd) .rn-media {
    height: 100%;
    min-height: 100%;
  }
}

@media (max-width: 640px) {
  .wk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-card:last-child:nth-child(odd) > .rn-card-link {
    display: flex;
  }

  .wk-card:last-child:nth-child(odd) .rn-media {
    height: auto;
    min-height: 0;
  }
}

/* 5. More credits and the next row ─────────────────────────────────────────────────────────────────────────────
   The lighter tier: two short text lists (Japan credits, Also) beside the section heading, then one row of two
   onward links (the prototype lab and the audit practice), split by hairlines. */
.wk-more {
  padding-block: var(--rn-section-tight) var(--rn-space-9);
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.wk-more-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  align-items: start;
  gap: var(--rn-space-6) clamp(24px, 3vw, 48px);
}

.wk-more-grid > .wk-section-head {
  margin-bottom: 0;
}

/* The lighter tier takes the compact H2. */
.wk-more-grid > .wk-section-head h2 {
  font-size: var(--rn-fs-h2-sm);
}

.wk-list h3 {
  margin: 0 0 var(--rn-space-3);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.wk-list ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rn-line);
  list-style: none;
}

.wk-list li {
  display: grid;
  gap: 2px;
  padding: var(--rn-space-4) 0;
  border-bottom: 1px solid var(--rn-line);
}

/* A row that leads with its 44px link gives back the 8px the link box takes below it. */
.wk-list li:has(> .rn-link) {
  padding-bottom: calc(var(--rn-space-4) - 8px);
}

.wk-list li > strong {
  font: var(--rn-weight-title) var(--rn-fs-body)/1.35 var(--rn-font-body);
}

.wk-list li > span {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
}

/* A 44px link that keeps the row's rhythm: the extra height sits in the row's own padding. */
.wk-list li > .rn-link {
  justify-self: start;
  margin-block: -12px -2px; /* the 44px box ends where the description starts, so its focus ring never strikes through it */
  font-size: var(--rn-fs-body);
}

.wk-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--rn-line-strong-on-paper);
}

.wk-next-link {
  display: grid;
  align-content: start;
  gap: var(--rn-space-2);
  padding: var(--rn-space-6) var(--rn-space-6) var(--rn-space-5) 0;
  color: var(--rn-text);
  text-decoration: none;
}

.wk-next-link + .wk-next-link {
  padding-left: var(--rn-space-6);
  border-left: 1px solid var(--rn-line);
}

.wk-next-kicker {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.wk-next-link > strong {
  max-width: 30ch;
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.wk-next-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--rn-target);
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wk-next-cue > [aria-hidden="true"] {
  display: inline-block;
  transition: translate var(--rn-dur-snap) var(--rn-ease-snap);
}

.wk-next-link:hover .wk-next-cue {
  text-decoration-thickness: 2px;
}

.wk-next-link:focus-visible {
  outline: var(--rn-focus-outline);
  outline-offset: var(--rn-focus-offset);
  box-shadow: var(--rn-focus-band);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wk-next-link:hover .wk-next-cue > [aria-hidden="true"] {
    translate: 3px 0;
  }
}

@media (max-width: 1180px) {
  .wk-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wk-more-grid > .wk-section-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .wk-more {
    padding-bottom: var(--rn-space-8);
  }

  .wk-more-grid,
  .wk-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-next-link,
  .wk-next-link + .wk-next-link {
    padding: var(--rn-space-5) 0;
    border-left: 0;
  }

  .wk-next-link + .wk-next-link {
    border-top: 1px solid var(--rn-line);
  }
}

/* A signal dot on paper needs its ink edge (base.css gives it to the legacy kickers; rn-eyebrow is new). */
.studio-work-page [data-tone=light] .rn-eyebrow:not(.rn-feature *)::before {
  box-shadow: var(--rn-signal-edge);
}

/* 6. Closing band: the shared rn-band. The band card follows the paper section above without a second gap, and its
   one sentence keeps a line of air under the headline (the other bands have no sentence yet). */
body.studio-work-page .rn-band {
  padding-top: 0;
}

body.studio-work-page .rn-band h2 + p {
  margin-top: var(--rn-space-4);
}

/* 7. Reduced motion and pause ──────────────────────────────────────────────────────────────────────────────────
   Each featured card's picture settles from 104% as the card rises in (the rn-feature media settle, keyed off the
   card's own reveal), once, never while paused or under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="paused"]) .wk-card[data-rn-reveal].is-visible:not(.rn-shown) .rn-media > img {
    animation: rn-media-settle var(--rn-dur-cam) var(--rn-ease-critical) backwards;
    animation-delay: calc(min(var(--reveal-i, 0), 5) * var(--rn-stagger) + var(--rn-delay, 0ms));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wk-card:active,
  .wk-next-cue > [aria-hidden="true"],
  .jb-cue,
  .jb-cue > span {
    scale: none;
    transition: none;
  }
}

/* The card's link is named from its title first (the kicker follows the h3 in the markup, so a screen reader's links
   list reads "Muse & Moonlight …", not "WEBSITE / SOUTH PERTH …"); the kicker still shows above the title. */
.wk-card .rn-card-kicker {
  order: -1;
}