/*
Theme Name:   CEEI Field Report
Theme URI:    https://ceei.us
Description:  Standalone block theme for the Center for Economics Enterprise & Innovation. The register of a working document produced by people who go out and measure things, rather than a brochure. Design tokens live in theme.json and are the source of truth. Structure and components live here. Do not edit styles in the Site Editor without exporting back to files with create-block-theme, or the database will silently override both.
Author:       CEEI
Version:      0.6.14
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ceei-fieldreport
*/

/* ==========================================================================
   Tokens come from theme.json. Nothing here redefines a colour or a size.
   Motion tokens: --wp--custom--ease--out, --wp--custom--ease--in-out,
                  --wp--custom--duration--press, --wp--custom--duration--hover
   ========================================================================== */

/* --------------------------------------------------------------------------
   Foundations
   -------------------------------------------------------------------------- */

/* Numerals line up in every column. Non-negotiable for a site built on figures. */
body {
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kill orphans and ragged headline breaks. The cheapest typographic upgrade there is. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title { text-wrap: balance; }

p, li, figcaption, dd { text-wrap: pretty; }

/* Anchored headings do not hide under the masthead. */
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: 5rem; }

::selection {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------------------
   Focus and keyboard. 29 CFR Part 38 obligation, not a preference.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* The accent does not carry on the dark band, so the ring inverts there. */
.ceei-masthead :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--wp--preset--color--paper);
}

.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Links. Underline is the default state, not a hover reward.
   -------------------------------------------------------------------------- */

.entry-content a,
.wp-block-post-content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  transition: text-decoration-color var(--wp--custom--duration--hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .entry-content a:hover,
  .wp-block-post-content a:hover {
    text-decoration-color: var(--wp--preset--color--accent);
  }
}

/* --------------------------------------------------------------------------
   Buttons. A pressable thing must answer the press.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
  transition: transform var(--wp--custom--duration--press) var(--wp--custom--ease--out),
              background-color var(--wp--custom--duration--hover) ease;
}

.wp-block-button__link:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   The masthead. The only CEEI logotype that exists is a white knockout, so the
   band is dark by necessity as well as by register.
   -------------------------------------------------------------------------- */

.ceei-masthead {
  background: var(--wp--preset--color--masthead);
  color: var(--wp--preset--color--on-masthead);
}

/* Buttons excluded. The masthead's own button takes its ground from the
   on-masthead colour, so a blanket link colour paints its text the same
   value as the ground behind it: on the ink palette that button rendered as
   an empty light rectangle with the words invisible inside it. The button
   carries its own pair of preset colours and needs no help. */
.ceei-masthead a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--on-masthead);
  text-decoration: none;
}
.ceei-masthead a { text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .ceei-masthead a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }
}

.ceei-masthead .wp-block-site-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.ceei-masthead .wp-block-navigation { --wp--style--block-gap: 1.75rem; }

/* --------------------------------------------------------------------------
   Hairlines instead of card shadows, everywhere.
   -------------------------------------------------------------------------- */

.ceei-rule-top    { border-top: 1px solid var(--wp--preset--color--rule); }
.ceei-rule-bottom { border-bottom: 1px solid var(--wp--preset--color--rule); }

/* --------------------------------------------------------------------------
   Eyebrow. Small, tracked, sans. Sits above a heading and names the section.
   -------------------------------------------------------------------------- */

.ceei-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Marginalia. Sources, dates and notes sit in flow as a bordered aside at
   every width, on the same left edge as the heading above them. The
   floated margin column was removed 2026-09-03: it pinned a note beside
   each h2 and squeezed the heading, which read as misalignment.
   -------------------------------------------------------------------------- */

.ceei-note {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-muted);
  border-left: 2px solid var(--wp--preset--color--rule);
  padding-left: 1rem;
}


/* --------------------------------------------------------------------------
   Status chip. Framework sections 5 and 28: what exists, what is proposed and
   what is CEEI inquiry must be distinct structurally, not as a caveat line.
   -------------------------------------------------------------------------- */

.ceei-status {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--wp--preset--color--rule-strong);
  color: var(--wp--preset--color--ink);
  border-radius: 2px;
}

.ceei-status--operating {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   The ten-county block. A design element and searchable text at once.
   -------------------------------------------------------------------------- */

.ceei-county-block {
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 2.5rem 0 3rem;
  margin: 3.5rem 0;
}

.ceei-county-block > h2 {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
  margin: 0 0 1.5rem;
}

.ceei-county-block ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  column-gap: 2.5rem;
}

.ceei-county-block li {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 0.35rem 0;
}

.ceei-county-block .ceei-partial {
  display: block;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
  margin-top: -0.15rem;
}

/* --------------------------------------------------------------------------
   The method. Seven steps, numbered, hairline separated.
   -------------------------------------------------------------------------- */

.ceei-steps {
  list-style: none;
  margin: 2.5rem 0; padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--wp--preset--color--rule);
}

.ceei-steps li {
  counter-increment: step;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 1.5rem 0 1.5rem 4.5rem;
  position: relative;
}

.ceei-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1.7rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--ink-muted);
}

.ceei-steps strong {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   Index rows. One line each, legible without a click. The CEI pattern.
   -------------------------------------------------------------------------- */

.ceei-index {
  border-top: 1px solid var(--wp--preset--color--rule);
  margin: 2.5rem 0;
}

.ceei-index > * {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 1.5rem 0;
  margin: 0;
}

.ceei-index h3 {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 0.35rem;
}

.ceei-index p {
  margin: 0;
  color: var(--wp--preset--color--ink-muted);
}

/* --------------------------------------------------------------------------
   Partner logos. Equal visual weight, no card, no shadow. Height sets the
   size so a tall mark and a wide wordmark read as the same weight, not
   width, which would let an oversquare mark dominate a wide one.
   -------------------------------------------------------------------------- */

.ceei-partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 2.5rem;
  margin: 1.75rem 0;
  padding: 2.25rem clamp(1.5rem, 4vw, 3rem);
  background: var(--wp--preset--color--paper-sunk);
  border-radius: 2px;
  /* Widened via the same .ceei-section:has() mechanism .ceei-index already
     uses on this page, not a 100vw full-bleed: 100vw counts the scrollbar,
     so that box rendered a few pixels wider than the visible page, and with
     justify-content:space-between the last logo landed past the clipped
     edge -- invisible -- while the overflow shoved everything after it
     sideways. This stays inside normal flow, no viewport-width math.
     Framed as a tinted band (same paper-sunk surface .ceei-evidence__item
     uses) rather than bare images on white -- that framing, not raw pixel
     height, is what was actually making the row read as an afterthought. */
}

.ceei-partner-logos img {
  /* !important is load-bearing here: core ships .wp-block-image
     img{height:auto;max-width:100%} with no !important of its own, tied
     in specificity with this rule, and it was winning the cascade -- the
     real reason these kept rendering small no matter what number was set
     here. Some of the source uploads are as small as 69x90px natively, so
     losing this tie meant falling back to raw pixel size. */
  height: 6.5rem !important;
  width: auto !important;
  max-width: 18rem !important;
  object-fit: contain;
  display: block;
}

/* --------------------------------------------------------------------------
   Footer link list. No bullets, hairline dividers do the separating.
   -------------------------------------------------------------------------- */

.ceei-footer-list {
  list-style: none;
  margin: 0; padding: 0;
}

.ceei-footer-list li { margin: 0; }

.ceei-footer-list a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .ceei-footer-list a:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   Donate. Always secondary: CEEI's money is grants and contracts, so this
   never takes a fill, and never CEEI Blue. Ink on the page ground with a
   rule-strong edge, accent on hover. All three pairs are in contrast-check.
   Footer on every page and the Support CEEI section on About, both to
   /donate/, which holds the PayPal link. Nowhere else.
   Reversed in part, 14 Oct 2026, for the masthead only. AI & Innovation Lead: "where is the
   donate button in the top right corner switch out the Work with us button".
   The masthead CTA now reads Donate and keeps the CTA's own style, below.
   -------------------------------------------------------------------------- */

.ceei-donate > .wp-block-button__link,
.ceei-donate > .wp-block-button__link:hover,
.ceei-donate > .wp-block-button__link:active {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--rule-strong);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .ceei-donate > .wp-block-button__link:hover {
    color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
  }
}

.ceei-footer-support .wp-block-buttons,
.ceei-support .wp-block-buttons { margin-top: var(--wp--preset--spacing--20); }

/* Text for screen readers only. Used where the visible label is short and
   the full meaning, such as a link opening a new tab, needs saying aloud. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   Tables carry their source. Never a merged total.
   -------------------------------------------------------------------------- */

.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table th,
.wp-block-table td {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 0.6rem 1rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
}

