/* Information architecture (owner order 2026-10-15): the Engagements menu, the phone booking bar, the home page's
   proof strip, scope lines, and founder strip, the footer's five groups, and the layout of the Samples, Pavilion, and
   Fulcrum pages. Loaded by partials/_header.jinja. Colors come from the --site-* tokens in site-redesign.css (set on
   .site-page and .offerings-page, light and dark), so every rule here follows the theme. Square corners and 1px
   hairlines, as everywhere else. */

/* ---- Header: the Engagements menu ------------------------------------------------------------------------------ */
.ia-menu { position: relative; }
.ia-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 0.75);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: color 300ms;
}
.ia-menu-button:hover,
.ia-menu-button[aria-expanded="true"],
.ia-menu-button.is-current { color: #ffffff; }
.ia-menu-button.is-current { position: relative; }
.ia-menu-button.is-current::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: #dceafb; }
.ia-menu-chevron { transition: transform 180ms ease; }
.ia-menu-button[aria-expanded="true"] .ia-menu-chevron { transform: rotate(180deg); }
.ia-menu-button:focus-visible,
.ia-menu-item:focus-visible,
.ia-menu-foot:focus-visible,
.ia-mobile-item:focus-visible,
#main-nav a:focus-visible { outline: 2px solid #9dbce3; outline-offset: 3px; }

.ia-menu-panel {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: -1.25rem;
  width: min(31rem, 92vw);
  padding: 1.25rem 1.25rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: #0b1f3b;
  box-shadow: 0 24px 60px rgb(2 8 18 / 0.5);
  color: #e6eef7;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}
/* A bridge over the gap under the button, so moving the pointer down to the panel never closes it. */
.ia-menu-panel::before { content: ""; position: absolute; top: -1.3rem; right: 0; left: 0; height: 1.3rem; }
.ia-menu.is-open .ia-menu-panel,
html:not(.ia-js) .ia-menu:hover .ia-menu-panel,
html:not(.ia-js) .ia-menu:focus-within .ia-menu-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ia-menu-lead { margin: 0 0 0.75rem; color: #b3c3d4; font-size: 0.82rem; line-height: 1.5; }
.ia-menu-list { margin: 0; padding: 0; list-style: none; }
.ia-menu-list li + li { border-top: 1px solid rgb(255 255 255 / 0.14); }
.ia-menu-item { display: grid; gap: 0.15rem; padding: 0.85rem 0.5rem; color: #e6eef7; text-decoration: none; transition: background-color 150ms; }
.ia-menu-item:hover { background: rgb(255 255 255 / 0.07); }
.ia-menu-name { color: #ffffff; font-size: 0.95rem; font-weight: 800; line-height: 1.35; }
.ia-menu-scope { color: #b3c3d4; font-size: 0.8rem; line-height: 1.45; }
.ia-menu-shapes { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; color: #a7c9e9; font-size: 0.78rem; font-weight: 700; }
.ia-menu-item[aria-current="page"] .ia-menu-name { text-decoration: underline; text-underline-offset: 4px; }
.ia-menu-foot { display: block; margin-top: 0.25rem; padding: 0.85rem 0.5rem; border-top: 1px solid rgb(255 255 255 / 0.14); color: #dceafb; font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.ia-menu-foot:hover { color: #ffffff; }
.ia-book-button { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .ia-book-button { padding-inline: 0.9rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-menu-panel, .ia-menu-chevron, .ia-bookbar { transition: none !important; }
}

/* ---- Header: the phone menu ------------------------------------------------------------------------------------- */
.ia-mobile-label { margin: 0.35rem 1rem 0.1rem; color: #a7c9e9; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.ia-mobile-list { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.ia-mobile-item { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-height: 48px; padding: 0.65rem 1rem; border-radius: 0.75rem; color: rgb(255 255 255 / 0.92); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: background-color 200ms; }
.ia-mobile-item:hover { background: rgb(255 255 255 / 0.1); color: #ffffff; }
.ia-mobile-item[aria-current="page"] { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.ia-mobile-shapes { color: #b3c3d4; font-size: 0.75rem; font-weight: 500; }
/* The closed phone menu is only clipped (max-height 0, opacity 0), so its links stayed focusable and a keyboard user tabbed
   into invisible items while the focus ring painted under the hero. Hidden means out of the tab order and the tree. */
#mobile-menu.max-h-0 { visibility: hidden; }

/* ---- The phone booking bar -------------------------------------------------------------------------------------- */
.ia-bookbar { display: none; }
@media (max-width: 1023.98px) {
  .ia-bookbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #dceafb;
    box-shadow: 0 -1px 0 #0b1f3b, 0 -10px 28px rgb(11 31 59 / 0.3);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  .ia-bookbar.is-visible { visibility: visible; transform: none; transition-delay: 0s; }
  .ia-bookbar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px));
    color: #0b1f3b;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
  }
  .ia-bookbar-link::after { content: "\2192"; font-size: 1.25rem; font-weight: 700; }
  /* The bar is pale in both themes, so its ring is navy (10:1 on #dceafb), drawn inside the link because the link fills the bar;
     the selector outweighs `.about-page a:focus-visible`, which would otherwise paint the dark theme's pale ring on it. */
  .ia-bookbar { --focus-ring: #0b1f3b; }
  .ia-bookbar a.ia-bookbar-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -6px; }
  /* WCAG 2.4.11: the bar never covers a focused element. The footer reserves the bar's height at the foot of the page (the
     bar also hides whenever the contact section or the footer is on screen, ia.js), and a focus scroll stops short of the bar. */
  :root { --ia-bookbar-h: calc(48px + env(safe-area-inset-bottom, 0px)); }
  html.ia-js { scroll-padding-bottom: calc(var(--ia-bookbar-h) + 0.75rem); }
  .site-footer { padding-bottom: calc(3.5rem + var(--ia-bookbar-h)); }
}

/* ---- Footer ------------------------------------------------------------------------------------------------------ */
.ia-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 2rem; }
@media (min-width: 640px) { .ia-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ia-footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } }
.ia-footer-note { display: block; color: #b3c3d4; font-size: 0.75rem; line-height: 1.4; }

/* ---- Home: the proof strip, scope lines, founder strip, samples ------------------------------------------------- */
.ia-proof { border-bottom: 1px solid var(--site-rule); background: var(--site-tint); }
.ia-proof p { margin: 0; padding-block: 1.05rem; color: var(--site-ink); font-size: 1rem; line-height: 1.5; }
.ia-proof a { margin-left: 0.4rem; color: var(--site-link); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ia-choice-scope { display: block; margin-top: 0.6rem; color: var(--site-link); font-size: 0.84rem; font-weight: 800; line-height: 1.4; }

.ia-founder { padding-block: clamp(2.25rem, 4vw, 3.5rem); border-block: 1px solid var(--site-rule); background: var(--site-panel); color: var(--site-ink); }
.ia-founder-grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.ia-founder-portrait { display: block; width: 96px; height: 96px; border: 1px solid var(--site-rule); border-radius: 0; object-fit: cover; }
.ia-founder-copy h2 { margin: 0; color: var(--site-ink); font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.ia-founder-credentials { display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0.7rem 0 0; color: var(--site-muted); font-size: 0.95rem; line-height: 1.5; }
.ia-founder-credentials span + span::before { content: "\00b7"; margin: 0 0.7rem; }
.ia-founder-links { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0.35rem 0 0; }
.ia-founder-links a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: var(--site-link); font-size: 0.95rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ia-founder-links a:hover { color: var(--site-ink); }
@media (max-width: 520px) {
  .ia-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
}

.offerings-samples { background: var(--site-tint); }
.offerings-samples .offerings-section-intro h2 { color: var(--site-ink); }
.ia-sample-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ia-sample-readouts .dl-card { max-width: none; }
@media (max-width: 900px) { .ia-sample-readouts { grid-template-columns: minmax(0, 1fr); } }
.ia-sample-links { margin: 2rem 0 0; }

/* ---- Shared layout for the Samples, Pavilion, and Fulcrum pages ------------------------------------------------- */
.ia-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ia-wrap { width: min(100% - 3rem, 1280px); margin-inline: auto; }
.ia-section { padding-block: clamp(3.75rem, 7vw, 6.5rem); scroll-margin-top: 5rem; color: var(--site-ink); }
.ia-section-alt { background: color-mix(in srgb, var(--site-tint) 60%, var(--site-paper)); }
.ia-head { max-width: 820px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ia-split > .ia-head { margin-bottom: 0; }
.ia-kicker { margin: 0 0 0.9rem; color: var(--site-link); font-size: 0.86rem; font-weight: 800; }
.ia-head h2 { margin: 0; color: var(--site-ink); font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 800; letter-spacing: var(--site-track-display, -0.035em); word-spacing: var(--site-word-display, 0.06em); line-height: 1.12; text-wrap: balance; overflow-wrap: break-word; }
.ia-head > p:not(.ia-kicker):not(.ia-links) { max-width: 62ch; margin: 1.2rem 0 0; color: var(--site-muted); font-size: 1.05rem; line-height: 1.65; }
.ia-head a { color: var(--site-link); font-weight: 700; text-underline-offset: 3px; }
.ia-links { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 1rem 0 0; }
.ia-links a, .ia-text-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; color: var(--site-link); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ia-links a:hover, .ia-text-link:hover { color: var(--site-ink); }
.ia-note, .ia-fine { max-width: 70ch; margin: 1.75rem 0 0; color: var(--site-muted); font-size: 0.95rem; line-height: 1.6; }
.ia-fine { font-size: 0.85rem; }
.ia-note a, .ia-fine a { color: var(--site-link); text-underline-offset: 3px; }
.ia-section code { padding: 0.05em 0.3em; border: 1px solid var(--site-rule); background: var(--site-panel); font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; overflow-wrap: anywhere; }
.ia-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .ia-split { grid-template-columns: minmax(0, 1fr); } }

.ia-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ia-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ia-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .ia-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ia-cards, .ia-cards-2, .ia-cards-4 { grid-template-columns: minmax(0, 1fr); } }
.ia-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem; border: 1px solid var(--site-rule); background: var(--site-panel); }
.ia-card-featured { border-color: var(--site-link); }
.ia-card h3 { margin: 0; color: var(--site-ink); font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.ia-card p { margin: 0.7rem 0 0; color: var(--site-muted); font-size: 0.95rem; line-height: 1.6; }
.ia-card .ia-text-link { margin-top: auto; padding-top: 0.6rem; }
.ia-price { color: var(--site-ink) !important; font-size: 2rem !important; font-weight: 800; letter-spacing: -0.02em; }
.ia-price small { color: var(--site-muted); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
.ia-bullets { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.ia-bullets li { padding: 0.35rem 0 0.35rem 1.1rem; position: relative; color: var(--site-muted); font-size: 0.9rem; line-height: 1.5; }
.ia-bullets li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 5px; height: 5px; background: var(--site-link); }
.ia-formula { display: block; margin-top: 0.7rem; }
.ia-num { display: block; margin-bottom: 0.6rem; color: var(--site-link); font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; font-weight: 500; }

.ia-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ia-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ia-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .ia-steps, .ia-steps-4 { grid-template-columns: minmax(0, 1fr); } }
.ia-steps li { padding-top: 1.1rem; border-top: 2px solid var(--site-link); }
.ia-steps h3 { margin: 0; color: var(--site-ink); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.ia-steps p { margin: 0.65rem 0 0; color: var(--site-muted); font-size: 0.95rem; line-height: 1.6; }

.ia-ruled { margin: 0; padding: 0; border-top: 1px solid var(--site-rule); list-style: none; }
.ia-ruled li { display: grid; grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1.4fr); gap: 0.4rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--site-rule); }
.ia-ruled h3 { margin: 0; color: var(--site-ink); font-size: 1.1rem; font-weight: 800; line-height: 1.35; }
.ia-ruled p { margin: 0; color: var(--site-muted); line-height: 1.65; }
@media (max-width: 700px) { .ia-ruled li { grid-template-columns: minmax(0, 1fr); } }
.ia-list { margin: 0; padding: 0; list-style: none; }
.ia-list li { padding: 1rem 0; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); line-height: 1.65; }
.ia-list li:first-child { border-top: 1px solid var(--site-rule); }
.ia-list strong { color: var(--site-ink); }

.ia-table-wrap { overflow-x: auto; border: 1px solid var(--site-rule); background: var(--site-panel); }
.ia-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.ia-table th, .ia-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); text-align: left; vertical-align: top; }
.ia-table thead th { background: var(--site-tint); color: var(--site-ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ia-table tbody th { color: var(--site-ink); font-weight: 800; white-space: nowrap; }
.ia-table tbody tr:last-child th, .ia-table tbody tr:last-child td { border-bottom: 0; }

.ia-faq { max-width: 860px; border-top: 1px solid var(--site-rule); }
.ia-faq details { border-bottom: 1px solid var(--site-rule); }
.ia-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 56px; padding: 0.9rem 0; color: var(--site-ink); font-size: 1.05rem; font-weight: 800; line-height: 1.4; cursor: pointer; list-style: none; }
.ia-faq summary::-webkit-details-marker { display: none; }
.ia-faq summary::after { content: "+"; flex: none; color: var(--site-link); font-size: 1.4rem; font-weight: 500; }
.ia-faq details[open] summary::after { content: "\2212"; }
.ia-faq summary:focus-visible { outline: 2px solid var(--site-link); outline-offset: 2px; }
.ia-faq details p { margin: 0 0 1.2rem; max-width: 64ch; color: var(--site-muted); line-height: 1.65; }

.ia-terms { margin: 2.5rem 0 0; border-top: 1px solid var(--site-rule); }
.ia-terms > div { display: grid; grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr); gap: 0.3rem 2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--site-rule); }
.ia-terms dt { color: var(--site-ink); font-weight: 800; }
.ia-terms dd { margin: 0; color: var(--site-muted); }
@media (max-width: 600px) { .ia-terms > div { grid-template-columns: minmax(0, 1fr); } }

/* The dark band under a product hero: four figures and a line of provenance. */
.site-page main > section.ia-rail:not(#hero):not(#contact):not(#watch):not(.site-metrics),
.ia-rail { padding-block: clamp(2.25rem, 4vw, 3.5rem); background: #0b1f3b; color: #e6eef7; }
.ia-rail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; width: min(100% - 3rem, 1280px); margin: 0 auto; padding: 0; list-style: none; }
.ia-rail-grid li { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid #526b84; color: #b3c3d4; font-size: 0.92rem; line-height: 1.5; }
.ia-rail-figure { color: #dceafb; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ia-rail-foot { width: min(100% - 3rem, 1280px); margin: 1.75rem auto 0; color: #b3c3d4; font-size: 0.92rem; line-height: 1.6; }
.ia-rail-foot a { color: #dceafb; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .ia-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Product screenshots (Fulcrum only: Pavilion ships none). Dark shots in the dark theme, light in the light. */
.ia-shots { display: grid; gap: 2.5rem; }
.ia-shots-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .ia-shots-pair { grid-template-columns: minmax(0, 1fr); } }
.ia-shot { margin: 0; }
.ia-shot-frame, .ia-phone { border: 1px solid var(--site-rule); background: var(--site-panel); }
.ia-shot-bar { margin: 0; padding: 0.55rem 1rem; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); font-size: 0.78rem; font-weight: 700; }
.ia-shot picture { display: block; }
.ia-shot img { display: block; width: 100%; height: auto; }
html:not(.dark) .ia-shot picture.ia-shot-dark { display: none; }
.dark .ia-shot picture.ia-shot-light { display: none; }
.ia-phone { max-width: 260px; margin-inline: auto; }
.ia-shot figcaption { margin-top: 0.8rem; color: var(--site-muted); font-size: 0.88rem; line-height: 1.55; }
.ia-shot figcaption strong { color: var(--site-ink); }

/* ---- The Samples hub -------------------------------------------------------------------------------------------- */
.ia-jump { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.ia-jump a { display: grid; gap: 0.2rem; min-height: 48px; padding: 0.9rem 1.15rem; border: 1px solid var(--site-rule); background: var(--site-panel); color: var(--site-ink); text-decoration: none; }
.ia-jump a:hover { border-color: var(--site-link); }
.ia-jump strong { font-size: 1rem; font-weight: 800; }
.ia-jump span { color: var(--site-muted); font-size: 0.88rem; }
.ia-sub { margin: 2.75rem 0 0.4rem; color: var(--site-ink); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.ia-sub-note { max-width: 64ch; margin: 0 0 1.25rem; color: var(--site-muted); line-height: 1.6; }
.ia-guides { display: grid; gap: 1.5rem; }
.ia-guides .dl-card { max-width: none; }
.ia-case + .ia-case { margin-top: 3.5rem; padding-top: 0.5rem; border-top: 1px solid var(--site-rule); }
.ia-case-title { margin: 2.5rem 0 0; color: var(--site-ink); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.ia-case-title span { display: block; margin-top: 0.35rem; color: var(--site-muted); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.ia-section .dl-card.ia-readout { max-width: none; border-color: var(--site-link); border-left-width: 4px; }
.ia-reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ia-reports .dl-card { max-width: none; height: calc(100% - 1.9rem); }
.ia-week { margin: 0 0 0.55rem; color: var(--site-link); font-size: 0.84rem; font-weight: 800; }
@media (max-width: 960px) { .ia-reports { grid-template-columns: minmax(0, 1fr); } .ia-reports .dl-card { height: auto; } }
.ia-brief-only { max-width: 64ch; margin: 0; padding: 1.25rem 1.5rem; border: 1px solid var(--site-rule); border-left: 4px solid var(--site-link); background: var(--site-panel); color: var(--site-muted); line-height: 1.65; }
.ia-brief-only strong { color: var(--site-ink); }

/* A photograph inside a section (the pavilion on /pavilion/). */
.ia-photo { max-width: 1000px; margin: 0 0 2.5rem; border: 1px solid var(--site-rule); }
.ia-photo picture, .ia-photo img { display: block; width: 100%; height: auto; }

/* Focus ring on the navy bands. The shared ring (#2f5d8c in the light theme) is 2.41:1 on navy, under the 3:1 that
   WCAG 1.4.11 asks for; the bands stay navy in both themes, so they carry a light ring in both. */
/* The About hero is `hero-photo` too but is paper in the light theme, where #9dbce3 is 1.79:1: it keeps the shared ring.
   The skip link sits over the navy header, and `.about-page a:focus-visible` (about.css) is more specific than a bare
   `.skip-link:focus-visible`, so the skip link's selector carries the extra weight. */
.hero-photo:not(.about-hero) a:focus-visible,
.offerings-terms a:focus-visible,
.ia-rail a:focus-visible,
.site-metrics a:focus-visible,
body a.skip-link:focus-visible { outline-color: #9dbce3; }