/*
Theme Name: AI Energy
Theme URI: https://aienergy.fyi
Author: Dave Bloom
Description: Block theme for aienergy.fyi — reported coverage of AI and the electricity it consumes. Palette and type derived from a single aerial photograph of a utility-scale solar array. Asymmetric homepage slots, abstract section dividers, fixed meter rail.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.12.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aienergy
Tags: blog, news, one-column, block-patterns, full-site-editing, custom-colors, custom-logo
*/

/* ═══════════════════════════════════════════════════════════
   Most tokens live in theme.json. This file carries only what
   theme.json can't express: the meter rail, the asymmetric
   slot grids, divider objects, and the hollow-type move.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. THE METER RAIL ──────────────────────────────────────
   Provisional — see Known gaps in the aienergy-brand skill.
   To remove: delete parts/rail.html from templates and drop
   the .has-rail rule below. Nothing else depends on it.      */

.ae-rail{
  position:fixed;
  left:0; top:0; bottom:0;
  width:var(--wp--custom--rail);
  border-right:1px solid rgba(92,113,137,.35);
  background:linear-gradient(180deg, var(--wp--preset--color--void), #0d131d);
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  pointer-events:none;
}
.ae-rail__tick{
  writing-mode:vertical-rl;
  font-family:var(--wp--preset--font-family--mono);
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
  margin:0;
}
.ae-rail__tick--hot{ color:var(--wp--preset--color--ochre); }
.ae-rail__pip{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--wp--preset--color--clay);
  animation:ae-pulse 2.4s ease-in-out infinite;
}
@keyframes ae-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.7); }
}
body.has-rail .wp-site-blocks{ margin-left:var(--wp--custom--rail); }

/* ── 2. ASYMMETRIC SLOTS ────────────────────────────────────
   Five different shapes. Not a repeating card grid — that's
   the entire point. Each slot is its own pattern.            */

.ae-slot{ position:relative; }

/* 01 — lead: text against a giant figure */
.ae-slot--lead > .wp-block-columns{ gap:56px; align-items:flex-start; }
.ae-slot--lead .ae-col-text{ flex-basis:60% !important; }
.ae-slot--lead .ae-col-context{ flex-basis:40% !important; }
/* Kept for the parked "Big Figure" pattern, which used a 39% column. */
.ae-slot--lead .ae-col-figure{ flex-basis:40% !important; }
/* The figure column is currently pulled out (see the "Big Figure"
   pattern), so the lead runs alone — take the full width rather
   than sitting at 61% with dead air. The 61/39 split above still
   applies the moment a second column comes back. */
.ae-slot--lead .ae-col-text:only-child{ flex-basis:100% !important; }

/* 02 — shoved into the right third, dead air at left */
.ae-slot--filing{
  display:grid;
  grid-template-columns:1fr minmax(0,540px);
  gap:40px;
}
.ae-slot--filing > *{ grid-column:2; }

/* 03 — pull quote weighted against a narrower story */
.ae-slot--interview > .wp-block-columns{ gap:52px; align-items:center; }
.ae-slot--interview .ae-col-quote{ flex-basis:44% !important; }
.ae-slot--interview .ae-col-story{ flex-basis:56% !important; }

/* 04 — shoved back left */
.ae-slot--explainer{
  display:grid;
  grid-template-columns:minmax(0,660px) 1fr;
  gap:44px;
}
.ae-slot--explainer > *{ grid-column:1; }

/* 05 — full-bleed closer on slate */
.ae-slot--closer{
  background:var(--wp--preset--color--slate);
  padding:var(--wp--preset--spacing--60) var(--wp--custom--gutter);
  margin-inline:calc(var(--wp--custom--gutter) * -1);
}

/* ── 3. THE FIGURE BLOCK ────────────────────────────────── */
.ae-figure{
  border-left:3px solid var(--wp--preset--color--clay);
  padding-left:18px;
}
.ae-figure__huge{
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;
  font-size:clamp(76px,10vw,132px);
  line-height:.78;
  color:var(--wp--preset--color--ochre);
  margin:0;
}
.ae-figure__unit{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700;
  font-size:30px;
  text-transform:uppercase;
  color:var(--wp--preset--color--paper);
  display:block;
  margin:2px 0 0;
}
/* Was inline on the <p> in slot-01; classed here so the "Big Figure"
   pattern (patterns/big-figure.php) carries its own styling. */
