/* Hawkeye site V3 - shared stylesheet
   V1/V2 were the same visual design (identical stylesheets) differing only in
   message frame. V3 is the first actual visual pass.

   Direction: HYBRID. The cream page is kept for warmth and continuity, and the
   two moments that have to carry weight sit on full-bleed spruce "plates".
   Two sources, both already on this machine:
     1. The instrument-panel palette and dial hero from ~/Documents/hawkeye-hero.html
        (spruce ground, brass, teal, mono labels). Built 2026-08-03, never landed
        on the site. Its :root vars are scoped to .plate here so they do not leak.
     2. The card-on-dark-ground device from the Humanity Labs / Trust Times engine:
        light card floating on a radial dark ground, square uppercase letterspaced
        rust button (#a55339), 54x3px accent rule as a section marker.

   Rules: no em dashes anywhere (pre-commit hook). No "Today"/"Soon" labels. */

:root {
  --ink: #1a1a18;
  --body: #4c4b45;
  --muted: #63635e;
  --bg: #faf9f5;
  --card: #ffffff;
  --line: #e8e6dc;
  --accent: #b45309;
  --accent-dark: #92400e;
  --accent-soft: #fef3c7;
  --node-fill: #f8f7f4;
  --node-stroke: #8a8a84;

  /* RETIRED 2026-08-19. Rust was carried over from the Humanity Labs engine and
     was the only orange that was not Hawkeye's own. Buttons now use --accent,
     the colour of the aperture mark, so the outline of a CTA box and the button
     inside it are the same value. Kept defined, referenced nowhere, so the
     history stays legible. White on --accent measures 5.02:1, still AA. */
  --rust: #a55339;
  --rust-dark: #8d3f26;

  --hero-field: #2f3128;

  /* The beige the CTA boxes are filled with. Reused for the footer buttons so
     the two action zones echo each other, and so the footer stops using a
     colour that appears nowhere else. Replaced an olive I had invented, which
     was the only value on the page not drawn from this palette. */
  --beige: #f2f0e7;
  --beige-hover: #ffffff;

  /* Kept for the social chip hover only. */
  --olive: #565e46;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--body);
  line-height: 1.6;
  font-size: 17px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { color: var(--ink); line-height: 1.2; font-family: 'Source Serif 4', Georgia, serif; }
h1 { font-size: 3.2rem; font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: 2.1rem; font-weight: 500; margin-bottom: 0.6em; }
h3 { font-size: 1.15rem; }

a { color: var(--accent-dark); }

section { padding: 56px 0; }
section.tight { padding: 32px 0; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.accent-line { color: var(--accent); }

/* ===== Header / nav ===== */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}

.wordmark {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.nav-links { display: flex; gap: 22px; flex: 1; }

.nav-links a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a.active {
  color: var(--accent-dark);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.minimal-header .nav-row { justify-content: space-between; }
.back-link { font-size: 0.92rem; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ===== Buttons ===== */

/* Uppercase, letterspaced, rounded. Was 2px square, chosen to avoid looking
   like a pill (the old comment named the pill as the clearest anthropic.com
   tell). 12px is rounded without becoming a pill, and sits in the same family
   as the 18px hero panel and the 18px CTA boxes. Changing it here changes
   every button on every page, which is the point: one button shape. */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 12px;
  /* <button> does not inherit font-family, so the Subscribe button fell back to
     Arial while every <a class="btn"> used DM Sans. */
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }

/* Footer variant: light chip on the dark footer. Ink on beige measures 14.9:1,
   and the chip reads at 12.8:1 against the footer, so it is unmistakably a
   button without introducing another colour. */
.btn-beige { background: var(--beige); color: var(--ink); }
.btn-beige:hover { background: var(--beige-hover); color: var(--ink); }

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { background: rgba(0, 0, 0, 0.05); }

/* On a spruce plate the rust loses too much separation from the ground, so the
   plate CTA reverses to brass on ink. */
.btn-brass { background: var(--brass); color: #10201d; }
.btn-brass:hover { background: #efc069; }

/* 54x3px accent bar, borrowed from the Trust Times section rules. Used as a
   section marker so headings stop floating unanchored. */
.rule-bar {
  width: 54px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 20px;
}
.plate .rule-bar { background: var(--brass); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.centered { justify-content: center; }

/* ===== Hero ===== */

.hero { padding: 84px 0 48px; text-align: left; }
.hero h1 { max-width: 820px; margin: 0 0 20px; }
.hero .subhead {
  max-width: 640px;
  margin: 0 0 30px;
  font-size: 1.2rem;
}

.secondary-cta-row {
  display: flex;
  justify-content: flex-start;
  gap: 26px;
  flex-wrap: wrap;
  padding: 8px 0 0;
}
.secondary-cta-row a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}
.secondary-cta-row a:hover { text-decoration: underline; }

/* ===== Cards / grids ===== */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Five-across variant, used by the five-stage row on how-it-works.html. This was
   an inline style on the element, which outranks every media query below and so
   held five columns onto narrow screens - the cause of the horizontal overflow
   between 701px and 800px. As a class it can be overridden responsively. */
.card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}
.card h3 { margin-bottom: 10px; }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Testimonial card: no accent bar, no shadow. Flat hairline border, serif quote
   text, oversized open-quote glyph as the only decorative element.
   Glyph set via CSS escape (no raw Unicode). */
.quote-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 56px 36px 30px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  left: 30px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}
.quote-card .attribution {
  display: block;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.stat .stat-num { font-family: 'Source Serif 4', Georgia, serif; font-size: 2.5rem; font-weight: 600; color: var(--accent-dark); }
.stat .stat-label { font-size: 0.92rem; color: var(--muted); }

/* ===== Section shells ===== */

.section-alt { background: #f0efea; }

.cta-band { text-align: center; padding: 60px 0; }
.cta-band h2 { margin-bottom: 20px; }

/* ===== Forms ===== */

.signup-form { display: flex; gap: 10px; max-width: 460px; }

/* Mailchimp's honeypot wrapper. It has to be SUBMITTED but never seen, so it
   is moved off screen rather than hidden: display:none and visibility:hidden
   are both things a bot checks for, and some browsers skip such fields. The
   form is a flex row, so it also has to leave the flow or it would open a
   third gap between the input and the button. */
.mc-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.signup-form.centered { margin: 0 auto; }
.signup-form input[type="email"] {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding-left: 18px;
  font-size: 1rem;
  background: var(--card);
}

/* ===== Footer ===== */

.site-footer {
  background: #141413;
  color: #b9b7ad;
  padding: 44px 0 30px;
  margin-top: 40px;
  font-size: 0.92rem;
}

/* Centred rather than left aligned: these are buttons now, and a left-aligned
   row of three chips reads as an accident against the columns below. */
.footer-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 32px;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 24px 40px;
  font-size: 0.85rem;
  align-items: start;
}

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  transition: background 150ms ease;
}
.footer-social a:hover { background: var(--olive); }
.footer-social svg { width: 19px; height: 19px; fill: #b9b7ad; }
.footer-social a:hover svg { fill: #f0efe6; }
.footer-cols h4 {
  color: #87867e;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: 7px; }
.footer-cols a { color: #b9b7ad; text-decoration: none; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-cols a.footer-featured { color: #fff; font-weight: 700; }

.footer-fineprint { margin-top: 28px; font-size: 0.78rem; color: #87867e; }

/* ===== Placeholder imagery ===== */

.ph-img {
  background: repeating-linear-gradient(45deg, #e9e6df, #e9e6df 12px, #f2f0ec 12px, #f2f0ec 24px);
  border: 1px dashed #b9b3a8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7d766b;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.logo-strip .logo-ph {
  border: 1px dashed #b9b3a8;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7d766b;
  background: #f2f0ec;
}

/* The teal draft-warning panel used by V1/V2 was removed in V3, class and all.
   Unresolved items are now HTML comments in the pages instead, so nothing
   draft-only can survive into a launch by accident. */

/* ===== Feedback loop diagram ===== */

.loop-diagram-wrap { max-width: 900px; margin: 30px auto 0; }
.loop-diagram-wrap svg { width: 100%; height: auto; display: block; }

.loop-caption {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 10px;
}

/* Animated dots hidden and static dots shown when the user prefers reduced motion.
   Static positions are a real fallback state, not a paused animation. */
.dot-static { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dot-anim { display: none; }
  .dot-static { display: inline; }
}

/* ===== Tables ===== */

.formats-table { width: 100%; border-collapse: collapse; background: var(--card); }
.formats-table th, .formats-table td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.95rem;
  vertical-align: top;
}
.formats-table th { background: #f0efea; color: var(--ink); }
.formats-table .tbd { color: var(--muted); font-style: italic; }

/* ===== Lists of issues / calls ===== */

.row-list { list-style: none; }
.row-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.row-list .row-date { min-width: 110px; color: var(--muted); font-size: 0.9rem; }
.row-list .row-title { flex: 1; font-weight: 600; color: var(--ink); }
.row-list a { white-space: nowrap; font-weight: 700; text-decoration: none; }
.row-list a:hover { text-decoration: underline; }

.spotlight-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
}
.spotlight-card .spot-date { color: var(--accent-dark); font-weight: 700; font-size: 0.9rem; }
.spotlight-card h3 { font-size: 1.4rem; margin: 8px 0 6px; }
.spotlight-card .spot-teaser { margin-bottom: 18px; }

.thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.thumb-row .thumb .ph-img { aspect-ratio: 16 / 9; margin-bottom: 8px; }
.thumb-row .thumb .thumb-name { font-weight: 600; color: var(--ink); font-size: 0.95rem; }

/* ===== Responsive ===== */

@media (max-width: 800px) {
  h1 { font-size: 2rem; }
  .nav-links { gap: 14px; flex-wrap: wrap; }
  .card-grid, .quote-grid, .stat-row, .thumb-row { grid-template-columns: 1fr; }
  /* Needs its own line: .card-grid.cols-5 is more specific than .card-grid. */
  .card-grid.cols-5 { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-social { grid-column: 1 / -1; }
  .signup-form { flex-direction: column; }
}

/* ===== Brand imagery (added when live assets were pulled) ===== */

.logo-strip img { height: 26px; width: auto; filter: grayscale(1); opacity: 0.65; }

.attr-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.attr-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.attr-row img.logo-square { border-radius: 8px; object-fit: contain; background: var(--bg); padding: 3px; }
.attr-row .attribution { margin-top: 0; font-family: 'DM Sans', sans-serif; }

.bio-photo { width: 100%; border-radius: 12px; display: block; }

/* ===== Phone layout (added 2026-08-13) =====
   The only breakpoint before this was 800px, which is a tablet width, so phones
   inherited tablet styling. Two structural bugs were fixed here:
   the sticky header grew to 251px tall on a 390px screen, and inline
   grid-template-columns in how-it-works.html and about.html beat the 800px
   media query, overflowing the page to 835px wide. */

@media (max-width: 700px) {

  .wrap { padding: 0 18px; }

  /* Header: row 1 is wordmark plus CTA, row 2 is a scrollable link strip.
     Keeps the sticky header near 100px instead of 251px. */
  .nav-row {
    flex-wrap: wrap;
    gap: 10px 14px;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 10px;
  }
  .wordmark { flex: 1 1 auto; font-size: 0.98rem; letter-spacing: 0.14em; }
  .nav-row .btn { order: 2; padding: 9px 15px; font-size: 0.85rem; }
  .nav-links {
    order: 3;
    flex: 0 0 100%;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 0.9rem; }

  /* Inline grid-template-columns beats the media query, so override it.
     Applies to the how-it-works formats matrix and the about.html split. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  .footer-cols { grid-template-columns: 1fr; gap: 22px; }

  .hero { padding: 40px 0 32px; }
  .hero .subhead { font-size: 1.08rem; }

  /* Nothing should be able to push the page wider than the screen. */
  .btn, .card, img, .loop-diagram-wrap, .signup-form { max-width: 100%; }
  .btn-row .btn { flex: 1 1 auto; text-align: center; }

  /* Dated link rows: nowrap plus a 110px date column overflowed. */
  .row-list a { white-space: normal; }
  .row-list .row-date { min-width: 0; }
  .row-list li { flex-direction: column; align-items: flex-start; gap: 4px; }

  .logo-strip { flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
  .logo-strip img { height: 22px; }

  .calendly-inline-widget { min-width: 0 !important; }

  /* The loop diagram has a 1000px viewBox. Scaled to a 350px phone screen its
     labels render around 3px and become unreadable, so let it keep a legible
     size and scroll horizontally instead. */
  .loop-diagram-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .loop-diagram-wrap svg { min-width: 620px; }

}

@media (max-width: 430px) {
  h1 { font-size: 1.72rem; }
  /* Below 430px the four nav labels no longer fit the strip and "Community Calls"
     was sliced mid-word with no scrollbar to hint at it. Dropping "Community "
     makes all four fit; the full label returns above 430px. */
  .nav-long { display: none; }
  .hero .subhead { font-size: 1.02rem; }
}

/* =====================================================================
   SECTION: SPRUCE PLATE
   Full-bleed dark sections that carry the hero and the "what comes out"
   moment. Palette lifted from ~/Documents/hawkeye-hero.html dark theme.
   Custom properties are scoped to .plate, not :root, so they cannot leak
   into the cream page (per the Dial Visual handoff, 2026-08-03).
   ===================================================================== */

.plate {
  --spruce: #0b1514;
  --panel: #101e1c;
  --plate-fill: #12211f;
  --p-ink: #dde6e3;
  --p-ink-soft: #8ca09c;
  --p-ink-faint: #5a6f6b;
  --p-rule: #23352f;
  --brass: #d9a648;
  --brass-soft: rgba(217, 166, 72, 0.18);
  --teal: #4fb3a8;
  --noise: #3f5450;

  /* Radial rather than flat, so the plate has a light source. Same structure as
     the Trust Times body ground, retinted spruce. */
  background:
    radial-gradient(120% 120% at 50% 0%, #16302c 0%, #0b1514 58%, #070f0e 100%);
  color: var(--p-ink);
  padding: 64px 0 56px;
  overflow: hidden;
}

.plate h2, .plate h3 { color: var(--p-ink); }
/* :not(.btn) matters. Without it this rule outranks .btn-brass on specificity
   and paints the button label brass on brass, i.e. invisible. */
.plate a:not(.btn) { color: var(--brass); }
.plate .eyebrow { color: var(--brass); }

.plate-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.plate-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--p-rule);
}

/* ---- hero masthead on the plate ---- */

/* Column ratio is set by the headline, not by taste. "Dial in what you listen to."
   at 2.95rem Source Serif measures ~520px, so the left column has to clear that
   or the line orphans "to." onto its own row. 1.45fr of a 1012px content width
   less the 40px gap gives 575px. */
.plate-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}
.plate-masthead h1 {
  color: var(--p-ink);
  margin: 0 0 22px;
  font-size: 2.95rem;
  text-wrap: balance;
}
.plate-masthead h1 .accent-line { color: var(--brass); }
.plate-lede {
  margin: 0;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--p-ink-soft);
}

/* ---- output cards floating on the plate ---- */

.plate-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* The card-on-dark-ground device. Cream paper value from the Trust Times
   engine (--paper: #f6f1e7), with its directional drop shadow. */
.plate-card {
  background: #f6f1e7;
  color: #16233f;
  border-radius: 3px;
  padding: 24px 22px 26px;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.75);
}
.plate-card h3 {
  color: #16233f;
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.plate-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #4c4b45;
}
.plate-card .card-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8d3f26;
  margin-bottom: 12px;
}

.plate-foot {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.plate-foot .plate-foot-note {
  margin: 0;
  font-size: 0.92rem;
  color: var(--p-ink-soft);
}

/* =====================================================================
   SECTION: DIAL BENCH
   Ported from ~/Documents/hawkeye-hero.html. Behaviour unchanged; only the
   custom-property source moved from :root to .plate.
   ===================================================================== */

.bench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 300px;
}

/* The old dial hero pinned #flow absolutely inside .bench. The rebuilt hero
   puts the canvas in normal flow so the panel takes its height from it, so
   that rule is gone. .bench, .zone, .core, .dial, .nodes and .readout below
   are now unused by any page; left in place rather than risking a sweep. */

.zone { position: relative; display: flex; flex-direction: column; gap: 14px; }
.zone--out { align-items: flex-end; text-align: right; }

.zone__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-ink-faint);
}

.nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.node {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--p-ink);
  transition: color 260ms ease, opacity 260ms ease;
}
.zone--out .node { flex-direction: row-reverse; }

.node__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-soft);
  transition: background 260ms ease, box-shadow 260ms ease;
}
.node[data-live="off"] { color: var(--p-ink-faint); opacity: 0.5; }
.node[data-live="off"] .node__dot { background: var(--noise); box-shadow: 0 0 0 3px transparent; }

.core {
  position: relative;
  width: clamp(168px, 21vw, 216px);
  height: clamp(168px, 21vw, 216px);
  border-radius: 50%;
  background: var(--plate-fill);
  border: 1px solid var(--p-rule);
  display: grid;
  place-content: center;
  justify-self: center;
  text-align: center;
  z-index: 1;
}
.core__mark {
  margin: 0 0 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-ink);
}
.core__rule { width: 34px; height: 1px; background: var(--p-rule); margin: 0 auto 10px; }
.core__ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.dial { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 230px; }
.zone--out .dial { align-items: flex-end; }

.dial__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dial__name { color: var(--p-ink); }
.dial__val { color: var(--brass); font-variant-numeric: tabular-nums; }

.dial input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 130px;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}
.dial input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--p-rule); }
.dial input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--p-rule); }
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--spruce);
  box-shadow: 0 0 0 1px var(--brass);
}
.dial input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--spruce);
  box-shadow: 0 0 0 1px var(--brass);
}
.dial input[type="range"]:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 3px; }

.dial__hint { margin: 0; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.04em; color: var(--p-ink-faint); }

.readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--p-rule);
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-ink-faint);
}
.readout b { font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; }

.readout-note {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--p-ink-faint);
}

.plate-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 34px;
}
.plate-cta-row .plate-cta-link {
  color: var(--brass);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.plate-cta-row .plate-cta-link:hover { text-decoration: underline; }

/* =====================================================================
   SECTION: PRESS STRIP
   The eight press logos have been sitting unused in images/ since the V1
   build. Label copy is a placeholder pending Marshall's wording.
   ===================================================================== */

.press-strip { padding: 40px 0; border-bottom: 1px solid var(--line); }
.press-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
}
/* Marks are already single-ink, so no grayscale filter is needed.
   Heights are per logo rather than uniform: matching heights makes a wide
   wordmark like Fortune (4.8:1) shout and a compact one like WSJ (1.8:1)
   disappear. These follow height = 38 / sqrt(aspect), which equalises area. */
.press-logos img {
  width: auto;
  opacity: 0.55;
  transition: opacity 150ms ease;
}
.press-logos img:hover { opacity: 0.9; }

.press-logos .pl-wsj      { height: 28px; }
.press-logos .pl-ft       { height: 28px; }
.press-logos .pl-cnn      { height: 26px; }
.press-logos .pl-pbs      { height: 24px; }
.press-logos .pl-atlantic { height: 23px; }
.press-logos .pl-npr      { height: 22px; }
.press-logos .pl-guardian { height: 22px; }
.press-logos .pl-fortune  { height: 17px; }

/* =====================================================================
   SECTION: V3 OVERRIDES to the inherited V1 cream styles
   ===================================================================== */

/* Was 3px, squared off deliberately "to match the button language" when buttons
   were 2px. Buttons went rounded 2026-08-19, so that reasoning now points the
   other way. 18px matches the hero panel and the CTA boxes. */
.card, .quote-card, .spotlight-card { border-radius: 18px; }

.quote-card { padding: 30px 32px 28px; }
.quote-card::before { top: 10px; left: 26px; font-size: 3.4rem; }

/* Footer retuned from neutral charcoal into the spruce family so the two dark
   registers on the page read as one system. */
.site-footer { background: #0b1514; margin-top: 0; }
.footer-cta-row a:hover { color: var(--brass, #d9a648); }

.signup-form input[type="email"] { border-radius: 2px; }

/* =====================================================================
   SECTION: PLATE RESPONSIVE
   Appended last so it wins over the plate base rules above.
   ===================================================================== */

@media (max-width: 900px) {
  .plate-masthead { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .plate-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .bench {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 26px;
    min-height: 0;
  }
  .zone, .zone--out { align-items: center; text-align: center; width: 100%; }
  .nodes { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 7px 16px; }
  .zone--out .node { flex-direction: row; }
  .dial, .zone--out .dial { align-items: center; width: 100%; }
  .core { order: 0; }
}

@media (max-width: 700px) {
  .plate { padding: 40px 0 38px; }
  .plate-card-grid { grid-template-columns: 1fr; }
  .readout { gap: 8px 20px; font-size: 0.63rem; }
  .press-logos { gap: 14px 24px; }
  .press-logos .pl-wsj      { height: 22px; }
  .press-logos .pl-ft       { height: 22px; }
  .press-logos .pl-cnn      { height: 20px; }
  .press-logos .pl-pbs      { height: 19px; }
  .press-logos .pl-atlantic { height: 18px; }
  .press-logos .pl-npr      { height: 17px; }
  .press-logos .pl-guardian { height: 17px; }
  .press-logos .pl-fortune  { height: 13px; }
  .plate-cta-row .btn { flex: 1 1 100%; text-align: center; }
}

/* =====================================================================
   SECTION: PLATE HERO
   Every page opens on a spruce plate: eyebrow, title, subhead. The homepage
   uses the two-column .plate-masthead variant because it has a lede to place
   beside the headline; interior pages use this single-column one.
   ===================================================================== */

.plate-hero { padding: 62px 0 58px; }
.plate-hero h1 { color: var(--p-ink); margin: 0 0 18px; max-width: 20ch; }
.plate-hero h1 .accent-line { color: var(--brass); }
.plate-hero .subhead {
  max-width: 58ch;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--p-ink-soft);
}
.plate-hero .subhead a { color: var(--brass); }
.plate-hero .btn { margin-top: 30px; }

/* Two-column plate hero, used by About so the portrait sits on the dark ground. */
.plate-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.plate-hero-split p { color: var(--p-ink-soft); }
.plate-hero-split p + p { margin-top: 14px; }
.plate-hero-split .bio-photo { border-radius: 3px; }

/* ---- body copy and headings inside a plate ---- */

.plate p { color: var(--p-ink-soft); }
.plate strong { color: var(--p-ink); }
.plate .eyebrow { color: var(--brass); }
.plate ul, .plate ol { color: var(--p-ink-soft); }

/* Stats reversed onto the plate. Brass rather than the cream page's amber,
   which does not carry on a dark ground. */
.plate .stat .stat-num { color: var(--brass); }
.plate .stat .stat-label { color: var(--p-ink-soft); }

/* Quote card on a plate: same cream paper as .plate-card so the two dark
   sections use one card material. */
.plate .quote-card {
  background: #f6f1e7;
  border-color: transparent;
  color: #16233f;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.75);
}
.plate .quote-card::before { color: #a55339; }
.plate .quote-card .attribution { color: #63635e; }

/* Signup form reversed onto the plate, used by the newsletter page hero. */
.plate .signup-form input[type="email"] {
  background: var(--plate-fill);
  border-color: var(--p-rule);
  color: var(--p-ink);
}
.plate .signup-form input[type="email"]::placeholder { color: var(--p-ink-faint); }

/* Spotlight card reversed onto the plate, used by the next-call panel. */
.plate .spotlight-card {
  background: #f6f1e7;
  border-color: transparent;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.75);
}
.plate .spotlight-card p { color: var(--body); }
.plate .spotlight-card .spot-date { color: #8d3f26; }

/* =====================================================================
   SECTION: PRESS STRIP, shared placement
   About and Schedule a 1:1 each carried their own .logo-strip built on the
   untrimmed originals. All three now use one markup block and one asset set.
   ===================================================================== */

.press-more {
  text-align: center;
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted);
}
.press-more a { font-weight: 600; }

.press-strip.on-alt { background: #f0efea; border-bottom: 0; }

/* =====================================================================
   SECTION: PLATE RESPONSIVE, interior pages
   ===================================================================== */

@media (max-width: 900px) {
  .plate-hero-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .plate-hero-split .bio-photo { max-width: 320px; }
}

@media (max-width: 700px) {
  .plate-hero { padding: 38px 0 36px; }
  .plate-hero h1 { max-width: none; }
  .plate-hero .subhead { font-size: 1.05rem; }
  .plate .stat-row { gap: 26px; }
}

/* =====================================================================
   SECTION: PAPER RESET INSIDE A PLATE
   The .plate rules above set text to the light spruce ink, which is correct
   for copy sitting directly on the dark ground and wrong for anything inside
   a cream card floating on it. Without this, .plate h3 painted the Next Call
   headline #dde6e3 on #f6f1e7, i.e. almost invisible.

   :is() carries the specificity of its most specific argument, so
   `.plate :is(.plate-card, ...) :is(h1, h2, h3)` scores 0,2,1 and beats
   `.plate h3` at 0,1,1. Any future cream surface added to a plate should be
   added to this list rather than patched individually.
   ===================================================================== */

.plate :is(.plate-card, .quote-card, .spotlight-card) { color: #16233f; }
.plate :is(.plate-card, .quote-card, .spotlight-card) :is(h1, h2, h3, h4) { color: #16233f; }
.plate :is(.plate-card, .quote-card, .spotlight-card) :is(p, li, ul, ol) { color: var(--body); }
.plate :is(.plate-card, .quote-card, .spotlight-card) strong { color: var(--ink); }
.plate :is(.plate-card, .quote-card, .spotlight-card) a:not(.btn) { color: var(--accent-dark); }
.plate :is(.plate-card, .quote-card, .spotlight-card) .attribution { color: var(--muted); }
.plate .spotlight-card .spot-date { color: var(--rust-dark); }


/* =====================================================================
   Hero, 2026-08-19 rebuild.
   The dark area is an INSET PANEL, not a full-bleed plate. Site-wide
   decision: full bleed is reserved for the footer. Its left edge lines up
   with the headline above it, which is what makes it sit on the page
   rather than on top of it.
   ===================================================================== */

.hero-top { padding: 76px 0 0; }

/* No measure cap: the two sentences are meant to sit on one line, and .wrap
   already bounds the column at 1060px. A 22ch measure forced a third line. */
.hero-head {
  max-width: none;
  margin: 0 0 20px;
}

/* Subtitle under the hero headline: the two-line claim and the sentence that
   explains it, both at the same size. The claim was set larger, in the serif,
   until 2026-08-28; Marshall asked for one class for all three lines, so the
   only thing separating the claim now is the accent on its second line and the
   paragraph break. The last one carries the 44px down to the graphic. */
.hero-sub {
  max-width: 62ch;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
}
.hero-sub:last-child { margin-bottom: 44px; }

/* Bottom padding matches the 44px the lede leaves above the panel, so the
   graphic sits in an even band between the copy and the three CTA boxes.
   Without it the boxes butt straight into the panel edge. */
.hero-stage { padding: 0 24px 44px; }

/* The gap under the panel was the largest in the run: 8px of stage padding plus
   32px of section padding. Trimmed so the copy follows the graphic instead of
   floating away from it. */
/* Needs the element in the selector: section.tight sets padding: 32px 0 and
   outranks a bare class, so .intro-section alone was being ignored. */
section.intro-section { padding-top: 12px; }

.hero-panel {
  max-width: 1012px;
  margin: 0 auto;
  position: relative;
  background: var(--hero-field);
  border-radius: 18px;
  overflow: hidden;
}

.hero-panel canvas {
  display: block;
  position: static;   /* explicit: the panel's height comes from the canvas */
  width: 100%;
  height: auto;
}

/* The lede used to sit beside the headline. It now introduces the section
   below the panel instead, so the first screen is headline plus graphic. */
/* Full width of the panel and the box row, so all three edges agree. At the old
   1.2rem this broke into 2 lines of about 104 characters, which is unreadable;
   at 1.5rem it breaks into 3 lines of about 69, which is comfortable. The size
   is doing the work the narrow measure used to do. */
.lede-under {
  width: 100%;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 44px;
}

/* ===== Release ticker =====
   Spruce strip on the cream page, the same field the flow graphic sits on, so
   it reads as one family with the panel above it rather than as a third
   surface. Colours are the canvas palette: FIELD for the ground, LIT for the
   copy, and brass for the dates, which is the only warm value that holds up
   against #2f3128.

   The mechanism: .ticker-track is two identical lists side by side, and the
   keyframe moves it exactly one list width (-50% of the track). At the end of
   the cycle the second list is sitting where the first started, so the reset
   is invisible. Nothing measures anything, so adding or removing items needs
   no other change; the duration is the only thing to retune if the list
   changes length a lot.

   Overflow is clipped on .ticker itself, not on the page, so the track running
   past the right edge never gives the document a horizontal scrollbar. */

/* The 44px below is the gap the lede leaves above it, and the same gap the
   hero panel leaves above the lede. Without it the strip has no margin of its
   own and the CTA boxes butt straight into its rounded bottom corners, which
   is measurably 0px, not merely tight. The run down the page is now 44 / 44 /
   44 from the panel to the boxes. */
.ticker {
  background: var(--hero-field);
  border-radius: 18px;
  padding: 20px 0 22px;
  margin-bottom: 44px;
  overflow: hidden;
}

.ticker-label {
  padding: 0 26px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #adaf9e;
}

.ticker-window { overflow: hidden; }

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 64s linear infinite;
}

/* Hovering stops it so a line that catches the eye can actually be read. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.ticker-list { display: flex; list-style: none; }

.ticker-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 30px;
  white-space: nowrap;
  position: relative;
}

/* Separator drawn as a pseudo-element rather than a border, so the seam
   between the two copies of the list is spaced like every other gap. */
.ticker-list li::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #4a4d3a;
}

/* The literal value, not var(--brass). --brass is defined inside the .plate
   block on purpose, so the instrument palette does not leak into the cream
   page, which means it resolves to nothing out here: the colour fell through
   to the inherited --body, dark grey on a dark ground, all but invisible.
   Same hex as .plate uses. Mono matches the source and destination lists in
   the graphic above. */
.ticker-list .tk-date {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d9a648;
}

.ticker-list .tk-item { color: #dcdcce; font-size: 1rem; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* No motion: the strip becomes a plain horizontal scroller, and the duplicate
   list is dropped so the same ten items are not there twice. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-window { overflow-x: auto; }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* ===== The three ways in ===== */

.cta-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 2026-08-20, Tracey: the sienna outline is off. The beige fill alone now
   separates the boxes from the bone page, and the three buttons carry the
   accent. Border kept in the comment, not the rule, so the earlier version is
   recoverable: border: 1.5px solid var(--accent); */
.cta-box {
  background: #f2f0e7;
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}

.cta-box h3 { margin-bottom: 10px; }

/* Pushes the link to the bottom so all three links align across the row
   however uneven the copy above them is. */
.cta-box p { margin: 0 0 22px; flex: 1 1 auto; }

/* Each box ends in a real button. align-self keeps it from stretching to the
   box width; the flex:1 on the paragraph above pushes all three onto the same
   baseline however uneven the copy is. */
.cta-box .btn { align-self: flex-start; }

/* 2026-08-20, Tracey: bigger type in these three buttons only - the global .btn
   is untouched, so the header and footer buttons and every other page keep the
   size they had. 0.82rem -> 1rem.
   The ceiling is set by CALL CALENDAR at the narrowest three-column width,
   901px, one pixel above the breakpoint where the row drops to two columns.
   Measured: 1.04rem still holds one line there and 1.08rem wraps. 1rem is one
   step back from the edge so a font or rendering difference cannot tip it. */
.cta-box .btn { font-size: 1rem; }

/* ===== Stacked mobile layout for the hero panel =====
   Below 700px the headings and both lists stop being drawn inside the canvas
   and become real HTML: correct size, selectable, reachable by a screen
   reader. The canvas then crops to the three circles alone, so they get the
   full screen width instead of a third of it. */

.m-block { display: none; }

.m-anchor {
  font: 500 22px 'DM Sans', sans-serif;
  letter-spacing: 3px;
  color: #f0efe6;
  margin: 0;
}
.m-sub {
  font: 400 12px 'DM Sans', sans-serif;
  letter-spacing: 1.6px;
  color: #adaf9e;
  margin: 7px 0 0;
}
.m-list { list-style: none; margin: 16px 0 0; padding: 0; }
.m-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 6px 0;
  font: 400 14px var(--mono);
  color: #dcdcce;
}
.m-list .b {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 7px;
}

@media (max-width: 900px) {
  .cta-boxes { grid-template-columns: 1fr 1fr; }
  .lede-under { font-size: 1.35rem; }
}

@media (max-width: 700px) {
  .hero-top { padding-top: 46px; }
  .hero-head { margin-bottom: 16px; }
  .hero-sub { font-size: 1.05rem; margin-bottom: 14px; }
  .hero-sub:last-child { margin-bottom: 30px; }
  .hero-stage { padding: 0 14px 30px; }
  .cta-boxes { grid-template-columns: 1fr; }
  .lede-under { font-size: 1.15rem; }
  .m-block { display: block; padding: 0 18px; }
  .m-top { padding-top: 28px; }
  .m-mid { padding-top: 34px; padding-bottom: 4px; }
  .m-bot { padding-top: 22px; padding-bottom: 30px; }
}


/* =====================================================================
   Final homepage section: press evidence and testimony, side by side.
   Replaces the full-width press strip and the separate quote band. Two
   columns on the Anthropic model: a narrow label column on the left, the
   substance on the right.
   ===================================================================== */

.proof {
  border-top: 1px solid var(--line);
  padding: 64px 0 72px;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.proof-press h2 { margin-bottom: 12px; }

/* Left column: the logos stack and left-align here rather than centring
   across the page, so the column reads as a block. */
/* 2026-08-20, Tracey: this line was 0.66rem, a caption under the heading. It is
   now 1.05rem - it reads as a statement in its own right, which is what the
   sentence deserves. Tracking eased from 0.18em to 0.12em so the longer set
   line still fits the column without breaking. */
.proof-press .press-label {
  text-align: left;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--body);
  margin-bottom: 26px;
}
.proof-press .press-logos {
  justify-content: flex-start;
  align-items: center;
  gap: 34px 30px;
}
/* Full opacity: these are the colour marks, and dimming them defeats the
   point of using colour at all. */
.proof-press .press-logos img { opacity: 1; }
.proof-press .press-logos img:hover { opacity: 1; }

.proof-press .press-more {
  text-align: left;
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Height = 44 / sqrt(aspect), which equalises optical area rather than matching
   heights: matching heights makes a 10:1 wordmark shout and a compact one
   disappear.
   2026-08-20: every height is now 1.68x the original clamp of 19..32px, in two
   passes (1.4x, then 1.2x when the "cited by" line and "and many more" came
   out and the column had space to fill). The ratios between marks are
   untouched, so the equal-area logic still holds.
   The 1.2x was measured, not guessed: at that size the logo column stands
   636px against the quotes column's 628px, so the two halves finish level.
   Change the logo set or a quote and this needs re-measuring. */
.proof-press .press-logos .pl-csm         { height: 32px; }
.proof-press .press-logos .pl-nyt         { height: 32px; }
.proof-press .press-logos .pl-latimes     { height: 32px; }
.proof-press .press-logos .pl-wapo        { height: 32px; }
.proof-press .press-logos .pl-fortune     { height: 34px; }
.proof-press .press-logos .pl-techcrunch  { height: 46px; }  /* box lockup: reads
   smaller than its height, so it is deliberately above the formula */
.proof-press .press-logos .pl-axios       { height: 38px; }
.proof-press .press-logos .pl-bbc         { height: 41px; }
.proof-press .press-logos .pl-npr         { height: 42px; }
.proof-press .press-logos .pl-guardian    { height: 43px; }
.proof-press .press-logos .pl-atlantic    { height: 43px; }
.proof-press .press-logos .pl-pbs         { height: 47px; }
.proof-press .press-logos .pl-cnn         { height: 50px; }
.proof-press .press-logos .pl-wsj         { height: 54px; }
.proof-press .press-logos .pl-ft          { height: 54px; }

/* Right column: the three quotes stack. */
.proof-quotes { display: flex; flex-direction: column; gap: 18px; }
.proof-quotes .quote-card { font-size: 1.1rem; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  .proof { padding: 44px 0 52px; }
  .proof-press .press-logos { gap: 14px 22px; }
}

/* =====================================================================
   INNER-PAGE FURNITURE, added 2026-08-20 for who-this-is-for.html.
   Built to the scratchpad slides, then resized on Tracey's design pass: the
   statements are meant to read as statements, so headings and body copy on
   this page run larger than the site's defaults.
   ===================================================================== */

.subhead {
  max-width: 860px;
  font-size: 1.45rem;
  line-height: 1.45;
  margin: 0 0 30px;
}

.page-h1 { max-width: 940px; margin: 0 0 22px; }

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ===== The kaleidoscope: copy left, motion right =====
   The copy column is the wider of the two and the type is set large enough to
   run to roughly the height of the video beside it. Both columns are centred
   on each other so neither has to match the other exactly. */
.media-split {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 40px;
  align-items: center;
}
.split-lede {
  font-size: 2rem;
  line-height: 1.35;
  color: var(--body);
}
.split-lede strong { color: var(--ink); font-weight: 600; }

/* aspect-ratio is declared rather than left to the file, so the box is the
   right shape before the video loads and in a browser that cannot decode it.
   1.435 is the crop on slide 2, 412x287. */
.loop-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.435;
  object-fit: cover;
  background: #1a1a18;
  border-radius: 12px;
}

/* ===== Statement block: big title left, copy right, hairlines between =====
   Used by Data Overload. The hairlines are the structure - there is no panel,
   no tint and no accent bar, so the rules are what stop the three paragraphs
   reading as one grey mass. */
.statement-section { padding: 40px 0 56px; }
.statement {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 44px;
  padding-top: 34px;
}
.statement-title {
  font-size: 3.6rem;
  line-height: 1.02;
  font-weight: 600;
  margin: 0;
}
.statement-body p {
  font-size: 1.42rem;
  line-height: 1.4;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.statement-body p:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ===== Inset panel ===== */
.panel {
  max-width: 1012px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  padding: 44px;
}
.panel-dark { background: var(--hero-field); color: #c9cabb; }
.panel-dark h2, .panel-dark h3 { color: #f0efe6; }
.panel-beige { background: var(--beige); }

/* ===== Become A Hub =====
   Built to the slide: narrow heading column on the left, and on the right the
   artwork running horizontally with the three audience types directly under it
   at the same width. Both right-hand elements start where the heading column
   ends, which is the alignment the slide sets.

   Full bleed rather than a 1012px inset, which Tracey allowed for this one
   band. It buys the right-hand column 900px instead of 690px, which is what
   lets the artwork be a wide horizontal run rather than a stubby one. */
.hub-full {
  background: var(--hero-field);
  color: #c9cabb;
  padding: 60px 0 64px;
}
.hub-full h2 { color: #f0efe6; }
.hub-inner { max-width: 1300px; margin: 0 auto; padding: 0 32px; }

.hub-top {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 42px;
  align-items: start;
}
.hub-copy, .hub-words, .hub-right { min-width: 0; }

.hub-title {
  font-size: 3.4rem;
  line-height: 1.06;
  font-weight: 600;
  margin: 0 0 30px;
}
/* 1.6rem in a 341px column: three lines, not five, and legible rather than a
   thin ribbon. The column went 0.33fr -> 0.4fr to pay for the size, which
   costs the artwork 45px of width and is worth it. */
.hub-blurb {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #e2e2d4;
  margin: 0;
}
/* Its own line, and sienna to pick up "A Hub" in the heading above it.
   NOTE: sienna on the olive ground measures 2.61:1, below the 3:1 AA asks of
   large text. A deliberate exception on a display line. #d97706 would measure
   4.12:1 if it ever needs to pass, at the cost of a second orange. */
/* 1.6em, not a typographic gap: it drops this line 55px below the top of the
   three cards, so it sits inside their band and reads as introducing them
   rather than as the end of the paragraph above. Cards are 159px tall. */
.hub-lead-in { display: block; margin-top: 1.6em; color: var(--accent); font-weight: 600; }

.hub-right { display: flex; flex-direction: column; gap: 26px; }

/* The slide's band is 3.1:1 and the file is 1.8:1, and the slide got there by
   squashing the artwork vertically to 58% - which is why the ripples read as
   ellipses on the slide. This crops instead of squashing, at 2.6:1, which
   distorts nothing and still keeps the whole left-to-right run of hubs.
   To reproduce the slide exactly, set aspect-ratio 3.1 and object-fit: fill. */
.hub-art img {
  display: block;
  width: 100%;
  aspect-ratio: 2.6;
  object-fit: cover;
  border-radius: 8px;
}

.hub-names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.name-card {
  background: #f0efe6;
  color: var(--ink);
  border-radius: 16px;
  padding: 46px 20px;
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Closes the same band, so there is no strip of page between the audience
   types and the ask. */
.hub-cta {
  border-top: 1px solid rgba(240, 239, 230, 0.16);
  margin-top: 48px;
  padding-top: 40px;
  text-align: center;
}
.hub-cta h2 { font-size: 2.2rem; margin-bottom: 24px; }

/* Below 900px the two columns stack: a 0.33fr heading column stops being
   readable and the three cards need the full width. */
@media (max-width: 900px) {
  .hub-top { grid-template-columns: 1fr; gap: 28px; }
  .hub-title { font-size: 2.6rem; margin-bottom: 18px; }
}

/* ===== Case study, held together on beige ===== */
.case-study { padding: 44px; }
.hairline-onbeige { border-top-color: #dcd8c7; margin-top: 34px; }

.cs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.cs-kicker {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.15;
}
.cs-name { color: var(--accent); margin: 0; }
.cs-logo { width: 180px; height: auto; flex: 0 0 auto; }

.cs-quote {
  margin: 26px 0 0;
  max-width: 92%;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.32rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--body);
}
.cs-attr {
  margin-top: 16px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--body);
}

.cbi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
}
.cbi { padding: 0 28px; }
.cbi:first-child { padding-left: 0; }
.cbi:last-child { padding-right: 0; }
.cbi + .cbi { border-left: 1px solid #dcd8c7; }
/* Set like the CASE STUDY kicker above them: serif, uppercase, large. They
   were 1.2rem bold sans, which read as labels rather than as headings. */
.cbi h3 {
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== The Impact, set as figures =====
   Three results, each with a rising-trend mark, the number at figure size in
   the accent, and the label under it. */
.impact { list-style: none; }
.impact li {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid #dcd8c7;
}
.impact li:first-child { padding-top: 0; }
.impact li:last-child { border-bottom: 0; padding-bottom: 0; }
.impact-mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
  grid-row: 1;
  align-self: center;
}
.impact-num {
  grid-column: 2;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--accent-dark);
}
.impact-label {
  grid-column: 2;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--body);
}
.cbi p + p { margin-top: 1em; }

@media (max-width: 1000px) {
  .statement-title { font-size: 3rem; }
  .hub-title { font-size: 3rem; }
  .name-card { font-size: 1.5rem; padding: 34px 16px; }
  .name-card { font-size: 1.45rem; padding: 22px 14px; }
  .split-lede { font-size: 1.7rem; }
}

@media (max-width: 900px) {
  .statement { grid-template-columns: 1fr; gap: 26px; }
  .cbi-grid { grid-template-columns: 1fr; }
  .cbi { padding: 0; }
  .cbi + .cbi { border-left: 0; border-top: 1px solid #dcd8c7; margin-top: 22px; padding-top: 22px; }
  .cs-head { flex-direction: column; }
  .cs-logo { width: 150px; }
  .cs-quote { max-width: none; }
}

@media (max-width: 760px) {
  .panel, .case-study { padding: 26px; }
  .hub-cta { padding-top: 28px; }
  .media-split { grid-template-columns: 1fr; gap: 24px; }
  .split-lede { font-size: 1.4rem; }
  .subhead { font-size: 1.2rem; }
  .statement-title { font-size: 2.5rem; }
  .statement-body p { font-size: 1.18rem; }
  .hub-title { font-size: 2.2rem; }
  .hub-inner { padding: 0 20px; }
  /* The band gets squarer as it narrows, or the hubs become slivers. */
  .hub-art img { aspect-ratio: 1.8; }
  .hub-names { grid-template-columns: 1fr; gap: 12px; }
  .name-card { padding: 22px 16px; font-size: 1.4rem; }
  .name-card br { display: none; }
  .hub-cta { margin-top: 30px; padding-top: 30px; }
  .hub-cta h2 { font-size: 1.7rem; }
  .impact-num { font-size: 1.8rem; }
  .hub-blurb { font-size: 1.2rem; }
  .hub-blurb br { display: none; }
  .hub-band img { aspect-ratio: 1.9; }
  .hub-names { grid-template-columns: 1fr; gap: 12px; }
  .name-card { padding: 20px 16px; font-size: 1.35rem; }
  .name-card br { display: none; }
  .cs-kicker { font-size: 1.5rem; }
  .cs-quote { font-size: 1.15rem; }
}

/* =====================================================================
   PRESS AND CUSTOMER FEEDBACK, 2026-08-20. One headline over both halves,
   and the three quotes with no card behind them: sienna quote mark, the
   line itself, the attribution, hairlines doing the separating.
   Removed with it: the "Marshall's work has been cited by" line and the
   "and many more" link, which pointed off-site.
   ===================================================================== */
.proof-title { font-size: 2.6rem; margin-bottom: 20px; }

/* Both columns drop below the rule rather than starting hard against it, so
   the first quote is not level with the first row of logos. */
.proof-press { padding-top: 40px; }
.proof-quotes { padding-top: 26px; }
.proof-quotes .quote-plain {
  background: none;
  border: 0;
  padding: 0 0 26px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
}
.proof-quotes .quote-plain + .quote-plain { padding-top: 26px; }
.proof-quotes .quote-plain:last-child { border-bottom: 0; padding-bottom: 0; }
.proof-quotes .quote-plain::before {
  content: '\201C';
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.4rem;
  line-height: 0.7;
  color: var(--accent);
  margin-bottom: 10px;
}

/* =====================================================================
   SHARED PIECES FOR THE INNER PAGES, 2026-08-20.
   Newsletter, Community Calls and Schedule a 1:1 were still built on the
   original scheme: full-bleed .plate heroes, full-width tinted bands, bare
   centred CTA rows, brass buttons and 2px inputs. These are the parts they
   needed to come onto the current design.

   One trap worth recording: .btn-brass reads var(--brass), and --brass is
   scoped to .plate, not :root. Lift a brass button out of a plate and it
   loses its background entirely. Every one of them is now btn-primary or
   btn-beige.
   ===================================================================== */

/* Centred CTA on a dark inset. Replaces .cta-band, which was a full-width
   centred row with nothing holding it. */
.cta-panel { text-align: center; padding: 40px 44px 46px; }
.cta-panel h2 { font-size: 2.2rem; margin-bottom: 24px; }

/* The subscribe box and the scheduling widget both sit on beige so they read
   as the thing to do on the page rather than as loose page furniture. */
.subscribe-panel h2, .sched-panel h2 { margin-bottom: 22px; }
.subscribe-panel .signup-form { margin: 0; }
.sched-panel .calendly-inline-widget { max-width: 720px; margin: 0 auto; }

/* 2px was left over from the square-button era. Matches .btn now. */
.signup-form input[type="email"] {
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Row lists inside a beige panel need the darker hairline, same as the case
   study columns, or the rules disappear. */
.row-list.on-beige li { border-bottom-color: #dcd8c7; }
.row-list.on-beige li:last-child { border-bottom: 0; }

/* Credibility strip on Schedule a 1:1. No band, no border, no label: just the
   marks, centred, at the sizes the homepage uses. */
.press-inline .press-logos {
  justify-content: center;
  align-items: center;
  gap: 26px 30px;
  opacity: 1;
}
.press-inline .press-logos img { opacity: 1; }
.press-inline .press-logos .pl-csm,
.press-inline .press-logos .pl-nyt,
.press-inline .press-logos .pl-latimes,
.press-inline .press-logos .pl-wapo      { height: 26px; }
.press-inline .press-logos .pl-fortune   { height: 27px; }
.press-inline .press-logos .pl-axios     { height: 30px; }
.press-inline .press-logos .pl-bbc       { height: 32px; }
.press-inline .press-logos .pl-npr       { height: 33px; }
.press-inline .press-logos .pl-guardian,
.press-inline .press-logos .pl-atlantic  { height: 34px; }
.press-inline .press-logos .pl-pbs       { height: 37px; }
.press-inline .press-logos .pl-cnn       { height: 39px; }
.press-inline .press-logos .pl-wsj,
.press-inline .press-logos .pl-ft        { height: 42px; }

@media (max-width: 760px) {
  .cta-panel { padding: 30px 26px 34px; }
  .cta-panel h2 { font-size: 1.7rem; }
  .signup-form { flex-direction: column; }
}

/* =====================================================================
   HOW IT WORKS, 2026-08-20. Slides 8 and 9 set each stage as a filled
   sienna disc with its steps beside it, which is also the shape the
   homepage graphic uses, so the two pages now describe the same thing.
   ===================================================================== */
.stages { padding-top: 30px; }
/* All three stages get the same vertical space even though Listen has three
   steps and the other two have two. Measured: the steps column ran 250px for
   Listen against 197px for the others, so the blocks were visibly unequal.
   min-height pins them to the tallest and space-between spreads the shorter
   pairs to fill it, so the three read as one system. */
.stage {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 44px;
  align-items: stretch;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.stage:last-child { border-bottom: 0; }

/* A real circle, so it needs a fixed box and a centred label. */
.stage-disc {
  flex: 0 0 auto;
  align-self: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 250px is Listen's natural height with three steps, and pinning the other two
   to it keeps the rules between the stages evenly spaced.
   The steps are CENTRED in that space, not spread across it: space-between
   pushed the two-step pairs to the top and bottom edges and left a hole in the
   middle of Learn and Act, so the copy stopped reading as a set. Centred, the
   gaps between steps stay the same on all three stages and each group sits on
   the same line as its disc. */
.stage-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-height: 250px;
}
.step h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.step p { font-size: 1.12rem; max-width: 62ch; }

/* Slide 10: Formats and Applications, two columns on the dark inset. */
.publishing { padding: 44px; }
.publishing h2 { text-align: center; margin-bottom: 30px; }
.pub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pub-col h3 {
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #dcd8c7;
}
.pub-col ul { list-style: none; text-align: center; }
.pub-col li { padding: 7px 0; font-size: 1.12rem; color: var(--body); }

/* The ask closes the same panel. */
.pub-ask { text-align: center; padding-top: 6px; }
.pub-ask h2 { font-size: 1.9rem; margin-bottom: 22px; }

/* =====================================================================
   ABOUT, 2026-08-20.
   ===================================================================== */
.bio-panel {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.bio-copy h1, .bio-copy h2 { color: #f0efe6; font-size: 2.9rem; margin-bottom: 22px; }
.bio-copy p { font-size: 1.12rem; color: #dcdcce; }
.bio-copy p + p { margin-top: 1em; }
.bio-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* The bio panel as a homepage row rather than a page hero. */
section.bio-section { padding: 24px 0 40px; }

/* Media coverage: outlet left, count right, hairline between. The counts are
   the point of the list, so they get the accent and their own column. */
.statement-body.no-rules p { border-bottom: 0; padding-bottom: 0; margin-bottom: 1em; }
.coverage-list { list-style: none; margin-top: 26px; }
.coverage-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.12rem;
}
.coverage-list li:last-child { border-bottom: 0; }
.cov-outlet { color: var(--ink); font-weight: 600; }
.cov-count {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent-dark);
  white-space: nowrap;
}

.video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-top: 24px;
  max-width: 860px;
}
.video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* The Network Futures CoLab video at the foot of the homepage. .video-frame
   already caps itself at 860px; the title is capped to match so the two edges
   agree. The <br> in the title is a desktop line break only: below 700px the
   heading wraps on its own and the forced break lands mid-phrase. */
section.video-section { padding: 16px 0 56px; }
.video-title {
  max-width: 860px;
  font-size: 1.65rem;
  margin-bottom: 4px;
}
.video-title span { display: block; }
@media (max-width: 700px) {
  .video-title { font-size: 1.3rem; }
  .video-title span { display: inline; }
}

/* What's Up With That */
.wuwt-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.wuwt-mark { width: 58px; height: auto; flex: 0 0 auto; }
.wuwt-head h2 { margin-bottom: 4px; }
.wuwt-tagline { font-size: 1.15rem; color: var(--muted); }
.wuwt-lede { font-size: 1.15rem; max-width: 78ch; }
.wuwt-sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 30px 0 22px;
}
.wuwt-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.wuwt-steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.wuwt-steps h4 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.wuwt-steps p { font-size: 0.98rem; }
.wuwt .cs-quote { margin-top: 34px; max-width: 76ch; }
.wuwt-out { margin-top: 26px; font-weight: 700; }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; gap: 24px; }
  .pub-cols { grid-template-columns: 1fr; gap: 28px; }
  .bio-panel { grid-template-columns: 1fr; gap: 26px; }
  .bio-photo { max-width: 320px; }
  .wuwt-steps { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  .stage-disc { width: 130px; height: 130px; font-size: 1rem; }
  .bio-copy h1, .bio-copy h2 { font-size: 2.1rem; }
  .step p, .pub-col li, .wuwt-lede, .coverage-list li { font-size: 1.05rem; }
}

/* =====================================================================
   ABOUT, second pass 2026-08-20.
   Media Coverage set as figures rather than a list, and the What's Up With
   That block carrying the rest of what slides 15 and 16 pointed at.
   ===================================================================== */

/* The counts are the only interesting thing in the list, so they lead. Same
   figure treatment as the SPRA impact numbers on Who It's For. */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.cov-fig {
  background: var(--beige);
  border-radius: 14px;
  padding: 26px 18px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cov-n {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-dark);
}
.cov-x { font-size: 1.6rem; }
/* The mark instead of the name. Heights follow the same equal-optical-area
   idea as the homepage press block, scaled down to sit under a 3rem number:
   a wide wordmark is set shorter than a compact badge so the two read as the
   same size rather than measuring the same. */
.cov-logo {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 16px auto 0;
}
.cov-logo.cl-nyt { height: 15px; }
.cov-logo.cl-wsj { height: 26px; }
.cov-logo.cl-bbc { height: 20px; }
.cov-logo.cl-npr { height: 20px; }
.cov-logo.cl-pbs { height: 22px; }

/* WUWT's own claim, set as a quiet band inside the beige panel so it reads as
   quoting that site rather than as this site's own headline. */
.wuwt-claim { margin: 30px 0 34px; }
.wuwt-claim h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.wuwt-claim p { font-size: 1.15rem; color: var(--muted); }

.video-onbeige { border-color: #dcd8c7; max-width: 720px; margin: 34px auto 0; }

/* The quote carries the site's quote mark - the sienna opening mark set above
   the line - the same device the homepage testimonials use, rather than typed
   curly quotes. Bigger too: it is the only quote on the page. */
.wuwt-quotes .quote-plain::before {
  content: '\201C';
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.8rem;
  line-height: 0.7;
  color: var(--accent);
  margin-bottom: 12px;
}
.wuwt-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 30px 0 34px; }
/* One quote rather than three: it gets a measure instead of a third of the
   width. The three-column rule stays for when the others come back. */
.wuwt-quotes.single { grid-template-columns: 1fr; }
/* One quote, centred and in sienna so it reads as the pull quote of the block
   rather than as more body copy. Sienna on the beige panel measures 4.43:1,
   which clears AA for text at this size. The centring is on the block, not
   just the text, so the quote mark centres with it. */
.wuwt-quotes.single { justify-items: center; text-align: center; }
.wuwt-quotes.single blockquote {
  max-width: 58ch;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--accent);
}
.wuwt-quotes.single .quote-plain::before { text-align: center; }
.wuwt-quotes.single .wq-attr { color: var(--muted); }
.wuwt-quotes blockquote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.wq-attr {
  display: block;
  margin-top: 12px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted);
}

.wuwt-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.wuwt-fine { margin-top: 14px; font-size: 0.92rem; color: var(--muted); }

@media (max-width: 1000px) {
  .cov-grid { grid-template-columns: repeat(3, 1fr); }
  .wuwt-quotes { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .cov-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cov-n { font-size: 2.4rem; }
}

/* =====================================================================
   NEWSLETTER PAGE, 2026-08-31
   Added with the issue pages. Everything here is scoped to classes that
   appear only on newsletter.html and the issue pages, so nothing below can
   reach the marketing pages.
   ===================================================================== */

/* ----- Featured issue ------------------------------------------------
   The one block on newsletter.html doing persuasive work. It is a card
   rather than a panel because it has to read as a single object you click,
   and it carries more inside it than .spotlight-card was built for. */

.issue-latest { padding-bottom: 24px; }

.feature-issue {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 38px 32px;
  margin-top: 14px;
}

.feature-date {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.feature-title {
  font-size: 2rem;
  line-height: 1.18;
  margin-bottom: 0.35em;
}
.feature-title a { color: var(--ink); text-decoration: none; }
.feature-title a:hover { color: var(--accent-dark); text-decoration: underline; }

.feature-teaser {
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: 26px;
}

/* The inside list is the reason this block exists. A three line teaser
   cannot show a reader what an issue contains; four real headlines can. */
.feature-inside {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.inside-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.inside-list { list-style: none; }
.inside-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
  color: var(--body);
}
.inside-list li:last-child { border-bottom: none; }

/* ----- Scoring marks -------------------------------------------------
   The same four marks the email template uses, meaning the same thing in
   both places, so a reader who subscribes does not have to learn a second
   vocabulary. They replaced one and two thumbs up/down: at body size those
   are the same glyph rotated 180 degrees, and the count carried meaning
   that nothing on the page defined. Word plus colour here, never colour
   alone, so the mark still reads for a colourblind reader and in any client
   that strips styling. The palette is deliberately not --accent: these are
   semantic, not brand. */

.mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: 1px;
  white-space: nowrap;
}
.mark-op  { background: #e4efe7; color: #2c6b47; }
.mark-opp { background: #2c6b47; color: #ffffff; }
.mark-rk  { background: #f6e5e0; color: #98341c; }
.mark-rkk { background: #98341c; color: #ffffff; }

.feature-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.feature-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* ----- Signup with interests ----------------------------------------
   .signup-form is a flex row everywhere else on the site. This page needs
   it to hold three stacked things, so .signup-full turns it back into a
   block and the email and button go in their own row. */

.signup-full { display: block; max-width: none; }
.signup-row { display: flex; gap: 10px; max-width: 460px; }

.subscribe-lede { margin: -12px 0 20px; color: var(--muted); }

.interest-set { border: 0; margin-top: 22px; }

.interest-set legend {
  font-size: 0.92rem;
  color: var(--muted);
  padding: 0;
  margin-bottom: 10px;
}

/* Two columns rather than five across, so the labels stay on one line and
   the block does not read as a form to be completed. */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 26px;
  max-width: 620px;
}

.interest-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  color: var(--body);
  cursor: pointer;
}

.interest-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

@media (max-width: 760px) {
  .feature-issue { padding: 24px 22px 26px; }
  .feature-title { font-size: 1.5rem; }
  .signup-row { flex-direction: column; max-width: none; }
  .interest-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   ISSUE PAGES, 2026-08-31
   One page per sent issue. Before these, an issue link left hawkeye.systems
   for mailchi.mp, where the page is out of brand and the hosted chrome still
   says "Earth Catalyst" and "Marshall's Tech Newsletter".

   Scoped under .issue-body so none of it can affect the marketing pages.
   Measure is 728px rather than the 1060px .wrap used everywhere else: these
   pages are read rather than scanned, and 1060px of DM Sans at 17px runs to
   about 130 characters, roughly twice a comfortable line.
   ===================================================================== */

/* One measure for the whole issue page, so the masthead, the body, the
   subscribe panel and the issue nav all share a left edge. Without this the
   728px body centres inside the 1060px .wrap while the h1 stays at the wrap
   edge, and the two columns visibly disagree. */
.issue-measure { max-width: 728px; }

.issue-body { padding-bottom: 8px; }
.issue-body p { margin-bottom: 1.1em; }
.issue-body a { text-decoration: underline; text-underline-offset: 2px; }

/* Marshall's own note at the top of an issue, before the story list. Set a
   step larger than body copy so the voice is distinct from the summaries. */
.issue-intro { padding: 8px 0 4px; }
.issue-intro p { font-size: 1.09rem; }

.issue-preheader {
  font-size: 0.95rem;
  color: var(--muted);
  padding-bottom: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.issue-note { font-size: 0.95rem; color: var(--muted); }

.issue-signoff {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: 1.4em;
}
.issue-signoff-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ----- In this issue ----- */

.issue-toc {
  background: var(--beige);
  border-radius: 20px;
  padding: 26px 30px 22px;
  margin: 34px 0 8px;
}
.toc-head { font-size: 1.35rem; margin-bottom: 4px; }

.toc-group {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}

.toc-list { list-style: none; }
.toc-list li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.97rem;
  line-height: 1.45;
}
.toc-list li:last-child { border-bottom: none; }

.toc-text { color: var(--ink); }
.toc-src {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* ----- Stories ----- */

.issue-story {
  padding: 34px 0 6px;
  border-top: 1px solid var(--line);
  margin-top: 34px;
}
.issue-story:first-of-type { border-top: none; }

.story-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

.story-head {
  font-size: 1.45rem;
  line-height: 1.28;
  margin-bottom: 0.6em;
}
.story-head a { color: var(--ink); text-decoration: none; }
.story-head a:hover { color: var(--accent-dark); text-decoration: underline; }

.story-source { font-size: 0.92rem; color: var(--muted); }
.story-source a { color: var(--accent-dark); }

/* Pulled quote. Marshall quotes at length and the quotes carry the argument,
   so they get their own treatment rather than sitting inline in body copy. */
.pull {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 20px;
  margin: 0.4em 0;
}

.issue-list { margin: 0 0 0 20px; }
.issue-list li { margin-bottom: 0.5em; }

/* ----- Sponsor blocks -----
   These ran in the sent email and are part of the published record, so they
   are reproduced rather than stripped. Visually separated so a reader can
   tell paid placement from Marshall's own picks without having to work it
   out. */

.issue-sponsor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 30px;
  margin: 34px 0;
}
.sponsor-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.issue-sponsor h3 { font-size: 1.2rem; margin-bottom: 2px; }
.sponsor-tagline { color: var(--muted); margin-bottom: 0.8em; }
.sponsor-link { font-weight: 700; }

/* ----- Closing ----- */

.issue-closing {
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 30px;
}
.closing-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
}

.issue-cta-line { margin-bottom: 18px; }

/* ----- Issue to issue navigation ----- */

.issue-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.issue-nav-link { font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.issue-nav-link:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .issue-toc { padding: 20px 20px 16px; }
  .issue-sponsor { padding: 20px; }
  .story-head { font-size: 1.25rem; }
  .issue-nav { flex-direction: column; gap: 10px; }
}

/* ----- Clickable contents ------------------------------------------
   Added 2026-08-31. The contents list was fifteen entries of plain text: a
   reader who spotted the piece they wanted had to scroll and hunt for it.
   Entries are now in-page links.

   In-page anchors are exactly right HERE and wrong in the email. Gmail and
   Outlook both break intra-message anchors, which is why the Mailchimp
   template links out instead. A web page has no such problem.

   The header is position:sticky, so an anchor target scrolled to the very top
   of the viewport would sit underneath it. scroll-margin-top parks each story
   clear of the header instead. */

.toc-text a { color: var(--ink); text-decoration: none; }
.toc-text a:hover,
.toc-text a:focus-visible { color: var(--accent-dark); text-decoration: underline; }

.issue-story { scroll-margin-top: 92px; }

/* Jumping the length of a long issue with no transition is disorienting, so
   the jump is animated, except for readers who have asked their system not to
   animate things. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ----- Issue hero image ---------------------------------------------
   Added 2026-08-31, fixing a real loss. The 18 August issue opened with a
   diagram and a caption. The first build of this page kept the caption and
   dropped the picture, so the page carried a credit for something that was
   not there. The extractor only took headings, paragraphs, lists and quotes,
   which meant every image in every issue was being silently discarded.

   Images are served from Marshall's own asset store rather than copied into
   this repo. Same trade as the Luma covers: no binary churn in git, and a
   picture he replaces at source updates here, against a dependency on that
   host staying up. */

.issue-hero { margin: 0 0 26px; }
.issue-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}
/* The caption keeps the preheader's styling, but the rule under it belongs to
   the caption now rather than floating under a paragraph. */
.issue-hero .issue-preheader { margin-top: 12px; margin-bottom: 0; }

/* ----- Segment tags on the contents ---------------------------------
   Added 2026-08-31. Each story carries two labels now, and they have to read
   as different KINDS of thing or the row turns into a badge farm.

     The mark is Marshall's judgement. Filled, coloured, loud.
     The segment is classification. Quiet, small, a dot and a word.

   The segment sits in its own right hand column rather than inline beside
   the mark. Inline was tried and rejected: it puts two objects in front of
   every headline, so the eye clears both before reaching any words, and over
   fifteen rows the list stops reading like a newsletter and starts reading
   like a taxonomy. In a right hand column the headline begins exactly where
   it always did, and a reader scanning for one topic runs down the right
   edge instead.

   This previews a product feature: tagging a favourite in the daily brief as
   general or as a favourite of a particular segment. When that ships, these
   values come from Marshall rather than being typed in. */

.toc-row { display: flex; align-items: baseline; gap: 16px; }
.toc-body { flex: 1; min-width: 0; }

.toc-seg {
  flex: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;

  /* Fixed width, and wrapping allowed. The names are the full canonical five,
     so "Democratic Governance" has to fit beside "AI & Technology" without the
     headline column jumping between rows. A fixed column keeps every segment
     starting at the same x; wrapping keeps the long ones from pushing the
     headline into a gutter. Two lines of this at 0.62rem is still shorter than
     a headline plus its source line, so no row grows. */
  width: 148px;
  line-height: 1.4;
}

/* The dot is a second, redundant encoding, never the only one: the word is
   always there, so the tag still reads with no colour at all. */
.seg-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
}
.d-ai  { background: #3d5a8c; }
.d-eco { background: #2c6b47; }
.d-reg { background: #7a6a1f; }
.d-gov { background: #6b4a86; }
.d-adv { background: #98341c; }

/* On a narrow screen the segment drops under the entry rather than squeezing
   the headline into a two word column. */
@media (max-width: 620px) {
  .toc-row { flex-direction: column; gap: 4px; }
  .toc-seg { padding-top: 0; }
}

/* =====================================================================
   COMMUNITY CALLS, 2026-08-31
   The calls page listed its history as two lines of text. These classes turn
   it into a series you can see. Cover art comes from Luma; the covers are
   busy and saturated and this site is not, so every image here is a
   thumbnail with a hard edge rather than a banner, and the type stays the
   thing that carries the page.
   ===================================================================== */

/* ----- Next call ----- */

.call-feature {
  display: flex;
  gap: 30px;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  margin-top: 14px;
}

.call-media {
  flex: none;
  width: 210px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--beige);
}
.call-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-body { display: flex; flex-direction: column; align-items: flex-start; }

.call-when {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

.call-title {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.4em;
  max-width: 24ch;
}

.call-teaser { color: var(--muted); margin-bottom: 22px; }

/* ----- Past calls ----- */

.calls-lede { color: var(--muted); margin: -8px 0 22px; }

.call-grid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit would stretch two cards to half the
     page each, and these covers are square, so a half width card is a 450px
     block of saturated artwork. auto-fill keeps the column width steady at
     roughly a third whatever the count, and a new call fills the empty slot
     rather than reflowing the ones already there. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}

.call-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

/* Square, because every Luma cover is 1:1. Fixing the ratio here means a
   future cover of any size still crops to the same shape and the row of
   cards keeps its baseline. */
.call-card-media {
  aspect-ratio: 1 / 1;
  background: var(--beige);
  border-bottom: 1px solid var(--line);
}
.call-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The tile used when a call has no cover art. Deliberately quiet and clearly
   not a photograph, so it reads as "no image" rather than as a design. */
.call-media-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
}
.blank-month {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.blank-day {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
}

.call-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.call-date {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.call-card-title {
  font-size: 1.08rem;
  line-height: 1.32;
  margin-bottom: 0.5em;
}

.call-guest { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* Pushed to the bottom so the links line up across cards whose titles run to
   different lengths. */
.call-link { margin: auto 0 0; padding-top: 10px; font-size: 0.92rem; font-weight: 600; }

@media (max-width: 700px) {
  .call-feature { flex-direction: column; gap: 20px; padding: 20px; }
  .call-media { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; }
  .call-title { font-size: 1.3rem; max-width: none; }
  .call-grid { grid-template-columns: 1fr; gap: 18px; }
}