.wp-block-table thead th {
  border-bottom: 1px solid var(--wp--preset--color--rule-strong);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

/* Wide tables scroll inside themselves. The page never scrolls sideways. */
.wp-block-table { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Reduced motion. Gentler, not zero. Opacity and colour still carry meaning,
   so only movement is removed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Transforms are the motion. Kill those, keep colour and opacity fades. */
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color, text-decoration-color !important; }
  .wp-block-button__link:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Components. Added 2026-08-30 for the block patterns in /patterns, which are
   the ten reusable components brief section 11 asks for. Hairlines and space
   do the work here, not shadows and not a coloured card behind every item.
   -------------------------------------------------------------------------- */

/* The base card, and the four variants that only differ by what they carry. */
.ceei-card > *:last-child { margin-bottom: 0; }

.ceei-card .ceei-eyebrow { margin-bottom: 0.35rem; }

.ceei-card h3 { margin: 0 0 0.4rem; }

.ceei-card p { margin: 0 0 0.6rem; }

/* A project or initiative names its status before it names anything else, so
   a reader cannot mistake a proposal for something operating. */
.ceei-card--initiative .ceei-status,
.ceei-card--project .ceei-status { margin-bottom: 0.6rem; }

/* An article carries its content type and its byline, because brief section 7
   requires human editorial accountability on the public product. */
.ceei-card--article .ceei-eyebrow { color: var(--wp--preset--color--accent); }
.ceei-card--article p:last-child { margin-bottom: 0; }

/* Leadership placeholders. Every field ships as a bracketed confirm until the
   roster and consent exist, so an unfinished person card reads as unfinished
   rather than as a person nobody has heard of. */
.ceei-card--person h3 { color: var(--wp--preset--color--ink-muted); }
.ceei-card--person p:last-child { margin-bottom: 0; }

/* Partner categories are a plain hairline list. No logos, because an
   unconfirmed partner logo is the fastest way to publish a claim CEEI cannot
   support. */
.ceei-partner > *:last-child { margin-bottom: 0; }
.ceei-partner h3 { margin: 0 0 0.4rem; }
.ceei-partner p  { margin: 0; color: var(--wp--preset--color--ink-muted); }

/* Contact block. Rules top and bottom, generous inside, nothing decorative. */
.ceei-contact p { margin: 0 0 0.75rem; }
.ceei-contact p:last-child { margin-bottom: 0; }
.ceei-contact a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* The CTA band. The only place a full-width dark ground appears in the body,
   which is what stops it competing with the masthead. */
.ceei-cta-band h2 { margin-bottom: 0.6rem; }
.ceei-cta-band p  { max-width: 46rem; }
.ceei-cta-band a:not(.wp-block-button__link) { color: var(--wp--preset--color--on-masthead); }

/* Explicit direction, 2026-09-18: centered, not flush left like the rest of
   the page's sections -- a deliberate exception for this one band. */
.ceei-cta-band { text-align: center; }
.ceei-cta-band.is-layout-constrained > *:not(.ceei-cta-band__field) { margin-inline: auto !important; max-width: 46rem; }
.ceei-cta-band .wp-block-buttons { justify-content: center; }

/* The same ordered block field as the hero and the banners, sized for this
   band's own wide-and-short proportions rather than stretching the hero's
   artwork. Ground is always the masthead navy here regardless of theme, so
   screen blend applies unconditionally, not gated behind .ceei-dark. */
.ceei-cta-band { position: relative; overflow: hidden; }
.ceei-cta-band__field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  /* This band centers its copy, unlike the hero's flush-left column, so the
     field has to clear out of an ellipse in the middle instead of a side
     gradient, or it sits on top of the heading and button. */
  -webkit-mask-image: radial-gradient(ellipse 62% 96% at 50% 50%, transparent 0%, transparent 80%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 96% at 50% 50%, transparent 0%, transparent 80%, #000 100%);
}
/* Blend mode lives on the svg, not the masked wrapper above: the two on one
   element silently stop the mask from clipping at all in this engine. See
   the same note on .ceei-hero__field. */
.ceei-cta-band__field svg { display: block; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0.85; }
.ceei-cta-band > *:not(.ceei-cta-band__field) { position: relative; z-index: 1; }

/* The persistent Donate button in the masthead (Work with us until 0.6.12). It sits beside the nav
   rather than inside it, so it survives the mobile overlay collapsing. */
.ceei-nav-cta .wp-block-button__link { padding: 0.55rem 1.1rem; }

@media (max-width: 781px) {
  .ceei-nav-cta { display: none; }
}

/* --------------------------------------------------------------------------
   Ground Truth (dark style variation). Added 2026-09-01, researched rather
   than eyeballed -- see strategy/website/build/design-research/ for sources.
   Scoped to .ceei-dark on <body>, which the Ground Truth style variation
   sets, so all of it is inert under the default light style.
   -------------------------------------------------------------------------- */

/* Light-on-dark text looks heavier than the same weight on white (irradiation
   / halation). Compensate by ~12%, not by eye. Archivo is a fairly even-stroke
   grotesque, so it thins a little faster than a serif would at the same
   multiplier -- 0.88 rather than the more commonly cited 0.85. Never combine
   this with -webkit-font-smoothing:antialiased at small sizes; pick one. */
.ceei-dark {
  --wt-mult: 0.88;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ceei-dark, .ceei-dark p, .ceei-dark li { font-weight: calc(400 * var(--wt-mult)); }
.ceei-dark :where(h1, h2, h3, .wp-block-heading) { font-weight: calc(700 * var(--wt-mult)); }
.ceei-dark .ceei-eyebrow, .ceei-dark .ceei-status { font-weight: calc(600 * var(--wt-mult)); }

/* Letter-spacing crosses from negative (display) to positive (body) somewhere
   around 24-32px. On a dark ground the crossover shifts slightly earlier
   because halation is already visually closing letterforms, so body copy
   gets a touch more air than it would on paper. Never combine with
   font-variation-settings for the same axis -- it silently wins the cascade
   over font-weight/font-stretch regardless of source order. */
.ceei-dark { letter-spacing: 0.005em; }
.ceei-dark :where(h1, .wp-block-post-title) { letter-spacing: -0.035em; }
.ceei-dark h2 { letter-spacing: -0.03em; }
.ceei-dark h3 { letter-spacing: -0.015em; }
.ceei-dark .ceei-eyebrow { letter-spacing: 0.11em; font-stretch: 108%; }

/* Body serif reads looser on dark than on paper -- one notch more leading,
   because the ascender/descender space is where the halation glow pools. */
.ceei-dark { line-height: 1.72; }
.ceei-dark :where(h1, h2, h3, .wp-block-heading) { line-height: 1.04; }

/* Width axis, used functionally, never decoratively, and never on body text.
   A display headline set at wdth 100 wastes measure at very large sizes; a
   data column set at wdth 100 wastes width it doesn't have. This only has an
   effect because the bundled Archivo file was re-fetched 2026-09-01 to
   restore the wdth axis a prior export had stripped -- if font-stretch stops
   visibly doing anything, that regression is the first thing to check. */
.ceei-dark :where(h1, .wp-block-post-title) { font-stretch: 92%; }
.ceei-dark .ceei-data, .ceei-dark .wp-block-table td { font-stretch: 84%; }

/* CEEI Blue at full saturation passes 4.5:1 as text only on the base ground.
   It drops to 4.0-4.5:1 on every raised surface -- fine for large/bold type
   and for fills, wrong for a body-copy link. Sky is the system's own
   documented answer ("dividers on dark grounds", brand/palette.py), same hue
   family, and it clears AA on every layer including the raised-on-raised one.
   Brand blue stays reserved for fills, rules, chart marks and large display
   type set on the ground colour itself -- never for a running-text link. */
/* Buttons are excluded. A button carries its own ground and its own text
   colour from the palette; letting the link rule reach it leaves accent on
   ink, which measures 1.8:1. The rule never bit before because nothing ever
   put .ceei-dark on the page -- the style variation swaps the palette at
   :root and adds no class. The ground switch does, so it does now. */
.ceei-dark .entry-content a:not(.wp-block-button__link),
.ceei-dark .wp-block-post-content a:not(.wp-block-button__link) { color: var(--wp--preset--color--accent); }
.ceei-dark .ceei-status--operating {
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand);
}

/* Tables, reduced per the Rutter method: no full-width stretch, no fills, no
   zebra by default (spacing plus a baseline carries it), text left-aligned,
   numbers right-aligned and tabular so magnitudes line up in a column. A
   table is a catalogue to be interrogated, not a picture. */
.ceei-dark .wp-block-table table { width: auto; max-width: 100%; }
.ceei-dark .wp-block-table td,
.ceei-dark .wp-block-table th {
  font-variant-numeric: tabular-nums lining-nums;
  text-align: left;
}
.ceei-dark .wp-block-table td:is(.has-text-align-right, [data-numeric]) {
  text-align: right;
}

/* One reveal pattern, used identically everywhere, fired once, never on
   scroll-up, nothing on page load itself -- a staggered hero entrance is the
   single loudest "template" tell there is, and it costs LCP besides. */
.ceei-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--wp--custom--ease--out),
              transform 320ms var(--wp--custom--ease--out);
}
.ceei-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ceei-reveal {
    transition-duration: 180ms;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   The hero. Direction D, Field Instrument, ported from
   strategy/website/build/direction-d-field-instrument.html. Full bleed, copy
   held left at the measure, and the mark bled off the right edge as the
   composition rather than as decoration. Transform, opacity and mask only --
   nothing here reads scroll position or forces layout in a frame.
   -------------------------------------------------------------------------- */

.ceei-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* The hero field. The same ordered block field as the social banners and the
   OG card, generated by svg() beside dither() in brand/make-covers.py, same
   hash and bands, so the site and the banners are one artwork. Ground, not a
   mark or a wordmark: the avatar already carries the mark and the bio
   already carries the name, and repeating either here was double branding.
   Decorative, which is why the pattern marks it aria-hidden. */
.ceei-hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Fades out toward the copy, so the left edge never crowds the headline.
     Flat hidden through 62%, not a ramp starting at 4%: the paragraph's
     longest line and the second button both measure out past the old 46%
     stop, so anything short of a real flat zone here still leaks faint,
     partially-masked blocks across the copy. Measured 2026-09-22 against
     the actual rendered hero, not assumed from the source rem value. */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 62%, #000 78%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 62%, #000 78%);
}

