/* iChaplain in the Gravitas site system (site-system.css). A signature page: the hero with the
   iChaplain wordmark and the phone illustration, and the page's own top section nav, stay exactly as
   they were. Everything below takes the shared type, labels, buttons and panels. The small interface
   mock-ups (the phone screen, the body-camera frame, the dispatch map) keep their device lettering. */

/* ---------- the signature hero and section nav, unchanged ---------- */
body.gx-ichaplain .report-nav { font: 400 17px/1.7 var(--sans); color: var(--ink); }
body.gx-ichaplain main .hero { font: 400 17px/1.7 var(--sans); color: var(--ink); }
body.gx-ichaplain main .hero :is(p, figcaption, span, div) { font-family: var(--sans); }
body.gx-ichaplain main .hero h1 { font-family: var(--serif); font-size: clamp(72px, 10vw, 132px); font-weight: 400; line-height: .84; letter-spacing: -.055em; color: var(--ink); text-wrap: wrap; }
body.gx-ichaplain main .hero h1 span { font-family: var(--sans); }
body.gx-ichaplain main .hero .hero-question { font-family: var(--serif); }
body.gx-ichaplain main .hero .hero-phone figcaption { font-family: var(--serif); }
body.gx-ichaplain main .hero .hero-copy .eyebrow { margin: 0 0 18px; font: 800 12px/1.7 var(--sans) !important; letter-spacing: .22em !important; color: var(--gold) !important; }
@media (max-width: 760px) {
  body.gx-ichaplain main .hero h1 { font-size: clamp(64px, 22vw, 92px); }
}

/* ---------- interface mock-ups keep their device lettering ---------- */
body.gx-ichaplain :is(.phone-screen, .camera-view, .dispatch-map) { font-family: var(--sans); line-height: 1.7; }
body.gx-ichaplain :is(.phone-screen, .camera-view, .dispatch-map) :is(p, span, div, small, strong, article) { font-family: var(--sans); }
body.gx-ichaplain main .screen-quiet p, body.gx-ichaplain main .camera-view :is(.redacted, blockquote) { font-family: var(--serif); }
body.gx-ichaplain main .dispatch-map.is-human .call b { font-family: var(--serif); }

/* ---------- the dispatch ticker: a raised navy strip on the shared frame ---------- */
body.gx-ichaplain .dispatch-strip { box-sizing: border-box; width: var(--gx-frame); margin: 0 auto; padding: 8px 12px 8px 26px; border: 0; border-radius: var(--gx-r); background: var(--gx-ink); box-shadow: var(--gx-raise); }
body.gx-ichaplain .dispatch-label { font: 700 .75rem/1.6 var(--gx-sans); letter-spacing: .14em; color: #d2b575; }
body.gx-ichaplain .dispatch-track span { font: 500 .8125rem/1.6 var(--gx-sans); letter-spacing: .04em; color: #e9ecee; }
body.gx-ichaplain .quiet-toggle { min-height: 44px; padding: 10px 18px; border-radius: var(--gx-r); font: 600 .75rem/1.4 var(--gx-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--gx-ink); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 3px 3px 6px rgba(2, 10, 18, .55), -2px -2px 5px rgba(255, 255, 255, .07); }
body.gx-ichaplain .quiet-toggle[aria-pressed="true"], body.gx-ichaplain .quiet-toggle:active { box-shadow: inset 2px 2px 5px rgba(2, 10, 18, .6), inset -2px -2px 5px rgba(255, 255, 255, .06); }

/* ---------- section headings ---------- */
body.gx-ichaplain .section { padding-block: clamp(64px, 8vw, 112px); }
body.gx-ichaplain .section-heading { align-items: end; margin-bottom: 48px; }
body.gx-ichaplain .section-heading > p:last-child:not(.eyebrow) { font-size: var(--gx-lead); line-height: 1.4; color: var(--gx-slate); }

/* ---------- 01 the smartphone ---------- */
body.gx-ichaplain .phone-experience { border-radius: var(--gx-r); background: var(--gx-ground); border: 0; box-shadow: var(--gx-raise); }
body.gx-ichaplain .switch-row { font: 700 .75rem/1.5 var(--gx-sans); letter-spacing: .12em; }
body.gx-ichaplain .switch-row span.active { color: var(--gx-ink); }
body.gx-ichaplain .phone-caption { font: 500 clamp(1.875rem, 3.2vw, 2.75rem)/1.15 var(--gx-serif); letter-spacing: -.015em; color: var(--gx-ink); }
body.gx-ichaplain .phone-caption strong { font-weight: 600; color: var(--gx-gold); }

/* ---------- 02 the ledger: a raised navy panel with inset columns ---------- */
body.gx-ichaplain .ledger-section { box-sizing: border-box; width: var(--gx-frame); margin-inline: auto; border-radius: var(--gx-r); background: var(--gx-ink); box-shadow: var(--gx-raise); color: #f3f0e7; }
body.gx-ichaplain main .ledger-section .eyebrow { color: #d2b575 !important; }
body.gx-ichaplain .ledger-section .section-heading h2 { color: #f6f1e6; }
body.gx-ichaplain .ledger-section .section-heading h2 em { color: #d2b575; }
body.gx-ichaplain .ledger-column, body.gx-ichaplain .ledger-column.takes { border-radius: var(--gx-r); background: var(--gx-ink); border: 1px solid rgba(255, 255, 255, .05); box-shadow: inset 6px 6px 14px rgba(2, 10, 18, .6), inset -5px -5px 12px rgba(255, 255, 255, .05); }
body.gx-ichaplain .column-label { font: 700 .75rem/1.6 var(--gx-sans); letter-spacing: .14em; color: #d2b575; }
body.gx-ichaplain .ledger-column > h3 { font-size: 2rem; line-height: 1.15; color: #f6f1e6; }
body.gx-ichaplain .ledger-entry { border-top-color: rgba(255, 255, 255, .12); }
body.gx-ichaplain .ledger-entry > span { font: 500 1.625rem/1.1 var(--gx-serif); color: #d2b575; }
body.gx-ichaplain .ledger-entry h4 { margin-bottom: 10px; font-size: 1.625rem; line-height: 1.15; color: #f6f1e6; }
body.gx-ichaplain .ledger-entry p { font-size: 1.1875rem; line-height: 1.5; color: #d3d9dc; }
body.gx-ichaplain .field-note-button { min-height: 40px; margin-top: 14px; padding: 9px 14px; font: 700 .6875rem/1.4 var(--gx-sans); letter-spacing: .1em; color: #e5cf9d; }
body.gx-ichaplain .field-note-button b { font-family: var(--gx-sans); }
body.gx-ichaplain .field-note-button[aria-expanded="true"] + .field-note p { font-size: 1.125rem; line-height: 1.5; color: #e6e9ea; background: rgba(2, 10, 18, .28); }

/* ---------- 03 beyond the phone ---------- */
body.gx-ichaplain .technology-row { border-top-color: var(--gx-border); }
body.gx-ichaplain .technology-copy h3 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -.02em; }
body.gx-ichaplain .technology-copy > p:not(.eyebrow):not(.interaction-note) { font-size: var(--gx-body); line-height: 1.55; color: var(--gx-ink); }
body.gx-ichaplain .action-button, body.gx-ichaplain .segmented button { min-height: 44px; padding: 11px 18px; border-radius: var(--gx-r); font: 600 .75rem/1.4 var(--gx-sans); letter-spacing: .06em; color: var(--gx-ink); }
body.gx-ichaplain .action-button { background: var(--gx-ground); border: 1px solid var(--gx-border); box-shadow: var(--gx-raise-sm); }
body.gx-ichaplain .action-button:active, body.gx-ichaplain .action-button[aria-pressed="false"] { box-shadow: var(--gx-inset); color: var(--gx-gold-deep); }
body.gx-ichaplain .segmented { border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-inset); }
body.gx-ichaplain .segmented button.active { background: var(--gx-ground); box-shadow: var(--gx-raise-sm); color: var(--gx-gold-deep); }
body.gx-ichaplain main .interaction-note { font: 600 .6875rem/1.6 var(--gx-sans) !important; letter-spacing: .08em; color: var(--gx-slate) !important; }
body.gx-ichaplain .camera-view, body.gx-ichaplain .dispatch-map { border-radius: var(--gx-r); }

/* ---------- 04 the verdict: a raised navy panel ---------- */
body.gx-ichaplain .verdict-section { box-sizing: border-box; width: var(--gx-frame); margin-inline: auto; border-radius: var(--gx-r); background: var(--gx-ink); box-shadow: var(--gx-raise); padding-block: clamp(64px, 9vw, 128px); }
body.gx-ichaplain main .verdict-section .eyebrow { color: #d2b575 !important; }
body.gx-ichaplain .verdict-section > div > p:not(.eyebrow) { margin-bottom: 36px; font: 500 clamp(2.25rem, 4.4vw, 3.75rem)/1.1 var(--gx-serif); letter-spacing: -.02em; color: #f6f1e6; }
body.gx-ichaplain .verdict-section em { font-style: italic; color: #d2b575; }
body.gx-ichaplain .verdict-section .gold-line { color: #d2b575 !important; }
body.gx-ichaplain .hold-button { min-height: 50px; border-radius: var(--gx-r); font: 600 .75rem/1.4 var(--gx-sans); letter-spacing: .1em; border-color: rgba(255, 255, 255, .16); background: var(--gx-ink); box-shadow: 3px 3px 6px rgba(2, 10, 18, .55), -2px -2px 5px rgba(255, 255, 255, .07); }
body.gx-ichaplain .hold-button:active, body.gx-ichaplain .hold-button.is-holding { box-shadow: inset 2px 2px 5px rgba(2, 10, 18, .6), inset -2px -2px 5px rgba(255, 255, 255, .06); }

/* ---------- 05 where next ---------- */
body.gx-ichaplain .next-section .section-heading h2 { font-size: var(--gx-h2); }
body.gx-ichaplain .topic-list { padding: 8px clamp(18px, 3vw, 32px); border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-raise); }
body.gx-ichaplain .topic-list details { border-top-color: var(--gx-border); }
body.gx-ichaplain .topic-list details:first-child { border-top: 0; }
body.gx-ichaplain .topic-list details:last-child { border-bottom: 0; }
body.gx-ichaplain .topic-list summary { font: 500 1.75rem/1.2 var(--gx-serif); color: var(--gx-ink); }
body.gx-ichaplain .topic-list summary span { font: 700 .75rem/1 var(--gx-sans); color: var(--gx-gold); }
body.gx-ichaplain .topic-list summary b { font-family: var(--gx-sans); color: var(--gx-gold); }
body.gx-ichaplain .topic-list details p { font-size: var(--gx-body); line-height: 1.55; color: var(--gx-slate); }

/* ---------- the closing word: inset and centred ---------- */
body.gx-ichaplain .final-charge { box-sizing: border-box; width: var(--gx-frame); grid-template-columns: 1fr; justify-items: center; gap: 26px; text-align: center; border: 0; border-radius: var(--gx-r); background: var(--gx-ground); box-shadow: var(--gx-inset); padding: clamp(44px, 6vw, 88px) clamp(24px, 5vw, 64px); }
body.gx-ichaplain .final-charge-mark { background: var(--gx-ground); box-shadow: var(--gx-raise-sm); font: 500 3rem/1 var(--gx-serif); color: var(--gx-gold); }
body.gx-ichaplain .final-charge h2 { margin: 0 auto 24px; font-size: var(--gx-h2); line-height: 1.06; letter-spacing: -.02em; }
body.gx-ichaplain .final-charge p:not(.eyebrow) { margin: 8px auto; font: 400 var(--gx-lead)/1.4 var(--gx-serif); color: var(--gx-ink); }
body.gx-ichaplain .final-charge .final-line { font-size: var(--gx-h3) !important; font-weight: 500; font-style: italic; color: var(--gx-gold) !important; }

/* ---------- the quiet overlay and the footer ---------- */
body.gx-ichaplain .quiet-veil h2 { font: 500 clamp(3rem, 8vw, 5.5rem)/1 var(--gx-serif); letter-spacing: -.02em; }
body.gx-ichaplain .quiet-veil p:not(.eyebrow) { font: 400 var(--gx-lead)/1.4 var(--gx-serif); }
body.gx-ichaplain .quiet-veil .eyebrow { font: 700 .8125rem/1.6 var(--gx-sans); letter-spacing: .14em; color: #d2b575; }
body.gx-ichaplain .quiet-veil button { min-height: 46px; font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .08em; }
body.gx-ichaplain .site-footer { border-top-color: var(--gx-border); font: 600 .75rem/1.6 var(--gx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gx-slate); }
body.gx-ichaplain .site-footer nav a { color: var(--gx-ink); }

@media (max-width: 760px) {
  body.gx-ichaplain .dispatch-strip { padding: 8px 10px 8px 16px; }
  body.gx-ichaplain .ledger-section .page-width, body.gx-ichaplain .verdict-section .page-width { width: calc(100% - 36px); }
  body.gx-ichaplain .ledger-column { padding: 24px 18px; }
  body.gx-ichaplain .verdict-section > div > p:not(.eyebrow) { font-size: 2.25rem; }
  body.gx-ichaplain .topic-list summary { font-size: 1.5rem; }
  body.gx-ichaplain .final-charge { padding: 36px 22px; }
}
