/* Validated.Directory 2.0.0 · the door AI tools come through (DIR 66, BEA-432). Loads after /brand/tokens.css,
   /brand/base.css and /dir/shell.css; only this page's own. A machine page, so it stays at night until the owner's part:
   the first screen (a lamp-lit desk wired through one hub), the round trip (the main act), the door's own reference in
   still words, then the sunrise over the owner's card, the day and the AI box, and the night footer. Every part is a
   still composition first (scripts off, reduced motion); html.m adds the scenes (page.js). Every asset path is absolute,
   because the Worker serves this page at /mcp to a browser too. */

/* ?draft in the address outlines every sentence written for this preview (data-draft). */
.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }
.n { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; white-space: nowrap; }

/* 1 · The first screen (night). Phone and tablet: the words on night, the desk between the headline and the lead, its
   edges fading into the night. Laptop: the desk on the right, rising out of the night where the words are. */
.first { position: relative; overflow: hidden; background: linear-gradient(180deg, #060a18 0%, #0a1024 36%, #0c1429 74%, #0a1024 100%); }
.first-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.first-copy { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + 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.6); }
.first-top, .first-low { position: relative; z-index: 2; }
.first-art { position: relative; z-index: 1; min-height: 0; margin: 14px calc(-1 * var(--gut-r)) 10px calc(-1 * var(--gut)); overflow: hidden; }
.first-art picture { display: contents; }
.first-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 46%;
  filter: saturate(0.94) brightness(0.92);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 26px), transparent 100%), linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 26px), transparent 100%), linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-composite: intersect;
}
/* the room after dark: the corners fall to night, the lamp-lit middle stays warm */
.first-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 58%, rgba(10, 16, 36, 0) 46%, rgba(10, 16, 36, 0.5) 100%); }
.first-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; color: var(--cream); }
.first .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.first .actions .btn { min-width: 132px; }
.first .coords { margin-top: 16px; }

/* 2 · The round trip. Still first: the steps as the kit's numbered list, then the question, the AI tool, its call, a
   dotted trail down to the door's answer, and the line it can quote. */
.trip { position: relative; background: linear-gradient(180deg, #0a1024 0%, var(--canvas) 30%, #0d1631 100%); }
.trip .stage { padding: 72px 0 64px; }
.rt { position: relative; z-index: 3; display: grid; gap: 46px; width: min(100% - 32px, 760px); margin: 34px auto 0; }
.rt-ask { position: relative; display: grid; justify-items: start; }
.q-k, .req-k, .cite-k, .ans-k { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.q-box { max-width: 30ch; padding: 11px 14px 12px; border: 1px dashed rgba(240, 230, 207, 0.42); background: rgba(10, 16, 36, 0.6); }
.q { margin-top: 4px; font: 400 clamp(19px, 5.2vw, 24px)/1.25 var(--display); color: var(--white); text-wrap: balance; }
.q::before { content: "\201C"; } .q::after { content: "\201D"; }
.tool { position: relative; display: inline-flex; align-items: center; min-height: 48px; margin-top: 16px; padding: 12px 20px; border: 1px solid rgba(240, 230, 207, 0.55); background: rgba(10, 16, 36, 0.86); font: 500 13px/1 var(--mono); letter-spacing: 0.05em; color: var(--cream); --cm: rgba(240, 230, 207, 0.6); }
.tool::after, .ans::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-bright); box-shadow: 0 0 26px rgba(244, 196, 90, 0.3), inset 0 0 18px rgba(244, 196, 90, 0.1); pointer-events: none; opacity: var(--g, 1); }
.ans::after { opacity: var(--o, 1); }
.slot { position: relative; width: 100%; margin-top: 12px; }
.req { display: grid; gap: 4px; }
.req code { font: 400 12.5px/1.5 var(--mono); color: var(--cream); overflow-wrap: anywhere; }
.req b { font-weight: 500; color: var(--gold-bright); }
.cite { margin-top: 18px; max-width: 46ch; padding: 11px 14px 12px; border-left: 2px solid var(--gold-bright); background: rgba(244, 196, 90, 0.06); }
.cite-t { margin-top: 4px; font: 400 12px/1.55 var(--mono); color: var(--cream); }
.cite-t a { color: var(--gold-bright); text-decoration-color: rgba(244, 196, 90, 0.5); }
.ans { position: relative; border: 1px solid var(--rule); --cm: rgba(240, 230, 207, 0.6); }
.ans .glass { position: absolute; inset: 0; background: var(--glass); opacity: var(--o, 1); }
.ans-door { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px 9px; border-bottom: 1px solid var(--rule); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--cream-2); }
.ans-door b { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.ans-k { position: relative; padding: 12px 14px 0; color: var(--gold-bright); }
.ans .jsonld { position: relative; border-top: 0; font-size: 11.5px; line-height: 1.55; padding: 8px 14px 16px; }
.ans .jsonld .a1 { padding-left: 3ch; text-indent: -3ch; }
.ans .jsonld .a2 { padding-left: 4ch; text-indent: -4ch; }
.ans .jsonld .hot b { color: var(--white); }
html:not(.m) .rt-ask::after { content: ""; position: absolute; left: 28px; top: calc(100% + 6px); height: 34px; border-left: 2px dotted rgba(244, 196, 90, 0.85); }

/* The round trip in motion (html.m): a tall track, a sticky stage under the kit's step lines; the ask at the top, the
   door's answer at the foot, the trail between them drawn by page.js. */
.m .trip .track { height: 560vh; height: 560svh; }
.m .trip .stage { padding: 0; }
.m .rt { position: absolute; left: 50%; top: 208px; transform-origin: 50% 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(100% - 32px, 560px); margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0; }
.m .rt-in { transform-origin: 50% 0; }
.m .ans { margin-top: auto; }
.m .ans .jsonld { opacity: 1; }
.m .ans .jsonld .jl { opacity: 0; }
.m .ans-k, .m .q-box, .m .req code, .m .req-k, .m .cite { opacity: 0; }
.m .tool { --g: 0; }
.m .ans { --o: 0; }
.m .slot { display: block; }
/* at the last beat the line it can quote takes the call's place, over the start of the trail (the light is home) */
.m .cite { position: absolute; left: 0; right: 0; top: 0; z-index: 5; margin-top: 0; max-width: none; background: #0d1530; border: 1px solid rgba(244, 196, 90, 0.7); border-left-width: 2px; box-shadow: 0 18px 40px -12px rgba(6, 10, 24, 0.9); }
.m .ans.tight .opt { display: none; }
.m .ans .jsonld .hot { transition: background-color 0.3s; }
.m .ans .jsonld .hot.lit { background: rgba(244, 196, 90, 0.14); box-shadow: -14px 0 0 rgba(244, 196, 90, 0.14), 14px 0 0 rgba(244, 196, 90, 0.14); }

/* 3 · The door's own words, still, at night. */
.ref { position: relative; padding: 76px 0 30px; background: linear-gradient(180deg, #0d1631 0%, var(--canvas) 40%); }
.ref-2 { padding-top: 40px; background: var(--canvas); }
.ref-3 { padding-top: 40px; padding-bottom: 86px; background: linear-gradient(180deg, var(--canvas) 0%, #0f1830 70%, var(--night-2) 100%); }
.ref-sky { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.ref-in { position: relative; z-index: 2; }
.ref-head h2 { color: var(--white); max-width: 15ch; }
.ref-say { margin-top: 14px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--cream); }
.ref code, .ck-p code { font: 400 0.9em/1.4 var(--mono); color: var(--gold-bright); overflow-wrap: anywhere; }
.tl { display: grid; gap: 14px; margin-top: 28px; }
.t { padding: 16px 16px 15px; background: rgba(11, 18, 37, 0.9); border: 1px solid var(--rule); --cm: rgba(240, 230, 207, 0.55); }
.tn { font: 500 15px/1.3 var(--mono); color: var(--gold-bright); overflow-wrap: anywhere; }
.td { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--cream); }
.ti { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule); font: 400 12.5px/1.5 var(--mono); color: var(--cream-2); }
.ti span { margin-right: 8px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.fl { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); }
.f { display: grid; align-content: start; gap: 3px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.f dt { font: 500 13px/1.4 var(--mono); color: var(--gold-bright); overflow-wrap: anywhere; }
.f dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cream); }
.f dd a { color: var(--cream); }
.fl-1 { margin-top: 10px; }
.cn { display: grid; gap: 10px; margin-top: 18px; }
.ck-h { margin-top: 22px; font: 600 12px/1.4 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.ck-p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--cream); }
.ck-p a { color: inherit; }
.code { margin-top: 10px; padding: 14px 15px; background: rgba(10, 16, 36, 0.86); border: 1px solid var(--rule); font: 400 12px/1.6 var(--mono); color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; --cm: rgba(240, 230, 207, 0.5); }
.code b { font-weight: 500; color: var(--gold-bright); }
.code.sig { color: var(--gold-bright); }
.roots { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; }
.roots a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--mono); color: var(--cream); }

/* 4 · Dawn: the owner's part, on a card the sunrise sweeps to cardstock. */
.close-head { padding: 58px 0 26px; background: linear-gradient(180deg, var(--night-2) 0%, #24364f 60%, var(--indigo) 100%); color: var(--cream); }
.close-head h2 { max-width: 14ch; color: var(--white); margin-top: 0; }
.close .card-c { max-width: 100%; }
.own .face-day, .own .face-night { display: block; }
.own-body { padding: 22px 20px 24px; }
.own-h { font: 400 clamp(26px, 7vw, 36px)/1.12 var(--display); color: var(--ink); max-width: 18ch; }
.own-p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 46ch; }
.own-price { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-ink); font: 500 15px/1.5 var(--mono); color: var(--ink); }
.own-price .n { font-size: 1.6em; letter-spacing: -0.02em; }
.own-act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.own-act .btn { min-width: 132px; }
.own-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; }
.face-night .own-h, .face-night .own-p, .face-night .own-price, .face-night .own-act > span { color: var(--cream); }
.face-night .own-price { border-color: var(--rule); }
.face-night .own-act > span:first-child { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; min-height: 46px; padding: 12px 22px; border: 1px solid rgba(240, 230, 207, 0.72); font: 600 var(--fs-button)/1 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; }
.face-night .own-act > span + span { font-weight: 600; text-decoration: underline; text-underline-offset: 0.22em; }

/* 5 · Day: the AI box, the one piece of night in it. */
#day { padding: 34px 0 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; }

/* Short phones: the same, set tighter. */
@media (max-height: 760px) and (max-width: 899px) {
  .first-copy { padding-top: calc(70px + 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; }
  .first-art { margin-top: 10px; margin-bottom: 6px; }
  .m .rt { top: 208px; }
  .q { font-size: 18px; }
  .tool { min-height: 44px; margin-top: 10px; padding: 10px 16px; }
  .ans .jsonld { font-size: 10.5px; padding: 6px 12px 12px; }
}

/* Laptop and up: the words left and the desk right; the round trip across the screen; the tools in a grid. */
@media (min-width: 900px) {
  /* the words keep a column of their own (three lines of headline at the kit's size); the desk takes the rest of the
     screen to its right edge, its left edge fading into the night just short of the words */
  .first-copy { position: static; --col: min(600px, 46vw); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.9fr) auto auto minmax(0, 1fr); min-height: 680px; padding-top: 92px; padding-bottom: 40px; }
  .first-top { grid-row: 2; max-width: var(--col); }
  .first-low { grid-row: 3; max-width: var(--col); margin-top: 28px; }
  .first .coords { max-width: 420px; margin-top: 26px; }
  .first-art { position: absolute; top: 0; right: var(--read-x); bottom: 0; left: auto; width: var(--hero-art); margin: 0; }
  .first-img { object-position: 54% 58%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0, transparent 66px, #000 180px, #000 calc(100% - 70px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 16%, #000 34%, #000 100%), linear-gradient(180deg, transparent 0, transparent 66px, #000 180px, #000 calc(100% - 70px), transparent 100%); }
  .first-art::after { background: radial-gradient(90% 85% at 62% 60%, rgba(10, 16, 36, 0) 50%, rgba(10, 16, 36, 0.55) 100%); }
  .lead { font-size: 20px; }
  .trip .stage { padding: 110px 0 100px; }
  .rt { width: min(100vw - var(--read-x) * 2, 796px); margin-left: var(--read-x); margin-right: var(--read-x); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: center; }
  html:not(.m) .rt-ask::after { left: calc(100% + 16px); top: 50%; width: min(90px, 6vw); height: 0; border-left: 0; border-top: 2px dotted rgba(244, 196, 90, 0.85); }
  .m .rt { top: max(220px, 24vh); bottom: 48px; left: var(--read-x); right: var(--read-x); width: auto; transform: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .m .ans { margin-top: 0; }
  .q { font-size: 28px; }
  .tool { font-size: 17px; padding: 18px 34px; min-height: 64px; margin-top: 22px; }
  .req code { font-size: 16px; }
  .slot { margin-top: 16px; }
  .cite-t { font-size: 14px; }
  .ans .jsonld { font-size: 14px; padding: 12px 26px 24px; }
  .ans-k { padding: 18px 26px 0; }
  .ans-door { padding: 12px 26px 11px; font-size: 12px; }
  .ref { padding-top: 120px; }
  .ref-2, .ref-3 { padding-top: 70px; }
  .ref-3 { padding-bottom: 130px; }
  .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .t { padding: 22px 22px 20px; }
  .tn { font-size: 16px; }
  .fl:not(.fl-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .f { padding: 14px 0 15px; }
  .f-w { grid-column: 1 / -1; }
  .cn { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 64px; }
  .close-head { padding: 100px 0 34px; }
  .own-body { padding: 34px 40px 38px; }
  .own-p { font-size: 19px; }
  #day { padding: 56px 0 130px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .m .rt { top: 200px; }
  .ans .jsonld { font-size: 12.5px; line-height: 1.5; }
}

/* The question's own quotation marks come with its first and last characters as it types (html.m). */
.m .q::before, .m .q::after { opacity: 0; }
.m .q.q-on::before, .m .q.q-end::after { opacity: 1; }