/* ============================================================
   base.css
   Reset, page ground, typography defaults, links, container and
   the grid utilities. Reads tokens; owns no component. Everything
   below the tokens layer and above the components layer.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

body {
  font-family: var(--rfi-font-text);
  font-size: var(--rfi-body);
  line-height: 1.6;
  color: var(--rfi-text);
  background: var(--rfi-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rfi-teal); outline-offset: 2px; }

/* ---- container ------------------------------------------------
   The container places the two components that appear on every page. A component
   sets no outer margin and no position; this is the container doing its job. */
.rfi-wrap { max-width: var(--rfi-page); margin: 0 auto; padding: 0 var(--rfi-page-pad) var(--rfi-page-pad); }
.rfi-wrap > .rfi-masthead { margin: 16px 0 22px; }
.rfi-wrap > .rfi-footer { margin-top: 40px; }

/* TOP banner: above the masthead, site-wide. Order is gap -> TOP -> gap -> header.
   When TOP is present the header gives up its own top margin, so the two do not
   stack into a double gap.

   This is driven by the slot's PRESENCE, not by a PHP flag, and that is the point:
   the shell is only printed when a creative is sold, and banners.js REMOVES it if the
   live serve comes back empty (a creative that expired between the cached decision
   and the request). A class written at render time would then lie, and the header
   would keep a zeroed margin with nothing above it. The sibling selector cannot:
   no slot in the DOM, no rule, and the header is back to its normal 16px. */
.rfi-wrap > .rfi-topslot { margin: 16px 0 22px; }
.rfi-wrap > .rfi-topslot + .rfi-masthead { margin-top: 0; }

/* Breadcrumbs sit on the grey ground above the first card, so the container places
   them and the component stays margin-free. */
.rfi-wrap > .rfi-crumbs { margin-bottom: 14px; }

/* ---- page grid + section rhythm ------------------------------- */
.rfi-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rfi-gap); align-items: start; }
.rfi-span3 { grid-column: span 3; min-width: 0; }
.rfi-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rfi-gap); }
.rfi-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rfi-gap); }
/* A page section owns the space around its head and body, so components stay
   margin-free (design-system.md rule 2). */
.rfi-section { margin-top: var(--rfi-block-gap); display: flex; flex-direction: column; gap: 16px; }
.rfi-section:first-child { margin-top: 0; }

/* ---- type scale (utilities, driven by tokens) ----------------- */
.rfi-t-h1     { font-family: var(--rfi-font-ui); font-size: var(--rfi-h1-page); font-weight: 500; letter-spacing: .2px; }
.rfi-t-h1-art { font-family: var(--rfi-font-ui); font-size: var(--rfi-h1-art); font-weight: 600; line-height: 1.18; letter-spacing: -.3px; }
.rfi-t-section{ font-family: var(--rfi-font-ui); font-size: var(--rfi-h2-section); font-weight: 500; letter-spacing: .2px; }
.rfi-t-desc   { font-size: var(--rfi-desc); line-height: 1.55; color: var(--rfi-text-2); }
.rfi-t-meta   { font-size: var(--rfi-meta); color: var(--rfi-text-3); }
.rfi-t-kicker { font-family: var(--rfi-font-ui); font-size: var(--rfi-label); font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--rfi-text-3); }
.rfi-t-flab   { font-family: var(--rfi-font-text); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rfi-text-3); }

.rfi-screen-reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }