/* Responsive layer. The pages are laid out in px for large screens (reference: 27" / 2560px);
   this file scales the big pieces down and restacks the layout for tablets and phones.
   Most page styles are inline, so rules here select by those inline styles and use !important. */

/* case and game pages: the big type (title, its grey summary, the text beside half blocks) in General Sans */
#top.is-case .tb-h1, #top.is-case p[data-reveal], #top .side-big { font-family: 'General Sans', 'Instrument Sans', system-ui, sans-serif !important; letter-spacing: -0.035em !important; }

/* the inlined logo is an svg inside a link: keep it out of the arrow icons' hover nudge */
#top nav > a:first-child svg { transform: none !important; transition: none !important; }

/* ── every width: the home title, its top gap and the portrait scale with the window
   (values are the 2560px ones divided by 25.6) ── */
#top .hero-title { margin-top: clamp(96px, 7.42vw, 190px) !important; }
#top .hero-title h1, #top .hero-title p { font-size: clamp(38px, 5vw, 121px) !important; }
#top .hero-photo { left: 27.6vw !important; top: calc(clamp(96px, 7.42vw, 190px) - 5.53vw) !important; width: 15.94vw !important; height: 15.94vw !important; }

/* narrower than the 1440 the pages were drawn at: let them fit instead of scrolling sideways */
@media (max-width: 1439px) {
  #top { min-width: 0 !important; }
}

/* no hover on touch screens, and too little room beside the title on small ones */
@media (hover: none), (max-width: 1100px) {
  #top .hero-photo { display: none !important; }
}

/* ── tablets and small laptops ── */
@media (max-width: 1100px) {
  #top { min-height: 100vh !important; }

  /* nav: even gaps instead of the 12 columns, which get too narrow for the links */
  #top nav { display: flex !important; align-items: center; gap: 22px !important; }
  #top nav > a:first-child { margin-right: auto; }
  #top nav > span:last-child { margin-left: 18px; }

  /* title blocks: from absolutely placed pieces to a normal column */
  section[style*="height: 600px"] { height: auto !important; padding: 140px 0 28px; }
  section[style*="height: 600px"] > [style*="position: absolute"] { position: static !important; width: auto !important; margin: 0 20px !important; }
  section[style*="height: 600px"] > .tb-label { margin-bottom: 18px !important; }
  section[style*="height: 600px"] > .tb-meta { margin-top: 48px !important; }
  #top .tb-h1, #top p[data-reveal], #top .side-big { font-size: clamp(34px, 7vw, 72px) !important; }
  #top .hero-title { margin: 120px 20px 0 !important; }
  #top .hero-title h1, #top .hero-title p { font-size: clamp(38px, 8vw, 88px) !important; }
  section:has(> .hero-title) { padding-top: 0 !important; padding-bottom: 28px !important; }
  section:has(> .hero-title) > .tb-meta { position: static !important; margin: 48px 20px 0 !important; }

  /* case and game grids: two across */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* home contact block */
  section[style*="height: 688px"] { height: auto !important; }
  section[style*="height: 688px"] [style*="height: 640px"] { height: auto !important; padding: 56px 0 72px !important; row-gap: 48px; }
  #top h2[style*="font-size: 150px"] { font-size: clamp(56px, 12vw, 150px) !important; }
  #top a[style*="font-size: 34px"] { font-size: clamp(26px, 3.4vw, 34px) !important; }

  /* Previous / Next */
  section[style*="height: 420px"] { height: auto !important; }
  section[style*="height: 420px"] > [style*="position: absolute"] { position: static !important; padding: 96px 20px 120px; gap: 24px; }
  #top .pn-prev, #top .pn-next { font-size: clamp(30px, 6vw, 72px) !important; }

  /* footers */
  footer[style*="height"] { height: auto !important; row-gap: 20px; padding-bottom: 28px !important; }

  /* case body: a little less inset */
  #top .inset { margin-left: calc(20px + 4%) !important; margin-right: calc(20px + 4%) !important; }
}

/* ── phones ── */
@media (max-width: 700px) {
  /* nav: logo on its own row, the five links under it; the clock goes */
  #top nav { display: flex !important; flex-wrap: wrap; align-items: center; height: auto !important; padding: 14px 0 12px; gap: 10px 18px !important; }
  #top nav > a:first-child { flex: 1 0 100%; height: auto !important; }
  #top nav > a:first-child img, #top nav > a:first-child svg { width: 128px !important; height: auto !important; }
  #top nav > span:last-child { display: none !important; }

  /* every 12-column grid becomes one column */
  #top [style*="grid-template-columns: repeat(12, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px; }
  #top [style*="grid-template-columns: repeat(12, minmax(0, 1fr))"] > * { grid-column: 1 / -1 !important; justify-self: stretch !important; text-align: left !important; }
  #top nav > * { grid-column: auto !important; justify-self: auto !important; }
  /* …except the case's image rows: they keep their layout (two 1:1, three 9:16, two 3:4 side by side), only smaller */
  #top section.inset:not([data-rv="line"]) { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: 8px !important; }
  #top section.inset:not([data-rv="line"]) > [style*="span 6"] { grid-column: span 6 !important; }
  #top section.inset:not([data-rv="line"]) > [style*="span 4"] { grid-column: span 4 !important; }
  /* a single half-width piece (image, custom HTML or scroll video with the other half empty) takes the full width */
  #top section.inset:not([data-rv="line"]) > [style*="grid-column: 1 / span 6"],
  #top section.inset:not([data-rv="line"]) > [style*="grid-column: 7 / span 6"] { grid-column: 1 / -1 !important; }
  /* …and the text beside it goes under it, sized like the text sections */
  #top section.inset > [data-side] { grid-column: 1 / -1 !important; order: 2; margin: 10px 0 18px; }
  /* the facts under a title: two across */
  #top .tb-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 18px; }
  #top .tb-meta > * { grid-column: auto !important; }

  section[style*="height: 600px"] { padding-top: 96px; }
  #top .hero-title { margin-top: 88px !important; }
  #top .tb-h1, #top p[data-reveal], #top .hero-title h1, #top .hero-title p, #top .side-big { font-size: clamp(34px, 10.4vw, 56px) !important; }

  /* grids of covers: one per row */
  [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; }

  /* case body */
  #top .inset { margin-left: 20px !important; margin-right: 20px !important; }
  /* images that follow images: the same 8px as between two pieces side by side (14px on wider screens) */
  #top .sheet [style*="margin: 14px 20px 0"], #top .sheet [style*="margin-top: 14px"] { margin-top: 8px !important; }
  #top section[data-rv="line"] { padding-bottom: 56px !important; }
  #top section[data-rv="line"] [style*="font-size: 20px"] { font-size: 17px !important; }
  #top section[data-rv="line"] h2 { font-size: 26px !important; }

  /* big type elsewhere */
  #top h2[style*="font-size: 150px"] { font-size: 15vw !important; }
  #top p[style*="font-size: 34px"] { font-size: 26px !important; }
  section[style*="height: 420px"] > [style*="position: absolute"] { flex-direction: column; align-items: stretch !important; padding: 72px 20px 88px; }
  #top .pn-next { justify-items: start !important; }
  #top .pn-prev, #top .pn-next { font-size: 34px !important; }
  footer[style*="height"] { padding-top: 28px !important; }
}

.sheet.landed { border-radius: 0 !important; box-shadow: none !important; }