@charset "UTF-8";

/* ==========================================================================
   ANANDA PROJECT — Theme Stylesheet
   Next.js 版（CSS Modules）からの移植。構成は移植元と同じ順序を保つ:
     1. Fonts  2. Design Tokens  3. Reset/Base  4. Utilities  5. FOUC Gate
     6. Header  7. Hero  8. Services  9. Works  10. Approach  11. About
     12. Contact  13. Footer
   デザイントークンはすべて :root で一元管理する。マジックナンバー禁止。
   ========================================================================== */

/* ==========================================================================
   1. Fonts — すべてセルフホスト（外部リクエストゼロ）
   ========================================================================== */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* 英数字・記号のみ。和文は Noto Sans JP へフォールバックさせる */
  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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-subset.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Design Tokens
   ========================================================================== */

:root {
  /* Color */
  --color-bg: #0a0a0a;
  --color-surface: #121212;
  --color-text: #f5f5f0;
  --color-text-secondary: #b9b9b3;
  --color-text-dim: #8a8a85;
  --color-accent: #5b8def;
  --color-accent-glow: rgba(91, 141, 239, 0.35);
  --color-accent-line: rgba(91, 141, 239, 0.35);
  --color-accent-tint: rgba(91, 141, 239, 0.08);
  --color-line-strong: rgba(245, 245, 240, 0.28);
  --color-line: rgba(245, 245, 240, 0.12);
  --color-line-faint: rgba(245, 245, 240, 0.05);
  /* 生成的サムネイル等で使う、背景よりわずかに持ち上げた面 */
  --color-panel-hi: #16181d;
  --color-panel-lo: #0c0d10;

  /* Typography — font family
     Next.js の next/font が生成していた変数を、テーマでは実名で定義する */
  --font-display: "Clash Display";
  --font-inter: "Inter";
  --font-noto: "Noto Sans JP";
  --font-display-stack: var(--font-display), var(--font-inter), sans-serif;
  --font-body-stack: var(--font-inter), var(--font-noto), sans-serif;
  --font-ja-stack: var(--font-noto), var(--font-inter), sans-serif;

  /* Typography — fluid type scale */
  --text-display: clamp(3rem, 11vw, 10rem);
  --text-h1: clamp(1.875rem, 6.5vw, 5.5rem);
  --text-h2: clamp(1.75rem, 4vw, 3.25rem);
  --text-h3: clamp(1.125rem, 1.6vw, 1.5rem);
  --text-body: clamp(1rem, 1.1vw, 1.125rem);
  --text-caption: 0.8125rem;

  /* Typography — display 書体の統一スケール（英字見出し用） */
  --text-display-xl: clamp(2.25rem, 9.4vw, 11.5rem);
  --text-display-lg: clamp(3rem, 7.5vw, 7rem);
  --text-display-md: clamp(2.25rem, 8vw, 4rem);
  --leading-display: 0.95;
  --tracking-display: -0.02em;

  /* Typography — 和文ディスプレイのマイクロタイポグラフィ */
  --font-feature-ja-display: "palt" 1;
  --tracking-ja-display: 0.03em;

  /* Spacing */
  --space-section: clamp(8rem, 18vh, 15rem);
  --space-block: clamp(3rem, 6vw, 6rem);
  --grid-margin: clamp(1.25rem, 4vw, 5rem);
  --grid-gap: clamp(1rem, 1.5vw, 1.5rem);
  --grid-cols-2: 1fr 1.1fr;
  --header-height: 4.5rem;

  /* Cursor */
  --cursor-size: 0.5rem;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.8s;

  /* Layer */
  --z-header: 100;
  --z-cursor: 200;
}

/* ==========================================================================
   3. Reset / Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body-stack);
  font-size: var(--text-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

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

/* hidden 属性はブラウザ標準では display:none だが、クラス側の display 指定
   （.ct-form の flex 等）に負ける。属性が付いている間は必ず隠す。 */
[hidden] {
  display: none !important;
}