.ae-figure__note{
  font-size:14px;
  color:var(--wp--preset--color--haze);
  margin:12px 0 0;
  max-width:34ch;
}

/* ── 4. EYEBROW — mono label + fading ochre rule ─────────── */
.ae-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--ochre);
  margin:0 0 12px;
}
.ae-eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  max-width:120px;
  background:linear-gradient(90deg, var(--wp--preset--color--ochre), transparent);
}

/* ── 5. HERO — type breaks the image edge ───────────────── */
.ae-hero{ position:relative; }
.ae-hero__strip{
  width:100%;
  height:clamp(180px,26vw,320px);
  object-fit:cover;
  display:block;
  /* Brighter per Dave. The source asset is a pre-baked duotone webp — this
     is a CSS filter over it, not a re-export, so it can be dialed back or
     tuned further without touching the image file. */
  filter:brightness(1.16) saturate(1.08);
}
.ae-hero__veil{
  position:absolute; inset:0;
  /* Lightened per Dave — was .88/.25/.7. The darker veil was muddying the
     duotone's actual navy/ochre color; this lets more of the true image
     color and brightness through while keeping the left edge readable. */
  background:linear-gradient(90deg, rgba(11,15,23,.62) 0%, rgba(11,15,23,.12) 55%, rgba(11,15,23,.48) 100%);
  pointer-events:none;
}
.ae-hero__type{
  position:absolute;
  left:36px;
  /* PASS 16: moved from bottom to top per Dave, previewed first as a
     standalone mockup before shipping. Was bottom:28px (pass 15). */
  top:28px;
  max-width:min(1000px,82%);
  z-index:3;
}
.ae-hero__kicker{
  display:inline-block;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--clay);
  background:var(--wp--preset--color--void);
  padding:5px 10px 4px;
  margin:0 0 10px;
}
.ae-hero__headline{
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.86;
  font-size:var(--wp--preset--font-size--display-xl);
  margin:0;
  text-shadow:0 6px 40px rgba(11,15,23,.9);
}
.ae-hero__headline em{ font-style:normal; color:var(--wp--preset--color--ochre); }
/* PASS 15: was 88px, added purely to reserve page space for the headline
   that used to hang below the image (a negative-bottom absolute element
   doesn't push page flow, so this stood in for it). With the headline now
   fully inside the image there is nothing to reserve space for — shrunk
   to a small breathing gap instead of removed outright, so the hero
   doesn't sit flush against the next section. */
.ae-hero__spacer{ height:28px; }

/* The hollow-type move. Established, per the brand skill. */
.ae-hollow{
  color:transparent;
  -webkit-text-stroke:2px var(--wp--preset--color--paper);
  text-stroke:2px var(--wp--preset--color--paper);
}
/* Fallback: if text-stroke is unsupported the word would vanish. */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)){
  .ae-hollow{ color:var(--wp--preset--color--paper); }
}

/* ── 6. DIVIDER OBJECTS — never a plain rule ─────────────── */
.ae-divider{
  padding:44px 0;
  line-height:0;
}
.ae-divider--tight{ padding:34px 0; }
.ae-divider svg{ width:100%; height:auto; display:block; overflow:visible; }
.ae-d-stroke{ stroke:var(--wp--preset--color--haze); fill:none; stroke-width:1.25; }
.ae-d-hot{    stroke:var(--wp--preset--color--ochre); fill:none; stroke-width:2; }
.ae-d-clay{   stroke:var(--wp--preset--color--clay); fill:none; stroke-width:2; }
.ae-d-fill{      fill:var(--wp--preset--color--slate-2); }
.ae-d-fill-hot{  fill:var(--wp--preset--color--ochre); }
.ae-d-fill-clay{ fill:var(--wp--preset--color--clay); }

/* ── 7. TAGS — .is-hot must actually mean flagged ────────── */
.ae-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ae-tag{
  border:1px solid rgba(92,113,137,.55);
  padding:5px 9px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
}
.ae-tag.is-hot{
  border-color:var(--wp--preset--color--clay);
  color:var(--wp--preset--color--clay);
}

/* ── 8. MASTHEAD + LOGO LOCKUP ──────────────────────────── */
.ae-masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:22px 0 16px;
  border-bottom:1px solid var(--wp--custom--hairline);
}
.ae-logo{ display:block; width:200px; height:100px; }
.ae-logo svg{ width:100%; height:100%; display:block; }
.ae-nav ul{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.ae-nav a{
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.ae-nav a:hover,
.ae-nav a:focus-visible{
  color:var(--wp--preset--color--ochre);
  border-color:var(--wp--preset--color--ochre);
}

/* ── 9. BYLINE ROW ──────────────────────────────────────── */
.ae-byline{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-top:14px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
}

/* ── 10. NON-NEGOTIABLES ────────────────────────────────── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--ochre);
  outline-offset:2px;
}
.ae-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--wp--preset--color--ochre);
  color:var(--wp--preset--color--void);
  padding:10px 16px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.ae-skip:focus{ left:var(--wp--custom--rail); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ── 11. MOBILE ─────────────────────────────────────────── */
@media (max-width:860px){
  /* theme.json emits these on :root. Repeat the selector and add body so
     this override wins regardless of stylesheet load order. */
  :root, body{ --wp--custom--rail:38px; --wp--custom--gutter:20px; }
  .ae-slot--lead > .wp-block-columns,
  .ae-slot--interview > .wp-block-columns{ gap:28px; }
  .ae-slot--lead .ae-col-text,
  .ae-slot--lead .ae-col-figure,
  .ae-slot--lead .ae-col-context,
  .ae-slot--interview .ae-col-quote,
  .ae-slot--interview .ae-col-story{ flex-basis:100% !important; }
  .ae-slot--filing,
  .ae-slot--explainer{ grid-template-columns:1fr; }
  .ae-slot--filing > *,
  .ae-slot--explainer > *{ grid-column:1; }
  .ae-hero__type{ left:20px; top:16px; max-width:92%; }
  .ae-hero__spacer{ height:20px; }
  .ae-logo{ width:150px; height:75px; }
  .ae-nav ul{ gap:16px; flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN PASS 02
   Added after seeing the theme render live with real posts.
   ═══════════════════════════════════════════════════════════ */

/* ── 12. GRACEFUL DEGRADATION ───────────────────────────────
   The homepage has five fixed slots but won't always have five
   articles. An empty query block renders as an empty div, which
   left dead vertical space and orphan dividers.

   Each slot+divider pair is wrapped in .ae-block; if no post
   template rendered inside, the whole pair is removed. The page
   reads as intentional with one article or with five.          */

/* PASS 11: slots now carry a wp:query-no-results branch, so "no post
   template rendered" no longer means "nothing to show". A block is only
   hidden when it has NEITHER a post-template NOR a no-results branch —
   otherwise the lorem placeholder would be hidden the moment it was
   needed, which is exactly when it has to appear. */
.ae-block:not(:has(.wp-block-post-template)):not(:has(.wp-block-query-no-results)){
  display:none;
}

/* Belt and braces for engines without :has() — collapse the
   empty query container so it contributes no height. */
.wp-block-query:empty{
  display:none;
}

/* ── 13. SLOT RHYTHM ────────────────────────────────────────
   Slots previously relied entirely on divider padding for
   vertical spacing, so the first slot sat too tight under the
   hero and the last collapsed onto the footer.                 */

.ae-slot{
  padding-block:var(--wp--preset--spacing--50);
}
.ae-slot--closer{
  padding-block:var(--wp--preset--spacing--60);
}
.ae-main > .ae-block:first-of-type .ae-slot{
  padding-top:var(--wp--preset--spacing--60);
}

/* ── 14. LINK AFFORDANCE ────────────────────────────────────
   Post titles were styled but gave no hover or focus signal,
   so nothing looked clickable. Ochre on hover, matching nav.   */

.wp-block-post-title a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible{
  color:var(--wp--preset--color--ochre);
}
.wp-block-post-title a:focus-visible{
  outline:2px solid var(--wp--preset--color--ochre);
  outline-offset:3px;
}

/* Excerpt "read more" reads as an instrument label, not a button. */
.wp-block-post-excerpt__more-link{
  display:inline-block;
  margin-top:10px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--ochre);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus-visible{
  border-bottom-color:var(--wp--preset--color--ochre);
}

/* ── 15. HERO CONTRAST ──────────────────────────────────────
   The headline breaks below the image edge, so its upper half
   sits on photograph and its lower half on page. A left-to-
   right veil alone couldn't guarantee contrast across the whole
   line. This adds a vertical scrim weighted to the bottom.     */

.ae-hero__scrim{
  position:absolute;
  /* PASS 16: flipped to weight the TOP instead of the bottom — the
     headline moved there, and a bottom-weighted scrim was no longer
     doing anything for the text it's meant to protect. Anchored via
     inset (top 0, bottom auto) rather than moving the whole rule, so
     the "weighted toward the text" intent stays legible in the CSS. */
  inset:0 0 auto 0;
  height:62%;
  background:linear-gradient(180deg, rgba(11,15,23,.7) 0%, rgba(11,15,23,.38) 45%, rgba(11,15,23,0) 100%);
  pointer-events:none;
}

/* Kicker gets a clay rule beneath it, tying it to the charge. */
.ae-hero__kicker{
  border-bottom:2px solid var(--wp--preset--color--clay);
}

/* The hollow word is the editorial move in this headline —
   an outlined claim. Slightly heavier stroke so it survives
   against the busy panel geometry behind it.                   */
.ae-hero__headline .ae-hollow{
  -webkit-text-stroke:2.5px var(--wp--preset--color--paper);
}

/* Long headlines were overflowing on narrow screens. */
@media (max-width:600px){
  .ae-hero__headline{
    font-size:clamp(38px,12vw,64px);
  }
  .ae-hero__type{
    max-width:calc(100% - 40px);
  }
}

/* ── 16. SOURCES STRIP ──────────────────────────────────────
   Horizontal band closing the homepage. Deliberately quieter
   than the article slots: this is apparatus, not headline.
   Slate ground, mono dates, clay eyebrow.                      */

.ae-sources{
  background:var(--wp--preset--color--slate);
  margin-inline:calc(var(--wp--custom--gutter) * -1);
  padding:var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
  border-top:1px solid rgba(92,113,137,.35);
}
.ae-sources__head{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:var(--wp--preset--spacing--40);
}
.ae-eyebrow--clay{
  color:var(--wp--preset--color--clay);
  margin:0;
}
.ae-eyebrow--clay::after{
  background:linear-gradient(90deg, var(--wp--preset--color--clay), transparent);
}
.ae-sources__note{
  margin:0;
  font-size:14px;
  color:var(--wp--preset--color--haze);
}
.ae-sources__track{
  gap:1px !important;
  background:rgba(92,113,137,.28);
}
.ae-source-card{
  background:var(--wp--preset--color--slate);
  padding:18px 16px 22px;
  transition:background .18s ease;
}
.ae-source-card:hover{
  background:var(--wp--preset--color--slate-2);
}
.ae-source-card .wp-block-post-date{
  margin-bottom:8px;
  color:var(--wp--preset--color--haze);
}
.ae-source-card .wp-block-post-title{
  margin:0;
  text-transform:none;          /* documents keep their real titles */
  letter-spacing:0;
  font-family:var(--wp--preset--font-family--body);
  font-weight:400;
  line-height:1.25;
}
.ae-sources__empty{
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
}

/* One column per card is wrong on phones — stack them. */
@media (max-width:860px){
  .ae-sources__track{
    grid-template-columns:1fr 1fr !important;
  }
}
@media (max-width:480px){
  .ae-sources__track{
    grid-template-columns:1fr !important;
  }
}

/* ── 17. MOBILE RAIL ────────────────────────────────────────
   At 38px the vertical readout was cramped and unreadable.
   Keep the rail as a presence — the pip and the hairline — and
   drop the text rather than shipping something illegible.      */

@media (max-width:860px){
  .ae-rail__tick{
    display:none;
  }
  .ae-rail{
    justify-content:center;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. SINGLE POST — BLACK AND WHITE
   Scoped to .ae-single (the <main> on templates/single.html)
   only. Homepage, archive, and shared chrome (rail, masthead,
   footer) are untouched — they sit outside this element and
   keep the navy/ochre/clay palette everywhere else on the site.

   Strips color entirely: no ochre, no clay. Links and emphasis
   are carried by weight and underline instead of hue, since hue
   is exactly what this mode removes.
   ═══════════════════════════════════════════════════════════ */

.ae-single{
  --mono-bg:    #FFFFFF;
  --mono-ink:   #111318;
  --mono-muted: #6B6E73;
  --mono-line:  #D8D8D8;

  background:var(--mono-bg);
  color:var(--mono-ink);
  /* full-bleed: break out of the page gutter so the black-and-white
     field reads as a real background, not a tinted text column */
  margin-inline:calc(var(--wp--custom--gutter) * -1);
  padding-inline:var(--wp--custom--gutter);
}

.ae-single :where(h1,h2,h3,h4,h5,h6){ color:var(--mono-ink); }

.ae-single .ae-byline{ color:var(--mono-muted); }
.ae-single .ae-byline a{ color:var(--mono-ink); }

.ae-single .ae-eyebrow{ color:var(--mono-ink); }
.ae-single .ae-eyebrow::after{
  background:linear-gradient(90deg, var(--mono-ink), transparent);
}

/* Subhead — italic H5 bound to ACF. Was haze-colored; muted gray here. */
.ae-single h5.wp-block-heading{ color:var(--mono-muted); }

/* Featured image: swap in the mono duotone at the block level
   (see templates/single.html + theme.json) rather than fighting
   the color one with a CSS filter — a real duotone stays crisp,
   grayscale() alone tends to look flat on a photo like this. */

/* Body copy links: underline carries "clickable," not color. */
.ae-single .body a{
  color:var(--mono-ink);
  text-decoration:underline;
  text-decoration-color:var(--mono-line);
  text-underline-offset:3px;
}
.ae-single .body a:hover,
.ae-single .body a:focus-visible{
  text-decoration-color:var(--mono-ink);
}

.ae-single .wp-block-post-title a{ color:var(--mono-ink); }
.ae-single .wp-block-post-title a:hover,
.ae-single .wp-block-post-title a:focus-visible{
  color:var(--mono-muted);
  outline-color:var(--mono-ink);
}

/* Divider SVG at the foot of the article — was ochre/clay/haze. */
.ae-single .ae-d-stroke{ stroke:var(--mono-line); }
.ae-single .ae-d-hot{    stroke:var(--mono-ink); }
.ae-single .ae-d-clay{   stroke:var(--mono-ink); }
.ae-single .ae-d-fill{      fill:var(--mono-line); }
.ae-single .ae-d-fill-hot{  fill:var(--mono-ink); }
.ae-single .ae-d-fill-clay{ fill:var(--mono-ink); }

/* "More on this beat" related grid, inside .ae-single */
.ae-single .wp-block-post-date{ color:var(--mono-muted); }

/* ═══════════════════════════════════════════════════════════
   19. HEADLINE SPACING + KERNING PASS
   ═══════════════════════════════════════════════════════════ */

/*
   Hero jump line — small wayfinding note near the top of the
   homepage pointing at the Sources strip lower down the page.
   Sits between the kicker and the headline, quieter than both.
*/
.ae-hero__jump{
  margin:0 0 14px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ae-hero__jump a{
  color:var(--wp--preset--color--haze);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.ae-hero__jump a:hover,
.ae-hero__jump a:focus-visible{
  color:var(--wp--preset--color--ochre);
  border-bottom-color:var(--wp--preset--color--ochre);
}
.ae-hero__jump span{ display:inline-block; }

/*
   Targeted gap between headline line 1 and line 2 only.
   Line-height is uniform across a block by nature, so the only
   way to make line 1→2 wider than line 2→3 without touching the
   second gap is to wrap each line and add margin to the first.
   2px added below line 1; line 2→3 keeps the original line-height.
*/
.ae-hero__line{ display:inline-block; }
.ae-hero__line--1{ margin-bottom:2px; }

/* Anchor target for the hero's jump link — no sticky header on
   this theme, so no scroll-margin-top correction is needed. */
#ae-sources{ scroll-margin-top:16px; }

/*
   Kerning — time and figures.
   Tabular numerals so digits don't wobble in width against each
   other (matters most for the rail's live readout and any date
   stamp), plus a tightened letter-spacing specifically on the
   rail ticks: .3em was tuned for the vertical run of letters,
   but it over-spaces the numeral pairs inside "19:40" and "04.1".
*/
.mono,
.wp-block-post-date,
.ae-byline,
.ae-rail__tick{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.ae-rail__tick{
  letter-spacing:.22em; /* was .3em — too loose around digit pairs */
}

/* ═══════════════════════════════════════════════════════════
   20. GET IT RIGHT — standing claims row
   Homepage only, above the hero (templates/front-page.html).

   Deliberately built on the same strip idiom as Sources (§ above):
   full-bleed slate field, eyebrow head, and a four-up track whose
   cells are separated by 1px gaps letting the hairline show through
   — not bordered cards. Keeps the row consistent with the rest of
   the page rather than introducing a second box language.

   Quieter than Sources on purpose: it sits above the hero, so the
   eyebrow stays ochre (Sources uses clay) and there is no dek.

   Copy is hand-set placeholder in patterns/get-it-right.php.
   ═══════════════════════════════════════════════════════════ */

.ae-gir{
  background:var(--wp--preset--color--slate);
  margin-inline:calc(var(--wp--custom--gutter) * -1);
  padding:var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
  border-bottom:1px solid rgba(92,113,137,.35);
}

.ae-gir__head{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:var(--wp--preset--spacing--40);
}

/* Real gap between four bordered boxes — now that each .ae-gir__cell
   carries its own border, a 1px hairline-collapse gap would double up
   into a seam. A proper gap reads as a row of boxes, not a hairline grid. */
/* !important throughout: these are core wp:group blocks, and WordPress
   emits its own .wp-container-* layout rules that would otherwise win.
   Same reason .ae-sources__track carries them. */
.ae-gir__track{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
}

/* The cell ground must differ from .ae-gir's ground or the boxes vanish.
   Both were slate, separated only by a 40%-opacity border — on a dark
   field that reads as plain text, which is exactly what happened. The
   sources strip survives the same color pairing only because its 1px
   hairline gaps cut visible seams; a 16px gap has no such help. */
.ae-gir__cell{
  background:var(--wp--preset--color--slate-2);
  border:1px solid rgba(92,113,137,.55);
  border-top:2px solid var(--wp--preset--color--ochre);
  padding:18px 16px 22px;
  transition:background .18s ease, border-color .18s ease;
}
.ae-gir__cell:hover{
  background:var(--wp--preset--color--slate);
  border-color:var(--wp--preset--color--ochre);
}

.ae-gir__num{
  margin:0 0 8px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  font-weight:500;
  letter-spacing:.16em;
  color:var(--wp--preset--color--haze);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Body serif at source-card weight — these are statements, not
   headlines, so they do not take the display face. */
.ae-gir__cell > *{ margin-block:0; }
.ae-gir__claim{
  margin:0;
  font-family:var(--wp--preset--font-family--body);
  font-weight:400;
  font-size:16px;
  line-height:1.25;
  color:var(--wp--preset--color--paper);
  text-wrap:pretty;
}

@media (max-width:900px){
  .ae-gir__track{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){
  .ae-gir__track{ grid-template-columns:1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   21. FOOTER LICENSE
   CC BY-NC 4.0. Mono chip + full name, so the license reads
   at a glance and still says what it is for a screen reader.
   ═══════════════════════════════════════════════════════════ */

.ae-license{
  margin:var(--wp--preset--spacing--30) 0 0;
  font-size:13px;
  line-height:1.4;
}
.ae-license a{
  color:var(--wp--preset--color--haze);
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  gap:.6em;
  flex-wrap:wrap;
}
.ae-license a:hover,
.ae-license a:focus-visible{ color:var(--wp--preset--color--ochre); }

.ae-license__mark{
  font-family:var(--wp--preset--font-family--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  white-space:nowrap;
  padding:.25em .5em;
  border:1px solid var(--wp--custom--hairline);
  color:inherit;
}
.ae-license__text{ font-size:13px; }

/* ═══════════════════════════════════════════════════════════
   22. MASTHEAD NOTICE — temporary construction banner
   Sits to the RIGHT of the logo, left-aligned, inset 2in from it,
   with the nav holding the far right of the masthead. Mono and
   haze so it reads as a system note, not editorial copy; the clay
   pip is the only color, matching the rail pip.

   TEMPORARY. To remove: delete the .ae-notice block from
   parts/header.html and this section. Nothing else depends on it —
   .ae-masthead__right can stay, it just wraps the nav.
   ═══════════════════════════════════════════════════════════ */

.ae-masthead__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.ae-notice{
  margin:0 auto 0 2in;   /* 2in from the logo; auto right pushes nav out */
  align-self:flex-start; /* top-align with the logo, not the baseline */
  text-align:left;
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--mono);
  line-height:1.25;   /* tight — four short lines, not paragraphs */
  letter-spacing:.06em;
  color:var(--wp--preset--color--haze);
  max-width:52ch;
}
/* Each line is its own <p> — explicit block stacking, no reliance on
   span display:block inside a parent paragraph. */
.ae-notice > p{
  display:block;
  margin:0;
}

.ae-notice__flag{
  color:var(--wp--preset--color--paper);
}
/* Clay pip, same signal as the rail's live dot */
.ae-notice__flag::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  margin-right:8px;
  vertical-align:middle;
  background:var(--wp--preset--color--clay);
  border-radius:50%;
}

.ae-notice__contact a{
  color:var(--wp--preset--color--ochre);
  text-decoration:none;
  border-bottom:1px solid rgba(242,212,136,.4);
}
.ae-notice__contact a:hover,
.ae-notice__contact a:focus-visible{
  border-bottom-color:var(--wp--preset--color--ochre);
}

/* A 2in inset plus four lines of mono stops fitting alongside the
   logo well before the masthead's own wrap point — drop the inset
   and let the notice take its own full-width line. */
@media (max-width:1100px){
  .ae-notice{
    margin-left:0;
    flex-basis:100%;
    max-width:none;
  }
}

/* ═══════════════════════════════════════════════════════════
   23. "WHAT'S GOING ON" — standing context panel
   Right-hand 40% of the lead slot. Standing editorial furniture,
   not post data: it lives OUTSIDE the query in front-page.html so
   it survives when the query returns nothing and stays editable
   in the Site Editor as ordinary blocks.

   Reads as a note pinned beside the lead, not a second story —
   ochre spine, body serif a step down from the dek, no display
   face anywhere. It must never compete with the headline it sits
   next to.
   ═══════════════════════════════════════════════════════════ */

.ae-context{
  background:var(--wp--preset--color--slate-2);
  border-left:2px solid var(--wp--preset--color--ochre);
  padding:22px 24px 26px;
}

.ae-context .ae-eyebrow{ margin-bottom:14px; }

.ae-context__body{
  font-family:var(--wp--preset--font-family--body);
  font-size:16px;
  line-height:1.5;
  color:var(--wp--preset--color--paper);
  margin:0 0 12px;
  text-wrap:pretty;
}
.ae-context__body:last-child{ margin-bottom:0; }

/* The forward-looking closer reads as a note, not more analysis —
   smaller, mono, haze, set off with a little extra space above. */
.ae-context__more{
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px;
  font-style:italic;
  letter-spacing:.04em;
  color:var(--wp--preset--color--haze);
  margin:16px 0 0;
}

/* The lead headline is display-l; on a narrow column the panel would
   otherwise sit oddly tall beside it. Cap and let it breathe. */
@media (min-width:861px){
  .ae-context{ position:sticky; top:32px; }
}

/* ═══════════════════════════════════════════════════════════
   24. PLACEHOLDER / LOREM
   Shown by a slot's wp:query-no-results branch when there is no
   post at that offset yet.

   Tagged, not silently faked. This site's entire premise is
   accurate reporting, so scaffolding must be unmistakable as
   scaffolding — hence the mono "Placeholder" chip and the muted,
   deliberately unfinished treatment. It should read as a gap
   waiting to be filled, never as a published article.

   TEMPORARY-ISH: harmless to leave in place. Once seven articles
   are published none of this renders.
   ═══════════════════════════════════════════════════════════ */

.ae-lorem{
  border-left:1px dashed rgba(92,113,137,.5);
  padding-left:20px;
  opacity:.72;
}

.ae-lorem__tag{
  display:inline-block;
  margin:0 0 12px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--wp--preset--color--haze);
  border:1px dashed rgba(92,113,137,.6);
  padding:.25em .6em;
}

/* Matches the real headline's face and size so the slot occupies the
   space it will occupy for real — the point of a placeholder is to
   show the layout, not to look like body copy. */
.ae-lorem__title{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--wp--preset--color--haze);
  margin:0 0 14px;
  text-wrap:balance;
}

.ae-lorem__body{
  font-family:var(--wp--preset--font-family--body);
  font-size:17px;
  line-height:1.45;
  color:var(--wp--preset--color--haze);
  margin:0;
  max-width:62ch;
  text-wrap:pretty;
}

/* Row two of Get it right is placeholder copy — same box, quieter,
   so the row reads as "more coming" rather than four live claims. */
.ae-gir__cell--placeholder{
  opacity:.62;
  border-top-color:rgba(92,113,137,.55);
}
.ae-gir__cell--placeholder:hover{ opacity:.85; }

@media (max-width:560px){
  .ae-lorem{ padding-left:14px; }
}