/* Gallery filter rail.
   Breakpoints follow the project's own tiers: above 1024px is desktop (the
   pinned rail), 1024px and below is the touch layout (the collapsible pinned
   panel, same as the phone), which is why every block below agrees on 1024. */
.gallery-layout { display:grid; grid-template-columns:minmax(260px,.42fr) minmax(0,1fr); gap:2rem; align-items:start; }
/* Sticky rail: the column pins BELOW the fixed header and stays there while the
   results scroll. The offset is derived from the header's own box — fixed at
   `top:1rem` with `min-height:4.6rem` (main.css) puts its bottom edge at 5.6rem
   — so the rail can never end up underneath the bar. A rail taller than the
   remaining viewport scrolls inside itself instead of being pushed off-screen. */
.gn-gallery {
  --gn-header-edge:5.6rem;   /* header top offset + min-height, from main.css */
  --gn-rail-gap:1.75rem;     /* clears the bar's `0 12px 32px` shadow, not just its box */
  --gn-rail-bottom:.75rem;   /* clearance kept above the viewport bottom */
  position:sticky;
  top:calc(var(--gn-header-edge) + var(--gn-rail-gap));
  max-height:calc(100dvh - var(--gn-header-edge) - var(--gn-rail-gap) - var(--gn-rail-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  min-width:0;
  /* The rail is the only scroll container on this page, so its scrollbar is the
     only one a visitor ever sees. A 6px forest-tinted thumb replaces the default
     chunky grey bar: quiet at rest, deeper on hover, accent while dragged.
     `padding-right` keeps the filter rows and the overline off the thumb, and
     `scrollbar-gutter:stable` reserves the 6px only while the rail overflows, so
     those rows never shift as it starts or stops scrolling. */
  scrollbar-width:thin;
  scrollbar-color:rgba(16,39,31,.34) transparent;
  scrollbar-gutter:stable;
  padding-right:.5rem;
}
.gn-gallery:hover { scrollbar-color:rgba(16,39,31,.6) transparent; }
.gn-gallery::-webkit-scrollbar { width:6px; }
.gn-gallery::-webkit-scrollbar-track { background:transparent; }
.gn-gallery::-webkit-scrollbar-thumb { background:rgba(16,39,31,.34); border-radius:999px; }
.gn-gallery::-webkit-scrollbar-thumb:hover { background:rgba(16,39,31,.62); }
.gn-gallery::-webkit-scrollbar-thumb:active { background:var(--accent); }
.gn-gallery::-webkit-scrollbar-corner { background:transparent; }
/* The collapsible wrapper only exists for the touch panel: on desktop it is
   transparent to layout and its summary is inert, so the rail renders exactly
   as before. */
.gn-detail, .gn-detail-body { display:contents; }
.gn-detail-summary { display:none; }
.gn-gallery .gn-category { min-height:72px; gap:.55rem; }
.gn-gallery .gn-label { font-size:clamp(1.15rem,1.75vw,1.7rem); }
.gn-gallery .gn-cover { display:none; }
.gn-gallery .gn-count { padding-top:1rem; }
.gn-gallery .gn-category[aria-current] .gn-label { font-style:italic; }
.gn-gallery .gn-techniques nav { grid-template-columns:1fr; }
.gallery-results { min-width:0; }
.gallery-results .collection-status { margin:0 0 1.25rem; align-items:center; }
.gallery-results .collection-status h2 { margin:0; font-size:1.8rem; }
.gallery-results .collection-status p { font-size:.75rem; }
.gallery-results .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Above 1024px the rail is tall enough for its own gap; the touch tiers below
   take the panel branch instead. */
@media(min-width:1025px) and (max-height:800px) {
 .gn-gallery { --gn-rail-gap:1.25rem; }
}
/* Touch layout (tablet and phone): the rail becomes a pinned, collapsible filter
   panel — pinned so the filters are reachable at any scroll position exactly
   like the desktop rail, collapsible because open it would otherwise own most
   of the viewport. The card grid inside is untouched: only the container and the
   surrounding results block change. */
@media(max-width:1024px) {
  /* One column: the filter panel first, then the results. The layout gap is
     deliberately the same as the card grid's, so the panel, the section label
     and the cards read as one column rather than three separate blocks. */
 .gallery-layout { grid-template-columns:1fr; gap:1rem; }
 .gn-gallery {
   /* Tablet clears the desktop-height bar (top .65rem, shell 4.2rem); the phone
      tier below tightens it for the shorter mobile bar. */
   top:calc(.65rem + 4.2rem + env(safe-area-inset-top));
   z-index:20;
   max-height:calc(100dvh - .65rem - 4.2rem - env(safe-area-inset-top) - 1rem);
   overflow-y:auto;
   overscroll-behavior:contain;
   scrollbar-gutter:auto;
   scrollbar-width:auto;
   scrollbar-color:auto;
   padding:.85rem;
   background:var(--forest);
   color:var(--cream);
   border-radius:16px;
   position:sticky;
 }
 /* Closed, the panel is a single tappable row that still names the collection. */
 .gn-detail { display:block; }
 .gn-detail:not([open]) > .gn-detail-body { display:none; }
 .gn-detail-summary { display:flex; align-items:center; gap:.6rem; min-height:44px; cursor:pointer; list-style:none; font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
 .gn-detail-summary::-webkit-details-marker { display:none; }
 .gn-detail-summary::after { content:'▾'; margin-left:auto; font-size:.95rem; line-height:1; transition:transform .2s ease; }
 .gn-detail[open] .gn-detail-summary::after { transform:rotate(180deg); }
 .gn-detail[open] .gn-detail-summary { margin-bottom:.7rem; border-bottom:1px solid #ffffff20; }
 .gn-detail-count { color:#c0ccc4; font-weight:400; }
 /* The panel scrolls inside itself, so its last row is inset from the bottom. */
 .gn-detail-body { padding-bottom:4.5rem; }
 /* The panel header already carries this line, so the inner overline is
    redundant in the panel; it stays for the desktop rail. */
 .gn-gallery .gn-overline { display:none; }
 .gn-gallery .gn-categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
 .gn-gallery .gn-category { display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-rows:1fr auto; column-gap:.55rem; row-gap:.15rem; min-height:76px; padding:.65rem .5rem; background:#263f35; color:var(--cream); border:1px solid #ffffff12; border-radius:9px; }
 .gn-gallery .gn-cover { display:block; grid-column:1; grid-row:1/3; width:36px; height:44px; align-self:center; object-fit:cover; border-radius:5px; transform:rotate(-4deg); }
 .gn-gallery .gn-label { grid-column:2; align-self:end; font:500 .75rem/1.25 var(--font-sans); letter-spacing:0; padding:0; overflow-wrap:normal; }
 .gn-gallery .gn-count { grid-column:2; font:400 .62rem/1.2 var(--font-sans); opacity:.7; padding:0; }
 .gn-gallery .gn-count::after { content:' items'; }
 .gn-gallery .gn-number, .gn-gallery .gn-arrow, .gn-gallery .gn-flow { display:none; }
 .gn-gallery .gn-category[aria-current] { background:#f0ddc2; color:var(--forest); border-color:#f0ddc2; }
 .gn-gallery .gn-category[aria-current] .gn-label { font-style:normal; font-weight:650; }
 .gn-gallery .gn-category[aria-current] .gn-cover { transform:rotate(0deg); }
 .gn-gallery .gn-techniques { margin-top:.65rem; border-color:#ffffff25; border-bottom:0; }
 .gn-gallery .gn-techniques summary { min-height:44px; font-size:.8rem; }
 .gn-gallery .gn-techniques summary span { color:#c0ccc4; font-size:.58rem; }
 .gn-gallery .gn-techniques nav { grid-template-columns:1fr; padding-bottom:0; }
 .gn-gallery .gn-techniques a { border-color:#ffffff30; }
 .gn-gallery .gn-techniques a[aria-current] { color:var(--forest); background:var(--cream); }
 /* The section label is the filter panel's caption: it sits tight under the
    panel, is left-aligned like every other line in the column, and borrows the
    panel's uppercase label voice instead of opening its own section. */
 .gallery-results .collection-status { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; margin:0 0 .25rem; }
 .gallery-results .collection-status h2 { font-size:clamp(1.3rem,5.2vw,1.55rem); }
 .gallery-results .collection-status p { margin:0; font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
 .gallery-results .document-note { margin-top:.25rem; }
 .gallery-results .collection-pagination { margin-top:1.5rem; }
 .gallery-results .collection-note { margin-top:1.25rem; text-align:left; }
}
/* Phone: the mobile drawer owns the navigation from here down, so the panel is
   measured against the shorter mobile bar. Tablet keeps the desktop bar
   geometry above this tier, which is why only the offset changes here. */
@media(max-width:760px) {
 .gn-gallery { top:calc(.5rem + 3.75rem + env(safe-area-inset-top)); max-height:calc(100dvh - .5rem - 3.75rem - env(safe-area-inset-top) - 4.75rem); }
}
@media(max-width:360px) {
 .gn-gallery { padding:.65rem; }
 .gn-gallery .gn-category { grid-template-columns:28px minmax(0,1fr); gap:.3rem; padding:.6rem .4rem; }
 .gn-gallery .gn-cover { width:28px; height:38px; }
 .gn-gallery .gn-label { font-size:.7rem; }
}