/*
 * Paul Fejko memorial archive.
 *
 * Editorial serif on warm paper. The brief asked for "classy, not like the
 * current website — something that lends a certain gravitas to his legacy as
 * a classical musician", so this reads like a concert programme: generous
 * measure, quiet rules, photography given room, one restrained accent.
 *
 * JavaScript is used only as progressive enhancement (the gallery lightbox).
 * Every page must stay readable, and every image and recording reachable,
 * with scripting off.
 */

:root {
  --paper: #fbf9f5;
  --paper-sunk: #f4f0e8;
  --ink: #1f1d1a;
  --ink-soft: #55504a;
  --ink-faint: #8a837a;
  --rule: #ddd6ca;
  --accent: #7a2e1e; /* oxblood — used sparingly, for links and marks */
  --accent-soft: #a8543f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Reading measure. 34rem is typographically orthodox (~60 characters) but
     reads as oddly narrow beside most sites; 41rem gives roughly 72-76, which
     is still inside accepted practice and looks far less lopsided on a wide
     screen. --wrap caps the whole page so it never spans a large monitor. */
  --measure: 41rem;
  /* Prose is left-aligned inside --wrap, so a wide container leaves dead space
     to its right rather than balanced margins. 61rem keeps galleries roomy
     (still 4-5 columns) while sitting close enough to the measure that text
     pages read as intentional rather than lopsided. */
  --wrap: 61rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16150f;
    --paper-sunk: #1e1c16;
    --ink: #ece7dc;
    --ink-soft: #b6afa2;
    --ink-faint: #8b8478;
    --rule: #37332a;
    --accent: #d99070;
    --accent-soft: #e0a68b;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.6rem 0;
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.wordmark {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.wordmark-name {
  font-size: 1.32rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.wordmark-dates {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}

/* The masthead runs wider than the reading measure so the six sections and the
   wordmark stay on one line instead of orphaning the last item. */
.masthead .wrap { max-width: 78rem; }

.masthead nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.masthead nav a {
  display: inline-block;
  padding: 0.35rem 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.masthead nav a:hover { color: var(--accent); }
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------------ typing */

main { padding-block: clamp(2.5rem, 6vw, 4.5rem) 5rem; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); letter-spacing: -0.012em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); margin-top: 2.4em; }
h3 { font-size: 1.16rem; margin-top: 2em; letter-spacing: 0.01em; }

.page-head { margin-bottom: 2.5rem; }
.page-head h1 { margin-bottom: 0.35em; }

.standfirst {
  font-size: 1.16em;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
  font-style: italic;
}

p, ul, ol, blockquote { max-width: var(--measure); }
p { margin: 0 0 1.15em; }

a { color: var(--accent); text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-soft); }

blockquote {
  margin: 1.8em 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/*
 * Separate musings on the Writing page. Paul used a row of asterisks between
 * these on his own site; a short rule does the same job more quietly.
 */
.musing p { margin-bottom: 0; }
.musing + .musing {
  position: relative;
  margin-top: 2.8rem;
  padding-top: 2.8rem;
}
.musing + .musing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  height: 1px;
  background: var(--rule);
}

.lede { font-size: 1.1em; }

/* The obituary's own name-and-dates header, as the funeral home set it. */
.obit-header {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 1.6em;
  color: var(--ink-soft);
}
.muted { color: var(--ink-faint); }
.small { font-size: 0.86rem; }

.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------- intro */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 1rem;
}
@media (min-width: 46rem) {
  .hero { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3.5rem; }
}
.hero img { width: 100%; height: auto; display: block; }
.hero-name { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); margin-bottom: 0.1em; }
.hero-dates {
  font-size: 1rem; letter-spacing: 0.2em; color: var(--ink-faint);
  margin-bottom: 1.6rem; font-variant-numeric: lining-nums;
}
.hero-roles {
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem;
}

/* ------------------------------------------------------------------- cards */

.cards {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.card {
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}
.card h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--accent); }
.card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; max-width: none; }

/* ------------------------------------------------------------- discography */

