/* ══════════ VANDERBILT VOYAGE ONLINE · the voyage design layer ══════════
   Brand stays intact: VU black, Flat Gold, Oak, Libre Caslon (one italic
   word per headline), Inter, Antonio. Everything here reads theme-scope
   tokens (--tx, --eyebrow, --card ...). Motion under 400ms, off for
   prefers-reduced-motion. One idea per page: a headline that carries the
   point, one line of why, one interaction. Narration carries the rest. */

/* ── page frame ── */
html.paged .page > section.v-sec{ display:flex; flex-direction:column; justify-content:center; padding:clamp(18px,3.5vh,44px) 0 clamp(22px,4vh,48px); }
.v-sec .wrap{ max-width:1240px; }
.v-sec .wrap.narrow{ max-width:860px; }

/* the lesson rail: where you are, as six segments */
.v-rail{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,2.6vh,28px); font-family:var(--cond); font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--eyebrow); }
.v-rail::before{ content:''; display:block; flex:0 0 120px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--eyebrow) calc(var(--l,0) * 16.66%), rgba(255,255,255,.14) 0); }
.v-rail[data-lesson="0"]{ --l:0; } .v-rail[data-lesson="1"]{ --l:1; } .v-rail[data-lesson="2"]{ --l:2; } .v-rail[data-lesson="3"]{ --l:3; }
.v-rail[data-lesson="4"]{ --l:4; } .v-rail[data-lesson="5"]{ --l:5; } .v-rail[data-lesson="6"]{ --l:6; }

/* two-column stage: the idea on the left, the doing on the right */
.v-stage{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,4vw,64px); align-items:center; }
.v-stage.wide-act{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
@media (max-width:1000px){ .v-stage, .v-stage.wide-act{ grid-template-columns:minmax(0,1fr); gap:22px; } }

/* type */
.v-h{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,2.6vw + 1rem,3.5rem); line-height:1.06; letter-spacing:-.01em; color:var(--tx); text-wrap:balance; max-width:16ch; }
.v-h em{ font-family:var(--serif-i); font-style:italic; color:var(--eyebrow); }
.v-h.sm{ font-size:clamp(1.6rem,1.6vw + 1rem,2.4rem); max-width:none; }
.v-h.center{ text-align:center; margin-inline:auto; }
.v-why{ margin-top:14px; font-size:clamp(1.05rem,.5vw + .9rem,1.25rem); line-height:1.5; color:var(--tx2); max-width:38ch; }
.v-label{ display:block; font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--eyebrow); }
.v-latin{ font-family:var(--serif-i); font-style:italic; color:var(--eyebrow); font-size:clamp(1.1rem,1vw + .8rem,1.5rem); letter-spacing:.01em; margin-bottom:6px; }

