/* ═══════════════════════════════════════════════════════════════════════════
   Afterglow Effect CSS — extracted from iOS app StoryPreviewView.swift
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base canvas + pseudo-element scaffolding */
.canvas {
  width: 100%;
  height: 100%;
  padding: var(--inset, 72px);
  border-radius: 0px;
  position: relative;
  overflow: hidden;
}
.canvas::before, .canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.story-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
p {
  font-family: var(--font-body);
  font-size: var(--size-body, 17px);
  line-height: var(--leading-body, 1.85);
  color: var(--body);
  margin: 0 0 1.05em 0;
  font-weight: 400;
  text-shadow: none;
}
p:last-child { margin-bottom: 0; }
p strong { color: var(--body); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────
   1. LINEN LIGHT
   ───────────────────────────────────────────────────────────────────────── */
.s-linen {
  background: #E8DABC;
  border: 1px solid #DDD5C4;
  box-shadow:
    inset 0 0 80px rgba(180,150,90,0.12),
    0 28px 70px rgba(0,0,0,0.65);
  --font-display: 'EB Garamond', serif;
  --font-body:    'EB Garamond', serif;
  --font-ui:      'EB Garamond', serif;
  --weight-display: 400; --weight-light: 400;
  --size-body: 18px; --leading-body: 1.9;
  --title:#2C2416; --body:#362C1E; --eyebrow:#8A7860;
  --accent:#7A6040; --strong:#180E08; --divider:rgba(100,75,30,0.15);
  --text-shadow: 0 0.5px 1.5px rgba(90,55,10,0.14), 0 1px 3px rgba(70,40,5,0.07);
}
.s-linen::before {
  background:
    linear-gradient(to bottom,  rgba(100,72,24,0.30) 0%, transparent 24%),
    linear-gradient(to top,     rgba(100,72,24,0.26) 0%, transparent 24%),
    radial-gradient(ellipse 75% 50% at 50% 50%, rgba(255,245,218,0.13) 0%, transparent 100%),
    radial-gradient(ellipse 80% 55% at 14% -6%, rgba(255,238,195,0.44) 0%, transparent 62%),
    radial-gradient(ellipse at 88% 95%, rgba(140,100,40,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 12% 96%, rgba(120,85,30,0.10) 0%, transparent 45%);
}
.s-linen::after {
  background-image:
    url('/textures/tex-linen.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.042'/%3E%3C/svg%3E");
  background-size: cover, 180px;
  mix-blend-mode: soft-light;
  opacity: 0.40;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BLACK DUNE
   ───────────────────────────────────────────────────────────────────────── */
.s-marble {
  background: #09090C;
  border: 1px solid rgba(180,175,168,0.07);
  box-shadow: 0 28px 70px rgba(0,0,0,0.98);
  --font-display: 'Crimson Pro', serif;
  --font-body:    'Crimson Pro', serif;
  --font-ui:      'Crimson Pro', serif;
  --weight-display: 400; --weight-light: 400;
  --size-body: 18px; --leading-body: 1.9;
  --title:#EDE5D4; --body:#B5AA98; --eyebrow:#5E5648;
  --accent:#CEC4B0; --strong:#F8F2E6; --divider:rgba(200,190,172,0.09);
  --text-shadow: 0 -0.5px 0 rgba(245,238,222,0.06), 0 0 14px rgba(210,200,182,0.08), 0 2px 5px rgba(0,0,0,0.72);
}
.s-marble::before { background: none; }
.s-marble::after {
  background-image:
    url('/textures/tex-silk.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: cover, 165px;
  background-position: right top, center;
  mix-blend-mode: screen;
  opacity: 0.25;
  filter: blur(8px);
  inset: -12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. DARK VELVET
   ───────────────────────────────────────────────────────────────────────── */
.s-velvet {
  background: #200E18;
  border: 1px solid #361825;
  box-shadow:
    inset 0 0 90px rgba(80,10,25,0.55),
    0 28px 70px rgba(0,0,0,0.96);
  --font-display: 'Alegreya', serif;
  --font-body:    'Alegreya', serif;
  --font-ui:      'Alegreya', serif;
  --weight-display: 400; --weight-light: 400;
  --size-body: 19px; --leading-body: 1.92;
  --title:#F0D8CC; --body:#C08880; --eyebrow:#78484A;
  --accent:#D49088; --strong:#FAE8E2; --divider:rgba(200,110,100,0.14);
  --text-shadow: -1px 0 4px rgba(200,110,45,0.16), 1px 1.5px 5px rgba(0,0,0,0.6);
}
.s-velvet::before {
  background:
    radial-gradient(ellipse 58% 85% at -8% 48%, rgba(210,120,40,0.25) 0%, transparent 72%),
    radial-gradient(ellipse at 50% -2%, rgba(180,70,50,0.16) 0%, transparent 48%),
    radial-gradient(ellipse 50% 90% at 106% 50%, rgba(0,0,0,0.55) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 112%, rgba(0,0,0,0.60) 0%, transparent 52%);
}
.s-velvet::after {
  background-image:
    url('/textures/tex-velvet.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: cover, 185px;
  mix-blend-mode: screen;
  opacity: 0.14;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. RAW PRESS
   ───────────────────────────────────────────────────────────────────────── */
.s-press {
  background: #E2DDD0;
  border: 1px solid #C8C2B0;
  box-shadow:
    inset 0 0 55px rgba(80,65,30,0.09),
    0 28px 70px rgba(0,0,0,0.72);
  --font-display: 'Libre Franklin', sans-serif;
  --font-body:    'Libre Franklin', sans-serif;
  --font-ui:      'Libre Franklin', sans-serif;
  --weight-display: 600; --weight-light: 300;
  --size-body: 15.5px; --leading-body: 1.8;
  --title:#181410; --body:#282218; --eyebrow:#6A6050;
  --accent:#3C3020; --strong:#080604; --divider:rgba(60,50,20,0.16);
  --text-shadow: 0 1px 0 rgba(35,22,5,0.22), 0 -0.5px 0 rgba(255,248,232,0.55);
}
.s-press::before {
  background:
    radial-gradient(ellipse at 0%   0%, rgba(60,42,12,0.24) 0%, transparent 38%),
    radial-gradient(ellipse at 100% 0%, rgba(55,38,10,0.20) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(65,45,12,0.26) 0%, transparent 40%),
    radial-gradient(ellipse at 0%   100%, rgba(60,42,12,0.22) 0%, transparent 38%),
    linear-gradient(to bottom, rgba(255,245,215,0.12) 0%, transparent 28%, rgba(110,85,25,0.055) 100%);
}
.s-press::after {
  background-image:
    url('/textures/tex-paper.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.058'/%3E%3C/svg%3E");
  background-size: cover, 158px;
  mix-blend-mode: soft-light;
  opacity: 0.28;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. TRAVERTINE
   ───────────────────────────────────────────────────────────────────────── */
.s-travertine {
  background: #CEC0A8;
  border: 1px solid #B0A48C;
  box-shadow:
    inset 0 0 70px rgba(100,72,22,0.15),
    0 28px 70px rgba(0,0,0,0.78);
  --font-display: 'Lora', serif;
  --font-body:    'Lora', serif;
  --font-ui:      'Lora', serif;
  --weight-display: 500; --weight-light: 400;
  --size-body: 17.5px; --leading-body: 1.88;
  --title:#2E1E0E; --body:#3C2818; --eyebrow:#80624A;
  --accent:#8A5A30; --strong:#160800; --divider:rgba(120,80,30,0.2);
  --text-shadow: 0.5px 1px 1px rgba(55,25,5,0.28), -0.3px -0.3px 0.5px rgba(255,248,228,0.52);
}
.s-travertine::before {
  background:
    radial-gradient(ellipse 105% 52% at 50% -6%, rgba(255,218,135,0.52) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 112%, rgba(80,105,140,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 90% at 0%   50%, rgba(185,145,65,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 90% at 100% 50%, rgba(185,145,65,0.07) 0%, transparent 55%);
}
.s-travertine::after {
  background-image:
    url('/textures/tex-travertine.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.062'/%3E%3C/svg%3E");
  background-size: cover, 172px;
  mix-blend-mode: soft-light;
  opacity: 0.30;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. STUDIO GLASS
   ───────────────────────────────────────────────────────────────────────── */
.s-glass {
  background: #B2CAD8;
  border: 1px solid rgba(155,190,215,0.50);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 1px 0 0 rgba(255,255,255,0.30),
    0 28px 70px rgba(0,0,0,0.72);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-ui:      'Space Grotesk', sans-serif;
  --weight-display: 500; --weight-light: 300;
  --size-body: 16px; --leading-body: 1.82;
  --title:#06141E; --body:#0E2030; --eyebrow:#285878;
  --accent:#124068; --strong:#020810; --divider:rgba(8,40,85,0.16);
  --text-shadow: 0 0 6px rgba(50,115,175,0.20), 0 1px 2px rgba(4,16,38,0.22);
}
.s-glass::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.08) 14%, transparent 32%),
    radial-gradient(ellipse at 50% 116%, rgba(8,45,105,0.14) 0%, transparent 52%);
}
.s-glass::after {
  background-image:
    url('/textures/tex-glass.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.042'/%3E%3C/svg%3E");
  background-size: cover, 120px;
  background-position: 65% center, center;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. VERDIGRIS
   ───────────────────────────────────────────────────────────────────────── */
.s-verdigris {
  background: #142820;
  border: 1px solid #1E3828;
  box-shadow:
    inset 0 0 85px rgba(0,16,10,0.52),
    inset 0 1px 0 rgba(100,200,130,0.04),
    0 28px 70px rgba(0,0,0,0.92);
  --font-display: 'Eczar', serif;
  --font-body:    'Eczar', serif;
  --font-ui:      'Eczar', serif;
  --weight-display: 500; --weight-light: 400;
  --size-body: 17px; --leading-body: 1.9;
  --title:#D0A858; --body:#A07840; --eyebrow:#5A4818;
  --accent:#D8B060; --strong:#E8C870; --divider:rgba(185,145,52,0.15);
  --text-shadow: 0 -1px 1.5px rgba(225,185,75,0.22), 0 2px 4px rgba(0,0,0,0.7);
}
.s-verdigris::before {
  background:
    radial-gradient(ellipse at 50% -5%, rgba(55,145,88,0.1) 0%, transparent 52%),
    radial-gradient(ellipse 65% 85% at 0%  50%, rgba(70,165,100,0.06) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.42) 0%, transparent 52%);
}
.s-verdigris::after {
  background-image:
    url('/textures/tex-copper.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: cover, 182px;
  mix-blend-mode: overlay;
  opacity: 0.18;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. SMOKE
   ───────────────────────────────────────────────────────────────────────── */
.s-smoke {
  background: #1A1A1C;
  border: 1px solid #28282E;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.022),
    0 28px 70px rgba(0,0,0,0.97);
  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-ui:      'Inter', sans-serif;
  --weight-display: 400; --weight-light: 300;
  --size-body: 15.5px; --leading-body: 1.82;
  --title:#EEE8E0; --body:#A0988E; --eyebrow:#545048;
  --accent:#C8C0B5; --strong:#FFFFFF; --divider:rgba(255,255,255,0.08);
  --text-shadow: 0 0 8px rgba(185,172,152,0.11), 0 0 22px rgba(165,152,132,0.05);
}
.s-smoke::before {
  background:
    radial-gradient(ellipse 55% 45% at 50% 46%, rgba(255,248,238,0.068) 0%, transparent 100%),
    radial-gradient(ellipse at 50% -4%, rgba(255,240,215,0.048) 0%, transparent 50%),
    linear-gradient(to top,    rgba(0,0,0,0.55) 0%, transparent 24%),
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 22%);
}
.s-smoke::after {
  background-image:
    url('/textures/tex-smoke.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.058'/%3E%3C/svg%3E");
  background-size: cover, 192px;
  mix-blend-mode: screen;
  opacity: 0.11;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. BOTANICA
   ───────────────────────────────────────────────────────────────────────── */
.s-botanica {
  background: #D8E4D0;
  border: 1px solid #B8CCAC;
  box-shadow:
    inset 0 0 65px rgba(38,80,28,0.09),
    0 28px 70px rgba(0,0,0,0.68);
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito', sans-serif;
  --font-ui:      'Nunito', sans-serif;
  --weight-display: 600; --weight-light: 300;
  --size-body: 16.5px; --leading-body: 1.85;
  --title:#1A2E14; --body:#283C20; --eyebrow:#587850;
  --accent:#3A6030; --strong:#0A1808; --divider:rgba(30,82,20,0.15);
  --text-shadow: 0 0.5px 2px rgba(25,45,18,0.16), 0 1px 1px rgba(18,35,12,0.09);
}
.s-botanica::before {
  background:
    radial-gradient(ellipse 72% 62% at 50% 32%, rgba(255,255,255,0.36) 0%, transparent 72%),
    radial-gradient(ellipse at 50% 110%, rgba(28,62,18,0.13) 0%, transparent 52%);
}
.s-botanica::after {
  background-image:
    url('/textures/tex-botanica.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.068'/%3E%3C/svg%3E");
  background-size: cover, 172px;
  background-position: center 25%, center;
  mix-blend-mode: soft-light;
  opacity: 0.22;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. RAW SILK
   ───────────────────────────────────────────────────────────────────────── */
.s-silk {
  background: #E8DCC8;
  border: 1px solid #CEC0A8;
  box-shadow:
    inset 0 0 72px rgba(140,112,58,0.12),
    0 28px 70px rgba(0,0,0,0.72);
  --font-display: 'IM Fell English', serif;
  --font-body:    'IM Fell English', serif;
  --font-ui:      'IM Fell English', serif;
  --weight-display: 400; --weight-light: 400;
  --size-body: 18px; --leading-body: 1.92;
  --title:#2A2018; --body:#382C1C; --eyebrow:#88705C;
  --accent:#8A6030; --strong:#120C06; --divider:rgba(110,82,30,0.16);
  --text-shadow: 0.4px 0.4px 0 rgba(255,248,218,0.58), -0.4px -0.4px 1px rgba(55,28,8,0.18);
}
.s-silk::before {
  background:
    radial-gradient(ellipse 72% 58% at 82% -6%, rgba(255,232,182,0.58) 0%, transparent 65%),
    radial-gradient(ellipse at 8%  112%, rgba(80,52,12,0.22) 0%, transparent 52%),
    radial-gradient(ellipse 40% 90% at 0%  50%, rgba(105,75,22,0.1) 0%, transparent 55%);
}
.s-silk::after {
  background-image:
    url('/textures/tex-rawsilk.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.042'/%3E%3C/svg%3E");
  background-size: cover, 180px;
  mix-blend-mode: soft-light;
  opacity: 0.28;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. ALABASTER
   ───────────────────────────────────────────────────────────────────────── */
.s-alabaster {
  background: #EDEAE2;
  border: 1px solid rgba(180,175,162,0.28);
  box-shadow:
    inset 0 0 60px rgba(200,195,180,0.08),
    0 28px 70px rgba(0,0,0,0.55);
  --font-display: 'Fraunces', serif;
  --font-body:    'Fraunces', serif;
  --font-ui:      'Fraunces', serif;
  --weight-display: 400; --weight-light: 300;
  --size-body: 18px; --leading-body: 1.92;
  --title:#2A2820; --body:#3A3630; --eyebrow:#8A8478;
  --accent:#5A5650; --strong:#181410; --divider:rgba(80,76,68,0.12);
  --text-shadow: none;
}
.s-alabaster::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,252,244,0.50) 0%, transparent 100%),
    linear-gradient(to bottom,
      rgba(150,145,135,0.10) 0%, transparent 18%,
      transparent 82%, rgba(130,125,115,0.12) 100%);
}
.s-alabaster::after {
  background-image:
    url('/textures/tex-alabaster.jpg'),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
  background-size: cover, 175px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}