/* ============================================================
   Charity Bar — Memorial wall · DARK variant
   Same layout as memorial.css, restyled: black ground,
   no borders on the boxes, a different (sans) typeface.
   ============================================================ */
@import "memorial.css";

/* Patched build — ѝ (U+045D) and Ѝ (U+040D) were added to the original face;
   see README.md. The legacy .eot/.svg sources are dropped: no browser that can
   run this page ever requests them. */
@font-face {
  font-family: 'SC Jurer';
  src: url('fonts/SCJurere-Regular.woff2') format('woff2'),
       url('fonts/SCJurere-Regular.woff') format('woff'),
       url('fonts/SCJurere-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — black ground; red stays, secondary text lightened for contrast */
  --lav:        #0b0b0c;   /* near-black "ground" (reuses the --lav slot) */
  --red:        #942b2b;   /* headlines / primary — deep, easier on the eyes */
  --red-deep:   #9b8d8d;   /* secondary text — muted warm grey on black */
  --ink:        #f4ede2;   /* off-white, for text sitting ON the red bands */

  /* SC Jurer for the headlines; EVERYTHING else is monospaced.
     All the mono faces listed carry Cyrillic, so the BG text doesn't fall
     back to a different typeface mid-sentence. */
  --font-display: 'SC Jurer', "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  --font-body:    var(--font-mono);
}

/* Everything that isn't a headline runs on the mono stack. The base sheet puts
   these on --font-display (SC Jurer); only h1/h2/h3 and the big box text keep it. */
.hero__sub,
.railnav__sections a,
.railnav__toggle { font-family: var(--font-body); }

/* ---- Highlighted body text (marker-pen look) ----
   Every LINE gets its own red band with off-white ink, rather than one block
   behind the whole paragraph. Two requirements make that work:
   · the span must be INLINE — only inline boxes paint a background per line,
     and it has to be a child span because the hero paragraph is blockified
     by the morph (position:fixed forces display:block on the element itself);
   · box-decoration-break:clone repeats the padding on every line, otherwise
     only the first and last line get it and the middle lines look clipped.
   The parent's line-height must stay generous or the bands collide. */
.hl {
  display: inline;
  background-color: var(--red);
  color: var(--ink);
  padding: .14em .34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* the callout is set tight (1.35) for plain text — too tight for bands */
.context__callout { line-height: 1.9; }

/* ---- Boxes: no shard frame, no border, no padding ring ---- */
.card__frame {
  background-image: none !important;   /* drop the shard frame (overrides the inline image) */
  background-color: transparent;
  padding: 0;
}
/* grow with content so the photo background always covers the whole box */
.card__inner { background: transparent; padding: 2rem; height: 100%; overflow: hidden; }

/* bigger box titles */
.card__desc {
  font-size: clamp(1.3rem, 4.5vw, 3rem);
  filter: url(#rough-card);   /* gentler than the hero's #rough — see the note in the HTML */
}
/* 4.5vw is measured against the VIEWPORT, which knows nothing about how narrow
   the card is once the rail takes a third of the screen (or once the cards go
   two-up on a phone). Step it down where the column is genuinely small. */
@media (max-width: 1280px) {
  .card__desc { font-size: clamp(1.15rem, 2.6vw, 2rem); }
}
@media (max-width: 900px) {
  .card__inner { padding: 1.1rem; }
  /* below ~24px even a 2.5px displacement destroys the breve on Й — drop the
     texture rather than the letter */
  .card__desc { font-size: clamp(1rem, 3.2vw, 1.5rem); filter: none; }
}
@media (max-width: 480px) {
  .card__inner { padding: 1.5rem; }
  .card__desc { font-size: clamp(1.2rem, 5.5vw, 2rem); }
}

/* same rough edges on the big hero headline */
.hero__title { filter: url(#rough); }

/* ---- Candles: third above-the-fold image ----
   Absolute (not fixed like .shard2) so it scrolls away with the hero instead of
   riding along. Flush to the top edge — it sits UNDER the top bar, which is
   transparent and z-index 50, so the menu chips stay legible over it. */
.candles {
  position: absolute;
  top: 0;
  left: 35%;
  width: clamp(160px, 30vw, 440px);   /* same clamp shape as .shard2 */
  height: auto;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 900px) { .candles { display: none; } }

/* year keeps the base red tag (white text on red) — readable over any portrait */

/* share / download: plain icon + label (no circle), like the other actions */
.card__share { color: var(--red-deep); }
.card__share:hover { color: var(--red); }

/* ---- Per-case portrait as the box background ---- */
/* Set inline as --photo + .has-photo (see index.html). The scrim keeps
   the red text legible over any image; higher specificity than the rule above
   so it wins despite the !important reset. */
.card__frame.has-photo {
  background-image:
    linear-gradient(to top,
      rgba(11, 11, 12, .88) 0%,
      rgba(11, 11, 12, .45) 42%,
      rgba(11, 11, 12, .12) 100%),
    var(--photo) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* corner ticks were already removed in the base; nothing to undo here */

/* ---- Grunge texture removed on the dark variant ---- */
body::after { content: none; }

/* a couple of small contrast tweaks for the dark ground */
.roll__list li { border-bottom-color: rgba(155, 141, 141, .18); }
.sources { border-top-color: rgba(155, 141, 141, .35); }