@charset "UTF-8";
/*
Theme Name: direqtory
Theme URI: https://direqtory.jp/
Author: direqtory
Description: ポートフォリオ兼 Notes / News。参照サイトの実測から数値を決めた自作テーマ。8px グリッド・duration 3段・easing 2本。
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: direqtory
*/

/* ============================================================
   1. Tokens
   Figma の変数コレクションと 1:1 で対応する。
   数値は 8px 系。1rem = 16px のまま（流体 rem にはしない）。
   ============================================================ */
:root {
  /* --- color: 面は明度3段、色は青と黄の2本だけ --- */
  --ink:      #14161A;
  --paper:    #FAFAF7;
  --surface:  #ECEDF0;   /* 青みのグレー。墨（#14161A）と色相を合わせる */
  /* 罫線。固定色にすると、紙(#FAFAF7)の上では見えて
     薄グレー面(#ECEDF0)の上では沈む。墨のアルファで持てば
     どの面の上でも「面との差」が一定になり、値も1つで済む。
     紙の上での実効値 #DEDFDC ＝ 従来の #E0DFD9 とほぼ同じ見え。
     薄グレーの上では #D2D3D6 になり、ちゃんと見える */
  --rule:     rgba(20, 22, 26, .12);
  /* 面として使うとき（サムネの下敷き）は不透明で持つ */
  --rule-solid: #E0DFD9;
  --muted:    #6A6C74;
  --blue:     #1E3FA8;   /* 操作できるもの */
  --yellow:   #F2C230;   /* 新着・注目。地色としてのみ使う */
  --white:    #FFFFFF;

  /* --- type: 3本3役 --- */
  --f-jp:      "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-display: "hwt-roman-extended-light-fac", "Bodoni Moda", serif;
  /* ラベル（日付・カテゴリー・件数・番号など）。以前はモノスペースだったが、
     和文本文と声を揃えるため Gen Interface JP に一本化した。
     プロポーショナルなので、桁を揃えたい数字には tabular-nums を当てる */
  --f-label:   "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 本物のモノスペースが要るのはコード表示だけ。
     ラベルを Gen に一本化したので Nitti は不要になった */
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- space: PC --- */
  --section:        8rem;    /* 128 */
  --section-tight:  4rem;    /* 64  */
  --margin-x:       2.5rem;  /* 40  */
  --gutter:         1.5rem;  /* 24  */
  --container:     82.5rem;  /* 1320 = 88×12 + 24×11 */
  --header-h:       5.5rem;  /* 88  */
  --radius:         0.5rem;  /* 8   */
  /* 小さい部品用。チップのように背が低いものは 8px だと丸すぎる */
  --radius-sm:      0.25rem; /* 4   */
  --columns:        12;

  /* --- motion: この3段・2本以外の値を作らない --- */
  --d-fast:    300ms;
  --d-base:    500ms;
  --d-reveal:  750ms;
  --e-standard: cubic-bezier(.22, 1, .36, 1);
  --e-reveal:   cubic-bezier(.19, 1, .22, 1);
  --enter:     1.5rem;  /* 入場の移動量 24px */
  --lift:      1px;     /* ホバーの持ち上げ */
}

@media (max-width: 63.9375rem) {   /* Tablet: 768–1023 */
  :root {
    --section: 6rem; --section-tight: 3rem;
    --margin-x: 2.5rem; --gutter: 1.5rem; --columns: 8;
  }
}
@media (max-width: 47.9375rem) {   /* SP: – 767 */
  :root {
    --section: 4rem; --section-tight: 2rem;
    --margin-x: 1.5rem; --gutter: 1rem; --columns: 4;
  }
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-jp);
  font-size: 1rem;          /* 16 */
  line-height: 2rem;        /* 32 = 8×4。28 は 8 で割れない */
  letter-spacing: .06em;    /* 和文はプラス */
  -webkit-font-smoothing: antialiased;
}

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

/* 見出しと段落のブラウザ既定マージンを落とす。
   間隔は必ず親の gap か、意図した margin で作る。
   これが無いと、カードのタイトルと年月の間に 1em 近い隙間が残る */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

a { color: var(--blue); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* 到達可能だが視覚的に隠す */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--margin-x); top: 0;
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.5rem; border-radius: var(--radius);
  z-index: 100;
  transition: transform var(--d-fast) var(--e-standard);
}
.skip-link:focus { transform: translateY(1rem); }

/* ============================================================
   3. Typography scale
   行間はすべて 8 の倍数。和文はプラス字間、欧文はマイナス。
   ============================================================ */
/* HWT Roman Extended は Lightface(300) を使う。
   キットには Fat Face(900) も入っているが使わない。
   400 を要求すると 300 を合成で太らせる可能性があるので、
   ウェイトは 300 で明示する */
.t-display {
  font-family: var(--f-display); font-weight: 300;
  font-size: 6rem; line-height: 6rem; letter-spacing: -.04em;
}
.t-h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 4rem; line-height: 4.5rem; letter-spacing: -.02em;
}
/* Bold は使わない。太さは Medium(500) まで。
   強弱はサイズ・余白・位置・色で作る */
.t-h2 { font-weight: 500; font-size: 2.5rem; line-height: 3rem;    letter-spacing: -.01em; }
.t-h3 { font-weight: 500; font-size: 1.5rem; line-height: 2rem;    letter-spacing: 0; }
.t-lead    { font-size: 1.125rem; line-height: 2rem;    letter-spacing: .04em; }
.t-body    { font-size: 1rem;     line-height: 2rem;    letter-spacing: .06em; }
.t-caption { font-size: .75rem;   line-height: 1rem;    letter-spacing: .08em; color: var(--muted); }
/* ラベルは 12px。11px まで落とすと日付が読めなくなる */
.t-label {
  font-family: var(--f-label); font-size: .75rem; line-height: 1rem;
  letter-spacing: .12em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 見出しの太さは 500 で頭打ち。h1〜h6 の既定 bold を殺す */
h1, h2, h3, h4, h5, h6, strong, b { font-weight: 500; }

/* ------------------------------------------------------------
   大文字・小文字の方針
   ディスプレイ書体で組む見出しは小文字。全大文字は圧が強く、
   HWT Roman Extended だと横幅も 1.4 倍になって収まらない
   （Hero の direction が 863px → 578px）。
   ラベル・ナビは大文字＋字間のまま残す。「機械が読む情報」の顔を
   保っておくと、小文字の見出しとの対比で画面が締まる。

   ▸ ラベル・ナビも小文字にしたい場合は、下のセレクタに
     .t-label, .header__nav a, .filter a, .list__tag, .badge,
     .form__req, .footer-meta, .work-card__cat を足す
   ------------------------------------------------------------ */
.t-display,
.t-h1,
.section-head__title,
.header__brand { text-transform: lowercase; }

@media (max-width: 63.9375rem) {
  .t-display { font-size: 4rem; line-height: 4rem; }
  .t-h1 { font-size: 3rem; line-height: 3.5rem; }
  .t-h2 { font-size: 2rem; line-height: 2.5rem; }
}
@media (max-width: 47.9375rem) {
  .t-display { font-size: 2.5rem; line-height: 2.5rem; }
  .t-h1 { font-size: 2rem; line-height: 2.5rem; }
  .t-h2 { font-size: 1.5rem; line-height: 2rem; }
  .t-h3 { font-size: 1.25rem; line-height: 2rem; }
  .t-lead { font-size: 1rem; line-height: 2rem; }
}

/* ============================================================
   4. Layout
   max-width は持たず全幅に敷く（typography.or.jp の作法）。
   コンテナは 1320px で中央に置く。
   ============================================================ */
.l-container {
  position: relative; z-index: 1;   /* グリッド罫線より前に出す */
  width: 100%;
  max-width: calc(var(--container) + var(--margin-x) * 2);
  margin-inline: auto;
  padding-inline: var(--margin-x);
}

.l-section { position: relative; padding-block: var(--section); }
.l-section--surface { background: var(--surface); }
.l-section--ink { background: var(--ink); color: var(--paper); }
.l-section--ink a { color: var(--paper); }

/* 読み幅：和文は広げすぎない */
.l-read { max-width: 42.5rem; }              /* 680 */
.l-read--offset { margin-inline-start: calc(var(--gutter) * 2 + 11rem); }
@media (max-width: 63.9375rem) { .l-read--offset { margin-inline-start: 7.5rem; } }
@media (max-width: 47.9375rem) { .l-read--offset { margin-inline-start: 0; } }

/* 12カラムの縦罫線。Hero と Profile でだけ見せる */
.l-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  padding-inline: var(--margin-x);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
}
.l-grid-lines span { border-inline-start: 1px solid var(--rule); }
.l-grid-lines span:last-child { border-inline-end: 1px solid var(--rule); }

.l-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ============================================================
   5. Header
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter);
}
.header__brand {
  font-family: var(--f-display); font-weight: 300;
  font-size: 1.5rem; line-height: 2rem; letter-spacing: 0;
  color: var(--ink);
}
.header__nav ul {
  display: flex; align-items: center; gap: 2.5rem;
  margin: 0; padding: 0; list-style: none;
}
.header__nav a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink);
  font-size: 1rem; line-height: 2rem; letter-spacing: .08em;
}
/* ラベルの下限は 12px。10px まで落とすと番号が読めない */
.header__nav .nav-num {
  font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em;
  color: var(--muted);
  opacity: .4;
  transition: opacity var(--d-fast) var(--e-standard);
}
.header__nav .current-menu-item > a { color: var(--blue); }

