/* card.css — the printed artefact itself.
 *
 * Everything here is sized in physical units (in) or in `em` off a base that is
 * derived from the card's own width, so the same markup renders identically at
 * 25% on screen and at 100% on a press sheet. Nothing in this file may depend on
 * viewport units or device pixels.
 *
 * Palette and proportions are taken from the Texas Democratic Women — Fort Bend
 * push card (colours read out of the Illustrator source, not eyeballed).
 */

.card-bleed {
  --bleed: 0.125in;
  position: relative;
  width: calc(var(--trim-w) + var(--bleed) * 2);
  height: calc(var(--trim-h) + var(--bleed) * 2);
  background: var(--c-bleed, var(--c-brand));
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18), 0 20px 40px -20px rgba(15, 23, 42, .35);
}

.card {
  /* The card fills the whole bleed box, not just the trim. Every element that
     touches an edge absorbs `--bleed` into its own padding (see below), so the
     artwork runs past the trim line the way a press expects — a card that stops
     at the trim leaves a white sliver the moment the guillotine drifts.
     Setting --bleed to 0 collapses this back to a trim-only page. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--c-ink);
  /* Base type size scales with the card so a 4x6 and an 8.5x11 look like the
     same design rather than the same design with bigger margins. */
  /* Barlow stands in for the original's Gotham: same double-storey 'a' and tall
     x-height, and the closest advance width of the free faces measured (10.50
     vs Gotham's 9.61 on a 22-character name — Inter was 11.49 and Montserrat
     12.15, which is why names used to wrap where the original fits them). */
  font-family: Barlow, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(var(--trim-w) / 46);
  letter-spacing: -.006em;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.card * { box-sizing: border-box; }

/* Default palette — overridden per theme by theme.js */
.card {
  --c-ink:        #231F20;
  --c-brand:      #223368;
  --c-brand-deep: #191346;
  --c-brand-mid:  #2C2A6B;
  --c-royal:      #263E8A;
  --c-accent:     #1496CC;
  --c-accent-lt:  #32C5F4;
  --c-hot:        #D5137A;
  --c-warm:       #F16022;
  --c-sub:        #F89520;
  --c-sub2:       #F16022;
  --c-rule:       #89BDCB;
  --c-band:       #E9F6FD;
  --c-muted:      #6D84C2;
  --density: 1;
}

/* =========================================================================
   SIDE A — the slate
   -------------------------------------------------------------------------
   Proportions below are measured off the printed original
   (Political/TDW 0826 push card.ai page 3, a 6 x 9 in artboard) and expressed
   as fractions of the trim, so they hold at any card size:

     header bar bottom      9.30% of card height
     rule under it          0.23% of card height, colour #89BDCB
     column split          51.16% of card width
     text inset            3.91% left, 2.96% right
     arrow            x 44.88%-57.43%, y 7.85%-93.78%
     body type             2.14% of card width (9.26pt on a 6in card)
     row leading            1.20
     title type            4.61% of card width (19.9pt on a 6in card)

   Two things about the bands matter and were wrong before: they run the full
   width of their column, edge to edge into the bleed, and consecutive sections
   touch — no gaps, no rounded corners. The white "gaps" in the original are
   simply the unbanded sections.
   ========================================================================= */
.side-a {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  position: relative;
}

/* ---- header ---- */
.slate-head {
  background: var(--c-brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(var(--bleed) + var(--trim-h) * .0930);
  /* Fixed height: anything over-long inside must clip, not push the card. */
  overflow: hidden;
}
.slate-h1, .slate-sub {
  padding: 0 calc(var(--bleed) + var(--trim-w) * .0394);
}
/* The original's headline is Gotham Ultra Condensed: it fills the measure and
   still stands nearly as tall as the header bar. Setting it in a normal-width
   face means the fit pass has to shrink it to the same measure, which costs
   about a quarter of its cap height — the single most visible difference on the
   card. Barlow Condensed 800 holds the width and the cap height together. */
.slate-h1 {
  margin: 0;
  text-align: center;
  font-family: 'Barlow Condensed', Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: calc(var(--trim-w) * .0640 * var(--line-fit, 1));
  line-height: 1.00;
  white-space: nowrap;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.slate-h1 .hl { color: var(--c-accent-lt); }
.slate-sub {
  margin: .1em 0 0;
  text-align: center;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 700;
  font-size: calc(var(--trim-w) * .0268);
  line-height: 1.12;
  color: var(--c-sub, var(--c-warm));
}
.slate-sub .sub-b { color: var(--c-sub2, var(--c-warm)); }
.slate-sub { overflow-wrap: anywhere; }

.slate-colheads {
  display: grid;
  grid-template-columns: var(--split) 1fr;
  margin-top: .45em;
  padding-bottom: .3em;
}
.slate-colheads > div {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: calc(var(--trim-w) * .0232);
  color: #fff;
}
.slate-colheads > div:first-child { padding: 0 var(--pad-1r) 0 var(--pad-1l); }
.slate-colheads > div:last-child  { padding: 0 var(--pad-2r) 0 var(--pad-2l); }

.slate-rule {
  height: calc(var(--trim-h) * .0023);
  min-height: .6px;
  background: var(--c-rule, #89BDCB);
}

/* ---- body: two explicit columns, filled first-come ----
   Measured off the original (as % of card width):
     column 1 text  3.94% .. 44.11%     arrow  44.88% .. 57.43%
     column 2 text 58.28% .. 96.83%     label column 19.34% wide
   Both columns clear the arrow, which is why the paddings look lopsided. */
.side-a {
  --split:   calc(var(--bleed) + var(--trim-w) * .5116);
  --label-w: calc(var(--trim-w) * .1934);
  --pad-1l:  calc(var(--bleed) + var(--trim-w) * .0394);
  --pad-1r:  calc(var(--trim-w) * .0705);
  --pad-2l:  calc(var(--trim-w) * .0712);
  --pad-2r:  calc(var(--bleed) + var(--trim-w) * .0300);
}
.slate-body {
  --sec-air: 0;
  letter-spacing: -.011em;
  display: grid;
  grid-template-columns: var(--split) 1fr;
  font-size: calc(var(--trim-w) * .0214 * var(--density));
  overflow: hidden;
  min-height: 0;
}

.slate-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.slate-col-1 .sec, .slate-col-1 .col-tail { padding-left: var(--pad-1l); padding-right: var(--pad-1r); }
.slate-col-2 .sec, .slate-col-2 .col-tail { padding-left: var(--pad-2l); padding-right: var(--pad-2r); }
.slate-col-mid .sec, .slate-col-mid .col-tail {
  padding-left: calc(var(--trim-w) * .022);
  padding-right: calc(var(--trim-w) * .022);
}

/* Three columns for the two counties long enough to need them (Dallas, Harris).
   Equal thirds, a narrower label column, and no arrow — the arrow is a
   two-column device and would sit on top of the middle column's text. */
.card[data-cols="3"] .slate-body,
.card[data-cols="3"] .slate-colheads {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card[data-cols="3"] {
  --label-w: calc(var(--trim-w) * .1250);
}
.card[data-cols="3"] .slate-col-1 .sec, .card[data-cols="3"] .slate-col-1 .col-tail {
  padding-left: calc(var(--bleed) + var(--trim-w) * .026);
  padding-right: calc(var(--trim-w) * .014);
}
.card[data-cols="3"] .slate-col-2 .sec, .card[data-cols="3"] .slate-col-2 .col-tail {
  padding-left: calc(var(--trim-w) * .014);
  padding-right: calc(var(--bleed) + var(--trim-w) * .026);
}
.card[data-cols="3"] .slate-colheads > div:first-child { padding: 0 calc(var(--trim-w) * .014) 0 calc(var(--bleed) + var(--trim-w) * .026); }
.card[data-cols="3"] .slate-colheads > div:nth-child(2) { padding: 0 calc(var(--trim-w) * .022); }
.card[data-cols="3"] .slate-colheads > div:last-child  { padding: 0 calc(var(--bleed) + var(--trim-w) * .026) 0 calc(var(--trim-w) * .014); }
.card[data-cols="3"] .slate-bottom { grid-template-columns: 62% 1fr; }

.sec {
  --sec-scale: 1;
  break-inside: avoid;
  /* --col-scale is set per column by the fill pass in card.js; --sec-scale is
     the per-section emphasis. Only the sections scale — a column's tail (the
     footnotes, the early-voting block) keeps the card's base size. */
  font-size: calc(1em * var(--sec-scale) * var(--col-scale, 1));
  padding-top: calc(.19em * (1 + var(--sec-air)));
  padding-bottom: calc(.19em * (1 + var(--sec-air)));
}
/* Banding is decided in card.js, in reading order across the whole slate, so it
   does not restart at the top of column 2. */
.zebra .slate-col .sec.band { background: var(--c-band); }

/* The original sets headings in the same family as the rows (Gotham Bold).
   Montserrat here was 14% wider than Barlow and became the single constraint
   that held the whole card's type size ~11% below the original's. */
.sec-title {
  white-space: nowrap;
  overflow: hidden;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: calc(1em * var(--line-fit, 1));
  line-height: 1.28;
  color: var(--c-ink);
  margin: 0;
}
.sec-title .star { color: var(--c-hot); }

.slate-row {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  column-gap: 0;
  font-size: 1em;
  line-height: 1.20;
}
/* Every row in the original is exactly one line — long names are clipped at the
   column edge rather than wrapped. Same here, except an ellipsis marks it so a
   truncated name is visible rather than silently shortened, and the status line
   names the offenders. */
.slate-row > * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Rows carry their own --line-fit, like section headings do: a name a few
   percent too wide for its column is condensed to fit rather than cut off. The
   original is set in Gotham, which is about 9% narrower than Barlow, so a
   handful of the longest names need it on any given card. */
.slate-row .lab, .slate-row .nom { font-size: calc(1em * var(--line-fit, 1)); }
.slate-row .lab { color: var(--c-ink); }
.slate-row .nom { color: var(--c-ink); }
.slate-row .inc {
  color: var(--c-accent);
  /* Set as a margin rather than a literal space in the markup: the space was
     being all but swallowed by the row's negative letter-spacing, and the
     printed original leaves a clear gap before the incumbent mark. */
  margin-left: .26em;
}
.slate-row .none { color: var(--c-hot); }

/* ---- the arrow, positioned exactly where the original puts it ---- */
.slate-arrow {
  position: absolute;
  left: calc(var(--bleed) + var(--trim-w) * .4488);
  width: calc(var(--trim-w) * .1254);
  top: calc(var(--bleed) + var(--trim-h) * .0785);
  height: calc(var(--trim-h) * .8593);
  pointer-events: none;
  z-index: 2;
}
.slate-arrow svg { width: 100%; height: 100%; display: block; }

/* ---- column tails: notes + paid-for under column 1,
        early voting + credit under column 2 ---- */
.col-tail { margin-top: auto; padding-top: .5em; }

/* Measured off the original: the footnotes sit at about three quarters of the
   row type, not just under it. At .92em they read as a third column of content
   rather than as a footnote. */
.foot-notes { font-size: .76em; line-height: 1.30; color: var(--c-ink); }
.foot-notes .star { font-size: 1.15em; line-height: 1; }
.foot-notes .star { color: var(--c-hot); font-weight: 700; }
.foot-notes .inc { color: var(--c-accent); }

.hotline { margin: 0 0 .45em; font-size: 1em; line-height: 1.25; }
.hotline strong {
  display: block;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 700;
  font-size: 1.3em;
  color: var(--c-ink);
  margin-bottom: .08em;
}
.hotline .tel { color: var(--c-warm); font-weight: 700; }

/* The paid-for line and the credit sit on one strip across the very bottom of
   the card, outside both columns — the original runs the paid-for line wider
   than column one. */
.slate-bottom {
  padding-bottom: calc(var(--bleed) + var(--trim-h) * .006);
  display: grid;
  /* The paid-for line runs wider than column one in the original, so this strip
     is split further right than the columns above it. */
  grid-template-columns: 56% 1fr;
  align-items: end;
  /* An `auto` grid row that can grow would push the card off its own page, so
     this strip is capped and clips instead. The cap is tight — on the original
     it is two lines of credit deep — because every point it takes comes
     straight off the slate above it. --density-f shrinks the text to fit. */
  /* The strip absorbs the bleed into its own padding, like every other element
     that touches an edge, so the cap has to allow for it — capping at the trim
     figure alone left barely a third of the strip usable once the bleed padding
     was taken out, and the fit pass ran to its floor and still reported a clip. */
  max-height: calc(var(--bleed) + var(--trim-h) * .042);
  overflow: hidden;
  /* --density-f is this strip's own fit pass: a long credit line shrinks itself
     instead of stealing height from the slate above it. */
  font-size: calc(var(--trim-w) * .0214 * var(--density) * var(--density-f, 1));
}
/* The strip sits below the arrow, so its right-hand cell does not need the
   column's arrow clearance — inheriting --pad-2l cost the credit line about a
   twentieth of the card's width and pushed it from the original's two lines onto
   three. The original starts its credit at 58.4% of the trim. */
.slate-bottom > :first-child { padding-left: var(--pad-1l); padding-right: 0; }
.slate-bottom > :last-child  {
  padding-left: calc(var(--trim-w) * .024);
  padding-right: var(--pad-2r);
}

.paidfor {
  font-size: calc(.84em * var(--line-fit, 1));
  white-space: nowrap;
  color: #808285;
  display: flex;
  align-items: center;
  gap: .5em;
}
.paidfor .orn { flex: none; opacity: .55; }
.paidfor .orn svg { display: block; height: 1.5em; width: auto; }

.foot-ev { padding-bottom: .25em; }
.foot-ev .ev-k {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.22em;
  line-height: 1.3;
  color: var(--c-accent-lt);
  text-transform: uppercase;
}
.foot-ev .ev-v {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.3em;
  line-height: 1.22;
  color: var(--c-brand);
  text-transform: uppercase;
  margin-bottom: .12em;
}
.foot-ev .ev-v .to { color: var(--c-hot); font-size: .66em; }
.foot-ev .ed-v {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  font-size: calc(2.05em * var(--line-fit, 1));
  line-height: 1.06;
  color: var(--c-brand);
  text-transform: uppercase;
}
.foot-ev .ed-v .bar { color: var(--c-hot); font-weight: 500; margin: 0 .06em; }
.foot-ev sup { font-size: .5em; vertical-align: super; }

/* Both sides carry a credit line, and both used to be styled by a bare
   `.foot-credit` — so side B's rule, being later in the file at equal
   specificity, was setting side A's credit too. It sized the slate's credit off
   the card width instead of the bottom strip's own type, which is why the
   strip's fit pass ran all the way to its floor and still reported a clip. Each
   side owns its own rule now. */
.side-a .foot-credit {
  font-size: .74em;
  line-height: 1.18;
  color: var(--c-accent);
  min-width: 0;
  overflow-wrap: anywhere;
  overflow: hidden;
}

/* =========================================================================
   SIDE B — voting information
   -------------------------------------------------------------------------
   Block geometry measured off the printed original
   (Political/TDW 1124 push card.ai page 1, 5.7 x 8.7 artboard = a 5.5 x 8.5
   trim with 0.1in bleed, which the royal block's -1.82%..101.82% span confirms).
   All figures are % of the trim:

     dates block      0      .. 44.81   height
     voting times    44.81   .. 54.06
     locations       54.06   .. 91.54
     footer          91.54   .. 100
     logo        x 70.09..96.62   y  2.35..19.52
     QR          x 79.1 ..96.0    y 25.0 ..42.5
     badge       x 81.60..95.46   y 81.26..91.53
   ========================================================================= */
.side-b {
  display: grid;
  grid-template-rows:
    calc(var(--bleed) + var(--trim-h) * .4481)
    calc(var(--trim-h) * .0925)
    minmax(0, 1fr)
    auto;
  background: var(--c-royal);
  color: #fff;
  position: relative;
}

.info-top {
  min-height: 0;
  overflow: hidden;
  /* The block's own size carries the fit scale; everything inside is in em of
     it, otherwise --density-t would have no effect at all. */
  font-size: calc(var(--trim-w) * .0272 * var(--density-t, 1));
  background: var(--c-royal);
  padding: calc(var(--bleed) + var(--trim-h) * .022)
           calc(var(--bleed) + var(--trim-w) * .038) 0
           calc(var(--bleed) + var(--trim-w) * .050);
  display: block;
}

.info-h2 {
  margin: 0 0 .35em;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.673em;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.info-main { max-width: 66%; }

.datepair { margin-bottom: .62em; }
.datepair .k {
  display: block;
  font-weight: 500;
  font-size: 1em;
  color: var(--c-accent-lt);
  line-height: 1.3;
}
.datepair .v {
  display: block;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 700;
  font-size: 1.121em;
  line-height: 1.3;
  color: #fff;
}

.ev-title, .ed-title {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.471em;
  line-height: 1.16;
  color: var(--c-accent-lt);
  text-transform: uppercase;
  letter-spacing: -.012em;
  margin: .46em 0 .02em;
}
.ev-line {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.728em;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.ev-line .to { color: var(--c-hot); font-size: .58em; vertical-align: .18em; margin: 0 .1em; }
.ev-line sup { font-size: .52em; vertical-align: super; }
.ed-line {
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  font-size: calc(3.419em * var(--line-fit, 1));
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
}
.ed-line .bar { color: var(--c-hot); font-weight: 400; margin: 0 .04em; }
.ed-line sup { font-size: .42em; vertical-align: super; }

/* logo and QR sit in their own measured boxes, not in the text flow */
.info-aside { position: static; }
.org-logo, .org-logo-fallback {
  position: absolute;
  left: calc(var(--bleed) + var(--trim-w) * .7009);
  width: calc(var(--trim-w) * .2653);
  top: calc(var(--bleed) + var(--trim-h) * .0235);
  height: calc(var(--trim-h) * .1717);
  object-fit: contain;
  z-index: 2;
}
.org-logo-fallback {
  border-radius: 50%;
  border: calc(var(--trim-w) * .004) solid var(--c-accent-lt);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6%;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: none;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 700;
  font-size: calc(var(--trim-w) * .0185);
  line-height: 1.14;
  color: #fff;
  text-transform: uppercase;
}
.qr-blurb {
  position: absolute;
  left: calc(var(--bleed) + var(--trim-w) * .7550);
  width: calc(var(--trim-w) * .2000);
  top: calc(var(--bleed) + var(--trim-h) * .2140);
  /* Sits between the logo and the QR, so its height is fixed by both. The blurb
     is free text and five lines of it only just fit at 6 x 9 — at another aspect
     ratio it does not, so it carries its own shrink-to-fit rather than clipping
     the line that tells the reader what the QR is for. */
  max-height: calc(var(--trim-h) * .085);
  overflow: hidden;
  font-size: calc(var(--trim-w) * .0212 * var(--line-fit, 1));
  line-height: 1.20;
  text-align: center;
  color: #fff;
  z-index: 2;
}
.qr-img {
  position: absolute;
  left: calc(var(--bleed) + var(--trim-w) * .7900);
  width: calc(var(--trim-w) * .1700);
  top: calc(var(--bleed) + var(--trim-h) * .2990);
  aspect-ratio: 1;
  background: #fff;
  padding: calc(var(--trim-w) * .004);
  z-index: 2;
}
.qr-img svg { width: 100%; height: 100%; display: block; }

.info-times {
  background: var(--c-brand-deep);
  padding: 0 calc(var(--bleed) + var(--trim-w) * .050);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8em;
}
.times-lines {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: calc(var(--trim-w) * .0225);
  line-height: 1.45;
}
.times-lines div:first-child { font-weight: 400; }
.times-lines div + div { font-weight: 600; }
.emblem { width: calc(var(--trim-w) * .098); height: calc(var(--trim-w) * .098); flex: none; }
.emblem svg { width: 100%; height: 100%; }

.info-centers {
  background: var(--c-brand-mid);
  padding: calc(var(--trim-h) * .012) calc(var(--bleed) + var(--trim-w) * .038)
           calc(var(--trim-h) * .008) calc(var(--bleed) + var(--trim-w) * .050);
  position: relative;
  overflow: hidden;
  min-height: 0;
  font-size: calc(var(--trim-w) * .0270 * var(--density-b, 1));
}
.centers-h {
  margin: 0 0 .3em;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: 1.685em;
  line-height: 1;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.centers-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ctr;
  font-size: 1em;
  line-height: 1.62;
}
.centers-list li {
  counter-increment: ctr;
  display: grid;
  grid-template-columns: 1.67em 1fr;
  align-items: baseline;
}
.centers-list li::before {
  content: counter(ctr) ".";
  font-weight: 600;
  text-align: right;
  padding-right: .5em;
}
.centers-list li > span { min-width: 0; overflow-wrap: anywhere; }
.centers-list .nm { font-weight: 700; }
.centers-list .ad { font-weight: 400; }

.badge {
  position: absolute;
  left: calc(var(--trim-w) * .7710);
  width: calc(var(--trim-w) * .1386);
  bottom: calc(var(--trim-h) * .0245);
  padding: calc(var(--trim-h) * .008) 2%;
  background: var(--c-brand-deep);
  color: #fff;
  text-align: center;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: .8em;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.badge .hot { color: var(--c-accent-lt); }

.info-foot {
  background: var(--c-brand-deep);
  /* The credit inside is set nowrap so it holds one line like the original.
     Without min-width: 0 its intrinsic width propagates up through the grid and
     widens the whole card — which then shrinks the dates block, three passes
     away from the cause. */
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--trim-h) * .012) calc(var(--bleed) + var(--trim-w) * .038)
           calc(var(--bleed) + var(--trim-h) * .010)
           calc(var(--bleed) + var(--trim-w) * .050);
  text-align: center;
}
.foot-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  font-family: Montserrat, Barlow, sans-serif;
  font-weight: 800;
  font-size: calc(var(--trim-w) * .0400);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -.022em;
  white-space: nowrap;
}
.foot-url .lo { font-weight: 600; font-size: .68em; }
.socials { display: inline-flex; gap: .22em; }
.socials svg { width: calc(var(--trim-w) * .0420); height: calc(var(--trim-w) * .0420); }
.side-b .foot-credit {
  margin-top: .35em;
  /* One line, like the original. A second line pushes the block past the foot of
     the card, and the credit is the last thing anyone would look at to explain
     why the card grew. */
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  font-size: calc(var(--trim-w) * .0205 * var(--line-fit, 1));
  color: var(--c-muted);
}

/* =========================================================================
   Guides + crop marks
   ========================================================================= */
.guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.show-guides .guides { display: block; }
.guides::before {
  content: "";
  position: absolute;
  inset: var(--bleed);
  outline: 1px dashed rgba(255, 45, 85, .85);
}
.guides::after {
  content: "";
  position: absolute;
  inset: calc(var(--bleed) + var(--safe, .25in));
  outline: 1px dashed rgba(0, 200, 255, .8);
}

.cropmarks { position: absolute; inset: 0; pointer-events: none; }
.cropmarks span {
  position: absolute;
  background: #000;
}