/* Hallmark · redesign · macrostructure: Ecosystem Index (the blueprint blog's, from blog.duolingo.com: lead split,
 * cards, rows, hubs, tag pages, one reading column) · nav: dropdown bar (Subjects, Language) · footer: the landing's
 * fine print. Theme: the Vaumu landing's system (web/site.css), inherited, not rotated: warm paper, ink, the
 * system serif for titles at weight 500, the system sans for text, the logo's purple on links and the one button,
 * hairline rings instead of shadows. Its own copy of the tokens: the landing's site.css locks the body to one screen.
 * axes: light / classical-serif / cool (purple) · pre-emit critique: P4 H5 E4 S4 R5 V4 */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --color-paper: #F6F4EF;
  --color-wash: #EDEAE3;          /* the app box, tags, a menu row on hover */
  --color-ink: #17141D;
  --color-muted: #6E6878;
  --color-line: #E2DED6;
  --color-accent: #3E1F7A;        /* the logo's V: links, the current item, the button */
  --color-accent-wash: #ECE7F4;   /* the writer's own chat bubble, a current menu row */
  --color-accent-ink: #FFFFFF;

  --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mark: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;

  --text-small: 0.8rem;
  --text-label: 0.72rem;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --radius-button: 999px; --radius-card: 14px; --radius-bubble: 18px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
}

html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-paper); color: var(--color-ink); font: 400 1rem/1.5 var(--font-body); }
main { flex: 1 0 auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
h1, h2, h3 { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(1080px, 100% - 2 * var(--space-lg)); margin-inline: auto; }
.eyebrow, .meta, .toc-title, .tags-title, .menu-head { font: 600 var(--text-label)/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.eyebrow { margin: 0 0 var(--space-sm); }
.meta { margin: 0; }
.card .meta, .row .meta, .pick .meta { display: flex; align-items: center; } /* the post's own byline line wraps as text */
.sep { width: 1px; height: 10px; margin: 0 10px; background: currentColor; opacity: 0.5; }
.dek { margin: 0 0 var(--space-md); font-size: 1.1rem; line-height: 1.5; color: var(--color-muted); }

/* The button: the landing's (purple pill, the only filled thing on a page), and a ghost one with a hairline. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--radius-button);
  font: 600 0.95rem/1 var(--font-body); white-space: nowrap; text-decoration: none; background: var(--color-accent); color: var(--color-accent-ink); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-line); }
.btn.ghost:hover { filter: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 0.85rem; }

/* Header: the landing's mark, "blog" beside it, then Subjects and Language. Phones: one Menu. */
.top { position: sticky; top: 0; z-index: 10; background: var(--color-paper); box-shadow: 0 1px 0 var(--color-line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; font: 900 1.25rem/1 var(--font-mark); color: var(--color-accent); }
.brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.brand-blog { font: 500 1.1rem/1 var(--font-display); color: var(--color-muted); }
.blog-nav { display: flex; align-items: center; gap: var(--space-lg); }
.blog-nav > a { font: 600 var(--text-small)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; padding: 12px 0; }
.blog-nav > a:hover { color: var(--color-accent); }
.nav-mobile { display: none; }
.menu { position: relative; }
.menu > summary { display: flex; align-items: center; gap: 6px; padding: 12px 0; list-style: none; font: 600 var(--text-small)/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { color: var(--color-accent); }
.menu > summary::after { content: ""; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu > summary svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu-panel { position: absolute; top: 100%; left: 0; z-index: 20; display: grid; min-width: 200px; padding: var(--space-xs); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 12px; }
.menu-panel.end { left: auto; right: 0; }
.menu-panel a { padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.menu-panel a:hover { background: var(--color-wash); }
.menu-panel a[aria-current] { background: var(--color-accent-wash); color: var(--color-accent); }
.menu-head { margin: var(--space-sm) 12px 4px; }
.menu-panel hr { width: 100%; margin: var(--space-xs) 0; border: 0; border-top: 1px solid var(--color-line); }

/* Pictures: a hairline ring, as the landing's screens, never a shadow. */
.pick img, .card img, .row img, .promo img, .post .cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-line); }

/* The lead (home, subject pages): text left, cover right; phones: cover first. */
.blog { padding-block: var(--space-xl) var(--space-2xl); }
.pick { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: center; }
.pick-art { order: 2; }
.pick .pick-label { display: none; }
.pick .meta { margin-bottom: var(--space-md); }
.pick h1 { margin: 0 0 var(--space-md); font: 500 clamp(1.9rem, 1.6vw + 1.2rem, 2.8rem)/1.08 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pick h1 a, .card, .row { text-decoration: none; }
.pick h1 a:hover, .card:hover h3, .row:hover h3 { color: var(--color-accent); }

/* Home, after the lead: a row of cards, then shelves split by hairlines. */
.home > section + section { margin-top: var(--space-2xl); }
.rule { padding-top: var(--space-2xl); border-top: 1px solid var(--color-line); }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.shelf-head .eyebrow { margin: 0; }
.shelf-head .more { font: 600 var(--text-small)/1 var(--font-body); color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.cards.two, .related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: grid; align-content: start; gap: 12px; }
.card h3, .row h3 { margin: 0; font: 500 1.25rem/1.25 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.series h2, .promo h2 { margin: 0 0 var(--space-sm); font: 500 clamp(1.7rem, 1.4vw + 1.1rem, 2.3rem)/1.12 var(--font-display); letter-spacing: -0.02em; }
.series h2 a { text-decoration: none; }
.series-desc, .promo > p { margin: 0 auto var(--space-xl); max-width: 36em; color: var(--color-muted); }
.center { margin: var(--space-xl) 0 0; text-align: center; }
.promo { text-align: center; }
.promo img { width: min(640px, 100%); margin: 0 auto var(--space-md); }
.promo > p { margin-bottom: var(--space-lg); }

/* Post: one reading column, the landing's privacy page width. */
.post { width: min(680px, 100% - 2 * var(--space-lg)); margin-inline: auto; padding-block: var(--space-xl) var(--space-2xl); }
.post h1 { margin: 0 0 var(--space-sm); font: 500 clamp(2rem, 2vw + 1.3rem, 2.9rem)/1.08 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.post .meta { font-size: var(--text-label); } /* over the article's paragraph size */
.post .cover { margin: var(--space-lg) 0 var(--space-lg); }
.post .define { margin: 0 0 var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--color-accent); font: 400 1.2rem/1.5 var(--font-display); }
.toc { margin: 0 0 var(--space-lg); }
.toc-title { margin: 0 0 var(--space-sm); }
.post .toc ul { margin: 0; padding-left: 1.1em; }
.post .toc li { margin-bottom: 6px; font-size: 1rem; line-height: 1.4; }
.post .toc a { color: var(--color-accent); text-decoration: none; }
.post .toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-xl); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-wash); }
.app-cta img { border-radius: 12px; }
.post .app-cta p { margin: 0; font: 500 1.1rem/1.3 var(--font-display); }
.post .app-cta p b { display: block; margin-bottom: 2px; font: 900 1rem/1 var(--font-mark); color: var(--color-accent); }
.post .app-cta .btn { color: var(--color-accent-ink); text-decoration: none; }
.post article h2 { margin: var(--space-xl) 0 var(--space-sm); font: 500 1.6rem/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; scroll-margin-top: 80px; }
.post article p, .post article li { font-size: 1.1rem; line-height: 1.65; }
.post article p { margin: 0 0 var(--space-md); }
.post article ol, .post article ul { margin: 0 0 var(--space-md); padding-left: 1.3em; }
.post article li { margin-bottom: var(--space-sm); }
.post article a { color: var(--color-accent); text-underline-offset: 3px; }
/* A post that opens on chat lines shows them as bubbles: the first from the other side, the reply as the writer's. */
.post article p.chat { width: fit-content; max-width: 80%; margin: 0 0 6px; padding: 9px 15px; border-radius: var(--radius-bubble); background: var(--color-wash); font-size: 1rem; line-height: 1.35; }
.post article p.chat + p.chat { margin-left: auto; background: var(--color-accent-wash); color: var(--color-accent); }
.post article p.chat + p:not(.chat) { margin-top: var(--space-lg); }
.post-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.post .tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; }
.tags-title { margin-right: 4px; }
.tag { padding: 7px 14px; border-radius: var(--radius-button); background: var(--color-wash); font-size: 0.9rem; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.post a.tag { color: var(--color-ink); text-decoration: none; }
.post a.tag:hover { color: var(--color-accent); }
.related { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-line); }
.related h2 { margin: 0 0 var(--space-lg); font: 500 1.5rem/1.2 var(--font-display); }

/* Subject and tag pages: the lead, more as cards, then "All posts" as rows. */
.hub .cards { margin-top: var(--space-2xl); }
.all { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-line); }
.rows { display: grid; gap: var(--space-lg); }
.row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.row .meta { margin-bottom: 6px; }
.hub > h1, .tag-page h1 { margin: 0 0 var(--space-lg); font: 500 clamp(2.2rem, 2.4vw + 1.2rem, 3rem)/1.08 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.empty { margin: 0; color: var(--color-muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.filters .clear { font: 600 var(--text-small)/1 var(--font-body); color: var(--color-accent); text-decoration: none; }
.not-found { padding-block: var(--space-3xl); text-align: center; }
.not-found h1 { margin: 0 0 var(--space-md); font: 500 clamp(4rem, 10vw, 7rem)/1 var(--font-display); color: var(--color-accent); }
.not-found p { margin: 0; color: var(--color-muted); }
.not-found .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }

/* Footer: the landing's fine print. */
.fine { padding: var(--space-xl) 0 var(--space-lg); font-size: var(--text-label); color: var(--color-muted); }
.fine .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.fine a { text-decoration: none; } .fine a:hover { text-decoration: underline; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; line-height: 1.35; } /* Thai marks need the room */

@media (max-width: 860px) {
  .pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .pick-art { order: 0; }
  .pick .pick-label { display: block; }
  .home .pick .meta, .home .pick .btn { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blog-nav { display: none; }
  .nav-mobile { display: block; }
  .cards, .cards.two, .related .cards { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: var(--space-md); }
  .row h3 { font-size: 1.05rem; }
  .app-cta { grid-template-columns: auto minmax(0, 1fr); }
  .app-cta .btn { grid-column: 1 / -1; }
  .rule { padding-top: var(--space-xl); }
  .home > section + section { margin-top: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }