/* happyapp.lol — the Happy website. System fonts only, no external requests.
   Tokens mirror the app (docs/SPEC.md §3.1). Light = warm cream, dark = warm night. */

:root {
  color-scheme: light dark;
  --bg: #FBF6EC;
  --surface: #FFFFFF;
  --surface-muted: #F3EDE1;
  --ink: #1D2B36;
  --ink-2: #5B6670;
  --line: #EADFCB;
  --link: #1F63C9;
  --sun: #FFC83D;
  --sun-deep: #F5A524;
  --sun-edge: #E09A17;
  --fixed-ink: #1D2B36;
  --treats: #F5A524;
  --treats-soft: #FFF3CF;
  --treats-ink: #9A5B00;
  --experiences: #4FAE5A;
  --experiences-soft: #E3F2DC;
  --experiences-ink: #276B30;
  --actions: #F2557A;
  --actions-soft: #FFE0E6;
  --actions-ink: #B01F48;
  --memories: #8A63E8;
  --memories-soft: #ECE4FB;
  --memories-ink: #6A45D2;
  --sky-1: #FFE7B3;
  --sky-2: #FFF3DA;
  --sky-blush: rgb(255 182 196 / 38%);
  --glow: rgb(255 200 61 / 50%);
  --marker: rgb(255 200 61 / 55%);
  --cloud: rgb(255 255 255 / 92%);
  --twinkle: #FFB520;
  --band-1: #FFF3CF;
  --band-2: #FFE0E6;
  --band-3: #ECE4FB;
  --shadow: 0 1px 2px rgb(29 43 54 / 6%), 0 12px 30px rgb(29 43 54 / 8%);
  --shadow-lg: 0 2px 6px rgb(29 43 54 / 7%), 0 30px 60px rgb(29 43 54 / 14%);
  --serif: ui-serif, "New York", "Iowan Old Style", "Apple Garamond", Georgia, Cambria, "Times New Roman", serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 32px);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17130E;
    --surface: #231E17;
    --surface-muted: #2C251C;
    --ink: #F7F0E3;
    --ink-2: #B9AE9C;
    --line: #3A3127;
    --link: #7DB2FF;
    --treats-soft: #3A2F14;
    --treats-ink: #FFD36E;
    --experiences-soft: #1E3220;
    --experiences-ink: #96DB96;
    --actions-soft: #3A1C24;
    --actions-ink: #FF9DB5;
    --memories-soft: #2A2140;
    --memories-ink: #C4AEFF;
    --sky-1: #33240F;
    --sky-2: #211A11;
    --sky-blush: rgb(242 85 122 / 12%);
    --glow: rgb(255 190 50 / 30%);
    --marker: rgb(255 200 61 / 22%);
    --cloud: rgb(255 240 220 / 4%);
    --twinkle: #FFE29A;
    --band-1: #2A2214;
    --band-2: #2B1A1F;
    --band-3: #221C30;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 12px 30px rgb(0 0 0 / 30%);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 40%), 0 30px 60px rgb(0 0 0 / 45%);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgb(255 200 61 / 55%); color: var(--fixed-ink); }
.container { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; line-height: 1; }