/* WordPress 管理バー表示時に固定ヘッダーが隠れないようにする */
body.admin-bar .hdr {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .hdr {
    top: 46px;
  }
}

/* ==========================================================================
   4. Shared utilities
   ========================================================================== */

.container {
  padding-inline: var(--grid-margin);
}

.section {
  padding-block: var(--space-section);
}

/* 英字キャプション "01 — SERVICES" 等 */
.caption {
  font-family: var(--font-body-stack);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 番号・インデックス類の桁揃え */
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dim);
}

.caption-accent {
  color: var(--color-accent);
}

/* セクション見出し行（罫線 + キャプション）。章の罫は行の罫より強く */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line-strong);
  margin-bottom: var(--space-block);
}

/* テキストのマスクリベール用ラッパー */
.line-mask {
  display: block;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: calc(var(--z-header) + 1);
  padding: 0.75rem 1.25rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-caption);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   5. FOUC 対策
   `html.motion` は header.php のインラインスクリプトが「reduced-motion でない時
   だけ」描画前に付与する。これによりリベール対象を JS 起動前から隠し、
   「一瞬全表示 → 隠れる → アニメ」のチラつきを防ぐ。
   reduced-motion 時は motion クラスが付かないので、すべて常時可視で静的に成立する。
   ========================================================================== */

html.motion [data-reveal],
html.motion [data-reveal-group] > * {
  opacity: 0;
}

html.motion [data-hero-wordmark] {
  visibility: hidden;
}

/* Lenis 推奨スタイル */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
  padding-inline: var(--grid-margin);
  padding-top: env(safe-area-inset-top, 0);
  mix-blend-mode: difference;
  transition: transform 0.5s var(--ease-out-expo);
}

.hdr--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .hdr {
    transition: none;
  }
}

.hdr-logo {
  font-family: var(--font-display-stack);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hdr-logo-mark {
  font-size: 0.625em;
  vertical-align: super;
  margin-left: 0.25em;
}

.hdr-nav-list {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* mix-blend-mode: difference 下では accent の色相が背景次第で転ぶため、
   ヘッダーの階調は currentColor 系（dim ↔ text）のみで組む */
.hdr-nav-link {
  position: relative;
  display: inline-block;
  /* タップターゲット確保 */
  padding-block: 0.75rem;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.hdr-nav-link:hover,
.hdr-nav-link[aria-current="true"] {
  color: var(--color-text);
}

/* 現在地の下線（左から入り、離脱時は右へ抜ける） */
.hdr-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-expo);
}

.hdr-nav-link[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* デュアルテキスト・ロールオーバー */
.hdr-roll {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
}

.hdr-roll-line {
  transition: transform 0.4s var(--ease-out-expo);
}

@media (hover: hover) {
  .hdr-nav-link:hover .hdr-roll-line {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr-nav-link,
  .hdr-nav-link::after,
  .hdr-roll-line {
    transition: none;
  }

  .hdr-nav-link:hover .hdr-roll-line {
    transform: none;
  }
}

/* --- ハンバーガー（モバイルのみ） --- */

.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.hdr-burger-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.4s var(--ease-out-expo);
}

.hdr-burger--open .hdr-burger-line:first-of-type {
  transform: translateY(0.3rem) rotate(45deg);
}

.hdr-burger--open .hdr-burger-line:last-of-type {
  transform: translateY(-0.3rem) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hdr-burger-line {
    transition: none;
  }
}

/* --- フルスクリーンメニュー（CSS 駆動） --- */

.hdr-overlay {
  position: fixed;
  inset: 0;
  /* ヘッダーより前面に出してフォーカス順と視覚順を一致させる */
  z-index: calc(var(--z-header) + 10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--grid-margin);
  padding-block: calc(var(--header-height) + env(safe-area-inset-top, 0))
    calc(2rem + env(safe-area-inset-bottom, 0));
  background: var(--color-bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 0.6s var(--ease-in-out-quart),
    visibility 0s linear 0.6s;
}

.hdr-overlay--open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition:
    clip-path 0.6s var(--ease-in-out-quart),
    visibility 0s;
}

.hdr-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hdr-overlay-list li {
  overflow: hidden;
}

.hdr-overlay-link {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display-stack);
  font-size: var(--text-display-md);
  font-weight: 600;
  line-height: var(--leading-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  /* 閉じ状態は下に隠し、開いたらスタガーで上がってくる */
  transform: translateY(110%);
  transition:
    transform 0.6s var(--ease-out-expo),
    opacity var(--duration-fast) var(--ease-out-expo);
  transition-delay: 0s;
}

.hdr-overlay--open .hdr-overlay-link {
  transform: translateY(0);
  transition-delay: calc(0.18s + var(--i) * 0.06s), 0s;
}

.hdr-overlay-index {
  color: var(--color-accent);
}

/* フォーカスライト: ホバー中の項目だけを残して他を沈める */
@media (hover: hover) {
  .hdr-overlay-list:hover .hdr-overlay-link {
    opacity: 0.35;
  }

  .hdr-overlay-list .hdr-overlay-link:hover {
    opacity: 1;
  }
}

.hdr-overlay-footer {
  position: absolute;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  left: var(--grid-margin);
  opacity: 0;
  transition: opacity 0.4s ease 0.5s;
}

.hdr-overlay--open .hdr-overlay-footer {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hdr-overlay {
    transition:
      visibility 0s,
      clip-path 0s;
  }
  .hdr-overlay-link {
    transform: none;
    transition: none;
  }
  .hdr-overlay--open .hdr-overlay-link {
    transition-delay: 0s;
  }
  .hdr-overlay-footer {
    transition: none;
  }
}

@media (max-width: 820px) {
  .hdr-nav-list {
    display: none;
  }

  .hdr-burger {
    display: flex;
  }
}

/* ==========================================================================
   6.5 カスタムカーソル
   要素は JS が生成して body 直下に挿す（粗いポインタ / reduced-motion では作らない）。
   ========================================================================== */

.cursor {
  position: fixed;
  top: calc(var(--cursor-size) / -2);
  left: calc(var(--cursor-size) / -2);
  z-index: var(--z-cursor);
  width: var(--cursor-size);
  height: var(--cursor-size);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}

.cursor-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  will-change: transform;
}

/* difference 合成下では黒ラベル=下地の素通し。白い大円の上で最も読める */
.cursor-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body-stack);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 1.5rem);
  padding-inline: var(--grid-margin);
}

/* WebGL 背景。reduced-motion / 読み込み前は静的グラデーションで成立させる */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(
      55% 65% at 70% 30%,
      rgba(91, 141, 239, 0.1),
      transparent 70%
    ),
    radial-gradient(
      50% 60% at 25% 75%,
      rgba(91, 141, 239, 0.05),
      transparent 70%
    ),
    var(--color-bg);
}

.hero-scene {
  position: absolute;
  inset: 0;
}

/* 紙面のカラム構造を可視化する垂直ヘアライン（25/50/75% の3本）。
   hero-canvas より後の DOM なので WebGL・スクリムの上、テキストの下に載る */
.hero-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  /* 25/50/75% の内側 3 本のみ（0%・100% の端に線を出さない） */
  background-image: linear-gradient(
    to right,
    transparent calc(25% - 1px),
    var(--color-line) calc(25% - 1px),
    var(--color-line) 25%,
    transparent 25%,
    transparent calc(50% - 1px),
    var(--color-line) calc(50% - 1px),
    var(--color-line) 50%,
    transparent 50%,
    transparent calc(75% - 1px),
    var(--color-line) calc(75% - 1px),
    var(--color-line) 75%,
    transparent 75%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* テキストのコントラスト確保用フェード。
   上部メタ・下部キャプションのゾーンを薄く暗くし、中央の発光は活かす */
.hero-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.55) 0%,
    transparent 24%,
    transparent 54%,
    rgba(10, 10, 10, 0.85) 100%
  );
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.hero-statement-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-block);
}

