/* ============================================================
   LA EcoExplorers — shared by index, stories, about, contact
   Design reference: docs/design/2026-09-26-landing-mockup.png
   ============================================================ */

:root {
    color-scheme: light;
    --ink: #123524;
    --ink-soft: #2c4a3b;
    --forest: #0f4d32;
    --forest-hover: #0b3d27;
    --page: #fbfaf4;
    --sky: #e4f2fb;
    --green-bg: #e5f2de;
    --blue-bg: #e2eff9;
    --yellow-bg: #fdf1cd;
    --blue: #1d6fb8;
    --radius: 28px;
    --gutter: clamp(16px, 4vw, 40px);
    --max: 1240px;
    --topbar-h: 80px;   /* measured; the hero fills the first screen below it */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* Sticky footer: the short pages (Contact) keep the footer at the bottom of the screen */
body {
    display: flex; flex-direction: column; min-height: 100vh;
    margin: 0;
    /* Sky at the top, fading through the cream page colour to a green ground at the foot.
       It spans the whole document, so a long page shades gradually and a short one fully. */
    background: var(--page) linear-gradient(180deg, #e6f3fb 0%, var(--page) 30%, #f5f1df 68%, #dfeed6 100%);
    color: var(--ink);
    font: 600 1.0625rem/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.05; color: var(--forest); }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 10;
    padding: 10px 16px; border-radius: 999px;
    background: var(--forest); color: #fff; text-decoration: none; font-weight: 800;
}
.skip:focus { top: 12px; }

.nowrap { white-space: nowrap; }

/* --- Top bar ------------------------------------------------ */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; max-width: var(--max); margin: 0 auto;
    padding: 14px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand-mark { width: 52px; height: 52px; flex: none; transform-origin: 30% 85%; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.brand-text b { transition: color .2s ease, letter-spacing .3s ease; }
/* Hover: the leaf sways like it caught a breeze and the name opens up a little */
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark { transform: rotate(-10deg) scale(1.08); animation: leaf-sway 1.6s ease-in-out .35s infinite; }
.brand:hover .brand-text b,
.brand:focus-visible .brand-text b { color: #1f7a45; letter-spacing: .03em; }
@keyframes leaf-sway {
    0%, 100% { transform: rotate(-10deg) scale(1.08); }
    50%      { transform: rotate(4deg) scale(1.08); }
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text b {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 900; line-height: 1;
    color: var(--forest); letter-spacing: .01em;
}

.nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.pill {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 22px; border-radius: 16px;
    font-size: 1.1rem; font-weight: 800; text-decoration: none; color: var(--ink);
    transition: background-color .15s ease;
}
.pill svg { width: 26px; height: 26px; flex: none; }
.pill--green  { background: var(--green-bg); }
.pill--blue   { background: var(--blue-bg); }
.pill--yellow { background: var(--yellow-bg); }
.pill--green:hover  { background: #d3e9c9; }
.pill--blue:hover   { background: #cfe3f4; }
.pill--yellow:hover { background: #fae6ae; }
.pill[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--forest); }

/* --- Hero --------------------------------------------------- */
.hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center;
    gap: 24px;
    max-width: none;
    padding: 36px 0 64px var(--gutter);
    /* Sampled from the illustration's own sky so its edges disappear into the band. The
       last stretch fades to transparent so the band melts into the page gradient behind
       it instead of ending on a hard edge. */
    background: linear-gradient(180deg, #c7eafe 0%, #d6f0fe 45%, #e8f6fd 70%, rgba(232, 246, 253, 0) 100%);
    overflow: hidden;
    position: relative;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100svh - var(--topbar-h));
}
.hero-copy {
    position: relative; z-index: 1; max-width: calc(var(--max) * .5);
    justify-self: end; width: 100%; padding-left: max(0px, calc((100vw - var(--max)) / 2));
}

.hero h1 {
    font-size: clamp(2.9rem, 6.8vw, 5.6rem);
    letter-spacing: -.02em; line-height: .98;
}
.spark { width: .5em; height: .5em; vertical-align: top; margin-left: .06em; }

.hero-copy p {
    margin-top: 22px; max-width: 34ch;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.35; color: var(--ink);
}

.cta {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 28px; padding: 16px 40px; border-radius: 999px;
    background: var(--forest); color: #fff; text-decoration: none;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 800;
    box-shadow: 0 6px 18px rgba(15, 77, 50, .28);
    transition: background .15s ease;
}
.cta:hover { background: var(--forest-hover); }

.hero-art { justify-self: stretch; width: 100%; max-width: none; }
/* Runs off the right edge like the mockup; the left, top and bottom edges are feathered.
   The top fade hides the seam where the art's sky meets the band's slightly different blue. */
.hero-art img {
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%),
                        linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 9%),
                        linear-gradient(180deg, transparent 0, #000 7%, #000 88%, transparent 100%);
            mask-composite: intersect;
}

/* --- Panels ------------------------------------------------- */
main > .panel,
main > .topics,
main > .stories,
main > .team {
    max-width: var(--max); margin-left: auto; margin-right: auto;
    width: calc(100% - 2 * var(--gutter));
}

.panel {
    border-radius: var(--radius);
    padding: clamp(20px, 3vw, 32px);
}

/* --- Inner page header (stories / about / contact) -------- */
.page-head {
    max-width: var(--max); width: calc(100% - 2 * var(--gutter));
    margin: 8px auto 0; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
    border-radius: var(--radius);
}
.page-head--green  { background: var(--green-bg); }
.page-head--blue   { background: var(--blue-bg); }
.page-head--yellow { background: var(--yellow-bg); }
.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.02em; }
.page-head p { margin-top: 14px; max-width: 52ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; }

/* Trail cam: pulled up so it overlaps the bottom of the hero, as in the mockup */
.trailcam {
    position: relative; margin-top: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
    background: var(--blue-bg);
    box-shadow: 0 -2px 0 rgba(255, 255, 255, .7), 0 10px 30px rgba(29, 111, 184, .08);
}
.trailcam-intro { display: flex; gap: 16px; align-items: flex-start; }
.trailcam-icon { width: 64px; height: 56px; flex: none; margin-top: -4px; }
.trailcam h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: #102a3c; white-space: nowrap; }
.trailcam-intro p { margin-top: 10px; color: var(--ink-soft); }
.trailcam-intro .trailcam-motto { font-weight: 800; color: var(--forest); }
.trailcam-intro .trailcam-source {
    display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px;
    background: #fff; color: var(--blue); font-weight: 900; text-decoration: none;
}
.trailcam-intro .trailcam-source:hover { text-decoration: underline; }

.clips {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.clip h3 { margin-top: 10px; font-size: 1.1rem; font-weight: 800; color: #102a3c; }
.clip-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #1b2b33; }
.clip-meta { margin-top: 2px; font-size: .9rem; color: var(--ink-soft); }

/* --- Topics ------------------------------------------------- */
.topics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
    margin-top: 18px;
}
.topic {
    display: flex; gap: 18px; align-items: center;
    padding: 22px 26px; border-radius: var(--radius);
    text-decoration: none; color: var(--ink-soft);
    border: 2px solid transparent;
    transition: border-color .15s ease;
}
.topic:hover { border-color: currentColor; }
.topic .count { display: block; margin-top: 8px; font-style: normal; font-weight: 800; color: var(--forest); }
.topic svg { width: 86px; height: 86px; flex: none; }
.topic span { display: block; }
.topic b { display: block; margin-bottom: 4px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 900; line-height: 1.05; color: #102a1d; }
.topic--green  { background: var(--green-bg); }
.topic--blue   { background: var(--blue-bg); }
.topic--yellow { background: var(--yellow-bg); }

/* --- Stories ------------------------------------------------ */
.stories { margin-top: 64px; scroll-margin-top: 16px; }
.page-head + .stories { margin-top: 36px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
    min-height: 44px; padding: 8px 18px; border-radius: 999px;
    border: 2px solid #cfe2d4; background: #fff; color: var(--ink);
    font: inherit; font-weight: 800; cursor: pointer;
}
.filters button:hover { border-color: var(--forest); }
.filters button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }

.filter-status { min-height: 1.5em; margin-top: 10px; color: var(--ink-soft); font-size: .95rem; }

.story-grid {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px;
}
.story[hidden] { display: none; }
.story a {
    display: flex; flex-direction: column; height: 100%;
    border-radius: 18px; overflow: hidden; text-decoration: none;
    background: #fff; border: 2px solid #e2eadd;
    transition: border-color .15s ease;
}
.story a:hover { border-color: var(--forest); }
.story a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e2eadd; }
.story-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 18px; color: var(--ink-soft); }
.story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.parts { font-size: .9rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.story-body b { font-size: 1.35rem; font-weight: 900; line-height: 1.15; color: var(--forest); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--ink); }
.tag--green  { background: var(--green-bg); }
.tag--blue   { background: var(--blue-bg); }
.tag--yellow { background: var(--yellow-bg); }

/* --- About / Contact --------------------------------------- */
.team h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

.team { margin-top: 40px; }
.profiles {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px;
}
.profile {
    display: flex; gap: 20px; align-items: flex-start;
    padding: clamp(20px, 3vw, 28px); border-radius: var(--radius);
    background: #fff; border: 2px solid #e2eadd;
}
.avatar {
    display: grid; place-items: center; flex: none;
    width: 88px; height: 88px; border-radius: 50%;
    font-size: 1.9rem; font-weight: 900; color: var(--forest);
}
.avatar--green  { background: var(--green-bg); }
.avatar--yellow { background: var(--yellow-bg); color: #7a5300; }
.profile h3 { font-size: 1.5rem; }
.profile .role { margin-top: 4px; font-weight: 800; color: var(--blue); }
.profile p:not(.role) { margin-top: 10px; color: var(--ink-soft); }
.profile .email { font-weight: 700; color: var(--blue); overflow-wrap: anywhere; }

.footer { width: 100%; max-width: var(--max); margin: auto auto 0; padding: 72px var(--gutter) 40px; color: var(--ink-soft); font-size: .95rem; }

/* --- Responsive --------------------------------------------- */
@media (max-width: 1024px) {
    .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topics { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    :root { --topbar-h: 144px; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .nav { justify-content: flex-start; }
    .hero { grid-template-columns: 1fr; align-content: center; padding: 20px var(--gutter) 64px; }
    .hero-copy { max-width: none; }
    .hero-copy { padding-left: 0; }
    .hero-art { justify-self: stretch; max-width: none; }
}

@media (max-width: 600px) {
    .brand-mark { width: 42px; height: 42px; }
    .nav { gap: 8px; width: 100%; flex-wrap: nowrap; }
    .pill { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px;
            min-height: 64px; padding: 8px 4px; font-size: .9rem; text-align: center; }
    .pill svg { width: 22px; height: 22px; }
    .clips { grid-template-columns: 1fr; }
    .topic { padding: 18px; }
    .profile { flex-direction: column; }
    .trailcam-icon { width: 40px; height: 35px; }
    .avatar { width: 72px; height: 72px; font-size: 1.6rem; }
    .topic svg { width: 64px; height: 64px; }
    .story-grid { grid-template-columns: 1fr; }
}