/* ═══════════════════════════════════════════════════════════════
   IMAHE — home page
   Greeting + hero cards + recents strip · desktop magazine cover
   ═══════════════════════════════════════════════════════════════ */

/* ── mobile-first ── */
.home-inner { display: flex; flex-direction: column; gap: 18px; }
.home-mast { display: none; }

.home-hero { display: flex; align-items: center; gap: 14px; padding: 4px 2px 0; }
.home-speech { font-size: 18px; }
.home-hello-sub { margin-top: 12px; padding-left: 8px; }

.home-cards { display: flex; flex-direction: column; gap: 18px; }
.home-card {
  --hc: var(--riso-pink);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  min-height: 116px; padding: 18px 20px;
  background: var(--paper-2);
  border: var(--border-ink); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  box-shadow: 6px 6px 0 var(--hc);
  transition: transform 0.1s, box-shadow 0.1s;
}
.home-card--image { --hc: var(--riso-pink); transform: rotate(-1deg); }
.home-card--video { --hc: var(--riso-blue); transform: rotate(1deg); }
.home-card:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 8px 8px 0 var(--hc); }
.home-card:active { transform: translate(4px, 4px) rotate(0deg); box-shadow: 1px 1px 0 var(--hc); }
.home-card::before { /* halftone corner burst */
  content: ''; position: absolute; top: -26px; right: -26px;
  width: 110px; height: 110px; border-radius: 50%;
  background-image: radial-gradient(var(--hc) 1.7px, transparent 1.9px);
  background-size: 9px 9px; opacity: 0.28;
  pointer-events: none;
}

.hc-emoji { font-size: 44px; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(26, 23, 18, 0.18)); }
.hc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-title { font-size: 38px; }
.hc-sub {
  font-family: var(--f-head); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--newsprint-mute);
}
.hc-arrow { margin-left: auto; font-size: 30px; transition: transform 0.15s; }
.home-card:hover .hc-arrow { transform: translateX(6px); }

/* ── recents ── */
.home-recents { margin-top: 2px; }
.home-recents-head { margin-bottom: 4px; }
.home-recents-head .panel-title { margin-bottom: 0; }
.home-see-all { text-decoration: none; }

.recents-strip {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 2px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.recents-strip::-webkit-scrollbar { display: none; }

.recent-thumb {
  position: relative; flex: 0 0 88px; height: 110px;
  scroll-snap-align: start;
  border: 2.5px solid var(--ink-line); border-radius: 10px;
  overflow: hidden; background: var(--paper-sunk);
  box-shadow: var(--shadow-hard);
}
.recents-strip .recent-thumb:nth-child(odd) { transform: rotate(-1.5deg); }
.recents-strip .recent-thumb:nth-child(even) { transform: rotate(1.5deg); }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-thumb.gen-pending { min-height: 0; }

.recent-stamp {
  position: absolute; top: 4px; left: 4px;
  font-size: 12px; line-height: 1;
  background: var(--paper-2); border: 2px solid var(--ink-line);
  border-radius: 7px; padding: 2px 3px;
}
.recent-count {
  position: absolute; bottom: 4px; right: 4px;
  font-size: 10px; font-weight: 700;
  background: var(--ink); color: var(--paper);
  border-radius: 6px; padding: 0 5px;
}
.recents-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 4px; }
.recents-note .chip { text-decoration: none; }

/* ═══ DESKTOP ≥1024px — magazine cover ═══ */
@media (min-width: 1024px) {
  .home-inner {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-areas:
      "mast mast"
      "image hero"
      "image video"
      "recents recents";
    gap: 24px 26px;
    padding: 32px 38px 44px;
  }
  .home-mast {
    grid-area: mast;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    border-bottom: 3px solid var(--ink-line);
    padding-bottom: 12px;
  }
  .home-mast-title { font-size: 84px; line-height: 0.85; text-shadow: 4px 4px 0 var(--riso-yellow); }
  .home-mast-meta { font-size: 12px; letter-spacing: 0.14em; color: var(--newsprint-mute); }

  .home-hero { grid-area: hero; align-items: flex-start; padding: 6px 0 0; }
  .home-cards { display: contents; }

  .home-card--image {
    grid-area: image;
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
    min-height: 380px; padding: 26px;
  }
  .home-card--image .hc-emoji { position: absolute; top: 18px; right: 22px; font-size: 96px; }
  .home-card--image .hc-title { font-size: 92px; line-height: 0.9; }
  .home-card--image .hc-sub { font-size: 13px; }
  .home-card--image .hc-arrow { position: absolute; bottom: 22px; right: 26px; margin-left: 0; font-size: 40px; }
  .home-card--image::before { width: 220px; height: 220px; top: -40px; right: -40px; }
  .home-card--image::after { /* LET'S GO! sticker */
    content: "LET'S GO!";
    position: absolute; top: 22px; left: 24px;
    font-family: var(--f-display); font-size: 15px; letter-spacing: 0.06em;
    background: var(--riso-yellow); color: var(--ink);
    border: 2px solid var(--ink-line); border-radius: 9px;
    padding: 3px 10px; transform: rotate(-6deg);
    box-shadow: 2px 2px 0 var(--panel-shadow);
  }

  .home-card--video { grid-area: video; min-height: 150px; }
  .home-card--video .hc-title { font-size: 46px; }

  .home-recents { grid-area: recents; }
  .recent-thumb { flex-basis: 118px; height: 148px; }
}