/* ============================================================
   THE SUBPAGES, 30 SEPTEMBER 2026

   The galleries, /aboutme, /privacy and /terms, moved onto the home
   page's black and blue design at the owner's request. They load
   styles.css, then home.css (which gives them the header, the footer,
   the buttons and the tokens through body.lx), then this file, which
   only restyles what is theirs: square corners instead of rounded
   glass, flat near black panels, blue where the palette used to melt.

   Scoped to body.sub, so the home page never sees it. The markup of
   the galleries is unchanged; gallery.js and video-gallery.js build
   exactly what they did before.
   ============================================================ */

/* main.js still copies data-c1/2/3 onto :root as you scroll, and the
   gallery pieces read them. Pinned to the two blues here, so nothing
   can drift back to the old palette. */
body.sub { --c1: #2563eb; --c2: #6aa5ff; --c3: #2563eb; }

/* the fixed header sits over the top of every page */
.sub main { padding-top: var(--head-h); }
.sub .gal-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.sub .section:first-child { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.sub .display { font-weight: 700; }
.sub .site-foot { margin-top: 0; }
.sub.page-gallery main { padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* ---------- the collection tabs: two words, the current one underlined ---------- */
.sub .coll {
  gap: 1.75rem; padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sub .coll-tab {
  padding: 0.35rem 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 2px solid transparent;
}
.sub .coll-tab:hover { color: var(--text); }
.sub .coll-tab.on { color: var(--text); background: none; box-shadow: none; border-bottom-color: var(--hi-2); }

/* ---------- sidebar ---------- */
.sub .gal-side { top: calc(var(--head-h) + 1.5rem); }
.sub .side-inner {
  border-radius: 0; background: var(--ink-2); border: 1px solid var(--edge);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.sub #galSearch { border-radius: 0; background: var(--ink); }
.sub #galSearch:focus { border-color: var(--hi-2); background: var(--ink); }
.sub .search-clear { border-radius: 0; }
.sub .gal-suggest {
  border-radius: 0; background: var(--ink); border-top: 2px solid var(--hi);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sub .sug, .sub .sug-thumb, .sub .sug-icon { border-radius: 0; }
.sub .sug-icon { background: rgba(37, 99, 235, 0.18); }
.sub .tnode { border-radius: 0; }
.sub .tnode.is-on { background: rgba(37, 99, 235, 0.22); box-shadow: inset 2px 0 0 var(--hi-2); }
.sub .tnode-dot { border-radius: 0; background: var(--hi-2); box-shadow: none; }

.sub .gal-browse {
  border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-bottom: 2px solid var(--hi-2); padding: 0.35rem 0;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
}
.sub .gal-browse:hover { background: none; color: var(--hi-2); }

@media (max-width: 900px) {
  /* The drawer opens under the header's height, so it starts below it
     rather than behind it. */
  .sub .gal-side { top: 0; padding-top: calc(var(--head-h) + 14px); background: var(--ink); }
  .sub .side-inner { border-radius: 0; }
  .sub .gal-scrim { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- series ---------- */
.sub .series-rule { border-radius: 0; background: var(--hi); box-shadow: none; }
.sub .series-kicker { color: var(--hi-2); font-weight: 700; }
.sub .series-title { font-weight: 700; }
.sub .series-end { background: var(--edge); }

/* ---------- photographs: square, no glow, no lift ---------- */
.sub .gshot, .sub .sh {
  border-radius: 0; border: 0; background: var(--ink-2); box-shadow: none;
}
.sub .gshot:hover, .sub .sh:hover { transform: none; }

/* ---------- lightbox ---------- */
.sub .lb { background: rgba(8, 8, 9, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sub .lb-stage img { border-radius: 0; }
.sub .lb-nav, .sub .lb-close {
  border-radius: 0; background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sub .lb-nav:hover, .sub .lb-close:hover { background: var(--hi); border-color: var(--hi); transform: none; }

/* ---------- video ---------- */
.sub .vid-project-title { font-weight: 700; }
.sub .vid-project-title span { color: var(--hi-2); font-weight: 700; }
.sub .reel-frame, .sub .reel video, .sub .psyc-project .reel-frame { border-radius: 0; }
.sub .reel-sound { border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 15, 0.72); }
.sub .reel-sound[aria-pressed="true"] { background: var(--hi); }
.sub .reel-label span { color: var(--hi-2); }

/* ---------- about ---------- */
.sub .glass {
  border-radius: 0; background: var(--ink-2); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sub .glass::before, .sub .glass::after { display: none; }
.sub .def-word { font-weight: 700; }
.sub .tag { color: var(--hi-2); font-weight: 700; }
.sub .about-h { font-weight: 700; }
.sub .about-link { border-radius: 0; background: var(--ink-2); }
.sub .about-link:hover { background: var(--paper-2); border-color: var(--hi-2); }
.sub .psyc-project-text a { text-decoration-color: var(--hi-2); }

/* ---------- legal ---------- */
.sub .legal-h { font-weight: 700; }
.sub .legal-c > b { color: var(--hi-2); }

/* the sound player */
.sub .player { border-radius: 0; background: rgba(14, 14, 15, 0.82); }
.sub .player-btn { border-radius: 0; }
.sub .reel-frame { box-shadow: none; }