/* Components introduced by the Lab, Blog, Events, Partners and Admin pages. */
:root { --ok: #4ade80; --muted: var(--ink-2); }
body.light { --ok: #15803d; }

/* Syne, Manrope and DM Mono all lack U+20A6, so the naira sign was falling through to the system
   UI font. Space Grotesk is loaded subsetted to that one glyph and sits next in each stack, so
   per-character fallback picks it up and nothing else changes. */
:root {
  --mono: "DM Mono", "Space Grotesk", monospace;
  --body: "Manrope", "Space Grotesk", sans-serif;
  --display: "Syne", "Space Grotesk", sans-serif;
}

.muted { color: var(--ink-2); }
.button { white-space: nowrap; }
.index-section { padding: clamp(56px, 8vw, 110px) clamp(18px, 8vw, 132px); }
.index-section > h2 { margin-top: 8px; }

/* Mobile navigation ------------------------------------------------ */
.nav-toggle { align-items: center; background: none; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; display: none; flex-direction: column; gap: 4px; height: 34px; justify-content: center; width: 38px; }
.nav-toggle span { background: var(--ink); border-radius: 2px; display: block; height: 1.5px; transition: transform .25s, opacity .15s; width: 16px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
.nav-sheet { display: none; }
body.nav-open { overflow: hidden; }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  /* Language, theme and the CTA all move into the sheet so the bar stays two items wide. */
  .site-header .theme-toggle, .site-header .button-small { display: none; }
  .nav-sheet { background: var(--bg); border-top: 1px solid var(--line); bottom: 0; display: block; left: 0; opacity: 0; overflow-y: auto; padding: 22px 24px 40px; pointer-events: none; position: fixed; right: 0; top: 76px; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; z-index: 9; }
  .nav-sheet.open { opacity: 1; pointer-events: auto; transform: none; }
  /* The global `nav` rule is a flex row; the sheet needs a column. */
  .nav-sheet nav { display: block; }
  .sheet-link { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-family: var(--display); font-size: 29px; font-weight: 600; justify-content: space-between; letter-spacing: -.04em; padding: 15px 0; }
  .sheet-link:hover, .sheet-link:focus-visible { color: var(--cyan); }
  .sheet-index { color: var(--ink-2); font: 10px var(--mono); }
  .sheet-foot { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .sheet-foot .text-button { border: 1px solid var(--line); border-radius: 999px; display: inline-flex; gap: 5px; padding: 10px 15px; }
  .sheet-foot .theme-toggle { display: grid; place-items: center; }
  .sheet-foot .button { flex: 1; justify-content: space-between; min-width: 150px; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .nav-sheet { transition: none; }
}

/* Verified figures ------------------------------------------------ */
.stats-strip { padding: 0 clamp(18px, 8vw, 132px) 46px; border-bottom: 1px solid var(--line); }
/* 1px grid gaps over a line-coloured ground draw the dividers, so they survive any wrap. */
.stats-bar { background: var(--line); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: hidden; }
.stats-bar article { align-content: start; background: var(--bg); display: grid; gap: 4px; padding: 22px 24px; }
.stats-bar b { font: 40px var(--display); line-height: 1; color: var(--cyan); letter-spacing: -.04em; }
.stats-bar span { font-size: 13px; }
.stats-bar small { font: 10px var(--mono); color: var(--ink-2); }
.stats-bar .pending b, .stats-bar article.pending b { color: var(--amber); }

/* Five metrics tile evenly only at five across or two-plus-a-spanning-last: anything between
   leaves a partly filled row, and an empty cell in this grid renders as a block of line colour.
   The section padding is 8vw a side, so five 150px columns stop fitting at about 900px. */
@media (max-width: 1200px) {
  .stats-bar article { padding: 18px 18px 20px; }
  .stats-bar b { font-size: 32px; }
}
@media (max-width: 920px) {
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stats-bar article { padding: 16px 17px 18px; }
  .stats-bar article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats-bar b { font-size: 27px; }
  .stats-bar span { font-size: 12px; }
  .stats-bar small { font-size: 9px; line-height: 1.5; }
}

/* Chips and filters ----------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); cursor: pointer; font: 11px var(--mono); letter-spacing: .04em; padding: 8px 14px; transition: border-color .2s, color .2s; }
.chip:hover { border-color: var(--line-2, var(--cyan)); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--surface-2); border-color: var(--cyan); color: var(--ink); }
.chip b { color: var(--cyan); font-weight: 500; margin-left: 4px; }
.chip.static { cursor: default; pointer-events: none; }
.chip-row, .tag-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* Image slots and empty states ------------------------------------ */
.photo-slot { align-content: center; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; display: grid; gap: 6px; justify-items: center; padding: 18px; text-align: center; width: 100%; }
.photo-slot span { color: var(--amber); font-size: 26px; }
.photo-slot p { color: var(--ink-2); font-size: 12px; margin: 0; max-width: 26ch; }
.photo-slot small { font: 9px var(--mono); color: var(--ink-2); letter-spacing: .08em; opacity: .7; }
.empty-panel { align-items: center; border: 1px dashed var(--line); border-radius: 15px; display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 40px; padding: 32px; }
.empty-panel > span:first-child { color: var(--amber); font-size: 44px; }
.empty-panel h3 { font-size: 26px; margin-bottom: 6px; }
.empty-panel p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; max-width: 52ch; }
.empty-panel .tag { margin-bottom: 6px; }
.archive-end { align-items: center; border: 1px dashed var(--line); border-radius: 15px; display: flex; flex-wrap: wrap; gap: 28px; margin: 44px 0; padding: 32px; }
.archive-end > span:first-child { color: var(--amber); font-size: 40px; }
.archive-end h3 { font-size: 24px; margin-bottom: 6px; }
.archive-end p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; }
.archive-end .arrow-link { margin-left: auto; }

/* Status ----------------------------------------------------------- */
.status-line { align-items: center; color: var(--ink-2); display: inline-flex; font: 10px var(--mono); gap: 7px; letter-spacing: .06em; }
.status-line.inline { margin-left: 12px; }
.dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; background: var(--ink-2); }
.tone-ok { color: var(--ok); } .dot.tone-ok { background: var(--ok); }
.tone-cyan { color: var(--cyan); } .dot.tone-cyan { background: var(--cyan); }
.tone-warm { color: var(--amber); } .dot.tone-warm { background: var(--amber); }
.dot.tone-muted { background: var(--ink-2); }

/* Cards ------------------------------------------------------------ */
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.project-card, .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s, transform .2s; }
.project-card:hover, .post-card:hover, .featured-post:hover { border-color: var(--cyan); transform: translateY(-3px); }
.project-card .photo-slot, .post-card .photo-slot, .featured-post .photo-slot { border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; }
.project-card-body, .post-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px; }
.project-card h3, .post-card h3 { font-size: 24px; margin: 0; }
.project-card p, .post-card p { color: var(--ink-2); font-size: 13px; margin: 0; }
.project-card .tag, .post-card .tag { margin: 0; }
.project-metric { border-top: 1px solid var(--line); padding-top: 12px; }
.project-metric b { display: block; font: 34px var(--display); letter-spacing: -.04em; }
.project-metric small { color: var(--ink-2); font: 10px var(--mono); }
.project-card > div > a { color: var(--cyan); font-size: 13px; font-weight: 700; margin-top: auto; }
.post-card small { color: var(--ink-2); font: 10px var(--mono); margin-top: auto; }
.featured-post { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin-bottom: 18px; overflow: hidden; transition: border-color .2s, transform .2s; }
.featured-post > div:first-child { display: flex; }
.featured-post > div:first-child .photo-slot { aspect-ratio: auto !important; height: 100%; min-height: 240px; }
.featured-copy { display: flex; flex-direction: column; gap: 12px; justify-content: center; padding: 40px; }
.featured-copy h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0; }
.featured-copy p:not(.tag):not(.byline) { color: var(--ink-2); margin: 0; }
.byline { align-items: center; color: var(--ink-2); display: flex; font: 11px var(--mono); gap: 10px; margin: 0; }
.avatar { align-items: center; background: linear-gradient(135deg, var(--purple), var(--cyan)); border-radius: 50%; color: #081018; display: inline-flex; font: 700 10px var(--body); height: 28px; justify-content: center; width: 28px; }

/* Detail heroes ---------------------------------------------------- */
.detail-hero { padding-top: clamp(50px, 7vw, 90px); }
.back-link { color: var(--cyan); display: inline-block; font: 11px var(--mono); margin-bottom: 26px; position: relative; z-index: 1; }
.detail-hero .page-index { font: 10px var(--mono); }
.detail-hero .hero-actions { margin-top: 34px; position: relative; z-index: 1; }
.article-hero h1 { font-size: clamp(38px, 5vw, 74px); }
.article-hero .byline { margin-top: 26px; }

/* Case study ------------------------------------------------------- */
.case-body, .article-body { display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: 1.55fr .85fr; padding: clamp(56px, 8vw, 110px) clamp(18px, 8vw, 132px); }
.case-step { border-top: 1px solid var(--line); display: grid; gap: 26px; grid-template-columns: 60px 1fr; padding-top: 34px; margin-bottom: 54px; }
.case-step h2 { font-size: clamp(30px, 3.4vw, 46px); }
.case-step p { color: var(--ink-2); max-width: 62ch; }
.step-number { font: 12px var(--mono); color: var(--cyan); }
.pull-quote { border-left: 2px solid var(--purple); font-family: var(--display); font-size: 23px; letter-spacing: -.03em; line-height: 1.25; margin: 30px 0; padding-left: 22px; }
.pull-quote cite { color: var(--ink-2); display: block; font: 10px var(--mono); font-style: normal; margin-top: 12px; }
.approach { list-style: none; margin: 0; padding: 0; }
.approach li { border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 48px 1fr; padding: 20px 0; }
.approach b { color: var(--cyan); font: 11px var(--mono); }
.approach h3 { font-size: 21px; margin-bottom: 6px; }
.approach p { font-size: 13px; margin: 0; }
.metric-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 30px 0; overflow: hidden; }
.metric-grid article { background: var(--bg); display: grid; gap: 4px; padding: 20px; }
.metric-grid b { font: 32px var(--display); letter-spacing: -.04em; line-height: 1; }
.metric-grid span { font-size: 12px; }
.metric-grid small { color: var(--ink-2); font: 9px var(--mono); }
.metric-grid .pending b { color: var(--amber); }
.cannot-claim { border: 1px dashed var(--amber); border-radius: 12px; padding: 24px; }
.cannot-claim .tag { color: var(--amber); margin-bottom: 10px; }
.cannot-claim p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; }
.case-aside, .article-aside { align-content: start; display: grid; gap: 16px; position: sticky; top: 100px; }
.fact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.fact-card.accent { background: linear-gradient(140deg, color-mix(in srgb, var(--purple) 16%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)); border-color: var(--cyan); }
.fact-card h3 { font-size: 21px; margin-bottom: 8px; }
.fact-card p:not(.tag) { color: var(--ink-2); font-size: 13px; }
.fact-card dl, .fact-card .toc { margin: 0; }
.fact-card dl div { border-bottom: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding: 9px 0; }
.fact-card dl div:last-child { border-bottom: 0; }
.fact-card dt { color: var(--ink-2); font: 10px var(--mono); }
.fact-card dd { font-size: 12px; margin: 0; text-align: right; }
.fact-card .button, .fact-card .arrow-link { margin-top: 8px; }
.fact-card label { display: block; font: 11px var(--mono); color: var(--ink-2); margin-bottom: 12px; }
.fact-card input { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 7px; padding: 11px; width: 100%; }

