/* ==========================================================================
   Responsive + small corrections.
   The comic page has to reflow to a single column on a phone without
   losing the irregular-gutter feel entirely.
   ========================================================================== */

/* Neon signage flicker on the skyline. */
.neon {
  animation: flicker 7s steps(3, end) infinite;
  transform-origin: center;
  will-change: opacity;
}
@keyframes flicker {
  0%, 44%, 52%, 100% { opacity: .85; }
  46%                { opacity: .18; }
  49%                { opacity: .95; }
  50%                { opacity: .3;  }
}

/* The sticker markup is spans inside an <a> on the contact wall. */
.sticker-top { display: block; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .rail { right: 8px; }
  .rail a { width: 20px; height: 13px; }
  .rail a.is-active { width: 27px; }

  .hero-sticker { top: auto; bottom: clamp(70px, 14vh, 130px); right: clamp(10px, 4vw, 40px); }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  :root { --border: 2px; --border-lg: 3px; }

  body { cursor: auto; }

  .topbar { padding: .55rem var(--gutter); }
  .topbar .brand span:last-child { display: none; }
  .topbar-right .btn { padding: .4rem .7rem; font-size: .82rem; }

  /* The rail becomes a contents strip along the bottom. */
  .rail {
    right: auto; left: 50%; top: auto; bottom: 0;
    transform: translateX(-50%);
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, .14);
    background: rgba(3, 3, 12, .82);
  }
  .rail a { width: 15px; height: 11px; }
  .rail a.is-active { width: 26px; }
  .rail a::after { display: none; }

  main { padding-bottom: 58px; }

  .beats { grid-template-columns: 1fr; }

  /* The crest drops above the university name rather than squeezing it. */
  .news-title { flex-direction: column; align-items: flex-start; gap: .7rem; }


  /* The reel stacks its line above its sound effect. */
  .reel-list li {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .7rem;
  }
  .reel-list .sfx { min-width: 0; text-align: left; margin-top: .1rem; }

  .wall .sticker { min-width: 0; width: 100%; }
  .wall a { width: min(320px, 100%); }

  .hero { min-height: 92svh; }
  .hero-sticker {
    position: static;
    margin-top: 1.4rem;
    animation: none;
  }
  .hero-sticker .sticker { transform: rotate(-2.5deg); }
  .scroll-cue { display: none; }

  .blocks, .gear, .covers { grid-template-columns: 1fr; }

  .panel--tilt-l, .panel--tilt-r, .news { transform: none; }

  .splash { min-height: 58svh; }

  .speedlines { opacity: calc(var(--vel) * .3); }
}

/* --------------------------------------------------------------------------
   Very small
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .topbar-right .btn:first-child { display: none; }
  .wall { gap: .7rem; }
}

/* --------------------------------------------------------------------------
   Wide
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .hero-kicker { grid-column: 1 / -1; }
  .hero-name   { grid-column: 1 / -1; }
  .hero-captions { grid-column: 2; grid-row: 3 / span 3; align-self: start; }
  .hero-lede   { grid-column: 1; }
  .hero-cta    { grid-column: 1; }

}

/* Keep the fixed rail clear of the page on tall desktop screens. */
@media (min-width: 761px) {
  .wrap, .wrap--wide { padding-right: 46px; }
}

/* --------------------------------------------------------------------------
   Print — someone will try. Give them a clean résumé-ish page.
   -------------------------------------------------------------------------- */

@media print {
  .portal, .world, .world-veil-fixed, .tex, .tex--vignette, .speedlines, .rail, .topbar,
  .progress, .reticle, .scroll-cue, .krackle { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .news, .splash {
    border: 1px solid #000; box-shadow: none; background: #fff; color: #000;
    break-inside: avoid;
  }
  .hero-name, .ch-title, .splash-word, .lesson, .now-head, .hello-head, .foot-line {
    color: #000; text-shadow: none;
  }
  .chip { border-color: #999; color: #333; background: none; }
  .rise { opacity: 1 !important; transform: none !important; }
}