@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&display=swap");

/* ======================================================
   OMOIDE ATLAS
   MASTER DESIGN SYSTEM
====================================================== */

:root {

    /* Colours */

    --primary: #2f5d62;
    --primary-hover: #3b6e74;

    --secondary: #eef5f5;
    --secondary-hover: #dfe9e8;

    --danger: #b84040;
    --danger-hover: #a33434;

    --text: #222222;
    --text-light: #666666;
    --secondary-text: #666666;

    --border: #dde7e6;
    --background: #fafcfc;
    --white: #ffffff;
    --card: #ffffff;

    /* Cards */

    --card-radius: 22px;
    --card-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);

    /* Buttons */

    --button-radius: 14px;

    /* Inputs */

    --input-radius: 14px;

    /* Animation */

    --transition: all 0.22s ease;
}


/* ======================================================
   BASE
====================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background: var(--background);
    color: var(--text);

    display: flex;
    flex-direction: column;

    min-height: 100vh;
}

header {
    background: linear-gradient(
        135deg,
        #2f4f4f,
        #486868
    );

    color: var(--white);

    text-align: center;

    padding: 25px 20px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15);
}

header h1 {
    margin: 0;

    font-size: 2rem;
    font-weight: 700;
}

main {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.2rem;
}


/* ======================================================
   MASTER BUTTON SYSTEM
====================================================== */

.primary-button,
.secondary-button,
.danger-button {
    border-radius: var(--button-radius);

    padding: 13px 20px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition: var(--transition);
}


/* Primary */

.primary-button {
    background: var(--primary);
    color: var(--white);

    border: 1px solid var(--primary);
}

.primary-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);

    transform: translateY(-1px);
}


/* Secondary */

.secondary-button {
    background: var(--secondary);
    color: var(--primary);

    border: 1px solid var(--border);
}

.secondary-button:hover {
    background: var(--secondary-hover);

    transform: translateY(-1px);
}


/* Danger */

.danger-button {
    background: #fff7f7;
    color: var(--danger);

    border: 1px solid #e5c8c8;
}

.danger-button:hover {
    background: #fdecec;

    color: var(--danger-hover);

    border-color: #dbaaaa;

    transform: translateY(-1px);
}


/* ======================================================
   BOTTOM NAVIGATION
====================================================== */

nav {
    display: flex;
    justify-content: space-around;

    background: var(--card);

    padding: 15px;

    border-top: 1px solid #dddddd;
}

nav button {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    background: none;

    border: none;

    font-size: 1rem;

    cursor: pointer;

    transition: var(--transition);
}

nav button span {
    font-size: 0.85rem;
}

nav button.active {
    color: #0b6e6e;

    font-weight: 700;

    transform: scale(1.1);
}

nav button:hover {
    color: #0b6e6e;
}


/* ======================================================
   GENERIC CARD
====================================================== */

.card {
    width: 320px;

    padding: 30px;

    background: var(--card);

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}

.card h2 {
    margin-top: 0;
}

.card p {
    color: var(--secondary-text);
}

.card hr {
    margin: 25px 0;

    border: none;
    border-top: 1px solid #eeeeee;
}

.card h3 {
    margin-bottom: 8px;

    color: var(--primary);
}


/* ======================================================
   DASHBOARD
====================================================== */

.dashboard {
    width: min(900px, 92%);

    display: grid;

    gap: 20px;

    padding: 30px 0;
}

.welcome-card,
.countdown-card,
.dashboard-item {
    padding: 24px;

    background: var(--card);

    border-radius: 20px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}

.countdown-card {
    text-align: center;
}

.countdown-card strong {
    display: block;

    margin: 8px 0;

    color: var(--primary);

    font-size: 2rem;
}

.dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.dashboard-item {
    text-align: center;
}

.dashboard-item span {
    font-size: 2rem;
}

.dashboard-item h3 {
    margin: 10px 0 5px;
}

.dashboard-item p {
    margin: 0;
}


/* ======================================================
   PAGE HEADINGS
====================================================== */

.page-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;
}

.page-heading h2 {
    margin: 0 0 6px;
}

.page-heading p {
    margin: 0;

    color: var(--text-light);

    line-height: 1.5;
}


/* ======================================================
   BACK BUTTON
====================================================== */

.back-button {
    margin-bottom: 20px;

    padding: 12px 22px;

    border: none;
    border-radius: 12px;

    background: #dff3ef;
    color: #0b6e6e;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}

.back-button:hover {
    background: #cfece6;

    transform: translateY(-1px);
}


/* ======================================================
   TRIP STATUS
====================================================== */

.trip-status {
    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    background: #dff3ef;
    color: #0b6e6e;

    font-size: 0.85rem;
    font-weight: 700;
}


/* ======================================================
   TRIP CARDS
====================================================== */

.trip-card {
    display: block;

    margin-bottom: 18px;

    padding: 24px;

    background: var(--white);

    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.trip-card h3 {
    margin: 12px 0 8px;
}

.trip-card p {
    margin: 0;

    color: var(--secondary-text);
}

.trip-cover {
    position: relative;

    width: 100%;
    height: 180px;

    margin-bottom: 20px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dfeceb,
            #b8cfcc
        );

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    background-color: #eef4f3;
}

.trip-cover::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.15)
        );
}

.trip-content {
    position: relative;

    z-index: 1;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 24px;

    color: var(--white);
}

.trip-content h3,
.trip-content p,
.trip-content .trip-meta {
    color: var(--white);
}

.trip-card-body {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    padding-top: 24px;
}

.trip-card-details h3 {
    margin: 14px 0 12px;
}

.trip-meta {
    display: grid;

    gap: 6px;

    color: var(--secondary-text);
}


/* ======================================================
   TRIP ACTIONS
====================================================== */

.trip-actions {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}

.trip-actions button {
    padding: 10px 16px;

    border: none;
    border-radius: 10px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}

.trip-actions button:first-child {
    background: #dff3ef;
    color: #0b6e6e;
}

.trip-actions button:last-child {
    background: #ffe6e6;
    color: #b00020;
}

.trip-actions button:hover {
    transform: translateY(-2px);
}


/* ======================================================
   TRIPS SUMMARY
====================================================== */

.trips-summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin: 30px 0;
}

.summary-box {
    padding: 20px;

    background: var(--white);

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.summary-box strong {
    display: block;

    color: #0b6e6e;

    font-size: 2rem;
}

.summary-box span {
    color: var(--secondary-text);
}


/* ======================================================
   TRIP DETAIL HERO
====================================================== */

.trip-detail-hero {
    position: relative;

    height: 340px;

    margin-bottom: 35px;

    overflow: hidden;

    border-radius: var(--card-radius);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.trip-detail-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 80px 40px 40px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.15),
            transparent
        );
}

.trip-detail-overlay h2 {
    margin: 8px 0 12px;

    color: var(--white);

    font-size: 3rem;
    line-height: 1.1;
}

.trip-detail-overlay p {
    margin: 0;

    color: var(--white);

    font-size: 1.2rem;
}

.hero-status,
.trip-detail-hero .trip-status.hero-status,
.trip-detail-hero > .hero-status {
    position: absolute;

    top: 24px;
    left: 24px;

    right: auto;
    bottom: auto;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 0;

    padding: 8px 16px;

    z-index: 10;
}


/* ======================================================
   TRIP HUB
====================================================== */

.trip-hub {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 30px;

    padding-bottom: 40px;
}

.trip-hub-card {
    display: flex;

    align-items: center;

    gap: 18px;

    width: 100%;
    min-height: 140px;

    padding: 24px;

    border: none;
    border-radius: 20px;

    background: var(--white);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08);

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.trip-hub-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.12);
}

.trip-hub-card > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    border-radius: 16px;

    background: #e8f6f3;

    font-size: 1.8rem;
}

.trip-hub-card div {
    flex: 1;
}

.trip-hub-card h3 {
    margin: 0 0 6px;

    color: #1f2a2a;

    font-size: 1.25rem;
}

.trip-hub-card p {
    margin: 0;

    color: var(--text-light);

    line-height: 1.45;
}

.trip-hub-card::after {
    content: "›";

    color: #0b6e6e;

    font-size: 2rem;
    font-weight: 600;
}


/* ======================================================
   ITINERARY
====================================================== */

.itinerary-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    padding: 8px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 18px;
}

.itinerary-status {
    display: inline-flex;
    align-items: center;

    padding: 10px 16px;

    border-radius: 999px;

    background: #e6f6ee;
    color: #157347;

    border: 1px solid #c8e6d3;

    font-size: 0.9rem;
    font-weight: 700;
}

.itinerary-actions .secondary-button {
    padding: 10px 16px;
}

.itinerary-status:hover {

    background: #dff3e8;

}

.itinerary-days {
    display: flex;
    flex-direction: column;

    gap: 28px;

    margin-top: 40px;
}

.itinerary-day {
    padding: 24px;

    background: var(--white);

    border-radius: var(--card-radius);

    box-shadow:
         0 10px 26px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.itinerary-day:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.12);
}

.itinerary-day-heading {
    display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;

    gap: 20px;

    margin-bottom: 24px;
}

.itinerary-day-heading span {
    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.itinerary-day-heading h3 {
    margin: 0;

    font-size: 1.55rem;
    line-height: 1.25;

    color: var(--text);
}


/* Add Moment */

.add-day-activity {
    padding: 9px 16px;

    background: var(--primary);
    color: var(--white);

    border: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;

    transition: var(--transition);
}

.add-day-activity:hover {
    background: var(--primary-hover);

    transform: translateY(-2px);

    box-shadow:
    0 8px 18px rgba(11,110,110,0.18);
}


/* Empty day */

.day-empty-state {
    margin-top: 18px;

    padding: 22px;

    border: 1px dashed var(--border);
    border-radius: 16px;

    background: #f8fbfa;

    color: var(--text-light);

    text-align: center;
}

.day-empty-state span {
    display: block;

    margin-bottom: 8px;

    font-size: 1.6rem;
}

.day-empty-state p {
    margin: 8px 0 0;

    color: var(--text-light);

    line-height: 1.5;
}

/* ======================================================
   MOMENT CARDS
====================================================== */

.moment-list {
    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 20px;
}

.moment-card {
    padding: 18px 20px;

    background: var(--white);

    border: 1px solid #e3eceb;

    border-radius: 18px;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.moment-card:hover {
    transform: translateY(-2px);

    border-color: #c9dedb;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08);
}

.moment-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-bottom: 10px;
}

.moment-time {
    color: #0b7774;

  font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.02em;
}

.moment-edit {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--secondary);

    font-size: 0.9rem;

    opacity: 0.65;

    transition:
        opacity 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.moment-card:hover .moment-edit {
    opacity: 1;

    background: var(--secondary-hover);

    transform: scale(1.05);
}

.moment-content h4 {
    margin: 0 0 6px;

    font-size: 1.12rem;
    line-height: 1.35;

    color: var(--text);
}

.moment-content p {
    margin: 8px 0 0;

    color: #555555;

    line-height: 1.5;
}

.moment-location {
    margin-top: 4px;

    color: var(--text-light);

    font-size: 0.9rem;
    line-height: 1.4;
}

/* ======================================================
   MOMENT DETAILS
====================================================== */

.moment-detail-card {
    width: 100%;
    max-width: 760px;

    margin: 20px auto 40px;

    padding: 32px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);
}


/* Header */

.moment-detail-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--border);
}

.moment-detail-day {
    display: block;

    margin-bottom: 6px;

    color: var(--primary);

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.moment-detail-header h2 {
    margin: 0;

    font-size: 2rem;
    line-height: 1.2;

    color: var(--text);
}

.moment-detail-time {
    flex-shrink: 0;

    padding: 9px 14px;

    border-radius: 999px;

    background: var(--secondary);

    color: var(--primary);

    font-weight: 700;
}


/* Location + notes */

.moment-detail-location {
    margin-top: 22px;

    color: var(--text-light);

    font-size: 0.95rem;
}

.moment-detail-notes {
    margin: 16px 0 0;

    color: #4f5b5b;

    line-height: 1.6;
}


/* Planning section */

.moment-detail-plan {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 24px;

    margin-top: 30px;

    padding: 22px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 18px;
}

.moment-detail-plan h3 {
    margin: 0 0 6px;

    font-size: 1.1rem;
}

.moment-detail-plan p {
    margin: 0;

    color: var(--text-light);

    font-size: 0.92rem;
    line-height: 1.5;
}


/* Capture section */

.moment-detail-capture {
    margin-top: 24px;

    padding: 26px;

    background: linear-gradient(
        135deg,
        #fbfdfc,
        #f4f9f8
    );

    border: 1px solid var(--border);
    border-radius: 20px;
}

.capture-heading {
    display: flex;

    align-items: flex-start;

    gap: 14px;
}

.capture-heading > span {
    font-size: 1.5rem;
}

.capture-heading h3 {
    margin: 0 0 6px;

    font-size: 1.2rem;
}

.capture-heading p {
    margin: 0;

    color: var(--text-light);

    font-size: 0.92rem;
    line-height: 1.5;
}


/* Capture options */

.capture-options {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 22px;
}

.capture-option {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 88px;

    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: var(--white);

    color: var(--text-light);

  font: inherit;
font-size: 1.25rem;

cursor: pointer;
}

.capture-option,
.capture-option span {
    user-select: none;
}

.capture-option span {
    font-size: 0.82rem;
    font-weight: 600;
}

.capture-option:disabled {
    opacity: 0.55;

    cursor: default;
}


/* Temporary development message */

.capture-coming-soon {
    margin: 18px 0 0;

    color: var(--text-light);

    font-size: 0.82rem;

    text-align: center;
}


/* Mobile */

@media (max-width: 700px) {

    .moment-detail-card {
        padding: 22px;
    }

    .moment-detail-header {
        flex-direction: column;
    }

    .moment-detail-plan {
        flex-direction: column;
        align-items: stretch;
    }

    .moment-detail-plan .secondary-button {
        width: 100%;
    }

    .capture-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* ======================================================
   MASTER TRIP FORM
   Add Moment + Edit Moment
====================================================== */

.trip-form {
    width: 100%;
    max-width: 520px;

    margin: 40px auto;

    padding: 30px;

    background: var(--white);

    border-radius: var(--card-radius);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.08);
}

.trip-form h2 {
    margin: 0 0 6px;
}

.trip-form > p {
    color: var(--text-light);

    line-height: 1.5;
}

.trip-form .form-subtitle {
    margin: 0 0 8px;

    color: var(--text-light);

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.4;
}

.trip-form .form-description {
    margin: 0 0 28px;

    color: var(--text-light);

    font-size: 0.95rem;

    line-height: 1.6;
}

.trip-form label {
    display: block;

    margin-bottom: 18px;

    color: #263333;

    font-weight: 600;

    font-size: 0.95rem;
}

.optional-text {
    color: var(--text-light);

    font-size: 0.85rem;
    font-weight: 400;
}

.identity-help {
    margin: 4px 0 24px;

    padding: 14px 16px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;

    color: var(--text-light);

    font-size: 0.88rem;
    line-height: 1.55;
}

.photo-preview {
    margin: 8px 0 20px;
}

.photo-preview:empty {
    display: none;
}

.photo-preview img {
    display: block;

    width: 100%;
    max-height: 360px;

    object-fit: cover;

    border: 1px solid var(--border);
    border-radius: 16px;
}

/* ======================================================
   CAPTURED PHOTOS
====================================================== */

.captured-memory-section {
    margin-top: 26px;

    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.captured-memory-heading {
    margin-bottom: 16px;
}

.captured-memory-heading h3 {
    margin: 0 0 5px;

    font-size: 1rem;
}

.captured-memory-heading p {
    margin: 0;

    color: var(--text-light);

    font-size: 0.85rem;
    line-height: 1.5;
}

.captured-photo-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.captured-photo-card {
    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 16px;
}

.captured-photo-card img {
    display: block;

    width: 100%;
    height: 180px;

    object-fit: cover;
}

.captured-photo-info {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    font-size: 0.78rem;
}

.captured-photo-info strong {
    color: var(--text);
}

.captured-photo-info span {
    color: var(--text-light);
}


@media (max-width: 700px) {

    .captured-photo-grid {
        grid-template-columns: 1fr;
    }

    .captured-photo-card img {
        height: 220px;
    }

}

.photo-detail-card {
    width: 100%;
    max-width: 760px;

    margin: 20px auto 40px;

    padding: 24px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);
}

.photo-detail-image {
    display: block;

    width: 100%;
    max-height: 620px;

    object-fit: contain;

    border-radius: 18px;

    background: #f6f8f8;
}

.photo-detail-info {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 20px;
}

.photo-detail-info > div {
    padding: 14px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.photo-detail-info span {
    display: block;

    margin-bottom: 4px;

    color: var(--text-light);

    font-size: 0.78rem;
}

.photo-detail-info strong {
    font-size: 0.92rem;
}

.photo-detail-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 14px;
}

.photo-favourite-button {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--text-light);

    font: inherit;
    font-size: 0.86rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.photo-favourite-button:hover {
    background: var(--secondary);

    color: var(--primary);
}

.photo-favourite-button.is-favourite {
    background: #fff8f8;

    border-color: #efdada;

    color: #a34b4b;
}

.photo-favourite-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.photo-delete-button {
    padding: 8px 12px;

    background: #fff7f7;

    border: 1px solid #efd6d6;
    border-radius: 12px;

    color: var(--danger);

    font: inherit;
    font-size: 0.86rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.photo-delete-button:hover {
    background: #fdecec;

    border-color: #e0bcbc;

    color: var(--danger-hover);
}

/* Photo caption */

.photo-caption-section {
    margin-top: 24px;

    padding-top: 22px;

    border-top: 1px solid var(--border);
}

.photo-caption-section h3 {
    margin: 0 0 6px;

    font-size: 1rem;
}

.photo-caption-section > p {
    margin: 0 0 14px;

    color: var(--text-light);

    font-size: 0.88rem;
    line-height: 1.5;
}

.photo-caption-section textarea {
    width: 100%;
    min-height: 120px;

    padding: 16px 18px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: #fcfefe;
    color: var(--text);

    font: inherit;
    line-height: 1.6;

    resize: vertical;
}

.photo-caption-section textarea:focus {
    outline: none;

    border-color: var(--primary);

    background: var(--white);

    box-shadow:
        0 0 0 3px rgba(47, 93, 98, 0.08);
}

.captured-photo-card {
    cursor: pointer;
}

@media (max-width: 700px) {

    .photo-detail-info {
        grid-template-columns: 1fr;
    }

}

/* ======================================================
   VOICE CAPTURE
====================================================== */

.voice-capture-form {
    max-width: 560px;
}

.voice-recorder {
    margin: 26px 0 20px;

    padding: 24px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 18px;
}

.voice-recorder-status {
    margin-bottom: 20px;

    color: var(--text-light);

    font-size: 0.9rem;
    text-align: center;
}

.voice-recorder-controls {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}

.voice-recorder-controls .primary-button,
.voice-recorder-controls .secondary-button {
    width: auto;
}

.voice-recorder-controls button:disabled {
    background: #e8eeee;

    border-color: #d8e1e0;

    color: #9aa5a4;

    opacity: 1;

    cursor: default;

    transform: none;
}

.voice-recorder-controls button:disabled:hover {
    background: #e8eeee;

    border-color: #d8e1e0;

    color: #9aa5a4;

    transform: none;
}

.voice-preview {
    margin-top: 20px;
}

.voice-preview:empty {
    display: none;
}

.voice-preview audio {
    display: block;

    width: 100%;
}

#save-voice-note {
    display: block;

    width: 100%;

    margin-top: 18px;

    padding: 11px 18px;

    border-radius: 12px;

    font-size: 0.95rem;

    box-shadow: none;
}

#save-voice-note:disabled {
    background: #e8eeee;

    border-color: #d8e1e0;

    color: #9aa5a4;

    opacity: 1;

    cursor: default;
}

.voice-capture-form .identity-help {
    margin: 16px 0 0;

    padding: 10px 4px;

    background: transparent;

    border: 0;

    border-radius: 0;

    text-align: center;

    font-size: 0.82rem;

    color: var(--text-light);
}

.voice-capture-form > .form-actions {
    margin-top: 16px;
}

.voice-capture-form > .form-actions .secondary-button {
    padding: 10px 16px;

    background: #f5f9f8;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--primary);
}

/* ======================================================
   SAVED VOICE NOTES
====================================================== */

.captured-voice-list {
    display: grid;

    gap: 18px;

    margin-top: 24px;
}

.captured-voice-card {
    padding: 20px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.04);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.captured-voice-card:hover {
    border-color: #c9dedb;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);
}

.captured-voice-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.captured-voice-title > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    background: #e8f6f3;

    border-radius: 12px;

    font-size: 1.15rem;
}

.captured-voice-title strong {
    display: block;

    color: var(--text);

    font-size: 0.98rem;
}

.captured-voice-title small {
    display: block;

    margin-top: 3px;

    color: var(--text-light);

    font-size: 0.78rem;
}

.captured-voice-card audio {
    display: block;

    width: 100%;

    margin-bottom: 18px;
}


/* Caption */

.voice-caption-section {
    margin-top: 4px;

    padding: 14px 16px;

    background: #f8fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.voice-caption-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 8px;
}

.voice-caption-heading strong {
    font-size: 0.85rem;

    color: var(--text);
}

.voice-caption-button {
    padding: 0;

    background: transparent;

    border: none;

    color: var(--primary);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

.voice-caption-button:hover {
    text-decoration: underline;
}

.voice-caption-text {
    margin: 0;

    color: var(--text);

    font-size: 0.88rem;
    line-height: 1.55;
}

.voice-caption-text.empty {
    color: var(--text-light);

    font-style: italic;
}


/* Actions */

.voice-note-actions {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.voice-favourite-button {
    padding: 8px 12px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--text-light);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.voice-favourite-button:hover {
    background: var(--secondary);

    color: var(--primary);
}

.voice-favourite-button.is-favourite {
    background: #fff9eb;

    border-color: #ead7a3;

    color: #8a6a17;
}

.voice-note-actions .photo-delete-button {
    padding: 8px 12px;

    font-size: 0.82rem;
}


/* Caption modal */

.voice-caption-modal textarea {
    width: 100%;

    min-height: 120px;

    margin-top: 18px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #fcfefe;

    color: var(--text);

    font: inherit;
    line-height: 1.55;

    resize: vertical;
}

.voice-caption-modal textarea:focus {
    outline: none;

    border-color: var(--primary);

    background: var(--white);

    box-shadow:
        0 0 0 3px rgba(47, 93, 98, 0.08);
}


/* Mobile */

@media (max-width: 700px) {

    .voice-note-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .voice-note-actions button {
        width: 100%;
    }

}

.trip-form input,
.trip-form textarea {
    width: 100%;

    margin-top: 8px;

    padding: 15px 16px;

    border: 1px solid var(--border);
    border-radius: var(--input-radius);

    transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;

    background: #fcfefe;
    color: #1f2a2a;

    font: inherit;
}

.trip-form textarea {
    min-height: 120px;

    resize: vertical;
}

.trip-form input:focus,
.trip-form textarea:focus {
    outline: none;

    border-color: var(--primary);

    background: var(--white);

    box-shadow:
        0 0 0 3px rgba(47, 93, 98, 0.08);
}

.form-actions,
.trip-form .form-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;
}


/* Refined form action hierarchy */

.form-actions .primary-button,
.trip-form .form-actions .primary-button {
    padding: 11px 18px;

    border-radius: 12px;

    font-size: 0.95rem;

    box-shadow: none;
}

.form-actions .secondary-button,
.trip-form .form-actions .secondary-button {
    padding: 10px 16px;

    background: #f5f9f8;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--primary);
}

.form-actions .secondary-button:hover,
.trip-form .form-actions .secondary-button:hover {
    background: var(--secondary);

    border-color: var(--border);

    color: var(--primary);
}

.trip-form .form-actions .danger-button {
    margin-left: auto;

    padding: 10px 14px;

    background: #fff7f7;

    border: 1px solid #efd6d6;
    border-radius: 12px;

    color: var(--danger);

    font-size: 0.9rem;
}

.trip-form .form-actions .danger-button:hover {
    background: #fff3f3;

    border-color: #f0d0d0;
}


/* ======================================================
   IMPORT ITINERARY
====================================================== */

#import-form {
    width: 100%;
    max-width: 900px;

    margin: 34px auto 0;

    padding: 32px;

    background: var(--white);

    border-radius: var(--card-radius);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.08);
}

#import-form textarea {
    width: 100%;
    min-height: 520px;

    padding: 20px;

    border: 1px solid #d9e3e1;
    border-radius: 16px;

    background: #fbfdfd;
    color: #1f2a2a;

    font: inherit;

    line-height: 1.55;

    resize: vertical;
}

#import-form textarea:focus {
    outline: none;

    border-color: #0b6e6e;

    box-shadow:
        0 0 0 3px rgba(11, 110, 110, 0.12);
}


/* Example itinerary shown inside textarea */

#import-form textarea::placeholder {
    color: #8a9695;

    line-height: 1.8;

    white-space: pre-line;

    opacity: 1;
}

#import-form .form-actions {
    justify-content: center;

    margin-top: 20px;
}


/* ======================================================
   MANAGE ITINERARY
====================================================== */

.manage-itinerary-card {
    width: 100%;
    max-width: 720px;

    margin: 32px auto 0;

    padding: 28px;

    background: var(--white);

    border: 1px solid #e3eceb;
    border-radius: var(--card-radius);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.06);
}

.manage-itinerary-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 28px;
}

.manage-itinerary-summary > div {
    padding: 20px;

    background: #f7fbfa;

    border: 1px solid #e0ecea;
    border-radius: 16px;
}

.manage-itinerary-summary strong {
    display: block;

    margin-bottom: 6px;

    color: #0b7774;

    font-size: 2rem;
}

.manage-itinerary-summary span {
    color: #555555;

    font-weight: 600;
}

.manage-itinerary-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.manage-itinerary-note {
    margin: 22px 0 0;

    padding-top: 18px;

    border-top: 1px solid #edf1f1;

    color: var(--text-light);

    line-height: 1.5;
}


/* ======================================================
   MODAL OVERLAY
====================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(0, 0, 0, 0.45);
}


/* New confirmation modal */

.confirm-modal {
    width: min(420px, 100%);

    padding: 32px;

    background: var(--white);

    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.18);
}

.confirm-modal-icon {
    margin-bottom: 12px;

    font-size: 2rem;
}

.confirm-modal h3 {
    margin: 0 0 12px;

    font-size: 1.6rem;
}

.confirm-modal p {
    margin: 0;

    color: var(--text-light);

    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    margin-top: 26px;
}


/* ======================================================
   LEGACY / GENERAL MODAL CARD
   Retained for existing Planner dialogs
====================================================== */

.modal-card {
    width: 420px;
    max-width: 90%;

    padding: 30px;

    background: var(--white);

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.18);
}

.modal-card h3 {
    margin-bottom: 12px;

    font-size: 1.6rem;
}

.modal-card p {
    margin-bottom: 25px;

    color: var(--text-light);

    line-height: 1.6;
}

.modal-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;
}

.modal-actions button {
    padding: 12px 22px;

    border: none;
    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}

#cancel-delete {
    background: var(--secondary);
    color: #0b6e6e;
}

#confirm-delete {
    background: #ffe6e6;
    color: #b00020;
}

.modal-actions button:hover {
    transform: translateY(-2px);
}

.modal-card.error {
    border-top: 5px solid #b00020;
}

#close-message {
    background: var(--primary);
    color: var(--white);
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 700px) {

    main {
        align-items: flex-start;
    }

    .dashboard {
        width: 95%;

        padding: 22px 0;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .page-heading {
        flex-direction: column;

        align-items: stretch;
    }

    .itinerary-actions {
        justify-content: flex-start;
    }

    .trip-hub {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .trip-hub-card {
        min-height: 115px;

        padding: 18px;
    }

    .trip-hub-card > span {
        width: 50px;
        height: 50px;

        font-size: 1.5rem;
    }

    .trips-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .trip-card-body {
        flex-direction: column;

        align-items: stretch;
    }

    .trip-actions {
        flex-wrap: wrap;
    }

    .trip-detail-hero {
        height: 280px;
    }

    .trip-detail-overlay {
        padding: 70px 24px 28px;
    }

    .trip-detail-overlay h2 {
        font-size: 2.2rem;
    }

    .itinerary-day {
        padding: 22px;
    }

    .itinerary-day-heading {
        align-items: flex-start;
    }

    .itinerary-day-heading h3 {
        font-size: 1.5rem;
    }

    .trip-form {
        margin-top: 24px;

        padding: 22px;
    }

    .trip-form .form-actions,
    .form-actions {
        flex-direction: column;
    }

    .trip-form .form-actions button,
    .form-actions button {
        width: 100%;
    }

    #import-form {
        margin-top: 24px;

        padding: 20px;
    }

    #import-form textarea {
        min-height: 420px;
    }

    .manage-itinerary-summary {
        grid-template-columns: 1fr;
    }

    .manage-itinerary-actions {
        flex-direction: column;
    }

    .manage-itinerary-actions button {
        width: 100%;
    }

    .confirm-modal-actions {
        flex-direction: column;
    }

    .confirm-modal-actions button {
        width: 100%;
    }
}


/* ======================================================
   SMALL MOBILE
====================================================== */

@media (max-width: 480px) {

    .trips-summary {
        grid-template-columns: 1fr;
    }

    .itinerary-day-heading {
        flex-direction: column;

        gap: 14px;
    }

    .add-day-activity {
        width: 100%;
    }

    .moment-card {
        padding: 18px;
    }

    .trip-detail-overlay h2 {
        font-size: 1.9rem;
    }
}

/* ======================================================
   VIDEO CAPTURE + SAVED VIDEOS
====================================================== */

/* Add Video form */

.video-capture-form {
    max-width: 600px;
}

.video-capture-form input[type="file"] {
    padding: 12px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;
}


/* Video preview before saving */

.video-preview {
    margin: 20px 0;
}

.video-preview:empty {
    display: none;
}

.video-preview video {
    display: block;

    width: 100%;
    max-height: 420px;

    object-fit: contain;

    background: #111111;

    border-radius: 18px;
}


/* Save Video button */

#save-video {
    width: 100%;

    margin-top: 18px;

    padding: 11px 18px;

    border-radius: 12px;

    font-size: 0.95rem;

    box-shadow: none;
}

#save-video:disabled {
    background: #e8eeee;

    border-color: #d8e1e0;

    color: #9aa5a4;

    opacity: 1;

    cursor: default;

    transform: none;
}


/* Identity line */

.video-capture-form .identity-help {
    margin: 16px 0 0;

    padding: 10px 4px;

    background: transparent;

    border: 0;

    border-radius: 0;

    text-align: center;

    font-size: 0.82rem;

    color: var(--text-light);
}


/* Saved Videos */

.captured-video-list {
    display: grid;

    gap: 22px;

    margin-top: 28px;
}

.captured-video-card {
    padding: 20px;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.04);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.captured-video-card:hover {
    border-color: #c9dedb;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);
}


/* Video heading */

.captured-video-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.captured-video-title > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    background: #e8f6f3;

    border-radius: 12px;

    font-size: 1.15rem;
}

.captured-video-title strong {
    display: block;

    color: var(--text);

    font-size: 0.98rem;
}

.captured-video-title small {
    display: block;

    margin-top: 3px;

    color: var(--text-light);

    font-size: 0.78rem;
}


/* Saved video player */

.captured-video-card video {
    display: block;

    width: 100%;
    max-height: 440px;

    margin-bottom: 18px;

    object-fit: contain;

    background: #111111;

    border-radius: 16px;
}


/* Video caption */

.video-caption-section {
    margin-top: 4px;

    padding: 14px 16px;

    background: #f8fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.video-caption-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 8px;
}

.video-caption-heading strong {
    color: var(--text);

    font-size: 0.85rem;
}

.video-caption-button {
    padding: 0;

    background: transparent;

    border: none;

    color: var(--primary);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

.video-caption-button:hover {
    text-decoration: underline;
}

.video-caption-text {
    margin: 0;

    color: var(--text);

    font-size: 0.88rem;
    line-height: 1.55;
}

.video-caption-text.empty {
    color: var(--text-light);

    font-style: italic;
}


/* Video actions */

.video-actions {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.video-favourite-button {
    padding: 8px 12px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--text-light);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.video-favourite-button:hover {
    background: var(--secondary);

    color: var(--primary);
}

.video-favourite-button.is-favourite {
    background: #fff9eb;

    border-color: #ead7a3;

    color: #8a6a17;
}


/* Video caption modal */

.video-caption-modal textarea {
    width: 100%;

    min-height: 130px;

    margin-top: 18px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #fcfefe;

    color: var(--text);

    font: inherit;
    line-height: 1.55;

    resize: vertical;
}

.video-caption-modal textarea:focus {
    outline: none;

    border-color: var(--primary);

    background: var(--white);

    box-shadow:
        0 0 0 3px rgba(47, 93, 98, 0.08);
}


/* Video page heading */

.captured-video-list + * {
    margin-top: 20px;
}


/* Mobile */

@media (max-width: 700px) {

    .captured-video-card {
        padding: 16px;
    }

    .captured-video-card video {
        max-height: 360px;

        border-radius: 14px;
    }

    .video-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .video-actions button {
        width: 100%;
    }

    .video-caption-heading {
        align-items: flex-start;
    }

}

/* ======================================================
   MOMENT MEMORY OVERVIEW
   Compact capture previews
====================================================== */

.moment-memory-overview {
    margin-top: 28px;

    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.moment-memory-overview-heading {
    margin-bottom: 22px;
}

.moment-memory-overview-heading h3 {
    margin: 0 0 5px;

    font-size: 1.05rem;
}

.moment-memory-overview-heading p {
    margin: 0;

    color: var(--text-light);

    font-size: 0.85rem;
    line-height: 1.5;
}


/* Individual groups */

.memory-preview-group {
    margin-top: 20px;
}

.memory-preview-group + .memory-preview-group {
    padding-top: 20px;

    border-top: 1px solid #edf2f1;
}

.memory-preview-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 12px;
}

.memory-preview-heading strong {
    color: var(--text);

    font-size: 0.9rem;
}

.memory-view-all {
    padding: 0;

    background: transparent;

    border: none;

    color: var(--primary);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;

    cursor: pointer;
}

.memory-view-all:hover {
    text-decoration: underline;
}


/* ======================================================
   PHOTO PREVIEWS
====================================================== */

.memory-photo-preview-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.memory-photo-preview {
    display: block;

    padding: 0;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background: #f3f7f6;

    border: 1px solid var(--border);
    border-radius: 13px;

    cursor: pointer;
}

.memory-photo-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.2s ease;
}

.memory-photo-preview:hover img {
    transform: scale(1.03);
}


/* ======================================================
   VIDEO PREVIEWS
====================================================== */

.memory-video-preview-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.memory-video-preview {
    display: block;

    width: 100%;

    padding: 0;

    background: transparent;

    border: none;

    text-align: left;

    cursor: pointer;
}

.memory-video-frame {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #111111;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.memory-video-frame video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.memory-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.9);

    color: var(--primary);

    font-size: 0.9rem;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.15);
}

.memory-video-preview small {
    display: block;

    margin-top: 7px;

    color: var(--text-light);

    font-size: 0.75rem;
}


/* ======================================================
   VOICE NOTE PREVIEWS
====================================================== */

.memory-voice-preview-list {
    display: grid;

    gap: 8px;
}

.memory-voice-preview {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 11px 12px;

    background: #f8fbfa;

    border: 1px solid var(--border);
    border-radius: 13px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.memory-voice-preview:hover {
    background: var(--secondary);

    border-color: #c9dedb;
}

.memory-voice-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    background: #e8f6f3;

    border-radius: 10px;
}

.memory-voice-preview > div {
    flex: 1;
}

.memory-voice-preview strong {
    display: block;

    color: var(--text);

    font-size: 0.83rem;
}

.memory-voice-preview small {
    display: block;

    margin-top: 2px;

    color: var(--text-light);

    font-size: 0.72rem;
}

.memory-preview-arrow {
    color: var(--primary);

    font-size: 1.3rem;
}


/* ======================================================
   STORY PREVIEW
====================================================== */

.memory-story-preview {
    display: block;

    width: 100%;

    padding: 14px 16px;

    background: #f8fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.memory-story-preview:hover {
    background: var(--secondary);

    border-color: #c9dedb;
}

.memory-story-preview p {
    margin: 0;

    color: #4f5b5b;

    font-size: 0.84rem;
    line-height: 1.55;
}

.memory-story-preview span {
    display: block;

    margin-top: 9px;

    color: var(--primary);

    font-size: 0.75rem;
    font-weight: 700;
}


/* ======================================================
   MOMENT MEMORY OVERVIEW MOBILE
====================================================== */

@media (max-width: 700px) {

    .memory-photo-preview-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .memory-video-preview-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .memory-photo-preview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* ======================================================
   SAVED PHOTO GALLERY
====================================================== */

.saved-photo-gallery {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 26px;
}

.saved-photo-gallery-card {
    display: block;

    padding: 0;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 16px;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.saved-photo-gallery-card:hover {
    transform: translateY(-2px);

    border-color: #c9dedb;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.saved-photo-gallery-card img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
}

.saved-photo-gallery-info {
    padding: 10px 12px;
}

.saved-photo-gallery-info strong {
    display: block;

    color: var(--text);

    font-size: 0.82rem;
}

.saved-photo-gallery-info span {
    display: block;

    margin-top: 3px;

    color: var(--text-light);

    font-size: 0.72rem;
}


@media (max-width: 700px) {

    .saved-photo-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .saved-photo-gallery {
        grid-template-columns: 1fr;
    }

}
/* ======================================================
   SAVED STORIES
====================================================== */

.saved-story-list {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.saved-story-card {
    padding: 20px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.04);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.saved-story-card:hover {
    border-color: #c9dedb;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);
}

.saved-story-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 14px;

    margin-bottom: 16px;
}

.saved-story-identity {
    display: flex;

    align-items: center;

    gap: 12px;
}

.saved-story-identity > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    background: #e8f6f3;

    border-radius: 12px;

    font-size: 1.15rem;
}

.saved-story-identity strong {
    display: block;

    color: var(--text);

    font-size: 0.98rem;
}

.saved-story-identity small {
    display: block;

    margin-top: 3px;

    color: var(--text-light);

    font-size: 0.78rem;
}

.story-edit-button {
    padding: 7px 10px;

    background: transparent;

    border: none;

    color: var(--primary);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;
}

.story-edit-button:hover {
    text-decoration: underline;
}

.saved-story-text {
    margin: 0;

    padding: 16px;

    background: #f8fbfa;

    border: 1px solid var(--border);
    border-radius: 14px;

    color: #4f5b5b;

    font-size: 0.9rem;
    line-height: 1.65;

    white-space: pre-wrap;

    text-align: left !important;

    display: block;
    width: 100%;
    box-sizing: border-box;
}

.saved-story-actions {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.story-favourite-button {
    padding: 8px 12px;

    background: #f7fbfa;

    border: 1px solid var(--border);
    border-radius: 12px;

    color: var(--text-light);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.story-favourite-button:hover {
    background: var(--secondary);

    color: var(--primary);
}

.story-favourite-button.is-favourite {
    background: #fff9eb;

    border-color: #ead7a3;

    color: #8a6a17;
}

.memory-story-preview-list {
    display: grid;

    gap: 9px;
}

.memory-story-preview-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 8px;
}

.memory-story-preview-heading strong {
    color: var(--text);

    font-size: 0.82rem;
}

.memory-story-preview-heading small {
    color: var(--text-light);

    font-size: 0.72rem;
}

@media (max-width: 700px) {

    .saved-story-heading {
        align-items: flex-start;
    }

    .saved-story-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .saved-story-actions button {
        width: 100%;
    }

}

/* ======================================================
   STORY CARD POLISH
   ====================================================== */

.saved-story-card .saved-story-text {
    min-height: 0;
    display: block;
}

.saved-story-card {
    text-align: left;
}


/* ======================================================
   STAGE6B3 STORY TEXT POLISH SAFEGUARD
====================================================== */

.saved-story-card,
.saved-story-card p,
.saved-story-text {
    text-align: left !important;
}

.saved-story-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}


/* ======================================================
   STAGE 6B5 STORY JOURNAL POLISH
====================================================== */

.saved-story-text {
    text-align: left;
    white-space: pre-line;
    line-height: 1.75;
    margin: 18px 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.saved-story-actions button,
.story-edit-button,
.primary-button {
    font-family: inherit;
}

.story-edit-button {
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
}

.story-favourite-button {
    border: 1px solid var(--border);
    background: white;
    border-radius: var(--button-radius);
    padding: 8px 14px;
    cursor: pointer;
}

.delete-story {
    border-radius: var(--button-radius);
}


/* Stage 6B6 story presentation */
.story-text,
.memory-story-text {
    text-align: left !important;
    white-space: pre-wrap;
    line-height: 1.7;
    padding: 18px;
}

/* ======================================================
   STAGE 6B7 — IDENTITY, TRIP COVER & CAPTION POLISH
====================================================== */
.capture-identity-settings {
    max-width: 720px;
    margin: 36px auto;
}

.inline-success-message {
    display: none;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef8f5;
    border: 1px solid #cfe7df;
    color: #245f59;
    font-weight: 700;
}

.inline-success-message.is-visible {
    display: block;
}

.inline-success-message.is-warning {
    background: #fff8ef;
    border-color: #eed8b6;
    color: #8a5a1e;
}

.optional-label {
    font-weight: 400;
    color: #6c7777;
}

.field-help {
    display: block;
    margin-top: 8px;
    color: #697575;
    line-height: 1.45;
}

.trip-cover-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #f3f7f6;
    min-height: 150px;
}

.trip-cover-preview img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.video-capture-form label,
.voice-capture-form label {
    display: block;
    margin-top: 18px;
    font-weight: 700;
}

.video-capture-form textarea,
.voice-capture-form textarea {
    width: 100%;
    min-height: 100px;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--input-radius);
    background: #fcfefe;
    color: #1f2a2a;
    font: inherit;
    resize: vertical;
}

@media (max-width: 700px) {
    .capture-identity-settings {
        margin: 18px auto;
    }

    .trip-cover-preview img {
        height: 150px;
    }
}


/* Stage 6B8: caption state and interaction polish */
.photo-caption-actions button[disabled] {
    background: #d9e1e1;
    border-color: #d9e1e1;
    color: #6f7b7b;
    cursor: default;
    opacity: 1;
    transform: none;
}

.photo-caption-actions button[disabled]:hover {
    background: #d9e1e1;
    transform: none;
}

.photo-caption-section textarea[readonly] {
    background: #f7f9f9;
    cursor: default;
}

/* =====================================================
   Stage 6B9 — Day capture + safe itinerary editing
===================================================== */
.day-action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.capture-day-button {
    white-space: nowrap;
}

.day-memory-summary,
.preserved-memory-button {
    width: 100%;
    border: 1px solid #d7e6e3;
    background: #f7fbfa;
    border-radius: 14px;
    padding: 12px 14px;
    margin-top: 12px;
    text-align: left;
    cursor: pointer;
    color: #245f63;
    font-weight: 600;
}

.day-memory-summary:hover,
.preserved-memory-button:hover {
    background: #eef7f5;
}

.preserved-memory-group {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5ecea;
}

.preserved-memory-group > strong {
    display: block;
    margin-bottom: 8px;
    color: #596866;
}

@media (max-width: 700px) {
    .itinerary-day-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .day-action-buttons {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =====================================================
   Stage 6B10 — Memory classification + personalisation
===================================================== */
.day-memory-summary {
    border-color: #b9ddd4;
    background: #eef9f6;
    color: #17685f;
}

.day-memory-summary:hover {
    background: #e3f4ef;
}

.preserved-memory-group {
    background: #fbf8f1;
    border: 1px solid #eadfc9;
    border-radius: 16px;
    padding: 14px;
}

.preserved-memory-group > strong {
    color: #6b5a3d;
}

.preserved-memory-button {
    border-color: #e3d5bb;
    background: #fffdf8;
    color: #6b5a3d;
}

.preserved-memory-button:hover {
    background: #f8f2e7;
}

.photo-detail-actions .photo-delete-button {
    min-width: 110px;
}


/* =====================================================
   Stage 6B11 — Final working-model polish
===================================================== */
.capture-day-button {
    padding: 9px 14px !important;
    min-height: 38px;
    font-size: 0.94rem;
    font-weight: 600;
    border-radius: 12px;
    opacity: 0.92;
}

.capture-day-button:hover {
    opacity: 1;
}


/* =====================================================
   Stage 6B12 — Safe trip cover replacement
===================================================== */
.trip-cover-label-row {
    margin-bottom: 8px;
}

.trip-cover-label {
    display: block;
    font-weight: 700;
}

.trip-cover-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.trip-cover-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    margin-top: 4px;
    border: 1px solid #b8d6d2;
    border-radius: 12px;
    background: #eef8f6;
    color: #1f6663;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.trip-cover-select-button:hover {
    background: #e2f2ef;
    border-color: #9ec7c2;
}

.trip-cover-help {
    display: block;
    margin-top: 9px;
    line-height: 1.45;
}

.trip-cover-pending-message {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #efd7a8;
    border-radius: 10px;
    background: #fff8e9;
    color: #725321;
    font-size: 0.92rem;
    line-height: 1.4;
}


/* =====================================================
   Stage 6B13 — final cover + photo delete polish
===================================================== */
.trip-cover-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.trip-cover-select-button,
.trip-cover-delete-button {
    width: auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trip-cover-delete-button {
    border: 1px solid #efcaca;
    background: #fff5f5;
    color: #b42323;
    cursor: pointer;
}

.trip-cover-delete-button:hover {
    background: #ffeaea;
}

.trip-cover-pending-message {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px;
    margin: 12px 0 0;
    text-align: left;
}

.saved-photo-gallery-card {
    overflow: hidden;
}

.saved-photo-gallery-open {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.saved-photo-gallery-open img {
    display: block;
    width: 100%;
}

.saved-photo-gallery-delete {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 8px 10px;
    border: 1px solid #efcaca;
    border-radius: 10px;
    background: #fff5f5;
    color: #b42323;
    font-weight: 700;
    cursor: pointer;
}

.saved-photo-gallery-delete:hover {
    background: #ffeaea;
}


/* =====================================================
   Stage 6B14 — final cover alignment and safe deletion
===================================================== */
.trip-cover-control-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.trip-form .trip-cover-select-button,
.trip-form .trip-cover-delete-button {
    box-sizing: border-box;
    width: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    vertical-align: middle;
    font: inherit;
    font-weight: 700;
}

.trip-cover-pending-message {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 12px auto 0 !important;
    padding: 12px 16px !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.45;
}

.trip-cover-preview {
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 520px) {
    .trip-cover-control-row {
        flex-direction: column;
    }

    .trip-form .trip-cover-select-button,
    .trip-form .trip-cover-delete-button {
        width: 100% !important;
    }
}


/* =====================================================
   Stage 6B15 — cover save reliability + notice placement
===================================================== */
.trip-cover-pending-message {
    width: calc(100% - 28px) !important;
    max-width: 560px;
    margin: 10px auto 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    text-align: center !important;
    line-height: 1.4;
    box-sizing: border-box;
}

.trip-cover-preview {
    margin-top: 12px;
}


/* =====================================================
   Stage 6B16 — pending cover state polish
===================================================== */

/* The hidden attribute must always win. Earlier display rules made
   the amber notice appear even when no new image had been selected. */
.trip-cover-pending-message[hidden],
.trip-cover-delete-pending-message[hidden],
.trip-cover-delete-button[hidden] {
    display: none !important;
}

.trip-cover-delete-pending-message {
    width: calc(100% - 28px);
    max-width: 560px;
    margin: 10px auto 0;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 1px solid #efcaca;
    border-radius: 10px;
    background: #fff5f5;
    color: #8f2f2f;
    text-align: center;
    line-height: 1.4;
    font-size: 0.92rem;
}


/* =====================================================
   Stage 6B17 — final checkpoint: trip-cover action polish
===================================================== */
.trip-cover-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.trip-cover-select-button,
.trip-cover-delete-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.15;
    white-space: nowrap;
    box-sizing: border-box;
}

@media (max-width: 430px) {
    .trip-cover-actions {
        gap: 6px;
    }

    .trip-cover-select-button,
    .trip-cover-delete-button {
        padding: 8px 9px !important;
        font-size: 0.84rem !important;
    }
}

/* =====================================================
   Stage 6B19 — Time Capsule + Memory Prompts
===================================================== */

/* Preserved captures are important, but intentionally quieter than
   the normal Day Memory state. */
.preserved-memory-group {
    background: #fffaf1;
    border-color: #eee1c9;
    padding: 12px 13px;
}

.preserved-memory-heading {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #6e624f;
    margin-bottom: 6px;
}

.preserved-memory-heading > span {
    line-height: 1.3;
}

.preserved-memory-heading strong {
    display: block;
    color: #665944;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.25;
}

.preserved-memory-heading small {
    display: block;
    margin-top: 2px;
    color: #8a7c67;
    font-size: 0.78rem;
    font-weight: 400;
}

.preserved-memory-button {
    margin-top: 8px;
    padding: 10px 12px;
    border-color: #eadfc9;
    background: rgba(255, 255, 255, 0.58);
    color: #6d604c;
    font-size: 0.9rem;
    font-weight: 500;
}

.memory-prompt-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin: 6px 0 16px;
    padding: 14px 16px;
    border: 1px solid #cfe3de;
    border-radius: 16px;
    background: #f5faf8;
}

.memory-prompt-copy {
    min-width: 0;
}

.memory-prompt-kicker {
    display: block;
    margin-bottom: 4px;
    color: #4f7e77;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.memory-prompt-card h4 {
    margin: 0 0 5px;
    color: #244e4c;
    font-size: 1rem;
}

.memory-prompt-card p {
    margin: 0;
    max-width: 690px;
    color: #607370;
    font-size: 0.9rem;
    line-height: 1.45;
}

.memory-prompt-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.memory-prompt-actions button {
    border-radius: 11px;
    padding: 8px 11px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.memory-prompt-capture {
    border: 1px solid #2c696a;
    background: #2c696a;
    color: #fff;
}

.memory-prompt-next {
    border: 1px solid #d4e2df;
    background: #fff;
    color: #52706d;
}

.time-capsule-hub-card {
    border-color: #d9ded7;
}

.time-capsule-hero {
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid #d9e4df;
    border-radius: 22px;
    background: #f8fbf9;
}

.time-capsule-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #537a71;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.time-capsule-hero h2 {
    margin: 0 0 8px;
}

.time-capsule-hero p {
    max-width: 760px;
    color: #5f706d;
    line-height: 1.55;
}

.time-capsule-status {
    display: inline-block;
    margin-top: 8px;
    color: #5e746f;
    font-size: 0.84rem;
}

.time-capsule-form {
    display: grid;
    gap: 14px;
    padding-bottom: 24px;
}

.time-capsule-form label {
    display: grid;
    gap: 7px;
    color: #314e4b;
    font-weight: 600;
}

.time-capsule-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #d7e3e0;
    border-radius: 14px;
    padding: 12px 13px;
    background: #fff;
    color: #243d3a;
    font: inherit;
    font-weight: 400;
    line-height: 1.5;
}

.time-capsule-form textarea:focus {
    outline: 2px solid rgba(44, 105, 106, 0.16);
    border-color: #79aaa2;
}

@media (max-width: 700px) {
    .memory-prompt-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .memory-prompt-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* Stage 6B20 — Time Capsule journey prompt trail */
.time-capsule-trail {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e1e8e5;
    border-radius: 18px;
    background: #fff;
}

.time-capsule-trail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.time-capsule-trail-heading h3 {
    margin: 0;
    color: #314e4b;
}

.time-capsule-trail-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f0f6f3;
    color: #58736d;
    font-size: 0.78rem;
    font-weight: 600;
}

.time-capsule-trail-intro,
.time-capsule-trail-empty {
    margin: 9px 0 0;
    color: #697a77;
    font-size: 0.9rem;
    line-height: 1.5;
}

.time-capsule-trail-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.time-capsule-trail-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #f8faf9;
    color: #405956;
    font-size: 0.9rem;
}

.time-capsule-trail-day {
    flex: 0 0 auto;
    color: #6d827e;
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .time-capsule-trail-heading {
        align-items: flex-start;
    }

    .time-capsule-trail-list li {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* Stage 6B21 — Journey Prompt Trail links back to its existing Day Memory */
.time-capsule-trail-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.time-capsule-trail-title {
    min-width: 0;
}

.time-capsule-open-memory {
    flex: 0 0 auto;
    border: 1px solid #d8e5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #476965;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.time-capsule-open-memory:hover {
    background: #f4f8f6;
}

@media (max-width: 700px) {
    .time-capsule-trail-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .time-capsule-open-memory {
        align-self: flex-start;
    }
}


/* Stage 6B22 — Time Capsule prompt highlights */
.time-capsule-trail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.time-capsule-highlight-prompt {
    border: 1px solid #eadfbd;
    border-radius: 999px;
    background: #fffdf7;
    color: #7d6a36;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.time-capsule-highlight-prompt:hover {
    background: #fbf6e8;
}

.time-capsule-trail-list li.is-highlighted {
    border: 1px solid #eee2bd;
    background: #fffdf7;
}

@media (max-width: 700px) {
    .time-capsule-trail-actions {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .time-capsule-highlight-prompt,
    .time-capsule-open-memory {
        width: auto;
    }
}


/* Stage 6B22 R1 — reflection UX refinements */
.saved-photo-gallery-caption {
    margin: 7px 0 0;
    color: #536b67;
    font-size: 0.86rem;
    line-height: 1.4;
    font-weight: 400;
    white-space: normal;
}

.saved-photo-gallery-caption.is-empty {
    color: #899793;
    font-style: italic;
}


/* Stage 6B23 — remembered highlights and stronger selected star */
.remembered-star {
    color: #f2b705;
    font-size: 1.05em;
    line-height: 1;
}

.time-capsule-remembered-summary {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #eee2bd;
    border-radius: 18px;
    background: #fffdf7;
}

.time-capsule-remembered-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.time-capsule-remembered-heading h3 {
    margin: 0;
    color: #5f552f;
}

.time-capsule-remembered-count {
    min-width: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff5cf;
    color: #7a651c;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.time-capsule-remembered-summary > p {
    margin: 9px 0 0;
    color: #776f54;
    font-size: 0.9rem;
    line-height: 1.5;
}

.time-capsule-remembered-summary ul {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.time-capsule-remembered-summary li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #ffffff;
    color: #554d34;
}

.time-capsule-highlight-star {
    flex: 0 0 auto;
    color: #f2b705;
    font-size: 1.15rem;
}

.time-capsule-highlight-day {
    display: block;
    margin-bottom: 2px;
    color: #8a7c4d;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 700px) {
    .time-capsule-remembered-summary {
        padding: 16px;
    }
}


/* Stage 6B24 — Time Capsule reflection safety & progress */
.time-capsule-progress {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #dce8e4;
    border-radius: 18px;
    background: #ffffff;
}

.time-capsule-progress-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.time-capsule-progress-heading h3 {
    margin: 0;
    color: #314e4b;
}

.time-capsule-progress-percent {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef6f3;
    color: #52736d;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.time-capsule-progress-track {
    height: 7px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f0;
}

.time-capsule-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #78aa9f;
    transition: width 180ms ease;
}

.time-capsule-progress > p {
    margin: 10px 0 0;
    color: #687b77;
    font-size: 0.9rem;
    line-height: 1.5;
}

.time-capsule-progress-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    color: #60736f;
    font-size: 0.82rem;
}

.time-capsule-progress-stats strong {
    color: #365955;
}

@media (max-width: 700px) {
    .time-capsule-progress {
        padding: 16px;
    }

    .time-capsule-progress-stats {
        flex-direction: column;
        gap: 5px;
    }
}


/* Stage 6B25 R1 — Time Capsule Review */
.time-capsule-review-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 18px 56px;
}

.time-capsule-review-hero,
.time-capsule-review-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #dce8e4;
    border-radius: 18px;
    background: #ffffff;
}

.time-capsule-review-hero {
    background: #f7fbf9;
}

.time-capsule-review-hero h2,
.time-capsule-review-section h3 {
    margin: 0;
    color: #314e4b;
}

.time-capsule-review-hero > p {
    margin: 10px 0 0;
    color: #687b77;
    line-height: 1.6;
}

.time-capsule-review-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 16px;
    color: #60736f;
    font-size: 0.86rem;
}

.time-capsule-review-stats strong {
    color: #365955;
}

.time-capsule-review-section-heading {
    margin-bottom: 14px;
}

.time-capsule-review-highlights {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.time-capsule-review-highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eee2bd;
    border-radius: 12px;
    background: #fffdf7;
}

.time-capsule-review-grid {
    display: grid;
    gap: 12px;
}

.time-capsule-review-card {
    padding: 14px 16px;
    border: 1px solid #e3ebe8;
    border-radius: 14px;
    background: #fbfcfc;
}

.time-capsule-review-card.is-empty {
    background: #fafafa;
}

.time-capsule-review-label {
    display: block;
    color: #4e6b66;
    font-size: 0.82rem;
    font-weight: 700;
}

.time-capsule-review-card p {
    margin: 7px 0 0;
    color: #334946;
    line-height: 1.55;
    white-space: pre-wrap;
}

.time-capsule-review-empty {
    color: #899793 !important;
    font-style: italic;
}

.time-capsule-review-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 700px) {
    .time-capsule-review-page {
        padding: 18px 12px 40px;
    }

    .time-capsule-review-hero,
    .time-capsule-review-section {
        padding: 16px;
    }

    .time-capsule-review-stats {
        flex-direction: column;
        gap: 5px;
    }

    .time-capsule-review-actions {
        justify-content: stretch;
    }

    .time-capsule-review-actions .primary-button {
        width: 100%;
    }
}


/* Stage 6B26 R1 — Time Capsule return position + exact action heights */
#time-capsule-form .form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#time-capsule-form .form-actions > button[type="submit"],
#time-capsule-form .form-actions > #review-time-capsule {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 600;
}

#edit-time-capsule-from-review {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 600;
}

@media (max-width: 700px) {
    #time-capsule-form .form-actions > button[type="submit"],
    #time-capsule-form .form-actions > #review-time-capsule,
    #edit-time-capsule-from-review {
        height: 42px;
        min-height: 42px;
    }
}


/* Stage 6B27 — Time Capsule completion & finalisation */
.time-capsule-completion {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #e2e9e6;
    border-radius: 18px;
    background: #ffffff;
}

.time-capsule-completion.is-ready {
    border-color: #d8e7df;
    background: #f8fbf9;
}

.time-capsule-completion.is-finalised {
    border-color: #cfe3d9;
    background: #f1f8f4;
}

.time-capsule-completion-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef4f1;
    color: #55736c;
    font-weight: 800;
}

.time-capsule-completion.is-finalised .time-capsule-completion-icon {
    background: #dcefe4;
    color: #2f6956;
}

.time-capsule-completion h3,
.time-capsule-review-finalise h3 {
    margin: 0;
    color: #314e4b;
}

.time-capsule-completion p,
.time-capsule-review-finalise p {
    margin: 7px 0 0;
    color: #687b77;
    font-size: 0.9rem;
    line-height: 1.5;
}

.time-capsule-review-finalise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid #e2e9e6;
    border-radius: 18px;
    background: #ffffff;
}

.time-capsule-review-finalise.is-ready {
    border-color: #d8e7df;
    background: #f8fbf9;
}

.time-capsule-review-finalise.is-finalised {
    border-color: #cfe3d9;
    background: #f1f8f4;
}

.time-capsule-review-finalise button {
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .time-capsule-completion {
        padding: 16px;
    }

    .time-capsule-review-finalise {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .time-capsule-review-finalise button {
        width: 100%;
    }
}


/* Stage 6B27 R1 — Time Capsule finalisation polish */
#finalise-time-capsule {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.time-capsule-finalise-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.time-capsule-finalise-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 34, 32, 0.42);
    backdrop-filter: blur(2px);
}

.time-capsule-finalise-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    padding: 24px;
    border: 1px solid #d9e6e2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(30, 55, 50, 0.18);
}

.time-capsule-finalise-dialog h3 {
    margin: 0;
    color: #314e4b;
    font-size: 1.25rem;
}

.time-capsule-finalise-dialog p {
    margin: 10px 0 0;
    color: #637873;
    font-size: 0.94rem;
    line-height: 1.55;
}

.time-capsule-finalise-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.time-capsule-finalise-dialog-actions button {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 600;
}

@media (max-width: 700px) {
    #finalise-time-capsule {
        width: auto;
        max-width: 100%;
    }

    .time-capsule-finalise-modal {
        align-items: end;
        padding: 12px;
    }

    .time-capsule-finalise-dialog {
        width: 100%;
        padding: 20px 16px 16px;
        border-radius: 20px;
    }

    .time-capsule-finalise-dialog-actions {
        flex-direction: column-reverse;
    }

    .time-capsule-finalise-dialog-actions button {
        width: 100%;
    }
}


/* Stage 6B28 — Heirloom / Time Capsule curation architecture */
.time-capsule-curation-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #dfe9e5;
    color: #60736f;
    font-size: 0.86rem;
    line-height: 1.5;
}

.time-capsule-curation-note strong {
    color: #365955;
}