/* Wordmark: heavy serif "happy" + a tiny sun for the period */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.wm-sun { display: inline-block; flex: none; width: 0.3em; height: 0.3em; margin-left: 0.02em; transform: translateY(0.05em); }
.wm-rays { transform-box: fill-box; transform-origin: center; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; text-decoration: none; border-radius: 10px; }
.site-header .wordmark { font-size: 2rem; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font: 700 0.98rem var(--rounded);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav a[aria-current="page"] { background: var(--treats-soft); }
@media (max-width: 420px) { .nav a:first-child { display: none; } }

/* Buttons and the "coming soon" note */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 54px;
  padding: 0 1.6em;
  border: 0;
  border-radius: 999px;
  font: 800 1.06rem/1 var(--rounded);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--spring), box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-sun { background: linear-gradient(180deg, #FFD45C, var(--sun)); color: var(--fixed-ink); box-shadow: 0 4px 0 var(--sun-edge), 0 10px 24px rgb(245 165 36 / 30%); }
.btn-sun:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--sun-edge), 0 14px 28px rgb(245 165 36 / 34%); }
.btn-sun:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-edge), 0 4px 10px rgb(245 165 36 / 25%); }
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow);
  color: var(--ink);
  font: 700 0.98rem/1.2 var(--rounded);
}
.soon-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFF4B8, var(--sun) 55%, var(--sun-deep));
  box-shadow: 0 0 0 0 rgb(255 200 61 / 60%);
  animation: soon-pulse 2.4s ease-out infinite;
}
.soon--quiet { background: none; box-shadow: none; padding-inline: 4px; color: var(--ink-2); }
@keyframes soon-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 200 61 / 65%); } 70%, 100% { box-shadow: 0 0 0 10px rgb(255 200 61 / 0%); } }
.text-link { font: 800 1rem var(--rounded); color: var(--link); }

/* Sunny: idle motion (see brand.mjs for the parts) */
.sun--live .sun-rays { transform-box: fill-box; transform-origin: center; animation: sun-spin 48s linear infinite; }
.sun--live .sun-core { transform-box: fill-box; transform-origin: center; animation: sun-breathe 4.2s ease-in-out infinite; }
.sun--live .sun-eye { transform-box: fill-box; transform-origin: center; animation: sun-blink 5.2s infinite; }
.sun--live .sun-eye + .sun-eye { animation-delay: 0.03s; }
.sun--interactive .sun-eyes, .sun--interactive .sun-mouth,
.sun--interactive .sun-eyes-joy, .sun--interactive .sun-mouth-laugh { transition: opacity 0.12s ease; }
.sun--interactive .sun-eyes-joy, .sun--interactive .sun-mouth-laugh { opacity: 0; }
.sun--interactive.is-giggling .sun-eyes, .sun--interactive.is-giggling .sun-mouth { opacity: 0; }
.sun--interactive.is-giggling .sun-eyes-joy, .sun--interactive.is-giggling .sun-mouth-laugh { opacity: 1; }
.sun.is-bouncing { animation: sun-boing 0.75s var(--spring); }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@keyframes sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sun-blink { 0%, 91%, 97%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
@keyframes sun-boing {
  0% { transform: scale(1); }
  25% { transform: scale(1.12, 0.9) rotate(-4deg); }
  50% { transform: scale(0.94, 1.08) rotate(3deg); }
  75% { transform: scale(1.03, 0.98); }
  100% { transform: scale(1); }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px) 0 clamp(64px, 9vw, 112px);
  background:
    radial-gradient(70% 55% at 12% 8%, var(--sky-blush), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--bg) 100%);
  text-align: center;
}
.hero-sky { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-sun { position: relative; width: clamp(210px, 56vw, 300px); aspect-ratio: 1; margin-bottom: 8px; animation: pop-in 1s var(--spring) both; }
.sun-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  animation: glow 4.2s ease-in-out infinite;
  pointer-events: none;
}
.sun-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: float 6s ease-in-out infinite;
}
.sun-button .sun { width: 100%; height: 100%; }
.sun-button:focus-visible { outline-offset: -6px; border-radius: 50%; }
.sun-bubble {
  position: absolute;
  top: -2%;
  left: 74%;
  z-index: 2;
  padding: 9px 15px;
  border-radius: 18px 18px 18px 6px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: 800 1rem/1.2 var(--rounded);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transform-origin: 0 100%;
  transition: opacity 0.2s ease, transform 0.35s var(--spring);
  pointer-events: none;
}
.sun-bubble.is-on { opacity: 1; transform: none; }
@media (max-width: 560px) { .sun-bubble { left: 50%; top: -6%; translate: -50% 0; border-radius: 18px; transform-origin: 50% 100%; } }
.spark { position: absolute; left: 50%; top: 50%; z-index: 1; width: 15px; height: 15px; border-radius: 50%; pointer-events: none; }
.spark--star { width: 24px; height: 24px; border-radius: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

.wordmark--hero { margin-top: 4px; font-size: clamp(4.4rem, 2.6rem + 9vw, 8.4rem); animation: rise 0.9s 0.15s var(--spring) both; }
.wordmark--hero .wm-rays { animation: sun-spin 20s linear infinite; }
.tagline { margin-top: 14px; text-wrap: balance; font: 800 clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem)/1.25 var(--serif); color: var(--ink); animation: rise 0.9s 0.3s var(--spring) both; }
.hero-lead { max-width: 34rem; margin-top: 14px; text-wrap: balance; color: var(--ink-2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem); animation: rise 0.9s 0.42s var(--spring) both; }
.soon--hero { margin-top: 28px; animation: rise 0.9s 0.55s var(--spring) both; }
.hero-hint { margin-top: 14px; color: var(--ink-2); font: 700 0.92rem var(--rounded); opacity: 0.85; animation: rise 0.9s 0.9s var(--spring) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.55) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }

.cloud { position: absolute; width: 170px; height: 52px; border-radius: 999px; background: var(--cloud); animation: drift 70s linear infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 74px; height: 74px; left: 24px; top: -34px; }
.cloud::after { width: 96px; height: 96px; left: 62px; top: -50px; }
.cloud--1 { top: 18%; left: -4%; scale: 0.9; }
.cloud--2 { top: 56%; right: -6%; scale: 1.15; animation-duration: 90s; animation-direction: alternate-reverse; }
.cloud--3 { top: 82%; left: 8%; scale: 0.65; opacity: 0.8; animation-duration: 60s; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
@media (max-width: 640px) { .cloud--1 { left: -22%; } .cloud--2 { right: -30%; top: 62%; } .cloud--3 { display: none; } }

.twinkle { position: absolute; width: 18px; height: 18px; color: var(--twinkle); opacity: 0.2; animation: twinkle 3.6s ease-in-out infinite; }
.twinkle--1 { top: 14%; left: 18%; }
.twinkle--2 { top: 10%; right: 22%; width: 24px; height: 24px; animation-delay: 1.1s; }
.twinkle--3 { top: 38%; left: 8%; width: 14px; height: 14px; animation-delay: 2s; }
.twinkle--4 { top: 34%; right: 12%; animation-delay: 0.5s; }
.twinkle--5 { top: 66%; left: 16%; width: 22px; height: 22px; animation-delay: 2.6s; }
.twinkle--6 { top: 72%; right: 18%; width: 14px; height: 14px; animation-delay: 1.6s; }
.twinkle--7 { top: 24%; left: 34%; width: 12px; height: 12px; animation-delay: 3s; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.95; transform: scale(1) rotate(45deg); } }

