/* Self hosted web fonts. Serving them from this site removes two external
   connections and the render blocking stylesheet request they caused.
   Baloo 2 and Nunito are both released under the SIL Open Font License.
   Only the latin and vietnamese subsets are shipped. */

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/baloo2-500-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/baloo2-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/baloo2-600-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/baloo2-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/baloo2-700-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/baloo2-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/baloo2-800-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/baloo2-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito-400-italic-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito-400-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/nunito-600-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/nunito-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/nunito-700-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/nunito-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stylesheet for the child photo archive front page.
   Colors, spacing and rounding follow the handed over design file. */

:root {
    --ink: #4A3F51;
    --ink-soft: #6E6178;
    --ink-faint: #8B7D95;
    --ink-quiet: #9A8AA6;
    --pink: #F49CBB;
    --pink-strong: #C2588A;
    --pink-light: #FDE7F0;
    --purple: #B8A1E3;
    --purple-strong: #8E6BC4;
    --purple-light: #EDE7F9;
    --teal: #3A8B93;
    --teal-light: #E2F3F4;
    --amber: #D99B3E;
    --amber-light: #FFF2D6;
    --paper: #FFF9FB;
    --line: #F3E4EB;
    --card-shadow: 0 6px 18px rgba(74, 63, 81, .06);
    --title-font: "Baloo 2", Nunito, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Nunito, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--pink-strong); text-decoration: none; }
a:hover { color: var(--purple-strong); }

::selection { background: var(--pink); color: #fff; }

.page-wrap {
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 80% -180px, var(--pink-light) 0%, rgba(253, 231, 240, 0) 65%),
        radial-gradient(900px 480px at 0% 120px, #E6F4F5 0%, rgba(230, 244, 245, 0) 60%),
        var(--paper);
}

.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4.5vw, 24px);
}

/* Top bar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 0 8px;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    box-shadow: 0 4px 14px rgba(244, 156, 187, .4);
}

.brand-name {
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
}

.topnav { display: flex; gap: 8px; flex-wrap: wrap; }

.topnav a {
    font-weight: 700;
    font-size: 15px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(74, 63, 81, .07);
    color: var(--ink);
}

.topnav a:hover { background: var(--pink-light); color: var(--pink-strong); }

/* Hero */
.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 40px);
    align-items: center;
    padding: clamp(26px, 5vw, 44px) 0 clamp(34px, 6vw, 56px);
}

.hero-eyebrow {
    margin: 0 0 14px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #C58BB8;
}

