/* ═══════════════════════════════════════════════════════════
   Morning Mint 3.0 — Design Tokens & Styles
   Mobile-first, no frameworks, no dependencies
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  /* Colours */
  --background: #EAE0CB;
  /* warmed for sRGB displays (Android) */
  --surface: #F0EBD8;
  /* warmed proportionally */
  --primary: #2D4530;
  --text-primary: #1C2B1E;
  --text-secondary: #5E6C5E;
  --text-muted: #9A9A8A;
  --accent-sand: #CBB99A;
  --accent-terra: #A05A3E;
  --outline: #C3C8BF;

  /* Spacing (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 32px;
  --s9: 36px;
  --s10: 40px;
  --s11: 44px;
  --s12: 48px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows — warm-toned, keyed to --primary */
  --shadow-sm: 0 1px 3px rgba(45, 69, 48, 0.10), 0 1px 2px rgba(45, 69, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 69, 48, 0.12), 0 2px 4px rgba(45, 69, 48, 0.08);
  --shadow-lg: 0 12px 32px rgba(45, 69, 48, 0.16), 0 4px 8px rgba(45, 69, 48, 0.10);

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Detail view — shared with JS constant DETAIL_IMG_HEIGHT */
  --detail-img-height: 200px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  /* No scroll during splash */
}

/* ─── Splash Screen ─────────────────────────────────────── */
.splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  /* inner fills full viewport height */
  justify-content: center;
  background-color: var(--background);
  z-index: 100;

  /* Exit transition */
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.splash.splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Centre column — full viewport height, greeting anchored to midpoint */
.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 100%;
  /* Horizontal padding only; vertical rhythm is handled by top/bottom halves */
  padding: 0 var(--s6);
  /* Respect notch / home-indicator on iOS */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  text-align: center;
}

/* Upper half — icon + wordmark float down to meet the greeting */
.splash__top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s4);
  /* 16px between icon and wordmark */
  padding-bottom: var(--s6);
  /* 24px breathing room above greeting */
}

/* Lower half — tagline anchored just below the greeting */
.splash__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--s5);
  /* 20px breathing room below greeting */
}

/* ─── Splash element base — hidden until animated ───────── */
.splash__animate {
  opacity: 0;
  transform: translateY(16px);
  animation: splash-rise 0.72s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes splash-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Leaf Icon ─────────────────────────────────────────── */
.splash__icon {
  width: 44px;
  /* reduced ~15% from 52px */
  height: 44px;
  flex-shrink: 0;
}

.splash__icon img,
.splash__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Wordmark ──────────────────────────────────────────── */
.splash__wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8125rem;
  /* 13px */
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1;
}

/* ─── Greeting ──────────────────────────────────────────── */
.splash__greeting {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.125rem;
  /* 34px */
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ─── Tagline ───────────────────────────────────────────── */
.splash__tagline {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ─── Main App ──────────────────────────────────────────── */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  /* Safe area: pushes content below notch / above home indicator */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.app.app--visible {
  opacity: 1;
}

/* ─── Card Stack Header ──────────────────────────────────── */
.stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  flex-shrink: 0;
}

.stack-header__wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  /* 17px */
  color: var(--primary);
  letter-spacing: 0.01em;
}

