/**
 * BRITE-139 - Instructions page (resources/views/web-front-view/instructions.blade.php).
 *
 * Scoped entirely under .bri (on the page's <main>) so none of it can reach another
 * screen, the same containment home.css uses for the homepage under .brh.
 *
 * Palette and type are the BRITE-74 / BRITE-130 homepage's, reused rather than reinvented:
 *   #1A4137 deep green (headings)   #44534D body text   #FBFBF9 page ground
 *   #DDE4E1 rules      #EAF0ED tint  Barlow / Barlow Condensed / Barlow Semi Condensed
 *
 * This page is ~2,100 words of the client's own prose, so the job here is readability:
 * a measure that does not run the full width of a 1440 viewport, a clear heading
 * hierarchy, and anchors that land correctly at every width.
 *
 * NOTE: this page also loads page-reset.css and carries class="br-page". That is what
 * makes `a { display: inline-block }` from style.min.css stop turning every in-sentence
 * link into an unbreakable box. Do not remove either.
 */

.bri {
    background: #FBFBF9;
    color: #44534D;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    padding: 72px 0 96px;
}

/* The measure. 34rem keeps body copy near 70 characters at this size rather than
   letting it run the full 1440. The gutter is on the wrapper so nothing can ever sit
   against the viewport edge at 320. */
.bri-wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────────── */

/* .br-page neutralises style.min.css's `header { background:white; box-shadow }`,
   which would otherwise paint a white slab behind this block. */
.bri-hero {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #DDE4E1;
}

.bri-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #1A4137;
    margin: 0 0 24px;
}

.bri-lede {
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 16px;
}

.bri-lede:last-child { margin-bottom: 0; }

/* ── Contents ─────────────────────────────────────────────────────────────────── */

.bri-toc {
    background: #EAF0ED;
    border: 1px solid #DDE4E1;
    padding: 24px 28px;
    margin-bottom: 56px;
}

.bri-toc-heading {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A4137;
    margin: 0 0 14px;
}

/* Unmarked on purpose. Sections 1-9 carry their own numbers in Drew's own headings,
   and the last three are deliberately unnumbered - an <ol> would both double the
   numbering and invent numbers 10-12 for sections he did not number. */
.bri-toc-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.bri-toc-list li {
    margin-bottom: 7px;
    line-height: 1.5;
}

.bri-toc-list li:last-child { margin-bottom: 0; }

.bri-toc-list a,
.bri-back a {
    color: #1A4137;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: #AEC2BA;
}

.bri-toc-list a:hover,
.bri-toc-list a:focus-visible,
.bri-back a:hover,
.bri-back a:focus-visible {
    color: #2C5248;
    text-decoration-color: #1A4137;
}

/* ── Sections ─────────────────────────────────────────────────────────────────── */

.bri-section {
    margin-bottom: 52px;
    /* The site header is sticky, so an anchor target must clear it or the heading
       lands underneath. Checked at 1440, 390 and 320. */
    scroll-margin-top: 96px;
}

.bri-section:last-of-type { margin-bottom: 40px; }

.bri-h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 32px);
    line-height: 1.2;
    color: #1A4137;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #DDE4E1;
}

/* Deliberately subordinate to .bri-h2: sentence-cased, smaller, no rule, and set in
   the body face rather than the condensed display face. */
.bri-h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    color: #1C2421;
    margin: 30px 0 12px;
}

.bri-p {
    margin: 0 0 15px;
}

.bri-list {
    margin: 0 0 18px;
    padding-left: 1.4em;
}

.bri-list li {
    margin-bottom: 7px;
}

.bri-list li:last-child { margin-bottom: 0; }

/* "Current income ÷ 5 × 3 = estimated three-day income" - a worked calculation,
   set apart so it does not read as another sentence of prose. */
.bri-formula {
    background: #EAF0ED;
    border-left: 3px solid #1A4137;
    padding: 14px 18px;
    margin: 0 0 18px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A4137;
}

.bri-quote {
    margin: 0 0 18px;
    padding: 0 0 0 18px;
    border-left: 3px solid #AEC2BA;
    font-size: 19px;
    font-style: italic;
    color: #1C2421;
}

.bri-quote p { margin: 0; }

/* Footnote to the asterisk on "Cash withdrawals *". */
.bri-footnote {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid #DDE4E1;
    font-size: 15px;
    color: #8A958F;
}

.bri-back {
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid #DDE4E1;
    font-size: 15px;
}

/* ── Narrow widths ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .bri {
        padding: 48px 0 64px;
        font-size: 16px;
    }

    .bri-wrap { padding: 0 16px; }

    .bri-toc {
        padding: 20px 18px;
        margin-bottom: 40px;
    }

    .bri-section {
        margin-bottom: 40px;
        scroll-margin-top: 80px;
    }

    .bri-lede { font-size: 17px; }
}

@media (max-width: 360px) {
    /* At 320 the default list indent plus the gutter starts to squeeze the measure. */
    .bri-list { padding-left: 1.2em; }
}