/* ============================================================================
   Bending Fences Enterprise - design system (Phase 1)
   Palette: deep pine / moss greens, warm cream, brass, blaze-orange accent.
   System fonts only - no CDNs, nothing external to fail or track.
   Referenced with a cache buster (?v=) from Site.master: bump the version in
   the SAME batch as any change to this file.
   ========================================================================= */

:root {
    --pine:   #1e2a20;   /* darkest green - header, footer, hero */
    --moss:   #2e4034;   /* mid green - panels on dark */
    --fern:   #48604f;   /* light green - borders, quiet accents */
    --cream:  #f7f4ec;   /* page background */
    --paper:  #fffdf7;   /* cards on cream */
    --ink:    #232a24;   /* body text on light */
    --faded:  #5c665e;   /* secondary text on light */
    --brass:  #d9c58f;   /* headings on dark, rules, highlights */
    --blaze:  #b8502a;   /* blaze orange - primary action color */
    --blaze-dark: #96401f;
}

/* ---- Reset & base ------------------------------------------------------ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
}

h1, h2, h3, h4 {
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.25;
    margin: 0 0 0.6em;
    color: var(--pine);
}

h1 { font-size: 2.4rem; letter-spacing: 0.02em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--blaze-dark); }
a:hover { color: var(--blaze); }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* Accessibility: keyboard skip link */
.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--brass); color: var(--pine);
    padding: 0.5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---- Header ------------------------------------------------------------ */

.site-header {
    background: var(--pine);
    border-bottom: 3px solid var(--brass);
}

.header-row {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.75rem;
    padding-top: 0.9rem; padding-bottom: 0.9rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }

.brand-mark {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border: 2px solid var(--brass); border-radius: 50%;
    color: var(--brass); font-family: Georgia, serif;
    font-weight: bold; letter-spacing: 0.05em;
}

.brand-text {
    color: #f2efe6; font-family: Georgia, serif;
    font-size: 1.25rem; line-height: 1.15;
}

.brand-sub {
    display: block; color: var(--brass);
    font-size: 0.72rem; letter-spacing: 0.28em;
    text-transform: uppercase;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.site-nav a {
    color: #f2efe6; text-decoration: none;
    padding: 0.45rem 0.85rem; border-radius: 4px;
    font-size: 0.98rem;
}

.site-nav a:hover { background: var(--moss); color: var(--brass); }

/* ---- Hero -------------------------------------------------------------- */

.hero {
    background: linear-gradient(160deg, var(--pine) 0%, var(--moss) 100%);
    color: #f2efe6;
    padding: 4.5rem 0 4rem;
}

.hero h1 { color: var(--brass); font-size: 2.9rem; margin-bottom: 0.35em; }

.hero .tagline {
    font-family: Georgia, serif; font-style: italic;
    font-size: 1.35rem; color: #f2efe6; margin-bottom: 1.1em;
}

.hero p.lead { max-width: 38rem; font-size: 1.12rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* ---- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block; text-decoration: none;
    padding: 0.7rem 1.4rem; border-radius: 4px;
    font-weight: 600; font-size: 1rem; line-height: 1.2;
    border: 2px solid transparent;
}

.btn-primary { background: var(--blaze); color: #fff; }
.btn-primary:hover { background: var(--blaze-dark); color: #fff; }

.btn-ghost { border-color: var(--brass); color: var(--brass); background: transparent; }
.btn-ghost:hover { background: var(--brass); color: var(--pine); }

/* On light sections the ghost button flips to pine */
.on-light .btn-ghost { border-color: var(--pine); color: var(--pine); }
.on-light .btn-ghost:hover { background: var(--pine); color: var(--cream); }

/* ---- Sections ----------------------------------------------------------- */

.section { padding: 3.5rem 0; }

.section-tight { padding: 2.25rem 0; }

.section-dark {
    background: var(--pine); color: #f2efe6;
}
.section-dark h2, .section-dark h3 { color: var(--brass); }

.kicker {
    text-transform: uppercase; letter-spacing: 0.22em;
    font-size: 0.78rem; font-weight: 700; color: var(--blaze-dark);
    margin-bottom: 0.4rem;
}
.section-dark .kicker { color: var(--brass); }

.rule {
    width: 4rem; border: 0; border-top: 3px solid var(--brass);
    margin: 0 0 1.5rem;
}

/* ---- Cards -------------------------------------------------------------- */

.card-grid {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: 1.8rem;
}

.card {
    background: var(--paper);
    border: 1px solid #e5dfd0;
    border-top: 4px solid var(--fern);
    border-radius: 6px;
    padding: 1.5rem 1.4rem;
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.section-dark .card {
    background: var(--moss); border-color: var(--fern);
    border-top-color: var(--brass); color: #f2efe6;
}

/* ---- Split (text + aside) ---------------------------------------------- */

.split {
    display: grid; gap: 2.25rem;
    grid-template-columns: 3fr 2fr;
    align-items: start;
}

@media (max-width: 44rem) {
    .split { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.2rem; }
    h1 { font-size: 2rem; }
}

.quote-panel {
    background: var(--moss); color: #f2efe6;
    border-left: 4px solid var(--brass);
    border-radius: 6px; padding: 1.6rem 1.5rem;
    font-family: Georgia, serif; font-style: italic; font-size: 1.15rem;
}

.quote-panel .attrib {
    display: block; margin-top: 0.9rem;
    font-style: normal; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass);
}

/* ---- Value / step lists -------------------------------------------------- */

.value-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }

.value-list li {
    padding: 0.85rem 0 0.85rem 1.6rem;
    border-bottom: 1px solid #e5dfd0;
    position: relative;
}

.value-list li::before {
    content: ""; position: absolute; left: 0; top: 1.45rem;
    width: 0.65rem; height: 0.65rem;
    background: var(--blaze); transform: rotate(45deg);
}

.value-list strong { color: var(--pine); }

.steps { counter-reset: step; list-style: none; margin: 1.6rem 0 0; padding: 0; }

.steps li {
    counter-increment: step;
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 0.9rem 0;
}

.steps li::before {
    content: counter(step);
    flex: 0 0 2.2rem; height: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--pine); color: var(--brass);
    border-radius: 50%; font-family: Georgia, serif; font-weight: bold;
}

/* ---- Gallery placeholder grid ------------------------------------------- */

.gallery-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    margin-top: 1.8rem;
}

.gallery-tile {
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--moss), var(--pine));
    border: 1px solid var(--fern);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1rem;
    color: var(--brass); font-family: Georgia, serif; font-style: italic;
}

/* ---- CTA band ------------------------------------------------------------ */

.cta-band {
    background: var(--blaze); color: #fff;
    padding: 2.75rem 0;
}

.cta-band h2 { color: #fff; margin-bottom: 0.3em; }
.cta-band p { max-width: 42rem; margin-bottom: 1.2rem; }
.cta-band .btn-ghost { border-color: #fff; color: #fff; }
.cta-band .btn-ghost:hover { background: #fff; color: var(--blaze-dark); }

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
    background: var(--pine); color: #cfd6cf;
    border-top: 3px solid var(--brass);
    margin-top: 0; font-size: 0.95rem;
}

.footer-grid {
    display: grid; gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    padding-top: 2.5rem; padding-bottom: 1.5rem;
}

.footer-brand {
    font-family: Georgia, serif; font-size: 1.15rem;
    color: #f2efe6; margin-bottom: 0.2rem;
}

.footer-tag { font-style: italic; color: var(--brass); }

.footer-links { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-links a { color: #cfd6cf; text-decoration: none; }
.footer-links a:hover { color: var(--brass); }

.footer-legal {
    border-top: 1px solid var(--moss);
    padding-top: 1rem; padding-bottom: 1.25rem;
    font-size: 0.85rem; color: #9aa69c;
}

/* ============================================================================
   Portal & forms (Increment 4 - /BFE/portal/). Cache buster bumped to
   ?v=20260721b in Site.master and Portal.master with this change.
   ========================================================================= */

.portal-body { background: #ece8dc; }

.portal-main { padding: 2.25rem 0 3.5rem; }

.portal-userbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: var(--paper); border: 1px solid #e5dfd0; border-radius: 6px;
    padding: 0.6rem 1rem; margin-bottom: 1.75rem;
    font-size: 0.95rem; color: var(--faded);
}

.btn-small { padding: 0.35rem 0.9rem; font-size: 0.9rem; }

.btn-block { display: block; width: 100%; text-align: center; }

/* ---- Login screen -------------------------------------------------------- */

.login-body {
    background: linear-gradient(160deg, var(--pine) 0%, var(--moss) 100%);
    min-height: 100vh; margin: 0;
}

.login-wrap {
    min-height: 100vh; display: flex;
    align-items: center; justify-content: center; padding: 1.5rem;
}

.login-card {
    background: var(--paper); border-radius: 8px;
    border-top: 5px solid var(--brass);
    padding: 2.25rem 2rem; width: 100%; max-width: 24rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.login-card h1 { font-size: 1.5rem; margin-bottom: 0.15em; }

.login-mark {
    width: 3rem; height: 3rem; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--pine); border-radius: 50%;
    color: var(--pine); font-family: Georgia, serif; font-weight: bold;
}

.login-sub {
    color: var(--faded); font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    margin-bottom: 1.4rem;
}

.login-note { font-size: 0.85rem; color: var(--faded); margin: 1.1rem 0 0; }

/* ---- Form primitives ------------------------------------------------------ */

.form-narrow { max-width: 26rem; }

.form-field { margin-bottom: 1.1rem; }

.form-field label {
    display: block; font-weight: 600; font-size: 0.92rem;
    margin-bottom: 0.3rem; color: var(--pine);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
    width: 100%; padding: 0.6rem 0.7rem;
    border: 1px solid #c9c2af; border-radius: 4px;
    font: inherit; color: var(--ink); background: #fff;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: 2px solid var(--fern); border-color: var(--fern);
}

.form-error {
    display: block; color: #8c2f16; font-weight: 600; margin-bottom: 0.9rem;
}
.form-error:empty { display: none; }

.form-success {
    display: block; color: #2e5d38; font-weight: 600; margin-bottom: 0.9rem;
}
.form-success:empty { display: none; }

.form-notice {
    /* display:block matters: asp:Label renders a SPAN, and an inline span
       paints its background per line-of-text (the "highlighter pen" look
       the owner caught on the 2FA screen, 2026-08-10) with the accent bar
       only on the first fragment. Block = one proper box, like form-error. */
    display: block;
    background: #f6ecd8; border-left: 4px solid var(--brass);
    padding: 0.75rem 1rem; border-radius: 4px;
    margin-bottom: 0.9rem;
}
/* An empty notice must render as NOTHING - without this, pages that keep an
   always-present notice label (member login's "under review" line) show a
   bare tan box. form-error and form-success above already do this; the gap
   was found by the owner on the live member login, 2026-08-10. */
.form-notice:empty { display: none; }

/* ============================================================================
   Contact intake + portal messages (Increment 5). Cache buster bumped to
   ?v=20260721c in Site.master, Portal.master, and login.aspx with this change.
   ========================================================================= */

/* Honeypot: off-screen, invisible to humans, present for bots. Never use
   display:none (naive bots skip those); off-screen positioning catches more. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px; width: 1px; overflow: hidden;
}

.msg-card {
    background: var(--paper);
    border: 1px solid #e5dfd0;
    border-left: 4px solid #c9c2af;
    border-radius: 6px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
}

.msg-unread {
    border-left-color: var(--blaze);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.msg-head {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
    justify-content: space-between; align-items: baseline;
    margin-bottom: 0.6rem;
}

.msg-from { font-weight: 700; color: var(--pine); overflow-wrap: anywhere; }

.msg-meta {
    font-size: 0.82rem; color: var(--faded);
    text-transform: uppercase; letter-spacing: 0.08em;
}

.msg-unread .msg-meta { color: var(--blaze-dark); }

.msg-body {
    border-top: 1px solid #efe9da;
    padding-top: 0.6rem; margin-bottom: 0.8rem;
    overflow-wrap: anywhere;
}

.msg-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Conversation thread + reply composer (Increment 23) ----
   Replies sit BETWEEN the original message and the action buttons, so the
   card reads top-to-bottom as a conversation and the buttons stay where the
   eye already expects them. Outbound is indented under the original; inbound
   (delivered by SES -> Lambda since Increment 24) is tinted and un-indented so
   the two directions are distinguishable at a glance without reading a word. */

.msg-thread {
    border-top: 1px solid #efe9da;
    padding-top: 0.75rem;
    margin-bottom: 0.9rem;
}

.msg-reply {
    border-left: 3px solid var(--fern);
    background: #faf8f1;
    border-radius: 0 4px 4px 0;
    padding: 0.55rem 0.8rem;
    margin: 0 0 0.6rem 1.1rem;
}

.msg-reply:last-child { margin-bottom: 0; }

/* Received from the visitor: pulled back to the left margin and tinted, so an
   incoming reply never gets mistaken for something we sent. */
.msg-reply-in {
    border-left-color: var(--brass);
    background: #fdfbf3;
    margin-left: 0;
}

/* Sent, but the relay refused it. Loud on purpose - an undelivered reply that
   looks delivered is worse than no reply at all. */
.msg-reply-failed {
    border-left-color: var(--blaze);
    background: #fdf4f0;
}

.msg-reply-head {
    font-size: 0.78rem; color: var(--faded);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
}

.msg-reply-body { overflow-wrap: anywhere; }

.msg-badge-fail {
    color: #8c2f16; font-weight: 700; letter-spacing: 0.08em;
}

/* ---- Inbound mail (Increment 24) ----
   A reply the visitor sent back that nobody has looked at yet. Same orange as
   the unread marker on the card itself, so "needs attention" is one colour
   everywhere on this page rather than a new thing to learn. */
.msg-reply-unread {
    border-left-color: var(--blaze);
    background: #fdf6ee;
}

.msg-badge-new {
    color: var(--blaze-dark); font-weight: 700; letter-spacing: 0.08em;
}

/* Quiet by design. Whether a message came in by email or through the contact
   form is useful context, not news - it must not compete with NEW. */
.msg-badge-mail {
    color: var(--fern); font-weight: 700; letter-spacing: 0.08em;
}

.msg-reply-fail {
    margin-top: 0.4rem; font-size: 0.88rem; color: #8c2f16;
    font-style: italic;
}

.msg-compose {
    margin-top: 1rem; padding-top: 0.9rem;
    border-top: 1px dashed #d8d1bd;
}

/* The composer is a form inside a list of cards; without a ceiling on width
   the reply box stretches to the full page and becomes hard to read back. */
.msg-compose .form-field { max-width: 42rem; margin-bottom: 0.8rem; }

.msg-compose textarea { font: inherit; line-height: 1.5; min-height: 14rem; }

/* Keep the "not set up yet" / "sends from ..." note tight to the fields. */
.msg-compose .form-notice,
.msg-compose .form-error { margin-bottom: 0.9rem; max-width: 42rem; }

/* ============================================================================
   Gallery (Increment 6). Cache buster bumped to ?v=20260721d in Site.master,
   Portal.master, and login.aspx with this change.
   ========================================================================= */

/* Public gallery photos */
.gallery-photo-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin-top: 1.8rem;
}

.gallery-photo {
    margin: 0; background: var(--paper);
    border: 1px solid #e5dfd0; border-radius: 6px;
    overflow: hidden;
}

.gallery-photo img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

.gallery-photo figcaption {
    padding: 0.6rem 0.9rem; font-size: 0.92rem; color: var(--faded);
    font-family: Georgia, serif; font-style: italic;
}

/* Portal gallery manager */
.gal-upload { margin-bottom: 2rem; max-width: 30rem; }

.gal-manage-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.gal-manage-card {
    background: var(--paper); border: 1px solid #e5dfd0;
    border-radius: 6px; overflow: hidden;
}

.gal-manage-card img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

.gal-manage-card.gal-hidden { opacity: 0.55; }
.gal-manage-card.gal-hidden img { filter: grayscale(0.8); }

.gal-manage-body { padding: 0.8rem 0.9rem; }

.gal-manage-body input[type="text"] {
    width: 100%; padding: 0.45rem 0.6rem; margin: 0.45rem 0 0.6rem;
    border: 1px solid #c9c2af; border-radius: 4px; font: inherit;
}

/* ============================================================================
   Staff users page (Increment 17). Admin-only account management cards.
   ========================================================================= */

.user-card {
    background: #fff; border: 1px solid #d8d2c0; border-radius: 6px;
    padding: 0.9rem 1rem; margin: 0 0 0.8rem;
}

.user-card.user-inactive { opacity: 0.6; }

.user-head {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: baseline;
}

.user-name { font-weight: 700; color: var(--pine); }
.user-email { color: #5a5648; }
.user-meta { font-size: 0.85rem; color: #6b6553; width: 100%; }

.user-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid #eee8d8;
}

.user-actions select {
    padding: 0.35rem 0.5rem; border: 1px solid #c9c2af;
    border-radius: 4px; font: inherit;
}

.user-actions input[type="text"] {
    padding: 0.35rem 0.5rem; border: 1px solid #c9c2af; border-radius: 4px;
    font: inherit; width: 14rem; max-width: 100%;
}

.field-hint { font-size: 0.85rem; color: #6b6553; margin: 0.25rem 0 0; }

/* ============================================================================
   Security dashboard (Increment 20). Admin-only. Stat tiles, activity bars,
   log rows, and the dark attack-origins map panel.
   ========================================================================= */

.sec-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.8rem; margin: 1rem 0 1.5rem;
}

.sec-tile {
    background: #fff; border: 1px solid #d8d2c0; border-radius: 6px;
    padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.2rem;
}

.sec-num { font-size: 1.9rem; font-weight: 700; color: var(--pine); line-height: 1; }
.sec-lab { font-size: 0.82rem; color: #6b6553; }

.sec-row {
    display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0;
}

.sec-row-label { flex: 0 0 7.5rem; font-size: 0.88rem; color: #4a463a; }
.sec-row-count { flex: 0 0 auto; font-size: 0.85rem; color: #6b6553; }

.sec-bar-track {
    flex: 1 1 auto; background: #eee8d8; border-radius: 3px; height: 0.75rem;
    overflow: hidden;
}

.sec-bar { display: block; height: 100%; background: var(--pine); border-radius: 3px; }

.sec-log-row {
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; padding: 0.45rem 0;
    border-bottom: 1px solid #eee8d8; font-size: 0.9rem;
}

.sec-log-when { flex: 0 0 11rem; color: #6b6553; }
.sec-log-what { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }

.sec-mono { font-family: Consolas, Menlo, monospace; font-size: 0.88em; }
.sec-dim { color: #8a8371; }
.sec-good { color: #3d6b35; font-weight: 600; }
.sec-bad { color: #a0341f; font-weight: 600; }

.sec-map-panel {
    background: #20261f; border: 1px solid #171c16; border-radius: 6px;
    padding: 0.8rem; margin: 0.5rem 0 0.3rem;
}

.sec-map-panel svg { display: block; width: 100%; height: auto; background: #20261f; }

.sec-map-note { color: #b8b29c; font-size: 0.85rem; margin: 0 0 0.5rem; }

.sec-count { font-size: 0.9rem; font-weight: 400; color: #6b6553; }

.sec-scroll {
    max-height: 21rem; overflow-y: auto; background: #fff;
    border: 1px solid #d8d2c0; border-radius: 6px; padding: 0.15rem 0.8rem;
}

.sec-ban-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
    padding: 0.45rem 0; border-bottom: 1px solid #eee8d8; font-size: 0.9rem;
}

.sec-scroll .sec-ban-row:last-child { border-bottom: none; }

.sec-ban-ip { flex: 0 0 10rem; font-weight: 700; color: var(--pine); }
.sec-ban-reason { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sec-ban-when { flex: 0 1 auto; font-size: 0.83rem; color: #6b6553; }
.sec-ban-btn { flex: 0 0 auto; margin-left: auto; }

/* ============================================================================
   SVG artwork integration (Increment 7). CSS-only - no markup changes.
   Cache buster bumped to ?v=20260721e in Site.master, Portal.master, and
   login.aspx with this change. Art lives in images/art/ (hero-lake.svg,
   treeline.svg, woods-mist.svg) - all original, license-free.
   ========================================================================= */

/* Home hero: foggy lake scene under a readability gradient. */
.hero {
    background:
        linear-gradient(160deg, rgba(30, 42, 32, 0.88) 0%, rgba(30, 42, 32, 0.55) 45%, rgba(46, 64, 52, 0.25) 100%),
        url('../images/art/hero-lake.svg') center bottom / cover no-repeat,
        linear-gradient(160deg, var(--pine) 0%, var(--moss) 100%);
    padding-bottom: 7rem;
}

/* Dark sections: misty woods, kept faint behind the content. */
.section-dark {
    background:
        linear-gradient(rgba(30, 42, 32, 0.9), rgba(30, 42, 32, 0.9)),
        url('../images/art/woods-mist.svg') center / cover no-repeat,
        var(--pine);
}

/* Treeline strip above the footer, site-wide. */
.site-footer { position: relative; }
.site-footer::before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; top: -58px;
    height: 58px;
    background: url('../images/art/treeline.svg') bottom center / auto 100% repeat-x;
    pointer-events: none;
}

/* Gallery empty-state tiles: misty woods instead of a flat gradient. */
.gallery-tile {
    background:
        linear-gradient(rgba(30, 42, 32, 0.55), rgba(30, 42, 32, 0.72)),
        url('../images/art/woods-mist.svg') center / cover no-repeat;
}

/* Login screen gets the woods too, heavily dimmed. */
.login-body {
    background:
        linear-gradient(rgba(24, 33, 26, 0.88), rgba(24, 33, 26, 0.88)),
        url('../images/art/woods-mist.svg') center / cover no-repeat,
        linear-gradient(160deg, var(--pine) 0%, var(--moss) 100%);
}

/* ============================================================================
   Humanize + outdoors UX pass (Increment 8). Cache buster bumped to
   ?v=20260721f in Site.master, Portal.master, and login.aspx with this change.
   ========================================================================= */

/* Topographic contour texture on light page backgrounds - quiet, outdoorsy. */
body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%232e4034' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M0 40 Q65 10 130 40 T260 40'/%3E%3Cpath d='M0 110 Q65 80 130 110 T260 110'/%3E%3Cpath d='M0 180 Q65 150 130 180 T260 180'/%3E%3Cpath d='M0 250 Q65 220 130 250 T260 250'/%3E%3C/g%3E%3C/svg%3E");
}
.portal-body { background-image: none; }

/* Sticky header so the trail map is always in reach. */
.site-header {
    position: sticky; top: 0; z-index: 60;
    box-shadow: 0 2px 14px rgba(13, 20, 15, 0.35);
}

/* Active page marker in the nav. */
.site-nav a.active {
    background: var(--moss); color: var(--brass);
    box-shadow: inset 0 -2px 0 var(--brass);
}

/* Hero: a touch more room and scale. */
.hero { padding-top: 5.5rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
.hero .tagline { font-size: clamp(1.15rem, 2.4vw, 1.45rem); }

/* Lead paragraphs under section headings. */
.section-lead { max-width: 44rem; font-size: 1.1rem; }

/* Buttons: softer corners, honest feedback. */
.btn { border-radius: 6px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(150, 64, 31, 0.35); }
.btn-big { padding: 0.85rem 1.7rem; font-size: 1.06rem; }

/* Cards: lift on hover, room for icons. */
.card {
    border-radius: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(35, 42, 36, 0.12);
}
.section-dark .card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }

.card-icon {
    width: 2.6rem; height: 2.6rem;
    color: var(--fern);
    margin-bottom: 0.5rem;
    display: block;
}
.section-dark .card-icon { color: var(--brass); }

/* Gallery photos: gentle zoom on hover. */
.gallery-photo { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.gallery-photo:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(35, 42, 36, 0.14); }

/* Keyboard focus you can actually see. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--blaze);
    outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .card, .gallery-photo { transition: none; }
    .btn:hover, .card:hover, .gallery-photo:hover { transform: none; }
}

/* ============================================================================
   Real photography (Increment 9). Cache buster bumped to ?v=20260721g in
   Site.master, Portal.master, and login.aspx with this change.
   Photos live in images/photos/ - owner-supplied, re-encoded (1920px, EXIF
   stripped) before entering the tree. hero-lake.svg stays in images/art/ as
   a reusable asset.
   ========================================================================= */

/* Home hero: the buck at dawn (mirrored so he looks back toward the
   headline). Heavy gradient on the text side keeps copy readable; the SVG
   gradient remains as the loading/fallback layer. */
.hero {
    background:
        linear-gradient(105deg, rgba(24, 33, 26, 0.93) 0%, rgba(24, 33, 26, 0.78) 34%, rgba(24, 33, 26, 0.34) 65%, rgba(24, 33, 26, 0.22) 100%),
        url('../images/photos/buck-dawn.jpg') center right / cover no-repeat,
        linear-gradient(160deg, var(--pine) 0%, var(--moss) 100%);
}

/* About page values section: fog rolling over the ridge, dimmed. */
.photo-woods {
    background:
        linear-gradient(rgba(30, 42, 32, 0.85), rgba(30, 42, 32, 0.9)),
        url('../images/photos/foggy-ridge.jpg') center / cover no-repeat,
        var(--pine);
}

/* ============================================================================
   More photography (Increment 10). Cache buster bumped to ?v=20260721h in
   Site.master, Portal.master, and login.aspx with this change.
   ========================================================================= */

/* Programs page, "From first message to first light": dock at dawn. */
.photo-lake {
    background:
        linear-gradient(rgba(30, 42, 32, 0.78), rgba(30, 42, 32, 0.86)),
        url('../images/photos/lake-dock-dawn.jpg') center / cover no-repeat,
        var(--pine);
}

/* ============================================================================
   Entrance + badge (Increment 11). Cache buster bumped to ?v=20260721i in
   Site.master, Portal.master, and login.aspx with this change. Splash logic
   lives in scripts/entrance.js (?v= matched); markup in Site.master.
   ========================================================================= */

.bfe-splash { position: fixed; inset: 0; z-index: 999; cursor: pointer; overflow: hidden; background: var(--pine); }

.bfe-gate {
    position: absolute; top: 0; bottom: 0; width: 50.35%;
    background: linear-gradient(160deg, #16211a, var(--moss));
    transition: transform 1.15s cubic-bezier(0.7, 0, 0.3, 1);
    display: flex; align-items: center;
}
.bfe-gate-l { left: 0; justify-content: flex-end; padding-right: 11rem; box-shadow: inset -40px 0 60px -40px rgba(0,0,0,0.6); }
.bfe-gate-r { right: 0; justify-content: flex-start; padding-left: 11rem; box-shadow: inset 40px 0 60px -40px rgba(0,0,0,0.6); }
.bfe-gate span {
    font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 4.2rem);
    letter-spacing: 0.12em; color: var(--brass); white-space: nowrap;
}
@media (max-width: 44rem) {
    .bfe-gate-l { padding-right: 6.5rem; }
    .bfe-gate-r { padding-left: 6.5rem; }
}

.bfe-fogwrap { position: absolute; inset: 0; pointer-events: none; transition: transform 1.2s cubic-bezier(0.6, 0, 0.4, 1), opacity 1.05s ease; }
.bfe-fog { position: absolute; top: 0; left: -60%; width: 220%; height: 100%; will-change: transform; }
.bfe-fw-a .bfe-fog { opacity: 0.6; animation: bfeDriftA 48s linear infinite alternate; }
.bfe-fw-b .bfe-fog { opacity: 0.45; animation: bfeDriftB 74s linear infinite alternate; }
@keyframes bfeDriftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(5.5%, -2%, 0); } }
@keyframes bfeDriftB { from { transform: translate3d(0, 1%, 0); } to { transform: translate3d(-6.5%, -1%, 0); } }

.bfe-splash-badge {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(230px, 36vw, 360px);
    transition: transform 1.15s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.95s ease;
    filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
}

.bfe-hint {
    position: absolute; left: 0; right: 0; bottom: 7vh; margin: 0;
    text-align: center; color: var(--brass);
    font-size: 0.95rem; letter-spacing: 0.28em; text-transform: uppercase;
    opacity: 0.85; animation: bfePulse 2.2s ease-in-out infinite;
}
@keyframes bfePulse { 50% { opacity: 0.35; } }

.bfe-open .bfe-gate-l { transform: translateX(-101%); }
.bfe-open .bfe-gate-r { transform: translateX(101%); }
.bfe-open .bfe-fw-a { transform: translateX(-46%); opacity: 0; }
.bfe-open .bfe-fw-b { transform: translateX(42%); opacity: 0; }
.bfe-open .bfe-splash-badge { transform: translate(-50%, -50%) scale(2.7); opacity: 0; }
.bfe-open .bfe-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .bfe-fw-a .bfe-fog, .bfe-fw-b .bfe-fog, .bfe-hint { animation: none; }
    .bfe-gate, .bfe-splash-badge, .bfe-fogwrap { transition: opacity 0.4s ease; }
    .bfe-open .bfe-gate-l, .bfe-open .bfe-gate-r,
    .bfe-open .bfe-fogwrap, .bfe-open .bfe-splash-badge { transform: none; opacity: 0; }
}

/* Badge marks in headers and the portal login */
.brand-badge { width: 2.9rem; height: 2.9rem; display: block; }
.login-badge { width: 6rem; height: 6rem; display: block; margin: 0 auto 1rem; }

.replay-link { color: #9aa69c; text-decoration: underline; cursor: pointer; }
.replay-link:hover { color: var(--brass); }

/* ============================================================================
   Gallery lightbox (Increment 22)

   Opened by scripts/lightbox.js, which is loaded ONLY by gallery.aspx. The
   .is-clickable class is added by that script, so with JS off the thumbnails
   keep their normal cursor and the overlay never appears.
   ========================================================================= */

/* Thumbnail affordance - only once the script has wired it up. */
.gallery-photo.is-clickable img { cursor: zoom-in; }
.gallery-photo.is-clickable img:focus-visible {
    outline: 3px solid var(--blaze); outline-offset: -3px;
}

/* Page behind the overlay must not scroll. */
html.bf-lb-lock, html.bf-lb-lock body { overflow: hidden; }

.bf-lb {
    position: fixed; inset: 0; z-index: 900;
    display: flex;
}
/* Beats the .bf-lb display:flex above - keep this rule after it. */
.bf-lb[hidden] { display: none; }

.bf-lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(14, 19, 15, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bf-lb-shell {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    padding: 0.9rem 1.1rem 1.2rem;
    animation: bfLbIn 0.22s ease-out;
}
@keyframes bfLbIn { from { opacity: 0; transform: scale(0.985); } }

.bf-lb-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(217, 197, 143, 0.18);
}

.bf-lb-cat {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem; color: var(--brass);
}

.bf-lb-count {
    margin-left: auto;
    font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #9aa69c; font-variant-numeric: tabular-nums;
}

.bf-lb-close {
    flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1px solid rgba(217, 197, 143, 0.4);
    background: rgba(46, 64, 52, 0.55); color: var(--brass);
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bf-lb-close:hover { background: var(--blaze); border-color: var(--blaze); color: #fff; }

.bf-lb-stage {
    position: relative;
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    padding-top: 0.9rem;
}

.bf-lb-frame {
    flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.85rem;
}

#bfLbImg {
    flex: 0 1 auto; min-height: 0;
    max-width: 100%; max-height: 100%;
    object-fit: contain; display: block;
    border-radius: 5px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    opacity: 1; transition: opacity 0.18s ease;
}
#bfLbImg.is-swapping { opacity: 0; }

.bf-lb-nav {
    flex: 0 0 auto;
    width: 3.2rem; height: 3.2rem; border-radius: 50%;
    border: 1px solid rgba(217, 197, 143, 0.4);
    background: rgba(46, 64, 52, 0.55); color: var(--brass);
    font-size: 2.1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 0.15em;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bf-lb-nav:hover:not(:disabled) { background: var(--blaze); border-color: var(--blaze); color: #fff; }
.bf-lb-nav:disabled { opacity: 0.22; cursor: default; }

.bf-lb-close:focus-visible, .bf-lb-nav:focus-visible {
    outline: 2px solid var(--brass); outline-offset: 3px;
}

.bf-lb-cap {
    flex: 0 0 auto;
    margin: 0; max-width: 58rem; min-height: 1.4rem;
    text-align: center; color: #e8e3d6;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-size: 1rem; line-height: 1.5;
}

/* Phones: arrows ride over the photo edges instead of eating its width.
   Swiping works too - scripts/lightbox.js handles left/right drags. */
@media (max-width: 46rem) {
    .bf-lb-shell { padding: 0.6rem 0.65rem 1rem; }
    .bf-lb-stage { gap: 0; }
    .bf-lb-cat { font-size: 1rem; }
    .bf-lb-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 2.9rem; height: 2.9rem; font-size: 1.9rem;
        background: rgba(14, 19, 15, 0.72);
    }
    .bf-lb-prev { left: 0.15rem; }
    .bf-lb-next { right: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bf-lb-shell { animation: none; }
    #bfLbImg { transition: none; }
}

/* ============================================================================
   Members area (Increment 25 - /BFE/members/). Cache buster bumped to
   ?v=20260721q in Site.master, Portal.master, both login pages and
   Members.master with this change.

   The members area deliberately wears the PUBLIC site's light look, not the
   portal's dark chrome - a member should never wonder whether they have
   wandered into a staff tool, and staff glancing at a screenshot should know
   the realm at sight. Only two rules are needed for that; everything else is
   inherited.
   ========================================================================= */

/* Same light canvas as the public pages (portal-body overrides to dark). */
.members-body { }

/* The one deliberate tell on the shared dark sign-in screen: the member
   card's top edge is fern where the staff card's is brass. Two doors,
   two colors, no signage needed. */
.members-body .login-card { border-top-color: var(--fern); }

/* ---- Show-password eye (Increment 27, scripts/pw-eye.js) ----------------
   The wrapper is injected by the script; without JS none of this exists and
   password boxes are just password boxes. The eye is a TOGGLE: revealed
   stays revealed until clicked again. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 2.7rem; width: 100%; box-sizing: border-box; }
.pw-eye {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--faded); padding: 0.3rem; line-height: 0;
}
.pw-eye:hover, .pw-eye:focus { color: var(--pine); }
.pw-eye svg { width: 1.3rem; height: 1.3rem; display: block; }

/* ---- Rejected-members archive list + modal (Increment 27 follow-up) -----
   Rejected is an archive, not a queue: one slim row per person, everything
   else behind the click. The modal is server-rendered - it works with no
   JavaScript at all; the overlay is just fixed-position CSS. */
.member-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; background: var(--paper); border: 1px solid #e5dfd0;
    border-radius: 6px; padding: 0.55rem 1rem; margin-bottom: 0.5rem;
}
.member-row-name { font-weight: 600; text-decoration: none; }
.member-row-name:hover { text-decoration: underline; }
.member-row-date { color: var(--faded); font-size: 0.9rem; white-space: nowrap; }

.bf-modal-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(14, 19, 15, 0.6); z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.bf-modal {
    background: var(--paper); border-radius: 8px;
    border-top: 5px solid var(--brass);
    padding: 1.5rem 1.75rem; width: 100%; max-width: 36rem;
    max-height: 85vh; overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.bf-modal h2 { margin-top: 0; }