/* =====================================================================
   Landing page at "/".
   Uses the directory's own light palette, not the dark mockup palette, so "/" and
   /directory/ read as one continuous surface.

   mockup            ->  here
   --soil #171009    ->  --mln-bg #f4f7f5
   --amber #D9A441   ->  --mln-accent #bc4e2c
   --text #EFE9DB    ->  --mln-ink #132420
   canvas threads    ->  faint --mln-primary on cream

   Type is self-hosted IBM Plex (decision 10) — see fonts/README-LICENSE.txt.
   ===================================================================== */

/* ---------------------------------------------------------------- fonts */
/* The JSF resource[] EL form below, rather than a relative ../fonts/ path: this
   stylesheet is served BY
   THE JSF RESOURCE HANDLER, and a relative URL resolves without the ?ln=<library>
   param, so every face 404s. (layout-light.css gets away with ../fonts/ because it is
   not served that way; primeicons.css, which IS, uses the same form.)
   NOTE: do not write the hash-brace EL form inside a comment in this file. MyFaces'
   ValueExpressionFilterInputStream scans the WHOLE stylesheet for it, comments
   included, and an illustrative "resource[...]" with a literal ellipsis is not
   valid EL — it logged two SEVERE lines per uncached fetch of the site root.
   font-display:swap so the hero paints in the system fallback immediately rather than
   holding the most important text on the site behind a font download. */
