/* ==========================================================================
   Storybook Hunt: Watercolor Whimsy — core styles
   Mobile-first. Desktop enhancements live in responsive.css.
   Palette: watercolor pastels on paper cream, ink-brown text.
   ========================================================================== */

:root {
  /* Paper and ink */
  --paper:        #FBF6EC;
  --paper-deep:   #F4EAD8;
  --paper-card:   #FFFCF6;
  --ink:          #3A2E28;   /* headings — 11:1 on paper */
  --ink-soft:     #5C4A40;   /* body copy — 7.8:1 on paper */

  /* Watercolor accents. Each one clears 4.5:1 on every ground it lands on,
     including the tinted corners of the download section's gradient. */
  --teal:         #256B63;
  --teal-deep:    #1C544E;
  --rose:         #96384A;
  --gold:         #7E5613;

  /* Decorative wash tints (never used behind small text) */
  --wash-rose:    rgba(232, 160, 168, 0.55);
  --wash-teal:    rgba(126, 190, 182, 0.50);
  --wash-gold:    rgba(233, 199, 132, 0.50);

  /* Disabled store button — fixed neutral grey, never brand-tinted */
  --disabled-bg:  #2A2A2A;
  --disabled-fg:  #F5F1E8;

  --edge:         rgba(58, 46, 40, 0.16);
  --edge-strong:  rgba(58, 46, 40, 0.30);

  --shadow-soft:  0 10px 28px rgba(58, 46, 40, 0.10);
  --shadow-lift:  0 16px 40px rgba(58, 46, 40, 0.16);

  --header-h:     56px;

  --font-head:    Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-body:    "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand:    "Segoe Print", "Bradley Hand", "Brush Script MT", "Comic Sans MS", var(--font-head);

  --radius-card:  18px;
  --radius-pill:  999px;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset/base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Faint paper grain, drawn with gradients only — no external images */
  background-image:
    repeating-linear-gradient(96deg, rgba(58, 46, 40, 0.020) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(6deg,  rgba(58, 46, 40, 0.016) 0 1px, transparent 1px 5px);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-deep); }
a:hover { color: var(--rose); }
a:active { color: var(--rose); opacity: 0.8; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------- drifting washes */

.washes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.wash {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
}
.wash--rose { width: 260px; height: 260px; top: -60px;  left: -80px;  background: var(--wash-rose); animation: drift-a 26s var(--ease) infinite alternate; }
.wash--teal { width: 300px; height: 300px; top: 46%;    right: -110px; background: var(--wash-teal); animation: drift-b 32s var(--ease) infinite alternate; }
.wash--gold { width: 220px; height: 220px; bottom: 8%;  left: -70px;  background: var(--wash-gold); animation: drift-a 29s var(--ease) infinite alternate-reverse; }

@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(26px, 34px, 0) scale(1.12); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-30px, -26px, 0) scale(1); } }

/* --------------------------------------------------------- ink-bloom reveal */

/* Default state is visible: if JS never runs, nothing is stranded invisible.
   main.js adds .motion-ready to <html> only when it can reveal them again. */
.ink-reveal {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.motion-ready .ink-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.988);
  filter: blur(6px);
}
.motion-ready .ink-reveal.is-inked { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ink-reveal,
  .motion-ready .ink-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .wash { animation: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}

.site-header__inner {
  height: 100%;
  display: flex; align-items: center; gap: 12px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  min-height: 44px; margin-right: auto;
}
.brand__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  box-shadow: 0 2px 8px rgba(58, 46, 40, 0.14);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.brand__sub  { font-family: var(--font-hand); font-size: 13px; color: var(--teal); }

.site-nav { display: none; }

/* Compact circular download control on phones */
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(28, 84, 78, 0.30);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.header-cta__text { display: none; }
.header-cta:hover { background: var(--teal-deep); color: #FFFFFF; transform: translateY(-1px); }
.header-cta:active { background: var(--teal-deep); transform: translateY(0) scale(0.96); }

/* --------------------------------------------------------------- shared bits */

.kicker {
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--rose);
  margin: 0 0 10px;
}
.kicker--center { text-align: center; }

/* Keep in-page anchors clear of the sticky header */
.section, .hero { scroll-margin-top: calc(var(--header-h) + 12px); }

.section { position: relative; z-index: 1; padding: 52px 0; }
.section__title { font-size: 27px; }
.section__lede { max-width: 62ch; }

.features .section__title,
.features .section__lede { text-align: center; }
.features .section__lede { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- hero */

.hero {
  position: relative; z-index: 1;
  padding: 30px 0 44px;
}
.hero__title { font-size: 32px; letter-spacing: -0.01em; }
.hero__title em { display: block; font-style: normal; color: var(--teal); }

.hero__lede { font-size: 17px; max-width: 56ch; }

.hero__points { margin: 0 0 26px; }
.hero__points li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; padding: 5px 0;
}
.dot {
  flex: 0 0 auto;
  width: 10px; height: 10px; margin-top: 8px;
  border-radius: 50% 50% 50% 20%;
  background: var(--rose);
}

/* Framed painted page holding the banner art */
.hero__page { position: relative; margin-top: 34px; }

.paper-frame {
  margin: 0;
  padding: 10px 10px 4px;
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 20px 18px 22px 16px;
  box-shadow: var(--shadow-lift);
}
.paper-frame__art {
  width: 100%;
  border-radius: 14px 12px 15px 11px;
  border: 1px solid var(--edge);
}
.paper-frame__caption {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  padding: 10px 6px 6px;
}

.hero__badge {
  position: absolute;
  top: -22px; left: -6px;
  width: 66px; height: 66px;
  border-radius: 18px;
  border: 3px solid var(--paper-card);
  box-shadow: var(--shadow-soft);
  transform: rotate(-7deg);
}

/* ------------------------------------------------------- store buttons
   Style: soft watercolor sticker — rounded block, offset ink border. */

.store-row { display: flex; flex-direction: column; gap: 14px; }
.store-row--center { align-items: stretch; }

.store-btn-wrap { position: relative; display: block; }

.store-btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 20px;
  border: 2px solid var(--ink);
  border-radius: 16px 14px 17px 13px;
  background: var(--teal);
  color: #FFFFFF;
  font-family: var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);   /* offset ink edge, like a pasted sticker */
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.store-btn__glyph { flex: 0 0 auto; display: inline-flex; }
.store-btn__label { display: flex; flex-direction: column; line-height: 1.15; }
.store-btn__small { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.store-btn__big   { font-family: var(--font-head); font-size: 20px; font-weight: 700; }

.store-btn--play:hover {
  background: var(--teal-deep);
  color: #FFFFFF;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.store-btn--play:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* App Store: no iOS build yet — disabled button, neutral grey, never a link */
.store-btn--soon {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  border-color: rgba(42, 42, 42, 0.85);
  box-shadow: 5px 5px 0 rgba(42, 42, 42, 0.55);
  opacity: 0.55;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
/* Both label lines are large + bold so the dimmed button stays legible */
.store-btn--soon .store-btn__soon-line {
  font-size: 19px; font-weight: 700; letter-spacing: 0.01em;
}
.store-btn--soon .store-btn__big { font-size: 21px; }

.soon-flag {
  position: absolute;
  top: -10px; right: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(58, 46, 40, 0.28);
}

/* --------------------------------------------------------------- features */

.feature-grid { display: grid; gap: 16px; margin-top: 26px; }

.feature-card {
  padding: 22px 20px;
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 20px 16px 22px 18px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feature-card:active { transform: translateY(0); }

.feature-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50% 46% 52% 48%;
  border: 1px solid var(--edge);
}
.feature-card__icon--teal { background: rgba(37, 107, 99, 0.13);  color: var(--teal-deep); }
.feature-card__icon--rose { background: rgba(176, 74, 90, 0.13);  color: var(--rose); }
.feature-card__icon--gold { background: rgba(138, 95, 22, 0.14);  color: var(--gold); }

.feature-card__title { font-size: 19px; margin-bottom: 6px; }
.feature-card__text { font-size: 15px; margin: 0; }

/* --------------------------------------------------------------- download */

.download {
  background:
    radial-gradient(120% 90% at 12% 0%,  rgba(232, 160, 168, 0.30) 0%, transparent 62%),
    radial-gradient(110% 90% at 88% 100%, rgba(126, 190, 182, 0.34) 0%, transparent 60%),
    var(--paper-deep);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  text-align: center;
}
.download__inner { display: flex; flex-direction: column; align-items: center; }

.download__icon {
  width: 84px; height: 84px;
  border-radius: 22px;
  border: 3px solid var(--paper-card);
  box-shadow: var(--shadow-lift);
  margin-bottom: 18px;
  transform: rotate(-4deg);
}
.download__title { font-size: 28px; max-width: 22ch; }
.download__lede { font-size: 17px; max-width: 44ch; }

.download .store-row { width: 100%; max-width: 340px; margin-top: 8px; }

.download__note {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 26px 0 0;
  max-width: 40ch;
}

/* --------------------------------------------------------------- about */

.about__text p { font-size: 16px; }
.about__contact { font-size: 15px; }

.about__card {
  margin-top: 28px;
  padding: 22px 20px;
  background: var(--paper-card);
  border: 1px solid var(--edge);
  border-radius: 22px 18px 20px 16px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.about__card-icon {
  width: 68px; height: 68px; margin: 0 auto 12px;
  border-radius: 18px; border: 1px solid var(--edge);
}
.about__card-name {
  font-family: var(--font-head); font-weight: 700;
  color: var(--ink); font-size: 17px; margin: 0 0 14px;
}
.about__facts { margin: 0; text-align: left; }
.about__facts > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-top: 1px dashed var(--edge);
  font-size: 14px;
}
.about__facts dt { color: var(--teal-deep); font-weight: 600; }
.about__facts dd { margin: 0; text-align: right; }

/* --------------------------------------------------------------- footer
   Extra bottom padding keeps the sticky bar off the last line of text. */

.site-footer {
  position: relative; z-index: 1;
  background: var(--ink);
  color: #EDE3D6;
  padding: 40px 0 108px;
}
.site-footer a { color: #F3D9A8; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer a:active { color: #FFFFFF; opacity: 0.85; }

.site-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.site-footer__icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.site-footer__name { font-family: var(--font-head); font-weight: 700; color: #FFFFFF; font-size: 17px; margin: 0; }
.site-footer__tag  { font-family: var(--font-hand); font-size: 13px; color: #D8C9B6; margin: 2px 0 0; }

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

.site-footer__legal { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__sep { color: #B4A392; }

.site-footer__copy {
  margin: 14px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  color: #D8C9B6;
}

/* ------------------------------------------------------- sticky mobile CTA */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 246, 236, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--edge-strong);
  box-shadow: 0 -6px 20px rgba(58, 46, 40, 0.14);
  transform: translateY(110%);
  transition: transform 0.32s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta[hidden] { display: none; }

.sticky-cta__icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--edge); }
.sticky-cta__text {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.3; color: var(--ink-soft);
}
.sticky-cta__text strong {
  display: block;
  font-family: var(--font-head); font-size: 15px; color: var(--ink);
}
.sticky-cta__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: #FFFFFF;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(28, 84, 78, 0.30);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sticky-cta__btn:hover { background: var(--teal-deep); color: #FFFFFF; }
.sticky-cta__btn:active { transform: scale(0.97); background: var(--teal-deep); }