.album-grid {
  list-style: none; margin: 2rem 0 0; padding: 0; max-width: none;
  display: grid; gap: 2.2rem 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.album-grid img,
.album-cover-placeholder {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--paper-sunk); border: 1px solid var(--rule);
}
.album-cover-placeholder {
  display: grid; place-items: center; padding: 1rem; text-align: center;
  font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.05em;
}
.album-grid h3 { margin: 0.7rem 0 0.15rem; font-size: 1rem; }
.album-grid h3 a { text-decoration: none; color: inherit; }
.album-grid h3 a:hover { color: var(--accent); }
.album-grid .meta { font-size: 0.82rem; color: var(--ink-faint); margin: 0; }

/* ------------------------------------------------------------- track lists */

.tracks {
  list-style: none; margin: 1.5rem 0; padding: 0; max-width: none;
  border-top: 1px solid var(--rule);
}
.track {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .track { grid-template-columns: 2rem minmax(0, 1fr) auto; }
}
.track-n { color: var(--ink-faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.track-title { margin: 0; max-width: none; }
.track-sub { display: block; font-size: 0.86rem; color: var(--ink-faint); font-style: italic; }
.track-credits { display: block; font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.25rem; }
.track-time {
  font-size: 0.85rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; grid-column: 3;
}
@media (max-width: 39.99rem) {
  .track-time { grid-column: 2; }
}
.track audio {
  grid-column: 2 / -1;
  width: 100%;
  max-width: 32rem;
  margin-top: 0.6rem;
  height: 2.2rem;
}
/* --------------------------------------------------------------- galleries */

/*
 * Masonry columns, not a grid of cropped squares.
 *
 * This was `grid` with `aspect-ratio: 4/3; object-fit: cover`, which crops.
 * Acceptable for a contact sheet of landscape photographs; wrong for an
 * archive. Letters had their margins sliced off — the McCurdy correspondence
 * was unreadable, and a scanned page of Gloria Dei history was cut mid-word.
 *
 * CSS columns let every image keep its own shape, so nothing is cropped and
 * nothing is letterboxed, and mixed portrait/landscape content packs densely.
 * Reading order runs down each column rather than across, which is the
 * accepted trade for a gallery.
 */
.gallery {
  list-style: none; margin: 2rem 0; padding: 0; max-width: none;
  columns: 2;
  column-gap: 0.6rem;
}
@media (min-width: 42rem) { .gallery { columns: 3; column-gap: 1rem; } }
@media (min-width: 60rem) { .gallery { columns: 4; } }

.gallery li {
  break-inside: avoid;
  margin-bottom: 0.6rem;
}
@media (min-width: 42rem) { .gallery li { margin-bottom: 1rem; } }

.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-sunk);
}
.gallery figcaption {
  font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.4;
}
/* .gallery--tall is a no-op now: images keep their natural shape. */

/* Tributes on the home page. Other people's words, so set apart from Paul's. */
.tribute {
  margin: 0 0 2.2rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}
