/* ==========================================================================
   Geordie is Vain — a chronological portrait gallery
   Dark by default, light on request. No frameworks, no web fonts, no build.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg:        #0c0c0e;
  --bg-sunk:   #08080a;
  --surface:   #16161a;
  --line:      #26262c;
  --line-soft: #1b1b20;
  --ink:       #f3f0ea;
  --ink-dim:   #9c988f;   /* 6.7:1 on --bg */
  --ink-faint: #85817a;   /* 5.0:1 — the smallest text still clears AA */
  --accent:    #d9a441;   /* 8.6:1 */
  --accent-dim:#8a6a2c;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, ui-serif, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, sans-serif;

  --wrap: 82rem;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(.5rem, 1vw, .875rem);
  --row: 19rem;            /* nominal justified-row height */
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #faf8f5;
  --bg-sunk:   #f2efe9;
  --surface:   #ffffff;
  --line:      #e2ddd4;
  --line-soft: #ece7de;
  --ink:       #16161a;
  --ink-dim:   #6c6961;
  --ink-faint: #706d65;   /* 4.9:1 on --bg */
  --accent:    #8a5f0f;   /* 5.3:1 */
  --accent-dim:#c9a45e;
  --shadow:    0 1px 2px rgba(28,24,16,.06), 0 14px 34px -14px rgba(28,24,16,.28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:        #faf8f5;
    --bg-sunk:   #f2efe9;
    --surface:   #ffffff;
    --line:      #e2ddd4;
    --line-soft: #ece7de;
    --ink:       #16161a;
    --ink-dim:   #6c6961;
    --ink-faint: #706d65;
    --accent:    #8a5f0f;
    --accent-dim:#c9a45e;
    --shadow:    0 1px 2px rgba(28,24,16,.06), 0 14px 34px -14px rgba(28,24,16,.28);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, p, figure, figcaption, dialog { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--accent); color: #14100a;
  font-weight: 600; text-decoration: none; border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* --- Top bar -------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem);
  padding: .6rem var(--pad);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

.topbar__mark {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.topbar__is { color: var(--ink-faint); }
.topbar__vain { color: var(--accent); font-style: italic; letter-spacing: .1em; }

.erabar {
  display: flex; align-items: center; gap: .15rem;
  margin-inline: auto 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.erabar::-webkit-scrollbar { display: none; }

.erabar__link {
  position: relative;
  flex: none;
  padding: .38rem .7rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.erabar__link:hover { color: var(--ink); background: var(--line-soft); }
.erabar__link[aria-current="true"] { color: var(--accent); background: var(--line-soft); }
.erabar__short { display: none; }

/* Narrow screens: shrink the wordmark and swap "1969 — 1979" for "70s" so the
   whole decade nav still fits on one line. */
@media (max-width: 34rem) {
  .topbar { gap: .5rem; }
  .topbar__mark { font-size: .8125rem; letter-spacing: .1em; }
  .erabar__link { padding: .35rem .45rem; }
  .erabar__long { display: none; }
  .erabar__short { display: inline; }
}

.themetoggle {
  flex: none;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  color: var(--ink-dim);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.themetoggle:hover { color: var(--ink); background: var(--line-soft); }
.themetoggle svg { width: 1.05rem; height: 1.05rem; }
.themetoggle__moon { display: none; }
:root[data-theme="light"] .themetoggle__sun { display: none; }
:root[data-theme="light"] .themetoggle__moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .themetoggle__sun { display: none; }
  :root:not([data-theme]) .themetoggle__moon { display: block; }
}
.no-js .themetoggle { display: none; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.hero__kicker {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__title {
  margin: .35em 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 10vw, 7.5rem);
  line-height: .94;
  letter-spacing: -.025em;
}
.hero__title span {
  display: block;
  font-size: .28em;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-block: .2em;
}

.hero__deck {
  max-width: 36rem;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.hero__bookends {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.bookend { flex: 0 1 13rem; }
.bookend img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bookend figcaption {
  margin-top: .7rem;
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.bookend__rule {
  flex: 0 1 12rem;
  align-self: center;
  position: relative;
  border-top: 1px solid var(--line);
  text-align: center;
}
.bookend__rule span {
  position: absolute; inset-inline: 0; top: -.75em;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg);
  padding-inline: .6em;
  width: max-content; margin-inline: auto;
}

@media (max-width: 34rem) {
  .bookend__rule { display: none; }
  .hero__bookends { gap: 1rem; }
}

/* --- Era sections --------------------------------------------------------- */

.era {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad);
  scroll-margin-top: 4rem;
}

.era__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}

.era__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.era__count {
  margin-inline-start: auto;
  flex: none;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Justified grid ------------------------------------------------------- */
/*  Each figure's flex-basis and flex-grow are both proportional to its aspect
    ratio, so every item on a row lands at the same height with no cropping.
    The trailing filler soaks up slack on the final row so it can't stretch.  */

.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
}

.grid__fill { flex: 1000 0 0; height: 0; }

.shot {
  flex: var(--ar) 1 calc(var(--ar) * var(--row));
  aspect-ratio: var(--ar);
  min-width: 0;
  position: relative;
  background: var(--bg-sunk);
  border-radius: var(--radius);
  overflow: hidden;
}

.shot__link {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
}
.shot__link:focus-visible { outline-offset: -3px; }

.shot picture { display: block; width: 100%; height: 100%; }

.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .35s var(--ease);
}

.shot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  pointer-events: none;
}

.shot__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: baseline; gap: .5em;
  padding: 2.2rem .7rem .55rem;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.42) 48%, transparent);
  color: #fff;
  font-size: .75rem;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
  opacity: .88;
  transition: opacity .25s var(--ease);
  pointer-events: none;   /* it sits over the link, so let clicks through */
}

