/* =========================================================
   mobile.css
   Below 760px this switches to a genuinely separate mobile
   design, ported directly from the reference file's real
   mobile CSS: the background photo is hidden entirely, the
   TV becomes a CSS-drawn bezel card (border + border-radius,
   no image), and each tape becomes a bordered card with its
   project name/tag rendered via ::before/::after content:attr()
   reading the data-project/data-tag attributes already on the
   markup — no extra HTML needed.
   ========================================================= */

@media (max-width: 47.5em) {

  /* ---- Nav: unchanged from before ---- */
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 40;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(16rem, 78vw);
    height: 100dvh;
    background: #150f0a;
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.55);
    padding: var(--space-2xl) var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--duration-med) var(--ease-out);
    z-index: 35;
  }

  body.nav-open .site-nav {
    transform: translateX(0);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-med) var(--ease-out);
    z-index: 30;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-header__inner {
    padding: var(--space-2xs) var(--space-sm);
  }

  .logo {
    width: clamp(5.5rem, 4.5rem + 6vw, 7rem);
  }

  /* Cancel the desktop fullscreen-centering height — this is a
     card-stack layout on mobile, not a centered photo, so
     forcing full-viewport height here would just reintroduce
     the empty-space-below-content bug from earlier. */
  .page {
    min-height: 0;
  }

  .scene {
    flex: none;
    display: block;
  }

  /* scene__frame only exists to keep the TV/tapes' % coordinates
     anchored to the photo on desktop. On mobile there's no photo
     to anchor to, so make it invisible to layout — .tv and
     .room__tapes become direct flex children of .scene again,
     which is what their order:0/1 below depends on. */
  .scene__frame {
    display: contents;
  }

  /* ---- Scene: real mobile layout, not a scaled photo ---- */
  .scene {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 14px 32px;
    line-height: 1.25;
    background:
      radial-gradient(circle at 50% 0%, rgba(115, 73, 38, 0.34), transparent 42%),
      linear-gradient(#171009, #090705);
  }

  .scene__bg {
    display: none;
  }

  /* ---- TV: CSS-drawn bezel card, no photo ---- */
  .tv {
    position: relative;
    order: 0;
    left: auto;
    top: auto;
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 auto 14px;
    border: 10px solid #3b2819;
    border-radius: 12% / 10%;
    box-shadow:
      inset 0 0 30px rgba(0, 0, 0, 0.95),
      0 8px 0 #20150d,
      0 16px 30px rgba(0, 0, 0, 0.5);
  }

  .tv__screen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 1; /* always visible — no baked-in photo art to hide behind here */
  }

  .tv__content { padding: 9%; }
  .tv__icon { font-size: 11px; }
  .tv__project { font-size: clamp(18px, 6vw, 30px); }
  .tv__sub { font-size: 11px; margin-top: 0.8em; }
  .tv__counter { font-size: 10px; }

  /* Idle state should read as a single "NO SIGNAL" line, not a
     stack of overlapping prompts — the icon/sub/counter only
     make sense once a tape is actually selected. Desktop avoids
     this because the whole screen is invisible until is-on; on
     mobile the screen is always visible (no baked-in photo to
     hide behind), so the extra lines need hiding explicitly. */
  .tv__screen:not(.is-on) .tv__icon,
  .tv__screen:not(.is-on) .tv__sub,
  .tv__screen:not(.is-on) .tv__counter {
    display: none;
  }

  /* The idle text color is tuned to sit faintly against the
     baked-in photo art on desktop. Mobile's screen has no photo
     behind it — just the dark bezel background — so that same
     dark idle color is nearly illegible here. */
  .tv__screen:not(.is-on) .tv__project {
    color: #ffffff;
  }

  /* ---- Tapes: bordered cards, not spines ---- */
  .room__tapes {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Desktop's natural-stagger tilt doesn't belong on a clean
     mobile card list. */
  .room__tapes > * {
    transform: none !important;
  }

  .tape-hot {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 76px;
    padding: 8px 8px 34px;
    border: 1px solid rgba(224, 177, 58, 0.28);
    border-radius: 8px;
    background: rgba(35, 24, 15, 0.82);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.28);
    touch-action: manipulation;
  }

  .tape-hot + .tape-hot {
    margin-top: 0; /* the stacked-spine negative margin doesn't apply here */
  }

  .tape-static {
    display: none; /* not shown on mobile — desktop only */
  }

  /* Real content, not a fake hit-area — cards are already generously
     sized, so the invisible-padding trick from the desktop/tablet
     view isn't needed at this breakpoint. */
  .tape-hot::before {
    content: attr(data-project);
    position: absolute;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 18px;
    color: var(--color-paper);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tape-hot::after {
    content: attr(data-tag);
    position: absolute;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 5px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tape-hot img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none !important;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));
  }

  .tape-hot:hover img,
  .tape-hot:focus-visible img,
  .tape-hot.is-active img {
    transform: none !important;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.55)) brightness(1.08);
  }

  .tape-hot.is-active {
    border-color: #e0b13a;
    background: rgba(69, 47, 24, 0.95);
    box-shadow: 0 0 0 2px rgba(224, 177, 58, 0.18), 0 9px 18px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 24.375em) {
  .scene { padding-left: 10px; padding-right: 10px; }
  .tv { border-width: 8px; }
  .tape-hot { padding-left: 5px; padding-right: 5px; }
}