/* ============================================================
   SCENESCAPES // Gallery layout — the featured 2×2, the browse grid, the
   top bar and the contact toast.
   Moved verbatim out of scenescapes/index.html's inline <style> on
   2026-09-25 so scenescapes/cut.html reuses it by reference. Load it after
   index.css, as index.html does.
   ============================================================ */
  :root {
    --bg: #050608;
    --text: #E8E4D6;
    --dim: #6A6B6E;
    --rule: rgba(255,255,255,0.08);
    --accent: #C9A24A;
  }
  *,*::before,*::after { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono','Roboto Mono','Menlo',monospace;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  a { color: inherit; text-decoration: none; }

  /* Outer wrap — featured area at landing-page width (~1280); browse-section
     extends to a wider 1840 max-width below. Each inner section centers
     itself within this full-width wrap. */
  .wrap {
    padding: 12px 0 60px;
  }

  /* Top chrome bar — extends the same width as the browse-section so the
     CONTACT / DOWNLOAD / etc actions sit at the right edge of the widest
     gallery section. */
  .wall-head {
    max-width: 1840px;
    margin: 0 auto;
    padding: 0 22px 4px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 6px;
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .wall-brand {
    font-size: 18px; letter-spacing: 0.32em; font-weight: 500;
    line-height: 1.2;
    color: var(--accent);
  }
  /* Real one-liner descriptor, replaces the "gallery of stills · hover for
     caption" line. Intentionally not all-caps — it's a sentence, not a
     label. ~62ch max so it stops one line before the right-edge actions
     even on wide displays. */
  .wall-tag {
    font-size: 12px;
    letter-spacing: 0;
    color: rgba(232, 228, 214, 0.78);
    text-transform: none;
    line-height: 1.45;
    margin-top: 8px;
    max-width: 62ch;
    font-family: 'Inter', system-ui, sans-serif;
    text-wrap: balance;
  }
  .wall-actions {
    display: flex; gap: 14px; align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
    position: relative; /* anchor for .contact-toast */
  }
  .wall-link {
    font-size: 10px; letter-spacing: 0.20em; color: var(--text);
    border: 1px solid var(--rule);
    padding: 5px 11px;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .wall-link:hover, .wall-link:focus-visible {
    background: rgba(255,255,255,0.92);
    color: #000;
    border-color: rgba(255,255,255,0.92);
    outline: none;
  }

  /* ============================================================
     Featured 2x2 — same width as the four landing pages (atlas-4a,
     hex-lab, bloom-line, mtox-2). Larger tiles, more visual weight.
     ============================================================ */
  .featured-section {
    max-width: 1280px;
    margin: 0 auto 64px;
    padding: 0 22px;
  }
  .featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .featured-tile {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  }
  .featured-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  }
  .featured-tile-label {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
  }

  /* ============================================================
     Browse 4x4 — WIDER container; the 16 remaining channels in
     channel-number order. Each tile reads larger than on the
     landing pages because the container extends to 1840px.
     ============================================================ */
  .browse-section {
    max-width: 1840px;
    margin: 0 auto;
    padding: 0 48px;
  }
  .browse-label {
    font-size: 10px;
    letter-spacing: 0.28em;
    color: rgba(232,228,214,0.5);
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .browse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .browse-tile {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.18s, transform 0.18s;
  }
  .browse-tile:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .browse-tile-label {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    color: var(--text);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-shadow: 0 0 6px rgba(0,0,0,0.9);
  }

  .alt-foot {
    max-width: 1840px;
    margin: 60px auto 0;
    padding: 18px 22px 18px; /* bottom room: the use note's link should not sit on the screen edge */
    border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.22em;
    color: var(--dim);
    text-transform: uppercase;
    flex-wrap: wrap; gap: 12px;
  }
  .alt-foot a { color: var(--text); }
  .alt-foot a:hover { color: #E8A0C8; }


  /* === Contact toast — tiny non-intrusive copy notification =========
     Anchored to .wall-actions (its parent) and dropped just below the
     actions row so it doesn't obscure the BROWSE/SUPPORT/DOWNLOAD
     /CONTACT buttons. Right-aligned to the rightmost button (CONTACT). */
  .contact-toast {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    z-index: 11000;
    background: rgba(8, 8, 10, 0.95);
    border: 1px solid rgba(232, 228, 214, 0.35);
    color: var(--text);
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
  }
  .contact-toast.show {
    opacity: 1;
    transform: translateY(0);
  }
  /* Opened from the footer's "reach out" link: bottom of the window, not under the top bar. */
  .contact-toast.at-foot { position: fixed; top: auto; bottom: 20px; right: 20px; }
  .contact-toast .ct-mail {
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
  }

  /* Responsive featured + browse */
  @media (max-width: 900px) {
    .featured-grid { grid-template-columns: 1fr; }
    .browse-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 720px) {
    .wrap { padding: 16px 0 60px; }
    .wall-tag { font-size: 11.5px; }
  }
  @media (max-width: 480px) {
    .wall-brand { font-size: 14px; letter-spacing: 0.24em; }
    .wall-link { padding: 4px 9px; font-size: 9px; }
    .wall-head { padding-left: 12px; padding-right: 12px; }
    .featured-section, .browse-section { padding-left: 12px; padding-right: 12px; }
    .alt-foot { padding-left: 12px; padding-right: 12px; }
  }

/* ============================================================
   Added 2026-09-25 with the SCENESCAPES 2.0 port.
   ============================================================ */

/* Tiles that carry an <img loading="lazy"> instead of a background image
   (the 45 channels 22–70 and the cut page): the picture fills the tile the
   way background-size: cover does, and only loads near the viewport. */
.browse-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Label scrim — a short dark gradient behind the label band of every
   browse tile, so the white label reads on light thumbnails (HESK RESERVE,
   COLDWELL, OSHRA CROSSING). Black over a dark picture, it disappears. The
   label is lifted above it; nothing else about the tile changes. */
.browse-tile::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.browse-tile > .browse-tile-label { z-index: 2; }

/* Model provenance chip — which model built the scene (data-model on the
   card). Drawn only while model-tags.js puts .show-model-tags on <html>
   (SHOW_MODEL_TAGS). */
html.show-model-tags [data-model]::after {
  content: attr(data-model);
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 8.5px;
  letter-spacing: 0.20em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(232, 228, 214, 0.9);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(232, 228, 214, 0.28);
  padding: 2px 6px;
  pointer-events: none;
}
html.show-model-tags .featured-tile[data-model]::after {
  top: 12px;
  right: 14px;
  font-size: 9.5px;
}

/* "Didn't make the cut →" — a button under the browse grid (2026-09-29, at
   his word: the quiet text link it replaced was easy to miss). Same
   vocabulary as the top bar's .wall-link, larger and centred; cut.html's
   "← Back to the gallery" shares it. */
.cut-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 11px 22px;
  border: 1px solid rgba(232, 228, 214, 0.35);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cut-link:hover, .cut-link:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #000;
  outline: none;
}

/* cut.html — the intro under the brand, and space between its two groups. */
.cut-group + .cut-group { margin-top: 44px; }
.cut-back { margin-top: 36px; }

/* Moving-preview clip layer (preview-tiles.js): moved to preview-tiles.css
   on 2026-09-28, shared with the four landing pages. */

/* ============================================================
   Added 2026-09-28 — the second featured block.
   ============================================================ */

/* Second featured block (.featured-tile-second): four SCENESCAPES 2.0 scenes
   under the first four. They carry an <img loading="lazy"> like the 2.0
   browse tiles, so their stills load only near the viewport; the picture
   fills the tile the way background-size: cover does. */
.featured-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Phones: all eight featured tiles are full width, one per row (the
   one-column .featured-grid rule above). The second block was a 2x2 of
   half-width tiles from 2026-09-28 until 2026-10-03. */

/* ============================================================
   Added 2026-09-29 — generation headers in the browse section.
   ============================================================ */

/* "GEN 1" over the 16 first-wave tiles, "GEN 2" over the SCENESCAPES 2.0
   tiles (index.html splits .browse-grid in two). A short label with a
   hairline running to the right edge, a shade brighter than .browse-label
   above it. Took over from the model chips (model-tags.js, now off). */
.browse-gen {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(232, 228, 214, 0.78);
}
.browse-gen::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.browse-grid + .browse-gen { margin-top: 44px; }