/* bch2.org homepage composition, v1 (/assets/editorial/home.v1.css)
   Loaded after bch2.v1.css on index.html only. Uses design-system tokens; no new colours. */

/* Notice bar on phones ------------------------------------------------------------------- */
/* Where the one-line notice would come within a few pixels of the edge, its link starts its own
   line, so the bar is two lines in the web font and its fallback alike and keeps its height when
   the fonts or the translation arrive: every language at 352px and below, Turkish to 380px,
   Spanish and Portuguese to 416px, French to 440px, Russian to 480px. Each language's one-line
   text fits from 11-18px narrower in the fallback fonts (web fonts fit earlier), which leaves room
   for colour emoji wider than a test machine's. The link keeps its own width (focus ring, target). */
@media (max-width: 22rem) {
  .notice__text a { display: block; width: fit-content; }
}
@media (max-width: 23.75rem) {
  html:is(:lang(tr), [data-lang-hint="tr"]:lang(en)) .notice__text a { display: block; width: fit-content; }
}
@media (max-width: 26rem) {
  html:is(:lang(es), :lang(pt), [data-lang-hint="es"]:lang(en), [data-lang-hint="pt"]:lang(en)) .notice__text a { display: block; width: fit-content; }
}
@media (max-width: 27.5rem) {
  html:is(:lang(fr), [data-lang-hint="fr"]:lang(en)) .notice__text a { display: block; width: fit-content; }
}
@media (max-width: 30rem) {
  html:is(:lang(ru), [data-lang-hint="ru"]:lang(en)) .notice__text a { display: block; width: fit-content; }
}

/* Hero: full-width headline -------------------------------------------------------------- */
/* Eyebrow + neutral marks on one row, the headline across the whole content width, a hairline,
   then the lede beside the buttons and links, lined up with the stat strip's columns below.
   Headline size: /assets/editorial/hero-fit.v1.js measures the title in the fonts in use and sets
   an inline font-size that fills the content width (one line from 768px, "Bitcoin Cash" over the
   accent below), between --hero-fit-min and --hero-fit-max rem. The clamp() sizes are the
   fallback when the script doesn't run: they fit the English title (without JavaScript i18n.js
   doesn't run either) in the web fonts or their metric-matched fallbacks (bch2.v1.css section 1),
   and a longer title wraps rather than overflowing. The vw line is for browsers without
   container query units. */
.hero {
  container-type: inline-size;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1.2rem + 2.5vw, 3rem);
}
.hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-l);
}
.hero__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__seal { display: block; width: 1.375rem; height: 1.375rem; flex: none; }
/* The marks wrap onto a second row rather than overflow when the browser's text size is larger
   (every token, the gap and the coin grow with rem); at the default size they stay on one row. */

.hero__title {
  --hero-fit-min: 2.875;
  --hero-fit-max: 6;
  margin-top: var(--space-s);
  font-size: clamp(2.875rem, 16.5vw, 6rem);
  font-size: clamp(2.875rem, 18.4cqi, 6rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.hero__title span { padding-bottom: 0.04em; }
/* CJK accents are upright full-width glyphs, taller and denser than a Latin italic. At 0.8 of the
   title size, 再誕, 重生 and 리번 carry about the weight of "Reborn" instead of a solid green block. */
html:is(:lang(ja), :lang(zh), :lang(ko)) .hero__title span { font-size: 0.8em; }

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: var(--rule);
}
.hero__lede {
  max-width: 36rem;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  min-width: 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.hero__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem var(--space-m);
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}
.hero__links .link { display: inline-block; padding-block: 0.25rem; white-space: nowrap; }

/* Phones and small tablets: the marks leave the eyebrow's row and sit on the hairline under the
   headline, so the eyebrow isn't stacked on a second mono line. The marks are aria-hidden, so the
   visual move doesn't change what is read. */
@media (max-width: 47.99rem) {
  .hero { display: flex; flex-direction: column; }
  .hero__head { display: contents; }
  .hero__title { order: 1; }
  .hero__marks {
    order: 2;
    justify-content: space-between;
    margin-top: var(--space-m);
    padding-top: var(--space-s);
    border-top: var(--rule);
  }
  .hero__body { order: 3; margin-top: 0; border-top: 0; }
}
/* Large phones and small tablets: spread across the width the three tokens would read as table
   columns, so they sit together and only the coin goes to the right edge. */
@media (min-width: 30.01rem) and (max-width: 47.99rem) {
  .hero__marks { justify-content: flex-start; column-gap: var(--space-l); }
  .hero__seal { margin-left: auto; }
}

/* Phones: links become a tidy two-column list instead of a ragged wrap. */
@media (max-width: 30rem) {
  .hero__lede { font-size: 1.0625rem; }
  .hero__actions { width: 100%; }
  /* The buttons grow to fill the row, so their inline padding only decides where the two labels
     stop fitting side by side. 1.25rem keeps that point away from common phone widths in both the
     web fonts and their fallbacks: otherwise the row would split or join when the web font loads
     (a 60px jump). Languages whose point still falls near one stack just past it (below). */
  .hero__actions .btn { flex: 1 1 auto; padding-inline: 1.25rem; }
  /* Column 2 starts where the stat strip's second column text does (the cells' 1.25rem padding),
     not after a gap. A label that needs two lines balances them, so no arrow is left alone. */
  .hero__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .hero__links li:nth-child(even) { padding-left: 1.25rem; }
  .hero__links .link { white-space: normal; text-wrap: balance; }
}

/* Each language's buttons stack until just past the width where its two labels stop fitting side
   by side, so the row neither splits nor joins when the web font loads: French at every phone
   width (its labels never fit), Portuguese to 420px, Spanish to 408px, German and Turkish to 392px
   (German's label is 12px wider in the web font), Russian to 384px (Golos Text needs 5px more than
   its fallback), and every language at 344px and below, where English stacks in both fonts
   (Chinese and Korean would still fit, but a row that differs from the English first paint moves
   when the translation arrives). Every language rule on this page also matches that language's
   English first paint, html[data-lang-hint]:lang(en) (lang-hint.v1.js), so the translated rows are
   already in place. Measured with web fonts loaded and blocked; re-measure when a label changes. */
@media (max-width: 30rem) {
  html:is(:lang(fr), [data-lang-hint="fr"]:lang(en)) .hero__actions .btn { flex-basis: 100%; }
}
@media (max-width: 26.25rem) {
  html:is(:lang(pt), [data-lang-hint="pt"]:lang(en)) .hero__actions .btn { flex-basis: 100%; }
}
@media (max-width: 25.5rem) {
  html:is(:lang(es), [data-lang-hint="es"]:lang(en)) .hero__actions .btn { flex-basis: 100%; }
}
@media (max-width: 24.5rem) {
  html:is(:lang(de), :lang(tr), [data-lang-hint="de"]:lang(en), [data-lang-hint="tr"]:lang(en)) .hero__actions .btn { flex-basis: 100%; }
}
@media (max-width: 24rem) {
  html:is(:lang(ru), [data-lang-hint="ru"]:lang(en)) .hero__actions .btn { flex-basis: 100%; }
}
/* 344px and below: the Japanese katakana labels (ホワイトペーパー, エクスプローラー) are wider than the
   columns at 15px and would break inside the word. */
@media (max-width: 21.5rem) {
  .hero__actions .btn { flex-basis: 100%; }
  html:is(:lang(ja), [data-lang-hint="ja"]:lang(en)) .hero__links { font-size: 0.875rem; }
}
/* French buttons also wrap onto two rows up to about 500px and, where they share the grid's right
   half, up to 1044px, a few pixels later in the web font than in its fallback. A column looks the
   same as the wrapped row and doesn't depend on the font. */
@media (min-width: 30.01rem) and (max-width: 31.75rem), (min-width: 56.25rem) and (max-width: 66.5rem) {
  html:is(:lang(fr), [data-lang-hint="fr"]:lang(en)) .hero__actions { flex-direction: column; align-items: flex-start; }
}

/* Tablets and up: the headline runs on one line across the content width. */
@media (min-width: 48rem) {
  .hero__title {
    --hero-fit-min: 4;
    --hero-fit-max: 11;
    font-size: clamp(4rem, 11.2vw, 10.25rem);
    font-size: clamp(4rem, 12.2cqi, 11rem);
  }
  .hero__title.has-accent--break span { display: inline; }
  /* One line has no line below to clear: CJK keeps the Latin leading, so the hero is the same
     height in every language (1.12 would add about 30px of empty line box at 1440). */
  html:is(:lang(ja), :lang(zh), :lang(ko)) .hero__title { line-height: 1.02; }
  /* At 0.8em the upright accent keeps the Latin baseline, so its ideographic box drops about
     0.07em below the cap line. Lift it to the cap line like the italic accents. A relative
     offset: the line box, the fitted size and everything below stay where they are. */
  html:is(:lang(ja), :lang(zh), :lang(ko)) .hero__title span { position: relative; top: -0.085em; }
  .hero__body { margin-top: 1.25rem; padding-top: var(--space-l); gap: var(--space-l); }
}

/* Desktop: lede over the strip's first two cells, buttons and links over the last two. */
@media (min-width: 56.25rem) {
  .hero__body { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .hero__lede { grid-column: 1 / span 2; padding-right: var(--space-l); }
  .hero__cta { grid-column: 3 / span 2; padding-left: 1.25rem; }
}
@media (min-width: 80rem) {
  .hero__cta { padding-left: 1.5rem; }
}
/* Ledes and the font swap: where a lede's last line is within a few pixels of wrapping, the swap
   from the fallback font to the web font changes its line count and moves everything below it by a
   line. A small inset on the right (invisible on a ragged edge) moves those widths at least 3px
   away from common screen widths (320 344 360 375 384 390 393 402 412 414 428 430 440, and 1024
   1080 1112 1133 1152 1180 1194 1200). Solved from each lede's line count at every content width in
   both fonts; re-measure when a heroDesc translation changes. Russian can't be cleared at 375 and
   384px (its windows there are too close together); from 1280px no lede re-wraps. */
@media (max-width: 30rem) {
  html:is(:lang(de), :lang(fr)) .hero__lede { padding-right: 0.375rem; }
  html:lang(pt) .hero__lede { padding-right: 0.4375rem; }
}
/* Spanish needs its inset between 328 and 420px only: no single inset clears 360 and 412-414. */
@media (min-width: 20.5rem) and (max-width: 26.25rem) {
  html:lang(es) .hero__lede { padding-right: 0.6875rem; }
}
@media (min-width: 56.25rem) and (max-width: 79.99rem) {
  html:lang(fr) .hero__lede { padding-right: calc(var(--space-l) + 0.375rem); }
  html:lang(pt) .hero__lede { padding-right: calc(var(--space-l) + 0.25rem); }
  html:lang(ja) .hero__lede { padding-right: calc(var(--space-l) - 0.25rem); }
}
/* Where five links would leave one alone on a second line (large phones, small tablets, small
   desktops, and Japanese katakana labels on wide screens), set them as a deliberate 3 + 2 grid. */
@media (min-width: 30.01rem) and (max-width: 47.99rem), (min-width: 56.25rem) and (max-width: 79.99rem) {
  .hero__links { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-l); }
}
@media (min-width: 80rem) {
  html:is(:lang(ja), [data-lang-hint="ja"]:lang(en)) .hero__links { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-l); }
}
/* Spanish and Portuguese labels still leave one link alone up to 1317px, French up to 1358px and
   Russian up to 1367px (web fonts; the fallbacks wrap a little earlier). */
