/* 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. */

/* Each colour and the title font is a box of Appearance > Theme Options (the core writes them as
   --tuetran-* variables into themes/generated/theme-options.css); the value after the comma is the
   design's own and is what shows while a site has not saved those boxes. Primary and secondary are
   the pink and the purple; the rest are keys of the colour palette. */
:root {
    --ink: var(--tuetran-ink, #4A3F51);
    --ink-soft: var(--tuetran-ink-soft, #6E6178);
    --ink-faint: var(--tuetran-ink-faint, #8B7D95);
    --ink-quiet: var(--tuetran-ink-quiet, #9A8AA6);
    --pink: var(--tuetran-primary, #F49CBB);
    --pink-strong: var(--tuetran-pink-strong, #C2588A);
    --pink-light: var(--tuetran-pink-light, #FDE7F0);
    --purple: var(--tuetran-secondary, #B8A1E3);
    --purple-strong: var(--tuetran-purple-strong, #8E6BC4);
    --purple-light: var(--tuetran-purple-light, #EDE7F9);
    --teal: var(--tuetran-teal, #3A8B93);
    --teal-light: var(--tuetran-teal-light, #E2F3F4);
    --amber: var(--tuetran-amber, #D99B3E);
    --amber-light: var(--tuetran-amber-light, #FFF2D6);
    --paper: var(--tuetran-paper, #FFF9FB);
    --line: var(--tuetran-line, #F3E4EB);
    --card-shadow: 0 6px 18px rgba(74, 63, 81, .06);
    --title-font: var(--tuetran-font-title, "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: numbers of the returned drawing (sheet 03). */
.video-section { padding: clamp(46px, 9vw, 70px) 0 10px; }

/* auto-fill, not the drawing's auto-fit: with fewer clips than columns a card keeps its column width instead of
   stretching across the row. With the drawing's four cards both give the same grid: 3 columns at 1440, 2 at 834, 1 at 390. */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }

.video-card {
    display: flex;
    flex-direction: column;
    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: Nunito, "Segoe UI", system-ui, sans-serif;
    transition: transform .15s, box-shadow .15s;
}

.video-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(74, 63, 81, .14); }
.video-card:active { transform: translateY(0) scale(.985); box-shadow: 0 3px 10px rgba(74, 63, 81, .1); }
.video-card:focus-visible { outline: 3px solid var(--pink-strong); outline-offset: 3px; }

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

.video-cover img { display: block; 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: #fff;
    box-shadow: 0 6px 16px rgba(74, 63, 81, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink-strong);
}

.video-play svg { display: block; margin-left: 3px; }

.video-length {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(74, 63, 81, .82);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.video-meta { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }

.video-title {
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    color: var(--ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.video-date { font-weight: 600; font-size: 15px; color: var(--ink-quiet); }

/* Video box: full-screen layer over the page. The stage is as wide as the frame the clip needs: at most 94% of the
   screen wide and at most the smaller of 82% of the screen height and the height minus 150 (close button, two gaps,
   a caption of two lines, padding). dvh is the real height on a phone (Safari 15.4 and later); vh stands in before that. */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.videobox {
    position: fixed;
    inset: 0;
    z-index: 92;
    background: rgba(52, 42, 58, .86);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
    animation: fadeUp .18s ease-out;
}

.videobox[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .videobox { animation: none; }
    .video-card { transition: none; }
}

.video-stage {
    --video-basis: min(82vh, calc(100vh - 150px));
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(94vw, calc(var(--video-basis) * 1.7778));
}

@supports (height: 100dvh) {
    .video-stage { --video-basis: min(82dvh, calc(100dvh - 150px)); }
}

.video-stage.is-portrait { width: min(94vw, calc(var(--video-basis) * .5625)); }

.video-close-row { display: flex; justify-content: flex-end; }

.video-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-family: Nunito, sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.video-close:hover { background: rgba(255, 255, 255, .26); }
.video-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.video-player {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #2E2634;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    aspect-ratio: 16 / 9;
}

.video-stage.is-portrait .video-player { aspect-ratio: 9 / 16; }

.video-element { display: block; width: 100%; height: 100%; object-fit: contain; background: #2E2634; }

/* The band the browser's own controls take at the foot of the frame; it only keeps its place in the measure and never takes a tap. */
.video-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; }

.video-caption {
    margin: 0;
    text-align: center;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: #F7EAF0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 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(var(--tabs, 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);
    }

    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 54px;
        padding: 8px 2px;
        border-radius: 16px;
        background: transparent;
        color: #A293AC;
        font-family: Nunito, sans-serif;
    }

    .tab.is-on { background: var(--pink-light); color: var(--pink-strong); }

    .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; }
    .tab.is-on .tab-dot { opacity: 1; }

    .tab-label { font-family: var(--title-font); font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; }

    .timeline { padding-bottom: 96px; }

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

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