.stack-header__date {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  /* 12px */
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ─── Card Viewport ─────────────────────────────────────── */
/*
 * overflow-x: clip hides off-screen card slots (like hidden, but does NOT
 * force overflow-y to become auto — so y stays visible and card shadows
 * can bleed above and below the viewport boundary).
 */
.stack-viewport {
  flex: 1;
  overflow-x: clip;
  overflow-y: visible;
  min-height: 0;
}

/* ─── Card Strip (carousel track) ───────────────────────── */
/* One continuous row of card-slots; JS slides it with translateX */
.card-strip {
  display: flex;
  flex-direction: row;
  height: 100%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ─── Card Slot ──────────────────────────────────────────── */
/*
 * Each slot is (100vw - 2×PEEK) wide — one "page" of the carousel.
 * PEEK = 24px, so slot = 100vw - 48px.
 * The strip starts at translateX(24px) for slot 0, which means:
 *   - slot 0: card left edge at 24 px, right edge at vw-24 px
 *   - slot 1's left edge sits exactly at vw-24 px → 24 px peek visible
 * JS computes strip positions using window.innerWidth for exact pixel math.
 */
.card-slot {
  width: calc(100vw - 48px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* Isolates stacking contexts so shadows never bleed into adjacent slots */
}

/* Sibling shadow element decoupled from the card's 3D rotation */
.card-shadow {
  position: absolute;
  width: 86%;
  height: 90%;
  bottom: -2%;
  left: 7%;
  border-radius: var(--r-2xl);
  background-color: rgba(45, 69, 48, 0.45);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}


/* ─── Story Card ─────────────────────────────────────────── */
.card {
  z-index: 1;
  position: relative;
  width: 100%;
  /* ~78% of viewport height; capped so it never overflows the viewport */
  height: min(78vh, 100%);
  border-radius: var(--r-2xl);
  background-color: var(--primary);
  /* fallback while image loads */

  /* Hardware anti-aliasing hints for 3D rotation */
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Prevent native text-selection callout on long-press */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Dynamically added when detail view is open to clip the sliding panel */
.card--detail-open {
  overflow: hidden;
}

/* Full-bleed image */
.card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-2xl);
  outline: 1px solid transparent;
}

/* Bottom gradient for text legibility */
.card__gradient {
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background: linear-gradient(to bottom,
      rgba(24, 38, 26, 0) 40%,
      rgba(24, 38, 26, 0.4) 65%,
      rgba(24, 38, 26, 0.95) 100%);
}

/* Content column — lives in the lower portion of the card */
.card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* Category tag */
.card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: var(--s1) var(--s3);
  background-color: var(--accent-terra);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* 10px */
  font-weight: 600;
  letter-spacing: 0.10em;
  color: #fff;
  line-height: 1.6;
}

.tag-icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.tag-text {
  text-transform: uppercase;
  transform: translateY(0.5px);
}

/* Card title — Playfair Display, white; <em> children render italic */
.card__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.625rem;
  /* 26px */
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
}

.card__title em {
  font-style: italic;
}

/* Tag group — stacks category tag and source label */
.card__tag-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
}

/* Source label — sits below the category tag */
.card__source {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* 10px */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.50);
}

/* Tap cue — muted prompt in place of the old CTA button */
.card__tap-cue {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: var(--s2);
  /* 8px extra separation below the title */
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── Progress Indicator ─────────────────────────────────── */
.stack-progress {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s5) var(--s8);
}

.stack-progress__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.stack-progress__dashes {
  display: flex;
  gap: var(--s1);
  align-items: center;
}

.stack-progress__dash {
  height: 2px;
  width: 12px;
  border-radius: var(--r-full);
  background-color: var(--outline);
  opacity: 0.5;
  transition: background-color 0.25s ease, opacity 0.25s ease;
  transform: translateZ(0);
  /* Prevent WAAPI width animation trail artefacts on iOS */
  will-change: width;
}

.stack-progress__dash--completed {
  background-color: var(--accent-sand);
  opacity: 1;
}

.stack-progress__dash--active {
  background-color: var(--primary);
  opacity: 1;
  width: 20px;
}

/* ─── Closing Cards ──────────────────────────────────────── */

/* Beat 1 — text zone + floating image layout */
.card--beat1 {
  background-color: var(--surface);
  /* fills gap around the floating image */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(203, 185, 154, 0.35);
}

/* Top zone — no change to border-radius; card clips its corners */
.beat1__text {
  flex: 0 0 60%;
  background-color: var(--surface);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: var(--s4) var(--s5) calc(var(--s5) + 2.5rem + var(--s5));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  min-height: 0;
}

.beat1__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s1);
  opacity: 0;
}

.beat1__meta-day {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}

.beat1__meta-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.beat1__message {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-top: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid var(--accent-sand);
  opacity: 0;
}



.beat1__share {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  position: absolute;
  bottom: var(--s5);
  left: var(--s5);
  padding: var(--s3) var(--s5);
  background-color: transparent;
  border: 1px solid var(--accent-sand);
  border-radius: var(--r-full);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0;
}

.beat1__share:active {
  opacity: 0.6;
  transform: scale(0.97);
}

