/* ═══════════════════════════════════════════════════════════════════════════
   requiem.nw
   ═══════════════════════════════════════════════════════════════════════════

   A gate for the people taken by days the world could not forget.

   Every other gate on this platform holds a person by their trade. This one
   holds them by a morning, and on those mornings the trade stopped mattering:
   a bond trader and a firefighter went down the same stairwell.

   That is what this sheet has to carry. Not softness, and not spectacle -
   a place where a family finds their own and sees them properly kept.

   ───────────────────────────────────────────────────────────────────────────
   What this file is

   Structure only. Every colour comes from requiem-theme.css, which defines the
   variables memorial-core.css consumes; nothing here invents one.

   This gate renders inside a bare .mem-main - no mem-inset - so requiem owns
   its own page frame. One rule owns it. Nothing else sets a page gutter.

   It replaced a sheet of one thousand two hundred and fifty-eight lines in
   which forty-nine classes were defined more than once, five different things
   were called a card, and four containers each set the page frame to a
   different width. Sizes drifted because separate rules always do.

   If you are adding to this file: a class is defined once. If two things need
   the same look, they share a class - they do not each get one.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. THE PAGE
   ─────────────────────────────────────────────────────────────────────────── */

/* One frame for every view. A reader moving between the roll and a day should
   not see the edges move. */
.req-page {
  max-width: var(--mem-max-w, 1180px);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
  --req-day-accent: var(--mem-gold);
}
@media (max-width: 640px) { .req-page { padding: 1.25rem 1rem 3rem; } }

/* the roll reads better narrow - a column of names is not a grid */
.req-page--narrow { max-width: 920px; }

/* where you came from */
.req-crumb {
  font-size: .82rem; color: var(--mem-t3);
  margin: 0 0 1.25rem;
}
.req-crumb a { color: var(--mem-t3); text-decoration: none; }
.req-crumb a:hover { color: var(--mem-gold); }
.req-crumb-sep { margin: 0 .45rem; opacity: .5; }
.req-crumb-here { color: var(--mem-t1); }


/* ───────────────────────────────────────────────────────────────────────────
   2. THE MASTHEAD
   Where you are on the left, what is held on the right. The same shape on
   every page, so the second never has to be read to understand the first.
   ─────────────────────────────────────────────────────────────────────────── */

.req-masthead {
  display: grid; gap: 1.5rem; align-items: end;
  grid-template-columns: 1fr;
  margin: 0 0 2rem; padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--mem-border);
}
@media (min-width: 820px) { .req-masthead { grid-template-columns: 1fr auto; } }

.req-masthead-kicker {
  color: var(--mem-t3); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 .5rem;
}
.req-masthead-title {
  color: var(--mem-t1); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -.01em; margin: 0;
}
.req-masthead-sub {
  color: var(--mem-t2); font-size: .95rem; line-height: 1.6;
  margin: .5rem 0 0; max-width: 58ch;
}