.hero-statement {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h1);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
  line-break: strict;
  /* Chromium 系のみのプログレッシブ強化（行頭の始め括弧・約物の空き取り） */
  text-spacing-trim: trim-start;
}

.hero-statement-line {
  display: block;
}

.hero-subcopy {
  margin-top: 2.5rem;
  /* WebGL の発光上でも AA を満たすよう本文より明るめに */
  color: var(--color-text-secondary);
  max-width: 40em;
}

/* --------------------------------------------------------------------------
   Hero イントロは CSS で即時実行する（JS 完了を待たない）。
   → LCP を遅らせず、FOUC も出さない。reduced-motion では無効化し静的成立。
   ワードマークのみ SplitText（JS）で文字リベールする。
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-statement-line {
    animation: heroLineUp 1.1s var(--ease-out-expo) both;
  }
  .hero-statement .line-mask:nth-child(1) .hero-statement-line {
    animation-delay: 0.15s;
  }
  .hero-statement .line-mask:nth-child(2) .hero-statement-line {
    animation-delay: 0.29s;
  }

  .hero [data-hero-fade] {
    animation: heroFadeUp 0.9s var(--ease-out-expo) both;
    animation-delay: 0.9s;
  }
}

@keyframes heroLineUp {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-wordmark {
  font-family: var(--font-display-stack);
  font-size: var(--text-display-xl);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.hero-bottom-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-line);
  margin-top: clamp(1.5rem, 3vh, 3rem);
}

@media (max-width: 600px) {
  .hero-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   8. Services
   ========================================================================== */

.svc-row {
  display: grid;
  grid-template-columns: var(--grid-cols-2);
  gap: var(--space-block);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--color-line);
}

.svc-row-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.svc-title {
  font-family: var(--font-display-stack);
  font-size: var(--text-display-lg);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.svc-desc {
  color: var(--color-text-dim);
  max-width: 36em;
}

/* 番号付き罫線インデックスリスト（ピルタグは汎用UIキットの語彙なので廃止） */
.svc-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 0;
  margin-top: 2rem;
}

