/* Validated.Directory 2.0.0 · working from home (BEA-432). Loads after /learn/_guide/guide.css. The main act: a
   made-up business run from a home near Whitefish. Its listing sends customers to the house; the address is hidden; a
   P.O. box is not accepted instead; the towns it serves are written down and light up, the home staying dark and
   private; the record carries the town and the towns, with no street. On the same valley as the chamber challenge and
   covering the towns you serve. The still composition is the default (scripts off, reduced motion); motion only under
   html.m (page.js). */

.cvs { position: relative; background: var(--canvas); }
.cv { position: relative; --cv-len: 7; }
.cv-stage { position: relative; padding: 48px 16px 56px; }
.cv-sky, .cv-fx { display: none; }
.cv-head, .cv-zone, .cv-cards, .cv-out { position: relative; z-index: 2; max-width: 1176px; margin-inline: auto; }
.cv-head h2 { margin-top: 10px; max-width: 16ch; font-size: clamp(30px, 8.4vw, 54px); line-height: 1.06; color: var(--white); }

/* ---- The valley, sketched: the lake, six towns, a chamber in each ------------------------------------------------- */
.cv-zone { margin-top: 26px; }
.vm { position: relative; aspect-ratio: 4 / 5; max-width: 560px; margin-inline: auto; }
.vt { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); display: flex; align-items: center; gap: 6px; margin: 0; transform: translate(-6px, -50%); }
.vt.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.vt > i { flex: 0 0 auto; width: 12px; height: 12px; border: 1.5px solid var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 12px 2px rgba(244, 196, 90, 0.55); transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s; }
.vt > span { padding: 2px 6px 3px; background: rgba(10, 16, 36, 0.86); font: 600 13.5px/1.2 var(--sans); color: var(--white); white-space: nowrap; }
.vt.asks > span { outline: 1px solid rgba(240, 230, 207, 0.6); outline-offset: 2px; }

