/* =============================================================================
   SHAI — card designs (the 12-card layout). Loaded after styles.css, which
   still owns the shell: tokens, header, nav, glow, promo bar, Backstories,
   footer, orb/arrow primitives. Sizes are in rem so the 768px+ breakpoint
   (html font-size 23px) scales every card up in step with the shell.
   ============================================================================= */

:root {
  /* strip the fixed promo bar covers at the bottom of a card, plus a gap */
  --reserve: calc(env(safe-area-inset-bottom) + var(--promo-h) + var(--edge));
  --cta-w: 174px;
}
@media (min-width: 768px) { :root { --cta-w: 224px; } }

.card--lift { --lift: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card__clip--ink    { background: #120b1b; }
.card__clip--plum   { background: #151116; }
.card__clip--plum2  { background: #240f24; }
.card__clip--black  { background: #000; }

/* ----- shared pieces ----- */
.c-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.c-bg--dim { filter: brightness(.6); }
.c-bg--video { opacity: 0; transition: opacity .6s ease; }
.c-bg--video.is-live { opacity: 1; }
.c-scrim { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.c-scrim--fade { inset: 0; background: #000; opacity: 0; transition: opacity .35s ease; }
.c-scrim--fade.is-active { opacity: 1; }

.c-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--lavender);
  padding: 4.5rem var(--edge) calc(var(--reserve) + 1rem);
}
.c-grow { flex: 1 1 auto; min-height: 1rem; }

.c-title { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
           font-size: 2.5rem; line-height: 1.05; color: var(--lavender); max-width: 19.5rem; }
.c-title em { font-style: italic; }
.c-title--left { text-align: left; align-self: flex-start; }
.c-title--white { color: #fff; }
.c-kicker { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1; letter-spacing: .01em; }
.c-kicker strong { font-weight: 700; }
.c-body { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 19.5rem; }
.c-body--tight { line-height: 1.45; }
.c-body--white { color: #fff; }
.c-body strong { font-weight: 700; }
.c-body em { font-style: italic; }

.c-ghost {
  margin-top: 1.4rem; padding: .85rem 1.9rem; border-radius: 100px;
  border: 1px solid rgba(184,170,203,.2); color: var(--lavender);
  font-size: .875rem; letter-spacing: .01em; white-space: nowrap;
  transition: background .15s, transform .12s;
}
.c-ghost:hover  { background: rgba(184,170,203,.08); }
.c-ghost:active { transform: scale(.97); }

/* ----- video backgrounds: orb dead-centre in the VIEWPORT -----
   The box is exactly viewport-sized and pinned to the viewport top while the
   card rests snapped (card top = header + safe-area + edge, minus --lift).
   object-fit:cover on that box centres the footage on the box centre, so a
   centred orb lands on the viewport centre, at any aspect ratio. */
.vbox {
  position: absolute; left: 0; right: 0; z-index: 0;
  height: 100vh; height: 100dvh;
  top: calc(-1 * (var(--header-h) + var(--sat) + var(--edge)) + var(--lift, 0px));
}
/* hero: pinned to the card's own top/bottom instead — the clip's orb sits at
   ~47% of its height, so this puts it a little lower on the card than the
   viewport-centred box does */
.vbox--card { top: 0; height: 100%; }
/* silk cards: same dimming the still had (c-bg--dim), now on the still + video together */
.vbox--dim { filter: brightness(.6); }
/* top-aligned footage (makers): the picture hangs from the card top, so the subject sits lower */
.vbox--top .vbox__still { left: -24.7%; width: 149.4%; max-width: none; height: auto; top: 0; transform: translateY(-10.74%); object-fit: fill; }   /* Figma crop (575px wide, -95px left); the PNG's top 110px (10.74%) are transparent, so lift them off — the photo itself hangs from the card top */
.vbox--top .vbox__video { object-position: 50% 0%; }
/* makers: footage lifted 70px up the card; the strip that opens at the bottom (behind the promo bar) is the same dark as the card's bottom gradient */
.vbox--up { top: -70px; }
.card__clip--makers { background: #3b373f; }
/* makers: still + video both hang from the card top */
.vbox--pin .vbox__still, .vbox--pin .vbox__video { object-position: 50% 0%; }
.vbox__still, .vbox__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.vbox__video { opacity: 0; transition: opacity .6s ease; }
.vbox.is-live .vbox__video { opacity: 1; }

/* ----- 1 · hero ----- */
.c-scrim--hero { bottom: 0; height: 32%;
  background: linear-gradient(180deg, rgba(3,2,13,0) 10%, #120b1b 46%); }
.c-inner--hero { padding-top: 5.4rem; }
.c-inner--hero .c-title { max-width: 21rem; }
.c-inner--hero .c-title { color: #b8aacb; }

/* ----- 2 · lines ----- */
.c-bg--lines { opacity: .6; object-position: 22% 100%; width: 164%; left: -32%; max-width: none; }
/* scrims use eased (smoothstep) stops that hit 0 well inside the box, so there's no visible edge or band */
.c-scrim--lines-top    { top: 0; height: 41%; background: linear-gradient(182deg, #0e0c14 50%, rgba(14,12,20,.9) 58%, rgba(14,12,20,.68) 66%, rgba(14,12,20,.4) 74%, rgba(14,12,20,.16) 82%, rgba(14,12,20,.04) 88%, rgba(14,12,20,0) 92%); }
.c-scrim--lines-bottom { bottom: 0; height: 40%; background: linear-gradient(18deg, #0e0c14 30%, rgba(14,12,20,.92) 37%, rgba(14,12,20,.72) 44%, rgba(14,12,20,.44) 51%, rgba(14,12,20,.18) 57%, rgba(14,12,20,.04) 62%, rgba(14,12,20,0) 66%); }   /* 18deg: the top-left corner sits at ~69% along the line, so it must be clear by 66% */
.c-inner--lines { padding-top: 4.5rem; align-items: stretch; }
.c-inner--lines .c-title { max-width: 18.5rem; }
.strikes { margin: 0; align-self: flex-end; text-align: right; font-family: "Instrument Serif", Georgia, serif;
           font-size: 2rem; line-height: 2.6rem; color: var(--lavender); }
.strike { position: relative; display: block; width: fit-content; margin-left: auto; }
.strike svg { max-width: none; overflow: visible;
  position: absolute; left: -3%; top: 54%; width: 106%; height: .4rem; max-width: none;
  clip-path: inset(-6px 100% -6px -6px);
  transition: clip-path .6s cubic-bezier(.5,.1,.3,1);
  transition-delay: calc(var(--i) * .65s);
}
/* one stroke weight for all three, whatever the line's stretched length */
.strike svg path { fill: none; stroke: #807195; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.strikes.is-drawn .strike svg { clip-path: inset(-6px -6px -6px -6px); }
.strike:nth-child(2) svg { top: 58%; height: .26rem; }
.strike:nth-child(3) svg { top: 55%; }

/* ----- 3 · why ----- */
.c-bg--gradient { opacity: .5; top: 19%; height: 82%; }
.c-scrim--why-top    { top: 0; height: 46%; background: linear-gradient(180deg, rgba(21,17,22,1) 0%, rgba(21,17,22,0) 100%); }
.c-scrim--why-bottom { bottom: 0; height: 50%; background: linear-gradient(0deg, rgba(48,36,56,1) 0%, rgba(48,36,56,.55) 40%, rgba(48,36,56,0) 100%); }   /* dark at the top, dark purple rising from the bottom edge to the card's centre */
.c-inner--why { padding-top: 5.1rem; gap: 1.1rem; }
.c-inner--why .c-title { max-width: 14.5rem; }
.arc { position: relative; width: 100%; height: 5.5rem; margin-top: 5.2rem; }
.arc span { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%);
            font-size: 1rem; color: rgba(184,170,203,.5); white-space: nowrap; }

/* ----- 4–6 · story cards ----- */
.c-scrim--top    { top: 0; height: 32%; background: linear-gradient(180deg, rgba(30,13,37,.5) 0%, rgba(30,13,37,.3) 45%, rgba(30,13,37,0) 100%); }
.c-scrim--bottom { bottom: 0; height: 38%; background: linear-gradient(0deg, #000 66%, rgba(30,13,37,0) 90%); }
.c-inner--story { padding-top: 3.1rem; }
.c-inner--story .c-title { max-width: 19.4rem; }
.c-inner--story .c-body { max-width: 19.4rem; }
.playbtn {
  position: absolute; z-index: 3; left: 50%;
  top: calc(50vh - var(--header-h) - var(--sat) - var(--edge) + var(--lift, 0px));
  top: calc(50dvh - var(--header-h) - var(--sat) - var(--edge) + var(--lift, 0px));
  width: 5.4rem; height: 5.4rem; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  transition: opacity .3s ease, transform .15s var(--ease);
}
.playbtn:active { transform: translate(-50%, -50%) scale(.95); }
/* when the footage is pinned to the card (not the viewport), the orb sits at ~47% of the card */
.playbtn--card { top: 47.3%; }
.playbtn__play  { position: absolute; width: 3.6rem; height: auto; transform: rotate(90deg); transition: opacity .25s; }
.playbtn__pause { position: absolute; height: 3.6rem; width: auto; fill: none; stroke: var(--lavender); stroke-width: 2px; opacity: 0; transition: opacity .25s; }
.playbtn__pause rect { vector-effect: non-scaling-stroke; }
.is-playing .playbtn__play  { opacity: 0; }
.is-playing .playbtn__pause { opacity: 1; }
.is-playing .playbtn { opacity: .6; }

/* ----- 7 · library carousel ----- */
.cx { --cx-ink: #E9D9FF; --cx-gap: 2rem; --cx-top: var(--cx-gap); --cx-mid: var(--cx-gap);
      /* heading rhythm: "Subscribe for" → logo gap (6px tighter than before), reused under the logo */
      --cx-g: calc(.85rem - 6px); --cx-m: calc(var(--cx-g) - 2.4px);   /* -2.4px: the tab text sits lower in its box than "Subscribe for", so this makes the *visible* gaps above and below the logo equal (~9.8px) */ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
      padding: var(--cx-top) 0 calc(var(--reserve) + .2rem); color: var(--cx-ink); }
.cx__bg { position: absolute; left: 0; right: 0; top: 0; bottom: 11%; width: 100%; height: auto; object-fit: cover; z-index: 0;
          transition: opacity .8s ease; }
.cx__bg.is-hidden { opacity: 0; }
.cx__fade { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.cx__fade--top    { top: 0; height: 47%; opacity: .6; background: linear-gradient(180deg, #000 0%, rgba(13,2,17,0) 100%); }   /* one even ramp, top to bottom (was solid to 64% then out, which pooled behind the tabs) */
.cx__fade--bottom { bottom: 0; height: 43.2%; background: linear-gradient(180deg, rgba(13,2,17,0) 0%, #000 36%, #000 100%); }   /* Figma: out→solid by 36% */
/* blur along the outer edges — outside the frame */
.cx__edge { position: absolute; top: 23.3%; bottom: 22.8%; width: 6%; z-index: 1; pointer-events: none;
            backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cx__edge--l { left: 0; }
.cx__edge--r { right: 0; }
.cx__tabs { position: relative; top: 4px; z-index: 3; display: flex; gap: 2.1rem; font-size: 1rem; margin-bottom: var(--cx-gap); }   /* top: 4px nudges the bar down without moving anything else */
.cx__tabs button { position: relative; padding: 0 .1rem .5rem; color: var(--cx-ink); line-height: 1.2; }
.cx__tabs button.is-on { font-weight: 700; }
/* the carousel indicator (one dash per story, current one long) doubles as the tab underline:
   it sits under the active tab and slides across when the category changes (left set by JS) */
.cx__tabs .cx__dashes { position: absolute; left: 0; bottom: 0; margin: 0; transform: translateX(-50%); transition: left .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .cx__tabs .cx__dashes { transition: none; } }
.cx__head { position: relative; z-index: 3; width: 87.6%; margin: 0 0 var(--cx-m); display: flex; flex-direction: column; align-items: center; gap: var(--cx-g); font-weight: 400; }
.cx__sub { font-size: 1.1rem; line-height: 1; letter-spacing: .01em; }
.cx__premium { display: block; width: 100%; aspect-ratio: 181 / 31; background-color: var(--cx-ink);   /* fills .cx__head, which is the story frame's width */
  -webkit-mask: url("https://krffvljsetckdicebcsw.supabase.co/storage/v1/object/public/website_video/premium_stories.svg") center / 100% 100% no-repeat;
          mask: url("https://krffvljsetckdicebcsw.supabase.co/storage/v1/object/public/website_video/premium_stories.svg") center / 100% 100% no-repeat; }   /* SVG as a mask so it takes the card's light lilac */
.cx__frame {
  position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; width: 87.6%;
  border: 1px solid var(--cx-ink); border-radius: var(--cx-r, 20px);
  transition: border-radius .7s var(--ease);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.1rem 1.17rem; text-align: center;   /* 1.17rem: puts the last description line's baseline the same distance from the bottom edge (~22.7px) as the title's cap-tops are from the top */
}
.cx__title { margin: 0; font-size: 2.5rem; line-height: 1; max-width: 17rem; transition: opacity .38s ease, transform .38s ease; }
.cx__text  { transition: opacity .38s ease, transform .38s ease; }
.cx__title.is-out, .cx__text.is-out { opacity: 0; transform: translateY(6px); }
.cx__meta { margin: 0 0 1rem; font-size: .875rem; line-height: 1.15; font-weight: 700; text-transform: uppercase; }
.cx__desc { margin: 0 auto; max-width: 16.4rem; font-size: .875rem; line-height: 1.15; }
.cx__foot { position: relative; z-index: 3; margin: 1.1rem 0 0; font-size: 1.5rem; line-height: 1.1; }

.dashes { display: flex; gap: 2px; justify-content: center; align-items: center; }
.dashes i { display: block; width: .75rem; height: 2px; border-radius: 1000px; background: rgba(184,170,203,.5); transition: width .3s, background .3s; }
.dashes i.is-on { width: 1.875rem; background: var(--lavender); }
.cx .dashes i { background: rgba(233,217,255,.5); }   /* library: dashes in the card's light lilac too */
.cx .dashes i.is-on { background: var(--cx-ink); }

/* ----- 8 · narrators ----- */
.c-bg--silk { object-position: center; }
.c-inner--narr { padding-top: 2.6rem; gap: 1rem; }
/* narrator name: stands where the mute pill was — same small type, no pill */
.c-inner--narr .narr__name { margin: .1rem 0 0; padding: 8px 0; font-size: .82rem; letter-spacing: .14em; color: var(--lavender); }
/* play/pause: dead-centre between the carousel arrows (they sit at 50% of .narrator) */
.c-inner--narr .playbtn--narr { top: 50%; }
.c-inner--narr .c-title { max-width: 19.4rem; }
.c-inner--narr .c-body { max-width: 15.4rem; }
/* the orb baked into each narrator clip is centred at 47.3% of the card height (measured from the nI–nIV
   frames) — pin the arrow row to that, not to the text flow. The dashes keep their own offset below it. */
.c-inner--narr .narrator { position: absolute; left: 0; right: 0; top: 47.3%; transform: translateY(-50%); margin: 0; width: 100%; }
.c-inner--narr .narrator__arrow { top: 50%; }
/* the closing copy is centred between the dashes and the top of the promo bar */
.narr__outro { position: absolute; left: 0; right: 0;
  top: calc(49.6% + 7.9rem + 2px);
  bottom: calc(env(safe-area-inset-bottom) + var(--promo-h));
  display: flex; align-items: center; justify-content: center; padding: 0 var(--edge); text-align: center; }
.narrator__dashes { position: absolute; left: 50%; top: calc(49.6% + 7.9rem); transform: translateX(-50%); }
.narrator__orb { display: block; width: 14.2rem; aspect-ratio: 1; border-radius: 50%; background: none; }

/* ----- 9 · sound environment ----- */
.c-inner--sounds { padding-top: 5.1rem; gap: 1rem; }
.c-inner--sounds .c-title { max-width: 19.4rem; }
.c-inner--sounds .c-body { max-width: 15.4rem; }
.fx { width: 100%; display: flex; flex-direction: column; gap: .375rem; margin-top: .5rem; }
/* Mirrors the app's SoundSlider: a 53pt pill track, a dark→light gradient that always
   runs from the track's left edge to the thumb's right edge (shown once the level is
   off zero), the label centred and passed over by a dark-tinted clear-glass thumb. */
.fx__row { --lv: 0; position: relative; height: 3.3125rem; border-radius: 100px; background: rgba(184,170,203,.15);
           overflow: hidden; user-select: none; -webkit-user-select: none; }
.fx__fill { position: absolute; left: 0; top: 0; bottom: 0;
            width: calc(var(--lv) * (100% - 3.3125rem) + 3.3125rem); border-radius: 100px;
            background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(184,170,203,.3));
            opacity: min(calc(var(--lv) * 20), 1); }
.fx__name { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
            font-size: 1rem; pointer-events: none; }
.fx__icon { position: absolute; z-index: 2; top: 0; left: calc(var(--lv) * (100% - 3.3125rem));
            width: 3.3125rem; height: 3.3125rem; border-radius: 50%;
            display: grid; place-items: center; cursor: grab; touch-action: none;
            /* dark-tinted clear glass — no outline, no highlight gradient */
            background: rgba(0,0,0,.35);
            -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
            box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.fx__row.is-dragging .fx__icon { cursor: grabbing; }
.fx__icon img { width: 1.25rem; height: 1.25rem; object-fit: contain; pointer-events: none; }
.fx__row[data-fx-row="birdsong"] .fx__icon img { transform: scaleX(-1); }   /* the design mirrors this glyph */
.fx__row:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

/* ----- 10 · crafted, not generated ----- */
.collage { position: absolute; left: 0; top: -10px; width: 100%; aspect-ratio: 386 / 837; z-index: 1; pointer-events: none; }
.col { position: absolute; object-fit: cover; max-width: none; }
.col--a { left: 8.8%;  top: 8.7%;  width: 31.7%; height: 23.1%; transform: rotate(-7.3deg); border-radius: 2px; z-index: 1; }
.col--b { left: 55.2%; top: 15.3%; width: 47.7%; height: 15.05%; object-fit: fill; z-index: 2; }   /* weaving.png has its 5.5° tilt baked in (184×126 = the tilted photo's bounding box, transparent corners), centred where the old photo sat */
.col--c { left: -12.2%; top: 16.6%; width: 125.6%; height: 60.2%; z-index: 3; }
.col--f { left: 51%;   top: 54.4%; width: 33.4%; height: 23.1%; transform: rotate(8deg);    box-shadow: 0 2px 2px rgba(0,0,0,.8); border-radius: 1px; z-index: 4; }
.col--e { left: 9.7%;  top: 42.8%; width: 33.7%; height: 23.1%; transform: rotate(-4deg);   box-shadow: 0 2px 2px rgba(0,0,0,.8); border-radius: 1px; z-index: 5; }
.col--d { left: 50.8%; top: 28.3%; width: 33.7%; height: 23.1%; box-shadow: 0 2px 2px rgba(0,0,0,.8); z-index: 6; }
/* "Crafted," sits over the top-left photo — position-critical: the title
   block lines up with the collage stage, which scales by card width */
.c-inner--crafted { padding-top: 0; }
.c-inner--crafted .c-title { position: absolute; z-index: 7; left: 0; right: 0; top: 9.8%; margin: 0 auto; max-width: 20.1rem; font-style: normal; }
.c-inner--crafted .c-title em { color: #452b50; }
.c-inner--crafted .c-body { max-width: 18rem; position: relative; z-index: 7; text-shadow: 0 1px 8px rgba(36,15,36,.9); }

/* ----- 11 · makers ----- */
.c-bg--makers { object-position: 50% 100%; width: 150%; height: 119%; left: -24.7%; top: -19%; max-width: none; }
.c-scrim--makers { top: 0; bottom: 0; background:
  linear-gradient(0deg, #3b373f 0%, rgba(59,55,63,.0) 40%),
  linear-gradient(188deg, rgba(47,9,64,.35) 60%, rgba(190,78,59,.18) 74%, rgba(255,177,67,0) 89%); }
.c-inner--makers { padding-top: 2.3rem; align-items: stretch; }
.c-inner--makers .c-title { max-width: 19.6rem; }
.mak__quote { align-self: flex-end; margin: 1.35rem .9rem 0 0; max-width: 16rem; text-align: right; color: #fff;
              font-size: 1.5rem; line-height: 1.17; }
.mak__sign  { align-self: flex-end; margin: .4rem 1.6rem 0 0; color: #fff; font-size: 1.45rem; line-height: 1; transform: rotate(-2deg); }
.c-inner--makers .c-body { align-self: center; max-width: 21rem; }

/* ----- 12 · premium ----- */
/* Figma "Premium" screen (385 × 837): headline at 15.5% of the card, diamond + lockup at 43.5%, body at 67.5%.
   Sizes follow the card's width (cqw) so the layout holds at any phone width, capped on bigger screens. */
.c-inner--premium { container-type: size; padding: 0; }
.prem__lead, .prem__mark, .prem__body { position: absolute; left: 0; right: 0; margin: 0; }
.prem__lead { top: 14.6%; padding: 0 5%; font-weight: 400; font-size: min(10.39cqw, 2.5rem); line-height: 1.05; font-feature-settings: "dlig" 1; }
.prem__mark { top: 42.2%; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.prem__diamond { display: block; width: min(9.6cqw, 2.3rem); height: auto; }
.c-inner--premium .lockup { height: auto; width: min(61.6cqw, 14.8rem); }
.prem__body { top: 66.4%; padding: 0 5%; font-size: min(5.2cqw, 1.25rem); line-height: 1.3; }

.prem__lead, .prem__mark, .prem__body { transform: translateY(-1.5rem); }   /* room above the share link */
/* Share link sits just above the (fixed) collapsed CTA: card bottom -> CTA top is promo-h minus the CTA's 9px inset. */
.prem__share { position: absolute; left: 0; right: 0; bottom: calc(var(--promo-h) - 9px + 1.3rem); margin: 0 auto; width: max-content;
               font-size: .82rem; letter-spacing: .02em; color: var(--lavender); padding: .5rem .75rem; }

/* ----- promo bar states ----- */
.promo { transition: opacity .3s var(--ease), transform .3s var(--ease), width .6s var(--ease), padding .5s var(--ease),
                     background .4s ease, box-shadow .4s ease; }
.promo__stories { display: none; }   /* shows the same "Coming soon!" (.promo__soon) as the default state */
.promo.is-stories .promo__brand, .promo.is-stories .promo__tagline { display: none; }
.promo.is-stories .promo__stories { display: block; }
.promo__brand-wrap { transition: opacity .35s ease, flex-basis .5s var(--ease); }
.promo.is-collapsed { width: var(--cta-w); padding: 0; gap: 0; background: transparent; box-shadow: none; }
.promo.is-collapsed .promo__brand-wrap { flex: 0 0 0; width: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* ----- backstories posts: image + its outline meet the card outline ----- */
.back__post { position: relative; display: block; padding: 0 5.4% 0 46%; aspect-ratio: 385 / 246; min-height: 0; overflow: visible; }
.back__media { position: absolute; left: 0; top: 0; bottom: 0; width: 40.8%; flex: none;
               border: 1px solid rgba(184,170,203,.55); border-radius: var(--card-radius); overflow: hidden; background: var(--aubergine); }
.back__media img { width: 100%; height: 100%; object-fit: cover; }
/* tint the white line art to the site lavender: multiply keeps black black, maps white to --lavender */
.back__media { isolation: isolate; }
.back__media img { filter: brightness(1.5) contrast(1.1); }   /* source strokes are light gray; lift them so the tinted lines land at full lavender */
.back__media::after { content: ""; position: absolute; inset: 0; background: var(--lavender); mix-blend-mode: multiply; pointer-events: none; }
.back__post:nth-child(n+2) .back__media img { opacity: .8; }
.back__text { height: 100%; justify-content: center; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .strike svg { transition: none; clip-path: inset(-6px -6px -6px -6px); }
  .cx__frame, .promo { transition: none; }
}

/* ----- stepped blur -----
   A single backdrop-filter strip always shows a hard edge where it stops, and
   Safari won't fade one with a mask. So: eight stacked strips, each only
   ~.45px of blur and each shorter than the last — the blur ramps from full at
   the card edge to nothing in steps too small to see. */
.c-blur { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.c-blur--top { top: 0; height: 32%; }
/* library: a deeper, longer blur at the top so the title reads over the image */
.c-blur--top.c-blur--cx { height: 42%; }
.c-blur--top.c-blur--cx i { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.c-blur--bottom { bottom: 0; height: 43.2%; }
.c-blur i { position: absolute; left: 0; right: 0; backdrop-filter: blur(.45px); -webkit-backdrop-filter: blur(.45px); }
.c-blur--top i    { top: 0; }
.c-blur--bottom i { bottom: 0; }
.c-blur i:nth-child(1) { height: 100%; } .c-blur i:nth-child(2) { height: 88%; }
.c-blur i:nth-child(3) { height: 76%; }  .c-blur i:nth-child(4) { height: 64%; }
.c-blur i:nth-child(5) { height: 52%; }  .c-blur i:nth-child(6) { height: 40%; }
.c-blur i:nth-child(7) { height: 28%; }  .c-blur i:nth-child(8) { height: 16%; }

/* library: text inside the story outline is a pale lilac (#E9D9FF) for legibility over the photo */
.cx__title, .cx__meta, .cx__desc { color: #E9D9FF; }

/* makers: all text in the same pale lilac (#E9D9FF) used inside the library story frame */
.c-inner--makers .c-title,
.c-inner--makers .mak__quote,
.c-inner--makers .mak__sign,
.c-inner--makers .c-body { color: #E9D9FF; }