/* Validated.Directory 2.0.0 · the learn hub (DIR 2.0.0 part D, BEA-432): its first screen on the hero-learn picture, the
   free check, and the library as a trail, each group a station lit as the reader reaches it (hub.js). Loads after
   guide.css. Phone and tablet: the picture is a band between the headline and the words. Laptop: the whole picture
   behind the first screen, the words on the misty valley at its left. */

.h-first { position: relative; z-index: 1; padding-top: calc(100px + env(safe-area-inset-top, 0px)); padding-bottom: 40px; }
.h-first h1 { margin-top: 12px; color: var(--ink); max-width: 13ch; }
.h-pic { position: relative; margin-top: 18px; border-top: 1px solid rgba(35, 31, 26, 0.4); border-bottom: 1px solid rgba(35, 31, 26, 0.4); overflow: hidden; background: #d9c9a6; aspect-ratio: 1.6; }
.h-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.h-low .g-lead { margin-top: 18px; }
.h-low .coords { max-width: 430px; }
.h-trail { display: none; }
.js .h-trail { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.h-say { margin-top: 12px; max-width: 40ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.h-check { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 28px; padding: 18px 18px 19px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.42); max-width: 760px; }
.h-check h2 { margin: 0; font-size: clamp(24px, 6.2vw, 32px); line-height: 1.12; color: var(--ink); }
.h-check p { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 52ch; }
.h-lib { position: relative; z-index: 1; padding-top: 52px; }
.h-lib > h2 { max-width: 18ch; font-size: clamp(32px, 8.4vw, 52px); line-height: 1.06; color: var(--ink); }
.h-lib > p { margin-top: 12px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.h-trailway { position: relative; margin-top: 30px; padding-left: 26px; }
.h-line { position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: rgba(35, 31, 26, 0.28); }
.h-line i { position: absolute; inset: 0; background: var(--gold-ink); transform-origin: 50% 0; transform: scaleY(1); }
.m .h-line i { transform: scaleY(var(--fill, 0)); }
.h-grp { position: relative; padding-bottom: 34px; }
.h-grp::before { content: ""; position: absolute; left: -26px; top: 8px; width: 11px; height: 11px; background: var(--paper) var(--x-ink) center / 11px no-repeat; box-shadow: 0 0 0 3px var(--paper); transition: background-color 0.3s; }
.h-grp.on::before, html:not(.m) .h-grp::before { background-color: var(--gold-bright); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold-ink); }
.h-grp h3 { font: 400 clamp(26px, 6.8vw, 36px)/1.1 var(--display); color: var(--ink); }
.h-grp .g-cards { margin-top: 14px; }

@media (max-width: 899px) and (max-height: 760px) {
  .h-pic { margin-top: 14px; aspect-ratio: 2.6; }
  .h-pic img { object-position: 50% 82%; }
  .h-low .g-lead { margin-top: 14px; }
}

@media (min-width: 600px) {
  .h-pic { aspect-ratio: 2.2; }
}

@media (min-width: 900px) {
  .h-first { min-height: min(100vh, 900px); padding-top: calc(150px + env(safe-area-inset-top, 0px)); padding-bottom: 72px; }
  .h-pic { position: absolute; top: 0; bottom: 0; left: auto; right: var(--read-x); width: min(46vw, var(--hero-art)); z-index: 0; margin: 0; border: 0; aspect-ratio: auto; background: #efe6d2; overflow: hidden; }
  .h-pic img { object-position: 100% 50%; }
  .h-first h1 { max-width: 10ch; }
  .h-first .g-lead, .h-say { max-width: 30ch; }
  .h-trailway { padding-left: 34px; }
  .h-grp { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); column-gap: 32px; padding-bottom: 48px; }
  .h-grp::before { left: -34px; }
  .h-grp .g-cards { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .h-first .g-lead, .h-say { max-width: 34ch; }
}

/* ==== The library as a trail (2026-10-24): the hub's main act. One question at the trailhead; the scroll walks the
   five stops of the library in turn, the trail lighting to each and the stop's guides shown at the foot, then it runs
   on into the list. hub.js draws the land and the trail. Still first: the map with every stop lit, the five stops
   written out by name (their guides are the list below). In motion the stage pins for --hs-len screens. ============== */
.hs { position: relative; z-index: 1; }
.hs-stage { position: relative; display: grid; gap: 20px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 48px var(--gut-r) 24px var(--gut); }
.hs-head h2 { margin-top: 10px; max-width: 16ch; font-size: clamp(30px, 8.4vw, 52px); line-height: 1.06; color: var(--ink); }
.hs-art { position: relative; min-width: 0; }
.hs-say { margin-top: 12px; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.m .hs-say { display: none; }
.hs-map { position: relative; width: 100%; aspect-ratio: 0.95; max-height: 560px; background: rgba(250, 245, 234, 0.9); border: 1px solid rgba(35, 31, 26, 0.42); }
.hs-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-trail { display: none; }
.hs-path { position: absolute; inset: 0; width: 100%; height: 100%; }   /* scripts off: the trail, dotted, without the land */
.hs-path polyline { fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-dasharray: 0.1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.js .hs-path { display: none; }
.js .hs-trail { display: block; }
.hs-st, .hs-th { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; transform: translate(-11px, -50%); white-space: nowrap; }
.hs-st.l { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.hs-st > b { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; font: 600 11.5px/1 var(--mono); color: var(--ink); background: var(--gold-bright); border: 1px solid var(--gold-ink); box-shadow: 0 0 0 3px rgba(250, 245, 234, 0.95); transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s; }
.hs-sl { padding: 2px 6px 3px; font: 400 clamp(15px, 4.3vw, 19px)/1.15 var(--display); color: var(--ink); background: rgba(250, 245, 234, 0.92); transition: opacity 0.35s, color 0.35s; }
.hs-th > b { flex: 0 0 22px; width: 22px; height: 22px; background: var(--x-ink) center / 13px no-repeat; }
.hs-th > span { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.m .hs-st:not(.on) > b { color: var(--ink-2); background: var(--paper-hi); border-color: rgba(35, 31, 26, 0.45); }
.m .hs-st:not(.on) .hs-sl { color: var(--ink-2); }
.m .hs-st.now > b { box-shadow: 0 0 0 3px rgba(250, 245, 234, 0.95), 0 0 0 6px rgba(244, 196, 90, 0.55); }
.hs-steps { display: grid; gap: 10px; }
.hs-steps > li { display: grid; align-content: start; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.hs-n { font: 500 11.5px/1.45 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.hs-k { font: 400 clamp(21px, 5.6vw, 26px)/1.15 var(--display); color: var(--ink); }
.hs-qs { display: none; }
.hs-tk { display: none; }

.m .hs-track { height: calc(var(--hs-len, 5.6) * 100vh); height: calc(var(--hs-len, 5.6) * 100svh); }
.m .hs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .hs-head h2 { margin-top: 6px; font-size: clamp(24px, 7vw, 44px); }
.m .hs-art { display: grid; place-items: center; min-height: 0; }
.m .hs-map { aspect-ratio: auto; width: min(100%, 560px); height: 100%; max-height: none; }
.m .hs-out { padding-top: 10px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.m .hs-steps { gap: 0; }
.m .hs-steps > li { grid-area: 1 / 1; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.m .hs-steps > li.cur { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s; }
.m .hs-k { margin-top: 2px; font-size: clamp(20px, 5.4vw, 24px); }
.m .hs-qs { display: grid; gap: 4px; margin-top: 6px; }
.hs-qs a { display: block; font: 400 15.5px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(35, 31, 26, 0.35); text-underline-offset: 0.22em; }
.hs-qs a:hover { text-decoration-color: var(--ink); }
.m .hs-tk { display: flex; gap: 4px; margin-top: 10px; }
.hs-tk i { flex: 0 1 22px; height: 4px; background: rgba(35, 31, 26, 0.18); transition: background-color 0.3s; }
.hs-tk i.on { background: var(--gold-ink); }

@media (max-width: 380px) {
  .hs-st > b, .hs-th > b { flex-basis: 20px; width: 20px; height: 20px; }
  .hs-st { gap: 6px; transform: translate(-10px, -50%); }
  .hs-st.l { transform: translate(calc(-100% + 10px), -50%); }
  .hs-qs a { font-size: 14.5px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .m .hs-stage { padding-top: calc(68px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .m .hs-head h2 { font-size: clamp(21px, 6.2vw, 26px); }
  .m .hs-head .eyebrow { display: none; }
  .m .hs-qs { gap: 2px; margin-top: 4px; }
  .hs-qs a { font-size: 14px; line-height: 1.25; }
  .m .hs-k { font-size: 19px; }
}
@media (min-width: 900px) {
  .hs-stage { max-width: none; width: 100%; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 56px); padding: 72px var(--read-x) 48px; }
  .hs-head { grid-column: 1; grid-row: 1; }
  .hs-out { grid-column: 1; grid-row: 2; }
  .hs-art { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .hs-map { aspect-ratio: 1.05; }
  .m .hs-stage { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 108px; padding-bottom: 48px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .hs-head { grid-row: 1; }
  .m .hs-art { grid-row: 1 / 4; align-self: stretch; }
  .m .hs-out { grid-row: 3; align-self: end; }
  .m .hs-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .m .hs-say { display: block; max-width: 34ch; font-size: 18px; }
  .m .hs-map { width: 100%; max-width: 680px; height: min(100%, 720px); }
  .m .hs-k { font-size: 30px; }
  .m .hs-qs { gap: 8px; margin-top: 12px; }
  .hs-qs a { font: 400 21px/1.3 var(--display); }
  .hs-sl { font-size: 20px; }
}