/* TEAM pillars */
.team { padding: clamp(56px, 8vw, 104px) 0; }
.eyebrow { color: var(--ink-2); font: 800 0.8rem/1.3 var(--rounded); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.team-word { letter-spacing: 0.2em; }
.team-word .t { color: var(--treats-ink); }
.team-word .e { color: var(--experiences-ink); }
.team-word .a { color: var(--actions-ink); }
.team-word .m { color: var(--memories-ink); }
.team h2, .look h2 { margin-top: 12px; font: 800 clamp(2rem, 1.4rem + 2.6vw, 3.2rem)/1.1 var(--serif); letter-spacing: -0.02em; text-align: center; }
.pillars { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1060px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  --soft: var(--treats-soft);
  --accent: var(--treats);
  --accent-ink: var(--treats-ink);
  position: relative;
  overflow: hidden;
  padding: 26px 24px 28px;
  border-radius: 24px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform 0.3s var(--spring), box-shadow 0.3s ease;
}
.pillar:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow); }
.pillar--experiences { --soft: var(--experiences-soft); --accent: var(--experiences); --accent-ink: var(--experiences-ink); }
.pillar--actions { --soft: var(--actions-soft); --accent: var(--actions); --accent-ink: var(--actions-ink); }
.pillar--memories { --soft: var(--memories-soft); --accent: var(--memories); --accent-ink: var(--memories-ink); }
.pillar-letter { position: absolute; top: -14px; right: 12px; color: var(--accent); font: 900 7.5rem/1 var(--serif); opacity: 0.16; pointer-events: none; }
.pillar-icon-wrap {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pillar-icon { width: 56px; height: 56px; transition: transform 0.4s var(--spring); }
.pillar:hover .pillar-icon { transform: scale(1.1) rotate(-6deg); }
.pillar h3 { margin-top: 18px; font: 800 1.6rem/1.1 var(--serif); }
.pillar-sub { margin-top: 4px; color: var(--accent-ink); font: 800 1rem var(--rounded); }
.pillar-copy { margin-top: 10px; color: var(--ink-2); }

/* Look forward band */
.look { padding: clamp(56px, 8vw, 104px) 0; background: linear-gradient(135deg, var(--band-1), var(--band-2) 55%, var(--band-3)); }
.look-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .look-inner { grid-template-columns: 1.05fr 1fr; gap: 64px; } .look .eyebrow, .look h2 { text-align: left; } }
.look-copy p:not(.eyebrow) { margin-top: 16px; max-width: 32rem; color: var(--ink-2); font-size: 1.12rem; }
@media (max-width: 899px) { .look-copy { text-align: center; } .look-copy p:not(.eyebrow) { margin-inline: auto; } }
.look-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.look-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: bob 6s ease-in-out infinite;
}
.look-card--1 { rotate: -1.5deg; margin-right: 10%; }
.look-card--2 { rotate: 1.2deg; margin-left: 8%; animation-delay: 1.5s; }
.look-card--3 { rotate: -0.8deg; margin-right: 4%; animation-delay: 3s; }
.look-card--4 { rotate: 1.6deg; margin-left: 12%; animation-delay: 4.5s; }
.look-emoji { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--treats-soft); font-size: 1.6rem; }
.look-card--2 .look-emoji { background: var(--experiences-soft); }
.look-card--3 .look-emoji { background: var(--actions-soft); }
.look-card--4 .look-emoji { background: var(--memories-soft); }
.look-text { display: grid; }
.look-text strong { font: 800 1.08rem/1.25 var(--rounded); }
.look-text span { color: var(--ink-2); font: 600 0.95rem var(--rounded); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Promise */
.promise { padding: clamp(64px, 9vw, 120px) 0; text-align: center; }
.promise-inner { display: flex; flex-direction: column; align-items: center; }
.promise-sun { width: 112px; height: 112px; }
.promise h2 { max-width: 46rem; margin-top: 18px; font: 800 clamp(1.8rem, 1.3rem + 2.4vw, 3rem)/1.15 var(--serif); letter-spacing: -0.02em; }
.promise h2 span { background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.promise-lead { margin-top: 16px; color: var(--ink-2); font-size: 1.15rem; }
.promise .soon { margin-top: 28px; }
.promise-note { margin-top: 18px; color: var(--ink-2); font: 700 0.95rem var(--rounded); }

/* Footer */
.site-footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-muted); }
.footer-inner { display: grid; gap: 22px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; align-items: center; } .footer-legal { grid-column: 1 / -1; } }
.footer-brand .wordmark { font-size: 1.9rem; }
.footer-brand p { margin-top: 6px; color: var(--ink-2); font: 700 0.95rem var(--rounded); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink); font: 700 0.98rem var(--rounded); text-decoration: none; }
.footer-links a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.footer-links a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 0.92rem; }
.footer-legal a { color: var(--ink-2); overflow-wrap: anywhere; }

/* Legal and help pages */
.legal { padding: clamp(36px, 6vw, 64px) 0 clamp(72px, 9vw, 112px); }
.legal-inner { max-width: 760px; margin-inline: auto; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 700 0.96rem var(--rounded); text-decoration: none; }
.legal-nav a:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.legal-head { display: flex; align-items: center; gap: 16px; }
.legal-head .sun { flex: none; width: 64px; height: 64px; }
.legal h1 { font: 800 clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem)/1.08 var(--serif); letter-spacing: -0.025em; }
.legal-intro { margin-top: 18px; font-size: 1.2rem; }
.legal-date { margin-top: 10px; color: var(--ink-2); font: 700 0.95rem var(--rounded); }
.legal section { margin-top: 38px; }
.legal h2 { font: 800 1.45rem/1.2 var(--serif); letter-spacing: -0.01em; scroll-margin-top: 90px; }
.legal section p, .legal section li { color: var(--ink); font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.legal section p { margin-top: 12px; }
.legal section ul, .legal section ol { margin: 12px 0 0; padding-left: 1.3em; }
.legal section li + li { margin-top: 6px; }
.legal section li::marker { color: var(--sun-deep); }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; padding: 20px 22px; border-radius: 22px; background: var(--treats-soft); }
.contact-card p { flex: 1 1 16rem; font-size: 1.05rem; }

