/* ==========================================================================
   muddermis — "Bloom" homepage
   css/bloom.css

   Used by home-bloom.html only. Like facade.css this file is deliberately
   SELF-CONTAINED (its own font-face, reset and tokens) so it shares nothing
   with style.css — any design can be published without disturbing the others.
   Every class is prefixed .bl- for the same reason.

   Single theme by design: warm paper, soft organic colour blobs and
   single-weight ink line art. Each app carries one of five pigments, used as a
   blob behind its icon and a wash in the corner of its card — colour as
   pigment on paper, never as a UI chrome colour. There is no dark variant and
   no theme toggle here.

   Bloom is the only round design in the set: 24px cards, 12px icon tiles,
   999px pills, irregular blobs. No shadows anywhere except the switcher chip
   (that one lives in css/design-chip.css).

   Motion. The handoff drew Bloom as static; the scroll animations were added
   on top of it, and every one of them is an enhancement, never a gate:
     - the hero plays once on load (blobs spread like ink in water, the stems
       draw themselves leaf by leaf) — CSS only, so it runs with JS off;
     - scrolling moves the hero's blobs, stems and copy at three different
       rates, from a --p that js/bloom.js writes on .bl-hero;
     - the section head and the cards reveal as they scroll in, each card's
       pigment blooming out of its corner. The hidden starting state only
       exists under html.bl-js, which js/bloom.js sets — no JS, nothing hidden.
   All of it is off under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Self-hosted display font (Archivo, variable 100–900) ----------
   Same faces as style.css — self-hosted so visitors' IPs are never sent to a
   third party. Duplicated rather than shared so this file stands alone. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Which design this page is wearing — read by js/design.js for the chip. */
  --design-name: "bloom";

  /* ===== paper + ink =====
     The micro-type is 9–10px, so contrast is non-negotiable: nothing meta goes
     lighter than --ink-quiet on paper. */
  --paper:        #f4efe7;   /* page */
  --paper-card:   #fbf8f2;   /* cards */
  --paper-bright: #fdfbf7;   /* text on colour */
  --ink:          #2b2a26;   /* headings, all line art */
  --ink-body:     #5a564d;   /* body copy            6.33:1 */
  --ink-meta:     #5f5a51;   /* mono kickers         5.6:1  */
  --ink-quiet:    #6e6a60;   /* nav, status, numbers 4.67:1 */
  --line:         #e6dfd1;   /* hairlines, card borders */
  --line-warm:    #e2dacb;   /* section rules */
  --line-hover:   #c9bca8;   /* card border on hover */

  /* ===== pigment — the five hues, in rotation order =====
     Each app's hue is an index into these, fixed in data/apps.json
     (designs.bloom.hue) so appending an app never re-colours the grid. */
  --sage:   #7d9b7a;
  --terra:  #c8674a;
  --rose:   #d9a08c;
  --ochre:  #e0a13c;
  --forest: #3f6b52;         /* footer field */
  --terra-ink:       #a4503a;   /* CTA pill + accent (5.4:1 on paper-bright) */
  --terra-ink-hover: #823d2c;
  --on-forest:       #eef2e9;   /* all footer text, links AND copyright (5.39:1) */

  /* One easing for everything that grows: quick out of the gate, long settle. */
  --grow: cubic-bezier(.2, .8, .25, 1);

  --gutter: 28px;
  --measure: 1100px;

  --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body.bl {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-stack);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.bl a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }

/* One focus ring for the page, in the accent that clears contrast. */
body.bl :focus-visible { outline: 2px solid var(--terra-ink); outline-offset: 3px; }

.bl-in {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Shared mono meta voice: 9–10px, uppercase, widely tracked. */
.bl-nav-links, .bl-kicker, .bl-cta, .bl-count, .bl-total, .bl-status, .bl-footer-in {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==========================================================================
   1. Nav
   ========================================================================== */

/* Transparent over paper: no border, no glass. */
.bl-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

/* The brand mark is a 16px sage blob — a pseudo-element with a hand-set
   radius, not an image. */
.bl-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.bl-brand::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
  background: var(--sage);
}

.bl-nav-links {
  display: flex;
  gap: 22px;
  letter-spacing: .18em;
}
body.bl .bl-nav-links a { color: var(--ink-quiet); transition: color .2s ease; }
body.bl .bl-nav-links a:hover { color: var(--terra); }

/* ==========================================================================
   2. Hero
   ========================================================================== */

/* The blobs drift sideways and down as the page scrolls; clip only the x
   axis, so they can still sink past the hero's foot without widening the
   page. */
.bl-hero {
  position: relative;
  overflow-x: clip;
}

.bl-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 24px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 34px;
}

/* The copy lags the page and fades a little as the hero scrolls away, so it
   reads as sitting deeper than the cards coming up over it. */
