html { scroll-behavior: smooth; }
body { margin: 0; background: #FBF4E4; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; color: #6B4A2C; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #E27B2E; text-decoration: none; }
a:hover { color: #C25F14; }
img { display: block; }

/* visually hidden but available to search engines / screen readers (SEO・AIO) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: 0 !important;
  left: 0 !important;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes heroReveal { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: var(--reveal-op, 1); transform: none; } }

/* layout */
.container { max-width: 1040px; margin: 0 auto; }
.mobile-break { display: none; }

/* decorative illustration images (position/size stay inline, they're one-off per element) */
.deco { position: absolute; pointer-events: none; }

/* card panels (director / cast / info box) */
.card { background: #FEFAF0; border: 1px solid rgba(214,176,124,.55); border-radius: 16px; }
.people-card { position: relative; padding: clamp(44px, 5vw, 56px) clamp(22px, 3vw, 34px) clamp(28px, 4vw, 38px); }
.ribbon-tag { position: absolute; top: -18px; left: clamp(20px, 3vw, 34px); }
.ribbon-tag-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; letter-spacing: .18em; color: #fff; }

/* info section rows */
.info-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(16px, 3vw, 36px); padding: clamp(14px, 2vw, 20px) 0; }
.info-label { flex: 0 0 auto; width: 118px; font-size: 14px; letter-spacing: .3em; color: #8A6A45; }
.info-value { flex: 1 1 auto; min-width: 0; font-size: clamp(17px, 2.4vw, 23px); font-weight: 500; color: #5A3A1E; }
.divider { height: 1px; background: repeating-linear-gradient(90deg, rgba(180,142,94,.55) 0 5px, transparent 5px 10px); }

/* story paragraphs */
.story-p { margin: 0; font-size: clamp(14px, 1.7vw, 16px); line-height: 2.15; letter-spacing: .03em; text-wrap: pretty; font-weight: 800; }

/* soft photo-to-text fade for the story section (no hard card edge) */
.story-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(251,244,228,.9) 0%, rgba(251,244,228,0) 18%),
    linear-gradient(0deg, rgba(251,244,228,.9) 0%, rgba(251,244,228,0) 18%),
    linear-gradient(100deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.8) 55%, rgba(255,255,255,1) 100%);
}
.story-card { max-width: 440px; width: 100%; }

/* smartphone layout: the desktop composition relies on a lot of absolutely
   positioned decorative illustrations sized for a wide canvas, which collide
   with the centered hero title / story text on narrow screens. Hide the pure
   decoration there and simplify the story photo overlay so text stays legible. */
@media (max-width: 640px) {
  .mobile-break { display: inline; }
  #hero .deco,
  #story .deco,
  #info .deco,
  #people > .deco {
    display: none;
  }
  /* keep a small curated set of sweets in the hero, shrunk and tucked into the corners */
  #hero img[src*="asset_29.png"] { display: block; }
  #hero img[src*="asset_07.png"] {
    display: block !important;
    top: 8px !important; left: 8px !important; right: auto !important; bottom: auto !important;
    width: 40px !important; height: auto !important;
  }
  #hero img[src*="split_assets/asset_05.png"] {
    display: block !important;
    top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    width: 58px !important; height: auto !important;
  }
  #hero img[src*="asset_17.png"] {
    display: block !important;
    top: 38% !important; left: -14px !important; right: auto !important; bottom: auto !important;
    width: 82px !important; height: auto !important;
  }
  #hero img[src*="asset_01.png"] {
    display: block !important;
    top: auto !important; bottom: 4% !important; left: 4px !important; right: auto !important;
    width: 78px !important; height: auto !important;
  }
  #hero img[src*="asset_03.png"] {
    display: block !important;
    top: auto !important; bottom: 4% !important; right: 4px !important; left: auto !important;
    width: 64px !important; height: auto !important;
  }
  /* a few sparkles tucked into the remaining gaps */
  #hero img[src*="asset_23.png"] {
    display: block !important;
    top: 56px !important; left: 20% !important; right: auto !important; bottom: auto !important;
    width: 16px !important; height: auto !important;
  }
  #hero img[src*="asset_19.png"] {
    display: block !important;
    top: 62px !important; right: 20% !important; left: auto !important; bottom: auto !important;
    width: 14px !important; height: auto !important;
  }
  #hero img[src*="asset_25.png"] {
    display: block !important;
    top: auto !important; bottom: 4% !important; left: 50% !important; right: auto !important;
    margin-left: -7px !important;
    width: 14px !important; height: auto !important;
  }
  .story-fade {
    background:
      linear-gradient(180deg, rgba(251,244,228,.92) 0%, rgba(251,244,228,0) 14%),
      linear-gradient(0deg, rgba(251,244,228,.92) 0%, rgba(251,244,228,0) 14%),
      rgba(255,255,255,.82);
  }
  .story-card { max-width: 100%; }
  .people-card { padding: 32px 20px 26px; }
  /* keep each info row ("【番組名】おいしいふたり（仮）" etc.) on a single line */
  .info-row { flex-wrap: nowrap; gap: 4px 10px; }
  .info-label { width: auto; flex-shrink: 0; font-size: 12px; }
  .info-value { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}