/* The band under the buttons. A second surface rather than a second mask
   layer on the first: two mask layers composited with `add` blanked the
   whole field in this engine instead of taking their union, which reads
   exactly like a mask that is not applying and is not worth debugging when
   one element with one gradient does the job. Same artwork, from the file
   the CTA band and the banners use.
   It stops 5rem short of the hero's floor, measured in rem from that edge
   rather than as a percentage of a hero whose height moves with the
   viewport. The buttons sit 5.5rem above it and are the one thing in the
   hero that must never have anything behind them. */
.ceei-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("assets/img/field.svg");
  background-repeat: repeat-x;
  background-position: right bottom;
  background-size: 1600px 720px;
  /* Weight in one corner, falling off in every direction from it, instead of
     an even strip the width of the page. A strip of blocks with a straight
     top edge and the same density end to end is a loading bar: the eye reads
     it as a component, measures it, and waits for it to fill. A radial
     falloff has no edge to find and no rhythm to count, so it reads as the
     field running out rather than as a thing in its own right.
     Anchored bottom right, the same side as the mark and the field above it,
     which leaves the bottom left -- where the two buttons are -- clear.
     The falloff is steep on purpose: a shallow one leaves the whole width
     half-covered, and a dense field at half alpha is a grey smear rather
     than a scatter. By 58% there is nothing at all. */
  -webkit-mask-image: radial-gradient(85% 170% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.42) 30%, transparent 58%);
          mask-image: radial-gradient(85% 170% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.42) 30%, transparent 58%);
}
.ceei-dark .ceei-hero::after { opacity: 0.6; }

/* And a seam of the same field between sections, so the blocks carry on down
   the page instead of ending with the hero.

   The gap between sections is 42px, at every width from 390 to 1600, and a
   section's text runs flush to its own box top and bottom. So the seam is
   18px tall sitting 30px above the section, which leaves 12px of clear
   ground above it and 12px below. That is the whole budget and there is no
   more of it.

   This was 76px in an 88px offset, on a measurement of 97px taken from
   sections that were still sitting in their reveal transform, below where
   they finally come to rest. The band was two thirds taller than the space
   it had, and it landed on the last line of every section -- a row of links
   on four of them. Nothing about it looked wrong in the source. */
.wp-block-post-content > .ceei-section { position: relative; }
.wp-block-post-content > .ceei-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.875rem;
  height: 1.125rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("assets/img/field.svg");
  background-repeat: repeat-x;
  background-size: 1600px 720px;
  /* Same reasoning as the hero's corner, and alternating sides so the seams
     are a rhythm down the page rather than six identical rules.
     One sampling of the artwork for both sides, not two. Moving the
     background to the far side as well as the mask lands on a denser part of
     the field, and the left seam came out twice the weight of the right one
     -- the same band the hero's just stopped being. Only the falloff moves. */
  background-position: right bottom;
  -webkit-mask-image: radial-gradient(52% 120% at 94% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 34%, transparent 62%);
          mask-image: radial-gradient(52% 120% at 94% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 34%, transparent 62%);
}
.wp-block-post-content > .ceei-section:nth-of-type(even)::before {
  -webkit-mask-image: radial-gradient(52% 120% at 6% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 34%, transparent 62%);
          mask-image: radial-gradient(52% 120% at 6% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 34%, transparent 62%);
}
/* Full bleed, like the section it leads into. */
.wp-block-post-content > .ceei-section--geo::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }

.ceei-hero__field svg { display: block; width: 100%; height: 100%; }

/* The field's blocks carry their own colour, baked in at generation so the
   site and the banners are pixel-identical. A dark ground needs a different
   treatment than a fill swap: screen keeps every block additive against
   navy, the same role the old glow played, instead of pasting light
   rectangles over a dark surface.
   Set on the svg, not the masked wrapper: mask-image and mix-blend-mode on
   the same element silently stop clipping in this engine, the mask just
   never applies and the whole field shows edge to edge. Verified 2026-09-22
   with a minimal repro; splitting the two onto parent and child fixes it. */
.ceei-dark .ceei-hero__field svg { mix-blend-mode: screen; opacity: 0.85; }

/* The animated mark. It arrives white and is coloured in: a second, blue
   copy of the same glyph sits over a white one, and a gradient mask on that
   copy sweeps up from the bottom left across the window the field's blocks
   are landing in (their delays run 0.15s to 1.00s, each 0.55s long), so the
   blue reads as brought by the field rather than as a fade the mark does to
   itself. Lives in the field's own dense corner, well inside the mask above,
   so neither it nor anything it settles ever reaches the copy on the left.

   The sweep is one registered percentage, not two gradient stops assumed to
   animate: unregistered custom properties interpolate discretely and a bare
   percentage inside mask-image cannot be keyframed at all. Where @property
   is missing the property holds its declared value, which is the finished
   state, so the mark is simply blue -- the same place every other fallback
   here lands. Mask on the wrapper, never alongside a blend mode on one
   element: that combination silently stops the mask clipping (see the field
   note above). */
@property --ceei-wash {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 130%;
}

.ceei-hero__mark {
  position: absolute;
  top: 3%;
  right: 14%;
  width: min(240px, 19vw);
  z-index: 1;
  pointer-events: none;
}
.ceei-hero__mark svg { display: block; width: 100%; height: auto; }
/* Under about a laptop the measure reaches the right edge and the mark has
   nowhere to sit beside it, so it drops to the hero's bottom right corner,
   below the copy, where it still reads and still hands itself to the
   masthead on scroll. Measured against the rendered hero, not assumed. */
@media (max-width: 980px) {
  /* Below about a laptop the copy runs the full width of the screen -- at
     390px the paragraph reaches 82% of it, and by 600px it reaches 94% --
     so there is no column beside the measure for the field to sit in, and
     the diagonal mask above, which is a fraction of the width, drops blocks
     straight onto the ends of lines. The field keeps the strip above the
     copy and nothing else: the eyebrow's first line sits 95px below the
     hero's top edge on a 390px screen, so the blocks are gone by 84px.
     Everything below that belongs to the type. The band under the buttons
     is a separate surface and is unaffected. */
  .ceei-hero__field {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 3.5rem, transparent 5.25rem);
            mask-image: linear-gradient(to bottom, #000 0, #000 3.5rem, transparent 5.25rem);
  }

  /* The two buttons sit side by side on a phone and reach the right edge,
     which is where the corner drift is, so it gets a shorter box: its 9rem
     reached up behind "Work with CEEI" and the scan caught 8% of that line
     carrying blocks. */
  .ceei-hero::after { height: 5rem; }

  .ceei-hero__mark {
    top: 5.25rem;
    bottom: auto;
    right: 3%;
    width: min(150px, 22vw);
    transform: none;
  }
  /* Down out of the corner and in off the edge, into the pocket beside the
     eyebrow rather than in a band of its own above it. The eyebrow and the
     headline both stop well short of the right edge on a phone, so the mark
     shares that vertical space instead of pushing everything down. */
  .ceei-hero__body { padding-top: 5.75rem; }
  @media (prefers-reduced-motion: reduce) {
    .ceei-hero__mark, .ceei-hero__mark.is-handed { transform: none; }
  }
}
/* One bed per block, under the glyph. The mark's counters are holes in an
   even-odd path, so without these the field behind shows straight through
   the inside of every letter. Ground colour, so the bed is invisible except
   for what it stops. */
.ceei-hero__mark-bed { fill: var(--wp--preset--color--paper); }
/* White, but not the ground's own white: on paper an exact match leaves
   nothing to look at for the first half second but a hole in the grid. */
.ceei-hero__mark > svg path { fill: color-mix(in srgb, var(--wp--preset--color--brand) 7%, #FFFFFF); }
.ceei-dark .ceei-hero__mark > svg path { fill: var(--wp--preset--color--ink); }
.ceei-hero__mark-wash {
  position: absolute;
  inset: 0;
  display: block;
}
.ceei-hero__mark-wash path { fill: var(--wp--preset--color--brand); }

.ceei-hero__mark.is-washing .ceei-hero__mark-wash {
  --ceei-wash: 130%;
  -webkit-mask-image: linear-gradient(38deg, #000 var(--ceei-wash), transparent calc(var(--ceei-wash) + 34%));
          mask-image: linear-gradient(38deg, #000 var(--ceei-wash), transparent calc(var(--ceei-wash) + 34%));
  animation: ceei-mark-wash 1.15s cubic-bezier(0.33, 0, 0.2, 1) 0.15s backwards;
}
@keyframes ceei-mark-wash { from { --ceei-wash: -34%; } }

@media (hover: hover) { .ceei-hero__mark { pointer-events: auto; cursor: pointer; } }
.ceei-hero__mark:active { filter: brightness(0.85); transition: filter 40ms; }
@media (prefers-reduced-motion: reduce) {
  .ceei-hero__mark.is-washing .ceei-hero__mark-wash { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* Each block in the field carries --dx/--dy (its offset from the mark, set
   at generation time in svg_burst) and its own animation-delay, inline, so
   the settle reads as emitted from the mark rather than fading in as one
   sheet. At rest -- no .is-settling, no JS, or reduced motion -- every
   block is simply at its authored position, same as the plain field. */
.ceei-hero__field.is-settling .ceei-field-dot {
  /* Scale each block about its own centre. The SVG default is the viewBox
     origin, which pulled every start point off the mark by up to 700px. */
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) scale(0.25);
  animation: ceei-field-settle 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ceei-field-settle { to { opacity: 1; transform: translate(0, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ceei-hero__field.is-settling .ceei-field-dot { animation: none; opacity: 1; transform: none; }
}

/* The handoff to the masthead. Once the mark has scrolled up under the
   header it stops being two marks on one screen: it breaks into blocks that
   fly to wherever .ceei-brand actually is, measured live rather than
   assumed, since the masthead collapses at 781px and the brand moves. The
   blocks are built and thrown away by theme.js, so nothing here exists on a
   page that never scrolls. Above the masthead's z-index 30 (35 on phones)
   so they land on the brand rather than sliding behind it.
   One way. Scrolling back up does not bring the mark back: there is one
   mark on the page at a time, and once the masthead holds it the hero has
   no claim on it until the page is loaded again. */
.ceei-hero__mark.is-handed {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.26s ease-out, transform 0.5s cubic-bezier(0.5, 0, 0.75, 0);
}
/* The masthead brand waits for the blocks. While the hero still holds the
   mark, the header shows none, so the reader sees one mark travel rather
   than two on screen at once. It fades in as the blocks land. Gated on
   .ceei-js, set in the head, so without JS the brand is simply there, and
   off entirely under reduced motion, where no handoff runs. */
@media (prefers-reduced-motion: no-preference) {
  .ceei-js body:has(.ceei-hero__mark) .ceei-brand svg { transition: opacity 0.35s ease-out 0.45s; }
  .ceei-js body:has(.ceei-hero__mark:not(.is-handed)) .ceei-brand svg { opacity: 0; }
}
.ceei-morph {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.ceei-morph i {
  position: absolute;
  border-radius: 2px;
  background: var(--wp--preset--color--brand);
  transition: transform 0.62s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.62s ease-in;
}
.ceei-morph.is-flying i { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ceei-hero__mark, .ceei-hero__mark.is-handed { transition: none; opacity: 1; transform: none; }
  .ceei-morph { display: none; }
}

/* The shell. Wide-size and centred, with the copy itself held to the measure
   on the left -- Direction D sets the hero in the left columns, not centred
   in the page. */
.ceei-hero__body {
  position: relative;
  z-index: 1;
  max-width: var(--wp--style--global--wide-size, 78rem);
  margin-inline: auto;
  padding: clamp(3.6rem, 9vw, 7.25rem) clamp(1.125rem, 3vw, 2.5rem)
           clamp(2.9rem, 7vw, 5.5rem);
}

.ceei-hero__body > * { max-width: var(--wp--custom--measure); }

/* The eyebrow takes the accent here and only here. On the hero it is the one
   piece of colour above the fold; everywhere else it stays grey so it does
   not compete with links. */
.ceei-hero .ceei-eyebrow {
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.19em;
  margin-bottom: clamp(1.125rem, 3vw, 1.75rem);
}

/* font-stretch is legitimate on this one line because the bundled Archivo
   carries the wdth axis. Display type only. Never body text, and never in
   combination with font-variation-settings, which silently wins the cascade
   over font-stretch regardless of source order. */
.ceei-hero h1 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-stretch: 74%;
  line-height: 0.92;
  letter-spacing: -0.042em;
  margin: 0 0 1.375rem;
}

/* An unfilled slot, shown rather than hidden, per brief section 16. Dashed,
   because a solid border reads as a finished callout rather than a hole
   somebody still owes an answer for. */
.ceei-confirm {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.6;
  color: var(--wp--preset--color--ink-muted);
  background: var(--wp--preset--color--paper-sunk);
  border: 1px dashed var(--wp--preset--color--rule-strong);
  padding: 0.75rem 0.95rem;
  margin: 1.125rem 0 0;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Blue as the brand, throughout. 2026-09-03. The default palette moved to the
   brand guide's own grounds (veil, vapor, Deep Navy) after the warm paper read
   as black and white in review. CEEI Blue is 4.08:1 on white, so it carries
   rules, the large hero headline, the mark and the glow, and never sits under
   or as small text. The eyebrow takes Blue Text, which palette.py proves on
   every light ground.
   -------------------------------------------------------------------------- */

.ceei-masthead { border-bottom: 3px solid var(--wp--preset--color--brand); }

.ceei-eyebrow { color: var(--wp--preset--color--accent); }

/* Display size only. At its 2.75rem floor it is still large text, where 3:1
   is the bar and 4.08 clears it. Ground Truth keeps its ink headline. */
.ceei-hero h1 { color: var(--wp--preset--color--brand); }
.ceei-dark .ceei-hero h1 { color: var(--wp--preset--color--ink); }

.wp-block-separator {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
}

.ceei-cta-band { border-top: 3px solid var(--wp--preset--color--brand); }

.ceei-rule-top { border-top: 3px solid var(--wp--preset--color--brand); }

/* --------------------------------------------------------------------------
   The blue field. A modifier on the hero, not a second hero: CEEI Blue fills
   the right of the band behind the mark, with nothing written on it. The
   field never starts before the measure ends, so copy never lands on blue.
   Off on narrow screens, where there is no right.
   -------------------------------------------------------------------------- */

.ceei-hero--field::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: max(58%, 46rem);
  background: var(--wp--preset--color--brand);
  z-index: 0;
}

@media (max-width: 781px) {
  .ceei-hero--field::before { display: none; }
}

/* --------------------------------------------------------------------------
   The legal block in the footer. 29 CFR Part 38 wording, the 501(c)(3) line
   and the three policy links. Small, but it is the half of the accessibility
   obligation no tool tests, so it is never hidden or styled away.
   -------------------------------------------------------------------------- */

.ceei-legal {
  border-top: 1px solid var(--wp--preset--color--rule);
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.6;
  color: var(--wp--preset--color--ink-muted);
}
.ceei-legal p { margin: 0 0 0.5rem; max-width: 70ch; }
.ceei-legal a { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   The shell. 2026-09-03, second review: the page read as a column down the
   middle. Direction D sets everything in the left columns of a wide shell,
   with a margin column on the right for notes and sources. post-content is
   now a default (flow) layout, so nothing here fights core's centred
   constrained rules.
   -------------------------------------------------------------------------- */

main { overflow-x: clip; }

.wp-block-post-content {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 3vw, 2.5rem);
}

.wp-block-post-content > :where(:not(.alignfull)) { max-width: var(--wp--custom--measure); }

.wp-block-post-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* A section is a grid: the measure on the left, a 15rem margin column on the
   right. The note is placed explicitly in column two from row one, so it
   sits beside its own heading and never steals a row from the copy. Below
   1180px there is no right, and the note falls back into flow. */
.wp-block-post-content > .ceei-section { max-width: none; }

@media (min-width: 1180px) {
  .ceei-section {
    display: grid;
    grid-template-columns: minmax(0, var(--wp--custom--measure)) 15rem;
    column-gap: 2.5rem;
    align-items: start;
  }
  .ceei-section > * { grid-column: 1; max-width: none; }
  .ceei-section > .ceei-note {
    grid-column: 2;
    grid-row: 1 / span 40;
    border-left: 0;
    border-top: 1px solid var(--wp--preset--color--rule);
    padding: 0.6rem 0 0;
    margin-top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   The brand in the masthead. Inline SVG so currentColor takes the masthead's
   text colour, left, and it is the home link. 34px matches the old logo rule.
   -------------------------------------------------------------------------- */

.ceei-brand {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--on-masthead);
  text-decoration: none;
}
.ceei-brand svg { display: block; height: 34px; width: auto; }
@media (hover: hover) and (pointer: fine) {
  .ceei-brand:hover svg { color: var(--wp--preset--color--brand); }
}
@media (max-width: 520px) { .ceei-brand svg { height: 28px; } }

/* The masthead stays. Once the page has moved it turns to material: a
   translucent navy with blur, so content reads through it, and the brand
   rule becomes its edge. Reduced transparency gets the solid band back. */
.ceei-masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background-color var(--wp--custom--duration--hover) ease;
}
.ceei-masthead.is-stuck {
  background: color-mix(in srgb, var(--wp--preset--color--masthead) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) {
  .ceei-masthead.is-stuck {
    background: var(--wp--preset--color--masthead);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* Cards lift toward the pointer. Transform only, so reduced motion removes
   it through the rule at the top of this file. */
.ceei-card { transition: transform var(--wp--custom--duration--hover) var(--wp--custom--ease--out); }
@media (hover: hover) and (pointer: fine) {
  .ceei-card:hover { transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   The evidence band. Ported from the comp. Both closest peers anchor their
   homepage on figures. CEEI cannot do that honestly yet, so three of the four
   slots ship visibly empty and owned rather than filled with something
   plausible. The one figure shown is a definition, not an outcome.
   -------------------------------------------------------------------------- */

.wp-block-post-content > .ceei-evidence { max-width: none; }

.ceei-evidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--wp--preset--color--rule);
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.ceei-evidence__item { background: var(--wp--preset--color--paper-sunk); padding: 1.5rem clamp(1.125rem, 3vw, 1.875rem) 1.375rem; }
.ceei-evidence__item p { margin: 0; }
.ceei-evidence__n {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-stretch: 82%;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--wp--preset--color--ink);
}
.ceei-evidence__k {
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.86rem;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 0.6rem !important;
  line-height: 1.45;
  max-width: 26ch;
}
.ceei-evidence__src {
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 0.9rem !important;
  padding-top: 0.6rem;
  border-top: 1px solid var(--wp--preset--color--rule);
}
/* An open slot says so in the accent, at reading size, dashed like every
   other unfilled thing on the site. */
.ceei-evidence__item.is-open { border-top: 2px dashed var(--wp--preset--color--accent); }
.ceei-evidence__item.is-open .ceei-evidence__n {
  color: var(--wp--preset--color--accent);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-stretch: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   The phone. 2026-09-03: not a dialed-down desktop. Same copy, same order,
   a different form: compact masthead, a menu that rises as a sheet, the
   mark as a small blue tile, 44px targets, and the Work with CEEI action
   docked at the thumb once the hero has scrolled away. Apple's rules, not
   Apple's look: interruptible, spring-eased, respects reduced motion and
   the safe areas.
   -------------------------------------------------------------------------- */

a, button, .wp-block-button__link { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 781px) {
  .ceei-masthead { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
  .ceei-masthead .alignwide { gap: 0.75rem; flex-wrap: nowrap; }

  .ceei-hero__body { padding-top: 5.75rem; }
  .ceei-hero--field::before { display: none; }

  /* The dock. The masthead's own Donate button, moved to the body by
     the script and docked. One object, not a second CTA. */
  .ceei-nav-cta {
    display: block;
    position: fixed;
    left: 0.75rem; right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    transform: translateY(calc(100% + 1.5rem));
    transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .ceei-nav-cta.is-shown { transform: none; }
  .ceei-nav-cta .wp-block-button__link {
    display: flex; justify-content: center;
    width: 100%; min-height: 52px;
    font-size: 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--masthead) 28%, transparent);
  }
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

  /* The menu rises as a sheet. Core provides the overlay; this is its form. */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
  .wp-block-navigation__responsive-container.is-menu-open {
    top: auto !important;
    max-height: 86vh;
    border-radius: 20px 20px 0 0;
    padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--wp--preset--color--masthead) 45%, transparent),
                0 -12px 40px color-mix(in srgb, var(--wp--preset--color--masthead) 30%, transparent);
    animation: ceei-sheet 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.5rem; font-weight: 600; padding: 0.85rem 0; min-height: 44px;
  }
  .ceei-section { padding-block: 0.25rem; }
  footer .alignwide { gap: 1.75rem; }
}

@keyframes ceei-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}

/* --------------------------------------------------------------------------
   Third review, 2026-09-03. Two things: the mark was washed out at a 14%
   tint and the inner pages left the right half of the shell empty. The mark
   now carries full CEEI Blue, and any section whose content is an index
   widens to the whole main column and lays its rows out as term and
   description across it, the way an index reads in print.
   -------------------------------------------------------------------------- */

/* The logo reads at a glance: the wordmark is two lines of small type and
   34px made it a label. */
.ceei-brand svg { height: 44px; }
@media (max-width: 520px) { .ceei-brand svg { height: 30px; } }

/* Inner pages open at display size in the brand, like Home. */
.wp-block-post-content > .ceei-section:first-child > h1 {
  font-size: var(--wp--preset--font-size--display);
  font-stretch: 82%;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--wp--preset--color--brand);
  max-width: 14ch;
}
.ceei-dark .wp-block-post-content > .ceei-section:first-child > h1 { color: var(--wp--preset--color--ink); }

/* Index rows use the width: term left, description right, one hairline per
   row. Below 782px they stack again. */
@media (min-width: 782px) {
  .ceei-index {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 2fr;
    column-gap: 2.5rem;
    row-gap: 0;
    margin: 2.5rem 0;
  }
  .ceei-index > * { border-bottom: 1px solid var(--wp--preset--color--rule); padding: 1.25rem 0; margin: 0; }
  .ceei-index > h3 { grid-column: 1; margin: 0; }
  .ceei-index > p  { grid-column: 2; margin: 0; }
}

/* A section built around an index takes the whole main column. The intro
   sections keep the reading measure. */
@media (min-width: 1180px) {
  .ceei-section:has(> .ceei-index, > .ceei-partner, > .ceei-card, > .wp-block-columns, > .ceei-partner-logos) {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
  .ceei-section:has(> .ceei-index) > :where(p, h2) { max-width: 60ch; }
}

/* --------------------------------------------------------------------------
   Polish, 2026-09-03. Details in the subject's own register, not effects.
   -------------------------------------------------------------------------- */

/* Paper has grain. The comp's own noise, at 5%, multiplied in, fixed so it
   never scrolls. Off for print and for the dark variation, which is not paper. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ceei-dark::before, .ceei-dark body::before { display: none; }

/* The brand rule above every section heading, the same mark the letterhead
   and the meeting sheets carry under their titles. */
.ceei-section > h2::before,
.ceei-section > h1::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--wp--preset--color--brand);
  margin-bottom: 0.9rem;
}
.ceei-hero h1::before { display: none; }

/* The nav knows where you are. Core marks the current item. */
.ceei-masthead .wp-block-navigation .current-menu-item > a,
.ceei-masthead .wp-block-navigation a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--wp--preset--color--brand);
  padding-bottom: 0.15rem;
}

/* Things that can be pressed answer the pointer, in colour, never in size. */
@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover { background-color: var(--wp--preset--color--masthead); }
  .is-style-outline .wp-block-button__link:hover {
    background-color: transparent;
    color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
  }
  .ceei-masthead .wp-block-navigation a:hover { text-decoration: none; box-shadow: inset 0 -2px 0 var(--wp--preset--color--brand); padding-bottom: 0.15rem; }
  .ceei-index > h3 { transition: color var(--wp--custom--duration--hover) ease; }
  .ceei-index > h3:hover { color: var(--wp--preset--color--accent); }
}

/* Links that lead somewhere say so with an arrow that moves, not a colour
   that changes. */
.has-small-font-size > a:not(.wp-block-button__link)::after,
.ceei-index p > a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--wp--custom--duration--hover) var(--wp--custom--ease--out);
}
@media (hover: hover) and (pointer: fine) {
  .has-small-font-size > a:not(.wp-block-button__link):hover::after,
  .ceei-index p > a:hover::after { transform: translateX(3px); }
}

/* Anchors glide unless the reader has asked them not to. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The skip link is the first thing a keyboard meets. */
.skip-link:focus {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--display); font-weight: 600;
  padding: 0.6rem 0.9rem; border: 2px solid var(--wp--preset--color--accent); border-radius: 2px;
}

/* A field report prints. Ink on paper, no chrome. */
@media print {
  body::before, .ceei-theme, .ceei-hero::after, .ceei-section::before,
  .ceei-hero__field, .ceei-hero__mark, .ceei-cta-band__field, .ceei-nav-cta, .wp-block-navigation,
  .wp-block-buttons, .skip-link { display: none !important; }
  .ceei-masthead { position: static; background: none !important; color: #000 !important; border-bottom: 2px solid #000; }
  .ceei-brand { color: #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ceei-hero h1, .wp-block-post-content > .ceei-section:first-child > h1 { color: #000; font-size: 28pt; }
  .ceei-section { display: block; }
  .ceei-note, .ceei-confirm { border-color: #000; }
  a { color: #000; text-decoration: none; }
  .ceei-index p > a::after { content: none; }
  .ceei-cta-band { background: none !important; color: #000 !important; border-top: 1px solid #000; }
}

/* --------------------------------------------------------------------------
   The Eastern Crescent, live. 2026-09-03. CEEI's ten counties from Census
   geometry, already in the theme and unused until now. A navy band, the
   crescent drawn in the masthead's light, each county lighting in CEEI Blue
   on hover or tap with its name read out. The three partial counties are
   hatched, so the map claims only the eastern portions the text claims.
   The list is the accessible control; the drawing follows it.
   -------------------------------------------------------------------------- */

.ceei-section--geo {
  background: var(--wp--preset--color--masthead);
  color: var(--wp--preset--color--on-masthead);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.125rem, 3vw, 2.5rem);
  margin-top: 3rem;
}
.ceei-section--geo > * { width: min(100%, var(--wp--style--global--wide-size)); max-width: none; margin-inline: auto; }
/* A grid child with auto margins shrinks to its content, and an SVG's content
   size is 300px. Width has to be explicit here or the map renders as a stamp. */
.ceei-map__figure { min-width: 0; max-width: 34rem; justify-self: end; width: 100%; }
.ceei-section--geo h2, .ceei-section--geo .ceei-eyebrow { color: var(--wp--preset--color--on-masthead); }
.ceei-section--geo h2::before { background: var(--wp--preset--color--brand); }
.ceei-section--geo > p { max-width: var(--wp--custom--measure); margin-inline: 0; }
@media (min-width: 1180px) {
  .ceei-section--geo { grid-template-columns: 1fr; }
  .ceei-section--geo > * { grid-column: 1; }
}

.ceei-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-top: 2rem;
}
.ceei-map__figure svg { display: block; width: 100%; height: auto; color: var(--wp--preset--color--on-masthead); opacity: 0.85; }
.ec-county { fill: color-mix(in srgb, var(--wp--preset--color--on-masthead) 6%, transparent); transition: fill var(--wp--custom--duration--hover) ease; cursor: pointer; }
.ec-county--partial { fill: url(#ceei-hatch); }
.ec-county.is-lit, .ec-county:hover { fill: var(--wp--preset--color--brand); }
.ceei-map__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.ceei-map__list li { break-inside: avoid; margin: 0; }
.ceei-map__county {
  appearance: none; background: none; border: 0; padding: 0.45rem 0; width: 100%;
  text-align: left; cursor: pointer; color: var(--wp--preset--color--on-masthead);
  font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--on-masthead) 18%, transparent);
  min-height: 44px;
}
.ceei-map__county .ceei-partial {
  display: block;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--on-masthead) 70%, transparent);
  margin-top: 0.1rem;
}
.ceei-map__county.is-lit, .ceei-map__county:hover { color: var(--wp--preset--color--brand); border-bottom-color: var(--wp--preset--color--brand); }
.ceei-map__county:focus-visible { outline-color: var(--wp--preset--color--on-masthead); }
.ceei-map__readout {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-small);
  color: color-mix(in srgb, var(--wp--preset--color--on-masthead) 75%, transparent); margin-top: 1rem; min-height: 2.6em;
}
.ceei-map__readout strong { color: var(--wp--preset--color--on-masthead); font-weight: 600; }
@media (max-width: 781px) {
  .ceei-map { grid-template-columns: 1fr; }
  .ceei-map__list { columns: 2; }
}

/* --------------------------------------------------------------------------
   Instrument texture. A fine measurement grid behind the hero and the
   evidence band, and the brand rule above each heading gains ruler ticks.
   The register is a field instrument. This is what one looks like.
   -------------------------------------------------------------------------- */

.ceei-hero, .ceei-evidence__item {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--brand) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--brand) 7%, transparent) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: 0 0;
}
.ceei-evidence__item { background-color: var(--wp--preset--color--paper-sunk); }
.ceei-dark .ceei-hero, .ceei-dark .ceei-evidence__item { background-image: none; }