/* the stats: a fixture, not a scatter of numbers on the background */
.req-stats {
  display: flex; align-items: stretch;
  background: var(--mem-surface); border: 1px solid var(--mem-border);
}
.req-stat {
  padding: .75rem 1.15rem; text-align: center; min-width: 5.5rem;
  border-right: 1px solid var(--mem-border);
}
.req-stat:last-child { border-right: 0; }
.req-stat-num {
  display: block; color: var(--mem-t1); font-size: 1.4rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.req-stat-label {
  display: block; color: var(--mem-t3); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; margin-top: .3rem;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. THE BODY
   The page's own matter on the left, what relates to it on the right. The rail
   is relation and navigation - never prose, never a second telling of what the
   main column already said.
   ─────────────────────────────────────────────────────────────────────────── */

.req-body {
  display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 940px) {
  .req-body { grid-template-columns: minmax(0, 1fr) 20rem; }
  .req-rail { position: sticky; top: 5.5rem; }
}


/* ───────────────────────────────────────────────────────────────────────────
   4. THE CARD
   One card. A surface a step up from the page, a hairline round it, room
   inside. Everything that holds something is one of these.
   ─────────────────────────────────────────────────────────────────────────── */

.req-card {
  background: var(--mem-surface);
  border: 1px solid var(--mem-border);
  padding: 1.15rem 1.3rem;
  margin: 0 0 1.25rem;
}
.req-card:last-child { margin-bottom: 0; }

/* a card belonging to a particular day wears that day's colour on its spine */
.req-card--accent { border-left: 3px solid var(--req-day-accent); }

/* a card that is itself a link */
a.req-card { display: block; text-decoration: none; }
a.req-card:hover { border-color: var(--mem-gold-dim, var(--mem-gold)); }

.req-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin: 0 0 .6rem;
}
.req-card-title {
  color: var(--mem-t1); font-size: 1.02rem; font-weight: 500; margin: 0;
}
.req-card-date {
  display: block; color: var(--mem-t3); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .3rem;
}
.req-card-n {
  color: var(--mem-t3); font-size: .78rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.req-card-note {
  color: var(--mem-t3); font-size: .86rem; line-height: 1.6;
  margin: 0 0 .75rem; max-width: 64ch;
}
.req-card-note:last-child { margin-bottom: 0; }
.req-card-more {
  display: inline-block; color: var(--mem-gold); font-size: .82rem;
  text-decoration: none; margin-top: .85rem;
}
.req-card-more:hover { color: var(--mem-t1); }

/* a label above a group of cards in the rail */
.req-rail-label {
  color: var(--mem-t3); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 1.75rem 0 .65rem;
}
.req-rail-label:first-child { margin-top: 0; }


/* ───────────────────────────────────────────────────────────────────────────
   5. FACES
   Grey until somebody looks. A wall should read as a wall, and a person should
   come forward when the mouse finds them.
   ─────────────────────────────────────────────────────────────────────────── */

.req-faces {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 2px;
}
@media (max-width: 600px) {
  .req-faces { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}
.req-faces a { display: block; line-height: 0; }
.req-faces img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--mem-bg2);
  filter: grayscale(1); opacity: .6;
  transition: filter .18s ease, opacity .18s ease;
}
.req-faces a:hover img { filter: none; opacity: 1; }

/* a headstone is not a face and is not cropped to one */
.req-faces img.is-stone { object-fit: contain; padding: 3px; filter: none; opacity: .75; }

/* tabs over a wall - the parts of a day, or the kinds of people it took */
.req-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 .75rem; border-bottom: 1px solid var(--mem-border);
}
.req-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--mem-t3); font: inherit; font-size: .84rem;
  padding: .45rem .8rem; cursor: pointer;
}
.req-tab:hover { color: var(--mem-t1); }
.req-tab.is-on { color: var(--mem-t1); border-bottom-color: var(--mem-gold); }
.req-tab-n {
  color: var(--mem-t3); font-size: .72rem; margin-left: .35rem;
  font-variant-numeric: tabular-nums;
}

/* only the panel whose tab is on */
.req-panel { display: none; }
.req-panel.is-on { display: block; }


/* ───────────────────────────────────────────────────────────────────────────
   6. A ROLL OF NAMES
   A row is a face, a name, and how the day took them. Nothing else: a roll is
   read by people looking for one name in three thousand.
   ─────────────────────────────────────────────────────────────────────────── */

.req-roll { display: flex; flex-direction: column; gap: 1px; }

.req-roll-row {
  display: grid; grid-template-columns: 52px 1fr; gap: .9rem;
  align-items: center; padding: .6rem .8rem;
  background: var(--mem-surface); border: 1px solid var(--mem-border);
  border-left: 3px solid var(--req-day-accent);
  text-decoration: none;
}
.req-roll-row:hover { border-color: var(--mem-gold-dim, var(--mem-gold)); }

.req-roll-face { line-height: 0; }
.req-roll-face img {
  width: 52px; height: 52px; object-fit: cover; display: block;
  background: var(--mem-bg2); filter: grayscale(1); opacity: .72;
  transition: filter .18s ease, opacity .18s ease;
}
.req-roll-row:hover .req-roll-face img { filter: none; opacity: 1; }
.req-roll-face:empty { background: var(--mem-bg2); width: 52px; height: 52px; }

.req-roll-name { display: block; color: var(--mem-t1); font-size: .98rem; }
.req-roll-rank {
  display: block; color: var(--mem-t3); font-size: .76rem; margin-top: .1rem;
}
.req-roll-meta {
  display: block; color: var(--mem-t3); font-size: .78rem; margin-top: .15rem;
}

/* the letter bar */
.req-letters {
  display: flex; flex-wrap: wrap; gap: .15rem;
  margin: 0 0 1.25rem; padding: .5rem 0;
  border-top: 1px solid var(--mem-border);
  border-bottom: 1px solid var(--mem-border);
}
.req-letter {
  color: var(--mem-t3); font-size: .82rem; text-decoration: none;
  padding: .15rem .45rem; min-width: 1.6rem; text-align: center;
}
.req-letter:hover { color: var(--mem-t1); }
.req-letter.is-on { color: var(--mem-gold); }

/* the pager */
.req-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 1.25rem 0; color: var(--mem-t3); font-size: .84rem;
}
.req-pager a {
  color: var(--mem-t2); text-decoration: none;
  border: 1px solid var(--mem-border); padding: .35rem .8rem;
}
.req-pager a:hover { border-color: var(--mem-gold); color: var(--mem-gold); }


/* ───────────────────────────────────────────────────────────────────────────
   7. THE STRIP
   Not three buttons - a line of words a reader can push on. A memorial's
   filters should be nearly invisible until wanted: the days are the page, and
   the way you narrow them is a caption, not furniture.
   ─────────────────────────────────────────────────────────────────────────── */

.req-strip { margin: 0 0 1.5rem; }

.req-strip-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  border-top: 1px solid var(--mem-border);
  border-bottom: 1px solid var(--mem-border);
}

.req-drop { position: relative; }
.req-drop > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--mem-t2); font-size: .86rem; padding: .6rem 1.1rem;
  border-bottom: 2px solid transparent;
}
.req-drop > summary::-webkit-details-marker { display: none; }
.req-drop > summary:hover { color: var(--mem-t1); }
.req-drop[open] > summary { color: var(--mem-t1); border-bottom-color: var(--mem-gold); }
.req-drop-on { color: var(--mem-gold); margin-left: .35rem; }

.req-drop-menu {
  position: absolute; z-index: 30; top: 100%; left: 50%;
  transform: translateX(-50%); min-width: 14rem; max-height: 22rem;
  overflow-y: auto; background: var(--mem-surface);
  border: 1px solid var(--mem-border);
  border-left: 3px solid var(--mem-gold);
}
.req-drop-menu a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem .9rem; color: var(--mem-t2); font-size: .86rem;
  text-decoration: none; border-bottom: 1px solid var(--mem-border);
}
.req-drop-menu a:last-child { border-bottom: 0; }
.req-drop-menu a:hover { background: var(--mem-bg2); color: var(--mem-t1); }
.req-drop-n { color: var(--mem-t3); font-variant-numeric: tabular-nums; }

/* what is chosen, above the line, as a sentence you can unpick */
.req-strip-chosen {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin: 0 0 .6rem; font-size: .84rem;
}
.req-strip-chip {
  color: var(--mem-t2); text-decoration: none;
  border: 1px solid var(--mem-border); padding: .2rem .55rem;
}
.req-strip-chip:hover { border-color: var(--mem-gold); color: var(--mem-gold); }
.req-strip-x { color: var(--mem-t3); margin-left: .3rem; }
.req-strip-clear { color: var(--mem-t3); text-decoration: none; font-size: .8rem; }
.req-strip-clear:hover { color: var(--mem-gold); }

/* a chip, where a handful of choices is fewer than a dropdown deserves */
.req-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.req-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  color: var(--mem-t2); font-size: .82rem; text-decoration: none;
  border: 1px solid var(--mem-border); padding: .25rem .6rem;
}
.req-chip:hover { border-color: var(--mem-gold); color: var(--mem-gold); }
.req-chip.is-on { border-color: var(--mem-gold); color: var(--mem-gold); }
.req-chip-n { color: var(--mem-t3); font-size: .74rem; font-variant-numeric: tabular-nums; }


/* ───────────────────────────────────────────────────────────────────────────
   8. A DAY
   ─────────────────────────────────────────────────────────────────────────── */

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

/* the children of a day - the towers, the Pentagon, a field in Somerset
   County. They are the same day and they sit beneath it. */
