/* Validated.Directory 2.0.0 · Talk to us (BEA-432; DIR 70). Loads after the kit, /dir/shell.css and /start/form.css;
   only this page's own. Night (a township where a group's businesses each hold a section of their own), the scene (a
   group comes in one business at a time: each lights, takes its own record, and shows the same $29), dawn, then the day
   and the conversation, whose received state burns the Box V, and the AI box. Every part reads still first. */

.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, .many { --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); }

/* 1 · The first screen (night). */
.first { position: relative; overflow: hidden; background: radial-gradient(130% 55% at 30% 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); }
.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; }
.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 calc(1.5s + var(--k) * 0.22s) 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; } }

/* 2 · The scene. Still first: the kit's numbered steps, then the township with every business finished. */
.many { position: relative; background: linear-gradient(180deg, #142038 0%, var(--canvas) 16%, var(--canvas) 80%, #16233c 100%); }
.many .stage { padding: 64px 0 50px; }
.grid-box { position: relative; z-index: 3; width: min(100% - 32px, 560px); margin: 30px auto 0; }
.tw { --tl: rgba(240, 230, 207, 0.26); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); aspect-ratio: 1; border-top: 1px solid var(--tl); border-left: 1px solid var(--tl); }
.tw li { position: relative; display: grid; align-content: space-between; padding: 4px 5px 5px; border-right: 1px solid var(--tl); border-bottom: 1px solid var(--tl); }
.tw i { font: 500 9px/1 var(--mono); font-style: normal; color: rgba(240, 230, 207, 0.5); }
.tw b { justify-self: end; font: 500 12px/1 var(--mono); color: var(--gold-bright); }
.tw .b::before { content: ""; position: absolute; inset: 0; background: var(--lit); box-shadow: var(--lit-edge); }
.tw .b::after { content: ""; position: absolute; inset: -4px; pointer-events: none; --g: var(--gold-bright);
  background: linear-gradient(var(--g), var(--g)) 0 0 / 7px 1px, linear-gradient(var(--g), var(--g)) 0 0 / 1px 7px, linear-gradient(var(--g), var(--g)) 100% 0 / 7px 1px, linear-gradient(var(--g), var(--g)) 100% 0 / 1px 7px,
    linear-gradient(var(--g), var(--g)) 0 100% / 7px 1px, linear-gradient(var(--g), var(--g)) 0 100% / 1px 7px, linear-gradient(var(--g), var(--g)) 100% 100% / 7px 1px, linear-gradient(var(--g), var(--g)) 100% 100% / 1px 7px;
  background-repeat: no-repeat; }
.tw .b i, .tw .b b { position: relative; }
.tw .b i { color: var(--gold-bright); }
.tw-k { margin-top: 16px; text-align: center; font: 500 12.5px/1.5 var(--mono); color: var(--cream); }
.tw-k .n { color: var(--gold-bright); }
.turn { height: 120px; background: linear-gradient(180deg, #16233c 0%, var(--indigo) 22%, #6f6577 44%, #b98063 60%, #e2ac68 72%, #f1cf92 84%, var(--paper) 100%); }

/* In motion: a tall track, a sticky stage; the kit shows the three steps one at a time, and the scroll lights the
   businesses, then their records, then their price. */
.m .many .track { height: 460vh; height: 460svh; }
.m .grid-box { position: absolute; left: 50%; top: 200px; width: min(100% - 32px, 100svh - 290px, 600px); margin: 0; transform: translateX(-50%); }
.m .tw .b::before, .m .tw .b::after, .m .tw b { opacity: 0; transition: opacity 0.35s ease-out; }
.m .tw .b i { color: rgba(240, 230, 207, 0.5); transition: color 0.35s; }
.m .tw .b.on::before { opacity: 1; }
.m .tw .b.on i { color: var(--gold-bright); }
.m .tw .b.own::after { opacity: 1; }
.m .tw .b.p29 b { opacity: 1; }
.many .sky { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

/* 3 · Day. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 40px, #000 220px); mask-image: linear-gradient(transparent 40px, #000 220px); }
.fs-2 { margin-top: 12px; }

@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); }
  .m .grid-box { top: 190px; width: min(100% - 32px, 100svh - 250px); }
}
@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; }
  .many .stage { padding: 110px 0 100px; }
  .lead { max-width: 100%; }
  .first-top, .first-low { min-width: 0; }
  .m .grid-box { left: var(--read-x); transform: none; top: calc(max(86px, 10vh) + 168px); width: min(420px, calc(100vw - var(--read-x) * 2)); }
  .tw i { font-size: 10.5px; }
  .tw b { font-size: 15px; }
  .tw li { padding: 6px 8px 8px; }
  .tw-k { font-size: 14px; }
  .turn { height: 160px; }
}