/*
  site-2026.css: the restyle's family layer over styles.css and site.css (Restyle 2026-11, look only; the plan:
  docs/rebrand/v2/restyle-2026-11, PLAN 1.5, 1.6 and 2.6, CRITIQUE.md, DECISIONS.md, which wins).

  Loaded after brand-2026.css on the pages of the v2 page shell (src/rebrand/v2/page.ts): About, /apply, /privacy and
  the 404 in its three ways, before the page's own sheet and site-chrome.css (src/rebrand/v2/restyle-2026.ts
  restyleSheetsFor). Unit D fills it and checks it on /privacy and the 404; About and /apply load it under their own
  sheets (units D1 and D2), so it restyles the old class names those two sheets share, never a page's own.
  - Those pages are dark throughout, so it recolors the old variables on .b26 itself (PLAN 1.5): every old ground turns
    bone (--ink, --ink-2), every card white (--panel), the old light words midnight (--paper), the grey rules and words
    the brief's (--line, --muted), the red the orange of words on light (--red) and of buttons (--red-btn), the lemon
    orange (--lemon: ticks, bars) and the pink links midnight (--pink).
  - Bands (DECISIONS 2): none here. about-2026.css and apply-2026.css write their own exact band selectors (/apply's
    section#jose.apx-jose stays on bone). Words and titles here read the old variables where the old sheets did
    (--paper, --muted, --red), so a band that sets the band values of PLAN 1.5 turns them white with no new rule.
  - The section opener (PLAN principle 6): an orange bar 48 by 6 px, 16 px, the label, 8 px, the title (.eyebrow draws
    the bar as its first flex item); in a page's head (.page-head) the label comes first, then the bar (20 px), then the
    title (16 px). A hero elsewhere turns the same bar after its label with `order: 1`.
  - Type: Funnel Display 700 for titles, rows and questions, 600 for quotes; Albert Sans for the rest, never under 400,
    never italic, never in capitals (the old letter-spacing goes with them).
  - Links in running text: midnight with a 2 px blue underline, blue on hover (the home's).
  - About's and /apply's own parts are their own sheets' (units D1 and D2; the stand-ins this sheet held for them until
    then went in phase 4). One rule stays in the last block: a white logo file on bone is drawn black (DECISIONS 3:
    brightness(0) through img[src*="/v2/assets/img/logos/"]; a band that keeps a logo white sets filter:none).
  - The guides' 404 has no b26 on its <body> (its wrapper <div> carries it): the wrapper fills the screen at least, so
    no dark ground shows under a short page, and the body itself, which styles.css paints #080a09 there (and with it
    the page's canvas), turns bone through the one rule that names it, body:has(> .b26): only the guides' 404 has a
    .b26 child of <body>. The brief's tokens live on .b26, so that rule writes bone's hex. The CSS guard allows exactly
    that selector, alone and in this sheet only (the phase 2 integration, at unit D's request).
  - Every other selector starts with .b26 (PLAN 1.3), and every rule sits under #main, so none reaches the site chrome.
    The in-page book button, the tokens and the base are brand-2026.css's.
  It declares no font and loads no file, and it uses no shadow, no gradient, no capitals and no important flag.
*/

/* The old variables on the bone page (PLAN 1.5: site-2026.css swaps at page level) */
.b26 {
  --ink: var(--bone);
  --ink-2: var(--bone);
  --panel: var(--white);
  --panel-2: var(--white);
  --line: var(--border);
  --muted: var(--text-muted);
  --muted-2: var(--text-muted);
  --paper: var(--midnight);
  --red: var(--orange-text);
  --red-btn: var(--orange);
  --red-hover: var(--b26-orange-hover);
  --lemon: var(--orange);
  --pink: var(--midnight);
}

/* The guides' 404: its wrapper is the page (the body keeps the guides' layout) */
.b26:not(body) {
  min-height: 100vh;
}

/* The body that holds that wrapper: bone too, so no dark ground shows around the page (bone's hex: the brief's
   tokens are .b26's) */
body:has(> .b26) {
  background: #FBFAF6;
}

/* ---------- surfaces ---------- */

.b26 #main .section {
  border-top: 0;
}

.b26 #main .section-alt {
  background: var(--bone);
}

/* The page's head follows the home's hero: bone, then the first section close under it */
.b26 #main .page-head .wrap {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.b26 #main .page-head + .section .wrap {
  padding-top: clamp(24px, 3vw, 40px);
}

/* ---------- the section opener: bar, label, title ---------- */

.b26 #main .eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

.b26 #main .eyebrow::before {
  content: "";
  flex: none;
  width: var(--b26-bar-w);
  height: var(--b26-bar-h);
  background: var(--orange);
}

/* In the page's head: the label, then the bar, then the title */
.b26 #main .page-head .eyebrow {
  gap: 20px;
  font-size: 18px;
}

.b26 #main .page-head .eyebrow::before {
  order: 1;
}

/* ---------- titles ---------- */

.b26 #main .display {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}

.b26 #main .h2 {
  margin-top: 8px;
  font-size: var(--b26-h2);
  line-height: 1.06;
}

.b26 #main .h-article {
  letter-spacing: -0.025em;
}

/* The page title of /privacy and the 404 (display h2): the home's H1 */
.b26 #main .page-head h1 {
  margin-top: 16px;
  font-size: var(--b26-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The one orange phrase of a title: the orange of words on light (--red), never italic */
.b26 #main .red {
  color: var(--red);
}

/* Fraunces 300 becomes Albert Sans 400 */
.b26 #main .serif {
  font-weight: 400;
  letter-spacing: normal;
}

/* ---------- words ---------- */

.b26 #main .dek {
  margin-top: 24px;
  max-width: 640px;
  font-size: var(--b26-lead);
  line-height: 1.55;
}

.b26 #main .page-meta {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.b26 #main .hero-intro {
  margin-top: 24px;
  max-width: 640px;
  font-size: var(--b26-lead);
  line-height: 1.55;
}

.b26 #main .sub {
  margin-top: 16px;
  max-width: 680px;
  font-size: 19px;
  line-height: 1.55;
  color: inherit;
}

.b26 #main .lede {
  font-size: var(--b26-lead);
  line-height: 1.55;
}

.b26 #main .label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

/* Emphasis inside a line of words keeps the line's color (DECISIONS 6), never italic */
.b26 #main :is(.dek, .lede, .coach-line, .prose) em {
  font-family: inherit;
  font-style: normal;
  color: inherit;
}

/* ---------- links ---------- */

.b26 #main :is(.hero-intro, .prose, .faq-a, .text-links) a {
  color: var(--paper);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.b26 #main a:hover {
  color: var(--blue);
}

/* ---------- buttons ---------- */

.b26 #main .btn {
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.b26 #main .btn-red {
  background: var(--orange);
  color: var(--midnight);
}

.b26 #main .btn-red:hover {
  background: var(--b26-orange-hover);
  color: var(--midnight);
}

.b26 #main .hero-cta {
  margin-top: 36px;
  gap: 12px 28px;
}

/* ---------- numbered rows: the 404's places, About's work (the home's numbered rows) ---------- */

.b26 #main .rows {
  margin-top: 40px;
  border-bottom: 1px solid var(--divider);
}

.b26 #main .row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px 28px;
  padding: 28px 0;
  border-top: 1px solid var(--divider);
  color: var(--paper);
}

.b26 #main .row:hover {
  color: var(--paper);
}

.b26 #main .row-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  color: var(--paper);
}

.b26 #main .row-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.b26 #main .row-text em {
  font-style: normal;
  font-weight: inherit;
  color: var(--red);
}

/* The topic label (the home's guide topics) */
.b26 #main .row-tag {
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--blue);
}

.b26 #main .arrow-box {
  width: 44px;
  height: 44px;
  border: 2px solid var(--b26-field-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--paper);
}

.b26 #main .row:is(:hover, :focus-visible) .arrow-box {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

/* ---------- questions (site.css .faq) ---------- */

.b26 #main .faq {
  margin-top: 40px;
  border-bottom: 1px solid var(--divider);
}

.b26 #main .faq details {
  border-top: 1px solid var(--divider);
}

.b26 #main .faq summary {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.b26 #main .faq summary:hover {
  color: var(--blue);
}

.b26 #main .faq-a {
  font-size: 17px;
  line-height: 1.55;
  color: inherit;
}

.b26 #main .faq-a strong {
  font-weight: 600;
  color: var(--paper);
}

/* ---------- ticks: orange squares (the recolored --lemon) ---------- */

.b26 #main .ticks li::before {
  background: var(--lemon);
}

/* ---------- quotes: on bone, in Funnel Display 600 ---------- */

.b26 #main .quote {
  border-top-color: var(--border);
}

.b26 #main .quote blockquote {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 600;
  font-size: var(--b26-quote);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.b26 #main .quote blockquote em {
  font-style: normal;
  font-weight: inherit;
  color: var(--red);
}

.b26 #main .quote figcaption b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper);
}

.b26 #main .quote figcaption span {
  font-size: 15px;
  color: var(--muted);
}

/* ---------- long-form words (site.css .prose) ---------- */

.b26 #main .prose {
  font-size: 18px;
  line-height: 1.6;
  color: inherit;
}

.b26 #main .prose h2 {
  margin-top: 1.9em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}

.b26 #main .prose > :first-child {
  margin-top: 0;
}

.b26 #main .prose h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.b26 #main .prose :is(h4, h5, h6) {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.b26 #main .prose :is(strong, b) {
  font-weight: 600;
  color: var(--paper);
}

.b26 #main .prose ul {
  list-style-type: square;
}

.b26 #main .prose ul > li::marker {
  color: var(--orange);
}

.b26 #main .prose ol > li::marker {
  font-weight: 600;
  color: var(--muted);
}

.b26 #main .prose blockquote {
  border-top-color: var(--border);
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 600;
  font-size: var(--b26-quote);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.b26 #main .prose figcaption {
  color: var(--muted);
}

/* ---------- photo captions (site.css .figure) ---------- */

.b26 #main .figure figcaption {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

/* ---------- logos ---------- */

/* A white logo file on bone shows black (DECISIONS 3): the safety net, since every logo on bone is a midnight file
   (unit L) and About's and /apply's logos sit in their midnight bands, which keep them white */
.b26 #main img[src*="/v2/assets/img/logos/"] {
  filter: brightness(0);
}

/* ---------- phones ---------- */

@media (max-width: 760px) {
  .b26 #main .row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px 14px;
  }
}