/* Page-specific layout. Tokens and chrome live in base.css. */

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

.hero { padding: 64px 0 20px; }
.hero .eyebrow { margin: 0 0 18px; }

.hero h1 {
  font-size: clamp(38px, 6.6vw, 82px);
  max-width: 15ch;
  margin: 0 0 22px;
}

/* The half-life figure is the whole point of the page, so it gets the serif
   and the accent — the one place either is used at this size. */
.hl-figure {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  white-space: nowrap;
}

.hero-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 44px;
}

/* --- stat band ------------------------------------------------------------ */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 30px 8px;
  margin-bottom: 8px;
}

.stat { padding: 0 22px; }
.stat + .stat { border-left: 1px solid var(--line); }

.stat-v {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-k { font-size: 13px; line-height: 1.45; color: var(--ink-2); font-weight: 500; }
.stat-k em { font-style: normal; color: var(--accent-text); font-weight: 700; }

/* --- sections ------------------------------------------------------------- */

/* padding-TOP only, never the shorthand. Every section is `class="wrap sec"`,
   and app.css loads after base.css, so `padding: 76px 0 0` silently zeroed
   .wrap's horizontal padding on every section of the page. Above 1240px the
   max-width hid it; at any narrower viewport the text ran into the edge of the
   screen. */
.sec { padding-top: 76px; }
.sec-head { margin-bottom: 26px; max-width: 68ch; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 12px; }
.sec-head p { font-size: 15.5px; line-height: 1.6; margin: 0; }

/* --- chart ---------------------------------------------------------------- */

.chart-card { padding: 30px 30px 22px; }
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-area { fill: var(--accent-soft); }
.chart-line { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--panel-solid); stroke: var(--accent-text); stroke-width: 2.5; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-half { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.75; }
.chart-label { fill: var(--ink-3); font-size: 11.5px; font-weight: 600; font-family: var(--sans); }
.chart-value { fill: var(--ink); font-size: 12.5px; font-weight: 800; font-family: var(--sans); }
.chart-halflabel { fill: var(--bad); font-size: 11.5px; font-weight: 700; font-family: var(--sans); }

/* Hover target is a full-height column, not the 4px dot — a 5%-survival point
   sits at the very bottom of the plot and would be unhittable otherwise. */
.chart-hit { fill: transparent; cursor: default; }
.chart-hit:hover + .chart-dot,
.chart-hit:focus + .chart-dot { r: 7; }

.chart-note { font-size: 12.5px; line-height: 1.55; margin: 18px 0 0; max-width: 78ch; }

/* --- the cliff callout ---------------------------------------------------- */

.cliff {
  margin-top: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cliff-fig {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cliff p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); flex: 1 1 340px; }
.cliff strong { color: var(--ink); }

/* --- table ---------------------------------------------------------------- */

.table-card { padding: 6px; }
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

td { padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.14s; }
tbody tr:hover { background: var(--panel-2); }

.r { text-align: right; }

.sym { font-weight: 700; letter-spacing: -0.01em; }
.sym-addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: 8px; }

.mult { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.dd { font-variant-numeric: tabular-nums; }
.dd-hot { color: var(--bad); font-weight: 700; }

.explorer-link {
  font-size: 12px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  transition: color 0.15s, border-color 0.15s;
}

.explorer-link:hover { color: var(--ink); border-color: var(--line-2); }

.empty { padding: 40px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* --- fee tier bars -------------------------------------------------------- */

.fee-bar-h, .fee-bar-c { width: 180px; }
.fee-bar-c { padding-right: 20px; }

.fee-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}

.fee-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-text);
}

.tier-note { font-size: 12.5px; margin: 14px 2px 0; max-width: 70ch; line-height: 1.55; }

@media (max-width: 760px) {
  .fee-bar-h, .fee-bar-c { display: none; }
}

/* --- method --------------------------------------------------------------- */

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
}

.m-card { padding: 26px 26px 28px; }
.m-card h2, .m-card h3 { font-size: 16.5px; margin-bottom: 11px; letter-spacing: -0.02em; }
.m-card p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-2); }
.m-card strong { color: var(--ink); font-weight: 700; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 1px 5px;
  border-radius: 5px;
}