@media (min-width: 80rem) and (max-width: 82.3125rem) {
  html:is(:lang(es), :lang(pt), [data-lang-hint="es"]:lang(en), [data-lang-hint="pt"]:lang(en)) .hero__links { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-l); }
}
@media (min-width: 80rem) and (max-width: 84.875rem) {
  html:is(:lang(fr), [data-lang-hint="fr"]:lang(en)) .hero__links { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-l); }
}
@media (min-width: 80rem) and (max-width: 85.4375rem) {
  html:is(:lang(ru), [data-lang-hint="ru"]:lang(en)) .hero__links { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--space-l); }
}
/* Japanese katakana labels are wide: on small desktops the 3 + 2 grid needs the narrower gap to
   stay inside the column. */
@media (min-width: 56.25rem) and (max-width: 79.99rem) {
  html:is(:lang(ja), [data-lang-hint="ja"]:lang(en)) .hero__links { column-gap: var(--space-m); }
}
/* Russian lede: at 36rem its last line holds one or two words, and it is five lines in the
   fallback font but four in Golos Text, so the strip jumped when the font loaded. 38rem is four
   lines in both. Below 1280px the column is narrower than either width. */
@media (min-width: 80rem) {
  html:lang(ru) .hero__lede { max-width: 38rem; }
}

/* Forced colours paint a backplate behind text, and the italic accent's glyph box reaches about
   0.14em below the one-line headline, over the hairline 1.25rem below. Give the rule clearance. */
