/* Site-level rules on top of the Modernist design system (styles.css). */

/* Red for text: a touch deeper than the brand red so small text meets
   WCAG AA contrast (4.5:1 on the background). */
:root { --color-accent-text: #d42b11; }

html, body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
a.hover-accent:hover { color: var(--color-accent-text) !important; }

figcaption {
  font-size: 11px; letter-spacing: 0.04em; margin-top: 8px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* Image not supplied yet: an empty box, ready for an <img>. */
.slot { position: absolute; inset: 0; }
.slot--bordered { border: 1px solid var(--color-divider); }

/* One breakpoint. */
@media (max-width: 760px) {
  .g { grid-template-columns: minmax(0, 1fr) !important; }
  .g > * { grid-column: 1 / -1 !important; }
  .ta-r { text-align: left !important; }
  .sb { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; row-gap: 12px; }
  table { display: block; overflow-x: auto; }
}

/* Case-study cards: the keyline language, animated. */
.case-card__media { overflow: hidden; transition: border-color 0.3s ease; }
.case-card__label { position: relative; }
.case-card__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.case-card__arrow { display: inline-block; transition: transform 0.35s ease; }
@media (hover: hover) {
  .case-card:hover .case-card__media { border-color: var(--color-text) !important; }
  .case-card:hover .case-card__label::after { transform: scaleX(1); }
  .case-card:hover .case-card__arrow { transform: translateX(4px); }
}
.case-card:focus-visible .case-card__media { border-color: var(--color-text) !important; }
.case-card:focus-visible .case-card__label::after { transform: scaleX(1); }
.case-card:focus-visible .case-card__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .case-card__media, .case-card__label::after, .case-card__arrow { transition: none; }
}

/* Content column: 1128px max. Side padding grows on wide screens, so
   backgrounds and keylines still run edge to edge. */
body > div > :is(nav, header, section, footer) {
  padding-left: max(clamp(20px, 4vw, 56px), (100% - 1128px) / 2) !important;
  padding-right: max(clamp(20px, 4vw, 56px), (100% - 1128px) / 2) !important;
}

/* Phones: larger text for readability. Sizes are set inline on the pages,
   so these match them and step each one up. Desktop is unchanged. */
@media (max-width: 760px) {
  body { font-size: 17px; }
  [style*="font-size:16px"], [style*="font-size: 16px"],
  [style*="font-size:15px"] { font-size: 17px !important; }
  [style*="font-size:17px"], [style*="font-size:18px"] { font-size: 19px !important; }
  [style*="font-size:14px"] { font-size: 16px !important; }
  [style*="font-size:13px"] { font-size: 15px !important; }
  [style*="font-size:12px"] { font-size: 13px !important; }
  [style*="font-size:11px"], figcaption { font-size: 13px !important; }
  [style*="font-size:clamp(18px"], [style*="font-size:clamp(19px"] { font-size: 20px !important; }
  [style*="font-size:clamp(21px"], [style*="font-size:clamp(22px"] { font-size: 23px !important; }
}

/* Case-study hierarchy: subheadings clearly above body text, and bold body
   phrases one step lighter so they don't compete with the subheadings. */
h4[style*="font-size:15px"] {
  font-size: 20px !important; line-height: 1.25; letter-spacing: -0.015em;
  margin-top: 36px !important; margin-bottom: 12px !important;
}
/* A subheading that opens its section lines up with the section title. */
h4[style*="font-size:15px"]:first-child { margin-top: 0 !important; }
p strong, li strong { font-weight: 600; }
@media (max-width: 760px) {
  h4[style*="font-size:15px"] { font-size: 21px !important; }
}