/* Tablet ではナビの番号を落とす。
   ブランド(159) + gutter(24) + ナビ(626) が 834 の内容幅に収まらない。
   番号は 1項目あたり 23px（数字15 + gap 8）で、5項目で 115px。
   削るのは「飾り」の側にする。ナビ自体を畳むと回遊性が落ちる。
   SP（767以下）は全画面メニューになり番号も見せたいので、下限を切る */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .header__nav .nav-num { display: none; }
}

.menu-trigger {
  display: none;
  position: relative; z-index: 70;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  color: var(--ink);
  transition: color var(--d-fast) var(--e-standard);
}
.menu-trigger__label {
  font-family: var(--f-label); font-size: .75rem;
  letter-spacing: .12em;
}

@media (max-width: 47.9375rem) {
  .menu-trigger { display: block; }
  body.nav-open .menu-trigger { color: var(--paper); }

  /* 全画面のオーバーレイ。墨の面に大きく5項目。
     ヘッダーは残したままなので、開いてもブランドと CLOSE が見える */
  .header__nav {
    position: fixed; inset: 0; z-index: 60;
    background: var(--ink);
    display: flex; align-items: center;
    padding: var(--header-h) var(--margin-x) var(--section);
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-base) var(--e-standard),
                visibility 0s linear var(--d-base);
  }
  .header__nav.is-open {
    opacity: 1; visibility: visible;
    transition: opacity var(--d-base) var(--e-standard);
  }
  .header__nav ul {
    flex-direction: column; align-items: flex-start;
    gap: 1.5rem; width: 100%;
  }
  .header__nav a {
    color: var(--paper);
    font-size: 2rem; line-height: 2.5rem; letter-spacing: .02em;
    gap: 1rem;
  }
  .header__nav .nav-num { font-size: .75rem; opacity: .5; }

  /* 項目は順に立ち上げる。stagger は 60ms の3段のうち最小値 */
  .header__nav li {
    opacity: 0; transform: translateY(var(--enter));
    transition: opacity var(--d-base) var(--e-reveal),
                transform var(--d-base) var(--e-standard);
  }
  .header__nav.is-open li { opacity: 1; transform: none; }
  .header__nav.is-open li:nth-child(1) { transition-delay: 60ms; }
  .header__nav.is-open li:nth-child(2) { transition-delay: 120ms; }
  .header__nav.is-open li:nth-child(3) { transition-delay: 180ms; }
  .header__nav.is-open li:nth-child(4) { transition-delay: 240ms; }
  .header__nav.is-open li:nth-child(5) { transition-delay: 300ms; }

  body.nav-open { overflow: hidden; }
}

/* ============================================================
   6. Hero（L1）
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 50rem;              /* 800 */
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: var(--section-tight);
}
.hero__util {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: var(--gutter);
}
.hero__main {
  position: relative; z-index: 3;   /* 文字は必ずイラストより前 */
  display: flex; gap: var(--gutter); align-items: flex-start;
}
.hero__headline { flex: 1 1 auto; max-width: 40rem; }
.hero__lead {
  max-width: 36rem;            /* 576 — 1行 36文字前後。イラストに触れない幅 */
  margin-block-start: 2.5rem;
  color: var(--muted);
}
/*
 * イラストは「高さ」を基準に置く。
 * width を基準にすると img は比率で高さが決まってしまい、
 * Hero の下端を越えて切れる（inset-block の下端指定が効かない）。
 * 高さを Hero に合わせ、幅は比率に任せることで全身が必ず収まる。
 */
/*
 * イラストは最背面。文字が前に来るので重なってよい。
 * 高さを基準に置き、幅は比率に任せる（img は幅指定だと高さが比率で決まり、
 * inset-block-end が効かず下が切れる）。
 */
/* absolute は padding box 基準なので、inset-inline-end: 0 だと
   コンテナの左右パディング（40px）の外側に着く。クレジットが
   `archive : 001` より 40px 外に出ていた。内容の右端に揃える */