@media (forced-colors: active) and (min-width: 48rem) {
  .hero__title { padding-bottom: 0.2em; }
}

@media print {
  .hero__title { font-size: 3.5rem !important; }
}

/* Stat strip: seven cells ---------------------------------------------------------------- */
/* Four live figures from the network (block height, hashrate, circulating supply, difficulty,
   main.v2.js) and three constants (21M, 50, 0%). Seven cells tile without leaving one alone only
   as 4 + 3, so the strip keeps the system's four columns from 900px up and falls to two below
   that, where a quarter of the content width is under 180px: too narrow for the supply figure and
   its label. In the two-column layout the seventh cell takes the whole last row instead of
   sitting beside an empty one.
   Cell 5 opens the second row: no left border and no left inset, like cell 1, and every cell from
   5 on draws the hairline above it.
   "4,066,205 BCH2" is three times the width of "21M", so the figures are sized from the viewport
   (a cell is about 0.23 of it) rather than at the four-cell default, and they wrap at their space
   instead of overflowing the cell: at 320px the supply cell reads over two lines. */
.home-stats .stat { flex-direction: column; align-items: flex-start; }
.home-stats .stat__value {
  font-size: clamp(1.25rem, 0.4rem + 1.65vw, 2.125rem);
  white-space: normal;
}
@media (min-width: 56.25rem) {
  .home-stats .stat:nth-child(5) { border-left: 0; padding-left: 0; }
  .home-stats .stat:nth-child(n + 5) { border-top: var(--rule); }
}
@media (max-width: 56.24rem) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .home-stats .stat:nth-child(even) { padding-right: 0; }
  .home-stats .stat:nth-child(n + 3) { border-top: var(--rule); }
  .home-stats .stat:last-child { grid-column: 1 / -1; }
}

/* Trade: market panel + exchange info ---------------------------------------------------- */
.trade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-l) clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
.trade__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: var(--rule-strong);
}
.trade__title { font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--tracking-title); }
.trade__text { color: var(--muted); }
.trade__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-2xs); }
.trade__actions .btn { justify-content: space-between; text-align: left; }
/* Exchange buttons: the exchange's icon, then its label, then the external arrow on the right.
   The label takes the free space, so icon and label stay together on the left. */
.trade__actions .btn > span { flex: 1 1 auto; min-width: 0; }

/* Three exchange buttons stay one equal-width column at every width, as in the desktop info
   column. Side by side they either leave one alone on a second row (auto-fit: 2 + 1 from 600 to
   700px and from 900 to 1151px) or, at 768-860px, wrap their labels onto two lines (every
   Turkish label, and "Trade on Biconomy" in English): a Turkish label needs a 17rem button and
   three of those never fit the one-column trade panel. */
@media (max-width: 71.99rem) {
  .trade { grid-template-columns: minmax(0, 1fr); }
}

/* Fork: paragraphs above the specification table, in the split body column --------------- */
.fork__body { display: grid; gap: var(--space-xl); min-width: 0; }
.fork__text p + p { margin-top: 1em; }
.fork__text p { color: var(--muted); max-width: 38rem; }
.fork__text strong { color: var(--ink); font-weight: 600; }

/* ── CoinMarketCap listing card (2026-09-21) ────────────────────────────────
   The Trade section's intro column ran out of content about 230px above the
   bottom of the market panel beside it, leaving an obvious hole in the grid.
   BCH2 being tracked on CMC is worth more than the one-line link that sat
   there, so the mark gets real presence and fills the column.

   The whole card is the link. The mark is decorative (alt="") because the
   title and CTA already name the destination. */
.cmc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  margin-top: var(--space-m);
  padding: 1.25rem 1.375rem 1.125rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}

.cmc:hover { border-color: var(--ink); background: var(--wash); }
.cmc:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.cmc__mark {
  grid-row: 1 / span 2;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.cmc__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green);
}

.cmc__title {
  margin-top: 0.125rem;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
}

.cmc__text {
  grid-column: 2;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.cmc__cta {
  grid-column: 2;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink);
}
.cmc:hover .cmc__cta { color: var(--green); }

/* Below the two-column breakpoint the intro sits above the market panel and
   there is no hole to fill, so the card relaxes to the text column. */
@media (max-width: 900px) {
  .cmc { margin-top: var(--space-s); }
}

@media (prefers-reduced-motion: reduce) {
  .cmc { transition: none; }
}