/* ---- The cards: what each step shows beside the map ---------------------------------------------------------------- */
.cv-cards { display: grid; gap: 22px; margin-top: 30px; max-width: 560px; }
.cc { position: relative; padding: 12px 14px 13px; border: 1px solid var(--rule); background: rgba(22, 33, 52, 0.72); }
.cc-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.cc-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 500 12.5px/1.4 var(--mono); color: var(--cream-2); transition: opacity 0.35s; }
.cc-a b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f0a48f; }
.cc-web, .cc-rec { background: var(--paper-hi); border-color: rgba(35, 31, 26, 0.4); --cm: rgba(240, 230, 207, 0.62); color: var(--ink); }
.cc-web .cc-k, .cc-rec .cc-k { color: var(--ink-2); }
.cc-s { margin-top: 7px; font: 400 clamp(19px, 5.3vw, 25px)/1.3 var(--display); color: var(--ink); }
.cc-s .w { transition: opacity 0.2s; }
.cc-s .tn { background: rgba(244, 196, 90, 0.42); box-shadow: 0 0 0 1px rgba(125, 90, 26, 0.5); transition: background-color 0.35s, box-shadow 0.35s, opacity 0.2s; }
.cc-rec-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.cc-rl { margin-top: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cc-chips { margin-top: 5px; gap: 5px; }
.cc-chips li { padding: 3px 7px 4px; font-size: 13.5px; background: rgba(244, 196, 90, 0.3); border-color: var(--gold-ink); transition: background-color 0.3s, border-color 0.3s; }
.cc-rec .brand-day { margin: 2px 0 0; }
.cc-rec .brand-day .iron { width: 50px; height: 50px; }

/* ---- The steps ------------------------------------------------------------------------------------------------------ */
.cv-out { margin-top: 34px; max-width: 760px; }
.cv-steps { display: grid; gap: 16px; }
.cv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); }
.cv-n { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.cv-k { font: 600 17px/1.3 var(--sans); color: var(--white); }
.cv-t { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.5; color: var(--cream); }
.cv-t strong { color: var(--white); font-weight: 650; }
.cv-tk { display: none; }

/* ---- In motion: the stage pins; the map takes the room left; one card and one step at a time ----------------------- */
.m .cv { height: calc(var(--cv-len) * 100vh); height: calc(var(--cv-len) * 100svh); }
.m .cv-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .cv-head, .m .cv-zone, .m .cv-cards, .m .cv-out { width: 100%; }
.m .cv-head h2 { font-size: clamp(26px, 7.6vw, 46px); }
.js .cv-sky, .js .cv-fx { display: block; position: absolute; pointer-events: none; }   /* drawn with motion off too: the finished land and trails */
.js .cv-sky { z-index: 0; inset: 0; width: 100%; height: 100%; }
.js .cv-fx { z-index: 1; inset: 0; width: 100%; height: 100%; }
.m .cv-zone { margin-top: 10px; min-height: 0; }
.m .vm { position: absolute; inset: 14px 8px 18px; aspect-ratio: auto; max-width: none; margin: 0; }
.m .vt:not(.on) > i { background: transparent; border-color: rgba(240, 230, 207, 0.55); box-shadow: none; }
.m .vt:not(.on) > span { color: var(--cream-2); }
.m .cv-cards { display: grid; margin-top: 8px; max-width: none; }
.m .cc { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
.m .cc.cur { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.m .cc-s .w:not(.on) { opacity: 0; }
.m .cc-s .tn:not(.lit) { background: transparent; box-shadow: none; }
.m .cv-out { margin-top: 12px; padding-top: 0; max-width: none; }
.m .cv-steps { display: grid; gap: 0; }
.m .cv-steps li { grid-area: 1 / 1; padding-top: 10px; opacity: 0; visibility: hidden; }
.m .cv-steps li.cur { opacity: 1; visibility: visible; animation: cv-in 0.35s ease-out backwards; }
.m .cv-t { min-height: calc(3 * 1.45em); font-size: 16px; line-height: 1.45; }
.m .cv-tk { display: flex; gap: 4px; margin-top: 8px; }
.cv-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.24); transition: background-color 0.3s; }
.cv-tk i.on { background: var(--gold-bright); }
@keyframes cv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Small phones (Mark's at 125%, about 314 wide): tighter type so the map keeps its room */
@media (max-width: 360px) {
  .vt > span { font-size: 12.5px; padding-inline: 4px; }
  .cc { padding: 10px 11px 11px; }
  .m .cv-t { font-size: 15px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .m .cv-stage { padding-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .m .cv-head h2 { font-size: 24px; margin-top: 6px; }
  .m .cv-head .eyebrow { font-size: 11px; }
  .m .cc-q, .m .cc-s { font-size: 18px; }
  .m .cv-t { min-height: calc(3 * 1.4em); line-height: 1.4; }
}

/* Laptop and up: the words on the left, the valley on the right */
@media (min-width: 900px) {
  .cv-stage { padding: 96px var(--read-x) 96px; }
  html:not(.m) .cv-stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: start; }
  html:not(.m) :is(.cv-head, .cv-zone, .cv-cards, .cv-out) { width: 100%; margin-inline: 0; }
  html:not(.m) .cv-head { grid-column: 1 / -1; }
  html:not(.m) .cv-zone { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 96px; }
  html:not(.m) .cv-cards { grid-column: 1; grid-row: 2; margin-top: 26px; }
  html:not(.m) .cv-out { grid-column: 1; grid-row: 3; }
  .vt > span { font-size: 15px; padding: 3px 7px 4px; }
  .cc { padding: 16px 18px 17px; }
  .cc-chips li { font-size: 14.5px; }
  .cc-s { font-size: 30px; }
  .cc-name { font-size: 30px; }
  .cc-row { font-size: 14px; }
  .cc-rec .brand-day .iron { width: 58px; height: 58px; }
  .m .cv-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 56px); padding-top: 104px; padding-bottom: 44px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .cv-head { grid-column: 1; grid-row: 1; }
  .m .cv-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .m .cv-zone { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .m .vm { inset: 0 12px 8px; }
  .m .cv-cards { grid-column: 1; grid-row: 2; align-self: center; margin-top: 24px; max-width: 520px; }
  .m .cc { align-self: center; }
  .m .cv-out { grid-column: 1; grid-row: 3; align-self: end; padding-top: 12px; border-top: 1px solid var(--rule); }
  .m .cv-steps li { border-top: 0; padding-top: 0; }
  .cv-k { font-size: 20px; }
  .cv-n { font-size: 12.5px; }
  .m .cv-t { font-size: 21px; line-height: 1.4; min-height: calc(3 * 1.4em); }
}

/* ---- This guide's own pieces ----------------------------------------------------------------------------------------- */
.vt.home > span::after { content: " · based here"; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--cream-2); }
.vt.hp > i { background: transparent; border: 1.5px dashed rgba(240, 230, 207, 0.5); box-shadow: none; }
.vt.hp > span { color: var(--cream-2); font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.04em; }
.vt.hp .a1 { display: none; }
.cc-name { margin-top: 6px; font: 400 clamp(21px, 5.8vw, 26px)/1.15 var(--display); color: var(--white); }
.cc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 7px; font: 500 12.5px/1.4 var(--mono); color: var(--cream); }
.cc-row > b { min-width: 8ch; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.86em; color: var(--cream-2); }
.cc-rec .cc-row { color: var(--ink); }
.cc-rec .cc-row > b { color: var(--ink-2); }
.cc-none span { color: var(--ink-2); }
.sw { display: inline-grid; }
.sw > * { grid-area: 1 / 1; transition: opacity 0.35s; }
.sw .v1 { opacity: 0; }
.sw .v2 { color: var(--gold-bright); }
.cc-list .cc-row:first-of-type .v2::before { content: "+ "; }
.cc-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 500 12.5px/1.4 var(--mono); color: var(--cream-2); }
.cc-a b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f0a48f; }
.cc-po .cc-row span { text-decoration: line-through; text-decoration-color: rgba(240, 164, 143, 0.8); }
/* in motion: step 1 the home is lit and named; from step 2 it is dark and private */
.m .vt.hp.shown > i { background: #f0e6cf; border: 1.5px solid #f0e6cf; box-shadow: 0 0 14px 3px rgba(240, 230, 207, 0.45); }
.m .vt.hp.shown > span { color: var(--white); }
.m .vt.hp.shown .a1 { display: inline; }
.m .vt.hp.shown .a2 { display: none; }
.m .cc-list.shown .v1 { opacity: 1; }
.m .cc-list.shown .v2 { opacity: 0; }
.m .cc-list.shown .cc-row:first-of-type .v1 { background: rgba(240, 230, 207, 0.16); box-shadow: 0 0 0 1px rgba(240, 230, 207, 0.5); }
.m .cc-po:not(.answered) .cc-a { opacity: 0; }
.m .cc-po:not(.answered) .cc-row span { text-decoration-color: transparent; }
.cc-a, .cc-po .cc-row span { transition: opacity 0.35s, text-decoration-color 0.35s; }
@media (max-width: 599px) { .vt.home > span::after { content: ""; } }
@media (min-width: 900px) {
  .vt.hp > span { font-size: 13px; }
  .cc-a { font-size: 14px; }
}
@media (min-width: 900px) { .m .vm { inset: 0 9% 8px 6%; } }   /* three towns: a tighter valley, so the land is not empty */