/* Landing page, "next" layer (prototype): wide-view redesign of the sections below the hero.
   Progressive enhancement over the existing markup; landing-next.js adds the hooks (html.lx, .lx-*, .clx*, .gapx*, .exx*).
   Everything structural is scoped to >= 1024px. Below that the page stays as it is. */
:root { --lx-red: #e5484d; }
.dark { --lx-red: #ff5a5f; }

/* film cards: the thumbnail already carries the title, so the overlay text waits for the hover */
#explainer .video-overlay h4, #explainer .video-overlay p { opacity: 0; transition: opacity .3s; }
#explainer .group:hover .video-overlay h4, #explainer .group:hover .video-overlay p { opacity: 1; }

/* helpers that exist at every width (their content must stay readable when the wide layout is off) */
.clx-panel, .clx-group, .clx-all, .exx-dt, .lx-base { display: none; }
.gapx-pair { display: inline-flex; align-items: center; gap: .6em; width: 100%; }
.gapx-line { position: relative; flex: 1 1 auto; min-width: 2.5rem; height: 12px; }
.gapx-line::before, .gapx-line::after { content: ""; position: absolute; top: 50%; width: 36%; border-top: 1.5px dashed hsl(var(--foreground) / .4); }
.gapx-line::before { left: 0; } .gapx-line::after { right: 0; }
.gapx-line i { position: absolute; top: 1px; bottom: 1px; width: 2px; background: var(--lx-red); border-radius: 1px; transition: opacity .4s .5s; }
.gapx-line i:first-of-type { left: 36%; } .gapx-line i:last-of-type { right: 36%; }
.gapx-line em { position: absolute; left: 36%; right: 36%; top: 50%; height: 2px; margin-top: -1px; background: var(--lx-red); transform: scaleX(0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.gapx-line b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--lx-red); clip-path: polygon(34.5% 2.4%, 65.5% 2.4%, 90.5% 20.6%, 100% 50%, 90.5% 79.4%, 65.5% 97.6%, 34.5% 97.6%, 9.5% 79.4%, 0 50%, 9.5% 20.6%); transform: scale(0); transition: transform .35s .45s cubic-bezier(.3, 1.6, .5, 1); }
.gapx.is-bridged .gapx-line em { transform: scaleX(1); }
.gapx.is-bridged .gapx-line b { transform: scale(1); }
.gapx.is-bridged .gapx-line i { opacity: 0; }
.gapx .gapx-with { transition: opacity .6s .35s, border-color .6s .35s; }
.gapx:not(.is-bridged) .gapx-with { opacity: .38; }

@media (min-width: 1024px) {
    /* ---------- Section heads: an editorial split instead of a centred stack ---------- */
    .lx-head { text-align: left !important; max-width: 72rem !important; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4rem; align-items: end; margin-bottom: 3.5rem !important; padding-top: 1.5rem; border-top: 1px solid hsl(var(--foreground) / .16); }
    .lx-head > :first-child { grid-column: 1; justify-self: start; }
    .lx-head > h2 { grid-column: 1; margin-top: 1.1rem; font-size: clamp(2.75rem, 4.6vw, 4.5rem); line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
    .lx-head > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 .4rem; font-size: 1.02rem; line-height: 1.6; }

    /* ---------- Clusters: the decagon again, as an explorer. Ten rows drive one large readout ---------- */
    .clx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; max-width: 72rem; margin: 0 auto; align-items: center; }
    .clx-panel { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
    .clx-deca { width: min(100%, 21rem); height: auto; overflow: visible; }
    .clx-deca .clx-edge { fill: hsl(var(--foreground) / .03); stroke: var(--lx-red); stroke-width: 1.4; stroke-linejoin: round; }
    .clx-deca .clx-spoke { stroke: var(--lx-red); stroke-width: 1.2; stroke-dasharray: 3 4; transition: opacity .25s; }
    .clx-deca .clx-v circle { fill: hsl(var(--background)); stroke: var(--lx-red); stroke-width: 1.4; transition: fill .2s, r .2s; cursor: pointer; }
    .clx-deca .clx-v text { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; fill: var(--lx-red); text-anchor: middle; pointer-events: none; transition: fill .2s; }
    .clx-deca .clx-v.is-active circle { fill: var(--lx-red); r: 13.5px; }
    .clx-deca .clx-v.is-active text { fill: #fff; }
    .clx-deca .clx-big { font: 700 62px 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; fill: hsl(var(--foreground)); text-anchor: middle; }
    .clx-deca .clx-topo { font: 700 7.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .22em; fill: var(--lx-red); text-anchor: middle; text-transform: uppercase; }
    .clx-body { transition: opacity .14s; min-height: 11.5rem; }
    .clx-panel.is-swap .clx-body, .clx-panel.is-swap .clx-big, .clx-panel.is-swap .clx-topo { opacity: 0; }
    .clx-name { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.03em; }
    .clx-view { margin-top: 1rem; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.35; color: hsl(var(--foreground) / .82); text-wrap: pretty; }
    .clx-more { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .4rem; font: 700 .72rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-red); }
    .clx-more:hover { text-decoration: underline; text-underline-offset: 4px; }

    .clx > .clx-list { display: flex !important; flex-direction: column; gap: 0 !important; max-width: none; margin: 0; min-width: 0; }
    .clx-group { display: flex; align-items: baseline; gap: .9rem; padding: 0 .75rem .55rem; font-size: .78rem; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--foreground) / .22); }
    .clx-group ~ .clx-group { margin-top: 1.6rem; }
    .clx-group b { font: 700 .68rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--foreground)); }
    .clx-list > .cl-card { flex-direction: row; align-items: baseline; gap: 1.25rem; padding: .78rem .75rem; border: 0; border-bottom: 1px solid hsl(var(--border)); border-radius: 0; background: none; transition: background-color .2s, box-shadow .2s, padding-left .25s; opacity: 1; transform: none !important; }
    .clx-list > .cl-card > div:first-child { display: contents; }
    .clx-list .cl-num { order: 1; width: 2.6rem; font-size: 1rem; color: hsl(var(--muted-foreground)); transition: color .2s; }
    .clx-list .cl-name { order: 2; flex: 1 1 auto; font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; letter-spacing: -.01em; color: hsl(var(--foreground) / .72); transition: color .2s; }
    .clx-list .cl-topo { display: none; }
    .clx-list .cl-view { display: none; }
    .clx-list .cl-more { order: 4; font-size: 0; opacity: 0; transition: opacity .2s; }
    .clx-list > .cl-card.is-active { background: hsl(var(--foreground) / .05); box-shadow: inset 3px 0 0 var(--lx-red); padding-left: 1.2rem; }
    .clx-list > .cl-card.is-active .cl-num { color: var(--lx-red); }
    .clx-list > .cl-card.is-active .cl-name { color: hsl(var(--foreground)); }
    .clx-list > .cl-card.is-active .cl-more { opacity: 1; }
    .clx-all { display: inline-flex; align-self: flex-end; margin-top: 1rem; padding-right: .75rem; font-size: .8rem; font-weight: 600; }
    .clx-all:hover { text-decoration: underline; }
    #clusters.clx-on .clx-legend { display: none; }

    /* ---------- Why it matters: each gap shows its break, then closes it ---------- */
    .gapx { padding: 1.9rem 1.75rem 1.75rem !important; }
    .gapx .gapx-pair { font-size: .68rem; color: hsl(var(--foreground) / .8); }
    .gapx h3 { margin-top: 1.4rem; font-size: 1.6rem; letter-spacing: -.02em; }
    .gapx .gapx-with { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--lx-red); font-size: .95rem; }
    .gapx:not(.is-bridged) .gapx-with { border-top-color: hsl(var(--border)); }

    /* the frameworks you already use, standing on one base */
    #bridge .lx-stack { position: relative; padding-left: 1.75rem; display: flex; flex-direction: column; gap: .45rem; border: 0; }
    #bridge .lx-stack::before { content: ""; position: absolute; left: .5rem; top: 1.4rem; bottom: 1.6rem; width: 1.5px; background: var(--lx-red); }
    #bridge .lx-stack > .aud-row { position: relative; border: 1px solid hsl(var(--border)); border-radius: .8rem; padding: .8rem 1rem; background: hsl(var(--card) / .6); transition: border-color .2s, transform .2s; }
    #bridge .lx-stack > .aud-row::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; border-top: 1.5px solid var(--lx-red); }
    #bridge .lx-stack > .aud-row:hover { border-color: hsl(var(--foreground) / .4); transform: translateX(4px); }
    #bridge .lx-stack > .aud-row > span { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; flex: 1 1 auto; }
    #bridge .lx-stack > .aud-row strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; letter-spacing: .04em; }
    #bridge .lx-base { position: relative; display: flex; align-items: baseline; gap: .9rem; margin-top: .35rem; padding: .95rem 1rem; border: 1.5px solid var(--lx-red); border-radius: .8rem; background: color-mix(in srgb, var(--lx-red) 9%, transparent); font-size: .875rem; }
    #bridge .lx-base::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; border-top: 1.5px solid var(--lx-red); }
    #bridge .lx-base b { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; letter-spacing: -.01em; line-height: 1; }

    /* ---------- Audiences: one switchboard instead of five cards ---------- */
    .lx-switch { gap: 0 !important; border: 1px solid hsl(var(--border)); border-radius: 1.25rem; overflow: hidden; background: hsl(var(--card) / .45); }
    .lx-switch > a { border: 0 !important; border-right: 1px solid hsl(var(--border)) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 2rem 1.5rem 1.6rem !important; min-height: 20rem; transition: background-color .3s !important; }
    .lx-switch > a:last-child { border-right: 0 !important; }
    .lx-switch > a > span:first-child { transition: background-color .3s, color .3s, transform .3s; }
    .lx-switch > a > span:nth-child(2) { font-size: 1.45rem; letter-spacing: -.02em; margin-top: 2.5rem; }
    .lx-switch > a > span:last-child { transition: transform .3s, color .3s; }
    .lx-switch > a:hover, .lx-switch > a:focus-visible { background: hsl(var(--foreground) / .055) !important; outline: none; }
    .lx-switch > a:hover > span:first-child, .lx-switch > a:focus-visible > span:first-child { background: var(--lx-red); color: #fff; transform: scale(1.08); }
    .lx-switch > a:hover > span:last-child, .lx-switch > a:focus-visible > span:last-child { transform: translateY(3px); color: var(--lx-red); }

    /* ---------- Worked example: the path laid out as it is written, left to right ---------- */
    .exx { max-width: 72rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr) 7.5rem minmax(0, 1fr); gap: 0 !important; row-gap: 1.25rem !important; align-items: stretch; }
    .exx > .ex-step { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.1rem; transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), border-color .25s; }
    .exx > .ex-step > div:nth-child(2) { flex: 1 1 auto; }
    .exx > .ex-step > div:nth-child(2) > p:first-child { font-size: 1.12rem; line-height: 1.3; }
    .exx > .ex-step > div:last-child { padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
    .exx .ex-note { font-size: 1.5rem; letter-spacing: -.02em; }
    .exx > .ex-step.is-hot { border-color: var(--lx-red); }
    .exx > .ex-step.is-hot .ex-idx { background: var(--lx-red); color: #fff; }
    .exx .ex-idx { transition: background-color .25s, color .25s; }
    .exx-dt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; font: 700 .78rem 'JetBrains Mono', ui-monospace, monospace; color: hsl(var(--foreground)); }
    .exx-dt span { opacity: 0; transition: opacity .4s; }
    .exx-dt i { position: relative; display: block; width: 100%; height: 2px; background: hsl(var(--foreground) / .5); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
    .exx-dt i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid hsl(var(--foreground) / .7); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
    .exx-dt small { font-weight: 500; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); opacity: 0; transition: opacity .4s; }
    .exx.is-in .exx-dt i { transform: scaleX(1); }
    .exx.is-in .exx-dt span, .exx.is-in .exx-dt small { opacity: 1; }
    .exx-dt.is-hot { color: var(--lx-red); } .exx-dt.is-hot i { background: var(--lx-red); } .exx-dt.is-hot i::after { border-left-color: var(--lx-red); }
    .exx > .exx-strip { grid-column: 1 / -1; padding: 1.5rem 1.5rem 1.35rem; }
    .exx .ex-path { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.01em; }
    .exx-tok { padding: .1em .15em; border-radius: .3em; transition: color .2s, background-color .2s, opacity .2s; cursor: default; }
    .exx.has-hot .exx-tok:not(.is-hot) { opacity: .35; }
    .exx-tok.is-hot { color: var(--lx-red); background: color-mix(in srgb, var(--lx-red) 12%, transparent); }
    .lx-wide { max-width: 72rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .gapx-line em, .gapx-line b, .gapx-line i, .gapx .gapx-with, .exx-dt i, .exx-dt span, .exx-dt small, .clx-body { transition: none !important; }
}

/* ---------- Batch 2: model concepts, audience resources, page rail ---------- */
.lx-rail { display: none; }
@media (min-width: 1024px) {
    .lx-head > p ~ p { grid-row: auto; margin-top: .75rem; }
    .lx-head > nav { grid-column: 1 / -1; justify-content: flex-start !important; margin-top: 2rem !important; }
    /* concept numerals: the outlined-type motif of the hero wordmark */
    .lx-head[data-lx-num] { position: relative; }
    .lx-head[data-lx-num]::after { content: attr(data-lx-num); position: absolute; right: 0; top: 1.1rem; font: 700 clamp(5rem, 8vw, 7.5rem)/.8 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground) / .2); pointer-events: none; z-index: -1; }
    .lx-head[data-lx-num] > p:first-of-type { padding-top: 6.5rem; }
    /* foundations: reading list with weight */
    #concept-foundations .glass-card { transition: border-color .25s, transform .25s, background-color .25s; }
    #concept-foundations a.glass-card:hover { border-color: var(--lx-red); transform: translateY(-3px); }
}
@media (min-width: 1280px) {
    /* page rail: where am I on a long page, and one click to anywhere */
    .lx-rail { display: flex; flex-direction: column; gap: 2px; position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 40; padding: 10px 8px; border-radius: 14px; transition: background-color .25s, box-shadow .25s; }
    .lx-rail a { display: flex; align-items: center; gap: 10px; height: 15px; color: hsl(var(--muted-foreground)); text-decoration: none; }
    .lx-rail a::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 1px; background: hsl(var(--foreground) / .28); transition: width .25s, background-color .25s; }
    .lx-rail a.is-sub::before { width: 8px; }
    .lx-rail a span { font: 600 10.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .3s, opacity .2s; }
    .lx-rail:hover, .lx-rail:focus-within { background: hsl(var(--background) / .92); box-shadow: 0 0 0 1px hsl(var(--border)), 0 12px 40px rgba(0, 0, 0, .25); }
    .lx-rail:hover a span, .lx-rail:focus-within a span { max-width: 22rem; opacity: 1; }
    .lx-rail a.is-active { color: hsl(var(--foreground)); }
    .lx-rail a.is-active::before { width: 26px; background: var(--lx-red); }
    .lx-rail a:hover { color: hsl(var(--foreground)); } .lx-rail a:hover::before { background: hsl(var(--foreground)); }
    .lx-rail.is-home { opacity: 0; pointer-events: none; }
    .lx-rail { transition: opacity .3s, background-color .25s, box-shadow .25s; }
}