.bl-hero-copy {
  translate: 0 calc(var(--p, 0) * 50px);
  opacity: calc(1 - var(--p, 0) * .7);
}

.bl-kicker {
  margin: 0 0 20px;
  letter-spacing: .24em;
  color: var(--ink-meta);
}

.bl-h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.6vw, 72px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.045em;
}
.bl-line { display: block; }

.bl-lead {
  max-width: 44ch;
  margin: 0 0 22px;
  color: var(--ink-body);
  text-wrap: pretty;
}

.bl-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

body.bl .bl-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--terra-ink);
  color: var(--paper-bright);
  letter-spacing: .16em;
  transition: background .25s ease;
}
body.bl .bl-cta:hover { background: var(--terra-ink-hover); }

.bl-count {
  letter-spacing: .16em;
  color: var(--ink-quiet);
}

/* ---------- The botanical panel ----------
   Drawn at 460×340. Every position and size below is that drawing expressed
   as a percentage of it, and the panel keeps the aspect ratio — so the whole
   picture scales with its column instead of being cropped.

   On scroll the layers separate by depth: the ink stems nearly keep pace with
   the page, and the three pigments behind them lag at three different rates
   and turn a little as they go. They stop short of the heading below: its
   meta text is 10px, and a blob behind it would cost it contrast. */
.bl-garden {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 340;
}

.bl-blob {
  position: absolute;
  display: block;
}
.bl-blob--1 {
  left: 4%;       top: 7.65%;     /* 26px  */
  width: 65.22%;  height: 82.35%; /* 300 × 280 */
  border-radius: 50% 43% 52% 47% / 39% 58% 38% 58%;
  background: var(--sage);
  opacity: .5;
  translate: calc(var(--p, 0) * -18px) calc(var(--p, 0) * 40px);
  rotate: calc(var(--p, 0) * -10deg);
}
.bl-blob--2 {
  left: 30%;      top: 28.24%;    /* 96px  */
  width: 54.35%;  height: 73.53%; /* 250 × 250 */
  border-radius: 48% 58% 66% 49% / 64% 41% 61% 43%;
  background: var(--rose);
  opacity: .55;
  translate: calc(var(--p, 0) * 22px) calc(var(--p, 0) * 60px);
  rotate: calc(var(--p, 0) * 14deg);
}
.bl-blob--3 {
  left: 56%;      top: 11.76%;    /* 40px  */
  width: 45.65%;  height: 58.82%; /* 210 × 200 */
  border-radius: 58% 65% 60% 37% / 53% 34% 37% 46%;
  background: var(--ochre);
  opacity: .4;
  translate: calc(var(--p, 0) * 30px) calc(var(--p, 0) * 90px);
  rotate: calc(var(--p, 0) * -18deg);
}

/* The three stems stand on the panel's floor. */
.bl-stem {
  position: absolute;
  bottom: 0;
  height: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  translate: 0 calc(var(--p, 0) * 16px);
}
.bl-stem--1 { left: 2%;  width: 45.65%; --base: .35s; }  /* 210 × 300 */
.bl-stem--2 { left: 30%; width: 39.13%; --base: .6s; }   /* 180 × 250 */
.bl-stem--3 { left: 58%; width: 32.61%; --base: .85s; }  /* 150 × 210 */

.bl-vein { opacity: .55; }

/* ==========================================================================
   3. The card grid
   ========================================================================== */

/* id="apps" is load-bearing: every sub-page links back to /#apps.
   Positioned so it paints above the hero's blobs as they sink into it. */
.bl-shelf {
  position: relative;
  padding-top: 16px;
  padding-bottom: 46px;
  scroll-margin-top: 16px;
}

.bl-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}
.bl-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.bl-rule {
  flex: 1;
  height: 1px;
  background: var(--line-warm);
  transform-origin: 0 50%;
}
.bl-total {
  letter-spacing: .18em;
  color: var(--ink-meta);
}

.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Each card's pigment arrives inline from the generator: --hue (one of the
   five tokens), --blob (its fixed organic radius) and --shift (a small nudge
   so fifteen washes don't sit in exactly the same corner). */
body.bl .bl-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  color: var(--ink);
  transition: border-color .25s ease, transform .25s ease;
}
body.bl .bl-card:hover,
body.bl .bl-card:focus-visible {
  border-color: var(--line-hover);
  transform: translateY(-3px);
}

/* The wash layer covers the whole card (inset: 0) and is what scales on hover,
   from the top-right corner — so the colour floods in rather than the small
   visible blob twitching as the pointer crosses it. */
.bl-wash {
  position: absolute;
  inset: 0;
  opacity: .24;
  transform-origin: 88% 12%;
  pointer-events: none;
  transition: opacity .3s ease, transform .45s var(--grow);
}
.bl-card:hover .bl-wash,
.bl-card:focus-visible .bl-wash {
  opacity: .5;
  transform: scale(1.3);
}
.bl-wash-blob {
  position: absolute;
  right: -34px;
  top: -30px;
  width: 120px;
  height: 110px;
  border-radius: var(--blob);
  background: var(--hue);
  transform: var(--shift);
}

.bl-icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
}
.bl-icon-blob {
  position: absolute;
  left: -7px;
  top: -6px;
  width: 48px;
  height: 46px;
  border-radius: var(--blob);
  background: var(--hue);
  opacity: .55;
}
.bl-icon img {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.bl-text {
  position: relative;
  min-width: 0;
}
.bl-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
}
.bl-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.bl-status {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-quiet);
}
.bl-desc {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-body);
  text-wrap: pretty;
}
.bl-badge {
  display: block;
  width: 94px;
  height: auto;
  margin-top: 10px;
}

/* ==========================================================================
   4. Footer — the forest field
   ========================================================================== */

.bl-footer {
  background: var(--forest);
  color: var(--on-forest);
}
.bl-footer-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 22px;
  letter-spacing: .18em;
}
.bl-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
/* A lighter green would fail contrast, so hover underlines instead of
   changing colour — and the copyright is never dimmed. */
body.bl .bl-footer a { color: var(--on-forest); text-underline-offset: 4px; }
body.bl .bl-footer a:hover { text-decoration: underline; }
.bl-copy { letter-spacing: .14em; }
body.bl .bl-footer :focus-visible { outline-color: var(--on-forest); }

/* ==========================================================================
   5. Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- On load: the hero grows ----------
     Keyframes name only their starting state; each one runs to whatever the
     element is at rest, so nothing here restates a size or an opacity. */
  @keyframes bl-rise {
    from { opacity: 0; translate: 0 18px; }
  }
  @keyframes bl-spread {
    from { opacity: 0; scale: .3; border-radius: 50%; }
  }
  /* pathLength="1" on every path makes each one exactly 1 long, so one dash of
     1 followed by a longer gap draws any path from nothing to whole. */
  @keyframes bl-draw {
    from { stroke-dashoffset: 1.02; }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes bl-sway {
    0%, 100% { rotate: -.9deg; }
    50%      { rotate: .9deg; }
  }

  .bl-kicker, .bl-line, .bl-lead, .bl-cta-row {
    animation: bl-rise .9s var(--grow) both;
  }
  .bl-kicker          { animation-delay: .05s; }
  .bl-line:nth-child(1) { animation-delay: .14s; }
  .bl-line:nth-child(2) { animation-delay: .24s; }
  .bl-lead            { animation-delay: .36s; }
  .bl-cta-row         { animation-delay: .46s; }

  .bl-blob { animation: bl-spread 1.6s var(--grow) both; }
  .bl-blob--1 { animation-delay: .1s; }
  .bl-blob--2 { animation-delay: .28s; }
  .bl-blob--3 { animation-delay: .46s; }

  /* The stem draws first, then each leaf in turn up the stem, each midrib
     just behind its leaf. --k is the leaf's place on the stem (0 = the stem). */
  .bl-draw {
    stroke-dasharray: 1 2;
    animation: bl-draw .75s cubic-bezier(.45, .05, .3, 1) both;
    animation-delay: calc(var(--base) + var(--k) * 150ms);
  }
  .bl-draw--stem { animation-duration: 1.1s; }
  .bl-vein { animation-delay: calc(var(--base) + var(--k) * 150ms + 280ms); }

  /* Then they keep moving, barely: three stems out of step with each other. */
  .bl-stem   { animation: bl-sway 7.5s ease-in-out infinite; }
  .bl-stem--2 { animation-duration: 9s;   animation-delay: -3s; }
  .bl-stem--3 { animation-duration: 6.4s; animation-delay: -1.2s; }

  /* ---------- On scroll: things arrive ----------
     js/bloom.js sets html.bl-js and adds .is-in as each element scrolls into
     view, with a --d delay so a row arrives left to right. Card hover still
     uses transform; the reveal uses the separate translate/scale properties,
     so the two never fight over one value. */
  html.bl-js .bl-head h2,
  html.bl-js .bl-total {
    transition: opacity .8s ease, translate .9s var(--grow);
  }
  html.bl-js .bl-total { transition-delay: .35s; }
  html.bl-js .bl-rule  { transition: scale 1.2s var(--grow) .12s; }
  html.bl-js .bl-head:not(.is-in) h2    { opacity: 0; translate: 0 16px; }
  html.bl-js .bl-head:not(.is-in) .bl-total { opacity: 0; translate: 12px 0; }
  html.bl-js .bl-head:not(.is-in) .bl-rule  { scale: 0 1; }

  html.bl-js body.bl .bl-card {
    transition:
      border-color .25s ease,
      transform .25s ease,
      opacity .7s ease var(--d, 0ms),
      translate .9s var(--grow) var(--d, 0ms);
  }
  html.bl-js body.bl .bl-card:not(.is-in) { opacity: 0; translate: 0 32px; }

  /* The pigment blooms out of the corner a beat after the card lands, and the
     blob behind the icon turns into place with it. */
  html.bl-js .bl-card .bl-wash-blob {
    transition: scale 1.3s var(--grow) calc(var(--d, 0ms) + 180ms);
  }
  html.bl-js .bl-card:not(.is-in) .bl-wash-blob { scale: .15; }
  html.bl-js .bl-card .bl-icon-blob {
    transition:
      scale .9s var(--grow) calc(var(--d, 0ms) + 120ms),
      rotate .9s var(--grow) calc(var(--d, 0ms) + 120ms);
  }
  html.bl-js .bl-card:not(.is-in) .bl-icon-blob { scale: .3; rotate: -60deg; }
}

/* Reduced motion: no lift and no wash transition. The border still changes
   on hover, so the card still answers the pointer. */
@media (prefers-reduced-motion: reduce) {
  body.bl .bl-card, .bl-wash { transition: none; }
  body.bl .bl-card:hover,
  body.bl .bl-card:focus-visible { transform: none; }
  .bl-card:hover .bl-wash,
  .bl-card:focus-visible .bl-wash { transform: none; }
}

/* ==========================================================================
   5b. The game card (Junkyard Astronauts)
   Bloom's paper, pigment and type, so it belongs to the page; one wide card
   with a bigger mark and a dates column, so it is not mistaken for an app.
   ========================================================================== */

.bl-game { padding: 6px 0 44px; }

.bl-game-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  padding: 30px 34px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
}

/* A wide, faint terra wash from the far corner, the same trick as the app
   cards' wash but at the card's own scale. */
.bl-game-wash {
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 360px;
  height: 300px;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  background: var(--terra);
  opacity: .14;
  pointer-events: none;
}

.bl-game-mark { position: relative; display: block; }
.bl-game-mark-blob {
  position: absolute;
  left: -16px;
  top: -12px;
  width: 158px;
  height: 150px;
  border-radius: 62% 38% 54% 46% / 45% 58% 42% 55%;
  background: var(--ochre);
  opacity: .5;
}
.bl-game-mark img {
  position: relative;
  display: block;
  width: 128px;
  height: 128px;
}

.bl-game-copy { position: relative; min-width: 0; }

.bl-game-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

.bl-game-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.bl-game-desc {
  max-width: 46ch;
  margin: 0 0 20px;
  color: var(--ink-body);
  text-wrap: pretty;
}

.bl-game-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.bl-game-actions .bl-cta { font-family: var(--font-mono); font-size: 11px; }
body.bl .bl-game-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-hover);
  text-underline-offset: 4px;
  transition: color .2s ease;
}
body.bl .bl-game-link:hover { color: var(--terra-ink); text-decoration-color: currentColor; }

.bl-game-dates {
  position: relative;
  margin: 0;
  min-width: 190px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.bl-game-dates div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line-warm);
}
.bl-game-dates div:last-child { border-bottom: 1px solid var(--line-warm); }
.bl-game-dates dt {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.bl-game-dates dd { margin: 0; color: var(--ink); text-align: right; }
.bl-game-dates .bl-game-link { font-size: 11px; letter-spacing: 0; }

/* ==========================================================================
   6. Small screens
   ========================================================================== */

@media (max-width: 899px) {
  .bl-hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: 36px;
  }
  /* 406 wide is 300 tall at the drawing's aspect ratio. */
  .bl-garden { max-width: 406px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The dates drop under the copy; the mark stays beside it. */
  .bl-game-card { grid-template-columns: auto minmax(0, 1fr); gap: 22px 28px; }
  .bl-game-dates { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 619px) {
  :root { --gutter: 18px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bl-head h2 { font-size: 28px; }
  .bl-nav-links { gap: 18px; }
  .bl-game { padding-bottom: 34px; }
  /* Mark on top, then everything else full width. */
  .bl-game-card { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; border-radius: 24px; }
  .bl-game-mark img { width: 88px; height: 88px; }
  .bl-game-mark-blob { width: 110px; height: 104px; left: -12px; top: -9px; }
  .bl-game-kicker { letter-spacing: .14em; }
}

@media print {
  html.bl-js body.bl .bl-card,
  html.bl-js .bl-head h2,
  html.bl-js .bl-total { opacity: 1; translate: none; }
  html.bl-js .bl-rule { scale: none; }
  .bl-hero-copy, .bl-blob, .bl-stem { translate: none; rotate: none; }
}