/* Share pages */
.share {
  --soft: var(--treats-soft);
  --accent-ink: var(--treats-ink);
  padding: clamp(24px, 5vw, 56px) 0 clamp(64px, 8vw, 96px);
  background: radial-gradient(90% 60% at 50% 0%, var(--soft), transparent 75%);
}
.share--experiences { --soft: var(--experiences-soft); --accent-ink: var(--experiences-ink); }
.share--actions { --soft: var(--actions-soft); --accent-ink: var(--actions-ink); }
.share-inner { display: grid; gap: 22px; max-width: 680px; }
.share-card { padding: clamp(20px, 4.5vw, 36px); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-lg); }
.share-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent-ink); font: 800 0.95rem var(--rounded); }
.share-eyebrow-icon { flex: none; width: 28px; height: 28px; }
.share-figure { position: relative; margin: 18px 0 0; overflow: hidden; border-radius: 20px; background: var(--surface-muted); aspect-ratio: 4 / 3; }
.share-figure--portrait { aspect-ratio: 4 / 5; }
.share-figure--square { aspect-ratio: 1; }
.share-figure img { width: 100%; height: 100%; object-fit: cover; }
.share-badge { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font: 800 0.85rem var(--rounded); }
.share-card h1 { margin-top: 18px; font: 800 clamp(1.75rem, 1.3rem + 2vw, 2.5rem)/1.12 var(--serif); letter-spacing: -0.02em; }
.share-text, .share-why { margin-top: 12px; font-size: 1.1rem; }
.share-card h2 { margin-top: 24px; font: 800 1.2rem var(--serif); }
.share-subtitle { margin-top: 6px; color: var(--ink-2); font-size: 1.15rem; }
.share-meta { margin-top: 18px; color: var(--accent-ink); font: 800 0.95rem var(--rounded); }
.share-meta + h1 { margin-top: 6px; }
.share-why strong { font-family: var(--rounded); }
.share-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.share-facts div { padding: 8px 14px; border-radius: 14px; background: var(--surface-muted); }
.share-facts dt { color: var(--ink-2); font: 700 0.78rem var(--rounded); letter-spacing: 0.06em; text-transform: uppercase; }
.share-facts dd { margin: 0; font: 800 1rem var(--rounded); }
.share-chips-label { margin-top: 18px; color: var(--ink-2); font: 700 0.78rem var(--rounded); letter-spacing: 0.06em; text-transform: uppercase; }
.share-chips-label + .share-chips { margin-top: 8px; }
.share-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.share-chips li { padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font: 700 0.9rem var(--rounded); }
.share-list { margin: 10px 0 0; padding-left: 1.3em; }
.share-list li { margin-top: 6px; font-size: 1.05rem; }
.share-list li::marker { color: var(--accent-ink); font-weight: 800; }
.share-source, .share-credit { margin-top: 14px; color: var(--ink-2); font-size: 0.92rem; }
.share-source a, .share-credit a { color: inherit; }
.share-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  margin: 18px 0 0;
  padding: clamp(24px, 5vw, 44px);
  border-radius: 22px;
  color: var(--fixed-ink);
  background: linear-gradient(140deg, #FFE3A3, #FFC2B4 55%, #F7B7D8);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.share-art-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.share-art.share-art--on-light { color: var(--fixed-ink); }
.share-art.share-art--on-dark { color: #FFFFFF; }
.share-art h1, .share-art .share-art-title { margin: 0; color: inherit; font: 800 clamp(1.6rem, 1.2rem + 2vw, 2.3rem)/1.15 var(--serif); }
.share-art blockquote { margin: 0; }
.share-art blockquote p { font: 800 clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem)/1.22 var(--serif); letter-spacing: -0.01em; white-space: pre-line; }
.share-art blockquote p::before { content: "“"; }
.share-art blockquote p::after { content: "”"; }
.share-art figcaption { font: 800 1.05rem var(--rounded); opacity: 0.85; }
.share-art figcaption::before { content: "— "; }
.share-art-text { font: 600 clamp(1.15rem, 1rem + 0.8vw, 1.45rem)/1.4 var(--serif); white-space: pre-line; }
.share-art-kicker { font: 800 0.85rem var(--rounded); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.share-art a { color: inherit; }
.share-art--quote { background: linear-gradient(140deg, #FFD6A5, #FFADC6 55%, #CDB4FF); }
.share-art--joke { background: linear-gradient(140deg, #FFEC8A, #FFC83D 60%, #FFAA5C); }
.share-art--fact { background: linear-gradient(140deg, #BDF2D5, #A9DEFF); }
.share-art--wonder { color: #FFFFFF; background: linear-gradient(140deg, #26266A, #6A45D2 58%, #D97FC6); }
.share-art--tinyjoy, .share-art--waiting { align-items: center; text-align: center; background: linear-gradient(140deg, #FFF3CF, #FFE0E6); }
.share-art .share-source { color: inherit; opacity: 0.85; }
.punchline summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / 70%);
  font: 800 1rem var(--rounded);
  cursor: pointer;
  list-style: none;
}
.punchline summary::-webkit-details-marker { display: none; }
.punchline[open] summary { display: none; }
.punchline p { font: 800 clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem)/1.25 var(--serif); animation: rise 0.5s var(--spring) both; }
.share-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.share-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 22px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.share-more p { flex: 1 1 16rem; color: var(--ink-2); }
.share-more-sun { flex: none; width: 56px; height: 56px; }

/* 404 */
.lost { padding: clamp(48px, 8vw, 96px) 0 clamp(72px, 10vw, 128px); text-align: center; }
.lost-inner { display: flex; flex-direction: column; align-items: center; }
.lost-sun { width: 168px; height: 168px; animation: float 6s ease-in-out infinite; }
.lost h1 { margin-top: 20px; font: 800 clamp(2rem, 1.5rem + 2.4vw, 3rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.lost .lead { max-width: 30rem; margin: 14px 0 28px; color: var(--ink-2); font-size: 1.15rem; }

/* Reduced motion: keep the blinks and the giggle face, drop movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sun--live .sun-rays, .sun--live .sun-core, .sun.is-bouncing, .sun-button, .sun-glow, .hero-sun,
  .wordmark--hero, .wordmark--hero .wm-rays, .tagline, .hero-lead, .soon--hero, .hero-hint,
  .cloud, .twinkle, .look-card, .soon-dot, .lost-sun, .punchline p { animation: none; }
  .twinkle { opacity: 0.6; }
  .pillar, .pillar-icon, .btn, .sun-bubble { transition: none; }
  .pillar:hover, .pillar:hover .pillar-icon { transform: none; }
}

@media print {
  .site-header, .site-footer, .hero-sky, .sun-glow, .legal-nav { display: none; }
  body { background: #fff; color: #000; }
}