/* GENERATED FILE - do not edit by hand.
   Compiled from resources/scss/cc-entry.scss by `npm run css`.
   Edit the partials that entry point names, then rebuild and commit both. */
/* ─────────────────────────────────────────────────────────────────────────
   HEARTH — the entry page as a reading page. Loaded after cc.css,
   cc-detail.css and cc-lists.css.

   cc-detail.css already styles the card, the prose, the editor's note, the
   flag readings and the feedback controls, and it keeps doing all of that.
   What is here is the two-column split, the marks row and the "Read from"
   block, ported from docs/mockups/release-refresh/src/p-a.css.
   ───────────────────────────────────────────────────────────────────────── */
/* Top padding only. `.epgmain` sits on the same element as `.shell`, and a
   padding shorthand here has equal specificity and loads second, so it would
   wipe `.shell`'s `padding:0 var(--pad)` and run the page wider than the
   masthead above it. */
.epgmain {
  padding-top: 20px;
  padding-bottom: 8px;
}

/* The whole grid is inside the article, which is the `.card.folded` feedback.js
   looks for. The card itself stops being a card here: it is the page. */
.entrypg .e.card {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ── the topline ────────────────────────────────────────────────────────── */
/* The heading is prose rather than the display face the other toplines use: an
   entry heading is a sentence, often a long one, and at 40px it wraps to four
   lines and pushes the entry itself off the first screen. */
.entrypg .topline-id h1.epgh {
  font-family: var(--display);
  font-size: 27px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
  color: var(--ink);
  max-width: 20em;
}

.entrypg .topline-id .lbl a {
  color: inherit;
}

.entrypg .topline-id .lbl a:hover {
  color: var(--sig);
}

.entrypg .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.entrypg .crumb a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.entrypg .crumb a:hover {
  color: var(--sig);
}

.entrypg .crumb .allrel {
  color: var(--ink-2);
}

/* ── the reading column ─────────────────────────────────────────────────── */
/* 62em is the mockup's; the measure is what makes this a reading page rather
   than a card blown up to full width. */
.epg {
  max-width: 62em;
  min-width: 0;
}

.epg .marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.mk {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--raise);
  color: var(--ink-2);
}

.mk.t-use {
  color: var(--t-use-text);
  background: color-mix(in srgb, var(--t-use) 14%, transparent);
}

.mk.t-notice {
  color: var(--t-notice-text);
  background: color-mix(in srgb, var(--t-notice) 14%, transparent);
}

.mk.t-soon {
  color: var(--t-soon-text);
  background: color-mix(in srgb, var(--t-soon) 14%, transparent);
}

.mk.t-internal {
  color: var(--t-internal-text);
  background: color-mix(in srgb, var(--t-internal) 16%, transparent);
}

.mk.notable {
  color: var(--notable);
  background: color-mix(in srgb, var(--notable) 14%, transparent);
}

/* Leads the row on a folded entry's page, because a reader who followed one of
   five links here needs to know first that this page answers all five. The
   glyph comes from `.grp` in cc-detail.css, which this page loads first; only
   the chip's colours are said here, the way every other mark says only its
   own. */
.mk.grp {
  color: var(--sig);
  background: color-mix(in srgb, var(--sig) 14%, transparent);
}

.mk.off {
  color: var(--off);
  background: color-mix(in srgb, var(--off) 14%, transparent);
}

.epg .lead {
  font-family: var(--prose);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 44em;
  margin: 0;
}

.epg .bd {
  margin-top: 18px;
}

/* ── the strings the read came from ─────────────────────────────────────── */
.ev {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.evl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.evl i {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-right: 4px;
}

.evl .tok {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--raise);
  padding: 4px 7px;
  border-radius: 3px;
}

.ev .flagbox {
  margin-top: 14px;
}

.epgback {
  margin-top: 26px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.epgback a {
  color: var(--sig);
}

/* ── the aside ──────────────────────────────────────────────────────────── */
.entrypg .cx .tbar {
  margin: 4px 0 10px;
}

.entrypg .cx .cxo {
  margin-top: 10px;
}

.epgmain .cx li .tm {
  margin-right: 7px;
  vertical-align: 0;
}

/* The feedback controls keep every rule cc-detail.css and feedback.css give
   them; all that changes is that the row is now a column 300px wide, so the
   vote pair and the reason panel wrap instead of sitting on one line. */
.fbx .eacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.fbx .fb {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fbx .fb-panel {
  margin-top: 10px;
}

/* The related block is a section of the aside rather than a sidebar of its own
   here, so it drops the border and the width cc-detail.css gives it beside a
   card and takes the `.cx` frame instead. */
.entrypg aside .relblk {
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0;
  width: auto;
  max-width: none;
}

.entrypg aside .relbh {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}

@media (max-width: 900px) {
  .entrypg .topline-id h1.epgh {
    font-size: 23px;
  }
}