.ceei-section > h2::before,
.ceei-section > h1::before {
  width: 3rem;
  height: 7px;
  background:
    linear-gradient(var(--wp--preset--color--brand), var(--wp--preset--color--brand)) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(to right, var(--wp--preset--color--brand) 0 1px, transparent 1px 6px) top / 100% 4px no-repeat;
}

/* --------------------------------------------------------------------------
   Touch feel. 2026-09-03. On a screen with no hover, feedback has to be in
   the press itself: instant on the way down, eased on the way up, and felt
   without haptics. Buttons sink, the county list depresses, the mark tile
   replays its stroke when tapped. Never on release, always on pointer-down.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .wp-block-button__link,
  .ceei-map__county,
  .ceei-brand,
  .wp-block-navigation-item__content,
  .ceei-index > p > a,
  .has-small-font-size > a {
    transition: transform 220ms var(--wp--custom--ease--out), background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
  }
  .wp-block-button__link:active {
    transform: scale(0.95);
    transition-duration: 40ms;
    box-shadow: inset 0 3px 8px color-mix(in srgb, var(--wp--preset--color--masthead) 35%, transparent);
    background-color: var(--wp--preset--color--masthead);
  }
  .is-style-outline .wp-block-button__link:active { background-color: var(--wp--preset--color--paper-sunk); color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
  .ceei-map__county:active { transform: scale(0.97); transition-duration: 40ms; color: var(--wp--preset--color--brand); background: color-mix(in srgb, var(--wp--preset--color--brand) 18%, transparent); border-radius: 4px; padding-inline: 0.5rem; }
  .wp-block-navigation-item__content:active, .ceei-brand:active { transform: scale(0.96); transition-duration: 40ms; opacity: 0.8; }
  .ceei-index > p > a:active, .has-small-font-size > a:active { color: var(--wp--preset--color--brand); transition-duration: 40ms; }
  .ceei-nav-cta .wp-block-button__link:active { transform: scale(0.97); }
}

/* --------------------------------------------------------------------------
   Installed. When the site is added to a home screen it opens standalone,
   with no browser chrome, and reads as an app: navy status bar, the masthead
   clear of the notch, the dock always present, no rubber-band sideways.
   -------------------------------------------------------------------------- */

@media (display-mode: standalone) {
  html { overscroll-behavior-x: none; }
  .ceei-masthead { padding-top: calc(0.6rem + env(safe-area-inset-top, 0px)) !important; }
  .ceei-nav-cta { transform: none; }
  .ceei-legal { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .skip-link:focus { top: calc(0.75rem + env(safe-area-inset-top, 0px)); }
}

/* --------------------------------------------------------------------------
   Brand guide conformance, 2026-09-03. Checked against Mark's guide as
   written. CEEI Blue may not be a ground behind text, and below 24px it is
   replaced by Blue Text: the display headlines are large text and stay in
   CEEI Blue. Sky, not CEEI Blue, is the tint that is never text on a light
   ground. The horizontal lockup has a 140px minimum, which 30px tall did not
   reach. The masthead button no longer sets text on a CEEI Blue ground.
   -------------------------------------------------------------------------- */

@media (max-width: 520px) { .ceei-brand svg { height: 33px; } }

/* --------------------------------------------------------------------------
   The intro, 2026-09-04. Installed mode only, once per session. The mark
   plots itself on navy for under a second, then the page is simply there.
   Native apps get a launch screen from the OS; a web app has to bring its
   own or it opens on a blank white frame. Off under reduced motion, never
   shown in a browser tab, never shown twice in one session.
   -------------------------------------------------------------------------- */
.ceei-intro {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: var(--wp--preset--color--masthead);
  transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1) 140ms;
}
.ceei-intro svg { width: min(38vw, 168px); height: auto; display: block; }
.ceei-intro path { fill: none; stroke: var(--wp--preset--color--paper); stroke-width: 2.5; stroke-linejoin: round; }
.ceei-intro.is-drawing path { animation: ceei-intro-draw 820ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.ceei-intro.is-done { opacity: 0; pointer-events: none; }
@keyframes ceei-intro-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Trust lines, 2026-09-04, after the Watch Duty teardown. A card says when it
   was last updated and by whom. A status that has not been confirmed says so
   in its own chip rather than by silence. Pending is dashed, never coloured,
   so it cannot be mistaken for a state.
   -------------------------------------------------------------------------- */
.ceei-card__meta {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--ink-muted);
  margin-top: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.ceei-status--pending {
  border-style: dashed;
  color: var(--wp--preset--color--ink-muted);
  border-color: var(--wp--preset--color--rule-strong);
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   The empty Ideas & Insights archive. The mark plots itself on a slow loop,
   the same gesture as the hero, so an empty section still reads as CEEI
   rather than as a gap. Honest by construction: it says nothing is published
   yet, because nothing is. Dash length is the measured path length of the
   mark, 3297.54, rounded up so the stroke fully clears.
   -------------------------------------------------------------------------- */

.ceei-soon {
  text-align: center;
  padding: clamp(2.5rem, 9vw, 5.5rem) 0 clamp(2rem, 7vw, 4rem);
}

.ceei-soon svg {
  width: min(132px, 32vw);
  height: auto;
  display: block;
  margin: 0 auto 1.75rem;
  overflow: visible;
}

/* The mark stays put as a solid brand fill. A single white band tours the four
   squares, clipped to the mark so it sweeps the inside edge instead of being
   lost against the page. The tracer is deliberately ONE subpath: SVG restarts
   stroke-dasharray at every subpath, so four tile subpaths would give four
   simultaneous bands whatever the dash values. Each tile's final arc already
   returns to its own start, so the Z is dropped and each following M becomes an
   L, welding the tour into one path. Measured live: length 1879.54, so
   112 on and 1767.5 off is a single band, 6s linear for one full circuit. */

.ceei-soon .ceei-soon__mark {
  fill: var(--wp--preset--color--brand);
  stroke: none;
}

.ceei-soon .ceei-soon__tracer {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 112 1767.5;
  stroke-dashoffset: 1879.5;
  opacity: .92;
  animation: ceei-soon-trace 6s linear infinite;
}

@keyframes ceei-soon-trace { to { stroke-dashoffset: 0; } }

.ceei-soon__k {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink);
  margin: 0 0 0.5rem;
}

.ceei-soon__b {
  color: var(--wp--preset--color--ink-muted);
  max-width: 34rem;
  margin: 0 auto 1.25rem;
}

.ceei-soon__c { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); margin: 0; }

