/*
 * 乾 映之右 ポートフォリオ
 *
 * 色は黒と白の 2 値だけ。灰色は使わず、階調は線の太さで作る。
 * 大きな文字は表紙と制作に絞り、ほかは線と格子で密度を作る。
 * 記号体系は「乾 = ☰ = 111」。陽爻 (一本の線) と陰爻 (切れた線) を、見出しの記号、
 * 章の切り替わり、写真の線スクリーン、経歴の棒グラフ、最後の六本の棒まで通して使う。
 *
 * 12 カラム。.inv の中は黒地に白。--bg と --fg で受ける。
 */

/* ===== 土台 ===== */
:root {
  --k: #000;
  --w: #fff;
  --bg: var(--w);
  --fg: var(--k);

  --m: clamp(14px, 1.4vw, 24px);       /* 画面端の余白 */
  --g: clamp(10px, 1.1vw, 18px);       /* カラム間 */
  --nav-h: 52px;
  --bar: clamp(4px, .45vw, 7px);       /* 太い罫 */

  --f-display: 'Dela Gothic One', 'Hiragino Kaku Gothic StdN', 'Noto Sans JP', sans-serif;
  --f-latin: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --f-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--w);
  overflow-x: clip;
}
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 900; }
ol, ul { list-style: none; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--fg); color: var(--bg); }
.inv { --bg: var(--k); --fg: var(--w); background: var(--bg); color: var(--fg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* 注記に使う等幅の小さな文字 */
.plate-name, .plate-en, .spec dt, .spec small, .work-tags,
.rec-date, .span-date, .gantt-axis span, .wall-label, .colophon-cr, .d-sec-head p, .d-nav-label, .d-status {
  font-family: var(--f-mono);
  font-stretch: 75%;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0;
}

.skip {
  position: fixed; left: var(--m); top: var(--m); z-index: 200;
  padding: 6px 12px; background: var(--k); color: var(--w);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ===== 卦の記号。線は下から上へ並ぶ ===== */
.hex {
  --size: 26px;
  display: inline-flex;
  flex: none;
  flex-direction: column-reverse;
  justify-content: space-between;
  width: var(--size);
  height: calc(var(--size) * .82);
  vertical-align: middle;
}
.hex i { position: relative; display: block; height: 11%; }
.hex i::before, .hex i::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: currentColor;
  transition: width .18s steps(3);
}
.hex i::before { left: 0; }
.hex i::after { right: 0; }
.hex i.y0::before, .hex i.y0::after { width: 38%; }

/* ===== タイプ演出。未入力の文字は透明のまま場所を取るので組みが崩れない ===== */
/* 準備ができるまで隠す。site.js が読めなくても load で type-on が付く (js/gate.js) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.type-on) [data-type] { opacity: 0; }
}
.tw-off { opacity: 0; }
.tw-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -.12em; }
.tw-caret::after { content: ""; position: absolute; left: .04em; top: 0; width: .58em; height: 100%; background: currentColor; }

/* ===== 線スクリーン写真 ===== */
.ls { position: relative; display: block; overflow: hidden; background: var(--w); }
.ls img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.js .ls img { visibility: hidden; }
.ls canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 詳細ページの写真: 線が消えていくと下のカラー写真が現れる (js/site.js) */
.js .ls.to-color.ls-ready img { visibility: visible; }
.ls.to-color img { filter: none; }

/* 写真の上に載せる文字は、行ごとの帯で切り抜く */
.band {
  background: var(--bg);
  box-shadow: .12em 0 0 var(--bg), -.12em 0 0 var(--bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ===== 固定ナビ。下の面の地色に合わせて白黒を切り替える (js/site.js) ===== */
.nav {
  --nav-bg: var(--w);
  --nav-fg: var(--k);
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding-inline: var(--m);
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-fg);
}
.nav[data-tone="k"] { --nav-bg: var(--k); --nav-fg: var(--w); }
.nav-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 14px; letter-spacing: .04em; }
.nav-index { display: flex; gap: clamp(0px, .3vw, 6px); }
.nav-index a {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: 2px 8px 3px;
  font-weight: 700; font-size: 13px; line-height: 1.5;
}
.nav-index b { font: 500 9.5px/1 var(--f-mono); font-stretch: 75%; }
.nav-index a:hover, .nav-index a.is-active { background: var(--nav-fg); color: var(--nav-bg); }
.nav-tag {
  position: absolute;
  left: 26vw; top: 0;
  display: none; align-items: center; gap: 2.4em;
  height: 100%;
  margin: 0;
  font: 500 10px/1 var(--f-mono); font-stretch: 75%; text-transform: uppercase;
}
.nav-tag > div { display: flex; gap: .8em; }
.nav-tag dd { margin: 0; }
.nav.is-top .nav-tag { display: flex; }
.nav-open { display: none; padding: 2px 9px; font-weight: 900; font-size: 12.5px; background: var(--nav-fg); color: var(--nav-bg); }

/* スマホの目次 */
.menu { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--k); color: var(--w); }
.menu[hidden] { display: none; }
.menu-close { align-self: flex-end; height: var(--nav-h); padding-inline: var(--m); font-weight: 900; font-size: 12.5px; }
.menu nav { flex: 1; display: grid; grid-template-rows: repeat(6, 1fr); padding: 0 var(--m) var(--m); }
.menu a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  border-top: 1px solid var(--w);
  font-family: var(--f-display); font-size: min(12vw, 8.5svh); line-height: 1;
}
.menu a b { order: 3; font: 500 10px/1 var(--f-mono); }

/* ===== 表紙 ===== */
.hero { position: relative; height: 140svh; background: var(--w); }
.hero-sheet {
  position: sticky; top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--nav-h) minmax(0, 1fr) auto;
  height: 100svh; min-height: 520px;
  overflow: clip;
  isolation: isolate;
  background: var(--w);
  color: var(--k);
}
.hero-pic { grid-row: 2; position: relative; min-height: 0; overflow: clip; }
.hero-photo {
  position: absolute;
  left: 19vw; top: 15svh;
  width: 47vw; height: 60svh;
}

/* 表紙の主役。写真全体を線で描き、「乾」の内側だけ線を太くする (js/site.js) */
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.js:not(.no-gl) .hero-photo, .js:not(.no-gl) .kan { display: none; }

/* WebGL が使えないときの代替。白 + difference で、写真の上では反転して見える */
.kan {
  --size: min(108svh, 66vw);
  position: absolute; inset: 0 -3vw 0 0;
  color: var(--w);
  mix-blend-mode: difference;
  pointer-events: none;
  font-family: var(--f-display);
  font-size: var(--size);
  line-height: 1;
}
.kan i {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-bottom: 7svh;
  font-style: normal;
  white-space: nowrap;
  will-change: transform;
}

.hero-copy {
  position: absolute;
  left: var(--m); top: calc(var(--nav-h) + 1.6svh);
  width: min(26vw, 380px);
}
.hero-copy p { margin-bottom: .9em; }
.hero-eyebrow { font: 500 10px/1.7 var(--f-mono); font-stretch: 75%; letter-spacing: .02em; text-transform: uppercase; }
.hero-lede { font-weight: 700; font-size: clamp(13px, 1.05vw, 17px); line-height: 1.9; }
.hero-jp { font-size: 12px; font-weight: 700; line-height: 1.8; }

/* 名前は下端に幅いっぱい。カーソルに近い文字ほど字幅が広がる */
.hero-name {
  grid-row: 3;
  margin: clamp(8px, 1.2svh, 14px) var(--m) calc(var(--m) * .7);
  color: var(--k);
  font-family: var(--f-latin);
  font-weight: 900;
  font-stretch: 62%;
  line-height: .74;
  font-size: 16vw;
}
.stretch { display: inline-flex; width: max-content; white-space: pre; transform-origin: 0 100%; }
.stretch span { display: block; }

/* ===== 章の扉: 六本の棒が太って地色が入れ替わる ===== */
.plate {
  --from: var(--k);
  --to: var(--w);
  --p: 0;
  position: relative;
  height: clamp(170px, 30svh, 300px);
  overflow: clip;
  isolation: isolate;
  background: var(--from);
}
.plate[data-to="k"] { --from: var(--w); --to: var(--k); }
.plate-bars { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); }
.plate-bars i {
  display: block;
  margin-block: -.5px;
  background: var(--to);
  transform: scaleY(clamp(0, calc((var(--p) - var(--d, 0)) * 2.2), 1.04));
}
.plate-bars i:nth-child(1) { --d: .10; }
.plate-bars i:nth-child(2) { --d: .34; }
.plate-bars i:nth-child(3) { --d: .02; }
.plate-bars i:nth-child(4) { --d: .44; }
.plate-bars i:nth-child(5) { --d: .18; }
.plate-bars i:nth-child(6) { --d: .28; }
.plate-label {
  position: absolute;
  left: 0; right: 0; bottom: clamp(10px, 1.2vw, 18px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: end;
  padding-inline: var(--m);
  color: var(--w);
  mix-blend-mode: difference;
}
.plate-label h2 {
  grid-column: 1 / 6;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -.01em;
}
.plate-label b { grid-column: 6 / 7; font: 900 clamp(28px, 3vw, 46px)/.9 var(--f-latin); font-stretch: 62%; }
.plate-label .hex { grid-column: 7 / 9; --size: clamp(30px, 3vw, 46px); }
.plate-name { grid-column: 9 / 11; }
.plate-en { grid-column: 11 / 13; text-align: right; text-transform: uppercase; }

/* ===== 本文の共通 ===== */
.ch { position: relative; background: var(--bg); color: var(--fg); padding-block: clamp(24px, 3vw, 48px) clamp(48px, 6vw, 96px); }

.lnk {
  display: inline-block;
  font-weight: 900; font-size: 14px; line-height: 1.5;
  padding: 3px 6px 4px;
  margin-left: -6px;
  box-shadow: inset 0 -2px 0 var(--fg);
}
.lnk::after { content: " ↗"; font-family: var(--f-latin); }
.lnk-in::after { content: " →"; }
.lnk:hover, .lnk:focus-visible { background: var(--fg); color: var(--bg); }

/* ===== 01 紹介: 写真、白いブロック、プロフィールを同じ高さに揃える ===== */
.ch-about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
}
.about-fig {
  grid-column: 1 / 6;
  aspect-ratio: 1;
  margin-left: calc(-1 * var(--m));
}
.about-lead {
  grid-column: 6 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--w);
  color: var(--k);
}
.about-lead p {
  writing-mode: vertical-rl;
  height: max-content;
  white-space: nowrap;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 42px);
  line-height: 2.1;
  letter-spacing: .08em;
  font-feature-settings: normal;
}
.about-lead .tw-caret { width: 1em; height: 0; vertical-align: baseline; }
.about-lead .tw-caret::after { left: 0; top: .04em; width: 100%; height: .58em; }
.spec {
  grid-column: 9 / 13;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  border-top: var(--bar) solid var(--fg);
}
.spec > div { display: flex; flex-direction: column; justify-content: center; padding: 10px 0; border-bottom: 1px solid var(--fg); }
.spec dt { margin-bottom: 4px; }
.spec dd { font-weight: 900; font-size: clamp(17px, 1.85vw, 30px); line-height: 1.35; word-break: auto-phrase; }
.spec small { display: block; margin-top: 3px; }

/* ===== 02 制作 ===== */
.ch-works { --bar: clamp(8px, 1vw, 16px); }
.filter {
  display: flex; flex-wrap: wrap; gap: 0 clamp(4px, .6vw, 10px);
  margin: 0 var(--m) clamp(48px, 7vw, 120px);
  padding-top: 10px;
  border-top: var(--bar) solid var(--fg);
}
.filter-btn {
  display: inline-flex; align-items: flex-start; gap: .3em;
  padding: 2px 10px 4px;
  margin-left: -10px;
  margin-right: 10px;
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 30px);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.filter-btn sup { font: 500 10px/1.8 var(--f-mono); font-stretch: 75%; letter-spacing: 0; vertical-align: baseline; }
.filter-btn:hover, .filter-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.work {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-inline: var(--m);
  margin-bottom: clamp(72px, 11vw, 200px);
}
.work[hidden], .row[hidden] { display: none; }
.work-no {
  font-family: var(--f-latin);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(110px, 21vw, 400px);
  line-height: .74;
  letter-spacing: -.01em;
}
.work-hex { --size: clamp(30px, 3.6vw, 60px); }
.work-fig { position: relative; }
.work-title {
  position: relative; z-index: 2;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 92px);
  line-height: 1.14;
  letter-spacing: -.01em;
  word-break: auto-phrase;
  pointer-events: none;
}
.work-cat { font: 500 10px/1.6 var(--f-mono); font-stretch: 75%; margin-bottom: 12px; }
.work-desc { font-size: 15px; line-height: 1.9; }
.work-tags { margin-top: 12px; font: 500 10.5px/1.7 var(--f-mono); font-stretch: 75%; }
.work-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }

/* 見開き 1: 写真を左に裁ち落とし、題が写真に食い込む */
.work-1 .work-fig { grid-column: 1 / 8; grid-row: 1 / 5; margin-left: calc(-1 * var(--m)); aspect-ratio: 5 / 4; }
.work-1 .work-no { grid-column: 8 / 13; grid-row: 1; justify-self: end; }
.work-1 .work-hex { grid-column: 8 / 10; grid-row: 1; align-self: start; }
.work-1 .work-title { grid-column: 5 / 13; grid-row: 2; margin-top: 3vw; }
.work-1 .work-body { grid-column: 9 / 13; grid-row: 3 / 5; margin-top: 2.4vw; }

/* 見開き 2: 右に裁ち落とし */
.work-2 .work-fig { grid-column: 6 / 13; grid-row: 1 / 5; margin-right: calc(-1 * var(--m)); aspect-ratio: 4 / 3; }
.work-2 .work-no { grid-column: 1 / 6; grid-row: 1; }
.work-2 .work-hex { grid-column: 4 / 6; grid-row: 1; justify-self: end; }
.work-2 .work-title { grid-column: 1 / 10; grid-row: 2; margin-top: 3vw; }
.work-2 .work-body { grid-column: 1 / 5; grid-row: 3 / 5; margin-top: 2.4vw; }

/* 見開き 3: 全面に敷く */
.work-3 .work-fig { grid-column: 1 / 13; grid-row: 1 / 3; margin-inline: calc(-1 * var(--m)); aspect-ratio: 21 / 9; }
.work-3 .work-no { grid-column: 1 / 7; grid-row: 1; z-index: 2; color: var(--w); mix-blend-mode: difference; margin-top: var(--m); pointer-events: none; }
.work-3 .work-hex { grid-column: 11 / 13; grid-row: 1; justify-self: end; margin-top: var(--m); z-index: 2; color: var(--w); mix-blend-mode: difference; }
.work-3 .work-title { grid-column: 1 / 13; grid-row: 2; align-self: end; margin-bottom: var(--m); font-size: clamp(30px, 6vw, 112px); }
.work-3 .work-body { grid-column: 7 / 13; grid-row: 3; margin-top: 2vw; }

/* 見開き 4: 小さな写真と巨大な番号 */
.work-4 .work-fig { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 16 / 9; margin-left: calc(-1 * var(--m)); align-self: end; }
.work-4 .work-no { grid-column: 6 / 13; grid-row: 1; font-size: clamp(110px, 30vw, 560px); justify-self: end; }
.work-4 .work-hex { grid-column: 6 / 8; grid-row: 1; }
.work-4 .work-title { grid-column: 3 / 13; grid-row: 2 / 4; margin-top: 2vw; }
.work-4 .work-body { grid-column: 8 / 13; grid-row: 4; margin-top: 2.4vw; }

/* 見開き 5: 細い本文の柱と大きな画面 */
.work-5 .work-fig { grid-column: 4 / 13; grid-row: 1 / 4; margin-right: calc(-1 * var(--m)); aspect-ratio: 16 / 10; }
.work-5 .work-no { grid-column: 1 / 4; grid-row: 1; font-size: clamp(110px, 16vw, 300px); }
.work-5 .work-hex { grid-column: 1 / 3; grid-row: 2; margin-top: 12px; }
.work-5 .work-title { grid-column: 1 / 10; grid-row: 3; align-self: end; margin-bottom: var(--m); }
.work-5 .work-body { grid-column: 1 / 4; grid-row: 4; margin-top: 2.4vw; }

/* 索引 */
.index { margin-inline: var(--m); border-top: var(--bar) solid var(--fg); }
.row { border-bottom: 1px solid var(--fg); }
.row summary {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: center;
  padding: clamp(10px, 1.2vw, 20px) 6px;
  cursor: pointer;
}
.row summary:hover, .row[open] summary { background: var(--fg); color: var(--bg); }
.row-no { grid-column: span 1; font: 900 clamp(26px, 3.4vw, 60px)/.8 var(--f-latin); font-stretch: 62%; }
.row .hex { grid-column: span 1; --size: clamp(18px, 1.8vw, 28px); }
.row-title {
  grid-column: span 7;
  font-weight: 900;
  font-size: clamp(17px, 2.3vw, 40px);
  line-height: 1.22;
  letter-spacing: -.012em;
  word-break: auto-phrase;
}
.row-cat { grid-column: span 2; font: 500 10px/1.5 var(--f-mono); font-stretch: 75%; }
.row-x { grid-column: span 1; justify-self: end; position: relative; width: clamp(16px, 1.8vw, 26px); aspect-ratio: 1; }
.row-x::before, .row-x::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; background: currentColor; }
.row-x::after { transform: rotate(90deg); transition: transform .15s steps(3); }
.row[open] .row-x::after { transform: rotate(0); }
.row-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding: clamp(16px, 2vw, 32px) 6px clamp(28px, 4vw, 64px);
}
.row-body .work-fig { grid-column: 3 / 9; aspect-ratio: var(--ar, 16 / 9); }
.row-body > div { grid-column: 9 / 13; }

/* ===== 03 実績: 二列で一望する ===== */
.ch-record {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(14px, 2vw, 34px);
  padding-inline: var(--m);
}
.rec { border-top: var(--bar) solid var(--fg); padding-top: 10px; }
.rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rec-head h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 1.9vw, 30px); line-height: 1.25; word-break: auto-phrase; }
.rec-count { order: 2; font: 900 clamp(44px, 5.4vw, 86px)/.8 var(--f-latin); font-stretch: 62%; }
.rec-list > li { padding-block: 12px 14px; border-top: 1px solid var(--fg); }
.rec-date { margin-bottom: 4px; }
.rec-list h4 { margin-bottom: 4px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.42; word-break: auto-phrase; }
.rec-list p:not(.rec-date) { font-size: 14px; line-height: 1.75; }
.rec-list a { box-shadow: inset 0 -2px 0 var(--fg); }
.rec-list a:hover { background: var(--fg); color: var(--bg); }

/* ===== 04 経歴: 全体を一望する棒グラフ ===== */
.ch-career { padding-inline: var(--m); }
.gantt { position: relative; padding-block: 24px 20px; border-top: var(--bar) solid var(--fg); }
/* 右側 (8〜12 カラム) に年の目盛りを引く */
.gantt-axis { position: absolute; top: 0; bottom: 0; left: calc((100% + var(--g)) * 7 / 12); right: 0; pointer-events: none; }
.gantt-axis span { position: absolute; top: 0; bottom: 0; padding: 6px 0 0 4px; border-left: 1px solid var(--fg); line-height: 1; }
.gantt-axis span.is-today { display: flex; align-items: flex-end; padding: 0 0 4px 4px; border-left-width: 2px; font-weight: 700; }
.span { position: relative; border-top: 1px solid var(--fg); }
.span:last-child { border-bottom: 1px solid var(--fg); }
.span summary, .span-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: center;
  padding-block: 7px 8px;
}
.span summary:hover, .span[open] summary { --bg: var(--k); --fg: var(--w); background: var(--bg); color: var(--fg); }
.span-date { grid-column: 1 / 3; padding-left: 4px; white-space: nowrap; }
.span-main { grid-column: 3 / 8; min-width: 0; }
.span-title { display: block; font-weight: 900; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.35; }
.span-title a { box-shadow: inset 0 -2px 0 var(--fg); }
.span-title a:hover, .span-title a:focus-visible { background: var(--fg); color: var(--bg); }
.span-note { display: block; margin-top: 1px; font-size: 13px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.span[open] .span-note { display: none; }
.span-bar { grid-column: 8 / 13; position: relative; height: clamp(14px, 1.5vw, 22px); }
.span-bar i {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--bar-l, 0) * 100%);
  width: calc(var(--bar-w, 0) * 100%);
  background: var(--fg);
  transform-origin: 0 50%;
}
.js .span-bar i { transform: scaleX(0); transition: transform .7s cubic-bezier(.7, 0, .2, 1) calc(var(--i, 0) * 70ms); }
.js .gantt.in .span-bar i { transform: none; }
/* これから先は切れた線 (陰爻) で描く */
.span-next .span-bar i { background: repeating-linear-gradient(90deg, var(--fg) 0 16px, transparent 16px 24px); }
.span-next .span-title { font-family: var(--f-latin); font-weight: 800; font-size: clamp(17px, 1.6vw, 23px); }
.span-cursor {
  display: inline-block;
  width: .56em;
  height: 1em;
  margin-left: .12em;
  vertical-align: -.14em;
  background: currentColor;
  animation: spanCursor 1.1s steps(1) infinite;
}
@keyframes spanCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.span-body {
  margin-left: calc((100% + var(--g)) / 6);
  width: calc((100% + var(--g)) * 5 / 12 - var(--g));
  padding-block: 8px 14px;
}
.span-body p { font-size: 14px; line-height: 1.75; }

/* マウスでは行の高さを変えず、説明の 1 行をその場から下へ伸ばす。
   行がずれないので、カーソルを動かしても隣の行が連鎖して開かない (js/site.js) */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .span summary { cursor: default; }
  .span-title a { cursor: pointer; }
  .span[open] { z-index: 5; }
  .span[open] .span-note { display: block; visibility: hidden; }
  .span[open] .span-date { position: relative; z-index: 1; }
  .span-body {
    position: absolute;
    left: 0;
    /* 1 行目を、隠した説明の位置にぴったり重ねる (行の下余白 8px + 説明 19.5px) */
    top: calc(100% - 27.5px);
    width: calc((100% + var(--g)) * 7 / 12 - var(--g));
    margin: 0;
    padding: 0 12px 14px calc((100% + var(--g)) / 6);
    background: var(--k);
    color: var(--w);
    pointer-events: none;
    animation: spanOpen .18s steps(5);
  }
  .span-body p { font-size: 13px; line-height: 1.5; }
  .span-body p + p { margin-top: 4px; }
}
@keyframes spanOpen {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ===== 05 技能 ===== */
.ch-skills { padding-inline: var(--m); }
.wall { border-top: var(--bar) solid var(--fg); }
.wall li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: baseline;
  padding-block: clamp(6px, .8vw, 11px);
  border-bottom: 1px solid var(--fg);
}
.wall-label { grid-column: 1 / 3; }
.wall-items {
  grid-column: 3 / 13;
  display: flex; flex-wrap: wrap; gap: 0 .5em;
  font-family: var(--f-latin);
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 58px);
  line-height: 1.1;
}
.w62 { font-stretch: 62%; }
.w75 { font-stretch: 75%; }
.w125 { font-stretch: 125%; font-size: clamp(20px, 2.7vw, 44px); line-height: 1.3; }
.wjp { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.7vw, 44px); line-height: 1.3; }
.wd { padding-inline: .06em; margin-inline: -.06em; }
.wd:hover { background: var(--fg); color: var(--bg); }
.skill-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(14px, 2vw, 34px);
  margin-top: clamp(22px, 2.6vw, 40px);
}
.skill-notes > div { padding-top: 8px; border-top: var(--bar) solid var(--fg); }
.skill-notes dt { margin-bottom: 4px; font-weight: 900; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.35; }
.skill-notes dd { font-size: 14px; line-height: 1.75; }

/* ===== 06 連絡: 六本の陽爻で乾が完成する ===== */
.end { background: var(--w); color: var(--k); padding-top: clamp(20px, 2.6vw, 44px); }
.end-links {
  display: flex; flex-wrap: wrap; gap: 2px clamp(22px, 3.4vw, 60px);
  padding-inline: var(--m);
  margin-bottom: clamp(22px, 2.8vw, 44px);
}
.end-link {
  display: inline-flex; align-items: center; gap: .22em;
  padding: 2px 8px 4px;
  margin-left: -8px;
  font-family: var(--f-latin);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(44px, 6.6vw, 110px);
  line-height: 1;
}
.end-link:hover, .end-link:focus-visible { background: var(--k); color: var(--w); }
.arrow { flex: none; height: .56em; width: .56em; fill: none; stroke: currentColor; stroke-width: 2; }
.end-mark {
  --b: clamp(12px, 1.7vw, 26px);
  position: relative;
  display: grid;
  grid-template-rows: repeat(6, var(--b));
  row-gap: var(--b);
  overflow: clip;
  isolation: isolate;
}
.end-mark i { background: var(--k); }
.end-mark b {
  position: absolute; right: var(--m); top: 0;
  color: var(--w);
  mix-blend-mode: difference;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(var(--b) * 11);
  line-height: 1;
}

.colophon {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 6px;
  padding: 14px var(--m) 22px;
  background: var(--w);
  color: var(--k);
  font-size: 12.5px;
  line-height: 1.7;
}
.colophon-cr { grid-column: 1 / 5; }
.colophon-text { grid-column: 7 / 13; }

/* ===== 制作の詳細 ===== */
.detail { padding-top: var(--nav-h); }
.d-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--g);
  padding: clamp(18px, 2.2vw, 34px) var(--m) 12px;
}
.d-mark { display: flex; align-items: flex-end; gap: 12px; }
.d-no { font: 900 clamp(44px, 5.6vw, 88px)/.78 var(--f-latin); font-stretch: 62%; }
.d-mark .hex { --size: clamp(28px, 2.8vw, 42px); }
.d-meta { text-align: right; }
.d-date { font-weight: 900; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; }
.d-title {
  padding: 0 var(--m) clamp(14px, 1.8vw, 28px);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 70px);
  line-height: 1.2;
  letter-spacing: -.008em;
  word-break: auto-phrase;
}
.d-fig { width: 100%; aspect-ratio: 21 / 9; }
.d-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 24px;
  padding: clamp(24px, 3vw, 52px) var(--m);
}
.d-summary {
  grid-column: 1 / 8;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.7;
  word-break: auto-phrase;
}
.d-summary a { font-size: .7em; overflow-wrap: anywhere; box-shadow: inset 0 -2px 0 var(--fg); }
.d-desc { grid-column: 8 / 13; }
.d-desc p { font-size: 15px; line-height: 1.9; }
.d-desc p + p { margin-top: .8em; }
.d-desc a { box-shadow: inset 0 -2px 0 var(--fg); }
.d-desc a:hover, .d-summary a:hover { background: var(--fg); color: var(--bg); }

.d-slides { padding: 12px var(--m) var(--m); }
.d-slides-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--g); margin-bottom: 10px; }
.d-slides-bar h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 38px); line-height: 1.2; }
.d-pager { display: flex; align-items: center; gap: 8px; font: 900 clamp(24px, 2.6vw, 40px)/1 var(--f-latin); font-stretch: 62%; }
.d-pager button { padding: 1px 8px 3px; font: inherit; font-stretch: 100%; }
.d-pager button:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.d-pager button:disabled { visibility: hidden; }
.d-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-page { position: relative; width: min(100%, calc(80svh * 16 / 9)); margin-inline: auto; min-height: 30svh; background: var(--w); cursor: e-resize; }
.d-page canvas { width: 100%; height: auto; filter: grayscale(1); transition: filter 2s linear; }
.d-slides.is-colored .d-page canvas { filter: none; }
.d-status { position: absolute; inset: 0; display: grid; place-items: center; background: var(--w); color: var(--k); }
.d-status[hidden] { display: none; }

.d-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--g); padding: 0 var(--m) clamp(28px, 3.6vw, 56px); }
.d-gallery img { width: 100%; height: auto; }

.d-tech { padding: clamp(24px, 3vw, 52px) var(--m); }
.d-sec {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-top: 10px;
  border-top: var(--bar) solid var(--fg);
}
.d-sec + .d-sec { margin-top: clamp(22px, 2.8vw, 40px); }
.d-sec-head { grid-column: 1 / 5; }
.d-sec-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 38px); line-height: 1.2; word-break: auto-phrase; }
.d-sec-head p { margin-top: 4px; text-transform: uppercase; }
.d-sec-body { grid-column: 5 / 13; }
.d-list { counter-reset: n; }
.d-list li { position: relative; padding: 9px 0 9px 3em; border-top: 1px solid var(--fg); font-size: 15px; line-height: 1.8; }
.d-list li:first-child { border-top: 0; padding-top: 0; }
.d-list li::before { content: "—"; position: absolute; left: 0; font: 500 10.5px/2.6 var(--f-mono); font-stretch: 75%; }
ol.d-list li { counter-increment: n; }
ol.d-list li::before { content: counter(n, decimal-leading-zero); }

.d-nav { display: grid; grid-template-columns: 1fr 1fr; background: var(--k); color: var(--w); }
.d-nav a:hover { background: var(--w); color: var(--k); }
.d-nav-next { grid-column: 1 / -1; display: block; padding: clamp(16px, 2vw, 32px) var(--m) clamp(20px, 2.6vw, 42px); }
.d-nav-label { display: block; margin-bottom: 8px; }
.d-nav-title { display: block; font-family: var(--f-display); font-size: clamp(26px, 4vw, 64px); line-height: 1.2; word-break: auto-phrase; }
.d-nav-sub { padding: 12px var(--m); border-top: 2px solid var(--w); font-weight: 900; font-size: 14px; }
.d-nav-sub + .d-nav-sub { border-left: 2px solid var(--w); }
.d-none { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: var(--m); }
.d-none .d-title { padding: 0; }

/* ===== 画面幅: タブレット ===== */
@media (max-width: 1000px) {
  .row-title { grid-column: span 6; }
  .row-cat { grid-column: span 3; }
  .row-body .work-fig { grid-column: 1 / 8; }
  .row-body > div { grid-column: 8 / 13; }
}
@media (max-width: 820px) {
  .ch-record { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .skill-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-label { grid-column: 1 / -1; margin-bottom: 2px; }
  .wall-items { grid-column: 1 / -1; }
  .span-date { grid-column: 1 / 4; }
  .span-main { grid-column: 4 / 9; }
  .span-bar { grid-column: 9 / 13; }
  .gantt-axis { left: calc((100% + var(--g)) * 8 / 12); }
  .span-body { margin-left: calc((100% + var(--g)) / 4); width: calc((100% + var(--g)) * 5 / 12 - var(--g)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 721px) and (max-width: 820px) {
  .span-body {
    margin: 0;
    width: calc((100% + var(--g)) * 8 / 12 - var(--g));
    padding-left: calc((100% + var(--g)) / 4);
  }
}

/* ===== 縦長の画面: 表紙は「乾」を上、顔を下に置き、文章は写真から出す ===== */
@media (max-aspect-ratio: 1/1) {
  .hero-sheet { grid-template-rows: var(--nav-h) minmax(0, 1fr) auto auto; }
  .hero-copy { position: static; grid-row: 3; width: auto; margin: 12px var(--m) 0; }
  .hero-copy p { margin-bottom: .5em; }
  .hero-eyebrow { display: none; }
  .hero-name { grid-row: 4; margin-top: 4px; }
}

/* ===== 画面幅: スマホ ===== */
@media (max-width: 720px) {
  .nav-index, .nav-tag { display: none !important; }
  .nav-open { display: block; }

  .hero { height: 125svh; }
  .kan { --size: 118vw; }
  .kan i { align-items: flex-start; justify-content: center; }
  .hero-photo { left: 0; top: 40%; width: 100%; height: 60%; }
  .hero-lede { font-size: 14px; line-height: 1.75; }

  .plate { height: clamp(150px, 24svh, 220px); }
  .plate-label h2 { grid-column: 1 / 7; }
  .plate-label b { grid-column: 7 / 9; }
  .plate-label .hex { grid-column: 9 / 11; }
  .plate-name { display: none; }
  .plate-en { grid-column: 11 / 13; }

  .about-fig { grid-column: 1 / 10; }
  .about-lead { grid-column: 10 / -1; }
  .about-lead p { font-size: 17px; line-height: 1.9; }
  .spec { grid-column: 1 / -1; grid-template-rows: none; margin-top: 18px; }
  .spec dd { font-size: 18px; }

  .work { margin-bottom: 72px; }
  .work-fig.ls { grid-column: 1 / -1 !important; grid-row: auto !important; margin-inline: calc(-1 * var(--m)) !important; aspect-ratio: 4 / 3 !important; order: 2; }
  .work-no { grid-column: 1 / 8 !important; grid-row: 1 !important; font-size: 37vw !important; color: var(--fg) !important; mix-blend-mode: normal !important; margin: 0 0 14px !important; justify-self: start !important; }
  .work-hex { grid-column: 9 / 13 !important; grid-row: 1 !important; justify-self: end !important; color: var(--fg) !important; mix-blend-mode: normal !important; margin: 0 !important; --size: 40px; }
  .work-title { grid-column: 1 / -1 !important; grid-row: auto !important; order: 3; margin: -1.1em 0 0 !important; font-size: 9vw !important; align-self: auto !important; }
  .work-body { grid-column: 1 / -1 !important; grid-row: auto !important; order: 4; margin-top: 16px !important; }

  .row summary { grid-template-columns: 34px 24px 1fr 18px; column-gap: 8px; padding-inline: 4px; }
  .row-no, .row .hex, .row-title, .row-x { grid-column: auto; }
  .row-no { font-size: 28px; }
  .row-cat { display: none; }
  .row-body { display: block; padding-inline: 0; }
  .row-body > div { margin-top: 14px; padding-inline: 4px; }

  .span summary, .span-row { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding-block: 7px; }
  .span-date, .span-main, .span-bar { grid-column: 1 / -1; padding-left: 0; }
  .gantt-axis { left: 0; }
  .gantt-axis span { bottom: auto; height: 18px; }
  .gantt-axis span.is-today { display: none; }
  .gantt { padding-bottom: 0; }
  .span-body { margin-left: 0; width: auto; }

  .colophon-cr, .colophon-text { grid-column: 1 / -1; }

  .d-fig { aspect-ratio: 16 / 9; }
  .d-summary, .d-desc { grid-column: 1 / -1; }
  .d-sec-head, .d-sec-body { grid-column: 1 / -1; }
  .d-sec-head { margin-bottom: 10px; }
  .d-gallery { grid-template-columns: minmax(0, 1fr); }
  .d-page { cursor: default; }
}

@media (max-width: 540px) {
  .skill-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 動きを好まない設定 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .plate-bars i { transform: none; }
  .hex i::before, .hex i::after, .row-x::after { transition: none; }
  .js .span-bar i { transition: none; transform: none; }
  .span-cursor, .span-body { animation: none; }
  .js .ls.to-color img { visibility: visible; }
  .ls.to-color canvas { display: none; }
  .d-page canvas { filter: none; transition: none; }
}