/* ============================================================== TOKENS */
:root {
    /* Surface */
    --bg:         #f5f1ea;
    --paper:      #fbf8f3;
    --paper-alt:  #efeae1;

    /* Ink */
    --ink:        #1f1a16;
    --ink-soft:   #3a312a;
    --ink-muted:  #6b5f55;
    --ink-faint:  #9a8d82;

    /* Lines & accents */
    --rule:       #e3dcd0;
    --rule-soft:  #ece5d8;
    --accent:     #8a4a2c;
    --accent-soft:#c97a4b;

    /* Chrome / chips */
    --nav:        #221b16;
    --nav-ink:    #f4ead8;
    --chip:       #ede5d6;
    --chip-ink:   #5a4c3e;

    /* Status */
    --success:    #5a7a3a;

    /* Type */
    --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
    --font-chrome:  "Geist", system-ui, -apple-system, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

    /* Geometry */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    --shadow-card:       0 1px 0 rgba(0,0,0,.02), 0 2px 8px rgba(58,46,40,.04);
    --shadow-card-hover: 0 2px 0 rgba(0,0,0,.03), 0 12px 28px rgba(58,46,40,.10);
    --shadow-modal:      0 24px 60px rgba(20,16,14,.18);

    /* Bootstrap variable overrides */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-size: 1.06rem;
    --bs-primary: var(--accent);
    --bs-primary-rgb: 138, 74, 44;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: #6f3a23;
    --bs-border-color: var(--rule);
}

/* =============================================================== GLOBAL */
html, body {
    background: var(--bg);
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-soft);
    font-weight: 400;
    letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; }
h2 { font-size: 1.9rem; line-height: 1.15; }
h3 { font-size: 1.45rem; line-height: 1.2; }

.text-muted { color: var(--ink-muted) !important; }
.text-meta  { font-family: var(--font-chrome); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.text-soft  { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }

a { color: var(--accent); }
a:hover { color: #6f3a23; }

/* ===================================================== ICONS (inline SVG) */
.icon {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

/* ============================================================== NAVBAR */
.navbar {
    background-color: var(--nav) !important;
    font-family: var(--font-chrome);
    position: sticky;
    top: 0;
    /* Above Bootstrap modal (1055) and modal-backdrop (1050) so the menu
       stays visible while the lightbox is open. */
    z-index: 1060;
    padding: .85rem 0;
    --bs-navbar-color: rgba(244, 234, 216, .78);
    --bs-navbar-hover-color: var(--nav-ink);
    --bs-navbar-active-color: var(--nav-ink);
    --bs-navbar-toggler-border-color: rgba(244, 234, 216, .35);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28244,234,216,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(244, 234, 216, .15);
}

.navbar .navbar-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--nav-ink);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.navbar .navbar-brand .icon {
    color: var(--accent-soft);
}

.navbar .nav-link {
    color: rgba(244, 234, 216, .78) !important;
    font-size: .92rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--nav-ink) !important;
}

.navbar .dropdown-menu {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
}

/* ================================================================ CARDS */
.memory-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    box-shadow: var(--shadow-card);
    height: 100%;
    overflow: hidden;
}

.memory-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--rule-soft);
    transform: translateY(-1px);
}

.memory-card .card-body {
    padding: 1.25rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.memory-card .card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--ink-soft);
    margin: 0;
}

.memory-card .card-title a {
    color: inherit;
    text-decoration: none;
}

.memory-card:hover .card-title {
    color: var(--accent);
}

/* --- Image-led + stacked variants (memory_card.html) --- */
.memory-card--image,
.memory-card--stacked {
    display: flex;
    flex-direction: column;
}

.memory-card__hero {
    position: relative;
    overflow: hidden;
    background: var(--paper-alt);
    aspect-ratio: 4 / 3;
}

.memory-card__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.memory-card:hover .memory-card__hero img { transform: scale(1.02); }

.memory-card__likes {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    background: rgba(34, 27, 22, .72);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-chrome);
    font-size: .72rem;
    padding: .25rem .55rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    backdrop-filter: blur(4px);
}

.memory-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.3rem;
}

.memory-card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.18;
    color: var(--ink-soft);
    margin: 0;
}

.memory-card__title a {
    color: inherit;
    text-decoration: none;
}

.memory-card:hover .memory-card__title,
.memory-card:hover .memory-card__title a { color: var(--accent); }

.memory-card__excerpt {
    margin: 0;
    color: var(--ink-muted);
    font-size: .96rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.memory-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .1rem;
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .8rem;
}

.memory-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .15rem;
}

/* ====================================================== BADGES & CHIPS */
.badge {
    font-family: var(--font-chrome);
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1;
}

