/* The unenhanced layout is also the reduced-motion and no-JavaScript version. */
.card-story { position: relative; background: var(--paper); }
.story-stage { position: relative; }
.story-intro { position: relative; background: var(--wine); color: var(--paper); padding-block: 55px 80px; }
.story-intro .hero-copy { padding: 0; max-width: 640px; }
.story-intro .eyebrow { color: var(--rose); }
.story-intro h1 { font-size: clamp(3rem, 5.1vw, 5.8rem); }
.story-deck-note { display: none; }
.story-deck-controls { display: none; }
.story-scroll-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 32px; font-size: .8125rem; text-decoration: none; color: var(--rose-light); }
.story-scroll-link span { font-size: 1.3rem; }
.story-outro { text-align: center; padding-block: 10px 35px; }
.story-outro h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.story-outro .eyebrow { margin-bottom: 15px; }
.story-outro:focus { outline: none; }
.story-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 20px var(--gutter) 50px; }
.story-card { min-width: 0; perspective: 1200px; }
.card-face { border-radius: 5px; overflow: hidden; }
.card-front { background: var(--paper); color: var(--ink); border: 1px solid #4b181f18; display: flex; flex-direction: column; }
.post-header { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 11px; text-align: left; font-size: 11px; line-height: 1.15; }
.post-avatar { display: block; width: 29px; height: 29px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.post-identity { display: block; min-width: 0; flex: 1; }
.post-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.post-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 400; margin-top: 2px; }
.post-menu { width: 17px; height: 17px; margin-left: auto; flex-shrink: 0; }
.post-art { background: var(--wine); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 18px 12px; aspect-ratio: 1; flex: 1; min-height: 0; position: relative; overflow: hidden; }
.post-art-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.post-art strong { font-size: clamp(32px, 4vw, 60px); font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.post-art strong em { font-size: 1.6em; display: block; color: var(--rose); margin-top: 8px; }
.post-pending { font-size: 11px; }
.post-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-footer { display: flex; justify-content: space-between; align-items: center; gap: 5px; min-height: 32px; padding: 6px 11px 0; }
.post-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.post-actions img, .post-bookmark { display: block; width: 17px; height: 17px; flex-shrink: 0; }
.post-caption { min-height: 32px; margin: 0; padding: 4px 11px 7px; font-size: 9px; line-height: 1.35; text-align: left; overflow: hidden; }
.post-caption strong { font-weight: 700; }
.card-back { background: var(--rose); color: var(--wine); display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2.2vw, 32px); }
.back-index { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.card-back h3 { font-size: clamp(1.55rem, 2.2vw, 2.25rem); line-height: 1.14; letter-spacing: -.04em; margin-block: auto 20px; padding-top: 22px; }
.card-back h3 em { font-size: 1.27em; }
.card-back p { font-size: 1rem; line-height: 1.5; }
.back-brand { margin-top: auto; padding-top: 22px; font: 1.25rem/1 "Melodrame", Georgia, serif; }
.story-card--2 .post-art, .story-card--2 .card-back { background: var(--sky); color: var(--wine); }
.story-card--3 .post-art, .story-card--3 .card-back { background: var(--butter); color: var(--wine); }
.story-card--4 .post-art { background: var(--rose-light); color: var(--wine); }
.story-card--4 .card-back { background: var(--wine); color: var(--paper); }
.story-card:not(.story-card--1) .post-art strong em { color: var(--wine); }
.story-continue { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 0 24px 55px; font-size: .875rem; text-underline-offset: 6px; }
.story-paper, .story-clouds { display: none; }

/* Four cards stay in one scene: stack → cloud crossing → flip → spread. */
.story-animated { height: 160svh; margin-bottom: calc(-1 * var(--story-tail, 0px)); }
.story-animated .story-stage { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; contain: layout paint style; background: var(--wine); }
.story-animated .story-paper { display: block; position: absolute; inset: -75px 0 auto; height: 200%; background: var(--paper); mask-image: linear-gradient(to bottom, transparent, #000 155px); transform: translate3d(0, var(--cloud-y, 97vh), 0); z-index: 0; }
.story-animated .story-intro { position: absolute; inset: 0; background: transparent; padding-top: clamp(30px, 5.5vh, 70px); z-index: 3; opacity: var(--intro-opacity, 1); transform: translate3d(0, var(--intro-y, 0px), 0); }
.story-animated .story-intro .hero-copy { max-width: 48%; }
.story-animated .hero-description { max-width: 360px; margin-top: 26px; }
.story-animated .hero-actions { gap: 18px; margin-top: 28px; }
.story-animated .story-scroll-link { position: absolute; left: var(--gutter); bottom: 23%; margin: 0; }
.story-animated .story-deck-note { display: block; position: absolute; left: 62%; bottom: 22%; font: clamp(1.6rem, 2.6vw, 2.8rem)/1 "Melodrame", Georgia, serif; color: var(--rose); transform: rotate(-6deg); }
.story-deck-note span { display: block; }
.story-animated .story-deck-controls { display: flex; position: absolute; top: var(--deck-controls-y, 68%); left: var(--deck-controls-x, 73.5%); transform: translateX(-50%); align-items: center; gap: 16px; white-space: nowrap; }
.deck-count { color: var(--rose); font-size: .6875rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.deck-pause { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--paper); font: inherit; font-size: .6875rem; cursor: pointer; text-underline-offset: 4px; }
.deck-pause:hover { text-decoration: underline; }
.deck-pause:focus-visible { outline: 2px solid var(--sky); outline-offset: 5px; border-radius: 3px; }
.story-animated .story-outro { position: absolute; inset: var(--outro-top, 70%) 0 auto; padding-block: 0; z-index: 2; opacity: var(--outro-opacity, 0); transform: translate3d(0, var(--outro-y, -70px), 0); }
.story-animated .story-cards { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; z-index: 10; }
.story-animated .story-cards { mask-image: linear-gradient(to bottom, #000 calc(var(--cloud-y, 97vh) - 130px), transparent calc(var(--cloud-y, 97vh) - 22px), transparent calc(var(--cloud-y, 97vh) + 18px), #000 calc(var(--cloud-y, 97vh) + 115px)); }
.story-animated .story-card { position: absolute; left: 0; top: 0; width: var(--card-w, 310px); height: var(--card-h, 425px); contain: layout paint; transform-origin: center; transform: translate3d(var(--card-x, 65vw), var(--card-y, 12vh), 0) rotate(var(--card-angle, 0deg)) scale(var(--card-sx, 1), var(--card-sy, 1)); transition: transform 170ms cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.story-animated .card-flipper { position: relative; height: 100%; width: 100%; transform-style: preserve-3d; transform: rotateY(var(--card-flip, 0deg)); transition: transform 160ms cubic-bezier(.22, .61, .36, 1); }
.story-animated .card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 42px rgb(75 24 31 / 0.1333), 0 2px 5px rgb(75 24 31 / 0.0706); }
.story-animated .card-back { transform: rotateY(180deg); }
.story-animated .story-clouds { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 20; transform: translate3d(0, var(--cloud-y, 97vh), 0); }
.story-animated .story-clouds-back { z-index: 5; }
/* Optical screen compositing preserves the photographed vapor without an alpha cutout.
   Black disappears into the backdrop; feathered copies conceal the horizontal joins. */
.story-clouds {
  mix-blend-mode: screen;
  --cloud-width: max(760px, 80vw);
  --cloud-height: calc(var(--cloud-width) / 3);
  --cloud-cycle: calc(var(--cloud-width) * .72);
}
.cloud-drift {
  position: absolute;
  top: calc(var(--cloud-height) * -.57);
  left: calc(var(--cloud-cycle) * -1);
  width: calc(var(--cloud-cycle) * 3 + var(--cloud-width));
  height: var(--cloud-height);
  animation: cloud-flow 48s linear infinite;
  will-change: transform;
}
.cloud-piece {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--cloud-width);
  height: 100%;
  background: url('../assets/cloud-silk.png') center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  filter: saturate(.35) brightness(1.1);
  mask-image: linear-gradient(to right, transparent, #000 18% 82%, transparent), linear-gradient(to bottom, #000 55%, transparent 95%);
  mask-composite: intersect;
}
.cloud-piece:nth-child(2) { left: var(--cloud-cycle); }
.cloud-piece:nth-child(3) { left: calc(var(--cloud-cycle) * 2); }
.cloud-piece:nth-child(4) { left: calc(var(--cloud-cycle) * 3); }
.story-clouds-back { --cloud-width: max(820px, 88vw); }
.story-clouds-back .cloud-drift {
  margin-top: -28px;
  opacity: .82;
  animation-duration: 72s;
  animation-direction: reverse;
}
.story-clouds-back .cloud-piece { transform: scaleX(-1); filter: saturate(.3) brightness(.95); }
.cloud-wake {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(180px, 24vw, 330px);
  height: clamp(110px, 15vw, 210px);
  background: url('../assets/cloud-silk.png') 50% 64% / 170% auto no-repeat;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse, #000 5%, transparent 70%);
  filter: saturate(.38) brightness(1.04);
  opacity: var(--wake-opacity, 0);
  transform: translate3d(var(--wake-x, 0px), var(--wake-y, 0px), 0) translate(-50%, -50%) scale(var(--wake-scale, 1));
  will-change: transform, opacity;
}
.story-ambient-paused .cloud-drift, .story-offscreen .cloud-drift { animation-play-state: paused; }
@keyframes cloud-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--cloud-cycle) * -1), 0, 0); } }
.story-animated .story-continue { position: absolute; z-index: 25; inset: var(--continue-top, 85%) 0 auto; padding: 0 24px; opacity: var(--outro-opacity, 0); }

@media (max-width: 1100px) and (min-width: 761px) {
  .story-animated .story-intro h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
  .story-animated .hero-actions { gap: 10px; }
  .story-animated .hero-description { max-width: 320px; }
  .story-animated .card-back { padding: 20px; }
  .story-animated .card-back h3 { font-size: 1.6rem; margin-block: auto; padding-block: 18px; }
  .story-animated .card-back p { display: none; }
  .story-animated .back-brand { padding-top: 0; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .story-animated .story-intro h1 { font-size: clamp(2.6rem, 7.8vh, 3.6rem); }
  .story-animated .story-intro .eyebrow { margin-bottom: 16px; }
  .story-animated .hero-description { margin-top: 18px; }
  .story-animated .hero-actions { margin-top: 18px; }
  .story-animated .story-scroll-link { bottom: 14%; }
  .story-animated .story-deck-note { bottom: 14%; }
}
@media (max-width: 760px) {
  .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 15px 20px 40px; }
  .story-intro { padding-top: 20px; }
  .story-intro h1 { font-size: clamp(2.5rem, 8.8vw, 4rem); }
  .card-back { padding: 18px; }
  .card-back h3 { font-size: 1.4rem; margin-bottom: 14px; }
  .card-back p { font-size: .875rem; }
  .story-animated { height: 175svh; }
  .story-animated .story-intro { padding-top: 15px; }
  .story-animated .story-intro .hero-copy { max-width: 100%; }
  .story-animated .story-intro .eyebrow { margin-bottom: 12px; font-size: .7rem; }
  .story-animated .story-intro h1 { font-size: clamp(2.4rem, 8.5vw, 3.8rem); line-height: 1; }
  .story-animated .story-intro h1 br { display: none; }
  .story-animated .story-intro h1 em { font-size: 1.3em; margin-top: 3px; margin-bottom: 3px; }
  .story-animated .hero-description { margin-top: 10px; font-size: .9375rem; max-width: 340px; line-height: 1.55; }
  .story-animated .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 8px 15px; margin-top: 14px; }
  .story-animated .hero-actions .button { min-height: 44px; padding: 5px 8px 5px 16px; font-size: .8125rem; gap: 12px; }
  .story-animated .hero-actions .button-icon { width: 30px; height: 30px; font-size: 1.1rem; }
  .story-animated .hero-actions .text-link { font-size: .75rem; gap: 8px; }
  .story-animated .story-deck-note { display: none; }
  .story-animated .story-scroll-link { top: calc(var(--deck-controls-y) + 56px); bottom: auto; font-size: .75rem; left: 0; width: 100%; justify-content: center; }
  .story-animated .post-header { min-height: 30px; font-size: 7px; padding: 4px 6px; gap: 4px; }
  .story-animated .post-identity small { font-size: 6px; margin-top: 1px; }
  .story-animated .post-avatar { width: 20px; height: 20px; }
  .story-animated .post-menu { width: 11px; height: 11px; }
  .story-animated .post-art { padding: 12px 8px; }
  .story-animated .post-art-label { font-size: 8px; }
  .story-animated .post-art strong { font-size: 30px; }
  .story-animated .post-pending { font-size: 9px; }
  .story-animated .post-footer { min-height: 21px; padding: 4px 6px 0; gap: 2px; }
  .story-animated .post-actions { gap: 4px; }
  .story-animated .post-actions img, .story-animated .post-bookmark { width: 10px; height: 10px; }
  .story-animated .post-caption { min-height: 22px; font-size: 6px; padding: 2px 6px 4px; }
  .story-animated .story-outro { padding-top: 0; }
  .story-animated .story-outro h2 { font-size: clamp(2rem, 6.8vw, 3rem); }
  .story-animated .story-outro .eyebrow { font-size: .6875rem; margin-bottom: 9px; }
  .story-animated .card-back { padding: 18px 16px; }
  .story-animated .back-index { font-size: .625rem; }
  .story-animated .card-back h3 { font-size: clamp(1.25rem, 4.8vw, 1.7rem); margin-block: auto; padding-block: 18px; }
  .story-animated .card-back h3 em { font-size: 1.22em; }
  .story-animated .card-back p { display: none; }
  .story-animated .back-brand { font-size: 1.1rem; padding-top: 0; }
  .story-animated .story-continue { font-size: .75rem; gap: 8px; }
  .story-clouds { --cloud-width: 760px; }
  .story-clouds-back { --cloud-width: 820px; }
  .cloud-drift { animation-duration: 42s; }
  .story-clouds-back .cloud-drift { margin-top: -20px; animation-duration: 64s; }
  .story-animated .story-deck-controls { gap: 13px; }
}
@media (max-width: 380px) {
  .story-animated .story-intro h1 { font-size: 2.15rem; }
  .story-animated .hero-actions { gap: 5px 10px; }
  .story-animated .hero-description { font-size: .875rem; }
  .story-animated .hero-actions .text-link { font-size: .6875rem; }
  .story-animated .card-back { padding: 16px 13px; }
  .story-animated .card-back h3 { font-size: 1.15rem; }
  .story-cards:not(.story-animated .story-cards) { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .cloud-drift, .cloud-wake { will-change: auto; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .story-animated .story-intro h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .story-animated .story-intro .eyebrow { margin-bottom: 8px; }
  .story-animated .hero-description { font-size: .8125rem; line-height: 1.45; margin-top: 8px; }
  .story-animated .hero-actions { margin-top: 8px; }
  .story-animated .story-scroll-link { display: none; }
}