@charset "UTF-8";

/* --- Design Tokens --- */
:root {
  /* Colors (Light) */
  --c-text: #444444;
  --c-text-sub: #777777;
  --c-text-muted: #aaaaaa;
  --c-bg: #fafafa;
  --c-bg-alt: #f2f2f2;
  --c-bg-inset: #eaeaea;
  --c-border: #e2e2e2;
  --c-accent: #444444;
  --c-accent-fg: #fafafa;
  --c-surface: #ffffff;
  --c-overlay: rgba(0, 0, 0, 0.04);

  /* Spacing (8px grid) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;

  /* Font Size (>=16px: 4px step, <16px: 2px step) */
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-base: 16px;
  --fs-m: 20px;
  --fs-l: 24px;
  --fs-xl: 28px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 48px;

  /* Radius */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-full: 9999px;

  /* Transition */
  --dur: 0.3s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --page-pad: 40px;
  --max-w: 1200px;
  --header-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Icons (mask-image SVG) */
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 496C328.8 496 336 503.2 336 512L336 592C336 600.8 328.8 608 320 608C311.2 608 304 600.8 304 592L304 512C304 503.2 311.2 496 320 496zM172.9 444.4C179.1 438.2 189.3 438.2 195.6 444.4C201.9 450.6 201.8 460.8 195.6 467.1L139 523.7C132.8 529.9 122.6 529.9 116.4 523.7C110.2 517.5 110.2 507.3 116.4 501.1L173 444.5zM444.4 444.4C450.6 438.2 460.8 438.2 467.1 444.4L523.7 501C529.9 507.2 529.9 517.4 523.7 523.6C517.5 529.8 507.3 529.8 501.1 523.6L444.5 467C438.3 460.8 438.3 450.6 444.5 444.3zM320 448C249.3 448 192 390.7 192 320C192 249.3 249.3 192 320 192C390.7 192 448 249.3 448 320C448 390.7 390.7 448 320 448zM320 224C267 224 224 267 224 320C224 373 267 416 320 416C373 416 416 373 416 320C416 267 373 224 320 224zM128 304C136.8 304 144 311.2 144 320C144 328.8 136.8 336 128 336L48 336C39.2 336 32 328.8 32 320C32 311.2 39.2 304 48 304L128 304zM592 304C600.8 304 608 311.2 608 320C608 328.8 600.8 336 592 336L512 336C503.2 336 496 328.8 496 320C496 311.2 503.2 304 512 304L592 304zM116.3 116.3C122.5 110.1 132.7 110.1 138.9 116.3L195.5 172.9C201.7 179.1 201.7 189.3 195.5 195.6C189.3 201.9 179.1 201.8 172.8 195.6L116.3 139C110.1 132.8 110.1 122.6 116.3 116.4zM501 116.3C507.2 110.1 517.4 110.1 523.6 116.3C529.8 122.5 529.8 132.7 523.6 138.9L467 195.5C460.8 201.7 450.6 201.7 444.3 195.5C438 189.3 438.1 179.1 444.3 172.8L501 116.3zM320 32C328.8 32 336 39.2 336 48L336 128C336 136.8 328.8 144 320 144C311.2 144 304 136.8 304 128L304 48C304 39.2 311.2 32 320 32z'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 96C329.5 96 338.9 96.6 348 97.7C287.9 136 248 203.3 248 280C248 397.2 344.4 492.8 458.7 495.9C420.5 526 372.4 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C373.4 471.8 280 386.1 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M448 272C448 174.8 369.2 96 272 96C174.8 96 96 174.8 96 272C96 369.2 174.8 448 272 448C369.2 448 448 369.2 448 272zM407.3 430C371 461.2 323.7 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 323.7 461.2 371 430 407.3L571.3 548.7C577.5 554.9 577.5 565.1 571.3 571.3C565.1 577.5 554.9 577.5 548.7 571.3L407.3 430z'/%3E%3C/svg%3E");
  --icon-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M140.8 428.8C148.9 438.9 150.2 452.9 144 464.2L103.8 537.8L204.8 494.5C212.7 491.1 221.6 491 229.6 494.3C257.2 505.6 287.8 511.9 320 511.9C445.7 511.9 544 416.9 544 303.9C544 190.9 445.7 96 320 96C194.3 96 96 191 96 304C96 350.7 112.5 393.8 140.8 428.8zM115.9 448.9C83.3 408.6 64 358.4 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304C576 436.5 461.4 544 320 544C283.5 544 248.8 536.8 217.4 524L101 573.9C97.3 575.5 93.5 576 89.5 576C75.4 576 64 564.6 64 550.5C64 546.2 65.1 542 67.1 538.3L115.9 448.9z'/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M192 96L320 96L320 192C320 227.3 348.7 256 384 256L480 256L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 128C160 110.3 174.3 96 192 96zM352 109.3L466.7 224L384 224C366.3 224 352 209.7 352 192L352 109.3zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM236.7 419.3L308.7 491.3C314.9 497.5 325.1 497.5 331.3 491.3L403.3 419.3C409.5 413.1 409.5 402.9 403.3 396.7C397.1 390.5 386.9 390.5 380.7 396.7L336 441.4L336 320C336 311.2 328.8 304 320 304C311.2 304 304 311.2 304 320L304 441.4L259.3 396.7C253.1 390.5 242.9 390.5 236.7 396.7C230.5 402.9 230.5 413.1 236.7 419.3z'/%3E%3C/svg%3E");
  --icon-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M308.7 427.3C314.9 433.5 325.1 433.5 331.3 427.3L491.3 267.3C497.5 261.1 497.5 250.9 491.3 244.7C485.1 238.5 474.9 238.5 468.7 244.7L320 393.4L171.3 244.7C165.1 238.5 154.9 238.5 148.7 244.7C142.5 250.9 142.5 261.1 148.7 267.3L308.7 427.3z'/%3E%3C/svg%3E");
  --icon-clap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M400 80C400 71.2 392.8 64 384 64C375.2 64 368 71.2 368 80L368 144C368 152.8 375.2 160 384 160C392.8 160 400 152.8 400 144L400 80zM279.1 82.7C271.7 87.6 269.8 97.5 274.7 104.9L306.7 152.9C311.6 160.3 321.5 162.2 328.9 157.3C336.3 152.4 338.2 142.5 333.3 135.1L301.3 87.1C296.4 79.7 286.5 77.8 279.1 82.7zM488.9 82.7C481.5 77.8 471.6 79.8 466.7 87.1L434.7 135.1C429.8 142.5 431.8 152.4 439.1 157.3C446.4 162.2 456.4 160.2 461.3 152.9L493.3 104.9C498.2 97.5 496.2 87.6 488.9 82.7zM217.9 216C222.7 216 227.2 217.9 230.6 221.3L356.7 347.3C359.6 350.2 363.6 352 368 352C376.8 352 384 344.8 384 336L384 272C384 263.2 391.2 256 400 256C408.8 256 416 263.2 416 272L416 401.6C416 480.2 352.2 544 273.6 544C235.8 544 199.6 529 172.9 502.3C147.6 477 131 460.4 123.3 452.7L101.3 430.7C97.9 427.3 96 422.8 96 418C96 408.1 104 400.1 113.9 400.1C118.7 400.1 123.2 402 126.6 405.3L164.7 443.4C170.9 449.6 181.1 449.6 187.3 443.4C193.5 437.2 193.5 427 187.3 420.8L149.2 382.7L101.2 334.7C97.8 331.3 95.9 326.8 95.9 322C95.9 312.1 103.9 304.1 113.8 304.1C118.6 304.1 123.1 306 126.5 309.4L212.6 395.5C218.8 401.7 229 401.7 235.2 395.5C241.4 389.3 241.4 379.1 235.2 372.9L149.1 286.8L125.1 262.8C121.7 259.4 119.8 254.9 119.8 250.1C119.8 240.2 127.8 232.2 137.7 232.2C142.5 232.2 147 234.1 150.4 237.5L182.4 269.5L260.5 347.6C266.7 353.8 276.9 353.8 283.1 347.6C289.3 341.4 289.3 331.2 283.1 325L205 246.9C201.6 243.5 199.8 239 199.8 234.2C199.8 224.3 207.8 216.3 217.7 216.3zM95.1 275.7C76.9 283.1 64 301 64 321.9C64 335.2 69.3 347.9 78.6 357.3L93.6 372.3C76.2 380.1 64 397.6 64 417.9C64 431.2 69.3 443.9 78.6 453.3L100.6 475.3L116.6 491.3L150.2 524.9C183 557.6 227.4 576 273.6 576C369.9 576 448 497.9 448 401.6L448 272C448 245.5 426.5 224 400 224C373.5 224 352 245.5 352 272L352 297.4L253.3 198.7C243.9 189.3 231.2 184.1 218 184.1C197.6 184.1 180.1 196.3 172.3 213.8C163 205 150.8 200.1 138 200.1C110.4 200.1 88.1 222.5 88.1 250C88.1 259.1 90.6 268 95.2 275.7zM424.8 542.1C413.1 554.7 399.8 565.8 385.3 575.2C390.7 575.7 396.2 576 401.7 576C498 576 576.1 497.9 576.1 401.6L576 272C576 245.5 554.5 224 528 224C501.5 224 480 245.5 480 272L480 342.6L484.7 347.3C487.6 350.2 491.6 352 496 352C504.8 352 512 344.8 512 336L512 272C512 263.2 519.2 256 528 256C536.8 256 544 263.2 544 272L544 401.6C544 472.3 492.4 531 424.8 542.1z'/%3E%3C/svg%3E");
  --icon-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 138 25'%3E%3Crect x='1.123' y='4.739' width='19.579' height='4.375'/%3E%3Crect x='1.123' y='13.101' width='19.579' height='4.375'/%3E%3Cpath d='M11.801.537l2.658 24.157h-4.435L7.367.537h4.434Z'/%3E%3Crect x='25.361' y='9.115' width='4.375' height='6.173'/%3E%3Crect x='30.539' y='9.115' width='4.375' height='6.173'/%3E%3Cpath d='M40.938 9.072l.047 15.579-15.558.043-.066-4.375 11.159-.043-.022-11.271 4.44.067Z'/%3E%3Crect x='47.39' y='.537' width='4.375' height='24.157'/%3E%3Cpath d='M62.931 11.988l-.022 4.552-13.332-3.298.022-4.551 13.332 3.298Z'/%3E%3Cpath d='M87.12.593l.25 23.993-18.395.107-.164-23.993 18.309-.107Zm-4.288 4.375l-9.646.107.164 15.243 9.645-.107-.164-15.243Z'/%3E%3Cpath d='M110.336.336l-.065 5.169-17.646 10.741.003-5.255L110.336.336Z'/%3E%3Crect x='100.36' y='7.798' width='4.375' height='16.896'/%3E%3Crect x='125.841' width='4.375' height='6.272'/%3E%3Crect x='132.001' width='4.375' height='6.272'/%3E%3Crect x='117.075' y='.537' width='4.375' height='24.157'/%3E%3Cpath d='M132.616 11.988l-.021 4.552-13.332-3.298.021-4.551 13.332 3.298Z'/%3E%3C/svg%3E");
}

/* Mobile font sizes (−2px each) */
@media (max-width: 599px) {
  :root {
    --fs-xs: 10px;
    --fs-s: 12px;
    --fs-base: 14px;
    --fs-m: 18px;
    --fs-l: 22px;
    --fs-xl: 26px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;
    --fs-4xl: 40px;
    --page-pad: 16px;
    --header-h: 48px;
  }
}

/* --- Dark Mode --- */
:root[data-theme="dark"] {
  --c-text: #d0d0d0;
  --c-text-sub: #999999;
  --c-text-muted: #666666;
  --c-bg: #161616;
  --c-bg-alt: #1e1e1e;
  --c-bg-inset: #282828;
  --c-border: #363636;
  --c-accent: #d0d0d0;
  --c-accent-fg: #161616;
  --c-surface: #1e1e1e;
  --c-overlay: rgba(255, 255, 255, 0.06);
}

/* --- View Transitions (SPA) --- */
/*
 * ::view-transition-* 疑似要素は DOM 外に存在するため
 * CSS カスタムプロパティを継承できない。値を直接記述する。
 */

/* Persistent elements – skip transition */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
}

/* Content crossfade */
::view-transition-old(page-content) {
  animation: vt-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(page-content) {
  animation: vt-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* モバイル: 軽量アニメーション（translateY を省略し opacity のみ） */
@media (max-width: 599px) {
  ::view-transition-old(page-content) {
    animation: vt-out-light 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  ::view-transition-new(page-content) {
    animation: vt-in-light 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

@keyframes vt-out-light {
  to {
    opacity: 0;
  }
}

@keyframes vt-in-light {
  from {
    opacity: 0;
  }
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page-content),
  ::view-transition-new(page-content) {
    animation: none;
  }
}

#page-content {
  view-transition-name: page-content;
  padding-top: var(--s-2);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- Custom Scrollbar (overlay, native scroll) --- */

/* ネイティブスクロールバーを非表示 */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* ページ用オーバーレイトラック */
.custom-sb {
  position: fixed;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 16px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.custom-sb.active {
  opacity: 1;
  pointer-events: auto;
}

/* サム */
.custom-sb-thumb {
  width: 6px;
  margin: 0 auto;
  min-height: 32px;
  background: color-mix(in srgb, var(--c-text) 20%, transparent);
  border-radius: 3px;
  transition:
    background var(--dur) var(--ease),
    width var(--dur) var(--ease);
  cursor: grab;
  will-change: transform;
}

/* ドラッグ中はサムの transition を無効化して即座に追従 */
.custom-sb-thumb.dragging {
  transition: none;
}

.custom-sb.active .custom-sb-thumb:hover,
.custom-sb-thumb.dragging {
  width: 8px;
  background: color-mix(in srgb, var(--c-text) 40%, transparent);
}

/* 内側スクロールバー（コメント欄等） */
.custom-sb-inner {
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 10px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.custom-sb-inner.active {
  opacity: 1;
  pointer-events: auto;
}

.custom-sb-inner .custom-sb-thumb {
  width: 4px;
  margin: 0 3px;
}

.custom-sb-inner.active .custom-sb-thumb:hover,
.custom-sb-inner .custom-sb-thumb.dragging {
  width: 6px;
  margin: 0 2px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    Meiryo,
    sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  line-height: 1.6;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  padding: 0 var(--page-pad);
  padding-bottom: var(--safe-b);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Main content grows to push footer down */
main {
  flex: 1;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --- Card Grid (Index / Archive 共通) --- */
.posts,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--s-3);
}

@media (max-width: 599px) {
  .posts,
  .archive-grid {
    gap: var(--s-2);
  }
}

.post-card img,
.archive-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-m);
  transition: opacity var(--dur) var(--ease);
}

.post-card a:hover img,
.archive-card a:hover img {
  opacity: 0.8;
}

.post-card p,
.archive-card .archive-card-title {
  margin-top: var(--s-1);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
}

.post-card p a,
.archive-card .archive-card-title a {
  transition: opacity var(--dur) var(--ease);
}

.post-card p a:hover,
.archive-card .archive-card-title a:hover {
  opacity: 0.6;
}

.post-card-date,
.archive-card-date {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* --- Typography --- */
h1 {
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1.1;
}
h2 {
  font-weight: 700;
  font-size: var(--fs-l);
  line-height: 1.2;
}
h3 {
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.3;
}
p {
  line-height: 1.8;
}
a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: var(--r-m);
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 0 var(--page-pad);
  margin: 0 calc(var(--page-pad) * -1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  view-transition-name: site-header;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* Circle button */
.btn-circle {
  background: none;
  border: none;
  border-radius: var(--r-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn-circle:hover {
  background: var(--c-overlay);
}

/* Icon element via CSS mask */
.icon {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.icon-sun {
  -webkit-mask-image: var(--icon-sun);
  mask-image: var(--icon-sun);
}

.icon-moon {
  -webkit-mask-image: var(--icon-moon);
  mask-image: var(--icon-moon);
}

.icon-search {
  -webkit-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}

.icon-comment {
  -webkit-mask-image: var(--icon-comment);
  mask-image: var(--icon-comment);
}

.icon-download {
  -webkit-mask-image: var(--icon-download);
  mask-image: var(--icon-download);
}

.icon-angle-down {
  -webkit-mask-image: var(--icon-angle-down);
  mask-image: var(--icon-angle-down);
}

.icon-clap {
  -webkit-mask-image: var(--icon-clap);
  mask-image: var(--icon-clap);
}

.icon-logo {
  -webkit-mask-image: var(--icon-logo);
  mask-image: var(--icon-logo);
  width: auto;
  height: 16px;
  aspect-ratio: 138 / 25;
}

/* Theme icon swap */
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* --- Hero --- */
.page-hero {
  position: relative;
  z-index: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-alt);
  padding: var(--s-3);
  margin-bottom: var(--s-5);
  border-radius: var(--r-l);
}

@media (max-width: 599px) {
  .page-hero {
    min-height: 240px;
  }
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  border-radius: inherit;
}

.page-hero .hero-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: #ffffff;
}

.hero-content h1 {
  font-size: var(--fs-3xl);
  color: #ffffff;
  line-height: 1;
}

/* Archive hero dropdown */
.hero-title-wrap {
  position: relative;
}

.hero-title-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-3xl);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.hero-title-btn .hero-arrow {
  transition: transform var(--dur) var(--ease);
  display: inline-block;
  width: 32px;
  height: 32px;
}

.hero-title-btn[aria-expanded="true"] .hero-arrow {
  transform: rotate(180deg);
}

/* Category dropdown */
.category-dropdown {
  display: none;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-2);
  padding: var(--s-1);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--r-m);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 100;
  min-width: 200px;
  border: 1px solid var(--c-border);
}

.category-dropdown.open {
  display: flex;
}

.category-dropdown a {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-s);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: background var(--dur) var(--ease);
}

.category-dropdown a:hover,
.category-dropdown a.active {
  background: var(--c-bg-alt);
}

/* --- Tags --- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-2);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--fs-s);
  color: var(--c-text-sub);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.tag:hover,
.tag.active {
  background: var(--c-accent);
  color: var(--c-accent-fg);
  border-color: var(--c-accent);
}

/* --- Footer --- */
footer {
  margin-top: auto;
  padding: var(--s-8) 0 var(--s-4);
  view-transition-name: site-footer;
}

footer > h2 {
  font-size: var(--fs-4xl);
  line-height: 1;
  margin-bottom: var(--s-2);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.footer-links {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-s);
}

.footer-links a {
  color: var(--c-text-sub);
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover {
  color: var(--c-text);
}

.footer-brand {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  padding: 4px 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-s);
  line-height: 1;
}

/* --- 404 Error Page --- */
.error-page {
  text-align: center;
  padding-top: var(--s-10);
}

.error-page h1 {
  font-size: 4rem;
  margin-bottom: var(--s-2);
}

.error-page p {
  font-size: var(--fs-l);
  color: var(--c-text-muted);
  margin-bottom: var(--s-5);
}

.error-page a {
  color: var(--c-accent);
  font-weight: 700;
}