/* Shared floral hero setting. */
@font-face {
  font-family: "Amoresa";
  src: url("./fonts/amoresa-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --page-ink: #263b3b;
  --page-muted: #526260;
  --glass-border: rgba(72, 89, 82, .2);
  background: #fff;
}
html, body, main { background: #fff; }
main {
  display: grid;
  place-items: center;
  height: 100svh;
}
.scene {
  inset: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  max-width: none;
  height: 100%;
  translate: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.veil {
  background: rgba(255, 255, 255, .10);
  opacity: 1;
  animation: none;
}
.hero-copy {
  top: clamp(6.5rem, 13svh, 9rem);
  left: 26px;
  width: calc(100% - 52px);
  color: var(--page-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  justify-items: center;
  text-align: center;
}
.hero-copy h1 {
  grid-column: 1;
  grid-row: 1;
  max-width: min(100%, 12.5em);
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.5rem, 7vw, 4.625rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.045em;
  text-align: center;
  color: #641d3b;
  text-shadow: none;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-copy h1 {
    background: linear-gradient(115deg, #421629 0%, #641d3b 22%, #812b4d 36%, #54172f 45%, #6b273c 48%, #b57658 51%, #92513f 54%, #641d3b 60%, #782345 80%, #421629 100%);
    background-size: 250% 100%;
    background-position: var(--hero-foil-position, 75%) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(-.25px -.35px .15px #edc2a880) drop-shadow(.25px .5px .25px #35101f80);
    transition: background-position 420ms cubic-bezier(.2,.8,.2,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 { transition: none; }
}
.hero-line { display: block; white-space: nowrap; }
.hero-initial {
  /* Avoid Amoresa's swashy contextual alternate on the opening capital. */
  font-feature-settings: "calt" 0;
}
.site-nav .inbox-button, .site-nav .account-button {
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(222,232,233,.3));
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(83,109,115,.12), 0 3px 12px rgba(53,76,82,.1), 0 0 0 1px rgba(92,116,121,.14);
}
.site-nav .inbox-button:hover, .site-nav .account-button:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(222,232,233,.5));
}
.hero-copy p {
  position: static;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  width: min(25rem, 100%);
  max-width: none;
  margin: 12px 0 0;
  color: #352218;
  text-align: center;
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-shadow: none;
}
.hero-copy .primary-action {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  margin: 1.6rem 0 0;
  width: fit-content;
  min-height: 3.5rem;
  padding: .85rem 1.5rem;
  gap: 1.5rem;
  border: 1px solid #d8b4a6;
  border-radius: 14px;
  corner-shape: round;
  background: linear-gradient(166deg, rgba(255,245,239,.88), rgba(243,216,207,.72) 48%, rgba(233,191,176,.8));
  color: #4b3026;
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 1px 0 rgba(255,255,255,.7), 0 7px 14px rgba(128,81,67,.17);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.hero-copy .primary-action:hover {
  border-color: #bf9585;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.8), 0 8px 16px rgba(128,81,67,.21);
  transform: none;
}
.hero-copy .primary-action:active { transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 3px 7px rgba(128,81,67,.15); }
.hero-copy .primary-action:focus-visible { outline: 2px solid #4b3026; outline-offset: 4px; }
.hero-copy .primary-action .hero-chevron { width: 1rem; height: 1rem; }
.hero-copy .primary-action:hover span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy .primary-action, .hero-copy .primary-action span { transition: none; }
}
main.experience-open .scene { transform: none; filter: none; }
main.experience-open .veil { background: transparent; opacity: 0; }
main.experience-open .site-nav { visibility: hidden; pointer-events: none; }
body:has(.inbox-flow:not([hidden])) .hero-copy,
body:has(.inbox-flow:not([hidden])) .site-nav,
body:has(.account-gate:not([hidden])) .hero-copy,
body:has(.account-gate:not([hidden])) .site-nav {
  visibility: hidden;
  pointer-events: none;
}

/* Translucent warm white lets the flowers show through a light frost. */
.kindness-flow, .account-gate, .inbox-flow {
  background: rgba(250, 249, 245, .68);
  -webkit-backdrop-filter: blur(10px) saturate(.88);
  backdrop-filter: blur(10px) saturate(.88);
  scrollbar-color: #a2aaa3 transparent;
}
.flow-shell, .inbox-panel, .account-panel { color: var(--page-ink); }
.flow-shell::before { background: rgba(255, 255, 255, .38); }
.flow-eyebrow, .flow-intro, .note-hint, .received-label,
.inbox-intro, .inbox-empty, .send-caption { color: var(--page-muted); }
.shuffle-image { color: #425651; }
.shuffle-image:hover { color: #152e28; }
.flow-close, .sound-toggle {
  background: rgba(255, 255, 255, .72);
  border-color: var(--glass-border);
  color: var(--page-ink);
}
.flow-close:hover, .sound-toggle:hover {
  color: #152e28;
  background: rgba(255, 255, 255, .95);
  border-color: #82968c;
}
.flow-button { border-color: #aebfbe; }
.flow-button.secondary, .prompt-chip {
  background: rgba(255, 255, 255, .62);
  border-color: var(--glass-border);
  color: var(--page-ink);
}
.prompt-chip:hover, .prompt-chip.is-selected {
  background: rgba(255, 255, 255, .9);
  color: #152e28;
  border-color: #82968c;
}
.account-panel {
  background: rgba(255, 255, 255, .76);
  border-color: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 60px rgba(55, 70, 55, .13), inset 0 1px #fff;
}
.account-panel p, .account-panel label { color: var(--page-muted); }
.account-panel input {
  background: rgba(255, 255, 255, .75);
  color: var(--page-ink);
  border-color: var(--glass-border);
}
.account-panel input::placeholder { color: #64746e; }
.account-signin, .account-signout, .account-close, .inbox-close { color: var(--page-ink); }
.account-status { color: #8d422e; }
.primary-action:focus-visible, .flow-close:focus-visible,
.sound-toggle:focus-visible, .shuffle-image:focus-visible,
.flow-button:focus-visible,
.book-outside:focus-visible, .account-panel input:focus {
  outline: 2px solid #416a63;
  outline-offset: 3px;
}

@media (max-width: 767px), (orientation: portrait) {
  main { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 100svh; padding: max(6.5rem, 14svh) 1.5rem 0; }
  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .hero-copy h1 {
    max-width: 100%;
    margin: 0;
    white-space: normal;
    font-size: clamp(2.1rem, 9vw, 4rem);
    text-align: center;
  }
  .hero-line { white-space: normal; }
  .hero-copy p {
    position: static;
    font-size: 14px;
    width: min(100%, 24rem);
    margin: 14px 0 0;
    text-align: center;
    letter-spacing: normal;
  }
  .hero-copy .primary-action {
    align-self: center;
    margin: 1.35rem 0 0;
  }
  .scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    translate: none;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .hero-copy { position: absolute; top: 5rem; left: 26px; width: calc(100% - 52px); }
}