.svc-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.svc-item-index {
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

/* 静かな行ホバー: 見出しの微インデント + 番号の順次点灯 */
@media (hover: hover) {
  .svc-row:hover .svc-title {
    transform: translateX(0.35ch);
  }

  .svc-row:hover .svc-item-index {
    color: var(--color-text);
    transition-delay: calc(var(--i) * 40ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-title,
  .svc-item-index {
    transition: none;
  }
}

/* --- AI: 横断レイヤーとして別格に見せる --- */

.svc-row--ai {
  position: relative;
  border-top-color: var(--color-accent);
  background: radial-gradient(
    60% 120% at 15% 0%,
    var(--color-accent-tint),
    transparent 70%
  );
}

.svc-title--ai {
  color: var(--color-accent);
  text-shadow: 0 0 60px var(--color-accent-glow);
}

.svc-ai-badge {
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

@media (max-width: 820px) {
  .svc-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .svc-items {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   9. Works
   ========================================================================== */

.wk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  row-gap: clamp(4rem, 8vw, 7rem);
}

/* 非対称グリッド: 大小を交互に置いてリズムを作る */
.wk-item--lg {
  grid-column: span 7;
}

.wk-item--sm {
  grid-column: span 5;
  align-self: end;
}

.wk-item--md {
  grid-column: span 6;
}

.wk-item--sm:nth-child(2) {
  margin-top: clamp(3rem, 8vw, 7rem);
}

.wk-item--md:last-child {
  margin-top: clamp(3rem, 8vw, 7rem);
}

.wk-link {
  display: block;
}

.wk-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out-expo);
}

.wk-item--sm .wk-thumb {
  aspect-ratio: 3 / 4;
}

.wk-item--md .wk-thumb {
  aspect-ratio: 16 / 10;
}

/* 構造線(カラムグリッド)+カード毎に位置が変わる単一のアクセント光。
   画像リクエストゼロの生成的プレースホルダ */
.wk-thumb-inner {
  position: absolute;
  inset: 0;
  transition: transform var(--duration-base) var(--ease-out-expo);
  background:
    repeating-linear-gradient(
      90deg,
      var(--color-line-faint) 0 1px,
      transparent 1px calc(100% / 6)
    ),
    repeating-linear-gradient(
      0deg,
      var(--color-line-faint) 0 1px,
      transparent 1px calc(100% / 5)
    ),
    radial-gradient(
      70% 90% at calc(15% + var(--i) * 14%) calc(10% + var(--i) * 12%),
      var(--color-accent-tint),
      transparent 65%
    ),
    linear-gradient(135deg, var(--color-panel-hi) 0%, var(--color-panel-lo) 65%);
}

/* アイキャッチ画像が登録されている場合は生成的背景の上に載せる */
.wk-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.wk-thumb-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* ゴースト数字はカード縁での裁ち落とし。左上のカテゴリと対角の緊張を作る */
.wk-thumb-num {
  position: absolute;
  right: -0.06em;
  bottom: -0.14em;
  line-height: 0.8;
  font-family: var(--font-display-stack);
  font-size: clamp(7rem, 14vw, 15rem);
  font-weight: 600;
  color: rgba(245, 245, 240, 0.07);
  user-select: none;
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    color var(--duration-base) var(--ease-out-expo),
    text-shadow var(--duration-base) var(--ease-out-expo);
}

/* ホバー: 外枠は固定のまま内側だけ沈み、数字はアクセント系の残像のみ */
@media (hover: hover) {
  .wk-link:hover .wk-thumb {
    border-color: var(--color-accent-line);
  }

  .wk-link:hover .wk-thumb-inner,
  .wk-link:hover .wk-thumb-img {
    transform: scale(1.04);
  }

  .wk-link:hover .wk-thumb-num {
    color: rgba(245, 245, 240, 0.16);
    text-shadow:
      -0.4rem 0 var(--color-accent-glow),
      0.4rem 0 var(--color-line);
    transform: skewX(-8deg) scale(1.05);
  }

  .wk-link:hover .wk-title {
    color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wk-thumb,
  .wk-thumb-inner,
  .wk-thumb-img,
  .wk-thumb-num,
  .wk-title {
    transition: none;
  }
}

.wk-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1rem;
}

.wk-title {
  font-family: var(--font-display-stack);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

@media (max-width: 820px) {
  .wk-item--lg,
  .wk-item--sm,
  .wk-item--md {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .wk-item--sm .wk-thumb {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   10. Approach
   ========================================================================== */

.apr-intro {
  display: grid;
  grid-template-columns: var(--grid-cols-2);
  gap: var(--space-block);
  margin-bottom: var(--space-block);
}

.apr-intro-statement {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h2);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
  line-break: strict;
  text-spacing-trim: trim-start;
}

.apr-intro-body {
  color: var(--color-text-dim);
  max-width: 36em;
}

.apr-steps {
  counter-reset: step;
}

/* --- 横スクロールモード（JS が [data-hscroll-active] を付与。
       デフォルトは縦積みで成立） --- */

.apr-pin[data-hscroll-active] {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ピン留め区間の進捗ヘアライン。スクロールに完全従属し、縦積み時は非表示 */
.apr-progress {
  display: none;
}

.apr-pin[data-hscroll-active] .apr-progress {
  display: block;
  position: absolute;
  left: var(--grid-margin);
  right: var(--grid-margin);
  bottom: clamp(2rem, 5vh, 3rem);
  height: 1px;
  background: var(--color-line);
}

.apr-progress-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.apr-pin[data-hscroll-active] .apr-steps {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  padding-right: var(--grid-margin);
}

.apr-pin[data-hscroll-active] .apr-step {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 2rem;
  width: clamp(420px, 40vw, 600px);
  height: min(60vh, 30rem);
  flex-shrink: 0;
  border-top: 0;
  border-left: 1px solid var(--color-line);
  padding: clamp(2rem, 3vw, 3rem);
}

.apr-pin[data-hscroll-active] .apr-step-desc {
  grid-column: 1;
  align-self: end;
}

.apr-step {
  display: grid;
  grid-template-columns: 4rem 1fr 1.5fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-line);
}

.apr-step-num {
  color: var(--color-accent);
}

.apr-step-title {
  font-family: var(--font-display-stack);
  font-size: var(--text-display-md);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: 0.75rem;
}

.apr-step-desc {
  color: var(--color-text-dim);
  max-width: 36em;
}

.apr-ai-note {
  margin-top: var(--space-block);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--color-accent-line);
  background: radial-gradient(
    70% 140% at 50% 0%,
    var(--color-accent-tint),
    transparent 70%
  );
}

.apr-ai-note-body {
  margin-top: 1rem;
  max-width: 44em;
}

@media (max-width: 820px) {
  .apr-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .apr-step {
    grid-template-columns: 3rem 1fr;
  }

  .apr-step-desc {
    grid-column: 2;
  }
}

/* ==========================================================================
   11. About
   ========================================================================== */

.abt-layout {
  display: grid;
  grid-template-columns: var(--grid-cols-2);
  gap: var(--space-block);
}

.abt-origin {
  margin-bottom: 1.5rem;
}

.abt-statement {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h2);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
  line-break: strict;
  /* 行頭の始め括弧の空きは text-spacing-trim で詰める（Chromium系）。
     hanging-punctuation / 負の text-indent は SplitText の行マスクと干渉して
     先頭文字がクリップされるため使わない */
  text-spacing-trim: trim-start;
}

.abt-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--color-text-dim);
  max-width: 40em;
}

.abt-profile {
  margin-top: var(--space-block);
}

.abt-profile-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-line);
}

