/* ==========================================================================
   ERA26 v2. Two landing bands: #tematy ("Tematy Expo do działania") and
   #lead-exchange ("Giełda kontaktów / The Lead Exchange").
   Namespaces: .era-topics-*  and  .era-lx-*  (collision-proof by construction).

   THIS SHEET DEFINES NO VALUES OF ITS OWN. Every colour, border, radius,
   easing and font here resolves through a token that already exists in
   css/style.css. There is no new hex, no new border colour, no new radius
   number, and no scrim. If a value below looks literal it is either a layout
   number (grid, gap, padding) or a size/weight, which is where the hierarchy
   on a dark band is allowed to come from.

   LAWS OBSERVED
   - INK LAW. Both bands are dark surfaces. Every text colour resolves to pure
     #ffffff (via --ink / --ink-soft / --on-dark-*), or to full-brightness gold
     --rt-gold-bright for meta/accents. There is NO grey and NO sub-1 opacity
     on any text. Hierarchy comes from size, weight and letter-spacing only.
   - GOLD FRAME LAW. Every border and divider derives from --line-warm /
     --line-warm-soft / the --rt-gold-* alphas already in style.css. No new
     border colour is introduced.
   - NO PHOTO SCRIMS. Neither band carries a background photograph, and this
     sheet paints no overlay or gradient over any image.
   - SANCTIONED DEVIATIONS (§3.2 of the build spec) are FOLLOWED, not "fixed":
     the font is Inter (inherited via --font-sans, never re-declared here), and
     cards are ROUNDED via --radius-card. Do not square these corners.
   - MOSAIC CANON. In the 1px-gap grid the FRAME rounds and the CELLS stay
     square, with overflow:hidden on the frame doing the clipping. That is the
     same contract .trust-grid / .concept-facts / .products already follow.

   BREAKPOINTS. Mobile-first (min-width), landing on the site's own carrying
   breakpoints from the other direction: 721px is one past the 720 mobile
   boundary, 981px one past the 980 tablet boundary, so nothing in style.css
   and nothing here can both apply at the same width. Verified at 375 and 1440.
   ========================================================================== */


/* ==========================================================================
   1. #tematy: Expo-to-action topics
   The band itself reuses .canvases-band (charcoal + gold top/bottom rules),
   which separates it from the obsidian #premise above and the seashell
   #the-room below without inventing a background. .era-topics-band is a
   hook only; it deliberately sets nothing the band class already sets.
   ========================================================================== */

/* --- the mosaic frame: FRAME rounds, cells stay square --- */
.era-topics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;                              /* the gap IS the divider; it shows --line-warm through */
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  overflow: hidden;                      /* mandatory: clips the square cells to the rounded frame */
  margin-top: 2.2rem;
}

@media (min-width: 721px) {
  .era-topics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 981px) {
  .era-topics-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- the cell --- */
.era-topics-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--card);
  padding: 1.6rem 1.4rem 1.5rem;
  transition: background var(--ui-ease);
  /* NO border-radius here on purpose. See MOSAIC CANON above. */
}

.era-topics-card:hover { background: var(--seashell-alt); }

/* Meta numeral. Gold at full brightness, never a dimmed white:
   --on-dark-faint already resolves to --rt-gold-bright by the Ink Law. */
.era-topics-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rt-gold-bright);
  margin-bottom: 0.85rem;
}

/* Theme title. Pure white, and it carries the weight of the hierarchy.
   Sized in rem rather than tinted, which is the whole point of the Ink Law. */
.era-topics-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.era-topics-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);       /* resolves to #ffffff on dark */
  margin: 0 0 1.15rem;
}

/* Routing chip: which conversation the theme lands in.
   Pill radius + gold frame, both from existing tokens. margin-top:auto pins it
   to the bottom of the cell so a row of cards keeps one chip baseline even
   when the descriptions run to different lengths. */
.era-topics-route {
  margin-top: auto;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
  background: var(--rt-gold-08);
  border: 1px solid var(--rt-gold-45);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
}

/* Bridge line into #lead-exchange. Reads a step above body copy because it is
   larger and gold-ruled on its leading edge, not because it is a different ink. */
.era-topics-bridge {
  margin-top: 2rem;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  border-left: 2px solid var(--line-warm);
  padding-left: 1rem;
}

@media (min-width: 721px) {
  .era-topics-card { padding: 1.8rem 1.6rem 1.7rem; }
  .era-topics-card h3 { font-size: 1.08rem; }
}


/* ==========================================================================
   2. #lead-exchange: the hosted 90-minute exchange
   Band reuses .band-obsidian (pure obsidian), which separates it from the
   charcoal #programme above. The single addition is a gold top hairline, on
   the same --line-warm token every other rule on the site uses.
   ========================================================================== */

.era-lx-band { border-top: 1px solid var(--line-warm); }

/* --- the three-part flow ---
   Semantic <ol>: the three parts are ordered and the order is the content.
   The native marker is removed because the numeral is rendered explicitly as
   .era-lx-step-no, so the site never shows two markers on one item. */
.era-lx-flow {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-warm);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (min-width: 981px) {
  .era-lx-flow { grid-template-columns: repeat(3, 1fr); }
}

.era-lx-step {
  background: var(--card);
  padding: 1.6rem 1.4rem 1.7rem;
  transition: background var(--ui-ease);
}

.era-lx-step:hover { background: var(--seashell-alt); }

.era-lx-step-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rt-gold-bright);
  margin-bottom: 0.8rem;
}

.era-lx-step h3 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.55rem;
  text-wrap: balance;
}

.era-lx-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* --- the conduct principle ---
   Given its own rounded, gold-framed plate because it is the one part of the
   format a guest is asked to agree to. Charcoal card on obsidian, so it lifts
   off the band without any overlay. */
.era-lx-rule {
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  padding: 1.7rem 1.4rem 1.5rem;
}

/* The canonical sentence, quoted whole. Gold, full brightness, larger than the
   glosses beneath it: hierarchy by size and colour-of-accent, never by dimming. */
.era-lx-rule-head {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--rt-gold-bright);
  text-wrap: balance;
}

.era-lx-rule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}

@media (min-width: 721px) {
  .era-lx-rule { padding: 2rem 1.9rem 1.8rem; }
  .era-lx-rule-head { font-size: 1.08rem; }
  .era-lx-rule-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

/* A hairline per item rather than a full cell: this is a glossary inside one
   card, not a second mosaic. --line-warm-soft is the token style.css already
   reserves for secondary in-card rules. */
.era-lx-rule-item {
  border-top: 1px solid var(--line-warm-soft);
  padding-top: 1.1rem;
}

@media (min-width: 721px) {
  .era-lx-rule-item { border-top: 0; border-left: 1px solid var(--line-warm-soft); padding-top: 0; padding-left: 1.1rem; }
  .era-lx-rule-item:first-child { border-left: 0; padding-left: 0; }
}

.era-lx-rule-item h3 {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-gold-bright);
  margin: 0 0 0.6rem;
}

.era-lx-rule-item p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}


/* ==========================================================================
   3. Reduced motion.
   The .reveal / .revealed opacity choreography and the eyebrow rule animation
   are owned by style.css; the only motion this sheet adds is the card
   background transition. Freeze it, and freeze nothing else: the hover colour
   change still lands, because on these cards it is the state signal.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .era-topics-card,
  .era-lx-step { transition: none; }
}
/* ============================================================================
   ERA26 v2, BLOCK B
   Takeaway Pass  ·  ERA w Twoim mieście  ·  Gospodarze RealTimes

   SCOPE. Three landing sections, three class namespaces, zero shared selectors:
     .era-tp-*      Takeaway Pass          (#takeaway)
     .era-cities-*  ERA w Twoim mieście    (#miasta)
     .era-hosts-*   Gospodarze RealTimes   (#gospodarze)
   Nothing here selects an element outside those three sections, so this sheet
   cannot collide with a sibling agent's block or with css/style.css.

   NO NEW VALUES. Every colour, border, radius, easing and font in this file is
   an existing token from css/style.css. There is not one hex literal, not one
   hardcoded px radius and not one new rgba below. Consequences:
     · INK LAW (instruction 1.9). --ink / --ink-soft / --ink-muted all resolve
       to #ffffff on dark, so every line of copy in these three sections is pure
       white at opacity 1. Hierarchy comes from size and weight only. Meta and
       ordinals take --gold-ink (#ddc074, full brightness), never a grey.
     · GOLD FRAME LAW (instruction 1.9). Every frame and rule derives from the
       one gold alpha family: --line-warm (--rt-gold-45) at rest, --rt-gold-60
       on hover, --rt-gold-bright on focus. Retuning is one token, not a sweep.
     · SANCTIONED DEVIATIONS (instruction 3.2) are honoured, not "fixed": type
       is Inter via --font-sans, and cards are rounded via --radius-card (16px).
     · NO PHOTO SCRIM (instruction 1.10). Nothing here paints an overlay on an
       image. The one image in this block sits on a solid frame.

   RESPONSIVE. Mobile-first. The two min-width steps are the exact complements
   of the sheet's load-bearing max-width breakpoints (980 tablet, 720 mobile),
   so 721px and 981px, which leaves no dead zone between the two systems.
   Verified reasoning targets: 375px and 1440px.
   ========================================================================= */


/* ============================================================
   1. TAKEAWAY PASS  (#takeaway, .era-tp)
   The four-step arc. Vocabulary is deliberately the site's own
   .acts / .register-steps pair: a mono ordinal in a gold pill,
   then the step title, then one paragraph. It has to read as
   the same author as #programme sitting two bands above it.
   ============================================================ */

.era-tp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.6rem;
}

.era-tp-step {
  position: relative;
  padding-top: 0.2rem;
  border-top: 1px solid var(--line-warm);
  padding-block-start: 1.2rem;
}

/* The ordinal. Pill radius, gold ink on a gold-alpha frame, mono scale copied
   from .rstep-no / .act-no so the three step families agree. */
.era-tp-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rt-gold-45);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  transition: border-color var(--ui-ease), color var(--ui-ease);
}

.era-tp-step:hover .era-tp-step-no {
  border-color: var(--rt-gold-60);
  color: var(--rt-gold-bright);
}

.era-tp-step h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  margin: 0.75rem 0 0.5rem;
  color: var(--ink);
  text-wrap: balance;
}

.era-tp-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  /* balance, not pretty: these are four short blocks standing side by side, and
     `pretty` still left two of them with a two-word tail while the line above
     ran full. Measured at 375 and 1440, PL and EN. */
  text-wrap: balance;
}

/* The terms block. Two binding sentences plus the timing note. Framed rather
   than free-floating, because these are the sentences that keep the section an
   award and not an offer, and they must not read as small print. */
.era-tp-terms {
  margin-top: 2.6rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--card);
}

.era-tp-term {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

.era-tp-term + .era-tp-term { margin-top: 0.9rem; }

/* --ink is already #ffffff under the ink law; this is stated so the seat cap
   cannot inherit a softer weight from a future .band-obsidian strong rule. */
.era-tp-term strong { color: var(--ink); font-weight: 600; }

/* .section-note already carries margin-top 1.6rem from the base sheet; inside
   this framed block the rule above it does the separating, so it is tightened. */
.era-tp-terms .section-note { margin-top: 1.2rem; }

@media (min-width: 721px) {
  .era-tp-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
}

@media (min-width: 981px) {
  .era-tp-steps { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .era-tp-step p { max-width: 32ch; }
  .era-tp-terms { padding: 1.7rem 1.8rem 1.8rem; }
}


/* ============================================================
   2. ERA W TWOIM MIEŚCIE  (#miasta, .era-cities)
   The #series infinite strip, cloned. Geometry, snap behaviour,
   scrollbar treatment, card frame and the 46px circular arrows
   are the values from .series-track / .edition-card /
   .series-arrow, carried over unchanged under this namespace.
   overflow:hidden on the section is load-bearing: it clips the
   arrows, which sit at left/right -10px on desktop.
   ============================================================ */

.era-cities { overflow: hidden; }

.era-cities-track-wrap {
  position: relative;
  margin-top: 2.4rem;
}

.era-cities-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.2rem 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rt-gold-60) transparent;
}
.era-cities-track::-webkit-scrollbar { height: 4px; }
.era-cities-track::-webkit-scrollbar-thumb { background: var(--rt-gold-60); }
.era-cities-track::-webkit-scrollbar-track { background: var(--line-warm-soft); }

.era-cities-card {
  flex: 0 0 clamp(200px, 62vw, 260px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
  transition: transform var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
}

.era-cities-card:hover {
  transform: translateY(-5px);
  border-color: var(--rt-gold-60);
  box-shadow: 0 16px 44px var(--era-navy-70);
}

.era-cities-city {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.era-cities-country {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Munich's one grounded extra line. Same scale as the country line, separated
   by space rather than by a rule, so a card with it and a card without it keep
   the same silhouette in the strip. */
.era-cities-line {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The hedge, on every card. margin-top:auto pins it to the card foot so the six
   status lines sit on one baseline across the strip even though Munich carries
   an extra line. Mono + gold + a top rule is the .edition-stats treatment. */
.era-cities-status {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-warm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* DO NOT re-add a margin-top here in any form. An earlier draft carried
   `.era-cities-card > .era-cities-status { margin-block-start: 1.3rem }`, which
   is the SAME property as the `margin-top: auto` above at higher specificity, so
   it silently killed the auto. Munich, the one card with an extra line, then hung
   its status 31px below the other five. Caught on render, invisible in source.
   The gap above the status is owned by padding-top + the flex free space. */

/* Circular prev/next. The only navigation affordance, on every viewport, per
   instruction 1.8. 46px clears the 44px iOS tap-target floor. */
.era-cities-arrow {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rt-gold-60);
  background: var(--seashell-92);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: border-color var(--ui-ease), color var(--ui-ease), background var(--ui-ease);
}
.era-cities-arrow:hover { border-color: var(--rt-gold-bright); color: var(--rt-gold-bright); }
.era-cities-arrow:focus-visible { outline: 2px solid var(--rt-gold-bright); outline-offset: 2px; }

/* Mobile first: .rt-shell is calc(100vw - 1.5rem) below 640px, so the arrows are
   pulled inside the shell edge rather than poking past the viewport. */
.era-cities-arrow.prev { left: 2px; }
.era-cities-arrow.next { right: 2px; }

@media (min-width: 641px) {
  .era-cities-arrow.prev { left: -10px; }
  .era-cities-arrow.next { right: -10px; }
}

@media (min-width: 721px) {
  .era-cities-card { flex: 0 0 clamp(220px, 30vw, 260px); }
}

@media (min-width: 981px) {
  .era-cities-card { flex: 0 0 clamp(240px, 24vw, 300px); }
}

/* The strip animates only by user scroll and by the arrows, so there is no
   auto-advance to suppress. The wrap itself is instant by design; the arrows
   already fall back to behavior:'auto' under reduced motion in the section's
   own script. This only removes the hover lift, which is decoration. */
@media (prefers-reduced-motion: reduce) {
  .era-cities-card,
  .era-cities-card:hover { transform: none; transition: border-color var(--ui-ease); }
}


/* ============================================================
   3. GOSPODARZE REALTIMES  (#gospodarze, .era-hosts)
   Charcoal band with gold rules, the .tickets / .series
   treatment. It sits directly under #invitations, which is also
   charcoal and already carries a gold bottom rule, so the two
   read as one "taking part, and who answers" block, and #faq
   below returns to obsidian. Flip .era-hosts's background to
   var(--background) if the splice order changes.
   ============================================================ */

.era-hosts {
  background: var(--seashell-alt);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}

.era-hosts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.4rem;
}

.era-hosts-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--card);
  transition: border-color var(--ui-ease);
}
.era-hosts-card:hover { border-color: var(--rt-gold-60); }

/* --- Portrait frame ---
   Square, clipped, on a solid charcoal plate. Geometry follows .spk-photo
   (aspect-ratio 1/1, 1px gold frame, --radius-card, overflow:hidden, which is
   load-bearing: a radius does nothing unless the box clips its square-cornered
   <img> child). 120px on mobile, 160px from tablet up. */
.era-hosts-portrait {
  position: relative;
  width: 120px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--seashell-alt);
  overflow: hidden;
  transition: border-color var(--ui-ease);
}
.era-hosts-card:hover .era-hosts-portrait { border-color: var(--rt-gold-60); }

.era-hosts-portrait picture,
.era-hosts-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Monogram fallback. Sits under the image and is revealed only while the
   portrait is pending, so a missing asset degrades to a gold monogram on
   charcoal instead of a broken-image glyph. */
.era-hosts-monogram {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
}

/* THE PENDING SWITCH. While the frame carries data-portrait-pending, the
   <picture> is not rendered at all, so the browser never requests the missing
   file and can never paint a broken image. Delete that ONE attribute in the
   markup when the asset lands; nothing else changes. Do not delete this rule,
   it is the guard for the next portrait too. */
.era-hosts-portrait[data-portrait-pending] picture { display: none; }
.era-hosts-portrait[data-portrait-pending] .era-hosts-monogram { display: flex; }

.era-hosts-name {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

.era-hosts-role {
  margin-top: 0.3rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.era-hosts-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
  text-wrap: balance;
}
.era-hosts-body p + p { margin-top: 0.75rem; }

.era-hosts-contact { margin-top: 1.1rem; }
.era-hosts-contact a {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rt-gold-45);
  transition: color var(--ui-ease), border-color var(--ui-ease);
}
.era-hosts-contact a:hover,
.era-hosts-contact a:focus-visible {
  color: var(--rt-gold-bright);
  border-bottom-color: var(--rt-gold-bright);
}

@media (min-width: 721px) {
  /* Portrait beside the copy. auto keeps the column at the portrait's own
     160px rather than letting the grid stretch it. */
  .era-hosts-card {
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    align-items: start;
    padding: 1.7rem 1.8rem 1.8rem;
  }
  .era-hosts-portrait { width: 160px; }
}

@media (min-width: 981px) {
  /* Authored for one or two cards. One card holds a readable measure instead of
     stretching to 1160px; a second card added later drops into place with no
     rule change. */
  .era-hosts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .era-hosts-grid > .era-hosts-card:only-child { max-width: 42rem; }
}