/* the task chip: what to do here, and a check when it is done */
.v-task{ display:inline-flex; align-items:center; gap:10px; margin:clamp(14px,2.4vh,24px) 0 12px; font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx); }
.v-act > .v-task:first-child{ margin-top:0; }
.v-task::before{ content:''; width:18px; height:18px; flex:0 0 18px; border-radius:50%; border:2px solid var(--eyebrow); }
.v-task.done{ color:var(--eyebrow); }
.v-task.done::before{ background:var(--eyebrow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.v-task.center{ display:flex; justify-content:center; }
.v-port-empty{ color:var(--tx3); font-size:.98rem; }

/* ── hero ── */
.v-hero{ position:relative; overflow:hidden; justify-content:flex-end !important; }
html.paged .v-hero{ padding:0 0 clamp(28px,6vh,72px); }
.v-hero-bg{ position:absolute; inset:0; z-index:0; }
.v-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; animation:vDrift 28s ease-in-out infinite alternate; }
.v-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,28,28,.35) 0%, rgba(28,28,28,.55) 45%, #1C1C1C 100%); }
@keyframes vDrift{ from{ transform:scale(1.04) translateX(0); } to{ transform:scale(1.1) translateX(-2%); } }
.v-hero-in{ position:relative; z-index:2; }
.v-kicker{ font-family:var(--cond); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vu-gold); }
.v-display{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,7vw + 1rem,7.5rem); line-height:.98; letter-spacing:-.02em; color:#fff; margin-top:10px; }
.v-display em{ font-family:var(--serif-i); font-style:italic; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }
.v-display.sm{ font-size:clamp(2.6rem,5vw + 1rem,5.5rem); }
.v-hello{ font-size:clamp(1.1rem,.6vw + .95rem,1.4rem); color:rgba(255,255,255,.86); margin-top:14px; }
.v-hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:clamp(18px,3vh,30px); }
.v-hero-cta.center{ justify-content:center; }
.v-hero-cta .btn svg{ width:18px; height:18px; }
.v-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.v-meta li{ font-family:var(--cond); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 12px; }
.v-goals{ margin-top:clamp(16px,3vh,28px); max-width:720px; border-top:1px solid rgba(207,174,112,.35); padding-top:12px; }
.v-goals summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vu-gold); min-height:44px; }
.v-goals summary::-webkit-details-marker{ display:none; }
.v-goals summary::after{ content:'+'; font-family:var(--sans); font-size:1.2rem; line-height:1; transition:transform .2s ease; }
.v-goals[open] summary::after{ transform:rotate(45deg); }
.v-goals ol{ margin-top:6px; padding-left:1.2em; display:grid; gap:6px; color:rgba(255,255,255,.86); font-size:.95rem; line-height:1.45; }
.v-goals ol li::marker{ color:var(--vu-gold); font-family:var(--cond); }
.v-goals b{ color:#fff; font-weight:600; }

/* ── mission ── */
.v-focus{ display:grid; gap:8px; }
.v-focus button{ display:grid; grid-template-columns:34px 1fr; gap:2px 12px; align-items:center; text-align:left; width:100%; border:1px solid var(--bd); background:var(--card); color:var(--tx); border-radius:var(--r); padding:12px 14px; cursor:pointer; font:inherit; transition:border-color .2s ease, background .2s ease; }
.v-focus button:hover{ border-color:var(--bdg); }
.v-focus button i{ font-style:normal; font-family:var(--serif); font-size:1.5rem; color:var(--eyebrow); grid-row:span 2; text-align:center; }
.v-focus button b{ font-weight:600; font-size:1rem; }
.v-focus button span{ display:none; grid-column:2; color:var(--tx2); font-size:.9rem; line-height:1.5; margin-top:4px; }
.v-focus button[aria-expanded="true"]{ border-color:var(--eyebrow); background:var(--card2); }
.v-focus button[aria-expanded="true"] span{ display:block; }
.v-map{ border:1px solid var(--bd); border-radius:var(--r); background:var(--card2); padding:clamp(14px,2vw,22px); }
.v-map figcaption{ color:var(--tx2); font-size:.98rem; margin-bottom:8px; }
.v-map figcaption b{ color:var(--tx); font-family:var(--serif); font-weight:400; font-size:1.25rem; display:block; }
.v-map .us-map{ max-height:none; width:100%; }
.v-cities a{ display:inline-block; font-size:.84rem; color:var(--tx); text-decoration:none; border:1px solid var(--bdg); border-radius:999px; padding:5px 12px; }
.v-cities a:hover{ border-color:var(--eyebrow); color:var(--eyebrow); }
.v-part{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.v-part li{ border-top:2px solid var(--eyebrow); padding-top:8px; font-size:.95rem; color:var(--tx); }
.v-part b{ font-weight:600; }
@media (max-width:560px){ .v-part{ grid-template-columns:1fr; } }

/* the five cities: an icon per city, each for its own field */
.us-map .pin .badge{ fill:var(--vu-black); stroke:var(--vu-gold); stroke-width:1.6; }
.us-map .pin .ic{ fill:none; stroke:var(--vu-gold); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.us-map .pin .ic .fillc{ fill:var(--vu-gold); stroke:none; }
.us-map .pin.home .badge{ fill:var(--vu-gold); stroke:#fff; stroke-width:1.2; }
.us-map .pin.home .ic{ stroke:var(--vu-black); }
.us-map .pin *{ pointer-events:none; }
.us-map .pin .badge{ pointer-events:all; cursor:pointer; }
.us-map .pin.on .badge{ fill:var(--vu-gold); stroke:#fff; }
.us-map .pin.on .ic{ stroke:var(--vu-black); }
.us-map .pin.on .ic .fillc{ fill:var(--vu-black); }
.us-map .pin.on text{ fill:var(--vu-gold); }
.v-cities{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.v-cities button{ font:inherit; font-size:.84rem; color:var(--tx); background:none; border:1px solid var(--bdg); border-radius:999px; padding:6px 12px; cursor:pointer; min-height:36px; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.v-cities button:hover{ border-color:var(--eyebrow); color:var(--eyebrow); }
.v-cities button[aria-pressed="true"]{ background:var(--eyebrow); border-color:var(--eyebrow); color:var(--vu-black); }
.v-city{ margin-top:12px; border-top:1px solid var(--bd); padding-top:12px; min-height:84px; }
.v-city .v-label{ display:flex; align-items:center; gap:8px; }
.v-city .v-label svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.v-city .v-label svg .fillc{ fill:currentColor; stroke:none; }
.v-city b{ display:block; font-family:var(--serif); font-weight:400; font-size:1.2rem; color:var(--tx); margin-top:4px; }
.v-city p{ color:var(--tx2); font-size:.92rem; line-height:1.5; margin-top:2px; }
.v-city a{ color:var(--link); font-size:.88rem; }

/* ── lesson 1: the welcome video first, then explore ── */
.v-welcome{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(14px,2.2vh,22px); }
.v-stephead{ display:flex; align-items:center; gap:14px; }
.v-step{ flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--eyebrow); color:var(--vu-black); font-family:var(--serif); font-size:1.3rem; }
.v-h.xs{ font-size:clamp(1.25rem,.8vw + 1rem,1.7rem); max-width:none; }
.v-welcome .v-hero-video{ margin:0 auto; width:min(100%, 1000px, calc((100svh - 500px) * 1.7778)); min-width:min(100%, 480px); }
.v-video.v-hero-video .v-ph-play{ width:84px; height:84px; }
.v-video.v-hero-video .v-ph-play svg{ width:32px; height:32px; }
html.paged .page > section#welcome{ padding-top:clamp(12px,2.4vh,32px); padding-bottom:clamp(12px,2.4vh,32px); }
#welcome .v-rail{ margin-bottom:clamp(8px,1.6vh,18px); }
#welcome .v-route i{ width:50px; height:50px; }
#welcome .v-route::before{ top:31px; }
.v-explore{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(16px,3vw,40px); align-items:end; border-top:1px solid var(--bd); padding-top:clamp(14px,2.2vh,22px); }
.v-explore .v-task{ margin:10px 0 8px; }
.v-explore .v-port{ margin-top:0; min-height:0; }
@media (max-width:1000px){ .v-explore{ grid-template-columns:minmax(0,1fr); } }

/* ── lesson 1: the route ── */
.v-route{ list-style:none; position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding-top:6px; }
.v-route::before{ content:''; position:absolute; left:8%; right:8%; top:34px; border-top:2px dashed rgba(207,174,112,.45); }
.v-route button{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; background:none; border:0; color:var(--tx2); cursor:pointer; font:inherit; padding:0 2px 6px; min-height:44px; }
.v-route i{ font-style:normal; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--vu-black); border:2px solid var(--eyebrow); font-family:var(--serif); font-size:1.4rem; color:var(--eyebrow); transition:background .2s ease, color .2s ease, transform .2s ease; }
.v-route span{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; text-align:center; }
.v-route button:hover i{ transform:translateY(-2px); }
.v-route button.seen i{ background:rgba(207,174,112,.16); }
.v-route button[aria-expanded="true"] i{ background:var(--eyebrow); color:var(--vu-black); }
.v-route button[aria-expanded="true"] span{ color:var(--tx); }
.v-port{ margin-top:18px; border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:18px 20px; min-height:132px; }
.v-port h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--tx); display:flex; align-items:center; gap:8px; }
.v-port p{ color:var(--tx2); margin-top:6px; max-width:52ch; }
.v-port ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.v-port li{ font-size:.84rem; color:var(--tx); background:var(--field); border:1px solid var(--bd); border-radius:999px; padding:5px 11px; }
@media (max-width:560px){ .v-route{ grid-template-columns:repeat(3,1fr); row-gap:14px; } .v-route::before{ display:none; } }

/* videos: a placeholder still until config.js names the file */
.v-video{ position:relative; margin-top:18px; border-radius:var(--r); overflow:hidden; border:1px solid var(--bdg); background:#000; aspect-ratio:16/9; max-width:100%; }
.v-act > .v-video{ margin-top:0; }
.v-video video{ position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.v-video .v-ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v-video.nomedia .v-ph{ filter:saturate(.8) brightness(.62); }
.v-video .v-ph-play{ display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; border:2px solid var(--vu-gold); background:rgba(28,28,28,.55); color:var(--vu-gold); place-items:center; }
.v-video .v-ph-play svg{ width:24px; height:24px; margin-left:3px; }
.v-video.nomedia .v-ph-play{ display:grid; }
.v-video figcaption{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:28px 14px 10px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.78)); color:#fff; font-size:.88rem; pointer-events:none; transition:opacity .2s ease; }
.v-video:not(.nomedia) figcaption{ display:none; }
.v-video .v-soon{ display:none; position:absolute; z-index:3; top:10px; right:10px; font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:var(--vu-black); color:var(--vu-gold); border:1px solid var(--vu-gold); border-radius:999px; padding:4px 10px; }
.v-video.nomedia .v-soon{ display:block; }

/* a hosted player: the still with a live play button, then the player in place */
.v-video.facade .v-ph{ filter:saturate(.9) brightness(.72); }
.v-video .v-play{ position:absolute; inset:0; z-index:4; background:none; border:0; cursor:pointer; padding:0; }
.v-video .v-play .v-ph-play{ display:grid; transition:transform .2s ease, background .2s ease; }
.v-video .v-play:hover .v-ph-play, .v-video .v-play:focus-visible .v-ph-play{ transform:translate(-50%,-50%) scale(1.06); background:var(--vu-gold); color:var(--vu-black); }
.v-video .v-play:focus-visible{ outline:2px solid var(--focus); outline-offset:-4px; }
.v-video.facade figcaption{ display:block; }
.v-video iframe{ position:absolute; inset:0; z-index:5; width:100%; height:100%; border:0; background:#000; }
.v-video.playing .v-play, .v-video.playing figcaption{ display:none; }

/* ── lesson 2: the years ── */
.v-years{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; border-bottom:1px solid var(--bd); }
.v-years button{ background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; color:var(--tx3); font-family:var(--serif); font-size:clamp(1.3rem,1.2vw + .9rem,2rem); padding:6px 2px 10px; cursor:pointer; transition:color .2s ease, border-color .2s ease; min-height:44px; }
.v-years button:hover{ color:var(--tx); }
.v-years button.seen{ color:var(--tx2); }
.v-years button[aria-selected="true"]{ color:var(--eyebrow); border-bottom-color:var(--eyebrow); }
.v-year-out{ padding-top:14px; min-height:112px; }
.v-year-out b{ display:block; font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--tx); }
.v-year-out p{ color:var(--tx2); margin-top:4px; line-height:1.5; }

/* embeds */
.v-embed-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:14px; }
.v-embed-head .btn svg{ width:16px; height:16px; }
.embed{ border:1px solid var(--bdg); border-radius:var(--r); overflow:hidden; background:#FFFFFF; height:min(64vh, 760px); min-height:380px; }
.embed iframe{ display:block; width:100%; height:100%; border:0; }

/* ── lesson 2: the history timeline ── */
.v-tl{ border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:clamp(18px,2.6vw,32px); }
.tl-track{ position:relative; overflow-x:auto; padding:6px 2px 4px; }
.tl-line{ position:absolute; left:calc(100% / 24); right:calc(100% / 24); top:24px; height:2px; background:rgba(207,174,112,.25); }
.tl-line i{ display:block; height:100%; width:0; background:var(--eyebrow); transition:width .38s cubic-bezier(.33,1,.68,1); }
.tl-nodes{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(56px,1fr)); }
.tl-node{ display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:0; color:var(--tx2); font:inherit; cursor:pointer; padding:6px 2px; min-height:44px; opacity:0; transform:translateY(8px); }
.v-tl.drawn .tl-node{ animation:tlIn .32s ease-out both; animation-delay:var(--d); }
@keyframes tlIn{ to{ opacity:1; transform:none; } }
.tl-node .dot{ width:18px; height:18px; border-radius:50%; background:var(--vu-black); border:2px solid var(--eyebrow); transition:transform .2s ease, background .2s ease; }
.tl-node .yr{ font-family:var(--serif); font-size:clamp(1rem,.6vw + .8rem,1.3rem); font-variant-numeric:tabular-nums; }
.tl-node:hover .dot{ transform:scale(1.2); }
.tl-node.past .dot, .tl-node.seen .dot{ background:var(--eyebrow); }
.tl-node[aria-selected="true"] .dot{ background:var(--vu-highlight); border-color:var(--vu-highlight); transform:scale(1.35); box-shadow:0 0 0 6px rgba(207,174,112,.18); }
.tl-node[aria-selected="true"] .yr{ color:var(--eyebrow); }
.tl-node:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
.tl-card{ margin-top:clamp(16px,2.6vh,26px); border-top:1px solid var(--bd); padding-top:clamp(14px,2.2vh,22px); min-height:150px; }
.tl-card.in .tl-body{ animation:tlCard .3s ease-out both; }
@keyframes tlCard{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
.tl-body{ display:grid; grid-template-columns:auto 1fr; gap:6px clamp(16px,3vw,40px); align-items:start; margin-top:8px; }
.tl-yr{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,4vw + 1rem,5.5rem); line-height:.9; color:var(--eyebrow); font-variant-numeric:tabular-nums; }
.tl-body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,1vw + 1.05rem,2rem); color:var(--tx); line-height:1.15; }
.tl-body p{ color:var(--tx2); margin-top:8px; line-height:1.55; max-width:58ch; font-size:1.02rem; }
.tl-ctl{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.tl-ctl .btn svg{ width:16px; height:16px; }
.tl-count{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.08em; color:var(--tx3); font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .tl-body{ grid-template-columns:1fr; } .tl-nodes{ grid-template-columns:repeat(12, 64px); } .tl-line{ left:32px; right:auto; width:calc(64px * 11); } }
@media (prefers-reduced-motion: reduce){ .tl-node{ opacity:1; transform:none; } .v-tl.drawn .tl-node, .tl-card.in .tl-body{ animation:none; } .tl-line i{ transition:none; } }

/* ── lesson 2: leadership ── */
.v-person{ display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:end; margin-top:18px; }
.v-person img{ width:140px; height:175px; object-fit:cover; object-position:center 20%; border-radius:var(--r); border:1px solid var(--bdg); }
.v-name{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,1vw + 1.1rem,2rem); color:var(--tx); margin:2px 0 10px; }
.v-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.v-chips li{ font-size:.82rem; color:var(--tx); border:1px solid var(--bdg); border-radius:999px; padding:5px 11px; background:var(--field); }
.vc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--bd); }
.vc-row p{ color:var(--tx2); font-size:.92rem; }
.vc-row p b{ display:block; color:var(--tx); font-weight:600; font-size:1rem; }
.vc-row .btn{ text-decoration:none; }
@media (max-width:480px){ .v-person{ grid-template-columns:100px 1fr; } .v-person img{ width:100px; height:125px; } }

/* fact or fiction, as a card deck */
.v-deck .dq{ border:1px solid var(--bdg); background:var(--card2); border-radius:var(--r); padding:clamp(18px,2.4vw,28px); box-shadow:8px 8px 0 -1px var(--card), 8px 8px 0 0 var(--bd); }
.v-deck .dq-s{ font-family:var(--serif); font-size:clamp(1.25rem,1vw + 1rem,1.7rem) !important; line-height:1.3; color:var(--tx); }
.v-deck .dq-s b{ display:block; font-family:var(--cond); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:8px; }
.v-deck .dq-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.v-deck .dq-opts button{ border-radius:var(--r); padding:14px 16px; font-size:1rem; font-weight:600; }
.v-deck .dq-x{ margin-top:14px; color:var(--tx2); line-height:1.5; }

/* ── lesson 3: number tiles ── */
.v-numhead{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:6px 24px; }
.v-numhead .v-why{ margin-top:0; }
.v-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.v-tile{ position:relative; border:1px solid var(--bd); background:var(--card); border-radius:var(--r); min-height:170px; display:flex; flex-direction:column; overflow:hidden; }
.v-tile > button.v-tile-face{ flex:1; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:10px; text-align:left; background:none; border:0; color:var(--tx); font:inherit; padding:16px; cursor:pointer; }
.v-tile-face .q{ font-family:var(--serif); font-size:3rem; line-height:1; color:var(--eyebrow); }
.v-tile-face .lab{ font-family:var(--cond); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx); }
.v-tile:hover{ border-color:var(--bdg); }
.v-tile.open{ border-color:var(--eyebrow); background:var(--card2); }
.v-tile .v-guess{ padding:14px 16px 16px; display:grid; gap:8px; }
.v-tile .v-guess p{ font-size:.92rem; line-height:1.4; color:var(--tx); }
.v-tile .v-guess .opts{ display:grid; gap:6px; }
.v-tile .v-guess .opts button{ border:1px solid var(--field-bd); background:var(--field); color:var(--tx); border-radius:var(--r); padding:8px 10px; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; min-height:40px; text-align:left; }
.v-tile .v-guess .opts button:hover{ border-color:var(--eyebrow); }
.v-tile.done{ border-color:var(--bdg); background:var(--card2); }
.v-tile .v-reveal{ padding:16px; display:flex; flex-direction:column; gap:6px; }
.v-tile .v-reveal .big{ font-family:var(--serif); font-size:clamp(2rem,1.6vw + 1.2rem,2.8rem); line-height:1; color:var(--eyebrow); font-variant-numeric:tabular-nums; }
.v-tile .v-reveal .lab{ font-family:var(--cond); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx); }
.v-tile .v-reveal p{ font-size:.86rem; line-height:1.45; color:var(--tx2); }
.v-tile .v-reveal .verdict{ font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); }
.v-tile .v-reveal .verdict.ok{ color:var(--eyebrow); }
.v-tile.photo{ background:#000; border-color:var(--bdg); }
.v-tile.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .25s ease; }
.v-tile.photo > button.v-tile-face{ position:relative; z-index:1; }
.v-tile.photo .q{ font-size:1.3rem; font-family:var(--serif-i); font-style:italic; color:#fff; }
.v-tile.photo .lab{ color:var(--vu-gold); }
.v-tile.photo.open img{ opacity:.18; }
.v-tile.photo .v-reveal{ position:relative; z-index:1; }
.v-tile.photo .v-reveal p{ color:#fff; }
@media (max-width:1000px){ .v-nums{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .v-nums{ grid-template-columns:1fr; } }

/* ── lesson 3: quick facts hunt ── */
.v-launch{ margin-top:18px; }
.v-launch svg{ width:18px; height:18px; }
.v-mosaic{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(74px,auto); gap:6px; margin-top:18px; }
.v-mosaic .mt small{ font-family:var(--cond); font-weight:700; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin-bottom:auto; }
.v-mosaic .mt.lit small{ color:var(--eyebrow); }
.v-mosaic .mt.tally{ background:var(--card2); border-style:dashed; grid-column:span 2; }
.v-mosaic .mt.tally b{ color:var(--tx); }
.v-mosaic .mt{ position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--bd); background:var(--card); padding:10px 12px; display:flex; flex-direction:column; justify-content:flex-end; }
.v-mosaic .mt.big{ grid-row:span 2; }
.v-mosaic .mt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.v-mosaic .mt > *:not(img){ position:relative; }
.v-mosaic .mt b{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.1vw + .9rem,2rem); line-height:1; color:var(--tx3); font-variant-numeric:tabular-nums; transition:color .25s ease; }
.v-mosaic .mt span{ font-size:.8rem; color:var(--tx2); margin-top:4px; line-height:1.3; }
.v-mosaic .mt.lit{ border-color:var(--bdg); }
.v-mosaic .mt.lit b{ color:var(--eyebrow); }
.v-mosaic .mt.lit.pop b{ animation:mtPop .35s ease-out; }
@keyframes mtPop{ 0%{ transform:scale(.85); opacity:.3; } 100%{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .v-mosaic .mt.lit.pop b{ animation:none; } }
@media (max-width:480px){ .v-mosaic{ grid-template-columns:1fr 1fr; } .v-mosaic .mt.big{ grid-row:auto; grid-column:1 / -1; } }
.v-hunt{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.v-hunt .hq{ display:none; }
.v-hunt .hq.cur{ display:grid; }
.hq .v-label{ grid-column:2; }
.hq-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hq-dots{ display:flex; gap:5px; flex:1 1 auto; min-width:0; justify-content:center; }
.hq-dots i{ width:22px; flex:0 1 22px; min-width:6px; height:4px; border-radius:2px; background:rgba(255,255,255,.16); }
.hq-dots i.ok{ background:var(--bdg); }
.hq-dots i.on{ background:var(--eyebrow); }
.hq-nav button[hidden]{ visibility:hidden; display:inline-flex; }
.hq{ position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:8px 12px; align-items:center; border:1px solid var(--bd); background:var(--card); border-radius:var(--r); padding:12px 44px 12px 14px; transition:border-color .2s ease; }
.hq-no{ grid-row:span 3; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:2px solid var(--eyebrow); color:var(--eyebrow); font-family:var(--serif); font-size:1.1rem; }
.hq label{ color:var(--tx); font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,.6vw + 1rem,1.45rem); line-height:1.3; }
.hq .hq-row{ grid-column:2; display:flex; gap:8px; }
.hq .hq-row input{ flex:1; min-width:0; }
.hq .hq-row button{ flex:0 0 auto; border:1px solid var(--bdg); background:none; color:var(--tx); border-radius:var(--r); padding:0 14px; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; min-height:40px; }
.hq .hq-row button:hover{ border-color:var(--eyebrow); color:var(--eyebrow); }
.hq .hq-fb{ grid-column:2; font-size:.86rem; color:var(--tx2); min-height:0; }
.hq .hq-fb:empty{ display:none; }
.hq.found .hq-fb{ color:var(--eyebrow); }
.hq.found input{ border-color:var(--bdg); }
.hq input{ width:100%; border:1px solid var(--field-bd); background:var(--field); color:var(--tx); border-radius:var(--r); padding:9px 12px; font:inherit; font-size:.95rem; }
.hq input:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; }
.hq-ok{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:transparent; border:2px solid var(--bd); }
.hq-ok svg{ width:13px; height:13px; }
.hq.found{ border-color:var(--bdg); }
.hq.found .hq-no{ background:var(--eyebrow); color:var(--vu-black); }
.hq.found .hq-ok{ background:var(--eyebrow); border-color:var(--eyebrow); color:var(--vu-black); }
@media (max-width:480px){ .v-ident{ grid-template-columns:1fr; } }

/* ── lesson 4: the compass rose ── */
.v-rose{ position:relative; width:min(100%, 420px); aspect-ratio:1; margin:6px auto 0; }
.v-rose.small{ width:min(100%, 300px); margin-top:18px; }
.v-rose svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.v-rose .ring{ fill:none; stroke:var(--eyebrow); stroke-width:1.5; }
.v-rose .ring2{ fill:none; stroke:rgba(207,174,112,.3); stroke-width:1; }
.v-rose .tick{ stroke:rgba(207,174,112,.5); stroke-width:1; }
.v-rose .star path{ fill:var(--card); stroke:var(--eyebrow); stroke-width:1.2; stroke-linejoin:round; transition:fill .25s ease; }
.v-rose .star path.lit{ fill:var(--eyebrow); }
.v-rose .star path.minor{ fill:none; stroke:rgba(207,174,112,.55); }
.v-rose.idle .needle{ opacity:.25; }
.rose-hint{ text-align:center; color:var(--tx3); font-size:.9rem; margin-top:14px; font-style:italic; font-family:var(--serif-i); }
.v-rose .needle{ transform-origin:200px 200px; transition:transform .38s cubic-bezier(.33,1,.68,1), opacity .25s ease; }
.v-rose .needle path{ fill:var(--vu-highlight); stroke:var(--vu-black); stroke-width:1; }
.v-rose .hub{ fill:var(--vu-black); stroke:var(--eyebrow); stroke-width:1.5; }
.v-rose .pt{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; background:var(--vu-black); border:1px solid var(--bdg); color:var(--tx); border-radius:999px; padding:8px 14px; font:inherit; font-family:var(--cond); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; white-space:nowrap; min-height:44px; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.v-rose .pt:hover{ border-color:var(--eyebrow); }
.v-rose .pt.seen{ border-color:var(--eyebrow); }
.v-rose .pt[aria-selected="true"], .v-rose .pt.on{ background:var(--eyebrow); color:var(--vu-black); border-color:var(--eyebrow); }
.v-rose .pt.n{ left:50%; top:4%; } .v-rose .pt.e{ left:94%; top:50%; } .v-rose .pt.s{ left:50%; top:96%; } .v-rose .pt.w{ left:6%; top:50%; }
.v-rose.small .pt{ font-size:.66rem; padding:6px 10px; min-height:0; cursor:default; }
@media (max-width:480px){ .v-rose .pt{ font-size:.66rem; padding:6px 9px; } .v-rose .pt.e{ left:86%; } .v-rose .pt.w{ left:14%; } }

.v-belief{ border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:clamp(18px,2.4vw,28px); min-height:240px; }
.v-belief .v-label{ display:flex; align-items:center; gap:8px; }
.v-belief h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,1.2vw + 1.1rem,2.3rem); line-height:1.12; color:var(--tx); margin-top:6px; }
.v-belief .behaviors{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.v-belief .behaviors li{ border:1px solid var(--bdg); border-radius:999px; padding:5px 11px; font-size:.84rem; color:var(--tx); background:var(--field); }
.v-belief details{ margin-top:12px; }
.v-belief summary{ cursor:pointer; color:var(--link); font-size:.9rem; min-height:32px; display:inline-flex; align-items:center; }
.v-belief details p{ color:var(--tx2); font-size:.92rem; line-height:1.55; margin-top:4px; max-width:60ch; }
.v-belief .scn{ margin-top:10px; padding:14px 16px; }
.v-belief .scn .scn-s{ font-size:1.1rem; }
.v-belief .scn-opts button{ padding:10px 14px; font-size:.92rem; }
.v-belief .try-h{ margin-top:16px; display:flex; align-items:center; gap:8px; }

/* ── lesson 4: the compass questions ── */
.v-cq .cp-q{ display:none; }
.v-cq .cp-q.cur{ display:block; }
.v-cq .cp-h{ font-family:var(--serif); font-size:clamp(1.35rem,1vw + 1.05rem,1.9rem); line-height:1.25; color:var(--tx); }
.v-cq .cp-h .v-label{ margin-bottom:8px; }
.v-cq .cp-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.v-cq .cp-opts button{ text-align:left; border:1px solid var(--field-bd); background:var(--field); color:var(--tx); border-radius:var(--r); padding:16px; font:inherit; font-size:.98rem; line-height:1.4; cursor:pointer; min-height:72px; transition:border-color .2s ease, background .2s ease; }
.v-cq .cp-opts button:hover{ border-color:var(--eyebrow); }
.v-cq .cp-opts button[aria-pressed="true"]{ border-color:var(--eyebrow); background:rgba(207,174,112,.16); }
.v-cq .cp-dots{ display:flex; gap:6px; margin-top:14px; }
.v-cq .cp-dots i{ width:28px; height:4px; border-radius:2px; background:rgba(255,255,255,.16); }
.v-cq .cp-dots i.on{ background:var(--eyebrow); }
.v-cq .cp-back{ margin-top:10px; background:none; border:0; color:var(--link); font:inherit; font-size:.9rem; cursor:pointer; min-height:36px; padding:0; }
.v-cq .cp-result{ display:none; }
.v-cq.result .cp-result{ display:block; }
.v-cq.result .cp-q{ display:none; }
.cp-result h3{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,2vw + 1.4rem,3.2rem); color:var(--tx); line-height:1.05; margin-top:6px; display:flex; align-items:center; gap:10px; }
.cp-result .cp-line{ font-family:var(--serif-i); font-style:italic; color:var(--eyebrow); font-size:1.2rem; margin-top:6px; }
.cp-result .field{ margin-top:16px; }
.cp-result .field label{ font-size:.95rem; color:var(--tx); text-transform:none; letter-spacing:0; font-family:var(--sans); font-weight:500; }
.cp-result .cp-redo{ margin-top:8px; background:none; border:0; color:var(--link); font:inherit; font-size:.9rem; cursor:pointer; padding:0; min-height:36px; }
@media (max-width:560px){ .v-cq .cp-opts{ grid-template-columns:1fr; } }