.provenance { margin-top: 12px; padding: 26px 30px 28px; }
.provenance h2 { font-size: 16.5px; margin-bottom: 16px; letter-spacing: -0.02em; }

.provenance dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 26px;
  font-size: 13.5px;
}

.provenance dt { color: var(--ink-3); font-weight: 600; }
.provenance dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.provenance dd a { border-bottom: 1px solid var(--line-2); }
.provenance dd a:hover { color: var(--accent-text); border-color: var(--accent-line); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; }
  .stat:nth-child(3) { border-left: none; }
}

@media (max-width: 560px) {
  .hero { padding-top: 40px; }
  .sec { padding-top: 56px; }
  .stat-band { grid-template-columns: 1fr; padding: 24px 8px; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line); padding-top: 22px; }
  .chart-card { padding: 20px 14px 16px; }
  .cliff { padding: 22px; gap: 16px; }
  .provenance dl { grid-template-columns: 1fr; gap: 3px 0; }
  .provenance dt { margin-top: 10px; }
}

/* Scopes a column header to the window it actually measures. "Trades" alone
   read as a lifetime count next to an Age column showing days. */
.th-scope {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-3);
  opacity: 0.8;
}

/* Axis ticks mark band boundaries; the dots sit between them. */
.chart-tick { stroke: var(--line-2); stroke-width: 1; }

/* The card that documents a metric this page got wrong. Flagged because it is
   the most useful thing here, not the least. */
.m-card-flag {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

:root[data-theme='dark'] .m-card-flag { background: var(--accent-soft); }

/* --- halvings + remaining life -------------------------------------------- */

.halvings, .remaining-card { margin-top: 16px; padding: 26px 30px 28px; }
.halvings h2, .remaining-card h2 { font-size: 16.5px; margin-bottom: 18px; letter-spacing: -0.02em; }
.halvings > p, .remaining-card > .dim { font-size: 13px; line-height: 1.6; margin: 18px 0 0; max-width: 76ch; }
.remaining-card > .dim { margin: 0 0 20px; }

.halving-row, .remaining-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.halving-v {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.halving-k { font-size: 12px; color: var(--ink-3); margin-top: 6px; font-weight: 600; }

/* The stretch factor is the finding, so the connector carries it rather than
   being a decorative arrow. */
.halving-arrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  white-space: nowrap;
}

.remaining-row { gap: 12px; }

.remaining {
  flex: 1 1 118px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
}

.remaining-age { font-size: 11.5px; font-weight: 600; }
.remaining-v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin: 5px 0 3px;
}
.remaining-n { font-size: 11px; }

/* --- sub headings --------------------------------------------------------- */

.sec-head.sub { margin-top: 46px; }
.sec-head.sub h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 10px; }

/* --- cohort explorer ------------------------------------------------------ */

.cohort-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#c-search {
  flex: 1 1 300px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

#c-search::placeholder { color: var(--ink-3); }
#c-search:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }

.seg-b {
  border: none;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  height: 38px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg-b:hover { color: var(--ink); }
.seg-b.on { background: var(--accent); color: var(--accent-ink); }

.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }

th.sortable { padding: 0; }

/* The header cell's button carries the padding so the whole cell is the hit
   target, and inherits the header's type so it does not look like a control. */
.th-sort {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: color 0.15s;
}

.th-sort:hover { color: var(--ink); }
th.r .th-sort { text-align: right; }
th.sortable[data-dir='desc']::after { content: ' ↓'; color: var(--accent-text); }
th.sortable[data-dir='asc']::after { content: ' ↑'; color: var(--accent-text); }

.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }

.tag-dead, .tag-live {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag-dead { background: rgba(194, 51, 74, 0.12); color: var(--bad); }
.tag-live { background: var(--accent-soft); color: var(--accent-text); }

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 10px;
  font-size: 12.5px;
}

/* --- trend ---------------------------------------------------------------- */

.trend-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-0 { stroke: var(--accent-text); }
.trend-1 { stroke: var(--ink-3); stroke-dasharray: 6 4; }
.trend-2 { stroke: var(--bad); stroke-dasharray: 2 4; }
.trend-lab-0 { fill: var(--accent-text); }
.trend-lab-1 { fill: var(--ink-3); }
.trend-lab-2 { fill: var(--bad); }

.chart.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-size: 15px;
  color: var(--ink-3);
  font-weight: 600;
}

@media (max-width: 560px) {
  .halvings, .remaining-card { padding: 22px; }
  .halving-row { gap: 12px; }
  .cohort-controls { flex-direction: column; align-items: stretch; }
  .seg { justify-content: center; }

  /* flex-basis follows the MAIN axis, so the 300px basis that sizes the search
     box horizontally on desktop makes it 300px TALL once the row becomes a
     column — a full-width pill 300px high with the placeholder floating in the
     middle of it. The height declaration does not save it because flex-basis
     wins over height on the main axis. */
  #c-search { flex: none; width: 100%; }
}

/* The line under the stat band. Frames the median against the launch rate —
   the two numbers are only striking next to each other. */
.hero-kicker {
  margin: 20px 4px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
}

.hero-kicker strong { color: var(--accent-text); font-weight: 800; }

/* --- landing page cards --------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
}

.nav-card {
  display: block;
  padding: 26px 26px 28px;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s, border-color 0.18s;
}

.nav-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen);
}

.nav-card-stat {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent-text);
}

.nav-card-lab { font-size: 11.5px; font-weight: 600; margin-top: 7px; }

.nav-card h3 {
  font-size: 16.5px;
  letter-spacing: -0.02em;
  margin: 18px 0 8px;
}

.nav-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* An arrow that only appears on hover would be decoration; this one is always
   there so the card reads as a link without needing to be hovered. */
.nav-card h3::after {
  content: ' →';
  color: var(--accent-text);
  transition: margin-left 0.18s;
  display: inline-block;
}

.nav-card:hover h3::after { margin-left: 4px; }

/* --- per-page heading ----------------------------------------------------- */

/* Each page's h1 replaces the hero's, so it needs the h2 scale rather than the
   82px hero scale — it is a section title that happens to be the page title. */
.page-h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
}

.nav-links a.on { color: var(--ink); font-weight: 700; }

/* --- prev / next ---------------------------------------------------------- */

.pagenav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 84px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pagenav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}

.pagenav a:hover { color: var(--accent-text); }
.pagenav a span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pagenav-r { text-align: right; }

@media (max-width: 560px) {
  .pagenav { margin-top: 56px; }
  .nav-card { padding: 22px; }
}

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

/* The hamburger only exists below the width where .nav-links is hidden. Above
   it the links are already visible and a menu button would be a second, worse
   way to reach the same places. */
.nav-toggle { display: none; }

/* The X link sits in the top-right cluster, immediately left of the theme
   toggle. It carries .btn .btn-icon so it matches the buttons beside it, but it
   is an <a>, so the link underline and the inherited link colour have to go —
   otherwise it renders as a blue underlined glyph next to two neutral icons. */
.nav-x { text-decoration: none; color: var(--ink); }
.nav-x:hover { color: var(--accent); }
.nav-x svg { display: block; }

/* The nav must be able to SHRINK — at every width, not just on phones.
 *
 * The header has a hard natural minimum: .brand holds one unbreakable word, the
 * freshness pill is `white-space: nowrap`, and every icon button is `flex:none`.
 * Nothing gives, so once the natural width exceeds the viewport the overflow is
 * simply clipped — and `body { overflow-x: hidden }` (base.css) means it cannot
 * be scrolled to either. Whatever sits rightmost just disappears.
 *
 * These rules used to live inside `@media (max-width: 720px)`, which was where
 * the first instance of the bug was found (the menu button, on a 390px phone).
 * That was the wrong scope: the same arithmetic breaks above 720px too, where
 * .nav-links adds ~388px and there is no hamburger to fall back to. Adding the
 * X link pushed the natural width to 887px and made #theme-toggle unreachable
 * at iPad-portrait widths (~813-865px). Scope the relief to the layout, not to
 * the breakpoint that happened to expose it.
 *
 * `.nav-right` is the one that was missing, and nothing else worked without it:
 * a flex item's default `min-width: auto` floors it at its min-content size, so
 * the cluster refused to shrink by even a pixel and 100% of the pressure landed
 * on .brand. The pill's `min-width: 0` and its text ellipsis were both
 * unreachable — dead code that looked like a safety valve. */
