/* ============================================================
   mobile-patrons.css
   
   Mobile-only redesign of the Patron Wall on sponsors.html
   and the Patrons Plate on index.html. Loaded AFTER mobile.css
   so it can override its 2-up grid + identical-chrome rules.
   
   The thesis:
     1. Hierarchy via CHROME, not size. Platinum gets the full
        cartouche treatment; Gold gets a half-treatment; Silver
        drops the card and becomes a foil-rule list; Bronze
        becomes a typeset credits roll — wordmark | role tag,
        one per line, no logo grid.
     2. Every retained card runs the full inner-column width
        (~358px at 390 viewport) so the brass-foil gradient and
        gilt corner ticks read as designed instead of getting
        compressed into a 165px tile.
   
   Scope: ≤640px ONLY. Desktop is untouched.
   ============================================================ */

@media (max-width: 640px) {

  /* ============================================================
     SPONSORS.HTML · PATRON WALL
     ============================================================ */

  /* === Reset mobile.css's 2-up + universal-chrome rules
     so we can apply tier-specific treatment below. */
  html body .sponsor-tier .logos {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Tier head — center-stacked label + meta, no flanking rules.
     The italic 'patron of the arc' line lives directly under the
     metallic tier name. Add a hairline + flourish underneath so
     each tier still reads as a chapter break. */
  html body .sponsor-tier .tier-meta {
    text-align: center !important;
    margin: 0 auto 22px !important;
    max-width: 100% !important;
    position: relative;
    padding-bottom: 18px;
  }
  html body .sponsor-tier .tier-meta::after {
    content: '· · ·';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: rgba(182, 138, 62, 0.55);
  }
  html body .sponsor-tier .tier-meta .level {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }
  html body .sponsor-tier .tier-meta .label {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    color: rgba(40, 28, 12, 0.5) !important;
  }

  /* Reset universal card chrome that mobile.css left on every
     tier — we'll re-apply tier-by-tier. */
  html body .sponsor-tier .logo.logo-img {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    position: relative;
    overflow: visible !important;
  }
  html body .sponsor-tier .logo.logo-img::before,
  html body .sponsor-tier .logo.logo-img::after {
    display: none !important;
  }

  /* ============================================================
     · PLATINUM · — full cartouche, full breath
     One hero card. Deep cream paper. Brass-foil top edge with the
     full 358px to deploy its gradient. Gilt corner ticks. Heavy
     min-height. A single tier-stamp eyebrow ('PATRON OF THE ARC')
     sits in the brass band itself.
     ============================================================ */
  html body .sponsor-tier.platinum {
    padding: 56px 0 64px !important;
    background:
      radial-gradient(ellipse 80% 50% at 50% 40%, rgba(229,199,122,0.10), transparent 70%);
  }
  html body .sponsor-tier.platinum .logos {
    padding: 0 6px !important;
  }
  html body .sponsor-tier.platinum .logo.logo-img {
    background: linear-gradient(180deg, #FBF6E4 0%, #F8EFD2 60%, #FBF6E4 100%) !important;
    border: 1px solid rgba(182, 138, 62, 0.55) !important;
    border-radius: 2px !important;
    min-height: 220px !important;
    padding: 32px 24px 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-shadow:
      0 1px 0 rgba(255, 247, 222, 0.8) inset,
      0 12px 32px rgba(40, 28, 12, 0.08),
      0 2px 6px rgba(40, 28, 12, 0.06);
  }
  /* Brass-foil top band — extra thick on Platinum */
  html body .sponsor-tier.platinum .logo.logo-img::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.55) 12%,
      rgba(229,199,122,0.95) 50%,
      rgba(182,138,62,0.55) 88%,
      transparent 100%) !important;
  }
  /* Gilt corner ticks — all four corners */
  html body .sponsor-tier.platinum .logo.logo-img::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid rgba(182, 138, 62, 0.18) !important;
    pointer-events: none;
    /* corner-only via clip-path */
    clip-path: polygon(
      0 0, 18px 0, 18px 1px, 1px 1px, 1px 18px, 0 18px,
      0 100%, 18px 100%, 18px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 18px), 0 calc(100% - 18px),
      100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 18px), 100% calc(100% - 18px),
      100% 0, calc(100% - 18px) 0, calc(100% - 18px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 18px, 100% 18px
    );
  }
  html body .sponsor-tier.platinum .logo.logo-img img {
    max-height: 130px !important;
    max-width: 84% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ============================================================
     · GOLD · — half cartouche, lighter paper
     Card retained but slimmer. Brass top edge present but thinner.
     No corner ticks. Lighter cream paper. Single card centered.
     ============================================================ */
  html body .sponsor-tier.gold {
    padding: 48px 0 !important;
  }
  html body .sponsor-tier.gold .logos {
    padding: 0 6px !important;
  }
  html body .sponsor-tier.gold .logo.logo-img {
    background: linear-gradient(180deg, #FDF8EA 0%, #FAF1D6 100%) !important;
    border: 1px solid rgba(182, 138, 62, 0.30) !important;
    border-radius: 2px !important;
    min-height: 150px !important;
    padding: 24px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
      0 1px 0 rgba(255, 247, 222, 0.6) inset,
      0 4px 14px rgba(40, 28, 12, 0.04);
  }
  /* Thinner brass band — 2px instead of 4px */
  html body .sponsor-tier.gold .logo.logo-img::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.45) 18%,
      rgba(229,199,122,0.80) 50%,
      rgba(182,138,62,0.45) 82%,
      transparent 100%) !important;
  }
  html body .sponsor-tier.gold .logo.logo-img img {
    max-height: 90px !important;
    max-width: 78% !important;
  }

  /* ============================================================
     · SILVER · — list of foil-ruled rows
     No card. Each logo sits on flat paper, separated by a hairline
     gilt rule. Logo on the left, '· Patron · Edition Nº 02' tag
     on the right in JBM small caps. Reads as a register, not a
     showcase.
     ============================================================ */
  html body .sponsor-tier.silver {
    padding: 40px 0 !important;
    background: rgba(245, 237, 216, 0.4);
  }
  html body .sponsor-tier.silver .logos {
    gap: 0 !important;
    border-top: 1px solid rgba(182, 138, 62, 0.22);
  }
  html body .sponsor-tier.silver .logo.logo-img {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(182, 138, 62, 0.22) !important;
    min-height: 64px !important;
    padding: 14px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
  }
  html body .sponsor-tier.silver .logo.logo-img img {
    max-height: 36px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    justify-self: start;
  }
  html body .sponsor-tier.silver .logo.logo-img .logo-wordmark {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: rgba(40, 28, 12, 0.85) !important;
    text-align: left !important;
    justify-self: start;
    line-height: 1;
  }
  html body .sponsor-tier.silver .logo.logo-img .logo-tag {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(182, 138, 62, 0.85) !important;
    opacity: 1 !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    justify-self: end;
    line-height: 1.4;
  }

  /* ============================================================
     · BRONZE · — typeset credits roll
     Same row template as Silver but the gilt accent steps down to
     slate. The 'role' tag (Coffee Break, Lanyards, Dine-out) is
     italic Newsreader to read as editorial credit, not bureaucratic
     metadata. The wordmark is small caps.
     ============================================================ */
  html body .sponsor-tier.bronze {
    padding: 40px 0 56px !important;
  }
  html body .sponsor-tier.bronze .logos {
    gap: 0 !important;
    border-top: 1px solid rgba(40, 28, 12, 0.18);
  }
  html body .sponsor-tier.bronze .logo.logo-img {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(40, 28, 12, 0.12) !important;
    min-height: 56px !important;
    padding: 12px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
  }
  html body .sponsor-tier.bronze .logo.logo-img img {
    max-height: 28px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    justify-self: start;
    /* Slightly desaturate bronze marks so the tier reads cooler */
    filter: saturate(0.85) opacity(0.92);
  }
  html body .sponsor-tier.bronze .logo.logo-img .logo-wordmark {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgba(40, 28, 12, 0.78) !important;
    text-align: left !important;
    justify-self: start;
    line-height: 1;
  }
  html body .sponsor-tier.bronze .logo.logo-img .logo-tag {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(40, 28, 12, 0.55) !important;
    opacity: 1 !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    justify-self: end;
    line-height: 1.4;
    max-width: 140px;
  }
  /* For bronze rows that have NO tag, push the wordmark left at full width */
  html body .sponsor-tier.bronze .logo.logo-img:not(.has-tag) {
    grid-template-columns: 1fr !important;
  }


  /* ============================================================
     INDEX.HTML · PATRONS PLATE
     The plate has its own structure — .patrons-tier > .patrons-grid
     > .patron-cell. Apply the same hierarchy: Platinum hero,
     Sponsors get half-card, Partners (university) become a
     foil-ruled list.
     ============================================================ */

  /* Tier-head treatment — match the sponsors page rhythm */
  html body .patrons-plate .patrons-tier-head {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    position: relative;
    border-bottom: 0 !important;
  }
  html body .patrons-plate .patrons-tier-head::after {
    content: '· · ·';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: rgba(182, 138, 62, 0.55);
  }
  html body .patrons-plate .patrons-tier-head .tier-rule {
    display: none !important;
  }
  html body .patrons-plate .patrons-tier-head .tier-label {
    font-family: 'Newsreader', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 30px !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: rgba(40, 28, 12, 0.78) !important;
    margin: 0 !important;
  }
  html body .patrons-plate .patrons-tier-head .tier-meta {
    font-family: 'JetBrains Mono', monospace !important;
    font-style: normal !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(40, 28, 12, 0.45) !important;
  }

  /* === Platinum tier on index — keep the hero card === */
  html body .patrons-tier.platinum .patrons-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html body .patrons-tier.platinum .patron-cell {
    aspect-ratio: auto !important;
    min-height: 200px !important;
    padding: 30px 24px !important;
    background: linear-gradient(180deg, #FBF6E4 0%, #F8EFD2 60%, #FBF6E4 100%) !important;
    border: 1px solid rgba(182, 138, 62, 0.55) !important;
    box-shadow:
      0 1px 0 rgba(255, 247, 222, 0.8) inset,
      0 12px 32px rgba(40, 28, 12, 0.08);
    position: relative;
    overflow: hidden;
  }
  html body .patrons-tier.platinum .patron-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.55) 12%,
      rgba(229,199,122,0.95) 50%,
      rgba(182,138,62,0.55) 88%,
      transparent 100%);
  }
  html body .patrons-tier.platinum .patron-cell img {
    max-height: 110px !important;
    max-width: 80% !important;
  }

  /* === Sponsors tier (the gold-ish row) — half-card === */
  html body .patrons-tier.sponsors .patrons-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .patrons-tier.sponsors .patron-cell {
    aspect-ratio: auto !important;
    min-height: 130px !important;
    padding: 22px 20px !important;
    background: linear-gradient(180deg, #FDF8EA 0%, #FAF1D6 100%) !important;
    border: 1px solid rgba(182, 138, 62, 0.28) !important;
    position: relative;
    overflow: hidden;
  }
  html body .patrons-tier.sponsors .patron-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.45) 18%,
      rgba(229,199,122,0.80) 50%,
      rgba(182,138,62,0.45) 82%,
      transparent 100%);
  }
  html body .patrons-tier.sponsors .patron-cell img {
    max-height: 70px !important;
    max-width: 78% !important;
  }

  /* === Partners-co tier (in-residence) — foil-ruled list === */
  html body .patrons-tier.partners-co .patrons-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-top: 1px solid rgba(182, 138, 62, 0.22);
  }
  html body .patrons-tier.partners-co .patron-cell {
    aspect-ratio: auto !important;
    min-height: 60px !important;
    padding: 14px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(182, 138, 62, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  html body .patrons-tier.partners-co .patron-cell img {
    max-height: 36px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* === University Partners — credits roll, slate accent === */
  html body .patrons-tier.partners .patrons-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-top: 1px solid rgba(40, 28, 12, 0.18);
  }
  html body .patrons-tier.partners .patron-cell {
    aspect-ratio: auto !important;
    min-height: 56px !important;
    padding: 12px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(40, 28, 12, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  html body .patrons-tier.partners .patron-cell img {
    max-height: 32px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: saturate(0.85) opacity(0.92);
  }


  /* ============================================================
     SPONSORS.HTML · TIER INCLUSIONS (.tl-card)
     
     mobile.css already implements an accordion for .tl-card:
       - .tl-card max-height: 80px (collapsed) → 2200px (.is-open)
       - ::after '+' / '−' indicator
       - cursor: pointer, role-as-button
     We piggyback on that vocabulary. .is-open is toggled by
     mobile-tier-accordion.js.
     
     This file:
       (1) raises the collapsed max-height so a richer summary
           (tier name + status pill + italic pull-quote) fits
       (2) hides the desktop .tl-frame editorial aside
       (3) un-nests .tl-grid so .tl-card sits as a flex child of
           .tier-ledger (mobile.css's accordion assumes that)
       (4) cancels desktop chrome that doesn't translate
           (rotated SOLD wax-seal, gilt halo on Gold, transforms)
       (5) styles the inclusion list when revealed
     ============================================================ */

  /* (3) Un-nest: .tier-ledger is flex desktop. Block on mobile so
     .tl-grid (a flex item) doesn't shrink-to-content. Then make
     .tl-grid behave as a transparent wrapper so .tl-card is the
     real layout child. */
  html body .tier-ledger {
    display: block !important;
    padding: 0 !important;
  }
  html body .tier-ledger .tl-frame {
    display: none !important;
  }
  html body .tl-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    perspective: none !important;
    flex: 1 1 auto !important;
  }

  /* (1) Raise collapsed max-height. mobile.css sets it to 80px
     which is too tight for our richer head. Tier name (44px)
     + status pill (22px) + italic pull-quote (~46px) + 28px top
     padding = ~140px. Add a touch for breathing → 160. */
  html body .tl-card {
    min-height: 0 !important;
    max-height: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(40, 28, 12, 0.18) !important;
    background: linear-gradient(180deg, rgba(255, 247, 222, 0.6) 0%, rgba(255, 247, 222, 0.0) 100%) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transition: max-height 360ms ease !important;
  }
  /* Cancel desktop transforms on every tier */
  html body .tl-card.platinum,
  html body .tl-card.silver,
  html body .tl-card.bronze,
  html body .tl-card.gold {
    transform: none !important;
  }
  /* Gold gets a touch warmer paper to keep its hierarchy without scale */
  html body .tl-card.gold {
    background: linear-gradient(180deg, rgba(255, 244, 210, 0.9) 0%, rgba(255, 244, 210, 0.2) 100%) !important;
  }
  /* Brass top edge across every card — thinner on mobile */
  html body .tl-card::before {
    height: 2px !important;
  }
  /* Cancel Gold's gilt halo (::after on gold is decorative; the
     ::after we WANT is the accordion +/− from mobile.css.
     mobile.css's .tl-card::after wins because it comes later,
     but the desktop .tl-card.gold::after rule may still apply.
     Force it off for both tier-specific ::afters that aren't
     the accordion indicator.) */
  html body .tl-card.gold::after {
    /* mobile.css overrides this with the +/− indicator already,
       but the desktop gold gilt-halo ::after is at the .tl-card.gold
       selector with higher specificity than mobile.css's plain
       .tl-card::after. Force it back to the +/− glyph. */
    content: '+' !important;
    width: 28px !important;
    height: 28px !important;
    inset: auto auto auto auto !important;
    top: 22px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    background: transparent !important;
    border: 1px solid rgba(40, 28, 12, 0.22) !important;
    border-radius: 50% !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  html body .tl-card.gold.is-open::after {
    content: '−' !important;
    background: rgba(26, 18, 8, 0.92) !important;
    color: var(--paper, #FBF5E5) !important;
    border-color: rgba(26, 18, 8, 0.92) !important;
  }

  /* (4) SOLD wax-seal → inline pill (desktop is a rotated round seal) */
  html body .tl-card .tl-cap.cap-sold {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 5px 12px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.22em !important;
    border-radius: 999px !important;
    background: rgba(26, 18, 8, 0.88) !important;
    color: var(--paper, #FBF5E5) !important;
    box-shadow: none !important;
    display: inline-block !important;
    margin: 0 0 12px 0 !important;
    place-items: initial !important;
  }
  html body .tl-card .tl-cap.cap-open {
    display: inline-block !important;
    padding: 5px 12px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 12px 0 !important;
    border-radius: 999px !important;
  }
  /* Inner padding via children since mobile.css sets card padding 0 */
  html body .tl-card .tl-level,
  html body .tl-card .tl-cap,
  html body .tl-card .tl-pull,
  html body .tl-card ul,
  html body .tl-card .tl-stats,
  html body .tl-card .tl-btn,
  html body .tl-card .tl-plate-sig {
    padding-left: 22px !important;
    padding-right: 56px !important;  /* room for +/− indicator */
  }
  /* First child gets top padding */
  html body .tl-card > :first-child {
    padding-top: 26px !important;
  }
  html body .tl-card .tl-level {
    font-size: 42px !important;
    line-height: 0.95 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.025em !important;
    filter: none !important;
    padding-top: 22px !important;
  }
  html body .tl-card.gold .tl-level {
    font-size: 46px !important;
  }
  html body .tl-card .tl-pull {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 15.5px !important;
    line-height: 1.4 !important;
    color: rgba(40, 28, 12, 0.74) !important;
    margin: 4px 0 18px !important;
  }
  html body .tl-card .tl-pull em {
    color: rgba(40, 28, 12, 0.95) !important;
  }

  /* (5) Inclusion list — visible when .is-open */
  html body .tl-card ul {
    margin: 6px 0 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(40, 28, 12, 0.16) !important;
    list-style: none !important;
  }
  html body .tl-card li {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 0 !important;
    gap: 14px !important;
    border-bottom: 1px dotted rgba(40, 28, 12, 0.12) !important;
  }
  html body .tl-card li.tl-group {
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    padding-top: 18px !important;
    padding-bottom: 8px !important;
    margin-top: 8px !important;
    color: var(--filament-d, #8a6620) !important;
    border-bottom: 0 !important;
  }
  html body .tl-card li.tl-group:first-child {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }
  html body .tl-card li .what {
    font-size: 14px !important;
    flex: 1 1 auto !important;
  }
  html body .tl-card li .qty {
    font-size: 13px !important;
    flex: 0 0 auto !important;
    min-width: 36px !important;
  }
  html body .tl-card .tl-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
    margin: 16px 0 0 !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(40, 28, 12, 0.12) !important;
  }
  html body .tl-card .tl-stats .stat {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .tl-card .tl-btn {
    display: inline-flex !important;
    margin: 16px 0 0 !important;
    margin-right: 22px !important;
    width: calc(100% - 22px - 56px) !important;
    justify-content: center !important;
  }
  html body .tl-card .tl-plate-sig {
    margin: 14px 0 0 !important;
    padding-bottom: 22px !important;
    text-align: center !important;
    opacity: 0.55 !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
  }

  /* ============================================================
     SPONSORS.HTML · NAMED PATRONAGES (.sp-named-card)
     Cards → typeset menu rows. Editorial group headers injected
     via ::before on specific :nth-child positions.
     
     HTML order (preserved):
       1 Coffee Break  2 Lunch  3 Lanyard  4 Backpack
       5 Wi-Fi  6 Dine-out  7 Welcome Reception
       8 Podcast  9 Tutorials Day
     ============================================================ */

  html body .sp-named-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 24px -16px 0 !important;
    border-top: 1px solid rgba(40, 28, 12, 0.18) !important;
  }
  /* The .sp-named .container has 0 48px desktop padding — reset
     so the grid can reach the section edges. */
  html body .sp-named .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  html body .sp-named-card {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(40, 28, 12, 0.12) !important;
    border-radius: 0 !important;
    padding: 16px 22px !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: none !important;
    display: block !important;
    text-decoration: none !important;
    transition: background 180ms ease;
  }
  html body .sp-named-card:active,
  html body .sp-named-card:hover {
    background: rgba(229, 199, 122, 0.06) !important;
    border-color: rgba(40, 28, 12, 0.18) !important;
    box-shadow: none !important;
  }
  /* Wipe ::before on cards that aren't group-header rows.
     Specific group rows override below. */
  html body .sp-named-card::before {
    content: none !important;
    display: none !important;
  }
  /* Replace the 'Patron's mark' footer with a right-side arrow */
  html body .sp-named-card::after {
    content: '›' !important;
    display: block !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: normal !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: rgba(182, 138, 62, 0.65) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  html body .sp-named-card .tag {
    display: block !important;
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    color: rgba(182, 138, 62, 0.85) !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    border: 0 !important;
  }
  html body .sp-named-card .name {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: rgba(40, 28, 12, 0.92) !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.005em !important;
    padding-right: 30px !important;
  }
  html body .sp-named-card .name em {
    font-style: italic !important;
    color: var(--filament, #B68A3E) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  html body .sp-named-card .desc {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: rgba(40, 28, 12, 0.62) !important;
    margin: 2px 0 0 !important;
    padding-right: 30px !important;
  }

  /* Group headers — pseudo-element on first card of each group */
  html body .sp-named-card:nth-child(1)::before,
  html body .sp-named-card:nth-child(3)::before,
  html body .sp-named-card:nth-child(5)::before,
  html body .sp-named-card:nth-child(6)::before,
  html body .sp-named-card:nth-child(8)::before {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: calc(100% + 44px) !important;
    margin: 0 -22px 12px !important;
    padding: 18px 22px 8px !important;
    color: rgba(40, 28, 12, 0.55) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    border-bottom: 1px dashed rgba(40, 28, 12, 0.18) !important;
    background: none !important;
    opacity: 1 !important;
    line-height: 1.4 !important;
  }
  html body .sp-named-card:nth-child(1)::before {
    content: '— Daily hospitality —' !important;
    padding-top: 4px !important;
  }
  html body .sp-named-card:nth-child(3)::before {
    content: '— Worn & carried —' !important;
  }
  html body .sp-named-card:nth-child(5)::before {
    content: '— Infrastructure —' !important;
  }
  html body .sp-named-card:nth-child(6)::before {
    content: '— The evenings —' !important;
  }
  html body .sp-named-card:nth-child(8)::before {
    content: '— Recorded & tracks —' !important;
  }

}