/* =========================================================
   Minh Đức — My Life Journey
   Design tokens: every design value is declared once here.
   Layout: Flexbox only. No Grid, no ::before/::after, no absolute layout.
   ========================================================= */
:root {
  /* Colour — taken from the Minh Đức logo: royal blue wordmark, crown blue, sky, silver, on white */
  --color-bg: #f5f8fc;
  --color-paper: #ffffff;
  --color-paper-glass: rgba(255, 255, 255, 0.92);
  --color-surface-soft: #edf2f8;
  --color-ink: #17233a;           /* navy-black */
  --color-ink-soft: #3a4659;
  --color-muted: #5d6879;
  --color-line: #e1e8f1;
  --color-line-strong: #cbd5e2;
  --color-blue: #4082ca;          /* logo crown — decoration: dots, rules */
  --color-blue-strong: #1d5fb8;   /* logo royal blue — text, links, buttons; 6.2:1 with white */
  --color-blue-deep: #0b4596;     /* logo wordmark — hover */
  --color-blue-soft: #e7f0fb;
  --color-sky: #83c5f7;           /* logo paper plane */
  --color-star: #4f5a69;          /* logo silver stars, darkened for text */
  --color-star-soft: #eceff4;
  --color-white: #ffffff;
  --color-overlay: rgba(14, 24, 44, 0.95);
  --color-overlay-line: rgba(255, 255, 255, 0.3);
  --color-overlay-muted: rgba(255, 255, 255, 0.72);
  --gradient-hero: linear-gradient(165deg, var(--color-bg) 45%, var(--color-blue-soft) 100%);
  /* Sky — the logo's light blues, kept soft */
  --sky-top: #d4e7fb;
  --sky-mid: #eef5fd;
  --cloud: rgba(255, 255, 255, 0.8);
  --gradient-sky:
    radial-gradient(ellipse 18rem 6rem at 85% 12%, var(--cloud) 0 40%, transparent 72%),
    radial-gradient(ellipse 14rem 5rem at 10% 90%, var(--cloud) 0 40%, transparent 72%),
    linear-gradient(160deg, var(--sky-top) 0%, var(--sky-mid) 100%);
  --gradient-page-top: linear-gradient(180deg, var(--sky-mid) 0%, var(--color-bg) 34rem);
  --gradient-cover-sky: linear-gradient(160deg, var(--sky-top), var(--sky-mid));
  --gradient-cover-silver: linear-gradient(160deg, #e3e8ef, var(--color-star-soft));
  --gradient-cover-blue: linear-gradient(160deg, #dbe7f8, var(--color-blue-soft));
  --scrim: linear-gradient(0deg, rgba(14, 24, 44, 0.62) 0%, rgba(14, 24, 44, 0.18) 45%, rgba(14, 24, 44, 0) 70%);
  --color-on-photo: #ffffff;
  --color-on-photo-muted: rgba(255, 255, 255, 0.86);
  --color-on-accent-muted: rgba(255, 255, 255, 0.9);
  --color-on-accent-line: rgba(255, 255, 255, 0.24);
  --color-track: rgba(255, 255, 255, 0.85);
  --scrim-soft: linear-gradient(0deg, rgba(14, 24, 44, 0.28), rgba(14, 24, 44, 0.08));

  /* Type */
  --font-display: "Mali", "Nunito", "Comic Sans MS", cursive;
  --font-body: "Nunito", "Helvetica Neue", "Arial", sans-serif;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 3.2vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 4.8vw, 3.75rem);
  --text-hero: clamp(3rem, 6.5vw, 5.5rem);
  --text-stat: clamp(1.875rem, 3vw, 2.5rem);
  --text-age: clamp(1.875rem, 2.8vw, 2.75rem);
  --text-cover: 3rem;
  --text-name: clamp(2.75rem, 4.4vw, 4.25rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-hero: 1.1;
  --leading-display: 1.15;
  --leading-tight: 1.3;
  --leading-snug: 1.3;
  --leading-copy: 1.65;
  --tracking-display: 0;
  --tracking-caps: 0.16em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 999rem;

  /* Shadow — always soft and warm */
  --shadow-sm: 0 1px 2px rgba(24, 45, 90, 0.05);
  --shadow-card: 0 0.5rem 1.75rem rgba(24, 45, 90, 0.07);
  --shadow-lift: 0 0.875rem 2.25rem rgba(24, 45, 90, 0.11);
  --shadow-photo: 0 1.5rem 3.5rem rgba(24, 45, 90, 0.16);
  --focus-ring: 2px solid var(--color-blue-strong);
  --focus-offset: 3px;

  /* Sizes */
  --container: 74rem;
  --gutter: 1.5rem;
  --header-height: 4.5rem;
  --tap: 2.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --brand-mark: 3.25rem;
  --brand-mark-lg: 5rem;
  --timeline-date: 7rem;
  --timeline-rail: 1rem;
  --timeline-dot: 0.875rem;
  --timeline-dot-border: 3px;
  --timeline-line: 2px;
  --card-media: 15rem;
  --month-card-min: 12rem;
  --thumb: 2.25rem;
  --thumb-overlap: -0.5rem;
  --milestone-photo: 4rem;
  --rule-width: 3rem;
  --readable: 42rem;
  --measure-xs: 24rem;
  --measure-sm: 28rem;
  --measure-md: 34rem;
  --lightbox-img: min(72rem, 78vw);
  --lift: -2px;
  --bento-gap: 1rem;
  --bento-min: 38rem;
  --hero-tile-min: 21rem;
  --tile-cover: 4.5rem;
  --progress-h: 0.5rem;
  --dot-sm: 0.5rem;
  --star-chip: 1.75rem;
  --play-size: 3.5rem;
  --gallery-row: 15rem;
  --gallery-min: 8rem;

  --transition: 220ms ease;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; font-variant-numeric: lining-nums; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-copy); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static; width: auto; height: auto; margin: 0; padding: var(--space-3) var(--space-4); clip: auto; background: var(--color-ink); color: var(--color-paper); }
.ky-container { width: min(calc(100% - var(--gutter) * 2), var(--container)); margin: 0 auto; }
.ky-icon { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }

/* ---------- Shared type ---------- */
.ky-eyebrow, .ky-card-kicker { margin: 0 0 var(--space-3); color: var(--color-blue-strong); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); line-height: var(--leading-snug); text-transform: uppercase; }
.ky-section-title, .ky-page-title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.ky-section-title { font-size: var(--text-3xl); }
.ky-page-title { font-size: var(--text-4xl); }
.ky-text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); color: var(--color-blue-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); transition: gap var(--transition), color var(--transition); }
.ky-text-link:hover { gap: var(--space-3); color: var(--color-blue-deep); }

/* ---------- Buttons & chips ---------- */
.ky-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid var(--color-blue-strong); border-radius: var(--radius-pill); background: var(--color-blue-strong); color: var(--color-white); font-size: var(--text-sm); font-weight: var(--weight-semibold); transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition); }
.ky-button:hover { transform: translateY(var(--lift)); border-color: var(--color-blue-deep); background: var(--color-blue-deep); box-shadow: var(--shadow-card); }
.ky-button--ghost { border-color: var(--color-line-strong); background: transparent; color: var(--color-ink); }
.ky-button--ghost:hover { border-color: var(--color-ink-soft); background: var(--color-paper); }
.ky-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ky-chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-soft); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: border-color var(--transition), background var(--transition), color var(--transition); }
.ky-chip:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.ky-chip[aria-pressed="true"], .ky-chip[aria-current="page"] { border-color: var(--color-blue-strong); background: var(--color-blue-strong); color: var(--color-white); }

/* ---------- Header ---------- */
.ky-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-line); background: var(--color-paper-glass); }
.ky-header__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-5); min-height: var(--header-height); }
.ky-brand { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.ky-brand__logo { flex-shrink: 0; width: var(--brand-mark); height: var(--brand-mark); border-radius: var(--radius-pill); }
.ky-brand__logo--large { width: var(--brand-mark-lg); height: var(--brand-mark-lg); }
.ky-brand__name { display: flex; flex-direction: column; gap: var(--space-1); }
.ky-brand strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-display); }
.ky-brand small { color: var(--color-muted); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); line-height: var(--leading-display); text-transform: uppercase; }

/* ---------- Home: bento ---------- */
.ky-bento-section { padding: var(--space-6) 0 var(--space-4); background: var(--gradient-page-top); }
.ky-bento { display: flex; flex-direction: column; gap: var(--bento-gap); min-height: var(--bento-min); }
.ky-bento__row { display: flex; gap: var(--bento-gap); }
.ky-bento__group { display: flex; flex: 2.35 1 0; gap: var(--bento-gap); min-width: 0; }
.ky-bento__stack { display: flex; flex: 1.15 1 0; flex-direction: column; gap: var(--bento-gap); min-width: 0; }
.ky-bento__row--bottom > .ky-tile--cta { flex: 1.15 1 0; }
.ky-tile { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-paper); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
a.ky-tile:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
.ky-tile__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ky-tile__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ky-tile__meta { color: var(--color-muted); font-size: var(--text-xs); }
.ky-tile .ky-text-link { margin-top: auto; min-height: 0; }

.ky-bento__row--top { flex: 1 1 auto; }
.ky-tile--intro { flex: 1 1 0; justify-content: flex-end; gap: var(--space-3); padding: var(--space-6); border: 0; background: var(--gradient-sky); box-shadow: none; }
.ky-tile__eyebrow { margin: 0; color: var(--color-blue-deep); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ky-tile__name { margin: 0; font-family: var(--font-display); font-size: var(--text-name); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-hero); }
.ky-tile__lead { margin: 0; color: var(--color-ink-soft); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; line-height: var(--leading-snug); }
.ky-tile--intro .ky-tile__meta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-soft); }
.ky-tile--photo { flex: 1.35 1 0; min-height: var(--hero-tile-min); padding: 0; overflow: hidden; border: 0; box-shadow: var(--shadow-photo); }
.ky-tile--photo img, .ky-tile--photo .ky-photo-placeholder { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }

.ky-tile--latest { flex: 1.25 1 0; gap: var(--space-4); }
.ky-tile__dot { width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--radius-pill); background: var(--color-blue); }
.ky-tile__latest { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ky-tile__cover { display: flex; flex-shrink: 0; width: var(--tile-cover); height: var(--tile-cover); overflow: hidden; border-radius: var(--radius-lg); }
.ky-tile__cover img, .ky-tile__cover .ky-cover-empty { width: 100%; height: 100%; object-fit: cover; }
.ky-tile__cover .ky-cover-empty strong { font-size: var(--text-2xl); }
.ky-tile__cover .ky-cover-empty small { display: none; }
.ky-tile__latest-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.ky-tile--quote { flex: 1 1 0; justify-content: space-between; gap: var(--space-4); border: 0; background: var(--color-blue-soft); box-shadow: none; }
.ky-tile--quote blockquote { margin: 0; }
.ky-tile--quote p { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.ky-tile--quote figcaption { color: var(--color-blue-strong); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.ky-tile--age { flex: 1.3 1 0; gap: var(--space-1); border: 0; background: var(--gradient-sky); box-shadow: none; }
.ky-tile--age .ky-tile__label { color: var(--color-blue-deep); }
.ky-tile__age { margin-top: var(--space-2); white-space: nowrap; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-age); font-weight: var(--weight-semibold); line-height: var(--leading-display); }
.ky-tile--age .ky-tile__meta { color: var(--color-ink-soft); }
.ky-progress { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
.ky-progress__track { display: flex; height: var(--progress-h); overflow: hidden; border-radius: var(--radius-pill); background: var(--color-track); }
.ky-progress__bar { border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-sky), var(--color-blue-strong)); }
.ky-progress strong { color: var(--color-ink); font-weight: var(--weight-semibold); }

.ky-tile--milestone { flex: 1 1 0; border: 0; background: var(--color-star-soft); box-shadow: none; }
.ky-tile--milestone .ky-tile__label { color: var(--color-star); }
.ky-tile__star { display: inline-flex; align-items: center; justify-content: center; width: var(--star-chip); height: var(--star-chip); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-blue-strong); }
.ky-tile--milestone .ky-tile__title { margin-top: var(--space-2); font-size: var(--text-xl); }
.ky-tile--milestone .ky-tile__meta { color: var(--color-ink-soft); }

.ky-tile--cta { gap: var(--space-4); border: 0; background: var(--color-blue-strong); color: var(--color-white); box-shadow: var(--shadow-card); }
a.ky-tile--cta:hover { background: var(--color-blue-deep); }
.ky-tile__figures { display: flex; justify-content: space-between; gap: var(--space-3); }
.ky-tile__figures span { display: flex; flex-direction: column; color: var(--color-on-accent-muted); font-size: var(--text-xs); }
.ky-tile__figures strong { color: var(--color-white); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-display); }
.ky-tile__cta { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--color-on-accent-line); font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* Empty cover: month number instead of a blank photo frame. Three tints keep a rail of them calm but not flat. */
.ky-cover-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); background: var(--gradient-cover-sky); color: var(--color-blue-strong); }
.ky-cover-empty strong { font-family: var(--font-display); font-size: var(--text-cover); font-weight: var(--weight-semibold); line-height: var(--leading-display); }
.ky-cover-empty small { color: var(--color-muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ky-month-card:nth-child(3n+2) .ky-cover-empty, .ky-timeline-item:nth-child(3n+2) .ky-cover-empty { background: var(--gradient-cover-silver); color: var(--color-star); }
.ky-month-card:nth-child(3n+3) .ky-cover-empty, .ky-timeline-item:nth-child(3n+3) .ky-cover-empty { background: var(--gradient-cover-blue); color: var(--color-blue-deep); }

.ky-section--months { padding-top: var(--space-6); }
.ky-section--months .ky-section-heading { align-items: center; }

/* ---------- Sections ---------- */
.ky-section { padding: var(--space-8) 0; }
.ky-section--soft { background: var(--color-surface-soft); }
.ky-section--tight { padding-top: var(--space-6); }
.ky-section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.ky-section-heading .ky-eyebrow { margin-bottom: var(--space-2); }

/* ---------- Timeline (home + journey) ---------- */
.ky-timeline { display: flex; flex-direction: column; }
.ky-timeline-item { display: flex; align-items: stretch; gap: var(--space-5); }
.ky-timeline-date { display: flex; flex: 0 0 var(--timeline-date); flex-direction: column; align-items: flex-end; padding-top: var(--space-5); text-align: right; }
.ky-timeline-date strong { white-space: nowrap; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ky-timeline-date span { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ky-timeline-date__inline { display: none; }
.ky-timeline-rail { display: flex; flex: 0 0 var(--timeline-rail); flex-direction: column; align-items: center; padding-top: var(--space-6); }
.ky-timeline-dot { flex-shrink: 0; width: var(--timeline-dot); height: var(--timeline-dot); border: var(--timeline-dot-border) solid var(--color-blue); border-radius: var(--radius-pill); background: var(--color-paper); }
.ky-timeline-line { flex: 1; width: var(--timeline-line); margin-top: var(--space-2); background: var(--color-line-strong); }
.ky-timeline-item:last-child .ky-timeline-line { visibility: hidden; }
.ky-timeline-item:first-child .ky-timeline-dot { background: var(--color-blue); }

.ky-memory-card { display: flex; flex: 1; gap: var(--space-5); min-width: 0; margin-bottom: var(--space-5); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.ky-memory-card:hover { transform: translateY(var(--lift)); border-color: var(--color-line-strong); box-shadow: var(--shadow-lift); }
.ky-memory-card__media { display: flex; flex: 0 0 var(--card-media); overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-soft); }
.ky-memory-card__media img, .ky-memory-card__media .ky-photo-placeholder, .ky-memory-card__media .ky-cover-empty { width: 100%; height: 100%; min-height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.ky-memory-card:hover .ky-memory-card__media img { transform: scale(1.03); }
.ky-memory-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: var(--space-3) var(--space-3) var(--space-2) 0; }
.ky-memory-card__body .ky-card-kicker { margin-bottom: var(--space-2); }
.ky-memory-card__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); transition: color var(--transition); }
.ky-memory-card:hover .ky-memory-card__title { color: var(--color-blue-strong); }
.ky-memory-card__excerpt { display: -webkit-box; max-width: var(--measure-md); margin: 0 0 var(--space-3); overflow: hidden; color: var(--color-muted); font-size: var(--text-sm); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ky-memory-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.ky-thumbs { display: flex; align-items: center; }
.ky-thumbs__item, .ky-thumbs__more { display: inline-flex; align-items: center; justify-content: center; width: var(--thumb); height: var(--thumb); margin-left: var(--thumb-overlap); overflow: hidden; border: 2px solid var(--color-paper); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.ky-thumbs__item:first-child { margin-left: 0; }
.ky-thumbs__item img, .ky-thumbs__item .ky-photo-placeholder { width: 100%; height: 100%; object-fit: cover; }
.ky-thumbs__item .ky-photo-placeholder { font-size: 0; }
.ky-thumbs__more { background: var(--color-blue-soft); color: var(--color-blue-strong); font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.ky-photo-placeholder { display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--color-blue-soft); color: var(--color-muted); font-size: var(--text-xs); text-align: center; }

.ky-growth { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.ky-growth__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-ink-soft); font-size: var(--text-xs); }
.ky-growth__item .ky-icon { color: var(--color-muted); }
.ky-growth--large { margin: var(--space-5) 0 0; }
.ky-growth--large .ky-growth__item { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-line); background: var(--color-paper); font-size: var(--text-sm); }

/* ---------- Month rail ---------- */
.ky-month-rail { display: flex; gap: var(--space-4); margin: 0 calc(var(--space-2) * -1); padding: var(--space-2) var(--space-2) var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--color-line-strong) transparent; scrollbar-width: thin; }
.ky-month-card { display: flex; flex: 0 0 calc((100% - var(--space-4) * 4) / 5); min-width: var(--month-card-min); scroll-snap-align: start; }
.ky-month-card__link { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.ky-month-card__link:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
.ky-month-card__media { display: flex; overflow: hidden; background: var(--color-surface-soft); }
.ky-month-card__media img, .ky-month-card__media .ky-photo-placeholder, .ky-month-card__media .ky-cover-empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--transition); }
.ky-month-card__link:hover .ky-month-card__media img { transform: scale(1.04); }
.ky-month-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--space-4); }
.ky-month-card__body .ky-card-kicker { margin-bottom: var(--space-2); }
.ky-month-card__title { display: -webkit-box; margin: 0 0 var(--space-3); overflow: hidden; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ky-month-card__range { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ky-month-card__count { display: inline-flex; align-items: center; gap: var(--space-2); margin: auto 0 0; color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- Empty state ---------- */
.ky-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-paper); text-align: center; }
.ky-empty-state h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ky-empty-state p { max-width: var(--measure-sm); margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Footer ---------- */
.ky-footer { border-top: 1px solid var(--color-line); background: var(--color-paper); }
.ky-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-7) 0 var(--space-6); }
.ky-footer__about { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure-sm); }
.ky-footer__tagline { margin: 0; color: var(--color-ink-soft); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; line-height: var(--leading-snug); }
.ky-footer__note { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.ky-footer__nav { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.ky-footer__nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink-soft); font-size: var(--text-sm); transition: color var(--transition); }
.ky-footer__nav a:hover { color: var(--color-blue-strong); }
.ky-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- Journey page ---------- */
.ky-page-hero { padding: var(--space-8) 0 var(--space-6); background: var(--gradient-hero); }
.ky-page-hero__lead { max-width: var(--measure-md); margin: var(--space-4) 0 0; color: var(--color-ink-soft); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; line-height: var(--leading-snug); }
.ky-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-7); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); }
.ky-toolbar__count { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.ky-toolbar__count strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.ky-year { margin-bottom: var(--space-7); }
.ky-year__title { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-display); }
.ky-year__title span { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); }

