/* requiem.nw - CORE
 *
 * This gate's own markup. Structure shared with every other gate lives in
 * /shared/memorial/memorial-core.css and is loaded first; the palette lives in
 * requiem-theme.css and is loaded after. This file holds only what requiem has
 * and no other gate does: the days, the rolls, and the chrome around them.
 *
 * Nothing here is inherited from another gate.
 *
 * Every colour is a var(--mem-*) from the theme. A day within this gate wears
 * its own face over all of it: --req-day-accent is set per card and per event
 * page, so September 11th can be red where the gate is slate.
 */

/* ── chrome ──────────────────────────────────────────────────────────── */

.req-chrome { min-height: 100vh; display: flex; flex-direction: column; }
.req-main   { flex: 1 1 auto; width: 100%; }

.req-topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--mem-surface);
  border-bottom: 1px solid var(--mem-border);
}
.req-topbar-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.req-topbar-controls { display: flex; align-items: center; gap: .5rem; }

.req-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.req-logo-icon { display: inline-flex; color: var(--mem-gold); }
.req-logo-text {
  font-family: var(--mem-font-display, inherit);
  font-size: 1.15rem; letter-spacing: .04em;
  color: var(--mem-t1);
}
.req-logo-dot { color: var(--mem-t3); }

.req-nav { display: flex; align-items: center; gap: 1.1rem; }
.req-nav-link {
  color: var(--mem-t2); text-decoration: none;
  font-size: .9rem; letter-spacing: .02em;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.req-nav-link:hover        { color: var(--mem-t1); }
.req-nav-link.is-active    { color: var(--mem-t1); border-bottom-color: var(--mem-gold); }

.req-ctrl-btn, .req-size-btn {
  background: transparent; border: 1px solid var(--mem-border);
  color: var(--mem-t2); border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.req-ctrl-btn { width: 32px; height: 32px; }
.req-size-btn { min-width: 28px; height: 28px; font-size: .72rem; padding: 0 .3rem; }
.req-size-btn[data-size="lg"] { font-size: .88rem; }
.req-size-btn[data-size="xl"] { font-size: 1rem; }
.req-ctrl-btn:hover, .req-size-btn:hover { color: var(--mem-t1); border-color: var(--mem-t3); }
.req-size-btn.is-active { color: var(--mem-t1); border-color: var(--mem-gold); }
.req-size-controls { display: inline-flex; gap: .25rem; }

[data-theme="dark"]  .req-icon-light { display: none; }
[data-theme="light"] .req-icon-dark  { display: none; }
.req-icon-fs-exit { display: none; }
:fullscreen .req-icon-fs-enter { display: none; }
:fullscreen .req-icon-fs-exit  { display: inline; }

.req-footer {
  margin-top: 4rem; padding: 2.5rem 0;
  background: var(--mem-footer-bg);
  border-top: 1px solid var(--mem-border);
}
.req-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem;
}
.req-footer-brand   { color: var(--mem-footer-t1); font-size: 1rem; letter-spacing: .04em; }
.req-footer-brand span { color: var(--mem-footer-t3); }
.req-footer-tagline { color: var(--mem-footer-t2); font-size: .88rem; }
.req-footer-copy    { color: var(--mem-footer-t3); font-size: .78rem; margin-left: auto; }

/* ── the gate ────────────────────────────────────────────────────────── */

.req-home, .req-event {
  max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 3rem;
  --req-day-accent: var(--mem-gold);
}

.req-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--mem-border); }
.req-hero-kicker {
  color: var(--mem-t3); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; font-style: italic; margin: 0 0 .9rem;
}
.req-hero-title {
  color: var(--mem-t1); font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15; margin: 0 0 1.1rem; font-weight: 400;
}
.req-hero-lede {
  color: var(--mem-t2); font-size: 1.06rem; line-height: 1.65;
  max-width: 62ch; margin: 0;
}

.req-hero-stats, .req-event-stats, .req-about-stats {
  display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.25rem;
}
.req-stat, .req-about-stat { display: flex; flex-direction: column; gap: .2rem; }
.req-stat-num, .req-about-stat-num {
  color: var(--mem-t1); font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.req-stat-label, .req-about-stat-label {
  color: var(--mem-t3); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
}

.req-section-title {
  color: var(--mem-t1); font-size: 1.35rem; font-weight: 400;
  margin: 3rem 0 .5rem; letter-spacing: .01em;
}
.req-section-note {
  color: var(--mem-t3); font-size: .9rem; margin: 0 0 1.5rem; max-width: 60ch;
}

/* ── a day ───────────────────────────────────────────────────────────── */

.req-days { padding-top: 1rem; }
.req-day {
  border: 1px solid var(--mem-border); border-left: 3px solid var(--req-day-accent);
  background: var(--mem-card); border-radius: 3px;
  margin-bottom: 1.25rem; overflow: hidden;
}
.req-day-main { display: block; padding: 1.5rem 1.6rem; text-decoration: none; }
.req-day-main:hover { background: var(--mem-surface1); }
.req-day-date {
  color: var(--req-day-accent); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.req-day-heading {
  color: var(--mem-t1); font-size: 1.5rem; font-weight: 400;
  margin: .35rem 0 .3rem;
}
.req-day-sub   { color: var(--mem-t2); font-size: .98rem; margin: 0 0 .75rem; }
.req-day-count { color: var(--mem-t3); font-size: .84rem; margin: 0; }
.req-day-note {
  color: var(--mem-t3); font-size: .85rem; line-height: 1.6;
  margin: 0; padding: 0 1.6rem 1.4rem; max-width: 78ch;
}
.req-day-kids {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--mem-border); border-top: 1px solid var(--mem-border);
}
.req-day-kid {
  flex: 1 1 240px; background: var(--mem-surface);
  padding: .9rem 1.6rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .2rem;
}
.req-day-kid:hover { background: var(--mem-surface2); }
.req-day-kid-heading { color: var(--mem-t2); font-size: .95rem; }
.req-day-kid-count   { color: var(--mem-t3); font-size: .78rem; }

/* ── the event page ──────────────────────────────────────────────────── */

.req-event-crumb { padding: 1.5rem 0 0; font-size: .84rem; color: var(--mem-t3); }
.req-event-crumb a { color: var(--mem-t2); text-decoration: none; }
.req-event-crumb a:hover { color: var(--mem-t1); }
.req-crumb-sep { margin: 0 .5rem; color: var(--mem-t3); }

.req-event-hero { padding: 2.5rem 0 2.5rem; border-bottom: 1px solid var(--mem-border); }
.req-event-date {
  color: var(--req-day-accent); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem;
}
.req-event-title {
  color: var(--mem-t1); font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400; line-height: 1.1; margin: 0 0 .7rem;
}
.req-event-sub { color: var(--mem-t2); font-size: 1.1rem; margin: 0; }

.req-event-body { padding: 2.25rem 0 0; max-width: 68ch; }
.req-event-prose {
  color: var(--mem-t2); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.25rem;
}
.req-event-note {
  color: var(--mem-t3); font-size: .9rem; line-height: 1.7;
  border-left: 2px solid var(--req-day-accent);
  padding: .2rem 0 .2rem 1rem; margin: 1.5rem 0 0; max-width: 68ch;
}

.req-event-kids { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.5rem 0 0; }
.req-event-kid {
  flex: 1 1 280px; border: 1px solid var(--mem-border);
  border-left: 3px solid var(--req-day-accent);
  background: var(--mem-card); border-radius: 3px;
  padding: 1.1rem 1.3rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .3rem;
}
.req-event-kid:hover { background: var(--mem-surface1); }
.req-event-kid-heading { color: var(--mem-t1); font-size: 1.05rem; }
.req-event-kid-sub     { color: var(--mem-t2); font-size: .88rem; }
.req-event-kid-count   { color: var(--mem-t3); font-size: .78rem; margin-top: .2rem; }

/* ── the roll ────────────────────────────────────────────────────────── */

.req-event-roll { padding-top: 1rem; }
.req-roll-grid, .req-recent-grid {
  display: grid; gap: 1px; background: var(--mem-border);
  border: 1px solid var(--mem-border); border-radius: 3px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.req-roll-card, .req-recent-card {
  background: var(--mem-card); padding: 1rem 1.2rem;
  text-decoration: none; display: flex; flex-direction: column; gap: .3rem;
  border-left: 2px solid transparent;
}
.req-roll-card:hover, .req-recent-card:hover {
  background: var(--mem-surface1); border-left-color: var(--req-day-accent);
}
.req-roll-name, .req-recent-name { color: var(--mem-t1); font-size: .98rem; }
.req-roll-rank, .req-recent-rank { color: var(--mem-t3); font-size: .82rem; }
.req-roll-meta, .req-recent-date { color: var(--mem-t3); font-size: .8rem; }
.req-recent-day {
  color: var(--req-day-accent); font-size: .76rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── closing ─────────────────────────────────────────────────────────── */

.req-recent  { padding-top: 1rem; }
.req-closing { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--mem-border); }
.req-closing-prose {
  color: var(--mem-t2); font-size: 1rem; line-height: 1.7;
  max-width: 64ch; margin: 0 0 1rem;
}
.req-closing-link { color: var(--mem-gold); text-decoration: none; font-size: .95rem; }
.req-closing-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .req-hero { padding: 2.5rem 0 2rem; }
  .req-hero-stats, .req-event-stats, .req-about-stats { gap: 1.5rem; }
  .req-stat-num, .req-about-stat-num { font-size: 1.6rem; }
  .req-day-main { padding: 1.2rem 1.1rem; }
  .req-day-note { padding: 0 1.1rem 1.1rem; }
}



/* The About page reads straight through rather than in tabs, so its headings

   are this gate's own rather than the shared tab chrome. */

.req-about-h2 {

  color: var(--mem-t1); font-size: 1.4rem; font-weight: 400;

  margin: 2.75rem 0 1rem; letter-spacing: .01em;

}

.req-about-h2:first-of-type { margin-top: 0; }




/* ── their faces ─────────────────────────────────────────────────────────

   Six hundred and seventy of the people this gate holds have a photograph.

   They are the argument the About page is making, so they sit above it: a

   close grid, no gaps, no captions - a wall rather than a gallery. */

.req-faces { background: var(--mem-surface); border-bottom: 1px solid var(--mem-border); }

.req-faces-grid {

  display: grid; gap: 2px;

  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));

  max-width: 1180px; margin: 0 auto; padding: 2px;

}

.req-face { display: block; aspect-ratio: 1; overflow: hidden; background: var(--mem-bg2); }

.req-face img {

  width: 100%; height: 100%; object-fit: cover; display: block;

  filter: grayscale(1) contrast(1.05); opacity: .62;

  transition: opacity .18s ease, filter .18s ease;

}

.req-face:hover img { filter: none; opacity: 1; }

.req-faces-caption {

  max-width: 52rem; margin: 0 auto; padding: 1.25rem 1.5rem 1.75rem;

  color: var(--mem-t3); font-size: .88rem; line-height: 1.6; text-align: center;

}

@media (max-width: 640px) {

  .req-faces-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }

}




/* ── the gateway ─────────────────────────────────────────────────────────

   A welcome rather than a directory. It has to read as well with one day in

   it as with five hundred, so nothing here is sized to a count. */

.req-welcome { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1.5rem 2.5rem; text-align: center; }

.req-welcome-kicker {

  color: var(--mem-t3); font-size: .8rem; letter-spacing: .18em;

  text-transform: uppercase; font-style: italic; margin: 0 0 1.25rem;

}

.req-welcome-title {

  color: var(--mem-t1); font-size: clamp(2.1rem, 5vw, 3.1rem);

  font-weight: 400; line-height: 1.12; margin: 0 0 2rem; letter-spacing: -.01em;

}

.req-welcome-body { text-align: left; }

.req-welcome-body p {

  color: var(--mem-t2); font-size: 1.04rem; line-height: 1.75; margin: 0 0 1.15rem;

}

.req-welcome-close {

  color: var(--mem-t1) !important; border-left: 3px solid var(--mem-gold);

  padding: .1rem 0 .1rem 1.1rem; margin-top: 1.75rem !important;

}

.req-search { display: flex; gap: .5rem; margin: 2.5rem 0 0; }

.req-search-input {

  flex: 1 1 auto; background: var(--mem-surface); color: var(--mem-t1);

  border: 1px solid var(--mem-border); border-radius: 3px;

  padding: .8rem 1rem; font-size: .98rem;

}

.req-search-input::placeholder { color: var(--mem-t3); }

.req-search-input:focus { outline: none; border-color: var(--mem-gold); }

.req-search-btn {

  background: transparent; color: var(--mem-t2); cursor: pointer;

  border: 1px solid var(--mem-border); border-radius: 3px;

  padding: .8rem 1.4rem; font-size: .95rem;

}

.req-search-btn:hover { color: var(--mem-t1); border-color: var(--mem-gold); }

.req-welcome-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 2.5rem; }



.req-faces--home { border-top: 1px solid var(--mem-border); }

.req-faces--home .req-faces-grid { padding: 2px 2px 2rem; }



/* Ways in. Rendered only when there is enough to browse. */

.req-ways { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 0; }

.req-ways-rows { display: flex; flex-direction: column; gap: .9rem; }

.req-ways-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.req-ways-label {

  color: var(--mem-t3); font-size: .76rem; letter-spacing: .1em;

  text-transform: uppercase; margin-right: .5rem; min-width: 7rem;

}

.req-chip {

  display: inline-flex; align-items: center; gap: .45rem;

  border: 1px solid var(--mem-border); border-radius: 999px;

  padding: .35rem .85rem; color: var(--mem-t2);

  font-size: .86rem; text-decoration: none;

}

.req-chip:hover { color: var(--mem-t1); border-color: var(--mem-gold); }

.req-chip-n { color: var(--mem-t3); font-size: .76rem; }



.req-days { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

.req-days-grid {

  display: grid; gap: 1.25rem;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

}

.req-days-grid .req-day { margin-bottom: 0; }

.req-closing { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }



@media (max-width: 640px) {

  .req-welcome { padding: 2.75rem 1.25rem 1.5rem; }

  .req-welcome-stats { gap: 1.75rem; }

  .req-search { flex-direction: column; }

}




/* ── a person ────────────────────────────────────────────────────────────

   Their face, their dates, the day that took them. Not a service record:

   that is kept at whichever gate their trade belongs to, and the doors below

   the portrait lead there. */

.req-person { max-width: 1060px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.req-person-head {

  display: grid; gap: 2.5rem; padding: 2rem 0 0;

  grid-template-columns: minmax(260px, 340px) 1fr;

}

.req-person-portrait { margin: 0; position: relative; }

.req-person-portrait img, .req-person-noportrait {

  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;

  background: var(--mem-surface2); border: 1px solid var(--mem-border);

}

.req-person-plate {

  position: absolute; left: 0; right: 0; bottom: 0;

  padding: 2.5rem 1rem .9rem;

  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));

  display: flex; flex-direction: column; gap: .1rem;

}

