/* METATRON-HEALTH-ARTICLE-WORLD v1 — the editorial layer of /articles/ and the
   evidence registers.

   Grammar borrowed from a measured reference (awakeninghealth.co.uk/blog): one
   stacked column, a fixed 3:2 lead image at column width, a title at normal
   stroke weight, a two-line standfirst in softer ink, hairlines instead of
   frames, everything flush left.

   What is deliberately NOT borrowed: the 1110px text column (far past the
   readability limit), the centred hero, the generic link blue, the persuasive
   register. This world publishes registers, so restraint is the house voice.

   Bound by the Metatron density rule: 28 / 22 / 18 px headings, 15 px body at
   1.55, 13 px small text, 32 px section padding (48 for the hero), 24 px block
   rhythm, 16 px grid gap, text measure never past 68 characters.

   health-world.css sets h1/h2/h3 site-wide with !important up to 61.6px, so
   every heading correction here needs !important and longhand properties — a
   `font` shorthand drops entirely when one token fails to resolve. */

.editorial {
  --col: 40rem;              /* 640px shell; running text stops at 68ch inside */
  --rule: 1px solid var(--line);
  max-width: 100%;
  padding: 0 var(--gutter) 48px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

.editorial > * { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------------------------------------------------------- */

.editorial .ed-hero {
  max-width: var(--col);
  padding: 40px 0 24px;
  border-bottom: var(--rule);
}

.editorial .ed-kicker {
  margin: 0 0 12px;
  /* --clay (#b85f42) reaches only 3.99:1 on --paper at 13px; --red is the same
     house family and measures 5.96:1. */
  color: var(--red);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Blanket caps. health-world.css sets h2/h3 site-wide with !important up to
   61.6px; enumerating the headings one by one already let .ed-next slip through
   once, so the cap is stated for the element, not for each block. */
.editorial h2 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}

.editorial h3 {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

/* Nothing in this world is set heavier than 600 — health-world.css puts b and
   strong at 700. */
.editorial b,
.editorial strong { font-weight: 600; }

.editorial h1 {
  max-width: 24ch;
  margin: 0 0 12px !important;
  color: var(--ink);
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em;
}

.editorial .ed-standfirst {
  max-width: 68ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

/* ---------- the register bar: four measured numbers, hairline separated ---- */

.editorial .ed-bar {
  display: flex;
  max-width: var(--col);
  flex-wrap: wrap;
  gap: 0;
  margin: 0 auto;
  padding: 16px 0;
  border-bottom: var(--rule);
  list-style: none;
}

.editorial .ed-bar > li {
  padding: 0 16px;
  border-left: var(--rule);
}

.editorial .ed-bar > li:first-child { padding-left: 0; border-left: 0; }

.editorial .ed-bar b {
  display: block;
  color: var(--ink);
  font-family: var(--mono, ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.editorial .ed-bar span {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: .01em;
}

/* ---------- filter ------------------------------------------------------- */

.editorial .ed-filter {
  display: flex;
  max-width: var(--col);
  align-items: baseline;
  gap: 16px;
  padding: 0 0 8px;
}

.editorial .ed-filter input {
  min-width: 0;
  min-height: 40px;
  flex: 1 1 auto;
  padding: 8px 12px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}

.editorial .ed-filter input:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}

.editorial .ed-filter p {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: 13px;
}

/* ---------- the stacked entry list --------------------------------------- */

.editorial .ed-stream { max-width: var(--col); }

.editorial .ed-entry {
  padding: 32px 0;
  border-top: var(--rule);
}

.editorial .ed-entry:first-child { border-top: 0; padding-top: 24px; }

.editorial .ed-figure {
  display: block;
  max-width: var(--col);
  margin: 0 auto 16px;
  background: var(--paper-deep);
}

/* 3:2, the reference format. aspect-ratio holds the box before the image
   arrives, so a lazy-loaded list never reflows under the reader. */
.editorial .ed-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.editorial .ed-type {
  display: block;
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.editorial .ed-entry h2 {
  margin: 0 0 8px !important;
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
}

.editorial .ed-entry h2 a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

.editorial .ed-entry h2 a:hover,
.editorial .ed-entry h2 a:focus-visible { text-decoration: underline; }

.editorial .ed-entry p {
  max-width: 68ch;
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.editorial .ed-meta {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.editorial .ed-meta time { font-variant-numeric: tabular-nums; }
.editorial .ed-meta span::before { content: " · "; }

/* ---------- the complete index below the stream --------------------------- */

.editorial .ed-index {
  max-width: var(--col);
  padding: 32px 0 0;
  border-top: var(--rule);
}

.editorial .ed-index h2,
.editorial .ed-section > h2 {
  margin: 0 0 8px !important;
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
}

.editorial .ed-index > p { max-width: 68ch; margin: 0 0 16px; color: var(--ink-2); }

.editorial .ed-rows { margin: 0; padding: 0; list-style: none; }

.editorial .ed-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: var(--rule);
}

.editorial .ed-row time {
  flex: 0 0 auto;
  width: 6.5em;
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.editorial .ed-row a {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 3px;
}

.editorial .ed-row a:hover,
.editorial .ed-row a:focus-visible { text-decoration: underline; }

.editorial .ed-row small {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- quiet foot ---------------------------------------------------- */

.editorial .ed-foot {
  display: flex;
  max-width: var(--col);
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: var(--rule);
}

.editorial .ed-foot a { color: var(--forest); font-size: 13px; }

/* ---------- the register page itself -------------------------------------- */

.editorial .ed-body { max-width: var(--col); }

.editorial .ed-section { padding: 24px 0 0; }

.editorial .ed-section p,
.editorial .ed-body > p { max-width: 68ch; margin: 0 0 12px; }

.editorial .ed-section h3 {
  margin: 16px 0 8px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}

.editorial .ed-note {
  margin: 24px 0 0;
  padding: 16px;
  border: var(--rule);
  border-left: 2px solid var(--forest);
  border-radius: 2px;
  background: var(--paper-soft);
  color: var(--ink-2);
  font-size: 13px;
}

.editorial .ed-note p { max-width: 68ch; margin: 0; }
.editorial .ed-note b { color: var(--ink); }

.editorial .ed-claims { margin: 0; padding: 0; }

.editorial .ed-claim {
  margin: 16px 0 0;
  padding: 16px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--white);
}

.editorial .ed-claim p { max-width: 68ch; margin: 0 0 8px; }
.editorial .ed-claim p:last-child { margin-bottom: 0; }

.editorial .ed-claim .ed-claim-id {
  color: var(--ink-2);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: .04em;
}

.editorial .ed-sources { margin: 0; padding: 0; list-style: none; }

.editorial .ed-sources li {
  max-width: 68ch;
  padding: 12px 0;
  border-top: var(--rule);
  font-size: 15px;
}

.editorial .ed-sources li b {
  color: var(--ink-2);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
}

.editorial .ed-sources li span { display: block; color: var(--ink-2); font-size: 13px; }
.editorial .ed-sources li a { color: var(--forest); }

.editorial .ed-share {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: var(--rule);
  font-size: 13px;
}

.editorial .ed-share span { color: var(--ink-2); }
.editorial .ed-share a { color: var(--forest); }

.editorial .ed-share button {
  padding: 6px 12px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--white);
  color: var(--forest);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.editorial .ed-next {
  max-width: var(--col);
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--rule);
}

.editorial .ed-next ul { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }

@media (min-width: 640px) {
  .editorial .ed-next ul { grid-template-columns: 1fr 1fr; }
}

.editorial .ed-next a {
  display: block;
  padding: 16px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--paper-soft);
  color: var(--ink);
  text-decoration: none;
}

.editorial .ed-next a:hover,
.editorial .ed-next a:focus-visible { background: var(--white); }

.editorial .ed-next a b { display: block; font-size: 15px; font-weight: 600; }
.editorial .ed-next a span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; }

/* ---------- mobile -------------------------------------------------------- */

@media (max-width: 700px) {
  .editorial { padding-bottom: 32px; }
  .editorial .ed-hero { padding: 32px 0 20px; }
  .editorial h1 { font-size: 24px !important; }
  .editorial .ed-entry { padding: 24px 0; }
  .editorial .ed-section { padding-top: 20px; }
  .editorial .ed-row { flex-wrap: wrap; gap: 4px 12px; }
  .editorial .ed-row small { margin-left: 0; }
}

/* The article world never reaches for the old card grid or the hero pattern. */
.editorial .article-card-grid,
.editorial .article-status-strip,
.article-world-hero::after { display: none; }

/* ---------- journey, areas, archive ------------------------------------- */

/* The four depths, stated as a list rather than drawn as a diagram: the graph is
   the picture of this idea, and repeating it here in boxes would say it twice. */
.editorial .ed-journey,
.editorial .ed-areas,
.editorial .ed-archive { max-width: var(--col); }

.editorial .ed-journey {
  padding: 32px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.editorial .ed-journey > p,
.editorial .ed-areas-note { max-width: 68ch; margin: 0 0 16px; color: var(--ink-2); }

.editorial .ed-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px) {
  .editorial .ed-steps { grid-template-columns: 1fr 1fr; }
}

.editorial .ed-steps > li {
  padding: 16px;
  border: var(--rule);
  border-radius: 2px;
  background: var(--paper-soft);
}

.editorial .ed-steps p { max-width: 44ch; margin: 0 0 8px; }
.editorial .ed-steps p:last-child { margin-bottom: 0; }
.editorial .ed-steps a { color: var(--forest); font-size: 13px; }

.editorial .ed-step {
  color: var(--ink);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.editorial .ed-areas { padding: 32px 0 0; }

.editorial .ed-areas-title,
.editorial .ed-archive > h2 {
  margin: 0 0 8px !important;
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.editorial .ed-area {
  padding: 32px 0 0;
  border-top: var(--rule);
  margin-top: 32px;
}

.editorial .ed-area > h2 {
  margin: 0 0 4px !important;
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.editorial .ed-areadef { max-width: 68ch; margin: 0 0 24px; color: var(--ink-2); }

/* Inside an area the lead entry has no rule above it — the area heading is the
   separator, and a second hairline 8px later reads as an error. */
.editorial .ed-area .ed-entry { padding-top: 0; border-top: 0; }

.editorial .ed-archive { padding: 32px 0 0; border-top: var(--rule); margin-top: 32px; }
.editorial .ed-archive > p { max-width: 68ch; margin: 0 0 16px; color: var(--ink-2); }

.editorial .ed-month { margin-top: 24px; }

.editorial .ed-month h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 !important;
  padding-bottom: 4px;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.editorial .ed-month h3 small { color: var(--ink-2); font-size: 13px; font-weight: 400; }