/* ========================================
   Mobile breakpoints
   ======================================== */

@media (max-width: 800px) {
  /* Topnav: keep full brand, hide section links (short enough to scroll) */
  .topnav { padding: 14px 16px; }
  .topnav .brand {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topnav .right { display: none; }

  .hero { padding: 72px 20px 28px; }
  .title-block { padding: 16px 0; }
  /* Each line stays on one row; "ビジネスモデル3.0図鑑" fits on a single line. */
  .title-block h1 {
    font-size: clamp(28px, 7.6vw, 56px);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -.03em;
  }
  .title-block h1 .l1 { white-space: nowrap; }
  .title-block h1 .accent {
    font-size: 1.08em;
    margin-right: .14em;
    -webkit-text-stroke-width: 1.4px;
  }

  .title-block .lead { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
  .title-block .lead .accent-num {
    padding: 0 .02em;
    -webkit-text-stroke-width: 1.3px;
  }
  .title-block .sub { font-size: 13px; line-height: 1.85; }

  /* meta-bar: companies list goes vertical (1 per line, no separators).
     Key-info dl stays a clean 2×2 grid. */
  .meta-bar { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .meta-bar .companies-list {
    font-size: 13px;
    line-height: 1.85;
  }
  .meta-bar .companies-list li { display: block; }
  .meta-bar .companies-list li:not(:last-child)::after { content: ""; }

  .meta-bar dl {
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    text-align: left;
  }
  .meta-bar dd { font-size: 20px; line-height: 1.2; }
  .meta-bar dd small { margin-top: 4px; font-size: 10px; }

  /* Floating CTA full-width at the bottom on mobile */
  .cta-row { left: 20px; right: 20px; bottom: 16px; justify-content: stretch; }
  .cta-row a { flex: 1; text-align: center; font-size: 12px; padding: 14px 20px; }

  .section { padding: 80px 20px; }
  .sec-head { margin-bottom: 40px; }

  .concept-body,
  .companies-grid,
  .timeline-grid,
  .audience-grid,
  .speakers-grid,
  .venue-grid,
  .faq-grid,
  .organizer-grid,
  .book-grid,
  .partners-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .venue-areas { grid-template-columns: 1fr; }

  .partner-card { grid-template-columns: 1fr; gap: 20px; }
  .organizer-portrait { max-width: 280px; }

  .company-row { grid-template-columns: 32px 96px 1fr; gap: 14px; }
  .company-row .logo { width: 96px; aspect-ratio: 1 / 1; padding: 10px; }
  .company-row .info { grid-column: 2 / -1; }

  .timeline-row { grid-template-columns: 80px 1fr; gap: 16px; }
  .timeline-row .time { font-size: 18px; }

  .audience-list { grid-template-columns: 1fr; }
  .audience-item:nth-child(odd) { border-right: none; padding-right: 0; }
  .audience-item:nth-child(even) { padding-left: 0; }

  .speakers-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .apply-section { padding: 80px 20px; }
  .apply-meta { gap: 24px; }

  /* Add bottom padding so footer text isn't covered by the fixed CTA bar */
  .footer { padding: 32px 20px 80px; }
}

/* Reduced motion: stop the orb animation for users who request less motion */
@media (prefers-reduced-motion: reduce) {
  .hero .label,
  .hero .title-block h1,
  .hero .title-block .lead,
  .hero .title-block .sub,
  .hero .meta-bar {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .label .blink { animation: none; }
}