.nav .wrap { min-width: 0; }
.brand { min-width: 0; }
.nav-right { min-width: 0; }
#freshness { min-width: 0; overflow: hidden; }
#freshness-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Clip the wordmark into its own box rather than letting it paint over the
   pill. The `display: none` breakpoint below is a deliberate choice about when
   the word stops being worth its space; THIS is the guard that stops a
   mis-tuned breakpoint rendering two strings on top of each other. */
.brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 900px, not the chassis default of 720px. LastCommit's nav carries five labels
   ("The split / All tokens / Still shipping / No public code / Method") which
   measure 413px — wider than RealFloat's set. Between 720 and 900 the links fit
   only by crushing the brand, which truncated to "LastCo…". Raising the
   breakpoint hands those widths to the hamburger instead.
   MUST match the same media query in css/base.css, which hides .nav-links; the
   two disagreeing leaves a band with no navigation at all. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav .wrap { gap: 12px; }

  /* Re-shown as a dropdown. base.css hides .nav-links entirely at this width,
     which was correct when the whole site was one page of anchors and left a
     phone with no navigation at all once it became seven pages. */
  .nav-links {
    display: none;
    position: absolute;
    /* Below the 66px nav, not overlapping its bottom edge — the nav gains a
       background once the page scrolls, and a 4px overlap reads as a seam. */
    top: 72px;
    right: 16px;
    left: 16px;
    flex-direction: column;
    gap: 0;
    padding: 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--panel-solid);
    box-shadow: var(--shadow-lg);
    z-index: 70;
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 13px 14px;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-weight: 600;
  }

  .nav-links a + a { border-top: 1px solid var(--line); }
  .nav-links a.on { background: var(--accent-soft); color: var(--accent-text); }
}

/* Below this the wordmark is dropped entirely — the mark alone still links
   home, and losing the navigation is far worse than losing the word.
   
   Was 430px, which had been tuned to sit exactly on the collision edge with
   ~0px of headroom. Adding a third 40px button to .nav-right moved that edge
   50px right and the wordmark began printing through the freshness pill from
   431px up — "LaunchHalflifeanned 26 min ago" on an iPhone 16 Pro Max. Measured
   threshold with the current cluster is 480px. */
@media (max-width: 480px) {
  .brand span { display: none; }
}

/* And on the narrowest phones the pill keeps only its status dot. Its longest
   state, "snapshot from Aug 4, 11:11 PM", is 208px on its own — wider than the
   entire remaining budget. */
@media (max-width: 380px) {
  #freshness-text { display: none; }
  #freshness { padding: 0 9px; }
}


@media (prefers-reduced-motion: no-preference) {
  .nav-links.open { animation: navdrop 0.16s cubic-bezier(0.22, 0.61, 0.36, 1); }
}

@keyframes navdrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- hour-of-day bars ----------------------------------------------------- */

.hour-bar { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; transition: fill 0.15s; }
.hour-bar:hover { fill: var(--accent-line); }
.hour-peak { fill: var(--accent-text); stroke: var(--accent-text); }
.hour-low { fill: var(--panel-2); stroke: var(--line-2); }

.context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* The 404's copy sits above the same cards the landing page uses. */
.notfound .eyebrow { margin-bottom: 14px; }
.notfound .muted { max-width: 56ch; margin: 0 0 34px; font-size: 15.5px; line-height: 1.6; }
.notfound a { color: var(--accent-text); border-bottom: 1px solid var(--accent-line); }

/* Card headings carry the h3 scale regardless of their tag — the level is
   chosen for document structure, the size for the design. */
.card-h { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }

/* Available to screen readers, out of the visual flow. Used where a heading is
   needed for correct document structure but would be noise on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The interval under the hero figure. Deliberately quiet — it qualifies the
   headline rather than competing with it — but present, because a number that
   moves between visits and never admits it is the fastest way to lose a reader
   who came here for numbers that hold up. */
.hl-ci {
  margin: -8px 0 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}