/* ================================================================
   pages/home.css — Home (index.html) only.
   Section order: Hero → How it works → Method → Stories → Journey
                  → Destinations → Long-Term Institution → Teachers
                  → CTA (#book) → FAQ
   ================================================================ */


/* ============ Section shell · home override ============
   Base .section (80px padding) lives in components.css. Home overrides
   to 90px for extra breathing room between hero-led sections. Other
   pages (lessons/about/qna) inherit the components.css default. */

.section { padding: 90px var(--container-pad); }


/* ============ HERO — sunset Taipei + bubble tea ============ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--hero-1) 0%,
    var(--hero-2) 20%,
    var(--hero-3) 44%,
    var(--accent-deep) 66%,
    var(--hero-5) 100%);
  padding: 60px var(--container-pad) 0;
}
.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  position: relative;
  z-index: 2;
  min-height: 700px;
}

.hero-text { padding-bottom: 80px; }

.hero h1 {
  color: var(--ink);
  text-shadow: none;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(180deg, transparent 62%, var(--accent) 62%);
  padding: 0 6px;
}
.hero h1 .han {
  display: block;
  font-size: 0.72em;            /* matches concept-05 proportion */
  color: var(--ink-soft);
  margin-top: 8px;
  font-style: normal;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.hero-sub {
  font-size: 1.2rem;
  color: rgba(254,248,240,0.94);
  max-width: 540px;
  margin-bottom: 22px;
}

/* Hero placement bullets (Round 1: Level map · 3-month plan · Sample lesson · Yours to keep) */
.hero-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
  font-size: 0.95rem;
  color: rgba(254,248,240,0.85);
  font-weight: 600;
}
.hero-bullets li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-bullets li::before {
  content: "✓";
  color: var(--bopomofo);
  font-weight: 800;
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.hero-cta-reassurance {
  width: 100%;
  margin: -8px 0 0;
  font-size: 0.82rem;
  color: rgba(254,248,240,0.65);
  letter-spacing: 0.01em;
}

.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  color: rgba(254,248,240,0.85);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cream);
}

/* ===== Star rating · partial fill on the 5th star (--rating out of 5) =====
   5 ★ glyphs filled with warm gold up to (rating/5)%, the rest a translucent
   light — so 4.97/5 shows four full stars and a nearly-full fifth. Used on the
   dark hero, the long-term banner, and the booking trust strip. */
.stars {
  display: inline-block;
  font-size: 0.62em;
  letter-spacing: 1.5px;
  line-height: 1;
  vertical-align: 0.16em;
  background: linear-gradient(90deg,
    #f3b54a calc(var(--rating, 5) / 5 * 100%),
    rgba(254, 248, 240, 0.30) calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stars::before { content: "★★★★★"; }
.stars-denom { font-size: 0.6em; font-weight: 600; opacity: 0.55; }

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
  .hero-text { padding-bottom: 40px; }
  /* Stacked layout puts ALL hero copy over the pale top of the gradient, so
     switch it to dark ink (desktop keeps light copy over the dark lower band). */
  .hero-sub { color: var(--ink-soft); }
  .hero-bullets { color: var(--ink-soft); }
  .hero-cta-reassurance { color: var(--ink-soft); }
  .hero-stats { color: var(--ink-soft); }
  .hero-stats div strong { color: var(--ink); }
  .stars { background: linear-gradient(90deg,
      #e0962f calc(var(--rating, 5) / 5 * 100%),
      rgba(42, 36, 56, 0.22) calc(var(--rating, 5) / 5 * 100%)); }
}

/* Mobile: the 90px section rhythm leaves cavernous gaps on a phone — tighten it. */
@media (max-width: 768px) {
  .section { padding-top: 52px; padding-bottom: 52px; }
}


/* === Hero visual · skyline + lanterns + boba (Phase 1 original, kept) === */

.hero-vis {
  position: relative;
  align-self: end;
  width: 100%;
  max-width: 600px;
  justify-self: end;
  padding-bottom: 0;
}
.skyline {
  position: relative;
  width: 100%;
  height: 540px;
}
/* External SVG illustration (Taipei skyline) — replaces the old inline <svg class="bg"> */
.skyline .hero-skyline {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
/* Mobile: show a slim skyline band instead of the full 600×540 scene (mostly
   empty sky on a phone). Placed after the base rules above so it actually wins.
   cover + bottom crops the empty sky, keeping the buildings + boba in frame. */
@media (max-width: 880px) {
  .skyline { height: 300px; }
  .skyline .hero-skyline { object-fit: cover; object-position: center bottom; }
}
.skyline .boba {
  position: absolute;
  bottom: -10px;
  right: 5%;
  width: 180px;
  animation: boba-sway 6s ease-in-out infinite;
  transform-origin: bottom center;
  z-index: 3;
}
@keyframes boba-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

/* Floating sky lanterns (天燈) — GSAP TL.float() drives the bobbing.
   Spread across the sky band of the 540px scene; deep-apricot bodies so
   they stay readable against the pale cream/peach top of the gradient. */
.lantern-float { position: absolute; }
.lantern-float.l1 { top: 6%; left: 8%; }
.lantern-float.l3 { top: 4%; left: 64%; }

.lantern-body   { fill: var(--accent-deep); }
.lantern-thread { stroke: var(--bopomofo); fill: none; }
.lantern-string { stroke: var(--ink); stroke-width: 1.5; }


/* ============ HOW IT WORKS — NEW 3-step strip ============ */

.howitworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
.howstep {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(42,36,56,0.06);
  border: 1px solid var(--cream-deep);
  position: relative;
  transition: transform var(--t-base) var(--ease-soft);
}
.howstep:hover { transform: translateY(-4px); }

.howstep .step-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}
/* Slight rotation per step so the row doesn't feel grid-perfect */
.howstep:nth-child(1) .step-num { transform: rotate(-2deg); display: inline-block; }
.howstep:nth-child(2) .step-num { transform: rotate(1deg); display: inline-block; }
.howstep:nth-child(3) .step-num { transform: rotate(-1deg); display: inline-block; }

.howstep h3 { font-size: 1.25rem; margin-bottom: 8px; }
.howstep p { color: var(--ink-soft); margin: 0; }

@media (max-width: 880px) {
  .howitworks-grid { grid-template-columns: 1fr; }
}


/* ============ METHOD — 3 postcards ============ */

.postcards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 30px;
}
.postcard {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42,36,56,0.12);
  transition: transform var(--t-base) var(--ease-soft);
  position: relative;
}
.postcard:hover { transform: translateY(-6px) rotate(-0.5deg); }
.postcard:nth-child(2):hover { transform: translateY(-6px) rotate(0.5deg); }
.postcard:nth-child(3):hover { transform: translateY(-6px) rotate(-0.3deg); }

.postcard .scene {
  aspect-ratio: 5/3;
  position: relative;
  overflow: hidden;
}
.postcard:nth-child(1) .scene { background: linear-gradient(180deg, var(--hero-1), var(--hero-2)); }
.postcard:nth-child(2) .scene { background: linear-gradient(180deg, var(--accent-2), var(--accent-2-deep)); }
.postcard:nth-child(3) .scene { background: linear-gradient(180deg, var(--night-1), var(--night-2)); }
.postcard .scene svg,
.postcard .scene .scene-illustration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

.postcard .body { padding: 22px 24px 28px; }
.postcard .body h3 { margin-bottom: 8px; }
.postcard .body p { color: var(--ink-soft); margin: 0; }

.postcard .label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}

.postcard .stamp {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--accent);
  color: var(--cream);
  width: 56px; height: 56px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-han);
  font-weight: 900;
  font-size: 1.4rem;
  transform: rotate(8deg);
  border: 2px dashed var(--cream);
  box-shadow: 0 4px 12px rgba(255,179,138,0.3);
}

@media (max-width: 880px) {
  .postcards-grid { grid-template-columns: 1fr; }
}


/* ============ STORIES — moved up, 3 placeholder postcards ============ */

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
.story-postcard {
  background: var(--cream);
  border-radius: 6px;
  padding: 24px 24px 26px;
  box-shadow: 0 10px 24px rgba(42,36,56,0.1);
  border: 1px solid var(--cream-deep);
  position: relative;
  transform: rotate(-1deg);
  transition: transform var(--t-base) var(--ease-soft);
}
.story-postcard:nth-child(2) { transform: rotate(1deg) translateY(-10px); }
.story-postcard:nth-child(3) { transform: rotate(-0.5deg) translateY(6px); }
.story-postcard:hover { transform: rotate(0) translateY(-6px); }

.story-postcard .postmark {
  position: absolute;
  top: 16px; right: 16px;
  width: 70px; height: 70px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  font-family: var(--font-han);
  font-weight: 900;
  font-size: 0.78rem;
  transform: rotate(-12deg);
  opacity: 0.65;
  text-align: center;
  line-height: 1;
}

.story-postcard blockquote {
  font-size: 1rem;
  margin: 0 0 16px;
  padding-right: 70px;
  color: var(--ink);
  font-style: italic;
}

.story-postcard .from {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 700;
  border-top: 1px dashed var(--cream-deep);
  padding-top: 12px;
}
.story-postcard .from .city { color: var(--accent); }

/* Placeholder-flag for testimonials awaiting User input */
.story-postcard.is-placeholder { opacity: 0.85; border-style: dashed; }
.story-postcard.is-placeholder blockquote::before {
  content: "[placeholder — to be filled] ";
  display: block;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

@media (max-width: 880px) { .stories-grid { grid-template-columns: 1fr; } }


/* ============ DESTINATIONS — level cards ============ */

.destinations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.dest-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(42,36,56,0.08);
  transition: transform var(--t-base) var(--ease-soft), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}
.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(42,36,56,0.14);
}
.dest-hero {
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
}
/* Gradient fallbacks for the dest-hero (in case photo fails to load). */
.dest-card:nth-child(1) .dest-hero { background: linear-gradient(135deg, var(--hero-2), var(--accent)); }
.dest-card:nth-child(2) .dest-hero { background: linear-gradient(135deg, var(--accent-2), var(--night-1)); }
.dest-card:nth-child(3) .dest-hero { background: linear-gradient(135deg, var(--hero-1), var(--hero-4)); }

/* Photo-led (Round 3): real photo covers the gradient. Scrim keeps the
   white .place text legible across any image. Legacy SVG kept inert. */
.dest-hero .dest-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.dest-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,36,56,0.5) 0%, rgba(42,36,56,0.15) 40%, rgba(42,36,56,0.6) 100%);
  pointer-events: none;
  z-index: 2;
}
.dest-hero .place { z-index: 3; }
.dest-hero .place {
  position: absolute;
  top: 18px; left: 20px;
  color: var(--cream);
  font-family: var(--font-han);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px rgba(42,36,56,0.4);
}
.dest-hero .place small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}

.dest-body { padding: 24px; flex: 1; }
.dest-body .level-tag {
  display: inline-block;
  background: var(--cream-deep);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.dest-body h3 { font-size: 1.4rem; margin: 0 0 8px; }

.dest-body ul {
  padding-left: 18px;
  margin: 14px 0 0;
  color: var(--ink-soft);
}
.dest-body ul li { padding: 4px 0; font-size: 0.95rem; }

@media (max-width: 880px) { .destinations { grid-template-columns: 1fr; } }


/* ============ LONG-TERM INSTITUTION banner (replaces Pearl Stats) ============ */

.longterm-banner {
  background: var(--banner-dark);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 60px 50px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.longterm-banner h2 { color: var(--cream); font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }
.longterm-banner p { color: rgba(254,248,240,0.85); }

.longterm-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.longterm-stat .num {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--hero-2);
  line-height: 1;
}
.longterm-stat .lab {
  font-size: 0.85rem;
  opacity: 0.78;
  margin-top: 6px;
}

/* Subtle floating ambient pearls — handmade, slightly off-grid */
.longterm-banner::before {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: rgba(254,248,240,0.18);
  border-radius: 50%;
  bottom: 10%; left: 6%;
  box-shadow:
    80px -30px 0 rgba(254,248,240,0.14),
    160px -10px 0 rgba(254,248,240,0.18),
    240px -40px 0 rgba(254,248,240,0.12),
    20px -120px 0 rgba(254,248,240,0.18),
    100px -150px 0 rgba(254,248,240,0.14),
    180px -130px 0 rgba(254,248,240,0.16);
  animation: pearl-rise 5s ease-in-out infinite;
}

@media (max-width: 880px) {
  .longterm-banner { grid-template-columns: 1fr; padding: 40px 30px; gap: 30px; }
  /* "5 levels" / "1-on-1" at 3.4rem overflow the tight 2-col cells and get
     clipped by the banner's overflow:hidden — shrink to fit on a phone. */
  .longterm-stat .num { font-size: 2.1rem; }
}


/* ============ TEACHERS — ID cards ============ */

.id-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}
.id-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: 0 8px 24px rgba(42,36,56,0.08);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  align-items: center;
  border-left: 6px solid var(--accent);
  position: relative;
}
.id-card:nth-child(2) { border-left-color: var(--accent-2); }
.id-card .photo {
  width: 100px; height: 100px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-deep);
}
.id-card .teacher-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Vivi's "who is teacher" graphic needs more room */
.id-card.vivi { grid-template-columns: 150px 1fr; }
.id-card.vivi .photo { width: 150px; height: 150px; }
.id-card .role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.id-card:nth-child(2) .role { color: var(--accent-2-deep); }
.id-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.id-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 720px) { .id-row { grid-template-columns: 1fr; } }


/* ============ CTA FINAL — Calendly host #book ============ */

.cta-final {
  background: linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 100%);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 80px 50px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final h2 {
  color: var(--cream);
  font-size: clamp(2.4rem, 3.5vw + 1rem, 4rem);
}
.cta-final h2 em { font-style: italic; color: var(--hero-2); }
.cta-final p {
  color: rgba(254,248,240,0.88);
  max-width: 580px;
  margin: 0 auto 30px;
  font-size: 1.1rem;
}


.cta-final .big-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: var(--cream);
  padding: 22px 38px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 8px 0 var(--accent-deep);
  transition: transform var(--t-fast) var(--ease-snap);
}
.cta-final .big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 var(--accent-deep);
}

.booking-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 28px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  opacity: 0.85;
}
.booking-trust-strip span { white-space: nowrap; }

/* Calendly embed container (Phase 1.4 will load Calendly script) */
.calendly-wrap {
  margin-top: 50px;
  background: var(--cream);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.calendly-inline-widget {
  min-width: 320px;
  width: 100%;
  height: 700px;
}
@media (max-width: 720px) {
  /* No-JS fallback: Calendly's mobile layout stacks the month grid above the
     time slots, so it needs more height than desktop. calendly-resize.js
     normally overrides this with Calendly's exact reported content height. */
  .calendly-inline-widget { height: 1000px; }
  /* Calendly needs its 320px min-width. The card's 50px side padding squeezed
     the wrap to ~250px, so the widget overflowed and the right calendar column
     (Sat/Sun) was clipped by .cta-final's overflow:hidden. Break the embed out
     of that padding so it spans the card's full width — the margin must match
     .cta-final's horizontal padding (50px). */
  .calendly-wrap { margin-left: -50px; margin-right: -50px; }
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--glow), transparent 70%);
  pointer-events: none;
}


/* ============ FAQ ============ */

.faq-grid {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  max-width: 900px;
}
.faq-item {
  background: #fff;
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: 0 4px 14px rgba(42,36,56,0.06);
  border-left: 4px solid var(--accent);
}
.faq-item:nth-child(2n) { border-left-color: var(--accent-2); }
.faq-item:nth-child(3n) { border-left-color: var(--hero-3); }
.faq-item summary {
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  font-family: var(--font-display);
}
.faq-item p {
  margin-top: 10px;
  color: var(--ink-soft);
}


/* ============================================================
   Round 5 sections · WHAT YOU'LL LEARN (chips) + ASK US ANYTHING
   ============================================================ */

.learn-section { padding-top: 60px; padding-bottom: 60px; }

.learn-chips {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.learn-chips li {
  background: #fff;
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
  transition: transform var(--t-fast) var(--ease-soft);
}
.learn-chips li:hover { transform: translateY(-2px); }

.learn-chips .chip-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  min-width: 32px;
}


.ask-section {
  text-align: center;
  padding-top: 70px;
  padding-bottom: 70px;
}
.ask-section .eyebrow,
.ask-section h2 { display: block; }
.ask-section h2 {
  font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem);
  margin: 6px 0 14px;
}
.ask-section .ask-body {
  max-width: 580px;
  margin: 0 auto 26px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.ask-section .ask-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.ask-section .ask-cta:hover {
  background: var(--ink);
  color: var(--cream);
}


/* ============================================================
   Round 3 style decisions · keep last so they win the cascade
   - Drop "Postcard № 01 · Story-led" framing
   - Straighten all cards (no theatrical tilt)
   - Hide leftover neon-lantern + boba-pearl animation hooks
   ============================================================ */

.postcard .label { display: none; }
.postcard .body h3 { margin-top: 0; }
.postcard .stamp {
  transform: none;
  border-radius: 999px;
  border: none;
  font-family: var(--font-han);
}

.story-postcard,
.story-postcard:nth-child(2),
.story-postcard:nth-child(3) { transform: none; }
.story-postcard:hover { transform: translateY(-6px); }

.postcard:hover,
.postcard:nth-child(2):hover,
.postcard:nth-child(3):hover { transform: translateY(-6px); }