/* MaatLog default theme — light layout on top of maatlog-base contract CSS. */

/* Design tokens.

   Light is the base palette. Dark is applied either by the operating system
   (when the reader has expressed no preference) or by ``data-theme`` (when
   they have pressed the toggle in the banner).

   A custom property cannot alias another block's value, so the dark palette
   is written twice on purpose. Keep the two dark blocks identical — the
   contract test in tests/integration/test_theme_tokens.py enforces it. */

/* UA スタイルシートの [hidden] は UA オリジンなので、display を宣言する author
   ルール（カードの display: flex など）に必ず負ける。hidden 属性を使う
   コンポーネントが増えても効き続けるよう、土台をここで一度だけ置く。 */
[hidden] {
  display: none !important;
}

/* Font family names are case-sensitive identifiers, not CSS keywords. */
/* stylelint-disable value-keyword-case */
:root {
  /* Native widgets — search field, buttons, scrollbars — follow the palette. */
  color-scheme: light;

  /* Fluid width policy (Issue 110): floor matches the previous fixed rem values,
     preferred term grows with viewport, ceiling keeps 4K readable. */
  --maatlog-content-width: clamp(42rem, 24rem + 16vw, 60rem);
  --maatlog-main-width: clamp(50rem, 30rem + 18vw, 72rem);

  /* プロフィールページ専用。共有の content/main 幅は上書きしない。 */
  --maatlog-profile-main-width: clamp(56rem, 34rem + 20vw, 80rem);
  --maatlog-profile-content-width: clamp(48rem, 28rem + 18vw, 68rem);
  --maatlog-sidebar-width: 16rem;
  --maatlog-nav-width: 13rem;
  --maatlog-rail-width: 13.5rem;
  --maatlog-author-avatar-size: 3.5rem;
  --maatlog-banner-height: 4rem;

  /* 固定 UI のレイヤ帯。下段 30 は Back to Top など本文補助の浮遊 UI、
     40-42 は Sidebar のドロワー系（Issue #65）。下段は常にドロワーの背面。 */
  --maatlog-z-back-to-top: 30;
  --maatlog-back-to-top-size: 2.75rem;
  --maatlog-z-sidebar-backdrop: 40;
  --maatlog-z-sidebar-drawer: 41;
  --maatlog-z-sidebar-toggle: 42;
  --maatlog-sidebar-drawer-width: min(20rem, 85vw);

  /* sticky ヘッダの下端。nav / TOC の top と max-height はここから計算する。 */
  --maatlog-sticky-top: calc(var(--maatlog-banner-height) + var(--maatlog-space-md));
  --maatlog-space-xs: 0.25rem;
  --maatlog-space-sm: 0.5rem;
  --maatlog-space-md: 1rem;
  --maatlog-space-lg: 2rem;
  --maatlog-space-xl: 3rem;
  --maatlog-radius-sm: 0.5rem;
  --maatlog-radius-md: 0.75rem;
  --maatlog-radius-lg: 1rem;
  --maatlog-radius-pill: 9999px;
  --maatlog-motion-fast: 160ms;
  --maatlog-font-sans: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maatlog-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --maatlog-color-background: #f7f9fc;
  --maatlog-color-surface: #fff;
  --maatlog-color-text: #131a2a;
  --maatlog-color-muted: #4a5568;
  --maatlog-color-link: #4338ca;
  --maatlog-color-accent: #0c6b7d;
  --maatlog-color-border: #cbd5e1;
  --maatlog-color-control-border: #64748b;
  --maatlog-code-background: #0f172a;
  --maatlog-code-text: #e2e8f0;
  --maatlog-code-border: #334155;
  --maatlog-color-surface-hover: #eef2f8;
  --maatlog-inline-code-background: #e0e7ff;
  --maatlog-inline-code-text: #312e81;
  --maatlog-badge-background: #e0e7ff;
  --maatlog-badge-text: #312e81;
  --maatlog-top-image-title-color: #fff;
  --maatlog-shadow-color: 15 23 42 / 8%;
  --maatlog-color-primary: var(--maatlog-color-link);
  --maatlog-shadow-sm: 0 1px 2px rgb(var(--maatlog-shadow-color));
  --maatlog-shadow-md: 0 8px 24px rgb(var(--maatlog-shadow-color));
  --maatlog-card-background: var(--maatlog-color-surface);
  --maatlog-banner-background: var(--maatlog-color-surface);
}
/* stylelint-enable value-keyword-case */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --maatlog-color-background: #070b14;
    --maatlog-color-surface: #131b2b;
    --maatlog-color-text: #e8ecf3;
    --maatlog-color-muted: #a9b6c9;
    --maatlog-color-link: #b0bdfd;
    --maatlog-color-accent: #4dd8ee;
    --maatlog-color-border: #2f3d55;
    --maatlog-color-control-border: #8894ad;
    --maatlog-code-background: #131b2b;
    --maatlog-code-text: #e6edf3;
    --maatlog-code-border: #30363d;
    --maatlog-color-surface-hover: #1d2739;
    --maatlog-inline-code-background: #241f52;
    --maatlog-inline-code-text: #cdd6fe;
    --maatlog-badge-background: #241f52;
    --maatlog-badge-text: #cdd6fe;
    --maatlog-top-image-title-color: #fff;
    --maatlog-shadow-color: 0 0 0 / 45%;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --maatlog-color-background: #070b14;
  --maatlog-color-surface: #131b2b;
  --maatlog-color-text: #e8ecf3;
  --maatlog-color-muted: #a9b6c9;
  --maatlog-color-link: #b0bdfd;
  --maatlog-color-accent: #4dd8ee;
  --maatlog-color-border: #2f3d55;
  --maatlog-color-control-border: #8894ad;
  --maatlog-code-background: #131b2b;
  --maatlog-code-text: #e6edf3;
  --maatlog-code-border: #30363d;
  --maatlog-color-surface-hover: #1d2739;
  --maatlog-inline-code-background: #241f52;
  --maatlog-inline-code-text: #cdd6fe;
  --maatlog-badge-background: #241f52;
  --maatlog-badge-text: #cdd6fe;
  --maatlog-top-image-title-color: #fff;
  --maatlog-shadow-color: 0 0 0 / 45%;
}

