/* The shared project shell: reading rhythm, film hero, chapter bars, native galleries and the image dialog.
   Loaded on the seven study pages and on LumaNorm. Rules for the hero and the page ground are scoped to
   .project-experience-page; chapter bars, galleries and the dialog serve LumaNorm too, which sets the same
   --experience-* colours in lumanorm-experience.css. */
.project-experience-page {
  --experience-accent: #d8b98b;
  --experience-paper: #f1eee6;
  --experience-muted: #a6b3b8;
  --experience-line: #ffffff20;
  --experience-header-height: 64px;
  --experience-chapter-height: 58px;
  --experience-sticky-top: calc(var(--experience-header-height) + var(--experience-chapter-height));
  --focus-ring-color: var(--experience-accent);
  background: var(--experience-background, #080e12);
  color: var(--experience-paper);
}
body.theme-meridian.project-experience-page { --experience-background: #070b13; }
body.theme-workmetric.project-experience-page { --experience-background: #0b0e0c; }
body.theme-telespell.project-experience-page { --experience-background: #071614; }
body.theme-prismpulse.project-experience-page { --experience-background: #0d0b14; }
body.theme-stomavision.project-experience-page { --experience-background: #0c1410; }
body.theme-lumenspatial.project-experience-page { --experience-background: #07120f; }
body.project-experience-page main { overflow: visible; background: var(--experience-background); }
.project-experience-page main > div { overflow: visible; }
.project-experience-page :is(section, [id]) { scroll-margin-top: calc(var(--experience-sticky-top) + 24px); }
body.project-experience-page :is(#meridian-atlas, #tele-spell, #pp-study, #stoma-study, #lumenspatial-field) { scroll-margin-top: var(--experience-sticky-top); }
/* Honesty disclosures (illustrative, example and relative-value notes) read at the caption tier and never below the
   text floor. A study whose ground gives its muted ink less than 4.5:1 sets --study-disclosure-ink. The type tier is
   anchored on :root so it outranks the themes' older `.theme-x main p` sizes in main.css on every page, while a
   study's own measure and ink (one class) still apply; only a deliberate component rule, such as StomaVision's
   compact phone legend, sets its own size. */
.study-disclosure { max-width: 60ch; color: var(--study-disclosure-ink, var(--experience-muted)); }
:root .study-disclosure { font-family: var(--font-text); font-size: max(var(--text-floor), var(--text-caption)); font-weight: 400; line-height: var(--leading-caption); letter-spacing: normal; text-transform: none; }

/* Film hero */
.project-experience-page .project-cinematic-hero {
  min-height: min(900px, calc(100svh - var(--experience-header-height)));
  padding: clamp(5rem, 9vh, 7rem) 0 6rem;
  /* The film's own dark ground, also under the phone labels (a study's page ground can be paper, as on MISE). */
  --hero-ground: #060c10;
  display: flex; align-items: end; background: var(--hero-ground);
}
.project-experience-page .project-cinematic-hero__layout { min-height: 0; grid-template-columns: minmax(0, 1fr); }
.project-experience-page .project-cinematic-hero__copy { max-width: 55rem; opacity: 1; transform: none; }
.project-experience-page .project-cinematic-hero__video { filter: none; transform: none; opacity: 1; }
.project-experience-page .project-cinematic-hero__media::before { transform: none; opacity: 1; }
.project-experience-page .project-cinematic-hero.is-cinematic-ready .project-cinematic-hero__media::before { opacity: 0; }
.project-experience-page .project-cinematic-hero__ornaments { display: none; }
.project-experience-page .project-cinematic-hero__scrim { background: linear-gradient(90deg, #040a10c9, #040a1040 75%), linear-gradient(0deg, var(--experience-background) 0%, #080e1277 25%, #080e1200 80%); }
.project-experience-page .project-cinematic-hero__edge { background: linear-gradient(0deg, var(--experience-background), transparent); height: 110px; top: auto; }
/* The eyebrow keeps its words and gains a 44px hit area without moving the copy below it. */
.project-experience-page .project-cinematic-hero__eyebrow {
  align-items: center; min-height: 44px; margin-block: -12px calc(1.5rem - 12px);
  position: relative; color: #d8dcd8; font-size: var(--text-label); font-weight: 500; letter-spacing: .02em; text-decoration: none;
  transition: color var(--motion-quick) var(--ease-standard);
}
/* The link grammar's hairline, drawn in from the left under the word (a pseudo-element, so the phone halo never
   shadows an invisible underline). */
.project-experience-page .project-cinematic-hero__eyebrow::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% + .85em); height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-medium) var(--ease-standard);
}
.project-experience-page .project-cinematic-hero__eyebrow:is(:hover, :focus-visible) { color: var(--experience-paper); }
.project-experience-page .project-cinematic-hero__eyebrow:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.project-experience-page .project-cinematic-hero__eyebrow:active { opacity: .72; }
.project-experience-page .project-cinematic-hero__brand { gap: .85rem; margin-block: 1.6rem 1.3rem; }
/* The app icon carries its own silhouette: no frame around it, only the icon grid's corner for square artwork. */
.project-experience-page .project-cinematic-hero__logo { width: 48px; height: 48px; border: 0; border-radius: 22.37%; padding: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.project-experience-page .project-cinematic-hero__status { color: #d3d9d8; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); margin: 0; }
.project-experience-page .project-cinematic-hero__title { color: #f3f1e9; font-size: clamp(3.6rem, 7.2vw, 7rem); font-weight: var(--display-weight); letter-spacing: var(--track-display); white-space: normal; line-height: 1; margin-bottom: 1.35rem; }
.project-experience-page .project-cinematic-hero__claim { max-width: 38ch; font-size: clamp(1.35rem, 2vw, 1.8rem); color: #eceee9; font-weight: 400; }
.project-experience-page .project-cinematic-hero__summary { max-width: 49ch; color: #c2caca; font-size: 1rem; line-height: 1.65; }
.project-experience-page .project-cinematic-hero__actions { gap: 1.8rem; margin-top: 1.8rem; }
.project-hero-explore {
  display: inline-flex; align-items: center; gap: 1.4rem; min-height: 44px; font-size: .82rem; text-decoration: none;
  border-bottom: 1px solid #d6e0d859; color: #f1f2eb;
  transition: border-color var(--motion-quick) var(--ease-standard);
}
.project-hero-explore:is(:hover, :focus-visible) { border-color: #f1f2eb; }
/* Anchored to the content column's right edge on every container width (Meridian and LumenSpatial use 1240px). */
.project-hero-motion {
  position: absolute; bottom: 1.4rem; right: calc((100% - min(var(--max-width), 100% - 2.5rem)) / 2); z-index: 4;
  min-height: 44px; padding: .5rem 1.1rem; border: 1px solid #ffffff42; border-radius: 999px;
  background: #080e127a; color: #e7eae4; font: inherit; font-size: var(--text-label); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.project-hero-motion[hidden] { display: none; }
.project-hero-motion:is(:hover, :focus-visible) { background: #1c282dcc; border-color: #ffffff70; }
.project-hero-motion:active { transform: scale(.985); background: #26343acc; }

/* Edge fade for native horizontal tracks (chapter links, the plain gallery rail): a track fades by --edge-fade at
   the edge it can still scroll toward, driven by its own scroll timeline. A track that cannot scroll has an
   inactive timeline, so it never fades; engines without scroll timelines keep a plain edge. */
@property --edge-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --edge-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes edge-fade {
  0% { --edge-fade-start: 0px; --edge-fade-end: var(--edge-fade); }
  6% { --edge-fade-start: var(--edge-fade); }
  94% { --edge-fade-end: var(--edge-fade); }
  100% { --edge-fade-start: var(--edge-fade); --edge-fade-end: 0px; }
}
.project-chapters__links, .luma-chapters-links, .project-gallery-rail:not(.gallery-rail) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--edge-fade-start), #000 calc(100% - var(--edge-fade-end)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--edge-fade-start), #000 calc(100% - var(--edge-fade-end)), transparent);
}
@supports (animation-timeline: scroll()) {
  .project-chapters__links, .luma-chapters-links, .project-gallery-rail:not(.gallery-rail) { animation: edge-fade linear both; animation-timeline: scroll(self inline); }
}

/* Chapter bars (.project-chapters from project-chapters.njk; LumaNorm's .luma-chapters). The bar pins under the
   header; each link has a 44px hit area and draws its indicator on the text. When the links overflow a narrow
   screen, the track fades at the edge it can still scroll toward. */
:is(.project-chapters, .luma-chapters) {
  position: sticky; top: var(--experience-header-height, 64px); z-index: 40;
  background: color-mix(in srgb, var(--experience-background, #080e12) 94%, transparent);
  border-block: 1px solid var(--experience-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.project-chapters__inner, .luma-chapters-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 58px; }
.project-chapters__brand, .luma-chapters-brand {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--experience-paper);
  font-size: .84rem; font-weight: var(--heading-weight); white-space: nowrap; text-decoration: none;
}
.luma-chapters-brand span { margin-left: .3em; color: var(--experience-muted); font-weight: 400; }
.project-chapters__links, .luma-chapters-links {
  --edge-fade: 28px;
  display: flex; align-self: stretch; gap: .9rem; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 1.25rem;
}
.project-chapters__links::-webkit-scrollbar, .luma-chapters-links::-webkit-scrollbar { display: none; }
.project-chapters__links a, .luma-chapters-links a {
  /* Links never shrink into each other: a track that cannot hold them scrolls (and fades) instead. */
  position: relative; display: flex; flex: none; align-items: center; justify-content: center; min-width: 44px; padding-inline: .45rem;
  white-space: nowrap; font-size: var(--text-label); text-decoration: none; color: var(--experience-muted);
  transition: color var(--motion-quick) var(--ease-standard);
}
.project-chapters__links a::after, .luma-chapters-links a::after {
  content: ""; position: absolute; left: .45rem; right: .45rem; bottom: -1px; height: 1px;
  background: currentColor; opacity: .55; transform: scaleX(0);
  transition: transform var(--motion-medium) var(--ease-standard), opacity var(--motion-quick) var(--ease-standard);
}
.project-chapters__links a:is(:hover, :focus-visible), .luma-chapters-links a:is(:hover, :focus-visible) { color: var(--experience-paper); }
.project-chapters__links a:is(:hover, :focus-visible)::after, .luma-chapters-links a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.project-chapters__links a[aria-current], .luma-chapters-links a[aria-current] { color: var(--experience-paper); }
.project-chapters__links a[aria-current]::after, .luma-chapters-links a[aria-current]::after { height: 2px; background: var(--experience-accent); opacity: 1; transform: scaleX(1); }
.project-chapters__links a:focus-visible, .luma-chapters-links a:focus-visible { outline-offset: -6px; }
@supports (transition-timing-function: linear(0, 1)) {
  .project-chapters__links a::after, .luma-chapters-links a::after { transition-timing-function: var(--ease-spring), var(--ease-standard); transition-duration: var(--motion-settle), var(--motion-quick); }
}
@media (max-width: 1000px) {
  .luma-chapters-brand { display: none; }
  .luma-chapters-inner { justify-content: center; }
}
@media (max-width: 760px) {
  .project-chapters__brand { display: none; }
  .project-chapters__inner, .luma-chapters-inner { justify-content: start; min-height: 50px; }
  /* Adjacent hit areas; the words are spaced by the links' own padding, so five LumaNorm chapters fit from 360px
     and the first word still starts on the column edge. */
  .project-chapters__links, .luma-chapters-links { --chapter-pad: clamp(.3rem, 1.55vw, .6rem); width: calc(100% + 2 * var(--chapter-pad)); margin-inline: calc(-1 * var(--chapter-pad)); gap: 0; }
  .project-chapters__links a, .luma-chapters-links a { font-size: var(--text-floor); padding-inline: var(--chapter-pad); }
  .project-chapters__links a::after, .luma-chapters-links a::after { left: var(--chapter-pad); right: var(--chapter-pad); }
}
/* Short landscape windows: the chapter bar scrolls away with the page and the header alone stays pinned, so
   sticky stages regain its height. */
@media (max-height: 500px) and (orientation: landscape) {
  :is(.project-chapters, .luma-chapters) { position: relative; top: auto; }
}

/* Galleries (gallery-story.js). The script adds the gallery-* classes; without it the rails stay plain native
   scrollers styled by each family. Colours come from --experience-*. */
.gallery-story { position: relative; --gallery-column: min(90%, 1040px); }
.gallery-stage { position: relative; padding-block: 12px 8px; }
.gallery-story[data-gallery-motion="scroll"] .gallery-stage { position: sticky; top: var(--gallery-top); }
.gallery-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem;
  font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--experience-muted);
}
.gallery-title { min-width: 0; overflow-wrap: anywhere; }
.gallery-hint { display: inline-flex; align-items: center; gap: .55em; flex: none; color: var(--experience-accent); }
[data-gallery-motion="manual"] .gallery-hint { display: none; }
/* The rail runs to the window edges, so cards leave at the edge of the screen rather than the text column; the
   first card still lines up with the column. */
.gallery-story .gallery-rail {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
  width: auto; margin: 0 calc(-1 * var(--gallery-bleed-end, 0px)) 0 calc(-1 * var(--gallery-bleed-start, 0px));
  padding: 8px var(--gallery-bleed-end, 0px) 8px var(--gallery-bleed-start, 0px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gallery-bleed-start, 0px) var(--gallery-bleed-end, 0px);
}
.gallery-story .gallery-rail::-webkit-scrollbar { display: none; }
/* Room after the last card of a manual row that shows several pictures at once, so each can reach the reading edge. */
.gallery-story--tail .gallery-rail::after { content: ""; flex: 0 0 var(--gallery-tail, 0px); }
.gallery-story[data-gallery-motion="scroll"] .gallery-rail { scroll-snap-type: none; scroll-behavior: auto; }
/* The card is a plain block whose height follows its framed picture (a family's own box ratio or stretch rules,
   such as LumaNorm's 3:2 rail frames without the script, never apply once enhanced). */
.gallery-story .gallery-rail > .gallery-card {
  position: relative; display: block; flex: 0 0 min(var(--gallery-column), calc(var(--gallery-image-height, 70svh) * var(--gallery-ratio, 1.5)));
  width: auto; min-width: 0; margin: 0; scroll-snap-align: start; aspect-ratio: auto;
}
.gallery-story--single { --gallery-column: 100%; }
.gallery-story--single .gallery-rail { scroll-snap-type: none; }
/* A manual row that holds every picture at once: no count or buttons, and every card keeps its own caption (the
   stage's single-picture caption would describe only the first). */
.gallery-story--whole :is(.gallery-controls, .gallery-caption) { display: none; }
/* The picture is the button, framed at its own ratio. */
.gallery-image-open {
  display: block; position: relative; width: 100%; height: auto; aspect-ratio: var(--gallery-ratio, 16 / 9); margin: 0; padding: 0;
  overflow: hidden; border: 1px solid var(--experience-line); border-radius: 12px; background: var(--experience-background, #080d11);
  color: inherit; cursor: zoom-in; transform-origin: center; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--motion-quick) var(--ease-standard);
}
.gallery-image-open picture { display: contents; }
.gallery-image-open img {
  display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0;
  transition: transform var(--motion-settle) var(--ease-standard), filter var(--motion-instant) var(--ease-standard);
}
@supports (transition-timing-function: linear(0, 1)) {
  .gallery-image-open img { transition-timing-function: var(--ease-spring), var(--ease-standard); }
}
.gallery-story--frames .gallery-image-open { transform-origin: 35% center; }
@media (hover: hover) and (pointer: fine) {
  .gallery-image-open:hover { border-color: color-mix(in srgb, var(--experience-paper) 34%, transparent); }
  .gallery-image-open:hover img { transform: scale(1.02); }
}
.gallery-image-open:focus-visible { border-color: color-mix(in srgb, var(--experience-paper) 34%, transparent); }
.gallery-image-open:focus-visible img { transform: scale(1.02); }
.gallery-image-open:active img { transform: scale(.985); filter: brightness(.9); transition-duration: var(--motion-instant); }
/* Every caption on screen stays readable; emphasis is tone, never invisibility. The current card and any card the
   reader sees whole (gallery-story.js sets .is-gallery-current and .is-gallery-whole) are fully lit; a neighbour cut
   by the window edge steps back to the muted tier (at least 5:1 on every study ground), so its words read as the
   next picture's rather than a label, and it brightens as it arrives. */
.gallery-story .gallery-card figcaption :is(strong, p, .project-gallery-card__number) { transition: color var(--motion-medium) var(--ease-standard); }
.gallery-story .gallery-card:not(.is-gallery-current, .is-gallery-whole) figcaption {
  --gallery-caption-quiet: color-mix(in srgb, var(--experience-muted) 82%, var(--experience-background, #080e12));
}
.gallery-story .gallery-card:not(.is-gallery-current, .is-gallery-whole) figcaption strong { color: var(--experience-muted); }
.gallery-story .gallery-card:not(.is-gallery-current, .is-gallery-whole) figcaption :is(p, .project-gallery-card__number) { color: var(--gallery-caption-quiet); }
/* LumaNorm's pictures have no caption of their own; the stage shows the current picture's description. */
.gallery-caption {
  margin: .95rem 0 0; max-width: 72ch; min-height: calc(2em * var(--leading-caption));
  font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--experience-muted);
}
.gallery-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; }
.gallery-count { flex: none; font-size: var(--text-label); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--experience-muted); }
.gallery-count__current { color: var(--experience-paper); }
.gallery-progress { flex: 1 1 4rem; max-width: 360px; height: 1px; overflow: hidden; background: var(--experience-line); }
.gallery-progress > span { display: block; width: 100%; height: 100%; background: var(--experience-accent); transform: scaleX(0); transform-origin: left; }
.gallery-actions { display: flex; gap: .6rem; margin-left: auto; }
.gallery-step, .gallery-lightbox__close {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 44px; padding: .6rem 1.1rem;
  color: var(--experience-paper); background: color-mix(in srgb, var(--experience-paper) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--experience-paper) 22%, transparent); border-radius: 999px;
  font: inherit; font-size: var(--text-label); font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.gallery-step .icon { transition: transform var(--motion-medium) var(--ease-standard); }
.gallery-step:not(:disabled):is(:hover, :focus-visible), .gallery-lightbox__close:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--experience-paper) 10%, transparent); border-color: color-mix(in srgb, var(--experience-paper) 48%, transparent);
}
.gallery-step.gallery-step:not(:disabled):is(:hover, :focus-visible) .icon { transform: translateX(var(--gallery-step-nudge, 2px)); }
.gallery-actions .gallery-step:first-child { --gallery-step-nudge: -2px; }
.gallery-step:not(:disabled):active, .gallery-lightbox__close:active { transform: scale(.985); background: color-mix(in srgb, var(--experience-paper) 16%, transparent); }
.gallery-step:disabled { opacity: .34; cursor: default; }
@media (max-width: 760px) {
  .gallery-story { --gallery-column: 92%; }
  .gallery-image-open { border-radius: 8px; }
}
@media (max-width: 420px) {
  /* The progress rule takes its own full-width line above the count and the buttons. */
  .gallery-progress { order: -1; flex-basis: 100%; max-width: none; }
}

/* The image dialog */
:is(.project-lightbox-open, .luma-lightbox-open) { overflow: hidden; }
.gallery-lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--experience-background, #060b10) 88%, transparent); color: var(--experience-paper);
}
.gallery-lightbox::backdrop { background: #030708b3; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gallery-lightbox[open] { animation: gallery-lightbox-in var(--motion-medium) var(--ease-standard) both; }
.gallery-lightbox[open] .gallery-lightbox__figure img { animation: gallery-lightbox-rise var(--motion-settle) var(--ease-standard) both; }
@keyframes gallery-lightbox-in { from { opacity: 0; } }
@keyframes gallery-lightbox-rise { from { opacity: 0; transform: scale(.965); } }
.gallery-lightbox__panel { display: grid; place-items: center; width: 100%; height: 100%; padding: 5rem 3vw 1.5rem; }
.gallery-lightbox__close { position: absolute; top: max(1.2rem, env(safe-area-inset-top)); right: max(1.5rem, env(safe-area-inset-right)); z-index: 2; }
.gallery-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; width: 100%; max-width: 1500px; height: 100%; min-height: 0; margin: 0; }
.gallery-lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 11rem); min-height: 0; object-fit: contain; border-radius: 6px; cursor: default; }
.gallery-lightbox__caption { max-width: 75ch; padding-inline: 1rem; text-align: center; color: var(--experience-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }
@media (max-width: 760px) {
  .gallery-lightbox__panel { padding: 4.7rem .5rem 1.2rem; }
}

/* Plain rails before the script runs, and without it */
.project-gallery { min-width: 0; }
/* The next picture peeks in at the column edge and dissolves into it (the edge fade above), so a cut card and its
   caption read as more to scroll to. A keyboard focus drops the fade so the whole focus ring shows. */
.project-gallery-rail { --edge-fade: clamp(24px, 7vw, 96px); display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #b3bbb344 transparent; overscroll-behavior-x: contain; padding: 8px 0; }
.project-gallery-rail:not(.gallery-rail):focus-visible { -webkit-mask-image: none; mask-image: none; }
.project-gallery-card { position: relative; flex: 0 0 min(90%, 1040px, calc(72svh * var(--gallery-ratio, 1.5))); margin: 0; min-width: 0; scroll-snap-align: start; }
.project-gallery-card > img { display: block; width: 100%; height: auto; aspect-ratio: var(--gallery-ratio, 16 / 9); object-fit: contain; border-radius: 12px; background: #080d11; border: 1px solid var(--experience-line); }
.project-gallery-card figcaption { display: flex; gap: 1.4rem; margin-top: 1.2rem; color: var(--experience-paper); font-size: .92rem; line-height: 1.5; max-width: 65ch; }
.project-gallery-card__number { font-size: var(--text-label); color: var(--experience-accent); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.project-gallery-card figcaption strong { font-weight: var(--heading-weight); }
.project-gallery-card figcaption p { margin: .3rem 0 0; color: var(--experience-muted); font-size: var(--text-caption); line-height: 1.6; }

@media (max-width: 760px) {
  .project-experience-page .project-cinematic-hero { min-height: min(790px, calc(100svh - var(--experience-header-height))); padding: 4.5rem 0 6rem; }
  .project-experience-page .project-cinematic-hero__title { font-size: clamp(3.3rem, 11.5vw, 5.4rem); letter-spacing: var(--track-title); }
  .project-experience-page .project-cinematic-hero__claim { font-size: 1.3rem; }
  .project-experience-page .project-cinematic-hero__summary { font-size: .9rem; max-width: 39ch; }
  .project-experience-page .project-cinematic-hero__scrim { background: linear-gradient(0deg, var(--experience-background), #080e1296 55%, #080e1228); }
  /* Over the palest frames of a film (and its poster) the small labels carry the house halo (Home's eyebrow): a
     hairline edge and a tight core in the film's own ground hold every glyph, and a soft outer glow blends into the
     dark frames. No patch or pill behind the words, so the film reads through untouched. */
  .project-experience-page :is(.project-cinematic-hero__eyebrow, .project-cinematic-hero__status) {
    position: relative; isolation: isolate; color: var(--experience-paper);
    text-shadow:
      0 0 1px color-mix(in srgb, var(--hero-ground) 85%, transparent),
      0 0 3px color-mix(in srgb, var(--hero-ground) 70%, transparent),
      0 1px 8px color-mix(in srgb, var(--hero-ground) 55%, transparent),
      0 0 18px color-mix(in srgb, var(--hero-ground) 45%, transparent);
  }
  /* Under the halo, a wide shade of the same ground that falls off smoothly to nothing (a radial gradient, no edge
     and no blur): the film's pale frames settle a little darker behind the words and read unchanged elsewhere. */
  .project-experience-page :is(.project-cinematic-hero__eyebrow, .project-cinematic-hero__status)::before {
    content: ""; position: absolute; z-index: -1; inset: -1.1em -2.6em; pointer-events: none;
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--hero-ground) 64%, transparent),
      color-mix(in srgb, var(--hero-ground) 56%, transparent) 50%,
      color-mix(in srgb, var(--hero-ground) 30%, transparent) 78%,
      color-mix(in srgb, var(--hero-ground) 9%, transparent) 93%,
      transparent);
  }
  .project-experience-page .project-cinematic-hero__eyebrow::before { inset: 0 -2.6em; }
  .project-gallery-card { flex-basis: 92%; }
  .project-gallery-card figcaption { gap: .8rem; font-size: .82rem; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-experience-page { scroll-behavior: auto; }
  .project-experience-page *, .project-experience-page *::before, .project-experience-page *::after { animation: none !important; transition-duration: 0s !important; }
  .gallery-lightbox[open], .gallery-lightbox[open] .gallery-lightbox__figure img { animation: none; }
  .gallery-image-open img, .gallery-image-open:is(:hover, :focus-visible, :active) img { transform: none; transition: none; }
  .gallery-story .gallery-card figcaption *, .project-chapters__links a::after, .luma-chapters-links a::after { transition: none; }
}
@media (forced-colors: active) {
  :is(.project-chapters, .luma-chapters), .gallery-lightbox { background: Canvas; color: CanvasText; }
  .gallery-step, .gallery-lightbox__close { border: 1px solid ButtonText; color: ButtonText; }
  .project-chapters__links a[aria-current]::after, .luma-chapters-links a[aria-current]::after { background: LinkText; }
  .gallery-progress > span { background: CanvasText; }
  .project-chapters__links, .luma-chapters-links, .project-gallery-rail:not(.gallery-rail) { -webkit-mask-image: none; mask-image: none; }
}