/* Phone layout for the home page. Loaded after home.css. */

@media (max-width: 800px) {
  .voice-row {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    gap: 26px;
    padding-bottom: 0;
  }
  .voice-row article { min-width: 0; scroll-snap-align: none; }
  .tl img { height: 188px; }
}

@media (max-width: 700px) {
  .cine { padding: 88px 0 22px; }
  .banner-inner { width: min(1180px, calc(100% - 28px)); }
  .banner-name { font-size: 42px; }
  .banner-name span { font-size: 22px; letter-spacing: 0.02em; }
  .line-br { display: block; }
  .banner-line { font-size: 11px; letter-spacing: 0.12em; }
  .banner-sub { font-size: 14px; }
  .banner-frame { border-width: 2px; border-radius: 14px; }
  .banner-frame img { height: 220px; }
  .banner-site { left: 10px; bottom: 10px; font-size: 12px; }
  .banner-foot { margin: 8px auto 16px; font-size: 18px; }
  .ground { min-height: 78svh; }
  .ground-copy { width: min(1120px, calc(100% - 28px)); margin-bottom: 28px; }
  .ground h2 { font-size: 44px; }
  .ground-hi { font-size: 22px; }
  .ground .cta-row { flex-direction: column; align-items: stretch; }
  .ground .cta-row .btn { width: 100%; }

  .story { padding: 52px 0 40px; }
  .story-sheet,
  .years-head,
  .begin-head,
  .board-head,
  .voices-head,
  .mems-head,
  .board-grid,
  .bento,
  .collage {
    width: min(1180px, calc(100% - 32px));
  }
  .story-head { margin-bottom: 28px; }
  .story-head h2 { font-size: clamp(32px, 8.4vw, 42px); line-height: 1.12; }
  .story-lead { font-size: 22px; }
  .story-letter { padding-top: 24px; gap: 16px; }
  .story-letter .story-belief { font-size: 24px; text-align: left; margin-inline: 0; max-width: none; }
  .story-letter .story-creed { font-size: 26px; gap: 16px; }
  .story-letter .story-close { text-align: left; margin-inline: 0; }

  .years { padding: 40px 0 24px; }
  .begin { padding: 36px 0 36px; }
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "dir" "jub" "reg" "notes" "stories" "legacy" "give";
    gap: 10px;
  }
  .tile { min-height: 0; padding: 16px; }
  .tile strong { font-size: 26px; }
  .tile-directory { min-height: 220px; }
  .tile-jubilee,
  .tile-stories { min-height: 210px; }
  .photo-strip { height: auto; }

  .monument { padding: 44px 0 40px; }
  .ghost { font-size: 42px; top: 14px; right: 12px; letter-spacing: -0.03em; }
  .monument h2 { margin-bottom: 18px; }
  .num-xl strong { font-size: clamp(40px, 11vw, 64px); }
  .num-rest { gap: 16px 12px; margin-top: 14px; padding-top: 16px; }
  .num-rest strong { font-size: clamp(28px, 8vw, 36px); }
  .num span { font-size: 13px; max-width: 18ch; }

  .board { padding: 36px 0 36px; }
  .feat { min-height: 0; }
  .feat-visual { min-height: 0; max-height: none; }
  .feat-visual img { height: 210px; }
  .feat-copy { padding: 18px 16px 20px; }
  .date-block b { font-size: 34px; }
  .feat .btn { width: 100%; }
  .past { grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px; }
  .past .date-block { margin: 0; }
  .past .date-block b { font-size: 28px; white-space: nowrap; }

  .voices { padding: 8px 0 36px; }
  .voice-mark { font-size: 34px; margin-bottom: 8px; }
  .voice-row h3 { font-size: 24px; }

  .mems { padding: 36px 0 40px; }
  .collage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
    gap: 18px;
  }
  .collage figure,
  .collage figure:nth-child(n) { margin: 0; min-height: 0; }
  .collage img { height: 210px; min-height: 0; }
  .collage figcaption {
    position: static;
    color: var(--ink-soft);
    background: none;
    padding: 8px 2px 0;
    opacity: 1;
    transform: none;
    font-size: 14px;
  }
  .mems .btn {
    display: flex;
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
  }

  .finale { min-height: 88svh; }
  .finale-copy { width: min(900px, calc(100% - 32px)); margin-bottom: 7vh; }
  .finale h2 { font-size: clamp(40px, 12vw, 56px); }
  .finale-points { gap: 4px 14px; }
  .finale-points li { font-size: 18px; }
  .finale .btn { width: 100%; }

  .reg-dock {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    min-height: 48px;
    padding: 0 14px;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 12px 28px rgba(16, 25, 22, 0.28);
  }
  body.is-home .site-header.is-stuck { background: #faf7f1; }
  .finale { padding-bottom: 28px; }
}
@media (max-width: 400px) {
  .banner-name { font-size: 34px; }
  .banner-name span { font-size: 18px; letter-spacing: 0; }
  .banner-line { font-size: 11px; letter-spacing: 0.1em; }
  .banner-line span { display: block; }
  .banner-foot { font-size: 17px; }
  .ground h2 { font-size: 38px; }
}