body {
  background: var(--maatlog-color-background, #f8fafc);
  color: var(--maatlog-color-text, #172033);
  font-family: var(--maatlog-font-sans, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The sidebar now lives in the layout's left column, so the body is one column.
   要素型で絞る理由は maatlog-base 側のコメントと同じ。 */
article.maatlog-post,
section.maatlog-archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "body"
    "nav"
    "pagination";
  gap: var(--maatlog-space-md, 1rem);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--maatlog-space-md, 1rem);
  color: var(--maatlog-color-text, #1a1d23);
  overflow-wrap: anywhere;
}

section.maatlog-profile {
  max-width: var(--maatlog-profile-content-width, 48rem);
  margin: 0 auto;
  color: var(--maatlog-color-text, #1a1d23);
  padding: var(--maatlog-space-md, 1rem);
}

.maatlog-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--maatlog-space-sm, 0.5rem);
  text-align: center;
  margin-bottom: var(--maatlog-space-lg, 2rem);
}

.maatlog-profile-name {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.maatlog-profile-role,
.maatlog-profile-bio {
  margin: 0;
  color: var(--maatlog-color-muted, #4a5568);
}

.maatlog-profile-section-heading {
  margin-top: var(--maatlog-space-lg, 2rem);
  margin-bottom: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-profile-interest-list,
.maatlog-profile-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maatlog-space-sm, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.maatlog-profile-stat {
  display: flex;
  flex-direction: column;
}

.maatlog-profile-stat-label,
.maatlog-profile-stat-value {
  margin: 0;
}

.maatlog-profile-about-body > :first-child {
  margin-top: 0;
}

.maatlog-post-header,
.maatlog-archive-header {
  grid-area: header;
  margin-bottom: 0;
}

/* The post header is one editorial block: eyebrow, title, tagline, meta, hero. */
.maatlog-post-header {
  display: flex;
  flex-direction: column;
  gap: var(--maatlog-space-sm, 0.5rem);
  margin-bottom: var(--maatlog-space-xl, 3rem);
}

.maatlog-post-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.maatlog-post-card-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maatlog-color-muted);
}

.maatlog-post-header h1 {
  margin: 0;
  max-width: var(--maatlog-content-width, 42rem);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.maatlog-post-tagline {
  margin: 0;
  max-width: var(--maatlog-content-width, 42rem);
  color: var(--maatlog-color-muted, #586070);
  font-size: 1.15rem;
  line-height: 1.55;
}

.maatlog-hero {
  padding-bottom: var(--maatlog-space-md, 1rem);
  border-bottom: 1px solid var(--maatlog-color-border, #d5d9e0);
}

.maatlog-hero-title {
  margin: 0;
}

.maatlog-hero-tagline {
  color: var(--maatlog-color-muted, #586070);
  margin: var(--maatlog-space-xs, 0.25rem) 0 0;
}

.maatlog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maatlog-space-sm, 0.5rem);
  color: var(--maatlog-color-muted, #586070);
  font-size: 0.9rem;
  margin: var(--maatlog-space-sm, 0.5rem) 0 0;
}

.maatlog-hero .maatlog-feed-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maatlog-space-sm, 0.5rem);
  margin-top: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-md, 1rem);
  color: var(--maatlog-color-muted, #586070);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.maatlog-post-info,
.maatlog-post-taxonomies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-post-meta-separator {
  color: var(--maatlog-color-muted, #586070);
}

.maatlog-post-authors,
.maatlog-post-categories,
.maatlog-post-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-sm, 0.5rem);
}

/* pill 本体は .maatlog-taxonomy-link が持つ。ここでは矩形の枠と半径を打ち消す。 */
.maatlog-category-badge {
  padding: 0.25rem 0.65rem;
  background: var(--maatlog-badge-background);
  border: 0;
  border-radius: var(--maatlog-radius-pill);
  color: var(--maatlog-badge-text);
  font-size: 0.78rem;
  text-decoration: none;
}

.maatlog-tag-link {
  color: var(--maatlog-badge-text);
  text-decoration: none;
}

.maatlog-post-body,
.maatlog-post-list {
  grid-area: body;
  min-width: 0;
  margin-bottom: 0;
}

.maatlog-post-body {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* 行長はテキスト要素側で抑える。図・コード・表は main 幅いっぱいを使う。 */
.maatlog-post-body :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
  max-width: var(--maatlog-content-width, 42rem);
}

/* An explicit scale: basic.css leaves h2 and h3 nearly the same size. */
.maatlog-post-body h2 {
  margin: var(--maatlog-space-xl, 3rem) 0 0.6em;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.maatlog-post-body h3 {
  margin: 2.25rem 0 0.6em;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.maatlog-post-body h4 {
  margin: 1.75rem 0 0.6em;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Sphinx wraps the body in a <section>; reach the first heading either way. */
.maatlog-post-body > :first-child,
.maatlog-post-body section:first-child > :first-child {
  margin-top: 0;
}

/* Generic list cap; page-kind rules below lift it for home/archive/normal/post. */
.maatlog-post-list {
  width: 100%;
  max-width: var(--maatlog-content-width, 42rem);
  margin-inline: auto;
}

.maatlog-layout-page-normal .body {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* 記事本文と同じ方針を通常ページにも当てる。コンテナの max-width: none は
   既存契約なので触らず、テキスト要素側で行長を抑える。table / .highlight /
   img / figure は対象外なので main 幅いっぱいを使える。見出しも対象外
   ——通常ページの見出しは目次的な役割が強く、幅を切ると図とくい違う。 */
.maatlog-layout-page-normal .body :is(p, ul, ol, dl, blockquote) {
  max-width: var(--maatlog-content-width, 42rem);
}

/* maatlog:post-list の中のカードは自分の幅を持つ。行長キャップを持ち込まない。 */
.maatlog-layout-page-normal .body .maatlog-post-list :is(p, ul, ol, dl) {
  max-width: none;
}

.maatlog-layout-page-home .body,
.maatlog-layout-page-archive .body,
.maatlog-layout-page-post .body {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.maatlog-layout-page-home .maatlog-post-list,
.maatlog-layout-page-archive .maatlog-post-list {
  max-width: none;
}

/* Normal and post pages: any-depth ``maatlog:post-list`` fills main. */
.maatlog-layout-page-post .maatlog-post-list,
.maatlog-layout-page-normal .maatlog-post-list {
  width: 100%;
  max-width: none;
}

.maatlog-post-navigation {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--maatlog-space-md, 1rem);
  border-top: 1px solid var(--maatlog-color-border, #d5d9e0);
  padding-top: var(--maatlog-space-md, 1rem);
  margin: 0;
}

.maatlog-pagination {
  grid-area: pagination;
  display: flex;
  flex-wrap: wrap;
  gap: var(--maatlog-space-sm, 0.5rem);
  margin: 0;
}

.maatlog-pagination-more {
  margin-left: auto;
}

.maatlog-sidebar {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  max-width: none;
  min-width: 0;
}

/* Sidebar の feed 一覧も Navigation UI の一部。素の黒丸を出さない。 */
.maatlog-sidebar .maatlog-feed-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 著者の外部リンク。アイコンは currentColor 追従なので色は周囲から受け継ぐ。 */
.maatlog-author-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.maatlog-author-link {
  display: inline-flex;
  align-items: center;
  color: var(--maatlog-color-muted);
}

.maatlog-author-link:hover {
  color: var(--maatlog-color-link);
}

.maatlog-author-link-icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
}

/* Sidebar の分類ナビゲーション。Documentation theme 的な箇条書きにしない。 */
.maatlog-taxonomy {
  margin-bottom: var(--maatlog-space-lg);
}

.maatlog-taxonomy h2 {
  margin: 0 0 var(--maatlog-space-xs);
  color: var(--maatlog-color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.maatlog-taxonomy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.maatlog-taxonomy-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--maatlog-space-sm);
  padding: 0.25rem var(--maatlog-space-sm);
  border-radius: var(--maatlog-radius-sm);
  color: var(--maatlog-color-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition:
    background-color var(--maatlog-motion-fast) ease,
    color var(--maatlog-motion-fast) ease;
}

/* hover だけで状態を示さない。キーボード操作でも同じサーフェスを出す。 */
.maatlog-taxonomy-item:hover,
.maatlog-taxonomy-item:focus-visible {
  background: var(--maatlog-color-surface-hover);
  color: var(--maatlog-color-text);
}

.maatlog-taxonomy-item[aria-current="page"] {
  background: var(--maatlog-color-surface-hover);
  color: var(--maatlog-color-primary);
  font-weight: 600;
}

.maatlog-taxonomy-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.maatlog-taxonomy-count {
  flex: none;
  color: var(--maatlog-color-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.maatlog-taxonomy-more,
.maatlog-taxonomy-year {
  margin-top: var(--maatlog-space-xs, 0.25rem);
}

.maatlog-taxonomy-more summary,
.maatlog-taxonomy-year summary {
  cursor: pointer;
  padding: 0.25rem var(--maatlog-space-sm);
  border-radius: var(--maatlog-radius-sm);
  color: var(--maatlog-color-muted);
  font-size: 0.8125rem;
}

.maatlog-taxonomy-more summary:hover,
.maatlog-taxonomy-more summary:focus-visible,
.maatlog-taxonomy-year summary:hover,
.maatlog-taxonomy-year summary:focus-visible {
  background: var(--maatlog-color-surface-hover);
}

.maatlog-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--maatlog-space-sm, 0.5rem);
  background: var(--maatlog-card-background, #f6f7f9);
  border: 1px solid var(--maatlog-color-border, #d5d9e0);
  border-radius: var(--maatlog-radius-lg);
  box-shadow: var(--maatlog-shadow-sm);
  padding: var(--maatlog-space-md, 1rem);
  margin-bottom: var(--maatlog-space-md, 1rem);
  overflow: hidden;
  overflow-wrap: anywhere;
  transition:
    transform var(--maatlog-motion-fast) ease,
    box-shadow var(--maatlog-motion-fast) ease,
    border-color var(--maatlog-motion-fast) ease;
}

/* NEW バッジ — Issue #62 「新着」表示 */
.maatlog-new-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: var(--maatlog-radius-pill, 9999px);
  background: var(--maatlog-badge-background);
  color: var(--maatlog-badge-text);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: middle;
  margin-bottom: var(--maatlog-space-xs, 0.25rem);
}

/* Archive filter — Issue #60 */
.maatlog-archive-filter {
  display: none;
}

.maatlog-js .maatlog-archive-filter {
  display: block;
  margin: 0 0 var(--maatlog-space-lg, 1.25rem);
}

.maatlog-filter-groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maatlog-space-md, 1rem);
}

.maatlog-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-filter-label {
  font-weight: 600;
}

.maatlog-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.maatlog-filter-chip {
  border: 1px solid var(--maatlog-color-border, #d5d9e0);
  background: transparent;
  border-radius: var(--maatlog-radius-pill, 9999px);
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.maatlog-filter-chip.is-active,
.maatlog-filter-chip[aria-pressed="true"] {
  background: var(--maatlog-badge-background);
  color: var(--maatlog-badge-text);
  border-color: transparent;
}

.maatlog-filter-chip:focus-visible {
  outline: 2px solid var(--maatlog-color-accent, #4f46e5);
  outline-offset: 2px;
}

.maatlog-filter-actions {
  margin-top: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-filter-reset {
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  color: inherit;
  padding: 0;
}

.maatlog-filter-reset:focus-visible {
  outline: 2px solid var(--maatlog-color-accent, #4f46e5);
  outline-offset: 2px;
}

.maatlog-archive-empty-filtered {
  margin: var(--maatlog-space-md, 1rem) 0 0;
  color: var(--maatlog-color-muted, #6b7280);
  font-style: italic;
}

.maatlog-post-card:hover,
.maatlog-post-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--maatlog-shadow-md);
  border-color: var(--maatlog-color-link);
}

.maatlog-post-card-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

/* stylelint-disable-next-line no-descending-specificity -- card links opt out of the global link colour. */
.maatlog-post-card-title a {
  color: var(--maatlog-color-text, #1a1d23);
  text-decoration: none;
}

/* stylelint-disable-next-line no-descending-specificity -- card links opt out of the global link colour. */
.maatlog-post-card-title a:hover {
  color: var(--maatlog-color-link, #0b5cab);
}

/* カード全体をタイトルリンクのクリック領域にする（stretched link）。
   基準はカードなので、タイトルの <a> 自身は配置しない。 */
.maatlog-post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.maatlog-post-card-date {
  color: var(--maatlog-color-muted, #586070);
  font-size: 0.8rem;
}

.maatlog-post-card-excerpt {
  margin: 0;
  color: var(--maatlog-color-muted, #586070);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Meta sinks to the bottom so cards of different text lengths line up. */
.maatlog-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-sm, 0.5rem);
  margin: auto 0 0;
}

/* taxonomy リンクは overlay より前面に置き、本来のリンク先を保つ。 */
/* stylelint-disable-next-line no-descending-specificity -- meta links must sit above the title stretched-link overlay. */
.maatlog-post-card-meta a {
  position: relative;
  z-index: 1;
}

/* 区切りは読み上げ専用の span が担うので、視覚的な間隔は gap で作る。 */
.maatlog-post-card-categories,
.maatlog-post-card-tags,
.maatlog-post-card-authors {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maatlog-space-xs, 0.25rem);
}

/* Featured: one lead card beside a stack of two. Falls back to a plain
   asymmetric row whenever the count is not exactly three. */
.maatlog-post-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--maatlog-space-md, 1rem);
  margin-bottom: var(--maatlog-space-xl, 3rem);
}

[data-maatlog-component="featured"] {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--maatlog-space-md, 1rem);
  margin-bottom: var(--maatlog-space-xl, 3rem);
}

/* Latest: a plain responsive card grid. */
.maatlog-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--maatlog-space-md, 1rem);
  margin-bottom: var(--maatlog-space-lg, 2rem);
}

/* Home Latest uses wider tracks so 1920px lands on three columns and
   1280px on two. The archive grid above keeps its 17rem tracks. */
.maatlog-layout-page-home .maatlog-post-grid,
.maatlog-post-featured ~ .maatlog-post-grid,
[data-maatlog-component="latest"] {
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(20rem, calc((100% - 2 * var(--maatlog-space-md, 1rem)) / 3)), 1fr)
  );
}

.maatlog-post-featured .maatlog-post-card,
.maatlog-post-grid .maatlog-post-card {
  margin-bottom: 0;
}

/* One featured post must not leave the right column empty. */
.maatlog-post-featured .maatlog-post-card:only-child {
  grid-column: 1 / -1;
}

.maatlog-post-featured .maatlog-post-card-lead:only-child {
  grid-column: 1 / -1;
}

/* Exactly three: the first card owns the left column across both rows. */
.maatlog-post-featured .maatlog-post-card:first-child:nth-last-child(3) {
  grid-row: span 2;
}

.maatlog-post-featured .maatlog-post-card-lead:nth-last-child(3) {
  grid-row: span 2;
}

.maatlog-post-card-featured .maatlog-post-card-title {
  font-size: 1.35rem;
}

/* stylelint-disable no-descending-specificity -- lead title overrides follow the shared card title rules. */
.maatlog-post-featured .maatlog-post-card:first-child:nth-last-child(3) .maatlog-post-card-title,
[data-maatlog-card-variant="lead"] .maatlog-post-card-title,
.maatlog-post-card-lead .maatlog-post-card-title {
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity -- lead box must follow the featured placement rules. */
[data-maatlog-card-variant="lead"],
.maatlog-post-card-lead {
  padding: var(--maatlog-space-lg, 2rem);
  min-height: 16rem;
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity -- secondary title overrides follow the shared card title rules. */
[data-maatlog-card-variant="secondary"] .maatlog-post-card-title,
.maatlog-post-card-secondary .maatlog-post-card-title {
  font-size: 1.2rem;
}
/* stylelint-enable no-descending-specificity */

[data-maatlog-card-variant="lead"] .maatlog-post-card-excerpt,
.maatlog-post-card-lead .maatlog-post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

[data-maatlog-card-variant="secondary"] .maatlog-post-card-excerpt,
.maatlog-post-card-secondary .maatlog-post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

[data-maatlog-card-variant="latest"] .maatlog-post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.maatlog-post-list-heading {
  margin: var(--maatlog-space-xl, 3rem) 0 var(--maatlog-space-md, 1rem);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--maatlog-color-muted, #586070);
}

.maatlog-post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--maatlog-radius-md);
}

[data-maatlog-card-variant="lead"] .maatlog-post-card-image,
.maatlog-post-card-lead .maatlog-post-card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.maatlog-post-hero-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--maatlog-radius-lg, 1rem);
  margin-top: var(--maatlog-space-sm, 0.5rem);
}

/* Every link takes the token, Sphinx' own chrome included: the user-agent
   blue and visited purple are unreadable on the dark background. */
/* stylelint-disable-next-line no-descending-specificity -- card title links opt out above. */
a {
  color: var(--maatlog-color-link, #0b5cab);
}

/* stylelint-disable-next-line no-descending-specificity -- card title hover comes before this focus ring block. */
a:focus-visible,
button:focus-visible,
.maatlog-search-input:focus-visible,
.maatlog-taxonomy-item:focus-visible,
.maatlog-taxonomy-link:focus-visible,
.maatlog-toc-headings a:focus-visible,
.maatlog-pagination a:focus-visible,
.maatlog-sidebar a:focus-visible,
.maatlog-post-meta a:focus-visible,
.maatlog-post-meta .maatlog-category-badge:focus-visible,
.maatlog-post-meta .maatlog-tag-link:focus-visible {
  outline: 2px solid var(--maatlog-color-link, #0b5cab);
  outline-offset: 2px;
}

/* pill の角に沿ってアウトラインを回す。 */
/* stylelint-disable-next-line no-descending-specificity -- focus ring follows the shared group block. */
.maatlog-taxonomy-link:focus-visible {
  border-radius: var(--maatlog-radius-pill);
}

img {
  max-width: 100%;
  height: auto;
}

/* Narrow viewport: keep the body as a single column (no horizontal scroll). */
@media (width <= 48rem) {
  article.maatlog-post,
  section.maatlog-archive {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "body"
      "nav"
      "pagination";
    max-width: 100%;
  }

  .maatlog-post-featured,
  .maatlog-post-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-maatlog-component="featured"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Home の 1 列上書きはここに置かない。width <= 48rem では 64rem ブロックも
     一致し、同 specificity では後の宣言が勝つため、64rem より前の 1 列は
     Home 2 列に負ける。Home 用は 64rem より後ろの narrow ブロックに置く。
     このブロックに layout 接頭辞の語を足さない（判定ヘルパーが最初の一致を返す）。 */
}

/* Category と tag は同じ surface を共有する。区別は tag の "#" 接頭辞が担う。 */
/* stylelint-disable-next-line no-descending-specificity -- pill base styles follow the shared focus ring block. */
.maatlog-taxonomy-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--maatlog-radius-pill);
  background: var(--maatlog-badge-background);
  color: var(--maatlog-badge-text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background var(--maatlog-motion-fast) ease,
    color var(--maatlog-motion-fast) ease;
}

/* Home の tag は category の塗り pill より一段 quiet にする。Archive の
   pill 自体は変えない。テストが引く featured セレクタをグループ末尾に置く。 */
.maatlog-layout-page-home .maatlog-post-card-tags .maatlog-taxonomy-link,
[data-maatlog-component="featured"] .maatlog-post-card-tags .maatlog-taxonomy-link,
[data-maatlog-component="latest"] .maatlog-post-card-tags .maatlog-taxonomy-link,
.maatlog-post-featured .maatlog-post-card-tags .maatlog-taxonomy-link {
  background: transparent;
  color: var(--maatlog-color-muted);
  border: 1px solid var(--maatlog-color-border);
}

.maatlog-layout-page-home .maatlog-post-card-authors,
[data-maatlog-component="featured"] .maatlog-post-card-authors,
[data-maatlog-component="latest"] .maatlog-post-card-authors,
.maatlog-post-featured .maatlog-post-card-authors {
  color: var(--maatlog-color-muted);
}

.maatlog-post-card-lead .maatlog-post-card-categories .maatlog-taxonomy-link,
[data-maatlog-card-variant="lead"] .maatlog-post-card-categories .maatlog-taxonomy-link {
  font-size: 0.85rem;
}

/* stylelint-disable-next-line no-descending-specificity -- generic hover follows the Home quiet tag overrides. */
.maatlog-taxonomy-link:hover {
  background: var(--maatlog-color-surface-hover);
  color: var(--maatlog-color-link);
  text-decoration: none;
}

/* Authors are people, not buckets: keep them as text links. */
.maatlog-post-info .maatlog-post-author-link {
  padding: 0;
  background: none;
  color: var(--maatlog-color-link);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

/* カードの著者リンクにはクラスが付かないので、ラッパ側から打ち消す。 */
/* stylelint-disable-next-line no-descending-specificity -- card author links opt out after the Home tag overrides. */
.maatlog-post-card-authors .maatlog-taxonomy-link {
  padding: 0;
  background: none;
  color: var(--maatlog-color-link);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

/* Home では著者も tag と同じく quiet にする。Archive の著者リンク色は変えない。 */
/* stylelint-disable-next-line no-descending-specificity -- Home author override follows the generic card author rule. */
.maatlog-layout-page-home .maatlog-post-card-authors .maatlog-taxonomy-link,
[data-maatlog-component="featured"] .maatlog-post-card-authors .maatlog-taxonomy-link,
[data-maatlog-component="latest"] .maatlog-post-card-authors .maatlog-taxonomy-link,
.maatlog-post-featured .maatlog-post-card-authors .maatlog-taxonomy-link {
  color: var(--maatlog-color-muted);
}

.maatlog-home-intro {
  color: var(--maatlog-color-text);
  margin-bottom: var(--maatlog-space-lg);
}

.maatlog-home-archive-link {
  border-top: 1px solid var(--maatlog-color-border);
  color: var(--maatlog-color-link);
  display: block;
  margin-top: var(--maatlog-space-lg);
  padding-top: var(--maatlog-space-md);
}

/* Shell: skip link, banner title/tagline, post TOC list — retained from base contract. */
.maatlog-skip-link {
  position: absolute;
  left: -9999px;
}

.maatlog-skip-link:focus {
  left: var(--maatlog-space-md, 1rem);
  top: var(--maatlog-space-md, 1rem);
  z-index: 11;
  background: var(--maatlog-banner-background, #f6f7f9);
  padding: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-banner-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.maatlog-banner-tagline {
  margin: 0;
  color: var(--maatlog-color-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.maatlog-toc-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Header banner。高さ 4rem の 1 本の帯として振る舞い、上下の余白は持たない。 */
.maatlog-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--maatlog-space-md);
  min-height: var(--maatlog-banner-height);
  padding: 0 var(--maatlog-space-lg);
  background: var(--maatlog-banner-background);
  border-bottom: 1px solid var(--maatlog-color-border);
}

/* 地を透かすのは blur が効くときだけ。透過だけが効くと背後の本文が
   バナーの文字に重なって読めなくなる。非対応環境は不透明のまま。
   currentcolor は色リテラルではないので、色トークン契約に抵触しない。 */
@supports (backdrop-filter: blur(8px)) and (background: color-mix(in srgb, currentcolor 82%, transparent)) {
  .maatlog-banner {
    background: color-mix(in srgb, var(--maatlog-banner-background) 82%, transparent);
    backdrop-filter: blur(8px);
  }
}

.maatlog-banner-brand {
  display: flex;
  align-items: center;
  gap: var(--maatlog-space-md, 1rem);
  min-width: 0;
}

.maatlog-banner-logo img {
  display: block;
  max-height: 2rem;
  width: auto;
}

/* stylelint-disable-next-line no-descending-specificity -- focus and banner-link rules have separate duties. */
.maatlog-banner-title a {
  color: var(--maatlog-color-text, #1a1d23);
  text-decoration: none;
}

.maatlog-banner-search .searchformwrapper {
  margin: 0;
}

.maatlog-banner-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--maatlog-space-sm);
}

.maatlog-search {
  display: flex;
  margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- focus-visible and input styling have separate duties. */
.maatlog-search-input {
  box-sizing: border-box;
  width: 14rem;
  max-width: 100%;
  padding: 0.375rem var(--maatlog-space-sm);
  border: 1px solid var(--maatlog-color-control-border);
  border-radius: var(--maatlog-radius-pill);
  background: var(--maatlog-color-background);
  color: var(--maatlog-color-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--maatlog-motion-fast) ease;
}

.maatlog-search-input:hover,
.maatlog-search-input:focus {
  border-color: var(--maatlog-color-primary);
}

/* Wide shell: nav/TOC keep their max width; spare viewport width goes to main. */
.maatlog-layout {
  display: grid;
  grid-template-columns:
    minmax(0, var(--maatlog-nav-width, 15rem))
    minmax(0, 1fr);
  grid-template-areas: "nav main";
  gap: var(--maatlog-space-lg, 2rem);
  align-items: start;
  max-width: none;
  margin: 0;
  padding: var(--maatlog-space-md, 1rem);
}

/* Same element, same specificity — this rule must stay after ``.maatlog-layout``. */
.maatlog-layout-has-rail {
  grid-template-columns:
    minmax(0, var(--maatlog-nav-width, 15rem))
    minmax(0, 1fr)
    minmax(0, var(--maatlog-rail-width, 14rem));
  grid-template-areas: "nav main rail";
}

.maatlog-nav {
  grid-area: nav;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--maatlog-nav-width, 15rem);

  /* Sidebar は Main content より目立たせない。ページ背景を透かす。 */
  background: none;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Sphinx の toctree も同じ Navigation 行として描く。 */
.maatlog-nav-toctree {
  margin-bottom: var(--maatlog-space-lg);
}

.maatlog-nav-toctree ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.maatlog-nav-toctree ul ul {
  padding-inline-start: var(--maatlog-space-md);
}

/* stylelint-disable-next-line no-descending-specificity -- focus-visible and nav link rules have separate duties. */
.maatlog-nav-toctree a {
  display: block;
  padding: 0.25rem var(--maatlog-space-sm);
  border-radius: var(--maatlog-radius-sm);
  color: var(--maatlog-color-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition:
    background-color var(--maatlog-motion-fast) ease,
    color var(--maatlog-motion-fast) ease;
}

/* 平常時を muted に落としたぶん、触れたときは本文色まで戻す。 */
.maatlog-nav-toctree a:hover,
.maatlog-nav-toctree a:focus-visible {
  background: var(--maatlog-color-surface-hover);
  color: var(--maatlog-color-text);
}

/* Sphinx が現在ページの <li> に付けるクラス。 */
.maatlog-nav-toctree li.current > a {
  color: var(--maatlog-color-primary);
  font-weight: 600;
}

.maatlog-layout-main {
  grid-area: main;
  min-width: 0;
}

.maatlog-layout-main pre {
  max-width: 100%;
  overflow: auto hidden;
  background: var(--maatlog-code-background, #0f172a);
  color: var(--maatlog-code-text, #e2e8f0);
  border: 1px solid var(--maatlog-code-border, #1e293b);
  border-radius: var(--maatlog-radius-md, 0.75rem);
  padding: var(--maatlog-space-md, 1rem);
  font-family: var(--maatlog-font-mono, monospace);
  line-height: 1.6;
}

.maatlog-layout-main .highlight {
  position: relative;
  overflow-x: auto;
  border-radius: var(--maatlog-radius-md, 0.75rem);
  background: var(--maatlog-code-background, #0f172a);
}

/* Pygments ships its own ``.highlight`` ground; the theme owns the surface. */
.maatlog-layout-main .highlight pre {
  border: 0;
  padding: var(--maatlog-space-sm, 0.5rem) var(--maatlog-space-md, 1rem);
}

.maatlog-layout-main code {
  background: var(--maatlog-inline-code-background, #eef2ff);
  color: var(--maatlog-inline-code-text, #3730a3);
  padding: 0.1em 0.35em;
  border-radius: var(--maatlog-radius-sm, 0.5rem);
  font-family: var(--maatlog-font-mono, monospace);
  font-size: 0.9em;
}

.maatlog-layout-main .highlight code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

/* Sphinx emits no wrapper around ``table.docutils``, so the table itself has to
   be the scroll container. ``display: block`` is what makes overflow work here;
   the cost is that columns no longer size themselves against each other. Not
   breaking the mobile layout is worth that. */
.maatlog-layout-main table.docutils {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid var(--maatlog-color-border, #e2e8f0);
  border-radius: var(--maatlog-radius-md, 0.75rem);
  font-size: 0.92rem;
}

.maatlog-layout-main table.docutils th,
.maatlog-layout-main table.docutils td {
  padding: var(--maatlog-space-sm, 0.5rem) var(--maatlog-space-md, 1rem);
  border: 0;
  border-bottom: 1px solid var(--maatlog-color-border, #e2e8f0);
  vertical-align: top;
}

.maatlog-layout-main table.docutils th {
  background: var(--maatlog-color-surface-hover, #f1f5f9);
  color: var(--maatlog-color-text, #172033);
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}

.maatlog-layout-main table.docutils tbody tr:last-child td {
  border-bottom: 0;
}

/* セル内の段落は行間を詰める。本文の 1.8 を持ち込むと表が間延びする。 */
.maatlog-layout-main table.docutils :is(th, td) > p {
  margin: 0;
  line-height: 1.5;
}

.maatlog-layout-main blockquote {
  margin: var(--maatlog-space-lg, 2rem) 0;
  padding: var(--maatlog-space-md, 1rem) var(--maatlog-space-lg, 2rem);
  border-left: 3px solid var(--maatlog-color-accent, #0e7490);
  border-radius: 0 var(--maatlog-radius-md, 0.75rem) var(--maatlog-radius-md, 0.75rem) 0;
  background: var(--maatlog-color-surface, #fff);
  color: var(--maatlog-color-text, #172033);
  font-style: normal;
}

/* docutils wraps blockquote content in a <div>; the last block is two levels down. */
.maatlog-layout-main blockquote > :last-child,
.maatlog-layout-main blockquote > div > :last-child {
  margin-bottom: 0;
}

/* Two accents, not eight: informational uses the link colour, cautionary uses
   the accent colour. Sphinx' own admonition classes map onto those two. */
.maatlog-layout-main .admonition {
  margin: var(--maatlog-space-lg, 2rem) 0;
  padding: var(--maatlog-space-md, 1rem);
  border: 1px solid var(--maatlog-color-border, #e2e8f0);
  border-left: 3px solid var(--maatlog-color-link, #4f46e5);
  border-radius: var(--maatlog-radius-md, 0.75rem);
  background: var(--maatlog-color-surface, #fff);
}

/* Sphinx emits the title as a <p>, so it needs to be told to read as a label. */
.maatlog-layout-main .admonition > .admonition-title {
  margin: 0 0 var(--maatlog-space-sm, 0.5rem);
  color: var(--maatlog-color-muted, #475569);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.maatlog-layout-main .admonition > :last-child {
  margin-bottom: 0;
}

.maatlog-layout-main .admonition.warning,
.maatlog-layout-main .admonition.caution,
.maatlog-layout-main .admonition.danger,
.maatlog-layout-main .admonition.attention {
  border-left-color: var(--maatlog-color-accent, #0e7490);
}

/* The paragraph anchor is a tool, not content. Keep it in the accessibility
   tree — ``display: none`` would take it off the keyboard path — and let it
   surface on hover or when it takes focus. */
.maatlog-layout-main a.headerlink {
  padding-left: 0.3em;
  color: var(--maatlog-color-muted, #475569);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--maatlog-motion-fast) ease;
}

.maatlog-layout-main :is(h1, h2, h3, h4, h5, h6, dt, caption, figcaption):hover > a.headerlink,
/* stylelint-disable-next-line no-descending-specificity -- hover and focus-visible share the same reveal rule. */
.maatlog-layout-main a.headerlink:focus-visible {
  opacity: 1;
}

.maatlog-right-rail {
  grid-area: rail;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--maatlog-rail-width, 14rem);
  background: none;
  position: sticky;
  top: var(--maatlog-sticky-top);
  max-height: calc(100vh - var(--maatlog-sticky-top) - var(--maatlog-space-md));
  min-width: 0;
  min-height: 0;
  overflow-y: auto;

  /* rail は縦 2 段。要約は固定、TOC だけが内部スクロールする。 */
  display: flex;
  flex-direction: column;
}

.maatlog-nav,
.maatlog-right-rail {
  position: sticky;
  top: var(--maatlog-sticky-top);
  max-height: calc(100vh - var(--maatlog-sticky-top) - var(--maatlog-space-md));
  min-width: 0;
  min-height: 0;
}

.maatlog-author-summary {
  flex: 0 0 auto;
}

.maatlog-toc {
  flex: 1 1 auto;

  /* flex アイテムの既定 min-height: auto は overflow を無効化する。
     下方は Summary が rail 高を超えた場合に TOC が潰れない下限。 */
  min-height: 8rem;
  overflow-y: auto;
  scrollbar-width: thin;
  background: none;
}

.maatlog-author-summary-title {
  margin: 0 0 var(--maatlog-space-sm, 0.5rem);
  font-size: 0.875rem;
  color: var(--maatlog-color-muted, #4a5568);
}

.maatlog-author-summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--maatlog-space-xs, 0.25rem);
}

.maatlog-author-summary-card + .maatlog-author-summary-card {
  margin-top: var(--maatlog-space-md, 1rem);
}

.maatlog-author-summary-name,
.maatlog-author-summary-bio {
  margin: 0;
}

.maatlog-author-summary-name {
  font-weight: 600;
}

.maatlog-author-summary-bio {
  font-size: 0.875rem;
  color: var(--maatlog-color-muted, #4a5568);
}

.maatlog-author-summary-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--maatlog-author-avatar-size, 3.5rem);
  height: var(--maatlog-author-avatar-size, 3.5rem);
  overflow: hidden;
  border-radius: 50%;
  background: var(--maatlog-color-surface, #fff);
}

.maatlog-author-summary-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maatlog-author-summary-avatar-initials {
  font-weight: 600;
  color: var(--maatlog-color-muted, #4a5568);
}

.maatlog-toc-posts li {
  margin-bottom: var(--maatlog-space-xs, 0.25rem);
}

/* 右 TOC。Main content より小さく静かに。Card にも Border 囲みにもしない。 */
.maatlog-toc h2 {
  margin: 0 0 var(--maatlog-space-xs);
  color: var(--maatlog-color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* stylelint-disable no-descending-specificity -- TOC selectors have different specificity from earlier shell and nav rules. */
.maatlog-toc-headings ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 階層は 1 段だけ字下げする。深くすると幅 13.5rem に収まらない。 */
.maatlog-toc-headings ul ul {
  padding-inline-start: var(--maatlog-space-md);
}

/* border-left は常に 2px 確保しておく。active 時に横へずれない。 */
.maatlog-toc-headings a,
.maatlog-toc-posts a {
  display: block;
  padding: 0.1875rem 0 0.1875rem var(--maatlog-space-sm);
  border-left: 2px solid transparent;
  color: var(--maatlog-color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--maatlog-motion-fast) ease;
}

.maatlog-toc-headings a:hover,
.maatlog-toc-headings a:focus-visible,
.maatlog-toc-posts a:hover,
.maatlog-toc-posts a:focus-visible {
  color: var(--maatlog-color-primary);
}

.maatlog-toc-headings a[aria-current="true"] {
  border-left-color: var(--maatlog-color-primary);
  color: var(--maatlog-color-primary);
  font-weight: 600;
}
/* stylelint-enable no-descending-specificity */

/* Medium: the right rail moves above the content; without one, nothing changes. */
@media (width <= 64rem) {
  .maatlog-layout {
    grid-template-columns: var(--maatlog-nav-width, 15rem) minmax(0, 1fr);
    grid-template-areas: "nav main";
  }

  .maatlog-layout-has-rail {
    grid-template-columns: var(--maatlog-nav-width, 15rem) minmax(0, 1fr);
    grid-template-areas:
      "nav rail"
      "nav main";
  }

  .maatlog-right-rail {
    position: static;
    display: block;
    max-height: none;
    max-width: none;
  }

  .maatlog-toc {
    /* base の下限 8rem は sticky rail の flex 列でのみ意味を持つ。ここは
       静的レイアウトなので、内容より高いボックスを強制しないよう解除する。 */
    min-height: 0;
    max-height: none;
    overflow-y: visible;
  }

  .maatlog-layout-page-normal .body > section > .maatlog-post-list {
    width: 100%;
    max-width: none;
  }

  .maatlog-post-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-maatlog-component="featured"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .maatlog-post-grid {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }

  .maatlog-layout-page-home .maatlog-post-grid,
  .maatlog-post-featured ~ .maatlog-post-grid,
  [data-maatlog-component="latest"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maatlog-post-featured .maatlog-post-card:first-child:nth-last-child(3) {
    grid-row: auto;
  }

  .maatlog-post-featured .maatlog-post-card-lead:nth-last-child(3) {
    grid-row: auto;
  }
}

/* Narrow: one column. The TOC comes first, the author summary closes the
   article, and site navigation is last.

   flex を使うのは、grid の named area だと TOC も要約も無いページで空行と
   ``gap`` が残るためである。flex は実在するアイテムだけを並べる。
   rail のボックスは ``display: contents`` で外す。<div> なので失われる
   セマンティクスは無く、DOM は 1 つのままで二重読み上げも起きない。 */
@media (width <= 48rem) {
  .maatlog-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--maatlog-space-lg, 2rem);
  }

  .maatlog-right-rail {
    display: contents;
  }

  .maatlog-toc {
    order: 1;
  }

  .maatlog-layout-main {
    order: 2;

    /* flex アイテムの既定 min-width: auto は幅広テーブルでページを広げる。 */
    min-width: 0;
  }

  .maatlog-author-summary {
    order: 3;
  }

  .maatlog-nav {
    order: 4;
    position: static;
    max-height: none;
    max-width: none;
    border-top: 1px solid var(--maatlog-color-border, #d5d9e0);
  }

  .maatlog-banner {
    flex-wrap: wrap;
    padding: var(--maatlog-space-md);
  }

  .maatlog-banner-actions {
    flex-wrap: wrap;
  }

  .maatlog-search,
  .maatlog-search-input {
    width: 100%;
  }

  /* Home Latest も 1 列にする。このブロックは 64rem ブロックより後ろにあるため、
     同 specificity の Home 2 列指定に narrow 1 列が勝つ。 */
  .maatlog-layout-page-home .maatlog-post-grid,
  .maatlog-post-featured ~ .maatlog-post-grid,
  [data-maatlog-component="latest"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The banner toggle only exists when the theme runtime ran. Hiding it by
   default keeps readers without JavaScript from seeing a dead control, and
   flipping it on from a class set in <head> avoids a layout shift. */
.maatlog-theme-toggle {
  display: none;
}

.maatlog-js .maatlog-theme-toggle {
  /* Containing block for the visually hidden label. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--maatlog-space-xs, 0.25rem);
  padding: var(--maatlog-space-xs, 0.25rem);
  border: 1px solid var(--maatlog-color-control-border, #767e8c);
  border-radius: var(--maatlog-radius-pill);
  background: transparent;
  color: var(--maatlog-color-text, #1a1d23);
  cursor: pointer;
}

.maatlog-theme-toggle-icon {
  block-size: 1.25rem;
  inline-size: 1.25rem;
}

/* The icon names the theme in view: sun for light, moon for dark. */
.maatlog-theme-toggle-icon-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .maatlog-theme-toggle-icon-light {
    display: none;
  }

  :root:not([data-theme="light"]) .maatlog-theme-toggle-icon-dark {
    display: inline;
  }
}

:root[data-theme="dark"] .maatlog-theme-toggle-icon-light {
  display: none;
}

:root[data-theme="dark"] .maatlog-theme-toggle-icon-dark {
  display: inline;
}

/* Visible text kept out of sight: the button still has a real accessible name. */
.maatlog-theme-toggle-label {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  white-space: nowrap;
}

/* Screen-reader-only punctuation between taxonomy links; visual spacing uses gap. */
.maatlog-visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  block-size: 1px;
  inline-size: 1px;
  white-space: nowrap;
}

/* Cross-document View Transition: same-origin navigations only.
   Unsupported browsers ignore the at-rule and navigate normally. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--maatlog-motion-fast);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* Motion is decoration here: every transition is a hover affordance, so the
   reduced-motion reader loses nothing by having them all switched off. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ---- maattop hero image (Theme API 1.9) ---- */
.maatlog-post-top-image {
  position: relative;
  width: 100%;
  max-width: var(--maatlog-main-width, 100%);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.maatlog-post-top-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.maatlog-post-top-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgb(0 0 0 / 60%));
}

.maatlog-post-top-image-title {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  color: var(--maatlog-top-image-title-color);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--maatlog-top-image-title-font, inherit);
  line-height: 1.2;
  text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
}

@media (width <= 640px) {
  .maatlog-post-top-image {
    aspect-ratio: 4 / 3;
  }

  .maatlog-post-top-image-title {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    font-size: clamp(1.2rem, 5vw, 2rem);
  }
}

/* Mobile sidebar drawer (Issue #65). Hidden until .maatlog-js + narrow viewport. */
.maatlog-sidebar-toggle {
  display: none;
}

.maatlog-sidebar-backdrop {
  display: none;
}

@media (width <= 48rem) {
  .maatlog-js .maatlog-sidebar-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--maatlog-space-xs, 0.25rem);
    border: 1px solid var(--maatlog-color-control-border, #767e8c);
    border-radius: var(--maatlog-radius-pill, 9999px);
    background: transparent;
    color: var(--maatlog-color-text, #1a1d23);
    cursor: pointer;
  }

  .maatlog-js .maatlog-sidebar-toggle-icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  .maatlog-js .maatlog-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: calc(-1 * var(--maatlog-sidebar-drawer-width, min(20rem, 85vw)));
    z-index: var(--maatlog-z-sidebar-drawer, 41);
    box-sizing: border-box;
    width: var(--maatlog-sidebar-drawer-width, min(20rem, 85vw));
    max-width: none;
    max-height: none;
    margin: 0;
    padding-block: var(--maatlog-space-md, 1rem);
    padding-inline: max(var(--maatlog-space-md, 1rem), env(safe-area-inset-left, 0px)) var(--maatlog-space-md, 1rem);
    overflow: hidden auto;
    background: var(--maatlog-color-surface, #fff);
    border-inline-end: 1px solid var(--maatlog-color-border, #d5d9e0);
    box-shadow: 0 0 1.5rem rgb(0 0 0 / 18%);
    visibility: hidden;
    transition:
      inset-inline-start var(--maatlog-motion-fast) ease,
      visibility var(--maatlog-motion-fast) ease;
  }

  .maatlog-js .maatlog-sidebar.is-open {
    inset-inline-start: 0;
    visibility: visible;
  }

  .maatlog-js .maatlog-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--maatlog-z-sidebar-backdrop, 40);
    display: block;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / 40%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition:
      opacity var(--maatlog-motion-fast) ease,
      visibility var(--maatlog-motion-fast) ease;
  }

  .maatlog-js .maatlog-sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html.maatlog-sidebar-open {
    overflow: hidden;
  }

  /* Issue #65: the open drawer covers the banner, so the toggle is pinned above
     the drawer as its close control while the rest of the banner drops out of
     painting, hit testing and the accessibility tree. ``position`` and
     ``backdrop-filter`` are pinned here so the banner cannot capture the fixed
     toggle in its own stacking or containing block. */
  html.maatlog-sidebar-open .maatlog-banner {
    position: relative;
    z-index: var(--maatlog-z-sidebar-toggle, 42);
    visibility: hidden;
    backdrop-filter: none;
  }

  html.maatlog-sidebar-open .maatlog-sidebar-toggle {
    position: fixed;
    inset-block-start: var(--maatlog-space-md, 1rem);
    inset-inline-start: var(--maatlog-space-md, 1rem);
    z-index: var(--maatlog-z-sidebar-toggle, 42);
    visibility: visible;
    background: var(--maatlog-color-surface, #fff);
  }

  /* Room for the pinned toggle above the drawer's own content. */
  html.maatlog-sidebar-open .maatlog-sidebar {
    padding-block-start: calc(var(--maatlog-space-md, 1rem) * 2 + 2rem);
  }
}

/* ---- Author profile ---- */

.maatlog-profile-avatar {
  display: grid;
  place-items: center;
  inline-size: 8rem;
  block-size: 8rem;
  border-radius: var(--maatlog-radius-pill, 9999px);
  overflow: hidden;
  background: var(--maatlog-color-surface-hover, #eef2f8);
  border: 1px solid var(--maatlog-color-border, #cbd5e1);
}

.maatlog-profile-avatar-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.maatlog-profile-avatar-initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--maatlog-color-muted, #4a5568);
  letter-spacing: 0.05em;
}

.maatlog-profile-role {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.maatlog-profile-interest {
  padding: var(--maatlog-space-xs, 0.25rem) var(--maatlog-space-sm, 0.5rem);
  border-radius: var(--maatlog-radius-pill, 9999px);
  background: var(--maatlog-badge-background, #e0e7ff);
  color: var(--maatlog-badge-text, #312e81);
  font-size: 0.875rem;
}

.maatlog-profile-stat-list {
  gap: var(--maatlog-space-lg, 2rem);
}

.maatlog-profile-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--maatlog-color-muted, #4a5568);
}

.maatlog-profile-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

@media (width <= 48rem) {
  .maatlog-profile-avatar {
    inline-size: 6rem;
    block-size: 6rem;
  }

  .maatlog-profile-avatar-initials {
    font-size: 1.75rem;
  }

  .maatlog-profile-name {
    font-size: 1.5rem;
  }

  .maatlog-profile-stat-list {
    gap: var(--maatlog-space-md, 1rem);
  }
}

/* Back to top — Issue #61.
   ボタンは hidden 付きで出荷され、テーマ runtime がページ上端から 600px を
   超えたときだけ外す。JavaScript の無い環境では現れない。 */
.maatlog-back-to-top {
  position: fixed;
  inset-block-end: max(var(--maatlog-space-lg, 2rem), env(safe-area-inset-bottom, 0px));
  inset-inline-end: max(var(--maatlog-space-md, 1rem), env(safe-area-inset-right, 0px));
  z-index: var(--maatlog-z-back-to-top, 30);
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  inline-size: var(--maatlog-back-to-top-size, 2.75rem);
  block-size: var(--maatlog-back-to-top-size, 2.75rem);
  padding: 0;
  color: var(--maatlog-color-text, #131a2a);
  background: var(--maatlog-color-surface, #fff);
  border: 1px solid var(--maatlog-color-control-border, #64748b);
  border-radius: var(--maatlog-radius-pill, 9999px);
  cursor: pointer;
}

.maatlog-back-to-top:hover {
  background: var(--maatlog-color-surface-hover, #eef2f8);
}

.maatlog-back-to-top:focus-visible {
  outline: 2px solid var(--maatlog-color-accent, #0c6b7d);
  outline-offset: 2px;
}

.maatlog-back-to-top-icon {
  block-size: 1.25rem;
  inline-size: 1.25rem;
}

/* ドロワー展開中はページをスクロールできず、backdrop とも重なるため出さない。 */
html.maatlog-sidebar-open .maatlog-back-to-top {
  display: none;
}

/* 記事ページの Share コントロール — Issue #64 */
.maatlog-share {
  display: none;
  margin: var(--maatlog-space-md, 1rem) 0 0;
}

.maatlog-js .maatlog-share {
  display: flex;
  align-items: center;
  gap: var(--maatlog-space-sm, 0.5rem);
}

.maatlog-share-button {
  font: inherit;
  color: var(--maatlog-color-accent, #0c6b7d);
  background: none;
  border: 1px solid var(--maatlog-color-control-border, #64748b);
  border-radius: 0.25rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

.maatlog-share-button:focus-visible {
  outline: 2px solid var(--maatlog-color-accent, #0c6b7d);
  outline-offset: 2px;
}

.maatlog-share-status {
  font-size: 0.9rem;
  color: var(--maatlog-color-muted, #5f6b7a);
}

/* 見出しリンクのコピー — Issue #59。テーマごとに maatlog.css は 1 枚だけ
   出力される（default は base の CSS を読まない）ため、base と同じ構造規則を
   ここにも置く。`.maatlog-share` と同じ二重持ちで、配色と浮き方は default
   固有の値を与える。 */
/* stylelint-disable-next-line no-descending-specificity -- 上の hover 露出規則は opacity だけを変え、こことプロパティ集合が交わらない。 */
.maatlog-post-body :is(h2, h3, h4) > a.headerlink {
  position: relative;

  /* ¶ 自体は選択させない。見出しテキストの選択は妨げない。 */
  user-select: none;
}

/* 結果バブル。文言は data 属性で JS から渡し、CSS には埋め込まない。 */
.maatlog-post-body :is(h2, h3, h4) > a.headerlink[data-maatlog-copy-state]::after {
  content: attr(data-maatlog-copy-label);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 100%;
  margin-inline-start: 0.4em;
  padding: 0.1em 0.5em;
  border: 1px solid var(--maatlog-color-border, #d0d0d0);
  border-radius: 0.25rem;
  background: var(--maatlog-color-surface, #f8fafc);
  box-shadow: 0 1px 3px rgb(15 23 42 / 12%);
  color: var(--maatlog-color-muted, #475569);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;

  /* 通常フローの外に置き、隣の文字のクリックも奪わない。 */
  pointer-events: none;
}

.maatlog-post-body :is(h2, h3, h4) > a.headerlink[data-maatlog-copy-state="failed"]::after {
  color: var(--maatlog-color-text, #0f172a);
}

/* hover を持たない環境では permalink を常時可視にする。テーマごとに
   maatlog.css は 1 枚だけ出力される（default は base の CSS を読まない）ため、
   base と同じ規則をここにも置く。`.maatlog-share` と同じ二重持ちである。 */
@media (hover: none) {
  .maatlog-post-body :is(h2, h3, h4) > a.headerlink {
    visibility: visible;
    opacity: 1;
  }
}