/* 表を開放したまま終わらせない（最終行の下罫で閉じる） */
.abt-profile-row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.abt-profile-value {
  color: var(--color-text);
}

@media (max-width: 820px) {
  .abt-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ==========================================================================
   12. Contact
   ========================================================================== */

.ct {
  padding-bottom: 0;
}

/* 左: ステートメント＋直メール / 右: フォーム */
.ct-layout {
  display: grid;
  grid-template-columns: var(--grid-cols-2);
  gap: var(--space-block);
  align-items: start;
  padding-bottom: var(--space-block);
}

.ct-intro {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* フォーム⇄完了パネルを内包する安定ラッパー（リベールはこれに付く）。
   min-width:0 で grid 子要素の内容によるはみ出しを防ぐ */
.ct-form-col {
  min-width: 0;
}

.ct-display {
  font-family: var(--font-display-stack);
  font-size: var(--text-display-lg);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.ct-lead {
  color: var(--color-text-dim);
}

/* クリック=コピー。コピー時はラベルが入れ替わる（幅は実文字列のまま=揺れなし） */
.ct-email {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-display-stack);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.25rem;
  transition:
    color var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo);
}

.ct-email:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.ct-email-text {
  display: inline-block;
  transition:
    opacity var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}

.ct-copied-label {
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  opacity: 0;
  transform: translateY(0.35em);
  color: var(--color-accent);
  transition:
    opacity var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}

.ct-email--copied .ct-email-text {
  opacity: 0;
  transform: translateY(-0.35em);
}

.ct-email--copied .ct-copied-label {
  opacity: 1;
  transform: translateY(0);
}

/* --- フォーム --- */

.ct-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ct-label {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-family: var(--font-body-stack);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.ct-label-index {
  /* 色は .ct-label（dim）から継承。数字だけ等幅に */
  font-variant-numeric: tabular-nums;
}

.ct-input-wrap {
  position: relative;
}

/* フォーカスの所在は左起点のアクセントライン1本で示す */
.ct-input-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
  pointer-events: none;
}

.ct-input-wrap:focus-within::after {
  transform: scaleX(1);
}

.ct-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0.625rem 0;
  color: var(--color-text);
  font-family: var(--font-body-stack);
  font-size: var(--text-body);
  line-height: 1.6;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.ct-input:hover {
  border-color: var(--color-text-dim);
}

.ct-input:focus {
  outline: none;
}

.ct-input:focus-visible {
  outline: none;
}

textarea.ct-input {
  resize: vertical;
  min-height: 6rem;
}

.ct-error {
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* スクリーンリーダー/視覚の両方から外すハニーポット */
.ct-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ct-submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* 罫線の直交幾何に従う矩形CTA（ピル全廃後の例外を残さない） */
.ct-submit {
  --pad: clamp(0.875rem, 1.5vw, 1.125rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad) clamp(2rem, 4vw, 3rem);
  background: transparent;
  border: 1px solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body-stack);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out-expo),
    color var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo);
}

