/* Postcard from the Lunaverse: the page shell (sky, postcard, sign, note, chips, strip mount).
   The little story inside #story is styled by story.css. Motion uses transform and opacity only
   (plus the sign's bulb chase and one arrow draw); html.sv-rm stops everything. */

/* Metric-adjusted local stand-in for Caveat, so the handwriting keeps its size while the web font loads. */
@font-face {
  font-family: "Caveat Fallback";
  src: local("Segoe Print"), local("Bradley Hand"), local("Comic Sans MS");
  size-adjust: 75%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --sv-night: #0b091c;
  --sv-horizon: rgba(232, 114, 177, .25);
  --sv-cream: #fbf1da;
  --sv-paper: #f6e9cf;
  --sv-card-ink: #2a1d52;
  --sv-script: #c4498d;
  --sv-name-shadow: #f2c6dd;
  --sv-lav: #b99dce;
  --sv-lav-deep: #8a76b3;
  --sv-out: #3b2346;
  --sv-pink: #e872b1;
  --sv-pink-deep: #dc70ac;
  --sv-violet: #a275db;
  --sv-yellow: #f7c948;
  --sv-teal: #72d8cd;
  --sv-ink: #f5efdf;
  --sv-ink-soft: #c9bed8;
  --sv-ink-dim: #8f84a3;
  --sv-bubble: #fbf4e4;
  --sv-bubble-ink: #1d1735;
  --sv-bubble-line: #c9b4dc;
  --sv-display: "Cormorant Garamond", Georgia, serif;
  --sv-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sv-hand: "Caveat", "Caveat Fallback", cursive;
  --sv-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --strip-min: clamp(112px, 20svh, 210px);
  --chrome-h: 329px;                  /* everything except the photo and the strip (the fit guard is the authority) */
  --pw-max: min(calc(100vw - 76px), 380px);
  --pw: max(190px, min(var(--pw-max), calc((100svh - var(--chrome-h) - var(--strip-min)) / 1.08), var(--pw-cap, 9999px)));
  --top-h: 36px;
  --chain-h: 18px;
  --sign-w: min(340px, calc(100vw - 40px));
  --burst: 50px;
  --ry: 32px;                         /* ridge offset inside .sv-horizon (page.js tunes it to the strip) */
}
@supports not (height: 100svh) {
  :root {
    --strip-min: clamp(112px, 20vh, 210px);
    --pw: max(190px, min(var(--pw-max), calc((100vh - var(--chrome-h) - var(--strip-min)) / 1.08), var(--pw-cap, 9999px)));
  }
}
@media (max-height: 760px) { :root { --chrome-h: 300px; } }
@media (max-height: 700px) { :root { --chrome-h: 268px; --top-h: 30px; --chain-h: 14px; } }
@media (max-height: 600px) { :root { --chrome-h: 240px; --top-h: 28px; --chain-h: 12px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: #0b091c; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: #0b091c;
  color: var(--sv-ink); font-family: var(--sv-sans);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sv-vh-probe { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

/* ------------------------------------------------------------ the world behind the page */
.sv-world {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(60% 34% at 12% 6%, rgba(162, 117, 219, .14), transparent 70%),
    radial-gradient(48% 30% at 90% 16%, rgba(232, 114, 177, .09), transparent 70%),
    linear-gradient(180deg, #0b091c 0%, #171238 30%, #2a1d52 62%, #4b2a68 82%, #6b3577 100%);
}
.sv-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.3px 1.3px at 17px 23px, #fff 50%, transparent 55%),
    radial-gradient(1px 1px at 71px 61px, rgba(255, 244, 211, .9) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 113px 17px, rgba(197, 139, 214, .95) 50%, transparent 55%),
    radial-gradient(1px 1px at 41px 103px, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 139px 89px, rgba(114, 216, 205, .9) 50%, transparent 55%),
    radial-gradient(1px 1px at 97px 131px, rgba(255, 255, 255, .7) 50%, transparent 55%);
  background-size: 157px 149px;
  opacity: .85;
}
.sv-stars--b { background-size: 109px 97px; background-position: 40px 30px; animation: sv-twinkle 6s ease-in-out infinite alternate; }
.sv-rays {
  position: absolute; left: 50%; top: 40svh; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 250, .06) 0 7.5deg, rgba(255, 236, 250, 0) 7.5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 12%, transparent 100%);
  animation: sv-spin 240s linear infinite;
}
.sv-moon {
  position: absolute; left: 50%; top: 40svh; width: min(92vmin, 700px); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; opacity: .55;
  background: radial-gradient(circle at 38% 34%, #3a3168, #241d4a 62%, #1a1538);
  box-shadow: 0 0 120px 30px rgba(162, 117, 219, .18), inset 10px 14px 40px rgba(201, 180, 220, .16);
}
.sv-moon i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1a1538, #241d4a 70%); box-shadow: inset -2px -3px 0 rgba(201, 180, 220, .08); }
.sv-moon i:nth-child(1) { left: 18%; top: 22%; width: 13%; height: 13%; }
.sv-moon i:nth-child(2) { left: 66%; top: 30%; width: 8%; height: 8%; }
.sv-moon i:nth-child(3) { left: 58%; top: 70%; width: 10%; height: 10%; }

/* tiny drifting planets (phone); the ringed one stands in for the dune planet */
.sv-tp { position: absolute; border-radius: 50%; top: calc(var(--story-top, 75svh) - 58px); }
.sv-tp--a { left: 5%; width: 8px; height: 8px; background: radial-gradient(circle at 35% 30%, #ffd6ec, #e872b1 62%, #9c3f78); animation: sv-drift 90s ease-in-out infinite alternate; }
.sv-tp--b { right: 7%; width: 12px; height: 12px; margin-top: 16px; background: radial-gradient(circle at 35% 30%, #fff1c4, #f0bd5e 60%, #b8792f); animation: sv-drift 120s ease-in-out -40s infinite alternate-reverse; }
.sv-tp--b i { position: absolute; left: -6px; right: -6px; top: 4px; height: 4px; border: 1.5px solid rgba(247, 201, 72, .85); border-radius: 50%; rotate: -16deg; }
.sv-tp--b.sv-trip i { animation: sv-ring 1.2s ease-in-out infinite; }

/* desktop sky planets (painted) and the little rocket that flies into the dune planet */
.sv-planet {
  position: absolute; display: none; left: var(--px, 0px); top: var(--py, 0px);
  width: calc(var(--ps, 96px) * 1.118); height: var(--ps, 96px); translate: -50% -50%;
  animation: sv-bob 6.4s ease-in-out infinite alternate;
}
.sv-planet--sand { animation-delay: -3.1s; }
html.sv-desktop .sv-planet.sv-on { display: block; }
.sv-planet-art { position: absolute; inset: 0; background: none 0 0 / 600% 100% no-repeat; }
html.sv-sky .sv-planet-art { background-image: url(sky/planets-1.webp); }
.sv-planet--sand .sv-planet-art { background-position-x: 80%; }
.sv-orbit { position: absolute; left: 50%; top: 50%; width: 156%; height: 56%; translate: -50% -50%; rotate: -14deg; opacity: .18; overflow: visible; }
.sv-planet.sv-trip .sv-orbit { opacity: .7; animation: sv-ring 1.4s ease-in-out infinite; }
.sv-skyship { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 0 5px rgba(255, 214, 236, .75)); }

/* horizon: crater ridges with a pink glow, just above the strip (page.js writes --story-top) */
.sv-horizon {
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  top: calc(var(--story-top, 75svh) - 70px); height: calc(var(--story-h, 25svh) + 70px);
  --rh: max(120px, 8.334vw);
}
.sv-horizon::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ry) + var(--rh) * .36);
  background: linear-gradient(180deg, transparent, var(--sv-horizon));
}
.sv-horizon::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ry) + var(--rh) - 1px); bottom: 0; background: linear-gradient(180deg, #2f2858, #262049 60%, #221c43); }
.sv-ridges { position: absolute; left: 0; top: var(--ry); width: 100%; height: var(--rh); }
.sv-dome, .sv-mast { position: absolute; display: none; }
.sv-dome { left: max(10px, 1.6vw); width: clamp(110px, 11vw, 170px); top: calc(var(--ry) + var(--rh) * .4 - clamp(110px, 11vw, 170px) * .86); }
.sv-mast { right: max(14px, 2.6vw); height: clamp(150px, 15vw, 220px); width: auto; aspect-ratio: 80 / 220; top: calc(var(--ry) + var(--rh) * .3 - clamp(150px, 15vw, 220px)); }
@media (min-width: 1100px) { html.sv-desktop .sv-dome, html.sv-desktop .sv-mast { display: block; } }
.sv-dome-slit { animation: sv-blink-soft 3.2s ease-in-out infinite; }
.sv-mast-light, .sv-mast-glow { animation: sv-beacon 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------ page grid */
.sv-page {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  grid-template-areas: "top" "hero" "sign" "psst" "links" "story";
  grid-template-rows: auto auto auto auto auto minmax(var(--strip-min), 1fr);
  min-height: 100vh; min-height: 100svh;
}

/* top bar: garland and the way back */
.sv-top { grid-area: top; position: relative; width: 100%; height: var(--top-h); }   /* no stacking context: garland behind the card, link above it */
.sv-garland { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-bulbs { animation: sv-twinkle-b var(--dur, 3.6s) ease-in-out var(--del, 0s) infinite alternate; }
.sv-back {
  position: absolute; left: max(4px, env(safe-area-inset-left)); top: calc(var(--top-h) / 2 - 22px); z-index: 6;
  display: inline-flex; align-items: center; height: 44px; padding: 0 12px 0 11px;
  color: var(--sv-ink-soft); font: 500 12px/1 var(--sv-mono); letter-spacing: .03em; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sv-back::before {
  content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 9px; bottom: 9px; border-radius: 999px;
  background: rgba(11, 9, 28, .7); border: 1px solid rgba(201, 180, 220, .3);
}
.sv-back:hover { color: var(--sv-ink); }
.sv-back:focus-visible { outline: none; }
.sv-back:focus-visible::before, .sv-chip:focus-visible::before { outline: 3px solid var(--sv-yellow); outline-offset: 3px; }

/* ------------------------------------------------------------ the postcard */
.sv-hero { grid-area: hero; position: relative; z-index: 3; }
.sv-postcard {
  position: relative; margin: 0; width: calc(var(--pw) + 28px); padding: 14px 14px 12px; rotate: -1.2deg; border-radius: 6px;
  background: radial-gradient(120% 80% at 30% 10%, #fffaf0, var(--sv-cream) 60%, var(--sv-paper));
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c9b49a, 0 18px 30px -12px rgba(0, 0, 0, .6), 0 5px 9px -4px rgba(0, 0, 0, .45);
}
.sv-postcard::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid #d8c3a0; border-radius: 3px; pointer-events: none; }
.sv-arch {
  position: relative; z-index: 1; width: var(--pw); aspect-ratio: 1 / 1.08;
  border: 6px solid var(--sv-lav-deep); border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 2px var(--sv-cream), 0 0 0 5px rgba(232, 114, 177, .55);
  background: #2a1d52;
}
.sv-arch-in { position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 0 0; }
.sv-photo { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
.sv-arch-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .14) 0 16%, transparent 30%),
    radial-gradient(90% 60% at 85% 10%, rgba(247, 201, 72, .12), transparent 60%),
    linear-gradient(180deg, transparent 72%, rgba(20, 10, 40, .22));
}
.sv-rivets { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; z-index: 2; }
.sv-rivets path { fill: none; stroke: #fbf1da; stroke-width: 2.4; stroke-dasharray: 0 10; stroke-linecap: round; }
.sv-port {
  position: absolute; z-index: 3; left: 50%; top: -10px; translate: -50% 0; width: 44px; height: 14px;
  display: grid; place-items: center; border: 1px solid #3b2346; border-radius: 3px;
  background:
    radial-gradient(circle at 4px 50%, #8a6a1a 0 1px, transparent 1.4px),
    radial-gradient(circle at calc(100% - 4px) 50%, #8a6a1a 0 1px, transparent 1.4px),
    linear-gradient(180deg, #ecc34a, #d9a92a 55%, #b88a1c);
  color: #3b2346; font: 500 8px/1 var(--sv-mono); letter-spacing: .06em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, .75), 0 1px 1px rgba(59, 35, 70, .45);
}
html.sv-pw-s .sv-port { width: 36px; height: 12px; top: -9px; font-size: 6.5px; letter-spacing: .02em; }

/* moon-sprigs in front of the photo (page.js plants them) */
.sv-sprigs { position: absolute; left: -4px; right: -4px; bottom: -10px; height: 28%; z-index: 3; pointer-events: none; }
.sv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sv-mound { position: absolute; left: 0; bottom: 0; width: 100%; height: 32%; }
.sv-mound--front { z-index: 2; }
.sv-sp {
  position: absolute; z-index: 1; bottom: 6%; left: var(--x); height: var(--h); width: auto; aspect-ratio: 18 / 110;
  translate: -50% 0; transform-origin: 50% 100%; rotate: var(--lean, 0deg); color: var(--c, #e872b1); overflow: visible;
  animation: sv-sway var(--dur, 4s) ease-in-out var(--del, 0s) infinite alternate;
}
.sv-sp--crystal { aspect-ratio: 20 / 40; bottom: 3%; animation: none; }

/* stamp, postmark, weather corner, sticker */
.sv-stamp { position: absolute; z-index: 4; right: -8px; top: -14px; width: 58px; rotate: 7deg; filter: drop-shadow(0 2px 1.5px rgba(40, 20, 60, .35)); pointer-events: none; }
.sv-postmark { position: absolute; z-index: 5; right: 24px; top: -3px; width: 98px; rotate: -14deg; mix-blend-mode: multiply; opacity: .7; color: #5b3f86; pointer-events: none; }
.sv-weather { position: absolute; z-index: 6; left: -12px; top: -6px; width: 86px; height: 58px; pointer-events: none; }
.sv-wx-planet { position: absolute; left: 34px; top: -2px; width: 44px; overflow: visible; }
.sv-wx-moon { position: absolute; left: 0; top: 2px; width: 52px; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(40, 20, 60, .3)); animation: sv-bob-s 4s ease-in-out infinite alternate; }
.sv-wx-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-rock 6s ease-in-out infinite alternate; }
.sv-sticker { position: absolute; z-index: 2; left: -21px; top: 38%; width: 30px; rotate: -10deg; overflow: visible; filter: drop-shadow(0 1.5px 1px rgba(40, 20, 60, .4)); pointer-events: none; }
.sv-stk-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-blink 6s ease-in-out infinite; }

/* caption */
.sv-postcard figcaption { padding-top: 11px; text-align: center; }
.sv-greet {
  margin: 0; color: var(--sv-script); white-space: nowrap; rotate: -2deg;
  font: 700 clamp(16px, calc(var(--pw) * .08), 30px)/1.1 var(--sv-hand);
}
.sv-name {
  margin: 0; color: var(--sv-card-ink); white-space: nowrap; letter-spacing: -.005em;
  font: italic 600 clamp(30px, calc(var(--pw) * .15), 58px)/1 var(--sv-display);
  text-shadow: 2px 3px 0 var(--sv-name-shadow);
}
.sv-tag { margin: 5px 0 0; color: #7d64a0; white-space: nowrap; font: 500 12px/1.3 var(--sv-sans); letter-spacing: .02em; }
@media (max-height: 760px) { .sv-tag { display: none; } }
html.sv-narrow .sv-tag { display: none; }

/* ------------------------------------------------------------ the sign (the one CTA) */
.sv-sign-wrap {
  grid-area: sign; position: relative; z-index: 4; width: var(--sign-w); margin-top: var(--chain-h);
  transform-origin: 50% calc(-1 * var(--chain-h));
  animation: sv-enter 2s cubic-bezier(.25, .6, .3, 1) both;
}
.sv-sign-wrap.sv-settled { animation: sv-idle 7s ease-in-out infinite; }
.sv-sign-wrap.sv-swing { animation: sv-swing 1.4s ease-in-out; }
.sv-sign-wrap::before {
  content: ""; position: absolute; inset: -4px -4px -10px; border-radius: 20px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 244, 211, .7), 0 0 20px 6px rgba(232, 114, 177, .7), 0 0 44px 14px rgba(162, 117, 219, .42);
}
.sv-sign-wrap.sv-glow::before { animation: sv-aura 1.4s ease-in-out infinite; }
.sv-sign {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 55px; padding: 15px 22px;
  border-radius: 16px; transform-origin: 50% calc(-1 * var(--chain-h));
  background: linear-gradient(110deg, var(--sv-pink-deep), var(--sv-violet));
  box-shadow: inset 0 0 0 3px #fbf1da, 0 0 0 2px #3b2346, 0 6px 0 2px #5b3f86, 0 0 24px rgba(232, 114, 177, .45);
  color: #fffaf0; font: 600 17px/1.1 var(--sv-sans); letter-spacing: .06em; text-align: center; white-space: nowrap;
  text-decoration: none; text-shadow: 0 0 8px rgba(255, 240, 250, .55), 0 1px 0 rgba(91, 63, 134, .5);
  -webkit-tap-highlight-color: transparent; transition: filter .2s;
}
.sv-sign::before {
  content: ""; position: absolute; left: 13px; right: 13px; top: 6px; bottom: 6px; pointer-events: none;
  background:
    radial-gradient(circle, #fffbea 0 1.5px, #ffd9ee 2px, rgba(255, 217, 238, 0) 2.6px) 0 0 / 14px 5px round no-repeat,
    radial-gradient(circle, #fffbea 0 1.5px, #ffd9ee 2px, rgba(255, 217, 238, 0) 2.6px) 0 100% / 14px 5px round no-repeat;
  animation: sv-chase 6s step-end infinite;
}
.sv-sign:hover, .sv-sign:focus-visible { filter: brightness(1.06); }
.sv-sign:active { filter: brightness(.97); }
.sv-sign:focus-visible {
  outline: 3px solid var(--sv-yellow); outline-offset: 4px;
  box-shadow: inset 0 0 0 3px #fbf1da, 0 0 0 2px #3b2346, 0 6px 0 2px #5b3f86, 0 0 24px rgba(232, 114, 177, .45), 0 0 0 9px rgba(247, 201, 72, .25);
}
.sv-starburst { position: absolute; z-index: 2; top: -24px; right: -14px; width: var(--burst); height: var(--burst); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(20, 10, 40, .45)); animation: sv-spin 14s linear infinite; }
.sv-starburst svg { width: 100%; height: 100%; transition: rotate .7s cubic-bezier(.2, .8, .2, 1), scale .3s; }
.sv-sign:hover ~ .sv-starburst svg, .sv-sign:focus-visible ~ .sv-starburst svg, .sv-sign-wrap.sv-swing .sv-starburst svg { rotate: 70deg; scale: 1.12; }
.sv-chains { position: absolute; left: 0; top: calc(-1 * var(--chain-h) - 6px); width: 100%; height: calc(var(--chain-h) + 8px); overflow: visible; pointer-events: none; }

/* ------------------------------------------------------------ psst note and link chips */
.sv-psst {
  grid-area: psst; position: relative; z-index: 3; margin: 7px 0 0;
  color: var(--sv-ink); white-space: nowrap; pointer-events: none; rotate: -3deg;
  font: 600 22px/1.1 var(--sv-hand);
  text-shadow: 0 1px 0 rgba(11, 9, 28, .9), 0 0 10px rgba(11, 9, 28, .85);
  animation: sv-pop .6s cubic-bezier(.34, 1.56, .64, 1) 1s both, sv-nudge 3.6s ease-in-out 3s infinite;
}
.sv-psst br { display: none; }
.sv-psst-arrow { position: absolute; overflow: visible; }
.sv-psst-arrow--m { right: calc(100% + 1px); top: -3px; width: 40px; height: 32px; }
.sv-psst-arrow--d { display: none; }
.sv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sv-draw .8s ease-out 1.3s forwards; }
.sv-head { opacity: 0; animation: sv-fade .25s ease-out 2s forwards; }

.sv-links { grid-area: links; position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; margin-top: -1px; }
.sv-chip {
  position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px;
  color: var(--sv-ink); font: 500 13px/1 var(--sv-sans); white-space: nowrap; text-decoration: none;
  -webkit-tap-highlight-color: transparent; --ci: 5px;
}
.sv-chip::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--ci); bottom: var(--ci); border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 180, 220, .35);
  transition: background-color .2s, border-color .2s;
}
.sv-chip:hover::before { background: rgba(255, 255, 255, .12); border-color: rgba(201, 180, 220, .6); }
.sv-chip:focus-visible { outline: none; }
.sv-chip svg { width: 15px; height: 15px; flex: none; color: var(--sv-lav); }
.sv-chip > span[aria-hidden] { color: var(--sv-ink-dim); margin-left: -3px; }

/* ------------------------------------------------------------ the strip mount and its pause toggle */
#story {
  grid-area: story; position: relative; z-index: 1; width: 100%; min-height: var(--strip-min, 112px);
  overflow: hidden; overflow: clip; contain: paint; isolation: isolate; pointer-events: none;
}
.sv-story-toggle {
  grid-area: story; justify-self: end; align-self: start; position: relative; z-index: 2;
  width: 44px; height: 44px; margin: 4px 6px 0 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: none; color: var(--sv-ink); cursor: pointer;
  opacity: .75; transition: opacity .2s; animation: sv-tog-in .5s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.sv-story-toggle[hidden] { display: none; }
.sv-story-toggle::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11, 9, 28, .5); border: 1px solid rgba(201, 180, 220, .45);
}
.sv-story-toggle svg { position: relative; width: 12px; height: 12px; }
.sv-story-toggle:hover, .sv-story-toggle:focus-visible { opacity: 1; }
.sv-story-toggle:focus-visible { outline: none; }
.sv-story-toggle:focus-visible::before { outline: 3px solid var(--sv-yellow); outline-offset: 3px; }
.sv-ico-play, .sv-story-toggle[aria-pressed="true"] .sv-ico-pause { display: none; }
.sv-story-toggle[aria-pressed="true"] .sv-ico-play { display: inline; }

/* ------------------------------------------------------------ footer, sparkles, toast */
.sv-foot {
  position: relative; z-index: 3; padding: 22px 16px calc(26px + env(safe-area-inset-bottom, 0px)); text-align: center;
  background: linear-gradient(180deg, #1e1840, #120e26); border-top: 1px solid rgba(201, 180, 220, .14);
  color: var(--sv-ink-dim); font: 400 12.5px/1.45 var(--sv-sans);
}
.sv-foot p { margin: 0; }
.sv-foot p:first-child { color: var(--sv-ink-soft); font: 700 22px/1.2 var(--sv-hand); }
.sv-foot p:last-child { margin-top: 8px; font: 500 10.5px/1 var(--sv-mono); letter-spacing: .12em; text-transform: uppercase; }
.sv-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.sv-fx i {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.sv-toast {
  position: fixed; z-index: 50; top: max(10px, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  max-width: min(340px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 14px; pointer-events: none;
  background: rgba(23, 18, 50, .94); border: 1px solid rgba(201, 180, 220, .42); color: var(--sv-ink);
  font: 500 14px/1.35 var(--sv-sans); text-align: center; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .75);
  opacity: 0; scale: .96; transition: opacity .22s ease-out, scale .22s ease-out;
}
.sv-toast.sv-on { opacity: 1; scale: 1; }
.sv-toast[hidden] { display: none; }

/* ------------------------------------------------------------ short phones */
@media (max-height: 700px) {
  html.sv-phone .sv-postcard { padding: 10px 10px 8px; }
  html.sv-phone .sv-postcard figcaption { padding-top: 8px; }
  html.sv-phone .sv-sign { min-height: 46px; padding: 12px 18px; font-size: 16px; }
  html.sv-phone .sv-psst { font-size: 19px; margin-top: 6px; }
  html.sv-phone .sv-psst-arrow--m { width: 34px; height: 27px; top: -3px; }
  html.sv-phone .sv-chip { --ci: 6px; }
  html.sv-phone .sv-stamp { width: 50px; top: -12px; }
  html.sv-phone .sv-postmark { width: 84px; right: 20px; }
  html.sv-phone .sv-weather { transform: scale(.86); transform-origin: 0 0; }
}
@media (max-height: 600px) {
  html.sv-phone .sv-sign { min-height: 44px; padding: 11px 18px; }
  html.sv-phone .sv-psst { font-size: 18px; margin-top: 5px; }
  html.sv-phone .sv-chip { --ci: 7px; }
  html.sv-phone .sv-stamp { width: 46px; }
  html.sv-phone .sv-postmark { width: 76px; }
  html.sv-phone .sv-weather { transform: scale(.76); }
}

/* ------------------------------------------------------------ desktop: Lola's centred column, links | sign | note */
html.sv-desktop {
  --strip-min: clamp(150px, 22svh, 260px); --chrome-h: 290px; --pw-max: 380px;
  --top-h: 44px; --chain-h: 22px; --sign-w: 420px; --burst: 64px;
}
@media (min-width: 1600px) { html.sv-desktop { --pw-max: 400px; } }
@media (max-height: 780px) { html.sv-desktop { --chrome-h: 250px; } html.sv-desktop .sv-postcard { padding: 10px 10px 8px; } html.sv-desktop .sv-tag { display: none; } }
html.sv-desktop .sv-page {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "top top top" "hero hero hero" "links sign psst" "story story story";
  grid-template-rows: auto auto auto minmax(var(--strip-min), 1fr);
}
html.sv-desktop .sv-back { left: 14px; font-size: 12.5px; }
html.sv-desktop .sv-sign { min-height: 64px; padding: 19px 30px; font-size: 20px; }
html.sv-desktop .sv-sign-wrap { margin-bottom: 12px; }
html.sv-desktop .sv-links { justify-self: end; align-self: end; flex-direction: column; align-items: flex-end; gap: 0; margin: 0 28px 7px 0; }
html.sv-desktop .sv-chip { font-size: 13.5px; }
html.sv-desktop .sv-psst { justify-self: start; align-self: center; margin: var(--chain-h) 0 0 76px; white-space: normal; font-size: 28px; line-height: 1.02; }
html.sv-desktop .sv-psst br { display: inline; }
html.sv-desktop .sv-psst-arrow--m { display: none; }
html.sv-desktop .sv-psst-arrow--d { display: block; position: absolute; left: -66px; top: 8px; width: 58px; height: 38px; }
html.sv-desktop .sv-stamp { width: 72px; right: -14px; top: -18px; }
html.sv-desktop .sv-postmark { width: 112px; right: 32px; }
html.sv-desktop .sv-weather { left: -26px; top: -24px; transform: scale(1.22); transform-origin: 0 0; }
html.sv-desktop .sv-sticker { width: 36px; left: -24px; }
html.sv-desktop .sv-tp { display: none; }

/* phone held sideways: card on the left, the sign column on the right, the strip below the fold */
html.sv-land { --pw: clamp(150px, calc((100svh - 110px) / 1.08), 260px); }
html.sv-land .sv-page {
  grid-template-columns: 1fr auto 34px auto 1fr;
  grid-template-areas: "top top top top top" ". hero . sign ." ". hero . psst ." ". hero . links ." "story story story story story";
  grid-template-rows: auto auto auto 1fr minmax(var(--strip-min), auto);
}
html.sv-land .sv-sign-wrap { align-self: start; margin-top: calc(var(--pw) * .4); }
html.sv-land .sv-chains { display: none; }
html.sv-land .sv-psst, html.sv-land .sv-links { align-self: start; }

/* ------------------------------------------------------------ keyframes */
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes sv-twinkle-b { from { opacity: 1; } to { opacity: .55; } }
@keyframes sv-drift { from { transform: translateX(-14px); } to { transform: translateX(22px); } }
@keyframes sv-bob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes sv-bob-s { from { transform: translateY(-1.5px); } to { transform: translateY(2px); } }
@keyframes sv-rock { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes sv-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes sv-blink-soft { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
@keyframes sv-beacon { 0%, 55%, 100% { opacity: .25; } 62%, 74% { opacity: 1; } }
@keyframes sv-ring { 0%, 100% { opacity: .45; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes sv-sway { from { transform: rotate(calc(var(--a, 3deg) * -1)); } to { transform: rotate(var(--a, 3deg)); } }
@keyframes sv-enter { 0% { transform: rotate(3deg); } 30% { transform: rotate(-2deg); } 55% { transform: rotate(1.2deg); } 78% { transform: rotate(-.5deg); } 100% { transform: rotate(0deg); } }
@keyframes sv-idle { 0%, 78%, 100% { transform: rotate(0deg); } 83% { transform: rotate(1.5deg); } 89% { transform: rotate(-1.1deg); } 95% { transform: rotate(.5deg); } }
@keyframes sv-swing { 0%, 100% { transform: rotate(0deg); } 16% { transform: rotate(2.5deg); } 38% { transform: rotate(-1.9deg); } 60% { transform: rotate(1.1deg); } 80% { transform: rotate(-.5deg); } }
@keyframes sv-aura { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sv-chase {
  0% { background-position-x: 0, 0; }
  6.67% { background-position-x: 4.67px, -4.67px; }
  13.33% { background-position-x: 9.33px, -9.33px; }
  20%, 100% { background-position-x: 14px, -14px; }
}
@keyframes sv-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sv-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, 2px); } }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }
@keyframes sv-fade { to { opacity: 1; } }
@keyframes sv-tog-in { from { opacity: 0; } }

/* ------------------------------------------------------------ hidden tab, reduced motion, ?still=1 */
html.is-hidden *, html.is-hidden *::before, html.is-hidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.sv-rm *, html.sv-rm *::before, html.sv-rm *::after { animation: none !important; transition: none !important; }
html.sv-rm .sv-draw { stroke-dashoffset: 0; }
html.sv-rm .sv-head { opacity: 1; }
html.sv-rm .sv-story-toggle { display: none !important; }
html.sv-rm .sv-sign-wrap.sv-glow::before { opacity: .85; }
html.sv-rm .sv-starburst svg { rotate: 0deg !important; scale: 1 !important; }

/* live: the sign is a native button (explicit POST navigation) */
button.sv-sign { width: 100%; margin: 0; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.sv-sign[aria-busy="true"] { cursor: progress; }
.sv-sign-wrap:has(> .sv-sign:active) { animation-play-state: paused; }
.sv-sign-wrap > noscript { display: block; margin-top: 12px; text-align: center; font: 500 13px/1.3 var(--sv-sans); color: var(--sv-ink); }