/* ==========================================================================
   NẾP DESIGN SYSTEM 2.0.0 — biến chuẩn cho toàn hệ sinh thái NẾP
   Nếp Lễ (web + app) · Lịch Nếp (web + app) · Nếp Sắm
   Nguồn: Bộ nhận diện NẾP LỄ (Brand Guideline 14/10/2026, trang 06 Bảng màu,
   07–10 Typography). Quyết định: ADR-031 (kb/DECISION_LOG.md), thay ADR-024.
   Tên biến giữ nguyên như bản 1.0 để chép đè được.
   Mọi cặp chữ/nền ≥ 4.5:1 (WCAG AA). Không viết mã màu trực tiếp — luôn dùng biến.
   ========================================================================== */

/* Font tự lưu trên máy chủ (bộ ký tự vietnamese + latin + latin-ext), không gọi Google Fonts.
   Marcellus chỉ có 400 và KHÔNG có chữ có dấu tiếng Việt (ơ ư ạ ế ễ …):
   - trang/khối tiếng Anh, Tây Ban Nha: Marcellus;
   - trang/khối tiếng Việt: Taviraj (font Google gần dáng Marcellus nhất, đủ dấu Việt). */

:root {
  /* ---- Màu thương hiệu gốc (in ấn & logo) ---- */
  --brand-red: #B31917;       /* Đỏ lễ */
  --brand-jade: #0F4D3C;      /* Xanh ngọc */
  --brand-gold: #D4A03A;      /* Vàng kim */
  --brand-cream: #F7E9D2;     /* Kem nhạt */
  --brand-jade-2: #176A53;    /* màu phụ */
  --brand-teal: #5A9C8F;
  --brand-orange: #E57A2E;    /* Cam phụ trợ */
  --brand-peach: #F4C58A;
  --brand-sage: #C7D8C9;
  --brand-black: #1F1F1F;     /* Đen xám */
  --brand-grey: #666666;      /* Xám */
  --brand-greige: #E5DED1;    /* Xám kem */
  --brand-ivory: #FAF6EE;     /* Trắng kem */

  /* ---- Nền ---- */
  --bg: #FAF6EE;          /* nền trang (Trắng kem) */
  --paper: #F7E9D2;       /* khối nhấn, hero, ghi chú; nền màn hình app (Kem nhạt) */
  --surface: #FFFDF8;     /* thẻ, ô nhập */
  --sunk: #E5DED1;        /* chân trang, dải trũng (Xám kem) */
  --line: #E5DED1;
  --line-strong: #D9C7A5;

  /* ---- Chữ ---- */
  --ink: #1F1F1F;         /* 15.3:1 trên --bg */
  --muted: #5E5A55;       /* bản màn hình của Xám #666666; ≥ 5.1:1 trên mọi nền sáng */
  --on-fill: #FFFFFF;     /* chữ trên nền đỏ/ngọc */

  /* ---- Đỏ lễ — màu chính ---- */
  --red: #B31917;         /* 6.4:1 — chữ/biểu tượng đỏ, ngày lễ */
  --red-deep: #8A1210;    /* rê chuột/nhấn */
  --red-soft: #F2D4D1;    /* Đỏ lễ 20% — chip, nhãn */
  --red-fill: #B31917;    /* nền nút chính, chữ trắng 6.8:1 */

  /* ---- Xanh ngọc — màu phụ ---- */
  --jade: #0F4D3C;        /* 9.1:1 — mục đang chọn, liên kết, thành công */
  --jade-2: #176A53;      /* rê chuột trên nền ngọc, biểu đồ */
  --jade-soft: #C7D8C9;
  --jade-fill: #0F4D3C;
  --panel: #0F4D3C;       /* khối "Hôm nay" */
  --on-panel: #F7E9D2;
  --on-panel-muted: #DCD9C4;
  --panel-accent: #E8C47A; /* chữ nhỏ màu kim trên nền ngọc (5.9:1); #D4A03A chỉ cho chữ ≥ 24px */

  /* ---- Vàng kim ---- */
  --gold: #D4A03A;        /* CHỈ trang trí: viền, hoa văn, sao, chấm (2.2:1 — không làm chữ) */
  --gold-text: #86600F;   /* vàng dạng chữ: ngày âm, tháng nhuận (5.3:1) */
  --gold-line: #D4A03A;
  --gold-soft: #F6ECD8;   /* Vàng kim 20% */

  /* ---- Màu phụ trợ ---- */
  --orange: #E57A2E;      /* trang trí, minh họa */
  --orange-text: #A8521A; /* chữ cam (5.0:1) */
  --peach: #F4C58A;       /* nền nhãn; chữ trên nó dùng --ink */
  --teal: #3A7468;        /* tiết khí, thông tin — bản chữ của #5A9C8F (5.0:1) */

  /* ---- Ngữ nghĩa lịch (Lịch Nếp và Nếp Lễ dùng giống nhau) ---- */
  --cal-holiday: var(--red);
  --cal-ram: var(--gold-text);
  --cal-ram-dot: var(--gold);
  --cal-today-bg: var(--panel);
  --cal-today-fg: var(--on-panel);
  --cal-good: var(--jade);
  --cal-bad: var(--muted);           /* hắc đạo — trung tính, không dùng đỏ */
  --cal-term: var(--teal);
  --cal-lunar: var(--muted);
  --focus: var(--gold);              /* vòng sáng bàn phím 3px, cách 4px */

  /* ---- Chữ ---- */
  --font-display: 'Marcellus', 'Taviraj', Georgia, 'Times New Roman', serif;   /* en, es */
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 400;  /* Marcellus chỉ có 400 */

  /* ---- Hình khối ---- */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --shadow-1: 0 8px 22px rgba(95, 57, 34, .07);
  --shadow-2: 0 18px 40px rgba(31, 31, 31, .16);
  --maxw: 1240px;
  --gutter: max(16px, 5vw);
  color-scheme: light;
}

/* Tiếng Việt: thay Marcellus bằng Taviraj cho cả khối (không trộn font từng chữ) */
:lang(vi) {
  --font-display: 'Taviraj', Georgia, 'Times New Roman', serif;
  --display-weight: 500;  /* Taviraj 500 ≈ độ đậm thị giác của Marcellus 400 */
}
h1, h2, .display { font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; }

/* Giao diện tối "sơn mài" — theo máy, trừ khi người dùng chọn sáng */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171513; --paper: #1F1F1F; --surface: #262422; --sunk: #2E2B28;
    --line: #3A3632; --line-strong: #4A443D;
    --ink: #FAF6EE; --muted: #BDB6AA; --on-fill: #FFFFFF;
    --red: #F28B7E; --red-deep: #F7ADA3; --red-soft: #3D1B19; --red-fill: #B31917;
    --jade: #7FC2AE; --jade-2: #5A9C8F; --jade-soft: #17302A; --jade-fill: #176A53;
    --panel: #0F4D3C; --on-panel: #F7E9D2; --on-panel-muted: #DCD9C4; --panel-accent: #E8C47A;
    --gold: #D4A03A; --gold-text: #D4A03A; --gold-line: #8F6E2E; --gold-soft: #3A2F1C;
    --orange: #F0A06A; --orange-text: #F0A06A; --peach: #4A3420; --teal: #8CC4B8;
    --shadow-1: 0 8px 22px rgba(0, 0, 0, .35); --shadow-2: 0 18px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171513; --paper: #1F1F1F; --surface: #262422; --sunk: #2E2B28;
  --line: #3A3632; --line-strong: #4A443D;
  --ink: #FAF6EE; --muted: #BDB6AA; --on-fill: #FFFFFF;
  --red: #F28B7E; --red-deep: #F7ADA3; --red-soft: #3D1B19; --red-fill: #B31917;
  --jade: #7FC2AE; --jade-2: #5A9C8F; --jade-soft: #17302A; --jade-fill: #176A53;
  --panel: #0F4D3C; --on-panel: #F7E9D2; --on-panel-muted: #DCD9C4; --panel-accent: #E8C47A;
  --gold: #D4A03A; --gold-text: #D4A03A; --gold-line: #8F6E2E; --gold-soft: #3A2F1C;
  --orange: #F0A06A; --orange-text: #F0A06A; --peach: #4A3420; --teal: #8CC4B8;
  --shadow-1: 0 8px 22px rgba(0, 0, 0, .35); --shadow-2: 0 18px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* Ảnh minh họa nền kem (ngựa lễ) luôn nằm trên khối "giấy" sáng, kể cả khi giao diện tối. */

/* NẾP ĐÓ ĐÂY — site styles. Colours only through NẾP DS 2.0.0 variables (nep-le-tokens.css) + aliases below. */
/* Metric-matched fallbacks: text laid out in Georgia/Arial takes the same space as Lora/Montserrat, so the
 * swap to the web font does not shift the layout (Lighthouse CLS 0.117 on the home hero before this).
 * Values from the shipped woff2 vs Georgia/Arial: size-adjust = avg advance ratio (a–z + space), overrides = hhea / size-adjust. */
@font-face { font-family: 'Lora Fallback'; src: local('Georgia'); size-adjust: 105.06%; ascent-override: 95.75%; descent-override: 26.08%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'); size-adjust: 119.6%; ascent-override: 80.9%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lora-vietnamese-400-normal.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: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lora-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lora-latin-400-normal.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: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/lora-vietnamese-600-normal.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: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/lora-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/lora-latin-600-normal.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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-vietnamese-500-normal.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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.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: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-vietnamese-600-normal.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: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.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; }

/* NĐĐ aliases (sampled from the Owner design export; all map to DS 2.0 values or neutral tints of them) */
:root {
  --ndd-ink-deep: #0D2F26;     /* chữ tiêu đề đậm trên nền kem */
  --ndd-muted: #4F5B53;        /* chữ phụ: màu thiết kế #637168 làm đậm để ≥4.5:1 cả trên nền kem #F7E9D2 và xanh nhạt #E7EDE6 */
  --ndd-rule: #DDD7C9;         /* đường kẻ / rãnh thanh trượt */
  --ndd-jade-tint: #E7EDE6;    /* nền sơ đồ, thẻ đang chọn */
  --ndd-warn-bg: #F6ECD8;      /* = --gold-soft */
  --ndd-warn-strong: #F7E5C6;  /* cảnh báo “!” */
  --ndd-band-soft: #F3EEE3;    /* dải Chuyện Nếp trang chủ */
  --ndd-on-hero: #F4EFE4;      /* chữ thân trên ảnh hero */
  --ndd-rule-soft: #EAE5D9;
  --ndd-card: #FFFFFF;
  --ndd-map: #E4E8DA;          /* nền sơ đồ minh họa (PDF Owner) */
  --ndd-note: #EAF0E8;         /* nền ghi chú ◇ (PDF Owner) */
  --ndd-warn: #F4E8CB;         /* nền cảnh báo ! (PDF Owner) */         /* nền thẻ / panel / ô nhập (PDF Owner đo được #FFFFFF) */    /* đường kẻ header trang con (PDF Owner) */
  --font-display: 'Lora', 'Lora Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', 'Lora Fallback', Georgia, 'Times New Roman', serif;
  --font-ui: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 400;
  --wrap: 1280px;
  --pad: clamp(16px, 4.4vw, 80px);
}
/* The design uses Lora for display on Vietnamese pages (not Taviraj): override the DS :lang(vi) rule */
:lang(vi) { --font-display: 'Lora', 'Lora Fallback', Georgia, 'Times New Roman', serif; --display-weight: 400; }
/* NĐĐ 1.0 ships the light theme only (the PDF has no dark frames) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: light; --bg: #FAF6EE; --paper: #F7E9D2; --surface: #FFFDF8; --sunk: #E5DED1; --line: #E5DED1; --line-strong: #D9C7A5; --ink: #1F1F1F; --muted: #5E5A55; --red: #B31917; --red-deep: #8A1210; --red-soft: #F2D4D1; --red-fill: #B31917; --jade: #0F4D3C; --jade-2: #176A53; --jade-soft: #C7D8C9; --jade-fill: #0F4D3C; --gold: #D4A03A; --gold-text: #86600F; --gold-soft: #F6ECD8; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jade); text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--jade); margin: 0 0 .4em; line-height: 1.2; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--paper); padding: 1px 5px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--jade); color: #fff; padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 8px; color: #fff; }
main:focus, #drawer-h:focus:not(:focus-visible), h2[tabindex="-1"]:focus { outline: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.display-xl { font-size: clamp(2.4rem, 5.4vw, 4.75rem); line-height: 1.08; }
.display-l { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; }
.display-m { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.display-s { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.eyebrow, .label { font: 600 .72rem/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 0 0 .6em; display: block; }
.label { color: var(--red); }
.lead-s { color: var(--ndd-muted); font-size: 1.02rem; max-width: 960px; }
.fine { font: 500 .8rem/1.55 var(--font-ui); color: var(--ndd-muted); }
.on-dark { color: var(--on-panel) !important; }
.section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.section-s { margin-top: 48px; }
.narrow { max-width: 820px; }

/* top bar + header */
.topbar { background: var(--jade); color: var(--on-panel); font: 600 .68rem/1 var(--font-ui); letter-spacing: .04em; }
.topbar .wrap { display: flex; gap: 24px; padding-top: 10px; padding-bottom: 10px; }
.topbar-r { opacity: .85; font-weight: 500; }
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--jade); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--red-fill); color: #fff; font: 400 1.35rem/1 var(--font-display); }
.brand-name { font: 400 1.35rem/1 var(--font-display); letter-spacing: .01em; }
.is-sub .brand-mark { display: none; }
.main-nav { display: flex; align-items: center; gap: 22px; flex: 1; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.main-nav > ul:first-child { margin: 0 auto; }
.main-nav a { font: 600 .78rem/1 var(--font-ui); color: var(--ndd-ink-deep); text-decoration: none; padding: 8px 0; }
.main-nav a[aria-current="page"] { color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.nav-util a { font-weight: 500; color: var(--ndd-muted); }
.main-nav .nav-cta { color: #fff; padding: 12px 18px; }
.saved-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--red-fill); color: #fff; font: 600 .66rem/1 var(--font-ui); }
.header-mobile { display: none; margin-left: auto; gap: 6px; }
.icon-btn { min-width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--jade); text-decoration: none; border-radius: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent; font: 600 .82rem/1.2 var(--font-ui); text-decoration: none; transition: background .15s, border-color .15s; }
.btn-sm { min-height: 40px; padding: 9px 14px; font-size: .76rem; }
.btn-primary { background: var(--red-fill); color: #fff; }
.btn-primary:hover { background: var(--red-deep); color: #fff; }
.btn-outline { background: var(--surface); color: var(--jade); border-color: var(--ndd-rule); }
.btn-outline:hover { border-color: var(--jade); color: var(--jade); }
.btn-ghost-light { color: #fff; }
.btn-ghost-light:hover { color: var(--panel-accent); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--sunk); color: var(--muted); border-color: var(--sunk); }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--jade); font: 600 .76rem/1.3 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { font: 600 .8rem var(--font-ui); }

/* hero */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--ndd-ink-deep); }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 45, 37, .86) 0%, rgba(8, 45, 37, .55) 45%, rgba(8, 45, 37, .1) 100%); }
.hero-in { position: relative; padding-top: 80px; padding-bottom: 140px; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero-lead { max-width: 56ch; font-size: 1.05rem; color: var(--ndd-on-hero); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 24px 0; }
.plan-card-wrap { position: relative; margin-top: -90px; z-index: 2; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(18px, 2.6vw, 32px); margin-bottom: 20px; }
.plan-card { box-shadow: var(--shadow-1); }

/* discovery form */
.df-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.budget-out { display: block; font: 400 clamp(2.2rem, 4vw, 3rem)/1.1 var(--font-display); color: var(--jade); margin: 6px 0 14px; }
.range { width: 100%; height: 32px; -webkit-appearance: none; appearance: none; background: transparent; --fill: 20%; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--fill), var(--ndd-rule) var(--fill)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ndd-rule); }
.range::-moz-range-progress { height: 4px; background: var(--red); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--red-fill); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--red); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--red-fill); border: 3px solid #fff; }
.range-ends { display: flex; justify-content: space-between; font: 500 .72rem var(--font-ui); color: var(--ndd-muted); }
.field { margin-bottom: 16px; }
select, input[type=date], input[type=time], input[type=number], input[type=text], input:not([type]), textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ndd-rule); border-radius: var(--r-sm); background: var(--surface); color: var(--jade); font: 500 .9rem var(--font-ui); }
textarea { min-height: 72px; }
[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red); }
.field-error { color: var(--red); font: 600 .78rem/1.4 var(--font-ui); margin: 6px 0 0; }
.chips { border: 0; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 6px 4px; }
.chips legend { margin-bottom: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 12px; border-radius: var(--r-pill); font: 600 .78rem var(--font-ui); color: var(--ndd-ink-deep); border: 1px solid transparent; }
.chip input:checked + span { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.chip input:checked + span::before { content: '✓ '; }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.form-foot { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.group-total { font: 500 .9rem var(--font-ui); color: var(--ink); background: var(--ndd-jade-tint); padding: 10px 12px; border-radius: var(--r-sm); }
.group-total .label { display: block; color: var(--jade); }

/* cards */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.media { position: relative; margin: 0 0 14px; overflow: hidden; border-radius: var(--r-sm); background: var(--sunk); aspect-ratio: 3 / 2; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.tall { aspect-ratio: 4 / 5; }
.media.wide { aspect-ratio: 21 / 8; margin-bottom: 32px; }
.badge-illus { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 253, 248, .92); color: var(--ink); font: 500 .66rem var(--font-ui); padding: 4px 8px; border-radius: 4px; }
.trip-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.trip-card .media { border-radius: 0; margin: 0; }
.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-body .btn { align-self: flex-start; margin-top: auto; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.meta { font: 600 .7rem var(--font-ui); color: var(--red); margin: 0; }
.save-btn:not(.btn) { border: 0; background: none; font: 600 .74rem var(--font-ui); color: var(--jade); padding: 8px 4px; min-height: 40px; }
.save-btn[aria-pressed="true"] .heart { color: var(--red); }
.card-title { font-size: 1.25rem; margin-top: 6px; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-desc { font-size: .92rem; color: var(--ndd-muted); }
.card-tags, .card-assume, .card-why { font: 500 .74rem/1.5 var(--font-ui); color: var(--ndd-muted); margin: 0; }
.card-why { color: var(--red-deep); margin-top: 4px; }
.card-price { margin: 12px 0 14px; font: 500 .8rem var(--font-ui); color: var(--ndd-muted); }
.card-price strong { font: 400 1.35rem var(--font-display); color: var(--jade); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.theme-card { text-decoration: none; color: var(--jade); display: block; }
.theme-name { font: 400 1.5rem var(--font-display); display: block; }
.theme-sub { font: 500 .74rem var(--font-ui); color: var(--ndd-muted); }
.band-cream { background: var(--paper); }
.band-soft { background: var(--ndd-band-soft); }
.band-jade { background: var(--panel); color: var(--on-panel); }
.band-jade .eyebrow { color: var(--panel-accent); }
.band-jade .postcard .eyebrow { color: var(--red); }
.tell-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.postcard { background: var(--paper); color: var(--red); padding: 32px; transform: rotate(3deg); box-shadow: var(--shadow-2); max-width: 340px; justify-self: center; }
.postcard-big { font: 400 2rem/1.2 var(--font-display); color: var(--jade); }
.story-card .status-tag, .status-tag { display: inline-block; font: 600 .72rem var(--font-ui); color: var(--red); }
.status-link { font: 600 .76rem var(--font-ui); }
.partner-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* festivals */
.fest-list { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--line); }
.fest-row { display: grid; grid-template-columns: 160px 1fr 44px; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.fest-row[hidden] { display: none; }
.fest-date { display: block; font: 400 1.6rem var(--font-display); color: var(--red); }
.fest-cal { font: 600 .66rem var(--font-ui); color: var(--ndd-muted); letter-spacing: .06em; display: block; }
.fest-solar { display: block; font: 500 .76rem var(--font-ui); color: var(--jade); margin-top: 6px; }
.fest-body h3 { margin-bottom: .2em; }
.fest-body p { font-size: .9rem; color: var(--ndd-muted); margin-bottom: 8px; }
.fest-go { font-size: 1.3rem; color: var(--red); text-decoration: none; text-align: center; padding: 8px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.filter-chip, .mode { border: 1px solid var(--ndd-rule); background: var(--surface); border-radius: var(--r-pill); padding: 9px 14px; font: 600 .76rem var(--font-ui); color: var(--ndd-ink-deep); min-height: 40px; }
.filter-chip[aria-pressed="true"], .mode[aria-pressed="true"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.empty { padding: 20px; background: var(--paper); border-radius: var(--r-sm); }

/* notes, states */
.note { background: var(--ndd-warn-bg); border-radius: var(--r-sm); padding: 12px 14px; font: 500 .8rem/1.55 var(--font-ui); color: var(--ink); }
.note-ico { color: var(--gold-text); font-weight: 600; }
.note-warn { background: var(--ndd-warn-strong); }
.note-warn .note-ico { color: var(--red); }
.loading { display: flex; align-items: center; gap: 10px; padding: 32px 0; font: 500 .9rem var(--font-ui); color: var(--ndd-muted); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ndd-rule); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.js .loading:only-child { min-height: 120px; }
.empty-state { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 28px; margin: 24px 0; }
.empty-state.is-error { border-color: var(--red); }
.empty-state.small { padding: 18px; }
.ok-line { font: 600 .8rem var(--font-ui); color: var(--jade); }
.save-line { font: 500 .78rem var(--font-ui); color: var(--ndd-muted); margin-top: 12px; }
.save-line.is-ok::before { content: '✓ '; color: var(--jade); }
.save-line.is-error { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; background: var(--jade); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font: 500 .85rem var(--font-ui); box-shadow: var(--shadow-2); max-width: min(92vw, 560px); display: flex; gap: 12px; align-items: center; }
.toast[hidden] { display: none; }
.toast.is-error { background: var(--red-deep); }
.toast .link-btn { color: #fff; }
.form-summary { background: var(--red-soft); color: var(--red-deep); padding: 10px 12px; border-radius: var(--r-sm); font: 600 .8rem var(--font-ui); margin-bottom: 12px; }

/* page heads, crumbs */
.page-head { padding-top: 32px; padding-bottom: 20px; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 4px; font: 500 .74rem var(--font-ui); color: var(--ndd-muted); }
.crumbs li + li::before { content: '/'; margin-right: 4px; }
.crumbs a { color: var(--ndd-muted); }
.banner-design { background: var(--paper); text-align: center; font: 500 .74rem var(--font-ui); padding: 8px; color: var(--ndd-muted); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.plan-aside figcaption { position: absolute; left: 20px; bottom: 44px; color: #fff; }
.clusters .media { aspect-ratio: 4 / 3; }
.chips-static { font: 600 .78rem var(--font-ui); color: var(--jade); }
.ticks { padding-left: 18px; }
.ticks li { margin: 6px 0; }
.region-h { margin-top: 40px; }
.theme-pill { display: block; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--jade); }
.theme-pill strong { display: block; font: 400 1.35rem var(--font-display); }
.theme-pill span { font: 500 .74rem var(--font-ui); color: var(--ndd-muted); }

/* budget */
.budget-total { font: 400 clamp(2rem, 3.2vw, 2.6rem)/1.1 var(--font-display); color: var(--jade); margin: 6px 0 12px; }
.budget-lines { list-style: none; padding: 0; margin: 0 0 14px; font: 500 .8rem/1.5 var(--font-ui); color: var(--ndd-muted); }
.budget-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.budget-remain { font: 500 .82rem var(--font-ui); border-top: 1px solid var(--line); padding-top: 12px; }
.budget-remain.is-over { color: var(--red); font-weight: 600; }
.budget-group { background: var(--ndd-jade-tint); padding: 10px 12px; border-radius: var(--r-sm); font: 500 .8rem/1.5 var(--font-ui); }

/* planner */
.trip-title { margin-bottom: .2em; }
.day-tabs { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.day-tab { border: 0; background: none; font: 600 .78rem var(--font-ui); color: var(--jade); padding: 8px 10px; min-height: 40px; border-radius: 6px; }
.day-tab[aria-selected="true"] { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.day-link { font: 600 .78rem var(--font-ui); color: var(--jade); padding: 10px; min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }
.day-link[aria-current="true"] { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.plan-h { margin-top: 24px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 16px; }
.view-toggle { display: flex; gap: 4px; margin-bottom: 10px; }
.view-toggle button { border: 0; background: none; font: 600 .76rem var(--font-ui); color: var(--jade); padding: 8px 6px; min-height: 40px; }
.view-toggle [aria-pressed="true"] { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.map-frame { background: var(--ndd-jade-tint); border-radius: var(--r-sm); padding: 14px; perspective: 900px; }
.map-cap { font: 500 .72rem/1.4 var(--font-ui); color: var(--jade); margin: 0 0 6px; }
.map { width: 100%; height: auto; transform: rotateX(24deg) scale(.96); transform-origin: 50% 70%; transition: transform .4s ease; }
.is-flat .map { transform: none; }
.river { fill: none; stroke: #B9D1C6; stroke-width: 46; stroke-linecap: round; }
.contour { fill: none; stroke: #CFDACB; stroke-width: 1.5; }
.route { fill: none; stroke-width: 3; stroke-linejoin: round; }
.route.is-on { stroke-dasharray: 10 8; animation: dash 1.2s linear infinite; stroke-width: 4; }
@keyframes dash { to { stroke-dashoffset: -36; } }
.node circle { stroke: #fff; stroke-width: 3; }
.node text { fill: #fff; font: 700 13px var(--font-ui); pointer-events: none; }
.node .node-label { fill: var(--ndd-ink-deep); font-size: 12px; }
.node:focus-visible circle { stroke: var(--gold); stroke-width: 5; }
.map-tools { display: flex; gap: 18px; padding-top: 6px; }
.sel-card { margin-top: 16px; }
.stops { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.stop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; }
.stop.is-sel { border: 2px solid var(--jade); background: var(--ndd-jade-tint); }
.stop-time { font: 600 .7rem var(--font-ui); color: var(--red); margin: 0; }
.stop-type { color: var(--ndd-muted); font-weight: 500; margin-left: 6px; }
.stop-name { font-size: 1.15rem; margin: 4px 0 2px; }
.stop .fine { margin-bottom: 6px; }
.stop-acts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.stop-acts button, .stop-acts a { border: 0; background: none; padding: 8px 2px; min-height: 36px; font: 600 .72rem var(--font-ui); color: var(--jade); text-decoration: none; }
.stop-acts button:disabled { color: var(--ndd-muted); }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.plan-bottom { margin-top: 20px; }
.map-full-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.day-legend { padding-left: 18px; }
.day-legend li { margin-bottom: 10px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(13, 47, 38, .35); z-index: 60; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--bg); z-index: 61; overflow-y: auto; padding: 24px clamp(18px, 3vw, 32px) 40px; box-shadow: var(--shadow-2); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer .media { aspect-ratio: 16 / 9; }
.drawer h3 { margin-top: 1.2em; }
.drawer-open { overflow: hidden; }
.kv { font: 600 .82rem var(--font-ui); color: var(--jade); }
.meal { border-top: 1px solid var(--line); padding: 16px 0; }
.meal.is-current { background: var(--ndd-jade-tint); margin: 0 -14px; padding: 16px 14px; border-radius: var(--r-sm); }
.radios, .checks, .ages { border: 0; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.radios label, .checks label, .ages label, .checklist label { display: flex; gap: 10px; align-items: center; font: 500 .86rem var(--font-ui); min-height: 32px; }
.ages label { justify-content: space-between; }
.ages input { width: 90px; }
.radios input, .checks input, .checklist input { width: 20px; height: 20px; accent-color: var(--jade); }
.checklist ul { list-style: none; padding: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border: 1px solid var(--ndd-rule); background: var(--surface); border-radius: var(--r-sm); font-size: 1.2rem; color: var(--jade); }
.stepper input { width: 80px; text-align: center; }
.dialog { border: 0; border-radius: var(--r-md); padding: clamp(18px, 3vw, 28px); width: min(620px, 94vw); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-2); }
.dialog::backdrop { background: rgba(13, 47, 38, .45); }
.dlg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dl-result { font: 600 .8rem var(--font-ui); color: var(--jade); min-height: 1.2em; margin-top: 10px; }
.modes { display: flex; flex-wrap: wrap; gap: 8px; }
.active-chips { list-style: none; padding: 0; margin: 14px 0 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.achip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--ndd-rule); border-radius: var(--r-pill); padding: 4px 4px 4px 12px; font: 600 .74rem var(--font-ui); color: var(--jade); }
.achip-x { border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; font-size: 1rem; color: var(--ndd-muted); }
.achip-x:hover { background: var(--red-soft); color: var(--red); }
.results-h { margin-top: 8px; }
.group-sum { background: var(--ndd-jade-tint); padding: 10px 12px; border-radius: var(--r-sm); font: 500 .82rem var(--font-ui); margin-top: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.seg button { border: 1px solid var(--ndd-rule); background: var(--surface); border-radius: var(--r-pill); padding: 9px 14px; font: 600 .78rem var(--font-ui); color: var(--jade); min-height: 40px; }
.seg [aria-selected="true"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.draft-list { list-style: none; padding: 0; }
.draft-item { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.file-btn { position: relative; }
.day-lines { padding-left: 0; list-style: none; }
.stop-lines { padding-left: 20px; }
.stop-lines li { margin: 6px 0; }
.stop-lines .time { font: 600 .78rem var(--font-ui); color: var(--red); }
.route-line { font: 500 .8rem var(--font-ui); color: var(--jade); }
.feature-story { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; margin: 24px 0; }
.article .media.wide { margin: 24px 0; }
.article-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
.toc ol { padding-left: 0; list-style: none; font: 500 .82rem var(--font-ui); }
.toc li { margin: 8px 0; }
.toc { position: sticky; top: 96px; align-self: start; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; margin-top: 1.4em; }
.intro { font-size: 1.12rem; }
.sponsored { border: 2px dashed var(--gold); }

/* print preview sheets */
.print-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.sheets { display: grid; gap: 32px; justify-content: center; padding: 24px var(--pad) 64px; background: var(--sunk); }
.sheet { width: min(210mm, 100%); min-height: 297mm; background: #fff; padding: 16mm 14mm; box-shadow: var(--shadow-1); font-size: .86rem; }
.pr-brand { font: 600 .66rem var(--font-ui); letter-spacing: .08em; color: var(--red); }
.pr-kicker { font: 600 .72rem var(--font-ui); color: var(--jade); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-top: 18px; }
.pr-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.pr-day h3 { font-size: 1rem; margin: 12px 0 4px; }
.pr-day ul, .pr-budget ul, .pr-check { list-style: none; padding: 0; margin: 0; }
.pr-day li { padding: 2px 0; }
.pr-budget li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.pr-note { margin-top: 18px; font: 500 .74rem var(--font-ui); color: var(--ndd-muted); border-top: 1px solid var(--line); padding-top: 8px; }

/* footer */
.site-footer { background: var(--panel); color: var(--on-panel); margin-top: 64px; }
.footer-in { padding-top: 48px; padding-bottom: 40px; display: grid; gap: 10px; font: 500 .82rem var(--font-ui); }
.footer-brand { font: 400 1.6rem var(--font-display); color: #fff; margin: 0; }
.site-footer a { color: var(--on-panel); }
.site-footer a:hover { color: var(--panel-accent); }
.eco, .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.eco a, .footer-links a { display: inline-block; min-height: 24px; padding: 3px 0; }   /* WCAG 2.5.8 target size (Lighthouse target-size) */
.footer-fine { color: var(--on-panel-muted); font-size: .74rem; }

/* responsive */
@media (max-width: 1100px) {
  .main-nav ul { gap: 12px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .header-mobile { display: flex; }
  .main-nav { display: none; position: fixed; inset: 0; top: 0; z-index: 80; background: var(--bg); flex-direction: column; align-items: stretch; padding: 80px var(--pad) 32px; overflow-y: auto; }
  .menu-open .main-nav { display: flex; }
  .menu-open .header-mobile { position: fixed; right: var(--pad); top: 46px; z-index: 81; }
  .main-nav ul { flex-direction: column; gap: 0; margin: 0 !important; }
  .main-nav a { display: block; padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { margin-top: 16px; border: 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .plan-layout, .plan-grid, .map-full-grid, .tell-in, .partner-teaser, .feature-story, .article-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .topbar-r { display: none; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .df-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-4.theme-row, .home .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 560px; }
  .hero-in { padding-bottom: 120px; }
  .plan-card-wrap { margin-top: -70px; }
  .fest-row { grid-template-columns: 1fr 36px; }
  .fest-when { grid-column: 1 / -1; }
  .media.wide { aspect-ratio: 4 / 3; }
  .header-in { min-height: 60px; }
  .brand-name { font-size: 1.15rem; }
  .sheet { padding: 8mm 6mm; min-height: 0; }
  .pr-grid { grid-template-columns: 1fr; }
  .stepper input { width: 64px; }
}

/* ---------- Owner PDF type scale (NDD_UI_REFERENCE_OWNER_20261027.pdf, sha256 165ca08d…76a8) ----------
 * Sizes measured from the PDF text runs of all 38 frames (tests/visual: design 1440 = desktop, 390 = mobile).
 * Each value is exact at 390px and 1440px and interpolates linearly between. Earlier rem/clamp values above are kept
 * for structure; this block only sets the measured sizes, line heights and page gutters. */
:root { --pad: clamp(20px, calc(20px + 60 * (100vw - 390px) / 1050), 80px); --wrap: 1280px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); }
body { font-size: 15px; line-height: 26px; }
.topbar, .topbar-r { font-size: 9px; line-height: 1; }
.brand-name { font-size: clamp(20px, calc(20px + 6 * (100vw - 390px) / 1050), 26px); line-height: 1; }
.brand-mark { font-size: clamp(24px, calc(24px + 4 * (100vw - 390px) / 1050), 28px); line-height: 1; }
.eyebrow, .label, label.label, legend.label, p.label, span.label { font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.hero .eyebrow { font-size: 10px; line-height: 1.5; }
.display-xl { font-size: clamp(43px, calc(43px + 33 * (100vw - 390px) / 1050), 76px); line-height: 1.18; }
.display-l, h2.display-l { font-size: clamp(34px, calc(34px + 14 * (100vw - 390px) / 1050), 48px); line-height: 1.25; }
.display-m { font-size: 25px; line-height: 1.2; }
.display-s, h3, .card-title, .trip-title, figcaption.display-s, .prose h2, .article h2 { font-size: 25px; line-height: 1.2; }
.lead-s, .on-dark, p.on-dark { font-size: 15px; line-height: 26px; }
.hero-lead { font-size: clamp(15px, calc(15px + 2 * (100vw - 390px) / 1050), 17px); line-height: 1.76; }
.intro { font-size: clamp(19px, calc(19px + 4 * (100vw - 390px) / 1050), 23px); line-height: 1.6; }
.btn, .btn-sm, .link-arrow, .status-link, a.link-btn, .save-btn:not(.btn) { font-size: 12px; line-height: 1.3; }
.fine, .note, .budget-group, .group-sum, .budget-remain, .kv, .chips-static, .range-ends + .fine { font-size: 12px; line-height: 20px; }
.badge-illus { font-size: 10px; line-height: 1.4; }
:where(.fest-body, .meal) p, .card-desc, .stop .fine, .theme-sub, .budget-lines { font-size: 12px; line-height: 20px; }
.card-tags, .card-assume, .meta, .stop-time, .time, .stop-lines .time, .status-tag, .story-card .status-tag, .map-cap, .range-ends, .crumbs [aria-current] { font-size: 11px; line-height: 1.6; }
.card-price { font-size: 10px; line-height: 1.4; }
.card-price strong { font-size: 18px; line-height: 1.2; }
.theme-name { font-size: clamp(22px, calc(22px + 8 * (100vw - 390px) / 1050), 30px); line-height: 1.2; }
.fest-date { font-size: clamp(20px, calc(20px + 10 * (100vw - 390px) / 1050), 30px); line-height: 1.2; }
.fest-cal { font-size: 9px; line-height: 1.4; }
.fest-solar { font-size: 11px; line-height: 1.4; }
.stop-name { font-size: 17px; line-height: 1.3; }
.budget-total { font-size: 36px; line-height: 1.1; }
.budget-out { font-size: 48px; line-height: 1.1; }
.chip span, .filter-chip, .mode, .seg button, .day-tab, .day-link, .view-toggle button, .achip, .stop-acts button, .stop-acts a { font-size: 12px; line-height: 1.3; }
select, input[type=date], input[type=time], input[type=number], input[type=text], input[type=email], input:not([type]), textarea { font-size: 13px; line-height: 1.3; }
.radios label, .checks label, .ages label, .checklist label, .group-total { font-size: 13px; line-height: 1.4; }
.footer-in { font-size: 12px; line-height: 1.7; }
.footer-brand { font-size: 30px; line-height: 1.2; }
.link-btn { font-size: 11px; line-height: 1.3; }
.footer-fine { font-size: 11px; line-height: 1.6; }
.toc ol { font-size: 12px; line-height: 1.5; }
.pr-brand, .pr-kicker { font-size: 9px; line-height: 1.4; }
.sheet, :where(.sheet) p, :where(.sheet) li, .pr-note, :where(.sheet) h3 { font-size: 10.5px; line-height: 1.8; }
.sheet .pr-day h3 { font-size: 10.5px; line-height: 1.8; font-family: var(--font-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
@media (min-width: 961px) { .main-nav a { font-size: 11px; } .main-nav .nav-cta { font-size: 12px; } }
.fest-body .eyebrow, .eyebrow.on-dark, p.eyebrow.on-dark { font-size: 11px; line-height: 1.5; }
.hero .fine, .hero .eyebrow, .hero .eyebrow.on-dark, .postcard .eyebrow { font-size: 10px; line-height: 1.5; }
legend.display-s { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--jade); text-transform: none; letter-spacing: 0; padding: 0; margin-bottom: 12px; }
.nav-util a { font-size: 12px; }
.site-footer, .footer-in { font-size: 11px; }
.home .site-footer .footer-in { font-size: 12px; }
@media (min-width: 961px) { .home .nav-util a { font-size: 11px; } }
:where(.cluster, .grid-3 > .panel, [data-page="community-detail"] .panel) p { font-size: 12px; line-height: 20px; }
:where(.drawer) p { font-size: 15px; line-height: 26px; }
:where(.drawer) .fine { font-size: 12px; line-height: 20px; }
.p-sm, p.p-sm { font-size: 12px; line-height: 20px; }
.p-md, p.p-md { font-size: 15px; line-height: 26px; }
form.panel .radios label { font-size: 12px; }
.main-nav .btn { font-size: 12px; }
.crumbs a { font-size: inherit; }
.crumbs ol { font-size: 11px; margin-bottom: 20px; }
.page-head { padding-top: clamp(36px, calc(36px + 20 * (100vw - 390px) / 1050), 56px); }
.page-head > .eyebrow { margin-bottom: clamp(23px, calc(23px + 4 * (100vw - 390px) / 1050), 27px); }
.page-head > h1 { margin-bottom: clamp(45px, calc(45px + 12 * (100vw - 390px) / 1050), 57px); }
.stop .fine, .stop-lines .fine { font-size: 11px; line-height: 1.6; }
.stop-lines strong { font-size: 17px; font-weight: 400; font-family: var(--font-display); color: var(--jade); }
.day-legend strong { font-size: 12px; }
.article .prose > p:not(.note) { font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px); line-height: 1.75; }
.article .prose .panel p { font-size: 15px; }
.drawer .radios label { font-size: 13px; }
.sheet, :where(.sheet) p, :where(.sheet) li, :where(.sheet) h3, .sheet .label, .pr-note { font-size: clamp(10.5px, calc(12px - 1.5 * (100vw - 390px) / 1050), 12px); }
.sheet .pr-day h3 { font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px); font-family: var(--font-ui); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--jade); }



/* ---------- surfaces and home layout (PDF measurements, NDD-01) ---------- */
.panel, .trip-card, .stop, .theme-pill, .empty-state, .postcard + .x, select, input[type=date], input[type=time], input[type=number], input[type=text], input[type=email], input:not([type]), textarea, .btn-outline, .filter-chip, .seg button { background-color: var(--ndd-card); }
.panel { padding: 24px; }
.hero { min-height: clamp(620px, calc(640px - 20 * (100vw - 390px) / 1050), 640px); align-items: flex-start; }
.hero-in { padding-top: clamp(52px, calc(52px + 25 * (100vw - 390px) / 1050), 77px); padding-bottom: 0; }
.hero .eyebrow { margin-bottom: 27.6px; }
.hero h1 { margin-bottom: clamp(23px, calc(23px + 1 * (100vw - 390px) / 1050), 24px); }
.hero-actions { margin: 24px 0 clamp(24px, calc(24px + 5 * (100vw - 390px) / 1050), 29px); }
.plan-card-wrap { margin-top: clamp(-37px, calc(-17px - 20 * (100vw - 390px) / 1050), -17px); }
.plan-card > .eyebrow { margin-bottom: 21.6px; }
.plan-card > h2 { margin-bottom: clamp(18.6px, calc(18.6px + 0.5999999999999979 * (100vw - 390px) / 1050), 19.2px); }
.plan-card > .lead-s { margin-bottom: 21px; }
.budget-out { margin: 20px 0 14px; }
.df-side .field { margin-bottom: 17px; }
@media (max-width: 640px) { .df-grid { gap: 10px; } }
.df-budget .fine { margin-top: 12px; }
.chips { margin: 11.5px 0; gap: 0; }
.chip span { padding: 14px 0; border: 0; border-radius: 0; background: none; }
.chip + .chip::before { content: '·'; padding: 0 8px; color: var(--ndd-muted); align-self: center; }
.chip input:checked + span { background: none; border: 0; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.discover-form > .btn-primary { margin-top: 12px; }
.form-foot { margin-top: 26px; }
.section { padding-top: clamp(38px, calc(38px + 20 * (100vw - 390px) / 1050), 58px); padding-bottom: 80px; }
.band-jade.section { padding-top: clamp(51px, calc(51px + 24 * (100vw - 390px) / 1050), 75px); }
.plan-card-wrap + .section { padding-top: clamp(2px, calc(2px + 21 * (100vw - 390px) / 1050), 23px); }
.trip-card .media { aspect-ratio: auto; height: 235px; }
.home .grid-4 { gap: 16px; }
.theme-card .media.tall { aspect-ratio: 1 / 1; }
@media (min-width: 641px) { .stories-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.story-card .media { aspect-ratio: auto; height: clamp(258px, calc(261px - 3 * (100vw - 390px) / 1050), 261px); }
#h-suggest, #h-themes, #h-fest, #h-story { margin-top: clamp(25.6px, calc(25.6px + 8.0 * (100vw - 390px) / 1050), 33.6px); }
#h-partner { margin-top: 18.6px; }
#h-tell { margin-top: clamp(13.6px, calc(13.6px + 13.000000000000002 * (100vw - 390px) / 1050), 26.6px); }
#h-tell + .on-dark { margin-top: clamp(0px, calc(9px - 9 * (100vw - 390px) / 1050), 9px); }
.band-jade .btn-primary { margin-top: clamp(0px, calc(10px - 10 * (100vw - 390px) / 1050), 10px); }
@media (max-width: 960px) { .postcard { margin-top: -23px; } }
#h-suggest + .lead-s, #h-fest + .lead-s { margin-top: clamp(23.6px, calc(23.6px + 7.599999999999998 * (100vw - 390px) / 1050), 31.2px); }
#h-partner { margin-bottom: 12px; }
.home .grid-3 + .fine { margin-top: clamp(125px, calc(157px - 32 * (100vw - 390px) / 1050), 157px); }
.home .grid-3 + .fine + .btn { margin-top: clamp(15px, calc(15px + 8 * (100vw - 390px) / 1050), 23px); }
.home .section[aria-labelledby="h-suggest"] { padding-bottom: clamp(36px, calc(36px + 20 * (100vw - 390px) / 1050), 56px); }
.theme-sub { display: block; margin-top: 10px; }
@media (min-width: 961px) { .tell-in { grid-template-columns: minmax(0, 860px) 1fr; } }
.band-jade.section { padding-bottom: clamp(46px, calc(46px + 50 * (100vw - 390px) / 1050), 96px); }
.postcard > .eyebrow:first-child { margin-bottom: 21px; }
.postcard-big + .eyebrow { margin-top: 16px; }
.home .fest-list { margin-top: clamp(66px, calc(89px - 23 * (100vw - 390px) / 1050), 89px); }
.fest-row { padding: 11px 0; }
.fest-cal { margin-top: 13px; }
.fest-body h3 { margin-top: 4px; margin-bottom: 6px; }
.home .fest-list + .note { margin-top: 27px; }
.home .section[aria-labelledby="h-fest"] { padding-bottom: clamp(26px, calc(26px + 19 * (100vw - 390px) / 1050), 45px); }
.story-card > .eyebrow { margin-bottom: 13px; }
.story-card .card-desc { margin-top: 8px; }
.home .section[aria-labelledby="h-story"] { padding-bottom: clamp(190px, calc(190px + 25 * (100vw - 390px) / 1050), 215px); }
#h-partner + * , .partner-teaser .fine { margin-top: 5px; }
.partner-teaser .btn { margin-top: 10px; }
.home .partner-teaser { padding-bottom: 62px; }
.home .site-footer { margin-top: 0; }
.footer-in { gap: 0; color: var(--on-panel-muted); }
.footer-in > p, .footer-in > nav { margin: 0; line-height: 24px; }
.footer-brand { color: var(--on-panel); margin-bottom: 22px !important; line-height: 1.2 !important; }
.site-footer .eco { gap: 0; }
.site-footer .eco li + li::before { content: '·'; padding: 0 5px; }
.site-footer a { color: var(--on-panel-muted); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--on-panel); text-decoration: underline; }
.site-footer .eco a, .site-footer .eco span { text-transform: uppercase; font-weight: 500; }
.footer-fine { font-size: 10px; margin-top: 21px !important; opacity: .92; }
.card-body { padding: 21px; }
.card-top { justify-content: flex-start; gap: 0; }
.card-top .save-btn:not(.btn) { font: 600 11px/1.6 var(--font-ui); color: var(--red); padding: 0 4px; min-height: 24px; }
.card-top .save-btn:not(.btn)::before { content: '·'; margin-right: 6px; color: var(--red); }
.card-price strong { font: 600 18px/1.2 var(--font-ui); color: var(--jade); }
@media (max-width: 640px) {
  .home .grid-3:not(.stories-grid) { row-gap: 182px; }
  .home .grid-4 { gap: 10px; row-gap: 26px; }
  .home .theme-card .media.tall { aspect-ratio: auto; height: 180px; }
}
.card-body .card-title { margin-top: 12px; margin-bottom: 16px; }
.card-body .card-desc { margin-bottom: 20px; }
.card-body .card-price { margin: 18px 0; }
.story-card > .eyebrow { margin-bottom: 20px; }
.story-card .card-title { margin-bottom: 16px; }
@media (max-width: 640px) {
  .home .grid-3:not(.stories-grid) { grid-auto-rows: 1fr; row-gap: 160px; }
  .fest-row { grid-template-columns: 80px minmax(0, 1fr) 24px; gap: 10px; }
  .fest-when { grid-column: auto; }
}
.card-body .btn { margin-top: 0; }
.site-footer .eco a, .site-footer .eco span { padding: 0; min-height: 24px; display: inline-block; }
.postcard-big { font-size: 42px; line-height: 48px; }
.postcard { width: 290px; padding: 30px 28px; }
@media (max-width: 960px) { .postcard { justify-self: start; margin-left: 14px; } }
@media (min-width: 961px) { .home .header-in { padding-left: 56px; padding-right: 56px; } .home .main-nav ul { gap: 12px; } .home .nav-util { gap: 13px; } .home .nav-cta { margin-left: 18px; } }
.home .fest-row .btn, .home .fest-solar { display: none; }
.status-link, .status-tag { color: var(--red); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) { .stories-grid { row-gap: 170px; } }
/* NDD-02 (PDF) */
@media (min-width: 961px) { .plan-layout { grid-template-columns: minmax(0, 1fr) 430px; gap: 58px; } }
.plan-aside .media { aspect-ratio: auto; height: 220px; margin-bottom: 20px; }
.plan-aside .group-total { background: none; padding: 0; font: 400 15px/26px var(--font-body); color: var(--jade); }
.note-jade, .plan-aside .note { background: var(--ndd-jade-tint); color: var(--jade); }
.df-rule { border: 0; border-top: 1px solid var(--ndd-rule); margin: 20px 0; }
.is-full .day-chips { margin-bottom: 27px; }
.is-full .field { margin-bottom: 23px; }
.is-full .df-hint { margin-top: -1px; }
.is-full fieldset.chips { margin-top: 20px; margin-bottom: 18px; }
.is-full .chips > legend { margin-bottom: 16px; }
.is-full > .btn-primary { margin-top: 0; }
.plan-aside .media { margin-bottom: 26px; }
.plan-aside .panel > h2 { margin-bottom: 19px; }
.plan-aside .note { margin-top: 12px; margin-bottom: 0; }
.plan-layout { margin-top: clamp(16px, calc(16px + 14 * (100vw - 390px) / 1050), 30px); }
.is-full > .btn-primary { margin-top: 6px; }
body[data-page="plan"] .site-footer.is-sub { margin-top: clamp(17px, calc(17px + 19 * (100vw - 390px) / 1050), 36px); }
.page-head:has(+ .plan-layout) { padding-bottom: 0; }
/* NDD-03 (PDF): text chips, inline active filters, card + budget columns */
.text-chips { gap: 0; }
.text-chips .mode { border: 0; background: none; border-radius: 0; padding: 12px 0; min-height: 44px; font: 600 12px/1.3 var(--font-ui); color: var(--jade); }
.text-chips .mode + .mode::before { content: '·'; padding: 0 9px; color: var(--ndd-muted); font-weight: 500; }
.text-chips .mode.is-on, .text-chips .mode[aria-pressed="true"] { background: none; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.active-chips { gap: 0; }
.achip { border: 0; background: none; border-radius: 0; padding: 0; font: 500 12px/1.3 var(--font-ui); color: var(--jade); }
.achip + .achip::before { content: '·'; padding: 0 12px; color: var(--ndd-muted); }
.achip-x { width: 24px; height: 24px; font-size: 12px; color: var(--jade); }
.achip-x.is-fixed { display: inline-grid; place-items: center; }
.results-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; margin-bottom: 32px; }
.results-cards { display: grid; gap: 24px; }
.results-side > .btn { margin-top: 0; }
.budget-lines li { display: block; padding: 0; line-height: 23px; }
@media (max-width: 960px) { .results-main { grid-template-columns: minmax(0, 1fr); } }
.text-chips { margin-bottom: clamp(25px, calc(25px + 8 * (100vw - 390px) / 1050), 33px); }
.text-chips + .fine { margin-bottom: clamp(12px, calc(32px - 20 * (100vw - 390px) / 1050), 32px); }
.achip { min-height: 44px; display: inline-flex; align-items: center; }
.active-chips { margin-bottom: clamp(24px, calc(24px + 36 * (100vw - 390px) / 1050), 60px); }
.results-h { margin-bottom: 18px; }
.budget .label + .budget-total { margin-top: 17px; }
.budget-total + .budget-lines { margin-top: 23px; }
.budget-lines li { line-height: 29px; }
.budget-lines + .budget-remain { margin-top: 12px; padding-top: 24px; }
.budget-remain + .budget-group { margin-top: 25px; }
.budget-group + .fine { margin-top: 23px; }
.section-s > h2.display-s { margin-top: -12px; }
.section-s > h2.display-s + .fine { margin-bottom: 38px; }
/* NDD-04 (PDF) */
[data-page="hue"] .media.wide { aspect-ratio: auto; height: clamp(258px, calc(258px + 183 * (100vw - 390px) / 1050), 441px); margin-bottom: 0; }
.clusters .cluster.panel { padding: 20px 21px; margin: 0; }
.clusters .cluster h3 { margin: 0 0 12px; }
.before-visit .note { margin-top: 24px; }
.before-visit .chips-static { margin: 18px 0 0; }
.hue-intro { padding-top: clamp(104px, calc(104px + 10 * (100vw - 390px) / 1050), 114px); }
.hue-intro h2 { margin-top: 25.6px; margin-bottom: clamp(23.2px, calc(29.2px - 6.0 * (100vw - 390px) / 1050), 29.2px); }
.hue-intro .clusters { margin-top: 28px; row-gap: 125px; }
@media (max-width: 960px) { .hue-intro aside { margin-top: 83px; } .before-visit .grid-2 { row-gap: 59px; } }
.before-visit h2 { margin-bottom: 36px; }
.before-visit { margin-top: clamp(7px, calc(7px + 150 * (100vw - 390px) / 1050), 157px); }
body[data-page="hue"] .site-footer.is-sub { margin-top: 0; }
.section.before-visit { padding-bottom: clamp(26px, calc(26px + 20 * (100vw - 390px) / 1050), 46px); }
.before-visit h3 { margin-bottom: 21px; }
.clusters .cluster h3 { margin-bottom: 21px; }
.hue-intro aside > .eyebrow { margin-bottom: 21.6px; }
.hue-intro aside > h2 { margin-bottom: 20px; }
.budget .label + .budget-total { margin-top: 23px; }
.budget + .fine { margin-top: 12px; }
.budget + .fine + .btn { margin-top: 10px; }
/* NDD-06…09 (PDF): map view and in-page detail */
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 20px; }
.map-bar .view-toggle { margin: 0; }
.map-full .map-frame { margin: 20px 0 28px; }
.map-full .map { max-height: 520px; }
.map-full-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.day-legend { list-style: none; padding: 0; }
.day-legend li { margin: 0 0 12px; padding-left: 12px; }
.focus-grid { display: grid; grid-template-columns: minmax(0, 570px) minmax(0, 1fr); gap: 40px; align-items: start; }
.focus-map .note { margin-top: 20px; }
.drawer { position: static; width: auto; z-index: auto; overflow: visible; box-shadow: none; padding: 0; background: var(--ndd-card); }
.drawer-head { padding: 20px 21px 16px; }
.drawer-head .eyebrow { margin: 0; }
.drawer > .media { margin: 0; border-radius: 0; aspect-ratio: auto; height: clamp(200px, calc(200px + 117 * (100vw - 390px) / 1050), 317px); }
.drawer-body { padding: 24px 21px 28px; }
.drawer-body > h2 { margin-top: 0; }
@media (max-width: 960px) { .focus-grid, .map-full-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hero-actions .btn-ghost-light { display: none; } }

/* ---------- header / footer variants (PDF: home = full header; other pages = compact) ---------- */
.site-header { border-bottom-color: var(--ndd-rule); }
.header-in { min-height: clamp(76px, calc(76px + 12 * (100vw - 390px) / 1050), 88px); }
.site-header.is-sub { position: static; border-bottom-color: var(--ndd-rule-soft); }
.is-sub .header-in { min-height: clamp(87px, calc(87px + 8 * (100vw - 390px) / 1050), 95px); justify-content: space-between; }
.sub-nav .nav-util { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 11px; }
.sub-nav .nav-util li + li::before { content: '·'; margin-right: 11px; color: var(--ndd-muted); }
.sub-nav .nav-util a { font: 500 12px/1 var(--font-ui); color: var(--jade); text-decoration: none; padding: 8px 0; }
.sub-nav .nav-util a:hover { color: var(--red-deep); text-decoration: underline; }
.back-home { font: 500 10px/1 var(--font-ui); color: var(--jade); text-decoration: none; padding: 14px 4px; }
.is-sub .header-mobile .icon-btn { font-size: 12px; min-width: 32px; }
.site-footer.is-sub { margin-top: 64px; }
.site-footer.is-sub .footer-in { padding-top: 31px; padding-bottom: 28px; gap: 0; }
.footer-in > p, .eco { margin: 0; }
@media (max-width: 960px) {
  .is-sub .sub-nav { display: none; }
  .is-sub .header-mobile { display: flex; align-items: center; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .map { transform: none; }
}
@media print {
  @page { size: A4 portrait; margin: 0; }
  .topbar, .site-header, .site-footer, .no-print, .toast, .skip { display: none !important; }
  body, .sheets { background: #fff; }
  .sheets { padding: 0; gap: 0; display: block; }
  .sheet { box-shadow: none; width: 210mm; min-height: 297mm; page-break-after: always; break-after: page; }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
  a { color: inherit; text-decoration: none; }
}

/* compact footer (PDF: 128px band, three 11px lines on a 21px rhythm) */
.site-footer.is-sub .footer-in > p, .site-footer.is-sub .footer-in > nav, .site-footer.is-sub .eco a, .site-footer.is-sub .eco span { line-height: 21px; min-height: 21px; }
.site-footer.is-sub .footer-fine { margin-top: 0 !important; font-size: 11px; }

/* notes (PDF): ◇ information on a jade tint, ! warnings on a warm tint */
.note, .note-jade { background: var(--ndd-note); color: var(--jade); }
.note .note-ico { color: var(--jade); }
.note-warn { background: var(--ndd-warn); color: var(--ink); }
.note-warn .note-ico { color: var(--red); }
.budget-group, .group-sum { background: var(--ndd-note); color: var(--jade); }

.map-frame { background: var(--ndd-map); }

/* detail panel text (PDF NDD-07…09) */
.drawer-body p:not(.eyebrow):not(.note):not(.kv):not(.fine) { color: var(--ndd-muted); }
.drawer-head .link-btn { font: 400 15px/1.2 var(--font-display); color: var(--jade); text-decoration: none; padding: 10px 0; }
.text-list { display: flex; flex-wrap: wrap; margin: 12px 0; font: 600 12px/44px var(--font-ui); color: var(--jade); }
.text-list > span + span::before { content: '·'; padding: 0 9px; color: var(--ndd-muted); font-weight: 500; }
.text-list .is-on { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .focus-map > :not(.ctx-panel) { display: none; }
  .ctx-panel { margin: 0 0 24px; }
  .drawer { position: relative; border-radius: 12px 12px var(--r-md) var(--r-md); }
  .drawer::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ndd-rule); }
  .drawer-head { padding-top: 26px; }
}

/* planner head and detail rhythm (PDF NDD-05…09) */
.page-head > .trip-title { margin-bottom: 18px; }
.page-head > .trip-title + .fine { margin-bottom: 18px; }
.drawer-body { padding-top: 8px; }
.is-stop > .drawer-head + .drawer-body { padding-top: 84px; }
.drawer > .media + .drawer-body { padding-top: clamp(26px, calc(80px - 54 * (100vw - 390px) / 1050), 80px); }
.drawer-body > .eyebrow { margin-bottom: 24px; }
.drawer-body > h2 { margin-bottom: clamp(22.6px, calc(22.6px + 5.6 * (100vw - 390px) / 1050), 28.2px); }
.is-stop .drawer-body > p { margin-bottom: 35px; }
.is-stop .drawer-body > p + h3 { margin-top: -12px; }
.drawer-body h3 { margin-bottom: 21px; }
.drawer-body > .text-list { margin-bottom: 25px; }

/* NDD-08/09 (PDF): inset image, divided meal blocks, context panel under the map */
.drawer-body > .media { aspect-ratio: auto; height: clamp(180px, calc(180px + 50 * (100vw - 390px) / 1050), 230px); margin: 4px 0 18px; }
.drawer-body .meal { border-top: 1px solid var(--ndd-rule); padding: 22px 0 24px; margin: 0; background: none; }
.drawer-body .meal .btn { margin-top: 4px; }
.drawer-body .chips { margin: 18px 0 20px; }
.ctx-panel { margin-top: 20px; }
.ctx-panel .eyebrow { margin-bottom: 20px; }
.ask-lines { line-height: 26px; }
.drawer-body .meal > p:not(.eyebrow):not(.fine):not(.ok-line) { font-size: 12px; line-height: 20px; }
.meal .eyebrow { text-transform: none; }
.drawer-body .meal h3 { margin-top: 0; margin-bottom: 14px; }
.drawer-body .meal > .eyebrow { margin-bottom: 14px; }
.drawer-body .meal > .fine { margin-top: 23px; }
.drawer-body .meal { padding-top: 16px; }
.drawer-body > h2 + .media { margin-top: clamp(4px, calc(55px - 51 * (100vw - 390px) / 1050), 55px); }
.drawer-body fieldset.chips:has(> legend.display-s) { margin-top: 49px; }
.drawer-body .chips > legend.display-s { margin-bottom: 22px; }
.drawer-body .radios { margin-top: 22px; gap: 35px; }
.drawer-body .radios + .p-sm { margin-top: 13px; }
body[data-page="planner"] .site-footer.is-sub { margin-top: clamp(0px, calc(0px + 28 * (100vw - 390px) / 1050), 28px); }
/* NDD-06 map view rhythm (PDF) */
.map-full .map-frame { margin-top: clamp(29px, calc(29px + 11 * (100vw - 390px) / 1050), 40px); }
.map-full .map { max-height: 568px; }
.map-full .day-legend li { margin: 0; padding: 0 0 0 12px; }
.map-full .day-legend a { display: inline-block; min-height: 44px; line-height: 44px; font: 400 15px/44px var(--font-body); color: var(--jade); text-decoration: none; }
.map-full-grid .panel > h2 + .p-md { margin-top: 20px; }
.map-full-grid .panel > .btn { margin-top: 6px; }
.map-full-grid .panel > .fine { margin-top: 23px; }
/* NDD-10 (PDF) */
.family-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 58px; align-items: start; margin-top: clamp(-10px, calc(-10px + 8 * (100vw - 390px) / 1050), -2px); }
.family-main > .panel + .panel { margin-top: 20px; }
.family-main .stepper { border: 1px solid var(--ndd-rule); border-radius: var(--r-sm); background: var(--ndd-card); padding: 2px; }
.family-main .stepper button { border: 0; background: none; width: 40px; height: 40px; }
.family-main .stepper input { border: 0; min-height: 40px; width: 56px; padding: 0; }
.ages-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ages-row label { display: inline-flex; gap: 8px; align-items: center; font: 500 12px var(--font-ui); }
.ages-row input { width: 64px; min-height: 40px; }
.family-side > .note { margin: 20px 0; }
.check-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.check-grid li { min-height: 41px; display: flex; align-items: center; }
.family-layout + .wrap .checklist { margin-top: 20px; }
@media (max-width: 960px) { .family-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } .check-grid { grid-template-columns: minmax(0, 1fr); } }
.family-main .panel > h2 { margin-bottom: 18px; }
.family-main .ages { margin-top: 9px; }
.family-main .checks { gap: 33px; margin-top: 9px; }
.family-main .checks + .field { margin-top: 30px; }
.checklist > .eyebrow { margin-bottom: 21.6px; }
.check-grid li { min-height: 108px; }
/* NDD-12 (PDF): screen preview = two A4 sheets side by side */
@media screen {
  .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0; background: none; justify-content: stretch; margin: 20px 0 24px; }
  .sheet { width: auto; min-height: 0; aspect-ratio: 210 / 297; padding: 24px 22px; box-shadow: none; border: 1px solid var(--ndd-rule); display: flex; flex-direction: column; }
  .sheet .pr-kicker { margin-top: auto; border: 0; padding: 0; color: var(--ndd-muted); }
}
@media screen and (max-width: 760px) { .sheets { grid-template-columns: minmax(0, 1fr); } .sheet { aspect-ratio: auto; padding: 28px 24px 32px; } .sheet p { margin-bottom: 8px; } .sheet li { margin-bottom: 0; } }
.sheet hr { border: 0; border-top: 1px solid var(--ndd-rule); margin: 12px 0; }
.sheet h2 { margin: 6px 0 8px; }
.pr-lines { list-style: none; padding: 0; margin: 0 0 8px; }
.pr-day-title { font: 400 18px/1.3 var(--font-display) !important; color: var(--jade); margin: 6px 0; text-transform: none; letter-spacing: 0; }
.pr-green { color: var(--jade); }
.print-bar .is-static { cursor: default; }
/* text filter chips everywhere (PDF NDD-13/15/16) */
.filter-bar { gap: 0; }
.filter-chip { border: 0; background: none; border-radius: 0; padding: 12px 0; min-height: 44px; font: 600 12px/1.3 var(--font-ui); color: var(--jade); }
.filter-chip + .filter-chip::before { content: '·'; padding: 0 9px; color: var(--ndd-muted); font-weight: 500; }
.filter-chip[aria-pressed="true"] { background: none; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.filter-chip .ck { display: none; }
.filter-chip[aria-pressed="true"] .ck { display: inline; }
/* NDD-13 community cards */
.community-card .card-body > .eyebrow { margin-bottom: 14px; }
.route-list { list-style: none; padding: 0; margin: 12px 0; font: 500 11px/20px var(--font-ui); color: var(--jade); display: flex; flex-wrap: wrap; gap: 0 6px; }
.route-list .rn { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; line-height: 1; }
.card-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 12px; }
.community-bottom { margin-top: clamp(226px, calc(318px - 92 * (100vw - 390px) / 1050), 318px); }
.community-bottom .panel > h2 { margin-bottom: 22px; }
.community-bottom .panel > p { margin-bottom: 22px; }
.page-head > .lead-s + .btn { margin-top: clamp(11px, calc(11px + 9 * (100vw - 390px) / 1050), 20px); }
[data-page="community"] .filter-bar + .note { margin-top: clamp(12px, calc(12px + 8 * (100vw - 390px) / 1050), 20px); }
[data-page="community"] .note + .grid-3 { margin-top: 40px; }
.community-card .card-body > .eyebrow { margin-bottom: 7px; }
.community-card .card-title + .card-tags { margin-bottom: 18px; }
.community-card .card-desc { margin-bottom: 6px; }
.community-card hr { margin: 6px 0 4px; }
.card-stack { margin-top: 22px; gap: 24px; }
@media (max-width: 640px) { [data-page="community"] .grid-3 { row-gap: 294px; } }
/* wide images: visible heights measured in the PDF */
[data-page="community-detail"] .media.wide { aspect-ratio: auto; height: clamp(262px, calc(262px + 139 * (100vw - 390px) / 1050), 401px); }
[data-page="partners"] .media.wide { aspect-ratio: auto; height: clamp(278px, calc(278px + 133 * (100vw - 390px) / 1050), 411px); }
[data-page="article"] .media.wide { aspect-ratio: auto; height: clamp(234px, calc(234px + 287 * (100vw - 390px) / 1050), 521px); }
/* NDD-14 (PDF) */
.cd-intro { margin-top: 10px; }
.cd-intro .card-actions { margin: 31px 0 38px; }
[data-page="community-detail"] .page-head > .lead-s + .eyebrow { margin-top: 18px; }
.cd-main .map { max-height: 470px; }
.cd-main .stop-name { margin-bottom: 0; }
.cd-main .stops { gap: 16px; }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 435px; gap: 35px; align-items: start; margin-top: 40px; }
.cd-main .map-frame { margin-bottom: 32px; }
.cd-main > h2 { margin: 28px 0 14px; }
.cd-grid aside .panel + .panel { margin-top: 20px; }
@media (max-width: 960px) { .cd-grid { grid-template-columns: minmax(0, 1fr); } }
/* NDD-15 (PDF) */
.fest-intro { display: grid; grid-template-columns: minmax(0, 833px) minmax(0, 1fr); gap: 32px; align-items: start; }
.fest-intro .media { aspect-ratio: auto; height: clamp(262px, calc(262px + 98 * (100vw - 390px) / 1050), 360px); margin: 0; }
[data-page="festivals"] .fest-list { margin-top: 20px; }
[data-page="festivals"] .fest-row { padding: 28px 0; }
[data-page="festivals"] .fest-when .btn { margin-top: 8px; }
.fest-bottom { margin-top: 32px; }
@media (max-width: 960px) { .fest-intro { grid-template-columns: minmax(0, 1fr); } }
.fest-intro .eyebrow { margin-bottom: 26.6px; }
.fest-intro h2 { margin-bottom: 23px; }
.fest-bottom .panel > .eyebrow { margin-bottom: 21.6px; }
.fest-bottom .panel > h2 { margin-bottom: 20px; }
.fest-bottom .panel > p { margin-bottom: 23px; }
/* NDD-16 (PDF) */
.feature-story { gap: 32px; align-items: start; margin: 28px 0 24px; }
@media (min-width: 961px) { .feature-story { grid-template-columns: minmax(0, 818px) minmax(0, 1fr); } }
.feature-story .media { aspect-ratio: auto; height: clamp(234px, calc(234px + 267 * (100vw - 390px) / 1050), 501px); margin: 0; }
.feature-story .status-tag { display: block; margin: 8px 0 30px; }
.feature-story .eyebrow { margin-bottom: 26.6px; }
[data-page="stories"] .filter-bar { margin-top: -2px; }
[data-page="stories"] .note + h2 { margin: 36px 0 24px; }
.stories-more { margin-top: clamp(60px, calc(60px + 134 * (100vw - 390px) / 1050), 194px); }
.stories-more .panel > h2 { margin-bottom: 22px; }
.stories-more .panel > .eyebrow { margin-bottom: 21.6px; }
/* NDD-17 (PDF) */
.saved-nav { display: flex; flex-wrap: wrap; margin: 0 0 20px; }
.saved-nav .mode { display: inline-flex; align-items: center; text-decoration: none; }
.saved-grid { display: grid; grid-template-columns: 441px minmax(0, 1fr); gap: 32px; align-items: start; }
.saved-side > * + * { margin-top: 20px; }
.saved-side .draft-list { list-style: none; padding: 0; margin-top: 20px; }
.saved-side .draft-item { display: block; }
.empty-ideas, [data-saved] .import { margin-top: 32px; }
@media (max-width: 960px) { .saved-grid { grid-template-columns: minmax(0, 1fr); } }
.store-note p:not(.label) { font-size: 12px; line-height: 20px; color: var(--ndd-muted); }
.saved-side .draft-item .fine { margin: 14px 0 18px; }
/* NDD-18 (PDF) */
[data-page="partners"] .grid-3 { row-gap: 130px; margin-bottom: clamp(40px, calc(40px + 80 * (100vw - 390px) / 1050), 120px); }
.partner-bottom .panel > .eyebrow:first-child { margin-bottom: 21.6px; }
.partner-bottom .lines { line-height: 26px; color: var(--ndd-muted); margin: 18px 0 24px; }
.partner-bottom .btn + .fine { margin-top: 18px; }
/* NDD-19 (PDF) */
.article .page-head > .status-tag { display: block; margin-top: 18px; font-size: 11px; }
.article .media.wide { margin-bottom: 40px; }
.article .intro { color: var(--jade); font-family: var(--font-display); }
.toc ol a { color: var(--ndd-muted); text-decoration: none; }
.toc ol + .fine { border-top: 1px solid var(--ndd-rule); padding-top: 18px; }
.read-to-trip { border-top: 1px solid var(--ndd-rule); margin-top: 8px; padding-top: 0; }
.read-to-trip .fine { margin: 31px 0 22px; }
/* NDD-03 other regions (PDF): 265px images on desktop, taller row rhythm */
.section-s .grid-3 { row-gap: clamp(128px, calc(128px - 70 * (100vw - 390px) / 1050), 128px); }
@media (min-width: 961px) { .section-s .grid-3 { row-gap: 58px; } .section-s .trip-card .media { height: 265px; } }