/* ==========================================================
   eddygartry.com — tidied stylesheet (2026)
   Same look as css/2024.css + 2023.css, consolidated and
   made responsive. Old files are left in place for the
   gallery and songs pages.
   ========================================================== */

:root {
  --ink: #000;
  --paper: #fff;
  --text-light: #eee;
  --text-dark: #222;
  --nav-text: #d3eced;
  --panel: rgba(0, 0, 0, .62);
  --site-width: 990px;
  --font-body: "Lato", Tahoma, Verdana, Arial, Helvetica, sans-serif;
  --font-script: "Condiment", cursive;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, p, a, img, ul, li, form, label, main, header, footer, nav, section, article {
  margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
ul { list-style: none; }
img { max-width: 100%; height: auto; }
html { overflow-y: scroll; }

/* ---------- Page ---------- */
body {
  background: #333 url(https://eddygartry.com/gifs/bck2025.jpg) no-repeat center -72px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}
body.page-gigs {
  background: #333 url(https://eddygartry.com/gifs/gigsbck.jpg) no-repeat center top;
}
body.page-songs {
  background: #000 url(https://eddygartry.com/gifs/songsbck2.jpg) no-repeat center top;
}
body.page-gallery {
  background: #000 url(https://eddygartry.com/gifs/gigsbck.jpg) no-repeat center top;
}

.maincontent {
  width: 981px;
  max-width: 100%;
  min-height: 696px;
  margin: 15px auto 0;
  padding: 11px;
  text-align: left;
}

/* ---------- Typography ---------- */
p {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin: 3px;
  text-align: left;
}
p.white { color: var(--text-light); }

h1 {
  color: #fff;
  font-family: var(--font-script);
  font-size: 29px;
  font-weight: normal;
  letter-spacing: .1em;
  margin: 120px 3px 20px 25px;
  text-align: left;
}
/* Home page: space between the band name and the footer links.
   Adjust --home-gap to move the footer up or down. */
:root { --home-gap: 460px; --home-gap-mobile: 56px; }
h1.whitehome {
  color: #000;
  margin: 144px 3px var(--home-gap) 25px;
}
body.page-home .maincontent { min-height: 0; }

h2 {
  color: #111;
  font-size: 19px;
  font-weight: normal;
  letter-spacing: .3em;
  margin: 20px 3px 3px;
  text-align: left;
}

a, a:link, a:visited, a:active { color: #fff; text-decoration: none; }
a:hover, a:focus-visible { color: #fff; text-decoration: underline; }

img.fullscreenall { width: 100%; }

/* ---------- Navigation (fixed black bar, as before) ---------- */
.navblock {
  width: var(--site-width);
  max-width: 100%;
  margin: 0 auto;
  height: 52px;
}
#cssmenu {
  position: fixed;
  top: 0;
  z-index: 283;
  width: var(--site-width);
  max-width: 100%;
  background: var(--ink);
  box-shadow: #fff 0 7px 29px 0;
  font-family: var(--font-body);
  text-align: left;
}
#cssmenu ul { display: flex; flex-wrap: wrap; align-items: center; }
#cssmenu li > a {
  display: block;
  padding: 18px 25px 21px;
  border-right: 1px solid rgba(80, 80, 80, .12);
  color: var(--nav-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
#cssmenu li.active > a,
#cssmenu li > a:hover { color: #fff; text-decoration: none; }
#cssmenu li.social > a { padding: 4px 6px; border-right: 0; }
#cssmenu li.social img { display: block; height: 45px; width: auto; }
#menu-button { display: none; }

/* ---------- Footer ---------- */
.footer {
  width: var(--site-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 11px 40px;
}
.footer p { line-height: 1.9; }
.footer img { vertical-align: middle; }

/* ---------- Buttons (unchanged from 2024.css) ---------- */
.button {
  display: inline-block;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #fff 4px 4px 0 0, #000 4px 4px 0 1px;
  color: #fff !important;
  cursor: pointer;
  font: 400 14px/20px var(--font-body);
  margin: 0 5px 10px 0;
  padding: 12px 40px;
  text-align: center;
  white-space: nowrap;
}
.button:hover { text-decoration: none; }
.button:active { box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px; transform: translate(2px, 2px); }

/* ---------- Gigs ---------- */
.gig-list { margin: 0 0 40px; }

.gig {
  background: var(--panel);
  border-radius: 6px;
  padding: 18px 22px 22px;
  margin: 0 0 22px;
}
.gig p { color: var(--text-light); }
.gig-meta { display: flex; align-items: center; gap: 10px; }
.gig-meta img { width: 24px; height: 24px; flex: none; }
.gig-date { font-size: 18px; }
.gig-venue { font-size: 17px; }
.gig-desc { margin-top: 10px; max-width: 46em; }
.gig-desc a { text-decoration: underline; }
.gig-tickets { margin-top: 16px; }
.gig-poster { margin-top: 16px; }
.gig-poster img { display: block; max-width: 100%; border-radius: 3px; }

.gig-empty {
  background: var(--panel);
  border-radius: 6px;
  padding: 22px;
}
.gig-empty p { color: var(--text-light); }
.gig-empty a { text-decoration: underline; }


/* ---------- Songs ---------- */
.song-card {
  background: var(--panel);
  border-radius: 8px;
  padding: 20px 22px 22px;
  margin: 0 0 24px;
}
.song-card h2 { color: #fff; letter-spacing: .12em; margin: 0 0 14px; font-size: 20px; }
.song-card p { color: var(--text-light); }
.song-card a { text-decoration: underline; }
.song-kicker { font-size: 13px !important; letter-spacing: .15em; text-transform: uppercase; opacity: .75; margin: 0 0 4px !important; }
.song-card audio { display: block; width: 100%; }
.song-embed iframe { display: block; border-radius: 4px; margin-bottom: 10px; }

/* ---------- Gallery ---------- */
.gallery-intro { color: var(--text-light); margin: 0 0 14px 3px; font-size: 14px; opacity: .85; }

/* Justified rows: each photo's width grows in proportion to its shape,
   so every row lines up at an even height with no cropping. */
.photo-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.photo-grid::after { content: ""; flex-grow: 1000000; }
.photo {
  --r: 1.333;
  position: relative;
  display: block;
  flex-grow: calc(var(--r) * 100);
  flex-basis: calc(var(--r) * 210px);
  aspect-ratio: var(--r);
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 3px;
}
.photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease, opacity .2s;
}
.photo:hover img, .photo:focus-visible img { transform: scale(1.04); }
.photo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Lightbox */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .94);
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
  font-family: var(--font-body);
  touch-action: pan-y;
}
.lb[hidden] { display: none; }
.lb-stage {
  grid-column: 2; margin: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 0 24px; min-width: 0;
}
.lb-img {
  max-width: 100%; max-height: calc(100dvh - 140px); max-height: calc(100vh - 140px);
  object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transition: opacity .2s;
}
@supports (height: 100dvh) { .lb-img { max-height: calc(100dvh - 140px); } }
.lb.is-loading .lb-img { opacity: .25; }
.lb-caption { color: #eee; text-align: center; margin-top: 12px; line-height: 1.4; font-size: 15px; }
.lb-caption small { display: block; color: #aaa; font-size: 13px; margin-top: 2px; }
.lb-count { position: fixed; top: 18px; left: 20px; color: #bbb; font-size: 14px; letter-spacing: .05em; }
.lb-btn {
  background: rgba(255,255,255,.08); color: #fff; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  font: 300 34px/1 var(--font-body); display: grid; place-items: center;
  justify-self: center; transition: background .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-next { grid-column: 3; grid-row: 1; }
.lb-stage { grid-row: 1; }
.lb-close { position: fixed; top: 10px; right: 12px; font-size: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .maincontent { width: 90%; }
}

@media (max-width: 800px) {
  .navblock { height: 56px; }
  #cssmenu { width: 100%; background: #333; }
  #menu-button {
    display: block;
    width: 100%;
    position: relative;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font: 700 13px/1 var(--font-body);
    letter-spacing: 1px;
    padding: 21px 25px;
    text-align: left;
    text-transform: uppercase;
  }
  #menu-button::before, #menu-button::after {
    content: ""; position: absolute; right: 25px; width: 22px;
    border-top: 2px solid var(--nav-text);
  }
  #menu-button::before { top: 20px; height: 6px; border-bottom: 2px solid var(--nav-text); }
  #menu-button::after  { top: 32px; }
  #cssmenu ul { display: none; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
  #cssmenu ul.open { display: flex; }
  #cssmenu li > a { padding: 12px 25px; border-right: 0; }
  #cssmenu li.social { display: inline-block; }
  #cssmenu ul.open { flex-direction: row; }
  #cssmenu ul.open li:not(.social) { flex: 0 0 100%; }
  #cssmenu li.social > a { padding: 6px 0 6px 25px; }

  h1.whitehome { margin-top: 70vh; margin-bottom: var(--home-gap-mobile); }
  .maincontent { width: 100%; padding: 11px 16px; min-height: 0; }
  p { font-size: 15px; line-height: 1.4; }
  .gig { padding: 16px; }
  .song-card { padding: 16px; }

  .photo-grid { gap: 4px; }
  .photo { flex-basis: calc(var(--r) * 120px); }
  .lb { grid-template-columns: 1fr; }
  .lb-stage { grid-column: 1; padding: 56px 8px 72px; }
  .lb-img { max-height: calc(100vh - 170px); }
  .lb-prev, .lb-next { position: fixed; bottom: 14px; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { left: calc(50% + 16px); }
}