/* Strlng — editorial.css. An experiment, loaded only on pages with `editorial: true`
   in their front matter (see base.njk). It never touches site.css, so every other page
   is unaffected. Oversized display type, near-bleed gutters, full-width action bars.

   It reads the same tokens as site.css, so all three themes still work. */

.editorial {
  /* Type runs close to the edges: the gutter drops from 6% to a fixed margin. */
  --gutter: 32px;
  /* var() substitutes where it is declared, so the rule positions have to be
     restated here to pick up this gutter rather than the root's 6%. */
  --rule-x1: var(--gutter);
  --rule-x2: calc(var(--gutter) + (100% - 2 * var(--gutter)) * var(--split-frac));
  --rule-x3: calc(100% - var(--gutter));
  --section-space: clamp(40px, 5vw, 72px);
}

/* ---------- Hero: one headline, poster scale ---------- */

.editorial .hero { padding-block: clamp(16px, 3vw, 40px) clamp(32px, 5vw, 64px); }

.editorial .hero .t1 {
  font-size: clamp(52px, 11vw, 280px);
  line-height: .82;
  letter-spacing: -.045em;
  max-width: none;
}

/* The accent phrase takes its own line, as a second deck. */
.editorial .hero .t1 em { display: block; }

.editorial .hero .t2 {
  margin-top: 56px;
  font-size: clamp(21px, 2.6vw, 34px);
  max-width: 35ch;
}

/* Product names sit on one rule, spread the full width. */
.editorial .hero__products {
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* ---------- Section rules and labels ---------- */

.editorial .section { padding-block: var(--section-space); }
.editorial .section-label { margin-bottom: clamp(20px, 3vw, 64px); }

/* ---------- The problem: a claim at display size ---------- */

/* The break sits on the middle rule: the first column stops one gap short of it. */
.editorial .grid-2 {
  grid-template-columns: calc(100% * var(--split-frac) - var(--col-gap)) 1fr;
  gap: 32px var(--col-gap);
}

.editorial #problem-title {
  font-size: clamp(30px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 18ch;
}

/* ---------- Tools: full-width rows, not side-by-side cards ---------- */

.editorial .tools { grid-template-columns: 1fr; }

.editorial .tool {
  padding: clamp(20px, 3vw, 36px) 0 clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
.editorial .tool + .tool { border-left: 0; padding-left: 0; }

.editorial .tool__name {
  font-size: clamp(56px, 11vw, 260px);
  line-height: .86;
  letter-spacing: -.04em;
  /* Long names (Fallback-Sentinel) break rather than overflow the page. */
  overflow-wrap: anywhere;
}

/* The one-liner and the summary share a rule below the name. */
.editorial .tool__body {
  display: grid;
  grid-template-columns: calc(100% * var(--split-frac) - var(--col-gap)) 1fr;
  gap: 16px var(--col-gap);
  align-items: start;
  margin-top: clamp(16px, 2vw, 28px);
}
.editorial .tool .t2 { margin-top: 0; font-size: 40px; }
.editorial .tool .t3 { margin-top: 0; }

/* Body copy and labels run a step larger than site.css, to hold their own
   against the display type. Scoped to this page, so site.css is unchanged. */
.editorial .site-header ul { font-size: 14px; }
.editorial .t2 { max-width: 30ch; }
.editorial .t3 { font-size: 16px; }
.editorial .t3-label { font-size: 14px; }

/* ---------- Action bars: a link the full width of the page ---------- */

.editorial .tool__more,
.editorial .bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 24px;
  width: 100%;
  margin: 0;
  padding: clamp(18px, 2.2vw, 28px) 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease, padding-inline .25s ease;
}
.editorial .tool__more + .tool__more,
.editorial .bar + .bar { border-top: 0; }

/* The row fills on hover, and the label steps in from the edge. */
.editorial .tool__more:hover,
.editorial .bar:hover,
.editorial .tool__more:focus-visible,
.editorial .bar:focus-visible {
  background: var(--accent);
  color: var(--c-ink);
  padding-inline: clamp(12px, 1.6vw, 24px);
}

/* On ink, the coral fill keeps ink text; on coral, the fill is paper. */
.editorial .theme-coral .tool__more:hover,
.editorial .theme-coral .bar:hover { color: var(--c-ink); }

.editorial .tool__more::after,
.editorial .bar::after { content: "→" / ""; }
.editorial .tool__more { margin-top: clamp(18px, 2.4vw, 32px); }

/* A bar that stands alone below a section. */
.editorial .bar-stack { margin-top: clamp(20px, 3vw, 36px); }

@media (prefers-reduced-motion: reduce) {
  .editorial .tool__more,
  .editorial .bar { transition: none; }
}

/* ---------- Principles: numbered lines at reading-out-loud size ---------- */

.editorial .principle-lines li {
  grid-template-columns: clamp(48px, 6vw, 110px) 1fr;
  /* Row gap only: a column gap pushes the line away from its number. */
  gap: 12px 0;
  /* Baseline alignment reads low when the numeral is this much smaller than
     the line, so the numeral sits on the line's optical middle instead. */
  align-items: center;
  padding-block: clamp(14px, 1.8vw, 26px);
}
.editorial .principle-line {
  font-size: clamp(22px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -.022em;
}

/* ---------- Footer: the address as the sign-off ---------- */

.editorial .site-footer .t2 { font-size: clamp(22px, 2.8vw, 38px); }
.editorial .footer-email a {
  font-family: var(--serif);
  font-size: clamp(34px, 8.6vw, 150px);
  line-height: .9;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  display: block;
}
.editorial .footer-email a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Narrow screens: the scale has to give ---------- */

@media (max-width: 760px) {
  /* A 32px gutter eats too much of a phone screen. */
  .editorial {
    --gutter: 16px;
    --rule-x1: var(--gutter);
    --rule-x2: calc(var(--gutter) + (100% - 2 * var(--gutter)) * var(--split-frac));
    --rule-x3: calc(100% - var(--gutter));
  }
  .editorial .grid-2 { grid-template-columns: 1fr; }
  .editorial .tool__body { grid-template-columns: 1fr; }
  .editorial .principle-lines li { grid-template-columns: 1fr; gap: 4px; }
  .editorial .hero .t1 { letter-spacing: -.035em; }
}

/* ---------- Product and interior pages ---------- */

/* The product name is the page: Fallback and Disco at hero scale. */
.editorial .hero .t3 { max-width: 60ch; margin-top: 20px; }

/* Facts read as a spec strip across the full width. */
.editorial .facts {
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}
.editorial .facts > div {
  flex: 1 1 200px;
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--rule);
}
.editorial .facts dd { font-size: 15px; }

/* Steps: numbered rows on rules, the number set large in the margin. */
.editorial .steps {
  display: block;
  margin-block: clamp(28px, 3.5vw, 48px);
}
.editorial .steps li {
  display: grid;
  grid-template-columns: clamp(48px, 6vw, 110px) 1fr;
  align-items: start;
  gap: 8px 0;
  padding-block: clamp(18px, 2.4vw, 32px);
  border-top: 1px solid var(--rule);
}
.editorial .steps li:last-child { border-bottom: 1px solid var(--rule); }
.editorial .steps li .t3-label { grid-row: 1 / span 2; }
.editorial .steps h3 { margin-block: 0 8px; font-size: clamp(22px, 2.4vw, 32px); }
.editorial .steps .t3 { max-width: 62ch; }

/* Terminal excerpts hold the same measure as the text around them. */
.editorial .terminal { padding: clamp(20px, 2.4vw, 32px); font-size: 14px; }

/* The comparison table reads as a spec sheet: the row labels name the question,
   the two product columns answer it. The heads stay below the section claim in
   scale, so the hierarchy runs claim, then product, then answer. */
.editorial .faces { font-size: 15px; table-layout: fixed; }
.editorial .faces thead th {
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.1;
  padding-bottom: 16px;
  border-top: 0;
}
/* With table-layout: fixed the head row sets the widths: a narrow question
   column, then the two products sharing what is left. */
/* The second product column starts on the middle rule, like every other split. */
.editorial .faces thead th:first-child { width: 18%; border-top: 0; }
.editorial .faces thead th + th { width: calc(100% * var(--split-frac) - 18%); }
.editorial .faces thead th + th + th { width: auto; }
.editorial .faces tbody th {
  font-size: 14px;
  letter-spacing: .12em;
  padding-right: 24px;
}
.editorial .faces th, .editorial .faces td { padding-block: 18px; }
/* A firmer rule under the heads; the row rules stay hairline. */
.editorial .faces tbody tr:first-child th,
.editorial .faces tbody tr:first-child td { border-top-color: var(--ink); }
.editorial .faces td { color: var(--ink); }

/* "What it doesn't do": each edge is its own line on a rule. */
.editorial .not-list { max-width: none; margin-top: clamp(24px, 3vw, 40px); }
.editorial .not-list li { padding-block: clamp(16px, 2vw, 26px); }
.editorial .not-list li:last-child { border-bottom: 1px solid var(--rule); }
.editorial .not-list strong { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); display: block; margin-bottom: 6px; }

