/* ============================================================================
   Flockburn — The Great Room
   A warm, light, alpine-lodge interior. The same place as the front veranda,
   stepped indoors: calmer, richer, more intimate. The software disappears;
   the place remains. Materials only: schist, snow, tussock, beech, alpine sky,
   timber, linen, warm stone, soft charcoal. No corporate gradients, no rainbow.
   ============================================================================ */

/* ---- The materials of Flockburn -------------------------------------------- */
:root {
    /* surfaces — snow, linen, warm stone */
    --fb-paper:        #f4efe4;   /* linen — the room's air */
    --fb-paper-2:      #efe8d9;   /* warm stone, a touch deeper */
    --fb-surface:      #fbf9f3;   /* snow — cards, panels */
    --fb-surface-soft: #f6f1e6;   /* quiet panel */
    --fb-line:         #e3dac8;   /* warm hairline */
    --fb-line-soft:    #ece4d4;

    /* ink — soft charcoal with a green-grey warmth */
    --fb-ink:          #2f342a;
    --fb-ink-soft:     #5d6053;
    --fb-ink-faint:    #8a8a7c;

    /* the living colours, drawn from the land, all muted */
    --fb-beech:        #4f6b4a;   /* deep native green — primary */
    --fb-beech-deep:   #3d5238;
    --fb-sage:         #6f8a5e;
    --fb-sky:          #4a6b80;   /* alpine stream blue — secondary */
    --fb-sky-soft:     #5a7b90;
    --fb-tussock:      #b0853a;   /* golden high country — warm accent */
    --fb-tussock-soft: #c7a45c;
    --fb-schist:       #7d7a70;   /* stone grey */
    --fb-timber:       #7a5a3c;   /* warm worked wood */
    --fb-clay:         #a05a45;   /* muted caution, never alarming */
    --fb-snowcap:      #dde6ec;

    /* form & motion */
    --fb-radius:       14px;
    --fb-radius-sm:    10px;
    --fb-shadow:       0 1px 2px rgba(60,50,30,0.04), 0 8px 24px -16px rgba(60,50,30,0.30);
    --fb-shadow-lift:  0 6px 18px -8px rgba(60,50,30,0.28);
    --fb-ease:         all .25s ease;

    /* fonts — serif for the voice of the place, clean sans for the work */
    --fb-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --fb-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* keep Bootstrap-compatible names some legacy markup reads */
    --border-radius: var(--fb-radius-sm);
    --box-shadow: var(--fb-shadow);
    --transition: var(--fb-ease);
    --primary-color: var(--fb-beech);
}

/* ---- Remap Bootstrap's semantic palette to the land ------------------------ */
[data-bs-theme="light"] {
    --bs-body-bg:        var(--fb-paper);
    --bs-body-color:     var(--fb-ink);
    --bs-secondary-color: var(--fb-ink-soft);
    --bs-tertiary-color:  var(--fb-ink-faint);
    --bs-border-color:    var(--fb-line);
    --bs-emphasis-color:  var(--fb-ink);

    --bs-primary:   #4f6b4a;  --bs-primary-rgb:   79,107,74;
    --bs-secondary: #7d7a70;  --bs-secondary-rgb: 125,122,112;
    --bs-success:   #5a7150;  --bs-success-rgb:   90,113,80;
    --bs-info:      #4a6b80;  --bs-info-rgb:      74,107,128;
    --bs-warning:   #b0853a;  --bs-warning-rgb:   176,133,58;
    --bs-danger:    #a05a45;  --bs-danger-rgb:    160,90,69;
    --bs-light:     #fbf9f3;  --bs-light-rgb:     251,249,243;
    --bs-dark:      #2f342a;  --bs-dark-rgb:      47,52,42;

    --bs-link-color:       var(--fb-beech);
    --bs-link-color-rgb:   79,107,74;
    --bs-link-hover-color: var(--fb-beech-deep);
}

/* ---- The room itself ------------------------------------------------------- */
body {
    font-family: var(--fb-sans);
    color: var(--fb-ink);
    line-height: 1.62;
    background-color: var(--fb-paper);
    /* a breath of alpine light at the top, like a high window */
    background-image:
        radial-gradient(120% 70% at 80% -10%, rgba(221,230,236,0.55) 0%, transparent 55%),
        radial-gradient(90% 50% at 10% -5%, rgba(255,255,255,0.5) 0%, transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* serif gives every page a quiet human voice */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .navbar-brand, .display-1,
.display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--fb-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fb-ink);
}
.display-4, .display-5 { font-weight: 500; }
.text-muted, .text-secondary { color: var(--fb-ink-soft) !important; }

/* ---- White space is mountain air: give content room to breathe ------------- */
main.container, main.container-fluid { padding-top: .5rem; padding-bottom: 4rem; }

/* ---- Cards: warm stone panels, not boxes ---------------------------------- */
.card {
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    background-color: var(--fb-surface);
    box-shadow: var(--fb-shadow);
    transition: var(--fb-ease);
}
.card:hover { box-shadow: var(--fb-shadow-lift); }
.card-header {
    background-color: var(--fb-surface-soft);
    border-bottom: 1px solid var(--fb-line);
    font-family: var(--fb-serif);
    color: var(--fb-ink);
}
.card-footer { background-color: var(--fb-surface-soft); border-top: 1px solid var(--fb-line); }