.req-day-kids {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--mem-border);
}
.req-day-kid {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; color: var(--mem-t2); font-size: .85rem;
  text-decoration: none;
}
.req-day-kid:hover { color: var(--mem-gold); }
.req-day-kid-n { color: var(--mem-t3); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* a day named but not yet built - dimmed, because it is a promise */
.req-card--named { opacity: .62; border-style: dashed; }

/* the account of a day */
.req-prose { max-width: 68ch; }
.req-prose p {
  color: var(--mem-t2); font-size: 1rem; line-height: 1.8; margin: 0 0 1.15rem;
}
.req-prose p:last-child { margin-bottom: 0; }
.req-prose p:first-child { color: var(--mem-t1); font-size: 1.06rem; }


/* ───────────────────────────────────────────────────────────────────────────
   9. A PERSON
   Their face, the dates, the day that took them, and who they were. Not a
   service record - their service is held at whichever gate their trade belongs
   to, and this page sends a visitor there rather than repeating it.
   ─────────────────────────────────────────────────────────────────────────── */

.req-person {
  display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 820px) {
  .req-person { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
}

.req-portrait { margin: 0; position: relative; }
.req-portrait img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  background: var(--mem-surface2, var(--mem-bg2));
  border: 1px solid var(--mem-border);
}
.req-portrait img.is-stone {
  object-fit: contain; background: var(--mem-bg2); padding: .5rem;
}
.req-portrait-none {
  width: 100%; aspect-ratio: 3/4; background: var(--mem-bg2);
  border: 1px solid var(--mem-border);
}

/* the rank they held and what they earned */
.req-rank {
  display: flex; align-items: center; gap: .6rem;
  color: var(--mem-t1); font-size: 1rem; margin: 1.25rem 0 0;
}
.req-rank img { height: 30px; width: auto; display: block; }
.req-rank-branch { color: var(--mem-t3); font-size: .84rem; }

.req-earned-label {
  color: var(--mem-t3); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 1rem 0 .5rem;
}
.req-ribbons { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.req-ribbon { display: inline-flex; align-items: center; gap: .2rem; }
.req-ribbon img {
  height: 24px; width: auto; display: block; border: 1px solid var(--mem-border);
}
.req-ribbon-name {
  font-size: .74rem; color: var(--mem-t2); padding: .2rem .5rem;
  border: 1px solid var(--mem-border); background: var(--mem-surface);
}
.req-ribbon-n { font-size: .7rem; color: var(--mem-t3); }

/* the facts, as a list rather than a paragraph */
.req-facts { margin: 0 0 1.5rem; }
.req-facts > div {
  display: flex; gap: 1rem; padding: .4rem 0;
  border-bottom: 1px solid var(--mem-border);
}
.req-facts dt {
  color: var(--mem-t3); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; min-width: 9rem;
}
.req-facts dd { color: var(--mem-t1); font-size: .95rem; margin: 0; }
.req-facts a { color: var(--mem-t1); text-decoration: none; }
.req-facts a:hover { color: var(--mem-gold); }

/* the other gates that hold this person - one door per gate */
.req-gates-label {
  color: var(--mem-t3); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 1.5rem 0 .6rem;
}
.req-gate-door {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .6rem .8rem; margin-bottom: 1px;
  background: var(--mem-surface); border: 1px solid var(--mem-border);
  color: var(--mem-t2); font-size: .86rem; text-decoration: none;
}
.req-gate-door:hover { border-color: var(--mem-gold); color: var(--mem-gold); }
.req-gate-door-rank { color: var(--mem-t3); font-size: .78rem; }


/* ───────────────────────────────────────────────────────────────────────────
   10. THE EDITOR
   Requiem's own, because a rule for something only one gate has belongs in
   that gate. These were borrowed from salute's uniform sheet, which says in
   its own first comment that they should not be.
   ─────────────────────────────────────────────────────────────────────────── */

.sal-editor-ribbon { height: 14px; width: auto; }
.sal-editor-medal  { height: 22px; width: auto; }
.sal-editor-dec img, .sal-editor-chip img { max-height: 22px; width: auto; }
.sal-editor-grid input[readonly] {
  color: var(--mem-t3); background: var(--mem-bg2); cursor: default;
}


/* ───────────────────────────────────────────────────────────────────────────
   11. ODDS
   ─────────────────────────────────────────────────────────────────────────── */

/* a note under a heading, where a section needs a sentence of its own */
.req-note {
  color: var(--mem-t3); font-size: .88rem; line-height: 1.65;
  margin: 0 0 1.25rem; max-width: 64ch;
}

/* the closing line of a page */
.req-closing {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--mem-border);
}

/* a gallery of a person's other pictures */
.req-gallery {
  display: grid; gap: 4px; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.req-gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: 1px solid var(--mem-border);
}



/* a card whose whole body is the link to what it holds */

.req-card-main { display: block; text-decoration: none; }

.req-card-main .req-card-title { color: var(--mem-t1); }

.req-card:hover .req-card-title { color: var(--mem-gold); }

.req-day-kid-name { color: inherit; }




/* the decade a group of days belongs to */

.req-days { margin-top: 2rem; }

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




/* A decade heading stands inside the grid of days, so it took a column of its

   own and the first card of that decade sat beside it rather than under it.

   It spans the row. */

.req-days-grid > .req-rail-label { grid-column: 1 / -1; }




/* A wall of faces that is also a tab panel carries both classes: req-faces

   makes it a grid, req-panel hides it until its tab is on. The second won and

   set display:block when shown, so the grid became a column of full-width

   images - which is one face filling the screen. */

.req-faces.req-panel { display: none; }

.req-faces.req-panel.is-on {

  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 2px;

}

@media (max-width: 600px) {

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

}