/* Validated.Directory 2.0.0 · the learn library's template (DIR 2.0.0 part D, BEA-432). Every page in /learn/ loads it
   after /brand/tokens.css, /brand/base.css and /dir/shell.css, so the hub and every guide read as one library. Reading
   pages stay in day (FOUNDATION 2): ink on paper, the land drifting behind, the AI box as the one piece of night, then the
   night footer. A guide's scene is scene.css; the hub's own parts are hub.css. Motion only under html.m; html.js means
   scripts on. Parts: the header's day state; the page; the first screen; the nine checks' night and dawn; the reading;
   where it fits; the box; read next; the AI box; phones; tablet; laptop. */

/* The header in its day state: the kit's .day section rule also matches .site.day and would clip the phone menu (a kit
   wish); the bar keeps its paper once you scroll. */
.site.day { overflow: visible; background: transparent; }
html:not(.js) .site.day { position: absolute; }   /* the same .day rule would also put the header in the flow */

/* ==== The page ======================================================================================================= */
.gday { overflow: visible; overflow: clip; }   /* the kit's .day has overflow:hidden, 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 */
.show-draft [data-moved] { outline: 2px dotted var(--olive); outline-offset: 3px; }  /* ?draft: Mark's words moved here */
[data-time="day"] .x::before { background-image: var(--x-ink); }
[data-time="day"] .coords { color: var(--ink-2); }
.nav-list a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.35em; }
.g-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
[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; }

/* ==== The first screen: the question, the answer up top, the way down ================================================= */
.g-first { position: relative; z-index: 1; padding-top: calc(112px + env(safe-area-inset-top, 0px)); padding-bottom: 44px; }
.g-first .eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: rgba(35, 31, 26, 0.4); text-underline-offset: 0.3em; }
.g-first h1 { margin-top: 14px; max-width: 15ch; color: var(--ink); }
.g-lead { margin-top: 20px; max-width: 34ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.g-first .coords { max-width: 430px; margin-top: 22px; }
.g-night { background: var(--canvas); color: var(--cream); overflow: hidden; }
.g-night h1 { color: var(--white); }
.g-night .g-lead { color: var(--cream); }
.g-night .eyebrow a { text-decoration-color: rgba(240, 230, 207, 0.45); }


/* The nine checks open at night: the first screen under the stars, the waterfall, then the sunrise into the reading. */
.g-night .sky { z-index: 0; }
.g-first-in { position: relative; z-index: 1; }
.g-dawn { position: relative; height: 34vh; min-height: 180px; overflow: hidden; background: var(--dawn); }
.g-dawn .sun { top: 100%; }

/* ==== The reading: words that stay still ============================================================================== */
.g-read { position: relative; z-index: 1; padding-top: 24px; padding-bottom: 8px; }
.g-sec { padding-top: 40px; }
.g-sec + .g-sec { margin-top: 8px; }
.g-sec h2 { max-width: 22ch; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.08; color: var(--ink); }
.g-sec h3 { margin-top: 28px; font: 600 19px/1.35 var(--sans); color: var(--ink); }
.g-sec p, .g-sec li { max-width: 62ch; font-size: 18px; line-height: 1.62; color: var(--ink); }
.g-sec p { margin-top: 16px; }
.g-sec h2 + p { margin-top: 18px; }
.g-sec a { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.5); }
.g-sec a:hover { text-decoration-color: var(--ink); }
.g-sec ul, .g-sec ol { display: grid; gap: 12px; margin-top: 18px; }
.g-sec ul > li { position: relative; padding-left: 24px; }
.g-sec ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 11px; height: 11px; background: var(--x-ink) center / 11px no-repeat; }
.g-sec ol { counter-reset: g; }
.g-sec ol > li { position: relative; padding-left: 40px; counter-increment: g; }
.g-sec ol > li::before { content: counter(g, 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); }
.g-sec strong { font-weight: 650; }
.g-k { font: 500 var(--fs-kicker)/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
:is(.g-sec, .g-box, .g-fits, .g-next, .h-check, .g-check, .h-grp) .g-k { max-width: none; margin: 0; font: 500 var(--fs-kicker)/1.4 var(--mono); letter-spacing: 0.16em; color: var(--ink-2); }
.g-k::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; background: var(--x-ink) center / 9px no-repeat; }
.g-sec p.g-ans { margin-top: 14px; max-width: 34ch; font: 400 clamp(22px, 5.9vw, 28px)/1.3 var(--display); color: var(--ink); }
.g-sec p.g-ans + p.g-ans { margin-top: 14px; }
.g-key { margin-top: 30px; }
.g-key ul { max-width: 780px; margin-top: 14px; border-top: 1px solid rgba(35, 31, 26, 0.3); gap: 0; }
.g-sec.g-key li { max-width: none; }
.g-key ul > li { padding: 13px 0 14px 24px; border-bottom: 1px solid var(--rule-ink); }
.g-key ul > li::before { top: 1.32em; }
.g-qs dl { display: grid; max-width: 780px; margin-top: 18px; border-top: 1px solid rgba(35, 31, 26, 0.3); }
.g-qs dt { padding-top: 18px; max-width: 34ch; font: 400 clamp(21px, 5.4vw, 25px)/1.25 var(--display); color: var(--ink); }
.g-qs dd { margin: 8px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--rule-ink); max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--ink); }
.g-by { margin-top: 36px; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); }

/* Where Validated.Directory fits: a card on cardstock at the end of the reading. */
.g-fits { position: relative; z-index: 1; margin-top: 44px; padding: 20px 18px 22px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.42); box-shadow: 0 28px 50px -38px rgba(35, 31, 26, 0.6); max-width: 760px; }
.g-fits h2 { margin-top: 10px; font-size: clamp(26px, 6.6vw, 36px); line-height: 1.1; color: var(--ink); max-width: 24ch; }
.g-fits p { margin-top: 12px; max-width: 60ch; font-size: 17.5px; line-height: 1.6; color: var(--ink); }
.g-fits .more { margin-top: 10px; }

/* The box: the one place a guide sells (educate first), at the end of the reading. */
.g-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); }
.g-box h2 { margin: 0; max-width: 18ch; font-size: clamp(30px, 8vw, 48px); line-height: 1.06; color: var(--ink); }
.g-box p { max-width: 50ch; font-size: 18px; line-height: 1.6; color: var(--ink); }
.g-box .g-act { margin-top: 6px; }
.g-box .g-price { font: 500 13px/1.6 var(--mono); color: var(--ink-2); }
.g-price a { color: var(--ink); }

/* Read next: guides by their question. */
.g-next { position: relative; z-index: 1; margin-top: 56px; }
.g-cards { display: grid; gap: 14px; margin-top: 16px; }
.g-card { position: relative; display: grid; 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; }
.g-card:hover { background: #fffaf0; border-color: var(--ink); }
.g-card-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.g-card-q { font: 400 21px/1.2 var(--display); color: var(--ink); }
.g-card-s { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-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; }

/* The AI box, at the end of every page. */
.g-ask { position: relative; z-index: 1; padding-bottom: 72px; }
.g-ask .aibox h2 { margin: 0; font-size: clamp(28px, 7vw, 38px); line-height: 1.1; color: var(--white); }

/* ==== Phones with scripts off: the header is two rows, so the first words start below it ============================== */
@media (max-width: 899px) {
  html:not(.js) .g-first, html:not(.js) .h-first { padding-top: calc(176px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .h-first, .g-first { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .g-lead { font-size: 17px; line-height: 1.45; }
  .g-act { margin-top: 18px; }
}

/* ==== Tablet ========================================================================================================== */
@media (min-width: 600px) {
  .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-fits { padding: 26px 28px 28px; }
}

/* ==== Laptop and up =================================================================================================== */
@media (min-width: 900px) {
  .g-first { padding-top: calc(150px + env(safe-area-inset-top, 0px)); padding-bottom: 64px; }
  .g-first h1 { max-width: 13ch; }
  .g-lead { font-size: 21px; max-width: 40ch; }
  .g-read { padding-top: 40px; }
  .g-sec { padding-top: 56px; }
  .g-sec p, .g-sec li, .g-qs dd { font-size: 19px; }
  .g-sec p.g-ans { font-size: 30px; max-width: 38ch; }
  .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}