/* ---- Buttons: quiet, rounded, calm. One natural family -------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: var(--fb-ease);
    padding: .5rem 1.25rem;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: .85rem 1.5rem; }

.btn-primary {
    --bs-btn-bg: var(--fb-beech); --bs-btn-border-color: var(--fb-beech);
    --bs-btn-hover-bg: var(--fb-beech-deep); --bs-btn-hover-border-color: var(--fb-beech-deep);
    --bs-btn-active-bg: var(--fb-beech-deep); --bs-btn-active-border-color: var(--fb-beech-deep);
    --bs-btn-color: #fdfcf6; --bs-btn-hover-color: #fdfcf6;
}
.btn-success { --bs-btn-bg: var(--fb-sage); --bs-btn-border-color: var(--fb-sage);
    --bs-btn-hover-bg: var(--fb-beech); --bs-btn-hover-border-color: var(--fb-beech); --bs-btn-color:#fdfcf6; --bs-btn-hover-color:#fdfcf6; }
.btn-info { --bs-btn-bg: var(--fb-sky); --bs-btn-border-color: var(--fb-sky);
    --bs-btn-hover-bg: #3d5a6c; --bs-btn-hover-border-color:#3d5a6c; --bs-btn-color:#fdfcf6; --bs-btn-hover-color:#fdfcf6; }
.btn-secondary { --bs-btn-bg: var(--fb-schist); --bs-btn-border-color: var(--fb-schist);
    --bs-btn-hover-bg:#6a675e; --bs-btn-hover-border-color:#6a675e; --bs-btn-color:#fdfcf6; --bs-btn-hover-color:#fdfcf6; }
.btn-warning { --bs-btn-bg: var(--fb-tussock); --bs-btn-border-color: var(--fb-tussock);
    --bs-btn-hover-bg:#977030; --bs-btn-hover-border-color:#977030; --bs-btn-color:#fdfcf6; --bs-btn-hover-color:#fdfcf6; }
.btn-danger { --bs-btn-bg: var(--fb-clay); --bs-btn-border-color: var(--fb-clay);
    --bs-btn-hover-bg:#8a4a38; --bs-btn-hover-border-color:#8a4a38; --bs-btn-color:#fdfcf6; --bs-btn-hover-color:#fdfcf6; }
.btn-dark { --bs-btn-bg: var(--fb-ink); --bs-btn-border-color: var(--fb-ink); --bs-btn-color:#f4efe4; }
.btn-light { --bs-btn-bg: var(--fb-surface); --bs-btn-border-color: var(--fb-line); --bs-btn-color: var(--fb-ink); }

/* outline buttons — even quieter */
.btn-outline-primary   { --bs-btn-color: var(--fb-beech);  --bs-btn-border-color: var(--fb-beech);  --bs-btn-hover-bg: var(--fb-beech);  --bs-btn-hover-border-color: var(--fb-beech);  --bs-btn-hover-color:#fdfcf6; }
.btn-outline-success   { --bs-btn-color: var(--fb-sage);   --bs-btn-border-color: var(--fb-sage);   --bs-btn-hover-bg: var(--fb-sage);   --bs-btn-hover-border-color: var(--fb-sage);   --bs-btn-hover-color:#fdfcf6; }
.btn-outline-info      { --bs-btn-color: var(--fb-sky);    --bs-btn-border-color: var(--fb-sky);    --bs-btn-hover-bg: var(--fb-sky);    --bs-btn-hover-border-color: var(--fb-sky);    --bs-btn-hover-color:#fdfcf6; }
.btn-outline-secondary { --bs-btn-color: var(--fb-schist); --bs-btn-border-color: var(--fb-schist); --bs-btn-hover-bg: var(--fb-schist); --bs-btn-hover-border-color: var(--fb-schist); --bs-btn-hover-color:#fdfcf6; }
.btn-outline-warning   { --bs-btn-color: var(--fb-tussock);--bs-btn-border-color: var(--fb-tussock);--bs-btn-hover-bg: var(--fb-tussock);--bs-btn-hover-border-color: var(--fb-tussock);--bs-btn-hover-color:#fdfcf6; }
.btn-outline-danger    { --bs-btn-color: var(--fb-clay);   --bs-btn-border-color: var(--fb-clay);   --bs-btn-hover-bg: var(--fb-clay);   --bs-btn-hover-border-color: var(--fb-clay);   --bs-btn-hover-color:#fdfcf6; }
.btn-outline-light, .btn-outline-dark { --bs-btn-color: var(--fb-ink); --bs-btn-border-color: var(--fb-line); --bs-btn-hover-bg: var(--fb-surface-soft); --bs-btn-hover-color: var(--fb-ink); }

/* ---- Background utilities, folded into the natural family ----------------- */
.bg-primary   { background-color: var(--fb-beech) !important; }
.bg-success   { background-color: var(--fb-sage) !important; }
.bg-info      { background-color: var(--fb-sky) !important; }
.bg-secondary { background-color: var(--fb-schist) !important; }
.bg-warning   { background-color: var(--fb-tussock) !important; }
.bg-danger    { background-color: var(--fb-clay) !important; }
.bg-dark      { background-color: var(--fb-ink) !important; }
.bg-light     { background-color: var(--fb-surface) !important; }
.text-bg-primary, .text-bg-success, .text-bg-info, .text-bg-secondary,
.text-bg-warning, .text-bg-danger, .text-bg-dark { color: #fdfcf6 !important; }
.text-primary { color: var(--fb-beech) !important; }
.text-success { color: var(--fb-sage) !important; }
.text-info    { color: var(--fb-sky) !important; }
.text-warning { color: var(--fb-tussock) !important; }
.text-danger  { color: var(--fb-clay) !important; }

/* badges — soft, never shouting */
.badge.bg-danger  { background-color: var(--fb-clay) !important; }
.badge.bg-warning { background-color: var(--fb-tussock) !important; color:#fdfcf6 !important; }
.badge.bg-success { background-color: var(--fb-sage) !important; }
.badge.bg-secondary { background-color: var(--fb-schist) !important; }

/* ---- Forms ---------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--fb-radius-sm);
    border: 1px solid var(--fb-line);
    background-color: var(--fb-surface);
    color: var(--fb-ink);
    transition: var(--fb-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fb-sage);
    box-shadow: 0 0 0 .2rem rgba(79,107,74,0.15);
    background-color: #fff;
}
.form-control::placeholder { color: var(--fb-ink-faint); }
.form-label { color: var(--fb-ink-soft); font-weight: 600; }

/* ---- Tables --------------------------------------------------------------- */
.table { --bs-table-color: var(--fb-ink); --bs-table-bg: transparent; color: var(--fb-ink); }
.table > thead { font-family: var(--fb-serif); color: var(--fb-ink-soft); }
.table > :not(caption) > * > * { border-bottom-color: var(--fb-line); }

/* ---- Alerts & flash notes: a gentle human note --------------------------- */
.alert {
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    background-color: var(--fb-surface);
    color: var(--fb-ink);
}
.alert-success { border-left: 4px solid var(--fb-sage); }
.alert-info    { border-left: 4px solid var(--fb-sky); }
.alert-warning { border-left: 4px solid var(--fb-tussock); }
.alert-danger  { border-left: 4px solid var(--fb-clay); }

/* ---- Modals & dropdowns --------------------------------------------------- */
.modal-content, .dropdown-menu {
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    background-color: var(--fb-surface);
    box-shadow: 0 1rem 3rem -1rem rgba(60,50,30,0.35);
}
hr { border-color: var(--fb-line); opacity: .8; }

/* ---- Calendar month picker — every selectable month in strong dark ink ---- */
.fb-month-menu { padding: 0.35rem; }
.fb-month-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    margin: 1px 0;
    border-radius: var(--fb-radius-sm);
    color: var(--fb-ink);
    font-weight: 500;
    opacity: 1;
}
.fb-month-menu .dropdown-item i { color: var(--fb-ink-faint); }
.fb-month-menu .dropdown-item:hover,
.fb-month-menu .dropdown-item:focus-visible {
    background: var(--fb-surface-soft);
    color: var(--fb-beech-deep);
}
.fb-month-menu .dropdown-item:active {
    background: var(--fb-paper-2);
    color: var(--fb-ink);
}
.fb-month-menu .dropdown-item.active {
    background: var(--fb-beech);
    color: #fff;
    font-weight: 700;
    font-size: 1.05em;
    min-height: 50px;
    box-shadow: var(--fb-shadow);
}
.fb-month-menu .dropdown-item.active i { color: var(--fb-tussock-soft); }
.fb-month-menu .dropdown-item.disabled,
.fb-month-menu .dropdown-item:disabled {
    color: var(--fb-ink-faint);
    opacity: 0.6;
}

/* ============================================================================
   The navbar — a quiet linen rail, not a coloured bar
   ============================================================================ */
.navbar.fb-rail {
    background-color: rgba(248,244,235,0.86) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fb-line);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.navbar.fb-rail .navbar-brand {
    color: var(--fb-ink) !important;
    font-family: var(--fb-serif);
    font-weight: 600;
    letter-spacing: .02em;
}
.navbar.fb-rail .navbar-brand .fb-mark {
    height: 1.15em;
    width: auto;
    vertical-align: -0.18em;
}
.fb-login-mark { height: 3rem; width: auto; display: inline-block; }
.fb-rail-btn {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--fb-line);
    background: var(--fb-surface);
    color: var(--fb-ink-soft);
    transition: var(--fb-ease);
}
.fb-rail-btn:hover { background: var(--fb-surface-soft); color: var(--fb-beech); }
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }

/* ============================================================================
   The menu (offcanvas) — calm grouped wayfinding, no rainbow buttons
   ============================================================================ */
.offcanvas.fb-menu {
    width: 100%;
    max-width: 420px;
    background-color: var(--fb-paper);
    border-left: 1px solid var(--fb-line);
}
.offcanvas.fb-menu .offcanvas-header {
    background-color: var(--fb-surface);
    border-bottom: 1px solid var(--fb-line);
}
.offcanvas.fb-menu .offcanvas-title {
    font-family: var(--fb-serif); color: var(--fb-ink); font-weight: 600;
}
.offcanvas.fb-menu .offcanvas-body { padding: 1.25rem 1rem 2rem; }
.offcanvas-backdrop.show { background-color: rgba(47,52,42,0.28); opacity: 1; }

.fb-menu-group { margin-bottom: 1.75rem; }
.fb-menu-group__title {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--fb-ink-faint);
    margin: 0 .25rem .5rem;
    display: flex; align-items: center; gap: .5rem;
}
.fb-menu-link {
    display: flex; align-items: center; gap: .9rem;
    padding: .7rem .8rem;
    border-radius: var(--fb-radius-sm);
    color: var(--fb-ink);
    text-decoration: none;
    font-weight: 500;
    transition: var(--fb-ease);
}
.fb-menu-link:hover { background-color: var(--fb-surface); color: var(--fb-beech); }
.fb-menu-link i { width: 1.4rem; text-align: center; color: var(--fb-schist); font-size: 1rem; }
.fb-menu-link:hover i { color: var(--fb-beech); }
.fb-menu-link .badge { margin-left: auto; }

/* ============================================================================
   The host — a gentle human welcome at the head of a page
   ============================================================================ */
.fb-host {
    border-left: 3px solid var(--fb-tussock-soft);
    padding: .15rem 0 .15rem 1.1rem;
    margin: .25rem 0 2rem;
    max-width: 60ch;
}
.fb-host__voice {
    font-family: var(--fb-serif);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--fb-ink);
}
.fb-host__by {
    display: block; margin-top: .5rem;
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fb-ink-faint); font-style: normal;
}

/* a quiet section eyebrow used across pages */
.fb-eyebrow {
    font-family: var(--fb-sans);
    text-transform: uppercase; letter-spacing: .16em;
    font-size: .72rem; font-weight: 700; color: var(--fb-ink-faint);
}

/* ============================================================================
   The Great Room
   ============================================================================ */
.fb-greatroom { max-width: 940px; margin: 0 auto; }
.fb-room-title {
    font-family: var(--fb-serif);
    font-size: clamp(2.1rem, 5vw, 3rem);
    line-height: 1.05;
    margin-bottom: .35rem;
}
.fb-season-line {
    font-family: var(--fb-sans);
    text-transform: uppercase; letter-spacing: .16em;
    font-size: .72rem; color: var(--fb-ink-faint);
    margin-bottom: 2.25rem;
}

/* "what's happening" panels */
.fb-panel {
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--fb-shadow);
    height: 100%;
}
.fb-panel__head {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--fb-serif); font-size: 1.12rem; color: var(--fb-ink);
    margin-bottom: .9rem;
}
.fb-panel__head i { color: var(--fb-sage); }
.fb-item { padding: .55rem 0; border-top: 1px solid var(--fb-line-soft); }
.fb-item:first-of-type { border-top: none; }
.fb-item__title { font-weight: 600; color: var(--fb-ink); }
.fb-item__meta { font-size: .82rem; color: var(--fb-ink-soft); }
.fb-empty { color: var(--fb-ink-faint); font-style: italic; padding: .4rem 0; }

/* quiet wayfinding into the four pillars */
.fb-wayfind { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1rem; }
.fb-way {
    display: block; text-decoration: none;
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius); padding: 1.15rem 1.25rem;
    transition: var(--fb-ease); color: var(--fb-ink);
}
.fb-way:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-lift); border-color: var(--fb-tussock-soft); }
.fb-way__name { font-family: var(--fb-serif); font-size: 1.2rem; margin-bottom: .15rem; display: flex; align-items: center; gap: .55rem; }
.fb-way__name i { color: var(--fb-sage); font-size: 1rem; }
.fb-way__desc { font-size: .86rem; color: var(--fb-ink-soft); line-height: 1.45; }

/* a row of quiet links within a wayfinding card */
.fb-sublinks { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .7rem; }
.fb-sublinks a { font-size: .82rem; color: var(--fb-sky); text-decoration: none; font-weight: 600; }
.fb-sublinks a:hover { color: var(--fb-beech); text-decoration: underline; }

/* ---- Footer --------------------------------------------------------------- */
footer.fb-foot {
    background: transparent;
    border-top: 1px solid var(--fb-line);
    color: var(--fb-ink-faint);
    font-size: .8rem;
    letter-spacing: .04em;
}

/* a quiet strip of recent photographs on the Great Room */
.fb-photostrip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
}
.fb-photo {
    display: block;
    border-radius: var(--fb-radius-sm);
    overflow: hidden;
    border: 1px solid var(--fb-line);
    box-shadow: var(--fb-shadow);
    transition: var(--fb-ease);
    aspect-ratio: 4 / 3;
}
.fb-photo:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-lift); border-color: var(--fb-tussock-soft); }
.fb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 576px) {
    .fb-room-title { font-size: 2rem; }
    main.container, main.container-fluid { padding-bottom: 3rem; }
    .fb-photostrip { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ===========================================================================
   The Stag Lounge — the Home page rebuilt as a room you come home to (Phase 8).
   Asymmetric, warm, the fire at the centre. Tokens only, never raw hexes.
   =========================================================================== */
.lounge { max-width: 1060px; margin: 0 auto; }

/* ---- The hearth: room photo, the fire, the stag, the house speaking ------- */
.lounge-hearth {
    position: relative;
    overflow: hidden;
    min-height: clamp(330px, 54vh, 480px);
    display: flex;
    align-items: flex-end;
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    margin-bottom: 1.9rem;
    background-image: url('../img/lounge_hearth.png');
    background-size: cover;
    background-position: center 58%;
}
.lounge-hearth__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    z-index: 0;
}
.lounge-hearth__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(22,15,9,0.88) 0%,
            rgba(22,15,9,0.50) 40%,
            rgba(22,15,9,0.14) 70%,
            rgba(22,15,9,0.20) 100%),
        radial-gradient(78% 60% at 26% 112%, rgba(199,164,92,0.30), transparent 70%);
}
.lounge-hearth__inner {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 4vw, 2.7rem);
    max-width: 62ch;
}
/* The fire never quite holds still — a gentle living firelight over the hearth,
   warm and additive, sitting above the scrim but beneath the words. */
.lounge-hearth::after {
    content: "";
    position: absolute;
    left: -6%;
    bottom: -22%;
    width: 64%;
    height: 80%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(closest-side,
        rgba(214,160,84,0.42),
        rgba(199,164,92,0.16) 55%,
        transparent 78%);
    mix-blend-mode: screen;
    opacity: 0.7;
    transform-origin: 30% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .lounge-hearth::after { animation: fb-firelight 6.5s ease-in-out infinite alternate; }
}
@keyframes fb-firelight {
    0%   { opacity: 0.55; transform: scale(1)     translateY(0); }
    35%  { opacity: 0.82; transform: scale(1.03)  translateY(-0.4%); }
    65%  { opacity: 0.62; transform: scale(1.012) translateY(0.3%); }
    100% { opacity: 0.78; transform: scale(1.025) translateY(-0.2%); }
}
.lounge-eyebrow {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fb-tussock-soft);
    margin-bottom: 0.7rem;
}
.lounge-greeting {
    font-family: var(--fb-serif);
    font-weight: 500;
    font-size: clamp(1.95rem, 4.6vw, 3rem);
    line-height: 1.06;
    color: #f7efdf;
    margin-bottom: 1rem;
    text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}
.lounge-house { margin-bottom: 1.1rem; }
.lounge-house__line {
    font-family: var(--fb-serif);
    font-size: clamp(1rem, 2.2vw, 1.16rem);
    line-height: 1.5;
    color: #efe4cf;
    margin: 0 0 0.18rem;
    text-shadow: 0 1px 9px rgba(0,0,0,0.55);
}
.lounge-house__line:last-child {
    margin-top: 0.55rem;
    font-style: italic;
    color: var(--fb-tussock-soft);
}
.lounge-clock {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: #dccdb1;
    opacity: 0.9;
    margin: 0;
}
.lounge-clock i { margin-right: 0.45rem; }

/* ---- Life in the room — varied weight, never a uniform grid --------------- */
.lounge-life {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-bottom: 2.5rem;
}

/* A story by the fire — the latest Hearth to Heart recording */
.fireside {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    text-decoration: none;
    padding: 1.1rem 1.3rem;
    border-radius: var(--fb-radius);
    border: 1px solid var(--fb-line);
    box-shadow: var(--fb-shadow);
    transition: var(--fb-ease);
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(176,133,58,0.16), transparent 55%),
        var(--fb-surface);
}
.fireside:hover {
    transform: translateY(-2px);
    box-shadow: var(--fb-shadow-lift);
    border-color: var(--fb-tussock-soft);
}
.fireside__play {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2014;
    background: linear-gradient(180deg, var(--fb-tussock-soft), var(--fb-tussock));
    box-shadow: 0 6px 16px -8px rgba(176,133,58,0.8);
}
.fireside__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fireside__eyebrow {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    color: var(--fb-ink-faint);
}
.fireside__title { font-family: var(--fb-serif); font-size: 1.16rem; color: var(--fb-ink); }
.fireside__meta { font-size: 0.84rem; color: var(--fb-ink-soft); }
.fireside__hint {
    flex: 0 0 auto;
    font-family: var(--fb-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fb-sky);
}
@media (max-width: 560px) { .fireside__hint { display: none; } }

/* Around the room — presence ribbon */
.presence__label,
.lounge-photos__label {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fb-ink-faint);
    margin-bottom: 0.6rem;
}
.presence__people { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.who {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--fb-ink);
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
}
.who__tag { font-size: 0.72rem; color: var(--fb-ink-faint); }
.who--here { border-color: var(--fb-sage); background: var(--fb-surface-soft); }
.who--here .who__tag { color: var(--fb-beech); font-weight: 600; }
.who__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fb-beech);
    box-shadow: 0 0 0 3px rgba(79,107,74,0.14);
}

/* A celebration, and a word from the family — unequal embers */
.lounge-soft { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .lounge-soft { grid-template-columns: 1fr; } }
.ember {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--fb-radius);
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    box-shadow: var(--fb-shadow);
    text-decoration: none;
    transition: var(--fb-ease);
}
a.ember:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-lift); border-color: var(--fb-tussock-soft); }
.ember i { font-size: 1.1rem; margin-top: 0.15rem; }
.ember--cake i { color: var(--fb-tussock); }
.ember--note i { color: var(--fb-sky); }
.ember__title { font-family: var(--fb-serif); font-size: 1.05rem; color: var(--fb-ink); }
.ember__meta { font-size: 0.85rem; color: var(--fb-ink-soft); line-height: 1.4; }

/* A quiet remembrance — on this week, the latest diary page */
.remembrance {
    border-left: 3px solid var(--fb-tussock-soft);
    padding: 0.2rem 0 0.2rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.remembrance__line {
    font-family: var(--fb-serif);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--fb-ink-soft);
    margin: 0;
}
.remembrance__line i { color: var(--fb-ink-faint); margin-right: 0.4rem; font-style: normal; }
.remembrance__line a { color: var(--fb-beech); text-decoration: none; font-style: normal; font-weight: 600; }
.remembrance__line a:hover { text-decoration: underline; }

/* ---- The three great doors ------------------------------------------------ */
.doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-bottom: 2.6rem;
}
.doors--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .doors--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .doors:not(.doors--four) { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .doors--four { grid-template-columns: 1fr; } }
.door-card {
    display: flex;
    flex-direction: column;
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    overflow: hidden;
    box-shadow: var(--fb-shadow);
    transition: var(--fb-ease);
}
.door-card:hover { transform: translateY(-3px); box-shadow: var(--fb-shadow-lift); border-color: var(--fb-tussock-soft); }
.door-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    position: relative;
    background-size: cover;
    background-position: center;
}
.door-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(22,15,9,0.34) 100%);
}
.door-card--stay .door-card__media { background-image: url('../img/door_stay.jpg?v=3'); }
.door-card--discover .door-card__media { background-image: url('../img/door_discover.png'); }
.door-card--care .door-card__media { background-image: url('../img/door_care.png'); }
.door-card--pigeon .door-card__media { background-image: url('../img/door_pigeon.png'); }

/* ---- Life at Flockburn — the living pulse, found through the fourth door --- */
.door-card__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.door-card__name {
    font-family: var(--fb-serif);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--fb-ink);
    text-decoration: none;
    margin-bottom: 0.25rem;
    min-height: 1.69rem;
}
.door-card__name:hover { color: var(--fb-beech); }
.door-card__desc { font-size: 0.9rem; color: var(--fb-ink-soft); line-height: 1.5; margin-bottom: 0.9rem; min-height: 1.35rem; }
/* ---- Action chips: one reusable component for every room's quick actions --- */
.door-card__actions-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fb-ink-faint);
    margin: 0 0 0.5rem;
}
.door-card__links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.5rem; }
.door-card__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fb-beech-deep);
    background: var(--fb-surface-soft);
    border: 1px solid var(--fb-line);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.25;
    transition: var(--fb-ease);
}
.door-card__links a:hover {
    color: var(--fb-surface);
    background: var(--fb-beech);
    border-color: var(--fb-beech-deep);
    text-decoration: none;
    box-shadow: var(--fb-shadow-lift);
}
.door-card__links a:focus-visible {
    outline: 2px solid var(--fb-sky);
    outline-offset: 2px;
}
.door-card__links a:active {
    background: var(--fb-beech-deep);
    color: var(--fb-surface);
    transform: translateY(1px);
    box-shadow: none;
}

/* Mobile: Stay card chips as a balanced 2×2 grid —
   booking actions (Secure a bunk / School holidays) on the first row,
   management actions (My visits / My invoices) on the second */
@media (max-width: 767.98px) {
    .door-card--stay .door-card__links,
    .door-card--discover .door-card__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 0.5rem;
    }
    .door-card--stay .door-card__links a,
    .door-card--discover .door-card__links a { justify-content: center; text-align: center; height: 100%; }
}

/* Desktop: every door link on its own line, left-aligned, evenly spaced */
@media (min-width: 768px) {
    .door-card__links { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0.55rem; }
    .door-card__links a { display: inline-flex; width: 100%; }
}

/* ---- A quiet farewell from the hut — the hallway simply ends ------------- */
.lounge-farewell {
    margin: 4rem 0 3.5rem;
    text-align: center;
    font-family: var(--fb-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--fb-tussock);
}

/* ===========================================================================
   Hearth to Heart — the fire-side feed (Phase 8). Warm, soft, timeless.
   Uses only --fb-* tokens; the technology disappears, the people come forward.
   =========================================================================== */
.hearth { max-width: 760px; margin: 0 auto; }

.hearth-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--fb-radius);
    background:
        radial-gradient(120% 90% at 18% 8%, rgba(176,133,58,0.20), transparent 60%),
        linear-gradient(160deg, #2c241b 0%, #221d16 60%, #1c1813 100%);
    color: #f4ecd9;
    padding: 2.4rem 1.8rem 2.2rem;
    box-shadow: var(--fb-shadow);
    margin-bottom: 1.8rem;
}
.hearth-hero--slim { padding: 2rem 1.8rem 1.6rem; }
.hearth-hero__glow {
    position: absolute; left: -10%; bottom: -55%;
    width: 120%; height: 120%;
    background: radial-gradient(closest-side, rgba(199,164,92,0.28), transparent 70%);
    filter: blur(8px); pointer-events: none;
}
.hearth-hero__inner { position: relative; }
.hearth-eyebrow {
    font-family: var(--fb-sans); letter-spacing: .14em; text-transform: uppercase;
    font-size: .72rem; color: var(--fb-tussock-soft); margin: 0 0 .5rem;
}
.hearth-title {
    font-family: var(--fb-serif); font-size: 2.1rem; line-height: 1.12;
    margin: 0 0 .7rem; color: #f7f0df;
}
.hearth-lede {
    font-family: var(--fb-serif); font-size: 1.04rem; line-height: 1.6;
    color: #e6dcc6; max-width: 46ch; margin: 0 0 1.3rem;
}
.hearth-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fb-sans); font-weight: 600; font-size: .98rem;
    padding: .72rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
    background: linear-gradient(180deg, var(--fb-tussock-soft), var(--fb-tussock));
    color: #2a2014; text-decoration: none; transition: var(--fb-ease);
    box-shadow: 0 6px 16px -8px rgba(176,133,58,.7);
}
.hearth-btn:hover { transform: translateY(-1px); color: #2a2014; filter: brightness(1.04); }
.hearth-btn--ghost {
    background: transparent; color: var(--fb-ink-soft);
    border: 1px solid var(--fb-line); box-shadow: none;
}
.hearth-btn--ghost:hover { color: var(--fb-ink); background: var(--fb-surface-soft); }

/* feed */
.hearth-feed { display: flex; flex-direction: column; gap: 1.6rem; }
.hearth-card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    overflow: hidden;
    box-shadow: var(--fb-shadow);
    transition: var(--fb-ease);
}
.hearth-card:hover { box-shadow: var(--fb-shadow-lift); }
.hearth-media { background: #18140f; line-height: 0; }
.hearth-media video { width: 100%; max-height: 70vh; display: block; background: #000; }
.hearth-media--audio {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; line-height: 1.4;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(176,133,58,0.22), transparent 60%), #221d16;
}
.hearth-media--audio audio { width: 100%; }
.hearth-audio-mark {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; color: #2a2014;
    background: linear-gradient(180deg, var(--fb-tussock-soft), var(--fb-tussock));
}
.hearth-media--missing {
    display: flex; align-items: center; gap: .7rem; padding: 1.4rem 1.2rem;
    color: var(--fb-ink-faint); font-family: var(--fb-serif); font-style: italic;
    background: var(--fb-surface-soft);
}
.hearth-card__body { padding: 1.1rem 1.3rem 1.3rem; }
.hearth-card__title {
    font-family: var(--fb-serif); font-size: 1.4rem; line-height: 1.2;
    margin: 0 0 .35rem; color: var(--fb-ink);
}
.hearth-card__meta {
    font-family: var(--fb-sans); font-size: .85rem; color: var(--fb-ink-faint);
    display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0 0 .6rem;
}
.hearth-card__desc {
    font-family: var(--fb-serif); font-size: 1.02rem; line-height: 1.6;
    color: var(--fb-ink-soft); margin: 0 0 .7rem;
}
.hearth-chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-top: .4rem; }
.hearth-chips__label {
    font-family: var(--fb-sans); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--fb-ink-faint); margin-right: .15rem;
}
.hearth-chip {
    font-family: var(--fb-sans); font-size: .82rem; padding: .18rem .6rem;
    border-radius: 999px; background: var(--fb-surface-soft);
    border: 1px solid var(--fb-line); color: var(--fb-ink-soft);
}
.hearth-chip--people { border-color: var(--fb-sage); color: var(--fb-beech-deep); }
.hearth-chip--place  { border-color: var(--fb-sky-soft); color: var(--fb-sky); }
.hearth-chip--theme  { border-color: var(--fb-tussock-soft); color: var(--fb-timber); }

/* empty state */
.hearth-empty {
    text-align: center; padding: 3rem 1.5rem;
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow);
}
.hearth-empty__icon { font-size: 2.4rem; color: var(--fb-tussock); margin-bottom: .8rem; }
.hearth-empty p {
    font-family: var(--fb-serif); font-size: 1.08rem; line-height: 1.6;
    color: var(--fb-ink-soft); max-width: 42ch; margin: 0 auto 1.3rem;
}

/* record form */
.hearth-form {
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow);
    padding: 1.6rem 1.5rem 1.8rem;
}
.hearth-choose { border: 0; padding: 0; margin: 0 0 1.4rem; }
.hearth-choose legend {
    font-family: var(--fb-sans); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--fb-ink-faint); float: none; margin-bottom: .7rem;
}
.hearth-choose__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.hearth-choice { position: relative; display: block; cursor: pointer; }
.hearth-choice input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.hearth-choice__face {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.1rem .6rem; text-align: center;
    font-family: var(--fb-sans); font-weight: 600; font-size: .88rem; color: var(--fb-ink-soft);
    background: var(--fb-surface-soft); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius-sm); transition: var(--fb-ease);
}
.hearth-choice__face i { font-size: 1.4rem; color: var(--fb-tussock); }
.hearth-choice:hover .hearth-choice__face {
    border-color: var(--fb-tussock-soft); color: var(--fb-ink); transform: translateY(-1px);
}
.hearth-picked {
    font-family: var(--fb-sans); font-size: .85rem; color: var(--fb-beech-deep);
    margin: .8rem 0 0; min-height: 1.1rem;
}
.hearth-recorder {
    margin-top: 1rem; padding: 1rem;
    background: var(--fb-surface-soft); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius-sm);
}
.hearth-recorder__stage {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--fb-sans); font-size: .9rem; color: var(--fb-ink-soft);
}
.hearth-rec-dot {
    width: .7rem; height: .7rem; border-radius: 50%;
    background: var(--fb-clay); animation: hearth-pulse 1.1s ease-in-out infinite;
}
@keyframes hearth-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.hearth-rec-time { font-variant-numeric: tabular-nums; color: var(--fb-ink); font-weight: 600; }
.hearth-recorder__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.hearth-progress { margin-top: 1rem; }
.hearth-progress__track {
    height: .6rem; border-radius: 999px; overflow: hidden;
    background: var(--fb-line);
}
.hearth-progress__bar {
    height: 100%; background: var(--fb-beech); transition: width .25s ease;
}
.hearth-field { margin-bottom: 1.1rem; }
.hearth-field label {
    display: block; font-family: var(--fb-sans); font-weight: 600;
    font-size: .9rem; color: var(--fb-ink); margin-bottom: .35rem;
}
.hearth-opt { font-weight: 400; color: var(--fb-ink-faint); }
.hearth-field input[type=text], .hearth-field textarea {
    width: 100%; font-family: var(--fb-serif); font-size: 1rem; color: var(--fb-ink);
    background: var(--fb-paper); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius-sm); padding: .7rem .8rem; transition: var(--fb-ease);
}
.hearth-field input[type=text]:focus, .hearth-field textarea:focus {
    outline: 0; border-color: var(--fb-tussock-soft);
    box-shadow: 0 0 0 3px rgba(176,133,58,.15);
}
.hearth-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: .8rem; margin-top: 1.4rem;
}

@media (max-width: 576px) {
    .hearth-title { font-size: 1.7rem; }
    .hearth-choose__row { grid-template-columns: 1fr; }
    .hearth-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ============================================================
   DISCOVER — the library (Grandy's diaries)
   The slower room: warm pools of light, timber, paper, leather.
   Shares Hearth's family resemblance; each entry opens like an
   old notebook. Tokens only — no raw saturated hexes.
   ============================================================ */
.library { max-width: 760px; margin: 0 auto; }

.library-back {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--fb-sans); font-size: .85rem;
    color: var(--fb-ink-soft); text-decoration: none; margin-bottom: 1rem;
    transition: color .25s ease;
}
.library-back:hover { color: var(--fb-ink); }

.library-hero {
    position: relative; overflow: hidden;
    border-radius: var(--fb-radius);
    background:
        radial-gradient(120% 90% at 18% 8%, rgba(122,90,60,0.32), transparent 60%),
        linear-gradient(160deg, #2a221a 0%, #211b15 60%, #1a1610 100%);
    color: #f2e9d6;
    padding: 2.4rem 1.8rem 2.2rem;
    box-shadow: var(--fb-shadow);
    margin-bottom: 1.8rem;
}
.library-hero__glow {
    position: absolute; left: -10%; bottom: -55%;
    width: 120%; height: 120%;
    background: radial-gradient(closest-side, rgba(176,133,58,0.22), transparent 70%);
    filter: blur(10px); pointer-events: none;
}
.library-hero__inner { position: relative; }
.library-eyebrow {
    font-family: var(--fb-sans); letter-spacing: .14em; text-transform: uppercase;
    font-size: .72rem; color: var(--fb-tussock-soft); margin: 0 0 .5rem;
}
.library-title {
    font-family: var(--fb-serif); font-size: 2.1rem; line-height: 1.12;
    margin: 0 0 .7rem; color: #f7f0df;
}
.library-lede {
    font-family: var(--fb-serif); font-size: 1.04rem; line-height: 1.65;
    color: #e6dcc6; max-width: 50ch; margin: 0 0 1.3rem;
}
.library-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fb-sans); font-weight: 600; font-size: .98rem;
    padding: .72rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
    background: linear-gradient(180deg, var(--fb-tussock-soft), var(--fb-tussock));
    color: #2a2014; text-decoration: none; transition: var(--fb-ease);
    box-shadow: 0 6px 16px -8px rgba(176,133,58,.7);
}
.library-btn:hover { transform: translateY(-1px); color: #2a2014; filter: brightness(1.04); }

/* the shelf of notebooks */
.library-shelf { display: flex; flex-direction: column; gap: 1.4rem; }

.notebook {
    position: relative;
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    overflow: hidden;
    box-shadow: var(--fb-shadow);
    transition: box-shadow .25s ease;
}
.notebook:hover { box-shadow: var(--fb-shadow-lift); }

/* the closed cover — date and author, the leather spine on the left */
.notebook__cover {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; text-align: left; cursor: pointer;
    background: var(--fb-surface-soft);
    border: 0; border-left: 4px solid var(--fb-timber);
    padding: 1.05rem 1.2rem;
    transition: background .25s ease;
}
.notebook__cover:hover,
.notebook__cover[aria-expanded="true"] { background: var(--fb-paper-2); }
.notebook__cover-main { min-width: 0; }
.notebook__date {
    display: block; font-family: var(--fb-serif); font-size: 1.15rem;
    line-height: 1.2; color: var(--fb-ink);
}
.notebook__by {
    display: block; font-family: var(--fb-sans); font-size: .82rem;
    color: var(--fb-ink-faint); margin-top: .15rem;
}
.notebook__cover-aside { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.notebook__count {
    font-family: var(--fb-sans); font-size: .8rem; color: var(--fb-ink-soft);
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: 999px; padding: .15rem .55rem; white-space: nowrap;
}
.notebook__chev { color: var(--fb-ink-faint); transition: transform .25s ease; }
.notebook__cover[aria-expanded="true"] .notebook__chev { transform: rotate(180deg); }

/* the open page — paper, a faint margin rule, slow generous reading */
.notebook__page {
    position: relative;
    background: var(--fb-paper);
    padding: 1.5rem 1.6rem 1.4rem 2.2rem;
}
.notebook__page::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 1.4rem;
    width: 1px; background: rgba(160,90,69,.18);
}
.notebook__page-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; margin-bottom: .9rem;
}
.notebook__title {
    font-family: var(--fb-serif); font-size: 1.5rem; line-height: 1.2;
    color: var(--fb-ink); margin: 0;
}
.notebook__tools { display: flex; gap: .3rem; flex: 0 0 auto; }
.notebook__prose {
    font-family: var(--fb-serif); font-size: 1.1rem; line-height: 1.8;
    color: var(--fb-ink);
}
.notebook__prose p { margin-bottom: 1rem; }
.notebook__stamp {
    font-family: var(--fb-sans); font-size: .78rem;
    color: var(--fb-ink-faint); margin: 1.2rem 0 0;
}

/* media within a page (structure unchanged, warmed) */
.diary-media { border-top: 1px solid var(--fb-line); padding-top: 1rem; margin-top: 1.2rem; }
.diary-media h6 { font-family: var(--fb-sans); }
.diary-thumbnail {
    cursor: pointer; transition: transform .2s ease;
    max-height: 150px; object-fit: cover; width: 100%;
}
.diary-thumbnail:hover { transform: scale(1.04); }

/* empty shelf */
.library-empty {
    text-align: center; padding: 3rem 1.5rem;
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius); box-shadow: var(--fb-shadow);
}
.library-empty__icon { font-size: 2.4rem; color: var(--fb-tussock); margin-bottom: .8rem; }
.library-empty p {
    font-family: var(--fb-serif); font-size: 1.08rem; line-height: 1.6;
    color: var(--fb-ink-soft); max-width: 42ch; margin: 0 auto 1.3rem;
}

@media (max-width: 576px) {
    .library-title { font-size: 1.7rem; }
    .notebook__page { padding-left: 1.6rem; }
    .notebook__page::before { left: .9rem; }
    .notebook__page-head { flex-direction: column; }
}

/* ============================================================
   MEMORY — Put Another Log On The Fire (the Memory of Flockburn)
   Shares Hearth's fireside family resemblance; adds a media-
   agnostic gallery (photo / video / audio / document) and the
   gentle "leave a memory" form. Tokens only — no raw hexes.
   ============================================================ */
.memory-question {
    font-family: var(--fb-serif); font-size: 1.18rem; line-height: 1.4;
    color: var(--fb-ink); margin: 0 0 1.2rem;
}

/* feed gallery — many kept things, side by side */
.memory-gallery {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
    background: #18140f;
}
.memory-gallery--one { grid-template-columns: 1fr; }
.memory-shot { position: relative; display: block; line-height: 0; background: #18140f; }
.memory-shot--photo img {
    width: 100%; height: 100%; max-height: 70vh; object-fit: cover; display: block;
}
.memory-gallery--one .memory-shot--photo img { object-fit: contain; background: #000; }
.memory-shot--video video {
    width: 100%; max-height: 70vh; display: block; background: #000;
}
.memory-shot--audio {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; line-height: 1.4;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(176,133,58,0.22), transparent 60%), #221d16;
}
.memory-shot--audio audio { width: 100%; }
.memory-doc {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; line-height: 1.4;
    font-family: var(--fb-sans); font-weight: 600; font-size: .95rem;
    color: var(--fb-tussock-soft); text-decoration: none;
    background: var(--fb-surface-soft); border-bottom: 1px solid var(--fb-line);
    transition: var(--fb-ease);
}
.memory-doc i { font-size: 1.2rem; color: var(--fb-tussock); }
.memory-doc:hover { color: var(--fb-timber); background: var(--fb-surface); }
.memory-doc--missing {
    color: var(--fb-ink-faint); font-weight: 400; font-style: italic;
    font-family: var(--fb-serif);
}

/* leave-a-memory: a single warm "add anything" affordance */
.memory-attach { margin-bottom: 1.3rem; }
.memory-drop { position: relative; display: block; cursor: pointer; }
.memory-drop input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.memory-drop__face {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1.6rem 1rem; text-align: center;
    background: var(--fb-surface-soft);
    border: 1px dashed var(--fb-line); border-radius: var(--fb-radius-sm);
    transition: var(--fb-ease);
}
.memory-drop__face i { font-size: 1.6rem; color: var(--fb-tussock); }
.memory-drop__title {
    font-family: var(--fb-sans); font-weight: 600; font-size: .95rem; color: var(--fb-ink);
}
.memory-drop__hint {
    font-family: var(--fb-sans); font-size: .8rem; color: var(--fb-ink-faint);
}
.memory-drop:hover .memory-drop__face {
    border-color: var(--fb-tussock-soft); background: var(--fb-surface);
    transform: translateY(-1px);
}

.memory-ways__lede {
    font-family: var(--fb-sans); font-size: .9rem; color: var(--fb-ink-faint);
    margin: -.4rem 0 1rem;
}
.memory-ways {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
.memory-way { position: relative; display: block; cursor: pointer; }
.memory-way input[type=file] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.memory-way__face {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: 1.2rem .8rem; text-align: center; height: 100%;
    background: var(--fb-surface-soft);
    border: 1px dashed var(--fb-line); border-radius: var(--fb-radius-sm);
    transition: var(--fb-ease);
}
.memory-way__face i { font-size: 1.5rem; color: var(--fb-tussock); }
.memory-way__title {
    font-family: var(--fb-sans); font-weight: 600; font-size: .95rem; color: var(--fb-ink);
}
.memory-way__hint {
    font-family: var(--fb-sans); font-size: .78rem; color: var(--fb-ink-faint);
}
.memory-way:hover .memory-way__face,
.memory-way input[type=file]:focus + .memory-way__face {
    border-color: var(--fb-tussock-soft); background: var(--fb-surface);
    transform: translateY(-1px);
}

.memory-saved {
    background: var(--fb-surface-soft);
    border: 1px solid var(--fb-tussock-soft); border-radius: var(--fb-radius-sm);
    padding: 1.1rem 1.2rem; margin-bottom: 1.6rem;
}
.memory-saved__line {
    font-family: var(--fb-sans); font-weight: 600; color: var(--fb-ink); margin-bottom: .7rem;
}
.memory-saved__line i { color: var(--fb-tussock); }
.memory-saved__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.hearth-card--new {
    border-color: var(--fb-tussock); box-shadow: var(--fb-shadow-lift);
    animation: memory-glow 2.4s ease-in-out 1;
}
@keyframes memory-glow {
    0% { box-shadow: 0 0 0 0 var(--fb-tussock-soft); }
    35% { box-shadow: 0 0 0 6px var(--fb-tussock-soft); }
    100% { box-shadow: var(--fb-shadow-lift); }
}

.hearth-help {
    font-family: var(--fb-sans); font-size: .82rem; color: var(--fb-ink-faint);
    line-height: 1.45; margin: -.1rem 0 .5rem;
}
.hearth-clear {
    margin: .6rem 0 0; padding: .35rem .8rem; font-family: var(--fb-sans);
    font-size: .82rem; color: var(--fb-ink-soft); cursor: pointer;
    background: transparent; border: 1px solid var(--fb-line);
    border-radius: 999px; transition: var(--fb-ease);
}
.hearth-clear:hover { color: var(--fb-ink); background: var(--fb-surface-soft); }

.hearth-btn--quiet {
    background: transparent; color: var(--fb-clay);
    border: 1px solid var(--fb-line); box-shadow: none;
}
.hearth-btn--quiet:hover { color: var(--fb-clay); background: var(--fb-surface-soft); }

.memory-kept { list-style: none; margin: .2rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem; }
.memory-kept__item {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--fb-sans); font-size: .85rem; color: var(--fb-ink-soft);
    padding: .35rem .7rem; background: var(--fb-surface-soft);
    border: 1px solid var(--fb-line); border-radius: 999px;
}
.memory-kept__item i { color: var(--fb-tussock); }

.memory-takeback {
    text-align: center; margin-top: 1.4rem; padding-top: 1.2rem;
    border-top: 1px solid var(--fb-line);
}
.memory-takeback__note {
    font-family: var(--fb-sans); font-size: .85rem; color: var(--fb-ink-faint);
    margin: 0 0 .6rem;
}

.memory-mine {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem;
    margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--fb-line);
}
.memory-mine__label {
    font-family: var(--fb-sans); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--fb-ink-faint);
}
.memory-mine form { margin: 0; }
.memory-mine__link {
    font-family: var(--fb-sans); font-size: .85rem; font-weight: 600;
    color: var(--fb-beech-deep); text-decoration: none; cursor: pointer;
    background: transparent; border: 0; padding: 0;
}
.memory-mine__link:hover { text-decoration: underline; }
.memory-mine__link--quiet { color: var(--fb-clay); }

@media (max-width: 576px) {
    .memory-gallery { grid-template-columns: 1fr; }
    .memory-ways { grid-template-columns: 1fr; }
}

/* "Secure a bunk" — the warm prompt that greets you when claiming your place,
   guiding you to pick an available night on the calendar first. */
.fb-secure-bunk-banner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    border-radius: var(--fb-radius);
    border: 1px solid var(--fb-line);
    background:
        radial-gradient(120% 130% at 8% 0%, rgba(176,133,58,0.16), transparent 62%),
        var(--fb-linen);
    box-shadow: var(--fb-shadow);
    padding: 1.3rem 1.5rem;
}
.fb-secure-bunk-banner__icon {
    flex: 0 0 auto;
    width: 3.1rem;
    height: 3.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.35rem;
    color: #2a2014;
    background: linear-gradient(180deg, var(--fb-tussock-soft), var(--fb-tussock));
    box-shadow: 0 6px 16px -8px rgba(176,133,58,.7);
}
.fb-secure-bunk-banner__title {
    font-family: var(--fb-serif);
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0 0 .3rem;
    color: var(--fb-ink);
}
.fb-secure-bunk-banner__text {
    font-family: var(--fb-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--fb-ink-soft);
    margin: 0;
    max-width: 60ch;
}
@media (max-width: 576px) {
    .fb-secure-bunk-banner { flex-direction: column; text-align: center; }
}

/* Section headings on the "My Visits" travel-history page. */
.fb-visits-heading {
    font-family: var(--fb-serif);
    color: var(--fb-ink);
    border-bottom: 1px solid var(--fb-line);
    padding-bottom: .4rem;
}

/* ===========================================================================
   Grandy's Diaries — the read-only historical book archive
   A warm, paper-and-ink reading room. Tokens only; nothing saturated.
   =========================================================================== */
.archive-wrap { max-width: 56rem; margin: 0 auto; }

/* --- The landing letter: first page of an old journal --- */
.archive-letter {
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    padding: clamp(1.6rem, 5vw, 3.4rem);
    margin: 1rem auto 2.6rem;
    max-width: 44rem;
}
.archive-letter__eyebrow {
    font-family: var(--fb-sans);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    color: var(--fb-ink-faint);
    margin: 0 0 .6rem;
}
.archive-letter__title {
    font-family: var(--fb-serif);
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    line-height: 1.15;
    color: var(--fb-ink);
    margin: 0 0 .4rem;
}
.archive-letter__date {
    font-family: var(--fb-serif);
    font-style: italic;
    color: var(--fb-ink-soft);
    margin: 0 0 1.6rem;
}
.archive-letter__sign {
    font-family: var(--fb-serif);
    font-size: 1.5rem;
    color: var(--fb-beech-deep);
    margin: 1.4rem 0 0;
}

/* --- Reading prose (letter + chapters) --- */
.archive-prose {
    font-family: var(--fb-serif);
    color: var(--fb-ink);
    font-size: clamp(1.06rem, 1rem + .4vw, 1.24rem);
    line-height: 1.78;
    max-width: 38rem;
}
.archive-letter .archive-prose { margin-inline: 0; }
.archive-prose p { margin: 0 0 1.15em; }
.archive-prose p:first-of-type { margin-top: 0; }
.archive-prose h3.archive-entry-date {
    font-family: var(--fb-sans);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fb-tussock);
    margin: 2.1em 0 .5em;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--fb-line-soft);
}

/* --- The bookshelf --- */
.archive-shelf__head { text-align: center; margin: 0 0 1.6rem; }
.archive-shelf__title {
    font-family: var(--fb-serif);
    font-size: 1.7rem;
    color: var(--fb-ink);
    margin: 0 0 .25rem;
}
.archive-shelf__lead { color: var(--fb-ink-soft); margin: 0; }

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.4rem;
    margin-top: 1.4rem;
}
.archive-card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--fb-ease);
}
.archive-card:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-lift); }
.archive-card__cover {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--fb-paper-2);
    overflow: hidden;
}
.archive-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-card__cover.is-spine,
.archive-book-head__cover.is-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.4rem;
    background: linear-gradient(160deg, var(--fb-beech) 0%, var(--fb-beech-deep) 100%);
    color: var(--fb-surface);
}
.archive-card__spine-title {
    font-family: var(--fb-serif);
    font-size: 1.25rem;
    line-height: 1.25;
}
.archive-card__spine-author {
    font-family: var(--fb-sans);
    font-size: .78rem;
    opacity: .85;
    margin-top: .6rem;
}
.archive-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.archive-card__title { font-family: var(--fb-serif); font-size: 1.2rem; margin: 0; line-height: 1.2; }
.archive-card__title a { color: var(--fb-ink); text-decoration: none; }
.archive-card__title a:hover { color: var(--fb-beech); }
.archive-card__author { color: var(--fb-ink-soft); font-size: .9rem; margin: 0; }
.archive-card__year { color: var(--fb-ink-faint); font-size: .82rem; margin: 0; }
.archive-card__desc { color: var(--fb-ink-soft); font-size: .92rem; margin: .4rem 0 .2rem; }

/* --- Buttons --- */
.archive-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--fb-sans); font-size: .9rem;
    padding: .5rem .9rem;
    border-radius: var(--fb-radius-sm);
    border: 1px solid var(--fb-line);
    background: var(--fb-surface);
    color: var(--fb-ink);
    text-decoration: none;
    cursor: pointer;
    transition: var(--fb-ease);
    margin-top: .5rem;
}
.archive-btn:hover { background: var(--fb-surface-soft); border-color: var(--fb-beech); color: var(--fb-beech-deep); }
.archive-btn--primary { background: var(--fb-beech); border-color: var(--fb-beech); color: var(--fb-surface); }
.archive-btn--primary:hover { background: var(--fb-beech-deep); border-color: var(--fb-beech-deep); color: var(--fb-surface); }
.archive-btn--danger { color: var(--fb-clay); border-color: var(--fb-line); }
.archive-btn--danger:hover { background: var(--fb-clay); border-color: var(--fb-clay); color: var(--fb-surface); }

/* --- Book overview --- */
.archive-crumb { margin: .5rem 0 1.2rem; }
.archive-crumb a { color: var(--fb-ink-soft); text-decoration: none; font-family: var(--fb-sans); font-size: .92rem; }
.archive-crumb a:hover { color: var(--fb-beech); }
.archive-book-head { display: flex; gap: 1.8rem; flex-wrap: wrap; align-items: flex-start; }
.archive-book-head__cover {
    width: 200px; flex: 0 0 200px; aspect-ratio: 3 / 4;
    border-radius: var(--fb-radius); overflow: hidden;
    border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow);
    background: var(--fb-paper-2);
}
.archive-book-head__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-book-head__meta { flex: 1 1 280px; }
.archive-book-head__title { font-family: var(--fb-serif); font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .25rem; color: var(--fb-ink); }
.archive-book-head__author { font-family: var(--fb-serif); font-style: italic; color: var(--fb-ink-soft); margin: 0 0 .5rem; }
.archive-book-head__years { display: flex; gap: 1rem; color: var(--fb-ink-faint); font-size: .85rem; margin: 0 0 1rem; font-family: var(--fb-sans); }
.archive-book-head__desc { font-family: var(--fb-serif); color: var(--fb-ink); line-height: 1.6; }
.archive-book-head__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.archive-book-head__actions .archive-btn { margin-top: 0; }

.archive-note {
    background: var(--fb-surface-soft);
    border: 1px solid var(--fb-line);
    border-left: 3px solid var(--fb-tussock);
    border-radius: var(--fb-radius-sm);
    padding: 1rem 1.2rem;
    margin: 1.8rem 0;
}
.archive-note__label { font-family: var(--fb-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fb-tussock); margin: 0 0 .35rem; }
.archive-note p:last-child { margin: 0; font-family: var(--fb-serif); font-style: italic; color: var(--fb-ink-soft); }

/* --- Table of contents --- */
.archive-toc { margin: 2rem 0; }
.archive-toc__title { font-family: var(--fb-serif); font-size: 1.4rem; color: var(--fb-ink); margin: 0 0 .8rem; }
.archive-toc__list { list-style: none; padding: 0; margin: 0; }
.archive-toc__list li { border-bottom: 1px solid var(--fb-line-soft); }
.archive-toc__list a { display: flex; gap: 1rem; align-items: baseline; padding: .85rem .3rem; text-decoration: none; color: var(--fb-ink); transition: var(--fb-ease); }
.archive-toc__list a:hover { background: var(--fb-surface-soft); color: var(--fb-beech-deep); }
.archive-toc__num { font-family: var(--fb-serif); font-size: 1.1rem; color: var(--fb-tussock); min-width: 1.6rem; }
.archive-toc__name { font-family: var(--fb-serif); font-size: 1.12rem; display: block; }
.archive-toc__sub { font-family: var(--fb-sans); font-size: .82rem; color: var(--fb-ink-faint); display: block; }

/* --- The reader --- */
.archive-reader { max-width: 44rem; margin: 0 auto; }
.archive-reader__bar {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--fb-sans); font-size: .9rem;
    padding-bottom: .8rem; border-bottom: 1px solid var(--fb-line); margin-bottom: 1rem;
}
.archive-reader__bar a { color: var(--fb-ink-soft); text-decoration: none; }
.archive-reader__bar a:hover { color: var(--fb-beech); }
.archive-reader__crumb { color: var(--fb-ink-faint); font-style: italic; font-family: var(--fb-serif); }
.archive-progress { height: 4px; background: var(--fb-line-soft); border-radius: 2px; overflow: hidden; }
.archive-progress__fill { display: block; height: 100%; background: var(--fb-beech); border-radius: 2px; }
.archive-reader__count { font-family: var(--fb-sans); font-size: .78rem; color: var(--fb-ink-faint); text-align: center; margin: .5rem 0 1.8rem; letter-spacing: .04em; }
.archive-chapter__head { text-align: center; margin: 0 0 2rem; }
.archive-chapter__title { font-family: var(--fb-serif); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--fb-ink); margin: 0 0 .3rem; }
.archive-chapter__sub { font-family: var(--fb-serif); font-style: italic; color: var(--fb-ink-soft); margin: 0; }
.archive-reader .archive-prose { margin: 0 auto; }

/* --- Pager --- */
.archive-pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.6rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--fb-line); }
.archive-pager__link { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--fb-ink); padding: .6rem .9rem; border-radius: var(--fb-radius-sm); transition: var(--fb-ease); max-width: 48%; }
.archive-pager__link:hover { background: var(--fb-surface-soft); color: var(--fb-beech-deep); }
.archive-pager__link span { display: flex; flex-direction: column; font-family: var(--fb-serif); line-height: 1.2; }
.archive-pager__link small { font-family: var(--fb-sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fb-ink-faint); }
.archive-pager__next { margin-left: auto; text-align: right; }

/* --- Management --- */
.archive-form-wrap { max-width: 42rem; }
.archive-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.archive-manage-head h1 { font-family: var(--fb-serif); margin: 0; color: var(--fb-ink); }
.archive-manage-head .archive-btn { margin-top: 0; }
.archive-manage-lead { color: var(--fb-ink-soft); margin: .4rem 0 1.6rem; }
.archive-manage-book { background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: var(--fb-radius); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; box-shadow: var(--fb-shadow); }
.archive-manage-book__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.archive-manage-book__top h2 { font-family: var(--fb-serif); font-size: 1.3rem; margin: 0; color: var(--fb-ink); }
.archive-manage-book__sub { color: var(--fb-ink-faint); font-size: .85rem; margin: .2rem 0 0; font-family: var(--fb-sans); }
.archive-manage-book__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.archive-manage-book__actions .archive-btn { margin-top: 0; padding: .35rem .7rem; font-size: .82rem; }
.archive-manage-book__actions form { margin: 0; }
.archive-tag { font-family: var(--fb-sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; background: var(--fb-paper-2); color: var(--fb-ink-soft); padding: .15rem .5rem; border-radius: 999px; vertical-align: middle; }
.archive-manage-chapters { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--fb-line-soft); }
.archive-manage-chapters li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; border-bottom: 1px solid var(--fb-line-soft); }
.archive-manage-chapters__name { font-family: var(--fb-serif); color: var(--fb-ink); }
.archive-manage-chapters__tools { display: flex; gap: .25rem; align-items: center; }
.archive-manage-chapters__tools form { margin: 0; }
.archive-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-line); background: var(--fb-surface); color: var(--fb-ink-soft); cursor: pointer; text-decoration: none; transition: var(--fb-ease); }
.archive-icon-btn:hover { border-color: var(--fb-beech); color: var(--fb-beech); }
.archive-icon-btn:disabled { opacity: .35; cursor: default; }
.archive-icon-btn--danger:hover { border-color: var(--fb-clay); color: var(--fb-clay); }

/* --- Forms --- */
.archive-form-title { font-family: var(--fb-serif); color: var(--fb-ink); margin: 0 0 .2rem; }
.archive-form-sub { color: var(--fb-ink-soft); font-style: italic; font-family: var(--fb-serif); margin: 0 0 1.4rem; }
.archive-form { display: flex; flex-direction: column; gap: 1.1rem; }
.archive-field { display: flex; flex-direction: column; gap: .35rem; }
.archive-field__label { font-family: var(--fb-sans); font-size: .9rem; color: var(--fb-ink); font-weight: 600; }
.archive-field__label em { color: var(--fb-clay); font-style: normal; }
.archive-field__label small, .archive-field__hint { font-weight: 400; color: var(--fb-ink-faint); font-size: .8rem; }
.archive-field input[type="text"], .archive-field input[type="number"], .archive-field textarea {
    font-family: var(--fb-sans); font-size: 1rem; color: var(--fb-ink);
    background: var(--fb-surface); border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius-sm); padding: .6rem .75rem; width: 100%;
}
.archive-field input:focus, .archive-field textarea:focus { outline: none; border-color: var(--fb-beech); box-shadow: 0 0 0 3px rgba(79,107,74,.12); }
.archive-textarea-mono { font-family: var(--fb-sans); line-height: 1.6; }
.archive-field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.archive-field--inline { gap: .5rem; }
.archive-radio { font-family: var(--fb-sans); font-size: .9rem; color: var(--fb-ink-soft); display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.archive-check { display: flex; gap: .6rem; align-items: center; font-family: var(--fb-sans); color: var(--fb-ink); }
.archive-form-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.archive-form-actions .archive-btn { margin-top: 0; }

.archive-empty { text-align: center; color: var(--fb-ink-soft); padding: 1.5rem; font-family: var(--fb-serif); font-style: italic; }
.archive-managebar { margin: 2.4rem 0 1rem; text-align: center; display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.archive-managebar a { color: var(--fb-ink-faint); font-family: var(--fb-sans); font-size: .85rem; text-decoration: none; }
.archive-managebar a:hover { color: var(--fb-beech); }

@media (max-width: 600px) {
    .archive-field-row { grid-template-columns: 1fr; }
    .archive-book-head__cover { width: 150px; flex-basis: 150px; margin: 0 auto; }
    .archive-pager__link { max-width: 50%; }
}

/* --- Print --- */
.archive-print-title { text-align: center; margin: 1rem 0 2rem; }
.archive-print-title h1 { font-family: var(--fb-serif); color: var(--fb-ink); }
.archive-print-chapter { margin: 2rem 0; }
.archive-print-chapter h2, .archive-print-letter h2 { font-family: var(--fb-serif); color: var(--fb-ink); }
@media print {
    .fb-rail, .fb-foot, .fb-host, .archive-noprint, .offcanvas, .navbar { display: none !important; }
    .archive-printable { max-width: none; }
    .archive-prose { max-width: none; color: #000; font-size: 12pt; line-height: 1.5; }
    .archive-print-chapter, .archive-print-letter { page-break-before: always; }
    .archive-print-title { page-break-after: avoid; }
    .archive-prose h3.archive-entry-date { color: #444; }
}

/* ---- Stewardship intro — the emotional opening to "How We Look After Flockburn" ---- */
.fb-steward-quote {
    max-width: 40rem;
    margin: 1rem auto 2.4rem;
    padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.8rem);
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-left: 3px solid var(--fb-beech);
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow);
    text-align: center;
}
.fb-steward-quote__lines {
    font-family: var(--fb-serif);
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem);
    line-height: 1.6;
    color: var(--fb-ink);
    margin: 0;
    font-style: italic;
}
.fb-steward-quote__lines span { display: block; }
.fb-steward-quote__by {
    font-family: var(--fb-sans);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fb-tussock);
    margin: 1.2rem 0 0;
}

/* Mobile: tighten the top of every room so the content (especially the
   booking calendar) sits close to the top of the screen. Touch targets kept. */
@media (max-width: 767.98px) {
    .navbar.fb-rail { margin-bottom: 0.35rem !important; }
    .fb-calendar-page { margin-top: 0 !important; }
    .fb-calendar-page .row > .col-12 > .d-flex.justify-content-end.mb-2 { margin-bottom: 0.35rem !important; }
    .fb-calendar-page .calendar-header-controls { margin-bottom: 0.5rem !important; row-gap: 0.35rem; }
}

/* ---- Historic Photograph Albums — a quiet "being gathered" placeholder ---- */
.albums-coming {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem 3.5rem;
}
.albums-coming__inner {
    max-width: 640px;
    text-align: center;
    background: var(--fb-surface);
    border: 1px solid var(--fb-line);
    border-radius: 1.1rem;
    box-shadow: var(--fb-shadow);
    padding: 3rem 2.25rem;
}
.albums-coming__eyebrow {
    font-family: var(--fb-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fb-beech-deep);
    margin-bottom: 0.75rem;
}
.albums-coming__title {
    font-family: var(--fb-serif);
    color: var(--fb-ink);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 1rem;
}
.albums-coming__lead {
    font-family: var(--fb-serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--fb-ink-soft);
    margin-bottom: 1.25rem;
}
.albums-coming__body {
    font-family: var(--fb-sans);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--fb-ink-soft);
    margin-bottom: 1.75rem;
}
.albums-coming__note {
    font-family: var(--fb-sans);
    font-size: 0.9rem;
    color: var(--fb-ink-faint, var(--fb-ink-soft));
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Deployment safeguard: non-production environment banner + release panel.
   Uses only --fb-* tokens (muted clay caution, never alarming Bootstrap red).
   -------------------------------------------------------------------------- */
.fb-env-banner {
    background: var(--fb-clay);
    color: #fdfcf6;
    text-align: center;
    font-family: var(--fb-sans);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    padding: 0.35rem 0.75rem;
}
.fb-release-key {
    color: var(--fb-ink-soft);
    font-family: var(--fb-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fb-release-val {
    color: var(--fb-ink);
    font-family: var(--fb-mono, monospace);
}

/* ===========================================================================
   Historic Photograph Albums — the Historical Photo Archive
   =========================================================================== */
.fb-btn-primary {
    background: var(--fb-moss, #5c6b4f);
    border: 1px solid var(--fb-moss, #5c6b4f);
    color: #fff;
}
.fb-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.fb-btn-secondary {
    background: var(--fb-parchment, #f3eee4);
    border: 1px solid var(--fb-border, #d8d2c4);
    color: var(--fb-ink, #3a352c);
}
.fb-btn-quiet {
    background: transparent;
    border: 1px solid var(--fb-border, #d8d2c4);
    color: var(--fb-ink-soft, #6b6455);
}
.fb-btn-quiet:hover { background: var(--fb-parchment, #f3eee4); }

.pa-page { max-width: 1100px; margin: 0 auto; padding: 1rem 0 3rem; }
.pa-eyebrow {
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
    color: var(--fb-ink-soft, #6b6455); margin-bottom: 0.25rem;
}
.pa-title { font-family: var(--fb-serif, Georgia, serif); color: var(--fb-ink, #3a352c); }
.pa-lead { color: var(--fb-ink-soft, #6b6455); max-width: 46rem; }
.pa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pa-head-actions { text-align: right; }

.pa-filters {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
    margin: 1rem 0 1.5rem; padding: 0.75rem;
    background: var(--fb-parchment, #f3eee4);
    border: 1px solid var(--fb-border, #d8d2c4); border-radius: 10px;
}
.pa-filters input[type="text"] { flex: 2 1 220px; }
.pa-filters select { flex: 1 1 140px; }
.pa-undated { white-space: nowrap; color: var(--fb-ink-soft, #6b6455); margin: 0; }
.pa-tagnote { color: var(--fb-ink-soft, #6b6455); font-style: italic; }

.pa-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.pa-card {
    display: block; text-decoration: none;
    background: #fff; border: 1px solid var(--fb-border, #d8d2c4);
    border-radius: 10px; overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pa-card:hover { box-shadow: 0 4px 14px rgba(58,53,44,0.14); transform: translateY(-2px); }
.pa-card img { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--fb-parchment, #f3eee4); }
.pa-card-noimg {
    height: 170px; display: flex; align-items: center; justify-content: center;
    color: var(--fb-border, #d8d2c4); font-size: 2rem;
    background: var(--fb-parchment, #f3eee4);
}
.pa-card-meta { padding: 0.5rem 0.75rem 0.7rem; }
.pa-card-title { display: block; color: var(--fb-ink, #3a352c); font-weight: 600; font-size: 0.92rem; }
.pa-card-date { display: block; color: var(--fb-ink-soft, #6b6455); font-size: 0.8rem; }
.pa-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.pa-pager-info { color: var(--fb-ink-soft, #6b6455); }
.pa-empty {
    text-align: center; padding: 3rem 1rem; color: var(--fb-ink-soft, #6b6455);
    background: var(--fb-parchment, #f3eee4);
    border: 1px dashed var(--fb-border, #d8d2c4); border-radius: 12px;
}

.pa-upload-box {
    background: #fff; border: 1px solid var(--fb-border, #d8d2c4);
    border-radius: 12px; padding: 1.25rem; max-width: 640px;
}
.pa-ai-note { color: var(--fb-ink-soft, #6b6455); font-size: 0.88rem; }
.pa-progress { margin-top: 1rem; border-top: 1px solid var(--fb-border, #d8d2c4); padding-top: 0.75rem; }
.pa-progress-summary { font-weight: 600; color: var(--fb-ink, #3a352c); margin-bottom: 0.5rem; }
.pa-progress-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.pa-progress-list li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.25rem 0; font-size: 0.88rem; color: var(--fb-ink-soft, #6b6455);
    border-bottom: 1px dotted var(--fb-border, #d8d2c4);
}
.pa-item-status { white-space: nowrap; }
.pa-item-failed { color: #a4553f; }

.pa-viewer-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pa-rotate { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: -0.5rem 0 1.25rem; }
.pa-rotate-note { font-size: 0.8rem; }
.pa-figure-img { transition: transform 0.25s ease; }
.pa-figure { text-align: center; margin-bottom: 1.25rem; }
.pa-figure-img {
    max-width: 100%; max-height: 72vh; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(58,53,44,0.18); background: #fff;
}
.pa-figure-noimg { border-radius: 8px; }
.pa-figcaption { margin-top: 0.5rem; color: var(--fb-ink-soft, #6b6455); }
.pa-detail-cols { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
@media (max-width: 860px) { .pa-detail-cols { grid-template-columns: 1fr; } }
.pa-label { font-weight: 600; color: var(--fb-ink, #3a352c); }
.pa-desc { white-space: pre-line; }
.pa-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pa-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.82rem;
    background: var(--fb-parchment, #f3eee4); color: var(--fb-ink, #3a352c);
    border: 1px solid var(--fb-border, #d8d2c4); text-decoration: none;
}
a.pa-tag:hover { background: var(--fb-moss, #5c6b4f); color: #fff; }
.pa-tag-ai { border-style: dashed; font-style: italic; }
.pa-tag-adopt {
    border: none; background: none; padding: 0 0.1rem; cursor: pointer;
    color: var(--fb-moss, #5c6b4f); font-weight: 700; line-height: 1;
}
.pa-ai-box {
    margin-top: 1rem; padding: 0.9rem 1rem;
    background: var(--fb-parchment, #f3eee4);
    border: 1px dashed var(--fb-border, #d8d2c4); border-radius: 10px;
}
.pa-ai-heading { font-weight: 600; color: var(--fb-ink, #3a352c); margin-bottom: 0.4rem; }
.pa-ai-conf { font-weight: 400; color: var(--fb-ink-soft, #6b6455); }
.pa-ai-sub { font-weight: 400; font-size: 0.82rem; color: var(--fb-ink-soft, #6b6455); }
.pa-ai-desc { font-style: italic; }
.pa-provenance { margin-top: 1rem; font-size: 0.82rem; color: var(--fb-ink-soft, #6b6455); }
.pa-original-link { color: var(--fb-moss, #5c6b4f); }
.pa-edit {
    background: #fff; border: 1px solid var(--fb-border, #d8d2c4);
    border-radius: 10px; padding: 0.75rem 1rem;
}
.pa-edit summary { cursor: pointer; font-weight: 600; color: var(--fb-ink, #3a352c); }
.pa-edit-form .form-label { margin: 0.6rem 0 0.15rem; font-size: 0.85rem; }
.pa-edit-dates { display: flex; gap: 0.75rem; }
.pa-remove-ai { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--fb-ink-soft, #6b6455); }
.pa-trash-btn { color: #a4553f; border-color: #d9c1b8; }
.pa-trash-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.pa-card-trash { cursor: default; }

/* --- Historic Albums landing & film archive ------------------------------ */
.ha-landing { max-width: 780px; }
.ha-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
@media (max-width: 576px) { .ha-doors { grid-template-columns: 1fr; } }
.ha-door {
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
    padding: 1.4rem 1.5rem; border-radius: 14px; text-decoration: none;
    background: var(--fb-card, #fdfbf6); border: 1px solid var(--fb-line, #e5decf);
    box-shadow: 0 2px 8px rgba(58,53,44,0.07); color: var(--fb-ink, #3a352c);
    transition: box-shadow .15s ease, transform .15s ease;
}
.ha-door:hover { box-shadow: 0 4px 14px rgba(58,53,44,0.14); transform: translateY(-2px); color: var(--fb-ink, #3a352c); }
.ha-door i { font-size: 1.6rem; color: var(--fb-moss, #6b7d5a); }
.ha-door-name { font-weight: 600; font-size: 1.1rem; }
.ha-door-desc { color: var(--fb-ink-soft, #756e5f); font-size: .92rem; }
.ha-add { margin-top: .5rem; }
.ha-add-note { color: var(--fb-ink-soft, #756e5f); font-size: .9rem; margin-top: .5rem; }

.pa-crumb { color: inherit; text-decoration: none; }
.pa-crumb:hover { text-decoration: underline; }
.pa-figure-video { width: 100%; max-height: 72vh; border-radius: 10px; background: #000; }

/* Search & filter fold (browsing-first, especially on mobile) */
.pa-filters-fold { margin-bottom: 1rem; }
.pa-filters-fold > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.pa-filters-fold > summary::-webkit-details-marker { display: none; }
.pa-filters-fold[open] > summary { margin-bottom: .75rem; }

/* Full-screen photograph overlay (native pinch-to-zoom works inside) */
.pa-fs-btn { margin-top: .5rem; }
.pa-fsview {
    position: fixed; inset: 0; z-index: 2000; background: rgba(20,18,14,0.96);
    overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pinch-zoom;
    display: flex; align-items: center; justify-content: center;
}
.pa-fsview img { max-width: 100%; max-height: 100%; margin: auto; }
.pa-fsview.d-none { display: none; }
.pa-fs-close {
    position: fixed; top: .8rem; right: .8rem; z-index: 2001;
    background: rgba(253,251,246,0.92); border: none; border-radius: 50%;
    width: 2.6rem; height: 2.6rem; font-size: 1.1rem; color: #3a352c;
}

/* Story dictation */
.fb-dictate { margin-top: .35rem; }
.fb-dictate-hint { display: block; font-size: .8rem; margin-top: .2rem; }
.fb-dictate-btn.fb-dictate-live { background: var(--fb-clay, #b0654a); color: #fff; }

/* --- Historic Photograph Albums: browse-first shelves --- */
.pa-browse-search { display: flex; gap: .5rem; max-width: 540px; margin-bottom: 1rem; }
.pa-browse { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; margin-bottom: 1.25rem; }
.pa-browse-label { color: var(--fb-ink-soft, #6b6455); font-size: .9rem; align-self: center; margin-right: .1rem; }
.pa-chip {
    display: inline-flex; align-items: center;
    padding: .25rem .75rem; border-radius: 999px;
    border: 1px solid var(--fb-line, #d8d0c0);
    background: var(--fb-paper, #faf6ec);
    color: var(--fb-ink, #3d3629);
    font-size: .9rem; text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.pa-chip:hover { background: var(--fb-paper-warm, #f3ecdc); color: var(--fb-ink, #3d3629); }
.pa-chip-on { background: var(--fb-moss-soft, #e4e8d8); border-color: var(--fb-moss, #7a8465); font-weight: 600; }
.pa-browse-fold { display: inline-block; }
.pa-browse-fold > summary { list-style: none; }
.pa-browse-fold > summary::-webkit-details-marker { display: none; }
.pa-browse-fold > summary::after { content: ' \25BE'; font-size: .8em; }
.pa-browse-fold[open] { flex-basis: 100%; }
.pa-browse-fold[open] > summary { margin-bottom: .4rem; }
.pa-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem 0 .25rem; }
.pa-pp-forms { gap: .75rem; }
.pa-pp-form { display: flex; gap: .35rem; align-items: center; }
.pa-clear-link { margin-left: .5rem; }

/* Photo archive — upload preview & orientation stage */
.pa-preview { margin-top: 1.25rem; border-top: 1px solid var(--fb-line, #e4ddcf); padding-top: 1rem; }
.pa-preview-lead { color: var(--fb-ink-soft, #6b6455); font-size: 0.92rem; }
.pa-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.pa-pv-row { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.6rem; border: 1px solid var(--fb-line, #e4ddcf); border-radius: 10px; background: var(--fb-paper, #fdfbf6); }
.pa-pv-thumbwrap { flex: 0 0 110px; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: #fff; }
.pa-pv-thumb { max-width: 96px; max-height: 96px; transition: transform 0.25s ease; }
.pa-pv-body { flex: 1 1 auto; min-width: 0; }
.pa-pv-name { font-weight: 600; color: var(--fb-ink, #3a352c); overflow-wrap: anywhere; }
.pa-pv-status { font-size: 0.85rem; color: var(--fb-ink-soft, #6b6455); margin: 0.15rem 0 0.4rem; }
.pa-pv-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pa-pv-done { opacity: 0.75; }
.pa-preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 560px) {
    .pa-pv-row { flex-direction: column; }
    .pa-pv-thumbwrap { width: 100%; flex-basis: auto; }
}

/* Photo archive — discreet orientation-correction fold on the photo page */
.pa-correct summary { cursor: pointer; font-size: 0.9rem; }
.pa-correct-form { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Family album slideshow — a quiet full-screen way to enjoy an album.
   Chrome only; deep charcoal backdrop so photographs carry the room. */
.fbss { position: fixed; inset: 0; z-index: 2000; background: #14110d; }
.fbss-img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0; transition: opacity 0.8s ease; }
.fbss-img.fbss-on { opacity: 1; }
.fbss-caption { position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.25rem 4.5rem 1.5rem; text-align: center; color: #f4efe7;
    background: linear-gradient(transparent, rgba(20, 17, 13, 0.75));
    pointer-events: none; }
.fbss-cap-title { font-weight: 600; font-size: 1.05rem; }
.fbss-cap-story { font-size: 0.9rem; opacity: 0.85; max-width: 640px;
    margin: 0.15rem auto 0; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; }
.fbss-cap-date { font-size: 0.8rem; opacity: 0.65; margin-top: 0.2rem; }
.fbss-btn { position: absolute; border: 0; border-radius: 999px;
    width: 48px; height: 48px; background: rgba(244, 239, 231, 0.14);
    color: #f4efe7; font-size: 1.1rem; display: flex; align-items: center;
    justify-content: center; }
.fbss-btn:hover { background: rgba(244, 239, 231, 0.28); color: #fff; }
.fbss-close { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.fbss-pause { bottom: max(0.75rem, env(safe-area-inset-bottom)); right: 0.75rem; }
.fbss-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.fbss-next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.fbss-count { position: absolute; top: max(0.9rem, env(safe-area-inset-top));
    left: 1rem; color: rgba(244, 239, 231, 0.7); font-size: 0.85rem; }

/* ---- Visit Albums: section headings + card descriptions ---- */
.pa-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fb-ink, #3d3529);
    margin: 0.75rem 0 0.75rem;
}
.pa-card-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--fb-ink-soft, #6b6152);
    margin-top: 0.15rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Shared full-screen photograph viewer (FBViewer) ----
   Swipe between photographs, pinch/double-tap to zoom; the same deep
   charcoal backdrop as the slideshow so photographs carry the room. */
.fbv { position: fixed; inset: 0; z-index: 2100; background: #14110d; overflow: hidden; }
.fbv.d-none { display: none; }
.fbv-stage { position: absolute; inset: 0; touch-action: none; overflow: hidden; }
.fbv-slot { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; will-change: transform; }
.fbv-slot img { max-width: 100%; max-height: 100%;
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
    will-change: transform; }
.fbv-btn { position: absolute; border: 0; border-radius: 999px;
    width: 48px; height: 48px; background: rgba(244, 239, 231, 0.14);
    color: #f4efe7; font-size: 1.1rem; display: flex; align-items: center;
    justify-content: center; z-index: 2101; }
.fbv-btn:hover { background: rgba(244, 239, 231, 0.28); color: #fff; }
.fbv-btn.d-none { display: none; }
.fbv-close { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.fbv-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.fbv-next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.fbv-count { position: absolute; top: max(0.9rem, env(safe-area-inset-top));
    left: 1rem; color: rgba(244, 239, 231, 0.7); font-size: 0.85rem;
    pointer-events: none; }

/* ---- Family album videos: cards, detail page, viewer and slideshow ---- */
.pa-card { position: relative; }
.pa-card-play {
    position: absolute; top: 0.5rem; left: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    background: rgba(20, 17, 13, 0.62); color: #f4efe7;
    font-size: 0.75rem; line-height: 1.4; pointer-events: none;
}
.pa-card-play .fa-play { font-size: 0.7rem; }
.pa-card-duration { font-variant-numeric: tabular-nums; }
.pa-figure-video {
    display: block; width: 100%; max-height: 72vh;
    background: #14110d; border-radius: 6px;
}
.pa-video-length { font-size: 0.85rem; margin-top: 0.35rem; }
.fbv-video {
    max-width: 100%; max-height: 100%; background: #000;
}
.fbss-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; background: transparent; z-index: 1;
}
.fbss-video.d-none { display: none; }

/* --- Flockburn Balance Sheet ---------------------------------------------- */
/* Report section header: light Flockburn green with dark ink for readability */
.fb-balance-header {
    background-color: #e6ecdd;                       /* light beech tint */
    background-color: color-mix(in srgb, var(--fb-beech) 14%, var(--fb-surface));
    color: var(--fb-ink);
    border-bottom: 1px solid var(--fb-line);
}
.fb-balance-header h5 { color: var(--fb-ink); }
.fb-balance-header:hover {
    background-color: #dde5d1;
    background-color: color-mix(in srgb, var(--fb-beech) 20%, var(--fb-surface));
}