@charset "UTF-8";

:root {
    --root-font-size:             14px;     /* default font size, from which everything is calculated */
    
    /* ── Layout & Spacing ── */
    --html-padding-sides:         0.5rem;
    --html-padding-top:           0.5rem;
    --html-padding-bottom:        0.5rem;
    --body-margin-top:            0.5rem;

    /* ── Colors (theme-independent) ── */
    --bg-dark:                    #362b21;
    --bg-light:                   #dbd2c3;
    --fg-bright:                  #ffd700;
    --bevel-highlight:            #ffffff;
    --bevel-shadow:               #6c6c6c;
    --pane-bg-light:              #bab2a6;
    --pane-bg-dark:               #635243;
    --color-button-clear:         #f8171c;
    --color-button-submit:        #1434A4;
    --color-button-text:          #ffffff;
    --color-facebook-blue:        #1778f2;
    --color-neon-green:           #39FF14;
    --color-input-placeholder:    #808080;
    --color-logo-shadow:          rgba(0, 0, 255, 0.8);

    /* ── Typography ── */
    --body-font-base-size:        var(--root-font-size);
    --body-font-base:             system-ui, sans-serif;
    --h1-font-family:             "Old Typewriter";
    --h1-font-size:               1.75rem;
    --h2-font-family:             "Old Typewriter";
    --h2-font-size:               1.35rem;
    --h2-margin:                  0.5em 0;
    --h3-font-family:             var(--body-font-base);     /* section labels in burger menu */
    --search-help-font-size:      0.90rem;
    
    /* ── Z-index scale ── */
    --z-header:                   10;
    --z-main:                     20;
    --z-overlay:                  1000;
    --z-dropdown-backdrop:        9050;     /* GDDropdown modal backdrop (narrow viewport) */
    --z-dropdown-panel:           9100;     /* GDDropdown open panel */
    --z-warpo-hint:               99998;    /* "psst, have you tried..." hint */
    --z-fullscreen:               99999;    /* warpo canvas lifted to fullscreen; below --z-modal */
    --z-modal:                    100000;   /* warpo settings modal — top of the stack */

    /* ── Transition durations ── */
    --transition-fastest:         80ms;     /* gd-rail-btn hover */
    --transition-fast:            120ms;    /* tooltip show/hide */
    --transition-base:            150ms;    /* toggle switches, icon transforms, lightbox spinner */
    --transition-medium:          220ms;    /* lightbox image swap */
    --transition-slow:            300ms;    /* nav-menu backdrop fade */
    --transition-slower:          400ms;    /* theme switch */
    --transition-slowest:         500ms;    /* warpo hint, photo-thumb glow filter */

    /* ── Header ── */
    --banner-gap-wide:            1rem;
    --button-size:                2.2rem;                 /* standard button dimensions */
    --controls-max-width:         382px;                  /* we should be able to calc */
    --cycle-time:                 30s;                    /* duration of one psychedelic cycle */
    --grid-gap:                   6px;                    /* interstitial space in grid */
    --logo-max-height:            60px;
    --nav-hr-thickness:           0.5px;                  /* nav submenu horizontal divider thickness */
    --nav-hr-margin:              0.2em;                  /* nav submenu horizontal divider above & below space */
    --nav-hr-width:               75%;                    /* nav submenu horizontal divider pct of available width */
    --text-input-height:          1.8rem;                 /* match button height roughly */
    --text-input-max-width:       350px;                  /* FIXME */
    --url-eye-gold:               url("/images/ICONS/Eye_of_Providence_Gold.svg");
    --url-eye-green:              url("/images/ICONS/Eye_of_Providence_Green.svg");
    --wordmark-wh-ratio:          calc( 3400 / 500 );     /* GDSets.com SVG width / height */

    /* ── Image Gallery ── */
    --button-border:              1px solid var(--color-thumb-border);
    --button-bg:                  var(--color-button-submit);
    --button-fg:                  var(--color-button-text);
    /* ── Gallery Panel ── */
    --panel-bg:                   var(--pane-bg);
    --panel-border:               1px solid #000000;
    --radius-sm:                  6px;
    --radius-md:                  8px;
    --radius-lg:                  10px;
    --radius-xl:                  14px;

    --panel-radius:               var(--radius-xl);
    --panel-pad:                  14px;

    --group-border:               1px solid #000000;
    --group-radius:               var(--radius-lg);
    --group-pad-y:                10px;
    --group-pad-x:                12px;

    --legend-pad-x:               6px;
    --legend-left:                8px;
    --legend-lift:                55%;

    --row-gap:                    12px;

    /* Spacing knobs for wide mode */
    --gap-years-actions:          14px;
    --gap-actions-status:         14px;

    --status-max:                 clamp(18ch, 40vw, 52ch);
    --status-lines:               3;
    --status-font:                0.875rem;
    --status-line:                1.15;

    --btn-font:                   0.875rem;
    --thumb-tip-font:             0.75rem;
    --btn-pad-y:                  6px;
    --btn-pad-x:                  10px;
    --btn-min:                    8ch;
    --btn-border:                 1px solid #000000;
    --btn-radius:                 8px;
    --btn-color:                  #ffffff;

    /* Spacing knobs for narrow mode */
    --narrow-gap-years-actions:   7px;
    --narrow-row-gap:             6px;

    /* ── Lightbox ── */
    --lightbox-vh:                100vh;     /* JS sets this from visualViewport/innerHeight */
    --lightbox-bg:                rgba(0, 0, 0, 0.82);

    /* Caption geometry */
    --lightbox-cap-bottom:        8px;
    --lightbox-cap-pad-y:         7px;
    --lightbox-cap-pad-x:         16px;
    --lightbox-cap-line:          16px;
    --lightbox-cap-lines:         2;     /* title + counter */

    /* Controls */
    --lightbox-btn-hit:           44px;

    /* Breathing room above image and above caption */
    --lightbox-img-gap:           1em;

    /* Derived caption height (for reserving image band) */
    --lightbox-cap-height: calc(
        (var(--lightbox-cap-lines) * var(--lightbox-cap-line)) +
        (2 * var(--lightbox-cap-pad-y))
    );

    /* Space to reserve at bottom of the image band */
    --lightbox-cap-reserve: calc(
        var(--lightbox-cap-bottom)
        + env(safe-area-inset-bottom, 0px)
        + var(--lightbox-cap-height)
        + var(--lightbox-img-gap)
    );

    /* ── Homepage ── */
    --narrow-mode-panel-gap:      1.0rem;

    --panel-gap:                  2em;

    --wn-border:                  0;
    --wn-border-style:            solid;
    --wn-padding:                 0 0 0 0;

    --tigdh-border:               0;
    --tigdh-border-style:         solid;
    --tigdh-border-radius:        var(--radius-sm);
    --tigdh-line-height:          1.15;
    --tigdh-ul-padding-left:      0;
    --tigdh-li-margin:            0 0 0.40em 0px;
    --tigdh-bg-light:             #bab2a6;
    --tigdh-bg-dark:              #635243;
    --tigdh-padding:              0.5rem 1em 0em 0.5em;

    /* Slideshow caption */
    --cap-font-size:              0.875rem;
    --cap-line-height:            16px;
    --cap-pad-y:                  7px;
    --cap-pad-x:                  16px;
    --cap-margin-top:             8px;
    --cap-border-radius:          var(--radius-lg);
    --cap-bg:                     rgba(0, 0, 0, 0.80);
    --cap-color:                  #ffffff;

    /* ── Search Results ── */
    --header-separation:          16px;
    --section-separation:         5px;
    --set-separation:             5px;
    --ref-size:                   1.15rem;     /* Size of footnote asterisk */
    --ref-style:                  bold;

    /* ── Tooltips ── */
    --tooltip-edge:               15px;

    --tooltip-bg-light:           var(--bg-dark);
    --tooltip-fg-light:           var(--fg-bright);
    --tooltip-bg-dark:            var(--fg-bright);
    --tooltip-fg-dark:            var(--bg-dark);

    --tooltip-lineup-ul-light:    #000000;
    --tooltip-lineup-ul-dark:     #ffd700;

    /* Venue image tooltip */
    --tooltip-img-max-size:       500px;     /* max size of larger dimension */

    /* Chrome pieces used to calc how much viewport the tip image can fill.*/
    --tooltip-viewport-margin:    8px;
    --tooltip-pad-h:              10px;     /* matches padding: 8px 10px on #tip */
    --tooltip-pad-v:              8px;
    --tooltip-shadow-x:           2px;      /* matches box-shadow on #tip */
    --tooltip-shadow-y:           4px;
    --tooltip-shadow-blur:        10px;
    --tooltip-chrome-h:           calc(2 * (var(--tooltip-viewport-margin) + var(--tooltip-pad-h) + var(--tooltip-shadow-blur) + var(--tooltip-shadow-x)));
    --tooltip-chrome-v:           calc(2 * (var(--tooltip-viewport-margin) + var(--tooltip-pad-v) + var(--tooltip-shadow-blur) + var(--tooltip-shadow-y)));

    --tooltip-half:               calc(var(--tooltip-edge) / 2);

    --stats-line-height:          1.25;

    /* ── GDDropdown ── */
    --gd-color-text:              #222222;
    --gd-color-border:            #bbbbbb;
    --gd-color-placeholder:       #888888;
    --gd-color-trigger-bg:        #ffffff;
    --gd-color-trigger-border:    #cccccc;
    --gd-color-panel-bg:          #ffffff;
    --gd-color-panel-shadow:      rgba(0,0,0,0.22);
    --gd-color-item-hover:        #eae6f5;
    --gd-color-item-selected-bg:  #1434A4;
    --gd-color-item-selected-fg:  #ffffff;
    --gd-color-item-blank-fg:     #999999;
    --gd-color-rail-bg:           #f0ede7;
    --gd-color-rail-btn-bg:       #e8e4de;
    --gd-color-rail-btn-border:   #aaaaaa;
    --gd-color-rail-btn-active:   #1434A4;
    --gd-color-rail-btn-act-fg:   #ffffff;
    --gd-color-backdrop:          rgba(0,0,0,0.4);
    --gd-color-focus:             #1434A4;
    --gd-radius-trigger:          5px;
    --gd-radius-panel:            11px;
}

/* =========================================================
   Breakpoint reference
   CSS custom properties can't be used inside @media conditions, so
   these are documented here rather than defined as variables. Every
   @media (max-width/min-width: ...) in this file should be one of:

     800px / 799px  — site-wide wide/narrow header layout split
                       (intentional complementary pair — keep in sync)
     650px          — gallery-panel and warpo modal both collapse to
                       a stacked/wrapped layout at this width
     500px          — advanced-search: checkbox group wraps to column
   ========================================================= */

/* =========================================================
   Theme: Light Mode
   ========================================================= */
[data-theme="light"] {
    --color-active:               #1434A4;
    --color-background:           var(--bg-light);
    --color-hover:                #ffffff;
    --color-hr:                   #ffffff;
    --color-input-background:     #ffffff;
    --color-input-placeholder:    #808080;
    --color-input-text:           #000000;
    --color-link:                 #1434A4;
    --color-photo-border:         var(--color-neon-green);
    --color-search-button-background: var(--color-facebook-blue);
    --color-search-button-fill:   #ffffff;
    --color-text:                 #000000;
    --color-thumb-border:         #000000;
    --color-thumb-glow:           brightness(1.3) drop-shadow( 0 0 4px rgba(0, 0, 255, 0.8));
    --color-thumb-glow-off:       brightness(1)   drop-shadow( 0 0 4px rgba(0, 0, 255, 0));
    --color-visited:              #1434A4;
    --h1-fade-rgb:                0 0 0;       /* black */
    --svg-eye-of-god:             var(--url-eye-green);
    --pane-bg:                    var(--pane-bg-light);
    --tigdh-bg:                   var(--tigdh-bg-light);
    --ref-color:                  #000000;
    --tooltip-bg:                 var(--tooltip-bg-light);
    --tooltip-fg:                 var(--tooltip-fg-light);
    --tooltip-lineup-ul:          var(--tooltip-lineup-ul-light);
    --tooltip-img-ul:             var(--color-photo-border);
    --rainbow-1:                  #dc143c;
    --rainbow-2:                  #ffa500;
    --rainbow-3:                  #ffff00;
    --rainbow-4:                  #008000;
    --rainbow-5:                  #00ffff;
    --rainbow-6:                  #ee82ee;
}

/* =========================================================
   Theme: Dark Mode
   ========================================================= */
[data-theme="dark"] {
    --color-active:               #1434A4;
    --color-background:           #362b21;
    --color-hover:                #ffffff;
    --color-hr:                   #000000;
    --color-input-background:     #000000;
    --color-input-placeholder:    #808080;
    --color-input-text:           whitesmoke;
    --color-link:                 #92bbf0;
    --color-photo-border:         #dc143c;
    --color-search-button-background: var(--color-facebook-blue);
    --color-search-button-fill:   #000000;
    --color-text:                 lightgray;
    --color-thumb-border:         #ffffff;
    --color-thumb-glow:           brightness(0.8) drop-shadow( 0 0 4px rgba(255,0,255, 1.0));
    --color-thumb-glow-off:       brightness(1)   drop-shadow( 0 0 4px rgba(255,0,255, 0));
    --color-visited:              #92bbf0;
    --h1-fade-rgb:                255 255 255;     /* white */
    --svg-eye-of-god:             var(--url-eye-gold);
    --pane-bg:                    var(--pane-bg-dark);
    --tigdh-bg:                   var(--tigdh-bg-dark);
    --ref-color:                  #ffd700;
    --tooltip-bg:                 var(--tooltip-bg-dark);
    --tooltip-fg:                 var(--tooltip-fg-dark);
    --tooltip-lineup-ul:          var(--tooltip-lineup-ul-dark);
    --tooltip-img-ul:             var(--color-photo-border);
    --rainbow-1:                  #ffd700;
    --rainbow-2:                  #ff8c00;
    --rainbow-3:                  #b22222;
    --rainbow-4:                  #6b8e23;
    --rainbow-5:                  #800080;
    --rainbow-6:                  #008080;
}
html {
    font-size:                    var(--root-font-size);
    background-color:             var(--color-background);
    color:                        var(--color-text);
    height:                       100%;
    padding:                      var(--html-padding-top) var(--html-padding-sides) var(--html-padding-bottom);
    transition:                   background-color var(--transition-slower) ease, color var(--transition-slower) ease;
}
html.booting body {
    visibility:                   hidden;
}
body {
    font-family:                  var(--body-font-base);
    font-size:                    var(--body-font-base-size);
    display:                      flex;
    flex-direction:               column;
    margin:                       0;
    min-height:                   100%;
    overflow-x:                   hidden;
    overflow-y:                   auto;
    padding:                      0;
}
body::after {
    content:                      "";
    position:                     fixed;
    bottom:                       0;
    left:                         0;
    width:                        100%;
    height:                       var(--html-padding-bottom);
    background-color:             var(--color-background);
    z-index:                      var(--z-main);
    pointer-events:               none;
}
body.menu-open {
    overflow:                     hidden;
    position:                     fixed;
    left:                         var(--html-padding-sides);
    right:                        var(--html-padding-sides);
    margin:                       0;
}
body.menu-open #site-header-root {
    z-index:                      var(--z-overlay);
}

/* =========================================================
   Base Styles
   ========================================================= */
* {
    box-sizing:                   border-box;
}

#site-main {
    position:                     relative;
    z-index:                      var(--z-main);
    flex:                         1 1 auto;
    padding:                      1rem 0 var(--html-padding-bottom);
}

/* Hide until header signals readiness */
html:not(.header-ready) #site-main {
    visibility:                   hidden;
}
html.header-ready #site-main {
    visibility:                   visible;
}

@font-face {
    font-family:                  "Old Typewriter";
    src:                          url("/fonts/Oldtypewriter.woff2") format("woff2");
    font-weight:                  400;
    font-style:                   normal;
    font-display:                 swap;
}

@font-face {
    font-family:                  "Dymo Label";
    src:                          url("/fonts/Dymo.woff2") format("woff2");
    font-weight:                  400;
    font-style:                   normal;
    font-display:                 swap;
}
h1 {
    font-size:                    var(--h1-font-size);
    font-family:                  var(--h1-font-family);
    margin-top:                   0;
}
h2 {
    font-size:                    var(--h2-font-size);
    font-family:                  var(--h2-font-family);
}
/* h1 fade effect */
h1,
h2 {
    --a1:                           1;     --a2: 0.85; --a3: 0.55; --a4: 0.2;
    --p1:                           0%;    --p2: 35%;  --p3: 70%;  --p4: 100%;

    background: linear-gradient(
        to bottom,
        rgb(var(--h1-fade-rgb) / var(--a1)) var(--p1),
        rgb(var(--h1-fade-rgb) / var(--a2)) var(--p2),
        rgb(var(--h1-fade-rgb) / var(--a3)) var(--p3),
        rgb(var(--h1-fade-rgb) / var(--a4)) var(--p4)
    );

    -webkit-background-clip:        text;
    background-clip:                text;
    color:                          transparent;
    -webkit-text-fill-color:        transparent;
}

/* =========================================================
   Link Styles
   ========================================================= */
a:link {
    text-decoration:              none;
    color:                        var(--color-link);
}

a:visited {
    text-decoration:              none;
    color:                        var(--color-visited);
}

a:active {
    text-decoration:              none;
    color:                        var(--color-active);
}

a:hover {
    text-decoration:              none;
    color:                        var(--color-hover);
}


/* =========================================================
   header.css — Site header and psychedelic animation
   ========================================================= */

/* =========================================================
   Header with Psychedelic Background
   ========================================================= */
#site-header-root {
    position:                     relative;
    isolation:                    isolate;
    contain:                      layout paint style;
    z-index:                      var(--z-header);
}

header {
    width:                        100%;
    position:                     relative;
    background:                   none;
    padding:                      0;
    overflow:                     hidden;     /* prevents psychedelic animation from creating scrollbars */
}

#psychedelia {
    position:                     relative;
    overflow:                     hidden;
    min-height:                   max-content;
    padding:                      0.5rem;
    isolation:                    isolate;
    perspective:                  1200px;
    transform-origin:             center center;
    border-radius:                var(--radius-lg);
}
/* =========================================================
   WebGL psychedelic warp layer
   ========================================================= */
#psy-warp-canvas {
    position:                     absolute;
    inset:                        0;
    width:                        100%;
    height:                       100%;
    display:                      block;
    border-radius:                var(--radius-lg);
    pointer-events:               none;
    z-index:                      0;
}

/* When WebGL warp is running, hide the CSS-gradient background to avoid double visuals.
   animation:none is required — running keyframes override normal cascade opacity values. */
.psy-warp-on #psychedelia::before {
    animation:                    none;
    opacity:                      0;
    visibility:                   hidden;
}
/* Keep the "Eye" overlay above the WebGL layer */
.psy-warp-on #psychedelia::after {
    z-index:                      1;
}

#psychedelia::before {
    content:                      "";
    position:                     absolute;
    inset:                        -200%;
    /* Fallback if there were WebGL problems */
    background:
        radial-gradient(
            ellipse at center,
            #ff0000 0%,
            #ffa500 12%,
            #ffff00 24%,
            #008000 36%,
            #00ffff 48%,
            #0000ff 60%,
            #ee82ee 72%,
            #ff0000 84%
        );
    filter:                       blur(18px);
    mask:                         radial-gradient(ellipse at center, #000000 40%, transparent 100%);
    -webkit-mask:                 radial-gradient(ellipse at center, #000000 40%, transparent 100%);
    animation:
        psychedelic var(--cycle-time) linear infinite,
        fadeinout var(--cycle-time)  linear infinite;

    z-index:                      0;
    pointer-events:               none;
}

#psychedelia::after {
    content:                      "";
    position:                     absolute;
    inset:                        0;
    background-image:             var(--svg-eye-of-god);
    background-position:          center;
    background-repeat:            no-repeat;
    background-size:              contain;
    animation:                    providence var(--cycle-time)  linear infinite;
    pointer-events:               none;
    opacity:                      0;
    z-index:                      1;
}
#psychedelia > :not(#psy-warp-canvas) {
    position:                     relative;
    z-index:                      2;
}

.no-psychedelia #psychedelia::before,
.no-psychedelia #psychedelia::after {
    display:                      none;
}
.no-psychedelia #psy-warp-canvas {
    display:                      none !important;     /* overrides inline style set by JS each frame */
}

@keyframes psychedelic {
    0%   { transform: scaleX(1.0) scaleY(1.0) rotate(0deg); }
    20%  { transform: scaleX(2.4) scaleY(1.15) rotate(36deg); }
    50%  { transform: scaleX(3.8) scaleY(1.3)  rotate(90deg); }
    80%  { transform: scaleX(2.4) scaleY(1.15) rotate(144deg); }

    /* fade-out phase, hold size */
    90%  { transform: scaleX(1.0) scaleY(1.0) rotate(180deg); }

    /* invisible but opacity about to return */
    96.67% { transform: scaleX(0.01) scaleY(0.01) rotate(180deg); }

    /* Big Bang with opacity already 1 */
    100%   { transform: scaleX(1.0)  scaleY(1.0)  rotate(180deg); }
}
@keyframes providence {
    0%, 90% { opacity: 0; }
    95%     { opacity: 1; }
    100%    { opacity: 0; }
}
@keyframes fadeinout {
    0%, 85%   { opacity: 1; }
    90%       { opacity: 0; }
    96.7%     { opacity: 0; }   /* invisible during shrink */
    100%      { opacity: 1; }   /* opacity returns with bang */
}

#wide-banner {
    position:                     relative;
    z-index:                      2;
}


/* =========================================================
   DEBUG: Disable psychedelic visuals & animation
   DEBUG: Outline EVERYTHING (toggle with 'x' key)
   ========================================================= */

.outline-debug *,
.outline-debug *::before,
.outline-debug *::after {
    outline:                      1px solid rgba(255, 0, 255, 0.65);
    outline-offset:               -1px;
}


/* =========================================================
   Utility classes
   ========================================================= */

/* Hide native scrollbar (cross-browser) while keeping the element scrollable */
.no-scrollbar {
    scrollbar-width:              none;
    -ms-overflow-style:           none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }


/* =========================================================
   COMMON ELEMENTS - Shared across wide/narrow modes
   ========================================================= */
hr {
    border:                       0;
    border-top:                   1px solid var(--color-hr);
    margin:                       var(--body-margin-top) auto;
    width:                        100%;
}

/* Search input wrapper (positions ⓘ  button inside the input) */
.search-input-wrapper {
    position:                     relative;
    display:                      flex;
    flex:                         1 1 auto;
    max-width:                    var(--text-input-max-width);
    min-width:                    48px;
}

/* .search-info-btn (search help) and .pdf-info-btn (PDF search help) are
   two distinct buttons owned by separate JS (header.js / pdf-search.js),
   sharing one look. */
.search-info-btn,
.pdf-info-btn {
    position:                     absolute;
    right:                        0.4rem;
    top:                          50%;
    transform:                    translateY(-50%);
    width:                        1.1em;
    height:                       1.1em;
    border-radius:                50%;
    background-color:             var(--color-link);
    border:                       none;
    cursor:                       pointer;
    color:                        var(--color-input-background);
    font-size:                    0.85rem;
    font-weight:                  bold;
    font-style:                   italic;
    line-height:                  1.1em;
    padding:                      0;
    text-align:                   center;
    opacity:                      0.75;
}

.search-info-btn:hover,
.search-info-btn.active,
.pdf-info-btn:hover,
.pdf-info-btn.active {
    opacity:                      1;
}

/* Search help popup */
#search-help-popup {
    position:                     fixed;
    z-index:                      var(--z-overlay);
    background:                   var(--tooltip-bg);
    color:                        var(--tooltip-fg);
    border-radius:                var(--radius-md);
    padding:                      var(--tooltip-pad-v) var(--tooltip-pad-h);
    box-shadow:                   var(--tooltip-shadow-x) var(--tooltip-shadow-y) var(--tooltip-shadow-blur) rgba(0,0,0,.7);
    max-width:                    360px;
    font:                         var(--search-help-font-size)/1.35 system-ui, sans-serif;
}