/* ── lesson 5 ── */
.v-three{ list-style:none; counter-reset:t; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.v-three li{ counter-increment:t; border-top:2px solid var(--eyebrow); padding-top:8px; font-weight:600; font-size:.95rem; color:var(--tx); }
.v-three li::before{ content:counter(t, decimal-leading-zero); display:block; font-family:var(--cond); font-size:.72rem; letter-spacing:.08em; color:var(--eyebrow); margin-bottom:2px; }
.v-act .calls .scn{ margin-top:8px; }
.v-act .calls .cq-h{ font-family:var(--cond); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--eyebrow); display:flex; align-items:center; gap:8px; }
@media (max-width:480px){ .v-three{ grid-template-columns:1fr; } }

/* ── lesson 6 ── */
#quiz .kq-q{ font-family:var(--serif); font-size:clamp(1.3rem,1vw + 1rem,1.8rem); line-height:1.3; }
.v-commits{ display:grid; gap:8px; }
.v-commits button{ display:grid; grid-template-columns:30px 1fr; gap:2px 14px; align-items:start; text-align:left; width:100%; border:1px solid var(--field-bd); background:var(--card); color:var(--tx); border-radius:var(--r); padding:14px 16px; font:inherit; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.v-commits button:hover{ border-color:var(--bdg); }
.v-commits .cb{ grid-row:span 2; width:26px; height:26px; border:2px solid var(--eyebrow); border-radius:50%; display:grid; place-items:center; color:transparent; margin-top:1px; }
.v-commits .cb svg{ width:14px; height:14px; }
.v-commits b{ font-weight:600; font-size:1rem; }
.v-commits small{ grid-column:2; color:var(--tx2); font-size:.86rem; line-height:1.45; }
.v-commits button[aria-checked="true"]{ border-color:var(--eyebrow); background:var(--card2); }
.v-commits button[aria-checked="true"] .cb{ background:var(--eyebrow); color:var(--vu-black); }
.v-msg{ border:1px solid var(--bdg); border-radius:var(--r); background:var(--card2); padding:clamp(18px,2.4vw,26px); }
.v-msg p{ font-family:var(--serif-i); font-style:italic; font-size:clamp(1.05rem,.6vw + .95rem,1.3rem); line-height:1.45; color:var(--tx); margin:10px 0 14px; }
.v-survey{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 16px; margin-top:12px; padding:16px 20px; border-radius:var(--r); background:var(--vu-gold); color:var(--vu-black); text-decoration:none; transition:background .2s ease; }
.v-survey:hover{ background:var(--vu-highlight); }
.v-survey .v-label{ color:var(--vu-black); opacity:.75; }
.v-survey b{ font-family:var(--serif); font-weight:400; font-size:1.3rem; grid-column:1; }
.v-survey i{ grid-row:1 / span 2; grid-column:2; font-style:normal; font-size:1.6rem; }
.v-visit{ margin-top:12px; color:var(--tx2); font-size:.92rem; }
.v-visit a{ color:var(--link); }

/* ── the end ── */
.v-end{ position:relative; overflow:hidden; text-align:center; }
.v-end-bg{ position:absolute; inset:0; z-index:0; }
.v-end-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.v-end-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(28,28,28,.55), #1C1C1C 75%); }
.v-end .wrap{ position:relative; z-index:1; }
.v-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:clamp(22px,4vh,40px); }
.v-links a{ font-size:.86rem; color:var(--tx); text-decoration:none; border:1px solid var(--bdg); border-radius:999px; padding:6px 13px; }
.v-links a:hover{ border-color:var(--eyebrow); color:var(--eyebrow); }

