/* Article and hub typography.

   One column, one measure. The body sits at ~34rem because these pages are
   read to answer a question, often on a phone in bright sun, and a long line
   is the first thing to fail in those conditions. */

/* Every max-width on this page resolves to one of two tokens. `ch` and `em`
   caps resolved against different font sizes, so a single column had six
   different right edges — and the h1's ran 133px into the sidebar. */
.section-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.article h1,
.hub h1 {
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: var(--measure-wide);
  margin: 0 0 28px;
}

html[lang="ja"] .article h1,
html[lang="ja"] .hub h1 {
  font-size: clamp(1.65rem, 1.15rem + 1.8vw, 2.35rem);
  line-height: 1.3;
  max-width: var(--measure-wide);
}

/* The direct answer card.
   40–70 words, above everything else, so the question is answered before the
   reader has to decide whether to keep going. */
.answer-block {
  margin-top: 0;
  margin-bottom: 32px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  max-width: var(--measure-wide);
}

.answer-question {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

html[lang="ja"] .answer-question {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
}

.answer-body {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

html[lang="ja"] .answer-body {
  font-size: 1.0625rem;
  line-height: 1.85;
  letter-spacing: 0;
}

/* The measure belongs to the text, not to the container. */
.article-body {
  margin-top: 24px;
  max-width: var(--measure-wide);
}

.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > h3,
.article-body > blockquote,
.article-body > .steps {
  max-width: var(--measure);
}

/* Tables, figures and worked examples take the full column on purpose. */
.article-body > .table-scroll,
.article-body > figure,
.article-body > .panel,
.article-body > .worked-example,
.article-body > .wide {
  max-width: var(--measure-wide);
}

.article-body > * + * {
  margin-top: 24px;
}

.article-body > h2,
.article-main > h2 {
  margin-top: 64px;
  margin-bottom: 18px;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
  line-height: 1.25;
  max-width: var(--measure);
}

.article-body > h3 {
  margin-top: 44px;
  margin-bottom: 14px;
  font-size: 1.25rem;
  line-height: 1.35;
  max-width: var(--measure);
}

.article-body > h2 + p,
.article-body > h3 + p {
  margin-top: 14px;
}

.article-body p,
.article-body li {
  color: var(--ink-2);
}

.article-body strong {
  color: var(--ink);
  font-weight: 620;
}

.article-body ul,
.article-body ol {
  margin: 20px 0 0;
  padding-left: 1.3em;
  display: grid;
  gap: 9px;
}

html[lang="ja"] .article-body ul,
html[lang="ja"] .article-body ol {
  padding-left: 1.5em;
}

.article-body li::marker {
  color: var(--ink-3);
}

.article-body a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.article-body a:hover {
  text-decoration-color: var(--accent);
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.12em 0.4em;
  border-radius: 5px;
}

/* A formula is one block, not a run of inline fragments each carrying its own
   background. Wrapping it inline produced three ragged tinted shapes of
   different lengths, and broke the expression after a dangling operator. */
.worked-example dd code {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.article-body blockquote {
  margin: var(--gap-panel) 0 0;
  padding: 4px 0 4px 22px;
  border-left: 1px solid var(--hairline-strong);
  color: var(--ink-2);
  font-style: normal;
}

/* A worked example is a recurring shape on this site: numbers in, one answer
   out, with the arithmetic visible. */
.worked-example {
  margin-top: var(--gap-panel);
  padding: 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.worked-example h3 {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 14px;
}

.worked-example dl {
  margin: 0;
  display: grid;
  /* A fixed label column, so two cards of the same kind do not put their code at
     two different x positions. */
  grid-template-columns: minmax(0, 10em) 1fr;
  gap: 10px 20px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .worked-example dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .worked-example dt {
    margin-top: 10px;
  }
}

.worked-example dt {
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.worked-example dd {
  margin: 0;
  font-weight: 600;
}

.worked-example .result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.worked-example .result b {
  font-size: 1.75rem;
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* A short list of steps, numbered, for the decision-process pages. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: var(--gap-panel) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* The marker is positioned rather than laid out in a grid column.

   A grid `<li>` wraps each *contiguous run* of children in its own item, so
   `<strong>Lead-in.</strong>followed by text` becomes two items: the strong
   lands in the content column and the text is pushed to the next row, into the
   30px marker column, where it renders one character per line. Absolute
   positioning keeps the whole item in one flow whatever the markup does. */
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  min-height: 30px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  font-size: 0.875rem;
  font-weight: 660;
  color: var(--ink-2);
}

/* Sources. Cited where a reader might want to verify a threshold, not to prove
   the page was researched. */
.article-main > h2,
.article-body > h2,
.article > h2,
.hub > h2 {
  margin-top: 64px;
  margin-bottom: 20px;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
  line-height: 1.25;
}

.sources {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.sources h2 {
  font-size: 0.9375rem;
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0 0 12px;
}

.sources ol {
  margin: 14px 0 0;
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.sources a {
  color: var(--ink-2);
}

/* --------------------------------------------------------------- the rail */

/* The article and its rail. Below 1080px the rail follows the article as a
   plain block; above it, it occupies the side column with sticky positioning. */
.article-layout {
  display: grid;
  gap: 36px;
  align-items: start;
}

.article-layout > * {
  min-width: 0;
}

@media (min-width: 1080px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 48px;
  }

  .article-rail {
    position: sticky;
    top: 88px;
  }
}

.article-rail {
  margin-top: 0;
  display: grid;
  gap: 20px;
  align-content: start;
  font-size: 0.875rem;
}

.rail-heading {
  font-size: 0.75rem;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

html[lang="ja"] .rail-heading {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
}

.rail-toc {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.rail-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.rail-toc li {
  border-bottom: 1px solid var(--hairline);
}

.rail-toc a {
  display: block;
  padding: 8px 0;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.rail-toc a:hover {
  color: var(--accent);
}

/* The product card on content pages. */
.rail-app {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.rail-app img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(23, 20, 15, 0.2);
}

.rail-app-name {
  font-weight: 660;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.rail-app-copy {
  color: var(--ink-2);
  line-height: 1.5;
  font-size: 0.84375rem;
  margin: 0;
}

.rail-app-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.rail-app-link:hover {
  opacity: 0.85;
}

.rail-app-pending {
  color: var(--ink-3);
  font-size: 0.875rem;
  margin: 0;
}

/* ------------------------------------------------------------------- hub */

.hub .lede {
  max-width: var(--measure);
}

/* A hub's intro is one short paragraph under the lede, not an article, so it
   does not need the full section gap above it. */
.hub .article-body {
  margin-top: 26px;
}

.hub .article-body > p {
  max-width: var(--measure);
}