.hero__illust {
  position: absolute; z-index: 1;
  inset-block-end: 0;
  inset-inline-end: var(--margin-x);
  block-size: calc(100% - 4rem);
  max-inline-size: 56%;
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
.hero__illust img {
  flex: 1 1 auto; min-block-size: 0;
  inline-size: auto; max-inline-size: 100%;
  object-fit: contain; object-position: bottom right;
}

/* --- イラストの入れ替え ---
   2枚を重ねて交互に見せる。切り替えは opacity だけ。
   位置やサイズは動かさない（動かすと絵が跳ねて見える）。

   1周 8000ms のうち、消えている時間は 500ms（= base）。
   500 / 8000 = 6.25% なので、キーフレームはその刻みで置く。
   duration の3段（300/500/750）は「1回の変化にかける時間」の規則なので、
   周期そのものはこの規則の対象外。切り替えの速さだけ 500ms に合わせる。 */
.hero__illust-stack {
  position: relative;
  flex: 1 1 auto; min-block-size: 0;
  display: flex; justify-content: flex-end; align-items: flex-end;
}
.hero__illust-stack img { max-block-size: 100%; }
.hero__illust-img--alt {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  block-size: 100%;
}
.hero__illust--swap .hero__illust-img {
  animation: direqtory-hero-swap 8000ms var(--e-standard) infinite;
}
.hero__illust--swap .hero__illust-img--alt {
  animation-name: direqtory-hero-swap-alt;
}
@keyframes direqtory-hero-swap {
  0%, 43.75%  { opacity: 1; }
  50%, 93.75% { opacity: 0; }
  100%        { opacity: 1; }
}
@keyframes direqtory-hero-swap-alt {
  0%, 43.75%  { opacity: 0; }
  50%, 93.75% { opacity: 1; }
  100%        { opacity: 0; }
}
/* 動きを止める設定では1枚目だけを静止で出す */
@media (prefers-reduced-motion: reduce) {
  .hero__illust--swap .hero__illust-img { animation: none; opacity: 1; }
  .hero__illust--swap .hero__illust-img--alt { display: none; }
}
.hero__illust figcaption { flex: 0 0 auto; }
.hero__foot {
  position: relative; z-index: 2;
  display: flex; gap: 3rem; flex-wrap: wrap; align-items: baseline;
}
/* 次セクションへの導線は「操作できるもの」だが、Hero では主張させない */
.hero__foot a { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .hero__foot a:hover { color: var(--ink); }
}

@media (max-width: 63.9375rem) {
  .hero { min-height: 40rem; }
  .hero__lead { max-width: 26rem; margin-block-start: 2rem; }
  .hero__illust { max-inline-size: 50%; }
}
@media (max-width: 47.9375rem) {
  .hero { min-height: 0; }
  .hero__lead { max-width: none; }
  .hero__illust {
    position: static; inset: auto;
    inline-size: 100%; max-inline-size: none; block-size: auto;
    margin-block-start: 2rem;
    align-items: flex-start;
  }
  .hero__illust img { inline-size: 100%; }
}

/* ============================================================
   7. Section head と、セクション内の縦リズム

   見出し → 罫線 → リード → フィルタ → 中身 の間隔をここで一括して持つ。
   個々のテンプレートに margin を書かないための土台。
   ============================================================ */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter);
  margin-block-end: 1.5rem;
}
.section-head__title { margin: 0; }

.section-head + .l-rule { margin-block-start: 1.5rem; margin-block-end: 2.5rem; }

.l-rule + .t-lead,
.l-rule + figure,
.l-rule + .article__body,
.l-rule + .work-grid,
.l-rule + .list { margin-block-start: 0; }

.t-lead + .filter,
.l-rule + .filter { margin-block-start: 2rem; }
.filter + .work-grid,
.filter + .list,
.filter + .l-rule,
.l-rule + .work-grid,
.section-head + .work-grid { margin-block-start: 2.5rem; }

/* 見出しの直後に本体が続くとき（Profile の「できること」など） */
.t-h2 + .list, .t-h2 + .tags, .t-h2 + .article__body,
.t-h3 + .list, .t-h3 + .tags { margin-block-start: 2rem; }
.list + .t-h2, .list + h2 { margin-block-start: var(--section-tight); }
.list + .tags, .article__body + .tags { margin-block-start: 2.5rem; }
figure + .article__body { margin-block-start: 2.5rem; }

/* ============================================================
   8. Work grid / card
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem var(--gutter);
}
@media (max-width: 63.9375rem) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem var(--gutter); } }
@media (max-width: 47.9375rem) { .work-grid { grid-template-columns: 1fr; gap: 3rem; } }

.work-card { display: flex; flex-direction: column; gap: 1rem; }
.work-card__thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--rule-solid);
  border-radius: var(--radius);
  overflow: hidden;
}
.work-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-base) var(--e-standard);
}
.work-card__cap { display: flex; flex-direction: column; gap: .25rem; }
.work-card__title { color: var(--ink); }
.work-card__cat { font-family: var(--f-label); }

/* ============================================================
   9. List（Notes / News / Search）
   ============================================================ */
.list { border-block-start: 1px solid var(--rule); }
/* 見出し直下の罫線とリストの上罫線が同じ位置に来て二重になる。
   隣り合ったときはリスト側を落とす */
.l-rule + .list,
.section-head + .l-rule + .list { border-block-start: 0; }
.list__item { border-block-end: 1px solid var(--rule); }
.list__link {
  display: flex; align-items: flex-start; gap: var(--gutter);
  padding-block: 1.5rem;
  padding-inline: 0;
  color: var(--ink);
  transition: background var(--d-fast) var(--e-standard),
              padding-inline var(--d-fast) var(--e-standard);
}
/* サイズを書かないと本文（16）を継承する。一覧では 16px、
   トップの最新◯件では t-label が付いて 12px——と場所で割れていた。
   日付とタグはラベルなので、ここで 12px を確定させる */
/* 行間はタイトルと同じ 32px にする。16px のままだと箱の高さが
   タイトル（32）と違い、上端揃えでも文字が 8px 上にずれて見える */