/* phones: the page dots do not fit beside the controls */
@media (max-width:480px){ .bb-dots{ display:none; } .book-bar .bb-ctl{ margin-left:auto; } }

/* focus is always visible */
.v-sec button:focus-visible, .v-sec a:focus-visible, .v-hero a:focus-visible, .v-goals summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .v-hero-bg img{ animation:none; }
  .v-rose .needle, .v-route i, .v-focus button, .v-tile.photo img{ transition:none; }
}

/* ══════════ print: only the Voyage summary, on white ══════════ */
.print-sheet{ display:none; }
.v-print{ margin-top:12px; }
.v-print svg{ width:16px; height:16px; }
@media print{
  @page{ margin:14mm 14mm 16mm; }
  html, body, html.paged, html.paged body{ height:auto !important; overflow:visible !important; background:#fff !important; }
  body > *:not(#printSheet){ display:none !important; }
  .print-sheet{ display:block !important; color:#1C1C1C; font-family:var(--sans); font-size:10.5pt; line-height:1.45; }
  .print-sheet *{ color:#1C1C1C; }
  .ps-head{ display:flex; align-items:center; gap:20px; padding-bottom:10px; border-bottom:2px solid #CFAE70; margin-bottom:14px; }
  .ps-head img{ height:34px; width:auto; }
  .ps-k{ font-family:var(--cond); font-weight:700; font-size:8pt; letter-spacing:.1em; text-transform:uppercase; color:#946E24 !important; }
  .ps-head h1{ font-family:var(--serif); font-weight:400; font-size:22pt; line-height:1.1; margin:2px 0; }
  .ps-head h1 em{ font-family:var(--serif-i); font-style:italic; color:#946E24 !important; }
  .ps-head p{ font-size:9pt; color:#555 !important; }
  .print-sheet section, html.paged .print-sheet section{ margin:12px 0 0 !important; padding:0 !important; min-height:0 !important; display:block !important; break-inside:avoid; }
  html.paged .print-sheet section.ps-row, .print-sheet section.ps-row{ display:grid !important; }
  .print-sheet h2{ font-family:var(--cond); font-weight:700; font-size:9pt; letter-spacing:.1em; text-transform:uppercase; color:#946E24 !important; border-bottom:1px solid #E0D5C0; padding-bottom:3px; margin-bottom:6px; }
  .print-sheet h3{ font-family:var(--sans); font-weight:600; font-size:10pt; margin-top:8px; letter-spacing:0; }
  .print-sheet h2, .print-sheet p, .print-sheet ul{ max-width:none; }
  .ps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .ps-stat{ border:1px solid #E0D5C0; border-top:3px solid #CFAE70; padding:8px 10px; }
  .ps-stat b{ display:block; font-family:var(--serif); font-weight:400; font-size:18pt; line-height:1.1; }
  .ps-stat span{ font-size:8.5pt; color:#555 !important; }
  .ps-big{ font-family:var(--serif-i); font-style:italic; font-size:14pt; }
  .ps-sub{ font-size:9.5pt; color:#555 !important; }
  .ps-write{ border:1px solid #E0D5C0; padding:8px 10px; min-height:36px; }
  .ps-quote{ font-family:var(--serif-i); font-style:italic; font-size:11.5pt; border-left:3px solid #CFAE70; padding-left:10px; }
  .ps-checks{ list-style:none; display:grid; gap:5px; padding:0; }
  .ps-checks li{ display:grid; grid-template-columns:18px 1fr; gap:8px; }
  .ps-checks li .ps-box{ width:14px; height:14px; border:1.5px solid #946E24; display:grid; place-items:center; font-size:9pt; line-height:1; margin-top:2px; }
  .ps-table{ width:100%; border-collapse:collapse; }
  .ps-table th, .ps-table td{ text-align:left; vertical-align:top; padding:5px 6px; border-bottom:1px solid #E4E4E4; font-size:9.5pt; }
  .ps-table th{ font-weight:500; width:58%; }
  .ps-table td small{ display:block; color:#777 !important; font-size:8pt; }
  .ps-empty{ color:#777 !important; font-style:italic; }
  .ps-foot{ margin-top:6px; font-size:8.5pt; color:#555 !important; }
  .ps-recap ol{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:5px 18px; padding:0; }
  .ps-recap li{ display:grid; grid-template-columns:18px 1fr; gap:6px; font-size:9pt; line-height:1.4; }
  .ps-n{ font-family:var(--serif); color:#946E24 !important; font-size:11pt; line-height:1.1; }
  .ps-moves .ps-checks{ gap:6px; }
  .ps-moves .ps-checks li{ grid-template-columns:20px 1fr 150px; align-items:start; border:1px solid #E0D5C0; padding:6px 10px; font-size:9.5pt; }
  .ps-moves .ps-checks li .ps-box{ width:16px; height:16px; }
  .ps-cm{ color:#946E24 !important; font-size:8.5pt; }
  .ps-by{ font-size:8.5pt; color:#555 !important; display:flex; align-items:flex-end; gap:6px; }
  .ps-by i{ flex:1; border-bottom:1px solid #777; height:14px; }
  .ps-survey{ display:flex; align-items:center; gap:14px; margin-top:10px; border:1px solid #CFAE70; padding:10px 12px; }
  .ps-qr{ flex:0 0 76px; width:76px; height:76px; }
  .ps-qr svg{ width:76px; height:76px; display:block; }
  .ps-survey b{ font-family:var(--serif); font-weight:400; font-size:13pt; }
  .ps-survey p{ font-size:9pt; }
  .ps-fine{ color:#555 !important; margin-top:2px; }
}

/* lesson 2: the video, then the timeline, on one page */
.v-explore-tl{ grid-template-columns:minmax(0,1fr); align-items:stretch; }
.v-tl-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; }
.v-tl-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.v-tl-actions .v-task{ margin:0; }
.v-tl-actions .btn svg{ width:16px; height:16px; }
#history .v-tl{ padding:clamp(14px,2vw,24px); }
#history .tl-card{ min-height:0; margin-top:14px; padding-top:14px; }
#history .tl-yr{ font-size:clamp(2.4rem,3vw + 1rem,4rem); }
#history .tl-node .yr{ font-size:clamp(.9rem,.5vw + .7rem,1.15rem); }
html.paged .page > section#history{ justify-content:flex-start; padding-top:clamp(12px,2.4vh,32px); }

/* lesson 2: the Chancellor's bio and the leadership team */
.v-bio{ color:var(--tx2); font-size:.95rem; line-height:1.5; max-width:46ch; }
.v-person{ align-items:start; }
.v-more{ margin-top:12px; border-top:1px solid var(--bd); padding-top:8px; }
.v-more summary{ cursor:pointer; color:var(--link); font-size:.92rem; min-height:36px; display:inline-flex; align-items:center; }
.v-bio-list{ list-style:none; display:grid; gap:6px; margin-top:6px; }
.v-bio-list li{ color:var(--tx2); font-size:.9rem; line-height:1.5; padding-left:14px; position:relative; }
.v-bio-list li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--eyebrow); }
.v-bio-list b{ color:var(--tx); font-weight:600; }
.v-team{ margin-top:clamp(18px,3vh,32px); border-top:1px solid var(--bd); padding-top:clamp(14px,2.4vh,24px); }
.v-team-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:12px; }
.v-team-head .btn{ text-decoration:none; }
.v-areas{ list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:1200px){ .v-areas{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){ .v-areas{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .v-areas{ grid-template-columns:1fr; } }
.v-areas li{ display:flex; align-items:center; gap:10px; border:1px solid var(--bd); background:var(--card); border-radius:var(--r); padding:10px 12px; color:var(--tx); font-size:.9rem; line-height:1.3; }
.v-areas svg{ flex:0 0 22px; width:22px; height:22px; fill:none; stroke:var(--eyebrow); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.v-areas small{ display:block; color:var(--tx3); font-size:.76rem; margin-top:2px; }
.v-areas li.you{ border-color:var(--eyebrow); background:var(--card2); }
.v-areas li.you small{ color:var(--eyebrow); }
html.paged .page > section#leaders{ justify-content:flex-start; }

/* the campus network map: gold dot-grid US, a color per campus, leader lines to each name */
.us-map.net{ --c-sf:var(--vu-sky); --c-nyc:var(--vu-gold); --c-chattanooga:var(--vu-sage); --c-wpb:var(--vu-highlight); --c-nashville:var(--vu-gold); }
.us-map.net .dots{ fill:none; stroke:var(--vu-gold); stroke-width:4.6; stroke-linecap:round; opacity:.5; }
.us-map.net [data-city="sf"]{ --c:var(--c-sf); } .us-map.net [data-city="nyc"]{ --c:var(--c-nyc); } .us-map.net [data-city="chattanooga"]{ --c:var(--c-chattanooga); } .us-map.net [data-city="wpb"]{ --c:var(--c-wpb); } .us-map.net [data-city="nashville"]{ --c:var(--c-nashville); }
.us-map.net .lbl .lead{ fill:none; stroke:var(--c); stroke-width:1.6; }
.us-map.net .lbl text{ paint-order:normal; stroke:none; }
.us-map.net .lbl .t1{ font-family:var(--sans); font-weight:700; font-size:26px; fill:#FFFFFF; }
.us-map.net .lbl .t2{ font-family:var(--sans); font-weight:400; font-size:21px; fill:var(--c); }
.us-map.net .lbl{ cursor:pointer; }
.us-map.net .pin .ring{ stroke:var(--c); stroke-width:2.4; animation-name:netPulse; }
@keyframes netPulse{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
@media (prefers-reduced-motion:reduce){ .us-map.net .pin .ring{ animation:none; opacity:.35; transform:scale(1.35); } }
.us-map.net .pin .badge{ fill:var(--vu-black); stroke:var(--c); stroke-width:2.6; }
.us-map.net .pin .ic{ stroke:var(--c); stroke-width:1.8; }
.us-map.net .pin .ic .fillc{ fill:var(--c); }
.us-map.net .pin.home .badge{ fill:var(--vu-gold); stroke:#FFFFFF; stroke-width:2; }
.us-map.net .pin.home .ic{ stroke:var(--vu-black); }
.us-map.net .pin.on .badge{ fill:var(--c); stroke:#FFFFFF; }
.us-map.net .pin.on .ic{ stroke:var(--vu-black); }
.us-map.net .pin.on .ic .fillc{ fill:var(--vu-black); }
.us-map.net .lbl.on .t1{ fill:var(--c); }
@media (max-width:600px){ .us-map.net .lbl{ display:none; } .us-map.net{ margin:0 -4px; } }

/* lesson 1: five cities, the map on its own page */
.v-op{ margin-bottom:4px; }
#mission .v-part{ margin-top:22px; }
.v-cities-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px 28px; flex-wrap:wrap; margin-bottom:clamp(10px,2vh,20px); }
.v-cities-head .v-why{ margin-top:0; max-width:44ch; }
.v-netmap{ display:grid; grid-template-columns:minmax(0,7.5fr) minmax(0,2.8fr); gap:clamp(16px,2.4vw,32px); align-items:center; }
.v-netmap .v-map{ padding:clamp(10px,1.6vw,20px); }
.v-netside .v-task{ margin-top:0; }
.v-netside .v-cities{ margin-top:0; }
.v-netside .v-city{ min-height:150px; }
@media (max-width:1000px){ .v-netmap{ grid-template-columns:minmax(0,1fr); } }

/* lesson 1: our growth, in the news */
.v-press-filter{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.v-press-filter button{ font:inherit; font-size:.84rem; color:var(--tx); background:none; border:1px solid var(--bdg); border-radius:999px; padding:6px 13px; cursor:pointer; min-height:36px; }
.v-press-filter button:hover{ border-color:var(--eyebrow); color:var(--eyebrow); }
.v-press-filter button[aria-pressed="true"]{ background:var(--eyebrow); border-color:var(--eyebrow); color:var(--vu-black); }
.v-press{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; }
.pc{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--bd); border-top:3px solid var(--pc, var(--eyebrow)); background:var(--card); border-radius:var(--r); padding:14px 16px; text-decoration:none; color:var(--tx); transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.pc:hover{ background:var(--card2); border-color:var(--bdg); transform:translateY(-2px); }
.pc[hidden]{ display:none !important; }
.pc-top{ display:flex; flex-direction:column; gap:3px; }
.pc-tag{ font-family:var(--cond); font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pc, var(--eyebrow)); }
.pc-src{ font-size:.78rem; color:var(--tx3); }
.pc b{ font-family:var(--serif); font-weight:400; font-size:1.12rem; line-height:1.28; }
.pc-t{ color:var(--tx2); font-size:.86rem; line-height:1.45; }
.pc-go{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:var(--link); font-size:.84rem; }
.pc-go svg{ width:14px; height:14px; }
.pc[data-c="nyc"]{ --pc:var(--vu-gold); } .pc[data-c="sf"]{ --pc:var(--vu-sky); } .pc[data-c="wpb"]{ --pc:var(--vu-highlight); } .pc[data-c="chattanooga"]{ --pc:var(--vu-sage); } .pc[data-c="strategy"]{ --pc:#FFFFFF; }
@media (prefers-reduced-motion: reduce){ .pc{ transition:none; } .pc:hover{ transform:none; } }

/* compass: save the reflection, then a short read-back and one tip */
.cp-result .cp-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin-top:12px; }
.cp-result .cp-actions .cp-redo{ margin-top:0; }
.cp-save.is-saved{ background:transparent; color:var(--eyebrow); border-color:var(--bdg); }
.cp-coach{ margin-top:14px; border:1px solid var(--bdg); border-left:3px solid var(--eyebrow); background:var(--card); border-radius:var(--r); padding:14px 16px; display:grid; gap:8px; }
.cp-coach[hidden]{ display:none; }
.cp-coach .cp-saved{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--eyebrow); }
.cp-coach .cp-saved svg{ width:16px; height:16px; flex:none; }
.cp-coach .cp-head{ font-family:var(--serif); font-size:1.2rem; color:var(--tx); line-height:1.3; }
.cp-coach .cp-plan{ color:var(--tx2); font-size:.9rem; }
.cp-coach .cp-checks{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.cp-coach .cp-checks li{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; border:1px solid var(--bd); border-radius:999px; padding:3px 11px; color:var(--tx3); }
.cp-coach .cp-checks li.on{ border-color:var(--eyebrow); color:var(--tx); }
.cp-coach .cp-checks li.on span[aria-hidden]{ color:var(--eyebrow); font-weight:700; }
.cp-coach .cp-tip{ font-size:.92rem; color:var(--tx); line-height:1.5; }
.cp-coach .cp-tip b{ color:var(--eyebrow); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }