/* Validated.Directory 2.0.0 · the reading pages: Support, Privacy and Terms (BEA-432), shared. Loads after
   /brand/tokens.css, /brand/base.css and /dir/shell.css; each page adds its own page.css for its small scene. A reading
   page opens at night on a surveyed township (the kit's tiles-light), plays a small scene sized to its answer, turns to
   day, and the words carried over from the live directory stand still to read; the AI box closes it. */

.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }
.n { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.02em; white-space: nowrap; }
.first, .scene { --lit: linear-gradient(180deg, rgba(244, 196, 90, 0.27), rgba(244, 196, 90, 0.07)); --lit-edge: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 20px rgba(244, 196, 90, 0.2), 0 0 24px rgba(244, 196, 90, 0.24); }

/* The first screen (night): the words, the township, the lead and where we are. */
.first { position: relative; overflow: hidden; background: radial-gradient(130% 55% at 60% 100%, rgba(43, 69, 99, 0.5), rgba(43, 69, 99, 0) 72%), linear-gradient(180deg, #060a18 0%, #0a1024 40%, #0f1a34 80%, #142038 100%); }
.first-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.first-copy { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 600px; max-height: 1100px; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 899px) { html:not(.js) .first-copy { padding-top: calc(176px + env(safe-area-inset-top, 0px)); } }
.first .eyebrow { color: var(--cream); }
.first h1 { margin-top: 12px; color: var(--white); text-shadow: 0 2px 28px rgba(6, 10, 24, 0.55); }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; color: var(--cream); }
.lead a { color: var(--white); }
.lead .mono { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; }
.stn-t .em { overflow-wrap: anywhere; }
.first .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.first .actions .btn { min-width: 132px; }
.first .coords { margin-top: 14px; }
.plat { position: relative; align-self: center; height: min(100% - 24px, 100vw); margin: 12px calc(-1 * var(--gut-r)) 12px calc(-1 * var(--gut)); }
.plat .twp { position: absolute; inset: 0; }
/* one section held lit on the township: on Support the person who answers, on Terms your record */
.held { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); pointer-events: none; }
.held li { position: relative; grid-row: var(--r); grid-column: var(--c); margin: 1px 0 0 1px; }
.held li::before { content: ""; position: absolute; inset: -1px; background: var(--lit); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 22px rgba(244, 196, 90, 0.22), 0 0 30px rgba(244, 196, 90, 0.28); }
.m .held li::before { opacity: 0; }
.m .twp.run ~ .held li::before { animation: hold 1s ease-out 1.6s both; }
@keyframes hold { 0% { opacity: 0; } 22% { opacity: 1; box-shadow: inset 0 0 0 1px #fff3cf, inset 0 0 30px rgba(244, 196, 90, 0.4), 0 0 46px rgba(244, 196, 90, 0.55); } 100% { opacity: 1; } }

/* The turn from the night scene to the day. */
.turn { height: 120px; background: linear-gradient(180deg, #16233c 0%, var(--indigo) 22%, #6f6577 44%, #b98063 60%, #e2ac68 72%, #f1cf92 84%, var(--paper) 100%); }

/* The words, by day, still: each part a heading and Mark's words under it, on cardstock over the contours. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 30px, #000 200px); mask-image: linear-gradient(transparent 30px, #000 200px); }
.doc { position: relative; padding-top: 56px; }
.doc-card { max-width: 820px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 34px 60px -40px rgba(35, 31, 26, 0.5); }
.part { padding: 22px 18px 24px; border-top: 1px solid var(--rule-ink); }
.part:first-child { border-top: 0; }
.part h2 { margin: 0; font-size: clamp(26px, 6.8vw, 36px); line-height: 1.12; color: var(--ink); }
.part p { margin-top: 12px; font-size: 17px; line-height: 1.62; color: var(--ink); max-width: 62ch; }
.part p a { color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; }
.part .mono { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
.part .act { margin-top: 18px; }
.btn-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ink:hover { background: rgba(35, 31, 26, 0.06); }
.doc-note { max-width: 820px; margin-top: 16px; font: 400 13px/1.55 var(--mono); color: var(--ink-2); }
.ai-sec { position: relative; padding-top: 40px; padding-bottom: 96px; }
.ai-sec .aibox { max-width: 820px; margin: 0 auto; }
.aibox h2 { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; color: var(--white); margin-top: 0; }

@media (max-height: 760px) and (max-width: 899px) {
  .first-copy { padding-top: calc(66px + env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .first h1 { margin-top: 8px; }
  .lead { font-size: 16.5px; }
  .first .actions { margin-top: 10px; }
  .first .coords { margin-top: 10px; }
  .plat { margin-top: 8px; margin-bottom: 6px; height: min(100% - 16px, 100vw); }
}
@media (min-width: 700px) { .lead { font-size: 20px; } }
@media (min-width: 900px) {
  .first-copy { --tw: min(560px, 100svh - 260px, 42vw); grid-template-columns: minmax(0, 1fr) var(--tw); grid-template-rows: minmax(0, 0.9fr) auto auto minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 72px); min-height: 680px; padding-top: 92px; padding-bottom: 40px; }
  .first-top { grid-row: 2; grid-column: 1; }
  .first-low { grid-row: 3; grid-column: 1; margin-top: 26px; }
  .plat { grid-column: 2; grid-row: 1 / -1; width: var(--tw); height: var(--tw); margin: 0; }
  .plat .twp i { font-size: 10.5px; padding: 6px 7px; }
  .first .coords { max-width: 420px; }
  .turn { height: 160px; }
  .doc { padding-top: 84px; }
  .part { padding: 30px 40px 34px; }
  .part p { font-size: 18px; }
  .ai-sec { padding-top: 56px; padding-bottom: 130px; }
}