:root {
  --cream: #fffaf0;
  --yellow: #f8e79b;
  --sun: #f7c84c;
  --coral: #e9684f;
  --coral-dark: #a9312f;
  --teal: #087c78;
  --navy: #17384b;
  --sage: #dce9d9;
  --white: #fffefd;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; background: var(--cream); color: var(--navy); font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; }

main { min-height: 100vh; overflow: hidden; }
.loading { display: grid; place-items: center; font-weight: 700; }

.hero {
  min-height: 430px;
  padding: 58px max(28px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 64px;
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.7) 0 5px, transparent 6px),
    linear-gradient(110deg, #fff7cf 0%, var(--yellow) 66%, #f5df85 100%);
  position: relative;
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 36px; background: var(--cream); clip-path: polygon(0 84%, 12% 54%, 25% 78%, 40% 36%, 58% 72%, 74% 42%, 88% 68%, 100% 28%, 100% 100%, 0 100%); }
.hero-copy { z-index: 2; }
.eyebrow { margin: 0 0 16px; color: var(--coral-dark); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.hero h1 { margin: 0; max-width: 680px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 5.3vw, 76px); line-height: .97; letter-spacing: -.045em; color: var(--navy); }
.hero h1 em { color: var(--coral-dark); font-weight: 500; }
.intro { max-width: 590px; margin: 24px 0 25px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: #365566; }
.today-pill { width: fit-content; display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.74); box-shadow: 0 7px 20px rgba(77,50,19,.08); font-size: 14px; }
.today-pill strong { color: var(--teal); }
.dot { color: var(--coral); }

.portrait-wrap { position: relative; height: 350px; min-width: 340px; display: flex; justify-content: center; align-items: flex-end; }
.portrait-wrap img { position: relative; z-index: 2; height: 100%; width: min(100%, 390px); object-fit: cover; object-position: 50% 15%; border-radius: 44% 44% 48% 48% / 34% 34% 55% 55%; border: 9px solid rgba(255,255,255,.55); box-shadow: 0 24px 45px rgba(71,48,19,.18); }
.sun-shape { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: var(--sun); top: 14px; right: 8%; opacity: .84; }
.butterfly { position: absolute; z-index: 3; right: -10px; top: 16px; font-size: 58px; filter: saturate(1.2); transform: rotate(12deg); }
.butterfly.small { position: static; font-size: 23px; transform: none; }

.impulse-grid { width: min(1180px, calc(100% - 56px)); margin: 42px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.impulse-card { min-height: 330px; padding: 30px; border-radius: 30px; display: flex; flex-direction: column; position: relative; box-shadow: 0 18px 45px rgba(36,57,67,.10); border: 1px solid rgba(23,56,75,.08); }
.impulse-card.mine { background: var(--white); }
.impulse-card.joy { background: #f0f7ed; }
.impulse-card::before { content: ""; position: absolute; width: 58px; height: 13px; top: -4px; right: 38px; background: rgba(235,156,96,.44); transform: rotate(3deg); }
.card-top { display: flex; align-items: center; gap: 15px; }
.card-icon { width: 53px; height: 53px; flex: 0 0 auto; border-radius: 18px; display: grid; place-items: center; background: #fff2bd; font-size: 25px; }
.joy .card-icon { background: #d7ebe5; }
.card-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .11em; color: var(--coral-dark); text-transform: uppercase; }
.joy .card-kicker { color: var(--teal); }
.impulse-card h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; }
blockquote { flex: 1; margin: 28px 0; display: flex; align-items: center; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.45; color: #26495a; }
.impulse-card button { align-self: flex-start; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--coral-dark); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 9px 18px rgba(169,49,47,.18); transition: transform .15s ease, box-shadow .15s ease; }
.joy button { background: var(--teal); box-shadow: 0 9px 18px rgba(8,124,120,.18); }
.impulse-card button:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(23,56,75,.2); }
.impulse-card button:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }

.notice { width: min(780px, calc(100% - 40px)); margin: 24px auto 0; padding: 14px 18px; text-align: center; border-radius: 16px; background: #fff1ca; color: #6a4b1f; font-weight: 700; }
footer { width: min(1180px, calc(100% - 56px)); margin: 46px auto 0; padding: 34px 0 42px; border-top: 2px dashed #e5cbb3; text-align: center; color: #607681; font-size: 14px; }
.question { margin: 0 0 10px; color: var(--coral-dark); font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2vw, 27px); font-weight: 700; }
footer p:last-child { margin: 0; }

@media (max-width: 820px) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 30px; padding: 38px 22px 58px; text-align: center; }
  .eyebrow { justify-content: center; font-size: 11px; }
  .hero h1 { font-size: clamp(42px, 13vw, 66px); }
  .intro { margin: 20px auto; font-size: 18px; }
  .today-pill { margin: auto; flex-wrap: wrap; justify-content: center; }
  .portrait-wrap { height: 285px; min-width: 0; width: min(100%, 410px); margin: 0 auto; }
  .sun-shape { width: 270px; height: 270px; left: 50%; right: auto; transform: translateX(-50%); }
  .butterfly { right: 4px; font-size: 45px; }
  .impulse-grid { width: calc(100% - 32px); grid-template-columns: 1fr; margin-top: 28px; gap: 20px; }
  .impulse-card { min-height: 315px; padding: 24px 21px; border-radius: 25px; }
  blockquote { font-size: 23px; margin: 25px 0; }
  .impulse-card button { width: 100%; justify-content: center; }
  footer { width: calc(100% - 32px); margin-top: 34px; padding-bottom: 30px; }
}

@media (max-width: 390px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 42px; }
  .today-pill { border-radius: 20px; }
  .dot { display: none; }
  .today-pill span, .today-pill strong { width: 100%; }
  .portrait-wrap { height: 250px; }
  .card-top { align-items: flex-start; }
  .card-icon { width: 45px; height: 45px; border-radius: 15px; }
  blockquote { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }