/* InquoLAB — City as Memory · global styles */
:root { --accent: #A3B899; --grain-o: 1; }

html { scroll-behavior: auto; }
body {
  margin: 0;
  background: #F2EFE9;
  color: #1E1E1E;
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #6B675C; }
::selection { background: var(--accent); color: #1E1E1E; }

@keyframes il-marquee { to { transform: translateX(-50%); } }

/* image fills its framed wrapper */
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* hover states (inline base styles live in the markup) */
.btn-dark:hover        { background: #3B3B38 !important; color: #F2EFE9 !important; }
.btn-ghost-dark:hover  { background: #1E1E1E !important; color: #F2EFE9 !important; }
.btn-outline:hover     { background: #E7E1D6 !important; }
.btn-accent:hover      { filter: brightness(1.08); }
.btn-outline-light:hover { border-color: #F2EFE9 !important; background: rgba(242,239,233,0.06) !important; }
.room-row:hover        { background: #ECE7DC !important; padding-left: 28px !important; }
.ws-card:hover         { box-shadow: 0 22px 44px rgba(30,30,30,0.14) !important; transform: translateY(-6px) !important; }
.prog-card:hover       { background: #ECE7DC !important; transform: translateY(-4px) !important; }
.media-tile:hover      { color: #1E1E1E !important; }
.flink:hover          { color: var(--accent) !important; }

/* ===================== MOBILE / RESPONSIVE ===================== */
@media (max-width: 920px) {
  #spacer { width: auto !important; }

  /* header */
  #siteHeader { min-width: 0 !important; padding: 13px 20px !important; }
  #siteHeader > nav, #siteHeader > div:nth-child(3) { display: none !important; }
  #siteHeader > div:first-child > span { display: none !important; }
  #siteHeader img { height: 26px !important; }
  #menuBtn { display: inline-flex !important; }

  #scrollBody > div { min-width: 0 !important; padding-top: 88px !important; }
  #tickerBar { min-width: 0 !important; }

  /* section rhythm */
  #about, #programs, #workshops, #archive { padding: 56px 22px 64px !important; }
  #media > div, #zine > div:nth-child(2) { padding: 56px 22px 64px !important; }
  #programs h2, #workshops h2, #media h2 { font-size: 31px !important; }
  #zine h2, #collaborate h2 { font-size: 33px !important; }

  /* section headers stack */
  #programs > div:first-child, #workshops > div:first-child, #media > div > div:first-child {
    flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 30px !important;
  }

  /* hero */
  #about { display: block !important; }
  #about > div:first-child { display: none !important; } /* side rail */
  #about h1 { font-size: clamp(46px, 13vw, 64px) !important; }
  #about [data-hero="3"] { flex-wrap: wrap !important; }
  #tiltBox { margin-top: 44px; }

  /* program rooms — compact rows */
  .room-row { grid-template-columns: 58px 1fr 20px !important; gap: 14px !important; padding: 18px 4px !important; }
  .room-row > span:nth-child(2) { font-size: 19px !important; }
  .room-row > span:nth-child(3), .room-row > span:nth-child(4) { display: none !important; }
  .room-row:hover { padding-left: 12px !important; }

  /* story band */
  #lab { height: auto !important; }
  #lab > div:nth-child(3) { padding: 64px 22px !important; }
  #lab h2 { font-size: 29px !important; }
  #lab > div:nth-child(2) { background: linear-gradient(90deg, rgba(242,239,233,0.96) 0%, rgba(242,239,233,0.82) 55%, rgba(242,239,233,0.45) 100%) !important; }

  /* zine */
  #zine > div:nth-child(2) { display: block !important; }
  #zineArt { margin-top: 44px; }

  /* card rows → swipe carousels (1.5 cards visible) */
  .card-row { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .card-row::-webkit-scrollbar { display: none; }
  .card-row > * { flex: 0 0 66% !important; min-width: 66%; scroll-snap-align: start; }
  .card-row p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card-row h3 { font-size: 21px !important; }

  /* collaborate */
  #collaborate { display: block !important; padding: 56px 22px 72px !important; }
  #collaborate > div:nth-child(2) { margin-top: 44px; padding: 28px 24px 32px !important; }

  /* footer */
  footer > div { padding: 56px 22px 28px !important; }
  footer > div > div:first-child { font-size: 27px !important; margin-bottom: 40px !important; }
  footer > div > div:nth-child(2) { display: flex !important; flex-direction: column; gap: 36px !important; }
  footer > div > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
}