/* Company and legal pages: About, How we test, Editorial policy, Contact, Privacy policy, Terms of use, Disclaimer.
   On the page deck (home.css .pg-*): breadcrumbs on the black, then one card holding the shared title block
   (template-parts/page-head.php) and the text, with the Dispatch article's body typography at a reading measure,
   left-aligned to the shared content edge. Long pages carry "On this page" beside the text on wide screens (the current section gets an orange
   dot), and a fold-out above it on smaller ones. Contact puts the form in a paper card with the notes beside it.
   Colours come from the :root tokens in style.css, so the pages follow the reader's light or dark setting.
   Hover: links turn orange, arrow circles fill orange. No underlines, except a thin static one under links
   inside the page's own text, where it helps reading. */

/* ---------- local tokens ---------- */
.co {
  --co-paper: #ffffff;
  --co-edge: rgba(0,0,0,.06);
  --co-field: #F9F9F9;
  --co-field-edge: rgba(0,0,0,.16);
  --co-go: #000000;
  --co-go-ink: #ffffff;
  --co-fs: clamp(17px, calc(.25vw + 15.5px), 20px);
  --co-measure: calc(var(--co-fs) * 34);
  --t-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .co {
    --co-paper: #0f0f0f;
    --co-edge: rgba(255,255,255,.09);
    --co-field: #000000;
    --co-field-edge: rgba(255,255,255,.2);
    --co-go: #F9F9F9;
    --co-go-ink: #000000;
  }
}