/* Image zone — full-bleed to sides; wave handles the top boundary */
.beat1__image-zone {
  flex: 1 1 40%;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

.beat1__image-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom,
      var(--surface) 0%,
      var(--surface) 5%,
      color-mix(in srgb, var(--surface) 96%, transparent) 15%,
      color-mix(in srgb, var(--surface) 75%, transparent) 35%,
      color-mix(in srgb, var(--surface) 40%, transparent) 60%,
      color-mix(in srgb, var(--surface) 10%, transparent) 85%,
      transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.beat1__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Staggered entrance animations — triggered by JS on first view */
@keyframes content-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.beat1__meta--enter {
  animation: content-rise 0.65s var(--ease-out) both;
}

.beat1__message--enter {
  animation: content-rise 0.80s var(--ease-out) 0.20s both;
}

.beat1__share--enter {
  animation: content-rise 0.65s var(--ease-out) 0.38s both;
}

/* ─── Beat 2 — "Done for today" closing card ─────────────── */

.card--beat2 {
  background-color: var(--text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(203, 185, 154, 0.35);
}

/* Image zone — top 40%; scrim fades up into text zone */
.beat2__image-zone {
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  margin-bottom: -1px;
  /* seal sub-pixel gap from 3D card tilt */
}

.beat2__image-zone::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top,
      var(--text-primary) 0%,
      var(--text-primary) 5%,
      color-mix(in srgb, var(--text-primary) 96%, transparent) 15%,
      color-mix(in srgb, var(--text-primary) 75%, transparent) 35%,
      color-mix(in srgb, var(--text-primary) 40%, transparent) 60%,
      color-mix(in srgb, var(--text-primary) 10%, transparent) 85%,
      transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.beat2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text zone — bottom 60%; dark panel gives Beat 2 a distinct final-chapter feel */
.beat2__text {
  flex: 0 0 60%;
  background-color: var(--text-primary);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding: 0 var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 0;
}

.beat2__meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.60);
  text-align: center;
  width: 100%;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--accent-sand);
  margin-bottom: var(--s1);
  opacity: 0;
}

.beat2__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: -0.01em;
  margin-top: var(--s3);
  text-align: center;
  opacity: 0;
}

.beat2__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 0;
}

.beat2__signoff {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-top: var(--s4);
  opacity: 0;
}

.beat2__wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  margin-top: auto;
  padding-top: var(--s4);
  opacity: 0;
}

.beat2__support {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-top: auto;
  gap: var(--s2);
  opacity: 0;
}


.beat2__support-text {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.beat2__support-btn {
  display: inline-block;
  margin-top: var(--s1);
  padding: var(--s2) var(--s5);
  border: 1px solid rgba(203, 185, 154, 0.40);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(203, 185, 154, 0.80);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Staggered entrance animations */
.beat2__meta--enter {
  animation: content-rise 0.65s var(--ease-out) both;
}

.beat2__headline--enter {
  animation: content-rise 0.80s var(--ease-out) 0.20s both;
}

.beat2__support--enter {
  animation: content-rise 0.65s var(--ease-out) 0.38s both;
}

.beat2__signoff--enter {
  animation: content-rise 0.65s var(--ease-out) 0.55s both;
}


/* ─── Utility: safe area insets for notched phones ──────── */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── Detail Panel ───────────────────────────────────────── */
/*
 * Layout origin is at --detail-img-height (200px) from the card top so the
 * panel is flush with the card image by geometry — no transform-induced gap.
 * GSAP only animates translateY for the rise/fall; open state is y=0.
 */
.detail-panel {
  position: absolute;
  top: var(--detail-img-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
  will-change: transform;
  /* All panel gestures handled by JS — no native touch behaviour.
     Because this is a scroll container (overflow:hidden), touch-action
     does not propagate into .detail__scroll below. */
  touch-action: none;
  /* Prevent text selection inside the panel */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Drag handle — floats above the hero image */
.detail__handle-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: var(--s3);
  z-index: 2;
  pointer-events: none;
}

.detail__handle-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--outline);
}

/* Panel content — overflow hidden; layout must fit without scrolling */
.detail__scroll {
  flex: 1;
  overflow: hidden;
  touch-action: pan-y;
  min-height: 0;
}

.detail__body {
  padding: var(--s5) var(--s6);
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  display: flex;
  flex-direction: column;
}

.detail__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: 12px;
}



.detail__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: var(--s1) var(--s3);
  background-color: var(--accent-terra);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #fff;
  line-height: 1.6;
}

.detail__readtime {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.detail__summary {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  margin-top: var(--s3);
}

.detail__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: 14px;
}

.detail__bullet {
  display: grid;
  grid-template-columns: 6px 1fr;
  column-gap: var(--s3);
}

.bullet__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background-color: var(--accent-sand);
  align-self: start;
  margin-top: 5px;
}

.detail__bullet-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
}

.detail__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--s5);
  padding: var(--s3) var(--s5);
  background-color: var(--primary);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.detail__cta:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* ─── Toast Notification ────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background-color: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-full);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
}

.toast.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Desktop Layout ────────────────────────────────────── */
@media (min-width: 480px) {
  body {
    background-color: #18201a;
  }

  .splash,
  .app {
    left: 50%;
    right: auto;
    width: 430px;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px var(--outline), 0 16px 64px rgba(0, 0, 0, 0.25);
  }

  .toast {
    bottom: 40px;
  }
}