.ct-submit:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.ct-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.ct-form-status {
  flex: 1;
  min-width: 12rem;
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* --- 送信完了 --- */

.ct-thanks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: center;
}

.ct-thanks-title {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h2);
  font-weight: 900;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
}

.ct-thanks-body {
  color: var(--color-text-dim);
}

.ct-reset-btn {
  margin-top: 0.5rem;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--color-text);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--color-line);
  transition:
    color var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo);
}

.ct-reset-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .ct-email,
  .ct-email-text,
  .ct-copied-label,
  .ct-input,
  .ct-input-wrap::after,
  .ct-submit,
  .ct-reset-btn {
    transition: none;
  }
}

@media (max-width: 820px) {
  .ct-layout {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 10vw, 4rem);
  }
}

/* ==========================================================================
   13. Footer（コロフォン: 静的な奥付）
   ========================================================================== */

.ft {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 3rem;
  align-items: start;
  padding-block: var(--space-block) 2rem;
  border-top: 1px solid var(--color-line-strong);
  margin-top: var(--space-section);
}

.ft-brand {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ft-logo {
  font-family: var(--font-display-stack);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ft-logo-mark {
  font-size: 0.625em;
  vertical-align: super;
  margin-left: 0.25em;
}

.ft-nav {
  grid-column: 7 / 10;
}

.ft-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ft-meta {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ft-link {
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.ft-link:hover {
  color: var(--color-text);
}

.ft-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

@media (prefers-reduced-motion: reduce) {
  .ft-link {
    transition: none;
  }
}

@media (max-width: 820px) {
  .ft {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .ft-brand,
  .ft-nav,
  .ft-meta,
  .ft-bottom {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   14. 下層ページ（実績アーカイブ / 実績詳細 / 記事一覧 / 記事詳細 / 固定 / 404）

   トップと同じ語彙だけで組む: 罫線・大型ディスプレイ書体・広い余白。
   新しい装飾言語を持ち込まない。
   ========================================================================== */

/* --- 共通の見出しブロック --- */

.page-head {
  margin-bottom: var(--space-block);
}

.page-title {
  font-family: var(--font-display-stack);
  font-size: var(--text-display-lg);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* 和文の表題は Noto を主役に。英字見出しと同じ大きさだと潰れるため一段落とす */
.page-title--ja {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h2);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
  text-transform: none;
  line-break: strict;
  text-spacing-trim: trim-start;
  max-width: 24em;
}

/* 実績名は欧文が多い。一覧カード（.wk-title）と同じ Clash Display を主役にし、
   和文が来た場合だけ Noto へ落とす */
.page-title--work {
  font-family: var(--font-display), var(--font-noto), sans-serif;
  font-size: var(--text-display-md);
  text-transform: none;
  max-width: 18em;
}

.page-lead {
  margin-top: 1.5rem;
  color: var(--color-text-dim);
  max-width: 40em;
}

/* --- カテゴリー絞り込み --- */

.term-nav {
  margin-bottom: var(--space-block);
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.term-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

.term-link {
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.term-link:hover,
.term-link[aria-current="page"] {
  color: var(--color-text);
}

/* --- 記事一覧 --- */

.entry-list {
  border-bottom: 1px solid var(--color-line);
}

.entry-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--grid-gap) var(--space-block);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-line);
}

.entry-row-meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.entry-row-title {
  font-family: var(--font-ja-stack);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--tracking-ja-display);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.entry-row:hover .entry-row-title {
  color: var(--color-accent);
}

.entry-row-excerpt {
  margin-top: 0.75rem;
  color: var(--color-text-dim);
  max-width: 44em;
}

.entry-empty {
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .entry-row-title,
  .term-link {
    transition: none;
  }
}

/* --- 詳細ページ --- */

.entry-figure {
  margin-bottom: var(--space-block);
  border: 1px solid var(--color-line);
}

/* 左に事実列（カテゴリー・年など）、右に本文 */
.entry-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-block);
  align-items: start;
}

.entry-facts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  /* 長い本文の横でスクロールに追随させる */
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.entry-fact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: 1rem;
  border-top: 1px solid var(--color-line);
  width: 100%;
}

.entry-fact:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

/* --- 本文タイポグラフィ --- */

.entry-content {
  max-width: 42em;
}

/* 事実列を持たない記事は中央寄りの 1 カラムで読ませる */
.entry-content--solo {
  max-width: 42em;
}

.entry-content > * + * {
  margin-top: 1.75rem;
}

.entry-content p {
  color: var(--color-text-secondary);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-ja-stack);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: var(--tracking-ja-display);
  font-feature-settings: var(--font-feature-ja-display);
  color: var(--color-text);
}

.entry-content h2 {
  font-size: var(--text-h3);
  margin-top: var(--space-block);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line-strong);
}

.entry-content h3 {
  font-size: 1.125rem;
  margin-top: 2.5rem;
}

.entry-content h4 {
  font-size: 1rem;
  margin-top: 2rem;
  color: var(--color-text-dim);
}

.entry-content a {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent-line);
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.entry-content a:hover {
  border-color: var(--color-accent);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  color: var(--color-text-secondary);
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li + li {
  margin-top: 0.5rem;
}

.entry-content li::marker {
  color: var(--color-accent);
}

.entry-content blockquote {
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-accent-line);
  color: var(--color-text-dim);
}

.entry-content img,
.entry-content figure {
  margin-block: var(--space-block);
}

.entry-content figcaption {
  margin-top: 0.75rem;
  font-size: var(--text-caption);
  color: var(--color-text-dim);
}

.entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--color-panel-hi);
  padding: 0.125em 0.375em;
}

