/* BeargrassAI DIY resources (BEA-432, board-pages-3.md, BGA 69): the learning shelf's reading pages. Reading pages stay
   in day (FOUNDATION 2): ink on paper, the land drifting behind, one scene sized to the lesson, the AI box as the one
   piece of night, then the night footer. The same file opens every resource page and the hub; each page's own scene
   follows it. Motion only under html.m; html.js means scripts on. Parts: the page; the first screen; the scene frame;
   the reading; cards; the box; the AI box; phones; laptop. */

/* ==== The page ======================================================================================================= */
.site.day { overflow: visible; background: transparent; }
html:not(.js) .site.day { position: absolute; }
.rday { overflow: visible; overflow: clip; }   /* the kit's .day hides overflow, which would stop the scene sticking */
.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }   /* ?draft: what was written for 2.0.0 */
[data-time="day"] .x::before { background-image: var(--x-ink); }
[data-time="day"] .coords { color: var(--ink-2); }
[data-time="day"] .more { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.45); }
[data-time="day"] .more:hover { text-decoration-color: var(--ink); }
.more svg { flex: 0 0 auto; }
.n { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; }

/* ==== The first screen: the question, the answer up top, the way down ================================================= */
.r-lead { margin-top: 20px; max-width: 36ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.r-lead b { font-weight: 600; }
.r-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }

/* ==== The scene frame: a caption that changes one step at a time, beside a drawing that follows the scroll ========== */
.rs { position: relative; z-index: 1; }
.rs-head { padding-top: 26px; }
.rs-head h2 { max-width: 18ch; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.08; color: var(--ink); }
.rs-in { display: grid; gap: 22px; padding-top: 22px; padding-bottom: 30px; }
.rs-cap { display: grid; gap: 10px; align-content: start; }
.rs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rs-steps li { display: grid; gap: 4px; }
.rs-no { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.rs-k { font: 400 clamp(23px, 6.2vw, 31px)/1.16 var(--display); color: var(--ink); text-wrap: balance; max-width: 22ch; }
.rs-t { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 42ch; }
.rs-ticks { display: none; gap: 6px; margin: 2px 0 0; }
.rs-ticks i { width: 22px; height: 3px; background: rgba(35, 31, 26, 0.2); }
.rs-ticks i.on { background: var(--gold); }
.rs-vis { position: relative; min-width: 0; }
.rs-sample { font: 400 12px/1.45 var(--mono); color: var(--ink-2); }
.rs-sample::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--x-ink) center / 9px no-repeat; }

/* the drawing's parts: square cards on cardstock, hairlines, mono for what can be checked */
.pc { position: relative; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.5); color: var(--ink); }
.pc-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.pc-q { font: 400 19px/1.25 var(--display); color: var(--ink); }
.pc-mono { font: 400 12.5px/1.45 var(--mono); color: var(--ink); }
.ink-card { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--gold-bright); }
.ink-card .pc-k { color: rgba(250, 245, 234, 0.72); }
.ink-card .pc-q { color: var(--paper-hi); }
.bad { color: var(--barn); }
.tag { display: inline-block; padding: 3px 7px 4px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.04em; border: 1px solid currentColor; white-space: nowrap; }
.tag.bad { background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.12) 0 4px, transparent 4px 8px); }
.tag.ok { color: var(--ink); background: rgba(244, 196, 90, 0.28); border-color: var(--gold); }

/* motion: the stage pins and the scroll is the clock, one step at a time, back again on the way up */
.m .rs-track { height: calc(var(--n, 4) * 80svh + 100svh); }
.m .rs-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.m .rs-in { height: 100%; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: 16px; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.m .rs-steps { gap: 0; }
.m .rs-steps li { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.m .rs-steps li.on { opacity: 1; transform: none; }
.m .rs-ticks { display: flex; }
.m [data-in], .m [data-out] { transition: opacity 0.45s ease, transform 0.45s ease; }
.m [data-in]:not(.in) { opacity: 0; transform: translateY(10px); }
.m [data-out].gone { opacity: 0; transform: translateY(-6px); }
.m .rs-vis { align-self: start; }
/* still (reduced motion, scripts off): every step listed, the drawing at its last step */
html:not(.m) [data-out]:not(.keep) { display: none; }

/* ==== The reading: words that stay still ============================================================================== */
.r-read { position: relative; z-index: 1; padding-top: 18px; padding-bottom: 8px; }
.r-sec { padding-top: 40px; }
.r-sec h2 { max-width: 22ch; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.08; color: var(--ink); }
.r-sec h3 { margin-top: 28px; max-width: 34ch; font: 600 19px/1.35 var(--sans); color: var(--ink); }
.r-sec p, .r-sec li { max-width: 62ch; font-size: 18px; line-height: 1.62; color: var(--ink); }
.r-sec p { margin-top: 16px; }
.r-sec h2 + p { margin-top: 18px; }
.r-sec a { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.5); }
.r-sec ul, .r-sec ol { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
.r-sec ul > li { position: relative; padding-left: 24px; }
.r-sec ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 11px; height: 11px; background: var(--x-ink) center / 11px no-repeat; }
.r-sec ol { counter-reset: r; }
.r-sec ol > li { position: relative; padding-left: 40px; counter-increment: r; }
.r-sec ol > li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 0.18em; width: 28px; height: 22px; border: 1px solid var(--ink-2); font: 500 11px/20px var(--mono); text-align: center; color: var(--ink); }
.r-sec strong { font-weight: 650; }
.r-k { margin: 0; font: 500 var(--fs-kicker)/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.r-sec h2.r-k, .r-next h2.r-k { max-width: none; margin: 0; font: 500 var(--fs-kicker)/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.r-k::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; background: var(--x-ink) center / 9px no-repeat; }
.r-sec p.r-ans { margin-top: 14px; max-width: 30ch; font: 400 clamp(23px, 6vw, 30px)/1.28 var(--display); color: var(--ink); }
.r-key ul { max-width: 780px; margin-top: 14px; border-top: 1px solid rgba(35, 31, 26, 0.3); gap: 0; }
.r-key ul > li { max-width: none; padding: 13px 0 14px 24px; border-bottom: 1px solid var(--rule-ink); }
.r-key ul > li::before { top: 1.32em; }
.r-pull { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid rgba(35, 31, 26, 0.3); max-width: 24ch !important; font: 400 var(--fs-pull)/1.2 var(--display) !important; color: var(--ink); }
.r-src { margin-top: 12px !important; max-width: 70ch !important; font: 400 12.5px/1.6 var(--mono) !important; color: var(--ink-2) !important; }
.r-figs { display: grid; gap: 10px; margin-top: 20px; max-width: 780px; }
.r-fig { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 12px 0 13px; border-top: 1px solid var(--rule-ink); }
.r-fig b { font: 600 22px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.r-fig span { font-size: 17px; line-height: 1.5; color: var(--ink); }
.r-two { display: grid; gap: 14px; margin-top: 20px; max-width: 860px; }
.r-col { padding: 16px 16px 18px; background: rgba(250, 245, 234, 0.9); border: 1px solid rgba(35, 31, 26, 0.38); }
.r-col h3 { margin: 6px 0 0; }
.r-col ul { margin-top: 10px; gap: 8px; }
.r-col li { font-size: 17px; }
.r-setup { margin-top: 20px; max-width: 780px; padding: 16px 16px 18px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.42); }
.r-setup pre { margin: 10px 0 0; font: 400 13.5px/1.62 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.r-line { margin-top: 18px !important; padding: 14px 16px 15px; max-width: 40ch !important; border-left: 3px solid var(--gold); background: rgba(244, 196, 90, 0.14); font: 400 21px/1.35 var(--display) !important; }
.r-by { margin-top: 36px; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); }

/* ==== Cards: resources by their question ============================================================================== */
.r-next { position: relative; z-index: 1; margin-top: 56px; }
.r-next h2 { margin-top: 0; }
.r-cards { display: grid; gap: 14px; margin-top: 16px; }
.r-card { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 16px 15px; background: rgba(250, 245, 234, 0.92); border: 1px solid rgba(35, 31, 26, 0.38); color: var(--ink); text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
.r-card:hover { background: #fffaf0; border-color: var(--ink); }
.r-card-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.r-card-q { font: 400 21px/1.2 var(--display); color: var(--ink); }
.r-card-s { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.r-card-go { font: 600 14px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(35, 31, 26, 0.45); text-underline-offset: 0.25em; }
.r-back { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 18px; }

/* ==== The box: where DIY fits, at the end of the reading ============================================================= */
.r-box { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 56px; padding: 26px 0 0; border-top: 1px solid rgba(35, 31, 26, 0.32); }
.r-box h2 { margin: 0; max-width: 18ch; font-size: clamp(30px, 8vw, 46px); line-height: 1.06; color: var(--ink); }
.r-box p { max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--ink); }
.r-box .r-price { font: 500 13px/1.6 var(--mono); color: var(--ink-2); }

/* ==== The AI box, at the end of every page ============================================================================ */
.r-ask { position: relative; z-index: 1; padding-bottom: 72px; }
@media (max-width: 899px) and (max-height: 760px) {
  .r-lead { font-size: 17px; line-height: 1.45; }
  .r-act { margin-top: 18px; }
  .m .rs-in { padding-top: calc(72px + env(safe-area-inset-top, 0px)); gap: 10px; }
  .m .rs-t { font-size: 15px; line-height: 1.45; }
  .m .rs-k { font-size: 22px; }
}

/* ==== Tablet ========================================================================================================== */
@media (min-width: 600px) {
  .r-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-col { padding: 20px 22px 22px; }
  .r-setup { padding: 20px 24px 22px; }
}

/* ==== Laptop and up =================================================================================================== */
@media (min-width: 900px) {
  .r-lead { font-size: 20px; }
  .rs-in { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
  .m .rs-in { grid-template-rows: minmax(0, 1fr); align-items: center; padding-top: 96px; padding-bottom: 40px; }
  .m .rs-cap { align-self: center; }
  .m .rs-vis { align-self: center; }
  .rs-k { font-size: 34px; }
  .rs-t { font-size: 17px; }
  .r-read { padding-top: 30px; }
  .r-sec { padding-top: 56px; }
  .r-sec h2 { font-size: 46px; }
  .r-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
  .r-ask .aibox { max-width: 880px; }
}

/* ==== The hub's scene: the shelf as a survey line. Five stations, one question each; the scroll walks the line and
   each station lights as you reach it, and stays walked behind you. =============================================== */
.tr { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; max-width: 560px; }
.tr li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 62px; }
.tr li::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; border-left: 1px dashed rgba(35, 31, 26, 0.45); }
.tr li:first-child::before { top: 50%; }
.tr li:last-child::before { bottom: 50%; }
.tr-m { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; background: var(--paper-hi); border: 1px solid var(--ink); font: 600 13px/1 var(--mono); color: var(--ink); }
.tr-l { display: grid; gap: 2px; }
.tr-l b { font: 400 18px/1.2 var(--display); color: var(--ink); }
.tr-l span { font: 400 11.5px/1.35 var(--mono); color: var(--ink-2); }
/* still: every station walked */
.tr-m { background: #f8e4b8; border-color: var(--gold); }
/* motion: ahead is open, behind is walked (gold), here is ink with the gold line under it */
.m .tr-m { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; background: var(--paper-hi); border-color: var(--ink); }
.m .tr li { transition: opacity 0.35s ease; opacity: 0.55; }
.m .tr li.walked { opacity: 0.9; }
.m .tr li.walked .tr-m { background: #f8e4b8; border-color: var(--gold); }
.m .tr li.here { opacity: 1; }
.m .tr li.here .tr-m { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--gold-bright); }

/* ==== The shelf: every resource by its question ======================================================================= */
.shelf { position: relative; z-index: 1; padding-top: 44px; }
.shelf h2 { max-width: 20ch; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.08; color: var(--ink); }
.shelf-say { margin-top: 12px; max-width: 52ch; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.shelf .r-cards { margin-top: 22px; }
.r-card-n { font: 500 10.5px/1.3 var(--mono); color: var(--ink-2); }
.off { margin-top: 26px; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.off a { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.5); }

/* ==== Beargrass Builders: the free newsletter, one field and one button ============================================ */
.bb { position: relative; z-index: 1; padding-top: 56px; scroll-margin-top: 70px; }
.bb-card { max-width: 820px; padding: 20px 16px 22px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 30px 60px -44px rgba(35, 31, 26, 0.6); }
.bb-card h2 { margin-top: 10px; max-width: 18ch; font-size: clamp(28px, 7.4vw, 42px); line-height: 1.08; color: var(--ink); }
.bb-say { margin-top: 12px; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.bb-form { display: grid; gap: 16px; margin-top: 20px; max-width: 520px; }
.lab { display: block; font: 600 11.5px/1.4 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.fw { display: block; margin-top: 9px; --cm: var(--ink); }
.field.mono { font-family: var(--mono); font-size: 15.5px; }
.field:hover { border-color: var(--ink); }
.field[aria-invalid="true"] { border-color: var(--barn); box-shadow: inset 3px 0 0 var(--barn); }
.err { margin-top: 7px; font: 500 13.5px/1.45 var(--sans); color: var(--barn); }
.err:empty { display: none; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.send .btn { min-width: 150px; }
.fine { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.bb-tools { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-ink); max-width: 60ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bb-tools b { font-weight: 600; color: var(--ink); }
/* received: the form gives way to the Box V, which burns once. Scripts off: #bb-received, already burnt. */
.received { display: none; margin-top: 20px; outline: none; }
.js .received.show { display: block; }
html:not(.js) .received:target { display: block; }
html:not(.js) .bb-card:has(.received:target) .bb-form { display: none; }
.js .bb-card.got .bb-form { display: none; }
.rc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
.received .brand-day { margin: 2px 0 0; }
.received .b-label { gap: 2px; }
.rc-date { display: block; font-size: 10.5px; letter-spacing: 0.06em; }
.rc-h { font: 400 clamp(26px, 7vw, 36px)/1.1 var(--display); color: var(--ink); }
.rc-to { margin-top: 8px; font-size: 16.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.rc-to b { font-family: var(--mono); font-weight: 500; font-size: 0.94em; }
.rc-fine { margin-top: 14px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.rc-act { margin-top: 6px; }

@media (max-width: 899px) and (max-height: 760px) {
  .m .tr li { min-height: 54px; }
  .m .tr-m { width: 40px; height: 40px; }
  .m .tr li::before { left: 19px; }
  .m .tr li { grid-template-columns: 40px minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .tr { max-width: 600px; }
  .tr li { min-height: 84px; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
  .tr li::before { left: 27px; }
  .tr-m { width: 56px; height: 56px; font-size: 15px; }
  .tr-l b { font-size: 24px; }
  .tr-l span { font-size: 13px; }
  .shelf { padding-top: 64px; }
  .bb { padding-top: 72px; }
  .bb-card { padding: 30px 32px 32px; }
}
.hero-art .glow, .hero-art .twp-box { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 52px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 52px), transparent); }
.hero-art .glow { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 900px) {
  .hero-art .glow, .hero-art .twp-box { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 24%, #000 44%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 24%, #000 44%); }
}
/* The morning comes up on the picture: a veil of first light over it that lifts once, on arrival (opacity only). */
.hero-art .veil { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(122, 136, 160, 0.62), rgba(171, 160, 150, 0.5)); opacity: 0; }
.m .hero-art .veil { opacity: 1; transition: opacity 2.2s ease-out; }
.m .hero-art.up .veil { opacity: 0; }