/* 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; }
}

/* ==== This page's scene: more pages, or one true page? The pages pile up as you scroll; three go wrong; the pile gives
   way to one plain fact; the AI repeats it. ======================================================================== */
.tru { display: grid; gap: 12px; max-width: 600px; }
.tru-k { display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.tru-k b { font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
.tru-mid { display: grid; }
.pile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini { position: relative; display: grid; align-content: start; gap: 5px; min-height: 58px; padding: 8px 8px 9px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.38); }
.mini i { display: block; height: 4px; background: rgba(35, 31, 26, 0.18); }
.mini i:nth-child(1) { width: 70%; height: 5px; background: rgba(35, 31, 26, 0.34); }
.mini i:nth-child(2) { width: 92%; }
.mini i:nth-child(3) { width: 80%; }
.mini .tag { position: absolute; left: 6px; right: 6px; bottom: 6px; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; padding: 2px 4px 3px; text-align: center; background-color: var(--paper-hi); }
.mini.wr { border-color: var(--barn); }
.one { display: grid; gap: 10px; padding: 14px 15px 15px; }
.one .pc-q { font-size: 20px; }
.one .pc-q .n { font-size: 0.86em; }
.one-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rep { padding: 12px 14px 13px; }
.rep .pc-q { margin-top: 5px; font-size: 18px; }
.rep-src { margin-top: 9px; font: 400 11.5px/1.45 var(--mono); color: rgba(250, 245, 234, 0.78); }
/* the pile grows with the scroll in the first step, page by page, and shrinks again on the way back */
.m .mini { opacity: clamp(0.08, calc(var(--p, 0) * 40 - var(--i) * 0.9), 1); }
.m .mini .tag { transition: opacity 0.4s ease; }
.m .rs-track:not([data-k="1"]):not([data-k="2"]):not([data-k="3"]) .mini .tag { opacity: 0; }
.m .pile.gone { opacity: 0.12; transform: none; }
.m .pile.gone .tag { opacity: 0 !important; }
.m .tru-mid > * { grid-area: 1 / 1; }
.m .one { align-self: center; box-shadow: 0 24px 40px -30px rgba(35, 31, 26, 0.7); }
html:not(.m) .tru-mid { gap: 12px; }
html:not(.m) .pile { opacity: 0.55; }

@media (max-width: 899px) and (max-height: 760px) {
  .m .mini { min-height: 50px; }
  .m .one .pc-q { font-size: 18px; }
  .m .rep .pc-q { font-size: 16.5px; }
}
@media (min-width: 900px) {
  .tru { gap: 16px; max-width: 660px; }
  .pile { gap: 10px; }
  .mini { min-height: 88px; padding: 12px; gap: 7px; }
  .mini i { height: 5px; }
  .mini .tag { font-size: 11px; left: 10px; right: 10px; bottom: 10px; }
  .one { padding: 20px 22px 22px; margin: 0 40px; }
  .one .pc-q { font-size: 27px; }
  .rep { padding: 18px 20px 19px; }
  .rep .pc-q { font-size: 25px; }
  .rep-src { font-size: 13px; }
}
.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 township on the water (laid by page.js with one projective transform, never animated), in ink by day. It has no
   place on the picture without scripts, so it is not shown. As you scroll, the sections clear one by one (opacity
   only); the one that stays is lit gold by page.js. */
.hero-art .twp-box { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.hero-art .twp { --tl: rgba(35, 31, 26, 0.42); position: absolute; left: 0; top: 0; width: 240px; height: 240px; margin: 0; transform-origin: 0 0; visibility: hidden; }
.hero-art .twp.laid { visibility: visible; }
.hero-art .twp i { padding: 4px 5px; font-size: 9px; color: rgba(35, 31, 26, 0.82); will-change: opacity; }
.hero-art .twp i::after { background-image: var(--x-ink), var(--x-ink), var(--x-ink), var(--x-ink); opacity: 0.7; }
html:not(.m) .hero-art .twp { opacity: 0.42; }
@media (min-width: 900px) { .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; } }