@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-bottom: 1rem;
    --body-margin-top:    0.5rem;

    /* ── Colors (theme-independent) ── */
    --bg-dark:                 #362b21;
    --bg-light:                #dbd2c3;
    --fg-bright:               gold;
    --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:       white;
    --color-facebook-blue:     #1778f2;
    --color-neon-green:        #39FF14;
    --color-input-placeholder: gray;
    --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;

    /* ── 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-separator:        " • ";
    --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");
    --url-moon:             url("/images/ICONS/moon-icon.svg");
    --url-sun:              url("/images/ICONS/sun-icon.png");
    --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);
    --grid-col-gap:    0.5rem;

    /* ── Gallery Panel ── */
    --panel-bg:     var(--pane-bg);
    --panel-border: 1px solid #000;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    10px;
    --radius-xl:    14px;

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

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

    --legend-pad-x: 6px;
    --legend-left:  12px;
    --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 black;
    --btn-radius: 8px;
    --btn-color:  white;

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

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

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

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

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

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

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

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

    --panel-left-width:  60fr;
    --panel-right-width: 40fr;
    --panel-gap:         2em;

    --wn-border:       0;
    --wn-border-style: solid;
    --wn-padding:      0 0 0 0;
    --wn-tig-gap:      1em;

    --tig-border:          0;
    --tig-border-style:    solid;
    --tig-border-radius:   var(--radius-sm);
    --tig-line-height:     1.15;
    --tig-ul-padding-left: 0;
    --tig-li-margin:       0 0 0.40em 0px;
    --tig-bg-light:        #bab2a6;
    --tig-bg-dark:         #635243;
    --tig-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:         #fff;

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

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

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

    --tip-lineup-ul-light: black;
    --tip-lineup-ul-dark:  gold;

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

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

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

    --stats-line-height: 1.25;
}

/* =========================================================
   Theme: Light Mode
   ========================================================= */
[data-theme="light"] {
    --color-active:                   #1434A4;
    --color-background:               var(--bg-light);
    --color-hover:                    white;
    --color-hr:                       white;
    --color-input-background:         white;
    --color-input-placeholder:        gray;
    --color-input-text:               black;
    --color-link:                     #1434A4;
    --color-photo-border:             var(--color-neon-green);
    --color-search-button-background: var(--color-facebook-blue);
    --color-search-button-fill:       white;
    --color-text:                     black;
    --color-thumb-border:             black;
    --color-thumb-glow:               brightness(1.3) drop-shadow( 0 0 4px rgba(0, 0, 255, 0.8));
    --color-toggle-background:        black;
    --color-typewriter:               #404040; /* Less black */
    --color-visited:                  #1434A4;
    --h1-fade-rgb:                    0 0 0;   /* black */
    --svg-toggle-icon:                var(--url-moon);
    --svg-eye-of-god:                 var(--url-eye-green);
    --pane-bg:                        var(--pane-bg-light);
    --tig-bg:                         var(--tig-bg-light);
    --ref-color:                      black;
    --tip-bg:                         var(--tip-bg-light);
    --tip-fg:                         var(--tip-fg-light);
    --tip-lineup-ul:                  var(--tip-lineup-ul-light);
    --tip-img-ul:                     var(--color-photo-border);
    --rb1:                            crimson;
    --rb2:                            orange;
    --rb3:                            yellow;
    --rb4:                            green;
    --rb5:                            cyan;
    --rb6:                            violet;
}

/* =========================================================
   Theme: Dark Mode
   ========================================================= */
[data-theme="dark"] {
    --color-active:                   #1434A4;
    --color-background:               #362b21;
    --color-hover:                    white;
    --color-hr:                       black;
    --color-input-background:         black;
    --color-input-placeholder:        gray;
    --color-input-text:               whitesmoke;
    --color-link:                     #92bbf0;
    --color-photo-border:             crimson;
    --color-search-button-background: var(--color-facebook-blue);
    --color-search-button-fill:       black;
    --color-text:                     lightgray;
    --color-thumb-border:             white;
    --color-thumb-glow:               brightness(0.8) drop-shadow( 0 0 4px rgba(255,0,255, 1.0));
    --color-toggle-background:        deepskyblue;
    --color-typewriter:               #d0d0d0;     /* Less white */
    --color-visited:                  #92bbf0;
    --h1-fade-rgb:                    255 255 255; /* white */
    --svg-toggle-icon:                var(--url-sun);
    --svg-eye-of-god:                 var(--url-eye-gold);
    --pane-bg:                        var(--pane-bg-dark);
    --tig-bg:                         var(--tig-bg-dark);
    --ref-color:                      gold;
    --tip-bg:                         var(--tip-bg-dark);
    --tip-fg:                         var(--tip-fg-dark);
    --tip-lineup-ul:                  var(--tip-lineup-ul-dark);
    --tip-img-ul:                     var(--color-photo-border);
    --rb1:                            gold;       
    --rb2:                            darkorange; 
    --rb3:                            firebrick;  
    --rb4:                            olivedrab;  
    --rb5:                            purple;     
    --rb6:                            teal;       
}
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 0.4s ease, color 0.4s 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;
    /* z-index: 0;  */
    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,
            red 0%,
            orange 12%,
            yellow 24%,
            green 36%,
            cyan 48%,
            blue 60%,
            violet 72%,
            red 84%
        );
    filter:       blur(18px);
    mask:         radial-gradient(ellipse at center, black 40%, transparent 100%);
    -webkit-mask: radial-gradient(ellipse at center, black 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 'd' key)
   ========================================================= */

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


/* =========================================================
   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 {
    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 {
    opacity: 1;
}

/* Search help popup */
#search-help-popup {
    position:      fixed;
    z-index:       var(--z-overlay);
    background:    var(--tip-bg);
    color:         var(--tip-fg);
    border-radius: var(--radius-md);
    padding:       var(--tip-pad-v) var(--tip-pad-h);
    box-shadow:    var(--tip-shadow-x) var(--tip-shadow-y) var(--tip-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(--tip-fg);
    font-weight:     bold;
}

#search-help-popup .explanation {
    color:      var(--tip-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;
}

/* Toggle button styling */
#common-toggle-button {
    -webkit-appearance:  none;
    align-items:         center;
    background-color:    var(--color-toggle-background);
    background-image:    var(--svg-toggle-icon);
    background-position: center;
    background-repeat:   no-repeat;
    background-size:     1.7rem 1.7rem;
    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;
    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-toggle-button:hover {
    filter: brightness(1.3);
}

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

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

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

.sep::after {
    content:        var(--nav-separator);
    font-size:      1.50em;
    font-weight:    600;
    line-height:    1;
    vertical-align: -0.05em;
}

/* 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: black;
    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%;
}

/* NARROW MODE - Navigation Menu - Modal Overlay */
#narrow-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 0.3s ease;
}

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

#narrow-nav-menu-content {
    position:                   fixed;
    background:                 var(--color-background);         /* match page background */
    border:                     2px solid var(--color-text);     /* visible border */
    border-radius:              var(--radius-md);                             /* rounded corners */
    color:                      var(--color-text);               /* text color */
    padding:                    1.0em 1.0em;                     /* inside spacing */
    overflow-y:                 auto;                            /* scroll if content exceeds height */
    box-shadow:                 4px 4px 20px rgba(0, 0, 0, 0.5); /* shadow offset toward right/bottom */
    width:                      max-content;                     /* size to content */
    -webkit-overflow-scrolling: touch;                           /* smooth scrolling on iOS */
}

#narrow-nav-menu-close {
    position:    absolute;         /* position relative to viewport */
    top:         0.0em;            /* distance from viewport top */
    right:       0.0em;            /* distance from viewport right */
    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); /* above menu overlay */
}

#narrow-nav-menu h3 {
    font-family: var(--h3-font-family);
    margin:      0;
    font-size:   1.0em;  /* section heading size relative to base */
    white-space: nowrap; /* prevent all wrapping */
}

#narrow-nav-menu p {
    margin:       0;      /* no margin */
    line-height:  1.0;    /* compact line spacing */
    padding-left: 1.0em;  /* left indent for links */
    font-size:    1.0em;  /* link text size relative to base */
    white-space:  nowrap; /* prevent all wrapping */
}

#narrow-nav-menu p + h3 {
    margin-top: 0.5em; /* space between sections */
}

#narrow-nav-menu a {
    display:     block;   /* full-width clickable area */
    padding:     0.2em 0; /* vertical padding for tap targets */
    white-space: nowrap;  /* prevent all wrapping */
}

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

#narrow-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 */
#narrow-nav-menu .theme-button[data-theme="dark"] {
    background: var(--bg-dark);
    color:      var(--bg-light);
}

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

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

/* Disabled/current theme: pressed-in (light from upper-left) */
#narrow-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;
}

/* =========================================================
   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;
}

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

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

#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%;
}


/* =========================================================
   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:        99998;
    background:     rgba(0,0,0,0.72);
    color:          #fff;
    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 0.5s;
}
#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:  100000;
}
.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:    #111;
    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:           #ddd;
}

.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 .sr-label  { font-size: 13px; font-weight: 600; white-space: nowrap; grid-column: 1; }
.slider-grid .sr-slider { grid-column: 2 / 4; }
.slider-grid .sr-slider,
.slider-grid .fb-slider { width: 100%; margin: 0; }
.slider-grid .fb-switch-cell { grid-column: 2; display: flex; align-items: center; }
.slider-grid .fb-slider { grid-column: 3; }
.slider-grid .sr-val {
    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 */
.rb-speed-row { grid-template-columns: var(--warpo-label-w) 1fr 36px; }
.rb-speed-row .sr-slider { grid-column: 2 / 3; }
.rb-speed-row .sr-val    { grid-column: 3; }

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

#warpo-ui select {
    padding:       6px;
    background:    #222;
    color:         #ddd;
    border:        1px solid #444;
    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:    #333;
    border:        1px solid #555;
    border-radius: 999px;
    transition:    150ms;
}

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

#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:         #ddd;
    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:         #ddd;
    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:          99999; /* modal is 100000 — 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: 600px) {
    #warpo-ui {
        flex-wrap: wrap;
        gap:       20px;
    }
    .warpo-col {
        flex:  1 1 260px;
        width: 100%;
    }
}

/* =========================================================
   gallery-links.css — Gallery navigation
   ========================================================= */

#gallery-nav {
    display:         flex;
    flex-wrap:       wrap;
    gap:             2rem;
    justify-content: center; /* ADD - centers sections horizontally */
}

.gallery-section {
    flex:      0 1 auto;
    min-width: 150px;
}

.gallery-section h3 {
    margin:          0 0 0.5rem 0;
    font-weight:     bold;
    text-decoration: underline;
    text-align:      left; /* ADD - keeps heading left-aligned */
}

.gallery-section ul {
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: left; /* ADD - keeps list left-aligned */
}

.gallery-section li {
    margin: 0.25rem 0;
}

/* =========================================================
   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;
}

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


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;
    max-width:      425px;
    width:          100%;
    min-width:      0;
    flex-shrink:    1;
    flex-grow:      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 1 auto;
    align-self:     stretch;
    min-width:      0;
}

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

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

#stats-results::-webkit-scrollbar {
    display: none;
}

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

#stats-caption-rule {
    flex:       0 0 auto;
    border:     none;
    border-top: 1px solid var(--color-hr);
    margin:     0.4em 0 0;
}

#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:           max-content;
    max-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 {
    padding-left: 1.5em;
    white-space:  nowrap;
    text-align:   right;
}

#stats-list td:first-child {
    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;
}

.stats-pager {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.2rem;
    margin-top:  0.5rem;
    align-items: center;
}

.pager-btn {
    padding:          0.2em 0.45em;
    font-size:        0.85em;
    font-weight:      bold;
    border:           1px solid var(--color-thumb-border);
    border-radius:    var(--radius-sm);
    cursor:           pointer;
    background-color: var(--pane-bg);
    color:            var(--color-text);
    min-width:        2em;
    text-align:       center;
    line-height:      1.4;
}

.pager-btn:hover:not(:disabled) {
    background-color: var(--color-button-submit);
    color:            var(--color-button-text);
}

.pager-btn:disabled {
    opacity: 0.35;
    cursor:  default;
}

.pager-btn.pager-current {
    background-color: var(--color-button-submit);
    color:            var(--color-button-text);
}


#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-inputs { /* although there's actually only one */
    padding:          0.5em;
    font-size:        1em;
    background-color: var(--color-input-background);
    color:            var(--color-input-text);
    border:           1px solid #ccc;
    border-radius:    var(--radius-sm);
    width:            100%;
    min-width:        0;
    overflow:         hidden;
    text-overflow:    ellipsis;
    cursor:           pointer;
}

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



.location-group-selects {
    padding:          0.5em;
    font-size:        1em;
    background-color: var(--color-input-background);
    color:            var(--color-input-text);
    border:           1px solid #ccc;
    border-radius:    var(--radius-sm);
    width:            100%;
    min-width:        0;
    overflow:         hidden;
    text-overflow:    ellipsis;
    cursor:           pointer;
}

#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;
}

/* --------------------------------------------- */
/* 3) Controls wrapper                            */
/* --------------------------------------------- */
section.controls {
    width:  100%;
    margin: 0 auto 16px auto;
}

#actions #search {
    background-color: var(--button-bg);
    color:            var(--button-fg);
}
.controls #status {
    flex:            1 1 auto;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

.controls #status-text,
.controls #status-spin {
    display:        inline-block;
    vertical-align: middle;
}

.controls .status-spin {
    width:            0.95em;
    height:           0.95em;
    margin-left:      0.5em;
    border:           2px solid currentColor;
    border-top-color: transparent;
    border-radius:    50%;
    animation:        status-spin 0.7s linear infinite;
}

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

/* --------------------------------------------- */
/* Thumbnail grid (gallery pages + image-gallery) */
/* --------------------------------------------- */
.container {
    display:         flex;
    flex-wrap:       wrap;
    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(--tip-bg);
    color:          var(--tip-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
   ========================================================= */

/* ============================================================
   1) Container used to detect "crush"
   ============================================================ */
#panel-slot {
    width:           100%;
    min-width:       0;
    overflow:        visible;
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    margin-bottom:   16px;
}

/* ============================================================
   2) Shared building blocks (used in both wide + narrow)
   ============================================================ */

#control-panel {
    display:               inline-grid;
    grid-template-columns: max-content;
    row-gap:               var(--row-gap);

    align-items: start;

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

    box-sizing: border-box;
    max-width:  100%;
}

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

.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);
    font-weight:    bold;
    line-height:    1;
    white-space:    nowrap;
    pointer-events: none;
}

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

#year-controls {
    display:     flex;
    align-items: center;
    gap:         6px;
}

#year-controls select {
    width:         max-content;
    white-space:   nowrap;
    border:        var(--btn-border);
    border-radius: var(--btn-radius);
    background:    var(--btn-color);
}

#actions {
    display: inline-flex;
    gap:     10px;
}

#actions button {
    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(--btn-color);
}

#gallery-checkboxes {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
}

#status-spinner {
    flex: 0 0 auto;

    display:    inline-block;
    width:      0.9em;
    height:     0.9em;
    margin-top: 0.12em;

    border:             2px solid currentColor;
    border-right-color: transparent;
    border-radius:      50%;

    animation: spin 0.7s linear infinite;
}

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

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

/* ============================================================
   3) WIDE MODE layout (default)
   ============================================================ */

#top-row {
    display:     flex;
    align-items: center;
    width:       100%;
    min-width:   0;
}

#top-row > * { min-width: 0; }

#years-wrap {
    margin-right: var(--gap-years-actions);
    overflow:     visible;
}

#top-row #actions {
    margin-right: var(--gap-actions-status);
}

#status {
    flex:      1 1 0;
    width:     0;
    min-width: 0;
    max-width: var(--status-max);

    display:     flex;
    align-items: flex-start;
    gap:         6px;

    contain: inline-size;
}

#status-text {
    flex:      1 1 auto;
    min-width: 0;

    font-size:   var(--status-font);
    line-height: var(--status-line);

    white-space:   normal;
    overflow-wrap: break-word;

    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--status-lines);

    overflow: hidden;
}

