/* Article, hub and scenario pages.

   Loaded on top of site.css, which owns the palette, the type and the
   furniture. Nothing here introduces a colour, a radius or a font — everything
   is the tokens from DESIGN.md, applied to the shapes only long-form pages
   need. */

/* ---------- page shell ---------- */

.prose-page {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.prose-page h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  margin-top: 0.6rem;
  max-width: 20ch;
}

.hub h1 { max-width: none; }

.prose-page > .wrap > .lede {
  margin-top: 1.1rem;
  font-size: 1.2rem;
  max-width: 46rem;
}

/* ---------- breadcrumb ---------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--stroke-strong);
}

.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink-soft); }

/* ---------- the direct answer ---------- */

/* The answer first and the details after. This block is the loudest thing under
   the h1: it is what a skimming reader takes away, and it is what an answer
   engine quotes.

   It gets there on type, not on colour. DESIGN.md allows exactly one card
   treatment — the hairline and the 18px radius, as in the app — so the emphasis
   is the size and weight of the answer itself against the body measure, with
   the tracked label above it doing the rest. An accent bar down one edge would
   be a second card treatment and a decorative use of the accent, and the rules
   forbid both. */
.answer-block {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  max-width: 46rem;
}

.answer-block__question {
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.answer-block__body {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  font-weight: 520;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- article + rail ---------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 1100px) {
  .article-layout {
    grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.article-body { max-width: 42rem; }
.article-body > * + * { margin-top: 1.15rem; }

.article-body h2 {
  margin-top: 2.9rem;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  scroll-margin-top: 1.5rem;
}

.article-body h3 {
  margin-top: 2rem;
  font-size: 1.1rem;
  scroll-margin-top: 1.5rem;
}

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

.article-body ul,
.article-body ol { padding-left: 1.2rem; margin-block: 0; }
.article-body li + li { margin-top: 0.5rem; }

.article-body blockquote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--stroke-strong);
  color: var(--ink-soft);
}

.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-elevated);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

/* A figure that is really an equation: centred, roomy, tabular. */
.article-body .formula {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink);
  overflow-x: auto;
}

.article-body .formula small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* A short aside that is not the CTA and not a quote — used for the "this is a
   property of the air, not of your room" note that several pages carry. */
.article-body .note-box {
  background: var(--bg-elevated);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  font-size: 0.95rem;
}

.article-body .note-box p { color: var(--ink-soft); }
.article-body .note-box > * + * { margin-top: 0.6rem; }

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
}

.article-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}

.article-body caption {
  caption-side: bottom;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: left;
}

.article-body th,
.article-body td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}

.article-body thead th {
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.article-body tbody th { font-weight: 620; color: var(--ink); }
.article-body td { color: var(--ink-soft); }
.article-body tbody tr:last-child th,
.article-body tbody tr:last-child td { border-bottom: 0; }

/* Below 640px a wide table stacks, and each cell carries the column heading the
   header row can no longer supply. The `data-label` attributes are added by a
   transform in eleventy.config.js, so no page has to write them. */
@media (max-width: 640px) {
  .article-body table:not(.chart-table),
  .article-body table:not(.chart-table) tbody,
  .article-body table:not(.chart-table) tr { display: block; width: 100%; }

  .article-body table:not(.chart-table) thead { display: none; }

  .article-body table:not(.chart-table) tr {
    border-bottom: 1px solid var(--stroke);
    padding-block: 0.5rem;
  }

  .article-body table:not(.chart-table) tr:last-child { border-bottom: 0; }

  .article-body table:not(.chart-table) th,
  .article-body table:not(.chart-table) td {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    border-bottom: 0;
    padding-block: 0.3rem;
  }

  .article-body table:not(.chart-table) td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* ---------- band swatches ---------- */

/* The five comfort colours carry meaning and nothing else on the site may use
   them. A swatch in a table row is the meaning, so it qualifies. */
.band-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: baseline;
}

.band-dot--dry { background: var(--band-dry); }
.band-dot--comfortable { background: var(--band-comfortable); }
.band-dot--moderate { background: var(--band-moderate); }
.band-dot--humid { background: var(--band-humid); }
.band-dot--damp { background: var(--band-damp); }

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

.article-rail { display: none; }

@media (min-width: 1100px) {
  .article-rail {
    display: block;
    position: sticky;
    top: 2rem;
    font-size: 0.9rem;
  }
}

.rail-heading {
  font-size: 0.75rem;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rail-toc ol {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--stroke);
}

.rail-toc li { padding: 0.3rem 0 0.3rem 0.9rem; }

.rail-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
}

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

.rail-app {
  margin-top: 2.25rem;
  padding: 1.15rem;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}

.rail-app img { border-radius: 10px; }
.rail-app__name { margin-top: 0.7rem; font-weight: 620; color: var(--ink); }
.rail-app__copy { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.88rem; }

.rail-app__pending {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ---------- FAQ ---------- */

.faq { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 46rem; }
.faq h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); scroll-margin-top: 1.5rem; }

.faq-list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--stroke);
}

.faq-list details { border-bottom: 1px solid var(--stroke); }

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 620;
  color: var(--ink);
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary span {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  position: relative;
}

.faq-list summary span::before,
.faq-list summary span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--ink-faint);
}

.faq-list summary span::after { transform: rotate(90deg); transition: transform 0.15s ease; }
.faq-list details[open] summary span::after { transform: rotate(0deg); }

.faq-list details p {
  padding-bottom: 1.15rem;
  color: var(--ink-soft);
  max-width: 42rem;
}

/* ---------- product CTA ---------- */

.product-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  max-width: 46rem;
}

.product-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.product-cta p { margin-top: 0.75rem; color: var(--ink-soft); }

.product-cta .availability {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--stroke-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 620;
  color: var(--ink-soft);
}

.cta-requires { font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- card lists: hubs, related ---------- */

.related { margin-top: clamp(3rem, 6vw, 4.5rem); }
.related h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); scroll-margin-top: 1.5rem; }

.hub-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.hub-group h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.hub-group__blurb { margin-top: 0.6rem; color: var(--ink-soft); max-width: 46rem; }

.card-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.card-list a {
  display: block;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.card-list a:hover { border-color: var(--stroke-strong); }

.card-list a:focus-visible { outline-offset: 2px; }

.card-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.card-list strong {
  display: block;
  font-weight: 620;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-list span:not(.card-eyebrow) {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.hub-empty { color: var(--ink-faint); margin-top: 1.5rem; }

/* ---------- sources and the date line ---------- */

.sources { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 46rem; }
.sources h2 { font-size: 1.1rem; }

.sources ol {
  margin-top: 0.9rem;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.sources li + li { margin-top: 0.4rem; }

.updated {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}