.tribute p { margin-bottom: 0.5em; }
.tribute footer {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Two figures side by side, stacking on narrow screens. Used where Megan asked
   for photographs "side by side". */
.pair {
  display: grid;
  gap: 0.8rem;
  margin: 1.8rem 0;
  max-width: none;
  /* Side by side at every width — that is the point of a pair, and stacking
     them turned each photograph into a full phone screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
}
@media (min-width: 42rem) {
  .pair { gap: 1.6rem; }
}
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; display: block; }
.pair figcaption {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

/* Small portrait inside a teacher card. */
figure.portrait { margin: 0.9rem 0 0; max-width: 12rem; }
figure.portrait img { width: 100%; height: auto; display: block; }
figure.portrait figcaption {
  font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.35rem;
}

/* The mosaic photograph at the head of the obituary. */
figure.obit-plate { max-width: 41rem; margin: 0 0 2.5rem; }

figure.plate { margin: 2.5rem 0; max-width: 42rem; }
figure.plate img {
  width: 100%;
  height: auto;
  display: block;
  /* A portrait photograph at full phone width is taller than the viewport.
     Cap it and letterbox rather than making people scroll past one image. */
  max-height: 70vh;
  object-fit: contain;
  object-position: left;
}

/* Album sleeves are square and belong at record-sleeve scale, not full bleed. */
figure.album-plate { max-width: 22rem; margin: 0 0 1.6rem; }
figure.plate figcaption {
  font-size: 0.85rem; color: var(--ink-faint);
  margin-top: 0.6rem; max-width: var(--measure);
}

/* ------------------------------------------------------------------ résumé */

.resume { margin: 2rem 0; max-width: none; }
.resume-row {
  display: grid; gap: 0.15rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 44rem) {
  .resume-row { grid-template-columns: 8rem minmax(0, 1fr); }
}
.resume-dates {
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
  font-size: 0.88rem; letter-spacing: 0.03em;
}
.resume-role { font-weight: 600; }
.resume-org { color: var(--ink-soft); font-size: 0.95rem; }
.resume-org span { display: block; }

/* ------------------------------------------------------------------- notes */

.note {
  background: var(--paper-sunk);
  border-left: 2px solid var(--rule);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- data lists */

.facts { margin: 1.8rem 0; max-width: var(--measure); }
.facts div {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.5rem 1.2rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 34rem) { .facts div { grid-template-columns: 1fr; gap: 0.1rem; } }
.facts dt { color: var(--ink-faint); font-size: 0.85rem; }
.facts dd { margin: 0; }

.roster { list-style: none; padding: 0; max-width: none; margin: 1.5rem 0;
  columns: 2; column-gap: 2.5rem; }
@media (max-width: 40rem) { .roster { columns: 1; } }
.roster li { break-inside: avoid; padding: 0.4rem 0; }
.roster .name { display: block; }
.roster .desc { display: block; font-size: 0.85rem; color: var(--ink-faint); }

/* ------------------------------------------------------------------ footer */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 4rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.colophon p { max-width: var(--measure); }
.colophon-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.colophon-note { font-size: 0.8rem; }

/* ------------------------------------------------------------------ prints */

@media print {
  .masthead nav, .colophon-links, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}


/* ---------------------------------------------------------------- lightbox */
/*
 * Only ever shown by assets/lightbox.js. Without scripting the overlay is
 * never inserted and thumbnails remain plain links to the full-size image.
 */

html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(12, 11, 9, 0.94);
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  max-height: 100%;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  display: block;
  background: #201d18;
}
.lightbox-figure figcaption {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: #cdc6b8;
  font-size: 0.85rem;
  text-align: center;
  max-width: 44rem;
}
.lightbox-counter { color: #8d8577; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lightbox button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cdc6b8;
  cursor: pointer;
  font-family: var(--serif);
  line-height: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
}
.lightbox button:hover { color: #fff; }
.lightbox button:focus-visible { outline: 2px solid #cdc6b8; outline-offset: 2px; }
.lightbox-prev, .lightbox-next { font-size: clamp(2rem, 5vw, 3rem); flex: 0 0 auto; }
.lightbox-prev[hidden], .lightbox-next[hidden] { visibility: hidden; display: block; }
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 2rem;
}

/* Signal that thumbnails are clickable, only when the script is active. */
html.js .gallery a img,
html.js .pair a img { cursor: zoom-in; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox-figure img { transition: opacity 0.12s ease; }
}


/* ------------------------------------------------------- phones -------- */
/*
 * Tighter rhythm on small screens. The complaint that prompted this: each
 * photograph filled the whole screen, so reaching the next section meant a
 * lot of scrolling.
 */
@media (max-width: 40rem) {
  main { padding-block: 2rem 3rem; }
  h2 { margin-top: 1.8em; }
  h3 { margin-top: 1.4em; }
  hr.rule { margin: 2rem 0; }

  .gallery { margin: 1.4rem 0; }
  .pair { margin: 1.4rem 0; }
  figure.plate { margin: 1.6rem 0; }
  figure.obit-plate { margin-bottom: 1.6rem; }

  /* Album covers and cat cards also want two-up rather than one. */
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr)); gap: 1.4rem 0.9rem; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1.2rem; }
}