/* The CTA button becomes the same full-width bar as the home page links. */
.editorial .cta__actions { display: block; margin-top: clamp(28px, 3.5vw, 44px); }
.editorial .button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding: clamp(18px, 2.2vw, 28px) 0;
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font: 400 clamp(13px, 1.5vw, 18px) var(--mono);
  letter-spacing: .18em;
  transition: background-color .25s ease, color .25s ease, padding-inline .25s ease;
}
.editorial .button::after { content: "→" / ""; }
.editorial .button:hover,
.editorial .button:focus-visible {
  background: var(--accent);
  color: var(--c-ink);
  padding-inline: clamp(12px, 1.6vw, 24px);
}

/* ---------- Principles page ---------- */

.editorial .principle {
  --num-col: clamp(48px, 6vw, 110px);
  grid-template-columns: var(--num-col) calc(100% * var(--split-frac) - var(--num-col)) 1fr;
  /* No column gap, so the claim sits close to its numeral, as on the home page.
     The detail column keeps its own space through padding instead. */
  gap: 16px 0;
  /* Same reading as the home page: the numeral sits on the line's middle. */
  align-items: center;
  padding-block: clamp(24px, 3vw, 44px);
}
.editorial .principle .t2 {
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -.022em;
  max-width: none;
}
.editorial .principle__detail { align-self: center; }

@media (max-width: 760px) {
  .editorial .facts > div { padding-right: 0; }
  .editorial .steps li,
  .editorial .principle { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .editorial .steps li .t3-label { grid-row: auto; }
}