/* 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; }
.r-lead { max-width: 36ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--cream); text-shadow: 0 1px 14px rgba(6, 10, 24, 0.7); }
.r-lead b { font-weight: 600; color: var(--white); }
.r-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 18px; }
.r-act .btn { min-width: 132px; }
.hero-art .glow { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the township, laid on the picture by first.js (one projective transform, never animated); unseen without scripts */
.hero-art .twp { position: absolute; z-index: 4; 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: 3px 4px; font-size: 8.5px; }
.hero-art .twp i.on { color: #fff6dc; }
.m .hero-art .twp.run i.on::before { animation: on 0.6s ease-out both; }
html:not(.m) .hero-art .twp i.on::before { opacity: 1; }
@keyframes on { from { opacity: 0; } to { opacity: 1; } }
/* the turn from the night into the day of the reading */
.turn { position: relative; z-index: 1; height: 120px; background: linear-gradient(180deg, #0b1122 0%, var(--indigo) 24%, #6f6577 46%, #b98063 62%, #e2ac68 74%, #f1cf92 86%, var(--paper) 100%); }

/* ==== 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: 16.5px; line-height: 1.42; }
  .r-act { margin-top: 14px; }
  .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; }
}

/* Narrow phones, and a phone at 125% page zoom (about 314px): smaller words, Start and its link on one row. */
@media (max-width: 360px) {
  .r-lead { font-size: 16px; }
  .r-act { gap: 10px 16px; }
  .r-act .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
  .r-act .more { font-size: 15px; gap: 7px; }
}

/* ==== 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 { max-width: 38ch; font-size: 20px; }
  .hero-art .twp i { padding: 5px 6px; font-size: 10px; }
  .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: roommates and houses. The models line up by temperament, the apps open as houses, one
   roommate is followed from house to house, then one current question goes to three models. ======================= */
.rh { display: grid; gap: 12px; max-width: 620px; }
.rh-mid { display: grid; }
.rh-grid { display: grid; grid-template-columns: minmax(78px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.rh-h { align-self: end; padding: 0 2px 4px; font: 600 10px/1.25 var(--sans); font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.rh-r { display: grid; align-content: center; gap: 2px; padding: 8px 8px 9px; background: var(--ink); color: var(--paper-hi); }
.rh-r b { font: 400 15px/1.15 var(--display); }
.rh-r span { font: 400 10.5px/1.3 var(--mono); color: rgba(250, 245, 234, 0.74); }
.rh-c { display: grid; place-items: center; min-height: 56px; padding: 6px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.32); font: 400 11.5px/1.3 var(--mono); color: var(--ink-2); text-align: center; }
.rh-c i { width: 7px; height: 7px; background: rgba(35, 31, 26, 0.28); }
.rh-c.lit { border-color: var(--gold); background: rgba(244, 196, 90, 0.2); color: var(--ink); }
.rh-c.lit i { display: none; }
.rh-c .w { display: none; }
.rh-c.lit .w { display: block; }
.rh-say { font: 400 12px/1.45 var(--mono); color: var(--ink-2); }
.rh-q { display: grid; gap: 8px; padding: 12px 14px 13px; }
.rh-q .pc-q { font-size: 18px; }
.rh-a { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rh-a li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; align-items: center; padding-top: 7px; border-top: 1px solid var(--rule-ink); font-size: 14px; line-height: 1.4; color: var(--ink); }
.rh-a .m-k { font: 500 11px/1.2 var(--mono); color: var(--ink-2); }
.rh-a .tag { justify-self: start; }
/* the lit row: each house lights in turn as the scroll walks the steady roommate across */
.m .rh-c.lit { transition: background-color 0.4s ease, border-color 0.4s ease; }
.m .rs-track:not([data-k="2"]):not([data-k="3"]) .rh-c.lit { border-color: rgba(35, 31, 26, 0.32); background: var(--paper-hi); color: var(--ink-2); }
.m .rs-track:not([data-k="2"]):not([data-k="3"]) .rh-c.lit i { display: block; }
.m .rs-track:not([data-k="2"]):not([data-k="3"]) .rh-c.lit .w { display: none; }
.m .rh-c.lit.l2 { transition-delay: 0.3s; }
.m .rh-c.lit.l3 { transition-delay: 0.6s; }
.m .rh-mid > * { grid-area: 1 / 1; }
.m .rh-grid.gone { opacity: 0; transform: none; }
.m .rh-q { align-self: start; box-shadow: 0 24px 40px -30px rgba(35, 31, 26, 0.7); }
html:not(.m) .rh-mid { gap: 14px; }

@media (max-width: 899px) and (max-height: 760px) {
  .m .rh-c { min-height: 48px; }
  .m .rh-q .pc-q { font-size: 16.5px; }
  .m .rh-a li { font-size: 13.5px; }
}
@media (min-width: 900px) {
  .rh { gap: 16px; max-width: 680px; }
  .rh-grid { grid-template-columns: minmax(130px, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rh-h { font-size: 11.5px; }
  .rh-r { padding: 12px 14px 13px; }
  .rh-r b { font-size: 20px; }
  .rh-r span { font-size: 12px; }
  .rh-c { min-height: 84px; font-size: 13px; }
  .rh-q { padding: 18px 20px 19px; margin: 0 30px; }
  .rh-q .pc-q { font-size: 24px; }
  .rh-a li { font-size: 16px; grid-template-columns: 6em minmax(0, 1fr); }
}