.hero-name {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(38px, 8.5vw, 60px);
    line-height: 1.06;
    letter-spacing: -1.2px;
    text-wrap: balance;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hero-nickname {
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 26px;
    color: var(--pink-strong);
}

.hero-bullet { width: 6px; height: 6px; border-radius: 50%; background: #D9C7E4; }

.hero-birth { font-weight: 600; font-size: 18px; color: #7A6C84; }

.hero-lead {
    margin: 22px 0 0;
    max-width: 520px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.btn {
    display: inline-block;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 17px;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 8px 20px rgba(244, 156, 187, .45); }
.btn-pink:hover { background: #EE85A9; color: #fff; }

.btn-plain { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(74, 63, 81, .08); }
.btn-plain:hover { background: var(--teal-light); color: var(--teal); }

.btn-back { font-size: 15px; padding: 10px 18px; margin-bottom: 18px; }

.hero-photo { position: relative; display: flex; justify-content: center; }

.blob { position: absolute; border-radius: 50%; }
.blob-yellow { top: -6px; right: 14px; width: 76px; height: 76px; background: #FFE7A8; opacity: .75; }
.blob-blue { bottom: 6px; left: 6px; width: 52px; height: 52px; background: #BFE7EA; opacity: .8; }

.polaroid {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 16px 16px 62px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(74, 63, 81, .13);
    transform: rotate(-2.4deg);
}

.polaroid-frame {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: #F7EAF0;
}

.polaroid-frame img { width: 100%; height: 100%; object-fit: cover; }

.polaroid-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #B590A6;
    font-size: 16px;
}

.polaroid-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0;
    text-align: center;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 19px;
    color: var(--ink-quiet);
}

/* Counters */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding-bottom: 12px;
}

.stat { background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--card-shadow); }

.stat-number { margin: 0; font-family: var(--title-font); font-weight: 800; font-size: 34px; line-height: 1; }
.stat-pink { color: var(--pink-strong); }
.stat-purple { color: var(--purple-strong); }
.stat-teal { color: var(--teal); }
.stat-amber { color: var(--amber); }

.stat-label { margin: 8px 0 0; font-weight: 700; font-size: 15px; color: var(--ink-faint); }

/* Blocks */
.block { padding: clamp(44px, 9vw, 66px) 0 8px; scroll-margin-top: 84px; }
.block-tight { padding-bottom: 0; }

.block-title {
    margin: 0 0 6px;
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(28px, 7vw, 40px);
    letter-spacing: -.5px;
}

.block-lead { margin: 0 0 28px; font-size: 18px; color: var(--ink-faint); }

.empty-line { margin: 10px 0 0; font-size: 17px; color: var(--ink-quiet); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.cards-small { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
    background: #fff;
    border-radius: 22px;
    padding: 26px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #C58BB8;
}

.card-value { font-family: var(--title-font); font-weight: 700; font-size: 26px; }
.card-title { font-family: var(--title-font); font-weight: 700; font-size: 21px; line-height: 1.25; }
.card-when { font-weight: 700; font-size: 14px; color: var(--pink-strong); }
.card-note { font-size: 16px; line-height: 1.5; color: var(--ink-faint); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.chip-0 { background: var(--pink-light); color: var(--pink-strong); }
.chip-1 { background: var(--purple-light); color: #7B5FB5; }
.chip-2 { background: var(--teal-light); color: #357F87; }
.chip-3 { background: var(--amber-light); color: #B07D22; }

.card-wide {
    grid-column: 1 / -1;
    background: linear-gradient(120deg, var(--pink-light), var(--purple-light) 55%, var(--teal-light));
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: clamp(22px, 5vw, 30px) clamp(22px, 5vw, 32px);
}

.card-parents { margin: 8px 0 0; font-family: var(--title-font); font-weight: 700; font-size: 30px; }

.card-quote {
    margin: 0;
    max-width: 460px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    font-style: italic;
    text-wrap: pretty;
}

/* Albums */
.album-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; }

.album-card {
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(74, 63, 81, .07);
    color: var(--ink);
}

.album-card:hover { color: var(--ink); }

.album-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #F7EAF0; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-cover-empty { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #F8ECF2 0 7px, #F0DDE7 7px 14px); }

.album-meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.album-name { font-family: var(--title-font); font-weight: 700; font-size: 21px; }
.album-count { font-weight: 600; font-size: 15px; color: var(--ink-quiet); }

.album-photos {
    columns: 210px;
    column-gap: 10px;
}

/* Videos */
/* auto-fill, not auto-fit: with a single clip the card must keep its column width
   instead of stretching across the whole row. */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.video-card {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 6px 18px rgba(74, 63, 81, .07);
    color: var(--ink);
    font-family: inherit;
}

.video-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #EFE2EA;
}

.video-cover img { width: 100%; height: 100%; object-fit: cover; }

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px rgba(52, 42, 58, .25);
}

/* Triangle drawn with borders, so the play mark needs no image file. */
.video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-left: 16px solid var(--pink-strong);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.video-length {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(38, 30, 42, .72);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.video-meta { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }
.video-title { font-family: var(--title-font); font-weight: 700; font-size: 20px; }
.video-date { font-weight: 600; font-size: 15px; color: var(--ink-quiet); }

.lightbox-video { max-width: 94vw; max-height: 82vh; border-radius: 12px; background: #000; }

/* Age jump bar */
.agebar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 249, 251, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    margin-top: 22px;
}

.agebar-inner {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.agebar-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(74, 63, 81, .07);
    color: var(--ink);
    white-space: nowrap;
}

.agebar-item:hover { background: var(--pink-light); color: var(--pink-strong); }

.agebar-label { font-family: var(--title-font); font-weight: 700; font-size: 16px; }
.agebar-count { font-weight: 700; font-size: 13px; opacity: .65; }

/* Timeline */
.timeline { padding-bottom: 60px; }

.notice {
    margin: 26px 0 34px;
    background: #fff;
    border: 2px dashed #F0C9DA;
    border-radius: 22px;
    padding: 28px 30px;
}

.notice-title { margin: 0 0 6px; font-family: var(--title-font); font-weight: 700; font-size: 22px; }
.notice-body { margin: 0; font-size: 17px; line-height: 1.6; color: #7A6C84; text-wrap: pretty; }

.age-group { scroll-margin-top: 130px; padding: 34px 0 10px; border-top: 1px solid var(--line); }

.age-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.age-title { margin: 0; font-family: var(--title-font); font-weight: 800; font-size: 34px; }
.age-range { font-weight: 700; font-size: 17px; color: #C58BB8; }
.age-count { font-weight: 600; font-size: 16px; color: #A99DB2; }

.month-row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; padding-bottom: 26px; }

.month-name {
    flex: 0 1 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 17px;
    color: #7A6C84;
}

.month-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 5px var(--pink-light);
    flex: none;
}

 /* Staggered grid: every photo keeps its own ratio, nothing is cropped.
    Browser columns balance the heights, so the bottoms line up on their own. */
.month-photos {
    flex: 1 1 260px;
    min-width: 0;
    columns: 210px;
    column-gap: 10px;
}

.tile {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #F7EAF0;
    box-shadow: 0 4px 12px rgba(74, 63, 81, .08);
    break-inside: avoid;
    aspect-ratio: 4 / 3;
}

.tile img { width: 100%; height: 100%; object-fit: contain; }

/* Footer and phone tab bar */
.site-footer { border-top: 1px solid var(--line); background: #fff; }

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 34px;
    padding-bottom: 34px;
}

.footer-name { margin: 0; font-family: var(--title-font); font-weight: 700; font-size: 20px; }
.footer-note { margin: 0; font-size: 16px; color: var(--ink-quiet); }

.tabbar { display: none; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(38, 30, 42, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lightbox[hidden] { display: none; }

.lightbox-image { max-width: 94vw; max-height: 82vh; border-radius: 12px; object-fit: contain; }

.lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    font-size: 16px;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 15px;
}

.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: 18px; right: auto; }
.lightbox-nav.next { right: 18px; }

@media (max-width: 860px) {
    .topnav { display: none; }
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 78;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 249, 251, .97);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(74, 63, 81, .06);
    }

    .tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 4px;
        border-radius: 14px;
        color: var(--ink);
        font-family: var(--title-font);
        font-weight: 700;
        font-size: 13px;
    }

    .tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }

    .timeline { padding-bottom: 96px; }

    .month-photos,
    .album-photos { columns: 150px; }

    .month-name { flex-basis: 100%; }
}