:root {
  --paper: #ecebe5;
  --paper-deep: #deddd6;
  --surface: #f8f7f1;
  --ink: #111615;
  --ink-soft: #26302e;
  --muted: #606864;
  --line: #c8c9c1;
  --line-strong: #8f948e;
  --night: #102d2d;
  --signal: #f04a2c;
  --signal-soft: #f5d7ce;
  --electric: #d9f45b;
  --sky: #a9d8d1;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Manrope", "Aptos", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --max: 1240px;
  --gutter: clamp(18px, 4vw, 52px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(17, 22, 21, .045) 50%, transparent calc(50% + .5px)),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  background: var(--signal);
  animation: page-progress linear both;
  animation-timeline: scroll();
  pointer-events: none;
}
@keyframes page-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

img { display: block; max-width: 100%; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
a:hover { color: var(--signal); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 14px;
  z-index: 1000;
  transform: translateY(-180%);
  padding: 11px 15px;
  background: var(--ink);
  color: white !important;
  border: 1px solid var(--electric);
  font-family: var(--mono);
  font-size: .74rem;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
.wrap { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }

/* Masthead */
.nav, .header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(236, 235, 229, .94);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: blur(18px);
}
.nav-inner, .header .nav {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  align-items: center;
  gap: 36px;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: 1;
  text-decoration: none;
}
.brand::before {
  content: "";
  width: 13px;
  height: 29px;
  margin-right: 13px;
  background:
    linear-gradient(90deg, var(--signal) 0 3px, transparent 3px 7px, var(--ink) 7px 10px, transparent 10px);
}
.brand::after {
  content: "PUBLIC FIELD NOTES";
  position: absolute;
  left: 26px;
  bottom: -14px;
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .17em;
  color: var(--muted);
}
.nav nav, .navlinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.nav nav a, .navlinks a {
  padding: 10px 12px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav nav a::after, .navlinks a::after { content: " ↗"; color: transparent; }
.nav nav a:hover::after, .navlinks a:hover::after { color: currentColor; }
.nav nav a:last-child, .navlinks a:last-child {
  margin-left: 12px;
  background: var(--ink);
  color: var(--surface) !important;
}
.nav nav a:last-child:hover, .navlinks a:last-child:hover { background: var(--signal); }

/* Shared type and opening sections */
.eyebrow, .tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 19px;
  height: 1px;
  background: currentColor;
}
.hero {
  position: relative;
  padding: clamp(42px, 5.5vw, 76px) 0 clamp(42px, 5vw, 68px);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}
.hero::after {
  content: "NOW / SIGNAL / RESPONSE / PROOF";
  position: absolute;
  right: 10px;
  top: 50%;
  color: rgba(17, 22, 21, .35);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.hero h1, h1 {
  max-width: 1020px;
  margin: 14px 0 22px;
  font-family: var(--sans);
  font-size: clamp(3.35rem, 6.2vw, 6.65rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.068em;
}
.hero h1 em {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.05em;
}
.hero p, .subhead {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
}

/* Homepage field panel */
.notecard {
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.notecard::before {
  content: "FIELD 001";
  display: block;
  margin-bottom: 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
}
.notecard h2 {
  margin: 16px 0 12px;
  max-width: 340px;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 2.5vw, 2.55rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.notecard p { font-size: .95rem; color: var(--muted); }
.mini {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 23px;
  border-top: 1px solid var(--line-strong);
}
.mini div {
  position: relative;
  min-height: auto;
  padding: 12px 0 12px 34px;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.mini div::before {
  content: counter(field, decimal-leading-zero);
  counter-increment: field;
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .62rem;
}
.mini { counter-reset: field; }
.mini b, .mini span { display: block; }
.mini b { font-family: var(--sans); font-size: .83rem; font-weight: 700; }
.mini span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.tag.happening {
  padding: 5px 7px;
  color: var(--ink);
  background: var(--electric);
}

/* Sections and the signal stream */
.section { padding: clamp(58px, 8vw, 104px) 0; }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  align-items: end;
  gap: 36px;
  margin-bottom: 30px;
  padding-top: 13px;
  border-top: 1px solid var(--ink);
}
.section-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(2.8rem, 4.8vw, 5.2rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.06em;
}
.section-head p {
  margin: 0 0 7px;
  max-width: 390px;
  color: var(--muted);
  font-size: .92rem;
}
.top-stories {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.story {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.top-story {
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto;
  min-height: 525px;
  overflow: hidden;
  background: var(--surface);
}
.top-story.primary-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr);
  grid-template-rows: 1fr;
  color: var(--surface);
  background: var(--night);
}
.top-photo {
  position: relative;
  margin: 0;
  min-height: 330px;
  overflow: hidden;
  background: var(--ink-soft);
}
.top-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 15, 14, .4));
  pointer-events: none;
}
.top-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.06);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.top-story:hover img { transform: scale(1.025); filter: saturate(.9) contrast(1.03); }
.story-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.3vw, 44px);
}
.top-story h3 {
  margin: 20px 0 16px;
  font-family: var(--sans);
  font-size: clamp(2.25rem, 3.8vw, 4.25rem);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.055em;
}
.secondary-story h3 { font-size: clamp(2.05rem, 2.8vw, 3.15rem); }
.top-story p { margin: 0; max-width: 34ch; color: inherit; opacity: .78; font-size: .95rem; line-height: 1.55; }
.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.more-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 34px;
  border-top: 1px solid var(--ink);
  counter-reset: item;
}
.more-grid .story {
  display: grid;
  grid-template-columns: 54px 145px minmax(220px, .7fr) minmax(260px, 1fr) 150px;
  align-items: center;
  gap: 18px;
  min-height: 124px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.more-grid .story::before {
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .7rem;
}
.more-grid .story:hover {
  color: var(--ink);
  background: var(--surface);
  transform: none;
  box-shadow: none;
}
.more-grid .story > div:first-child { display: contents; }
.more-grid .story .tag { grid-column: 2; }
.more-grid .story h3 {
  grid-column: 3;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.25rem, 2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.more-grid .story p {
  grid-column: 4;
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}
.more-grid .meta {
  grid-column: 5;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  color: var(--signal);
}

/* Generic content grids */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: clamp(42px, 7vw, 86px);
  background: var(--line);
  border: 1px solid var(--line);
}
.span4 { grid-column: span 4; }
.span5 { grid-column: span 5; }
.span6 { grid-column: span 6; }
.span7 { grid-column: span 7; }
.card, .module {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 0;
}
.card h2, .module h2 {
  margin: 16px 0 13px;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 3vw, 3.15rem);
  font-weight: 660;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.card p, .module p, .muted { color: var(--muted); }
.card > a:last-child {
  margin-top: auto;
  padding-top: 20px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.card:hover { z-index: 1; box-shadow: inset 0 0 0 1px var(--ink); }
.modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding-top: 0;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.module { min-height: 390px; }
.module.newsletter { background: var(--signal-soft); }
.ecosystem-card, .article-ecosystem-card, .library-path-card, .contact-primary-card, .about-principle-card {
  color: var(--surface);
  background: var(--night);
}
.ecosystem-card p, .article-ecosystem-card p, .library-path-card p,
.contact-primary-card p, .about-principle-card p { color: #c8d6d1; }
.ecosystem-card .tag, .article-ecosystem-card .tag, .library-path-card .tag,
.contact-primary-card .tag, .about-principle-card .tag { color: var(--electric); }
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  background: rgba(255, 255, 255, .22);
}
.resource-grid a {
  display: grid;
  gap: 7px;
  padding: 19px;
  background: var(--night);
  text-decoration: none;
}
.resource-grid a:hover { background: #174343; color: white; }
.resource-grid strong { font-size: 1rem; line-height: 1.1; }
.resource-grid span { color: #b9cbc6; font-size: .76rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 14px 10px 0 0;
  padding: 11px 15px;
  color: white !important;
  background: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}
.button:hover { background: var(--signal); border-color: var(--signal); }
.button.secondary { color: var(--ink) !important; background: transparent; }
.signup-note { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.signup-note p { flex: 1 1 260px; }
.trust {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(38px, 8vw, 110px);
  padding: clamp(72px, 11vw, 150px) 0;
  border-top: 1px solid var(--ink);
}
.trust h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6.6vw, 7.25rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.055em;
}
.trust div { max-width: 660px; }
.trust p { color: var(--muted); }

/* Article pages */
.article-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(390px, 1.18fr) !important;
  gap: clamp(38px, 7vw, 92px) !important;
  align-items: end !important;
}
.article-hero-copy { min-width: 0; }
.article-hero-copy h1 { font-size: clamp(3.7rem, 7vw, 7.9rem); }
.article-hero-copy > p:first-of-type {
  max-width: 620px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
}
.article-hero-image {
  position: relative;
  margin: 0 !important;
  aspect-ratio: 16 / 11 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--ink-soft);
  box-shadow: none !important;
}
.article-hero-image::before {
  content: "VISUAL RECORD";
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--electric);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
}
.article-hero-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: saturate(.72) contrast(1.04);
}
.image-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 70%;
  margin: 0 !important;
  padding: 6px 8px;
  color: var(--surface) !important;
  background: rgba(17, 22, 21, .82);
  font-family: var(--mono);
  font-size: .55rem !important;
}
.article-date { color: var(--muted) !important; font-family: var(--mono); font-size: .68rem !important; }
.author-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--surface);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
}
.byline-name, .byline-note { margin: 0 !important; font-size: .76rem !important; }
.byline-name { color: var(--ink) !important; font-weight: 700; }
.byline-note { color: var(--muted) !important; }
.share-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 22px; }
.share-row span { color: var(--muted); font-family: var(--mono); font-size: .59rem; text-transform: uppercase; }
.share-row a {
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--mono);
  font-size: .62rem;
  text-decoration: none;
}
main > section:not(.hero) { position: relative; }
.article-body {
  max-width: 760px !important;
  margin: clamp(52px, 8vw, 105px) auto clamp(76px, 10vw, 140px) !important;
  padding: 0 0 0 clamp(26px, 5vw, 72px) !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}
.article-body::before {
  content: "READING FIELD";
  display: block;
  margin: 0 0 40px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
}
.article-body p, .article-body li {
  color: #303735 !important;
  font-family: var(--serif) !important;
  font-size: clamp(1.18rem, 1.65vw, 1.32rem) !important;
  line-height: 1.72 !important;
}
.article-body p { margin: 0 0 1.5em; }
.article-body p:first-of-type::first-letter {
  float: left;
  margin: .08em .11em 0 0;
  color: var(--signal);
  font-family: var(--sans);
  font-size: 4.4em;
  font-weight: 700;
  line-height: .72;
}
.article-body h2 {
  margin: 2.1em 0 .55em !important;
  font-family: var(--sans) !important;
  font-size: clamp(2.2rem, 4vw, 3.9rem) !important;
  font-weight: 680;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}
.article-body a { color: var(--signal); }
.routine-list, .list { padding-left: 1.3rem; }
.routine-list li, .list li { margin: 1em 0; padding-left: .35em; }
.article-side {
  grid-column: span 5;
  display: grid;
  gap: 1px;
  align-self: stretch;
  grid-auto-rows: max-content;
  padding-bottom: clamp(80px, 16vw, 260px);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 47px,
    rgba(17, 22, 21, .08) 48px
  );
}
.article-side > * { position: relative; }
.article-link-list, .article-resource-list { display: grid; gap: 0; margin-top: 16px; }
.article-link-list a, .article-resource-list a {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.article-link-list strong, .article-resource-list strong { font-size: .95rem; line-height: 1.15; }
.article-link-list span, .article-resource-list span { color: var(--muted); font-size: .76rem; }
.article-ecosystem-card .article-resource-list a { color: white; border-color: rgba(255,255,255,.2); }
.article-ecosystem-card .article-resource-list span { color: #b9cbc6; }
.source-note { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.source-list { padding-left: 1.1rem; }
.source-list li { margin: .65rem 0; color: var(--muted); }

/* Signals, Library, About, Contact */
.signal-log-grid { gap: 1px; margin-top: 0; counter-reset: signal; }
.signal-log-card {
  position: relative;
  grid-column: span 6;
  min-height: 280px;
  padding: clamp(28px, 4vw, 48px);
}
.signal-log-card::before {
  content: counter(signal, decimal-leading-zero);
  counter-increment: signal;
  position: absolute;
  right: 20px;
  top: 17px;
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: .65rem;
}
.signal-log-card h2 { max-width: 87%; }
.signal-log-card:hover { background: var(--electric); }
.signal-log-card:hover .eyebrow, .signal-log-card:hover > a:last-child { color: var(--ink); }
.library-tools, .about-hero, .contact-hero { padding-bottom: clamp(58px, 8vw, 108px); }
.library-card-grid .card, .checker-card, .correction-step { min-height: 325px; }
.tool-blue, .tool-orange, .tool-red, .tool-amber, .tool-slate { box-shadow: inset 0 3px 0 var(--signal); }
.library-note-card { box-shadow: none; }
.library-mini { grid-template-columns: 1fr; }
.principle-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 25px;
  background: rgba(255,255,255,.2);
}
.principle-strip div { padding: 15px; background: var(--night); }
.principle-strip b, .principle-strip span { display: block; }
.principle-strip b { font-size: .88rem; }
.principle-strip span { color: #b9cbc6; font-size: .74rem; }
.about-photo, .contact-photo { aspect-ratio: 16 / 11 !important; }
.about-side-card, .contact-boundary-card { background: var(--signal-soft); }
.contact-route-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  background: rgba(255,255,255,.2);
}
.contact-route-box div { padding: 15px; background: var(--night); }
.contact-route-box strong, .contact-route-box span, .contact-route-box a { display: block; }
.contact-route-box span { color: #b9cbc6; font-size: .76rem; }
.author-avatar-large { width: 76px; height: 76px; margin-bottom: 18px; font-size: 1rem; }

/* Footer */
.footer {
  margin-top: 0;
  padding: 30px 0 26px;
  color: #d7ddd8;
  background: var(--ink);
  border-top: 0;
  font-family: var(--mono);
  font-size: .66rem;
}
.footer > .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.support-work-link { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin: 13px auto 0; }
.support-work-link a { color: var(--electric); font-weight: 600; text-decoration: none; text-transform: uppercase; }
.copyright { color: #929a95; }

@media (max-width: 1020px) {
  .nav-inner, .header .nav { grid-template-columns: 1fr; gap: 13px; padding: 16px 0; }
  .nav nav, .navlinks { justify-content: flex-start; }
  .hero-grid, .article-hero-grid { grid-template-columns: 1fr !important; }
  .top-story.primary-story { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) auto; }
  .top-stories { grid-template-columns: 1fr 1fr; }
  .top-story { min-height: 620px; }
  .more-grid .story { grid-template-columns: 45px 120px 1fr 1fr; }
  .more-grid .meta { display: none; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span4, .span5, .span6, .span7, .article-side { grid-column: span 3; }
  .trust { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 720px) {
  :root { --gutter: 14px; }
  body { background: var(--paper); }
  body::before { display: none; }
  .nav { position: relative; }
  .nav-inner { min-height: 0; padding-block: 13px; }
  .brand { font-size: 1.72rem; }
  .brand::after { bottom: -12px; }
  .nav nav, .navlinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 1px;
    background: var(--line);
  }
  .nav nav a, .navlinks a {
    padding: 9px 6px;
    background: var(--paper);
    text-align: center;
    font-size: .61rem;
  }
  .nav nav a::after, .navlinks a::after { display: none; }
  .nav nav a:last-child, .navlinks a:last-child { grid-column: 1 / -1; margin-left: 0; }
  .hero { padding: 58px 0 52px; }
  .hero::after { display: none; }
  .hero h1, h1 { font-size: clamp(3.35rem, 16vw, 5rem); line-height: .89; }
  .hero-grid { gap: 48px; }
  .notecard::before { margin-top: 3px; }
  .section { padding: 58px 0; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .top-stories { grid-template-columns: 1fr; }
  .top-story, .top-story.primary-story { min-height: 0; grid-template-rows: auto auto; }
  .top-photo { min-height: 260px; aspect-ratio: 4 / 3; }
  .top-story h3 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .more-grid .story {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 8px 10px;
    padding: 24px 4px;
  }
  .more-grid .story > div:first-child { display: contents; }
  .more-grid .story .tag, .more-grid .story h3, .more-grid .story p { grid-column: 2; }
  .more-grid .story h3 { font-size: 1.55rem; }
  .more-grid .meta { display: none; }
  .grid { grid-template-columns: 1fr; }
  .span4, .span5, .span6, .span7, .article-side, .signal-log-card { grid-column: 1; }
  .modules { grid-template-columns: 1fr; }
  .module { min-height: 0; }
  .resource-grid, .principle-strip, .contact-route-box { grid-template-columns: 1fr; }
  .article-hero-grid { gap: 42px !important; }
  .article-hero-image { aspect-ratio: 4 / 3 !important; }
  .article-body {
    order: 0;
    margin-top: 52px !important;
    padding-left: 20px !important;
  }
  .article-side {
    display: contents;
    padding: 0;
    background: none;
  }
  .article-side > * {
    grid-column: 1;
    order: 1;
  }
  .article-side > *:first-child,
  .article-body + .card.span5 {
    order: -1;
  }
  .article-body p, .article-body li { font-size: 1.12rem !important; }
  .footer > .wrap { display: block; }
  .support-work-link { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Handbook article: deliberate headline/image lockup. */
.signal-handbook .article-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) !important;
  gap: clamp(36px, 5vw, 70px) !important;
  align-items: start !important;
}
.signal-handbook .article-hero-copy h1 {
  margin-top: clamp(14px, 1.5vw, 22px);
  font-size: clamp(3.6rem, 5.5vw, 5.6rem);
  line-height: .86;
  letter-spacing: -.055em;
}
.signal-handbook .article-title-line {
  display: block;
  white-space: nowrap;
}
.signal-handbook .article-hero-image {
  align-self: start;
  aspect-ratio: 16 / 11 !important;
}
.signal-handbook .article-hero-image img { filter: none; }

@media (max-width: 1020px) {
  .signal-handbook .article-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .signal-handbook .article-hero-image {
    order: -1;
    aspect-ratio: 16 / 11 !important;
  }
}

@media (max-width: 720px) {
  .signal-handbook .article-hero-copy h1 {
    font-size: clamp(3rem, 15vw, 3.6rem);
    line-height: .88;
  }
}