/* Shiberu blog, public pages: the landing's clothes (frosted header, cream
   and sky palette, DM Serif, coral buttons, footer). Light only, like the
   landing. The article body is prose.css. */

@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin-var.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: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("fonts/dm-serif-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-scheme: light;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* The landing page's tokens (frontend constants/colors.ts, landingReadability.ts). */
  --page: #fff6e8;
  --card: #fffaf0;
  --card-hi: #fffdf7;
  --sky-top: #bde9ff;
  --sky-mid: #e6f5ff;
  --sky-low: #f4fbff;
  --ink: #173047;
  --ink-soft: #4d6272;
  --muted: #56697a;
  --line: rgba(23, 48, 71, 0.12);
  --line-strong: rgba(23, 48, 71, 0.2);
  --gold-line: rgba(241, 201, 118, 0.6);
  --coral: #ff6b57;
  --coral-hover: #ff7f6d;
  --eyebrow: #a93325;
  --hero-eyebrow: #7a2418;
  --wash: rgba(23, 48, 71, 0.06);
  --shadow: 0 6px 22px rgba(23, 48, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-lift: 0 14px 34px rgba(23, 48, 71, 0.14);
  --header-h: 58px;

  /* Language badges: text >= 4.5:1 on its own tint over cream. */
  --lang-ja: #a93325;
  --lang-ko: #2a65a3;
  --lang-zh: #8f5400;
  --lang-other: #0b7472;
}

/* CJK in headings: the regional serif at 400 where installed, else the
   sans, through the landing's local() faces (i18n/cjkFontCss.ts). */
@font-face { font-family: "Display JA"; src: local("Hiragino Mincho ProN"), local("Yu Mincho"), local("MS PMincho"), local("Noto Serif JP"); unicode-range: U+3000-30FF, U+31F0-31FF, U+3400-9FFF, U+F900-FAFF, U+FF00-FF9F; }
@font-face { font-family: "Display KO"; src: local("Noto Serif KR"), local("AppleMyungjo"), local("Batang"); unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+3400-9FFF, U+A960-A97F, U+AC00-D7FF, U+F900-FAFF, U+FF00-FF65; }
@font-face { font-family: "Display SC"; src: local("Songti SC"), local("SimSun"), local("Noto Serif SC"); unicode-range: U+3000-303F, U+3400-9FFF, U+F900-FAFF, U+FF00-FF65; }
@font-face { font-family: "Display TC"; src: local("Songti TC"), local("PMingLiU"), local("MingLiU"), local("Noto Serif TC"); unicode-range: U+3000-303F, U+3400-9FFF, U+F900-FAFF, U+FF00-FF65; }
:lang(ja) { --font-display: "DM Serif Display", "Display JA", Georgia, var(--font-sans); }
:lang(ko) { --font-display: "DM Serif Display", "Display KO", Georgia, var(--font-sans); }
:lang(zh) { --font-display: "DM Serif Display", "Display SC", Georgia, var(--font-sans); }
:lang(zh-hant) { --font-display: "DM Serif Display", "Display TC", Georgia, var(--font-sans); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body.blog-page {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}
body.blog-page main { flex: 1; }

.blog-page a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.blog-page :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.blog-page img, .blog-page video { max-width: 100%; height: auto; }
.blog-page svg { flex: none; }

.blog-page [hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: 8px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Buttons: the landing's coral pill with ink text. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--coral); color: var(--ink) !important; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 107, 87, 0.25);
  transition: background-color 120ms ease, transform 120ms ease;
}
.button:hover { background: var(--coral-hover); }
.button:active { transform: translateY(1px); }
.button-small { min-height: 38px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.button-quiet { background: transparent; border: 1px solid var(--line-strong); box-shadow: none; }
.button-quiet:hover { background: var(--wash); }

/* Header at the landing's sizes: full nav from 1200px; below, its compact
   bar (12px sides, globe-only language, compact Sign In and button). */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 239, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 0 rgba(23, 48, 71, 0.08);
}
.header-inner { display: flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 12px; }
.wordmark { font-family: var(--font-display); font-size: 23px; line-height: 1; color: var(--ink) !important; text-decoration: none; }
.header-section { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--ink-soft) !important; font-weight: 600; font-size: 13px; line-height: 18px; text-decoration: none; white-space: nowrap; }
.header-section:hover, .header-signin:hover, .header-nav a:hover, .lang-menu summary:hover { color: var(--ink) !important; }
.header-nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header-signin { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 36px; padding: 0 8px; color: var(--ink-soft) !important; font-weight: 600; font-size: 13px; line-height: 18px; text-decoration: none; border-radius: 8px; white-space: nowrap; }
.header-signin:hover { background: var(--wash); }
.button-header { min-height: 40px; padding: 9px 14px; font-size: 13px; line-height: 18px; box-shadow: none; white-space: nowrap; }
.button-phone-only { display: none; }

.lang-menu { position: relative; }
.lang-menu summary { position: relative; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; width: 26px; height: 26px; border: 1px solid rgba(23, 48, 71, 0.14); border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
/* A 42px touch target around the small button (the landing's hitSlop). */
.lang-menu summary::before { content: ""; position: absolute; inset: -8px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: var(--card-hi); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); min-width: 160px; z-index: 5; }
.lang-menu li a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.lang-menu li a:hover { background: var(--wash); }
.lang-menu li a[aria-current] { font-weight: 700; }

@media (max-width: 1199px) {
  .lang-menu .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1200px) {
  :root { --header-h: 72px; }
  .header-inner { padding: 0 24px; gap: 4px; }
  .wordmark { font-size: 24px; }
  .header-section { display: none; }
  .header-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .header-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px; color: var(--ink-soft); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; border-radius: 8px; }
  .header-nav a.is-current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .header-nav .nav-discord { padding: 8px 12px; }
  .header-actions { margin-left: 0; gap: 4px; }
  .lang-menu summary { width: auto; height: 30px; padding: 0 8px; }
  .lang-menu summary svg { width: 15px; height: 15px; }
  .header-signin { padding: 8px 12px; font-size: 14px; line-height: 20px; }
}
@media (max-width: 759px) {
  .button-wide-only { display: none; }
  .button-phone-only { display: inline-flex; }
}
/* Small phones: the hero eyebrow already says "Shiberu blog". */
@media (max-width: 374px) { .header-section { display: none; } }

/* Hero: the landing's sky, eyebrow and serif headline. */

.hero { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 72%, var(--page) 100%); padding: 56px 0 8px; }
.hero-inner { max-width: 920px; margin: 0 auto; padding: 0 24px; text-align: center; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.hero-eyebrow { color: var(--hero-eyebrow); }
.eyebrow a { color: inherit !important; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
/* Display headings: DM Serif (the landing's), regular, balanced. */
:is(.hero h1, .lead-title, .grid-heading, .card-title, .release-title, .empty-state-title, .cta-card-title, .post-header h1) { font-family: var(--font-display); font-weight: 400; color: var(--ink); text-wrap: balance; }
.hero h1 { margin: 14px auto 0; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.015em; }
/* Hubs carry only the headline and the tabs (owner 2026-11-11: no eyebrow, no lead). */
.page-hub .hero { padding-top: 44px; }
.page-hub .hero h1 { margin-top: 0; }
.hero-lead { margin: 18px auto 0; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.author-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.author-hero h1 { margin-top: 0; }
.author-site { margin: 10px 0 0; font-size: 15px; }

/* Tabs: one pill row, a real link per tab; scrolls sideways on phones. */
.tabs { margin: 30px auto 0; max-width: 1200px; padding: 0 16px; }
.tabs ul { list-style: none; margin: 0; padding: 4px; display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
.tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.tabs a[aria-current] { background: var(--ink); color: var(--card); }

/* Lists: filters left, posts right (Migaku). */

.list-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 28px; }
.list-wide { padding-top: 28px; }
.list-main { min-width: 0; }

.filters { border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.filters summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 700; font-size: 15px; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-2px) rotate(45deg); transition: transform 120ms ease; }
.filters[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.filters-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.filter-form { padding: 4px 16px 16px; display: grid; gap: 18px; }
.filter-search { position: relative; display: block; }
.filter-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.filter-search input { width: 100%; font: inherit; font-size: 15px; min-height: 44px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card-hi); color: var(--ink); }
.filter-search input::placeholder { color: var(--muted); opacity: 1; }
.filter-search input:focus { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter-group legend { padding: 0; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--ink-soft); }
.check:hover { background: var(--wash); color: var(--ink); }
.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.check:has(input:checked) { color: var(--ink); font-weight: 600; }
.check-label { min-width: 0; }
.check-count { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 500; }
/* Would add no posts (count 0). */
.check.is-empty { color: var(--muted); }
.check.is-empty input { opacity: 0.45; }
.filter-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filter-clear { font-size: 14px; font-weight: 600; color: var(--ink-soft) !important; }
/* Phones: "Show results" stays in reach (sticky in the panel). */
@media (max-width: 899px) {
  .filter-actions { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px -16px; padding: 12px 16px 16px; background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
  .filter-actions .button { flex: 1; min-height: 44px; background: var(--coral); border: 0; font-size: 15px; }
  .filter-actions .button:hover { background: var(--coral-hover); }
}

@media (min-width: 900px) {
  .list-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; padding-top: 36px; }
  .filters-column { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
  .filters { border: 0; background: none; border-radius: 0; }
  .filters summary { display: none; }
  /* Open on wide screens (blog.js opens it without ::details-content). */
  .filters::details-content { content-visibility: visible; display: contents; }
  .filter-form { padding: 0; }
}
/* No ::details-content and no script: keep the toggle of a closed panel. */
@supports not selector(::details-content) {
  @media (min-width: 900px) { .filters:not([open]) summary { display: flex; } }
}


/* "Latest release" strip on All. */
.release-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); text-decoration: none; font-size: 15px; font-weight: 600; width: fit-content; max-width: 100%; }
.release-strip:hover .release-strip-title { text-decoration: underline; }
.release-strip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges: the language a post teaches (coloured) and its type (neutral). */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.badge-lang { --lang: var(--lang-other); color: var(--lang); background: color-mix(in srgb, var(--lang) 11%, var(--card)); }
.badge-ja { --lang: var(--lang-ja); }
.badge-ko { --lang: var(--lang-ko); }
.badge-zh { --lang: var(--lang-zh); }
.badge-kind { color: var(--ink-soft); background: var(--wash); }
.badge-release { color: var(--card); background: var(--ink); }

/* Tone: the coloured rule of a text card and of a post. */
.tone-any { --tone: var(--coral); }
.tone-ja { --tone: var(--lang-ja); }
.tone-ko { --tone: var(--lang-ko); }
.tone-zh { --tone: var(--lang-zh); }
.tone-en, .tone-es { --tone: var(--lang-other); }
.tone-release { --tone: var(--ink); }

/* Lead story: the newest featured post. */
.lead-story { position: relative; margin: 0 0 36px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 160ms ease, transform 160ms ease; }
.lead-story:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.lead-link { display: grid; color: inherit; text-decoration: none; }
.lead-cover { position: relative; aspect-ratio: 16 / 9; background: var(--sky-low); overflow: hidden; }
.lead-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-body { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 26px; }
.lead-title { margin: 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; }
.lead-link:hover .lead-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.lead-excerpt { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead-text { background: linear-gradient(155deg, color-mix(in srgb, var(--tone) 9%, var(--card-hi)) 0%, var(--card) 62%); }
/* The tone rule sits inside the rounded card (no tapered corners). */
.lead-text::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--tone); }
.lead-text .lead-body { padding: 36px 36px 34px; gap: 16px; }
.lead-text .lead-title { font-size: clamp(32px, 3.6vw, 48px); max-width: 820px; }
.lead-text .lead-excerpt { max-width: 680px; font-size: 18.5px; }
/* Wide: cover beside the text, kept 16:9 (framed, centred). */
@media (min-width: 1100px) {
  .lead-story:not(.lead-text) .lead-link { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .lead-story:not(.lead-text) .lead-cover { margin: 16px 0 16px 16px; border-radius: 16px; border: 1px solid var(--line); }
  .lead-story:not(.lead-text) .lead-body { padding: 28px 30px 28px 32px; }
}

/* Grid: covers only when real (no placeholder art). */
.grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.grid-heading { margin: 0; font-size: 30px; line-height: 1.15; }
.grid-count { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grid-head-link { font-weight: 650; font-size: 15px; white-space: nowrap; text-decoration: none; }
.grid-head-link:hover { text-decoration: underline; }
.card-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
/* Two columns beside the filters, three without them. */
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .card-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { position: relative; display: flex; border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.card-cover { aspect-ratio: 16 / 9; background: var(--sky-low); overflow: hidden; border-bottom: 1px solid var(--line); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 18px; }
.card-title { margin: 0; font-size: 24px; line-height: 1.14; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-link:hover .card-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.14em; }
.card-excerpt { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* No cover: the title on a 16:9 panel in the language's tint (no art), so
   a row of cards lines up. */
.card-panel { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 28px 24px 20px; background: linear-gradient(155deg, color-mix(in srgb, var(--tone) 14%, var(--card-hi)) 0%, color-mix(in srgb, var(--tone) 5%, var(--card)) 78%); border-bottom: 1px solid var(--line); overflow: hidden; }
.card-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--tone); }
.card-panel .card-title { font-size: 30px; line-height: 1.1; -webkit-line-clamp: 4; line-clamp: 4; }
/* No title in the body: more excerpt keeps the row level. */
.card-text .card-excerpt { -webkit-line-clamp: 4; line-clamp: 4; }

.post-meta { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--muted); font-size: 13.5px; }
.post-meta-author { color: var(--ink-soft); font-weight: 600; }

.avatar { border-radius: 50%; object-fit: cover; width: 44px; height: 44px; flex: none; }
.avatar-tiny { width: 24px; height: 24px; }
.avatar-byline { width: 44px; height: 44px; }
.avatar-large { width: 64px; height: 64px; }
.avatar-hero { width: 80px; height: 80px; }
.avatar-initial { display: inline-grid; place-items: center; background: #ffe3dc; color: var(--eyebrow); font-weight: 700; font-size: 17px; line-height: 1; }
.avatar-tiny.avatar-initial { font-size: 11.5px; }
.avatar-large.avatar-initial { font-size: 26px; }
.avatar-hero.avatar-initial { font-size: 34px; font-family: var(--font-display); font-weight: 400; }

/* Release notes in full. */
.releases { display: grid; }
.release { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 30px 0 34px; border-top: 1px solid var(--line); }
.release:first-child { border-top: 0; padding-top: 4px; }
.release-date { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.release-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 13px; font-weight: 600; background: var(--card-hi); }
.pill-version { background: var(--ink); color: var(--card); border-color: var(--ink); font-variant-numeric: tabular-nums; }
.release-title { margin: 0 0 16px; font-size: 32px; line-height: 1.12; }
.release-title a { text-decoration: none; }
.release-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.release-cover { margin: 0 0 20px; }
.release-cover img { width: 100%; border-radius: 18px; display: block; }
.release .prose { font-size: 17px; }
/* An entry's own headings sit under its title (the view nests them). */
.release .prose h3, .release .prose h4 { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: 0; margin: 1.4em 0 0.35em; }
.release .prose > h3:first-child, .release .prose > h4:first-child { margin-top: 0; }
@media (min-width: 760px) {
  .release { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
  .release-date { padding-top: 4px; position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
}

/* Pagination: numbered. */
/* 1fr auto 1fr: the numbers stay centred whatever the step widths. */
.pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 44px 0 0; }
.pagination > .page-step:first-child { justify-self: start; }
.pagination > .page-step:last-child { justify-self: end; }
.page-step { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 600; font-size: 15px; text-decoration: none; background: var(--card-hi); }
span.page-step { visibility: hidden; }
a.page-step:hover { background: var(--wash); }
.page-numbers { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.page-number { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; font-variant-numeric: tabular-nums; }
a.page-number:hover { background: var(--wash); }
span.page-number { background: var(--ink); color: var(--card); }
.page-gap { display: inline-grid; place-items: center; min-width: 24px; color: var(--muted); }
@media (max-width: 599px) {
  .page-step { padding: 0 12px; font-size: 0; gap: 0; }
  .page-step span { font-size: 17px; }
}

/* "Browse by topic" under a list. */
.topic-links { margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.topic-links-heading { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.topic-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }

.empty-state { max-width: 560px; margin: 28px auto 0; text-align: center; padding: 36px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.empty-state-inline { margin-top: 0; max-width: none; box-shadow: none; }
.empty-state p { margin: 0 0 10px; color: var(--ink-soft); }
.empty-state p:last-child { margin-bottom: 0; }
.empty-state-title { font-size: 28px; line-height: 1.2; color: var(--ink) !important; }

/* Closing card: cream panel, coral button. */
.cta-card { max-width: 920px; margin: 88px auto 0; padding: 44px 32px 40px; text-align: center; border-radius: 28px; background: linear-gradient(180deg, var(--card-hi), var(--card)); border: 1px solid var(--gold-line); box-shadow: var(--shadow); }
.page-post .cta-card { margin-top: 72px; }
.cta-card-title { margin: 0 auto; max-width: 720px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
.cta-card-body { margin: 16px auto 0; max-width: 600px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.cta-card-actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 44px; width: auto; }

/* Post */

.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--coral); transform: scaleX(0); transform-origin: 0 50%; }

.page-post main { background: linear-gradient(180deg, var(--sky-low) 0, var(--page) 360px) no-repeat; }
.post { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
.toc { display: none; }
@media (min-width: 1100px) {
  .post-layout { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); }
  .post-main { grid-column: 2; }
  .toc { display: block; grid-column: 3; padding-left: 48px; max-width: 300px; }
  .toc-inline { display: none; }
}
.post-header { padding: 44px 0 0; text-align: center; }
/* An article opens with its title and one date line, then the text (owner 2026-11-11, like Migaku). */
.post-updated { margin: 18px 0 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; font-size: 14px; font-weight: 600; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--muted); font-weight: 400; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.post-kicker-meta { margin: 0; display: flex; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 600; }
.post-header h1 { margin: 0; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.07; letter-spacing: -0.015em; }
.post-lead { margin: 18px 0 0; font-size: 21px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.byline-text { min-width: 0; }
.byline-name { font-weight: 700; text-decoration: none; font-size: 16px; }
.byline-name:hover { text-decoration: underline; }
.byline-updated { margin: 1px 0 0; color: var(--muted); font-size: 13.5px; }
.share-buttons { margin-left: auto; display: flex; gap: 8px; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card-hi); color: var(--ink-soft) !important; cursor: pointer; padding: 0; font: inherit; }
.icon-button:hover { color: var(--ink) !important; border-color: var(--ink-soft); }
.icon-button[hidden] { display: none; }
.copy-link.is-done { color: #1f6b4b !important; border-color: #1f6b4b; }
.also-in { margin: 18px 0 0; font-size: 15px; }
.also-in a { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--wash); text-decoration: none; font-weight: 600; }
.post-cover { margin: 28px 0 0; }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; display: block; box-shadow: var(--shadow); }
.post-body { padding-top: 34px; }
.post-body > .release-pills { margin-bottom: 22px; }
.preview-empty { margin: 0; padding: 28px; border: 2px dashed var(--line-strong); border-radius: 18px; color: var(--muted); text-align: center; }

.ruby-toggle-row { margin: 0 0 18px; }
.ruby-toggle { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--card-hi); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ruby-toggle:hover { color: var(--ink); }

.toc-sticky { position: sticky; top: calc(var(--header-h) + 28px); padding-top: 40px; }
.toc-title { margin: 0 0 12px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: 14.5px; line-height: 1.4; border-left: 2px solid var(--line); }
.toc li a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; transition: color 120ms ease, border-color 120ms ease; }
.toc li a:hover { color: var(--ink); }
.toc li a[aria-current] { color: var(--ink); font-weight: 650; border-left-color: var(--coral); }
.toc .toc-l3 a { padding-left: 28px; font-size: 14px; }
.toc-top { margin: 14px 0 0; font-size: 13.5px; }
.toc-top a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.toc-inline { margin: 0 0 28px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.toc-inline summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.toc-inline ol { margin: 10px 0 2px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.toc-inline .toc-l3 { margin-left: 14px; }
.toc-inline a { color: var(--ink-soft); text-decoration: none; }
.toc-inline a:hover { color: var(--ink); text-decoration: underline; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--wash); color: var(--ink-soft) !important; text-decoration: none; font-size: 14px; font-weight: 600; }
.chip:hover { color: var(--ink) !important; background: rgba(23, 48, 71, 0.1); }
/* A topic (its page) beside the #tags: an outlined chip. */
.chip-topic { background: var(--card-hi); border: 1px solid var(--line-strong); color: var(--ink) !important; padding: 5px 12px; }
.chip-topic:hover { background: var(--card); border-color: var(--ink-soft); }
.chip-topic[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--card) !important; }
.author-box { display: flex; gap: 16px; align-items: flex-start; margin: 32px 0 0; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.author-box p { margin: 0 0 6px; color: var(--ink-soft); font-size: 16px; }
.author-box p:last-child { margin-bottom: 0; }
.author-box-label { font-size: 12.5px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow) !important; margin-bottom: 2px !important; }
.author-box-name { font-weight: 700; color: var(--ink) !important; font-size: 18px !important; }
.author-box-name a { text-decoration: none; }
.author-box-name a:hover { text-decoration: underline; }
.related { margin-top: 80px; }

/* Staff preview bar (staff site only). */
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 10px 24px; background: var(--ink); color: var(--card); font-size: 14.5px; }
.preview-bar p { margin: 0; }
.preview-bar strong { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: 13px; }
.preview-scheduled strong { background: #f6c177; }
.preview-published strong { background: #9be0b4; }
.preview-links { display: flex; gap: 16px; }
.preview-bar a { color: var(--card) !important; font-weight: 700; }

/* Footer: the landing's */

.site-footer { margin-top: 96px; border-top: 1px solid var(--line); background: rgba(255, 250, 240, 0.93); padding: 56px 24px 36px; }
/* The content box of .container. */
.footer-inner { max-width: 1152px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 48px; }
.footer-brand { max-width: 300px; }
.footer-brand p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 20px; }
.footer-columns { display: flex; flex-wrap: wrap; gap: 32px 40px; }
.footer-column { display: flex; flex-direction: column; min-width: 120px; }
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
  .footer-columns { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
  .footer-column { min-width: 0; }
}
.footer-heading { margin: 0 0 10px; color: var(--eyebrow); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.footer-column a { display: flex; align-items: center; min-height: 36px; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.footer-column a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(23, 48, 71, 0.14); }
.footer-bottom p { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
@media (max-width: 759px) {
  .cta-card { margin-left: 16px; margin-right: 16px; padding: 32px 20px; }
  .site-footer { padding: 40px 24px 28px; margin-top: 72px; }
  .footer-top { margin-bottom: 28px; gap: 24px; }
  .footer-brand { max-width: none; }
  .footer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; width: 100%; }
  .footer-column { min-width: 0; }
}

/* CJK: no Latin tracking in headings, no uppercase in labels. */
.blog-page :is(.hero h1, .lead-title, .card-title, .grid-heading, .post-header h1, .release-title, .cta-card-title, .empty-state-title):is(:lang(ja), :lang(ko), :lang(zh)) { letter-spacing: 0; line-height: 1.3; }
.hero h1:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: clamp(30px, 4vw, 46px); }
.card-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: 19px; }
.card-panel .card-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: 24px; }
.lead-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: clamp(24px, 2.6vw, 32px); }
.post-header h1:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: clamp(28px, 3.6vw, 42px); }
.grid-heading:is(:lang(ja), :lang(ko), :lang(zh)), .release-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: 22px; }
.cta-card-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: clamp(24px, 3vw, 32px); }
.empty-state-title:is(:lang(ja), :lang(ko), :lang(zh)) { font-size: 21px; }
:is(.eyebrow, .filter-group legend, .toc-title, .author-box-label, .topic-links-heading):is(:lang(ja), :lang(ko), :lang(zh)) { text-transform: none; letter-spacing: 0.02em; font-size: 13.5px; }
/* Line breaks: strict for ja/zh, between words for ko, between phrases in
   Japanese headings and leads. */
.blog-page:lang(ja), .blog-page:lang(zh) { line-break: strict; }
.blog-page:lang(ko) { word-break: keep-all; }
:is(.hero h1, .hero-lead, .post-header h1, .post-lead, .lead-title, .card-title, .grid-heading, .release-title, .cta-card-title, .cta-card-body, .empty-state-title):lang(ja) { word-break: auto-phrase; }

@media (max-width: 599px) {
  body.blog-page { font-size: 16px; }
  .site-footer { padding-left: 16px; padding-right: 16px; }
  .container, .post { padding: 0 16px; }
  .hero { padding-top: 36px; }
  .hero-inner { padding: 0 16px; }
  .hero-lead { font-size: 17px; }
  .tabs { margin-top: 22px; padding: 0; }
  .tabs ul { padding: 4px 16px; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .tabs a { min-height: 40px; padding: 0 15px; }
  .lead-body { padding: 20px 18px 22px; }
  .lead-text .lead-body { padding: 26px 20px 24px; }
  .card-title { font-size: 23px; }
  .card-panel .card-title { font-size: 28px; }
  .grid-heading { font-size: 26px; }
  .post-lead { font-size: 18px; }
  .post-cover img { border-radius: 18px; }
  .release-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-page *, .blog-page *::before { transition: none !important; }
  .card:hover, .lead-story:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .toc, .toc-inline, .tabs, .filters-column, .cta-card, .ruby-toggle-row, .related, .read-progress, .share-buttons, .preview-bar { display: none !important; }
  body.blog-page, .hero, .page-post main { background: #fff; color: #000; }
}