/* ---------- Memory page ---------- */
.ky-memory-page__header { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.ky-back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); margin-bottom: var(--space-6); padding: 0 var(--space-4) 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-soft); font-size: var(--text-sm); transition: border-color var(--transition), color var(--transition); }
.ky-back-link:hover { border-color: var(--color-line-strong); color: var(--color-ink); }
.ky-memory-page__content { padding-bottom: var(--space-8); }
.ky-story { max-width: var(--readable); margin-bottom: var(--space-7); color: var(--color-ink-soft); font-size: var(--text-lg); }
.ky-month-firsts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-star-soft); }
.ky-month-firsts__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-star); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ky-month-firsts__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ky-month-firsts__list li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-paper); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
/* Justified rows: every item keeps its own aspect ratio and grows with it, so nothing is cropped. */
.ky-gallery { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-3); }
.ky-gallery__item { display: flex; flex: var(--ratio) 1 calc(var(--ratio) * var(--gallery-row)); flex-direction: column; gap: var(--space-2); min-width: var(--gallery-min); margin: 0; }
.ky-gallery__filler { flex: 10 1 0; }
.ky-gallery__button { display: flex; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--color-surface-soft); box-shadow: var(--shadow-sm); cursor: zoom-in; transition: box-shadow var(--transition); }
.ky-gallery__button:hover { box-shadow: var(--shadow-lift); }
.ky-gallery__button img, .ky-gallery__button .ky-photo-placeholder { width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; transition: transform var(--transition); }
.ky-gallery__button:hover img { transform: scale(1.03); }
.ky-gallery__button--video { align-items: center; justify-content: center; aspect-ratio: var(--ratio); background: var(--scrim-soft), var(--poster) center / cover no-repeat, var(--color-ink); }
.ky-play { display: inline-flex; align-items: center; justify-content: center; width: var(--play-size); height: var(--play-size); padding-left: var(--space-1); border-radius: var(--radius-pill); background: var(--color-paper-glass); color: var(--color-ink); box-shadow: var(--shadow-card); transition: transform var(--transition); }
.ky-play .ky-icon { width: var(--icon-md); height: var(--icon-md); }
.ky-gallery__button--video:hover .ky-play { transform: scale(1.08); }
.ky-badge--video { background: var(--color-blue-soft); color: var(--color-blue-strong); }
.ky-gallery__caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-snug); }
.ky-gallery__text { flex: 1 1 auto; min-width: 0; }
.ky-gallery__date { margin-left: auto; white-space: nowrap; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ky-badge { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--color-star-soft); color: var(--color-star); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); line-height: var(--leading-display); text-transform: uppercase; }
.ky-badge .ky-icon { width: var(--text-2xs); height: var(--text-2xs); }
.ky-pager { display: flex; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.ky-pager__link, .ky-pager__spacer { flex: 1 1 0; min-width: 0; }
.ky-pager__link { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); transition: border-color var(--transition), box-shadow var(--transition); }
.ky-pager__link:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card); }
.ky-pager__link--next { align-items: flex-end; text-align: right; }
.ky-pager__label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-blue-strong); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ky-pager__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }

/* ---------- Lightbox (modal overlay: fixed is required to cover the viewport) ---------- */
.ky-lightbox { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-5); background: var(--color-overlay); opacity: 0; transition: opacity var(--transition); }
.ky-lightbox.is-open { opacity: 1; }
.ky-lightbox__close, .ky-lightbox__arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--color-overlay-line); border-radius: var(--radius-pill); background: transparent; color: var(--color-white); cursor: pointer; transition: background var(--transition); }
.ky-lightbox__close:hover, .ky-lightbox__arrow:hover { background: var(--color-overlay-line); }
.ky-lightbox__close .ky-icon, .ky-lightbox__arrow .ky-icon { width: var(--icon-md); height: var(--icon-md); }
.ky-lightbox__close { align-self: flex-end; margin-bottom: var(--space-3); }
.ky-lightbox__img-wrap { display: flex; align-items: center; gap: var(--space-4); max-width: 100%; }
.ky-lightbox__main-img { min-width: 0; max-width: var(--lightbox-img); max-height: 68vh; border-radius: var(--radius-md); object-fit: contain; }
.ky-lightbox__info { color: var(--color-white); text-align: center; }
.ky-lightbox__caption { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
.ky-lightbox__date { margin: var(--space-1) 0 0; color: var(--color-overlay-muted); font-size: var(--text-xs); }
.ky-lightbox__thumbs { display: flex; gap: var(--space-2); max-width: 80vw; margin-top: var(--space-4); overflow-x: auto; }
.ky-lightbox__thumb { display: flex; flex: 0 0 var(--tap); width: var(--tap); height: var(--tap); padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: transparent; opacity: 0.55; cursor: pointer; transition: opacity var(--transition); }
.ky-lightbox__thumb:hover { opacity: 0.85; }
.ky-lightbox__thumb.is-active { border-color: var(--color-white); opacity: 1; }
.ky-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Tablet — 48rem to 64rem: keep two-part hero, tighten rhythm
   ========================================================= */
@media (max-width: 64rem) {
  .ky-bento { min-height: 0; }
  .ky-bento__row { flex-wrap: wrap; }
  .ky-bento__group, .ky-bento__stack, .ky-bento__row--bottom > .ky-tile--cta { flex: 1 1 100%; }
  .ky-bento__stack { flex-direction: row; }
  .ky-bento__stack .ky-tile { flex: 1 1 0; }
  :root { --gutter: 1.25rem; --card-media: 11rem; --timeline-date: 5.5rem; }
  .ky-section { padding: var(--space-7) 0; }
  .ky-timeline-date strong { font-size: var(--text-xl); }
  .ky-month-card { flex-basis: calc((100% - var(--space-4) * 2) / 3); }
  :root { --gallery-row: 12rem; }
}

/* =========================================================
   Mobile — below 48rem: a separate, reading-first layout
   ========================================================= */
@media (max-width: 47.99rem) {
  .ky-bento-section { padding: var(--space-4) 0 var(--space-6); }
  .ky-bento__row, .ky-bento__group, .ky-bento__stack { display: contents; }
  .ky-tile--photo { order: 1; flex: none; height: 20rem; min-height: 0; padding: 0; }
  .ky-tile--intro { order: 2; flex: none; padding: var(--space-5); }
  .ky-tile--age { order: 3; }
  .ky-tile--latest { order: 4; }
  .ky-tile--milestone { order: 5; }
  .ky-tile--quote { order: 6; }
  .ky-tile--cta { order: 7; }
  .ky-tile:not(.ky-tile--photo):not(.ky-tile--intro) { flex: none; padding: var(--space-4) var(--space-5); }
  .ky-section--months .ky-section-heading { flex-direction: row; align-items: center; justify-content: space-between; }
  :root { --gutter: 1rem; --header-height: 4rem; --stats-overlap: -2.5rem; }

  .ky-brand strong { font-size: var(--text-xl); }
  :root { --brand-mark: 2.75rem; }
          


  .ky-section { padding: var(--space-7) 0; }
  .ky-section-heading { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-5); }

  .ky-timeline-item { gap: var(--space-3); }
  .ky-timeline-date { display: none; }
  .ky-timeline-date__inline { display: inline; }
  .ky-timeline-rail { padding-top: var(--space-5); }
  .ky-memory-card { flex-direction: column; gap: var(--space-3); padding: var(--space-2); }
  .ky-memory-card__media { flex-basis: auto; }
  .ky-memory-card__media img, .ky-memory-card__media .ky-photo-placeholder, .ky-memory-card__media .ky-cover-empty { aspect-ratio: 16 / 10; }
  .ky-memory-card__body { padding: 0 var(--space-2) var(--space-2); }
  .ky-memory-card__title { font-size: var(--text-xl); }

  .ky-month-rail { margin: 0 calc(var(--gutter) * -1); padding: var(--space-2) var(--gutter) var(--space-4); scroll-padding-left: var(--gutter); }
  .ky-month-card { flex-basis: 70%; min-width: 0; }



  .ky-footer__inner { flex-direction: column; gap: var(--space-4); padding: var(--space-6) 0 var(--space-4); }
  .ky-footer__nav { gap: 0 var(--space-5); }
  .ky-footer__bottom { flex-direction: column; }

  .ky-page-hero { padding: var(--space-7) 0 var(--space-5); }
  .ky-toolbar { margin-bottom: var(--space-6); }
  .ky-year__title { margin-bottom: var(--space-4); }

  .ky-memory-page__header { padding-top: var(--space-4); padding-bottom: var(--space-6); }
  .ky-growth--large { gap: var(--space-1); }
  .ky-growth--large .ky-growth__item { gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
  .ky-back-link { margin-bottom: var(--space-5); }
  :root { --gallery-row: 8.5rem; --play-size: 2.75rem; }
  .ky-gallery { gap: var(--space-4) var(--space-2); }
  .ky-gallery__caption { font-size: var(--text-xs); }
  .ky-pager { flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); }
  .ky-pager__spacer { display: none; }
  .ky-pager__link--next { align-items: flex-start; text-align: left; }

  .ky-lightbox { padding: var(--space-3); }
  .ky-lightbox__img-wrap { gap: var(--space-2); }
  .ky-lightbox__main-img { max-width: calc(100vw - var(--tap) * 2 - var(--space-6)); max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}