.req-person-name  { color: #fff; font-size: 1.05rem; line-height: 1.25; }

.req-person-years { color: rgba(255,255,255,.72); font-size: .84rem; font-variant-numeric: tabular-nums; }



.req-person-inmemory {

  color: var(--mem-t3); font-size: .78rem; letter-spacing: .16em;

  text-transform: uppercase; margin: 0 0 .5rem;

}

.req-person-h1 {

  color: var(--mem-t1); font-size: clamp(1.8rem, 4vw, 2.6rem);

  font-weight: 400; line-height: 1.15; margin: 0 0 1.75rem;

}

.req-person-facts { margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .7rem; }

.req-person-facts > div { display: flex; gap: 1rem; align-items: baseline; }

.req-person-facts dt {

  color: var(--mem-t3); font-size: .74rem; letter-spacing: .1em;

  text-transform: uppercase; min-width: 9rem; flex: 0 0 auto;

}

.req-person-facts dd { color: var(--mem-t1); font-size: .98rem; margin: 0; }

.req-person-facts dd a { color: var(--req-day-accent); text-decoration: none; }

.req-person-facts dd a:hover { text-decoration: underline; }



.req-person-gates-label {

  color: var(--mem-t3); font-size: .74rem; letter-spacing: .1em;

  text-transform: uppercase; margin: 0 0 .6rem;

}

.req-gate-door {

  display: flex; flex-direction: column; gap: .15rem;

  border: 1px solid var(--mem-border); border-left: 3px solid var(--mem-gold);

  background: var(--mem-surface); border-radius: 3px;

  padding: .7rem 1rem; margin-bottom: .5rem; text-decoration: none;

}

.req-gate-door:hover { background: var(--mem-surface1); }

.req-gate-door-une  { color: var(--mem-t1); font-size: .95rem; }

.req-gate-door-meta { color: var(--mem-t3); font-size: .8rem; }



.req-person-tribute {

  margin: 3rem 0 0; padding: 1.5rem 0 1.5rem 1.5rem;

  border-left: 3px solid var(--req-day-accent);

  color: var(--mem-t1); font-size: 1.15rem; line-height: 1.7;

  font-style: italic; max-width: 62ch;

}

.req-person-life, .req-person-survivors { margin-top: 2.5rem; max-width: 68ch; }

.req-person-prose { color: var(--mem-t2); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.1rem; }

.req-person-howdied { color: var(--mem-t3); }

.req-person-back { margin-top: 3rem; }



@media (max-width: 760px) {

  .req-person-head { grid-template-columns: 1fr; gap: 1.75rem; }

  .req-person-portrait { max-width: 320px; }

  .req-person-facts > div { flex-direction: column; gap: .15rem; }

  .req-person-facts dt { min-width: 0; }

}




/* ── the roll ────────────────────────────────────────────────────────────

   Every name in the order each was taken, so the years themselves show that

   a day can go on taking people for decades. */

.req-roll { max-width: 900px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.req-roll-head { padding: 3rem 0 1.5rem; }

.req-roll-title {

  color: var(--mem-t1); font-size: clamp(1.8rem, 4vw, 2.6rem);

  font-weight: 400; margin: 0 0 .5rem;

}

.req-roll-sub { color: var(--mem-t3); font-size: .95rem; margin: 0 0 1.5rem; }

.req-roll-search { margin: 0 0 1.25rem; }

.req-roll-days { margin-top: .25rem; }

.req-chip.is-on { color: var(--mem-t1); border-color: var(--mem-gold); background: var(--mem-surface1); }



.req-roll-list { border-top: 1px solid var(--mem-border); }

.req-roll-year {

  color: var(--mem-t3); font-size: .78rem; letter-spacing: .14em;

  padding: 1.5rem 0 .5rem; font-variant-numeric: tabular-nums;

}

.req-roll-row {

  display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem;

  align-items: center; padding: .7rem .75rem; text-decoration: none;

  border-bottom: 1px solid var(--mem-border);

  border-left: 2px solid transparent;

}

.req-roll-row:hover { background: var(--mem-surface1); border-left-color: var(--req-day-accent); }

.req-roll-face {

  width: 44px; height: 44px; border-radius: 2px; overflow: hidden;

  background: var(--mem-surface2); display: block;

}

.req-roll-face img {

  width: 100%; height: 100%; object-fit: cover; display: block;

  filter: grayscale(1); opacity: .75;

}

.req-roll-row:hover .req-roll-face img { filter: none; opacity: 1; }

.req-roll-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.req-roll-day {

  color: var(--req-day-accent); font-size: .74rem;

  letter-spacing: .06em; text-transform: uppercase; text-align: right;

}

.req-pager {

  display: flex; align-items: center; justify-content: center;

  gap: 1.25rem; padding: 2rem 0 0;

}

.req-pager-at { color: var(--mem-t3); font-size: .85rem; }



@media (max-width: 600px) {

  .req-roll-row { grid-template-columns: 36px 1fr; }

  .req-roll-face { width: 36px; height: 36px; }

  .req-roll-day { display: none; }

}




/* A door that leaves this gate says so, and the pager sits at both ends of a

   long roll rather than only at the bottom of it. */

.req-gate-door-out { color: var(--mem-t3); font-size: .72rem; margin-left: .3rem; }

.req-pager--top { padding: 0 0 1rem; border-bottom: 1px solid var(--mem-border); }




/* The days, browsed. A decade heading spans the grid so a long list reads as a

   timeline; with few days it never appears. */

.req-days-page { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.req-days-browse { margin-top: 1.5rem; }

.req-days-decade {

  grid-column: 1 / -1; color: var(--mem-t3); font-size: .78rem;

  letter-spacing: .14em; padding: 1.25rem 0 .25rem;

  border-bottom: 1px solid var(--mem-border); margin-bottom: .5rem;

}




/* The name carries the row; the rank sits under it, quieter. */

.req-roll-who .req-roll-name { color: var(--mem-t1); font-size: 1rem; line-height: 1.3; }

.req-roll-who .req-roll-rank {

  color: var(--mem-t3); font-size: .8rem; letter-spacing: .02em; display: block;

}

.req-roll-who .req-roll-meta { color: var(--mem-t3); font-size: .78rem; margin-top: .1rem; }




/* A day's roll carries faces too. The portrait is sized to the text beside it -

   a name, a rank and a date stack taller than a small square, which left the

   card looking unbalanced. */

.req-roll-card { display: grid; grid-template-columns: 56px 1fr; gap: .85rem; align-items: center; }

.req-roll-card .req-roll-face { width: 56px; height: 68px; border-radius: 2px; }

.req-roll-card .req-roll-name { color: var(--mem-t1); font-size: .98rem; line-height: 1.3; }

.req-roll-card .req-roll-rank { color: var(--mem-t3); font-size: .8rem; display: block; }

.req-roll-card .req-roll-meta { color: var(--mem-t3); font-size: .78rem; margin-top: .1rem; }




/* Three across rather than four, and a portrait big enough to be a face rather

   than a thumbnail. Grey at rest so the roll reads as one body of people, and

   colour when a visitor reaches for one of them - the same gesture as the wall

   of faces, because it is the same act: singling somebody out. */

.req-roll-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.req-roll-card { grid-template-columns: 84px 1fr; gap: 1.1rem; padding: 1.1rem 1.2rem; }

.req-roll-card .req-roll-face { width: 84px; height: 104px; }

.req-roll-card .req-roll-face img {

  filter: grayscale(1) contrast(1.04); opacity: .72;

  transition: filter .18s ease, opacity .18s ease;

}

.req-roll-card:hover .req-roll-face img { filter: none; opacity: 1; }

.req-roll-card .req-roll-name { font-size: 1.02rem; }



@media (max-width: 520px) {

  .req-roll-grid { grid-template-columns: 1fr; }

  .req-roll-card { grid-template-columns: 64px 1fr; }

  .req-roll-card .req-roll-face { width: 64px; height: 80px; }

}




/* A card is one link. The browser underlines every line of text inside it on

   hover, which turns a name, a rank and a date into three underlined strings

   and reads as a list of links rather than one person. */

.req-roll-card, .req-roll-row, .req-day-main, .req-day-kid,

.req-event-kid, .req-gate-door, .req-face, .req-recent-card {

  text-decoration: none;

}

.req-roll-card:hover, .req-roll-row:hover, .req-day-main:hover,

.req-day-kid:hover, .req-event-kid:hover, .req-gate-door:hover,

.req-recent-card:hover { text-decoration: none; }

.req-roll-card *, .req-roll-row *, .req-day-main *, .req-day-kid *,

.req-event-kid *, .req-gate-door *, .req-recent-card * { text-decoration: none; }




/* The name carries the card. What they were and when they were taken sit under

   it, smaller, so a roll of three hundred reads as a list of people rather than

   a list of ranks. */

.req-roll-card .req-roll-rank,

.req-roll-row  .req-roll-rank { font-size: .74rem; }

.req-roll-card .req-roll-meta,

.req-roll-row  .req-roll-meta { font-size: .72rem; }




/* Adding a day. Plain, dense, and out of the way - this is the only page here

   a visitor will never see. */

.req-admin { max-width: 860px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.req-admin-form { margin: 1.5rem 0 0; }

.req-admin-set {

  border: 1px solid var(--mem-border); border-radius: 3px;

  padding: 1.25rem 1.4rem 1.5rem; margin: 0 0 1.5rem; background: var(--mem-surface);

}

.req-admin-set legend {

  color: var(--mem-t3); font-size: .74rem; letter-spacing: .12em;

  text-transform: uppercase; padding: 0 .5rem;

}

.req-admin-form label {

  display: block; color: var(--mem-t2); font-size: .88rem; margin: 0 0 1rem;

}

.req-admin-hint { display: block; color: var(--mem-t3); font-size: .76rem; margin: .15rem 0 .3rem; }

.req-admin-form input[type=text], .req-admin-form input:not([type]),

.req-admin-form input[type=date], .req-admin-form input[type=number],

.req-admin-form select, .req-admin-form textarea {

  width: 100%; margin-top: .3rem; background: var(--mem-bg); color: var(--mem-t1);

  border: 1px solid var(--mem-border); border-radius: 3px;

  padding: .5rem .7rem; font: inherit; font-size: .92rem;

}

.req-admin-form textarea { line-height: 1.6; resize: vertical; }

.req-admin-form input:focus, .req-admin-form select:focus, .req-admin-form textarea:focus {

  outline: none; border-color: var(--mem-gold);

}

.req-admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.req-admin-check { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.req-admin-check input { width: auto; margin: 0; }

.req-admin-ok  { color: #7ab87a; border-left: 3px solid #7ab87a; padding: .5rem .8rem; }

.req-admin-err { color: var(--mem-gold); border-left: 3px solid var(--mem-gold); padding: .5rem .8rem; }

.req-admin-list { display: flex; flex-direction: column; gap: 1px; background: var(--mem-border);

  border: 1px solid var(--mem-border); border-radius: 3px; }

.req-admin-day { background: var(--mem-card); padding: .8rem 1.1rem; text-decoration: none;

  display: flex; flex-direction: column; gap: .15rem; }

.req-admin-day:hover { background: var(--mem-surface1); }

.req-admin-day-head { color: var(--mem-t1); font-size: .98rem; }

.req-admin-day-meta { color: var(--mem-t3); font-size: .78rem; }

@media (max-width: 600px) { .req-admin-row { grid-template-columns: 1fr; } }




/* A headstone where there is no portrait. Arlington gave the graves and not the

   faces. A stone is not a face and should not pretend to be one, so it sits

   back a little and is not cropped to a head. */

.req-roll-face img.is-stone { object-fit: contain; background: var(--mem-bg2); opacity: .6; padding: 2px; }

.req-roll-card:hover .req-roll-face img.is-stone { opacity: .95; }


.req-person-portrait img.is-stone { object-fit: contain; background: var(--mem-bg2); padding: .5rem; }

.req-person-portrait img.is-stone + .req-person-plate { background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.4) 60%, rgba(0,0,0,0)); }




/* Everything held of them. The marker over the Pentagon dead is one object with

   five faces, so a person may carry six images of the same granite - each is

   labelled rather than left to look like six graves. */

.req-person-gallery { margin-top: 3rem; }

.req-gal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.req-gal { margin: 0; }

.req-gal a { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--mem-bg2); border: 1px solid var(--mem-border); }

.req-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }

.req-gal a:hover img { transform: scale(1.03); }

.req-gal figcaption { color: var(--mem-t3); font-size: .76rem; line-height: 1.45; margin-top: .4rem; }

.req-gal-role { display: block; color: var(--req-day-accent); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }




/* Wider. The portrait and the facts beside it were wrapping on an ordinary

   screen because the column was capped at 1060, which left the dates and the

   day breaking onto their own lines for no reason. */

.req-person { max-width: 1280px; }

.req-person-head { grid-template-columns: minmax(300px, 380px) 1fr; gap: 3rem; }

.req-person-facts dt { min-width: 10.5rem; }

@media (max-width: 900px) {

  .req-person-head { grid-template-columns: minmax(240px, 320px) 1fr; gap: 2rem; }

}