/* Yêu Hà Nội — base styles. Colour variables (light + dark) are generated by build.py into palette.css */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; user-select: none; font-family: 'Material Symbols Outlined'; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.above-stretch { position: relative; z-index: 2; }
:focus-visible { outline: 2px solid rgb(var(--c-primary-container)); outline-offset: 2px; }
.line-clamp-1,.line-clamp-2,.line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; }
.card-lift { transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 8px 24px -4px rgba(28,25,23,.06), 0 2px 6px -1px rgba(245,158,11,.04); }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -6px rgba(28,25,23,.1), 0 4px 12px -2px rgba(255,56,92,.08); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
.is-hidden { display: none !important; }
details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }

/* Article typography */
.prose-article { font-size: 17px; line-height: 30px; color: rgb(var(--c-on-surface)); }
.prose-article > * + * { margin-top: 1.1em; }
.prose-article h2 { font-size: 26px; line-height: 34px; font-weight: 700; margin-top: 1.9em; letter-spacing: -0.01em; scroll-margin-top: 110px; }
.prose-article h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 1.5em; scroll-margin-top: 110px; }
.prose-article ul, .prose-article ol { padding-left: 1.4em; }
.prose-article ul { list-style: disc; } .prose-article ol { list-style: decimal; }
.prose-article li { margin-top: .45em; padding-left: .2em; } .prose-article li::marker { color: rgb(var(--c-primary-container)); font-weight: 700; }
.prose-article strong { font-weight: 700; }
.prose-article blockquote { border-left: 3px solid rgb(var(--c-secondary-container)); background: rgb(var(--c-secondary-fixed) / .4); padding: 14px 18px; border-radius: 0 .75rem .75rem 0; font-style: italic; }
@media (max-width: 767px) { .prose-article { font-size: 16px; line-height: 28px; } .prose-article h2 { font-size: 22px; line-height: 30px; } }

/* Tile placeholder pattern */
.tile { position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgb(var(--c-white-fixed) / .35) 0 18%, transparent 19%), radial-gradient(circle at 85% 80%, rgb(var(--c-white-fixed) / .25) 0 22%, transparent 23%); }
.tile > .material-symbols-outlined { position: relative; }

@media print { header, footer, nav, #to-top, #toast, [data-no-print] { display: none !important; } body { padding: 0 !important; } }