/* ============================================================
   LANDING — the signed-out front door, from Rob's approved design
   packet (Orchestration ops/design/lake-ui-packet.md and
   lake-landing.html, 21 October 2026).
   Square like the map's blocks: 3px corners for controls, 4px for
   surfaces, no pills or circles. One tab style, one outline for
   controls on navy, one hairline, one glass and one shadow, all
   held in the tokens below so later components share them.
   ============================================================ */

:root {
    --ln-navy: #010542;
    --ln-navy-2: #06105c;
    --ln-navy-3: #0d1f75;
    --ln-line-dark: #1b2a85;
    --ln-ignite: #2e6cf6;
    --ln-flame-bright: #5c91f8;
    --ln-flame-deep: #1b45b5;
    --ln-white: #ffffff;
    --ln-tint: #f7f8fa;
    --ln-hair: #e2e4ea;
    --ln-body: #131c52;
    --ln-soft: #545f8c;
    --ln-faint: #8d96b8;
    --ln-on-dark: #ffffff;
    --ln-on-dark-2: rgba(255, 255, 255, .72);
    --ln-on-dark-3: rgba(255, 255, 255, .58);
    --ln-line-ctl: rgba(255, 255, 255, .24);
    --ln-glass: rgba(6, 16, 92, .92);
    --ln-float: 0 8px 24px rgba(0, 0, 0, .35);
    --ln-r-ctl: 3px;
    --ln-r-card: 4px;
    --ln-mast-h: 74px;
    --ln-sans: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
    --ln-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    /* The map's six shades, darkest to hottest, and the shade of a block with no figure. */
    --ln-b1: #0c1766;
    --ln-b2: #13308f;
    --ln-b3: #1b45b5;
    --ln-b4: #2e6cf6;
    --ln-b5: #5c91f8;
    --ln-b6: #ffffff;
    --ln-none: #0a1052;
}

/* Focused and scrolled-to elements stop clear of the sticky masthead. */
html:has(.ld) { scroll-padding-top: calc(var(--ln-mast-h) + 16px); }

.ld { background: var(--ln-white); color: var(--ln-body); font: 16px/1.6 var(--ln-sans); }
.ld a { color: inherit; }
/* app.css colours every heading with the light-theme text colour, so headings in the navy sections
   must take their section's on-dark colour explicitly or they render near-black on navy. */
.ld :is(.ln-dark, .ln-story, .ln-ex-band, .ln-on-dark) :is(h1, h2, h3, h4) { color: inherit; }

.ld :focus-visible { outline: 2px solid var(--ln-flame-bright); outline-offset: 3px; }
.ld .ln-frame { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.ld h1, .ld h2, .ld h3 { margin: 0; text-wrap: balance; letter-spacing: -.015em; }
.ld p { text-wrap: pretty; }

/* ---- shared: Eyebrow, Chip, Card, Tabs ---- */
.ln-eyebrow { font: 600 11.5px var(--ln-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ln-flame-deep); display: flex; align-items: center; gap: 12px; }
.ln-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ln-on-dark .ln-eyebrow, .ln-eyebrow.ln-bright { color: var(--ln-flame-bright); }

.ln-chip { display: inline-flex; align-items: center; background: none; border: 1px solid var(--ln-line-ctl); color: var(--ln-on-dark-2); border-radius: var(--ln-r-ctl); padding: 5px 11px; font: 600 13px var(--ln-sans); }
button.ln-chip { cursor: pointer; }
button.ln-chip:hover { border-color: var(--ln-flame-bright); color: var(--ln-white); }
.ln-chip[aria-pressed="true"] { background: var(--ln-ignite); border-color: var(--ln-ignite); color: var(--ln-white); }
.ln-chip.ln-tag { border: 0; padding: 0; font: 10.5px var(--ln-mono); letter-spacing: .12em; color: var(--ln-ignite); text-transform: uppercase; }

.ln-card { background: var(--ln-white); border: 1px solid var(--ln-hair); border-radius: var(--ln-r-card); overflow: hidden; display: flex; flex-direction: column; }

.ln-tabs { display: flex; align-items: stretch; gap: 22px; border-bottom: 1px solid var(--ln-line-dark); }
.ln-tabs .ln-tab { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0; background: none; border: 0; color: var(--ln-on-dark-3); font: 600 13.5px var(--ln-sans); cursor: pointer; }
.ln-tabs .ln-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.ln-tabs .ln-tab:hover { color: var(--ln-on-dark-2); }
.ln-tabs .ln-tab[aria-selected="true"] { color: var(--ln-white); }
.ln-tabs .ln-tab[aria-selected="true"]::after { background: var(--ln-flame-bright); }

/* ---- LakeMasthead: sticks to the top so Sign in follows the reader down ---- */
.ln-mast { position: sticky; top: 0; z-index: 60; color: var(--ln-on-dark); transition: background .25s, box-shadow .25s; }
.ln-mast.stuck { background: rgba(1, 5, 66, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--ln-line-dark); }
.ln-mast-in { display: flex; align-items: center; gap: 12px; height: var(--ln-mast-h); }
.ln-mark { width: 26px; height: 30px; object-fit: contain; }
.ln-brand-name { font-weight: 700; letter-spacing: .02em; font-size: 17px; }
.ln-brand-name span { color: var(--ln-flame-bright); }
.ln-brand-sub { font: 9.5px var(--ln-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ln-on-dark-3); }
.ln-mast-cta { margin-left: auto; background: var(--ln-ignite); color: var(--ln-white); text-decoration: none; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--ln-r-ctl); transition: background-color .15s; }
.ld .ln-mast-cta { color: var(--ln-white); text-decoration: none; }
.ln-mast-cta:hover { background: var(--ln-flame-deep); }

/* ---- LandingHero ---- */
.ln-dark { background: radial-gradient(1150px 540px at 78% -12%, #0d1f75 0%, rgba(13, 31, 117, 0) 62%), var(--ln-navy); color: var(--ln-on-dark); position: relative; overflow: hidden; margin-top: calc(-1 * var(--ln-mast-h)); padding-top: var(--ln-mast-h); }
.ln-hero { position: relative; }
.ln-hero-copy { position: relative; z-index: 2; padding-block: 72px 96px; max-width: 640px; }
.ln-hero-copy .ln-eyebrow { color: var(--ln-flame-bright); margin-bottom: 26px; }
.ln-hero-copy .ln-eyebrow::before { display: none; }
/* The app's own heading colour is for light pages; on the hero, headings take the navy band's white. */
.ld .ln-hero h1, .ld .ln-hero h2, .ld .ln-hero h3 { color: inherit; }
.ln-hero h1 { font-size: clamp(38px, 6.2vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -.025em; }
.ln-hero h1 .alt { color: var(--ln-on-dark-2); }
.ln-stand { color: var(--ln-on-dark-2); font-size: 17px; max-width: 54ch; margin: 26px 0 30px; }
.ln-stand b { color: var(--ln-white); }
.ln-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ld .ln-cta { display: inline-flex; gap: 10px; align-items: center; background: var(--ln-ignite); color: var(--ln-white); text-decoration: none; font-weight: 600; padding: 13px 22px; border: 0; border-radius: var(--ln-r-ctl); transition: background-color .15s; }
.ld .ln-cta:hover { background: var(--ln-flame-deep); }
.ln-expand { background: rgba(255, 255, 255, .06); color: var(--ln-white); border: 1px solid var(--ln-line-ctl); border-radius: var(--ln-r-ctl); padding: 12px 18px; font: 600 16px var(--ln-sans); display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.ln-expand:hover { border-color: var(--ln-flame-bright); background: rgba(92, 145, 248, .12); }
.ln-map-cap { margin-top: 18px; font: 12px var(--ln-mono); color: var(--ln-on-dark-3); letter-spacing: .02em; }

/* ---- DotMatrixMap in the hero: the closed map is the background; expanded, it becomes the whole hero,
   edge to edge and the height of the screen, with everything else floating on it over the sea: the title
   top left (Irish Sea), Close and the panel on the right (North Sea), zoom and the ruler bottom right of
   the open water (Channel). ---- */
.ln-hero:has(.ln-hero-map) { min-height: 640px; }
.ln-hero:has(.ln-hero-map) .ln-hero-copy { padding-block: 72px 40px; transition: opacity .3s; }
/* The closed map settles into the navy before the light band, rather than being cut off by it. */
.ln-hero:has(.ln-hero-map)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--ln-navy), rgba(1, 5, 66, 0)); transition: opacity .4s; }
.ln-hero.open::after { opacity: 0; }
.ln-hero-map { position: absolute; z-index: 0; right: -2%; top: -40px; width: min(62%, 760px); opacity: .62; transition: all .55s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.ln-hero-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ln-navy) 0%, rgba(1, 5, 66, 0) 38%); pointer-events: none; transition: opacity .4s; }
.ln-hero-map canvas { display: block; width: 100%; height: auto; }
.ln-mapbox { position: relative; min-width: 0; }
.ln-hero.open { height: calc(100vh - var(--ln-mast-h)); min-height: 560px; }
.ln-hero.open .ln-hero-copy { opacity: 0; pointer-events: none; position: absolute; }
.ln-hero.open .ln-hero-map { right: 0; top: 0; width: 100%; height: 100%; opacity: 1; pointer-events: auto; }
.ln-hero.open .ln-hero-map::after { opacity: 0; }
.ln-hero.open .ln-mapbox { position: absolute; inset: 0; }
.ln-hero.open .ln-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; max-width: none; }
.ln-hero.open canvas { cursor: crosshair; }
.ln-mapview { display: none; }
.ln-hero.open .ln-mapview { display: block; position: absolute; inset: 0; }
.ln-mv-head { position: absolute; left: 24px; top: 20px; max-width: 220px; pointer-events: none; isolation: isolate; }
/* A soft navy pool behind the title keeps it legible over a zoomed-in map. */
.ln-mv-head::before { content: ""; position: absolute; z-index: -1; inset: -36px -60px -30px -40px; background: radial-gradient(closest-side, rgba(1, 5, 66, .88), rgba(1, 5, 66, 0)); }
.ld .ln-mv-head h2 { font-size: 22px; line-height: 1.2; text-shadow: 0 2px 14px rgba(1, 5, 66, .9); }
.ln-map-hint { margin-top: 10px; font: 11.5px/1.5 var(--ln-mono); color: var(--ln-on-dark-3); transition: opacity .6s; }
.ln-map-hint.gone { opacity: 0; }
.ln-close { border: 1px solid var(--ln-line-ctl); color: var(--ln-white); border-radius: var(--ln-r-ctl); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; font: 600 13.5px var(--ln-sans); cursor: pointer; }
.ln-mv-close { position: absolute; right: 24px; top: 20px; pointer-events: auto; box-shadow: var(--ln-float); }
.ln-mv-close:hover { background: var(--ln-navy-3); }
.ln-mv-panel { position: absolute; right: 24px; top: 66px; width: 300px; max-height: calc(100% - 82px); overflow-y: auto; border-radius: var(--ln-r-card); box-shadow: var(--ln-float); display: grid; gap: 12px; align-content: start; pointer-events: auto; scrollbar-width: thin; }
.ln-card-d { border: 1px solid var(--ln-line-dark); border-radius: var(--ln-r-card); padding: 16px; display: grid; gap: 8px; }
.ln-card-d .k { font: 600 11px var(--ln-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ln-on-dark-3); }
.ln-card-d h3 { font-size: 18px; }
.ln-card-d .big { font: 700 30px var(--ln-mono); color: var(--ln-flame-bright); line-height: 1.1; }
.ln-card-d .big small { font: 13px var(--ln-sans); color: var(--ln-on-dark-3); margin-left: 8px; }
.ln-card-d p { margin: 0; font-size: 14px; color: var(--ln-on-dark-2); }
/* In the map panel the tabs are the card's header; the selected authority's tab carries a close button. */
.ln-mv-panel .ln-mv-card { padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.ln-mv-tabs { gap: 20px; padding: 6px 16px 0; }
.ln-mv-tabs .ln-tab { min-height: 40px; }
.ln-mv-tabs button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
#ln-tab-layers { flex: none; }
.ln-mv-tab-area { flex: 0 1 auto; min-width: 0; }
.ln-mv-tab-area[hidden] { display: none; }
.ln-mv-tab-area.on { color: var(--ln-white); }
.ln-mv-tab-area.on::after { background: var(--ln-flame-bright); }
.ln-mv-tab-area [role="tab"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ln-mv-tabs .ln-mv-x { flex: none; width: 20px; height: 20px; display: grid; place-items: center; font-size: 15px; line-height: 1; border-radius: var(--ln-r-ctl); color: var(--ln-on-dark-3); }
.ln-mv-tabs .ln-mv-x:hover { color: var(--ln-white); background: rgba(255, 255, 255, .14); }
.ln-mv-pane { display: grid; gap: 10px; padding: 14px 16px 16px; }
.ln-mv-pane[hidden] { display: none; }
.ld .ln-mv-pane .ln-mv-note { margin: 0; font: 11.5px/1.5 var(--ln-mono); color: var(--ln-on-dark-3); }
.ln-mv-layers .ln-layers { display: grid; gap: 2px; margin: 0 -6px; }
.ln-mv-layers .ln-layers button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: none; border: 0; border-radius: var(--ln-r-ctl); padding: 7px 6px; color: var(--ln-on-dark-2); font: 14px var(--ln-sans); text-align: left; cursor: pointer; }
.ln-mv-layers .ln-layers button i { width: 10px; height: 10px; border-radius: 1px; border: 1.5px solid var(--ln-on-dark-3); }
.ln-mv-layers .ln-layers button small { font: 10.5px var(--ln-mono); letter-spacing: .06em; color: var(--ln-on-dark-3); }
.ln-mv-layers .ln-layers button:hover { background: rgba(255, 255, 255, .05); color: var(--ln-white); }
.ln-mv-layers .ln-layers button[aria-pressed="true"] { background: rgba(46, 108, 246, .18); color: var(--ln-white); }
.ln-mv-layers .ln-layers button[aria-pressed="true"] i { border-color: var(--ln-flame-bright); background: var(--ln-flame-bright); box-shadow: inset 0 0 0 2px #0a1460; }
.ln-mv-key, .ln-mv-blocks { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--ln-line-dark); }
.ld .ln-mv-key p { margin: 0; font-size: 13px; }
.ln-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.ln-scale i { height: 10px; display: block; border-radius: 1px; }
.ln-ends { display: flex; justify-content: space-between; font: 12px var(--ln-mono); color: var(--ln-on-dark-3); }
.ln-rows { display: grid; gap: 2px; }
.ln-rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ln-on-dark-2); }
.ln-rows div b { font-family: var(--ln-mono); font-weight: 600; color: var(--ln-white); }
.ln-rows div.on, .ln-rows div.on b { color: var(--ln-flame-bright); }
.ln-blocks { display: flex; flex-wrap: wrap; gap: 4px; }
.ln-blocks button { background: none; border: 1px solid var(--ln-line-ctl); color: var(--ln-on-dark-2); font: 12px var(--ln-mono); padding: 5px 9px; border-radius: var(--ln-r-ctl); cursor: pointer; }
.ln-blocks button:hover { color: var(--ln-white); border-color: var(--ln-flame-bright); }
.ln-blocks button[aria-pressed="true"] { background: var(--ln-ignite); border-color: var(--ln-ignite); color: var(--ln-white); }
.ln-mv-zoom { position: absolute; right: 344px; bottom: 20px; display: flex; align-items: flex-end; gap: 12px; pointer-events: auto; }
.ln-zoom-btns { display: grid; gap: 8px; justify-items: end; }
.ln-zoom-btns button { border: 1px solid var(--ln-line-ctl); color: var(--ln-white); box-shadow: var(--ln-float); cursor: pointer; font-family: var(--ln-sans); }
.ln-zoom-btns button:hover:not(:disabled) { background: var(--ln-navy-3); }
.ln-zoom-btns button:disabled { color: var(--ln-on-dark-3); cursor: default; }
.ln-zoom-btns .ln-fit { width: 38px; height: 38px; border-radius: var(--ln-r-ctl); font-size: 15px; }
.ln-zstack { display: grid; border-radius: var(--ln-r-ctl); overflow: hidden; border: 1px solid var(--ln-line-ctl); box-shadow: var(--ln-float); }
.ln-zstack button { width: 38px; height: 38px; border: 0; border-radius: 0; box-shadow: none; font-size: 20px; line-height: 1; }
.ln-zstack button + button { border-top: 1px solid var(--ln-line-ctl); }
/* The zoom stack clips its buttons, so their focus ring sits inside them. */
.ld .ln-zstack button:focus-visible { outline-offset: -3px; }
.ln-ruler { display: grid; justify-items: end; gap: 2px; margin-bottom: 4px; padding: 4px 8px 6px; border-radius: var(--ln-r-ctl); font: 11px var(--ln-mono); color: var(--ln-on-dark-2); pointer-events: none; }
.ln-ruler i { display: block; height: 6px; border: 1.5px solid var(--ln-on-dark-2); border-top: 0; }
.ln-hero:not(.open) .ln-tip, .ln-tip[hidden] { display: none; }
.ln-tip { position: absolute; pointer-events: none; border: 1px solid var(--ln-line-dark); border-radius: var(--ln-r-card); padding: 10px 12px; font-size: 13px; width: 272px; z-index: 5; box-shadow: var(--ln-float); display: grid; gap: 6px; }
.ln-tip-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ln-tip-head strong { font-size: 14px; }
.ln-tip-head span { font: 600 13px var(--ln-mono); color: var(--ln-flame-bright); }
.ln-tip-head small { font: 10.5px var(--ln-mono); color: var(--ln-on-dark-3); margin-left: 4px; }
.ln-tip-k { font: 600 11px var(--ln-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ln-on-dark-3); border-top: 1px solid var(--ln-line-dark); padding-top: 6px; }
.ln-tip-rows { display: grid; gap: 2px; }
.ln-tip-rows div { display: flex; justify-content: space-between; gap: 10px; color: var(--ln-on-dark-2); }
.ln-tip-rows b { font: 600 12.5px var(--ln-mono); color: var(--ln-white); white-space: nowrap; }
.ln-tip-rows div.on, .ln-tip-rows div.on b { color: var(--ln-flame-bright); }
/* Everything that floats on the map shares one glass: nearly solid navy, no backdrop blur (blur layers can
   fail to paint over the canvas). */
.ln-close, .ln-mv-panel .ln-card-d, .ln-zoom-btns button, .ln-ruler, .ln-tip { background: var(--ln-glass); }
@media (prefers-reduced-motion: reduce) {
    .ln-hero-map, .ln-hero-copy, .ln-hero-map::after, .ln-hero::after { transition: none; }
}

/* ---- StatStrip: a light band between the dark hero and the dark story ---- */
.ln-stats { position: relative; z-index: 2; background: var(--ln-white); color: var(--ln-navy); padding-block: 56px 60px; }
.ln-stats-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 84px; }
.ln-stat { padding: 6px 22px 8px 0; border-right: 1px solid var(--ln-hair); }
.ln-stat + .ln-stat { padding-left: 22px; }
.ln-stat:last-child { border-right: 0; }
.ln-stat .n { font: 600 clamp(24px, 3vw, 32px) var(--ln-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ln-stat .l { font-size: 14px; color: var(--ln-soft); margin-top: 6px; max-width: 26ch; }

/* ---- StorySection ---- */
/* ---- StorySection: a dark band where the dots tell the arc. The scene sticks
   beside the beats; scroll position drives both (js/lake-story.js). ---- */
.ln-story { background: var(--ln-navy); color: var(--ln-on-dark); }
.ln-story-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.ln-story-stage { position: sticky; top: var(--ln-mast-h); height: calc(100vh - var(--ln-mast-h)); display: grid; place-items: center; }
.ln-story-stage canvas { width: 100%; height: min(78vh, 720px); }
.ln-beats { padding-block: 22vh 30vh; display: grid; gap: 0; }
.ln-beat { min-height: 72vh; display: grid; align-content: center; gap: 18px; }
.ln-beat h2 { font-size: clamp(34px, 4vw, 50px); line-height: 1.04; letter-spacing: -.025em; }
.ln-beat h2 em { font-style: normal; color: var(--ln-flame-bright); display: block; }
.ln-beat p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ln-on-dark-2); max-width: 44ch; }

/* ---- HowItWorks ---- */
.ln-sec { padding-block: 96px; }
.ln-sec.tint { background: var(--ln-tint); }
.ln-sec-head { max-width: 720px; }
.ln-sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--ln-navy); margin-top: 18px; }
.ln-sec-head p { max-width: 62ch; margin: 18px 0 0; color: var(--ln-soft); font-size: 17px; }
.ln-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.ln-step .txt { padding: 24px 26px 28px; }
.ln-step .no { font: 600 11px var(--ln-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ln-flame-deep); }
.ln-step h3 { font-size: 20px; color: var(--ln-navy); margin: 10px 0 8px; }
.ln-step p { margin: 0; color: var(--ln-soft); font-size: 15px; }

/* Each step opens with a quiet glimpse of the product, labelled as an illustration. */
.ln-vig { position: relative; container-type: inline-size; height: 178px; padding: 20px 26px 0; background: linear-gradient(180deg, #eef2fd, #f6f8fe); border-bottom: 1px solid var(--ln-hair); display: flex; flex-direction: column; gap: 7px; overflow: hidden; font-size: 12.5px; }
.ln-vig-label { position: absolute; right: 10px; bottom: 8px; font: 10.5px var(--ln-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ln-soft); background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: var(--ln-r-ctl); }
.ln-vig .q { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--ln-white); border: 1px solid #c9d5f6; border-radius: var(--ln-r-ctl); color: var(--ln-navy); font-weight: 600; }
.ln-vig .q span { color: var(--ln-faint); font-size: 15px; }
.ln-vig .hit, .ln-vig .fld { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: var(--ln-r-ctl); color: var(--ln-soft); white-space: nowrap; }
.ln-vig .hit b, .ln-vig .fld b { font-weight: 600; color: var(--ln-body); overflow: hidden; text-overflow: ellipsis; }
.ln-vig .fld b { flex: none; }
.ln-vig .hit .ln-chip { flex: none; }
@container (max-width: 300px) { .ln-vig .hit .ln-chip { display: none; } }
.ln-vig .hit.on { background: var(--ln-white); box-shadow: 0 0 0 1px #c9d5f6; }
.ln-vig .hit:not(.on) { opacity: .62; }
.ln-vig-know { gap: 0; }
.ln-vig-know .fld { border-radius: 0; padding: 8px 0; border-bottom: 1px solid #dde4f7; }
.ln-vig-know .fld em { font: normal 11.5px var(--ln-mono); color: var(--ln-ignite); overflow: hidden; text-overflow: ellipsis; }
.ln-vig-use .ask { font-weight: 600; color: var(--ln-navy); }
.ln-vig-use .bars { display: grid; gap: 4px; margin-top: 4px; }
.ln-vig-use .bars div { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; }
.ln-vig-use .bars span { font: 600 10.5px var(--ln-mono); color: var(--ln-soft); }
.ln-vig-use .bars i { height: 11px; border-radius: 1px; background: #b9cbf6; }

/* ---- SignOff ---- */
.ln-signoff { background: var(--ln-white); color: var(--ln-body); }
.ln-signoff-in { padding-block: 128px 104px; max-width: 760px; }
.ln-signoff h2 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -.03em; color: var(--ln-navy); margin: 22px 0 28px; }
.ln-signoff h2 em { font-style: normal; color: var(--ln-ignite); display: block; }
.ln-signoff p { margin: 0; max-width: 46ch; font-size: 18px; color: var(--ln-soft); }
.ln-tally { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--ln-hair); display: grid; gap: 4px; }
.ln-tally b { font: 600 clamp(34px, 4.4vw, 52px) var(--ln-mono); color: var(--ln-navy); font-variant-numeric: tabular-nums; }
.ln-tally span { font-size: 14.5px; color: var(--ln-soft); }

/* ---- brand row ---- */
.ln-foot { padding-block: 26px; border-top: 1px solid var(--ln-hair); font-size: 13px; color: var(--ln-soft); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.ln-foot .ln-mark { width: 18px; height: 22px; }
.ln-foot .ln-brand-name { font-size: 13px; color: var(--ln-navy); margin-left: -10px; }
.ln-foot .ln-brand-name span { color: var(--ln-ignite); }
.ln-foot .mono { font: 12px var(--ln-mono); }
.ld .ln-foot a { margin-left: auto; color: var(--ln-flame-deep); font-weight: 600; text-decoration: none; }
.ld .ln-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ln-foot .attr { flex-basis: 100%; font-size: 12px; }

/* ---- motion: everything here sits behind reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
    .js-story .ld .ln-beat { opacity: .22; transition: opacity .5s; }
    .js-story .ld .ln-beat.on { opacity: 1; }
}

@media (max-width: 900px) {
    .ln-hero-map { width: 100%; right: -20%; opacity: .4; }
    /* Here the map sits behind the words: a navy halo keeps the standfirst and caption legible over bright and glimmering blocks. */
    .ln-hero:has(.ln-hero-map) .ln-stand, .ln-map-cap { text-shadow: 0 0 2px var(--ln-navy), 0 0 16px var(--ln-navy); }
    /* Narrow screens: the map takes most of the screen with the title, Close and zoom on it; the panel follows below. */
    .ln-hero.open { height: auto; min-height: 0; }
    .ln-hero.open .ln-hero-map { position: relative; height: 68vh; min-height: 380px; }
    .ln-hero.open .ln-frame, .ln-hero.open .ln-mapview { position: static; pointer-events: auto; }
    .ln-mv-head { left: 16px; top: 14px; max-width: 170px; }
    .ld .ln-mv-head h2 { font-size: 18px; }
    .ln-map-hint, .ln-ruler { display: none; }
    .ln-mv-close { right: 16px; top: 14px; }
    .ln-mv-zoom { right: 16px; top: 62px; bottom: auto; }
    .ln-mv-panel { position: static; width: auto; max-height: none; overflow: visible; padding-block: 16px 28px; }
    .ln-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .ln-stat:nth-child(2) { border-right: 0; }
    .ln-stat:nth-child(3) { padding-left: 0; }
    .ln-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ln-signoff-in { padding-block: 88px 72px; }
    .ln-story-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ln-story-stage { height: 46vh; z-index: 1; background: var(--ln-navy); }
    .ln-story-stage canvas { height: 42vh; }
    .ln-beat { min-height: 62vh; }
}

@media (max-width: 560px) {
    .ld .ln-frame { padding-inline: 16px; }
    .ln-stats-in { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .ln-stat, .ln-stat + .ln-stat { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--ln-hair); }
    .ln-stat:last-child { border-bottom: 0; }
    .ln-sec { padding-block: 72px; }
    .ln-signoff-in { padding-block: 72px 56px; }
}

/* ---- LakeFooter: the blue explorer, then the white sign-off ---- */
.ln-ex-band { background: radial-gradient(1100px 600px at 88% 0%, #0a1a68 0%, rgba(10, 26, 104, 0) 60%), var(--ln-navy); color: var(--ln-on-dark); padding-block: 96px 64px; }
.ln-ex-band .ln-sec-head h2 { color: var(--ln-white); }
.ln-ex-band .ln-sec-head p { color: var(--ln-on-dark-2); }
.ln-explorer { margin-top: 48px; }
.ln-ex-tabs { gap: 28px; }
.ln-ex-tabs .ln-tab { font-size: 15px; min-height: 48px; }
.ln-ex-pane { padding-block: 26px 30px; }
.ln-ex-search { position: relative; }
.ln-ex-ico { position: absolute; left: 16px; top: 0; height: 50px; display: flex; align-items: center; color: var(--ln-on-dark-3); font-size: 18px; pointer-events: none; }
.ln-ex-search input { width: 100%; height: 50px; padding: 0 16px 0 44px; font: inherit; font-size: 16px; color: var(--ln-white); background: rgba(255, 255, 255, .06); border: 1px solid var(--ln-line-ctl); border-radius: var(--ln-r-ctl); }
.ln-ex-search input::placeholder { color: var(--ln-on-dark-3); }
.ln-ex-search input:focus { outline: none; border-color: var(--ln-flame-bright); box-shadow: 0 0 0 1px var(--ln-flame-bright); background: rgba(92, 145, 248, .1); }
.ln-ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.ln-ex-k { font: 600 11px var(--ln-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ln-on-dark-3); margin-bottom: 12px; }
.ln-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ln-entry { border: 1px solid var(--ln-line-dark); border-radius: var(--ln-r-card); padding: 16px 18px 18px; background: rgba(255, 255, 255, .025); display: grid; gap: 6px; align-content: start; color: inherit; }
.ld a.ln-entry { text-decoration: none; }
a.ln-entry:hover { border-color: var(--ln-flame-bright); }
.ln-en-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ln-on-dark .ln-chip.ln-tag { color: var(--ln-flame-bright); }
.ln-ct { font: 12px var(--ln-mono); color: var(--ln-on-dark-2); font-variant-numeric: tabular-nums; }
.ln-entry h4 { margin: 4px 0 0; font-size: 16.5px; letter-spacing: -.01em; }
.ln-entry p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ln-on-dark-2); }
.ln-src { font-size: 12.5px; color: var(--ln-on-dark-3); }
.ln-ex-empty { margin: 0; padding: 14px 0; color: var(--ln-on-dark-2); }
.ln-cat-sign { margin: 20px 0 0; font-size: 14px; color: var(--ln-on-dark-2); }
.ln-cat-sign b { color: var(--ln-white); }
@media (max-width: 560px) { .ln-ex-band { padding-block: 72px 48px; } }