/* Article ---------------------------------------------------------- */
.article-main h2 { font-size: clamp(27px, 3vw, 38px); margin: 46px 0 16px; }
.article-main p { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; max-width: 68ch; }
.article-list { color: var(--ink-2); display: grid; gap: 10px; font-size: 15px; line-height: 1.7; max-width: 66ch; padding-left: 18px; }
.toc { color: var(--ink-2); display: grid; font-size: 12px; gap: 9px; padding-left: 16px; }
.toc a:hover { color: var(--cyan); }
.share-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 8px; margin-top: 48px; padding-top: 22px; }
.share-row span:first-child { color: var(--ink-2); font: 10px var(--mono); margin-right: 8px; }
.tag-row { margin-top: 16px; }

/* Newsletter and inline forms -------------------------------------- */
.newsletter { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 34px; grid-template-columns: 1fr 1fr; padding: 36px; }
.newsletter h3 { font-size: 28px; margin: 0 0 8px; }
.newsletter p:not(.eyebrow) { color: var(--ink-2); font-size: 13px; margin: 0; }
.newsletter-field { align-content: center; display: grid; gap: 12px; }
.newsletter-field label, .inline-form label { color: var(--ink-2); font: 11px var(--mono); }
.newsletter-field input, .inline-form input { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 7px; padding: 13px; width: 100%; }
.newsletter-field .button, .inline-form .button { justify-content: space-between; }
.inline-form { display: grid; gap: 12px; margin-left: auto; min-width: 270px; }
.form-success .tag { color: var(--ok); }
.form-success h3 { font-size: 28px; margin: 8px 0 12px; }
.form-success p { color: var(--ink-2); font-size: 13px; }

/* Events ------------------------------------------------------------ */
.event-list { display: grid; gap: 16px; }
.event-row { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 0; grid-template-columns: .8fr 1.2fr; overflow: hidden; transition: border-color .2s; }
.event-row:hover { border-color: var(--cyan); }
.event-row-visual .photo-slot { border: 0; border-radius: 0; height: 100%; }
.event-row-copy { display: grid; gap: 14px; justify-items: start; padding: 32px; }
.event-row-copy h3 { font-size: 28px; margin: 0; }
.event-row-copy h3 span { color: var(--ink-2); }
.event-row-copy p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; max-width: 60ch; }
.event-row-copy .tag { margin: 0; }
.event-meta { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; }
.event-meta dt { color: var(--ink-2); font: 10px var(--mono); }
.event-meta dd { font-size: 13px; margin: 4px 0 0; }
.event-meta.wide { margin-top: 30px; position: relative; z-index: 1; }
.countdown { display: flex; gap: 12px; margin-top: 28px; position: relative; z-index: 1; }
.countdown div { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; justify-items: center; min-width: 74px; padding: 14px; }
.countdown b { color: var(--cyan); font: 30px var(--display); letter-spacing: -.04em; }
.countdown span { color: var(--ink-2); font: 9px var(--mono); }
.event-detail { border-top: 1px solid var(--line); }
.agenda { border-top: 1px solid var(--line); }
.agenda article { border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 130px 1fr; padding: 20px 0; }
.agenda b { color: var(--cyan); font: 11px var(--mono); }
.agenda h3 { font-size: 21px; margin-bottom: 6px; }
.agenda p { color: var(--ink-2); font-size: 13px; margin: 0; }
.speaker-grid, .gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.speaker-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; padding: 18px; }
.speaker-card h3 { font-size: 20px; margin: 0; }
.speaker-card p { font-size: 12px; margin: 0; }
.speaker-card .tag { margin: 6px 0 0; }
.gallery { margin: 26px 0 16px; }
.reel { max-width: 780px; }

/* Partners ----------------------------------------------------------- */
.tier-head { align-items: end; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 34px; }
.tier-head h2 { margin-bottom: 12px; }
.tier-head p { font-size: 13px; margin: 0; max-width: 46ch; }
.tier-head .filter-bar { margin: 0; }
.tier-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tier-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; padding: 26px; position: relative; }
.tier-card.featured { background: linear-gradient(150deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)); border-color: var(--cyan); }
.tier-flag { background: var(--cyan); border-radius: 999px; color: #061013; font: 9px var(--mono); letter-spacing: .07em; padding: 5px 10px; position: absolute; right: 18px; top: -10px; }
.tier-card h3 { font-size: 26px; margin: 0; }
.tier-card .tag { margin: 0; }
.tier-price b { font: 30px var(--display); letter-spacing: -.04em; }
/* Syne's lining figures are short (ink 0.51em) while the donor's naira inks to 0.70em, so in display
   type the symbol towers over the numerals. Manrope's figures ink to 0.74em and need no correction.
   The `span.naira` form keeps these ahead of component rules that style spans by descent. */
h1 span.naira, h2 span.naira, h3 span.naira, .tier-price b span.naira, .stats-bar b span.naira,
.metric-grid b span.naira, .project-metric b span.naira, .case-copy dt span.naira, .spend-list b span.naira { font-size: .73em; }
.tier-price small { color: var(--ink-2); font: 10px var(--mono); margin-left: 6px; }
.tier-card p.muted { font-size: 12.5px; margin: 0; }
.perks { display: grid; gap: 8px; font-size: 12px; list-style: none; margin: 4px 0 0; padding: 0; }
.perks li { color: var(--ink-2); padding-left: 18px; position: relative; }
.perks li:before { color: var(--cyan); content: "✓"; left: 0; position: absolute; }
.tier-card .button { justify-content: space-between; margin-top: auto; }
.partner-live h2 { font-size: clamp(32px, 4vw, 52px); margin: 6px 0 26px; }
.partner-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.partner-grid article { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; justify-items: center; min-height: 118px; padding: 22px; text-align: center; }
.partner-grid b { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; }
.partner-grid span { color: var(--cyan); font: 10px var(--mono); letter-spacing: .07em; }
.ghost-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 18px; }
.ghost-slot { align-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-2); display: flex; font: 11px var(--mono); justify-content: center; min-height: 92px; }
.spend-list { border-top: 1px solid var(--line); }
.spend-list article { border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 70px 1fr 160px; align-items: center; padding: 22px 0; }
.spend-list b { color: var(--amber); font: 24px var(--display); }
.spend-list h3 { font-size: 20px; margin: 0 0 4px; }
.spend-list p { color: var(--ink-2); font-size: 13px; margin: 0; }
.spend-bar { background: var(--surface-2); border-radius: 999px; height: 6px; overflow: hidden; }
.spend-bar span { background: linear-gradient(90deg, var(--purple), var(--cyan)); display: block; height: 100%; }

/* Forms -------------------------------------------------------------- */
.field-pair { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.contact textarea, .detail-contact textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 7px; min-height: 96px; padding: 13px; resize: vertical; width: 100%; }
.contact textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.check-grid { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 18px; }
.check-grid legend { color: var(--ink-2); font: 11px var(--mono); padding: 0 6px; }
.check { align-items: center; color: var(--ink-2); display: flex; font: 11px var(--mono); gap: 9px; }
.check input { accent-color: var(--cyan); height: 15px; margin: 0; width: 15px; }
.consent { align-items: flex-start; line-height: 1.6; }
.reply-times { display: grid; gap: 0; margin-top: 30px; }
.reply-times div { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 11px 0; }
.reply-times dt { color: var(--ink-2); font: 11px var(--mono); }
.reply-times dd { font-size: 12px; margin: 0; }

/* Home blog strip ----------------------------------------------------- */
.strip-list { border-top: 1px solid var(--line); }
.strip-list a { border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 210px 1fr 110px; align-items: center; padding: 22px 0; }
.strip-list a:hover h3 { color: var(--cyan); }
.strip-list h3 { font-size: 24px; margin: 0; }
.strip-list .tag { margin: 0; }
/* Direct child only: a descendant selector here also catches spans inside the heading. */
.strip-list a > span { color: var(--ink-2); font: 10px var(--mono); text-align: right; }

/* Admin ---------------------------------------------------------------- */
.admin-shell { display: grid; gap: clamp(24px, 4vw, 54px); grid-template-columns: 210px 1fr; }
.admin-nav { align-content: start; display: grid; gap: 4px; position: sticky; top: 100px; }
.admin-nav button { background: none; border: 0; border-radius: 8px; color: var(--ink-2); cursor: pointer; display: flex; font: 12px var(--mono); justify-content: space-between; padding: 11px 13px; text-align: left; }
.admin-nav button:hover { background: var(--surface); color: var(--ink); }
.admin-nav button.on { background: var(--surface-2); color: var(--ink); }
.admin-nav button b { color: var(--cyan); font-weight: 500; }
.admin-signout { border-top: 1px solid var(--line) !important; border-radius: 0 !important; margin-top: 14px; padding-top: 16px !important; }
.panel-head { align-items: end; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 28px; }
.panel-head h2 { font-size: clamp(32px, 4vw, 50px); margin: 0 0 10px; }
.panel-head p { font-size: 13px; margin: 0; max-width: 58ch; }
.admin-stats b.warn { color: var(--amber); }
.attention-list { border-top: 1px solid var(--line); }
.attention-list article { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding: 20px 0; }
.attention-list h3 { font-size: 20px; margin: 0 0 5px; }
.attention-list p { color: var(--ink-2); font-size: 12.5px; margin: 0; }
.attention-list button { background: none; border: 0; cursor: pointer; }
.stat-rows { display: grid; gap: 12px; }
.stat-row { align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 18px; grid-template-columns: 1.3fr .7fr 1.1fr auto; padding: 22px; }
.stat-row.pending { border-left: 3px solid var(--amber); }
.stat-label h3 { font-size: 20px; margin: 0 0 4px; }
.stat-label p { color: var(--ink-2); font-size: 12px; margin: 0; }
.stat-label small { color: var(--ink-2); font: 9px var(--mono); opacity: .75; }
.stat-row label { color: var(--ink-2); font: 10px var(--mono); }
.stat-row input { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 6px; padding: 10px; width: 100%; }
.stat-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.stat-actions .button { padding: 10px 14px; }
.stat-row .form-note { grid-column: 1 / -1; margin: 0; }
.admin-table { border-top: 1px solid var(--line); }
.admin-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 2.2fr 1fr 1.2fr 1fr .6fr; padding: 16px 0; }
.admin-row.head { color: var(--ink-2); font: 10px var(--mono); letter-spacing: .07em; }
.admin-row b { display: block; font: 15px var(--body); font-weight: 700; }
.admin-row small { color: var(--ink-2); font: 10px var(--mono); }
.admin-row span { font-size: 12px; }
.admin-row button { background: none; border: 0; cursor: pointer; font-size: 12px; }
.content-editor { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; padding: 30px; }
.editor-head { grid-column: 1 / -1; }
.editor-head h3 { font-size: 30px; margin: 8px 0 0; }
.content-editor label { color: var(--ink-2); font: 11px var(--mono); }
.content-editor label.wide, .content-editor .editor-actions, .content-editor .form-note { grid-column: 1 / -1; }
.content-editor input, .content-editor select, .content-editor textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 7px; padding: 12px; width: 100%; }
.content-editor textarea { min-height: 90px; resize: vertical; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button.danger { border-color: var(--amber); color: var(--amber); margin-left: auto; }
.button.danger:hover { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.admin-login { border: 1px solid var(--line); border-radius: 18px; margin: 0 auto; max-width: 560px; padding: 54px; }
.admin-login h1 { font-size: clamp(38px, 5vw, 58px); }
.admin-login p { color: var(--ink-2); font-size: 13px; }
.admin-login code { background: var(--surface-2); border-radius: 3px; font: 11px var(--mono); padding: 2px 5px; }
.admin-login form { display: grid; gap: 16px; margin-top: 28px; }
.admin-login label { color: var(--ink-2); font: 11px var(--mono); }
.admin-login input { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); display: block; margin-top: 7px; padding: 13px; width: 100%; }

@media (max-width: 1000px) {
  .case-body, .article-body, .newsletter, .featured-post, .event-row, .admin-shell { grid-template-columns: 1fr; }
  .case-aside, .article-aside, .admin-nav { position: static; }
  .admin-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .admin-signout { border-top: 0 !important; margin: 0; padding-top: 11px !important; }
}
@media (max-width: 800px) {
  .index-section, .case-body, .article-body { padding-left: 24px; padding-right: 24px; }

  /* styles.css declares these mobile overrides ABOVE the base rules they target, so the base rules
     (later in the file, same specificity) have always won and these sections stayed multi-column
     on phones. Re-stated here because pages.css is the last stylesheet loaded. */
  .detail-block { gap: 30px; grid-template-columns: 1fr; }
  .cadence article, .project-list article, .track-list article, .tier-list article { gap: 4px 16px; grid-template-columns: 54px 1fr; }
  .cadence p, .project-list p, .track-list p, .tier-list p,
  .cadence small, .track-list small, .project-list a, .project-list b { grid-column: 2; }
  .page-hero:after { height: 240px; right: -120px; width: 240px; }
  .detail-contact { padding: 70px 24px; }

  /* Hero: the desktop clamp floors at 48px, which is a four-line headline on a 375px screen. */
  .hero { min-height: calc(100svh - 76px); padding: 54px 24px 58px; }
  .hero h1 { font-size: clamp(36px, 11vw, 48px); margin-bottom: 20px; }
  .hero-lede { font-size: 16px; }
  .hero-actions { display: grid; gap: 10px; margin-top: 26px; }
  .hero-actions .button { justify-content: space-between; }
  .language-note { margin-top: 34px; }
  .signal-field { margin-top: 26px; min-height: 272px; }
  .ring-one { height: 104px; width: 104px; }
  .ring-two { height: 190px; width: 190px; }
  .ring-three { height: 262px; width: 262px; }
  .field-caption { right: 0; }

  .stats-strip { padding: 0 24px 34px; }
  .case-step, .agenda article, .approach li, .spend-list article, .strip-list a { grid-template-columns: 1fr; gap: 12px; }
  .field-pair, .check-grid, .stat-row { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr 1fr; }
  .admin-row.head { display: none; }
  /* Six sections scroll off-screen as a single row, with nothing to show there is more. */
  .admin-nav { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
  .admin-nav button { border: 1px solid var(--line); }
  .admin-signout { border-top: 1px solid var(--line) !important; grid-column: 1 / -1; margin-top: 6px; padding-top: 13px !important; }
  .admin-login { padding: 30px 24px; }
  .content-editor { grid-template-columns: 1fr; padding: 22px; }
  .button.danger { margin-left: 0; }
  /* These panels are flex rows with a nowrap button; on a phone they have to stack or they push
     the page wider than the viewport. */
  .partner-empty, .empty-panel, .archive-end { align-items: flex-start; flex-direction: column; gap: 18px; }
  .partner-empty .button, .empty-panel .button, .archive-end .arrow-link { margin-left: 0; width: 100%; }
  .partner-empty .button { justify-content: space-between; }
  .ghost-grid { grid-template-columns: 1fr 1fr; }
  /* Four speaker cards and six gallery plates at full width is a very long scroll. */
  .speaker-grid, .gallery { gap: 10px; grid-template-columns: 1fr 1fr; }
  .speaker-card { gap: 6px; padding: 12px; }
  .speaker-card h3 { font-size: 17px; }
  .speaker-card p { font-size: 11px; }
  /* A table of contents below the article it indexes is no use; the sidebar stacks after the body. */
  .toc-card { display: none; }
  /* Let the case-study photo rise above the article while its fact cards stay below. */
  .case-aside { display: contents; }
  .case-aside > .photo-slot { order: -1; }
  .case-main { order: 0; }
  .case-aside > .fact-card { order: 1; }
  .inline-form { margin-left: 0; min-width: 0; width: 100%; }
  .strip-list span { text-align: left; }
}

/* A partners block with signatures behind it reads as a statement, not an empty state. */
.partner-empty.signed { border-style: solid; border-color: var(--cyan); }
.partner-empty.signed > span:first-child { color: var(--cyan); }
.partner-empty.signed .empty-count { color: var(--cyan); }

/* Design system page ---------------------------------------------- */
.ds-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ds-card p { color: var(--ink-2); font-size: 12.5px; margin: 12px 0 0; }
.ds-card p b { color: var(--ink); }
.ds-demo { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; justify-content: center; min-height: 120px; padding: 20px; }
.ds-mark { height: 56px; width: 56px; border-radius: 16px; font-size: 34px; }
.ds-mono-mark .brand-mark { background: var(--ink); color: var(--bg); }
.ds-mono-mark .brand-ai { color: inherit; }
.ds-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.ds-notes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 18px; }
.ds-notes article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.ds-notes p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; }
.ds-notes small { display: block; font: 10px var(--mono); margin-top: 8px; }
.swatch-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; }
.swatch { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding-bottom: 14px; }
.swatch div { border-bottom: 1px solid var(--line); height: 66px; }
.swatch b, .swatch span, .swatch small { display: block; padding: 0 14px; }
.swatch b { font: 11px var(--mono); color: var(--cyan); padding-top: 12px; }
.swatch span { font-size: 12px; padding-top: 3px; }
.swatch small { color: var(--ink-2); font: 10px var(--mono); padding-top: 4px; }
.type-scale { display: grid; gap: 26px; margin-top: 18px; }
.type-scale > div { border-top: 1px solid var(--line); padding-top: 16px; }
.type-scale > div > span:first-child { color: var(--ink-2); display: block; font: 10px var(--mono); letter-spacing: .06em; margin-bottom: 12px; }
code { background: var(--surface-2); border-radius: 3px; font: 11px var(--mono); padding: 2px 5px; }

/* Join-flow handover ----------------------------------------------- */
.room-heading { margin: 26px 0 12px; }
.room-list { display: grid; gap: 10px; }
.room-link { background: linear-gradient(140deg, color-mix(in srgb, var(--purple) 16%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)); border: 1px solid var(--cyan); border-radius: 12px; display: grid; gap: 4px; padding: 16px 18px; transition: transform .2s; }
.room-link:hover { transform: translateY(-2px); }
.room-link b { font-size: 14px; }
.room-link span { color: var(--ink-2); font-size: 12px; }
.room-pending { border: 1px dashed var(--line); border-radius: 12px; margin: 24px 0 18px; padding: 18px; }
.room-pending p:not(.tag) { color: var(--ink-2); font-size: 12.5px; margin: 0; }
.stat-wide { grid-column: 2 / 4; }

/* Impact grid, testimonials, resource library, mobile CTA ---------- */
.impact-grid { background: var(--line); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); overflow: hidden; }
/* Same tiling rule as the stats bar: five across, or two with the last spanning. A partly
   filled row would leave an empty cell showing the line-coloured ground behind the grid. */
@media (max-width: 1020px) {
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .impact-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.impact-grid article { background: var(--bg); display: grid; gap: 6px; padding: 28px 26px; }
.impact-grid b { color: var(--cyan); font: 46px var(--display); letter-spacing: -.045em; line-height: 1; }
.impact-grid span { font-size: 14px; }
.impact-grid small { color: var(--ink-2); font: 10px var(--mono); line-height: 1.6; }
.impact-grid .pending b, .impact-grid article.pending b { color: var(--amber); }

.quote-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote-grid figure { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin: 0; padding: 30px; }
.quote-grid blockquote { font-family: var(--display); font-size: 21px; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 20px; }
.quote-grid figcaption { border-top: 1px solid var(--line); display: grid; gap: 3px; padding-top: 16px; }
.quote-grid figcaption b { font-size: 14px; }
.quote-grid figcaption span { color: var(--ink-2); font: 10px var(--mono); }

.section-head-simple { align-items: end; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 30px; }
.section-head-simple h2 { margin: 6px 0 0; }
.section-head-simple p { font-size: 13px; margin: 0; max-width: 46ch; }
.resource-list { border-top: 1px solid var(--line); }
.resource-list article { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 110px 1fr auto; padding: 20px 0; }
.resource-list b { color: var(--cyan); font: 10px var(--mono); letter-spacing: .07em; }
.resource-list article.pending b { color: var(--amber); }
.resource-list h3 { font-size: 21px; margin: 0 0 4px; }
.resource-list p { color: var(--ink-2); font-size: 13px; margin: 0; }

.mobile-cta { display: none; }
@media (max-width: 800px) {
  .impact-grid article { padding: 20px; }
  .impact-grid b { font-size: 34px; }
  .resource-list article { align-items: start; gap: 6px 16px; grid-template-columns: 1fr; }
  .section-head-simple { display: grid; gap: 16px; }
  /* A persistent way into the two things the site is actually asking for. */
  .mobile-cta { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--line); bottom: 0; display: flex; gap: 10px; left: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 8; }
  .mobile-cta .button { flex: 1; justify-content: space-between; }
  body.nav-open .mobile-cta { display: none; }
  footer { padding-bottom: 92px; }
}

/* Programs ---------------------------------------------------------- */
.program-list { display: grid; gap: 16px; }
.program-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px; }
.program-card.featured { background: linear-gradient(150deg, color-mix(in srgb, var(--purple) 15%, transparent), color-mix(in srgb, var(--cyan) 7%, transparent)); border-color: var(--cyan); }
.program-head { align-items: start; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.program-head h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 4px 0 0; }
.program-head .tag { margin: 0; }
.program-body { color: var(--ink-2); font-size: 15px; margin: 18px 0 0; max-width: 66ch; }
.program-facts { border-top: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 24px 0 0; padding-top: 20px; }
.program-facts dt { color: var(--ink-2); font: 10px var(--mono); letter-spacing: .07em; }
.program-facts dd { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; margin: 5px 0 0; }
.program-detail { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.program-detail .tag { margin: 0 0 10px; }
.program-detail ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.program-detail li { color: var(--ink-2); font-size: 13px; padding-left: 18px; position: relative; }
.program-detail li:before { color: var(--cyan); content: "→"; font-size: 11px; left: 0; position: absolute; top: 1px; }
.program-foot { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; margin-top: 28px; padding-top: 22px; }
.program-foot .dates { color: var(--ink-2); font: 11px var(--mono); margin: 0; }
.program-foot .dates span { color: var(--amber); margin-right: 6px; }

/* Contact ----------------------------------------------------------- */
.routing { border: 1px solid var(--cyan); border-radius: 12px; margin: 26px 0 22px; padding: 16px 18px; }
.routing .tag { margin: 0 0 6px; }
.routing p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; }
.routing b { color: var(--ink); }
.contact-extras { border-top: 1px solid var(--line); }
.contact-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 18px; }
.contact-grid .fact-card h3 { font-size: 24px; margin: 10px 0 8px; }
.contact-grid .photo-slot { margin-bottom: 18px; }
.channel-list div, .faq-list div { border-bottom: 1px solid var(--line); padding: 12px 0; }
.channel-list div:last-child, .faq-list div:last-child { border-bottom: 0; }
.channel-list dt, .faq-list dt { color: var(--ink-2); font: 10px var(--mono); letter-spacing: .06em; }
.channel-list dd { font-size: 13px; margin: 5px 0 0; }
.channel-list a:hover { color: var(--cyan); }
.faq-list dt { color: var(--ink); font: 600 14px var(--body); }
.faq-list dd { color: var(--ink-2); font-size: 12.5px; margin: 6px 0 0; }
.data-note { border: 1px dashed var(--line); border-radius: 14px; margin-top: 18px; padding: 24px; }
.data-note p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; max-width: 90ch; }

@media (max-width: 800px) {
  .program-card { padding: 24px; }
  .program-detail { grid-template-columns: 1fr; gap: 20px; }
  .program-foot .button { width: 100%; justify-content: space-between; }
}

/* Three-step application -------------------------------------------- */
.step-track { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.step-track span { border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font: 10px var(--mono); letter-spacing: .05em; padding: 7px 12px; }
.step-track .on { border-color: var(--cyan); color: var(--ink); }
.step-track .done { border-color: var(--ok); color: var(--ok); }
.step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.step-actions .button { flex: 1; justify-content: space-between; }
.review-list { display: grid; gap: 0; margin: 0; }
.review-list div { border-bottom: 1px solid var(--line); display: grid; gap: 4px; padding: 12px 0; }
.review-list dt { color: var(--ink-2); font: 10px var(--mono); letter-spacing: .06em; }
.review-list dd { font-size: 13.5px; margin: 0; }
.flow-card .check-grid { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 16px; }
.flow-card legend { color: var(--ink-2); font: 11px var(--mono); padding: 0 6px; }

/* Official mark ------------------------------------------------------ */
/* The PNG carries its own colour and glow, so it drops the placeholder tile's gradient fill. */
img.brand-mark { background: none; border-radius: 0; height: 26px; object-fit: contain; width: 26px; }
.ds-mark { height: 64px !important; width: 64px !important; }
.ds-mono-mark img.brand-mark { filter: grayscale(1) brightness(1.4); }
body.light .ds-mono-mark img.brand-mark { filter: grayscale(1) brightness(0.35); }

/* Team ---------------------------------------------------------------- */
.team-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s; }
.team-card:hover { border-color: var(--cyan); transform: translateY(-3px); }
.team-card > img { aspect-ratio: 4 / 5; display: block; object-fit: cover; width: 100%; }
.team-card .photo-slot { border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; }
.team-copy { display: grid; gap: 8px; padding: 22px; }
.team-copy h3 { font-size: 23px; margin: 0; }
.team-copy .tag { color: var(--cyan); margin: 0; }
.team-copy p:not(.tag) { color: var(--ink-2); font-size: 13px; margin: 0; }

/* Admin image upload --------------------------------------------------- */
.image-field { display: grid; gap: 8px; }
.image-label { color: var(--ink-2); font: 11px var(--mono); }
.image-row { align-items: start; display: flex; flex-wrap: wrap; gap: 16px; }
.image-preview { align-items: center; background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; display: flex; height: 130px; justify-content: center; overflow: hidden; width: 104px; }
.image-preview img { height: 100%; object-fit: cover; width: 100%; }
.image-preview span { color: var(--ink-2); font: 10px var(--mono); }
.image-actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 380px; }
.image-actions input[type="file"] { height: 0; opacity: 0; position: absolute; width: 0; }
.image-actions label.button { cursor: pointer; }
.image-note { color: var(--ink-2); font: 10px var(--mono); margin: 0; width: 100%; }

/* Accounts and analytics ---------------------------------------------- */
.admin-whoami { border-top: 1px solid var(--line); display: grid; gap: 2px; margin-top: 14px; padding: 14px 13px 4px; }
.admin-whoami b { font-size: 13px; }
.admin-whoami span { color: var(--cyan); font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.user-row { grid-template-columns: 2.2fr 1fr 1.2fr .6fr; }
.analytics-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.analytics-grid .channel-list dd { color: var(--cyan); font: 12px var(--mono); }
.spark { align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 3px; height: 110px; margin-top: 18px; padding: 14px; }
.spark span { background: linear-gradient(180deg, var(--cyan), var(--purple)); border-radius: 2px; flex: 1; min-height: 3px; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

/* Photographs -------------------------------------------------------- */
.gallery .shot { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0; overflow: hidden; }
.gallery .shot img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.gallery .shot figcaption { color: var(--ink-2); font: 10px var(--mono); padding: 10px 12px; }
.event-row-visual img { display: block; height: 100%; min-height: 190px; object-fit: cover; width: 100%; }