/* ============================================================
   Patient stories hub (stories.html)
   Every filmed patient on one page, grouped by the kind of case.
   A navy hero carries a three-stop route; a slim bar takes over
   once the hero has gone and marks where you are. Every card is
   one click target: anywhere on it plays the film.
   The hero and the first row of films arrive in CSS alone; what is
   further down starts hidden only once stories-hub.js is running.
   Fonts come from the site's tokens; the edge middleware's font-preview.css and .js map them
   to Ivy Presto and Geist.
   ============================================================ */

.sh {
  --sh-ease: cubic-bezier(.16, 1, .3, 1);
  --sh-gutter: clamp(20px, 5vw, 56px);
  --sh-top: 96px;                 /* nav + rail; the page JS keeps it measured, on this element */
  --sh-ground: #07162c;           /* the homepage hero's deepest navy */
  background: var(--white);
}
.sh-main { color: var(--ink); font-size: 17px; line-height: 1.6; overflow-x: clip; }

/* site.css caps every bare <p> at 42rem and underlines links with a border.
   Text here fills whatever holds it; links draw their own hover states. */
.sh-main p, .sh-main h1, .sh-main h2, .sh-main h3 { max-width: none; text-wrap: pretty; }
.sh-main a:not(.btn):not(.sh-doc) { border-bottom: 0; }

.sh-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--sh-gutter); }
.sh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sh-main svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============ NAV over the navy hero (the homepage pattern) ============ */
/* site.css reserves 81px for the nav's slot; here the nav is fixed over the hero, so the slot
   reserves nothing (the same opt-out celva-home, celva-experience and hub-joint-pain carry). */
.sh [data-global-header] { min-height: 0; }
.sh > .nav { position: fixed; top: 0; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-bottom: 1px solid transparent; transition: background .4s var(--sh-ease), border-color .4s var(--sh-ease), box-shadow .4s var(--sh-ease), padding 280ms var(--sh-ease); }
.sh > .nav.is-stuck { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--border); }
.sh > .nav:not(.is-stuck) .nav__logo img { filter: brightness(0) invert(1); }
.sh > .nav:not(.is-stuck) .nav__menu > a,
.sh > .nav:not(.is-stuck) .nav__menu .nav__item-trigger { color: #fff; }
.sh > .nav:not(.is-stuck) .nav__menu a::after { background: #fff; }
.sh > .nav:not(.is-stuck) .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.sh > .nav:not(.is-stuck) .btn--primary:hover { background: var(--accent-wash); color: var(--ink); }
.sh > .nav:not(.is-stuck) .nav__burger { background: #fff; border-color: #fff; }
.sh.nav-open > .nav:not(.is-stuck) .nav__logo img { filter: none; }
.sh.nav-open > .nav:not(.is-stuck) .nav__burger { background: transparent; border-color: var(--border-strong); }
.sh.nav-open > .nav:not(.is-stuck) .btn--primary { background: var(--accent-blue); color: #fff; }

/* ============ HERO ============ */
/* Compact on purpose: the films are what people come for, so the band says
   one line, offers the three stops, and gets out of the way. */
.sh-hero { position: relative; overflow: hidden; background: var(--sh-ground); color: #fff; padding: clamp(112px, 9vw, 128px) 0 clamp(36px, 3.5vw, 48px); }
.sh-hero__ground { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(6, 18, 38, .96) 0%, rgba(7, 21, 43, .88) 45%, rgba(9, 26, 52, .62) 75%, rgba(9, 26, 52, .78) 100%); }
.sh-hero__grain { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(rgba(255, 255, 255, .7) .5px, transparent .5px); background-size: 3px 3px; }
.sh-hero .sh-wrap { position: relative; }
.sh-hero__h1 {
  font-family: var(--font-display); font-weight: 300; color: #fff;
  font-size: clamp(2.1rem, 3.3vw, 3.3rem); line-height: 1.06; letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.sh-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sh-line > span { display: inline-block; }
.sh-hero__sub { font-family: var(--font-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .78); margin: 0; }

/* ---- the route: three kinds of case, joined node to node ---- */
.sh-route { margin-top: clamp(24px, 2.6vw, 34px); }
.sh-route ol { --node: 48px; --gap: 16px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.sh-route li { position: relative; display: flex; align-items: center; }
.sh-route li:nth-child(2) { --i: 1; }
.sh-route li:nth-child(3) { --i: 2; }
/* One connector per gap, from the end of this stop's words to the next stop. */
.sh-route li:not(:last-child)::after {
  content: ""; flex: 1 1 auto; min-width: 24px; height: 2px; margin: 0 calc(-1 * var(--gap) + 14px) 0 14px; border-radius: 2px;
  background: rgba(124, 169, 209, .35); transform-origin: left center;
}
.sh-route a { display: flex; flex-direction: row; align-items: center; gap: 14px; flex: none; color: #fff; text-decoration: none; outline-offset: 6px; border-radius: 999px; padding-right: 4px; }
.sh-route__node {
  position: relative; z-index: 1; flex: none;
  width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(124, 169, 209, .55); color: var(--accent-ice); background: rgba(7, 22, 44, .6);
  transition: transform .45s var(--sh-ease), background .3s, border-color .3s, color .3s, box-shadow .45s var(--sh-ease);
}
.sh-route__node svg { width: 24px; height: 24px; }
/* a column, so the label keeps its own line height and the phone's min-height below */
.sh-route__txt { display: flex; flex-direction: column; }
.sh-route__label { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.25; transition: color .25s; white-space: nowrap; }
.sh-route a:hover .sh-route__node, .sh-route a:focus-visible .sh-route__node {
  transform: translateY(-4px); background: var(--accent-ice); border-color: var(--accent-ice); color: var(--ink);
  box-shadow: 0 14px 30px rgba(124, 169, 209, .28);
}
.sh-route a:hover .sh-route__label { color: var(--accent-ice); }

/* ============ THE BAR (follows the reader once the hero has gone) ============ */
.sh-rail {
  /* over the page, under the phone menu's backdrop (50) and sheet (55) */
  position: fixed; left: 0; right: 0; top: var(--sh-nav, 64px); z-index: 49;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-110%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--sh-ease), opacity .3s, visibility 0s linear .5s;
}
.sh-rail.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--sh-ease), opacity .3s, visibility 0s; }
.sh.nav-open .sh-rail { opacity: 0; visibility: hidden; }
.sh-rail ol {
  list-style: none; margin: 0 auto; padding: 0 var(--sh-gutter); max-width: 1240px; display: flex; gap: clamp(8px, 3vw, 40px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.sh-rail ol::-webkit-scrollbar { display: none; }
.sh-rail li { flex: none; }
.sh-rail a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 2px 13px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.sh-rail a svg { width: 20px; height: 20px; flex: none; transition: transform .45s var(--sh-ease); }
.sh-rail a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-blue); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--sh-ease); }
.sh-rail a:hover { color: var(--ink); }
.sh-rail a:hover svg { transform: translateY(-2px); }
.sh-rail a:hover::after { transform: scaleX(.3); }
.sh-rail a.is-current { color: var(--accent-blue); }
.sh-rail a.is-current::after { transform: scaleX(1); }
.sh-rail a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -3px; border-radius: 4px; }
.sh-rail__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: rgba(45, 110, 177, .18); transform-origin: left center; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ============ SECTIONS ============ */
.sh-sec { padding: clamp(64px, 8vw, 104px) 0 clamp(24px, 3vw, 40px); scroll-margin-top: var(--sh-top); }
/* the page JS focuses a part's heading only after a jump to it, so it draws no ring */
.sh-sec:focus, .sh-main h2[tabindex="-1"]:focus { outline: none; }
/* the first section sits close under the compact hero */
/* the rail sits between them in the markup */
.sh-hero + .sh-rail + .sh-sec { padding-top: clamp(36px, 4vw, 56px); }
.sh-sec + .sh-sec { border-top: 1px solid var(--border); padding-top: clamp(56px, 7vw, 88px); }
.sh-sec__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
.sh-sec__icon { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-blue); }
.sh-sec__icon svg { width: 30px; height: 30px; }
.sh-sec__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 6px; }
.sh-sec__head p { grid-column: 2; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* ============ CARDS ============ */
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
/* cards stagger along their row */
.sh-grid > :nth-child(3n + 2) { --i: 1; }
.sh-grid > :nth-child(3n) { --i: 2; }
.sh-card {
  position: relative; display: grid;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 29, 58, .04);
  transition: transform .5s var(--sh-ease), box-shadow .5s var(--sh-ease), border-color .3s;
}
/* Hover motion only where there is a pointer: a transform under a finger drops the tap on iOS. */
@media (hover: hover) and (pointer: fine) {
  .sh-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 24px 48px rgba(11, 29, 58, .16); border-color: rgba(45, 110, 177, .28); }
  .sh-card:hover .sh-tile__play { transform: scale(1.12); background: #fff; }
}
/* focus lands on the tile, so the tile is what has to clear the nav and the rail */
.sh-tile, .sh-doc, .sh-docs__all { scroll-margin-top: var(--sh-top); scroll-margin-bottom: 24px; }
.sh-card:active .sh-tile__play { background: #fff; }
/* The focus ring sits on the tile itself (works without :has), in the accent blue: 5.3:1 on white. */
.sh-tile:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: -3px; }
.sh-card:has(.sh-tile:focus-visible) { box-shadow: 0 0 0 3px var(--accent-blue), 0 24px 48px rgba(11, 29, 58, .16); }

.sh-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 0;
  overflow: hidden; cursor: pointer; background: var(--navy-brand); text-align: left;
}
/* The still and the loop overhang the frame by 2%, so neither can show an edge of it. */
.sh-tile__still, .sh-tile__loop { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; }
.sh-tile__loop { opacity: 0; transition: opacity .35s; pointer-events: none; }
.sh-tile.is-playing .sh-tile__loop { opacity: 1; }
.sh-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 22, 44, 0) 45%, rgba(7, 22, 44, .82) 100%); }
.sh-tile__play {
  /* a tile can move its play button off a face: --play-x / --play-y on the tile */
  position: absolute; left: var(--play-x, 50%); top: var(--play-y, 46%); width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94);
  transition: transform .45s var(--sh-ease), background .3s;
}
.sh-tile__play svg { width: 22px; height: 22px; fill: var(--ink); stroke: none; margin-left: 3px; }
.sh-tile__play::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); opacity: 0; }
.sh-card.is-in .sh-tile__play::after { animation: shRing 1.6s var(--sh-ease) .5s 1; }
.sh-tile__dur { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 4px; background: rgba(7, 22, 44, .62); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-tile__id { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.sh-tile__name { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.1; }
.sh-tile__who { font-family: var(--font-body); font-size: 13.5px; color: rgba(255, 255, 255, .9); }

/* In the grid, cards in a row share their rows (subgrid) and the body dissolves
   into them (title, details, quote), so across a row every title, every list
   and every quote starts on the same line however long its neighbours run.
   Only here: a wide card sits outside any grid and has no rows to share. */
.sh-grid .sh-card { grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.sh-grid .sh-card__body { display: contents; }
.sh-grid .sh-card__h { padding: 20px 22px 0; }
.sh-grid .sh-card__dl { margin: 14px 22px 0; align-self: start; }
.sh-grid .sh-card__q { margin: 14px 22px 24px; }
.sh-card__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-card__h { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--ink); margin: 0; }
/* Each detail is a bold label with its value right under it, so a short
   value and a long one take the same shape and no column sits half empty. */
.sh-card__dl { margin: 0; }
.sh-card__dl > div { padding: 11px 0 12px; border-top: 1px solid var(--border); }
.sh-card__dl dt { font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.sh-card__dl dd { margin: 3px 0 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.sh-card__q { position: relative; margin: 0; padding: 14px 0 0 30px; border-top: 1px solid var(--border); align-self: start; }
.sh-card__q::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 16px;
  background: var(--accent-ice);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 16V9.6C0 4.4 2.7 1.2 8 0l.9 1.9C6 2.9 4.6 4.8 4.4 7.6H8V16H0Zm11.6 0V9.6c0-5.2 2.7-8.4 8-9.6l.9 1.9c-2.9 1-4.3 2.9-4.5 5.7h3.6V16h-8Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 16V9.6C0 4.4 2.7 1.2 8 0l.9 1.9C6 2.9 4.6 4.8 4.4 7.6H8V16H0Zm11.6 0V9.6c0-5.2 2.7-8.4 8-9.6l.9 1.9c-2.9 1-4.3 2.9-4.5 5.7h3.6V16h-8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sh-card__q p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--ink); }
/* a quote that needs small print under it: the two share the quote's row, set under the quote's words */
.sh-card__said { align-self: start; }
.sh-card__fine { margin: 10px 0 0 30px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.sh-grid .sh-card__said .sh-card__q { margin-bottom: 0; }
.sh-grid .sh-card__fine { margin: 12px 22px 24px 52px; }

/* A long title or value breaks at its dots, never inside a phrase. */
.sh-seg { display: inline-block; }
/* the details are running text, so they wrap like it */
.sh-card__dl .sh-seg { display: inline; }
.sh-dot { color: var(--ink-muted); }
/* a comma only a screen reader hears, so the phrases either side of a dot stay apart */
.sh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- one patient in a section: a wide card, film on one side ---- */
.sh-card--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.sh-card--wide .sh-tile__name { font-size: 32px; }
.sh-card--wide .sh-tile__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.sh-card--wide .sh-card__body { padding: clamp(24px, 3vw, 40px); justify-content: center; }
.sh-card--wide .sh-card__h { font-size: 26px; }
.sh-card--wide .sh-card__q { margin-top: 10px; }
.sh-card--wide .sh-card__q p { font-size: 22px; }
.sh-card--wide .sh-tile { align-self: center; }
.sh-sec--flip .sh-card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.sh-sec--flip .sh-card--wide .sh-tile { order: 2; }

/* ============ THE PHYSICIANS: one row of people, each a link to their bios ============ */
.sh-docs { padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--border); scroll-margin-top: var(--sh-top); }
.sh-docs__list li:nth-child(2) { --i: 1; }
.sh-docs__list li:nth-child(3) { --i: 2; }
.sh-docs__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 36px); }
.sh-docs__head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 2.9vw, 2.75rem); line-height: 1.1; color: var(--ink); margin: 0; }
.sh-docs__all {
  font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--accent-blue); text-decoration: none; padding: 10px 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .45s var(--sh-ease), color .2s;
}
.sh-docs__all span { display: inline-block; transition: transform .35s var(--sh-ease); }
.sh-docs__all:hover { background-size: 100% 1px; color: var(--accent-blue-hover); }
.sh-docs__all:hover span { transform: translateX(5px); }
.sh-docs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.sh-doc {
  display: flex; align-items: center; gap: 18px; padding: 14px 16px 14px 14px; border-radius: 14px;
  border: 1px solid var(--border); color: var(--ink); text-decoration: none; height: 100%;
  transition: border-color .3s, box-shadow .45s var(--sh-ease), translate .45s var(--sh-ease);
}
.sh-doc__ph { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; max-width: none; background: var(--accent-wash); }
.sh-doc__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-doc__name { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.sh-doc__role { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
/* in the row of three, every role holds two lines so the names line up */
@media (min-width: 1240px) { .sh-doc__role { min-height: 2.9em; } }
.sh-doc:hover, .sh-doc:focus-visible { border-color: rgba(45, 110, 177, .35); box-shadow: 0 14px 30px rgba(11, 29, 58, .1); translate: 0 -3px; }
.sh-doc:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.sh-doc:hover .sh-doc__name { color: var(--accent-blue); }
.sh-js .sh-docs .sh-docs__head, .sh-js .sh-docs .sh-doc { opacity: 0; }
.sh-js .sh-docs.is-in .sh-docs__head { animation: shUp .7s var(--sh-ease) both; }
.sh-js .sh-docs.is-in .sh-doc { animation: shFromRight .7s var(--sh-ease) both; animation-delay: calc(.12s + var(--i, 0) * .1s); }

/* ============ CLOSE (navy band, narrow and centred on purpose) ============ */
.sh-close { position: relative; overflow: hidden; background: var(--navy-brand); color: #fff; text-align: center; padding: clamp(88px, 11vw, 148px) var(--sh-gutter); }
.sh-close__in { position: relative; max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.sh-close h2 { font-family: var(--font-display); font-weight: 300; color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; margin: 0; }
.sh-close .sh-close__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: 26px 0 0; font-size: 15px; font-weight: 400; line-height: 1.4; }
.sh-close__more span { color: rgba(255, 255, 255, .62); }
.sh-close__more a { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 12px 2px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size .45s var(--sh-ease), color .2s; }
.sh-close__more a:hover { color: #fff; background-size: 100% 1px; }
.sh-close__more a:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 2px; border-radius: 2px; }
.sh-close p { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.7; margin: 22px 0 38px; font-weight: 300; }

/* ============ PLAYER ============ */
.sh-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.sh-modal[hidden] { display: none; }
.sh-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 18, 38, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: shFade .3s ease both; }
/* never taller than the screen: on a landscape phone the width follows the height */
.sh-modal__box { position: relative; width: min(980px, 100%, calc((100dvh - 190px) * 16 / 9)); margin-top: 48px; animation: shModal .45s var(--sh-ease) both; }
.sh-modal.is-leaving .sh-modal__backdrop { animation: shFade .22s ease reverse both; }
.sh-modal.is-leaving .sh-modal__box { animation: shModal .22s ease reverse both; }
/* the player names who you are watching, and steps to the next film without closing */
.sh-modal__cap { margin: 0 56px 14px 0; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .9); white-space: pre-wrap; }
.sh-modal__stage { position: relative; }
.sh-modal__step {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(7, 22, 44, .55); color: #fff; cursor: pointer;
  transition: background .25s, border-color .25s, transform .35s var(--sh-ease);
}
.sh-modal__step svg { width: 22px; height: 22px; stroke-width: 1.8; }
.sh-modal__step--prev { left: -68px; }
.sh-modal__step--next { right: -68px; }
.sh-modal__step:hover, .sh-modal__step:focus-visible { background: rgba(124, 169, 209, .3); border-color: var(--accent-ice); }
.sh-modal__step--prev:hover { transform: translateX(-3px); }
.sh-modal__step--next:hover { transform: translateX(3px); }
.sh-modal.is-stepping .sh-modal__frame { animation: shFade .4s ease both; }
.sh-modal.is-stepping .sh-modal__cap { animation: shUp .4s var(--sh-ease) both; }

/* a film already watched in this browser carries a quiet tick */
.sh-tile__seen {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(-4px);
  transition: opacity .35s, transform .45s var(--sh-ease);
}
.sh-tile__seen svg { width: 13px; height: 13px; stroke: var(--accent-blue); stroke-width: 2; }
.sh-card.is-watched .sh-tile__seen { opacity: 1; transform: none; }
/* the first time a film is watched, its tick draws itself */
.sh-tile__seen svg path { stroke-dasharray: 1; }
.sh-card.is-just-watched .sh-tile__seen svg path { animation: shDraw .6s var(--sh-ease) .25s both; }
/* back from the player on a different film than the one you opened: that card says so, once */
.sh-card.is-back::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; animation: shBack 1.6s ease-out 1 both; }
.sh-modal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.sh-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sh-modal__close { position: absolute; right: -6px; top: -50px; width: 44px; height: 44px; background: transparent; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; border-radius: 50%; transition: background .2s, transform .3s var(--sh-ease); }
.sh-modal__close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }
.sh-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, .62); }
.sh-modal__cta { display: inline-block; color: #fff; font-weight: 500; text-decoration: none; padding: 12px 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--sh-ease), color .2s; }
.sh-modal__cta:hover { color: var(--accent-ice); background-size: 100% 1px; }

/* ============ MOTION ============
   Hidden only with opacity and transform, so a box never collapses and an
   observer can always see it. Entrances hide things only under .sh-js, which
   stories-hub.js sets as its first act, and it adds .sh-ready once it has
   started; if it throws in between, the fallback below shows everything after 3s. */
@keyframes shRise { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes shFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Entrances animate `translate` and `scale`, never `transform`: a finished entrance holds its last
   frame, and a held `transform: none` would cancel every hover lift and the magnet CTA. */
@keyframes shPop { 0% { opacity: 0; scale: .6; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
@keyframes shDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes shRedraw { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes shRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shRing { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes shCard { from { opacity: 0; translate: 0 34px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes shFromLeft { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes shFromRight { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes shModal { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shBack { 0%, 35% { box-shadow: inset 0 0 0 3px rgba(45, 110, 177, .75); } 100% { box-shadow: inset 0 0 0 3px rgba(45, 110, 177, 0); } }

.sh-main svg use { stroke-dasharray: 1; }

/* hero boot: the line rises, then the sub, then the three stops pop and their drawings draw.
   CSS alone, so it plays the same with scripts off and nothing waits for one to load. */
.sh-hero__h1 .sh-line > span { animation: shRise 1s var(--sh-ease) .15s both; }
.sh-hero__sub { animation: shUp .8s var(--sh-ease) .45s both; }
.sh-route__node { animation: shPop .7s var(--sh-ease) both; animation-delay: calc(.7s + var(--i, 0) * .14s); }
.sh-route__node use { animation: shDraw 1.1s var(--sh-ease) both; animation-delay: calc(.85s + var(--i, 0) * .14s); }
/* On hover the redraw is ADDED to the boot draw rather than replacing it: a name that stays in
   the list is not restarted, so leaving the icon never replays the draw-in from blank. */
.sh-route a:hover .sh-route__node use {
  animation: shDraw 1.1s var(--sh-ease) calc(.85s + var(--i, 0) * .14s) both, shRedraw .9s var(--sh-ease);
}
.sh-route__txt { animation: shUp .6s var(--sh-ease) both; animation-delay: calc(.8s + var(--i, 0) * .14s); }
.sh-route li:not(:last-child)::after { animation: shRule .6s var(--sh-ease) both; animation-delay: calc(1s + var(--i, 0) * .14s); }

/* The first part sits on the first screen, so it follows the hero in the same breath, in CSS
   alone: its head, then the first row of films. Nothing here waits for the script, so nothing
   that was already painted is ever hidden again. */
.sh-rail + .sh-sec .sh-sec__icon { animation: shPop .6s var(--sh-ease) .9s both; }
.sh-rail + .sh-sec .sh-sec__head h2 { animation: shUp .7s var(--sh-ease) .98s both; }
.sh-rail + .sh-sec .sh-sec__head p { animation: shUp .7s var(--sh-ease) 1.08s both; }
.sh-rail + .sh-sec .sh-grid .sh-card:nth-child(-n + 3) { animation: shCard .8s var(--sh-ease) both; animation-delay: calc(1.1s + var(--i, 0) * 90ms); }

/* section heads further down: the drawing pops, the heading slides up */
.sh-js .sh-sec ~ .sh-sec .sh-sec__head > * { opacity: 0; }
.sh-js .sh-sec ~ .sh-sec.is-in .sh-sec__icon { animation: shPop .6s var(--sh-ease) both; }

/* ---- the three section drawings, each moving the way its subject does, for as long as it is
   on screen: stories-hub.js adds .is-live while a drawing is in view and takes it off after ---- */
.sh-anim * { transform-box: fill-box; transform-origin: center; }

/* spine: the vertebrae close in on their discs and spring back */
.sh-anim--spine.is-live .sh-vt--1 { animation: shVt1 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.sh-anim--spine.is-live .sh-vt--3 { animation: shVt3 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.sh-anim--spine .sh-dc--1 { transform-origin: center bottom; }
.sh-anim--spine.is-live .sh-dc--1 { animation: shDisc 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.sh-anim--spine .sh-dc--2 { transform-origin: center top; }
.sh-anim--spine.is-live .sh-dc--2 { animation: shDisc 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.sh-anim--spine.is-live .sh-dc--3 { animation: shVt3 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes shVt1 { 0%, 18%, 100% { transform: none; } 45%, 58% { transform: translateY(1.6px); } }
@keyframes shVt3 { 0%, 18%, 100% { transform: none; } 45%, 58% { transform: translateY(-1.6px); } }
@keyframes shDisc { 0%, 18%, 100% { transform: none; } 45%, 58% { transform: scaleY(.45); } }

/* IV: a drop forms at the top of the bag, falls, and rings the surface */
.sh-anim--iv .sh-drop { fill: currentColor; stroke: none; transform-origin: center top; }
.sh-anim--iv.is-live .sh-drop { animation: shDrop 2.2s cubic-bezier(.55, 0, .9, .45) infinite; }
.sh-anim--iv .sh-ripple { stroke-width: 1.2; }
.sh-anim--iv.is-live .sh-ripple { animation: shRipple 2.2s ease-out infinite; }
@keyframes shDrop { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1); } 34% { transform: translateY(0); } 62% { opacity: 1; transform: translateY(3.6px) scaleY(1.15); } 66%, 100% { opacity: 0; transform: translateY(3.8px) scale(.6); } }
@keyframes shRipple { 0%, 60% { opacity: 0; transform: scaleX(.3); } 68% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.25); } }

/* heart: lub-dub, and the trace runs through it on the beat */
.sh-anim--heart.is-live .sh-heart { animation: shBeat 1.6s ease-in-out infinite; }
.sh-anim--heart .sh-ecg-base { opacity: .3; }
.sh-anim--heart .sh-ecg { stroke-dasharray: .34 1; stroke-width: 1.8; }
.sh-anim--heart.is-live .sh-ecg { animation: shTrace 1.6s cubic-bezier(.3, 0, .6, 1) infinite; }
@keyframes shBeat { 0%, 40%, 100% { transform: none; } 12% { transform: scale(1.1); } 22% { transform: scale(.98); } 30% { transform: scale(1.06); } }
@keyframes shTrace { 0% { stroke-dashoffset: .34; } 70%, 100% { stroke-dashoffset: -1; } }
.sh-js .sh-sec ~ .sh-sec.is-in .sh-sec__head h2 { animation: shUp .7s var(--sh-ease) .08s both; }
.sh-js .sh-sec ~ .sh-sec.is-in .sh-sec__head p { animation: shUp .7s var(--sh-ease) .18s both; }

/* the grid's later cards rise in reading order; a wide card comes in from its film's side */
.sh-js .sh-grid .sh-card:nth-child(n + 4) { opacity: 0; }
.sh-js .sh-grid .sh-card:nth-child(n + 4).is-in { animation: shCard .8s var(--sh-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.sh-js .sh-card--wide { opacity: 0; }
.sh-js .sh-card--wide.is-in { animation: shFromLeft .9s var(--sh-ease) both; }
.sh-js .sh-sec--flip .sh-card--wide.is-in { animation-name: shFromRight; }

/* close: the heading rises out of its line */
.sh-js .sh-close h2, .sh-js .sh-close p, .sh-js .sh-close .btn { opacity: 0; }
.sh-js .sh-close.is-in h2 { animation: shUp .8s var(--sh-ease) both; }
.sh-js .sh-close.is-in p { animation: shUp .8s var(--sh-ease) .12s both; }
.sh-js .sh-close.is-in .btn { animation: shPop .7s var(--sh-ease) .26s both; }

/* if stories-hub.js set .sh-js and then threw before it started, show everything after 3s (opacity only: a held transform would cancel the hover lifts) */
@keyframes shReveal { to { opacity: 1; } }
.sh-js:not(.sh-ready) :is(.sh-sec ~ .sh-sec .sh-sec__head > *, .sh-grid .sh-card:nth-child(n + 4), .sh-card--wide, .sh-close h2, .sh-close p, .sh-close .btn, .sh-docs .sh-docs__head, .sh-docs .sh-doc) {
  animation: shReveal .6s ease 3s forwards;
}
/* the safety net: anything the JS gave up on is shown */
.sh-js .is-shown, .sh-js .is-shown .sh-sec__head > *, .sh-js .is-shown .sh-close__in > *, .sh-js .is-shown .sh-docs__head, .sh-js .is-shown .sh-doc { opacity: 1 !important; animation: none !important; }

/* ============ SMALLER SCREENS ============ */
/* between a laptop and a phone the three physicians stay side by side, each portrait over its name */
@media (max-width: 1239px) {
  .sh-doc { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
}
@media (max-width: 899px) {
  /* the bar's track can run wider than the screen here: it scrolls, and fades at the edge it runs under */
  .sh-rail ol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 36px), transparent); padding-right: 36px; }
}
@media (max-width: 760px) {
  .sh-docs__list { grid-template-columns: minmax(0, 1fr); }
  .sh-doc { flex-direction: row; align-items: center; gap: 18px; padding: 14px 16px 14px 14px; }
}
@media (max-width: 1100px) {
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the arrows sit outside the film only while there is room for them there */
@media (max-width: 1119px) {
  .sh-modal__step--prev { left: 8px; }
  .sh-modal__step--next { right: 8px; }
}
@media (max-width: 860px) {
  .sh-route ol { --node: 44px; --gap: 10px; }
  .sh-route li { flex-direction: column; align-items: flex-start; }
  .sh-route li:not(:last-child)::after { display: none; }
  .sh-route a { flex-direction: column; align-items: flex-start; gap: 10px; border-radius: 12px; }
  .sh-route__label { font-size: 14px; white-space: normal; }
  .sh-card--wide, .sh-sec--flip .sh-card--wide { grid-template-columns: minmax(0, 1fr); }
  .sh-sec--flip .sh-card--wide .sh-tile { order: 0; }
  .sh-card--wide .sh-card__q p { font-size: 19px; }
}
@media (max-width: 640px) {
  .sh-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sh-hero { padding: 96px 0 30px; }
  .sh-route ol { --node: 40px; }
  .sh-route__node svg { width: 20px; height: 20px; }
  .sh-route { margin-top: 20px; }
  .sh-route__label { min-height: 2.5em; }
  .sh-sec__head { column-gap: 16px; }
  .sh-sec__icon { width: 48px; height: 48px; }
  .sh-sec__icon svg { width: 24px; height: 24px; }
  .sh-rail a { min-width: 44px; min-height: 44px; justify-content: center; }
  /* on a phone only the part being read shows its words; the others keep them for a screen reader */
  .sh-rail a:not(.is-current) span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sh-modal { padding: 12px; }
  .sh-modal__close { top: -48px; right: 0; }
  .sh-modal__step { top: auto; bottom: -64px; margin-top: 0; }
  .sh-modal__step--prev { left: 0; }
  .sh-modal__step--next { right: 0; }
  .sh-modal__foot { margin-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-main *, .sh-main *::before, .sh-main *::after { animation: none !important; transition: none !important; }
  .sh-js .sh-main [data-sh-sec] .sh-sec__head > *, .sh-js .sh-main .sh-grid .sh-card, .sh-js .sh-card--wide,
  .sh-js .sh-close h2, .sh-js .sh-close p, .sh-js .sh-close .btn, .sh-js .sh-docs .sh-docs__head, .sh-js .sh-docs .sh-doc { opacity: 1; }
  .sh-doc:hover, .sh-doc:focus-visible { translate: none; }
  .sh-main svg use, .sh-anim--heart .sh-ecg, .sh-tile__seen svg path { stroke-dasharray: none; }
  .sh-anim--iv .sh-drop, .sh-anim--iv .sh-ripple { opacity: 0; }
  .sh-card:hover { transform: none; }
}

/* ============ PAPER ============
   The finished page, straight after load: every entrance at its end state, the films as their
   stills with the name in dark type under each, navy bands white, the bar and the player gone. */
@media print {
  .sh-main *, .sh-main *::before, .sh-main *::after { animation: none !important; transition: none !important; }
  .sh-js .sh-main [data-sh-sec] .sh-sec__head > *, .sh-js .sh-main .sh-grid .sh-card, .sh-js .sh-card--wide,
  .sh-js .sh-close h2, .sh-js .sh-close p, .sh-js .sh-close .btn, .sh-js .sh-docs .sh-docs__head, .sh-js .sh-docs .sh-doc { opacity: 1 !important; }
  .sh-main svg use, .sh-anim--heart .sh-ecg { stroke-dasharray: none; }
  .sh-anim--iv .sh-drop, .sh-anim--iv .sh-ripple { opacity: 0; }
  .sh-rail, .sh-modal, .sh-tile__loop, .sh-tile__play, .sh-tile__scrim, .sh-tile__seen, .sh-hero__ground { display: none !important; }
  .sh > .nav { position: static; background: #fff; transition: none; }
  .sh > .nav:not(.is-stuck) .nav__logo img { filter: none; }
  .sh-hero, .sh-close { background: #fff; color: var(--ink); padding-top: 24px; padding-bottom: 24px; }
  .sh-hero__h1, .sh-hero__sub, .sh-route a, .sh-close h2, .sh-close p, .sh-close__more a { color: var(--ink); }
  .sh-route__node { background: none; border-color: var(--ink-muted); color: var(--ink); }
  .sh-route li:not(:last-child)::after { background: var(--border); }
  .sh-sec, .sh-docs { padding-top: 28px; padding-bottom: 12px; }
  .sh-card, .sh-doc { break-inside: avoid; box-shadow: none; }
  /* the name and the running time sit on the photograph on screen; on paper they go under it, dark */
  .sh-tile { aspect-ratio: auto; background: none; overflow: visible; }
  .sh-tile__still { position: static; inset: auto; width: 100%; height: auto; }
  .sh-tile__id { position: static; color: var(--ink); padding: 12px 22px 0; }
  .sh-tile__who { color: var(--ink-soft); }
  .sh-tile__dur { position: static; display: inline-block; margin: 6px 22px 0; padding: 0; background: none; color: var(--ink-muted); }
}