/* ============================================================
   4) NARROW MODE (WHOLESALE SWAP)
   ============================================================ */

#control-panel.is-narrow {
    display:               inline-grid;
    grid-template-columns: max-content minmax(0, max-content) max-content;
    grid-template-rows:    auto auto;
    grid-template-areas:
        "years types actions"
        "years types status";

    column-gap:  var(--narrow-gap-years-actions);
    row-gap:     var(--narrow-row-gap);
    align-items: start;
}

#control-panel.is-narrow #top-row {
    display: contents;
}

#control-panel.is-narrow #years-wrap  { grid-area: years;  margin-right: 0; }
#control-panel.is-narrow #types-wrap  { grid-area: types; }
#control-panel.is-narrow #actions     { grid-area: actions; margin-right: 0; }
#control-panel.is-narrow #status      { grid-area: status; }

#control-panel.is-narrow #year-controls {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0px;
}

#control-panel.is-narrow #year-controls span {
    align-self: center;
}

#control-panel.is-narrow #year-controls select {
    padding:     2px 6px;
    line-height: 1.2;
}

#control-panel.is-narrow #actions {
    flex-direction: column;
    gap:            5px;
}

#control-panel.is-narrow #gallery-checkboxes {
    flex-direction: column;
    flex-wrap:      nowrap;
    align-items:    flex-start;
    gap:            0px;
}

#control-panel.is-narrow #types-wrap {
    min-width: 0;
}

#control-panel.is-narrow #gallery-checkboxes label {
    display:               grid;
    grid-template-columns: auto 1fr;
    column-gap:            10px;
    align-items:           start;
    min-width:             0;
    line-height:           1.0;
}

#control-panel.is-narrow #gallery-checkboxes label,
#control-panel.is-narrow #gallery-checkboxes label > span {
    white-space:   normal;
    overflow-wrap: break-word;
}

#control-panel.is-narrow #status {
    width:     100%;
    max-width: 100%;
    min-width: 0;
    contain:   inline-size;
}

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

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

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

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

    display: none; /* JS toggles */
}

body.lightbox-open {
    overflow: hidden;
}

.lb-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(--lb-btn-hit);
    min-height: var(--lb-btn-hit);

    border:     none;
    background: rgba(0, 0, 0, 0.45);
    color:      #fff;
    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(--lb-img-gap);
    padding-bottom: var(--lb-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: #fff;
    border-radius:    50%;

    opacity:        0;
    pointer-events: none;

    transition: opacity 150ms 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 220ms ease;

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

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

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

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


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

    bottom:  calc(var(--lb-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(--lb-cap-pad-y) var(--lb-cap-pad-x);

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

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

    white-space: normal;

    pointer-events: none;
}

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

#lightbox-caption .lb-counter {
    display:     block;
    margin-top:  2px;
    font-family: system-ui, sans-serif;
    font-size:   0.8rem;
    opacity:     0.85;
    line-height: var(--lb-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;
    scrollbar-width:       none;
    -ms-overflow-style:    none;
    display:               grid;
    grid-template-columns: auto;
    column-gap:            10px;
    padding:               var(--wn-padding);
    border:                var(--wn-border);
    border-style:          var(--wn-border-style);
}

#whatsnew::-webkit-scrollbar { display: none; }

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

#tig-box::-webkit-scrollbar { display: none; }

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

#whatsnew ul li,
#tig-box ul li {
    margin: var(--tig-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:         var(--slideshow-padding);
}

#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%;
    }

    #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%;
    }

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

    /* Image gallery */
    :root {
        /* --grid-col-gap: 0.2rem; */
    }

    .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;
}

.criteria {
    font-weight: bold;
}
.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;
}
.image-collection:hover {
    filter: var(--color-thumb-glow);
}
.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 blue;
    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
   ========================================================= */

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

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

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

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

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

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

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

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

#tip.text-only {
    width:     max-content;
    max-width: calc(100vw - 2 * var(--tip-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(--tip-img-max-size), 100vw - var(--tip-chrome-h));
    max-height: min(var(--tip-img-max-size), 100vh - var(--tip-chrome-v));
}

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