#search-help-popup p {
    margin:                       0 0 0.4rem 0;
}

#search-help-popup #example-container {
    display:                      grid;
    grid-template-columns:        auto 1fr;
    gap:                          0.2rem 1rem;
    margin-top:                   0.5rem;
}

#search-help-popup .example {
    white-space:                  nowrap;
    text-decoration:              none;
    color:                        var(--tooltip-fg);
    font-weight:                  bold;
}

#search-help-popup .explanation {
    color:                        var(--tooltip-fg);
    font-style:                   italic;
}

/* Search input styling */
#common-search-input {
    background-color:             var(--color-input-background);
    border-radius:                var(--radius-sm);
    border:                       2px;
    box-shadow:
        inset 1px 1px 2px var(--bevel-shadow),
        inset -1px -1px 1px var(--bevel-highlight);
    color:                        var(--color-input-text);
    font-size:                    0.9rem;
    height:                       var(--text-input-height);
    line-height:                  1.6rem;
    padding:                      0.3rem 2rem 0.3rem 0.5rem;
    width:                        100%;
}

#common-search-input::placeholder {
    color:                        var(--color-input-placeholder);
    opacity:                      1;
}

/* Search button styling */
.common-search-button {
    -webkit-appearance:           none;
    align-items:                  center;
    background-color:             var(--color-search-button-background);
    border-bottom-color:          var(--bevel-shadow);
    border-left-color:            var(--bevel-highlight);
    border-radius:                var(--radius-sm);
    border-right-color:           var(--bevel-shadow);
    border-style:                 solid;
    border-top-color:             var(--bevel-highlight);
    border-width:                 2px;
    color:                        var(--color-search-button-fill);
    cursor:                       pointer;
    display:                      flex;
    flex:                         0 0 auto;
    height:                       var(--button-size);
    justify-content:              center;
    line-height:                  0;
    margin:                       0;
    padding:                      0;
    width:                        var(--button-size);
}

.common-search-button:hover {
    filter:                       brightness(1.3);
}

/* Search icon (SVG) styling */
.common-search-icon {
    fill:                         currentColor;
    height:                       1.2rem;
    width:                        1.2rem;
}

#common-hamburger-button {
    width:                        var(--button-size);
    height:                       var(--button-size);
    padding:                      0;
    background:                   none;
    border:                       none;
    cursor:                       pointer;
    flex-shrink:                  0;
    position:                     relative;
}

#common-hamburger-button img {
    width:                        100%;
    height:                       100%;
    display:                      block;
}

#common-hamburger-button:hover {
    filter:                       brightness(1.3);
}

/* Thunder flash overlay effects */
.blackout {
    position:                     fixed;
    top:                          0;
    left:                         0;
    width:                        100vw;
    height:                       100vh;
    opacity:                      1;
    pointer-events:               none;
    z-index:                      var(--z-overlay);
    transition:                   none;
}

.blackout::before {
    content:                      "";
    position:                     absolute;
    inset:                        0;
    background:                   #000000;
    z-index:                      0;
}

.flash {
    position:                     absolute;
    inset:                        0;
    z-index:                      1;
    opacity:                      1;
    transition:                   none;
}

/* =========================================================
   NARROW MODE - Banner Grid
   ========================================================= */
#narrow-banner {
    background:                   none;
    border-radius:                var(--radius-lg);
    display:                      grid;
    gap:                          var(--grid-gap);
    grid-template-columns:        1fr;
    grid-template-rows:           auto auto;
    padding:                      0;

    margin:                       0 auto;
    position:                     relative;
    width:                        100%;
    z-index:                      1;
}

/* NARROW MODE - Row 1 - Logo Components */
#narrow-logo-row {
    display:                      flex;
    align-items:                  center;
    justify-content:              center;
    padding:                      0;
    gap:                          var(--grid-gap);
}

#narrow-logo-link {
    display:                      flex;
    align-items:                  center;
    gap:                          var(--grid-gap);
    text-decoration:              none;
}

#narrow-logo-icon-container,
#narrow-logo-wordmark {
    display:                      block;
    filter:                       drop-shadow(0 0 10px transparent);
    will-change:                  filter;
}

/* Prevent intrinsic-size SVG flash before JS scales */
#narrow-logo-icon-container {
    position:                     relative;
    width:                        var(--logo-max-height);
    height:                       var(--logo-max-height);
}

img#narrow-logo-wordmark {
    height:                       var(--logo-max-height);
    width:                        calc(var(--logo-max-height) * var(--wordmark-wh-ratio));
    max-width:                    100%;
}

/* Trigger both glows when hovering over the row */
#narrow-logo-row:hover #narrow-logo-icon-container,
#narrow-logo-row:hover #narrow-logo-wordmark {
    filter:                       drop-shadow(0 0 4px var(--color-logo-shadow));
}

#narrow-logo-icon-container svg,
#narrow-logo-icon-container img {
    display:                      block;
    width:                        100%;
    height:                       100%;
    position:                     absolute;
    top:                          0;
    left:                         0;
    pointer-events:               none;
}

#narrow-logo-icon {
    display:                      block;
}

/* NARROW MODE - Row 2 - Controls (Hamburger & Search) */

#narrow-search-row {
    display:                      flex;
    align-items:                  center;
    justify-content:              center;
    padding:                      0;
    width:                        100%;
}
#narrow-search-input {
    background-color:             var(--color-input-background);
    border-radius:                var(--radius-sm);
    border:                       2px;
    box-shadow:
        inset 1px 1px 2px var(--bevel-shadow),
        inset -1px -1px 1px var(--bevel-highlight);
    color:                        var(--color-input-text);
    font-size:                    0.9rem;
    height:                       var(--text-input-height);
    line-height:                  1.6rem;
    min-width:                    48px;
    padding:                      0.3rem 2rem 0.3rem 0.5rem;
    width:                        100%;
}

#narrow-search-input::placeholder {
    color:                        var(--color-input-placeholder);
    opacity:                      1;
}
#narrow-controls {
    display:                      flex;
    align-items:                  center;
    gap:                          var(--grid-gap);
    width:                        100%;
    max-width:                    var(--controls-max-width);
}
#narrow-controls form {
    display:                      flex;
    align-items:                  center;
    gap:                          var(--grid-gap);
    width:                        100%;
}

/* =========================================================
   WIDE MODE - Banner Styles
   ========================================================= */
#wide-banner {
    align-items:                  center;
    background:                   none;
    border-radius:                var(--radius-lg);
    display:                      grid;
    gap:                          var(--banner-gap-wide);
    grid-template-columns:        minmax(min-content, 1fr) minmax(min-content, var(--controls-max-width));
    overflow:                     visible;
    padding:                      0;
    position:                     relative;
    z-index:                      1;
}

#wide-logo-wrapper {
    align-items:                  center;
    display:                      flex;
    flex:                         1 1 auto;
    gap:                          var(--banner-gap-wide);
    justify-content:              flex-start;
    overflow:                     visible;
}

#wide-hamburger-button {
    width:                        calc(var(--logo-max-height) * 0.707);
    height:                       calc(var(--logo-max-height) * 0.707);
    padding:                      0;
    background:                   none;
    border:                       none;
    cursor:                       pointer;
    flex-shrink:                  0;
    position:                     relative;
}

#wide-hamburger-button img {
    width:                        100%;
    height:                       100%;
    display:                      block;
}

#wide-hamburger-button:hover {
    filter:                       brightness(1.3);
}

/* Notification badges */
.hamburger-badge {
    position:                     absolute;
    top:                          -4px;
    right:                        -4px;
    width:                        16px;
    height:                       16px;
    border-radius:                50%;
    background:                   #FC393E;
    color:                        #fff;
    font-size:                    10px;
    font-weight:                  bold;
    line-height:                  16px;
    text-align:                   center;
    pointer-events:               none;
}

.hamburger-badge.hidden {
    display:                      none;
}

#nav-menu a.has-pub-badge {
    position:                     relative;
}

#nav-menu .nav-pub-badge {
    position:                     absolute;
    top:                          2px;
    left:                         -1em;
    width:                        12px;
    height:                       12px;
    border-radius:                50%;
    background:                   #3a3;
    pointer-events:               none;
}

#wide-logo-link {
    align-items:                  center;
    color:                        inherit;
    display:                      flex;
    gap:                          var(--banner-gap-wide);
    text-decoration:              none;
}

#wide-logo-icon-container {
    position:                     relative;
    width:                        var(--logo-max-height);
    height:                       var(--logo-max-height);
    flex-shrink:                  0;
    filter:                       drop-shadow(0 0 10px transparent);
    will-change:                  filter;
}

#wide-logo-icon-container svg,
#wide-logo-icon-container img {
    display:                      block;
    height:                       100%;
    left:                         0;
    pointer-events:               none;
    position:                     absolute;
    top:                          0;
    width:                        100%;
}

#wide-logo-wordmark {
    display:                      block;
    height:                       var(--logo-max-height);
    width:                        calc(var(--logo-max-height) * var(--wordmark-wh-ratio));
    min-width:                    calc(var(--logo-max-height) * var(--wordmark-wh-ratio));
    max-width:                    100%;
    filter:                       drop-shadow(0 0 10px transparent);
    will-change:                  filter;
}

#wide-logo-link:hover #wide-logo-icon-container,
#wide-logo-link:hover #wide-logo-wordmark {
    filter:                       drop-shadow(0 0 4px var(--color-logo-shadow));
}

#wide-banner-search {
    display:                      flex;
    justify-content:              flex-end;
    min-width:                    0;
    width:                        100%;
}

#wide-banner-search form {
    align-items:                  center;
    display:                      flex;
    gap:                          0.5rem;
    max-width:                    calc(var(--controls-max-width) - var(--button-size) - 0.5rem);
    width:                        100%;
}


/* =========================================================
   Nav Menu - Modal Overlay
   ========================================================= */
#nav-menu {
    position:                     fixed;
    top:                          0;
    left:                         0;
    width:                        100%;
    height:                       100vh;
    background:                   rgba(0, 0, 0, 0.5);
    z-index:                      var(--z-overlay);
    opacity:                      1;
    transition:                   opacity var(--transition-slow) ease;
}

#nav-menu.hidden {
    opacity:                      0;
    pointer-events:               none;
}

#nav-menu-content {
    position:                     fixed;
    background:                   var(--color-background);
    border:                       2px solid var(--color-text);
    border-radius:                var(--radius-md);
    color:                        var(--color-text);
    padding:                      1.0em 1.0em;
    box-shadow:                   4px 4px 20px rgba(0, 0, 0, 0.5);
    width:                        max-content;
    display:                      flex;
    flex-direction:               column;
    overflow:                     hidden;
}

#nav-menu-items {
    overflow-y:                   auto;
    flex:                         1 1 auto;
    min-height:                   0;
    -webkit-overflow-scrolling:   touch;

    /* ── Scroll-hint geometry ─────────────────────────────────────────── */
    --scroll-hint-height:         2.4em;

    /* ── Effect ── uncomment one option to change the visual effect ─────── */

    /* Option A — fade to background (default): */
    --scroll-hint-color:          var(--color-background);

    /* Option B — darken: */
    /* --scroll-hint-color: rgba(0, 0, 0, 0.35); */

    /* ── Curve ── swap to change falloff shape (fill effects only) ───────
       Stops approximate (1−t)³: invisible at leading edge, rapid near
       panel edge.  Swap in the two-stop versions for a linear falloff.   */
    --scroll-hint-grad-before: linear-gradient(to bottom,
    var(--scroll-hint-color)                                        0%,
    color-mix(in srgb, var(--scroll-hint-color) 42%, transparent) 25%,
    color-mix(in srgb, var(--scroll-hint-color) 13%, transparent) 50%,
    color-mix(in srgb, var(--scroll-hint-color)  2%, transparent) 75%,
    transparent                                          100%
    );
    --scroll-hint-grad-after: linear-gradient(to top,
    var(--scroll-hint-color)                                        0%,
    color-mix(in srgb, var(--scroll-hint-color) 42%, transparent) 25%,
    color-mix(in srgb, var(--scroll-hint-color) 13%, transparent) 50%,
    color-mix(in srgb, var(--scroll-hint-color)  2%, transparent) 75%,
    transparent                                          100%
    );
    /* Linear falloff (swap in):
       --scroll-hint-grad-before:    linear-gradient(to bottom, var(--scroll-hint-color), transparent);
       --scroll-hint-grad-after:     linear-gradient(to top,    var(--scroll-hint-color), transparent);     */
    /* ─────────────────────────────────────────────────────────────────── */
}

/* Scroll-hint overlays — sticky pseudo-elements stay pinned to the
   visible edge while content scrolls beneath them.                      */
#nav-menu-items::before,
#nav-menu-items::after {
    content:                      '';
    display:                      none;            /* shown by .can-scroll-* classes */
    position:                     sticky;
    height:                       var(--scroll-hint-height);
    pointer-events:               none;
    z-index:                      1;
}

#nav-menu-items::before {
    top:                          0;
    margin-bottom:                calc(-1 * var(--scroll-hint-height));
    background:                   var(--scroll-hint-grad-before);
}

#nav-menu-items::after {
    bottom:                       0;
    margin-top:                   calc(-1 * var(--scroll-hint-height));
    background:                   var(--scroll-hint-grad-after);
}

#nav-menu-items.can-scroll-up::before  { display: block; }
#nav-menu-items.can-scroll-down::after { display: block; }

#nav-menu-close {
    position:                     absolute;
    top:                          0.0em;
    right:                        0.0em;
    background:                   transparent;
    border:                       none;
    font-size:                    2rem;
    color:                        var(--color-text);
    cursor:                       pointer;
    padding:                      0 0.10em;
    line-height:                  1;
    z-index:                      var(--z-overlay);
}

#nav-menu h3 {
    font-family:                  var(--h3-font-family);
    margin:                       0;
    font-size:                    1.0em;
    white-space:                  nowrap;
}

#nav-menu .nav-items {
    margin:                       0;
    line-height:                  1.0;
    padding-left:                 1.0em;
    font-size:                    1.0em;
    white-space:                  nowrap;
}

#nav-menu .nav-items + h3 {
    margin-top:                   0.8em;
}

#nav-menu a {
    display:                      block;
    width:                        fit-content;
    padding:                      0.2em 0;
    white-space:                  nowrap;
}

#nav-menu .nav-items hr {
    border:                       none;
    border-top:                   var(--nav-hr-thickness) solid var(--color-text);
    margin:                       var(--nav-hr-margin) 0;
    width:                        var(--nav-hr-width);
    opacity:                      0.3;
}

/* Nav menu theme buttons */
#nav-menu .theme-buttons {
    margin-top:                   0.5em;
    padding-top:                  0.5em;
    border-top:                   1px solid var(--color-text);
    display:                      flex;
    gap:                          0.5em;
}

#nav-menu .theme-button {
    flex:                         1;
    padding:                      0.5em 1em;
    border:                       2px solid;
    border-radius:                var(--radius-sm);
    font-weight:                  bold;
    white-space:                  nowrap;

    /* Raised (light from upper-left) */
    border-top-color:             var(--bevel-highlight);
    border-left-color:            var(--bevel-highlight);
    border-bottom-color:          var(--bevel-shadow);
    border-right-color:           var(--bevel-shadow);
    box-shadow:
        inset 1px 1px 1px var(--bevel-highlight),
        inset -1px -1px 2px var(--bevel-shadow);

    cursor:                       pointer;
}

/* Explicit theme colors */
#nav-menu .theme-button[data-theme="dark"] {
    background:                   var(--bg-dark);
    color:                        var(--bg-light);
}

#nav-menu .theme-button[data-theme="light"] {
    background:                   var(--bg-light);
    color:                        var(--bg-dark);
}

/* Hover only when enabled */
#nav-menu .theme-button:hover:not(:disabled) {
    filter:                       brightness(1.3);
}

/* Disabled/current theme: pressed-in (light from upper-left) */
#nav-menu .theme-button:disabled {
    border-top-color:             var(--bevel-shadow);
    border-left-color:            var(--bevel-shadow);
    border-bottom-color:          var(--bevel-highlight);
    border-right-color:           var(--bevel-highlight);

    box-shadow:
        inset 1px 1px 2px var(--bevel-shadow),
        inset -1px -1px 1px var(--bevel-highlight);

    cursor:                       default;
    filter:                       none;
}

/* =========================================================
   Media Query - Select mode by Viewport Width
   ========================================================= */

/* Wide mode: hide narrow banner */
@media (min-width: 800px) {
    #narrow-banner {
        display:                  none;
    }
}

/* =========================================================
   Warpo hint tooltip (psst, have you tried C-M-w)
   ========================================================= */
#warpo-hint {
    position:                     fixed;
    z-index:                      var(--z-warpo-hint);
    background:                   rgba(0,0,0,0.72);
    color:                        #ffffff;
    padding:                      7px 14px;
    border-radius:                var(--radius-md);
    font-size:                    14px;
    font-family:                  system-ui, sans-serif;
    pointer-events:               none;
    white-space:                  nowrap;
    opacity:                      0;
    transition:                   opacity var(--transition-slowest);
}
#warpo-hint.visible { opacity: 1; }

/* =========================================================
   warpo.css — Warpo engine modal overlay + control panel
   ========================================================= */

/* Modal overlay container */
.modal {
    position:                     fixed;
    inset:                        0;
    display:                      none;
    z-index:                      var(--z-modal);
}
.modal.open { display: block; }

/* Blurred backdrop */
.modal-backdrop {
    position:                     absolute;
    inset:                        0;
    background:                   rgba(0,0,0,0.40);
    backdrop-filter:              blur(2px);
    -webkit-backdrop-filter:      blur(2px);
}

/* Floating panel — draggable */
.modal-panel {
    position:                     fixed;
    left:                         50%;
    top:                          50%;
    transform:                    translate(-50%,-50%);
    z-index:                      1;
    width:                        auto;
    max-width:                    95vw;
    background:                   #111111;
    border:                       1px solid rgba(255,255,255,0.4);
    border-radius:                var(--radius-xl);
    box-shadow:                   0 30px 80px rgba(0,0,0,0.6);
    overflow:                     hidden;
    cursor:                       grab;
}
.modal-panel.dragging { cursor: grabbing; }

/* =========================================================
   2-column UI layout (#warpo-ui)
   ========================================================= */
#warpo-ui {
    display:                      flex;
    align-items:                  flex-start;
    justify-content:              space-between;
    gap:                          36px;
    padding:                      18px 20px;
    font:                         13px/1.3 system-ui, sans-serif;
    color:                        #dddddd;
}

.warpo-col {
    display:                      flex;
    flex-direction:               column;
    gap:                          6px;
    flex:                         0 0 260px;
    width:                        260px;
    min-width:                    0;
    align-items:                  flex-start;
    --warpo-label-w:              78px;     /* wide enough for "Randomize" at 13px bold */
}

/* Section headings — space-between so toggle sits right-aligned */
.warpo-col .section-title {
    display:                      flex;
    align-items:                  center;
    justify-content:              space-between;
    font-weight:                  700;
    font-size:                    17px;
    margin-bottom:                14px;
    width:                        100%;
}

/* =========================================================
   Control groups
   ========================================================= */
.warpo-col .group {
    display:                      flex;
    flex-direction:               column;
    gap:                          6px;
    min-width:                    0;
    width:                        100%;
}

.warpo-col .group + .slider-grid { margin-top: 8px; }

/* =========================================================
   Slider grid — 4-column: label | switch | range | value
   ========================================================= */
.slider-grid {
    display:                      grid;
    grid-template-columns:        var(--warpo-label-w) 60px 1fr 36px;
    align-items:                  center;
    gap:                          8px;
    width:                        100%;
}

.slider-grid .slider-row-label  { font-size: 13px; font-weight: 600; white-space: nowrap; grid-column: 1; }
.slider-grid .slider-row-range { grid-column: 2 / 4; }
.slider-grid .slider-row-range,
.slider-grid .slider-row-switch-range { width: 100%; margin: 0; }
.slider-grid .slider-row-switch-cell { grid-column: 2; display: flex; align-items: center; }
.slider-grid .slider-row-switch-range { grid-column: 3; }
.slider-grid .slider-row-value {
    font-size:                    12px;
    text-align:                   right;
    font-variant-numeric:         tabular-nums;
    opacity:                      .85;
    white-space:                  nowrap;
    grid-column:                  4;
}

/* Background speed row — no switch column */
.rainbow-speed-row { grid-template-columns: var(--warpo-label-w) 1fr 36px; }
.rainbow-speed-row .slider-row-range { grid-column: 2 / 3; }
.rainbow-speed-row .slider-row-value    { grid-column: 3; }

/* =========================================================
   Form controls
   ========================================================= */
#warpo-ui select,
#warpo-ui input[type="range"] { width: 100%; margin: 0; }

#warpo-ui select {
    padding:                      6px;
    background:                   #222222;
    color:                        #dddddd;
    border:                       1px solid #444444;
    border-radius:                var(--radius-sm);
}


/* =========================================================
   Toggle switch — .switch / .slider (inside #warpo-ui only)
   ========================================================= */
#warpo-ui .switch {
    position:                     relative;
    display:                      inline-block;
    width:                        29px;
    height:                       16px;
    flex-shrink:                  0;
}

#warpo-ui .switch input { opacity: 0; width: 0; height: 0; }

#warpo-ui .slider {
    position:                     absolute;
    inset:                        0;
    cursor:                       pointer;
    background:                   #333333;
    border:                       1px solid #555555;
    border-radius:                999px;
    transition:                   var(--transition-base);
}

#warpo-ui .slider:before {
    content:                      "";
    position:                     absolute;
    height:                       12px;
    width:                        12px;
    left:                         2px;
    top:                          50%;
    transform:                    translateY(-50%);
    background:                   #dddddd;
    border-radius:                50%;
    transition:                   var(--transition-base);
}

#warpo-ui .switch input:checked + .slider { background: #22a855; border-color: #2ecc71; }
#warpo-ui .switch input:checked + .slider:before { transform: translate(13px,-50%); }

/* =========================================================
   Warp controls dim when warp is disabled
   ========================================================= */
.warpo-col-warp.warp-disabled > :not(.section-title) { opacity: 0.35; pointer-events: none; }

/* =========================================================
   Randomizer row
   ========================================================= */
#randomizer-row,
#stretch-row {
    display:                      grid;
    grid-template-columns:        var(--warpo-label-w) auto 1fr;
    align-items:                  center;
    width:                        100%;
    margin-top:                   2px;
    gap:                          8px;
}

#randomizer-label,
#stretch-label {
    font-size:                    13px;
    font-weight:                  600;
}

#randomizer-controls {
    display:                      flex;
    align-items:                  center;
    gap:                          8px;
}

#warpo-randomize-now {
    padding:                      1px 8px;
    border-radius:                var(--radius-sm);
    border:                       1px solid rgba(255,255,255,0.18);
    background:                   rgba(255,255,255,0.08);
    color:                        #dddddd;
    font:                         12px/1.3 system-ui, sans-serif;
    cursor:                       pointer;
    white-space:                  nowrap;
}
#warpo-randomize-now:active { transform: translateY(1px); }

/* =========================================================
   Footer — Fullscreen button centered below both columns
   ========================================================= */
#warpo-footer {
    display:                      flex;
    justify-content:              center;
    padding:                      0 20px 14px;
}

#warpo-fullscreen {
    padding:                      7px 32px;
    border-radius:                var(--radius-lg);
    border:                       1px solid rgba(255,255,255,0.18);
    background:                   rgba(255,255,255,0.08);
    color:                        #dddddd;
    font:                         13px/1.3 system-ui, sans-serif;
    cursor:                       pointer;
}
#warpo-fullscreen:active { transform: translateY(1px); }

/* =========================================================
   Fullscreen layer — lifts canvas to viewport overlay
   ========================================================= */
#psy-warp-fullscreen-layer {
    position:                     fixed;
    inset:                        0;
    z-index:                      var(--z-fullscreen);     /* below --z-modal — modal can appear above it */
    pointer-events:               none;
    background-color:             var(--color-background);
}

#psy-warp-fullscreen-layer.hidden { display: none; }

/* When canvas is fullscreen, fill the layer */
#psy-warp-fullscreen-layer > #psy-warp-canvas {
    position:                     absolute;
    inset:                        0;
    width:                        100%;
    height:                       100%;
    border-radius:                0;
}

/* =========================================================
   Narrow viewport: stack columns vertically
   ========================================================= */
@media (max-width: 650px) {
    #warpo-ui {
        flex-wrap:                wrap;
        gap:                      20px;
    }
    .warpo-col {
        flex:                     1 1 260px;
        width:                    100%;
    }
}

/* =========================================================
   philbasses.css — Phil Lesh bass history
   ========================================================= */

.philbasses-photo {
    border:                       1px solid var(--color-thumb-border);
    width:                        375px;
    height:                       auto;
}

/* =========================================================
   gallery.css — Yearbooks page
   ========================================================= */

#yearbook-grid {
    display:                      flex;
    flex-wrap:                    wrap;
    justify-content:              center;
    column-gap:                   0.5rem;
    row-gap:                      0.7rem;
}

.yearbook-desc {
    line-height:                  1;
    margin-top:                   3px;
}

/* =========================================================
   gd-dropdown.css — Custom alphabetic dropdown with jump rail
   Companion to gd-dropdown.js. Defaults for --gd-* vars live in
   :root above; override them per-page to integrate with a theme.
   ========================================================= */

/* ── container ──────────────────────────────────────────────── */

.gd-dropdown {
    min-width: 0;
}

/* ── trigger button ─────────────────────────────────────────── */

.gd-trigger {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    width:              100%;
    min-width:          0;
    gap:                0.35em;
    padding:            0.28em 0.5em 0.28em 0.6em;
    font:               inherit;
    line-height:        1;
    -webkit-appearance: none;
    appearance:         none;
    background:         var(--gd-color-trigger-bg);
    color:              var(--gd-color-text);
    border:             1px solid var(--gd-color-trigger-border);
    border-radius:      var(--gd-radius-trigger);
    cursor:             pointer;
    text-align:         left;
}

.gd-trigger:focus-visible {
    outline:        2px solid var(--gd-color-focus);
    outline-offset: 1px;
}

.gd-trigger-text {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
}

.gd-trigger-text.is-placeholder { color: var(--gd-color-placeholder); }

.gd-trigger-arrow {
    flex-shrink:      0;
    color:            inherit;
    font-size:        1em;
    transform:        scale(1.5);
    transform-origin: center;
    transition:       transform var(--transition-base);
}

.gd-trigger.open .gd-trigger-arrow { transform: rotate(180deg) scale(1.5); }

/* ── panel ──────────────────────────────────────────────────── */

.gd-panel {
    display:        none;
    flex-direction: row;
    background:     var(--gd-color-panel-bg);
    color:          var(--gd-color-text); /* set here so items inherit it, not body */
    border:         1px solid var(--gd-color-border);
    border-radius:  var(--gd-radius-panel);
    overflow:       hidden;
    z-index:        var(--z-dropdown-panel);
}

.gd-panel.is-open  { display: flex; }

.gd-panel.is-float {
    position:   fixed;
    box-shadow: 0 6px 28px var(--gd-color-panel-shadow);
}

.gd-panel.is-modal {
    /* width set inline by JS to match float mode */
    position:   fixed;
    height:     78vh;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* ── list column (blank row + scrollable list) ──────────────── */

.gd-list-column {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
    min-height:     0;
    overflow:       hidden;
}

/* ── blank / deselect row ───────────────────────────────────── */

.gd-blank-row {
    flex-shrink:    0;
    padding:        0.45em 0.75em;
    color:          var(--gd-color-item-blank-fg);
    font-style:     italic;
    border-bottom:  1px solid var(--gd-color-border);
    background:     var(--gd-color-rail-bg);
    box-shadow:     0 3px 6px -1px var(--gd-color-panel-shadow);
    cursor:         pointer;
    user-select:    none;
}

.gd-blank-row:hover      { background: var(--gd-color-item-hover); }
.gd-blank-row.is-selected { background: var(--gd-color-rail-bg); }

/* ── scrollable list ────────────────────────────────────────── */

.gd-list-wrap {
    flex:                1;
    overflow-y:          auto;
    min-width:           0;
    min-height:          0;      /* let flex shrink below content height */
    overscroll-behavior: contain;
    scrollbar-width:     thin;
}

.gd-list-wrap::-webkit-scrollbar       { width: 5px; }
.gd-list-wrap::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 3px; }

.gd-item {
    padding:     0.12em 0.75em;
    cursor:      pointer;
    line-height: 1.1;
    user-select: none;
}

.gd-item:hover       { background: var(--gd-color-item-hover); }
.gd-item.is-selected { background: var(--gd-color-item-selected-bg);
    color:      var(--gd-color-item-selected-fg); }


.gd-filler { pointer-events: none; cursor: default; }

/* ── letter rail — 52px wide; button heights set by JS ─────── */

.gd-rail {
    flex-shrink:    0;
    width:          52px;
    display:        flex;
    flex-direction: column;
    gap:            2px;   /* GAP — must match JS _sizeRail constant */
    padding:        4px;   /* PAD/2 each side — must match JS _sizeRail constant */
    border-left:    1px solid var(--gd-color-border);
    background:     var(--gd-color-rail-bg);
    overflow:       hidden;
}

.gd-rail-btn {
    flex:          none;
    width:         100%;
    border:        1px solid var(--gd-color-rail-btn-border);
    border-radius: 4px;
    font-family:   inherit;
    font-size:     0.7em;
    font-weight:   bold;
    line-height:   1;
    cursor:        pointer;
    background:    var(--gd-color-rail-btn-bg);
    color:         var(--gd-color-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    padding:       0 2px;
    transition:    background var(--transition-fastest), color var(--transition-fastest);
}

.gd-rail-btn:hover:not(.is-active) {
    background: color-mix(in srgb, var(--gd-color-rail-btn-active) 18%, var(--gd-color-rail-btn-bg));
}

.gd-rail-btn.is-active {
    background:   var(--gd-color-rail-btn-active);
    color:        var(--gd-color-rail-btn-act-fg);
    border-color: transparent;
}

/* ── backdrop for modal mode ────────────────────────────────── */

.gd-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--gd-color-backdrop);
    z-index:    var(--z-dropdown-backdrop);
}

.gd-backdrop.is-open { display: block; }

/* =========================================================
   advanced-search.css — Advanced search page
   ========================================================= */

/* GDDropdown trigger adapts to the site theme */
#search-wrapper {
    --gd-color-text:             var(--color-text);
    --gd-color-trigger-bg:       var(--color-input-background);
    --gd-color-trigger-border:   var(--color-thumb-border);
    --gd-color-item-selected-bg: var(--color-button-submit);
    --gd-color-item-selected-fg: var(--color-button-text);
    --gd-color-rail-btn-active:  var(--color-button-submit);
    --gd-color-rail-btn-act-fg:  var(--color-button-text);
    --gd-color-focus:            var(--color-button-submit);
    --gd-radius-trigger:         var(--radius-sm);
    --gd-radius-panel:           var(--radius-lg);
}

/* Open panel is always black text on white — never follows dark theme */
.gd-panel {
    --gd-color-text:              #222222;
    --gd-color-border:            #cccccc;
    --gd-color-panel-bg:          #ffffff;
    --gd-color-item-hover:        #eae6f5;
    --gd-color-item-blank-fg:     #999999;
    --gd-color-rail-bg:           #f0ede7;
    --gd-color-rail-btn-bg:       #e8e4de;
    --gd-color-rail-btn-border:   #aaaaaa;
}

body:has(#search-wrapper) {
    height:                       100%;
}

main:has(#search-wrapper) {
    flex:                         1 1 auto;
    min-height:                   0;
    display:                      flex;
    flex-direction:               column;
    padding-bottom:               0;
    overflow:                     hidden;
}

#search-wrapper {
    display:                      flex;
    flex-direction:               column;
    align-items:                  flex-start;
    flex:                         1 1 auto;
    min-height:                   0;
}

/* Default: wide screens (desktop-first) */
#search-layout {
    display:                      none;
    flex-direction:               row;
    align-items:                  stretch;
    gap:                          3rem;
    padding:                      0;
    width:                        100%;
}

#search-layout.ready {
    display:                      flex;
    flex:                         1 1 auto;
    min-height:                   0;
}

#search-left {
    display:                      flex;
    flex-direction:               column;
    flex:                         0 1 350px;
    max-width:                    350px;
    min-width:                    0;
}

#search-section {
    display:                      flex;
    flex-direction:               column;
}

#stats-section {
    display:                      flex;
    flex-direction:               column;
    border-bottom:                1px solid var(--color-hr);
    padding-bottom:               0.75rem;
}

#stats-subheading {
    font-weight:                  bold;
    margin:                       0 0 0.5rem 0;
}

#stats-buttons {
    display:                      grid;
    grid-template-columns:        repeat(4, 1fr);
    gap:                          0.5rem;
}

.stats-btn {
    padding:                      0.35em 0.5em;
    font-size:                    0.95em;
    font-weight:                  bold;
    min-width:                    0;
    overflow:                     hidden;
    white-space:                  nowrap;
    border:                       1px solid var(--color-thumb-border);
    border-radius:                var(--radius-sm);
    cursor:                       pointer;
    background-color:             var(--pane-bg);
    color:                        var(--color-text);
}

.stats-btn:hover,
.stats-btn.active {
    background-color:             var(--color-button-submit);
    color:                        var(--color-button-text);
}

#stats-panel {
    display:                      flex;
    flex-direction:               column;
    flex:                         0 0 auto;
    align-self:                   stretch;
}

#stats-results-pane {
    flex:                         1 1 auto;
    min-height:                   0;
    display:                      flex;
    flex-direction:               column;
    contain:                      inline-size;
}

#pdf-panel {
    display:                      flex;
    flex-direction:               column;
    flex:                         1 1 350px;
    align-self:                   stretch;
    min-width:                    200px;
}

#pdf-section {
    display:                      flex;
    flex-direction:               column;
}

#pdf-search-pane {
    flex:                         1 1 auto;
    min-height:                   0;
    display:                      flex;
    flex-direction:               column;
    padding-top:                  0.75rem;
}

#pdf-panel #pdf-search-form {
    margin-bottom:                0.5rem;
}

#pdf-panel #pdf-search-results {
    flex:                         1 1 auto;
    min-height:                   0;
    overflow-y:                   auto;
}

#stats-results {
    flex:                         1 1 auto;
    min-height:                   0;
    overflow-y:                   auto;
}

#stats-list thead th {
    position:                     sticky;
    top:                          0;
    background:                   var(--color-background);
}


#stats-caption {
    flex:                         0 0 auto;
    font-size:                    0.85em;
    color:                        var(--color-text-muted, var(--color-text));
    opacity:                      0.7;
    padding-top:                  0.3em;
}




#stats-list {
    border-collapse:              collapse;
    width:                        100%;
    line-height:                  var(--stats-line-height);
}

#stats-list th,
#stats-list td {
    padding:                      0;
    text-align:                   left;
    vertical-align:               top;
}

#stats-list th {
    font-weight:                  bold;
    /* border-bottom:  1px solid var(--color-hr); */
    /* padding-bottom: 0.2em; */
    cursor:                       pointer;
    user-select:                  none;
}

.sort-indicator {
    font-size:                    0.75em;
}

#stats-list td:last-child,
#stats-list th:last-child {
    width:                        1%;
    white-space:                  nowrap;
    text-align:                   right;
    font-variant-numeric:         tabular-nums;
}

#stats-list td:first-child,
#stats-list th:first-child {
    width:                        100%;
    overflow-wrap:                break-word;
    padding-left:                 1rem;
    text-indent:                  -1rem;
}

#stats-list a {
    color:                        var(--color-link);
    text-decoration:              none;
}

#stats-list a:hover {
    text-decoration:              underline;
}

#search-form {
    display:                      grid;
    grid-template-columns:        minmax(0, 1fr);
    gap:                          0.5rem;
    padding:                      0;
    margin:                       0;
    border-radius:                var(--radius-md);
    width:                        100%;
}

.search-form-labels,
.location-group-labels {
    display:                      flex;
    flex-direction:               column;
    font-weight:                  bold;
}



#location-group {
    display:                      flex;
    gap:                          1rem;
    flex-wrap:                    wrap;
}

/* Approximate ratio: 5:2:4 (City:State:Country) */
.location-group-labels:nth-child(1) { flex: 5; }
.location-group-labels:nth-child(2) { flex: 2; }
.location-group-labels:nth-child(3) { flex: 4; }

#checkbox-group {
    display:                      flex;
    flex-wrap:                    wrap;
    align-items:                  center;
    gap:                          1.25rem;
    margin-top:                   1rem;
}

#checkbox-prefix {
    font-weight:                  bold;
    white-space:                  nowrap;
}

.checkbox-inputs {
    display:                      inline-flex;
    align-items:                  center;
    gap:                          0.2em;
    font-weight:                  bold;
    white-space:                  nowrap;
}

.checkbox-inputs input {
    margin:                       0;
    width:                        1rem;       /* force visible width */
    min-width:                    1rem;       /* prevent collapse in Safari */
    height:                       1rem;       /* ensure checkbox is visible */
}

#form-button-group {
    margin-top:                   1rem;
    display:                      flex;
    gap:                          1rem;
    justify-content:              center;
}

.form-buttons {
    flex:                         1 1 auto;
    max-width:                    10ch;
    text-align:                   center;
    padding:                      0.75em 1.5em;
    font-size:                    1.2em;
    font-weight:                  bold;
    border:                       none;
    border-radius:                var(--radius-md);
    cursor:                       pointer;
}

#clear-button {
    background-color:             var(--color-button-clear);
    color:                        var(--color-button-text);
}

#search-button {
    background-color:             var(--color-button-submit);
    color:                        var(--color-button-text);
}


@media (max-width: 500px) {
    #checkbox-group {
        flex-direction:           column;
        align-items:              flex-start;
        gap:                      0;
    }

    .checkbox-inputs {
        display:                  inline-flex;
        flex-direction:           row;
        align-items:              center;
        gap:                      0.5rem;
        white-space:              nowrap;
    }

    #form-button-group {
        flex-direction:           row;
        gap:                      0.5rem;
    }
}

/* =========================================================
   image-gallery.css — Image gallery page
   ========================================================= */

/* LAW ENFORCEMENT */
[hidden] { display: none !important; }

/* --------------------------------------------- */
/* 1) Layout wrapper / heading                    */
/* --------------------------------------------- */
#wrap {
    margin:                       0 auto;
    padding:                      0;
    display:                      flex;
    flex-direction:               column;
    align-items:                  center;
}
#wrap h1 {
    text-align:                   center;
}
section[aria-label="Results"] {
    position:                     relative;
    min-height:                   50vh;
}

/* --------------------------------------------- */
/* Gallery page wrapper (nav + title centering)   */
/* --------------------------------------------- */
.gallery-page-center {
    text-align:                   center;
}

/* --------------------------------------------- */
/* Thumbnail grid (gallery pages + image-gallery) */
/* --------------------------------------------- */
.container {
    display:                      grid;
    grid-template-columns:        repeat(auto-fill, 100px);
    justify-content:              space-evenly;
    column-gap:                   0.5rem;
    row-gap:                      0.7rem;
}

.item {
    position:                     relative;
    width:                        100px;
    display:                      flex;
    flex-direction:               column;
    align-items:                  center;
    text-align:                   center;
}

.thumb-wrapper[data-filename]:hover::after {
    content:                      attr(data-filename);
    position:                     absolute;
    bottom:                       -4px;
    left:                         50%;
    transform:                    translateX(-50%);
    max-width:                    100%;
    background:                   var(--tooltip-bg);
    color:                        var(--tooltip-fg);
    font-size:                    var(--thumb-tip-font);
    line-height:                  1.2;
    padding:                      2px 3px;
    pointer-events:               none;
    white-space:                  nowrap;
    overflow:                     hidden;
    text-overflow:                ellipsis;
    box-shadow:                   0 2px 6px rgba(0,0,0,0.6);
}

.thumb-wrapper {
    display:                      flex;
    align-items:                  flex-end;
    justify-content:              center;
    position:                     relative;
    width:                        100px;
    height:                       100px;
}

.thumb-wrapper img.thumb {
    max-width:                    100%;
    max-height:                   100%;
    width:                        auto;
    height:                       auto;
    object-fit:                   contain;
    object-position:              bottom center;
    border:                       1px solid var(--color-thumb-border);
    cursor:                       pointer;
}

.desc {
    line-height:                  1;
    margin-top:                   3px;
}

.inactive {
    color:                        inherit;
    font-weight:                  bold;
    text-decoration:              none;
    cursor:                       default;
}

/* =========================================================
   gallery-panel.css — Gallery control panel
   ========================================================= */

#panel-slot {
    width:                        100%;
    display:                      flex;
    justify-content:              center;
    margin-bottom:                16px;
}

#control-panel {
    display:                      inline-flex;
    flex-direction:               column;
    align-items:                  flex-start;
    gap:                          var(--row-gap);

    padding:                      var(--panel-pad);
    border:                       var(--panel-border);
    border-radius:                var(--panel-radius);
    background:                   var(--panel-bg);
}

.control-group {
    position:                     relative;
    display:                      block;
    border:                       var(--group-border);
    border-radius:                var(--group-radius);
    background:                   var(--panel-bg);
}

.control-legend {
    position:                     absolute;
    left:                         var(--legend-left);
    top:                          0;
    transform:                    translateY(calc(-1 * var(--legend-lift)));
    background:                   var(--panel-bg);
    padding:                      0 var(--legend-pad-x) 0 var(--legend-pad-x);
    padding-right:                0;
    font-weight:                  bold;
    line-height:                  1;
    white-space:                  nowrap;
    pointer-events:               none;
}

.control-body {
    padding:                      var(--group-pad-y) var(--group-pad-x) 5px;
}

/* band selector */
#band-group {
    min-width:                    0;
}

#band-select {
    border:                       var(--btn-border);
    border-radius:                var(--btn-radius);
    background:                   var(--btn-color);
    min-width:                    0;
    width:                        100%;
}

/* row 1: band | search | status */
#top-row {
    display:                      grid;
    grid-template-columns:        auto auto 1fr;
    align-items:                  center;
    gap:                          14px;
    width:                        100%;
}

/* dissolve wrapper so search + status are direct grid children */
#actions-row {
    display:                      contents;
}

#search {
    font-size:                    var(--btn-font);
    padding:                      var(--btn-pad-y) var(--btn-pad-x);
    line-height:                  1.1;
    min-width:                    var(--btn-min);
    text-align:                   center;
    border:                       var(--btn-border);
    border-radius:                var(--btn-radius);
    background:                   var(--button-bg);
    color:                        var(--button-fg);
    cursor:                       pointer;
}

/* status: 1fr column; contain keeps text from widening the panel */
#status {
    display:                      flex;
    align-items:                  flex-start;
    gap:                          6px;
    min-width:                    0;
    contain:                      inline-size;
}

#status-text {
    font-size:                    var(--status-font);
    line-height:                  var(--status-line);
    min-width:                    0;
    overflow-wrap:                break-word;
    white-space:                  normal;
}

#status-spinner {
    display:                      inline-block;
    width:                        0.9em;
    height:                       0.9em;
    border:                       2px solid currentColor;
    border-right-color:           transparent;
    border-radius:                50%;
    animation:                    spin 0.7s linear infinite;
    flex-shrink:                  0;
}

#status-spinner[hidden] {
    display:                      none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* row 2: filters body stacks decade + type rows */
#filters-body {
    display:                      flex;
    flex-direction:               column;
    gap:                          6px;
}

#decade-boxes,
#type-boxes {
    display:                      flex;
    flex-direction:               row;
    flex-wrap:                    wrap;
    gap:                          3px 12px;
}

.cb-label {
    display:                      flex;
    align-items:                  center;
    gap:                          3px;
    cursor:                       pointer;
    white-space:                  nowrap;
    user-select:                  none;
}

.cb-label input[type="checkbox"] {
    width:                        1.1em;
    height:                       1.1em;
    accent-color:                 #3a7bd5;
    cursor:                       pointer;
    flex-shrink:                  0;
}

.cb-label.cb-disabled {
    opacity:                      0.38;
    cursor:                       default;
}

.cb-label.cb-disabled input[type="checkbox"] {
    cursor:                       default;
}

/* results section: don't reserve space when empty */
section[aria-label="Results"] {
    min-height:                   0;
}

/* ============================================================
   Narrow mode
   ============================================================ */

@media (max-width: 650px) {
    /* panel becomes a 2-col grid: filters left, actions right */
    #control-panel {
        display:                  inline-grid;
        grid-template-columns:    1fr auto;
        grid-template-areas:
            "band    band"
            "filters actions";
    }

    /* dissolve top-row so band-group and actions-row join the grid */
    #top-row     { display: contents; }
    #band-group  { grid-area: band; }
    #filters     { grid-area: filters; }

    /* actions-row re-materialises as a column: search above, status below */
    #actions-row {
        display:                  flex;
        flex-direction:           column;
        align-items:              stretch;
        gap:                      6px;
        grid-area:                actions;
    }

    /* filters body: two columns, checkboxes vertical */
    #filters-body {
        display:                  grid;
        grid-template-columns:    1fr 1fr;
        column-gap:               16px;
    }

    #decade-boxes,
    #type-boxes {
        flex-direction:           column;
    }
}

/* =========================================================
   lightbox.css — Lightbox modal
   ========================================================= */

#lightbox-modal {
    position:                     fixed;
    inset:                        0;

    width:                        100%;
    height:                       var(--lightbox-vh);

    background:                   var(--lightbox-bg);
    z-index:                      var(--z-overlay);

    display:                      none;     /* JS toggles */
}

body.lightbox-open {
    overflow:                     hidden;
}

.lightbox-zoomable {
    -webkit-user-select:          none;
    user-select:                  none;

    -webkit-user-drag:            none;
    user-drag:                    none;

    -webkit-touch-callout:        none;
}

#lightbox-close,
#lightbox-prev,
#lightbox-next {
    position:                     absolute;
    z-index:                      3;

    min-width:                    var(--lightbox-btn-hit);
    min-height:                   var(--lightbox-btn-hit);

    border:                       none;
    background:                   rgba(0, 0, 0, 0.45);
    color:                        #ffffff;
    cursor:                       pointer;
}

#lightbox-close {
    top:                          12px;
    right:                        12px;
    font-size:                    1.75rem;
    line-height:                  1;
    border-radius:                var(--radius-lg);
    padding:                      4px 10px;
}

#lightbox-prev,
#lightbox-next {
    top:                          50%;
    transform:                    translateY(-50%);
    font-size:                    2.625rem;
    line-height:                  1;
    padding:                      8px 14px;
    border-radius:                var(--radius-xl);
}

#lightbox-prev { left: 12px; }
#lightbox-next { right: 12px; }

@media (hover: none) and (pointer: coarse) {
    #lightbox-prev,
    #lightbox-next { display: none; }
}

#lightbox-modal.single #lightbox-prev,
#lightbox-modal.single #lightbox-next {
    display:                      none;
}

#lightbox-content {
    position:                     absolute;
    inset:                        0;
    z-index:                      1;
}

.lightbox-image-wrapper {
    position:                     absolute;
    inset:                        0;

    width:                        100%;
    height:                       100%;

    overflow:                     hidden;

    display:                      flex;
    align-items:                  center;
    justify-content:              center;

    box-sizing:                   border-box;

    padding-top:                  var(--lightbox-img-gap);
    padding-bottom:               var(--lightbox-cap-reserve);

    touch-action:                 none;
}

#lightbox-spinner {
    position:                     absolute;
    left:                         50%;
    top:                          50%;

    transform:                    translate(-50%, -50%);

    width:                        44px;
    height:                       44px;

    border:                       4px solid rgba(255, 255, 255, 0.25);
    border-top-color:             #ffffff;
    border-radius:                50%;

    opacity:                      0;
    pointer-events:               none;

    transition:                   opacity var(--transition-base) ease;
    animation:                    lb-spin 0.9s linear infinite;

    z-index:                      2;
}

#lightbox-spinner.visible { opacity: 1; }

@keyframes lb-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

#lightbox-current-img {
    display:                      block;

    max-width:                    96vw;
    max-height:                   100%;

    object-fit:                   contain;

    opacity:                      0;
    transition:                   opacity var(--transition-medium) ease;

    user-select:                  none;
    -webkit-user-drag:            none;

    transform-origin:             center center;
    will-change:                  transform;
}

#lightbox-current-img.lightbox-zoomed { cursor: grab; }
#lightbox-current-img.lightbox-zoomed:active { cursor: grabbing; }

#lightbox-current-iframe {
    display:                      block;
    width:                        100%;
    align-self:                   stretch;     /* fill wrapper height — mode 2 (expanded/scrollable) */
    border:                       none;
    background:                   #ffffff;
    opacity:                      0;
    transition:                   opacity var(--transition-medium) ease;
}


#lightbox-caption {
    position:                     fixed;
    left:                         50%;
    transform:                    translateX(-50%);

    bottom:                       calc(var(--lightbox-cap-bottom) + env(safe-area-inset-bottom, 0px));
    z-index:                      4;

    display:                      inline-block;
    width:                        max-content;
    max-width:                    calc(100vw - 32px);
    box-sizing:                   border-box;

    padding:                      var(--lightbox-cap-pad-y) var(--lightbox-cap-pad-x);

    background:                   rgba(0, 0, 0, 0.80);
    color:                        #ffffff;
    border-radius:                var(--radius-lg);

    font-size:                    0.875rem;
    line-height:                  var(--lightbox-cap-line);
    font-weight:                  400;
    text-align:                   center;

    white-space:                  normal;

    pointer-events:               none;
}

#lightbox-caption b { font-weight: 700; }

#lightbox-caption .lightbox-counter {
    display:                      block;
    margin-top:                   2px;
    font-family:                  system-ui, sans-serif;
    font-size:                    0.8rem;
    opacity:                      0.85;
    line-height:                  var(--lightbox-cap-line);
}

/* =========================================================
   index.css — Homepage dashboard
   ========================================================= */

html:has(#dashboard) {
    overflow:                     hidden;
}

html:has(#dashboard) body {
    height:                       100%;
    min-height:                   0;
    overflow:                     hidden;
}

html:has(#dashboard) body::after {
    display:                      none;
}

main:has(#dashboard) {
    flex:                         1 1 0;
    min-height:                   0;
    display:                      flex;
    flex-direction:               column;
    padding:                      0;
    overflow:                     hidden;
}

#dashboard {
    flex:                         1 1 0;
    min-height:                   0;
    display:                      grid;
    grid-template-columns:        24fr 36fr 40fr;
    column-gap:                   var(--panel-gap);
    overflow:                     hidden;
}

#col-updates,
#col-slides {
    display:                      flex;
    flex-direction:               column;
    min-height:                   0;
    overflow:                     hidden;
}

#col-history {
    display:                      grid;
    grid-template-rows:           auto 1fr;
    min-height:                   0;
    overflow:                     hidden;
}

.col-head {
    flex:                         0 0 auto;
    margin:                       var(--h2-margin);
}

#slide-banner {
    position:                     relative;
}

#slide-stats {
    position:                     absolute;
    top:                          50%;
    left:                         50%;
    transform:                    translate(-50%, -50%);
    display:                      inline-block;
    padding:                      var(--cap-pad-y) var(--cap-pad-x);
    background:                   var(--cap-bg);
    color:                        var(--cap-color);
    -webkit-text-fill-color:      var(--cap-color);
    border-radius:                var(--cap-border-radius);
    font-family:                  var(--body-font-base);
    font-size:                    var(--cap-font-size);
    font-weight:                  400;
    line-height:                  var(--cap-line-height);
    letter-spacing:               0.18em;
    white-space:                  nowrap;
}

/* ---- Scrollable list panels ---- */

#whatsnew {
    flex:                         1 1 0;
    min-height:                   0;
    overflow-y:                   auto;
    display:                      grid;
    grid-template-columns:        auto;
    align-content:                start;
    column-gap:                   10px;
    padding:                      var(--wn-padding);
    border:                       var(--wn-border);
    border-style:                 var(--wn-border-style);
}

#tigdh-box {
    align-self:                   start;
    max-height:                   100%;
    min-height:                   0;
    overflow-y:                   auto;
    background:                   var(--tigdh-bg);
    border:                       var(--tigdh-border);
    border-style:                 var(--tigdh-border-style);
    border-radius:                var(--tigdh-border-radius);
    padding:                      var(--tigdh-padding);
    line-height:                  var(--tigdh-line-height);
}

#whatsnew ul,
#tigdh-box ul {
    margin-top:                   0;
    padding-left:                 var(--tigdh-ul-padding-left);
}

#whatsnew ul li,
#tigdh-box ul li {
    margin:                       var(--tigdh-li-margin);
}

.scrollable-table-col1 {
    font-weight:                  bold;
    font-size:                    105%;
    height:                       fit-content;
}

.scrollable-table-col2 {
    padding-left:                 0.5em;
    text-indent:                  -0.5em;
    height:                       fit-content;
}

.scrollable-table-spacer {
    padding-bottom:               6px;
}

/* ---- Slideshow panel ---- */

#slide-figure {
    flex:                         1 1 0;
    min-height:                   0;
    margin:                       0;
    display:                      flex;
    flex-direction:               column;
    justify-content:              flex-start;
    align-items:                  center;
    background:                   transparent;
    padding:                      0;
}

#slide-figure figcaption {
    display:                      inline-block;
    width:                        max-content;
    max-width:                    calc(100% - 2 * var(--cap-pad-x));
    box-sizing:                   border-box;

    margin-top:                   var(--cap-margin-top);
    padding:                      var(--cap-pad-y) var(--cap-pad-x);

    background:                   var(--cap-bg);
    color:                        var(--cap-color);
    border-radius:                var(--cap-border-radius);

    font-size:                    var(--cap-font-size);
    line-height:                  var(--cap-line-height);
    font-weight:                  400;
    text-align:                   center;
}

#slide-img {
    max-width:                    100%;
    max-height:                   calc(100% - var(--actual-cap-height, 50px));
}

/* =========================================================
   Narrow viewport (≤ 799px)
   ========================================================= */
@media (max-width: 799px) {

    /* Header */
    #wide-banner {
        display:                  none;
    }
    /* Advanced search */
    body:has(#search-wrapper) {
        height:                   auto;
    }

    main:has(#search-wrapper) {
        overflow:                 visible;
        padding-bottom:           var(--html-padding-bottom);
    }

    #search-layout {
        flex-direction:           column;
        align-items:              flex-start;
        row-gap:                  1.5rem;
    }

    #search-left {
        order:                    2;
        width:                    100%;
        min-width:                0;
        flex-shrink:              1;
        max-width:                none;
    }

    #stats-panel {
        order:                    1;
        align-self:               auto;
        width:                    100%;
    }

    #pdf-panel {
        order:                    3;
        align-self:               auto;
        width:                    100%;
    }

    #stats-buttons {
        width:                    100%;
    }

    .stats-btn {
        padding:                  0.35em 0;
        font-size:                0.8em;
        overflow:                 hidden;
    }

    #stats-results-pane.has-results {
        position:                 sticky;
        top:                      0;
        background:               var(--color-background);
        z-index:                  1;
    }

    .location-group-labels {
        min-width:                0;
        width:                    100%;
    }

    /* Image gallery */
    .container {
        row-gap:                  0.7rem;
    }

    /* Homepage */
    #dashboard {
        grid-template-columns:    1fr;
        grid-template-rows:       1fr 1fr;
        gap:                      var(--narrow-mode-panel-gap);
    }

    #col-updates { display: none; }

    #col-slides  { grid-row: 1; grid-column: 1; }
    #col-history { grid-row: 2; grid-column: 1; }

    #slide-figure {
        padding:                  0;
    }
}

/* =========================================================
   search-results.css — Search results page
   ========================================================= */

.ref-post {
    color:                        var(--ref-color);
    font-size:                    var(--ref-size);
    font-style:                   var(--ref-style);
    line-height:                  0;
    position:                     relative;
    top:                          -0.1em;
    margin-left:                  0;
}
.ref-pre  {
    color:                        var(--ref-color);
    font-size:                    var(--ref-size);
    font-style:                   var(--ref-style);
    line-height:                  0;
    position:                     relative;
    top:                          -0.1em;
    margin-right:                 0;
}

.jump {
    display:                      inline;
    font-weight:                  bold;
    margin-bottom:                2em;
}

.event-headline-div {
    margin-top:                   var(--header-separation);
    padding:                      0;
    font-weight:                  bold;
    font-size:                    115%;
}

.setlists-div {
    margin-top:                   var(--section-separation);
    margin-left:                  0;
    font-size:                    100%;
}

.setlist-line {
    margin-top:                   var(--set-separation);
    white-space:                  normal;
    display:                      block;
}

.nobr {
    white-space:                  nowrap;
}

.notes-div {
    margin-top:                   var(--section-separation);
    font-size:                    95%;
    display:                      inline-block;
    word-break:                   normal;
    overflow-wrap:                normal;
    white-space:                  normal;
}

.media-div {
    display:                      flex;
    flex-wrap:                    wrap;
    flex-direction:               row;
    justify-content:              flex-start;
    align-items:                  start;
    gap:                          0;
    padding:                      0;
    margin-top:                   var(--section-separation);
    overflow:                     visible;
}
.av-collection {
    display:                      flex;
    flex-wrap:                    wrap;
    flex-direction:               row;
    justify-content:              flex-start;
    align-items:                  start;
    gap:                          5px;
    padding:                      0;
}
.image-collection {
    display:                      flex;
    flex-wrap:                    wrap;
    flex-direction:               row;
    justify-content:              flex-start;
    align-items:                  start;
    gap:                          5px;
    cursor:                       pointer;
    overflow:                     visible;
    padding:                      6px;
    margin:                       -2px;
    filter:                       var(--color-thumb-glow-off);
    transition:                   filter var(--transition-slowest) ease-in-out;
}
.image-collection:hover {
    filter:                       var(--color-thumb-glow);
}

.image-collection img {
    transition:                   transform var(--transition-base) ease;
    will-change:                  transform;
}
.image-collection img:hover {
    transform:                    scale(1.18);
    position:                     relative;
    z-index:                      1;
}
.icon-audio {
    width:                        40px;
    height:                       40px;
}
.icon-video {
    width:                        45px;
    height:                       32px;
}
.thumb {
    border:                       1px solid var(--color-thumb-border);
}
.photo-thumb {
    border:                       2px solid var(--color-photo-border);
    outline:                      0px solid var(--color-thumb-border);
    outline-offset:               1px;
}

#loader-container {
    display:                      flex;
    justify-content:              center;
    align-items:                  center;
    height:                       50vh;
}
.ripple {
    position:                     relative;
    width:                        30px;
    height:                       30px;
}
.ripple::before, .ripple::after {
    content:                      '';
    position:                     absolute;
    width:                        100%;
    height:                       100%;
    border-radius:                50%;
    border:                       4px solid #0000ff;
    opacity:                      0;
    animation:                    ripple 3s infinite;
}
.ripple::after {
    animation-delay:              1.5s;
}
@keyframes ripple {
    0% {
        transform:                scale(0.5);
        opacity:                  0;
    }
    25% {
        opacity:                  1;
    }
    100% {
        transform:                scale(2.5);
        opacity:                  0;
    }
}

/* =========================================================
   tips.css — Tooltip system
   ========================================================= */

.tooltip-lineup {
    cursor:                       pointer;
    touch-action:                 manipulation;
    text-decoration-line:         underline;
    text-decoration-style:        dotted;
    text-decoration-color:        var(--tooltip-lineup-ul);
    text-decoration-thickness:    1px;
    text-underline-offset:        0.15em;
    text-decoration-skip-ink:     auto;
}
.tooltip-venue {
    cursor:                       pointer;
    touch-action:                 manipulation;
    text-decoration-line:         underline;
    text-decoration-style:        solid;
    text-decoration-color:        var(--tooltip-img-ul);
    text-decoration-thickness:    1px;
    text-underline-offset:        0.15em;
    text-decoration-skip-ink:     auto;
}

.tooltip-lineup:focus, .tooltip-venue:focus {
    outline:                      2px solid #888888;
    outline-offset:               2px;
}

#tip {
    position:                     fixed;
    max-width:                    min(calc(var(--tooltip-img-max-size) + 2 * var(--tooltip-pad-h)),
    calc(100vw - 2 * var(--tooltip-viewport-margin)));
    padding:                      var(--tooltip-pad-v) var(--tooltip-pad-h);
    border-radius:                var(--radius-md);
    background:                   var(--tooltip-bg);
    color:                        var(--tooltip-fg);
    font:                         0.875rem/1.35 system-ui, sans-serif;
    box-shadow:                   var(--tooltip-shadow-x) var(--tooltip-shadow-y) var(--tooltip-shadow-blur) rgba(0,0,0,.7);
    opacity:                      0;
    visibility:                   hidden;
    transition:                   opacity var(--transition-fast);
    pointer-events:               none;
    overflow:                     visible;
    z-index:                      var(--z-overlay);
}

#tip.show {
    opacity:                      1;
    visibility:                   visible;
}

#tip::before {
    content:                        "";
    position:                       absolute;
    width:                          var(--tooltip-edge);
    height:                         var(--tooltip-edge);
    left:                           calc(var(--tooltip-half) * -1);
    top:                            50%;
    transform:                      translateY(-50%) rotate(45deg);
    background:                     var(--tooltip-bg);
}

#tip.flip::before {
    left:                           auto;
    right:                          calc(var(--tooltip-half) * -1);
    top:                            50%;
    transform:                      translateY(-50%) rotate(45deg);
}

#tip.top::before {
    left:                           50%;
    top:                            auto;
    bottom:                         calc(var(--tooltip-half) * -1);
    transform:                      translateX(-50%) rotate(45deg);
}

#tip.bottom::before {
    left:                           50%;
    top:                            calc(var(--tooltip-half) * -1);
    bottom:                         auto;
    transform:                      translateX(-50%) rotate(45deg);
}

#tip.text-only {
    width:                        max-content;
    max-width:                    calc(100vw - 2 * var(--tooltip-viewport-margin));
}

#tip ul {
    list-style:                   none;
    margin:                       0;
    padding:                      0;
}

#tip li {
    line-height:                  1.15;
    margin-bottom:                0.35em;
    padding-left:                 1em;
    text-indent:                  -1em;
}

#tip li:last-child {
    margin-bottom:                0;
}

#tip img {
    display:                      block;
    max-width:                    min(var(--tooltip-img-max-size), 100vw - var(--tooltip-chrome-h));
    max-height:                   min(var(--tooltip-img-max-size), 100vh - var(--tooltip-chrome-v));
}

@media (hover: hover) and (pointer: fine) {
    .tooltip-lineup:hover, .tooltip-venue:hover { /* hover styles if desired */ }
}


/* =========================================================
   PDF Search  (advanced-search.htm — PDF panel)
   ========================================================= */

#pdf-search-form {
    display:                      flex;
    gap:                          0.5rem;
    margin-bottom:                1.5rem;
}

#pdf-search-input {
    flex:                         1;
    font-size:                    1rem;
    padding:                      0.45em 0.65em;
    border:                       var(--button-border);
    border-radius:                var(--radius-sm);
    background:                   var(--color-input-background);
    color:                        var(--color-input-text);
    min-width:                    0;
}

#pdf-search-input::placeholder { color: var(--color-input-placeholder); }

#pdf-search-input:focus {
    outline:                      2px solid var(--color-button-submit);
    outline-offset:               1px;
}

#pdf-search-submit {
    font-size:                    1rem;
    padding:                      0.45em 1.1em;
    border:                       var(--button-border);
    border-radius:                var(--radius-sm);
    background:                   var(--button-bg);
    color:                        var(--button-fg);
    cursor:                       pointer;
    white-space:                  nowrap;
}

#pdf-search-submit:hover { opacity: 0.85; }

.pdf-search-result {
    border-bottom:                1px solid var(--color-thumb-border);
    padding:                      0.75rem 0;
    opacity:                      0.3;
    animation:                    pdf-search-fadein 0.2s ease forwards;
}

@keyframes pdf-search-fadein { to { opacity: 1; } }

.pdf-search-header { margin-bottom: 0.3rem; }

.pdf-search-link {
    display:                      inline-flex;
    gap:                          0.55em;
    align-items:                  baseline;
    font-weight:                  bold;
}

.pdf-search-link:hover { text-decoration: underline; }

.pdf-search-gallery {
    font-size:                    0.8em;
    text-transform:               uppercase;
    letter-spacing:               0.06em;
    opacity:                      0.7;
}

.pdf-search-stem   { font-size: 1rem; }

.pdf-search-page {
    font-size:                    0.85em;
    opacity:                      0.7;
}

.pdf-search-ctx {
    font-size:                    0.9rem;
    line-height:                  1.55;
}

.pdf-search-ctx mark {
    background:                   #ffe44d;
    color:                        #000000;
    border-radius:                2px;
    padding:                      0 0.1em;
}

#pdf-search-status {
    font-size:                    0.9rem;
    opacity:                      0.7;
    margin-bottom:                0.75rem;
}

#pdf-search-status.pdf-search-error {
    opacity:                      1;
    color:                        #cc0000;
}

#pdf-panel .search-input-wrapper {
    max-width:                    none;
}

#pdf-panel #pdf-search-input {
    padding-right:                2rem;
}

#pdf-help-popup {
    position:                     fixed;
    z-index:                      var(--z-overlay);
    background:                   var(--tooltip-bg);
    color:                        var(--tooltip-fg);
    border-radius:                var(--radius-md);
    padding:                      var(--tooltip-pad-v) var(--tooltip-pad-h);
    box-shadow:                   var(--tooltip-shadow-x) var(--tooltip-shadow-y) var(--tooltip-shadow-blur) rgba(0,0,0,.7);
    max-width:                    400px;
    font:                         var(--search-help-font-size)/1.35 system-ui, sans-serif;
}

#pdf-help-popup p {
    margin:                       0 0 0.4rem 0;
}

#pdf-help-popup code {
    font-family:                  monospace;
    background:                   rgba(128,128,128,0.2);
    padding:                      0.1em 0.3em;
    border-radius:                3px;
}


/* =========================================================
   Publications — shared layout
   (publications.htm landing page + all detail pages)
   ========================================================= */

#pub-page {
    padding:                      0 0.5rem 3rem;
}

h1.pub-page-title {
    text-align:                   center;
    margin:                       1.5rem 0 2rem;
}

.pub-with-thumb {
    display:                      flex;
    gap:                          1rem;
    align-items:                  flex-start;
}

.pub-thumb {
    width:                        100px;
    height:                       100px;
    object-fit:                   contain;
    object-position:              left top;
    flex-shrink:                  0;
}

.pub-item-body {
    flex:                         1 1 auto;
    min-width:                    0;
}

/* --------------------------------------------- */
/* Periodicals detail pages                       */
/* --------------------------------------------- */

.periodicals-issue {
    margin-bottom:                2.5rem;
}

.periodicals-issue-header {
    display:                      flex;
    align-items:                  baseline;
    flex-wrap:                    wrap;
    gap:                          0.75em;
    border-bottom:                1px solid color-mix(in srgb, currentColor 30%, transparent);
    padding-bottom:               0.25rem;
    margin-bottom:                0.5rem;
}

.periodicals-issue-title {
    margin:                       0;
    flex:                         1 1 auto;
}

.periodicals-articles {
    list-style:                   none;
    padding:                      0;
    margin:                       0;
}

.periodicals-article {
    padding:                      0.45rem 0;
}

.periodicals-article + .periodicals-article {
    border-top:                   1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.periodicals-article-row {
    display:                      flex;
    align-items:                  baseline;
    flex-wrap:                    wrap;
    gap:                          0.5em;
}

.periodicals-article-title {
    font-weight:                  600;
    flex:                         1 1 auto;
}

.periodicals-article-page {
    font-size:                    0.78rem;
    opacity:                      0.5;
    white-space:                  nowrap;
}

.periodicals-article-author {
    font-size:                    0.82rem;
    font-style:                   italic;
    opacity:                      0.7;
    margin:                       0.1rem 0 0.2rem;
}

.periodicals-article-summary {
    font-size:                    0.875rem;
    line-height:                  1.45;
    margin:                       0.2rem 0 0;
}

.periodicals-article-note {
    font-size:                    0.78rem;
    font-style:                   italic;
    opacity:                      0.5;
    margin:                       0.15rem 0 0;
}

.periodicals-article.unavailable {
    opacity:                      0.4;
}

/* --------------------------------------------- */
/* Articles detail pages                          */
/* --------------------------------------------- */

.articles-list {
    list-style:                   none;
    padding:                      0;
    margin:                       0;
}

.articles-item {
    padding:                      0.7rem 0;
}

.articles-item + .articles-item {
    border-top:                   1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.articles-item-header {
    margin:                       0 0 0.2rem;
}

.articles-item-title {
    font-weight:                  600;
}

.articles-item-meta {
    font-size:                    0.8rem;
    opacity:                      0.6;
    white-space:                  nowrap;
}

.articles-item-author {
    font-size:                    0.82rem;
    font-style:                   italic;
    opacity:                      0.7;
    margin:                       0.1rem 0 0.2rem;
}

.articles-item-summary {
    font-size:                    0.875rem;
    line-height:                  1.45;
    margin:                       0.2rem 0 0;
}

/* --------------------------------------------- */
/* Programs detail pages                          */
/* --------------------------------------------- */

.programs-decade-heading {
    margin:                       3rem 0 1.5rem;
    padding-bottom:               0.4rem;
    border-bottom:                2px solid color-mix(in srgb, currentColor 40%, transparent);
}

.programs-decade-heading:first-of-type {
    margin-top:                   0;
}

.programs-list {
    list-style:                   none;
    padding:                      0;
    margin:                       0;
}

.programs-item {
    padding:                      0.7rem 0;
}

.programs-item + .programs-item {
    border-top:                   1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.programs-item-header {
    margin:                       0 0 0.2rem;
}

.programs-item-title {
    font-weight:                  600;
}

.programs-item-meta {
    font-size:                    0.8rem;
    opacity:                      0.6;
    white-space:                  nowrap;
}

.programs-item-summary {
    font-size:                    0.875rem;
    line-height:                  1.45;
    margin:                       0.2rem 0 0;
}

/* --------------------------------------------- */
/* Publications landing page (publications.htm)   */
/* --------------------------------------------- */

.pub-section {
    margin:                       2rem 0;
}

.pub-section-heading {
    font-size:                    1.15rem;
    margin:                       0 0 0.75rem;
    padding-bottom:               0.3rem;
    border-bottom:                2px solid color-mix(in srgb, currentColor 40%, transparent);
}

.pub-card-row {
    display:                      grid;
    grid-template-columns:        repeat(auto-fill, 125px);
    grid-auto-rows:               auto 125px 0.9rem;
    gap:                          0.3rem 0.5rem;
    justify-content:              space-evenly;
}

.pub-card {
    display:                      grid;
    grid-template-rows:           subgrid;
    grid-row:                     span 3;
    text-align:                   center;
}

.pub-card-label {
    font-size:                    1.0rem;
    line-height:                  1.3;
    align-self:                   end;
}

.pub-card > a {
    display:                      flex;
    align-items:                  flex-start;
    justify-content:              center;
    width:                        125px;
    height:                       125px;
    text-decoration:              none;
}

.pub-card-thumb {
    max-width:                    125px;
    max-height:                   125px;
    width:                        auto;
    height:                       auto;
    border:                       1px solid var(--color-thumb-border);
}