/* the card (.pg-sheet) sets the width; the module keeps the shared base size */
.co { font-size: clamp(14px, calc(.5vw + 6.4px), 24px); color: var(--ink); }
.co a { color: inherit; text-decoration: none; }
.co :focus-visible { outline-color: var(--ink); }
.co .hp-pill { color: var(--ink); }
.co .sy-go { background: var(--co-go); color: var(--co-go-ink); }
.co a:hover .sy-go, .co a:focus-visible .sy-go, .co button:hover .sy-go, .co button:focus-visible .sy-go { background: #E85002; color: #ffffff; }
.co a:hover .sy-go svg, .co a:focus-visible .sy-go svg, .co button:hover .sy-go svg, .co button:focus-visible .sy-go svg { transform: rotate(45deg); }
/* ---------- the title block (page-head.php): the shared look; a long title may run wider ---------- */
.co-head .pg-h1 { max-width: 20ch; overflow-wrap: break-word; }
.co-head .pg-meta { font-variant-numeric: tabular-nums; }
.co-toc__h { margin: 0; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- the grid: text, with a rail beside it on wide screens ---------- */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.co-main, .co-rail { min-width: 0; }

/* ---------- On this page ---------- */
/* wide screens: beside the text, stays in view; the current section gets an orange dot on the line */
.co-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.co-toc__h { margin-bottom: 1.1em; }
.co-toc ol { margin: 0 0 0 4px; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.co-toc a { position: relative; display: block; padding: .5em 0 .5em 1.25em; font-size: var(--t-ui); line-height: 1.4; color: var(--ink-3); transition: color .25s ease; }
.co-toc a::before { content: ""; position: absolute; left: -4px; top: calc(1.2em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #E85002; transform: scale(0); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.co-toc a:hover, .co-toc a:focus-visible { color: var(--acc-text); }
.co-toc a[aria-current] { color: var(--ink); font-weight: 500; }
.co-toc a[aria-current]::before { transform: scale(1); }
.co-toc a:focus-visible { outline-offset: -2px; }

/* smaller screens: a quiet fold-out above the text */
.co-toc-m { max-width: var(--co-measure); margin: 0 0 2.4em; border-radius: 1.2em; background: var(--co-paper); box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 0 0 1px var(--co-edge); }
.co-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 3.5em; padding: 0 1.25em; font-size: var(--t-ui); font-weight: 600; list-style: none; cursor: pointer; border-radius: 1.2em; transition: color .25s ease; }
.co-toc-m summary::-webkit-details-marker { display: none; }
.co-toc-m summary:hover { color: var(--acc-text); }
.co-toc-m summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.co-toc-m .sy-chev { width: 1em; height: 1em; flex: none; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.co-toc-m details[open] .sy-chev { transform: rotate(180deg); }
.co-toc-m ol { margin: 0; padding: .2em 1.25em 1em; list-style: none; border-top: 1px solid var(--line); }
.co-toc-m a { display: block; padding: .6em 0; font-size: var(--t-ui); line-height: 1.4; color: var(--ink-2); transition: color .25s ease; }
.co-toc-m a:hover, .co-toc-m a:focus-visible { color: var(--acc-text); }

/* ---------- the page's own words: the Dispatch article's text ---------- */
.co-body { max-width: var(--co-measure); font-size: var(--co-fs); line-height: 1.62; color: var(--ink); overflow-wrap: break-word; }
.co-body > * { margin-top: 0; margin-bottom: 1.15em; }
.co-body > :last-child { margin-bottom: 0; }
.co-body h2 { margin: 2.1em 0 .65em; font-family: var(--display); font-weight: 500; font-size: 1.5em; line-height: 1.15; letter-spacing: -0.028em; text-wrap: balance; scroll-margin-top: 1.2em; }
.co-body > h2:first-child { margin-top: 0; }
.co-body h3 { margin: 1.8em 0 .55em; font-family: var(--display); font-weight: 500; font-size: 1.2em; line-height: 1.25; letter-spacing: -0.02em; scroll-margin-top: 1.2em; }
.co-body h4 { margin: 1.6em 0 .5em; font-family: var(--font); font-size: 1em; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.co-body h2 + h3 { margin-top: .9em; }
.co-body strong, .co-body b { font-weight: 700; }
.co-body a, .co-notes a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--acc-text) 60%, transparent); transition: color .25s ease, text-decoration-color .25s ease; }
.co-body a:hover, .co-body a:focus-visible, .co-notes a:hover, .co-notes a:focus-visible { color: var(--acc-text); text-decoration-color: currentColor; }
.co-body ul, .co-body ol { padding-left: 1.35em; }
.co-body li { margin: .5em 0; padding-left: .25em; }
.co-body li::marker { color: var(--ink-3); }
.co-body ol > li::marker { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; }
.co-body li > ul, .co-body li > ol { margin: .4em 0; }
.co-body blockquote { margin: 2em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--ink); font-size: 1.08em; line-height: 1.5; }
.co-body blockquote p { margin: 0 0 .6em; }
.co-body hr, .co-body .wp-block-separator { height: 1px; margin: 2.6em 0; border: 0; background: var(--line-2); opacity: 1; }
.co-body .wp-block-table { margin: 2.2em 0; padding-bottom: .5em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.co-body table { width: 100%; border-collapse: collapse; font-size: .84em; line-height: 1.45; font-variant-numeric: tabular-nums; }
.co-body th, .co-body td { padding: .8em 1.2em .8em 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.co-body thead th { font-family: var(--font); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.co-body img { height: auto; border-radius: 1em; }
.co-empty { color: var(--ink-2); }

/* the closing row: where to go next */
.co-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2em 2em; max-width: var(--co-measure); margin-top: 2.8em; padding-top: 1.8em; border-top: 1px solid var(--line); }
.co-end p { flex: 1 1 16em; margin: 0; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.co-end__links { display: flex; flex-wrap: wrap; gap: .6em; }

/* ---------- Contact: the form in a paper card, the notes beside it ---------- */
.co-card { padding: 2.2em 2.3em 2.3em; border-radius: 1.75em; background: var(--co-paper); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05), inset 0 0 0 1px var(--co-edge); scroll-margin-top: 1.5em; }
.co-card__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.03em; }
.co-form { margin-top: 1.7em; }

.co-alert { margin: 0 0 1.7em; padding: 1em 1.2em 1.05em; border-radius: 1em; background: color-mix(in srgb, var(--acc-text) 7%, transparent); box-shadow: inset 0 0 0 1.5px var(--acc-text); font-size: var(--t-ui); line-height: 1.45; }
.co-alert[hidden] { display: none; }
.co-alert:focus { outline: 0; }
.co-alert:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.co-alert__t { margin: 0; font-weight: 600; }
.co-alert ul { margin: .45em 0 0; padding-left: 1.2em; }
.co-alert li { margin: .2em 0; }
.co-alert a { color: var(--acc-text); font-weight: 600; transition: color .25s ease; }
.co-alert a:hover, .co-alert a:focus-visible { color: var(--ink); }

.co-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2em; }
.co-field { display: flex; flex-direction: column; gap: .5em; min-width: 0; margin: 0 0 1.45em; }
.co-field > label, .co-topics legend { padding: 0; font-size: var(--t-ui); font-weight: 600; line-height: 1.3; color: var(--ink); }
.co-field input[type="text"], .co-field input[type="email"], .co-field textarea {
  display: block; width: 100%; height: 3.125em; margin: 0; padding: 0 1.1em; border: 0; border-radius: .95em;
  background: var(--co-field); color: var(--ink); font: inherit; font-size: max(16px, var(--t-ui)); line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--co-field-edge); -webkit-appearance: none; appearance: none; transition: box-shadow .2s ease;
}
.co-field textarea { height: auto; min-height: 11em; padding: .85em 1.1em; line-height: 1.55; resize: vertical; }
.co-field input:hover, .co-field textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.co-field input:focus, .co-field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.co-field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--acc-text); }
.co-field [aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--acc-text); }
.co-hint { margin: 0; font-size: var(--t-meta); line-height: 1.4; color: var(--ink-3); }
.co-err { margin: 0; font-size: var(--t-meta); font-weight: 600; line-height: 1.4; color: var(--acc-text); }
.co-err[hidden] { display: none; }

/* the subject: four chips (real radio buttons); the chosen one is filled ember */
.co-topics { margin: 0 0 1.45em; padding: 0; border: 0; }
.co-topics legend { margin-bottom: .6em; }
.co-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.co-chip { position: relative; display: inline-flex; }
.co-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.co-chip span { display: inline-flex; align-items: center; height: 2.75em; padding: 0 1.15em; border-radius: 999px; font-size: var(--t-ui); font-weight: 500; white-space: nowrap; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--co-field-edge); cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.co-chip:hover span { color: var(--acc-text); }
.co-chip input:checked + span { background: #C8470A; color: #F9F9F9; box-shadow: 0 2px 10px rgba(200,71,10,.28); }
.co-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.co-topics.is-invalid .co-chip input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--acc-text); }
.co-topics .co-err { margin-top: .6em; }

/* the send button: a solid pill (the one primary action on the page) */
.co-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1em 1.6em; margin-top: .5em; }
.co-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5em; flex: none; height: 3.125em; padding: 0 .1875em 0 1.5em; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 500; cursor: pointer; }
.co .co-btn { color: var(--bg); } /* outranks ".co a { color: inherit }" when the pill is a link */
.co-btn > span:first-child { font-size: var(--t-ui); white-space: nowrap; }
.co .co-btn .sy-go { background: var(--bg); color: var(--ink); }
.co .co-btn:hover .sy-go, .co .co-btn:focus-visible .sy-go { background: #E85002; color: #ffffff; }
.co-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.co-btn[aria-disabled="true"] { cursor: progress; opacity: .7; }
.co-note { flex: 1 1 20em; margin: 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); }
.co-note a, .co-link { font-weight: 600; color: var(--ink); transition: color .25s ease; }
.co-note a:hover, .co-note a:focus-visible, .co-link:hover, .co-link:focus-visible { color: var(--acc-text); }

/* bots fill this in; people never see it (kept in the page, off screen, because some bots skip hidden fields) */
.co-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* sent */
.co-done { display: flex; flex-direction: column; align-items: flex-start; }
.co-done:focus { outline: 0; }
.co-done__icon { display: inline-grid; place-items: center; width: 3.25em; height: 3.25em; margin-bottom: 1.3em; border-radius: 50%; background: #E85002; color: #ffffff; }
.co-done__icon svg { width: 1.3em; height: 1.3em; }
.co-done__text { margin: .8em 0 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.co-done__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.6em; margin-top: 2em; }
.co-link { font-size: var(--t-ui); }

/* the notes beside the form: the page's own words, a size down */
.co-notes { padding-top: .3em; font-size: clamp(14.5px, calc(.15vw + 12.8px), 16.5px); line-height: 1.55; color: var(--ink-2); overflow-wrap: break-word; }
.co-notes > * { margin-top: 0; margin-bottom: .9em; }
.co-notes > :last-child { margin-bottom: 0; }
.co-notes h2, .co-notes h3 { margin: 1.7em 0 .35em; font-family: var(--display); font-weight: 500; font-size: 1.14em; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.co-notes > h2:first-child, .co-notes > h3:first-child { margin-top: 0; }
.co-notes strong { font-weight: 700; color: var(--ink); }
.co-notes ul { padding-left: 1.2em; }

/* ---------- wide screens: the rail rides beside the text ---------- */
@media (min-width: 1100px) {
  .co-grid.has-rail { grid-template-columns: minmax(0, 1fr) 260px; column-gap: clamp(40px, 4vw, 80px); }
  .co-grid--contact.has-rail { grid-template-columns: minmax(0, 1fr) 300px; }
  .co-grid--contact .co-main { max-width: calc(var(--co-fs) * 38); }
  .co-toc-m { display: none; }
}
@media (max-width: 1099px) {
  .co-grid > .co-rail:not(.co-notes) { display: none; }
  .co-notes { max-width: var(--co-measure); margin-top: 2.6em; padding-top: 0; }
  .co-grid--contact .co-main { max-width: calc(var(--co-fs) * 38); }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .co { font-size: 15px; }
}
@media (max-width: 560px) {
  .co-row { grid-template-columns: minmax(0, 1fr); }
  .co-card { padding: 1.6em 1.3em 1.5em; border-radius: 1.4em; }
  .co-submit { flex-direction: column; align-items: stretch; }
  .co-submit .co-btn { width: 100%; }
  .co-note { flex: none; }
  .co-end { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .co-chip span { padding: 0 1em; }
}
@media (pointer: coarse) {
  .co-chip span { min-height: 44px; }
  .co-toc-m a { padding: .8em 0; }
  .co-note a, .co-link, .co-alert a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .co-toc a::before, .co-toc-m .sy-chev { transition: none; }
}