/* =====================================================================
   Landing page at "/" (V1.3).
   Layout, rhythm and copy come from claude/reference/explore-like-mycelium-mockup-v0_3.html;
   the palette does NOT. The mockup was dark soil + amber; this is the Mycelium
   directory's own light palette (decision 9), so scrolling down and clicking into
   /directory/ is one continuous surface rather than two different sites.

   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 */
/* #{resource[...]} 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 #{resource[...]} exactly like this.)
   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=1787679977') 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=1787679977') 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=1787679977') 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=1787679977') 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=1787679977') 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=1787679977') 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=1787679977') 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: 3rem 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;
    font-size: clamp(2.35rem, 5.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); }

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

/* ---- 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] the
   no-input door: "or" rule + Wander the map.
   Ported from claude/prototypes/mycelium-hero-mockup.html, retokenised onto the
   Mycelium palette and the landing page's own type scale. Widths match the search
   bar above so the three stack as one column. */
.mln-lp-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    margin: 1.4rem auto 0;
    color: var(--mln-muted, #5c6b65);
    font-family: var(--lp-mono);
    font-size: 0.69rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.mln-lp-or::before,
.mln-lp-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mln-line, #e3ebe7);
}

.mln-lp-wanderwrap { max-width: 600px; margin: 1.25rem auto 0; }
.mln-lp-wander {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.15rem 1.5rem;
    border-radius: var(--mln-r, 10px);
    background: var(--mln-primary, #00594c);
    color: #fff;
    font-family: var(--lp-sans);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 26px -12px rgba(10, 74, 61, .55);
    transition: background .2s, box-shadow .2s;
}
.mln-lp-wander:hover {
    background: #00463c;
    box-shadow: 0 14px 32px -12px rgba(10, 74, 61, .65);
}
.mln-lp-wander:focus-visible {
    outline: 2px solid var(--mln-ink, #132420);
    outline-offset: 3px;
}
/* The arrow leans forward on hover — the mockup's one bit of movement. */
.mln-lp-wander i { transition: transform .22s ease; }
.mln-lp-wander:hover i { transform: translateX(5px); }
.mln-lp-wander-sub {
    margin: 0.7rem 0 0;
    font-size: 0.84rem;
    font-weight: 300;
    color: var(--mln-muted, #5c6b65);
}

/* ---------------------------------------------------------------- [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 { margin-top: 2.6rem; }
.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); }
}