@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap');
/* Section 4, Website levels (prototype C, side by side).
   Light only (Josh, checklist 1): the frame stays light whatever the device's dark mode; the mini
   sites inside keep their own brands. Base palette only: light blue, dark blue, white, black. One pop colour: none.
   Local tokens (css/base.css has no theme tokens yet, see report): --lv-*. */
#levels {
  --lv-bg: #FFFFFF; --lv-bg-2: #EAF2FF; --lv-ink: #0B1B3F; --lv-mute: #4A5878; --lv-line: rgba(11, 27, 63, .14);
  --lv-accent: #1F6FFF; --lv-on-accent: #FFFFFF; --lv-chrome: #F4F8FF; --lv-card: #F6F9FF;
  --lv-shadow: 0 40px 90px rgba(11, 27, 63, .22), 0 8px 22px rgba(11, 27, 63, .12);
  --lv-shadow-sm: 0 18px 40px rgba(11, 27, 63, .16), 0 4px 10px rgba(11, 27, 63, .08);
}
#levels { position: relative; background: var(--lv-bg); color: var(--lv-ink); }
#levels :focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 3px; border-radius: 10px; }
.lv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Intro and the index of the three levels */
.lv-intro { padding: calc(var(--header-h) + clamp(28px, 5svh, 56px)) var(--gutter) clamp(48px, 9svh, 96px); max-width: 1440px; margin: 0 auto; }
.lv-intro-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.lv-eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--lv-mute); }
.lv-num { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--lv-line); font-size: .75rem; font-weight: 600; color: var(--lv-ink); }
#lv-title, .lv-again-title { font-size: clamp(2.1rem, 3.9vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin: 0; max-width: 19ch; text-wrap: balance; }
.lv-intro-side { padding-bottom: 8px; }
/* The one instruction (Josh, 11 Nov): short, big, pointing down at the covers. */
.lv-prompt { display: flex; width: fit-content; align-items: center; gap: 14px; margin: 0 0 16px; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 600; letter-spacing: -.02em; color: var(--lv-ink); }
.lv-prompt-touch { display: none; }
@media (hover: none) { .lv-prompt-desk { display: none; } .lv-prompt-touch { display: inline; } }
.lv-prompt-arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lv-accent); color: var(--lv-on-accent); box-shadow: 0 10px 24px rgba(31, 111, 255, .3); animation: lv-bob 1.8s var(--ease) infinite; }
.lv-prompt-arrow svg { width: 20px; height: 20px; }
@keyframes lv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.lv-note-line { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .8125rem; color: var(--lv-mute); }
.lv-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lv-accent); flex: none; }

/* The chooser (Josh, 10 Nov): one cover per site in that business's own branding (js/levels/covers.js),
   as an expanding row. Closed, a cover is a designed slice with a real background: a piece of the
   photo its after opening leads with, its mark and the level, each laid out in its own site's way.
   Open, it shows the whole after opening in a browser window beside the level's name and tags.
   The wide art is laid out at the open width (--open-w), so nothing reflows while a cover grows. */
.lv-index { --open-grow: 6; list-style: none; margin: clamp(24px, 4svh, 44px) 0 0; padding: 0; display: flex; gap: 14px; height: clamp(460px, calc(100svh - var(--header-h) - 340px), 640px); }
.lv-index li { flex: 1 1 0; min-width: 0; display: flex; transition: flex-grow .75s var(--ease); }
.lv-index li.is-open { flex-grow: var(--open-grow); }
.lv-cover {
  --c-bg: #F6F1E8; --c-ink: #1C2521; --c-mute: #5E655F; --c-line: rgba(28, 37, 33, .14); --c-btn: #1C2521; --c-btn-ink: #F6F1E8; --c-glow: .38; --c-accent: #D9BE95;
  --c-display: "Fraunces", Georgia, serif; --c-sans: "Inter", system-ui, sans-serif;
  position: relative; width: 100%; height: 100%; text-align: left; cursor: pointer; font: inherit; overflow: hidden; isolation: isolate;
  border: 0; border-radius: 20px; padding: 0; background: var(--c-bg); color: var(--c-ink);
  box-shadow: 0 0 0 1px var(--lv-line);
  transition: box-shadow .45s var(--ease);
}
.lv-cover--silwerkloof { --c-bg: #1C1915; --c-ink: #F3EDE2; --c-mute: rgba(243, 237, 226, .7); --c-line: rgba(243, 237, 226, .18); --c-btn: #F3EDE2; --c-btn-ink: #1C1915; --c-glow: .5; --c-accent: #C9A46A; --c-display: "Cormorant Garamond", Georgia, serif; }
.lv-cover--halfmaan { --c-bg: #EDE6DA; --c-ink: #1E1B17; --c-mute: #625B51; --c-line: rgba(30, 27, 23, .14); --c-btn: #1E1B17; --c-btn-ink: #FAF7F2; --c-glow: .34; --c-accent: #A88B62; --c-display: "Cormorant Garamond", Georgia, serif; }
.lv-cover:hover, .lv-cover.is-open { box-shadow: 0 0 0 1px var(--c-line), var(--lv-shadow-sm); }
/* A cover lifts under the pointer (Josh, 11 Nov): it is a thing to click. */
.lv-cover { transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  #websites .lv-cover:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px rgba(11, 27, 63, .22), 0 8px 18px rgba(11, 27, 63, .1); }
}
/* Every cover's button (Josh, 11 Nov). On a slice: a pill along its foot. */
.lv-cc-go { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 999px; background: var(--c-btn); color: var(--c-btn-ink); font-family: var(--c-sans); font-size: .875rem; font-weight: 600; white-space: nowrap; transition: transform .35s var(--ease); }
.lv-cc-go svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.lv-cover:hover .lv-cc-go svg, .lv-cover:hover .lv-cover-go svg { transform: translateY(3px); }
.lv-cover:focus-visible { outline-offset: 4px; }
.lv-cover-compact, .lv-cover-wide { position: absolute; top: 0; bottom: 0; left: 0; transition: opacity .4s, transform .7s var(--ease), visibility 0s; }
.lv-cover-compact { right: 0; }
.lv-cover-wide { width: var(--open-w, 100%); }
.lv-cover.is-open .lv-cover-compact { opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .3s, transform .7s var(--ease), visibility 0s .4s; pointer-events: none; }
.lv-cover:not(.is-open) .lv-cover-wide { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .3s; pointer-events: none; }
.lv-cover.is-open .lv-cover-wide { transition-delay: .12s; }

/* Compact, shared pieces */
.lv-cc-photo { position: absolute; overflow: hidden; }
.lv-cc-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.lv-cover:not(.is-open):hover .lv-cc-photo img { transform: scale(1.06); }
.lv-cc-mark { position: absolute; display: grid; place-items: center; }
.lv-cc-mark svg { width: 100%; height: 100%; }
.lv-cc-word { position: absolute; font-family: var(--c-display); white-space: nowrap; }
.lv-cc-foot { position: absolute; left: 18px; right: 14px; bottom: 72px; display: flex; flex-direction: column; gap: 7px; }
.lv-cc-n { font-family: var(--c-sans); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--c-mute); white-space: nowrap; }
.lv-cover-slice-name { font-family: var(--c-display); font-size: 1.9rem; line-height: 1; white-space: nowrap; }

/* Ridgeway, compact: a postcard. The reception's window and mountain, matted in the practice's cream,
   the mark sitting on the photo's edge. */
.lv-cover--ridgeway .lv-cc-photo { left: 10px; right: 10px; top: 10px; bottom: 164px; border-radius: 12px; }
.lv-cover--ridgeway .lv-cc-photo img { object-position: 9% 45%; }
.lv-cover--ridgeway .lv-cc-mark { left: 22px; bottom: 144px; width: 44px; height: 44px; filter: drop-shadow(0 6px 14px rgba(28, 37, 33, .28)); }
.lv-cover--ridgeway .lv-cc-word { display: none; }
.lv-cover--ridgeway .lv-cc-foot { bottom: 74px; }

/* Silwerkloof, compact: the estate at dusk. The gabled homestead full bleed, the name set upright
   along the edge in its spaced capitals, a gold rule over the level. */
.lv-cover--silwerkloof .lv-cc-photo { inset: 0; }
.lv-cover--silwerkloof .lv-cc-photo img { object-position: 74% 50%; }
.lv-cover--silwerkloof .lv-cc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 25, 21, .82), rgba(28, 25, 21, .35) 34%, transparent 55%), linear-gradient(0deg, #1C1915 18%, rgba(28, 25, 21, .55) 48%, rgba(28, 25, 21, .1) 72%, rgba(28, 25, 21, .5)); }
.lv-cover--silwerkloof .lv-cc-mark { left: 50%; top: 22px; width: 38px; height: 38px; margin-left: -19px; color: #F3EDE2; }
.lv-cover--silwerkloof .lv-cc-word { left: 16px; top: 82px; writing-mode: vertical-rl; font-size: .875rem; letter-spacing: .5em; text-transform: uppercase; color: #F3EDE2; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.lv-cover--silwerkloof .lv-cc-foot { padding-top: 14px; border-top: 1px solid var(--c-accent); left: 16px; right: 16px; }
.lv-cover--silwerkloof .lv-cover-slice-name { font-style: italic; font-size: 2.15rem; color: #F3EDE2; }

/* Halfmaan, compact: the Clifton room through an arch, on the studio's stone, the half moon above. */
.lv-cover--halfmaan .lv-cc-photo { left: 14px; right: 14px; top: 70px; bottom: 168px; border-radius: 999px 999px 10px 10px; box-shadow: 0 0 0 1px var(--c-line); }
.lv-cover--halfmaan .lv-cc-photo img { object-position: 24% 42%; }
.lv-cover--halfmaan .lv-cc-mark { left: 50%; top: 22px; width: 30px; height: 30px; margin-left: -15px; color: #1E1B17; }
.lv-cover--halfmaan .lv-cc-word { display: none; }
.lv-cover--halfmaan .lv-cc-foot { align-items: center; text-align: center; left: 10px; right: 10px; bottom: 76px; }
.lv-cover--halfmaan .lv-cover-slice-name { font-style: italic; font-size: 2.15rem; }

/* Wide: the site's colour, carried in by a soft, blurred copy of its photo. */
.lv-cover-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lv-cover-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(34px) saturate(1.15); transform: scale(1.3); opacity: var(--c-glow); }
.lv-cover-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-bg) 30%, transparent 85%); }

.lv-cover-head { position: absolute; left: 28px; top: 26px; display: flex; align-items: flex-start; gap: 12px; }
.lv-cover-logo { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.lv-cover-logo svg { width: 40px; height: 40px; flex: none; }
.lv-cover-word { display: flex; flex-direction: column; font-family: var(--c-display); font-size: 1.5rem; line-height: 1; font-weight: 500; letter-spacing: -.01em; }
.lv-cover-word small { font-family: var(--c-sans); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--c-mute); margin-top: 6px; }
.lv-cover--silwerkloof .lv-cover-word { font-size: 1.3rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 400; }
.lv-cover--halfmaan .lv-cover-logo svg { width: 32px; height: 32px; }
.lv-cover--halfmaan .lv-cover-word { font-size: 1.625rem; }
.lv-cover-meta { display: flex; align-items: center; gap: 10px; }
.lv-cover-n { font-family: var(--c-sans); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--c-mute); white-space: nowrap; }
.lv-cover-pick { font-family: var(--font); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--lv-accent); color: var(--lv-on-accent); display: none; }
.lv-cover[data-pick] .lv-cover-pick { display: inline-block; }

/* The whole after opening, in a browser window on the right. */
.lv-cover-shot { position: absolute; right: 28px; top: 50%; width: 58%; border-radius: 12px; overflow: hidden; background: #fff;
  transform: translateY(-50%); box-shadow: 0 34px 70px rgba(0, 0, 0, .26), 0 0 0 1px var(--c-line); }
.lv-cover-bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: #F2F2F0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.lv-cover-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.lv-cover-url { margin: 0 auto; padding: 2px 14px; border-radius: 6px; background: #fff; font-family: var(--font); font-size: .625rem; color: rgba(0, 0, 0, .5); }
.lv-cover-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; max-width: none; transition: transform 1.2s var(--ease); transform-origin: 50% 0; }
.lv-cover.is-open:hover .lv-cover-shot img { transform: scale(1.025); }

.lv-cover-foot { position: absolute; left: 28px; bottom: 28px; width: calc(42% - 70px); display: flex; flex-direction: column; gap: 10px; transition: transform .7s .15s var(--ease); }
.lv-cover:not(.is-open) .lv-cover-foot { transform: translateY(18px); }
.lv-cover-tier { font-family: var(--c-display); font-size: clamp(2.6rem, calc(var(--open-w, 1000px) * .066), 4.4rem); line-height: .95; font-weight: 400; letter-spacing: -.025em; }
.lv-cover--silwerkloof .lv-cover-tier, .lv-cover--halfmaan .lv-cover-tier { font-style: italic; font-size: clamp(2.9rem, calc(var(--open-w, 1000px) * .072), 4.8rem); }
.lv-cover-line { font-family: var(--c-sans); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.lv-cover-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--c-sans); font-size: 1rem; font-weight: 600; padding: 15px 24px; border-radius: 999px; background: var(--c-btn); color: var(--c-btn-ink); white-space: nowrap; box-shadow: 0 12px 26px rgba(0, 0, 0, .18); transition: transform .35s var(--ease); }
.lv-cover-go svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.lv-cover.is-open:hover .lv-cover-go { transform: translateY(-2px); }

/* Scene shell: a tall section with a sticky viewport. No pin spacer, so the live pages never reload. */
.lv-scene { position: relative; }
.lv-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; }
/* clip, not hidden (Josh, 11 Nov): a hidden box can still be scrolled by a focus or a link, which slid
   the whole stage sideways off a laptop's screen; a clipped one cannot. */
.lv-stage { overflow: visible; }

.lv-head { position: absolute; left: 0; right: 0; top: var(--header-h); height: 112px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--gutter); }
.lv-tierbox { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "k k k" "tier tier tier" "suits suits suits"; align-items: baseline; column-gap: 14px; row-gap: 2px; min-width: 0; }
.lv-kicker { grid-area: k; margin: 0; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--lv-accent); }
.lv-tier { grid-area: tier; margin: 0; font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
.lv-suits { grid-area: suits; margin: 2px 0 0; font-size: .875rem; color: var(--lv-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lv-mid { position: relative; display: grid; place-items: center; min-height: 64px; }
.lv-mid > * { grid-area: 1 / 1; }
.lv-walk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lv-walk-k { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--lv-mute); }
.lv-walk-mask { display: block; height: 30px; overflow: hidden; }
.lv-walk-list { display: flex; flex-direction: column; align-items: center; }
.lv-walk-list span { display: block; height: 30px; line-height: 30px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.lv-walk-list i { font-style: normal; font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--lv-mute); margin-right: 10px; vertical-align: 3px; }

.lv-end { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

.lv-stage { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 112px); bottom: 24px; }

/* A browser window that holds one live page. Until the page is live its opening screenshot shows. */
.lv-win { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 14px; overflow: hidden; background: var(--lv-chrome); box-shadow: var(--lv-shadow); will-change: transform; display: flex; flex-direction: column; }
.lv-win-bar { flex: none; height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--lv-line); font-size: .78rem; font-weight: 500; color: var(--lv-mute); background: var(--lv-chrome); white-space: nowrap; overflow: hidden; }
.lv-win-dots { display: flex; gap: 6px; }
.lv-win-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--lv-line); display: block; }
.lv-label b i { width: 7px; height: 7px; border-radius: 50%; background: var(--lv-mute); }
.lv-label-a b i { background: var(--coral); }
.lv-win-box { position: relative; flex: 1; overflow: hidden; background: #fff; }
.lv-poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.lv-win-box iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; opacity: 0; transition: opacity .3s; }
.lv-win.is-live iframe { opacity: 1; }
/* The windows are live (Josh, 10 Nov): a ring shows the site under the pointer can be used. */
.lv-win { transition: box-shadow .3s; }
.lv-win.is-live:hover { box-shadow: 0 0 0 2px var(--lv-accent), var(--lv-shadow); }
.lv-win-box { cursor: default; }

/* "Try it": a small pill over the after window until the visitor first uses a site. */
@keyframes lv-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }


/* Labels above and notes under each window */
.lv-label { position: absolute; left: 0; top: 0; z-index: 2; display: flex; gap: 10px; align-items: center; font-size: .875rem; color: var(--lv-mute); white-space: nowrap; }
.lv-label-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The open hint (Josh, 11 Nov), at the right end of each window's label row. Also a button. */
.lv-dbl { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 0 3px 8px; border: 0; background: none; font: inherit; font-size: .75rem; font-weight: 500; color: var(--lv-mute); cursor: pointer; white-space: nowrap; transition: color .2s; }
.lv-dbl svg { width: 13px; height: 13px; flex: none; transition: transform .25s var(--ease); }
.lv-dbl:hover { color: var(--lv-accent); }
.lv-dbl:hover svg { transform: scale(1.15); }
.lv-dbl-touch { display: none; }
@media (hover: none) { .lv-dbl-desk { display: none; } .lv-dbl-touch { display: inline; } }

.lv-win { z-index: 1; }

/* Full screen (Josh, 11 Nov): the window itself covers the page; its bar names the site and holds
   Close. The scene's sticky layer rises above the header while it is open. */
.lv-win-name, .lv-win-close { display: none; }
.lv-scene.is-full .lv-sticky { z-index: 1000; }
.lv-win.is-full { position: fixed; inset: 0; z-index: 20; width: 100% !important; height: 100% !important; transform: none !important; visibility: visible !important; opacity: 1 !important; border-radius: 0; box-shadow: none; }
.lv-win.is-full .lv-win-bar { height: 60px; padding: 0 12px 0 22px; gap: 16px; font-size: .9375rem; color: var(--lv-ink); }
.lv-win.is-full .lv-win-dots { display: flex; }
.lv-win.is-full .lv-win-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lv-win.is-full .lv-win-close { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 16px 10px 18px; border: 0; border-radius: 999px; background: var(--lv-ink); color: #FFFFFF; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.lv-win.is-full .lv-win-close svg { width: 16px; height: 16px; }
.lv-win.is-full .lv-win-close:hover { background: var(--lv-accent); }
.lv-win.is-full .lv-win-close:active { transform: scale(.97); }
.lv-win.is-full .lv-win-box iframe { opacity: 1; }
.lv-win.is-full:hover { box-shadow: none; }
.lv-label b { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--lv-ink); }
/* the after's label is an apricot chip, the side by side's touch of the accent (audit D18), dark ink
   on apricot as on the level's number disc */
.lv-label-a b { color: #1C1915; background: var(--apricot); padding: 3px 9px 3px 8px; border-radius: 999px; }
.lv-note { position: absolute; left: 0; top: 0; overflow: hidden; --nh: 3.2em; height: var(--nh); font-size: clamp(17px, 1.6vw, 24px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.lv-note p { height: var(--nh); margin: 0; padding: .25em 0 0 16px; }
.lv-note-b { color: var(--lv-mute); }
.lv-note-b p { border-left: 3px solid var(--lv-line); }
.lv-note-a p { color: var(--lv-ink); border-left: 3px solid var(--coral); }

/* Buttons */
.lv-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--lv-ink); text-decoration: none; border: 1px solid var(--lv-line); background: var(--lv-bg); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.lv-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.lv-btn:hover { border-color: var(--lv-accent); transform: translateY(-1px); }
.lv-btn:hover svg { transform: translateY(2px); }
.lv-btn[data-open-site]:hover svg { transform: translate(2px, -2px); }
.lv-btn:active { transform: translateY(1px); }
.lv-btn--main { background: var(--lv-accent); border-color: var(--lv-accent); color: var(--lv-on-accent); }



/* Reduced motion: each scene is one screen, the after shown, the before one tap away. */

@media (max-width: 1100px) and (min-width: 820px) { .lv-suits { display: none; } }
@media (max-width: 819.98px) {
  .lv-intro-in { grid-template-columns: 1fr; gap: 18px; }
  /* Phone: stacked. The open cover is tall, the others are designed bars. */
  .lv-index { flex-direction: column; height: auto; gap: 10px; }
  .lv-index li, .lv-index li.is-open { flex: none; }
  .lv-cover { height: 88px; border-radius: 16px; transition: height .7s var(--ease), box-shadow .45s var(--ease); }
  /* The open cover leaves room for the two bars, so the whole chooser fits a phone's screen at rest. */
  .lv-cover.is-open { height: min(560px, calc(100svh - var(--header-h) - 224px)); }
  /* A short phone: the open cover drops its longer line and shows a shorter strip of the opening. */
  @media (max-height: 760px) { .lv-cover-shot img { aspect-ratio: 16 / 6; } }
  .lv-cover-wide { width: 100%; }
  .lv-cover-bg::after { background: linear-gradient(180deg, var(--c-bg) 8%, transparent 40%, var(--c-bg) 62%); }
  .lv-cover-head { left: 18px; top: 20px; }
  .lv-cover-logo svg { width: 34px; height: 34px; }
  .lv-cover-word { font-size: 1.3rem; }
  .lv-cover--silwerkloof .lv-cover-word { font-size: 1.05rem; }
  .lv-cover-shot { left: 18px; right: 18px; top: 78px; width: auto; transform: none; border-radius: 10px; }
  .lv-cover-bar { height: 20px; padding: 0 9px; gap: 5px; }
  .lv-cover-bar i { width: 6px; height: 6px; }
  .lv-cover-url { font-size: .5625rem; padding: 1px 10px; }
  .lv-cover-foot { left: 18px; right: 18px; bottom: 18px; width: auto; gap: 8px; }
  .lv-cover-tier, .lv-cover--silwerkloof .lv-cover-tier, .lv-cover--halfmaan .lv-cover-tier { font-size: 2.75rem; }
  .lv-cover-go { margin-top: 4px; padding: 13px 20px; }
  .lv-cc-go { left: auto; right: 12px; top: 50%; bottom: auto; height: 36px; padding: 0 16px; transform: translateY(-50%); font-size: .8125rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
  /* Compact bars: the same three ideas, laid on their side. */
  .lv-cc-foot { left: 74px; right: auto; top: 0; bottom: 0; justify-content: center; gap: 5px; }
  .lv-cover-slice-name { font-size: 1.6rem; }
  .lv-cover--ridgeway .lv-cc-photo { left: auto; right: 8px; top: 8px; bottom: 8px; width: 44%; border-radius: 10px; }
  .lv-cover--ridgeway .lv-cc-photo img { object-position: 12% 40%; }
  .lv-cover--ridgeway .lv-cc-mark { left: 16px; top: 22px; bottom: auto; width: 44px; height: 44px; }
  .lv-cover--ridgeway .lv-cc-foot { bottom: 0; }
  .lv-cover--silwerkloof .lv-cc-photo img { object-position: 70% 46%; }
  .lv-cover--silwerkloof .lv-cc-photo::after { background: linear-gradient(90deg, #1C1915 30%, rgba(28, 25, 21, .55) 62%, rgba(28, 25, 21, .1)); }
  .lv-cover--silwerkloof .lv-cc-mark { left: 18px; top: 25px; margin: 0; }
  .lv-cover--silwerkloof .lv-cc-word { display: none; }
  .lv-cover--silwerkloof .lv-cc-foot { left: 74px; right: auto; padding: 0; border: 0; }
  .lv-cover--silwerkloof .lv-cc-foot::before { content: ""; position: absolute; left: -12px; top: 22px; bottom: 22px; border-left: 1px solid var(--c-accent); }
  .lv-cover--silwerkloof .lv-cover-slice-name, .lv-cover--halfmaan .lv-cover-slice-name { font-size: 1.75rem; }
  .lv-cover--halfmaan .lv-cc-photo { left: auto; right: 0; top: 0; bottom: 0; width: 46%; border-radius: 999px 0 0 999px; box-shadow: none; }
  .lv-cover--halfmaan .lv-cc-photo img { object-position: 22% 38%; }
  .lv-cover--halfmaan .lv-cc-mark { left: 22px; top: 29px; margin: 0; }
  .lv-cover--halfmaan .lv-cc-foot { align-items: flex-start; text-align: left; left: 74px; right: auto; bottom: 0; }
  .lv-head { height: 150px; grid-template-columns: 1fr auto; grid-template-areas: "tier end" "mid mid"; align-content: center; gap: 12px; }
  .lv-tierbox { grid-area: tier; grid-template-areas: "k k k" "tier tier tier"; }
  .lv-suits { display: none; }
  .lv-tier { font-size: 1.75rem; }
  .lv-mid { grid-area: mid; place-items: center start; min-height: 0; }
  .lv-walk { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .lv-walk-mask, .lv-walk-list span { height: 24px; line-height: 24px; }
  .lv-walk-list { align-items: flex-start; }
  .lv-walk-list span { font-size: 1.125rem; }
  .lv-end { grid-area: end; }
  .lv-stage { top: calc(var(--header-h) + 150px); bottom: 16px; }
  .lv-win-bar { height: 30px; gap: 8px; padding: 0 10px; }
  .lv-win-dots { display: none; }
  /* Phone: the label rows are narrow, so Before or After sits over the open hint. */
  .lv-label { font-size: .75rem; flex-direction: column; align-items: flex-start; gap: 3px; }
  .lv-label-name { display: none; }
  .lv-dbl { margin: 0; padding: 2px 0; font-size: .6875rem; gap: 5px; }
  .lv-dbl svg { width: 11px; height: 11px; }
  .lv-win.is-full .lv-win-bar { height: 56px; padding: 0 8px 0 16px; font-size: .8125rem; }
  .lv-win.is-full .lv-win-dots { display: none; }
  .lv-win.is-full .lv-win-close { padding: 10px 14px 10px 16px; }
  .lv-walk-k { display: none; }
  .lv-note { font-size: 14px; --nh: 5.6em; }
  .lv-note p { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-index li, .lv-cover, .lv-cover *, .lv-btn { transition: none !important; }
  .lv-prompt-arrow { animation: none; }
}

/* Header link to the chooser (Josh, 10 Nov): a bold "Websites" in the site nav. On phones the rest of
   the nav is hidden, so Websites stays on its own between the name and the button (audit D15): a
   small browser window icon, with the word too where the header has room. */
.site-nav a.nav-websites { font-weight: 700; opacity: 1; }
.nav-websites-ico { display: none; }
@media (max-width: 819.98px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 8px; }
  .site-header .site-nav { display: flex; padding: 0; border: 0; background: none; }
  .site-nav a:not(.nav-websites) { display: none; }
  .site-nav a.nav-websites { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); font-size: .8125rem; }
  .nav-websites-ico { display: block; width: 17px; height: 17px; flex: none; }
}
@media (max-width: 479.98px) {
  .site-nav a.nav-websites { width: 32px; padding: 0; }
  .nav-websites-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
#websites { scroll-margin-top: calc(var(--header-h) + 24px); }

/* The levels menu (Josh, 10 Nov): from the header's "Websites" and from each level's indicator.
   It lives on <body> (js/levels/menu.js), so its tokens are set here, light like the page. */
.lv-menu { --m-ink: #0B1B3F; --m-mute: #4A5878; --m-line: rgba(11, 27, 63, .12); --m-hover: #EAF2FF; --m-accent: #1F6FFF;
  position: fixed; z-index: 90; width: 330px; padding: 6px; border-radius: 18px; background: #FFFFFF; color: var(--m-ink);
  box-shadow: 0 0 0 1px var(--m-line), 0 24px 60px rgba(11, 27, 63, .2), 0 6px 16px rgba(11, 27, 63, .1); font-family: var(--font); }
.lv-menu[hidden] { display: none; }
.lv-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lv-menu-item:hover, .lv-menu-item:focus-visible { background: var(--m-hover); outline: none; }
.lv-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--m-accent); }
.lv-menu-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.lv-menu-item[data-level="refresh"] img { object-position: 10% 45%; }
.lv-menu-item[data-level="interactive"] img { object-position: 74% 50%; }
.lv-menu-item[data-level="immersive"] img { object-position: 24% 42%; }
.lv-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-menu-name { font-size: .9375rem; font-weight: 600; }
.lv-menu-name i { font-style: normal; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-mute); margin-right: 8px; }
.lv-menu-tags { font-size: .8125rem; color: var(--m-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-menu-item[aria-current="true"] { background: var(--m-hover); }
.lv-menu-item[aria-current="true"] .lv-menu-name::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); vertical-align: .1em; }
.lv-menu-item[aria-current="true"] .lv-menu-name::after { content: "You are here"; margin-left: 8px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--coral-ink); }
.lv-menu-all { justify-content: center; margin-top: 4px; padding: 11px; border-top: 1px solid var(--m-line); border-radius: 0 0 12px 12px; font-size: .875rem; font-weight: 600; }

@media (max-width: 819.98px) {
  .lv-end { gap: 8px; }
  .lv-menu { width: min(330px, calc(100vw - 24px)); }
}

/* Each level's control at the right of its head: "View full website" (Josh, 11 Nov: the skip
   buttons are gone, the header's Websites menu moves between levels). */
.lv-ctl { gap: 10px; flex-wrap: nowrap; }
@media (max-width: 819.98px) {
  .lv-ctl { gap: 6px; flex-direction: column; align-items: flex-end; }
  .lv-ctl .lv-btn { padding: 8px 12px; font-size: .75rem; }
  .lv-note-b { --nh: 8.4em; }
}

/* Entering a level (Josh, 10 Nov): the level's cover fills the stage with its title, then lifts away
   off the before window. Sits over the stage and the head; the timeline clips it, never fades it. */
/* the level's number sits on an apricot disc, the card's touch of the accent (audit D18) */

/* The chooser's copy inside the scene (Josh, checklist 34): placed exactly over the chooser at the
   moment the scene sticks, it is what grows and slides away. Until then the real chooser is on show
   and the scene lets every pointer through to it. */
.lv-ghost { position: absolute; z-index: 6; margin: 0; visibility: hidden; }
.lv-ghost li, .lv-ghost .lv-cover, .lv-ghost .lv-cover * { transition: none !important; }
.lv-scene.is-pre { pointer-events: none; }
.lv-scene.is-rm .lv-ghost { display: none; }

/* The chooser again after every level (Josh, 11 Nov): the same covers, the levels seen marked Viewed. */
.lv-again { padding-top: clamp(56px, 10svh, 112px); }
.lv-cover-viewed { position: absolute; z-index: 4; top: 12px; right: 12px; display: none; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  background: #FFFFFF; color: #1A2B22; font-family: var(--font); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(11, 27, 63, .16); pointer-events: none; }
.lv-cover-viewed svg { width: 13px; height: 13px; color: #1F8A4C; }
.lv-cover[data-viewed] .lv-cover-viewed { display: inline-flex; }
@media (max-width: 819.98px) {
  /* A closed bar keeps its See it button clear: the tick sits under it. */
  .lv-cover:not(.is-open) .lv-cover-viewed { top: auto; bottom: 5px; right: 14px; padding: 3px 8px 3px 6px; font-size: .5625rem; gap: 4px; }
  .lv-cover:not(.is-open) .lv-cover-viewed svg { width: 10px; height: 10px; }
}


/* Entering a level (Josh, 11 Nov): both heroes drop in side by side at once, large, each with its own
   line, the level's name above. js/levels/scene.js places them; scrolling on they travel into the
   side by side walk. */
.lv-introtitle { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none; visibility: hidden; }
.lv-introtitle-k { margin: 0; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--lv-mute); }
.lv-introtitle-k b { display: inline-grid; place-items: center; width: 2em; height: 2em; margin: 0 .35em 0 .2em; border-radius: 50%; background: var(--apricot); color: #1C1915; letter-spacing: 0; vertical-align: middle; }
.lv-introtitle-name { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.035em; font-weight: 600; color: var(--lv-ink); }
.lv-introtitle-line { margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--lv-mute); }
.lv-introlab { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: var(--lv-ink); white-space: nowrap; pointer-events: none; visibility: hidden; }
.lv-introlab i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lv-mute); }
.lv-introlab-a { color: var(--coral-ink); }
.lv-introlab-a i { background: var(--coral); }
@media (max-width: 819.98px) {
  .lv-introtitle { gap: 4px; }
  .lv-introtitle-k { font-size: .625rem; }
  .lv-introtitle-name { font-size: 2rem; }
  .lv-introtitle-line { font-size: .875rem; }
  .lv-introlab { font-size: .8125rem; white-space: normal; line-height: 1.2; align-items: flex-start; gap: 6px; }
  .lv-introlab i { width: 7px; height: 7px; margin-top: .3em; }
}