/* The band is decoration. Without motion the logo simply stands there. */
@media (prefers-reduced-motion: reduce) {
  .ceei-soon .ceei-soon__tracer { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   WHERE THE FIELD IS ALLOWED
   It was carried under the whole page on one fixed layer. That layer cannot
   know where the text is: it is fixed to the viewport and the copy scrolls
   through it, so every section's measure ended up reading against blocks.
   The field now lives only on surfaces with room for it -- the hero's right
   side and the band under its buttons, the CTA band, the footer -- each one
   masked against its own copy rather than against a guess.
   -------------------------------------------------------------------------- */

/* Content rides above whatever a surface puts behind it. */
main, footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   GROUND SWITCH
   The dark variation as a class, so the same palette the Ground Truth style
   variation ships can be thrown at runtime instead of only by an editor.
   Paper and ink swap, brand does not: the blue is the constant.
   -------------------------------------------------------------------------- */
.ceei-dark {
  --wp--preset--color--paper: #090D12;
  --wp--preset--color--paper-sunk: #12161B;
  --wp--preset--color--paper-raised: #1A2028;
  --wp--preset--color--ink: #ECEFF2;
  --wp--preset--color--ink-muted: #8B96A0;
  --wp--preset--color--ink-faint: #818C97;
  --wp--preset--color--rule: #232B33;
  --wp--preset--color--rule-strong: #61707E;
  --wp--preset--color--accent: #7FB8DD;
  --wp--preset--color--brand: #0B83CE;
  --wp--preset--color--masthead: #06080A;
  --wp--preset--color--on-masthead: #ECEFF2;
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}
.ceei-dark body {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

/* And the paper palette as a class too, which is not redundant. Whichever
   variation an editor has made the site's own, that one is what :root
   carries, and a reader who has chosen the other ground needs a rule that
   outranks it. One class per ground means the switch works in both
   directions whichever way the site is set. */
.ceei-light {
  --wp--preset--color--paper: #F8FBFD;
  --wp--preset--color--paper-sunk: #F1F3F4;
  --wp--preset--color--ink: #2C4453;
  --wp--preset--color--ink-muted: #60717E;
  --wp--preset--color--rule: #CFDCE6;
  --wp--preset--color--rule-strong: #60717E;
  --wp--preset--color--accent: #0A73B6;
  --wp--preset--color--brand: #0B83CE;
  --wp--preset--color--masthead: #0F2B3D;
  --wp--preset--color--on-masthead: #F8FBFD;
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}
.ceei-light body {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

/* The control is the mark. Four blocks, and the one that is filled is the
   ground you are on: bottom-left on paper, top-right on ink. Pressing it
   moves the fill the way the ground moves. */
.ceei-theme {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--on-masthead) 38%, transparent);
  border-radius: 3px;
  background: none;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--wp--custom--duration--hover) ease;
}
.ceei-theme:hover { border-color: var(--wp--preset--color--brand); }
.ceei-theme:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.ceei-theme i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--wp--preset--color--on-masthead);
  opacity: 0.32;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.ceei-theme i:nth-child(3) { opacity: 1; background: var(--wp--preset--color--brand); }
.ceei-dark .ceei-theme i:nth-child(3) { opacity: 0.32; background: var(--wp--preset--color--on-masthead); }
.ceei-dark .ceei-theme i:nth-child(2) { opacity: 1; background: var(--wp--preset--color--brand); }

/* The swap itself. The browser holds a picture of the page as it was and
   cross-fades it against the page as it is, so every colour on screen moves
   at once and nothing crosses in front. A curtain, however on-brand, is a
   second event the reader has to watch; this is the same change with nothing
   to watch. Where view transitions are missing the ground simply changes,
   which is what a colour switch did before any of this existed. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   Fixes from the live audit of 29 September 2026
   (strategy/website/research/site-audit-2026-09-29.html).
   -------------------------------------------------------------------------- */

/* The masthead stays, as written above. It sits inside WordPress's header
   template-part wrapper, which is exactly as tall as the masthead, so a
   sticky masthead had no room to travel and scrolled away with the page.
   Measured live: at scrollY 1500 its top was at -1500. The wrapper sticks
   instead, and the masthead's own is-stuck material works as intended. */
header.wp-block-template-part:has(> .ceei-masthead) {
  position: sticky;
  top: 0;
  z-index: 30;
}
@media print {
  header.wp-block-template-part:has(> .ceei-masthead) { position: static; }
}

/* The second evidence tile started 20px below the first at 1440px. The flow
   layout's block gap adds a top margin to every child after the first, and
   in a grid that margin pushes the tile down instead of spacing a stack. */
.ceei-evidence > .ceei-evidence__item { margin-block: 0; }

/* Equal visual weight, which Mark asked for. A single height let a wide
   logo run three times the width of a tall one (251px against 80px at
   375). A near-square box with contain limits wide logos by width and tall
   ones by height. Measured live at 375 on 29 September: drawn areas of
   about 7,700, 8,000, 6,000 and 9,700 square pixels for the four logos,
   against 26,000 and 8,300 before. */
.ceei-partner-logos img {
  width: 8.5rem !important;
  height: 5.5rem !important;
  max-width: 100% !important;
}

/* The outline button is transparent, so at 375px one block from the corner
   drift showed through "Work with CEEI". The buttons sit above the field
   and the outline button takes the page ground. */
.ceei-hero .wp-block-buttons { position: relative; z-index: 2; }
.ceei-hero .is-style-outline > .wp-block-button__link { background-color: var(--wp--preset--color--paper); }

/* 0.6.11, 8 Oct 2026, Mark's direction: CEEI's approved gray, integrated and not too much.
   The tinted surface (paper-sunk) is a 7% tint of Slate #39505F on white, #F1F3F4, instead of
   the blue tint. Every band and evidence tile carries it. Text on it: ink 9.16, ink-muted 4.53, accent 4.56.
   The footer is a solid Slate band, the one confident gray moment, light ground only. Its text
   tokens are remapped inside it, as the dark ground does: Veil 8.13, Pale Slate 6.05, Mist
   links 6.61, Pale Slate control edges 6.05. CEEI Blue stays the identity colour. */
.ceei-light footer {
  --wp--preset--color--paper: #39505F;
  --wp--preset--color--paper-sunk: #39505F;
  --wp--preset--color--ink: #F8FBFD;
  --wp--preset--color--ink-muted: #CFDCE6;
  --wp--preset--color--accent: #CFE7F8;
  --wp--preset--color--rule: #60717E;
  --wp--preset--color--rule-strong: #CFDCE6;
  background-color: #39505F;
  color: #F8FBFD;
}
/* The footer's top spacing used to sit outside it and show the page ground as a strip.
   The band now starts flush. A page that ends in plain text gets the same space back as
   padding inside main, so only full-width bands sit against the footer. */
.ceei-light footer { margin-block-start: 0 !important; }
.ceei-light footer > .ceei-rule-top { margin-top: 0 !important; }
.ceei-light main:not(:has(.wp-block-post-content > .alignfull:last-child)) { padding-bottom: var(--wp--preset--spacing--60); }

/* --------------------------------------------------------------------------
   News and Intelligence brief (0.6.12). Template single-ceei_insight, pattern
   brief-news. Approved look: Deliverables/2026-10-14-news-brief. The dot field
   gets its own band under the masthead and never sits behind text. Light
   ground only. Pairs: ink, masthead and ink-muted on paper, ink and masthead
   on paper-sunk, on-masthead on masthead. All in contrast-check.
   -------------------------------------------------------------------------- */

.ceei-brief-field {
  height: 56px;
  background: url("assets/img/field.svg") right top / 1600px 720px no-repeat;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
  mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
}
.ceei-brief { padding: 0.25rem 16px 3.5rem; }
/* The brief's main already holds the 16px gutter, so the content column
   drops the site-wide post-content padding and lines up with the headline. */
.ceei-brief .wp-block-post-content { padding-inline: 0; max-width: none; }
.ceei-brief__crumb {
  gap: 0.5rem;
  font: 600 0.8125rem/1.3 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}
.ceei-brief__crumb a { color: var(--wp--preset--color--accent); text-decoration: none; }
.ceei-brief__crumb a:hover { text-decoration: underline; }
.ceei-brief__crumb .wp-block-post-terms a { color: var(--wp--preset--color--ink-muted); }
.ceei-brief__title {
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.12;
  letter-spacing: -0.015em; text-wrap: balance;
  color: var(--wp--preset--color--masthead);
  margin: 0.5rem 0 0.75rem;
}
.ceei-brief__dek { font-size: 1.2rem; color: var(--wp--preset--color--ink); margin: 0 0 1rem; }
.ceei-brief__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font: 500 0.875rem/1.4 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  color: var(--wp--preset--color--ink-muted);
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: 10px 0; margin-bottom: 1.4rem;
}
.ceei-brief__meta strong { color: var(--wp--preset--color--masthead); font-weight: 600; }
.ceei-brief .wp-block-post-content > p { max-width: 65ch; }
.ceei-brief__why {
  background: var(--wp--preset--color--paper-sunk);
  border-left: 4px solid var(--wp--preset--color--accent);
  padding: 16px 18px; margin: 1.6rem 0;
  color: var(--wp--preset--color--ink);
}
.ceei-brief__why-h {
  font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem;
  color: var(--wp--preset--color--masthead);
}
.ceei-brief__why p:last-child { margin-bottom: 0; }
.ceei-brief__read .wp-block-button__link {
  gap: 10px;
  background: var(--wp--preset--color--masthead);
  color: var(--wp--preset--color--on-masthead);
  font-weight: 600; border-radius: 6px; padding: 15px 20px;
}
.ceei-brief__read .wp-block-button__link:hover { background: var(--wp--preset--color--masthead); text-decoration: underline; }
.ceei-brief__read .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.ceei-brief__credit {
  font: 500 0.875rem/1.5 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  color: var(--wp--preset--color--ink-muted);
  margin-top: 0.6rem;
}
@media (max-width: 640px) { .ceei-brief-field { height: 40px; } }

/* --------------------------------------------------------------------------
   Ideas & Insights archive, with briefs (14 Oct 2026). Asked for: a section
   with the briefs below "Bring us an idea". The empty-state panel stays
   as the opener, tighter, and the News and Intelligence briefs sit under it
   as photo cards. Replaces .ceei-index here, whose two-column row split a
   long headline mid-word. Pairs: masthead, ink and ink-muted on paper.
   -------------------------------------------------------------------------- */

.ceei-ideas .ceei-soon { padding: clamp(1.5rem, 5vw, 2.75rem) 0 clamp(1.75rem, 5vw, 2.75rem); }
.ceei-briefs {
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: 2rem;
  margin-bottom: 3.5rem;
}
.ceei-briefs__h {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15;
  color: var(--wp--preset--color--masthead);
  margin: 0 0 0.35rem;
}
.ceei-briefs__dek { color: var(--wp--preset--color--ink-muted); max-width: 60ch; margin: 0 0 1.75rem; }
.ceei-briefs .ceei-briefs__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 2.25rem 1.75rem;
}
.ceei-briefs .ceei-briefs__grid > li {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ceei-briefs .wp-block-post-featured-image { margin: 0 0 0.35rem; }
.ceei-briefs .wp-block-post-featured-image img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; display: block;
}
.ceei-briefs .wp-block-post-date {
  font: 600 0.8125rem/1.3 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}
.ceei-briefs .wp-block-post-title {
  font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em;
  text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none;
  margin: 0;
}
.ceei-briefs .wp-block-post-title a { color: var(--wp--preset--color--masthead); text-decoration: none; }
.ceei-briefs .wp-block-post-title a:hover { text-decoration: underline; }
.ceei-briefs .wp-block-post-title a:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.ceei-briefs .wp-block-post-excerpt { margin: 0; color: var(--wp--preset--color--ink); }
.ceei-briefs .wp-block-post-excerpt__excerpt { margin: 0; }
.ceei-briefs .wp-block-query-pagination { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   /links, the link-in-bio page (11 Nov 2026). templates/page-links.html,
   layout A from the approved mock in Deliverables/2026-11-11-link-in-bio.
   One narrow column, no site header or footer. The newest brief leads, six
   more sit two across, then the standing links. Each brief card is one link:
   the title's anchor is stretched over the card. The button is the theme's
   own. Pairs: masthead, ink, ink-muted and accent on paper or white.
   -------------------------------------------------------------------------- */

.ceei-links {
  max-width: 30rem; margin: 0 auto;
  font-family: var(--wp--preset--font-family--display);
  padding-block: 1.75rem 2.75rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 2rem;
  color: var(--wp--preset--color--ink);
}
.ceei-links > * { margin: 0; }
.ceei-links__id { display: grid; grid-template-columns: 52px 1fr; gap: 0 14px; align-items: center; }
.ceei-links__mark { width: 52px; height: 52px; color: var(--wp--preset--color--brand); }
.ceei-links__abbr {
  margin: 0; font: 800 1.625rem/1 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  letter-spacing: 0.05em; color: var(--wp--preset--color--masthead);
}
.ceei-links__full { margin: 5px 0 0; font-size: 0.8125rem; line-height: 1.3; color: var(--wp--preset--color--ink-muted); }
.ceei-links__line { grid-column: 1 / -1; margin: 1rem 0 0; font-size: 1.0625rem; font-weight: 500; color: var(--wp--preset--color--masthead); }

.ceei-links .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.ceei-links .wp-block-post { position: relative; display: grid; gap: 0.5rem; align-content: start; min-width: 0; margin: 0; }
.ceei-links .wp-block-post-featured-image { margin: 0; }
.ceei-links .wp-block-post-featured-image img { width: 100%; object-fit: cover; display: block; border-radius: 6px; }
.ceei-links .wp-block-post-date {
  font-size: 0.8125rem; color: var(--wp--preset--color--ink-muted);
  font-variant-numeric: tabular-nums;
}
.ceei-links .wp-block-post-title {
  margin: 0; font-weight: 650; text-wrap: balance;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.ceei-links .wp-block-post-title a { color: var(--wp--preset--color--masthead); text-decoration: none; }
.ceei-links .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.ceei-links .wp-block-post-title a:focus-visible { outline: none; }
.ceei-links .wp-block-post:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) { .ceei-links .wp-block-post:hover .wp-block-post-title a { text-decoration: underline; } }

.ceei-links__kicker, .ceei-links__sect {
  margin: 0; font: 650 0.75rem/1.3 var(--wp--preset--font-family--display, "Archivo", sans-serif);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ceei-links__kicker { color: var(--wp--preset--color--accent); }
.ceei-links__sect { color: var(--wp--preset--color--ink-muted); }
.ceei-links__lead .wp-block-post-title { font-size: 1.5rem; line-height: 1.2; }
.ceei-links__go {
  margin: 0; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--wp--preset--color--accent);
}
.ceei-links__go svg, .ceei-links__list svg { width: 16px; height: 16px; flex: none; }

.ceei-links__more { display: grid; gap: 0.875rem; }
.ceei-links__more:not(:has(.wp-block-post)) { display: none; }
.ceei-links .ceei-links__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.875rem; }
.ceei-links__pair .wp-block-post { gap: 0.375rem; }
.ceei-links__pair .wp-block-post-featured-image img { border-radius: 5px; }
.ceei-links__pair .wp-block-post-title { font-size: 0.9375rem; line-height: 1.3; }

.ceei-links__standing { display: grid; gap: 1rem; }
.ceei-links__all { width: 100%; }
.ceei-links__all .wp-block-button__link { display: flex; justify-content: center; padding: 15px 18px; border-radius: 8px; text-align: center; }
.ceei-links__list {
  list-style: none; margin: 0; padding: 0;
  background: #FFFFFF; border: 1px solid var(--wp--preset--color--rule); border-radius: 8px;
}
.ceei-links__list li + li { border-top: 1px solid var(--wp--preset--color--rule); }
.ceei-links__list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: center;
  padding: 13px 16px; text-decoration: none;
}
.ceei-links__list b { color: var(--wp--preset--color--masthead); font-weight: 600; }
.ceei-links__list span { grid-column: 1; font-size: 0.875rem; color: var(--wp--preset--color--ink-muted); }
.ceei-links__list svg { grid-column: 2; grid-row: 1 / span 2; color: var(--wp--preset--color--accent); }
@media (hover: hover) { .ceei-links__list a:hover b { text-decoration: underline; } }
.ceei-links__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; font-size: 0.875rem; padding-top: 0.5rem; }
.ceei-links__foot nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ceei-links__foot a { color: var(--wp--preset--color--accent); font-weight: 500; text-decoration: none; }
.ceei-links__foot > a { color: var(--wp--preset--color--ink-muted); }
.ceei-links__eo { flex-basis: 100%; margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wp--preset--color--ink-muted); }
.ceei-links__foot .ceei-links__eo a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }