/* ---- GHS '81 reunion galleries ---------------------------------------- */
:root{
  --ink:#14110f;
  --ink-2:#1d1917;
  --ink-3:#2a2422;
  --line:#3a322e;
  --cream:#f3ece1;
  --cream-dim:#b6aa9b;
  --accent:#c8a24a;
  --accent-soft:rgba(200,162,74,.14);
  --maxw:1180px;
  --radius:4px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---- masthead --------------------------------------------------------- */
.masthead{
  text-align:center;
  padding:64px 20px 44px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  margin:0 0 10px;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.masthead h1{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,7vw,4rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.subtitle{
  margin:14px 0 0;
  color:var(--cream-dim);
  font-size:.95rem;
  letter-spacing:.06em;
}

/* ---- landing cards ---------------------------------------------------- */
.cards{
  display:grid;
  gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  padding:56px 0 38px;
}
.card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease;
}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent);
}
.card-media{
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink-3);
}
.card-media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.9);
  transition:transform .5s ease,filter .35s ease;
}
.card:hover .card-media img{transform:scale(1.04);filter:saturate(1)}
.card-body{display:block;padding:22px 24px 26px}
.card-title{
  display:block;
  font-family:var(--serif);
  font-size:1.6rem;
  margin-bottom:6px;
}
.card-desc{display:block;color:var(--cream-dim);font-size:.92rem}
.card-cta{
  display:inline-block;
  margin-top:16px;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  padding-bottom:3px;
}

/* ---- gallery header --------------------------------------------------- */
.gal-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:34px 0 26px;
  border-bottom:1px solid var(--line);
}
.back-link{
  display:inline-block;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  margin-bottom:10px;
}
.back-link:hover{text-decoration:underline}
.gal-head h1{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,5vw,3rem);
}
.gal-count{margin:6px 0 0;color:var(--cream-dim);font-size:.9rem}

/* ---- photo grid (masonry columns, no cropping) ------------------------ */
.grid{
  columns:4 260px;
  column-gap:18px;
  padding:30px 0 70px;
}
.tile{
  break-inside:avoid;
  margin:0 0 18px;
  background:none;
  border:0;
  padding:0;
  width:100%;
  display:block;
  cursor:zoom-in;
  color:inherit;
  text-align:left;
  font:inherit;
}
.tile img{
  width:100%;
  border-radius:var(--radius);
  background:var(--ink-3);
  transition:opacity .3s ease;
}
.tile:hover img{opacity:.82}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile figcaption{
  margin-top:8px;
  font-size:.88rem;
  color:var(--cream-dim);
  font-family:var(--serif);
  letter-spacing:.01em;
}
.tile[hidden]{display:none}

.status{padding:60px 0;text-align:center;color:var(--cream-dim)}
.status a{color:var(--accent)}

/* ---- lightbox --------------------------------------------------------- */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:50;
  background:rgba(10,8,7,.96);
  display:flex;flex-direction:column;
}
.lb-stage{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:56px 64px 10px;
  min-height:0;
}
.lb-stage img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:2px;
}
.lb-bar{
  padding:12px 24px 22px;
  text-align:center;
  color:var(--cream-dim);
  font-size:.9rem;
}
.lb-name{
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--cream);
  margin-bottom:4px;
}
.lb-btn{
  position:absolute;
  background:none;border:0;
  color:var(--cream);
  font-size:1.9rem;line-height:1;
  padding:14px 18px;
  cursor:pointer;
  opacity:.65;
}
.lb-btn:hover{opacity:1}
.lb-btn:focus-visible{outline:2px solid var(--accent)}
.lb-prev{left:0;top:50%;transform:translateY(-50%)}
.lb-next{right:0;top:50%;transform:translateY(-50%)}
.lb-close{top:6px;right:8px;font-size:1.5rem}

/* ---- footer ----------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line);
  padding:28px 20px 44px;
  text-align:center;
  color:var(--cream-dim);
  font-size:.86rem;
}

@media (max-width:640px){
  .masthead{padding:44px 20px 32px}
  .cards{padding:36px 0 48px;gap:22px}
  .grid{columns:2 150px;column-gap:12px}
  .tile{margin-bottom:12px}
  .lb-stage{padding:48px 10px 6px}
  .lb-btn{font-size:1.6rem;padding:10px 12px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Row-ordered grid for named galleries (Memoriam).
   CSS columns fill top-to-bottom, which makes an A-Z name list read
   down each column instead of across — wrong for a roll of names. */
.grid.grid-rows{
  columns:auto;
  column-gap:normal;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:26px 18px;
}
.grid-rows .tile{margin:0}
.grid-rows .tile img{
  aspect-ratio:3/4;
  object-fit:contain;
  object-position:center;
}
.grid-rows .tile figcaption{text-align:center}
@media (max-width:640px){
  .grid.grid-rows{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px 12px}
}

/* ---- buttons & slideshow controls ------------------------------------- */
.btn{
  font:inherit;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:10px 20px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#1a1409;
  font-weight:600;
}
.btn-primary:hover{background:#d9b65c;border-color:#d9b65c}
.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--cream-dim);
  padding:5px 14px;
  letter-spacing:.1em;
}
.btn-ghost:hover{color:var(--cream);border-color:var(--accent)}
.head-actions{display:flex;gap:12px;align-items:center}

.lb-meta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
/* Sits just above the caption bar, not over the photo — someone who paused
   to look at one picture should still be able to see it. */
.lb-paused{
  position:absolute;
  left:50%;
  bottom:84px;
  transform:translateX(-50%);
  z-index:2;
}
.lb-paused[hidden]{display:none}
.lb-paused .btn{
  padding:14px 30px;
  font-size:.8rem;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}

/* ---- Play all ---------------------------------------------------------- */
.play-all{text-align:center;padding:0 0 76px}
.btn-lg{
  display:inline-block;
  text-decoration:none;
  font-size:.82rem;
  padding:16px 38px;
  letter-spacing:.16em;
}
.play-all-note{
  margin:14px 0 0;
  color:var(--cream-dim);
  font-size:.84rem;
  letter-spacing:.04em;
}