/* Stage 6B29 — Time Capsule sealing */
.time-capsule-finalised-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#seal-time-capsule,.time-capsule-finalised-actions button{box-sizing:border-box;height:42px;min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;line-height:1;font-weight:600}
.time-capsule-seal-modal,.time-capsule-seal-confirm-modal{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px}
.time-capsule-seal-backdrop{position:absolute;inset:0;background:rgba(20,34,32,.46);backdrop-filter:blur(2px)}
.time-capsule-seal-dialog{position:relative;z-index:1;width:min(100%,500px);padding:24px;border:1px solid #d9e6e2;border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(30,55,50,.2)}
.time-capsule-seal-dialog h3{margin:0;color:#314e4b}.time-capsule-seal-dialog p{color:#637873;line-height:1.55}
.time-capsule-lock-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}
.time-capsule-lock-options button{min-height:48px;border:1px solid #bcd4cd;border-radius:12px;background:#f5faf7;color:#365955;font-weight:700;cursor:pointer}
.time-capsule-custom-date{display:grid;gap:7px;color:#526a65;font-size:.88rem;font-weight:700}
.time-capsule-custom-date input{min-height:44px;padding:0 12px;border:1px solid #ccdcd7;border-radius:10px;font:inherit}
.time-capsule-seal-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.time-capsule-seal-dialog-actions button{min-height:42px}
.time-capsule-seal-reassurance{padding:10px 12px;border-radius:10px;background:#f5faf7}
.time-capsule-sealed-page{max-width:760px;margin:0 auto;padding:28px 18px 56px}
.time-capsule-sealed-card{margin-top:20px;padding:42px 28px;border:1px solid #d6e5df;border-radius:24px;background:#f7fbf9;text-align:center}
.time-capsule-sealed-symbol{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#e1efe8;color:#446b61;font-size:1.8rem}
.time-capsule-sealed-card h2{margin:2px 0 4px;color:#314e4b}.time-capsule-sealed-trip{margin-top:6px;color:#6b7f7a}
.time-capsule-opening-date{display:grid;gap:3px;margin:24px auto;padding:16px;max-width:360px;border-radius:16px;background:#fff;border:1px solid #dce8e4}
.time-capsule-opening-date span{color:#71847f;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.time-capsule-opening-date strong{color:#365955;font-size:1.2rem}
.time-capsule-heirloom-reminder{margin-top:20px!important;padding-top:16px;border-top:1px solid #dce8e4;color:#526e67!important}.time-capsule-sealed-on{display:block;margin-top:18px;color:#879691;font-size:.8rem}
.time-capsule-developer-unseal{margin-top:18px;padding:14px 16px;border:1px dashed #d8c9a3;border-radius:14px;background:#fffdf7}.time-capsule-developer-unseal p{margin:4px 0 10px;color:#7a735f;font-size:.82rem}
@media(max-width:700px){.time-capsule-finalised-actions{width:100%;flex-direction:column}.time-capsule-finalised-actions button{width:100%}.time-capsule-seal-modal,.time-capsule-seal-confirm-modal{align-items:end;padding:12px}.time-capsule-seal-dialog{width:100%;padding:20px 16px 16px}.time-capsule-lock-options{grid-template-columns:1fr}.time-capsule-seal-dialog-actions{flex-direction:column-reverse}.time-capsule-seal-dialog-actions button{width:100%}.time-capsule-sealed-card{padding:30px 18px}}

/* Stage 6B29R1 — seal validation and modal layering fix */
.time-capsule-seal-modal { z-index: 10020; }
.time-capsule-seal-confirm-modal { z-index: 10040; }
.time-capsule-date-error { min-height: 1.15em; color: #9a4f42; font-size: 0.8rem; font-weight: 600; }
#time-capsule-custom-open-date[aria-invalid="true"] { border-color: #b96d60; background: #fff9f7; }


/* Stage 6B30 — Time Capsule opening-day foundation */
.time-capsule-opening-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 18px 96px;
}

.time-capsule-opening-card {
    margin-top: 28px;
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid #d8e5e1;
    border-radius: 24px;
    background: #f8fbfa;
    text-align: center;
}

.time-capsule-opening-symbol {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 1px solid #e5d6a9;
    border-radius: 50%;
    background: #fffaf0;
    font-size: 1.55rem;
}

.time-capsule-opening-card h2 {
    margin: 8px 0 10px;
}

.time-capsule-opening-trip {
    margin: 0 0 20px;
    font-weight: 700;
}

.time-capsule-opening-card > p:not(.time-capsule-opening-trip) {
    max-width: 620px;
    margin: 0 auto 18px;
    line-height: 1.65;
}

.time-capsule-opening-date-note {
    display: block;
    margin: 20px 0;
    font-size: 0.86rem;
}

.time-capsule-open-now {
    min-height: 46px;
    margin-top: 4px;
}

@media (max-width: 700px) {
    .time-capsule-opening-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .time-capsule-opening-card {
        border-radius: 18px;
    }

    .time-capsule-open-now {
        width: 100%;
    }
}


/* Time Capsule complete candidate — reveal and production polish */
.time-capsule-reveal-page{max-width:900px;margin:0 auto;padding:24px 18px 100px}
.time-capsule-reveal-hero{margin-top:24px;padding:clamp(28px,6vw,58px);border:1px solid #ded9c8;border-radius:26px;background:linear-gradient(180deg,#fffdf7 0%,#f8fbf9 100%);text-align:center}
.time-capsule-reveal-symbol{width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border:1px solid #e7d49a;border-radius:50%;background:#fff7df;font-size:1.8rem}
.time-capsule-reveal-hero h2{margin:8px 0}.time-capsule-reveal-trip{margin:0 0 18px;font-weight:700}
.time-capsule-reveal-hero>p:not(.time-capsule-reveal-trip){max-width:620px;margin:0 auto;line-height:1.65}
.time-capsule-reveal-dates{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-top:20px;font-size:.82rem}
.time-capsule-reveal-section{margin-top:22px;padding:24px;border:1px solid #dce7e3;border-radius:20px;background:#fff}
.time-capsule-reveal-section h2{margin:4px 0 18px}.time-capsule-reveal-memory-list,.time-capsule-reveal-reflections{display:grid;gap:12px}
.time-capsule-reveal-memory{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1px solid #eadfb9;border-radius:14px;background:#fffdf7}
.time-capsule-reveal-memory-heading{display:flex;align-items:center;gap:12px}.time-capsule-reveal-memory h3{margin:2px 0 0}
.time-capsule-reveal-open-memory{flex:0 0 auto;min-height:40px}
.time-capsule-reveal-reflection{padding:16px;border:1px solid #e1e9e6;border-radius:14px;background:#fafcfc}
.time-capsule-reveal-reflection>span{display:block;font-size:.8rem;font-weight:700}
.time-capsule-reveal-reflection p{margin:8px 0 0;line-height:1.6;white-space:pre-wrap}
.time-capsule-reveal-heirloom{margin-top:22px;padding:18px 20px;border:1px solid #d5e5df;border-radius:16px;background:#f5faf7}
.time-capsule-reveal-heirloom p{margin:5px 0 0;line-height:1.55}
.time-capsule-developer-tools{margin-top:22px;padding:14px 16px;border:1px dashed #d8c9a3;border-radius:14px;background:#fffdf7}
.time-capsule-developer-tools p{margin:5px 0 10px;font-size:.82rem}
@media(max-width:700px){.time-capsule-reveal-page{padding-left:14px;padding-right:14px}.time-capsule-reveal-hero,.time-capsule-reveal-section{border-radius:18px;padding:18px}.time-capsule-reveal-memory{align-items:stretch;flex-direction:column}.time-capsule-reveal-open-memory{width:100%}}


/* Time Capsule Integrity — immutable sealed snapshot */
.time-capsule-readonly-card {
    position: relative;
}

.time-capsule-readonly-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #dfd4ad;
    border-radius: 14px;
    background: #fffaf0;
}

.time-capsule-readonly-banner strong {
    display: block;
}

.time-capsule-readonly-banner p {
    margin: 3px 0 0;
    font-size: 0.84rem;
}

.time-capsule-snapshot-section {
    margin-top: 22px;
}

.time-capsule-snapshot-section h3 {
    margin-bottom: 12px;
}

.saved-photo-gallery-card.is-readonly {
    cursor: default;
}

.saved-photo-gallery-open.is-readonly {
    cursor: default;
    width: 100%;
}

.time-capsule-snapshot-notes {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fafcfc;
}

.time-capsule-snapshot-story {
    padding: 14px 16px;
    border: 1px solid #e1e9e6;
    border-radius: 12px;
    background: #fafcfc;
}

.time-capsule-snapshot-story p {
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .time-capsule-readonly-banner {
        padding: 12px 14px;
    }
}


/* Legacy Time Capsule R3 — localhost-only recovery diagnostics */
.time-capsule-recovery-diagnostics {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px dashed #d6c391;
    border-radius: 14px;
    background: #fffdf6;
    color: #665d46;
    font-size: 0.8rem;
}

.time-capsule-recovery-diagnostics p {
    margin: 5px 0 8px;
}

.time-capsule-recovery-diagnostics ul {
    margin: 0;
    padding-left: 18px;
}

.time-capsule-recovery-diagnostics li + li {
    margin-top: 5px;
}


/* Time Capsule full curation — Journey Prompts + any captured memory */
.time-capsule-memory-picker {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dce7e3;
    border-radius: 18px;
    background: #fff;
}

.time-capsule-memory-picker-intro {
    margin: 8px 0 16px;
    color: #637873;
    line-height: 1.55;
}

.time-capsule-memory-picker-list {
    margin: 0;
}

.time-capsule-memory-picker-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
}

.time-capsule-memory-picker-list > li + li {
    margin-top: 8px;
}

.time-capsule-memory-picker-list > li.is-highlighted {
    border: 1px solid #ead59b;
    background: #fffaf0;
}

.time-capsule-memory-picker-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.time-capsule-memory-source {
    color: #71847f;
    font-size: 0.78rem;
}

.time-capsule-highlight-memory,
.time-capsule-open-selected-memory {
    min-height: 38px;
}

@media (max-width: 700px) {
    .time-capsule-memory-picker {
        padding: 16px;
    }

    .time-capsule-memory-picker-list > li {
        align-items: stretch;
        flex-direction: column;
    }

    .time-capsule-memory-picker-list .time-capsule-trail-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .time-capsule-highlight-memory,
    .time-capsule-open-selected-memory {
        width: 100%;
    }
}

/* Consolidated QA repair — preserved captures should be informative, not visually dominant. */
.preserved-memory-group {
    background: #fbfcfb;
    border-color: #dfe8e4;
}

.preserved-memory-heading {
    color: #687773;
}

.preserved-memory-heading strong {
    color: #52645f;
    font-size: 0.92rem;
    font-weight: 600;
}

.preserved-memory-heading small {
    color: #81908c;
    font-size: 0.76rem;
}

.preserved-memory-button {
    border-color: #dde7e3;
    background: #f8fbfa;
    color: #596d67;
    font-size: 0.88rem;
    font-weight: 500;
}

.preserved-memory-button:hover {
    background: #f1f7f5;
}

/* QA repair 2 — robust long-trip-name wrapping across cards and trip detail. */
.trip-card-details,
.page-heading > div,
.trip-detail-overlay,
.trip-detail-overlay h2,
.trip-detail-overlay p {
    min-width: 0;
}

.trip-card-details h3,
.trip-detail-overlay h2,
.back-button {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.trip-card-details {
    flex: 1 1 auto;
}

.trip-card-details h3 {
    max-width: 100%;
}

.trip-detail-overlay h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 5vw, 3rem);
}

.trip-form-page .trip-form {
    margin-top: 0;
}

/* Keep itinerary header controls stable even with narrow/long content. */
.itinerary-actions > * {
    min-width: 0;
}

#manage-itinerary-button {
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

/* QA Repair 4: all itinerary header actions use the compact imported-state size. */
.itinerary-actions > .secondary-button,
.itinerary-actions > .itinerary-status {
    width: 180px;
    height: 44px;
    min-height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .itinerary-actions > .secondary-button,
    .itinerary-actions > .itinerary-status {
        width: 100%;
    }
}

/* ============================================================
   TIME CAPSULE PRESENTATION PROTOTYPE — BRIGHT HEIRLOOM BOOK
   Presentation state is separate from the immutable snapshot.
   ============================================================ */
.time-capsule-developer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tc-book-shell{max-width:1120px;margin:0 auto;padding:26px 18px 96px;background:#fff}
.tc-book-cover-shell{max-width:960px}
.tc-book-exit{appearance:none;border:0;background:transparent;color:#315f5a;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;padding:8px 0;margin-bottom:24px}
.tc-book-page{background:#fff;border:1px solid #e8e3d8;border-radius:3px;box-shadow:0 18px 52px rgba(45,55,52,.08);padding:clamp(34px,7vw,82px);margin:0 auto 34px}
.tc-book-cover{min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tc-book-rule{width:72px;height:1px;background:#bca36b;margin-bottom:28px}
.tc-book-kicker{display:block;color:#6b776f;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tc-book-page h1{margin:12px 0 10px;color:#1f2f2c;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,6vw,4.2rem);font-weight:500;line-height:1.06}
.tc-book-cover .tc-book-trip{margin:0;color:#2f5752;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,2.6vw,1.8rem)}
.tc-book-dates{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:28px 0;color:#7d776b;font-size:.86rem}
.tc-book-intro{max-width:530px;color:#5d625d;line-height:1.75;font-family:Georgia,"Times New Roman",serif;font-size:1.08rem}
.tc-book-preview-note{margin:16px 0 2px;color:#8d7d5d;font-size:.76rem;letter-spacing:.03em}
.tc-book-primary,.tc-book-secondary{appearance:none;font:inherit;cursor:pointer;border-radius:2px;padding:12px 22px;font-weight:700;min-height:46px}
.tc-book-primary{margin-top:28px;border:1px solid #315f5a;background:#315f5a;color:#fff}
.tc-book-secondary{border:1px solid #d7d5cd;background:#fff;color:#315f5a}
.tc-book-before{max-width:900px}
.tc-book-lede{max-width:650px;color:#626a66;font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.7}
.tc-now-form{display:grid;gap:28px;margin-top:40px}
.tc-now-form label{display:grid;gap:10px}
.tc-now-form label>span{font-family:Georgia,"Times New Roman",serif;font-size:1.2rem;color:#273d39}
.tc-now-form textarea,.tc-book-closing textarea{width:100%;box-sizing:border-box;resize:vertical;border:0;border-bottom:1px solid #cfc9bc;border-radius:0;background:#fff;padding:12px 4px;color:#2a3532;font:inherit;line-height:1.6;outline-offset:4px}
.tc-book-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.tc-book-actions .tc-book-primary{margin-top:0}
.tc-book-reading-shell{max-width:1120px}
.tc-book-reading-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px;padding:0 4px}
.tc-book-reading-header>div{display:grid;justify-items:end;gap:3px;color:#65716d;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.tc-book-reading-header strong{color:#2e514c;font-size:.82rem;letter-spacing:0;text-transform:none}
.tc-book-introduction{text-align:center;max-width:920px;padding-top:72px;padding-bottom:72px}
.tc-book-introduction p{max-width:620px;margin:14px auto;color:#636a66;font-family:Georgia,"Times New Roman",serif;font-size:1.15rem;line-height:1.65}
.tc-book-dates-inline{margin-bottom:0}
.tc-comparison-spread{max-width:980px;margin:0 auto 38px;display:grid;gap:20px}
.tc-comparison-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e4dfd3;background:#fff;box-shadow:0 12px 38px rgba(45,55,52,.06)}
.tc-comparison-pair>div{padding:clamp(28px,5vw,52px)}
.tc-comparison-now{border-right:1px solid #e4dfd3;background:#fbfcfb}.tc-comparison-then{background:#fffdf8}
.tc-comparison-pair h3{margin:8px 0 14px;color:#2a413d;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-weight:500}.tc-comparison-pair p{margin:0;color:#555e5a;white-space:pre-wrap;line-height:1.75;font-family:Georgia,"Times New Roman",serif}
.tc-memory-spread{max-width:980px;padding:clamp(30px,6vw,70px)}
.tc-memory-heading{margin-bottom:32px}.tc-memory-day{display:block;margin:7px 0 4px;color:#8a806f;font-size:.8rem}.tc-memory-heading h2{margin:0;color:#243a36;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:500}.tc-memory-place{margin:8px 0 0;color:#6c7773}
.tc-memory-hero{margin:0}.tc-memory-hero img{display:block;width:100%;max-height:680px;object-fit:contain;background:#f6f5f1}.tc-memory-hero figcaption,.tc-media-caption{margin:12px 0 0;color:#5f6662;font-family:Georgia,"Times New Roman",serif;font-size:.98rem;line-height:1.6}
.tc-sensory-layer,.tc-moving-layer,.tc-written-layer{margin-top:42px;padding-top:32px;border-top:1px solid #e3dfd4}.tc-sensory-layer h3{margin:8px 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;font-weight:500}.tc-sensory-layer>p{color:#6b716e}.tc-memory-audio{display:block;width:min(100%,560px);margin-top:18px}.tc-memory-video{display:block;width:100%;max-height:620px;margin-top:18px;background:#111}
.tc-written-layer blockquote{margin:18px 0 0;padding:0;border:0;color:#34403d;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,2.4vw,1.8rem);line-height:1.65;white-space:pre-wrap}
.tc-photo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}.tc-photo-strip img{width:100%;height:300px;object-fit:cover}
.tc-book-closing{max-width:900px;text-align:center}.tc-book-closing>p{max-width:620px;margin:14px auto 34px;color:#66706c;line-height:1.7}.tc-book-closing textarea{text-align:left;max-width:680px;margin:0 auto;display:block}.tc-book-closing-meta{display:grid;gap:7px;margin-top:40px;color:#6a726e}.tc-book-closing-meta strong{font-family:Georgia,"Times New Roman",serif;color:#2d504b;font-size:1.15rem}
@media(max-width:700px){
  .tc-book-shell{padding:16px 10px 72px}.tc-book-page{padding:28px 18px;margin-bottom:20px}.tc-book-cover{min-height:520px}.tc-book-reading-header{align-items:flex-start}.tc-book-reading-header>div{display:none}.tc-comparison-pair{grid-template-columns:1fr}.tc-comparison-now{border-right:0;border-bottom:1px solid #e4dfd3}.tc-comparison-pair>div{padding:26px 20px}.tc-photo-strip{grid-template-columns:1fr}.tc-photo-strip img{height:auto}.tc-book-actions{flex-direction:column;align-items:stretch}.tc-book-actions button{width:100%}.time-capsule-developer-actions{flex-direction:column}.time-capsule-developer-actions button{width:100%}
}

/* ============================================================
   TIME CAPSULE PRESENTATION PROTOTYPE 2 — PAGE-BASED HEIRLOOM
   One thought / memory / experience per screen.
   ============================================================ */
body.tc-presentation-active{background:#f7f5ef;overflow:hidden}
body.tc-presentation-active>header,body.tc-presentation-active>nav{display:none}
body.tc-presentation-active main{width:100%;min-height:100dvh;align-items:stretch;justify-content:stretch;font-size:1rem;background:#f7f5ef}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.tc-book-single-shell{width:min(100%,980px);min-height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;padding:20px clamp(14px,4vw,34px)}
.tc-book-single-page{height:100%;min-height:0;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.tc-page-content{width:100%}.tc-page-content-narrow{max-width:720px;margin:0 auto}.tc-centered-copy{text-align:center}
.tc-single-question{display:block;margin-top:34px}.tc-single-question textarea,.tc-closing-page textarea{width:100%;box-sizing:border-box;resize:none;border:0;border-bottom:1px solid #c8c1b3;border-radius:0;background:transparent;padding:14px 4px;color:#263632;font:1.18rem/1.65 Georgia,"Times New Roman",serif;outline-offset:5px}
.tc-question-save-note{display:grid;gap:4px;margin-top:28px;padding-top:18px;border-top:1px solid #e4dfd4;color:#626a66}.tc-question-save-note strong{font-family:Georgia,"Times New Roman",serif;color:#2b413d;font-size:1.05rem}.tc-question-save-note span{font-size:.9rem;line-height:1.5}
.tc-book-actions-clear{margin-top:18px;align-items:center}.tc-book-text-action{appearance:none;border:0;background:transparent;color:#315f5a;font:inherit;font-weight:700;cursor:pointer;padding:10px 6px;text-decoration:none}.tc-book-text-action:hover{text-decoration:underline}.tc-book-text-action:disabled{opacity:.35;cursor:default;text-decoration:none}

.tc-deck-shell{width:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:54px minmax(0,1fr) 58px;background:#f7f5ef;overflow:hidden}
.tc-deck-header,.tc-deck-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(14px,3vw,30px);background:#f7f5ef;z-index:3}.tc-deck-header{border-bottom:1px solid #e3ded2}.tc-deck-footer{border-top:1px solid #e3ded2}.tc-deck-header .tc-book-exit{margin:0;padding:8px 0}.tc-deck-progress,.tc-deck-hint{color:#817a6c;font-size:.78rem;letter-spacing:.05em}.tc-deck-hint{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.tc-deck-stage{position:relative;min-height:0;width:100%;max-width:1180px;margin:0 auto;padding:18px clamp(12px,3vw,30px);box-sizing:border-box;overflow:hidden}
.tc-deck-slide{display:none;width:100%;height:100%;min-height:0}.tc-deck-slide.is-active{display:block}
.tc-deck-page{height:100%;min-height:0;box-sizing:border-box;background:#fff;border:1px solid #e7e1d5;box-shadow:0 14px 42px rgba(45,55,52,.06);overflow:hidden}
.tc-intro-page,.tc-text-page,.tc-question-page,.tc-memory-title-page,.tc-comparison-page{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,72px)}
.tc-intro-page h1,.tc-question-page h1,.tc-memory-title-page h1{margin:12px 0;color:#20322e;font:500 clamp(2.2rem,5.8vw,4.8rem)/1.04 Georgia,"Times New Roman",serif}.tc-intro-page p,.tc-question-page .tc-book-lede,.tc-memory-title-page p{color:#626a66;font:1.05rem/1.7 Georgia,"Times New Roman",serif}
.tc-intro-page .tc-book-dates{margin-bottom:0}

.tc-comparison-book-spread{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}.tc-comparison-half{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,72px);box-sizing:border-box}.tc-comparison-now{background:#fbfcfb;border-right:1px solid #e3ded2}.tc-comparison-then{background:#fffdf8}.tc-comparison-half h2{margin:10px 0 18px;color:#243b36;font:500 clamp(1.55rem,3vw,2.5rem)/1.15 Georgia,"Times New Roman",serif}.tc-comparison-half p{margin:0;color:#4f5955;white-space:pre-wrap;font:clamp(1.05rem,1.7vw,1.35rem)/1.75 Georgia,"Times New Roman",serif}

.tc-photo-page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:clamp(18px,3vw,34px)}.tc-photo-page-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:end}.tc-photo-page-meta .tc-book-kicker{grid-column:1/-1}.tc-photo-page-meta>span:not(.tc-book-kicker){color:#8a806f;font-size:.8rem}.tc-photo-page-meta h2{margin:0;color:#243a36;font:500 clamp(1.5rem,2.8vw,2.5rem)/1.1 Georgia,"Times New Roman",serif}.tc-page-photo{min-height:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.tc-page-photo img{width:100%;height:100%;min-height:0;object-fit:contain;background:#f6f5f1}.tc-page-photo figcaption,.tc-page-media-caption{margin:0;color:#5f6662;font:.92rem/1.45 Georgia,"Times New Roman",serif}.tc-photo-page-secondary{grid-template-rows:minmax(0,1fr)}

.tc-audio-photo-page{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);height:100%}.tc-audio-photo-figure{margin:0;min-width:0;min-height:0;background:#f1eee7}.tc-audio-photo-figure img{display:block;width:100%;height:100%;object-fit:cover}.tc-audio-invitation{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,50px);background:#fff}.tc-audio-invitation h2{margin:10px 0;color:#243a36;font:500 clamp(1.8rem,3.5vw,3rem)/1.1 Georgia,"Times New Roman",serif}.tc-audio-invitation p{margin:0;color:#66706b;line-height:1.65}.tc-audio-invitation .tc-book-primary{align-self:flex-start}

.tc-video-page{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:clamp(18px,3vw,34px)}.tc-video-page-copy h2{margin:7px 0 0;color:#243a36;font:500 clamp(1.5rem,2.8vw,2.4rem)/1.12 Georgia,"Times New Roman",serif}.tc-page-video{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#111}
.tc-text-page blockquote{margin:18px 0 0;padding:0;border:0;color:#2c3d39;font:clamp(1.45rem,3.3vw,2.55rem)/1.55 Georgia,"Times New Roman",serif;white-space:pre-wrap}.tc-text-page .tc-book-kicker{margin-bottom:12px}
.tc-closing-page p{color:#66706c;font:1rem/1.65 Georgia,"Times New Roman",serif}.tc-closing-page textarea{margin:24px 0 0}.tc-closing-page .tc-book-closing-meta{margin-top:28px}

.tc-immersive-audio{position:fixed;inset:0;z-index:10000;background:#f5f2ea;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:0;box-sizing:border-box}.tc-immersive-image{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#111}.tc-immersive-controls{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px clamp(16px,4vw,42px);background:#fff;border-top:1px solid #dfd9cc}.tc-immersive-controls>div:first-child{min-width:0}.tc-immersive-controls p{margin:4px 0 0;max-width:720px;color:#5e6662;font:.88rem/1.45 Georgia,"Times New Roman",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-immersive-buttons{display:flex;gap:8px;flex:0 0 auto}.tc-immersive-control{appearance:none;border:1px solid #cfc9bc;background:#fff;color:#315f5a;border-radius:2px;padding:9px 15px;font:inherit;font-weight:700;cursor:pointer}.tc-immersive-continue{background:#315f5a;color:#fff;border-color:#315f5a}

@media(max-width:700px){
  .tc-book-single-shell{padding:12px 10px}.tc-book-single-page{padding:26px 18px}.tc-book-single-page h1{font-size:clamp(2.1rem,11vw,3.35rem)}
  .tc-deck-shell{grid-template-rows:46px minmax(0,1fr) 52px}.tc-deck-stage{padding:8px}.tc-deck-header,.tc-deck-footer{padding:0 10px}.tc-deck-hint{display:none}.tc-book-text-action{font-size:.82rem}
  .tc-intro-page,.tc-text-page,.tc-question-page,.tc-memory-title-page,.tc-comparison-page{padding:24px 20px}.tc-intro-page h1,.tc-question-page h1,.tc-memory-title-page h1{font-size:clamp(2rem,10vw,3rem)}
  .tc-comparison-book-spread{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.tc-comparison-half{padding:22px 20px}.tc-comparison-now{border-right:0;border-bottom:1px solid #e3ded2}.tc-comparison-half h2{font-size:1.35rem;margin-bottom:10px}.tc-comparison-half p{font-size:1rem;line-height:1.55}
  .tc-photo-page{padding:12px;gap:8px}.tc-photo-page-meta{gap:2px 10px}.tc-photo-page-meta h2{font-size:1.25rem}.tc-page-photo figcaption{font-size:.82rem;line-height:1.35}
  .tc-audio-photo-page{grid-template-columns:1fr;grid-template-rows:minmax(0,1.2fr) minmax(190px,.8fr)}.tc-audio-photo-figure img{object-fit:contain;background:#f1eee7}.tc-audio-invitation{padding:20px}.tc-audio-invitation h2{font-size:1.7rem}.tc-audio-invitation p{font-size:.92rem}.tc-audio-invitation .tc-book-primary{margin-top:14px}
  .tc-video-page{padding:12px;gap:8px}.tc-text-page blockquote{font-size:clamp(1.3rem,6vw,1.85rem);line-height:1.45}
  .tc-single-question{margin-top:18px}.tc-single-question textarea,.tc-closing-page textarea{font-size:1rem;line-height:1.5}.tc-question-save-note{margin-top:18px}.tc-book-actions-clear{gap:4px}.tc-book-actions-clear .tc-book-primary{width:100%;margin-top:8px}.tc-book-actions-clear .tc-book-text-action{width:100%}
  .tc-immersive-controls{padding:10px 12px;gap:8px}.tc-immersive-controls>div:first-child{display:none}.tc-immersive-buttons{width:100%;justify-content:center}.tc-immersive-control{flex:1;padding:9px 10px}
}


/* Prototype 3: editorial memory-book rhythm */
.tc-intro-page .tc-page-content{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}
.tc-intro-page h1{max-width:760px;font-size:clamp(2.55rem,5.4vw,4.55rem);line-height:1.03;letter-spacing:-.025em}
.tc-intro-page .tc-book-kicker{margin-bottom:8px}.tc-intro-page p{max-width:590px}

.tc-reflection-page{background:#fff;padding:clamp(42px,7vw,92px)}
.tc-reflection-copy{width:min(100%,680px);margin:auto;display:flex;flex-direction:column;justify-content:center;min-height:100%;box-sizing:border-box}
.tc-reflection-era{color:#315f5a;font-size:.78rem;font-weight:800;letter-spacing:.24em}
.tc-reflection-rule{width:44px;height:1px;background:#bca36b;margin:18px 0 34px}
.tc-reflection-page h2{margin:0 0 26px;color:#263a36;font:400 clamp(1.75rem,3.3vw,2.8rem)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.015em}
.tc-reflection-answer{margin:0;color:#303b38;font:400 clamp(1.25rem,2.35vw,1.75rem)/1.62 Georgia,"Times New Roman",serif}
.tc-reflection-whisper{margin:36px 0 0;color:#8b8375;font:italic .92rem/1.5 Georgia,"Times New Roman",serif}
.tc-reflection-then-page{background:#fcfaf5}.tc-reflection-then-page .tc-reflection-era{color:#8a6f3d}

.tc-question-page .tc-page-content{display:flex;flex-direction:column;justify-content:center;min-height:100%;box-sizing:border-box}
.tc-question-page h1{font-size:clamp(1.85rem,3.7vw,3rem);font-weight:400;line-height:1.12}
.tc-question-page .tc-book-kicker{color:#7d7567;letter-spacing:.2em}
.tc-question-save-note{border-left:1px solid #d8c9aa;padding-left:16px}
.tc-book-cover{min-height:min(72vh,680px);justify-content:center}

@media (max-width:700px){
 .tc-reflection-page{padding:30px 22px}.tc-reflection-page h2{font-size:1.75rem}
 .tc-reflection-answer{font-size:1.18rem}.tc-reflection-whisper{margin-top:24px}
}


/* ==========================================================
   TIME CAPSULE PRESENTATION PROTOTYPE 4 — THE LIVING BOOK
   Presentation-only styling. Capsule data/storage untouched.
   ========================================================== */

body.tc-presentation-active{
    background:#f3f0e8;
}

/* Make the presentation feel like a volume rather than a web page. */
body.tc-presentation-active .tc-presentation-shell,
body.tc-presentation-active .tc-book-presentation,
body.tc-presentation-active .tc-deck-shell{
    background:#f3f0e8;
}

body.tc-presentation-active .tc-deck-page{
    background:#fffdf8;
    border:1px solid rgba(92,77,50,.13);
    box-shadow:0 18px 55px rgba(49,42,30,.08);
    overflow:hidden;
}

/* Typography: quieter, editorial, book-like. */
body.tc-presentation-active .tc-deck-page h1,
body.tc-presentation-active .tc-deck-page h2{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    color:#243833;
}

body.tc-presentation-active .tc-book-kicker,
body.tc-presentation-active .tc-reflection-era{
    font-size:.69rem;
    letter-spacing:.25em;
    font-weight:700;
}

/* Navigation should almost disappear. Keep hit areas usable but visually tiny. */
body.tc-presentation-active .tc-deck-nav,
body.tc-presentation-active .tc-book-nav,
body.tc-presentation-active .tc-presentation-nav{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    min-height:44px;
}

body.tc-presentation-active .tc-deck-nav button,
body.tc-presentation-active .tc-book-nav button,
body.tc-presentation-active .tc-presentation-nav button,
body.tc-presentation-active [data-tc-prev],
body.tc-presentation-active [data-tc-next],
body.tc-presentation-active .tc-prev-page,
body.tc-presentation-active .tc-next-page{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(35,67,61,.48) !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.8rem !important;
    padding:4px 14px !important;
    min-width:44px;
    transition:color .25s ease, opacity .25s ease;
}

body.tc-presentation-active .tc-deck-nav button:hover,
body.tc-presentation-active .tc-book-nav button:hover,
body.tc-presentation-active .tc-presentation-nav button:hover{
    color:#244f49 !important;
}

/* Page transitions: a soft dissolve, not a web-page jump. */
body.tc-presentation-active .tc-deck-page{
    animation:tcBookDissolve .72s ease both;
}
@keyframes tcBookDissolve{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
}

/* Memory pages become cinematic. */
body.tc-presentation-active .tc-cinematic-memory-page img,
body.tc-presentation-active .tc-memory-page img{
    animation:tcMemoryReveal 8s ease-out both;
    transform-origin:center center;
}
@keyframes tcMemoryReveal{
    0%{opacity:0;transform:scale(1.025)}
    12%{opacity:1}
    100%{opacity:1;transform:scale(1)}
}

/* Full-screen immersive photo/audio: remove the distracting white control bar. */
body.tc-presentation-active .tc-immersive-audio-footer,
body.tc-presentation-active .tc-immersive-footer,
body.tc-presentation-active .tc-audio-immersive-controls{
    position:absolute !important;
    inset:auto 0 0 0;
    background:linear-gradient(to top,rgba(0,0,0,.48),rgba(0,0,0,0)) !important;
    border:0 !important;
    color:white !important;
    min-height:82px;
    opacity:.15;
    transition:opacity .3s ease;
}
body.tc-presentation-active .tc-immersive-audio-footer:hover,
body.tc-presentation-active .tc-immersive-footer:hover,
body.tc-presentation-active .tc-audio-immersive-controls:hover{
    opacity:1;
}
body.tc-presentation-active .tc-immersive-audio-footer button,
body.tc-presentation-active .tc-immersive-footer button,
body.tc-presentation-active .tc-audio-immersive-controls button{
    background:rgba(255,255,255,.12) !important;
    color:white !important;
    border:1px solid rgba(255,255,255,.42) !important;
}

/* Keep reflection pages spacious and singular. */
body.tc-presentation-active .tc-reflection-copy{
    max-width:650px;
}
body.tc-presentation-active .tc-reflection-answer{
    max-width:590px;
}
body.tc-presentation-active .tc-reflection-whisper{
    opacity:.72;
}

/* Mobile: the book fills the screen; navigation becomes swipe-first. */
@media(max-width:700px){
    body.tc-presentation-active .tc-deck-page{
        border-left:0;
        border-right:0;
        box-shadow:none;
        min-height:calc(100dvh - 58px);
    }
    body.tc-presentation-active .tc-deck-nav,
    body.tc-presentation-active .tc-book-nav,
    body.tc-presentation-active .tc-presentation-nav{
        opacity:.38;
        min-height:34px;
    }
    body.tc-presentation-active .tc-deck-nav button,
    body.tc-presentation-active .tc-book-nav button,
    body.tc-presentation-active .tc-presentation-nav button{
        font-size:1.45rem !important;
    }
    body.tc-presentation-active .tc-cinematic-memory-page img,
    body.tc-presentation-active .tc-memory-page img{
        width:100%;
        height:auto;
        max-height:72dvh;
        object-fit:contain;
    }
}

/* Respect accessibility settings. */
@media(prefers-reduced-motion:reduce){
    body.tc-presentation-active .tc-deck-page,
    body.tc-presentation-active .tc-cinematic-memory-page img,
    body.tc-presentation-active .tc-memory-page img{
        animation:none !important;
    }
}

/* ======================================================
   DIGITAL HEIRLOOM — FOUNDATION PROTOTYPE 1
====================================================== */
body.heirloom-active > header,
body.heirloom-active > nav { display: none; }
body.heirloom-active main { padding: 0; max-width: none; }
body.heirloom-active { background: #e9e4da; }

.heirloom-reader {
    --heirloom-ink: #18342f;
    --heirloom-paper: #f7f3ea;
    --heirloom-warm: #eee6d8;
    --heirloom-gold: #a57a3a;
    color: var(--heirloom-ink);
    background: #e9e4da;
    min-height: 100vh;
    font-family: Georgia, "Times New Roman", serif;
}
.heirloom-exit {
    position: fixed; z-index: 40; top: 18px; left: 20px;
    border: 1px solid rgba(255,255,255,.35); background: rgba(16,35,32,.62);
    color: white; padding: 10px 14px; border-radius: 999px; backdrop-filter: blur(10px);
    cursor: pointer; font: 600 14px/1.2 system-ui, sans-serif;
}
.heirloom-cover-page {
    min-height: 100vh; position: relative; display: grid; place-items: center;
    overflow: hidden; color: white; text-align: center;
}
.heirloom-cover-image, .heirloom-cover-shade { position: absolute; inset: 0; }
.heirloom-cover-image { background-size: cover; transform: scale(1.02); }
.heirloom-cover-shade { background: linear-gradient(180deg, rgba(10,24,22,.18), rgba(10,24,22,.66)); }
.heirloom-cover-copy { position: relative; z-index: 2; width: min(850px, 86vw); padding: 70px 20px; }
.heirloom-kicker { display: block; letter-spacing: .22em; font: 700 12px/1.4 system-ui,sans-serif; text-transform: uppercase; }
.heirloom-cover-copy h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 400; line-height: .95; margin: 22px 0 16px; }
.heirloom-date { font-size: clamp(18px,2vw,25px); margin: 0; }
.heirloom-opening-line { font-size: clamp(20px,2.2vw,30px); font-style: italic; margin: 44px 0 28px; }
.heirloom-enter { border: 1px solid rgba(255,255,255,.65); color: white; background: rgba(255,255,255,.08); padding: 13px 24px; border-radius: 999px; cursor:pointer; font:600 14px system-ui,sans-serif; }

.heirloom-book { width: min(1120px, calc(100% - 36px)); margin: 70px auto; }
.heirloom-title-page, .heirloom-chapter-opening, .heirloom-closing-page {
    background: var(--heirloom-paper); min-height: 72vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; padding: clamp(48px,8vw,110px);
    box-shadow: 0 18px 50px rgba(44,39,31,.08); margin-bottom: 28px;
}
.heirloom-title-page h2, .heirloom-chapter-opening h2, .heirloom-closing-page h2 { font-size: clamp(42px,6vw,76px); font-weight:400; line-height:1.04; margin:18px 0; }
.heirloom-title-page > p, .heirloom-chapter-opening > p, .heirloom-closing-page > p { font-size:20px; line-height:1.7; max-width:680px; }
.heirloom-rule { width: 58px; border-top: 1px solid var(--heirloom-gold); margin: 22px auto; }
.heirloom-intro { font-style: italic; }
.heirloom-memory-count { margin-top: 26px; font: 600 12px system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.58; }
.heirloom-chapter { margin-bottom: 70px; }
.heirloom-chapter-opening { min-height: 58vh; }

.heirloom-memory {
    display:grid; grid-template-columns: 1.25fr .75fr; min-height: 680px; background: var(--heirloom-paper);
    margin: 28px 0; box-shadow: 0 16px 45px rgba(44,39,31,.07); overflow:hidden;
}
.heirloom-memory-reverse { grid-template-columns: .75fr 1.25fr; }
.heirloom-memory-reverse .heirloom-memory-media { order:2; }
.heirloom-memory-media { background:#171b1a; min-width:0; display:flex; flex-direction:column; }
.heirloom-photo-dissolve { position:relative; flex:1; min-height:520px; overflow:hidden; background:#151918; }
.heirloom-dissolve-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.025); transition:opacity 1.8s ease, transform 7s ease; }
.heirloom-dissolve-image.is-visible { opacity:1; transform:scale(1); }
.heirloom-photo-count { position:absolute; right:18px; bottom:16px; z-index:3; background:rgba(10,20,18,.58); color:white; padding:7px 11px; border-radius:999px; font:600 11px system-ui,sans-serif; letter-spacing:.05em; }
.heirloom-photo-fallback .heirloom-dissolve-image { filter:saturate(.72) brightness(.82); }
.heirloom-video-frame { background:#111; display:grid; place-items:center; }
.heirloom-video-frame video { width:100%; max-height:680px; display:block; }
.heirloom-video-secondary { margin-top:1px; }
.heirloom-audio { padding:18px 22px; background:#142b27; color:white; }
.heirloom-audio-label { display:block; margin-bottom:9px; font:700 11px system-ui,sans-serif; text-transform:uppercase; letter-spacing:.16em; opacity:.75; }
.heirloom-audio audio { width:100%; height:38px; }
.heirloom-memory-copy { padding: clamp(42px,6vw,84px); display:flex; flex-direction:column; justify-content:center; }
.heirloom-memory-time { color:var(--heirloom-gold); font:700 11px system-ui,sans-serif; text-transform:uppercase; letter-spacing:.18em; }
.heirloom-memory-copy h3 { font-size:clamp(32px,4vw,52px); font-weight:400; line-height:1.08; margin:18px 0 24px; }
.heirloom-location { font-style:italic; opacity:.68; margin:-8px 0 22px; }
.heirloom-notes, .heirloom-story { font-size:clamp(18px,1.7vw,23px); line-height:1.65; }
.heirloom-story { border-left:1px solid var(--heirloom-gold); margin:28px 0 0; padding:2px 0 2px 22px; font-style:italic; }
.heirloom-capsule-mark { margin-top:30px; padding:13px 20px; border:1px solid #cbbda4; border-radius:999px; background:transparent; color:inherit; font:600 12px system-ui,sans-serif; letter-spacing:.05em; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.heirloom-capsule-mark:hover, .heirloom-capsule-mark:focus-visible { background:rgba(203,189,164,.14); border-color:#b9a789; outline:none; }
.heirloom-capsule-mark:active { transform:translateY(1px); }
.digital-heirloom-hub-card span:first-child { font-size:28px; }

@media (max-width: 760px) {
    .heirloom-exit { top:12px; left:12px; }
    .heirloom-book { width:100%; margin:0 auto; }
    .heirloom-title-page, .heirloom-chapter-opening, .heirloom-closing-page { min-height:100svh; margin:0; padding:64px 28px; box-shadow:none; }
    .heirloom-memory, .heirloom-memory-reverse { grid-template-columns:1fr; min-height:0; margin:0; }
    .heirloom-memory-reverse .heirloom-memory-media { order:0; }
    .heirloom-photo-dissolve { min-height:62svh; }
    .heirloom-memory-copy { min-height:48svh; padding:44px 28px 58px; }
    .heirloom-cover-copy h1 { font-size:clamp(46px,15vw,72px); }
}

/* DIGITAL HEIRLOOM PROTOTYPE 2 — PAGE-BASED BOOK */
body.heirloom-active{overflow:hidden;background:#e9e4da}
.heirloom-reader-v2{height:100dvh;overflow:hidden;background:#e9e4da}
.heirloom-reader-v2 .heirloom-cover-page{position:absolute;inset:0;z-index:20;min-height:100dvh;transition:opacity .65s ease,visibility .65s ease}
.heirloom-reader-v2 .heirloom-cover-page.is-open{opacity:0;visibility:hidden;pointer-events:none}
.heirloom-book-stage{position:absolute;inset:0;display:grid;place-items:center;padding:28px 70px 34px;box-sizing:border-box;background:#e9e4da}
.heirloom-book-stage[hidden]{display:none}
.heirloom-book-frame{position:relative;width:min(1180px,calc(100vw - 140px));height:min(780px,calc(100dvh - 64px))}
.heirloom-reader-v2 .heirloom-book{position:relative;width:100%;height:100%;margin:0;background:#fffdf7;box-shadow:0 24px 70px rgba(50,40,25,.16);overflow:hidden}
.heirloom-page-slot{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}
.heirloom-page-slot.is-current{opacity:1;visibility:visible;pointer-events:auto;animation:heirloomPageIn .45s ease both}
@keyframes heirloomPageIn{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}
.heirloom-reader-v2 .heirloom-page{width:100%;height:100%;min-height:0;margin:0;box-shadow:none}
.heirloom-page-inner{height:100%;box-sizing:border-box}
.heirloom-centered-page{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(44px,7vw,96px);text-align:center}
.heirloom-reader-v2 .heirloom-title-page,.heirloom-reader-v2 .heirloom-chapter-opening,.heirloom-reader-v2 .heirloom-closing-page{height:100%;min-height:0;margin:0;padding:0}
.heirloom-reader-v2 .heirloom-memory{display:grid;grid-template-columns:1.18fr .82fr;height:100%;min-height:0;background:#fffdf7}
.heirloom-reader-v2 .heirloom-memory-reverse{grid-template-columns:.82fr 1.18fr}
.heirloom-reader-v2 .heirloom-memory-media{height:100%;min-height:0;overflow:hidden}
.heirloom-reader-v2 .heirloom-photo-dissolve{height:100%;min-height:0;flex:1}
.heirloom-reader-v2 .heirloom-memory-copy{height:100%;min-height:0;box-sizing:border-box;padding:clamp(34px,5vw,76px);overflow:auto;background:#fffdf7;color:#273631}
.heirloom-reader-v2 .heirloom-memory-copy h3{font-size:clamp(29px,3.5vw,49px)}
.heirloom-reader-v2 .heirloom-notes,.heirloom-reader-v2 .heirloom-story{font-size:clamp(16px,1.5vw,21px)}
.heirloom-page-edge{position:absolute;top:50%;z-index:8;transform:translateY(-50%);width:54px;height:100px;border:0;background:rgba(255,253,247,.8);color:#38554f;font:400 46px/1 Georgia,serif;cursor:pointer;border-radius:28px;box-shadow:0 5px 22px rgba(50,40,25,.1);opacity:.8}
.heirloom-page-edge:hover{opacity:1;transform:translateY(-50%) scale(1.04)}.heirloom-page-edge:disabled{opacity:.12}
.heirloom-page-edge-left{left:-62px}.heirloom-page-edge-right{right:-62px}
.heirloom-page-status{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);color:#746d61;font:600 11px system-ui;letter-spacing:.12em}
.heirloom-reader-v2 .heirloom-exit{z-index:30}
@media(max-width:700px){
 .heirloom-book-stage{padding:0}.heirloom-book-frame{width:100vw;height:100dvh}.heirloom-reader-v2 .heirloom-book{box-shadow:none}
 .heirloom-reader-v2 .heirloom-memory,.heirloom-reader-v2 .heirloom-memory-reverse{grid-template-columns:1fr;grid-template-rows:56% 44%}
 .heirloom-reader-v2 .heirloom-memory-reverse .heirloom-memory-media{order:0}
 .heirloom-reader-v2 .heirloom-memory-copy{padding:26px 24px 42px}
 .heirloom-reader-v2 .heirloom-memory-copy h3{font-size:clamp(25px,8vw,37px);margin:10px 0 14px}
 .heirloom-reader-v2 .heirloom-notes,.heirloom-reader-v2 .heirloom-story{font-size:16px;line-height:1.5}
 .heirloom-page-edge{top:auto;bottom:9px;width:44px;height:44px;font-size:34px;box-shadow:none}.heirloom-page-edge-left{left:10px}.heirloom-page-edge-right{right:10px}
 .heirloom-page-status{bottom:25px}.heirloom-centered-page{padding:56px 28px}
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 3
   Coffee-table book + adaptive photography + gesture page turn
   ========================================================= */

/* Time is preserved in Moment data but deliberately not presented as itinerary metadata. */
.heirloom-reader-v2 .heirloom-memory-time{
    font-size:.66rem;
    letter-spacing:.24em;
    color:#9a7641;
}

/* Preserve the full photograph whenever practical without breaking layered slideshows. */
.heirloom-reader-v2 .heirloom-memory-media{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ebe6dc;
    position:relative;
}
.heirloom-reader-v2 .heirloom-memory-media > img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    background:#ebe6dc;
}
.heirloom-reader-v2 .heirloom-photo-dissolve{
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#ebe6dc;
}
.heirloom-reader-v2 .heirloom-photo-dissolve .heirloom-dissolve-image{
    position:absolute !important;
    inset:0;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:0;
    transition:opacity 1.4s ease;
    background:#ebe6dc;
}
.heirloom-reader-v2 .heirloom-photo-dissolve .heirloom-dissolve-image.is-visible{
    opacity:1;
}
.heirloom-reader-v2 .heirloom-memory-media.is-portrait{
    padding:clamp(18px,2.5vw,34px);
    box-sizing:border-box;
}
.heirloom-reader-v2 .heirloom-memory-media.is-squareish{
    padding:clamp(10px,1.6vw,24px);
    box-sizing:border-box;
}

/* The stage itself behaves like the surface of a physical volume. */
.heirloom-book-stage{
    touch-action:pan-y;
    user-select:none;
    perspective:1800px;
}
.heirloom-page-slot{
    transform-style:preserve-3d;
    backface-visibility:hidden;
    will-change:transform,opacity;
}
.heirloom-page-slot.is-current{
    cursor:grab;
}
.heirloom-page-slot.is-current:active{
    cursor:grabbing;
}

/* Edge controls remain discoverable but secondary to dragging/swiping. */
.heirloom-page-edge{
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.heirloom-book-frame:hover .heirloom-page-edge:not(:disabled){
    opacity:.9;
}

/* On tall/narrow screens, allow the photo to breathe instead of being chopped. */
@media(max-width:900px){
    .heirloom-reader-v2 .heirloom-memory,
    .heirloom-reader-v2 .heirloom-memory-reverse{
        grid-template-columns:1fr;
        grid-template-rows:minmax(48%,58%) 1fr;
    }
    .heirloom-reader-v2 .heirloom-memory-media,
    .heirloom-reader-v2 .heirloom-memory-reverse .heirloom-memory-media{
        order:0;
        padding:0;
    }
    .heirloom-reader-v2 .heirloom-memory-copy{
        overflow:auto;
        padding:clamp(24px,5vw,40px);
    }
}

/* Mobile is swipe-first. Keep arrows as subtle fallback cues. */
@media(max-width:700px){
    .heirloom-book-stage{touch-action:pan-y}
    .heirloom-page-edge{opacity:.52}
    .heirloom-reader-v2 .heirloom-memory,
    .heirloom-reader-v2 .heirloom-memory-reverse{
        grid-template-rows:55% 45%;
    }
    .heirloom-reader-v2 .heirloom-memory-media > img{
        object-fit:contain;
    }
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 4
   Quiet navigation + photography-first hierarchy
   ========================================================= */

/* Permanent navigation arrows disappear from normal reading.
   They remain in the DOM for accessibility/keyboard fallback and can
   quietly reveal at the extreme book edges on hover-capable devices. */
.heirloom-reader-v2 .heirloom-page-edge{
    opacity:0 !important;
    pointer-events:none;
    background:transparent !important;
    box-shadow:none !important;
}
@media (hover:hover) and (pointer:fine){
    .heirloom-reader-v2 .heirloom-book-frame:hover .heirloom-page-edge:not(:disabled){
        opacity:.16 !important;
    }
    .heirloom-reader-v2 .heirloom-page-edge-left{
        pointer-events:auto;
    }
    .heirloom-reader-v2 .heirloom-page-edge-right{
        pointer-events:auto;
    }
    .heirloom-reader-v2 .heirloom-page-edge:hover{
        opacity:.62 !important;
        background:rgba(255,253,247,.30) !important;
    }
}

/* One-time gesture introduction. */
.heirloom-gesture-guide{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .45s ease;
    background:rgba(35,47,43,.05);
}
.heirloom-gesture-guide.is-showing{
    opacity:1;
}
.heirloom-gesture-hand{
    font-size:42px;
    transform:translateX(42px);
    animation:heirloomGestureHint 1.55s ease-in-out 2;
    filter:grayscale(1);
    opacity:.72;
}
.heirloom-gesture-guide p{
    margin:18px 0 0;
    padding:9px 15px;
    border-radius:999px;
    background:rgba(255,253,247,.88);
    color:#425d56;
    font:600 13px/1.2 system-ui,sans-serif;
    letter-spacing:.02em;
    box-shadow:0 4px 18px rgba(50,40,25,.08);
}
@keyframes heirloomGestureHint{
    0%,100%{transform:translateX(42px)}
    55%{transform:translateX(-42px)}
}

/* Photography leads. */
.heirloom-reader-v2 .heirloom-memory{
    grid-template-columns:1.34fr .66fr;
}
.heirloom-reader-v2 .heirloom-memory-reverse{
    grid-template-columns:.66fr 1.34fr;
}
.heirloom-reader-v2 .heirloom-memory-media{
    background:#f1ece3;
}
.heirloom-reader-v2 .heirloom-memory-media > img,
.heirloom-reader-v2 .heirloom-photo-dissolve .heirloom-dissolve-image{
    background:#f1ece3;
}
.heirloom-reader-v2 .heirloom-memory-media.is-portrait{
    background:#f1ece3;
}
.heirloom-reader-v2 .heirloom-memory-media.is-squareish{
    background:#f1ece3;
}

/* Text supports the photograph rather than competing with it. */
.heirloom-reader-v2 .heirloom-memory-copy{
    background:#f8f3e9;
    color:#35443f;
    padding:clamp(36px,4.7vw,68px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.heirloom-reader-v2 .heirloom-memory-copy h3{
    font-size:clamp(26px,3vw,42px);
    line-height:1.08;
    font-weight:400;
    color:#30443e;
    margin:16px 0 24px;
}
.heirloom-reader-v2 .heirloom-memory-time{
    color:#a47d46;
    font-size:.62rem;
    letter-spacing:.26em;
    opacity:.88;
}
.heirloom-reader-v2 .heirloom-notes,
.heirloom-reader-v2 .heirloom-story{
    font-size:clamp(15px,1.25vw,19px);
    line-height:1.58;
    color:#4a514e;
}
.heirloom-reader-v2 .heirloom-location{
    color:#776f63;
    font-size:.88rem;
}

/* Give the photograph richer visual weight without altering the source file. */
.heirloom-reader-v2 .heirloom-memory-media img{
    filter:brightness(1.06) contrast(1.02) saturate(1.03);
}

/* Narrow layouts still favour the photograph. */
@media(max-width:900px){
    .heirloom-reader-v2 .heirloom-memory,
    .heirloom-reader-v2 .heirloom-memory-reverse{
        grid-template-columns:1fr;
        grid-template-rows:62% 38%;
    }
    .heirloom-reader-v2 .heirloom-memory-copy{
        padding:26px 24px 34px;
        justify-content:center;
    }
    .heirloom-reader-v2 .heirloom-memory-copy h3{
        font-size:clamp(25px,7.5vw,36px);
        margin:10px 0 15px;
    }
}
@media(max-width:700px){
    .heirloom-gesture-hand{font-size:36px}
    .heirloom-gesture-guide p{font-size:12px}
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 5 — CORRECTED TACTILE REFINEMENT
   Keeps Prototype 4's known-good drag/swipe mechanics.
   ========================================================= */

/* Floating hand only, placed beside the right page edge. */
.heirloom-reader-v2 .heirloom-gesture-guide{
    position:absolute !important;
    inset:0 !important;
    z-index:50 !important;
    pointer-events:none !important;
    opacity:0 !important;
    background:transparent !important;
    transition:opacity .28s ease !important;
}
.heirloom-reader-v2 .heirloom-gesture-guide.is-showing{
    opacity:1 !important;
}
.heirloom-reader-v2 .heirloom-gesture-guide.is-dismissing{
    opacity:0 !important;
}
.heirloom-reader-v2 .heirloom-gesture-guide p{
    display:none !important;
}
.heirloom-reader-v2 .heirloom-gesture-hand{
    position:absolute !important;
    right:clamp(20px,3vw,44px) !important;
    top:50% !important;
    width:48px !important;
    height:48px !important;
    display:grid !important;
    place-items:center !important;
    transform:translateY(-50%) !important;
    border-radius:50% !important;
    background:rgba(248,244,235,.94) !important;
    border:1px solid rgba(67,85,78,.16) !important;
    box-shadow:0 7px 24px rgba(45,38,29,.14) !important;
    color:#476159 !important;
    font-size:25px !important;
    opacity:.86 !important;
    filter:grayscale(1) !important;
    animation:heirloomHandNudge 1.8s ease-in-out infinite !important;
}
@keyframes heirloomHandNudge{
    0%,100%{transform:translate(0,-50%)}
    50%{transform:translate(-18px,-50%)}
}

/* The known-good drag already moves the whole current spread with the pointer.
   Make the underlying warm paper visible so the movement reads immediately. */
.heirloom-reader-v2 .heirloom-book{
    background:#e8e0d3 !important;
}
.heirloom-reader-v2 .heirloom-page-slot{
    background:#e8e0d3 !important;
}

/* Slower, softer settle/reveal after release. */
.heirloom-page-slot.is-current{
    animation:heirloomPageInSoft .68s cubic-bezier(.22,.72,.22,1) both !important;
}
@keyframes heirloomPageInSoft{
    from{opacity:.18;transform:translateX(18px)}
    to{opacity:1;transform:translateX(0)}
}

@media(max-width:700px){
    .heirloom-reader-v2 .heirloom-gesture-hand{
        right:12px !important;
        width:42px !important;
        height:42px !important;
        font-size:22px !important;
    }
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 6 — PAGE EDGE CUE + TACTILE TURN
   ========================================================= */

/* The gesture hint belongs to the page, not the browser/stage. */
.heirloom-reader-v2 .heirloom-gesture-guide{
    position:absolute !important;
    inset:0 !important;
    z-index:60 !important;
    pointer-events:none !important;
    background:transparent !important;
}
.heirloom-reader-v2 .heirloom-gesture-hand{
    position:absolute !important;
    right:calc((100vw - min(1180px, calc(100vw - 140px))) / 2 + 18px) !important;
    top:50% !important;
    width:46px !important;
    height:46px !important;
    transform:translate(0,-50%) !important;
    animation:heirloomPageSwipeCue 1.65s cubic-bezier(.45,0,.25,1) infinite !important;
    background:rgba(248,244,235,.96) !important;
    border:1px solid rgba(67,85,78,.17) !important;
    box-shadow:0 6px 20px rgba(45,38,29,.13) !important;
}
@keyframes heirloomPageSwipeCue{
    0%,100%{transform:translate(0,-50%);opacity:.72}
    18%{opacity:.92}
    58%{transform:translate(-34px,-50%);opacity:.96}
    78%{transform:translate(-42px,-50%);opacity:.72}
}

/* Make the blank page beneath obvious enough to register during drag,
   while remaining understated. */
.heirloom-reader-v2 .heirloom-book{
    background:#e5ddcf !important;
}
.heirloom-reader-v2 .heirloom-page-slot{
    background:#e5ddcf !important;
}
.heirloom-reader-v2 .heirloom-page-slot.is-current{
    transition:
        transform .62s cubic-bezier(.22,.72,.22,1),
        opacity .66s ease,
        box-shadow .62s ease !important;
}

/* The newly revealed page settles slowly rather than popping in. */
.heirloom-page-slot.is-current{
    animation:heirloomPageInDeliberate .86s cubic-bezier(.22,.72,.22,1) both !important;
}
@keyframes heirloomPageInDeliberate{
    from{opacity:.08;transform:translateX(30px)}
    45%{opacity:.58}
    to{opacity:1;transform:translateX(0)}
}

@media(max-width:700px){
    .heirloom-reader-v2 .heirloom-gesture-hand{
        right:10px !important;
        width:40px !important;
        height:40px !important;
        font-size:21px !important;
    }
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 7 — PAPER SLIDE REVEAL
   Pages slide. Photos may still dissolve within a memory.
   ========================================================= */

.heirloom-reader-v2 .heirloom-book{
    position:relative;
    overflow:hidden;
    background:#e7dfd2 !important;
}

.heirloom-reader-v2 .heirloom-page-slot{
    position:absolute;
    inset:0;
    background:#fffdf7 !important;
    transform:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:none !important;
    animation:none !important;
    will-change:transform;
}

.heirloom-reader-v2 .heirloom-page-slot.is-current{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
    animation:none !important;
}

.heirloom-reader-v2 .heirloom-page-slot.is-beneath{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
}

.heirloom-reader-v2 .heirloom-page-slot.is-dragging-page{
    cursor:grabbing;
}

/* No page fade whatsoever. */
.heirloom-reader-v2 .heirloom-page-slot,
.heirloom-reader-v2 .heirloom-page-slot.is-current,
.heirloom-reader-v2 .heirloom-page-slot.is-beneath{
    filter:none !important;
}

/* Page-edge zones are invisible until hover, but actually functional. */
.heirloom-reader-v2 .heirloom-page-edge{
    width:8% !important;
    min-width:54px !important;
    height:100% !important;
    top:0 !important;
    transform:none !important;
    border-radius:0 !important;
    opacity:0 !important;
    pointer-events:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    color:transparent !important;
}
.heirloom-reader-v2 .heirloom-page-edge-left{left:0 !important}
.heirloom-reader-v2 .heirloom-page-edge-right{right:0 !important}

@media (hover:hover) and (pointer:fine){
    .heirloom-reader-v2 .heirloom-page-edge:hover{
        opacity:1 !important;
        background:
            linear-gradient(90deg,
                rgba(102,86,61,.06),
                rgba(255,255,255,0)) !important;
    }
    .heirloom-reader-v2 .heirloom-page-edge-right:hover{
        background:
            linear-gradient(270deg,
                rgba(102,86,61,.06),
                rgba(255,255,255,0)) !important;
    }
}

/* Minimal hand cue on the actual right page edge, moving inward. */
.heirloom-reader-v2 .heirloom-gesture-hand{
    right:calc((100vw - min(1180px, calc(100vw - 140px))) / 2 + 10px) !important;
    animation:heirloomPaperSwipeCue 1.55s ease-in-out infinite !important;
}
@keyframes heirloomPaperSwipeCue{
    0%,100%{transform:translate(0,-50%);opacity:.68}
    50%{transform:translate(-38px,-50%);opacity:.95}
}

/* Keep photo dissolves independent from page navigation. */
.heirloom-reader-v2 .heirloom-photo-dissolve .heirloom-dissolve-image{
    transition:opacity 1.4s ease !important;
}

@media(max-width:700px){
    .heirloom-reader-v2 .heirloom-page-edge{
        width:14% !important;
        min-width:44px !important;
    }
    .heirloom-reader-v2 .heirloom-gesture-hand{
        right:8px !important;
    }
}


/* =========================================================
   DIGITAL HEIRLOOM PROTOTYPE 8 — CLEAN PAGE EDGE NAVIGATION
   Desktop interaction: click page edge only. No mouse drag.
   ========================================================= */

.heirloom-reader-v2 .heirloom-book{
    overflow:hidden;
    background:#fffdf7 !important;
}

.heirloom-reader-v2 .heirloom-page-slot{
    transform:none !important;
    box-shadow:none !important;
    animation:none !important;
    transition:opacity .58s ease !important;
}

.heirloom-reader-v2 .heirloom-page-slot.is-current{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.heirloom-reader-v2 .heirloom-page-slot.is-page-leaving{
    opacity:1;
    visibility:visible;
    pointer-events:none;
    z-index:3;
}

.heirloom-reader-v2 .heirloom-page-slot.is-page-arriving{
    visibility:visible;
    pointer-events:none;
    z-index:2;
}

/* Invisible, generous click zones on the actual page edges. */
.heirloom-reader-v2 .heirloom-page-edge{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:10% !important;
    min-width:58px !important;
    height:100% !important;
    z-index:40 !important;
    opacity:1 !important;
    pointer-events:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:transparent !important;
    transform:none !important;
    cursor:pointer !important;
}
.heirloom-reader-v2 .heirloom-page-edge-left{left:0 !important}
.heirloom-reader-v2 .heirloom-page-edge-right{right:0 !important}
.heirloom-reader-v2 .heirloom-page-edge:disabled{
    pointer-events:none !important;
    cursor:default !important;
}

/* First-page and second-page teaching cues only. */
.heirloom-reader-v2 .heirloom-page-edge::after{
    position:absolute;
    top:50%;
    width:44px;
    height:44px;
    display:none;
    place-items:center;
    transform:translateY(-50%);
    border-radius:50%;
    background:rgba(248,244,235,.94);
    border:1px solid rgba(67,85,78,.16);
    box-shadow:0 6px 20px rgba(45,38,29,.12);
    color:#476159;
    font-size:23px;
    content:"☝";
    filter:grayscale(1);
}

/* Page 1: right cue only. */
.heirloom-reader-v2[data-reader-page="0"] .heirloom-page-edge-right::after{
    display:grid;
    right:10px;
}

/* Page 2: cue on both edges. */
.heirloom-reader-v2[data-reader-page="1"] .heirloom-page-edge-right::after{
    display:grid;
    right:10px;
}
.heirloom-reader-v2[data-reader-page="1"] .heirloom-page-edge-left::after{
    display:grid;
    left:10px;
    transform:translateY(-50%) scaleX(-1);
}

/* From page 3 onward there are no visual navigation cues. */

/* Remove every legacy gesture tutorial. */
.heirloom-reader-v2 .heirloom-gesture-guide,
.heirloom-reader-v2 .heirloom-gesture-hand{
    display:none !important;
}

/* A tiny edge response on desktop confirms the clickable area without
   turning it back into a visible UI control. */
@media (hover:hover) and (pointer:fine){
    .heirloom-reader-v2 .heirloom-page-edge:not(:disabled):hover{
        background:linear-gradient(90deg,rgba(80,68,49,.035),transparent) !important;
    }
    .heirloom-reader-v2 .heirloom-page-edge-right:not(:disabled):hover{
        background:linear-gradient(270deg,rgba(80,68,49,.035),transparent) !important;
    }
}

@media(max-width:700px){
    .heirloom-reader-v2 .heirloom-page-edge{
        width:16% !important;
        min-width:48px !important;
    }
    .heirloom-reader-v2 .heirloom-page-edge::after{
        width:40px;
        height:40px;
        font-size:21px;
    }
}


/* ======================================================
   ANNIVERSARY HOME — CURRENT / NEXT JOURNEY ONLY
====================================================== */
.home-dashboard { gap: 20px; }
.home-journey-card { padding: 30px 24px 32px; }
.home-journey-card h3 {
    margin: 14px 0 8px;
    font-size: 1.35rem;
}
.home-journey-card .trip-status { display: inline-block; }
.home-journey-card .home-journey-dates { margin: 14px 0 22px; }
.home-journey-button { min-width: 170px; }
.home-journey-label {
    display: block;
    margin-bottom: 4px;
}


/* ======================================================
   MULTI-DEVICE JOURNEY TRANSFER — PHASE 1
====================================================== */
.settings-dashboard {
    gap: 22px;
}
.journey-transfer-settings {
    margin-top: 0;
}
.journey-transfer-settings select,
.journey-transfer-settings input[type="file"] {
    width: 100%;
}
.journey-transfer-divider {
    margin: 24px 0 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(67,85,78,.14);
    font-weight: 600;
}
.journey-transfer-file-label input {
    margin-top: 8px;
}

/* ============================================================
   TIME CAPSULE QA — HEIRLOOM PAGE EDGE NAVIGATION
   Mirrors the accepted Digital Heirloom Prototype 8 interaction:
   page-edge click zones, first/second-page hand teaching cues,
   then clean invisible navigation. Presentation only.
   ============================================================ */

.tc-deck-shell .tc-deck-stage{
    isolation:isolate;
}

.tc-deck-shell .tc-deck-slide{
    transition:opacity .58s ease;
}
.tc-deck-shell .tc-deck-slide.is-page-leaving{
    display:block;
    position:relative;
    z-index:3;
    pointer-events:none;
}
.tc-deck-shell .tc-deck-slide.is-page-arriving{
    position:absolute;
    inset:18px clamp(12px,3vw,30px);
    width:auto;
    height:auto;
    z-index:2;
    pointer-events:none;
}

/* Generous invisible click zones on the actual book edges. */
.tc-deck-shell .tc-page-edge{
    position:absolute;
    top:18px;
    bottom:18px;
    width:10%;
    min-width:58px;
    height:auto;
    z-index:40;
    opacity:1;
    pointer-events:auto;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:transparent;
    transform:none;
    cursor:pointer;
    padding:0;
}
.tc-deck-shell .tc-page-edge-left{left:0}
.tc-deck-shell .tc-page-edge-right{right:0}
.tc-deck-shell .tc-page-edge:disabled{
    pointer-events:none;
    cursor:default;
}

/* Same teaching cue as the Digital Heirloom: page 1 right edge,
   page 2 both edges, then no visible navigation furniture. */
.tc-deck-shell .tc-page-edge::after{
    position:absolute;
    top:50%;
    width:44px;
    height:44px;
    display:none;
    place-items:center;
    transform:translateY(-50%);
    border-radius:50%;
    background:rgba(248,244,235,.94);
    border:1px solid rgba(67,85,78,.16);
    box-shadow:0 6px 20px rgba(45,38,29,.12);
    color:#476159;
    font-size:23px;
    content:"☝";
    filter:grayscale(1);
}
.tc-deck-shell[data-reader-page="0"] .tc-page-edge-right::after{
    display:grid;
    right:10px;
}
.tc-deck-shell[data-reader-page="1"] .tc-page-edge-right::after{
    display:grid;
    right:10px;
}
.tc-deck-shell[data-reader-page="1"] .tc-page-edge-left::after{
    display:grid;
    left:10px;
    transform:translateY(-50%) scaleX(-1);
}

@media (hover:hover) and (pointer:fine){
    .tc-deck-shell .tc-page-edge:not(:disabled):hover{
        background:linear-gradient(90deg,rgba(80,68,49,.035),transparent);
    }
    .tc-deck-shell .tc-page-edge-right:not(:disabled):hover{
        background:linear-gradient(270deg,rgba(80,68,49,.035),transparent);
    }
}

@media(max-width:700px){
    .tc-deck-shell .tc-page-edge{
        top:8px;
        bottom:8px;
        width:16%;
        min-width:48px;
    }
    .tc-deck-shell .tc-page-edge::after{
        width:40px;
        height:40px;
        font-size:21px;
    }
    .tc-deck-shell .tc-deck-slide.is-page-arriving{
        inset:8px;
    }
}

@media(prefers-reduced-motion:reduce){
    .tc-deck-shell .tc-deck-slide{
        transition:none !important;
    }
}


/* ============================================================
   TIME CAPSULE QA — CAPTIONED PHOTO PRESENTATION
   Keeps a photo caption visually attached to its photograph while
   giving it an intentional editorial position within the book page.
   ============================================================ */
.tc-deck-shell .tc-page-photo .tc-photo-caption{
    justify-self:center;
    width:min(760px,88%);
    box-sizing:border-box;
    margin:2px auto 0;
    padding:10px 18px 0;
    border-top:1px solid #e4dfd4;
    color:#626862;
    text-align:center;
    font:italic .98rem/1.55 Georgia,"Times New Roman",serif;
    overflow-wrap:anywhere;
}

@media(max-width:700px){
    .tc-deck-shell .tc-page-photo .tc-photo-caption{
        width:92%;
        margin-top:0;
        padding:8px 10px 0;
        font-size:.84rem;
        line-height:1.4;
    }
}


/* ============================================================
   TIME CAPSULE QA — MOMENT CONTEXT + VIDEO CAPTION ALIGNMENT
   Anniversary presentation rule: remembered Moment pages show
   day + place only (never itinerary time). Video captions use
   the same centred editorial treatment as photo captions.
   ============================================================ */
.tc-deck-shell .tc-video-page .tc-page-media-caption{
    justify-self:center;
    width:min(760px,88%);
    box-sizing:border-box;
    margin:2px auto 0;
    padding:10px 18px 0;
    border-top:1px solid #e4dfd4;
    color:#626862;
    text-align:center;
    font:italic .98rem/1.55 Georgia,"Times New Roman",serif;
    overflow-wrap:anywhere;
}

@media(max-width:700px){
    .tc-deck-shell .tc-video-page .tc-page-media-caption{
        width:92%;
        margin-top:0;
        padding:8px 10px 0;
        font-size:.84rem;
        line-height:1.4;
    }
}


/* ============================================================
   TIME CAPSULE QA — REMEMBERED MOMENT HEADER RHYTHM
   Editorial hierarchy: curation label -> Moment title -> day/place.
   Day/place is contextual metadata, never a competing title column.
   ============================================================ */
.tc-deck-shell .tc-photo-page-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
}
.tc-deck-shell .tc-photo-page-meta .tc-book-kicker{
    margin-bottom:1px;
}
.tc-deck-shell .tc-photo-page-meta h2{
    width:100%;
    margin:0;
}
.tc-deck-shell .tc-photo-page-meta .tc-memory-context{
    margin-top:2px;
    color:#8a806f;
    font:.8rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
    letter-spacing:.01em;
}

@media(max-width:700px){
    .tc-deck-shell .tc-photo-page-meta{gap:2px;}
    .tc-deck-shell .tc-photo-page-meta .tc-memory-context{
        margin-top:1px;
        font-size:.74rem;
    }
}

/* ============================================================
   TIME CAPSULE QA — VIDEO CONTROLS TAKE PRIORITY OVER PAGE EDGES
   On video pages the invisible page-turn zones stay on the true
   outer book edge, clear of the native video controls. While the
   video is playing, page turns are locked until pause/end.
   ============================================================ */
.tc-deck-shell[data-reader-kind="video"] .tc-page-edge{
    width:clamp(18px,3.8vw,52px);
    min-width:0;
}

.tc-deck-shell.tc-media-playing .tc-page-edge{
    pointer-events:none !important;
    cursor:default;
}

@media(max-width:700px){
    .tc-deck-shell[data-reader-kind="video"] .tc-page-edge{
        width:18px;
        min-width:0;
    }
}

/* ============================================================
   TIME CAPSULE QA — VIDEO REST / PLAY BOOK GUTTERS
   Resting video is deliberately narrower and centred so the true
   left/right book edges remain clear and reliable for page turns.
   Playback expands the video to the accepted large presentation;
   pause/end returns it to rest and restores the book gutters.
   ============================================================ */
.tc-deck-shell[data-reader-kind="video"] .tc-page-video{
    justify-self:center;
    transition:width .30s ease, max-width .30s ease;
}

/* Resting state: leave generous, genuinely empty book gutters. */
.tc-deck-shell:not(.tc-media-playing) .tc-video-page .tc-page-video{
    width:78%;
    max-width:900px;
}
.tc-deck-shell[data-reader-kind="video"]:not(.tc-media-playing) .tc-page-edge{
    width:9%;
    min-width:68px;
    pointer-events:auto;
}

/* Playback state: use the full media area and lock all page edges. */
.tc-deck-shell.tc-media-playing .tc-video-page .tc-page-video{
    width:100%;
    max-width:none;
}
.tc-deck-shell[data-reader-kind="video"].tc-media-playing .tc-page-edge{
    pointer-events:none !important;
}

@media(max-width:700px){
    .tc-deck-shell:not(.tc-media-playing) .tc-video-page .tc-page-video{
        width:70%;
        max-width:none;
    }
    .tc-deck-shell[data-reader-kind="video"]:not(.tc-media-playing) .tc-page-edge{
        width:13%;
        min-width:44px;
    }
}

@media(prefers-reduced-motion:reduce){
    .tc-deck-shell[data-reader-kind="video"] .tc-page-video{
        transition:none !important;
    }
}

/* ============================================================
   ANNIVERSARY QA — DIGITAL HEIRLOOM MULTIMEDIA HIERARCHY
   A Moment remains the anchor. Additional sound and movement
   receive their own pages instead of competing on one spread.
   ============================================================ */
.heirloom-reader-v2 .heirloom-memory-anchor .heirloom-memory-media{
    background:#171b1a;
}
.heirloom-reader-v2 .heirloom-memory-anchor .heirloom-plan-note{
    margin:16px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(151,132,101,.24);
}
.heirloom-reader-v2 .heirloom-memory-anchor .heirloom-plan-note span{
    display:block;
    margin-bottom:6px;
    color:#a47d46;
    font:700 .62rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
    letter-spacing:.22em;
}
.heirloom-reader-v2 .heirloom-memory-anchor .heirloom-plan-note p{
    margin:0;
    color:#5f625d;
    font:400 .94rem/1.55 Georgia,"Times New Roman",serif;
}

.heirloom-reader-v2 .heirloom-voice-page{
    display:grid;
    grid-template-columns:1.28fr .72fr;
    height:100%;
    min-height:0;
    background:#fffdf7;
}
.heirloom-reader-v2 .heirloom-voice-visual{
    margin:0;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#171b1a;
}
.heirloom-reader-v2 .heirloom-voice-visual img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:brightness(1.04) contrast(1.02) saturate(1.02);
}
.heirloom-reader-v2 .heirloom-voice-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:clamp(40px,5.5vw,76px);
    color:#273631;
}
.heirloom-reader-v2 .heirloom-voice-copy h3{
    margin:14px 0 12px;
    font:400 clamp(34px,4vw,55px)/1.06 Georgia,"Times New Roman",serif;
}
.heirloom-reader-v2 .heirloom-voice-moment-title{
    margin:0 0 30px;
    color:#777064;
    font:italic 1rem/1.5 Georgia,"Times New Roman",serif;
}
.heirloom-reader-v2 .heirloom-voice-copy audio{
    width:100%;
    margin:0;
}
.heirloom-reader-v2 .heirloom-media-caption{
    width:min(680px,88%);
    margin:14px auto 0;
    padding-top:11px;
    border-top:1px solid #e4dfd4;
    color:#626862;
    text-align:center;
    font:italic .96rem/1.5 Georgia,"Times New Roman",serif;
}
.heirloom-reader-v2 .heirloom-media-sequence{
    display:block;
    margin-top:16px;
    color:#908777;
    text-align:center;
    font:600 .68rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.heirloom-reader-v2 .heirloom-video-page{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    align-items:center;
    height:100%;
    min-height:0;
    padding:clamp(26px,3.4vw,46px) clamp(54px,7vw,94px) clamp(24px,3vw,40px);
    box-sizing:border-box;
    background:#fffdf7;
    color:#273631;
}
.heirloom-reader-v2 .heirloom-video-page-copy{
    width:86%;
    margin:0 auto 14px;
}
.heirloom-reader-v2 .heirloom-video-page-copy h3{
    margin:8px 0 0;
    font:400 clamp(30px,3.7vw,52px)/1.06 Georgia,"Times New Roman",serif;
}
.heirloom-reader-v2 .heirloom-video-page-media{
    width:86%;
    height:100%;
    min-height:0;
    margin:0 auto;
    display:grid;
    place-items:center;
    background:#111;
    overflow:hidden;
}
.heirloom-reader-v2 .heirloom-video-page-media video{
    width:100%;
    height:100%;
    max-height:100%;
    display:block;
    object-fit:contain;
    background:#111;
}
.heirloom-reader-v2 .heirloom-video-caption{
    margin-top:12px;
}

/* Keep video controls safely outside the invisible book-edge controls. */
.heirloom-reader-v2[data-reader-kind="video"] .heirloom-page-edge{
    width:6% !important;
    min-width:44px !important;
}
.heirloom-reader-v2.heirloom-media-playing .heirloom-page-edge{
    pointer-events:none !important;
    cursor:default !important;
}

@media(max-width:800px){
    .heirloom-reader-v2 .heirloom-voice-page{
        grid-template-columns:1fr;
        grid-template-rows:58% 42%;
    }
    .heirloom-reader-v2 .heirloom-voice-copy{
        padding:26px 26px 34px;
    }
    .heirloom-reader-v2 .heirloom-voice-copy h3{
        font-size:clamp(29px,8vw,42px);
        margin:8px 0 8px;
    }
    .heirloom-reader-v2 .heirloom-voice-moment-title{
        margin-bottom:16px;
    }
    .heirloom-reader-v2 .heirloom-video-page{
        padding:28px 30px 34px;
    }
    .heirloom-reader-v2 .heirloom-video-page-copy,
    .heirloom-reader-v2 .heirloom-video-page-media{
        width:82%;
    }
    .heirloom-reader-v2[data-reader-kind="video"] .heirloom-page-edge{
        width:8% !important;
        min-width:34px !important;
    }
}

/* ============================================================
   ANNIVERSARY QA — TIME CAPSULE VIDEO FIRST-PAINT CENTRING
   The reduced resting video is centred before the incoming page
   becomes visible; it no longer waits for reader-kind to update.
   ============================================================ */
.tc-deck-shell .tc-video-page .tc-page-video{
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* =============================================================
   OMOIDE ATLAS — ANNIVERSARY BRAND INTEGRATION
   Visual-only rebrand layered over the protected V4 working model.
   Internal storage/schema identifiers deliberately remain unchanged.
============================================================= */
:root{
    --oa-charcoal:#1f1f1f;
    --oa-stone:#cdc2b1;
    --oa-ivory:#f6f2eb;
    --oa-paper:#fbf7ef;
    --oa-sage:#7d8b7a;
    --oa-terracotta:#c56a4a;
    --oa-night:#2d3a4a;
    --oa-brass:#b08a4c;
    --oa-brass-light:#d2b778;
    --oa-ink:#20292c;

    --primary:var(--oa-night);
    --primary-hover:#3b4856;
    --secondary:#eee8dd;
    --secondary-hover:#e5ddcf;
    --text:var(--oa-ink);
    --text-light:#746f66;
    --secondary-text:#746f66;
    --border:#ded4c4;
    --background:var(--oa-ivory);
    --white:#fffdf8;
    --card:#fffdf8;
    --card-shadow:0 18px 44px rgba(54,45,33,.10);
}

html{background:var(--oa-ivory);}
body{
    font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
    background:
        linear-gradient(rgba(246,242,235,.965),rgba(246,242,235,.965)),
        url("../Assets/Brand/omoide-atlas-contours.svg") center top/980px auto repeat-y;
    color:var(--oa-ink);
}
main{
    align-items:flex-start;
    font-size:1rem;
    min-width:0;
}

h1,h2,h3,.page-heading h2,.trip-card-details h3,.trip-detail-overlay h2,
.trip-form h2,.trip-form h3,.oa-feature-title,.oa-library-card-copy strong{
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}

/* Compact master brand bar — deliberately quiet so Home can carry the hero identity. */
.app-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px clamp(18px,4vw,54px);
    background:var(--oa-charcoal);
    color:var(--oa-ivory);
    border-bottom:1px solid rgba(210,183,120,.3);
    box-shadow:0 4px 22px rgba(26,24,21,.18);
}
.brand-home-button{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
}
.brand-header-mark{
    width:42px;height:42px;
    color:var(--oa-brass-light);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
}
.brand-header-copy{display:grid;gap:1px;text-align:left;}
.brand-header-name{
    color:#f4ead5;
    font:500 1.05rem/1 "Cormorant Garamond",serif;
    letter-spacing:.18em;
}
.brand-header-japanese{
    color:var(--oa-brass-light);
    font:500 .62rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.28em;
}
.brand-header-line{
    color:#bdb5a7;
    font:italic .9rem/1.2 "Cormorant Garamond",serif;
    letter-spacing:.035em;
}

/* Brand navigation */
.app-nav{
    position:sticky;
    bottom:0;
    z-index:850;
    gap:2px;
    padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:rgba(31,31,31,.97);
    border-top:1px solid rgba(210,183,120,.3);
    box-shadow:0 -10px 30px rgba(30,26,21,.12);
    backdrop-filter:blur(14px);
}
.app-nav button{
    flex:1;
    min-width:0;
    padding:7px 4px 5px;
    gap:3px;
    color:#c9c1b5;
    border-radius:12px;
    font-family:"Montserrat",sans-serif;
}
.app-nav button span:last-child{
    font-size:.66rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.app-nav .nav-line-icon{
    display:grid;
    place-items:center;
    width:28px;height:28px;
    color:#cfc5b4;
    font:500 1.3rem/1 "Cormorant Garamond",serif;
    border:1px solid transparent;
    border-radius:50%;
}
.app-nav button.active,
.app-nav button:hover{color:var(--oa-brass-light);transform:none;}
.app-nav button.active .nav-line-icon{
    border-color:rgba(210,183,120,.55);
    color:var(--oa-brass-light);
    background:rgba(176,138,76,.1);
}

/* Global UI alignment with the atlas palette. */
.primary-button{
    background:var(--oa-night);
    border-color:var(--oa-night);
    color:#fffaf0;
    box-shadow:0 6px 16px rgba(45,58,74,.12);
}
.primary-button:hover{background:#394a5c;border-color:#394a5c;}
.secondary-button{
    background:#f4eee4;
    color:var(--oa-night);
    border-color:#d9cebd;
}
.back-button{
    color:var(--oa-night);
    background:rgba(255,253,248,.88);
    border:1px solid #ded4c4;
    box-shadow:0 5px 18px rgba(54,45,33,.06);
}
.back-button:hover{background:#efe8dc;color:var(--oa-charcoal);}

.dashboard{width:min(1040px,92%);}
.page-heading{align-items:flex-end;}
.page-heading h2{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:500;color:var(--oa-ink);}
.page-heading p{color:#777064;}
.oa-kicker{
    display:block;
    color:var(--oa-brass);
    font:700 .68rem/1.3 "Montserrat",sans-serif;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.welcome-card,.countdown-card,.dashboard-item,.summary-box,.trip-form{
    background:rgba(255,253,248,.94);
    border:1px solid rgba(205,194,177,.65);
    box-shadow:var(--card-shadow);
}
.summary-box strong{color:var(--oa-night);font-family:"Cormorant Garamond",serif;font-weight:600;}

.trip-card{
    background:#fffdf8;
    border:1px solid rgba(205,194,177,.7);
    box-shadow:0 16px 36px rgba(61,49,35,.10);
}
.trip-cover::after{
    background:linear-gradient(180deg,transparent 50%,rgba(20,24,27,.20) 100%);
}
.trip-card-details h3{font-size:1.9rem;font-weight:500;color:var(--oa-ink);}
.trip-status{
    background:#eee7d9 !important;
    color:#765e35 !important;
    border:1px solid #ddcfb7;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.trip-actions button{
    border-color:#ddd0bd;
    background:#faf5ec;
    color:#5d574e;
}
.trip-actions button:hover{background:#eee4d4;}

.trip-detail-hero{
    border:1px solid rgba(205,194,177,.8);
    box-shadow:0 18px 46px rgba(57,46,32,.14);
}
.trip-detail-overlay{
    background:linear-gradient(180deg,rgba(20,24,25,0) 0%,rgba(20,24,25,.78) 100%);
}
.trip-detail-overlay h2{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:500;letter-spacing:.01em;}
.trip-hub-card{
    background:#fffdf8;
    border-color:#ded4c4;
    box-shadow:0 12px 26px rgba(62,50,35,.075);
}
.trip-hub-card:hover{
    border-color:#bda77e;
    background:#fbf6ed;
}
.trip-hub-card > span{background:#eee8dc;color:#7a653e;}
.trip-hub-card h3{font-size:1.45rem;font-weight:600;color:var(--oa-ink);}

.trip-form input,.trip-form textarea,.trip-form select,
.time-capsule-form textarea{
    background:#fffdf8;
    border-color:#d7ccbb;
    color:var(--oa-ink);
}
.trip-form input:focus,.trip-form textarea:focus,.trip-form select:focus,
.time-capsule-form textarea:focus{
    border-color:#a88a59;
    box-shadow:0 0 0 3px rgba(176,138,76,.12);
}

/* =============================
   OMOIDE ATLAS HOME
============================= */
.omoide-home{
    width:min(920px,100%);
    margin:0 auto;
    padding:clamp(30px,5vw,64px) clamp(16px,4vw,34px) 54px;
    display:grid;
    gap:16px;
}
.oa-brand-masthead{
    position:relative;
    padding:10px 10px 18px;
    text-align:center;
}
.oa-masthead-mark{
    width:70px;height:70px;
    margin:0 auto 4px;
    color:var(--oa-brass);
}
.oa-japanese{
    margin-top:1px;
    color:#8f7142;
    font:500 1rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.28em;
}
.oa-brand-masthead h1{
    margin:8px 0 0;
    color:#20282b;
    font:500 clamp(2.8rem,8vw,5.2rem)/.95 "Cormorant Garamond",Georgia,serif;
    letter-spacing:.105em;
}
.oa-meaning{
    margin:12px auto 0;
    color:#5e5a54;
    font:400 clamp(1.03rem,2.5vw,1.28rem)/1.4 "Cormorant Garamond",serif;
    letter-spacing:.025em;
}
.oa-meaning em{color:#514a41;}
.oa-rule{
    width:min(330px,70%);
    margin:14px auto 11px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:9px;
}
.oa-rule span{height:1px;background:linear-gradient(90deg,transparent,#b89a62);}
.oa-rule span:last-child{background:linear-gradient(90deg,#b89a62,transparent);}
.oa-rule i{width:7px;height:7px;background:var(--oa-brass);border-radius:50%;box-shadow:0 0 0 5px rgba(176,138,76,.08);}
.oa-strapline{
    margin:0;
    color:#403d38;
    font:600 .69rem/1.5 "Montserrat",sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.oa-atlas-hero{
    position:relative;
    min-height:clamp(270px,47vw,430px);
    overflow:hidden;
    border:1px solid #cfc1ad;
    border-radius:25px;
    background-size:cover;
    box-shadow:0 18px 40px rgba(48,39,30,.14);
    isolation:isolate;
}
.oa-hero-shade{
    position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(18,22,24,.04),rgba(18,22,24,.42));
}
.oa-hero-contours{
    position:absolute;inset:auto -10% -12% -10%;z-index:1;
    width:120%;height:auto;
    filter:brightness(1.6);
    opacity:.65;
}
.oa-route-overlay{position:absolute;inset:0;z-index:2;width:100%;height:100%;}
.oa-route-overlay path{
    fill:none;stroke:#f2e6cc;stroke-width:2.2;stroke-dasharray:9 9;stroke-linecap:round;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.oa-route-overlay circle{fill:#f5eddd;stroke:#9f7e47;stroke-width:3;}
.oa-route-overlay .route-destination{fill:rgba(31,31,31,.48);stroke:#e7d2a6;stroke-width:4;}
.oa-hero-note{
    position:absolute;z-index:3;left:clamp(18px,4vw,36px);bottom:clamp(18px,4vw,32px);
    max-width:70%;
    color:#fff9ed;
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.oa-hero-note span{display:block;margin-bottom:5px;font:600 .64rem/1.2 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;}
.oa-hero-note strong{font:500 clamp(1.65rem,4.6vw,3.15rem)/1 "Cormorant Garamond",serif;}

.oa-current-journey-card{
    position:relative;
    display:grid;
    grid-template-columns:120px 1fr auto;
    align-items:center;
    gap:20px;
    margin:-10px 18px 0;
    padding:18px 20px;
    background:rgba(255,253,248,.97);
    border:1px solid #d8cab6;
    border-radius:21px;
    box-shadow:0 15px 30px rgba(49,39,28,.12);
    z-index:4;
}
.oa-current-thumb{width:112px;height:112px;border-radius:50%;background-size:cover;border:5px solid #f5eee3;box-shadow:0 0 0 1px #cdbb9e;}
.oa-current-copy{min-width:0;}
.oa-current-copy h2{margin:4px 0 5px;color:#293033;font:500 clamp(1.8rem,4.8vw,2.75rem)/1 "Cormorant Garamond",serif;}
.oa-current-dates{margin:0;color:#665f55;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;}
.oa-current-countdown{margin:5px 0 0;color:#9a7540;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;}
.oa-round-action{
    display:grid;place-items:center;
    width:54px;height:54px;border-radius:50%;
    border:1px solid #2d3a4a;background:#2d3a4a;color:#f9f1e3;
    font:400 1.6rem/1 "Cormorant Garamond",serif;cursor:pointer;
    transition:transform .2s ease,background .2s ease;
}
.oa-round-action:hover{transform:translateY(-2px);background:#394a5b;}
.oa-current-empty{grid-template-columns:1fr auto;margin-top:-7px;}

.oa-new-journey-card{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    width:calc(100% - 36px);
    margin:0 18px;
    padding:22px 24px;
    overflow:hidden;
    border:1px solid rgba(210,183,120,.55);
    border-radius:21px;
    background:
        linear-gradient(rgba(31,31,31,.96),rgba(31,31,31,.96)),
        url("../Assets/Brand/omoide-atlas-contours.svg") center/cover;
    color:#f7efe1;
    text-align:left;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(28,26,23,.16);
}
.oa-new-journey-emblem{display:grid;place-items:center;width:56px;height:56px;border:1px solid #b08a4c;border-radius:50%;color:#d6b771;font-size:1.4rem;}
.oa-new-journey-copy{display:grid;gap:3px;}
.oa-new-journey-copy strong{font:500 1.75rem/1.05 "Cormorant Garamond",serif;color:#f2e6cf;}
.oa-new-journey-copy small{font-size:.8rem;line-height:1.5;color:#c9c0b2;}
.oa-new-journey-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f4eee4;color:#9a7540;font-size:1.4rem;}

.oa-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 18px;}
.oa-feature-card{
    position:relative;
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    gap:7px;
    overflow:hidden;
    padding:24px;
    border:1px solid #d4c6b1;
    border-radius:20px;
    color:#f8f1e5;
    text-align:left;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(52,42,30,.12);
}
.oa-feature-card::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:url("../Assets/Brand/omoide-atlas-contours.svg") center/160% auto no-repeat;
    opacity:.35;
}
.oa-feature-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 18%,rgba(17,21,23,.92) 100%);}
.oa-heirloom-card{background:linear-gradient(145deg,#6f6659,#242729);}
.oa-capsule-card{background:linear-gradient(145deg,#554634,#1d2225);}
.oa-feature-card > span{position:relative;z-index:1;}
.oa-feature-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:auto;border:1px solid rgba(210,183,120,.7);border-radius:50%;color:#d2b778;font-size:1.25rem;}
.oa-feature-title{font-size:2rem;line-height:1;color:#fff4df;}
.oa-feature-copy{max-width:34ch;color:#ddd3c4;font-size:.78rem;line-height:1.52;}
.oa-feature-link{margin-top:5px;color:#d2b778;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.oa-home-greeting{margin:10px 18px 0;text-align:center;color:#928a7e;font:italic .92rem/1.4 "Cormorant Garamond",serif;}

/* =============================
   HEIRLOOM / CAPSULE LIBRARIES
============================= */
.oa-library-page{padding-top:40px;padding-bottom:58px;}
.oa-library-heading{padding:0 2px 6px;}
.oa-library-heading h2{margin:5px 0 5px;font:500 clamp(2.4rem,5vw,3.8rem)/1 "Cormorant Garamond",serif;color:#222a2d;}
.oa-library-heading p{margin:0;color:#706a61;}
.oa-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.oa-library-card{
    min-width:0;
    display:grid;
    grid-template-columns:42% 58%;
    padding:0;
    overflow:hidden;
    border:1px solid #d9cdbd;
    border-radius:22px;
    background:#fffdf8;
    text-align:left;
    color:inherit;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(55,45,32,.09);
}
.oa-library-image{display:block;min-height:210px;background-size:cover;}
.oa-library-card-copy{display:flex;flex-direction:column;justify-content:center;padding:22px;min-width:0;}
.oa-library-card-copy strong{margin:6px 0 7px;font-size:1.75rem;line-height:1.02;font-weight:600;color:#262e30;}
.oa-library-card-copy small{color:#766f65;line-height:1.45;}
.oa-library-card-copy em{margin-top:16px;color:#98743d;font:600 .67rem/1.3 "Montserrat",sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;}
.oa-capsule-library-image{display:grid;place-items:center;background:linear-gradient(145deg,#202427,#3c342a);}
.oa-capsule-library-image img{width:100px;color:#cfad69;filter:sepia(.25) brightness(1.45);}
.oa-branded-empty{grid-column:1/-1;width:100%;background:#fffdf8;border:1px solid #d9cdbd;}
.oa-branded-empty img{width:76px;margin-bottom:10px;color:#a78249;}

/* Settings become the Profile area in the branded shell, while functionality remains unchanged. */
.settings-dashboard::before{
    content:"Profile & Settings";
    display:block;
    margin-bottom:2px;
    color:#263034;
    font:500 clamp(2.3rem,5vw,3.5rem)/1 "Cormorant Garamond",serif;
}
.settings-dashboard::after{
    content:"Identity, device details and journey transfer live here.";
    display:block;
    order:-1;
    margin:-12px 0 8px;
    color:#797167;
    font-size:.85rem;
}

/* Brand names inside the Time Capsule and Heirloom keep their editorial layouts. */
.time-capsule-eyebrow,.tc-book-kicker,.heirloom-kicker{
    letter-spacing:.19em;
}

@media(max-width:760px){
    .app-header{padding:9px 14px;}
    .brand-header-mark{width:36px;height:36px;}
    .brand-header-name{font-size:.91rem;letter-spacing:.14em;}
    .brand-header-line{display:none;}
    .app-nav{padding-top:6px;}
    .app-nav button span:last-child{font-size:.58rem;letter-spacing:.04em;}
    .app-nav .nav-line-icon{width:25px;height:25px;font-size:1.13rem;}

    .omoide-home{padding:24px 10px 38px;gap:12px;}
    .oa-masthead-mark{width:56px;height:56px;}
    .oa-brand-masthead h1{font-size:clamp(2.35rem,11.5vw,3.4rem);letter-spacing:.055em;}
    .oa-japanese{font-size:.78rem;}
    .oa-meaning{font-size:1rem;}
    .oa-strapline{font-size:.58rem;letter-spacing:.12em;}
    .oa-atlas-hero{min-height:300px;border-radius:20px;}
    .oa-hero-note{max-width:82%;}

    .oa-current-journey-card{
        grid-template-columns:82px 1fr auto;
        gap:12px;
        margin:-8px 10px 0;
        padding:14px;
        border-radius:18px;
    }
    .oa-current-thumb{width:76px;height:76px;border-width:4px;}
    .oa-current-copy h2{font-size:1.72rem;}
    .oa-current-dates,.oa-current-countdown{font-size:.66rem;}
    .oa-round-action{width:44px;height:44px;font-size:1.25rem;}
    .oa-current-empty{grid-template-columns:1fr auto;}

    .oa-new-journey-card{width:calc(100% - 20px);margin:0 10px;padding:18px 17px;gap:12px;}
    .oa-new-journey-emblem{width:45px;height:45px;}
    .oa-new-journey-copy strong{font-size:1.5rem;}
    .oa-new-journey-copy small{font-size:.7rem;}
    .oa-new-journey-arrow{width:39px;height:39px;}

    .oa-feature-grid{grid-template-columns:1fr 1fr;margin:0 10px;gap:10px;}
    .oa-feature-card{min-height:220px;padding:18px;}
    .oa-feature-title{font-size:1.55rem;}
    .oa-feature-copy{font-size:.7rem;}
    .oa-home-greeting{margin-left:10px;margin-right:10px;}

    .oa-library-grid{grid-template-columns:1fr;}
    .oa-library-card{grid-template-columns:38% 62%;}
    .oa-library-image{min-height:170px;}
    .oa-library-card-copy{padding:18px;}
    .oa-library-card-copy strong{font-size:1.55rem;}
}

@media(max-width:430px){
    .oa-feature-grid{grid-template-columns:1fr;}
    .oa-feature-card{min-height:190px;}
    .oa-current-journey-card{grid-template-columns:62px 1fr auto;}
    .oa-current-thumb{width:58px;height:58px;}
    .oa-current-copy h2{font-size:1.42rem;}
    .oa-current-dates{display:none;}
    .oa-new-journey-card{grid-template-columns:auto 1fr auto;}
    .oa-new-journey-emblem{width:40px;height:40px;}
    .oa-new-journey-copy small{display:none;}
    .oa-library-card{grid-template-columns:1fr;}
    .oa-library-image{min-height:170px;}
}

@media(prefers-reduced-motion:reduce){
    .oa-round-action,.primary-button,.secondary-button,.trip-hub-card,.app-nav button{transition:none!important;}
}
.settings-dashboard::before{order:-2;}
.settings-dashboard::after{order:-1;}
.oa-home-mode .app-header{display:none;}
/* Final shell tuning: desktop navigation belongs after content; mobile retains the app-style bottom bar. */
.app-nav{position:static;}
.oa-brand-masthead h1{white-space:nowrap;}
@media(max-width:760px){
    .app-nav{position:sticky;bottom:0;}
    .oa-brand-masthead h1{font-size:clamp(2.05rem,9vw,3rem);letter-spacing:.045em;}
    main{padding-bottom:0;}
}

/* ============================================================
   OMOIDE ATLAS — SETTINGS INDEX + JOURNEY TRANSFER POLISH
   User-facing organisation only. Transfer/merge logic unchanged.
   ============================================================ */
.oa-settings-page,
.oa-settings-subpage{
    width:min(1040px,calc(100% - 36px));
    margin:0 auto;
    padding:42px 0 64px;
    align-self:flex-start;
}
.oa-settings-heading{max-width:760px;margin-bottom:24px;}
.oa-settings-heading h2{
    margin:5px 0 8px;
    color:#263034;
    font:500 clamp(2.6rem,6vw,4.2rem)/.95 "Cormorant Garamond",serif;
}
.oa-settings-heading p{margin:0;color:#736c63;font-size:.94rem;line-height:1.7;}
.oa-settings-subheading{margin-bottom:28px;}

.oa-settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.oa-settings-card{
    min-width:0;
    min-height:176px;
    display:grid;
    grid-template-columns:54px 1fr;
    gap:18px;
    align-items:start;
    padding:24px;
    border:1px solid #d9cdbd;
    border-radius:22px;
    background:#fffdf8;
    color:#273034;
    text-align:left;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(55,45,32,.07);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
button.oa-settings-card:hover{
    transform:translateY(-2px);
    border-color:#c9b58f;
    box-shadow:0 17px 34px rgba(55,45,32,.11);
}
.oa-settings-card-icon{
    display:grid;
    place-items:center;
    width:52px;height:52px;
    border:1px solid #c9ab70;
    border-radius:50%;
    background:#f7f1e6;
    color:#9d793f;
    font:500 1.3rem/1 "Montserrat",sans-serif;
}
.oa-settings-card-copy{display:flex;flex-direction:column;min-width:0;}
.oa-settings-card-copy strong{margin:5px 0 7px;font:500 1.85rem/1.05 "Cormorant Garamond",serif;}
.oa-settings-card-copy small{color:#716b63;font-size:.79rem;line-height:1.55;}
.oa-settings-card-copy em{margin-top:16px;color:#98743d;font:600 .65rem/1.3 "Montserrat",sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;}
.oa-settings-card-planned{cursor:default;background:linear-gradient(145deg,#f7f3ea,#f1ece2);opacity:.76;}

.oa-settings-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 28px;
    padding:9px 13px;
    border:1px solid #d7c9b4;
    border-radius:999px;
    background:#fffdf8;
    color:#705e43;
    font:600 .72rem/1 "Montserrat",sans-serif;
    letter-spacing:.03em;
    cursor:pointer;
}
.oa-settings-back:hover{background:#f6efe4;}

.oa-settings-form{
    width:min(620px,100%);
    padding:28px;
    border:1px solid #d9cdbd;
    border-radius:22px;
    background:#fffdf8;
    box-shadow:0 14px 30px rgba(55,45,32,.07);
}
.oa-settings-form label,
.oa-transfer-field{display:block;margin-bottom:20px;color:#283134;font-size:.83rem;font-weight:600;}
.oa-settings-form label > span,
.oa-transfer-field > span:first-child{display:block;margin-bottom:8px;}
.oa-settings-form input{
    width:100%;
    margin:0;
    padding:14px 15px;
    border:1px solid #d7c9b4;
    border-radius:14px;
    background:#fbf8f2;
    color:#242b2e;
    font:inherit;
}
.oa-settings-form input:focus,
.oa-transfer-panel select:focus,
.oa-transfer-panel input[type="file"]:focus{
    outline:none;
    border-color:#ad8a50;
    box-shadow:0 0 0 3px rgba(176,138,76,.10);
}
.oa-settings-note{
    padding:15px 17px;
    border:1px solid #ddd0bd;
    border-radius:15px;
    background:#f8f3e9;
    color:#696158;
    font-size:.78rem;
    line-height:1.6;
}
.oa-settings-primary-action{width:100%;margin-top:20px;min-height:48px;background:#2d3a4a;border-color:#2d3a4a;}
.oa-settings-primary-action:hover{background:#394a5b;border-color:#394a5b;}

.oa-transfer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;}
.oa-transfer-panel{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:365px;
    padding:28px;
    border:1px solid #d9cdbd;
    border-radius:24px;
    background:#fffdf8;
    box-shadow:0 14px 30px rgba(55,45,32,.07);
}
.oa-transfer-panel-import{background:linear-gradient(150deg,#fffdf8,#f6f0e5);}
.oa-transfer-panel-heading{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;margin-bottom:16px;}
.oa-transfer-step{display:grid;place-items:center;width:44px;height:44px;border:1px solid #c8a86e;border-radius:50%;color:#9b7438;font:600 .67rem/1 "Montserrat",sans-serif;letter-spacing:.08em;}
.oa-transfer-panel h3{margin:4px 0 0;color:#283033;font:500 2rem/1 "Cormorant Garamond",serif;}
.oa-transfer-panel > p{min-height:48px;margin:0 0 22px;color:#756e65;font-size:.81rem;line-height:1.55;}
.oa-select-wrap{position:relative;display:block;}
.oa-select-wrap::after{content:"⌄";position:absolute;right:15px;top:50%;transform:translateY(-55%);color:#80643a;pointer-events:none;font-size:1rem;}
.oa-transfer-panel select{
    width:100%;
    min-height:52px;
    appearance:none;
    -webkit-appearance:none;
    padding:0 42px 0 15px;
    border:1px solid #d7c9b4;
    border-radius:14px;
    background:#fbf8f2;
    color:#283033;
    font:500 .82rem/1.3 "Montserrat",sans-serif;
}
.oa-transfer-file-field{margin-bottom:20px;}
.oa-transfer-panel input[type="file"]{
    width:100%;
    min-height:52px;
    margin:0;
    padding:7px;
    border:1px solid #d7c9b4;
    border-radius:14px;
    background:#fbf8f2;
    color:#625b52;
    font:500 .76rem/1.3 "Montserrat",sans-serif;
}
.oa-transfer-panel input[type="file"]::file-selector-button{
    min-height:36px;
    margin-right:10px;
    padding:8px 12px;
    border:1px solid #c9b99f;
    border-radius:10px;
    background:#f4ede1;
    color:#5b4d39;
    font:600 .72rem/1 "Montserrat",sans-serif;
    cursor:pointer;
}
.oa-transfer-action{
    width:100%;
    min-height:50px;
    margin-top:auto;
    background:#2d3a4a;
    border-color:#2d3a4a;
    border-radius:14px;
    font-size:.88rem;
}
.oa-transfer-action:hover{background:#394a5b;border-color:#394a5b;}
.oa-transfer-action:disabled{background:#ddd7cc;border-color:#ddd7cc;color:#8a8379;cursor:not-allowed;transform:none;}
.oa-transfer-note{margin-top:18px;}

.oa-guide-intro{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    margin:0 0 20px;padding:16px 18px;
    border:1px solid #d9cdbd;border-radius:16px;background:#fffdf8;
    color:#2d3436;font:600 .7rem/1.2 "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase;
}
.oa-guide-intro i{color:#b08a4c;font-style:normal;}
.oa-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.oa-guide-card{
    min-height:190px;padding:24px;
    border:1px solid #d9cdbd;border-radius:21px;background:#fffdf8;
    box-shadow:0 12px 26px rgba(55,45,32,.06);
}
.oa-guide-number{color:#a68042;font:600 .66rem/1 "Montserrat",sans-serif;letter-spacing:.12em;}
.oa-guide-card h3{margin:9px 0 9px;color:#2b3335;font:500 1.7rem/1.05 "Cormorant Garamond",serif;}
.oa-guide-card p{margin:0;color:#70685f;font-size:.8rem;line-height:1.65;}
.oa-guide-closing{
    display:grid;grid-template-columns:90px 1fr;gap:22px;align-items:center;
    margin-top:20px;padding:24px;
    border:1px solid rgba(210,183,120,.55);border-radius:21px;
    background:#22272a;color:#eee6d8;
    overflow:hidden;position:relative;
}
.oa-guide-closing::after{content:"";position:absolute;inset:0;background:url("../Assets/Brand/omoide-atlas-contours.svg") center/cover no-repeat;opacity:.14;pointer-events:none;}
.oa-guide-closing > *{position:relative;z-index:1;}
.oa-guide-closing img{width:82px;filter:sepia(.2) brightness(1.45);}
.oa-guide-closing h3{margin:5px 0 7px;color:#f3e7d0;font:500 2rem/1 "Cormorant Garamond",serif;}
.oa-guide-closing p{margin:0;max-width:70ch;color:#d4cabb;font-size:.8rem;line-height:1.6;}

@media(max-width:760px){
    .oa-settings-page,.oa-settings-subpage{width:calc(100% - 24px);padding:28px 0 42px;}
    .oa-settings-grid,.oa-transfer-grid,.oa-guide-grid{grid-template-columns:1fr;}
    .oa-settings-card{min-height:155px;padding:20px;grid-template-columns:46px 1fr;gap:14px;}
    .oa-settings-card-icon{width:44px;height:44px;}
    .oa-settings-card-copy strong{font-size:1.65rem;}
    .oa-transfer-panel{min-height:0;padding:22px;}
    .oa-transfer-panel > p{min-height:0;}
    .oa-transfer-action{margin-top:10px;}
    .oa-settings-form{padding:22px;}
    .oa-guide-closing{grid-template-columns:58px 1fr;padding:20px;gap:16px;}
    .oa-guide-closing img{width:58px;}
    .oa-guide-closing h3{font-size:1.65rem;}
}

@media(max-width:430px){
    .oa-settings-card{grid-template-columns:1fr;}
    .oa-settings-card-icon{margin-bottom:2px;}
    .oa-transfer-panel-heading{grid-template-columns:38px 1fr;gap:11px;}
    .oa-transfer-step{width:38px;height:38px;}
    .oa-guide-closing{grid-template-columns:1fr;}
}

/* ======================================================
   OMOIDE ATLAS — EXPANDED HELP & USER GUIDE
====================================================== */
.oa-guide-quickstart{
    margin:0 0 18px;
    padding:24px;
    border:1px solid rgba(176,138,76,.38);
    border-radius:21px;
    background:
        linear-gradient(rgba(255,253,248,.94),rgba(255,253,248,.94)),
        url("../Assets/Brand/omoide-atlas-contours.svg") center/cover no-repeat;
    box-shadow:0 12px 28px rgba(55,45,32,.05);
}
.oa-guide-quickstart-heading h3,
.oa-guide-section-heading h3{
    margin:6px 0 0;
    color:#2b3335;
    font:500 1.9rem/1.05 "Cormorant Garamond",serif;
}
.oa-guide-quickstart ol{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:20px 0 0;
    padding:0;
}
.oa-guide-quickstart li{
    min-height:118px;
    padding:17px 18px;
    border:1px solid rgba(217,205,189,.78);
    border-radius:16px;
    background:rgba(255,255,255,.64);
}
.oa-guide-quickstart li strong{
    display:block;
    margin-bottom:7px;
    color:#9b773e;
    font:600 .7rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.oa-guide-quickstart li span{
    color:#655f58;
    font-size:.79rem;
    line-height:1.58;
}

button.oa-guide-card{
    width:100%;
    text-align:left;
    font:inherit;
    color:inherit;
    cursor:pointer;
}
.oa-guide-link{
    display:flex;
    flex-direction:column;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.oa-guide-link:hover{
    transform:translateY(-2px);
    border-color:#b99a65;
    box-shadow:0 16px 34px rgba(55,45,32,.09);
    background:#fffefa;
}
.oa-guide-link:focus-visible{
    outline:3px solid rgba(176,138,76,.28);
    outline-offset:3px;
}
.oa-guide-open{
    margin-top:auto;
    padding-top:18px;
    color:#9a753d;
    font:600 .67rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.oa-guide-faq-card{
    background:#22272a;
    border-color:#22272a;
}
.oa-guide-faq-card h3{color:#f2eadc;}
.oa-guide-faq-card p{color:#cec4b6;}
.oa-guide-faq-card .oa-guide-number,
.oa-guide-faq-card .oa-guide-open{color:#d6b36f;}
.oa-guide-faq-card:hover{background:#292f32;border-color:#b08a4c;}

.oa-guide-topic-hero{
    position:relative;
    overflow:hidden;
    margin:0 0 18px;
    padding:30px 30px 32px;
    border:1px solid #d9cdbd;
    border-radius:23px;
    background:#fffdf8;
    box-shadow:0 14px 32px rgba(55,45,32,.06);
}
.oa-guide-topic-hero::after{
    content:"";
    position:absolute;
    right:-50px;
    bottom:-70px;
    width:280px;
    height:210px;
    background:url("../Assets/Brand/omoide-atlas-contours.svg") center/contain no-repeat;
    opacity:.08;
    pointer-events:none;
}
.oa-guide-topic-hero > *{position:relative;z-index:1;}
.oa-guide-topic-hero h2{
    margin:7px 0 10px;
    color:#283235;
    font:500 2.65rem/1 "Cormorant Garamond",serif;
}
.oa-guide-topic-hero p{
    max-width:72ch;
    margin:0;
    color:#6d665e;
    font-size:.9rem;
    line-height:1.72;
}
.oa-guide-faq-hero{
    background:#22272a;
    border-color:#22272a;
}
.oa-guide-faq-hero h2{color:#f2eadc;}
.oa-guide-faq-hero p{color:#d0c7ba;}
.oa-guide-faq-hero .oa-kicker{color:#d5ae68;}
.oa-guide-faq-hero::after{opacity:.12;filter:sepia(.4) brightness(1.6);}

.oa-guide-howto{
    padding:26px;
    border:1px solid #d9cdbd;
    border-radius:23px;
    background:#fffdf8;
}
.oa-guide-section-heading{margin-bottom:20px;}
.oa-guide-steps{
    list-style:none;
    display:grid;
    gap:0;
    margin:0;
    padding:0;
}
.oa-guide-step{
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:16px;
    padding:18px 0;
    border-top:1px solid rgba(217,205,189,.72);
}
.oa-guide-step:first-child{border-top:0;padding-top:4px;}
.oa-guide-step-number{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid #c9ab76;
    border-radius:50%;
    color:#98733d;
    background:#fbf6ed;
    font:600 .66rem/1 "Montserrat",sans-serif;
    letter-spacing:.08em;
}
.oa-guide-step h4{
    margin:0 0 6px;
    color:#2d3436;
    font:600 .86rem/1.3 "Montserrat",sans-serif;
}
.oa-guide-step p{
    margin:0;
    color:#6d665e;
    font-size:.81rem;
    line-height:1.68;
}
.oa-guide-note{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:16px;
    align-items:start;
    margin-top:16px;
    padding:21px 22px;
    border:1px solid rgba(176,138,76,.38);
    border-radius:18px;
    background:#f7f1e6;
}
.oa-guide-note-mark{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    color:#d4ad68;
    background:#273238;
}
.oa-guide-note h3{
    margin:1px 0 6px;
    color:#394043;
    font:500 1.35rem/1.05 "Cormorant Garamond",serif;
}
.oa-guide-note p{
    margin:0;
    color:#6b645c;
    font-size:.79rem;
    line-height:1.62;
}
.oa-guide-next-faq{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    margin-top:16px;
    padding:19px 22px;
    border:1px solid #2d3a4a;
    border-radius:17px;
    color:#f3eadc;
    background:#2d3a4a;
    text-align:left;
    cursor:pointer;
}
.oa-guide-next-faq small{
    display:block;
    margin-bottom:4px;
    color:#d6b980;
    font:600 .61rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.oa-guide-next-faq strong{
    font:500 1.3rem/1.1 "Cormorant Garamond",serif;
}
.oa-guide-next-faq > span:last-child{font-size:1.4rem;color:#ddb96f;}

.oa-faq-list{
    display:grid;
    gap:10px;
}
.oa-faq-list details{
    overflow:hidden;
    border:1px solid #d9cdbd;
    border-radius:16px;
    background:#fffdf8;
    box-shadow:0 8px 18px rgba(55,45,32,.035);
}
.oa-faq-list summary{
    position:relative;
    padding:18px 50px 18px 20px;
    color:#2e3638;
    font:600 .83rem/1.45 "Montserrat",sans-serif;
    cursor:pointer;
    list-style:none;
}
.oa-faq-list summary::-webkit-details-marker{display:none;}
.oa-faq-list summary::after{
    content:"+";
    position:absolute;
    right:19px;
    top:50%;
    transform:translateY(-50%);
    color:#a47d43;
    font-size:1.25rem;
    font-weight:400;
}
.oa-faq-list details[open] summary::after{content:"−";}
.oa-faq-list details[open] summary{border-bottom:1px solid rgba(217,205,189,.66);}
.oa-faq-list details p{
    margin:0;
    padding:17px 20px 20px;
    color:#69625b;
    font-size:.8rem;
    line-height:1.7;
}
.oa-guide-faq-closing{margin-top:18px;}

@media(max-width:760px){
    .oa-guide-quickstart ol{grid-template-columns:1fr;}
    .oa-guide-quickstart li{min-height:0;}
    .oa-guide-topic-hero{padding:24px 22px 26px;}
    .oa-guide-topic-hero h2{font-size:2.2rem;}
    .oa-guide-howto{padding:22px 20px;}
}

@media(max-width:430px){
    .oa-guide-quickstart{padding:20px;}
    .oa-guide-step{grid-template-columns:40px minmax(0,1fr);gap:12px;}
    .oa-guide-step-number{width:36px;height:36px;}
    .oa-guide-note{grid-template-columns:1fr;}
    .oa-guide-note-mark{width:38px;height:38px;}
    .oa-guide-topic-hero h2{font-size:2rem;}
}


/* ============================================================
   OMOIDE ATLAS — MOBILE BOOK SWIPE RELIABILITY
   Keep vertical scrolling available while reserving deliberate
   horizontal gestures for Heirloom / Time Capsule page turns.
   ============================================================ */
.heirloom-reader-v2 .heirloom-book-stage,
.heirloom-reader-v2 .heirloom-book-frame,
.heirloom-reader-v2 .heirloom-book,
.tc-presentation-shell,
.tc-book-presentation,
.tc-deck-shell,
.tc-deck-stage {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

@media (max-width: 820px) {
    .heirloom-reader-v2 .heirloom-book-stage,
    .tc-deck-shell .tc-deck-stage {
        -webkit-user-select: none;
        user-select: none;
    }
}


/* ============================================================
   OMOIDE ATLAS — MOBILE READER INTERACTION MODEL
   Touch devices are swipe-first: there are no invisible page-edge
   click targets. Horizontal swipes turn pages; vertical movement
   remains available for reading. Native media controls always win.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    .heirloom-reader-v2 .heirloom-page-edge,
    .tc-deck-shell .tc-page-edge {
        display: none !important;
        pointer-events: none !important;
    }

    .heirloom-reader-v2 .heirloom-book-stage,
    .heirloom-reader-v2 .heirloom-book-frame,
    .heirloom-reader-v2 .heirloom-book,
    .tc-presentation-shell,
    .tc-book-presentation,
    .tc-deck-shell,
    .tc-deck-stage {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: contain;
    }

    .tc-deck-shell {
        grid-template-rows: 46px minmax(0, 1fr);
    }

    .tc-deck-shell .tc-deck-footer {
        display: none !important;
    }

    .tc-deck-shell .tc-deck-slide.is-active .tc-deck-page {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .heirloom-reader-v2 .heirloom-memory-copy {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   OMOIDE ATLAS — IMMERSIVE VOICE CONTROL POLISH
   The desktop Time Capsule voice experience should feel like the
   mobile reader: the photograph remains dominant and controls sit
   lightly over it rather than forming a bright white footer bar.
   ============================================================ */
.tc-immersive-audio{
    display:block !important;
    background:#111 !important;
}
.tc-immersive-audio .tc-immersive-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#111;
}
.tc-immersive-audio .tc-immersive-controls{
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    padding:54px clamp(22px,4vw,48px) 22px;
    box-sizing:border-box;
    background:linear-gradient(to top,rgba(12,18,17,.82) 0%,rgba(12,18,17,.44) 48%,rgba(12,18,17,0) 100%) !important;
    border:0 !important;
    color:#f7f2e8;
}
.tc-immersive-audio .tc-immersive-controls .tc-book-kicker{
    color:#e8d4aa;
}
.tc-immersive-audio .tc-immersive-controls p{
    color:rgba(247,242,232,.86);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}
.tc-immersive-audio .tc-immersive-control{
    min-width:88px;
    border:1px solid rgba(232,212,170,.5) !important;
    border-radius:999px !important;
    background:rgba(20,31,29,.76) !important;
    color:#fffaf0 !important;
    box-shadow:0 5px 20px rgba(0,0,0,.16);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.tc-immersive-audio .tc-immersive-control:hover{
    background:rgba(38,57,53,.9) !important;
}
.tc-immersive-audio .tc-immersive-continue{
    background:rgba(196,153,83,.88) !important;
    border-color:rgba(232,212,170,.72) !important;
    color:#172420 !important;
}

/* iPhone/Safari reader surface: allow vertical panning, then the JS touch
   handler claims only gestures that have clearly become horizontal. */
@media (hover:none) and (pointer:coarse){
    .heirloom-reader-v2 .heirloom-book-stage,
    .tc-deck-shell .tc-deck-stage{
        touch-action:pan-y !important;
        -webkit-user-select:none;
        user-select:none;
    }
}

/* ============================================================
   OMOIDE ATLAS — NATIVE MOBILE BOOK READER
   iPhone/iPad Safari owns horizontal paging through CSS Scroll Snap.
   Desktop keeps the existing page-edge/keyboard interaction unchanged.
   ============================================================ */
@media (hover:none) and (pointer:coarse){
    /* Digital Heirloom: each page is a real horizontal scroll item. */
    .heirloom-reader-v2 .heirloom-book{
        display:flex !important;
        flex-direction:row !important;
        width:100% !important;
        height:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory !important;
        scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;
        touch-action:auto !important;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }
    .heirloom-reader-v2 .heirloom-book::-webkit-scrollbar{display:none}
    .heirloom-reader-v2 .heirloom-page-slot,
    .heirloom-reader-v2 .heirloom-page-slot.is-current{
        position:relative !important;
        inset:auto !important;
        display:block !important;
        flex:0 0 100% !important;
        width:100% !important;
        min-width:100% !important;
        height:100% !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        animation:none !important;
        scroll-snap-align:start;
        scroll-snap-stop:always;
        box-sizing:border-box;
    }
    .heirloom-reader-v2 .heirloom-gesture-guide{display:none !important}
    .heirloom-reader-v2.heirloom-media-playing .heirloom-book{overflow-x:hidden !important}

    /* Time Capsule: same native paging model; page content may still scroll vertically. */
    .tc-deck-shell .tc-deck-stage{
        display:flex !important;
        flex-direction:row !important;
        gap:0 !important;
        width:100% !important;
        max-width:none !important;
        padding:0 !important;
        margin:0 !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory !important;
        scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;
        touch-action:auto !important;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }
    .tc-deck-shell .tc-deck-stage::-webkit-scrollbar{display:none}
    .tc-deck-shell .tc-deck-slide,
    .tc-deck-shell .tc-deck-slide.is-active{
        position:relative !important;
        display:block !important;
        flex:0 0 100% !important;
        width:100% !important;
        min-width:100% !important;
        height:100% !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        animation:none !important;
        scroll-snap-align:start;
        scroll-snap-stop:always;
        box-sizing:border-box;
        padding:12px clamp(10px,3vw,18px) 16px;
    }
    .tc-deck-shell .tc-deck-slide .tc-deck-page{
        height:100% !important;
        min-height:0 !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-y:contain;
    }
    .tc-deck-shell.tc-media-playing .tc-deck-stage{overflow-x:hidden !important}
}

/* Native scrolling must be permitted by every ancestor in the touch-action chain.
   Earlier prototype rules reserved horizontal movement for JavaScript; override
   those rules only on coarse-pointer devices now that Safari owns the paging. */
@media (hover:none) and (pointer:coarse){
    .heirloom-reader-v2 .heirloom-book-stage,
    .heirloom-reader-v2 .heirloom-book-frame,
    .heirloom-reader-v2 .heirloom-book,
    .tc-presentation-shell,
    .tc-book-presentation,
    .tc-deck-shell,
    .tc-deck-shell .tc-deck-stage{
        touch-action:auto !important;
    }
}

/* =========================================================
   ANNIVERSARY CHECKPOINT — CONSISTENT DESKTOP HAND CUES
   Time Capsule stage has outer padding; place the teaching
   cue inside the actual paper edge to match Digital Heirloom.
   Presentation-only. Mobile Scroll Snap remains unchanged.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
    .tc-deck-shell[data-reader-page="0"] .tc-page-edge-right::after,
    .tc-deck-shell[data-reader-page="1"] .tc-page-edge-right::after{
        right:calc(clamp(12px,3vw,30px) + 10px);
    }
    .tc-deck-shell[data-reader-page="1"] .tc-page-edge-left::after{
        left:calc(clamp(12px,3vw,30px) + 10px);
    }
}


/* =========================================================
   CLEAN ANNIVERSARY CHECKPOINT — MOBILE READER EXIT SAFETY
   Keep navigation controls above native Scroll Snap surfaces and
   make taps explicit on iPhone/iPad Safari. Desktop is unchanged.
   ========================================================= */
@media (hover:none) and (pointer:coarse){
    #exit-digital-heirloom,
    #tc-book-exit,
    #tc-before-back,
    #tc-book-close,
    #back-from-opened-capsule,
    #back-from-opening-capsule,
    #back-from-sealed-capsule{
        z-index:120 !important;
        pointer-events:auto !important;
        touch-action:manipulation !important;
        -webkit-user-select:none;
        user-select:none;
    }
}

/* ======================================================
   OMOIDE ATLAS — ATLAS NOTES · STAGE 2
   Cultural editorial markers and reader.
====================================================== */

.atlas-note-marker{
    width:100%;
    margin:16px 0 2px;
    padding:11px 13px;
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:11px;
    text-align:left;
    color:var(--oa-ink,#263c36);
    background:linear-gradient(135deg,rgba(248,243,233,.96),rgba(252,249,242,.98));
    border:1px solid rgba(176,138,76,.34);
    border-radius:14px;
    box-shadow:0 5px 14px rgba(64,49,29,.045);
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.atlas-note-marker:hover{
    transform:translateY(-1px);
    border-color:rgba(176,138,76,.62);
    box-shadow:0 8px 20px rgba(64,49,29,.075);
}
.atlas-note-marker-symbol{
    width:34px;height:34px;
    display:grid;place-items:center;
    border:1px solid rgba(176,138,76,.45);
    border-radius:50%;
    color:var(--oa-brass,#a67c3b);
    font-size:.86rem;
    background:rgba(255,253,248,.78);
}
.atlas-note-marker-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.atlas-note-marker-copy strong{
    color:#7c6137;
    font:700 .68rem/1.2 "Montserrat",sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.atlas-note-marker-copy small{
    color:#5e5a52;
    font:italic 1rem/1.25 "Cormorant Garamond",Georgia,serif;
}
.atlas-note-marker-arrow{
    color:#a37d42;
    font:500 1.45rem/1 "Cormorant Garamond",Georgia,serif;
}
.atlas-note-marker--detail{
    margin:24px 0 0;
    padding:15px 17px;
    grid-template-columns:42px 1fr auto;
}
.atlas-note-marker--detail .atlas-note-marker-symbol{
    width:42px;height:42px;
}
.atlas-note-marker--detail .atlas-note-marker-copy small{
    font-size:1.08rem;
}

.atlas-note-reader{
    width:100%;
    min-height:calc(100vh - 140px);
    padding:34px 18px 70px;
    background:
        radial-gradient(circle at 12% 8%,rgba(176,138,76,.07),transparent 24rem),
        #ece7dc;
}
.atlas-note-reader-shell{
    width:min(920px,100%);
    margin:0 auto;
}
.atlas-note-back{
    margin:0 0 18px;
}
.atlas-note-paper{
    position:relative;
    overflow:hidden;
    min-height:650px;
    padding:68px clamp(32px,7vw,82px) 42px;
    background:#fbf7ef;
    border:1px solid rgba(190,174,148,.62);
    box-shadow:0 22px 54px rgba(55,46,34,.12);
}
.atlas-note-contours{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.075;
    background-image:url('../Assets/Brand/omoide-atlas-contours.svg');
    background-repeat:no-repeat;
    background-position:105% 4%;
    background-size:56% auto;
}
.atlas-note-header,
.atlas-note-body,
.atlas-note-observation,
.atlas-note-rule,
.atlas-note-footer{
    position:relative;
    z-index:1;
}
.atlas-note-header{
    max-width:700px;
    margin:0 auto;
    text-align:center;
}
.atlas-note-brand-mark{
    width:58px;height:58px;
    object-fit:contain;
    margin-bottom:18px;
}
.atlas-note-brand-kicker,
.atlas-note-eyebrow,
.atlas-note-observation-label{
    display:block;
    font-family:"Montserrat",sans-serif;
    font-weight:700;
    text-transform:uppercase;
}
.atlas-note-brand-kicker{
    margin-bottom:34px;
    color:#968772;
    font-size:.62rem;
    letter-spacing:.22em;
}
.atlas-note-eyebrow{
    color:#9a7338;
    font-size:.67rem;
    letter-spacing:.24em;
}
.atlas-note-header h1{
    max-width:760px;
    margin:12px auto 14px;
    color:#263c36;
    font:500 clamp(2.7rem,7vw,4.8rem)/.98 "Cormorant Garamond",Georgia,serif;
    letter-spacing:-.025em;
}
.atlas-note-deck{
    max-width:650px;
    margin:0 auto;
    color:#6a645a;
    font:italic 1.28rem/1.48 "Cormorant Garamond",Georgia,serif;
}
.atlas-note-rule{
    width:min(330px,75%);
    margin:34px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    color:#b08a4c;
}
.atlas-note-rule span{
    height:1px;
    flex:1;
    background:rgba(176,138,76,.42);
}
.atlas-note-rule i{
    font-style:normal;
    font-size:.72rem;
}
.atlas-note-body{
    max-width:690px;
    margin:0 auto;
}
.atlas-note-body p{
    margin:0;
    color:#373b38;
    font:400 1.18rem/1.82 "Cormorant Garamond",Georgia,serif;
}
.atlas-note-observation{
    max-width:650px;
    margin:38px auto 0;
    padding:22px 26px 22px 30px;
    background:rgba(237,229,215,.62);
    border-left:2px solid #b08a4c;
}
.atlas-note-observation-label{
    margin-bottom:8px;
    color:#8c6936;
    font-size:.63rem;
    letter-spacing:.2em;
}
.atlas-note-observation p{
    margin:0;
    color:#535047;
    font:italic 1.08rem/1.58 "Cormorant Garamond",Georgia,serif;
}
.atlas-note-footer{
    margin:44px auto 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#948a7b;
    font:600 .62rem/1.4 "Montserrat",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}

@media (max-width:700px){
    .atlas-note-reader{
        padding:18px 0 86px;
        background:#f4efe5;
    }
    .atlas-note-reader-shell{
        width:100%;
    }
    .atlas-note-back{
        margin:0 18px 14px;
    }
    .atlas-note-paper{
        min-height:calc(100vh - 150px);
        padding:46px 26px 36px;
        border-left:0;
        border-right:0;
        box-shadow:none;
    }
    .atlas-note-contours{
        background-size:92% auto;
        background-position:135% 0;
    }
    .atlas-note-brand-mark{
        width:50px;height:50px;
    }
    .atlas-note-brand-kicker{
        margin-bottom:28px;
        font-size:.57rem;
    }
    .atlas-note-header h1{
        font-size:clamp(2.6rem,13vw,4rem);
    }
    .atlas-note-deck{
        font-size:1.18rem;
    }
    .atlas-note-body p{
        font-size:1.12rem;
        line-height:1.72;
    }
    .atlas-note-observation{
        padding:20px 20px 20px 22px;
    }
}

/* ======================================================
   OMOIDE ATLAS — FROM THE ATLAS · HEIRLOOM STAGE 3
   Selective cultural interludes inside the Digital Heirloom.
   These are read-only presentation pages and never become
   Time Capsule content.
====================================================== */

.heirloom-reader-v2 .heirloom-atlas-interlude{
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    min-height:100%;
    padding:clamp(46px,6vw,78px) clamp(34px,8vw,100px);
    background:
        radial-gradient(circle at 12% 14%,rgba(176,138,76,.09),transparent 31%),
        linear-gradient(145deg,#fbf7ef 0%,#f3ecdf 100%);
    color:#263c36;
}
.heirloom-reader-v2 .heirloom-atlas-contours{
    position:absolute;
    inset:-3%;
    pointer-events:none;
    opacity:.09;
    background-image:url('../Assets/Brand/omoide-atlas-contours.svg');
    background-repeat:no-repeat;
    background-position:112% -4%;
    background-size:70% auto;
}
.heirloom-reader-v2 .heirloom-atlas-interlude-inner{
    position:relative;
    z-index:1;
    width:min(680px,100%);
    margin:auto;
    text-align:center;
}
.heirloom-reader-v2 .heirloom-atlas-mark{
    width:52px;
    height:52px;
    margin:0 auto 14px;
    object-fit:contain;
    opacity:.92;
}
.heirloom-reader-v2 .heirloom-atlas-brand,
.heirloom-reader-v2 .heirloom-atlas-kicker,
.heirloom-reader-v2 .heirloom-atlas-source-moment span{
    display:block;
    font-family:"Montserrat",sans-serif;
    font-weight:700;
    text-transform:uppercase;
}
.heirloom-reader-v2 .heirloom-atlas-brand{
    margin-bottom:clamp(34px,5vh,54px);
    color:#91816d;
    font-size:.58rem;
    letter-spacing:.22em;
}
.heirloom-reader-v2 .heirloom-atlas-kicker{
    color:#9a7338;
    font-size:.66rem;
    letter-spacing:.25em;
}
.heirloom-reader-v2 .heirloom-atlas-interlude h2{
    max-width:620px;
    margin:12px auto 0;
    color:#263c36;
    font:500 clamp(2.7rem,6vw,4.65rem)/.98 "Cormorant Garamond",Georgia,serif;
    letter-spacing:-.025em;
}
.heirloom-reader-v2 .heirloom-atlas-rule{
    width:min(300px,70%);
    margin:30px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#b08a4c;
}
.heirloom-reader-v2 .heirloom-atlas-rule span{
    height:1px;
    flex:1;
    background:rgba(176,138,76,.4);
}
.heirloom-reader-v2 .heirloom-atlas-rule i{
    font-style:normal;
    font-size:.68rem;
}
.heirloom-reader-v2 .heirloom-atlas-excerpt{
    max-width:590px;
    margin:0 auto;
    color:#48483f;
    font:400 clamp(1.22rem,2.1vw,1.55rem)/1.62 "Cormorant Garamond",Georgia,serif;
}
.heirloom-reader-v2 .heirloom-atlas-purpose{
    margin:24px auto 0;
    color:#756c60;
    font:italic 1.05rem/1.45 "Cormorant Garamond",Georgia,serif;
}
.heirloom-reader-v2 .heirloom-atlas-source-moment{
    width:min(430px,82%);
    margin:clamp(40px,6vh,64px) auto 0;
    padding-top:18px;
    border-top:1px solid rgba(176,138,76,.28);
}
.heirloom-reader-v2 .heirloom-atlas-source-moment span{
    margin-bottom:5px;
    color:#a0917d;
    font-size:.54rem;
    letter-spacing:.2em;
}
.heirloom-reader-v2 .heirloom-atlas-source-moment strong{
    color:#56615d;
    font:500 1rem/1.35 "Cormorant Garamond",Georgia,serif;
}

@media (max-width:700px){
    .heirloom-reader-v2 .heirloom-atlas-interlude{
        align-items:start;
        min-height:100%;
        padding:58px 28px 72px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .heirloom-reader-v2 .heirloom-atlas-contours{
        background-position:145% 0;
        background-size:105% auto;
        opacity:.07;
    }
    .heirloom-reader-v2 .heirloom-atlas-mark{
        width:46px;
        height:46px;
        margin-bottom:12px;
    }
    .heirloom-reader-v2 .heirloom-atlas-brand{
        margin-bottom:36px;
        font-size:.54rem;
    }
    .heirloom-reader-v2 .heirloom-atlas-interlude h2{
        font-size:clamp(2.45rem,12vw,3.7rem);
    }
    .heirloom-reader-v2 .heirloom-atlas-rule{
        margin:26px auto;
    }
    .heirloom-reader-v2 .heirloom-atlas-excerpt{
        font-size:1.2rem;
        line-height:1.58;
    }
    .heirloom-reader-v2 .heirloom-atlas-source-moment{
        margin-top:42px;
    }
}


/* =========================================================
   ATLAS HEIRLOOM STAGE 3 — iOS FIXED EXIT HIT-TEST HARDENING
   Keep the visible reader exits on their own compositor layer above
   native horizontal/vertical scrolling. Behaviour is unchanged on desktop.
   ========================================================= */
@media (hover:none) and (pointer:coarse){
    #exit-digital-heirloom,
    #tc-book-exit,
    #tc-before-back,
    #tc-book-close,
    #back-from-opened-capsule,
    #back-from-opening-capsule,
    #back-from-sealed-capsule{
        position:fixed;
        z-index:1000 !important;
        pointer-events:auto !important;
        touch-action:manipulation !important;
        -webkit-transform:translate3d(0,0,1px);
        transform:translate3d(0,0,1px);
        will-change:transform;
    }
}

/* =============================================================
   OMOIDE ATLAS — THE TABLE · STAGE 2
   Visible journey collection and add-record flow.
============================================================= */

.oa-table-hub-card{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(45,58,74,.985),rgba(31,31,31,.985));
    border-color:#46505a;
    color:#f6f2eb;
}
.oa-table-hub-card::after{
    content:"";
    position:absolute;
    inset:auto -36px -48px auto;
    width:150px;
    height:150px;
    border:1px solid rgba(208,183,120,.24);
    border-radius:50%;
    box-shadow:0 0 0 18px rgba(208,183,120,.055),0 0 0 36px rgba(208,183,120,.035);
    pointer-events:none;
}
.oa-table-hub-card>span{color:var(--oa-brass-light);}
.oa-table-hub-card h3{color:#f8f1e4 !important;}
.oa-table-hub-card p{color:#d7d0c5 !important;}

.oa-table-page{
    width:min(1120px,calc(100% - 32px));
    margin:0 auto;
    padding-bottom:88px;
}
.oa-table-page .back-button{margin-bottom:18px;}
.oa-table-kicker{
    display:block;
    color:var(--oa-brass);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.19em;
    line-height:1.35;
    text-transform:uppercase;
}

.oa-table-hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    min-height:250px;
    padding:clamp(30px,6vw,62px);
    overflow:hidden;
    color:#f7efe0;
    background:
        linear-gradient(115deg,rgba(28,31,34,.98),rgba(45,58,74,.94)),
        url("../Assets/Brand/omoide-atlas-contours.svg") right center/670px auto no-repeat;
    border:1px solid #343a3e;
    border-radius:30px;
    box-shadow:0 22px 50px rgba(35,31,25,.15);
}
.oa-table-hero::before{
    content:"";
    position:absolute;
    left:clamp(30px,6vw,62px);
    top:30px;
    width:72px;
    height:1px;
    background:var(--oa-brass-light);
}
.oa-table-hero-copy{position:relative;z-index:1;max-width:670px;}
.oa-table-hero .oa-table-kicker{color:#d0b47b;}
.oa-table-hero h1{
    margin:13px 0 8px;
    color:#f8f1e4;
    font:500 clamp(3.3rem,8vw,6.6rem)/.88 "Cormorant Garamond",Georgia,serif;
    letter-spacing:.01em;
}
.oa-table-hero p{
    margin:0;
    color:#d8d0c3;
    font:italic clamp(1.15rem,2.4vw,1.55rem)/1.45 "Cormorant Garamond",Georgia,serif;
}
.oa-table-hero-mark{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:92px;
    height:92px;
    flex:0 0 92px;
    border:1px solid rgba(210,183,120,.65);
    border-radius:50%;
    color:#d2b778;
    font:400 2.4rem/1 "Cormorant Garamond",serif;
    box-shadow:0 0 0 12px rgba(210,183,120,.045);
}

.oa-table-journey-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin:20px 0 0;
    padding:19px 22px;
    background:#fffdf8;
    border:1px solid #ded4c4;
    border-radius:18px;
}
.oa-table-journey-line>div{display:grid;gap:5px;}
.oa-table-journey-label{
    color:#8b8173;
    font-size:.63rem;
    font-weight:700;
    letter-spacing:.16em;
}
.oa-table-journey-line strong{
    color:#293239;
    font:500 1.52rem/1.05 "Cormorant Garamond",Georgia,serif;
}
.oa-table-add-button{white-space:nowrap;}

.oa-table-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin:18px 0 0;
    overflow:hidden;
    background:#d9cfbf;
    border:1px solid #d9cfbf;
    border-radius:18px;
}
.oa-table-summary>div{
    display:grid;
    gap:2px;
    padding:17px 20px;
    background:#fbf8f1;
    text-align:center;
}
.oa-table-summary strong{
    color:#293239;
    font:600 1.85rem/1 "Cormorant Garamond",Georgia,serif;
}
.oa-table-summary span{
    color:#82796c;
    font-size:.67rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.oa-table-intro{
    max-width:770px;
    margin:42px auto 28px;
    text-align:center;
}
.oa-table-intro p{
    margin:9px 0 0;
    color:#5f625f;
    font:400 1.18rem/1.7 "Cormorant Garamond",Georgia,serif;
}

.oa-table-sections{display:grid;gap:26px;}
.oa-table-category{
    padding:clamp(22px,4vw,34px);
    background:#fffdf8;
    border:1px solid #ded4c4;
    border-radius:25px;
    box-shadow:0 15px 36px rgba(54,45,33,.065);
}
.oa-table-category-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding-bottom:17px;
    border-bottom:1px solid #e5dccf;
}
.oa-table-category-heading h2{
    margin:5px 0 0;
    color:#293239;
    font:500 2.35rem/1 "Cormorant Garamond",Georgia,serif;
}
.oa-table-count{
    display:grid;
    place-items:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    color:#776548;
    background:#f1eadf;
    border:1px solid #ddcfba;
    border-radius:50%;
    font-size:.76rem;
    font-weight:700;
}
.oa-table-empty-category{
    display:flex;
    align-items:center;
    gap:17px;
    min-height:100px;
    padding:22px 4px 6px;
    color:#777268;
}
.oa-table-empty-category p{margin:0;font:italic 1.03rem/1.5 "Cormorant Garamond",Georgia,serif;}
.oa-table-empty-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid #d8c8af;
    border-radius:50%;
    color:#9b7844;
}

.oa-table-record-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding-top:20px;
}
.oa-table-record-card{
    display:flex;
    flex-direction:column;
    min-height:205px;
    padding:20px;
    background:#fbf8f1;
    border:1px solid #e2d7c6;
    border-radius:18px;
}
.oa-table-record-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.oa-table-record-type{
    color:#997541;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.14em;
}
.oa-table-record-icon{color:#a27d45;font-size:1.2rem;}
.oa-table-record-card h3{
    margin:12px 0 4px;
    color:#283033;
    font:500 1.78rem/1.05 "Cormorant Garamond",Georgia,serif;
}
.oa-table-record-identity,.oa-table-record-place{
    margin:2px 0;
    color:#756c60;
    font-size:.78rem;
    line-height:1.45;
}
.oa-table-record-note{
    margin:12px 0 0;
    color:#555b58;
    font:italic .98rem/1.5 "Cormorant Garamond",Georgia,serif;
}
.oa-table-record-flags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;}
.oa-table-record-flags span{
    padding:6px 9px;
    color:#7e6135;
    background:#f3ebdf;
    border:1px solid #dfcfb9;
    border-radius:999px;
    font-size:.67rem;
    font-weight:600;
}
.oa-table-record-footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:16px;
    color:#8c8377;
    font-size:.64rem;
    letter-spacing:.05em;
    border-top:1px solid #e6ded2;
}
.oa-table-stage3-hint{font-style:italic;letter-spacing:0;text-align:right;}

.oa-table-form-heading{
    max-width:780px;
    margin:28px auto 32px;
    text-align:center;
}
.oa-table-form-heading h1{
    margin:8px 0 7px;
    color:#293239;
    font:500 clamp(2.75rem,6vw,4.6rem)/.95 "Cormorant Garamond",Georgia,serif;
}
.oa-table-form-heading p{
    margin:0 auto;
    max-width:650px;
    color:#68665f;
    font:italic 1.12rem/1.55 "Cormorant Garamond",Georgia,serif;
}

.oa-table-type-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.oa-table-type-card{
    appearance:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-height:300px;
    padding:26px;
    text-align:left;
    color:#2c3336;
    background:#fffdf8;
    border:1px solid #d9cebd;
    border-radius:24px;
    box-shadow:0 15px 35px rgba(54,45,33,.065);
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.oa-table-type-card:hover{
    transform:translateY(-3px);
    border-color:#b08a4c;
    box-shadow:0 19px 40px rgba(54,45,33,.10);
}
.oa-table-type-icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    margin-bottom:28px;
    border:1px solid #d5c3a7;
    border-radius:50%;
    color:#9a7440;
    font-size:1.35rem;
}
.oa-table-type-card strong{
    margin:7px 0 9px;
    color:#283033;
    font:500 2.15rem/1 "Cormorant Garamond",Georgia,serif;
}
.oa-table-type-card small{
    color:#706d65;
    font:400 .88rem/1.55 "Montserrat",sans-serif;
}
.oa-table-type-arrow{
    margin-top:auto;
    padding-top:28px;
    color:#8c6936;
    font-size:.73rem;
    font-weight:700;
    letter-spacing:.03em;
}

.oa-table-form{
    max-width:900px;
    margin:0 auto;
    padding:clamp(22px,5vw,42px);
    background:#fffdf8;
    border:1px solid #d9cebd;
    border-radius:27px;
    box-shadow:0 18px 42px rgba(54,45,33,.08);
}
.oa-table-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.oa-table-field{display:grid;gap:8px;align-content:start;}
.oa-table-field-wide{grid-column:1/-1;}
.oa-table-field>span{
    color:#534f49;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.045em;
}
.oa-table-field input,
.oa-table-field select,
.oa-table-field textarea{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    color:#293239;
    background:#fbf8f1;
    border:1px solid #d9cdbb;
    border-radius:13px;
    font:500 .9rem/1.4 "Montserrat",sans-serif;
    outline:none;
}
.oa-table-field textarea{resize:vertical;min-height:108px;font-weight:400;}
.oa-table-field input:focus,
.oa-table-field select:focus,
.oa-table-field textarea:focus{
    border-color:#b08a4c;
    box-shadow:0 0 0 3px rgba(176,138,76,.10);
}
.oa-table-field small{color:#8a8378;font-size:.68rem;line-height:1.45;}

.oa-table-choice-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
}
.oa-table-check{
    display:flex;
    align-items:flex-start;
    gap:11px;
    min-height:78px;
    padding:14px;
    background:#f7f1e7;
    border:1px solid #ded0bb;
    border-radius:14px;
    cursor:pointer;
}
.oa-table-check input{margin-top:4px;accent-color:#8d6a36;}
.oa-table-check span{display:grid;gap:3px;}
.oa-table-check strong{color:#6d5431;font-size:.8rem;}
.oa-table-check small{color:#7e776d;font-size:.68rem;line-height:1.4;}

.oa-table-future-intelligence{
    margin-top:25px;
    padding:19px 20px;
    background:linear-gradient(135deg,#2e3946,#25292d);
    border:1px solid #414b56;
    border-radius:17px;
    color:#eee6da;
}
.oa-table-future-intelligence .oa-table-kicker{color:#cfb277;}
.oa-table-future-intelligence strong{
    display:block;
    margin:6px 0 4px;
    color:#f5ead7;
    font:500 1.45rem/1.1 "Cormorant Garamond",Georgia,serif;
}
.oa-table-future-intelligence p{margin:0;color:#cfc9bf;font-size:.76rem;line-height:1.58;}
.oa-table-form-actions{display:flex;gap:10px;margin-top:24px;}

.oa-table-saved-page{display:grid;place-items:center;min-height:65vh;}
.oa-table-saved-card{
    width:min(620px,100%);
    padding:clamp(34px,7vw,60px);
    text-align:center;
    background:#fffdf8;
    border:1px solid #d8cdbd;
    border-radius:28px;
    box-shadow:0 20px 48px rgba(54,45,33,.09);
}
.oa-table-saved-mark{
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    margin:0 auto 21px;
    color:#8a693a;
    background:#f1eadf;
    border:1px solid #d7c4a7;
    border-radius:50%;
    font-size:1.25rem;
}
.oa-table-saved-card h1{
    margin:8px 0 4px;
    color:#293239;
    font:500 clamp(2.5rem,6vw,4rem)/.98 "Cormorant Garamond",Georgia,serif;
}
.oa-table-saved-card>p{margin:0;color:#8c734c;font-size:.68rem;font-weight:700;letter-spacing:.13em;}
.oa-table-saved-actions{display:flex;justify-content:center;gap:10px;margin-top:28px;}

@media (max-width:780px){
    .oa-table-page{width:min(100% - 20px,1120px);padding-bottom:92px;}
    .oa-table-hero{min-height:220px;padding:34px 25px;border-radius:23px;}
    .oa-table-hero::before{left:25px;top:25px;}
    .oa-table-hero-mark{width:65px;height:65px;flex-basis:65px;font-size:1.7rem;opacity:.9;}
    .oa-table-journey-line{align-items:stretch;flex-direction:column;padding:17px;}
    .oa-table-add-button{width:100%;}
    .oa-table-intro{margin:32px 10px 22px;}
    .oa-table-type-grid{grid-template-columns:1fr;}
    .oa-table-type-card{min-height:220px;padding:22px;}
    .oa-table-type-icon{margin-bottom:18px;}
    .oa-table-record-grid{grid-template-columns:1fr;}
    .oa-table-form-grid{grid-template-columns:1fr;}
    .oa-table-field-wide{grid-column:auto;}
    .oa-table-choice-row{grid-template-columns:1fr;}
    .oa-table-form-actions,.oa-table-saved-actions{flex-direction:column;}
    .oa-table-form-actions button,.oa-table-saved-actions button{width:100%;}
    .oa-table-stage3-hint{display:none;}
}

@media (max-width:480px){
    .oa-table-hero{min-height:205px;padding:34px 21px 27px;}
    .oa-table-hero h1{font-size:3.4rem;}
    .oa-table-hero-mark{position:absolute;right:18px;top:22px;width:51px;height:51px;flex-basis:51px;font-size:1.35rem;opacity:.65;}
    .oa-table-summary>div{padding:14px 8px;}
    .oa-table-summary strong{font-size:1.55rem;}
    .oa-table-summary span{font-size:.56rem;}
    .oa-table-category{padding:20px 17px;border-radius:20px;}
    .oa-table-form{padding:22px 17px;border-radius:21px;}
    .oa-table-form-heading{margin-top:18px;}
}

/* THE TABLE — STAGE 3 PHOTO-FIRST WINE */
.oa-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.oa-wine-photo-page,.oa-wine-result-page{padding-bottom:100px}.oa-wine-heading{max-width:760px}.oa-wine-capture-card{margin:28px 0 18px;padding:42px 34px;text-align:center;border:1px solid rgba(141,106,54,.24);border-radius:26px;background:linear-gradient(145deg,#fffdf8,#f3ede2);box-shadow:0 18px 44px rgba(75,60,39,.08)}.oa-wine-capture-mark{width:74px;height:74px;margin:0 auto 18px;display:grid;place-items:center;border:1px solid rgba(141,106,54,.33);border-radius:50%;color:#8d6a36;font-size:1.9rem;background:#fffaf1}.oa-wine-capture-card h2{margin:7px 0 8px;font:600 2.35rem/1.05 "Cormorant Garamond",Georgia,serif;color:#493d2d}.oa-wine-capture-card p{max-width:560px;margin:0 auto 22px;color:#776e63;line-height:1.55}.oa-wine-capture-card small{display:block;max-width:560px;margin:18px auto 0;color:#918779;font-size:.72rem;line-height:1.5}.oa-wine-photo-button{display:inline-flex;align-items:center;justify-content:center;min-width:230px;cursor:pointer}.oa-wine-photo-error{color:#8d493f!important;margin-top:15px!important;font-size:.78rem!important}.oa-wine-manual-fallback{margin-top:18px;padding:24px 28px;border-top:1px solid rgba(141,106,54,.16);display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center}.oa-wine-manual-fallback .oa-table-kicker,.oa-wine-manual-fallback h3,.oa-wine-manual-fallback p{grid-column:1}.oa-wine-manual-fallback h3{margin:6px 0 4px;font:600 1.55rem/1.1 "Cormorant Garamond",Georgia,serif;color:#514536}.oa-wine-manual-fallback p{margin:0;color:#81786e;font-size:.8rem}.oa-wine-manual-fallback button{grid-column:2;grid-row:1/4}.oa-wine-result-hero{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:34px;align-items:center;margin:20px 0 28px;padding:28px;border-radius:26px;background:#292c29;color:#f6efe3;overflow:hidden}.oa-wine-label-preview,.oa-wine-label-placeholder{height:300px;border-radius:19px;overflow:hidden;background:#eee7d9}.oa-wine-label-preview img{width:100%;height:100%;object-fit:cover;display:block}.oa-wine-label-placeholder{display:grid;place-items:center;font-size:3rem;color:#9e8356;background:linear-gradient(145deg,#e9dfcf,#f7f1e7)}.oa-wine-result-intro .oa-table-kicker{color:#d0b47b}.oa-wine-result-intro h1{margin:8px 0 11px;font:600 clamp(2.3rem,5vw,4.3rem)/.96 "Cormorant Garamond",Georgia,serif;color:#fff8ec}.oa-wine-result-intro p{max-width:610px;margin:0;color:#d4cdc1;line-height:1.6}.oa-wine-result-form{display:grid;gap:20px}.oa-wine-recognition-card,.oa-wine-cellar-card,.oa-wine-memory-card{padding:28px;border:1px solid rgba(141,106,54,.18);border-radius:22px;background:#fffdf9;box-shadow:0 12px 28px rgba(76,59,38,.05)}.oa-wine-section-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.oa-wine-section-heading h2,.oa-wine-cellar-card h2,.oa-wine-memory-card h2{margin:4px 0 0;font:600 1.9rem/1.08 "Cormorant Garamond",Georgia,serif;color:#504232}.oa-wine-preview-badge{padding:6px 9px;border:1px solid rgba(141,106,54,.22);border-radius:999px;color:#806740;background:#f6efe3;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}.oa-wine-identity-list{display:grid;grid-template-columns:2fr 1.3fr .75fr 1.2fr 1fr;gap:10px}.oa-wine-identity-list label{display:grid;gap:7px;padding:14px 14px 11px;border:1px solid rgba(141,106,54,.14);border-radius:14px;background:#fbf8f2}.oa-wine-identity-list span{font-size:.59rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9a8461}.oa-wine-identity-list input{width:100%;border:0;border-bottom:1px solid rgba(141,106,54,.22);padding:3px 0 7px;background:transparent;color:#453a2e;font:600 1rem/1.25 "Montserrat",Arial,sans-serif;outline:none}.oa-wine-identity-list input:focus{border-bottom-color:#8d6a36}.oa-wine-cellar-card{background:linear-gradient(145deg,#2e312e,#242724);border-color:#3d413d;color:#efe7da}.oa-wine-cellar-card .oa-table-kicker{color:#d0b47b}.oa-wine-cellar-card h2{color:#fff5e5}.oa-wine-cellar-card p{max-width:790px;margin:10px 0 18px;color:#cfc9bf;font-size:.82rem;line-height:1.6}.oa-wine-cellar-fields{display:flex;flex-wrap:wrap;gap:8px}.oa-wine-cellar-fields span{padding:7px 10px;border:1px solid rgba(208,180,123,.22);border-radius:999px;color:#d9c39b;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}.oa-wine-memory-card textarea{width:100%;min-height:120px;margin-top:18px;padding:14px 15px;border:1px solid rgba(141,106,54,.2);border-radius:14px;background:#fbf8f2;color:#4a4035;font:400 .88rem/1.55 "Montserrat",Arial,sans-serif;resize:vertical}.oa-wine-memory-card textarea:focus{outline:none;border-color:#8d6a36;box-shadow:0 0 0 3px rgba(141,106,54,.08)}.oa-wine-moment-link,.oa-wine-place-link{margin-top:18px}.oa-wine-choice-row{margin-top:0}.oa-wine-save-actions{margin-top:2px}.oa-table-record-photo{height:180px;margin:-20px -20px 18px;overflow:hidden;border-radius:17px 17px 0 0;background:#eee7da}.oa-table-record-photo img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:900px){.oa-wine-identity-list{grid-template-columns:1fr 1fr}.oa-wine-identity-list label:first-child{grid-column:1/-1}}@media(max-width:700px){.oa-wine-capture-card{padding:32px 20px}.oa-wine-manual-fallback{grid-template-columns:1fr;padding:22px 8px}.oa-wine-manual-fallback button{grid-column:1;grid-row:auto;margin-top:16px;width:100%}.oa-wine-result-hero{grid-template-columns:1fr;padding:18px;gap:22px}.oa-wine-label-preview,.oa-wine-label-placeholder{height:270px}.oa-wine-result-intro{padding:0 6px 8px}.oa-wine-recognition-card,.oa-wine-cellar-card,.oa-wine-memory-card{padding:22px 17px}.oa-wine-section-heading{display:grid}.oa-wine-preview-badge{justify-self:start}.oa-wine-identity-list{grid-template-columns:1fr}.oa-wine-identity-list label:first-child{grid-column:auto}}

/* ======================================================
   THE TABLE — STAGE 4 GLOBAL COLLECTION + HOME ARTWORK
====================================================== */
.oa-heirloom-card,
.oa-capsule-card{background-position:center;background-size:cover;background-repeat:no-repeat;}
.oa-heirloom-card{background-image:url("../Assets/Images/digital-heirloom-card-approved.png");}
.oa-capsule-card{background-image:url("../Assets/Images/time-capsule-card-approved.png");}
.oa-heirloom-card::before,.oa-capsule-card::before{display:none;}
.oa-heirloom-card::after,.oa-capsule-card::after{background:linear-gradient(180deg,rgba(10,12,12,.04) 0%,rgba(12,14,14,.15) 42%,rgba(12,14,14,.92) 100%);}

.oa-table-global-page{padding-top:34px;padding-bottom:64px;}
.oa-table-global-hero{max-width:760px;margin:0 auto 24px;text-align:center;padding:28px 20px 8px;}
.oa-table-global-hero h1{margin:5px 0 3px;font:500 clamp(3rem,8vw,5.4rem)/.9 "Cormorant Garamond",serif;letter-spacing:.04em;color:#22292b;}
.oa-table-global-subtitle{margin:0;color:#8a6736;font:italic 1.25rem/1.3 "Cormorant Garamond",serif;}
.oa-table-global-intro{max-width:620px;margin:20px auto 0;color:#6d675f;line-height:1.75;}
.oa-table-global-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 24px;padding:14px;border:1px solid #d8cdbd;border-radius:20px;background:#f8f3e9;}
.oa-table-global-totals div{display:grid;gap:2px;text-align:center;padding:8px;border-right:1px solid #ddd2c2;}
.oa-table-global-totals div:last-child{border-right:0;}
.oa-table-global-totals strong{font:500 1.8rem/1 "Cormorant Garamond",serif;color:#263033;}
.oa-table-global-totals span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8175;}
.oa-table-global-portals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.oa-table-global-portals article{min-height:220px;padding:22px;border:1px solid #d7cab8;border-radius:22px;background:linear-gradient(155deg,#fffdf8,#eee5d7);box-shadow:0 12px 28px rgba(49,39,28,.08);}
.oa-table-global-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:30px;border:1px solid #b18b50;border-radius:50%;color:#a0783e;font-size:1.2rem;}
.oa-table-global-portals h2,.oa-table-global-section-heading h2,.oa-table-global-empty h2{margin:4px 0 8px;font:500 2rem/1 "Cormorant Garamond",serif;color:#263033;}
.oa-table-global-portals p{margin:0;color:#71695f;font-size:.82rem;line-height:1.6;}
.oa-table-global-recent{margin-top:32px;}
.oa-table-global-section-heading{margin-bottom:12px;}
.oa-table-global-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.oa-table-global-record{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px;border:1px solid #ded3c4;border-radius:18px;background:#fffdf8;}
.oa-table-global-record-photo{width:78px;height:78px;overflow:hidden;border-radius:12px;background:#ddd4c7;}
.oa-table-global-record-photo img{width:100%;height:100%;object-fit:cover;}
.oa-table-global-record h3{margin:2px 0 3px;font:500 1.35rem/1.05 "Cormorant Garamond",serif;color:#263033;}
.oa-table-global-record p{margin:0 0 4px;color:#756d62;font-size:.76rem;}
.oa-table-global-record small{color:#a17c45;font-size:.66rem;}
.oa-table-global-empty{margin:30px auto 0;max-width:620px;padding:34px;text-align:center;border:1px solid #d8cdbd;border-radius:24px;background:#fffdf8;}
.oa-table-global-empty-mark{color:#a67c40;font-size:1.5rem;}
.oa-table-global-empty p{max-width:470px;margin:0 auto 20px;color:#71695f;line-height:1.65;}
.oa-table-global-note{margin-top:32px;padding:22px;text-align:center;border-top:1px solid #d9cdbd;color:#71695f;}
.oa-table-global-note p{margin:6px 0 0;font:italic 1.08rem/1.45 "Cormorant Garamond",serif;}

@media(max-width:700px){
 .oa-table-global-portals{grid-template-columns:1fr;}
 .oa-table-global-portals article{min-height:0;}
 .oa-table-global-icon{margin-bottom:18px;}
 .oa-table-global-records{grid-template-columns:1fr;}
 .oa-table-global-totals{grid-template-columns:repeat(2,1fr);}
 .oa-table-global-totals div:nth-child(2){border-right:0;}
 .oa-table-global-totals div:nth-child(-n+2){border-bottom:1px solid #ddd2c2;}
 .oa-feature-card{min-height:190px;background-size:cover;}
}


/* THE TABLE — Stage 4.1 curated global collections */
.oa-table-global-portals-only{margin-top:28px}.oa-table-global-portal{position:relative;width:100%;min-height:250px;padding:22px;text-align:left;border:1px solid #d7cab8;border-radius:22px;background:linear-gradient(155deg,#fffdf8,#eee5d7);box-shadow:0 12px 28px rgba(49,39,28,.08);color:inherit;cursor:pointer}.oa-table-global-portal h2{margin:4px 0 8px;font:500 2rem/1 "Cormorant Garamond",serif;color:#263033}.oa-table-global-portal p{margin:0 0 18px;color:#71695f;font-size:.82rem;line-height:1.6}.oa-table-global-portal-count{display:block;color:#a0783e;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.oa-table-global-portal-arrow{position:absolute;right:22px;bottom:20px;color:#8a6736;font-size:.72rem}.oa-table-curated-header{max-width:760px;margin:18px auto 34px;text-align:center}.oa-table-curated-header h1{margin:5px 0 8px;font:500 clamp(3rem,8vw,5rem)/.92 "Cormorant Garamond",serif;color:#263033}.oa-table-curated-header p{max-width:560px;margin:0 auto;color:#71695f;line-height:1.65}.oa-table-curated-count{display:inline-block;margin-top:14px;color:#a0783e;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.oa-table-menu{max-width:900px;margin:0 auto}.oa-table-menu-primary{margin:0 0 38px}.oa-table-menu-primary>h2{margin:0 0 15px;padding-bottom:8px;border-bottom:1px solid #b9945b;font:500 2.15rem/1 "Cormorant Garamond",serif;color:#263033}.oa-table-menu-country{margin:0 0 24px}.oa-table-menu-country>h3{margin:0 0 12px;color:#9b7136;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.oa-table-menu-region{margin:0 0 20px}.oa-table-menu-region>h4{margin:0 0 6px;color:#5f5a53;font:italic 1.18rem/1.2 "Cormorant Garamond",serif}.oa-table-menu-items{border-top:1px solid #e0d5c6}.oa-table-curated-row{display:flex;width:100%;align-items:center;gap:13px;padding:12px 4px;border:0;border-bottom:1px solid #e0d5c6;background:transparent;text-align:left;color:inherit;cursor:pointer}.oa-table-curated-thumb{width:46px;height:54px;flex:0 0 auto;overflow:hidden;border-radius:8px;background:#e5ddd0}.oa-table-curated-thumb img{width:100%;height:100%;object-fit:cover}.oa-table-curated-row-copy{display:grid;gap:2px;flex:1}.oa-table-curated-row-copy strong{font:500 1.28rem/1.05 "Cormorant Garamond",serif;color:#263033}.oa-table-curated-row-copy small{color:#81776b;font-size:.7rem}.oa-table-curated-chevron{color:#a0783e;font-size:1.4rem}.oa-table-detail-sheet{max-width:760px;margin:24px auto 0;padding:28px;border:1px solid #d7cab8;border-radius:24px;background:#fffdf8;box-shadow:0 14px 34px rgba(49,39,28,.08)}.oa-table-detail-photo{width:100%;max-height:420px;margin-bottom:24px;overflow:hidden;border-radius:18px;background:#e4dccf}.oa-table-detail-photo img{display:block;width:100%;max-height:420px;object-fit:contain}.oa-table-detail-heading h1{margin:4px 0;font:500 clamp(2.5rem,7vw,4.3rem)/.95 "Cormorant Garamond",serif;color:#263033}.oa-table-detail-where{margin:8px 0 0;color:#9a7540;font-size:.75rem}.oa-table-detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:24px 0;border-top:1px solid #ded3c4}.oa-table-detail-facts div{padding:12px 8px;border-bottom:1px solid #ded3c4}.oa-table-detail-facts dt{color:#9b7136;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}.oa-table-detail-facts dd{margin:3px 0 0;color:#3e4343;font:500 1.1rem/1.2 "Cormorant Garamond",serif}.oa-table-detail-section{margin-top:24px;padding-top:18px;border-top:1px solid #ded3c4}.oa-table-detail-section p{margin:8px 0 0;color:#655f57;line-height:1.7}.oa-table-memory-section p{font:italic 1.18rem/1.55 "Cormorant Garamond",serif}.oa-table-detail-caption{font-size:.95rem!important}.oa-table-detail-flags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;color:#9b7136;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}@media(max-width:700px){.oa-table-global-portal{min-height:210px}.oa-table-detail-sheet{padding:20px}.oa-table-detail-facts{grid-template-columns:1fr}}

/* THE TABLE — Stage 4.1a Journey source editing */
.oa-table-record-footer-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.oa-table-edit-entry{border:0;background:transparent;padding:0;color:#9a7138;font:600 .66rem/1.2 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.oa-table-edit-entry:hover{text-decoration:underline}
@media(max-width:700px){.oa-table-record-footer-actions{align-items:flex-end;flex-direction:column;gap:7px}.oa-table-edit-entry{font-size:.7rem}}


/* THE TABLE — Stage 4.2 Wine Cellar Menu */
.oa-wine-identity-list select{width:100%;border:0;border-bottom:1px solid rgba(141,106,54,.22);padding:3px 0 7px;background:transparent;color:#453a2e;font:600 1rem/1.25 "Montserrat",Arial,sans-serif;outline:none}
.oa-wine-identity-list select:focus{border-bottom-color:#8d6a36}
.oa-wine-cellar-menu-page{max-width:1040px;margin:0 auto}
.oa-wine-cellar-menu-page .oa-table-curated-header{max-width:700px;margin:10px auto 52px;padding:0 18px}
.oa-wine-cellar-menu-page .oa-table-curated-header h1{font-size:clamp(3.8rem,9vw,6.1rem);letter-spacing:.01em}
.oa-wine-cellar-menu-page .oa-table-curated-header p{font:italic 1.15rem/1.55 "Cormorant Garamond",Georgia,serif;color:#756b5e}
.oa-wine-cellar-menu-page .oa-table-menu{max-width:760px}
.oa-wine-menu-section{margin:0 0 56px}
.oa-wine-menu-section-heading{text-align:center;margin-bottom:25px}
.oa-wine-menu-section-heading>span{display:block;margin-bottom:6px;color:#a67839;font:700 .62rem/1.2 "Montserrat",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.oa-wine-menu-section-heading h2{display:inline-block;margin:0;padding:0 26px 9px;border-bottom:1px solid #b98a4a;color:#2f3637;font:500 2.5rem/1 "Cormorant Garamond",Georgia,serif}
.oa-wine-menu-country{margin:0 0 30px}
.oa-wine-menu-country>h3{margin:0 0 8px;color:#9d7135;font:700 .66rem/1.2 "Montserrat",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.oa-wine-menu-list{border-top:1px solid #d9cdbb}
.oa-wine-menu-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 70px 18px;gap:18px;align-items:baseline;width:100%;padding:15px 2px 14px;border:0;border-bottom:1px solid #ded3c4;background:transparent;color:inherit;text-align:left;cursor:pointer}
.oa-wine-menu-row:hover .oa-wine-menu-name{color:#9a6c2f}
.oa-wine-menu-name{color:#2b3132;font:500 1.35rem/1.1 "Cormorant Garamond",Georgia,serif;transition:color .15s ease}
.oa-wine-menu-origin{color:#776e63;font:italic .95rem/1.25 "Cormorant Garamond",Georgia,serif}
.oa-wine-menu-vintage{justify-self:end;color:#3c4242;font:500 1rem/1.1 "Cormorant Garamond",Georgia,serif;font-variant-numeric:tabular-nums}
.oa-wine-menu-chevron{justify-self:end;color:#a67839;font-size:1.1rem}
@media(max-width:700px){
 .oa-wine-cellar-menu-page .oa-table-curated-header{margin-bottom:36px}
 .oa-wine-menu-section{margin-bottom:44px}
 .oa-wine-menu-section-heading{text-align:left}
 .oa-wine-menu-section-heading h2{padding-left:0;padding-right:32px;font-size:2.15rem}
 .oa-wine-menu-row{grid-template-columns:minmax(0,1fr) 54px 14px;gap:10px;padding:14px 0}
 .oa-wine-menu-name{grid-column:1;font-size:1.25rem}
 .oa-wine-menu-origin{grid-column:1;grid-row:2;font-size:.88rem}
 .oa-wine-menu-vintage{grid-column:2;grid-row:1/3;align-self:center}
 .oa-wine-menu-chevron{grid-column:3;grid-row:1/3;align-self:center}
}

/* THE TABLE — Stage 4.3 Anniversary Food + Places Capture */
.oa-simple-photo-page,.oa-simple-entry-page{padding-bottom:100px}
.oa-simple-capture-card{margin:28px 0 18px;padding:42px 34px;text-align:center;border:1px solid rgba(141,106,54,.24);border-radius:26px;background:linear-gradient(145deg,#fffdf8,#f3ede2);box-shadow:0 18px 44px rgba(75,60,39,.08)}
.oa-simple-capture-mark{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 18px;border:1px solid rgba(141,106,54,.33);border-radius:50%;background:#fffaf1;color:#8d6a36;font-size:1.8rem}
.oa-simple-capture-card h2{margin:7px 0 8px;color:#493d2d;font:600 2.35rem/1.05 "Cormorant Garamond",Georgia,serif}
.oa-simple-capture-card p{max-width:560px;margin:0 auto 22px;color:#776e63;line-height:1.55}
.oa-simple-capture-card small{display:block;max-width:580px;margin:18px auto 0;color:#918779;font-size:.72rem;line-height:1.5}
.oa-simple-photo-button{display:inline-flex;align-items:center;justify-content:center;min-width:220px;cursor:pointer}
.oa-simple-entry-hero{display:grid;grid-template-columns:minmax(210px,320px) 1fr;gap:32px;align-items:center;margin:20px 0 26px;padding:26px;border-radius:25px;background:#292c29;color:#f6efe3}
.oa-simple-photo-preview,.oa-simple-photo-placeholder{height:280px;overflow:hidden;border-radius:18px;background:#eee7d9}
.oa-simple-photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.oa-simple-photo-placeholder{display:grid;place-items:center;background:linear-gradient(145deg,#e9dfcf,#f7f1e7);color:#9e8356;font-size:3rem}
.oa-simple-entry-hero .oa-table-kicker{color:#d0b47b}
.oa-simple-entry-hero h1{margin:7px 0 10px;color:#fff8ec;font:600 clamp(2.3rem,5vw,4rem)/.96 "Cormorant Garamond",Georgia,serif}
.oa-simple-entry-hero p{max-width:610px;margin:0;color:#d4cdc1;line-height:1.6}
.oa-simple-entry-form{margin-top:0}
.oa-simple-replace-photo{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.oa-table-journey-menu>h2{font-size:2rem;text-transform:none}
@media(max-width:700px){
 .oa-simple-capture-card{padding:32px 20px}
 .oa-simple-entry-hero{grid-template-columns:1fr;padding:18px;gap:20px}
 .oa-simple-photo-preview,.oa-simple-photo-placeholder{height:250px}
 .oa-simple-replace-photo{width:100%}
}


/* ======================================================
   ANNIVERSARY EDITION — THE ATLAS AHEAD
====================================================== */
.trip-hub-card.oa-hub-active:not(.oa-table-hub-card) {
    border-color: rgba(155, 113, 54, .32);
    background: linear-gradient(135deg, #fffdf8 0%, #f4eee3 100%);
    box-shadow: inset 3px 0 0 rgba(166, 125, 64, .55), 0 10px 24px rgba(42, 35, 27, .055);
}
.trip-hub-card.oa-hub-active:not(.oa-table-hub-card) > span:first-child {
    background: #eee4d3;
}
.trip-hub-card.oa-hub-horizon {
    border-color: rgba(205, 194, 177, .75);
    background: rgba(255, 253, 248, .78);
}
.trip-hub-card.oa-hub-horizon::after {
    content: "ON THE HORIZON";
    position: absolute;
    right: 42px;
    top: 18px;
    font-size: .48rem;
    letter-spacing: .12em;
    color: #a78b64;
    opacity: .72;
}
.oa-atlas-ahead-page {
    min-height: 100vh;
    padding: 28px 20px 70px;
    background:
        radial-gradient(circle at 18% 18%, rgba(174, 143, 91, .08), transparent 27%),
        #f5f0e7;
}
.oa-atlas-ahead-page > .back-button {
    display: block;
    max-width: 900px;
    margin: 0 auto 18px;
}
.oa-atlas-ahead-sheet {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(38px, 7vw, 72px);
    border: 1px solid #d7cab8;
    border-radius: 28px;
    background: rgba(255,253,248,.95);
    box-shadow: 0 22px 55px rgba(45, 36, 26, .10);
}
.oa-atlas-ahead-map {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -145px;
    top: -125px;
    border: 1px solid rgba(165,126,66,.16);
    border-radius: 50%;
    pointer-events: none;
}
.oa-atlas-ahead-map::before,
.oa-atlas-ahead-map::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(165,126,66,.13);
    border-radius: 50%;
}
.oa-atlas-ahead-map::before { inset: 38px; }
.oa-atlas-ahead-map::after { inset: 92px; }
.oa-atlas-ahead-header {
    position: relative;
    max-width: 650px;
}
.oa-atlas-ahead-index {
    display: block;
    margin-bottom: 34px;
    color: #9b7136;
    font-size: .6rem;
    letter-spacing: .2em;
}
.oa-atlas-ahead-header h1 {
    margin: 6px 0 8px;
    color: #263033;
    font: 500 clamp(3.8rem, 9vw, 6.6rem)/.82 "Cormorant Garamond", serif;
}
.oa-atlas-ahead-line {
    max-width: 580px;
    margin: 22px 0 0;
    color: #6c6257;
    font: italic 1.35rem/1.55 "Cormorant Garamond", serif;
}
.oa-atlas-ahead-rule {
    width: 72px;
    height: 1px;
    margin: 36px 0;
    background: #b7833c;
}
.oa-atlas-ahead-philosophy,
.oa-atlas-ahead-future {
    max-width: 680px;
    margin-top: 30px;
}
.oa-atlas-ahead-philosophy p,
.oa-atlas-ahead-future p {
    margin: 9px 0 0;
    color: #615a51;
    font-size: .92rem;
    line-height: 1.85;
}
.oa-atlas-ahead-future {
    padding: 24px 26px;
    border: 1px solid #ded2c0;
    border-radius: 18px;
    background: #f3ecdf;
}
.oa-atlas-ahead-sheet blockquote {
    max-width: 620px;
    margin: 40px 0;
    padding: 0 0 0 24px;
    border-left: 1px solid #b7833c;
    color: #2e3738;
    font: 500 1.55rem/1.45 "Cormorant Garamond", serif;
}
.oa-atlas-ahead-footer {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 52px;
    padding-top: 30px;
    border-top: 1px solid #ded2c0;
}
.oa-atlas-ahead-footer img {
    width: 42px;
    height: 42px;
    opacity: .78;
}
.oa-atlas-ahead-footer p {
    margin: 7px 0 4px;
    color: #71695f;
    line-height: 1.6;
}
.oa-atlas-ahead-footer strong {
    color: #354142;
    font: italic 1.05rem/1.4 "Cormorant Garamond", serif;
}
@media (max-width: 700px) {
    .trip-hub-card.oa-hub-horizon::after {
        display: none;
    }
    .oa-atlas-ahead-page {
        padding: 18px 12px 90px;
    }
    .oa-atlas-ahead-sheet {
        padding: 34px 24px;
        border-radius: 22px;
    }
    .oa-atlas-ahead-index {
        margin-bottom: 26px;
    }
    .oa-atlas-ahead-footer {
        gap: 14px;
    }
}


/* ======================================================
   FINAL CHECKPOINT — ACTIVE JOURNEY HUB CONSISTENCY
====================================================== */
.trip-hub-card.oa-table-hub-card.oa-hub-active {
    color: inherit !important;
    border-color: rgba(155, 113, 54, .32) !important;
    background: linear-gradient(135deg, #fffdf8 0%, #f4eee3 100%) !important;
    box-shadow: inset 3px 0 0 rgba(166, 125, 64, .55), 0 10px 24px rgba(42, 35, 27, .055) !important;
}
.trip-hub-card.oa-table-hub-card.oa-hub-active::after {
    display: none !important;
}
.trip-hub-card.oa-table-hub-card.oa-hub-active > span:first-child {
    color: inherit !important;
    background: #eee4d3 !important;
}
.trip-hub-card.oa-table-hub-card.oa-hub-active h3 {
    color: inherit !important;
}
.trip-hub-card.oa-table-hub-card.oa-hub-active p {
    color: inherit !important;
}

/* Journey Memories */
.oa-journey-memories-page {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 90px;
}
.oa-journey-memories-header {
    max-width: 700px;
    margin: 24px auto 38px;
    text-align: center;
}
.oa-journey-memories-header h1 {
    margin: 4px 0 8px;
    color: #263033;
    font: 500 clamp(3.4rem, 8vw, 5.5rem)/.9 "Cormorant Garamond", serif;
}
.oa-journey-memories-header p {
    margin: 0;
    color: #71695f;
    line-height: 1.7;
}
.oa-journey-memories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.oa-journey-memory-card {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 14px;
    border: 1px solid #d9cdbd;
    border-radius: 20px;
    background: #fffdf8;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(47, 38, 28, .055);
}
.oa-journey-memory-photo,
.oa-journey-memory-mark {
    width: 92px;
    height: 90px;
    overflow: hidden;
    border-radius: 14px;
    background: #eee6da;
}
.oa-journey-memory-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oa-journey-memory-mark {
    display: grid;
    place-items: center;
    color: #a3783c;
    font-size: 1.8rem;
}
.oa-journey-memory-copy {
    display: grid;
    gap: 4px;
}
.oa-journey-memory-copy small {
    color: #a0783e;
    font-size: .61rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.oa-journey-memory-copy strong {
    color: #293334;
    font: 500 1.45rem/1.05 "Cormorant Garamond", serif;
}
.oa-journey-memory-copy em {
    color: #7c7369;
    font-size: .69rem;
    font-style: normal;
}
.oa-journey-memory-open {
    color: #9b7136;
    font-size: .7rem;
}
.oa-journey-memories-empty {
    max-width: 680px;
    margin: 10px auto 0;
    padding: 48px 34px;
    border: 1px solid #d9cdbd;
    border-radius: 24px;
    background: #fffdf8;
    text-align: center;
}
.oa-journey-memories-empty > span {
    display: block;
    margin-bottom: 12px;
    color: #a0783e;
    font-size: 2rem;
}
.oa-journey-memories-empty h2 {
    margin: 0 0 8px;
    color: #293334;
    font: 500 2rem/1 "Cormorant Garamond", serif;
}
.oa-journey-memories-empty p {
    max-width: 520px;
    margin: 0 auto 22px;
    color: #71695f;
    line-height: 1.7;
}
.oa-journey-memories-footer {
    margin: 42px auto 0;
    padding-top: 22px;
    border-top: 1px solid #ddd1c1;
    text-align: center;
}
.oa-journey-memories-footer p {
    margin: 6px 0 0;
    color: #71695f;
    font: italic 1rem/1.5 "Cormorant Garamond", serif;
}
@media (max-width: 760px) {
    .oa-journey-memories-grid {
        grid-template-columns: 1fr;
    }
    .oa-journey-memory-card {
        grid-template-columns: 72px 1fr auto;
    }
    .oa-journey-memory-photo,
    .oa-journey-memory-mark {
        width: 72px;
        height: 72px;
    }
}


/* ======================================================
   ANNIVERSARY PRESENTATION PASS — THE DREAM ATLAS
   A single visual philosophy: quiet planning, lived moments,
   enduring memory.
====================================================== */
.oa-atlas-line-icon{display:block;width:24px;height:24px}
.trip-detail-overlay p{display:flex;align-items:center;gap:8px}
.trip-detail-overlay p .oa-atlas-line-icon{width:16px;height:16px;opacity:.85}

/* Journey becomes an editorial atlas rather than an app menu */
.oa-journey-atlas{margin:34px 0 10px}
.oa-journey-atlas-intro{position:relative;max-width:760px;margin:0 auto 30px;padding:8px 20px 24px;text-align:center}
.oa-journey-atlas-intro::after{content:"";display:block;width:62px;height:1px;margin:24px auto 0;background:#b7833c}
.oa-journey-atlas-intro h2{margin:7px 0 10px;color:#263033;font:500 clamp(2.7rem,6vw,4.3rem)/.9 "Cormorant Garamond",serif}
.oa-journey-atlas-intro h2 em{font-weight:400;color:#7e694f}
.oa-journey-atlas-intro p{max-width:560px;margin:0 auto;color:#746b61;line-height:1.65}

.oa-journey-active-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px}
.oa-journey-chapter{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:10px 14px;min-height:205px;padding:22px;border:1px solid #d9cbb7;border-radius:22px;background:linear-gradient(150deg,#fffdf8 0%,#f1e9dc 100%);color:#303a3b;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 12px 28px rgba(47,38,28,.065)}
.oa-journey-chapter::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(170,128,64,.12),transparent 38%);pointer-events:none}
.oa-journey-chapter:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(47,38,28,.09)}
.oa-chapter-number{grid-column:1;color:#9d7a48;font:500 .64rem/1 "Montserrat",sans-serif;letter-spacing:.14em}
.oa-chapter-icon{grid-column:3;grid-row:1;width:43px;height:43px;display:grid;place-items:center;border:1px solid rgba(165,119,54,.55);border-radius:50%;color:#9c7137}
.oa-chapter-icon .oa-atlas-line-icon{width:20px;height:20px}
.oa-chapter-copy{grid-column:1/4;grid-row:2;align-self:end;display:grid;gap:5px;position:relative;z-index:1}
.oa-chapter-copy small{color:#a0783e;font-size:.57rem;letter-spacing:.13em}
.oa-chapter-copy strong{color:#253032;font:500 2rem/1 "Cormorant Garamond",serif}
.oa-chapter-copy em{color:#756d64;font-size:.72rem;font-style:normal;line-height:1.45}
.oa-chapter-arrow{position:absolute;right:20px;bottom:18px;color:#9d7137;font-size:.9rem}

.oa-journey-keepsakes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 34px}
.oa-keepsake-card{position:relative;min-height:225px;padding:22px;border:1px solid #4f4a40;border-radius:22px;overflow:hidden;color:#f4ecdf;text-align:left;cursor:pointer;box-shadow:0 14px 32px rgba(31,28,24,.15)}
.oa-keepsake-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015)}
.oa-keepsake-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,22,21,.88) 0%,rgba(19,22,21,.58) 55%,rgba(19,22,21,.30) 100%)}
.oa-keepsake-icon{position:absolute;left:22px;top:22px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(198,154,81,.72);border-radius:50%;color:#c79a52}
.oa-keepsake-icon .oa-atlas-line-icon{width:20px;height:20px}
.oa-keepsake-copy{position:absolute;left:22px;right:65px;bottom:22px;display:grid;gap:5px}
.oa-keepsake-copy small{color:#c99a50;font-size:.56rem;letter-spacing:.14em}
.oa-keepsake-copy strong{font:500 2rem/1 "Cormorant Garamond",serif;color:#fff8ec}
.oa-keepsake-copy em{font-size:.7rem;font-style:normal;color:#e2d8c9}
.oa-keepsake-arrow{position:absolute;right:22px;bottom:22px;color:#d0a35b}

.oa-atlas-horizon{position:relative;padding:30px;border:1px solid #d9cdbd;border-radius:24px;background:#f8f4ec;overflow:hidden}
.oa-atlas-horizon::after{content:"";position:absolute;width:300px;height:300px;right:-130px;top:-150px;border:1px solid rgba(165,126,66,.14);border-radius:50%;box-shadow:0 0 0 44px rgba(165,126,66,.04),0 0 0 88px rgba(165,126,66,.025);pointer-events:none}
.oa-atlas-horizon>header{max-width:610px;margin-bottom:22px}
.oa-atlas-horizon h3{margin:4px 0 5px;color:#293334;font:500 2rem/1 "Cormorant Garamond",serif}
.oa-atlas-horizon header p{margin:0;color:#756c61;font-size:.78rem;line-height:1.6}
.oa-horizon-list{position:relative;z-index:1;border-top:1px solid #d8ccba}
.oa-horizon-row{display:grid;grid-template-columns:38px minmax(130px,.7fr) 1fr 30px;align-items:center;gap:12px;width:100%;padding:14px 4px;border:0;border-bottom:1px solid #d8ccba;background:transparent;color:#394142;text-align:left;cursor:pointer}
.oa-horizon-row>span{width:34px;height:34px;display:grid;place-items:center;color:#9b7c51}
.oa-horizon-row .oa-atlas-line-icon{width:19px;height:19px}
.oa-horizon-row strong{font:500 1.2rem/1 "Cormorant Garamond",serif}
.oa-horizon-row em{color:#82796e;font-size:.68rem;font-style:italic}
.oa-horizon-row i{color:#aa8a5c;font-size:.55rem;font-style:normal;letter-spacing:.12em}
.oa-horizon-row:hover{background:rgba(255,255,255,.45)}

.oa-journey-philosophy{margin:32px auto 0;padding:24px 12px 4px;text-align:center}
.oa-journey-philosophy p{margin:6px 0 1px;color:#344042;font:italic 1.35rem/1.3 "Cormorant Garamond",serif}
.oa-journey-philosophy strong{color:#8a7559;font-size:.68rem;font-weight:500;letter-spacing:.04em}

/* The opening is a title page, not a loading screen */
.oa-opening{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;background:#182426;color:#f6efe2;opacity:1;transition:opacity .65s ease;cursor:pointer}
.oa-opening-leave{opacity:0;pointer-events:none}
.oa-opening-contours{position:absolute;inset:0;background-image:url("../Assets/Brand/omoide-atlas-contours.svg");background-size:cover;background-position:center;opacity:.075}
.oa-opening-inner{position:relative;z-index:1;width:min(680px,88vw);text-align:center}
.oa-opening-mark{width:72px;height:72px;margin-bottom:15px;filter:brightness(0) invert(1);opacity:.8}
.oa-opening-japanese{margin-bottom:3px;color:#c79b56;font:400 1.2rem/1.2 "Cormorant Garamond",serif;letter-spacing:.18em}
.oa-opening h1{margin:0;color:#fff8ec;font:500 clamp(2.7rem,8vw,5.2rem)/.9 "Cormorant Garamond",serif;letter-spacing:.055em}
.oa-opening p{margin:16px 0 0;color:#d7cbbb;font:italic 1.08rem/1.5 "Cormorant Garamond",serif}
.oa-opening-rule{display:flex;align-items:center;justify-content:center;gap:8px;width:190px;margin:22px auto}
.oa-opening-rule span{width:70px;height:1px;background:rgba(199,155,86,.5)}
.oa-opening-rule i{width:5px;height:5px;border:1px solid #c79b56;transform:rotate(45deg)}
.oa-opening strong{display:block;color:#c9bca8;font-size:.58rem;font-weight:500;letter-spacing:.18em}

/* Elevated empty states */
.oa-atlas-empty{padding:52px 30px!important;border:1px solid #d9cdbd!important;border-radius:24px!important;background:#fffdf8!important;text-align:center}
.oa-atlas-empty-mark{display:grid!important;place-items:center!important;width:54px!important;height:54px!important;margin:0 auto 16px!important;border:1px solid #b88a48!important;border-radius:50%!important;color:#9b7136!important}
.oa-atlas-empty-mark .oa-atlas-line-icon{width:23px;height:23px}
.oa-atlas-empty h3{margin:8px 0 6px!important;color:#293334!important;font:500 2rem/1 "Cormorant Garamond",serif!important}
.oa-atlas-empty p{color:#746b61!important}

/* Fine global polish */
.back-button{letter-spacing:.025em}
.primary-button{box-shadow:0 8px 18px rgba(55,48,38,.08)}
.page-heading h2{letter-spacing:-.01em}
.oa-kicker{letter-spacing:.15em}

@media(max-width:800px){
 .oa-journey-active-grid{grid-template-columns:1fr}
 .oa-journey-chapter{min-height:150px}
 .oa-journey-keepsakes{grid-template-columns:1fr}
 .oa-keepsake-card{min-height:210px}
 .oa-horizon-row{grid-template-columns:34px 1fr 26px}
 .oa-horizon-row em{display:none}
}
@media(max-width:520px){
 .oa-journey-atlas{margin-top:24px}
 .oa-journey-atlas-intro{padding-left:8px;padding-right:8px}
 .oa-atlas-horizon{padding:22px 18px}
 .oa-keepsake-copy strong{font-size:1.75rem}
 .oa-opening-mark{width:60px;height:60px}
}


/* ======================================================
   ANNIVERSARY ELEGANCE REFINEMENT
   Remove the remaining "panel" feeling from editorial headings.
====================================================== */

/* Journey title becomes part of the page, not a coloured banner */
.oa-journey-atlas-intro{
    max-width:860px;
    margin:8px auto 42px;
    padding:14px 24px 30px;
    background:transparent;
    box-shadow:none;
    border:0;
    text-align:center;
}
.oa-journey-atlas-intro .oa-kicker{color:#a47739}
.oa-journey-atlas-intro h2{
    margin:10px auto 12px;
    max-width:760px;
    color:#273234;
    font:500 clamp(3rem,6vw,4.8rem)/.92 "Cormorant Garamond",serif;
    letter-spacing:-.015em;
}
.oa-journey-atlas-intro h2 em{color:#8b6d48}
.oa-journey-atlas-intro p{
    max-width:590px;
    color:#746c62;
    font:italic 1.05rem/1.55 "Cormorant Garamond",serif;
}
.oa-journey-atlas-intro::after{margin-top:27px}

/* The Atlas Ahead header is editorial typography inside the existing sheet */
.oa-atlas-horizon>header{
    max-width:680px;
    margin:0 0 28px;
    padding:0;
    background:transparent;
    box-shadow:none;
    border:0;
}
.oa-atlas-horizon>header .oa-kicker{color:#9d7137}
.oa-atlas-horizon h3{
    margin:6px 0 7px;
    color:#293334;
    font:500 2.45rem/1 "Cormorant Garamond",serif;
}
.oa-atlas-horizon header p{
    max-width:570px;
    color:#756c61;
    font:italic .95rem/1.55 "Cormorant Garamond",serif;
}

/* The Table title becomes a restaurant-menu title page, not an app banner */
.oa-table-global-hero{
    position:relative;
    max-width:840px;
    margin:6px auto 58px;
    padding:28px 28px 34px;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    text-align:center;
}
.oa-table-global-hero::before{
    content:"";
    display:block;
    width:1px;
    height:34px;
    margin:0 auto 22px;
    background:#b7833c;
}
.oa-table-global-hero::after{
    content:"";
    display:block;
    width:86px;
    height:1px;
    margin:30px auto 0;
    background:#b7833c;
}
.oa-table-global-hero .oa-table-kicker{
    color:#9b7136!important;
    font-size:.62rem;
    letter-spacing:.18em;
}
.oa-table-global-hero h1{
    margin:12px 0 5px;
    color:#263033!important;
    font:500 clamp(4.2rem,9vw,7.2rem)/.78 "Cormorant Garamond",serif!important;
    letter-spacing:.025em!important;
}
.oa-table-global-subtitle{
    margin:13px 0 0;
    color:#8a6d48!important;
    font:italic 1.35rem/1.35 "Cormorant Garamond",serif!important;
}
.oa-table-global-intro{
    max-width:610px;
    margin:26px auto 0;
    color:#686159!important;
    font:400 1rem/1.8 "Montserrat",sans-serif;
}

/* Make the three collection portals feel like menu leaves rather than app tiles */
.oa-table-global-portals-only{
    max-width:1040px;
    margin:0 auto;
    gap:28px!important;
}
.oa-table-global-portal{
    min-height:270px!important;
    padding:30px 26px 26px!important;
    border:0!important;
    border-top:1px solid #cdbb9f!important;
    border-bottom:1px solid #cdbb9f!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.oa-table-global-portal:hover{
    background:rgba(255,253,248,.55)!important;
    transform:none!important;
}
.oa-table-global-portal h2{
    font:500 2.25rem/1 "Cormorant Garamond",serif!important;
}
.oa-table-global-icon{
    background:transparent!important;
}
.oa-table-global-note{
    border-top:1px solid #d9cdbd;
    margin-top:52px!important;
}

@media(max-width:700px){
    .oa-journey-atlas-intro{margin-bottom:30px;padding-left:12px;padding-right:12px}
    .oa-table-global-hero{margin-bottom:38px;padding:18px 16px 26px}
    .oa-table-global-portals-only{gap:16px!important}
    .oa-table-global-portal{min-height:225px!important}
}


/* Final anniversary refinement */
.oa-atlas-horizon>header{
    max-width:680px;
    margin:0 auto 28px;
    text-align:center;
}
.oa-atlas-horizon header p{
    margin-left:auto;
    margin-right:auto;
}