.badge-soft {
    background: var(--tint, var(--chip));
    color: var(--chip-ink);
    /* Slight ink darkening for legibility on lighter tints. */
    color: color-mix(in srgb, var(--tint, var(--chip)) 60%, #2a221c);
}

.badge-ghost {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-muted);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    background: var(--chip);
    color: var(--chip-ink);
    border-radius: 999px;
    font-family: var(--font-chrome);
    font-size: .75rem;
    letter-spacing: .02em;
}

/* Tag row: coloured selected chips first, then a "+ Add" pill that expands the
   white unadded chips inline (toggled by the .is-adding class via JS). */
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.tag-add-list { display: none; }
#tags-section.is-adding .tag-add-list { display: contents; }   /* pills flow into .tag-row */
#tags-section.is-adding .tag-add-toggle { display: none; }
.tag-add-new { display: inline-flex; align-items: center; gap: .3rem; }
.tag-add-done {
    background: var(--chip);
    color: var(--chip-ink);
    border-color: var(--chip);
}
.tag-add-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    margin: 0;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-chrome);
    font-size: .75rem;
    letter-spacing: .02em;
    line-height: 1.3;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.tag-add-pill:hover,
.tag-add-pill:focus-visible {
    background: var(--chip);
    color: var(--chip-ink);
    border-color: var(--chip);
    outline: none;
}
/* The "+ New tag" pill reads as an action via a dashed outline. */
.tag-add-pill--new { border-style: dashed; }
/* Inline editor the "+ New tag" pill expands into. */
.tag-add-input {
    padding: .2rem .55rem;
    margin: 0 .3rem .3rem 0;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--chip);
    border-radius: 999px;
    font-family: var(--font-chrome);
    font-size: .75rem;
    letter-spacing: .02em;
    line-height: 1.3;
    max-width: 10rem;
}
.tag-add-input:focus { outline: none; box-shadow: 0 0 0 2px var(--chip); }

/* ============================================================ BUTTONS */
.btn {
    font-family: var(--font-chrome);
    border-radius: var(--radius-md);
}

.btn-dark {
    background-color: var(--ink-soft);
    border-color: var(--ink-soft);
}
.btn-dark:hover { background-color: var(--ink); border-color: var(--ink); }

.btn-outline-dark {
    color: var(--ink-soft);
    border-color: var(--rule);
}
.btn-outline-dark:hover {
    background-color: var(--paper-alt);
    color: var(--ink-soft);
    border-color: var(--rule);
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover {
    background-color: #6f3a23;
    border-color: #6f3a23;
}

/* ========================================================= FOCUS HALO */
:focus { outline: none; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.memory-card:focus-visible,
.like-btn:focus-visible,
.interest-star:focus-visible,
.dropdown-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--bg);
}

/* =========================================================== LIKE BTN */
.like-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-family: var(--font-chrome);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.like-btn:hover {
    border-color: var(--accent);
    background: var(--paper);
    color: var(--accent);
}

.like-btn.liked {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ============================================================ AUTH TOAST */
.auth-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    max-width: 22rem;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    padding: 1rem 1.1rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-family: var(--font-chrome);
    animation: authToastIn .25s ease-out;
}

@keyframes authToastIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.auth-toast__body { flex: 1; }
.auth-toast__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 .2rem;
    color: var(--ink-soft);
}
.auth-toast__lede {
    margin: 0 0 .7rem;
    font-size: .88rem;
    color: var(--ink-muted);
}
.auth-toast__actions {
    display: flex;
    gap: .5rem;
}
.auth-toast__close {
    background: none;
    border: none;
    color: var(--ink-faint);
    padding: .15rem;
    line-height: 1;
    cursor: pointer;
}
.auth-toast__close:hover { color: var(--ink); }

/* ====================================================== INTEREST STARS */
.interest-scorer { font-family: var(--font-chrome); }

.interest-star {
    background: none;
    border: none;
    font-size: 1.35rem;
    color: var(--rule);
    cursor: pointer;
    padding: 0 .15rem;
    transition: color .15s, transform .15s;
}
.interest-star:hover { color: var(--accent-soft); transform: scale(1.15); }
.interest-star.active { color: var(--accent); }

.interest-scorer__row { display: flex; align-items: center; flex-wrap: wrap; }
.interest-scorer__attribution {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    font-size: .85rem;
}
.interest-scorer__attribution li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem 0;
    color: var(--ink-muted);
}
.interest-scorer__attribution .interest-scorer__score {
    color: var(--accent);
    display: inline-flex;
    gap: .05rem;
}
.interest-scorer__attribution .interest-scorer__who { color: var(--ink); }

/* ============================================================ COMMENTS */
.comments-section { font-family: var(--font-body); }
.comment {
    font-size: .96rem;
    padding: .85rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
}

/* ============================================================== HERO */
.hero {
    padding: 4.5rem 0 3rem;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
}

.hero h1 {
    font-family: var(--font-display);
    color: var(--ink-soft);
    margin: 0;
}

/* Home mosaic (Option B) */
.home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem 1rem 3rem;
}

@media (max-width: 992px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.home-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.home-hero__lede {
    color: var(--ink-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 36ch;
}

.home-hero__lead-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card-hover);
    aspect-ratio: 4 / 3;
}

.home-hero__lead-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.home-hero__lead-link:hover img { transform: scale(1.03); }

.home-hero__lead-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1.6rem;
    background: linear-gradient(0deg, rgba(20,16,14,.78) 0%, rgba(20,16,14,0) 100%);
    color: #f6efe2;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.home-hero__lead-caption h2 {
    font-family: var(--font-display);
    color: #f6efe2;
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
}
.home-hero__lead-caption .text-meta { color: rgba(246,239,226,.78); }

/* Pulled quote */
.pulled-quote {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 2.25rem 1rem;
}
.pulled-quote__text {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-soft);
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.4;
    margin: 0;
    border: none;
    padding: 0;
}
.pulled-quote__by {
    margin-top: 1rem;
    font-family: var(--font-chrome);
    font-size: .8rem;
    color: var(--ink-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pulled-quote__by a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

/* =================================================== COLLECTION MASTHEAD */
.collection-masthead {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
}

.collection-masthead__row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    align-items: end;
}

@media (max-width: 768px) {
    .collection-masthead { padding-top: 2rem; }
    .collection-masthead__row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: stretch;
    }
}

.collection-masthead__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    color: var(--ink-soft);
    margin: 0;
    letter-spacing: -0.015em;
}

.collection-masthead__intro {
    margin: 1rem 0 0;
    max-width: 36rem;
    color: var(--ink-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.collection-stats {
    display: flex;
    gap: 1.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .collection-stats { justify-content: flex-start; }
}

.collection-stats > div { text-align: right; }
@media (max-width: 768px) { .collection-stats > div { text-align: left; } }

.collection-stats__value {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--ink-soft);
}

/* ========================================================= PAGINATION */
.pagination-row .rule-divider {
    width: 1px;
    height: 14px;
    background: var(--rule);
}

/* ========================================================= FILTER BAR */
.filter-bar {
    background: rgba(245, 241, 234, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
    padding: .9rem 0;
    margin-bottom: 1.25rem;
    font-family: var(--font-chrome);
    position: sticky;
    top: 60px;        /* below navbar */
    z-index: 5;
}

.filter-bar .btn-sm {
    font-size: .82rem;
    padding: .35rem .75rem;
    border-radius: 999px;
}

/* ====================================================== STREAM CONTENT */
.rich-text {
    max-width: 72ch;
    font-family: var(--font-body);
    color: var(--ink);
}

.rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1.4rem;
    margin: 1.6rem 0;
    font-style: italic;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.45;
}

/* --- Streamfield block styles --- */
.block-image {
    margin: 2rem -1rem;
}
.block-image__media {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-md);
}
.block-image__caption {
    margin-top: .65rem;
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--ink-muted);
    font-size: .95rem;
}

.block-quote {
    border: none;
    margin: 2.5rem auto;
    padding: 1.5rem 1rem;
    max-width: 44rem;
    text-align: center;
}
.block-quote__mark {
    display: inline-block;
    color: var(--accent-soft);
    margin-bottom: .5rem;
}
.block-quote__text {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 0;
    border: none;
    padding: 0;
    font-style: normal;
}
.block-quote__by {
    margin-top: .85rem;
    font-family: var(--font-chrome);
    font-size: .8rem;
    color: var(--ink-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.block-poem {
    margin: 2rem 0;
}
.block-poem--centred { text-align: center; }
.block-poem__text {
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.7;
    white-space: pre-line;
    color: var(--ink-soft);
}
.block-poem__by {
    margin-top: .65rem;
    font-style: italic;
    color: var(--ink-muted);
}

/* --- Next memory CTA on standalone memory_page --- */
.next-memory-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: 1px solid var(--rule);
    margin-top: 3rem;
    padding-top: 2.5rem;
}
.next-memory-cta__label {
    font-family: var(--font-chrome);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .35rem;
}
.next-memory-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--ink-soft);
    margin: 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.next-memory-cta__title:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================= FOOTER */
body > footer {
    background-color: var(--nav) !important;
    color: rgba(244, 234, 216, .65);
    font-family: var(--font-chrome);
    font-size: .82rem;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ================================================================ AUTH */
.auth-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100vh - var(--navbar-h, 60px));
}

@media (max-width: 992px) {
    .auth-shell { grid-template-columns: 1fr; min-height: 0; }
}

