/* Study55 — Night Lacquer. One continuous seigaiha tide built as parallel lacquer
   planes (constant radius); one light pool on the team, tied to the real ON AIR state.
   Geometry (member boxes, paint order, halo rules) lives in study55-cast.css and the
   gradients in the hero's <svg class="s55-defs">, both generated by
   research-refresh/round55/build.py. */
@font-face{font-family:'Barlow Condensed';src:url('assets/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

body.s55{
  --s55-gold:#d8b66a;
  --s55-gold-hot:#eccf8c;
  --s55-ink:#0b0c0f;
  --s55-paper:#f4efe6;
  --s55-ground:#101112;
  --s55-ease:cubic-bezier(.16,.84,.24,1);
}

/* ---------- Hero frame ---------- */
body.s55 #main>.s55-hero{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:clip;
  color:var(--s55-paper);
  /* Night air: a slightly cool ink, darker than the lacquer planes. */
  background:linear-gradient(180deg,var(--s55-ground) 0,#0b0d12 30%,#0c0d11 100%);
}
.s55-hero *,.s55-hero *::before,.s55-hero *::after{box-sizing:border-box}
/* Warm spill from the light pool into the air; only while someone is on air. */
.s55-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(40% 55% at 64% 55%,rgba(214,170,92,.09),rgba(214,170,92,0) 70%);
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.s55-hero[data-signal="live"]::before{opacity:1}

.s55-frame{position:relative;width:min(100%,1440px);margin:0 auto}
/* The scene's bottom edge is the tide's bottom edge: the overflow-visible layers are
   clipped there, but may still run sideways/upward past the frame on wide screens. */
.s55-scene{position:relative;aspect-ratio:1440/660;clip-path:inset(-50vh -100vw 0 -100vw)}
.s55-scene::after{
  content:"";
  position:absolute;
  left:-50vw;
  right:-50vw;
  bottom:0;
  z-index:40;
  height:14%;
  background:linear-gradient(rgba(16,17,18,0),var(--s55-ground));
  pointer-events:none;
}
.s55-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---------- Wordmark: a raised gold sign (thickness + cast shadow), not a glow ---------- */
.s55-mark{
  position:absolute;
  z-index:30;
  left:5.556%;
  top:9.697%;
  width:38.889%;
  filter:drop-shadow(0 3px 0 #4d3b1e) drop-shadow(0 14px 16px rgba(0,0,0,.5));
}
.s55-wordmark{
  position:relative;
  width:100%;
  aspect-ratio:1932/502;
  margin:0;
  overflow:hidden;
  font-size:0;
  line-height:0;
  background:linear-gradient(180deg,#e8ca83 0,#d0aa60 55%,#b38c47 100%);
  -webkit-mask:url('assets/wordmark.png') 50.26% 50%/110.093% auto no-repeat;
  mask:url('assets/wordmark.png') 50.26% 50%/110.093% auto no-repeat;
}
.s55-wordmark img{position:absolute;left:-5.072%;top:-20.717%;width:110.093%;max-width:none;height:auto;opacity:0}

/* ---------- Tide: lacquer planes (fills come from the generated gradients) ---------- */
.s55-tide{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.s55-tide--m{display:none}
.s55-inner,.s55-crest,.s55-halo{fill:none;stroke-linecap:butt;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.s55-tide--d .s55-crest{stroke:url(#s55-crest-d)}
.s55-tide--m .s55-crest{stroke:url(#s55-crest-m)}
.s55-tide--d .s55-inner{stroke:url(#s55-inner-d)}
.s55-tide--m .s55-inner{stroke:url(#s55-inner-m)}
.s55-crest{stroke-width:1.5px;opacity:calc(.6 + .4 * var(--d))}
/* The nested arcs are the seigaiha's form: clearly present on every scale, far or near. */
.s55-inner{stroke-width:1.15px;opacity:calc(.72 + .28 * var(--d))}
.s55-halo{stroke:var(--s55-gold-hot);stroke-width:1.5px;opacity:0;transition:opacity .45s ease}
/* Light pool on the team. Idle is already a finished, lit stage; when the team is
   really on air (any member, via live46) the same pool burns brighter. */
.s55-defs stop{transition:stop-color .9s ease}
.s55-crest-core{stop-color:#e1ba6c}
.s55-crest-mid{stop-color:#9d7e4b}
.s55-crest-edge{stop-color:#3d362d}
.s55-inner-core{stop-color:#b8964f}
.s55-inner-mid{stop-color:#8a6f43}
.s55-inner-edge{stop-color:#5a4c36}
.s55-hero[data-signal="live"] .s55-crest-core{stop-color:#fbe0a0}
.s55-hero[data-signal="live"] .s55-crest-mid{stop-color:#c8a15a}
.s55-hero[data-signal="live"] .s55-crest-edge{stop-color:#4a4032}
.s55-hero[data-signal="live"] .s55-inner-core{stop-color:#d4b168}
.s55-hero[data-signal="live"] .s55-inner-mid{stop-color:#9c7e4b}
.s55-hero[data-signal="live"] .s55-inner-edge{stop-color:#5f503a}
/* Each member's own colour falling on the planes behind them (gradients are generated;
   the illustrations themselves are never tinted). Not a LIVE indicator. */
.s55-spill{opacity:.85;transition:opacity .9s ease}
.s55-hero[data-signal="live"] .s55-spill{opacity:1}
/* Travelling light: a short dash along each crest (pathLength=1). At rest it is invisible;
   study55-motion.js moves it. Inside its row group, so nearer rows occlude it. */
.s55-swell path{fill:none;stroke:#ffe6ad;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.24 1.4;stroke-dashoffset:.24;opacity:0}
.s55-tide--m .s55-swell path{stroke-width:2.2}

/* ---------- Members ---------- */
.s55-cast{position:static;margin:0;padding:0;list-style:none}
/* No z-index here: the art carries the paint order (--z), the plate sits above the tide. */
.s55-member{position:absolute;margin:0;padding:0;list-style:none}
.s55-profile{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;outline:none}
.s55-art{position:absolute;inset:0;z-index:var(--z,1);display:block}
.s55-art img{
  position:absolute;
  left:calc(-100% * var(--ax) / var(--aw));
  top:calc(-100% * var(--ay) / var(--ah));
  width:calc(100% / var(--aw));
  max-width:none;
  height:auto;
  pointer-events:none;
  user-select:none;
  /* The member casts a shadow onto the plane behind; it is in the scene, not on it. */
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5));
}

/* Nameplate: touches its own art, never the gap between two members.
   Back row: over the art's upper-left corner. Front row: over its lower-left, on the surf. */
/* A broadcast lower-third: gold bar + an ink band that fades out to the right. The band
   keeps wave lines from ever crossing the letters (at rest or mid-fade) without turning
   the name into a boxed badge. */
.s55-name{
  position:absolute;
  z-index:45;
  display:flex;
  align-items:center;
  gap:8px;
  padding:3px 18px 3px 11px;
  color:var(--s55-paper);
  background:linear-gradient(90deg,rgba(11,12,15,.9) 0,rgba(11,12,15,.78) 62%,rgba(11,12,15,0) 100%);
  font:600 clamp(14px,1.2vw,17px)/1.3 "Zen Kaku Gothic New","Yu Gothic",sans-serif;
  letter-spacing:.06em;
  white-space:nowrap;
  text-shadow:0 0 2px var(--s55-ink);
}
.s55-name::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--s55-gold)}
.s55-member[data-row="back"] .s55-name{left:-4%;bottom:calc(100% - 12px)}
.s55-member[data-row="front"] .s55-name{left:3%;bottom:5%}
/* Per-member plate side comes from hero-cast-art.json (data-plate), never from an id here:
   used when a figure's lower-left is open space that would push the plate toward a neighbour. */
.s55-member[data-plate="right"] .s55-name{left:auto;right:0;bottom:4%}
.s55-live-badge{
  position:static;
  inset:auto;
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:2px 5px;
  transform:none;
  border:0;
  background:var(--s55-ink);
  color:var(--s55-gold);
  font:700 10px/1.1 'Barlow Condensed',Arial,sans-serif;
  letter-spacing:.08em;
  text-shadow:none;
}
.s55-live-badge::before{content:none!important;display:none!important}
/* A plate belongs beside its person: while that member's own portrait is not yet
   paintable (set only by the inline check after the cast list), its plate waits. */
.s55-member[data-art-pending] .s55-name{visibility:hidden}
/* While this member's portrait is flying back from its profile (shared-portrait view
   transition), its resting plate would sit under the flying figure and look garbled.
   members47-motion.js sets data-m47-arriving on ONLY that member's wrapper and removes it
   when the transition finishes, fails or is skipped (failsafe cleanup only). */
.s55-member[data-m47-arriving] .s55-name{visibility:hidden}
.s55-live-badge[hidden]{display:none!important}
/* A live member's plate is lit, in the same lamp vocabulary as ON AIR. */
.s55-member[data-live="true"] .s55-name{padding:3px 5px 3px 11px;background:#e2c278;color:#15120c;text-shadow:none}
.s55-member[data-live="true"] .s55-name::before{background:#15120c}
.s55-profile:hover .s55-name-text{color:#f3d590}
.s55-member[data-live="true"] .s55-profile:hover .s55-name-text{color:#15120c}
.s55-profile:focus-visible .s55-name{outline:2px solid var(--s55-gold);outline-offset:3px}
.s55-profile:focus-visible .s55-art{outline:1px solid rgba(216,182,106,.7);outline-offset:4px}

/* ---------- Lede: in flow below the scene unless the desktop scene has room ---------- */
.s55-lede{position:relative;z-index:1;display:grid;justify-items:start;align-items:center;gap:12px;margin:0;padding:6px 20px 0}
.s55-description{margin:0;color:#e7e2d8;font:500 clamp(12.5px,1.1vw,16px)/1.75 "Zen Kaku Gothic New","Yu Gothic",sans-serif;letter-spacing:.03em}
.s55-description .s55-line{display:block}
.s55-members-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  padding:0 14px 0 18px;
  background:var(--s55-gold);
  color:#15130f;
  font:600 15px/1 'Barlow Condensed',Arial,sans-serif;
  letter-spacing:.12em;
  text-decoration:none;
  transition:background-color .2s ease;
}
.s55-members-link svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.s55-members-link:hover{background:#ecd08e}
.s55-members-link:focus-visible{outline:2px solid var(--s55-gold);outline-offset:4px}
@media (min-width:1000px){
  .s55-lede{position:absolute;z-index:30;left:5.694%;top:37.121%;width:26.4%;padding:0;gap:22px}
  .s55-members-link{min-height:48px}
}
@media (min-width:641px) and (max-width:999px){
  .s55-lede{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;gap:12px 24px;padding:6px var(--page-pad,24px) 0}
  .s55-members-link{justify-self:end}
}

/* Motion (intro, swells) is WAAPI in study55-motion.js; nothing here depends on it. */

/* ---------- Tide ebb on scroll (light, not geometry) ----------
   As the hero leaves, its light drains out of the tide from the nearest row to the
   deepest, and the members' colour on the planes dims with it. Geometry never moves:
   shifting rows by depth would change the lattice spacing between rows (not authentic
   seigaiha) even though occlusion order would hold, so the ebb is carried by light.
   Timeline: a NAMED view timeline owned by the scene; the rows/spills are its
   descendants and reference it by name. Without support (or with reduced motion) the
   rows simply keep their resting light. Intro/swell WAAPI animations composite above
   these CSS animations while they run, so the two never cancel each other. */
@supports (animation-timeline: --s55-tide) and (view-timeline-name: --s55-tide) {
  @media (prefers-reduced-motion: no-preference) {
    .s55-scene{view-timeline-name:--s55-tide;view-timeline-axis:block}
    .s55-row>:is(.s55-crest,.s55-inner){
      animation:s55-ebb linear both;
      animation-duration:auto;
      animation-timeline:--s55-tide;
      /* nearest row (d=1) drains first: exit 4%→56%; deepest (d=0): exit 44%→96% */
      animation-range:exit calc(4% + (1 - var(--d)) * 40%) exit calc(56% + (1 - var(--d)) * 40%);
    }
    .s55-spill{animation:s55-ebb-spill linear both;animation-duration:auto;animation-timeline:--s55-tide;animation-range:exit 10% exit 80%}
  }
}
/* Floor .26 (was .14): the change is alpha only (no desaturation), but at .14 the gold
   lines sank into the near-black lacquer and read as grey; .26 keeps a dark-gold line
   and the front-to-back depth steps visible while the hero exits. */
@keyframes s55-ebb{to{opacity:.26}}
@keyframes s55-ebb-spill{to{opacity:.25}}

/* ---------- Header: ON AIR lamp (real state) ---------- */
body.s55 .s55-masthead{position:relative;z-index:50;display:flow-root}
body.s55 :is(#on-air,#news,#products,#works){scroll-margin-top:72px}
/* The studio ON AIR lamp: dark when nobody is live, a lit gold plate while live. */
body.s55 .s13-header .hero-now .hero-now-label{display:inline-flex;align-items:center;margin:0;padding:2px 6px;border:1px solid #5b4f3a;border-radius:2px;background:transparent;color:#a8987a;letter-spacing:.08em}
body.s55 .s13-header .hero-now[data-state="live"] .hero-now-label{border-color:#e2c278;background:#e2c278;color:#16130d;box-shadow:0 0 12px rgba(226,194,120,.32)}
/* The lamp states ON AIR by itself: the broadcast glyph in front of it repeated the LIVE
   nav icon and the LIVE heading icon, so the header copy is dropped at every width
   (nav and section icons stay). One content-sized line: lamp, names, arrow to LIVE. */
body.s55 .s13-header>.hero-now{display:flex;align-items:center;gap:10px;min-width:0}
body.s55 .s13-header>.hero-now>.ui-icon:first-child{display:none}
body.s55 .s13-header>.hero-now #hero-live-names{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.s55 .s55-onair-short{display:none}
@media (min-width:761px){
  body.s55 .s13-header:not([data-s55-head])>.hero-now{justify-self:start;width:auto;max-width:100%}
}
@media (min-width:1101px){
  /* At rest on wide screens ON AIR sits in the brand row, between the mark and the nav —
     the same arrangement the compact bar keeps, so the handover changes material and
     brand, not layout. Still above the hero, still the real synced strip. */
  body.s55 .s13-header:not([data-s55-head]){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(64px,auto);gap:0 28px}
  body.s55 .s13-header:not([data-s55-head])>.hero-now{grid-column:2;grid-row:1;align-self:center;min-width:0;min-height:36px;margin:0;padding:0;border:0}
  body.s55 .s13-header:not([data-s55-head]) #s14-nav{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  /* One line: signal icon, a content-sized lamp, then the real names (ellipsis if many;
     the full list is the LIVE section this strip links to). Never a stretched bar. */
  body.s55 .s13-header>.hero-now{gap:7px;overflow:hidden}
  body.s55 .s13-header .hero-now .hero-now-label{flex:none;justify-self:auto;font-size:10px!important}
  body.s55 .s13-header>.hero-now #hero-live-names{display:block;flex:1 1 auto;max-height:none;font-size:12.5px;line-height:1.3;-webkit-line-clamp:unset}
}
@media (max-width:374px){
  /* Too narrow for real names (320 showed "So…"): a truthful summary instead —
     ON AIR · N distinct people when live, or the provider's state in two words.
     The full names stay in the link's accessible name (visually hidden, not removed);
     the link still goes to #on-air. */
  body.s55 .s13-header>.hero-now #hero-live-names{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.s55 .s55-onair-short{display:inline;flex:none;color:#eee8e8;font:600 12.5px/1.3 'Barlow Condensed','Zen Kaku Gothic New',sans-serif;letter-spacing:.06em;white-space:nowrap}
  body.s55 .hero-now[data-state="live"] .s55-onair-short{color:#f4e3bd}
}

/* ---------- Header: compact bar once the hero wordmark leaves ----------
   Handover choreography (first arrival per page view, data-s55-arrive="full"):
   the lacquer bar surface fades in → the real logo mark re-draws with the cover's own
   stroke path → the mark fills → the wordmark is revealed beside it (a wipe, not a stroke).
   Nav, menu toggle and ON AIR only fade in place: no hit target ever moves.
   Later arrivals ("quick") are a short fade. --s55-slow is a QA-only time multiplier. */
body.s55 .s55-brand-word,body.s55 .s55-brand-stroke{display:none}
body.s55 .s13-header:is([data-s55-head="reading"],[data-s55-head="leaving"]){
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:900;
  isolation:isolate;
  box-sizing:border-box;
  width:auto;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:56px;
  align-items:center;
  gap:0 28px;
  min-height:56px;
  padding:0 max(var(--page-pad,40px),calc((100% - 1168px) / 2));
  border:0;
  background:none;
}
/* The bar's material is its own layer so it can arrive separately from the content. */
body.s55 .s13-header[data-s55-head]::before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  border-bottom:1px solid rgba(216,182,106,.2);
  background:rgba(10,11,14,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
body.s55 .s13-header[data-s55-head="leaving"]{animation:s55-fade-out calc(180ms * var(--s55-slow,1)) ease-in both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive]::before{animation:s55-fade-in calc(260ms * var(--s55-slow,1)) ease-out both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive]>:is(.hero-now,#s14-nav,.s14-menu-toggle){animation:s55-fade-in calc(240ms * var(--s55-slow,1)) ease-out calc(120ms * var(--s55-slow,1)) both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive="full"] .s55-bs-line{animation:s55-draw calc(560ms * var(--s55-slow,1)) cubic-bezier(.3,.9,.8,1) calc(80ms * var(--s55-slow,1)) both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive="full"] .s55-bs-fill{animation:s55-fade-in calc(200ms * var(--s55-slow,1)) ease-out calc(560ms * var(--s55-slow,1)) both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive="full"] .s55-brand-word{animation:s55-wipe calc(420ms * var(--s55-slow,1)) cubic-bezier(.2,.75,.25,1) calc(460ms * var(--s55-slow,1)) both}
body.s55 .s13-header[data-s55-head="reading"][data-s55-arrive="quick"] .s13-brand{animation:s55-fade-in calc(180ms * var(--s55-slow,1)) ease-out both}
@keyframes s55-fade-in{from{opacity:0}}
@keyframes s55-fade-out{to{opacity:0}}
@keyframes s55-draw{from{stroke-dashoffset:1}}
@keyframes s55-wipe{from{clip-path:inset(0 100% 0 0)}}
body.s55 .s13-header[data-s55-head] .s55-brand-stroke{
  display:block;
  flex:none;
  width:auto;
  height:calc(502px * var(--ls) * 313.77 / 293.77);
  aspect-ratio:235.43/313.77;
  margin-right:calc(5px * var(--ls) - 10px * 502 * var(--ls) / 293.77);
  overflow:visible;
}
body.s55 .s55-bs-fill{fill:var(--s55-gold)}
body.s55 .s55-bs-line{fill:none;stroke:var(--s55-gold);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
/* study16/study48 give the brand link a fixed 32px (mobile) or 148px min (desktop) box; reset both. */
body.s55 .s13-header[data-s55-head] .s13-brand{grid-column:1;grid-row:1;display:flex;align-items:center;width:auto;min-width:0;min-height:44px;margin:0;padding:0;border:0;gap:0}
body.s55 .s13-header[data-s55-head] .s13-brand::before,
body.s55 .s13-header[data-s55-head] .s13-brand::after{content:none}
body.s55 .s13-header[data-s55-head] .s13-brand>img,
body.s55 .s13-header[data-s55-head] .s13-brand>span:not(.s55-brand-word){display:none}
/* Compact lockup rebuilt at the ORIGINAL proportions (root-measured wordmark.png 2127×710:
   alpha y 104–606, mark ink x 98–465, lettering ink from x 555 → 90 source px gap).
   --ls = rendered px per source px, shared by the mark and the lettering:
   · lettering = mask window x 470–2030 (starts in the transparent gap; no mark pixels),
     unscaled/undistorted, box 1560×502 source px;
   · mark = the cover's stroke path (ink 215.43×293.77 units, viewBox padded by 10 units
     on every side), sized so its ink is 502 source px tall like the PNG mark, with its
     right viewBox padding cancelled and 5 source px added back, so the ink-to-ink gap is
     (555 − 470) + 5 = 90 source px, as in the original lockup. */
body.s55 .s13-header[data-s55-head] .s13-brand{--ls:.058}
body.s55 .s13-header[data-s55-head] .s13-brand .s55-brand-word{
  display:block;
  flex:0 0 auto;
  width:calc(1560px * var(--ls));
  min-width:calc(1560px * var(--ls));
  aspect-ratio:1560/502;
  background:var(--s55-gold);
  -webkit-mask:url('assets/wordmark.png') no-repeat;
  mask:url('assets/wordmark.png') no-repeat;
  -webkit-mask-size:calc(2127px * var(--ls)) auto;
  mask-size:calc(2127px * var(--ls)) auto;
  -webkit-mask-position:calc(-470px * var(--ls)) calc(-104px * var(--ls));
  mask-position:calc(-470px * var(--ls)) calc(-104px * var(--ls));
}
body.s55 .s13-header[data-s55-head]>.hero-now{grid-column:2;grid-row:1;justify-self:start;width:auto;max-width:100%;min-width:0;min-height:36px;margin:0;padding:0;border:0;background:none}
body.s55 .s13-header[data-s55-head]>.hero-now>.ui-icon:last-child{display:none}
body.s55 .s13-header>.hero-now>.ui-icon:last-child{flex:none;width:14px;height:14px}
@media (min-width:761px){
  body.s55 .s13-header[data-s55-head] #s14-nav{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  body.s55 .s13-header:is([data-s55-head="reading"],[data-s55-head="leaving"]){grid-template-rows:56px auto;gap:0 10px;padding:0 10px}
  body.s55 .s13-header[data-s55-head] .s13-brand{--ls:.046}
  body.s55 .s13-header[data-s55-head] .s14-menu-toggle{grid-column:3;grid-row:1}
}

/* ---------- Narrow composition ---------- */
@media (max-width:999px){
  .s55-name{font-size:14px}
}
@media (max-width:640px){
  .s55-frame{width:min(100%,460px)}
  .s55-scene{aspect-ratio:390/580}
  /* Rev11: the wave field ended on a visible straight line above the lede. Cause: the
     fade finished in the page ground (#101112) while the lede below sits on the hero's
     own bottom colour (#0c0d11). Fade into that exact colour, over a longer run, so the
     last row dissolves into the lede's surface instead of meeting it at an edge. Names
     (z 45) stay above the fade (z 40). */
  .s55-scene::after{height:12%;background:linear-gradient(rgba(12,13,17,0),rgba(12,13,17,.72) 55%,#0c0d11)}
  .s55-tide--d{display:none}
  .s55-tide--m{display:block}
  .s55-mark{left:6.41%;top:3.103%;width:87.18%}
  .s55-name{font-size:14px;gap:5px}
  /* Rev11 (slot-level, not per member): on the 2×2 mobile layout the front-right plate
     began at the gap between the two front figures; start it further into its own
     figure so it can only be read as that member's name. It sits on the surf line. */
  .s55-member[data-slot="front-right"][data-row="front"] .s55-name{left:12%}
  .s55-art img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
  .s55-hero::before{background:radial-gradient(70% 45% at 50% 62%,rgba(214,170,92,.09),rgba(214,170,92,0) 70%)}
  .s55-members-link{font-size:14px;letter-spacing:.1em}
}
@media (max-width:360px){
  .s55-lede{padding-inline:16px}
  .s55-description{font-size:12px;letter-spacing:0}
  .s55-name{font-size:13px}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .s55-hero *,.s55-hero::before,body.s55 .s13-header,body.s55 .s13-header *,body.s55 .s13-header::before,body.s55 .s55-studio *{animation:none!important;transition:none!important}
  .s55-swell{display:none}
}
/* QA / user toggle: body.reduce-motion covers every Study55 motion, including the
   scroll-linked ebb and STUDIO spread (their timelines are removed with the animation). */
body.reduce-motion .s55-hero *,body.reduce-motion .s55-hero::before,body.reduce-motion.s55 .s13-header,body.reduce-motion.s55 .s13-header *,body.reduce-motion.s55 .s13-header::before,body.reduce-motion .s55-studio *{animation:none!important;transition:none!important}
body.reduce-motion .s55-swell{display:none}
/* Keep the secondary news stories together; the lead story must not stretch their first row. */
@media (min-width:601px) {
  .s55.study48 .edition-news .edition-news-grid { grid-template-rows:max-content 1fr; }
  .s55.study48 .edition-news .edition-news-item:nth-child(3) { padding-top:0; }
}