@font-face {
    font-family: 'MLN Plex Serif';
    src: url('/jakarta.faces.resource/fonts/plex-serif-400.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Serif';
    src: url('/jakarta.faces.resource/fonts/plex-serif-400i.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Serif';
    src: url('/jakarta.faces.resource/fonts/plex-serif-500i.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Sans';
    src: url('/jakarta.faces.resource/fonts/plex-sans-300.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Sans';
    src: url('/jakarta.faces.resource/fonts/plex-sans-400.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Sans';
    src: url('/jakarta.faces.resource/fonts/plex-sans-500.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'MLN Plex Mono';
    src: url('/jakarta.faces.resource/fonts/plex-mono-400.woff2.xhtml?ln=diamond-custom&cv=1792781032') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

.mln-lp {
    --lp-serif: 'MLN Plex Serif', ui-serif, Georgia, serif;
    --lp-sans:  'MLN Plex Sans', var(--mln-ui, system-ui), sans-serif;
    --lp-mono:  'MLN Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    position: relative;
    z-index: 1;
    font-family: var(--lp-sans);
    color: var(--mln-ink, #132420);
}

/* ---------------------------------------------------------------- canvas */
.mln-lp-canvas {
    /* Fixed and behind everything. Decorative only — the page reads identically
       without it, which is what lets the reduced-motion branch simply stop. */
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* ---------------------------------------------------------------- hero */
.mln-lp-hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem 4rem;
}

.mln-lp-eyebrow,
.mln-lp-sec-eyebrow {
    font-family: var(--lp-mono);
    font-size: 0.69rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--mln-faint, #93a099);
    margin: 0 0 1.5rem;
}

.mln-lp-h1 {
    font-family: var(--lp-serif);
    font-weight: 400;
    /* 4.6vw, not 5.6: this headline is 36 characters where the previous one was 21,
       and the steeper step ran it to within 30px of the viewport edge between about
       900 and 1200px. The 4rem ceiling is unchanged, so wide screens look the same. */
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--mln-ink, #132420);
    margin: 0 0 1.4rem;
}
.mln-lp-h1 em { font-style: italic; font-weight: 500; color: var(--mln-primary, #00594c); }

/* Sits between the headline and the lede, carrying the line the old eyebrow used
   to. Serif italic rather than the mono eyebrow: it is a phrase, not a label. */
.mln-lp-subhead {
    font-family: var(--lp-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    color: var(--mln-primary, #00594c);
    margin: 0 0 1.5rem;
}

.mln-lp-invitation {
    max-width: 46rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--mln-muted, #5c6b65);
    margin: 0 0 2.25rem;
}

/* ---- the big search bar: the point of the page ---- */
.mln-lp-search {
    width: min(560px, 92vw);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--mln-surface, #fff);
    border: 1px solid var(--mln-line-2, #d6e0db);
    border-radius: 14px;
    padding: 0.35rem 0.35rem 0.35rem 1.35rem;
    box-shadow: var(--mln-shadow-md, 0 4px 14px rgba(19,36,32,.10));
    transition: border-color .3s, box-shadow .3s;
}
.mln-lp-search:focus-within {
    border-color: var(--mln-primary, #00594c);
    box-shadow: 0 0 0 4px rgba(0, 89, 76, .10), var(--mln-shadow-lg, 0 10px 34px rgba(19,36,32,.16));
}
.mln-lp-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--lp-sans);
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--mln-ink, #132420);
    padding: 0.85rem 0;
}
.mln-lp-search input::placeholder { color: var(--mln-faint, #93a099); }
.mln-lp-search button {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--mln-primary, #00594c);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s, transform .2s;
}
.mln-lp-search button:hover { background: var(--mln-primary-700, #04463b); transform: translateY(-1px); }
.mln-lp-search button:focus-visible { outline: 2px solid var(--mln-ink, #132420); outline-offset: 2px; }

/* Visually hidden but present for screen readers. */
.mln-lp-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* [1] No-input door: "or" rule + Wander the map.
   Widths MUST match the search bar above so the three stack as one column. */
/* ---------------------------------------------------------------- the split
   Root on the left, wander on the right, divider between. Three action rows
   (column title / primary / secondary) then two full-width rows beneath, so the
   two ways in never compete for the same slot.

   minmax(0,1fr) rather than 1fr on the outer columns: a 1fr track refuses to
   shrink below its content, and the search input's default intrinsic width is
   wide enough to push the grid past the viewport at tablet widths. */
.mln-lp-split {
    width: min(880px, 100%);
    margin: 0.5rem auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    row-gap: 0.85rem;
    column-gap: 1.75rem;
    text-align: center;
}

.mln-lp-coltitle {
    font-family: var(--lp-serif);
    font-style: italic;
    font-size: 1.32rem;
    color: var(--mln-primary, #00594c);
    padding-bottom: 0.15rem;
}
.mln-lp-coltitle--root   { grid-column: 1; grid-row: 1; }
.mln-lp-coltitle--wander { grid-column: 3; grid-row: 1; }

.mln-lp-cell { min-width: 0; }
.mln-lp-cell--root-a   { grid-column: 1; grid-row: 2; }
.mln-lp-cell--wander-a { grid-column: 3; grid-row: 2; }
.mln-lp-cell--root-b   { grid-column: 1; grid-row: 3; }
.mln-lp-cell--wander-b { grid-column: 3; grid-row: 3; }

/* Spans the action rows so the rule runs their full height. */
.mln-lp-divider {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--mln-faint, #93a099);
    font-family: var(--lp-mono);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.mln-lp-divider::before,
.mln-lp-divider::after {
    content: "";
    flex: 1 1 auto;
    width: 1px;
    background: var(--mln-line, #e3ebe7);
}

/* ---- the two button shapes ---- */
.mln-lp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1.05rem 1.4rem;
    border-radius: var(--mln-r, 14px);
    font-family: var(--lp-sans);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, box-shadow .2s, border-color .2s, transform .2s;
}
.mln-lp-btn:hover { text-decoration: none; }
.mln-lp-btn:focus-visible {
    outline: 2px solid var(--mln-ink, #132420);
    outline-offset: 3px;
}

.mln-lp-btn--primary {
    background: var(--mln-primary, #00594c);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 10px 26px -12px rgba(10, 74, 61, .55);
}
.mln-lp-btn--primary:hover {
    background: #00463c;
    color: #fff;
    box-shadow: 0 14px 32px -12px rgba(10, 74, 61, .65);
    transform: translateY(-1px);
}

.mln-lp-btn--ghost {
    background: var(--mln-surface, #fff);
    color: var(--mln-ink, #132420);
    border: 1px solid var(--mln-line-2, #d6e0db);
}
.mln-lp-btn--ghost:hover {
    color: var(--mln-ink, #132420);
    border-color: var(--mln-primary, #00594c);
    transform: translateY(-1px);
}

/* The search bar is the wander column's primary action, so it drops the old
   centred max-width and fills its track instead. */
.mln-lp-split .mln-lp-search { width: 100%; }

.mln-lp-free {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0.9rem 0 0;
    font-family: var(--lp-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mln-muted, #5c6b65);
}

.mln-lp-threadsrow {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 1.6rem;
}

/* One column below the split. The divider turns horizontal and the rule that was
   its height becomes its width, so "or" still reads as separating two choices
   rather than floating loose between them. */
@media (max-width: 760px) {
    .mln-lp-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.7rem;
    }
    .mln-lp-coltitle--root   { grid-column: 1; grid-row: 1; }
    .mln-lp-cell--root-a     { grid-column: 1; grid-row: 2; }
    .mln-lp-cell--root-b     { grid-column: 1; grid-row: 3; }
    .mln-lp-divider          { grid-column: 1; grid-row: 4; flex-direction: row; margin: 0.5rem 0; }
    .mln-lp-divider::before,
    .mln-lp-divider::after   { width: auto; height: 1px; }
    .mln-lp-coltitle--wander { grid-column: 1; grid-row: 5; }
    .mln-lp-cell--wander-a   { grid-column: 1; grid-row: 6; }
    .mln-lp-cell--wander-b   { grid-column: 1; grid-row: 7; }
    .mln-lp-free             { grid-row: 8; }
    .mln-lp-threadsrow       { grid-row: 9; }
}

/* ---------------------------------------------------------------- [2] threads
   as chips. Replaces the old inline hints line. Regeneration-type names are long
   ("Community Regeneration & Resilience Building"), so unlike the mockup's short
   tags these wrap — the row is centred and allowed to run to several lines rather
   than truncating a name into something unreadable. */
.mln-lp-threads-label {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--mln-muted, #5c6b65);
}
.mln-lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    max-width: 900px;
    margin: 0 auto;
}
.mln-lp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--mln-line, #e3ebe7);
    border-radius: 999px;
    background: var(--mln-surface, #fff);
    color: var(--mln-ink, #132420);
    font-size: 0.86rem;
    text-decoration: none;
    transition: border-color .16s, background .16s, transform .16s;
}
.mln-lp-chip-name { font-weight: 500; }
.mln-lp-chip-count {
    font-family: var(--lp-mono);
    font-size: 0.7rem;
    color: var(--mln-muted, #5c6b65);
    transition: color .16s;
}
.mln-lp-chip:hover {
    border-color: var(--mln-primary, #00594c);
    background: #eef4f1;
    transform: translateY(-1px);
}
.mln-lp-chip:hover .mln-lp-chip-count { color: var(--mln-primary, #00594c); }
.mln-lp-chip:focus-visible {
    outline: 2px solid var(--mln-primary, #00594c);
    outline-offset: 2px;
}

.mln-lp-living {
    margin-top: 3rem;
    font-family: var(--lp-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mln-faint, #93a099);
}
.mln-lp-dot { margin: 0 0.4rem; }
.mln-lp-pulse {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mln-accent, #bc4e2c);
    margin-right: 0.55rem;
    vertical-align: 1px;
    animation: mlnLpPulse 3.2s ease-in-out infinite;
}
@keyframes mlnLpPulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.mln-lp-scrollcue {
    margin-top: 3.25rem;
    color: var(--mln-faint, #93a099);
    animation: mlnLpDrift 3.6s ease-in-out infinite;
}
@keyframes mlnLpDrift { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* ---------------------------------------------------------------- panels */
.mln-lp-panel {
    position: relative;
    /* Semi-opaque so the canvas threads stay faintly visible behind the content
       without ever competing with the text on top of them. */
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(3px);
    border-top: 1px solid var(--mln-line, #e3ebe7);
    padding: 6rem 1.5rem;
    scroll-margin-top: 3rem;
}
.mln-lp-inner { max-width: 55rem; margin: 0 auto; text-align: center; }

.mln-lp-h2 {
    font-family: var(--lp-serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--mln-ink, #132420);
    margin: 0 0 1.35rem;
}
.mln-lp-h2 em { font-style: italic; font-weight: 500; color: var(--mln-primary, #00594c); }

.mln-lp-lede {
    max-width: 37.5rem;
    margin: 0 auto;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--mln-muted, #5c6b65);
}
.mln-lp-lede strong { font-weight: 500; color: var(--mln-ink, #132420); }

/* ---- CTAs ---- */
.mln-lp-cta {
    display: inline-block;
    margin-top: 2.75rem;
    font-family: var(--lp-sans);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: var(--mln-accent, #bc4e2c);
    border-radius: 999px;
    padding: 1rem 2.5rem;
    box-shadow: 0 14px 34px -12px rgba(188, 78, 44, .5);
    transition: background .2s, transform .2s;
}
.mln-lp-cta:hover { background: #a54326; transform: translateY(-1px); color: #fff; }
.mln-lp-cta:focus-visible { outline: 2px solid var(--mln-ink, #132420); outline-offset: 3px; }
.mln-lp-cta--alt { margin-top: 3.25rem; background: var(--mln-primary, #00594c); box-shadow: 0 14px 34px -12px rgba(0, 89, 76, .45); }
.mln-lp-cta--alt:hover { background: var(--mln-primary-700, #04463b); }

.mln-lp-cta-sub {
    margin-top: 1rem;
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--mln-faint, #93a099);
}

.mln-lp-seedline {
    margin: 3.5rem auto 0;
    padding-top: 2.25rem;
    border-top: 1px solid var(--mln-line, #e3ebe7);
    max-width: 35rem;
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--mln-muted, #5c6b65);
}
.mln-lp-seedline em { font-style: normal; color: var(--mln-ink, #132420); font-weight: 500; }

/* ---- found / vouched / fed ---- */
.mln-lp-verbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    margin-top: 3.75rem;
    text-align: left;
}
.mln-lp-verb {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mln-line, #e3ebe7);
    border-radius: 16px;
    padding: 1.85rem 1.6rem 1.5rem;
    background: var(--mln-surface, #fff);
    box-shadow: var(--mln-shadow-sm, 0 1px 2px rgba(19,36,32,.06));
}
.mln-lp-num {
    font-family: var(--lp-mono);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    color: var(--mln-faint, #93a099);
    margin-bottom: 1rem;
}
.mln-lp-verb h3 {
    font-family: var(--lp-serif);
    font-weight: 500;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--mln-primary, #00594c);
    margin: 0 0 0.85rem;
}
.mln-lp-verb p {
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--mln-muted, #5c6b65);
    flex: 1;
    margin: 0 0 1.35rem;
}
.mln-lp-mirror {
    border-top: 1px dotted var(--mln-line-2, #d6e0db);
    padding-top: 0.85rem;
    font-size: 0.78rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--mln-faint, #93a099);
}
.mln-lp-mirror b {
    display: block;
    font-family: var(--lp-mono);
    font-weight: 400;
    font-size: 0.59rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mln-accent, #bc4e2c);
    margin-bottom: 0.4rem;
}

.mln-lp-balance {
    margin: 2.75rem auto 0;
    max-width: 35rem;
    font-size: 0.84rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--mln-faint, #93a099);
}

/* ---- manifesto ---- */
.mln-lp-manifesto {
    font-family: var(--lp-serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.5;
    letter-spacing: -0.005em;
    max-width: 45rem;
    margin: 0 auto;
    color: var(--mln-ink, #132420);
}
.mln-lp-manifesto em { font-style: italic; color: var(--mln-accent, #bc4e2c); }
.mln-lp-quiet { color: var(--mln-muted, #5c6b65); }

/* ---------------------------------------------------------------- reveal */
.mln-lp-rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s ease, transform .9s ease;
}
.mln-lp-rv.is-on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .mln-lp-verbs { grid-template-columns: 1fr; }
    .mln-lp-panel { padding: 4rem 1.25rem; }
}
@media (max-width: 640px) {
    .mln-lp-hero { min-height: auto; padding: 2.5rem 1.25rem 3rem; }
    .mln-lp-living { margin-top: 2rem; }
    .mln-lp-scrollcue { margin-top: 2rem; }
}

/* Motion is decoration here; without this the pulse, the drift and the reveal all
   keep running for someone who asked the OS for less of exactly that. */
@media (prefers-reduced-motion: reduce) {
    .mln-lp-pulse, .mln-lp-scrollcue { animation: none; }
    .mln-lp-rv { opacity: 1; transform: none; transition: none; }
    .mln-lp-cta:hover, .mln-lp-search button:hover { transform: none; }
}

/* ---------------------------------------------------------------- V1.5 ambient
   network layer. Shares .mln-lp-canvas geometry (fixed, inset 0, behind content,
   pointer-events none); the only difference is that it must paint under the thread
   canvas, which DOM order already gives us at equal z-index. Kept as its own rule
   so the intent is documented at the layer rather than inferred from markup order. */
.mln-lp-canvas--graph {
    /* The panels above are rgba(255,255,255,.82) with a backdrop blur, so this
       reads as a faint texture through them rather than as content. */
    opacity: 1;
}

/* ---------------------------------------------------------------- V1.6 matte
   glass panel ("The network can find you, vouch for you, and feed you").
   The other panels stay at .82 white / 3px blur; this one drops to .5 and blurs
   hard, so the ambient network and its pulses stay legible through it while the
   text still sits on a defined surface rather than floating on the raw canvas.
   saturate() keeps the greens from going flat under the heavy blur. A hairline
   and inner highlight give the pane an edge — without them a semi-transparent
   band just reads as a rendering artefact rather than a deliberate surface. */
.mln-lp-panel--glass {
    background: rgba(255, 255, 255, 0.50);
    /* 10px, not 16: at 16 the lattice dissolved into featureless cloudiness — you
       could tell something moved behind the pane but not that it was a network.
       10px keeps the dots and links legible as structure while still reading as
       frosted rather than as clear glass with content behind it. */
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
            backdrop-filter: blur(10px) saturate(1.15);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Firefox (and anything else without backdrop-filter) would otherwise show the
   network at full strength straight through 50% white, with text on top of moving
   dots. Fall back to the opacity the other panels use. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mln-lp-panel--glass { background: rgba(255, 255, 255, 0.86); }
}