.auth-aside {
    background: var(--ink-soft);
    color: var(--nav-ink);
    padding: 3rem 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
}

.auth-aside::before {
    /* warm texture wash */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(201,122,75,.22), transparent 60%),
        radial-gradient(50% 50% at 10% 100%, rgba(138,74,44,.18), transparent 70%);
    pointer-events: none;
}

.auth-aside > * { position: relative; }

.auth-aside__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--nav-ink);
    text-decoration: none;
}

.auth-aside__body { max-width: 30rem; }

.auth-aside__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--nav-ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: .35rem 0 1.5rem;
}

.auth-aside__quote {
    margin: 0;
    color: rgba(244,234,216,.85);
}
.auth-aside__quote blockquote {
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.45;
    font-style: italic;
    color: rgba(244,234,216,.92);
}
.auth-aside__quote figcaption {
    margin-top: .75rem;
    font-family: var(--font-chrome);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244,234,216,.55);
}

.auth-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.auth-form {
    width: 100%;
    max-width: 26rem;
}

.auth-form__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    color: var(--ink-soft);
    margin: 0 0 .35rem;
}

.auth-form__lede {
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}

.auth-form__details {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
}

.auth-form__details > summary {
    cursor: pointer;
    color: var(--ink-muted);
    font-family: var(--font-chrome);
    font-size: .9rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.auth-form__details > summary::-webkit-details-marker { display: none; }
.auth-form__details > summary::after {
    content: "›";
    transition: transform .15s;
    color: var(--ink-faint);
}
.auth-form__details[open] > summary::after { transform: rotate(90deg); }

.auth-form__foot {
    margin-top: 1.25rem;
    color: var(--ink-muted);
}

/* Code-input cells (login + email-confirm) */
.code-input {
    display: flex;
    gap: .55rem;
    justify-content: space-between;
}
.code-input input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
}
.code-input input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

/* ============================================================ LIGHTBOX */
#memoryLightbox .modal-dialog.modal-fullscreen {
    height: calc(100vh - var(--navbar-h, 60px));
    margin-top: var(--navbar-h, 60px);
}

#memoryLightbox .modal-content {
    background: var(--bg);
    height: 100%;
}

#memoryLightbox .modal-body {
    overflow-y: auto;
    padding: 0 4rem 2rem;
}

.lightbox-toolbar {
    position: sticky;
    top: 0;
    background: rgba(245, 241, 234, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule-soft);
    padding: .75rem 0;
    margin: 0 -4rem 1.25rem;
    padding-left: 4rem;
    padding-right: 4rem;
    z-index: 5;
    font-family: var(--font-chrome);
}

#memoryLightbox .rich-text { max-width: 100%; }

#memoryLightbox img,
#memoryLightbox video {
    max-height: 70vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-md);
}

#memoryLightbox audio { width: 100%; }

.lightbox-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--ink-soft);
    margin: 0 0 .85rem;
}

.lightbox-meta { font-family: var(--font-chrome); font-size: .88rem; }

/* 1px progress bar that pulses while an HTMX swap is in flight */
.lightbox-progress {
    position: sticky;
    top: 0;
    height: 2px;
    background: transparent;
    overflow: hidden;
    z-index: 6;
}
.lightbox-progress::before {
    content: "";
    position: absolute;
    left: -40%;
    top: 0;
    width: 40%;
    height: 100%;
    background: var(--accent);
    opacity: 0;
    transition: opacity .15s linear;
}
.lightbox-progress.is-loading::before {
    opacity: 1;
    animation: lightboxProgress 1s linear infinite;
}
@keyframes lightboxProgress {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.lightbox-foot {
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.lightbox-next-preview {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: .55rem 1rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.lightbox-next-preview:hover {
    background: var(--paper);
    border-color: var(--accent);
    color: var(--accent);
}
.lightbox-next-preview__title {
    font-family: var(--font-display);
    font-size: 1rem;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Side chevron navigation */
.lightbox-nav-side {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1060;
    background: #3a332d;   /* opaque so the L/R bars can't differ over the scrollbar */
    color: var(--nav-ink);
    border: none;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}
.lightbox-nav-side:hover { background: #4d453d; }
.lightbox-nav-side:disabled { opacity: .2; cursor: default; }
.lightbox-nav-prev { left: 0; }
.lightbox-nav-next { right: 0; }

@media (max-width: 576px) {
    #memoryLightbox .modal-body {
        padding: 0 1rem 1rem;
    }
    .lightbox-toolbar {
        margin: 0 -1rem .75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .lightbox-nav-side { display: none; }
}

/* ==================================================== RESPONSIVE NOTES */
@media (max-width: 768px) {
    .hero { padding: 3rem 0 2rem; }
    .memory-card .card-body { padding: 1rem; }
    .filter-bar { top: 56px; }
}