.entry-content pre {
  overflow-x: auto;
  padding: 1.5rem;
  background: var(--color-panel-lo);
  border: 1px solid var(--color-line);
}

.entry-content pre code {
  background: none;
  padding: 0;
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-block);
}

/* --- 前後移動・戻る --- */

.entry-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--grid-gap);
  margin-top: var(--space-section);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line-strong);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
}

.entry-nav a {
  color: var(--color-text-dim);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.entry-nav a:hover {
  color: var(--color-text);
}

.entry-nav-next {
  margin-left: auto;
  text-align: right;
}

.entry-back {
  margin-top: var(--space-block);
}

.entry-pages {
  margin-top: 2rem;
}

/* --- 「もっと見る」系リンク（矩形の下罫で示す。ボタンにしない） --- */

.ananda-more-link {
  display: inline-block;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-line-strong);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    color var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-out-expo);
}

.ananda-more-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.wk-more {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--color-line);
}

/* --- ページ送り --- */

.pagination {
  margin-top: var(--space-block);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.pagination .page-numbers {
  color: var(--color-text-dim);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.pagination a.page-numbers:hover {
  color: var(--color-text);
}

.pagination .page-numbers.current {
  color: var(--color-accent);
}

.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ananda-more-link,
  .entry-nav a,
  .pagination .page-numbers,
  .entry-content a {
    transition: none;
  }
}

@media (max-width: 820px) {
  .entry-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .entry-row-meta {
    flex-direction: row;
    gap: 1rem;
  }

  .entry-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .entry-facts {
    position: static;
  }
}