.list__date { flex: 0 0 6rem; font-family: var(--f-label); font-size: .75rem; line-height: 2rem; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.list__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; }
/* リスト1行のタイトルは、Notes / News / 検索結果すべて同じ型。
   一覧ごとに大きさを変えない。18px は本文(16)より1段上で、
   日付・タグ（12px モノ）との差もはっきり出る */
.list__title { font-size: 1.125rem; line-height: 2rem; letter-spacing: .04em; }
@media (max-width: 47.9375rem) { .list__title { font-size: 1rem; line-height: 2rem; } }
.list__tag { flex: 0 0 auto; font-family: var(--f-label); font-size: .75rem; line-height: 2rem; letter-spacing: .12em; color: var(--muted); }
.list--compact .list__link { align-items: center; }

@media (max-width: 47.9375rem) {
  /* 縦積みにしたとき align-items が「水平方向の揃え」に変わる。
     compact 側の center が残っていると News だけ中央寄せになるので、両方 start に倒す */
  .list__link,
  .list--compact .list__link { flex-direction: column; gap: .5rem; align-items: flex-start; }
  .list__date { flex: 0 0 auto; }
}

.badge {
  display: inline-block;
  background: var(--yellow); color: var(--ink);
  font-family: var(--f-label); font-size: .75rem; line-height: 1rem;
  letter-spacing: .12em;
  padding: .25rem .5rem;
}

/* ============================================================
   10. Filter / Pager / Link / Button
   ============================================================ */
.filter { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.filter a {
  display: inline-block;
  padding-block: .5rem;          /* クリック領域を確保する。文字だけだと押しにくい */
  font-size: 1rem; line-height: 2rem; letter-spacing: .08em;
  color: var(--muted);
  transition: color var(--d-fast) var(--e-standard);
}
.filter a[aria-current="true"] { color: var(--blue); }

.pager {
  display: flex; justify-content: center; align-items: center;
  gap: var(--gutter);
  margin-block-start: var(--section-tight);
}
.pager .page-numbers {
  font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pager .page-numbers.current { color: var(--blue); }

.c-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--blue);
  position: relative;
}
.c-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-fast) var(--e-standard);
}

/* ボタンはこの1種だけ。増やさない。
   遷移は .c-link（下線）、大きな誘導は .cta-card が受け持つ。
   高さ 64px 固定・左右 40px・幅は中身なり。
   align-self を明示するのは、親が flex-direction:column のとき
   align-items:stretch で全幅に伸ばされるため（実際そうなっていた）。
   静止時は墨の面。青は「操作」の色なのでホバーで初めて出す。 */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  align-self: flex-start;
  block-size: 4rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: var(--radius);
  padding: 0 2.5rem; cursor: pointer;
  transition: background var(--d-fast) var(--e-standard),
              transform var(--d-fast) var(--e-standard);
}

/* ============================================================
   11. Form
   ============================================================ */
/* コンテナ幅(1320)いっぱいだと入力欄1本が 644px になり目線が横に流れる。
   760 = 12カラムのうち 7本ぶん（88×7 + 24×6）。本文の読み幅 680 に最も近く、
   かつグリッドに乗る値。2カラムに割ると 1本 368px */
.form { display: flex; flex-direction: column; gap: 2rem; max-inline-size: 47.5rem; }
/* 送信の位置は、フォームの置き方に従う。既定は右端＝入力欄の右辺に揃える。
   Contact は中央1カラムなので、下の .contact-page で中央に上書きする */
.form .c-btn { align-self: flex-end; }

/* honeypot。display:none だと埋めない bot がいるので、
   画面外に飛ばして「見えないが存在する」状態にする */
.form__trap {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 送信結果。ページ内で唯一の色付き面なので、罫線1本ぶんの主張に留める */
.form-notice {
  max-inline-size: 47.5rem;
  margin-inline: auto;
  margin-block-end: 2.5rem;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.form-notice--ok { border-inline-start: 2px solid var(--blue); }
.form-notice--ng { border-inline-start: 2px solid var(--ink); }

/* ============================================================
   11-a. Contact — このページだけ中央1カラム
   フォームは「読む」ページではなく「入力する」ページで、目的が1つしかない。
   12カラムの左揃えグリッドは複数の情報を並べるための道具なので、
   単一タスクのページでは外し、視線を画面中央の1本の縦線に落とす。
   ⚠️ 中央に寄せるのは「ブロック」だけ。ラベルと入力欄は左揃えのまま。
      text-align: center を中身に効かせると行頭が揃わず読めなくなる。
   ============================================================ */
/* .section-head は flex（左に見出し・右に件数）なので、
   text-align では動かない。並べ方そのものを中央にする */
.contact-page .section-head { justify-content: center; }
.contact-page .l-read { text-align: center; margin-inline: auto; }
/* 中央揃えの和文は、文節で折らないと語の途中で割れて読みにくい */
.contact-page .l-read { word-break: auto-phrase; }
/* 見出しとリードもブロックごと中央。フォームだけ中央だと基準線が2本になる */
.contact-page .form { margin-inline: auto; }
.contact-page .form__field,
.contact-page .form__label { text-align: start; }
.contact-page .form .c-btn { align-self: center; }
/* 単独で置く select は、隣に相方がいる select と同じ幅にする。
   自分だけ 760 まで伸びると入力欄の列が揃わない */
.form > .form__field--half { max-inline-size: 23rem; }
.form__row { display: flex; gap: var(--gutter); }
@media (max-width: 63.9375rem) { .form__row { flex-direction: column; } }
.form__field { flex: 1 1 0; display: flex; flex-direction: column; gap: .5rem; }
.form__label { display: flex; align-items: center; gap: .5rem; }
/* 青は「押せる・行ける」の色。押せない注記に使わない */
.form__req { font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em; color: var(--muted); }
.form input[type="text"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color var(--d-fast) var(--e-standard);
}
/* padding+line-height の合算だと 62px と端数が出る。高さを基準にして
   ボタン(64)と揃える。textarea は複数行なので min-height 側で持つ */
.form input[type="text"],
.form input[type="email"],
.form select { block-size: 4rem; }
.form textarea { min-height: 11rem; resize: vertical; }
/* フォーカスは青。墨の2px は面に穴が開いたように見えて強すぎた。
   青は「操作できるもの」の色なので、いま触っている欄を指すのに合う */
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--blue); border-width: 2px; padding: calc(1rem - 1px); outline: none;
}

/* ============================================================
   11-b. Works 詳細
   正方形サムネを全幅に置くと画面を占領するので2カラムに割る。
   本文ブロックはすべて同じ左位置・同じ読み幅に揃える。
   ============================================================ */
/* 左右の間は gutter（24px）だと画像と文字がくっついて見える。
   別の情報のかたまりなので、セクション内の区切りとして 64px 取る */
.work-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.work-hero__visual {
  aspect-ratio: 1 / 1;
  background: var(--rule-solid);
  border-radius: var(--radius);
  overflow: hidden;
}
.work-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.work-hero__info { display: flex; flex-direction: column; gap: 2.5rem; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; }
.breadcrumb a { color: var(--blue); }
.breadcrumb span { color: var(--muted); }

/* 定義リスト。ラベルは固定幅で左に揃え、値の頭を一直線にする */
.work-meta { display: flex; flex-direction: column; }
.work-meta__row {
  display: flex; gap: 1.5rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
.work-meta__row:last-child { border-block-end: 1px solid var(--rule); }
.work-meta__label { flex: 0 0 7rem; }
.work-meta__value { margin: 0; }

/* 本文も2カラムで割る。
   左に見出し、右に本文。縦に積むより短くなり、視線の移動も減る */
.work-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.work-split__head {
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
  display: flex; flex-direction: column; gap: .75rem;
}
.work-split__col { display: flex; flex-direction: column; gap: 1.5rem; }
.work-link { margin-block-start: 4rem; display: flex; flex-direction: column; gap: .75rem; }
.work-split .article__body { margin: 0; }
.work-split .t-h3 + .work-meta { margin-block-start: 0; }

.work-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem var(--gutter);
  margin-block-start: 1.5rem;
}
.work-gallery__item { display: flex; flex-direction: column; gap: .75rem; }
.work-gallery__item img { width: 100%; border-radius: var(--radius); }

.pagenav__item--center { align-items: center; text-align: center; }

@media (max-width: 63.9375rem) {
  .work-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .work-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .work-split__head { position: static; }
}
@media (max-width: 47.9375rem) {
  .work-gallery { grid-template-columns: 1fr; gap: 2rem; }
  .work-meta__row { flex-direction: column; gap: .25rem; }
  .work-meta__label { flex: 0 0 auto; }
  .pagenav__item--center { align-items: flex-start; text-align: start; }
}

/* ============================================================
   11-c. Member
   Works 詳細と同じ2カラム（別の情報のかたまりなので間は 64px）。
   人の区切りは罫線ではなく面の明度で出す（テンプレート側で交互に切替）。
   ============================================================ */
.member {
  display: grid;
  grid-template-columns: 24rem 1fr;   /* 384 / 残り */
  gap: 4rem;
  align-items: start;
}
.member__visual {
  aspect-ratio: 1 / 1;
  background: var(--rule-solid);
  border-radius: var(--radius);
  overflow: hidden;
}
.member__visual img { width: 100%; height: 100%; object-fit: cover; }
.member__info { display: flex; flex-direction: column; gap: 1.5rem; }
/* 名前とラベルは近い情報なので、ここだけ詰める */
.member__info > .t-label + .member__name { margin-block-start: -1rem; }
.member__role { color: var(--muted); }
.member__skills { margin-block-start: .5rem; }
.member__works { margin-block-start: .5rem; }

/* 絞り込みの2行目（メンバー）。1行目より弱く見せて、軸が別だと分かるようにする */
.filter--sub { margin-block-start: 1rem; align-items: baseline; }
.filter__legend { flex: 0 0 auto; }
.member .article__body > * { max-inline-size: 42.5rem; }

@media (max-width: 63.9375rem) {
  .member { grid-template-columns: 18rem 1fr; gap: 2.5rem; }
}
@media (max-width: 47.9375rem) {
  /* SP は縦積み。ポートレートは全幅にせず、読み始めの邪魔をしない大きさに留める */
  .member { grid-template-columns: 1fr; gap: 2rem; }
  .member__visual { max-inline-size: 15rem; }
}

/* ============================================================
   12. Article（Notes / News 詳細）
   ============================================================ */

/* 記事の見出しまわり。ラベル・タイトル・日付を親の gap で離す。
   base で h1〜h6 と p の margin を 0 にしているので、
   ここで間隔を作らないと全部ベタ付きになる（実際そうなっていた） */
.article__head { display: flex; flex-direction: column; gap: 1rem; }
.article__head .t-h2 { max-width: 42.5rem; }
/* 日付から罫線、罫線から本文は、read の区切りとして 40px 取る。
   16px のままだと「見出しの一部」に見えて本文の始まりが分からない */
.article__head + .l-rule { margin-block-start: 2.5rem; }
.article__head + .l-rule + .article__body { margin-block-start: 2.5rem; }

/* 段落の間。行間（32）と同じ 32 だと塊が分離せず、
   ひと続きの壁に見える。1段広い 40 にして段落を立てる */
.article__body > * + * { margin-block-start: 2.5rem; }
/* 見出し・本文・引用・箇条書き・コードは、すべて同じ読み幅に収める。
   ここを外すと文字の折り返し位置が要素ごとに変わって視線が泳ぐ */
.article__body > * { max-width: 42.5rem; }
.article__body h2 { font-size: 2.5rem; line-height: 3rem; letter-spacing: -.01em; margin-block-start: 4rem; }
.article__body h3 { font-size: 1.5rem;  line-height: 2rem;   margin-block-start: 4rem; }
.article__body p { font-size: 1.125rem; line-height: 2rem; letter-spacing: .04em; }
/* 箇条書きも本文。本文（18）と違うサイズにしない */
.article__body ul, .article__body ol {
  padding-inline-start: 1.5rem;
  font-size: 1.125rem; line-height: 2rem; letter-spacing: .04em;
}
.article__body li + li { margin-block-start: .5rem; }
.article__body img { width: 100%; border-radius: var(--radius); }
/* ⚠️ ここで margin: 0 と書くと、詳細度が `> * + *` より高いので
   段落間の 40px まで消える。潰すのは既定の上下マージンだけにする */
.article__body figure { margin-block-end: 0; margin-inline: 0; }
.article__body figcaption { margin-block-start: .75rem; font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em; color: var(--muted); }
/* 引用は「本文の中の別の声」。読ませるものなので本文と同じ 18px。
   色を muted に落とすと読めない。罫は墨——青は「操作できるもの」の色で、
   押せない引用に使うと役割が壊れる */
.article__body blockquote {
  margin-block-end: 0; margin-inline: 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--ink);
  font-size: 1.125rem; line-height: 2rem; letter-spacing: .04em;
}
.article__body pre {
  margin-block-end: 0; margin-inline: 0;
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5rem; overflow-x: auto;
  font-family: var(--f-mono); font-size: .875rem; line-height: 1.5rem;
}
.article__body code { font-family: var(--f-mono); font-size: .875em; }

.tags { display: flex; flex-wrap: wrap; gap: .75rem; }
/* padding で高さを積むと 6px のような端数が要る。高さを 32px で
   決め打ちして、左右だけ 16px 取る */
.tags a {
  display: inline-flex; align-items: center;
  block-size: 2rem;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding-inline: 1rem;
  font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em;
  color: var(--muted);
  transition: border-color var(--d-fast) var(--e-standard), color var(--d-fast) var(--e-standard);
}

/* 前後ナビ */
.pagenav {
  display: flex; justify-content: space-between; gap: var(--gutter);
  border-block-start: 1px solid var(--rule);
  padding-block-start: 3rem;
  margin-block-start: var(--section);
}
.pagenav__item { display: flex; flex-direction: column; gap: .5rem; }
.pagenav__item--next { text-align: end; align-items: flex-end; }
@media (max-width: 47.9375rem) {
  .pagenav { flex-direction: column; }
  .pagenav__item--next { text-align: start; align-items: flex-start; }
}

/* ============================================================
   13. Contact CTA / Footer
   カードごとリンクにする。当たり判定を文字だけに絞らない。
   ============================================================ */