.shot__year {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--accent);
}
:root[data-theme="light"] .shot__year { color: #f0bf6b; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .shot__year { color: #f0bf6b; }
}

.shot__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot:hover .shot__cap,
.shot:focus-within .shot__cap { opacity: 1; }
.shot:hover img { transform: scale(1.035); }

@media (max-width: 64rem) { :root { --row: 15rem; } }
@media (max-width: 40rem) { :root { --row: 10.5rem; } }

/* --- Footer --------------------------------------------------------------- */

.foot {
  max-width: 42rem;
  margin: clamp(3rem, 8vw, 6rem) auto 0;
  padding: clamp(2rem, 5vw, 3rem) var(--pad) clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: .9375rem;
  text-align: center;
  text-wrap: pretty;
}
.foot p + p { margin-top: 1em; }
.foot__lead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.foot em { color: var(--ink); font-style: italic; }
.foot__meta { font-size: .8125rem; color: var(--ink-faint); }

/* --- Lightbox ------------------------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: #f3f0ea;
  overflow: hidden;
}
@supports (height: 100dvh) { .lb { height: 100dvh; } }
.lb::backdrop {
  background: rgba(6, 6, 8, .97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lb:not([open]) { display: none; }
.lb[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;   /* minmax(0,…) lets the stage shrink */
  animation: lb-in .22s var(--ease);
}

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb__figure {
  display: contents;
}

.lb__stage {
  grid-row: 1;
  display: grid; place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 4rem) clamp(.75rem, 5vw, 5.5rem) .5rem;
}
/* Pixel width/height are assigned by app.js: a percentage max-height can't
   resolve against a stretched grid row, and measuring also lets us cap how far
   the small 2001-era scans get blown up. */
.lb__stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,.9);
  animation: lb-img .3s var(--ease);
}
@keyframes lb-img { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lb__cap {
  grid-row: 2;
  padding: 1rem clamp(1rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}
.lb__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}
.lb__meta {
  margin-top: .3rem;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: #9c988f;
  font-variant-numeric: tabular-nums;
}
.lb__dot { margin-inline: .6em; color: #56534e; }

.lb__close,
.lb__nav {
  position: fixed;
  z-index: 2;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  color: #cfcbc4;
  background: rgba(255,255,255,.06);
  transition: background-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.16); color: #fff; }
.lb__close svg, .lb__nav svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.7; }

.lb__close { top: clamp(.6rem, 2vw, 1.25rem); right: clamp(.6rem, 2vw, 1.25rem); }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 40rem) {
  .lb__nav { top: auto; bottom: .75rem; transform: none; }
  .lb__cap { padding-inline: 4rem; }   /* clear the bottom-corner arrows */
}

/* --- Motion & print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .shot:hover img { transform: none; }
}

@media print {
  .topbar, .skip, .lb, .hero__bookends { display: none !important; }
  body { background: #fff; color: #000; }
  .shot { break-inside: avoid; }
}