.cta-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  padding: 3rem;
  transition: background var(--d-fast) var(--e-standard),
              transform var(--d-fast) var(--e-standard);
}
.cta-card__label { color: var(--paper); opacity: .6; }
.cta-card__title { margin: 0; }
.cta-card__meta {
  display: flex; align-items: center; gap: 2rem;
  padding-block-start: 1rem;
}
.cta-card__mail { font-family: var(--f-label); letter-spacing: .08em; }
.cta-card__cta { display: inline-flex; align-items: center; gap: .5rem; }
.cta-card__arrow { transition: transform var(--d-fast) var(--e-standard); }
@media (max-width: 47.9375rem) {
  .cta-card { padding: 2rem; }
  .cta-card__meta { flex-direction: column; align-items: flex-start; gap: .75rem; }
}


.cta__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter);
}
.cta__body {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; padding-block-start: var(--gutter);
}
.cta .l-rule { border-color: var(--muted); }
.footer-meta {
  display: flex; justify-content: space-between; gap: var(--gutter);
  font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em;
  color: var(--muted);
}
@media (max-width: 47.9375rem) {
  .cta__head, .cta__body, .footer-meta { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ============================================================
   14. Motion
   duration 3段 / easing 2本のみ。跳ねさせない。
   property ごとに速度を変える（opacity は長く、transform は短く）。
   ============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(var(--enter));
  transition: opacity var(--d-reveal) var(--e-reveal),
              transform var(--d-base) var(--e-standard);
}
.js-reveal.is-in { opacity: 1; transform: none; }

/* ロードシーケンス：骨格 → 主張 → 人格 → 補足 */
.hero .l-grid-lines span { transform: scaleY(0); transform-origin: top; }
.is-loaded .hero .l-grid-lines span {
  transform: scaleY(1);
  transition: transform var(--d-reveal) var(--e-reveal);
}
.hero__headline, .hero__illust, .hero__lead, .hero__util, .hero__foot {
  opacity: 0; transform: translateY(var(--enter));
}
.is-loaded .hero__headline,
.is-loaded .hero__illust,
.is-loaded .hero__lead,
.is-loaded .hero__util,
.is-loaded .hero__foot {
  opacity: 1; transform: none;
  transition: opacity var(--d-reveal) var(--e-reveal),
              transform var(--d-base) var(--e-standard);
}
.is-loaded .hero__headline { transition-delay: 300ms; }
.is-loaded .hero__illust   { transition-delay: 750ms; }
.is-loaded .hero__lead     { transition-delay: 1050ms; }
.is-loaded .hero__util,
.is-loaded .hero__foot     { transition-delay: 1290ms; transition-duration: var(--d-fast); }

/* ホバー：タッチ端末では発火させない */
@media (hover: hover) and (pointer: fine) {
  .c-link:hover { color: var(--ink); }
  .c-link:hover::after { transform: scaleX(1); }
  .c-btn:hover { background: var(--blue); transform: translateY(calc(var(--lift) * -1)); }
  .header__nav a:hover .nav-num { opacity: 1; }

  /* 作品カード：動かすのは画像そのもの。枠は overflow で固定したまま。
     文字には下線を引かず、色だけ muted → ink に上げる */
  .work-card:hover .work-card__thumb img { transform: scale(1.03); }
  .work-card:hover .work-card__cat { color: var(--ink); }

  /* リスト行：面の色に対して1段ずらす。
     薄グレー面の上で surface を敷くと同色で消えるため、そこだけ紙に返す */
  /* dl など、押せない行にはホバーを出さない。a のときだけ反応させる */
  a.list__link:hover { background: var(--surface); padding-inline: 1rem; }
  .l-section--surface a.list__link:hover { background: var(--paper); }
  .filter a:hover { color: var(--ink); }

  .tags a:hover { border-color: var(--ink); color: var(--ink); }

  .cta-card:hover { background: var(--blue); transform: translateY(calc(var(--lift) * -1)); }
  .cta-card:hover .cta-card__arrow { transform: translateX(.5rem); }
}

/* クリックの手応え。持ち上げを戻してわずかに沈める */
.cta-card:active,
.c-btn:active { transform: translateY(0) scale(.998); }

/* カーソル追随（PC のみ） */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--ink); border-radius: 50%;
  pointer-events: none;
  opacity: .4;
  transform: translate(-50%, -50%);
  transition: width var(--d-fast) var(--e-standard),
              height var(--d-fast) var(--e-standard),
              opacity var(--d-fast) var(--e-standard);
}
.cursor.is-hover { width: 4.5rem; height: 4.5rem; opacity: .2; }
@media (hover: none), (pointer: coarse), (max-width: 63.9375rem) {
  .cursor { display: none; }
}

/* ページ遷移 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out var(--d-fast) var(--e-standard) both; }
::view-transition-new(root) { animation: fade-in var(--d-reveal) var(--e-reveal) both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; transform: translateY(var(--enter)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal, .hero__headline, .hero__illust, .hero__lead, .hero__util, .hero__foot {
    opacity: 1 !important; transform: none !important;
  }
  .hero .l-grid-lines span { transform: scaleY(1) !important; }
  .cursor { display: none; }
}