/* =========================================================
   KUWASTUDIO ポートフォリオサイト 共通CSS（案A「藍と紙と、タグ」）
   - 色・書体・余白・動きのトークンは :root に集約（方向性メモ 5-1）
   - 非表示状態は html.js[data-state] と html.io .reveal の下にだけ書く
     （.js は head が付ける＝4秒の保険で ready に戻る。.io は site.js が実際に走ったときだけ付く＝
       site.js が壊れていれば付かず、出現待ちの要素とヘッダー札は最初から全部見える）
   ========================================================= */

:root {
  /* 色（2026-09-07 本人決定「黒寄りのグレー＋蛍光イエロー」）：黒に近いグレーの地に紙の札。糸と大きな文字だけ蛍光イエロー */
  --c-ground:  #121214;   /* body の地色（面の隙間から見える色）・遷移の面 */
  --c-paper:   #1E1E21;   /* 面（plane）。地より一段明るいグレー */
  --c-paper-2: #ECEAE3;   /* 札の紙 */
  --c-brand:   #EDEBE4;   /* 面の上の文字（見出し・ラベル・本文） */
  --c-ink:     #EDEBE4;   /* 面の上の長文 */
  --c-display: #E4FF3F;   /* 蛍光イエロー：ワードマーク・セクション見出し・大きな札 */
  --c-thread:  #E4FF3F;   /* 糸と結び目 */
  --c-muted:   #9A9A94;   /* 面の上の補助テキスト（#1E1E21 上 約5:1） */
  --c-line:    rgba(26, 26, 26, 0.2);        /* 札の縁・穴のリング（札の墨の透過） */
  --c-paper-line: rgba(237, 235, 228, 0.22); /* 面と地色系の面の縁（薄い明線） */

  /* 役割別トークン */
  --c-surface-brand:    #1E1E21;   /* 地色系の面（フッター・メニュー・札の裏面） */
  --c-on-ground:        #EDEBE4;   /* 地色系の面の上の文字 */
  --c-accent-on-ground: #E4FF3F;   /* 地色系の面の上の印（現在地・ティッカーの点） */
  --c-thread-ground:    #E4FF3F;   /* 地色の上を通る糸（ヘッダー札の糸・結び目） */
  --c-tag-ink:          #1A1A1A;   /* 札の中の文字・線 */
  --c-tag-text:         #333330;   /* 札の中の本文 */
  --c-tag-muted:        #5F5F58;   /* 札の中の補助テキスト（紙の上 約5.4:1） */
  --c-tag-accent:       #1A1A1A;   /* 札の中の印（hover の矢印） */
  --c-thread-cta:       #E4FF3F;   /* 札型ボタンの糸 */

  /* 書体 */
  --font-display: "Bebas Neue", "Bebas Neue Fallback", "Oswald", "Noto Sans JP", sans-serif;   /* ワードマーク・セクション見出し・番号（1ウェイトの定番コンデンス） */
  --font-en: "Oswald", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;      /* ラベル・ナビ・札の文字・ボタン（和文が混ざる箇所だけ Noto に落ちる） */
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --ls-label: 0.12em;
  --ls-ja: 0.05em;

  /* 文字サイズ：この4段だけ */
  --fs-xl:    clamp(72px, 16.3vw, 340px); /* Bebas Neue は幅が細いので 16.3vw。1440px で約232px＝「KUWASTUDIO」のインク幅が横幅の約65% */
  --fs-h:     clamp(26px, 4.4vw, 72px);   /* 1440px で約63px。キャッチ1行目が中央の下げ札の下に潜らない大きさ */
  --fs-body:  15px;
  --fs-label: 12px;

  /* 寸法 */
  --gutter: clamp(16px, 3.5vw, 50px);          /* 面と画面端の隙間 */
  --gap-plane: clamp(10px, 1.2vw, 16px);       /* 面と面の隙間（藍が見える） */
  --pad-plane: clamp(24px, 4vw, 64px);         /* 面の内側の余白 */
  --radius-plane: 8px;
  --radius-tag: 2px;
  --space-section: clamp(96px, 14vw, 200px);
  --space-h2: 64px;
  --measure: 40em;

  /* 動き */
  --ease-swing: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out:   cubic-bezier(0.4, 0.4, 0, 1);
  --dur-reveal: 0.6s;

  /* オープニングの遅延（秒数を変えるときはここだけ触る） */
  --t-mark:  0.2s;
  --t-nav:   0.6s;
  --t-tag:   0.9s;
  --t-catch: 1.5s;
}

/* ワードマークのフォールバック書体（幅を Bebas Neue に寄せる） */
@font-face {
  font-family: "Bebas Neue Fallback";
  src: local("Arial Narrow"), local("Impact"), local("Roboto");
  size-adjust: 88%;
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-brand);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: var(--ls-ja);
  font-feature-settings: "palt";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
::selection { color: #141414; background: var(--c-display); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* 欧文ラベル（ナビ・札・ボタン・年号・フッター） */
.label {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.muted { color: var(--c-muted); }
.prose { max-width: var(--measure); }
.prose--long { color: var(--c-ink); }   /* 3行を超える本文 */

/* 読込直後に白面が現れる（全ページ共通・0.3s） */
html.js body { animation: body-in 0.3s var(--ease-out) both; }
@keyframes body-in { from { opacity: 0; } to { opacity: 1; } }

/* 内部リンク遷移：藍の面が下から被さる */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--c-ground);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
  transition: clip-path 0.35s var(--ease-swing);
}
html.is-leaving body::after { clip-path: inset(0); }

/* ---------- 面（plane） ---------- */
.plane {
  position: relative;
  margin: var(--gap-plane) var(--gutter) 0;
  background: var(--c-paper);
  border-radius: var(--radius-plane);
  padding: var(--space-section) var(--pad-plane) calc(var(--space-section) * 0.8);
}
main > .plane:first-child { margin-top: var(--gutter); }
.plane--footer {
  margin: var(--gap-plane) var(--gutter) var(--gutter);
  background: var(--c-surface-brand);
  color: var(--c-on-ground);
  border: 1px solid var(--c-paper-line);
  border-radius: var(--radius-plane);
  padding: var(--pad-plane);
}

/* セクション見出し（英字1語・静止・縁取り無し）＋和文の添え字 */
.h2-big {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-display);
}
.menu .h2-big { color: inherit; }   /* メニュー（地色系の面）の中では地色の上の文字色 */
.h2-wrap { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: var(--space-h2); }
.h2-wrap .label { color: var(--c-muted); }

/* ---------- 札（tag）：穴・赤糸の結び目 ---------- */
.tag {
  position: relative;
  display: block;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tag);
  color: var(--c-tag-ink);
  text-align: left;
}
/* 穴（直径10px・補強リング付き・上端中央） */
.tag::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: inset 0 0 0 1.5px var(--c-line);
}
/* 赤糸の結び目（直径10px・穴の位置・中に糸の輪） */
.tag::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-paper-2) 0 1.6px, var(--c-thread) 2.2px);
}
/* 糸（1px・上へ伸びる） */
.tag__thread {
  display: block;
  width: 1px;
  margin: 0 auto;
  background: var(--c-thread);
}

/* ---------- 札型ボタン（cta） ---------- */
.cta {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;                    /* 糸の長さぶん */
  padding: 8px 18px 12px;
  min-width: 132px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tag);
  color: var(--c-tag-ink);
  text-align: center;
  transform: rotate(var(--tilt, -1.5deg));   /* 傾きは札ごとに --tilt で変える（実物の札は1枚ずつ違う） */
  transform-origin: 50% -16px;         /* 糸の上端＝吊り元 */
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
/* 糸（1px×16px・上端から吊る） */
.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  width: 1px;
  height: 16px;
  background: var(--c-thread-cta);
  transform-origin: 50% 0;
  transition: transform 0.3s var(--ease-out);
}
.cta__hole {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.cta__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* 矢印は文字ではなく線で描く（Barlow の「→」は短い横棒にしか見えない）。
   SVG をマスクにして色は currentColor（hover で赤糸の色へ） */
.cta__label::after {
  content: "";
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 5h13M8.5 .5 13 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 5h13M8.5 .5 13 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.3s var(--ease-out);
}
.cta--ext .cta__label::after { transform: rotate(-45deg); }   /* 外部リンクは右上向き */
.cta__pw {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: var(--radius-tag);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.cta--big { min-width: 260px; padding: 14px 32px 18px; }
.cta--brand { background: var(--c-surface-brand); color: var(--c-on-ground); border-color: var(--c-surface-brand); }
.cta--brand .cta__hole { background: var(--c-on-ground); box-shadow: none; }

@media (hover: hover) {
  .cta:hover { transform: translateY(-4px) rotate(0deg); }
  .cta:hover::before { transform: scaleY(1.25); }
  .cta:hover .cta__label::after { background-color: var(--c-tag-accent); }
}
.cta:focus-visible { outline: 2px solid var(--c-thread); outline-offset: 3px; }

/* ---------- ヘッダー札（固定部品はこれ1つ） ---------- */
.tag-header {
  position: fixed;
  top: 0;
  right: var(--gutter);
  z-index: 50;
  width: 150px;
  padding-top: 14px;                       /* 糸の長さ */
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-swing), opacity 0.3s;
}
.tag-header::before {                      /* 糸 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--c-thread-ground);
}
.tag-header__tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 10px 14px 4px;
  background: var(--c-surface-brand);
  color: var(--c-on-ground);
  border: 1px solid var(--c-paper-line);
  border-radius: var(--radius-tag);
}
.tag-header__tag::before {                 /* 穴 */
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-ground);
}
.tag-header__tag::after {                  /* 結び目 */
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-surface-brand) 0 1.2px, var(--c-thread-ground) 1.8px);
}
.tag-header__mark {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  line-height: 1;
}
.tag-header__menu {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 0 6px 8px;
}
.tag-header__menu:focus-visible { outline: 2px solid var(--c-thread); outline-offset: 2px; }
/* HOME だけヒーロー内では上に隠す（site.js が実際に走った時だけ） */
html.io body.is-home .tag-header:not(.is-visible) { transform: translateY(-110%); }

/* ---------- 全画面メニュー（dialog） ---------- */
.menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: var(--c-surface-brand);
  color: var(--c-on-ground);
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}
.menu[open] { display: flex; animation: menu-in 0.4s var(--ease-out) both; }
.menu::backdrop { background: transparent; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu__close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 10px 0;
}
.menu__close:focus-visible { outline: 2px solid var(--c-on-ground); outline-offset: 3px; }
.menu__list { display: grid; gap: 4px; margin-bottom: var(--space-h2); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-paper-line);
}
.menu__list .h2-big { font-weight: 400; }
.menu__list a[aria-current="page"] .h2-big::before { content: "\25CF\2009"; color: var(--c-accent-on-ground); font-size: var(--fs-label); vertical-align: middle; }
.menu__list .label { color: var(--c-on-ground); opacity: 0.7; }
.menu__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- ヒーロー ---------- */
.hero {
  min-height: calc(100vh - var(--gutter) * 2);
  min-height: calc(100dvh - var(--gutter) * 2);
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad-plane) var(--pad-plane) calc(var(--pad-plane) * 0.75);
}
.hero__catch {
  grid-area: 1 / 1 / 2 / 3;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: var(--fs-h);
  line-height: 1.3;
  letter-spacing: var(--ls-ja);
  padding-right: 30%;                    /* 中央の下げ札・右上の札型ナビとの重なりを避ける */
}
.hero__nav {
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  display: grid;
  gap: 2px;
  justify-items: end;
  z-index: 1;
}
.hero__nav .cta { width: 200px; }
.hero__nav .cta:nth-child(2) { --tilt: 1deg; }
.hero__nav .cta:nth-child(3) { --tilt: -2deg; }
.hero__mark { grid-area: 3 / 1 / 4 / 3; align-self: end; min-width: 0; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 0.8;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  margin-left: -0.03em;
  color: var(--c-display);
}
.hero__skills {
  grid-area: 3 / 2 / 4 / 3;
  align-self: end;
  justify-self: end;
  text-align: right;
  color: var(--c-brand);
  margin-bottom: -0.45em;                /* 行間1.9の下側ハーフレディング分を引き、ワードマークのインク下端と揃える */
}
.hero__skills li { line-height: 1.9; }

/* 中央の下げ札（画面上端から糸で吊られ、ゆっくり揺れる）
   位置はナビ札の左端基準（右揃え）。幅150pxの縦長 */
.tag-hang {
  position: absolute;
  top: calc(-1 * var(--gutter));                       /* 面の上の藍の隙間を糸が横切る＝画面上端から吊る */
  right: calc(var(--pad-plane) + 200px + 32px);        /* ナビ札（幅200px）の左に32px空ける */
  width: 150px;
  transform-origin: 50% 0;
  z-index: 1;
}
.tag-hang .tag__thread {
  position: relative;
  z-index: 1;
  height: calc(clamp(96px, 20vh, 200px) + var(--gutter) + 14px);   /* +14px は結び目まで糸を通す分 */
  margin-bottom: -14px;
}
.tag--name {
  min-height: 220px;
  padding: 40px 16px 20px;
  display: flex;
  flex-direction: column;
}
.tag--name .label { display: block; }
.tag--name .tag__name { font-weight: 700; letter-spacing: 0.15em; margin-bottom: 8px; }
.tag--name .tag__sub { color: var(--c-tag-muted); }
.tag--name .tag__place { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--c-line); }
.hero-end { height: 1px; margin: 0; }

/* ---------- できること（ジグザグ3項目・それぞれが1枚の札） ---------- */
.wid { display: grid; gap: 28px; }
.wid__item {
  display: grid;                          /* .tag の display:block を上書き */
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-plane);
  align-items: start;
  padding: 44px var(--pad-plane) 36px;
}
/* 傾きは transform ではなく rotate プロパティで（.reveal の transform と干渉させない） */
.wid__item:nth-child(odd) { rotate: -0.4deg; }
.wid__item:nth-child(even) { rotate: 0.4deg; }
.wid__item:nth-child(even) .wid__body { grid-column: 1; grid-row: 1; }
.wid__item:nth-child(even) .wid__num { grid-column: 2; grid-row: 1; text-align: right; }
.wid__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.wid__num .label { display: block; margin-top: 12px; color: var(--c-tag-muted); }
.wid__body h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 12px; }
.wid__body p { max-width: var(--measure); color: var(--c-tag-text); }   /* 階層は色で作る（見出し＝札の文字色・本文＝インク） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chips li {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 10px 6px;
  border: 1px solid var(--c-tag-ink);
  border-radius: var(--radius-tag);
}

/* ---------- WORKS ---------- */
.works { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-plane); }
.work { position: relative; }
.work--hero { grid-column: 1 / -1; }
.work__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-tag);
  background: var(--c-paper-2);
  aspect-ratio: 16 / 10;
}
.work--hero .work__media { aspect-ratio: 2 / 1; background: #00001B; }   /* GOGO の背景色（実測） */
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.work--hero .work__media img { object-fit: contain; }
/* 作品の札（カード上端から20pxの糸で吊る。クリックで裏返る。穴と結び目は両面に描く） */
.tag--work {
  position: absolute;
  top: 20px;
  left: 24px;
  width: 208px;
  display: grid;
  align-items: start;                     /* 表裏それぞれ自身の高さ（表面が裏面の高さまで伸びない） */
  padding: 0;
  background: transparent;
  border: 0;
  transform: rotate(-1.5deg);
  transform-origin: 50% -20px;            /* 糸の上端＝吊り元 */
  transition: transform 0.6s var(--ease-swing);
  transform-style: preserve-3d;
  z-index: 2;
}
.tag--work::before, .tag--work::after { content: none; }
.tag--work .tag__thread {
  position: absolute;
  left: 50%;
  top: -20px;
  height: 20px;
  margin: 0;
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ease-swing);
}
.tag__face {
  position: relative;
  grid-area: 1 / 1;
  display: block;
  padding: 22px 16px 14px;
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tag);
  backface-visibility: hidden;
  transform: translateZ(1px);
}
.tag__face::before {
  content: "";
  position: absolute; top: 7px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line);
}
.tag__face::after {
  content: "";
  position: absolute; top: 6px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: radial-gradient(circle, var(--c-paper-2) 0 1.2px, var(--c-thread) 1.8px);
}
.tag__face--back { transform: rotateY(180deg) translateZ(1px); background: var(--c-surface-brand); border-color: var(--c-surface-brand); color: var(--c-on-ground); }
.tag__face--back::after { background: radial-gradient(circle, var(--c-surface-brand) 0 1.2px, var(--c-thread-ground) 1.8px); }
.tag__face .label { display: block; }
.tag__face--front .tag__title { font-weight: 700; margin-bottom: 4px; }
.tag__face--front .tag__meta { color: var(--c-tag-muted); }
.tag__face--back .label + .label { margin-top: 2px; }
.tag--work.is-flipped { transform: rotate(0deg) rotateY(180deg); }
.tag--work:focus-visible { outline: 2px solid var(--c-thread); outline-offset: 3px; }
/* 鍵つきティザー：札は1カードに1枚。鍵の印は表面の PW チップと「Password required」の1行だけ */
.tag__face--front .tag__title .cta__pw { margin-left: 6px; vertical-align: 1px; }
.work__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-tag); }
.work__link:focus-visible { outline: 2px solid var(--c-thread); outline-offset: 3px; }
@media (hover: hover) {
  .work:hover .work__media img { transform: scale(1.03); }
  .work:hover .tag--work:not(.is-flipped) { transform: translateY(-4px) rotate(0deg); }
  /* 札が4px上がる分、糸は上端をカードの縁に残したまま短くなる（糸が張る） */
  .work:hover .tag--work:not(.is-flipped) .tag__thread { transform: translateY(4px) scaleY(0.8); }
  .tag--work:hover { transform: rotate(0deg) rotateY(180deg); }
  .work:hover .tag--work:hover { transform: rotate(0deg) rotateY(180deg); }
}

/* ---------- APPS（HOME）：画像なしの「棚」1段（GOGO の絵は WORKS の旗艦1回に限定。画像は /apps/ に譲る） ---------- */
.app {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pad-plane);
  align-items: end;
}
.app__body h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 8px; }
.app__body .label { color: var(--c-muted); }
.app__body p { max-width: var(--measure); margin-top: 8px; }
.app__links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }

/* ---------- OFFER / CONTACT ---------- */
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-plane); align-items: end; }
.offer__body p { max-width: var(--measure); }
.offer__steps { display: grid; gap: 8px; margin-top: 24px; color: var(--c-muted); }   /* 依頼の流れ3ステップ（ラベル段） */
.offer__cta { justify-self: end; }

/* ---------- ティッカー帯（唯一の流れる帯・装飾） ---------- */
.ticker {
  margin: var(--space-h2) 0 calc(var(--space-h2) - var(--gap-plane));
  overflow: hidden;
  color: var(--c-on-ground);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__track { display: inline-flex; animation: ticker 30s linear infinite; }
.ticker__track span { padding: 0 0.5em; display: inline-flex; align-items: center; gap: 1em; }
.ticker__track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent-on-ground); }
.ticker:hover .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- フッター ---------- */
.footer__row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.footer__mark { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h); line-height: 0.9; letter-spacing: 0.02em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__nav a { padding: 4px 0; border-bottom: 1px solid transparent; }
.footer__nav a[aria-current="page"] { border-bottom-color: var(--c-accent-on-ground); }
.footer__copy { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--c-paper-line); opacity: 0.8; text-transform: none; }   /* 「Kento Kuwahara」の大小混在を保つ */
@media (hover: hover) { .footer__nav a:hover { border-bottom-color: var(--c-on-ground); } }

/* ---------- 下層ページ ---------- */
.page-head { display: grid; gap: 24px; margin-bottom: var(--space-h2); justify-items: start; }
.page-head .prose { max-width: var(--measure); }
.list { display: grid; gap: var(--gap-plane); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.list .tag { padding: 28px 20px 20px; }
.list .tag h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 6px; }
.list .tag p { margin: 0; }
.list .tag .cta { margin-top: 28px; }   /* 本文と札型ボタンの糸の間を空ける */
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.wip { display: inline-block; padding: 2px 8px; border: 1px solid var(--c-line); border-radius: var(--radius-tag); color: var(--c-muted); }

/* ---------- 出現（site.js が走ったとき＝html.io だけ隠して、入ったら見せる） ---------- */
html.io .reveal {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
html.io .reveal.is-in { opacity: 1; transform: none; }
/* 札は降りたあと少し行き過ぎて戻る（揺れ戻り） */
html.io .cta.reveal { transform: translateY(-16px) rotate(0deg); transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); transition-duration: 0.5s; }
html.io .cta.reveal.is-in { transform: rotate(var(--tilt, -1.5deg)); }

/* ---------- 動き（reduce 指定が無いときだけ） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 下げ札の揺れ（常時ループ1つ目）。オープニング中は止め、ready（着地）と同時に揺れ始める */
  .tag-hang { animation: swing 5s ease-in-out 0s infinite; }
  html.js[data-state="loading"] .tag-hang, html.js[data-state="opening"] .tag-hang { animation-play-state: paused; }
  @keyframes swing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2.5deg); } 75% { transform: rotate(-2.5deg); } }

  /* オープニング：loading で隠し、opening で降りてくる。ready は既定と同じ */
  html.js[data-state="loading"] .wordmark { opacity: 0; transform: translateY(60px); }
  html.js[data-state="loading"] .hero__nav .cta { opacity: 0; transform: translateY(-40px) rotate(var(--tilt, -1.5deg)); }
  html.js[data-state="loading"] .tag-hang__in { opacity: 0; transform: translateY(-110%); }
  html.js[data-state="loading"] .hero__catch { clip-path: inset(0 100% 0 0); }

  html.js[data-state="opening"] .wordmark { animation: mark-up 0.6s var(--ease-out) var(--t-mark) both; }
  html.js[data-state="opening"] .hero__nav .cta { animation: cta-drop 0.4s var(--ease-swing) var(--t-nav) both; }
  html.js[data-state="opening"] .hero__nav .cta:nth-child(2) { animation-delay: calc(var(--t-nav) + 0.1s); }
  html.js[data-state="opening"] .hero__nav .cta:nth-child(3) { animation-delay: calc(var(--t-nav) + 0.2s); }
  html.js[data-state="opening"] .tag-hang__in { animation: tag-drop 0.6s var(--ease-swing) var(--t-tag) both; }
  html.js[data-state="opening"] .hero__catch { animation: catch-write 0.5s var(--ease-out) var(--t-catch) both; }

  @keyframes mark-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
  @keyframes cta-drop { from { opacity: 0; transform: translateY(-40px) rotate(var(--tilt, -1.5deg)); } to { opacity: 1; transform: rotate(var(--tilt, -1.5deg)); } }
  @keyframes tag-drop { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }
  @keyframes catch-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  html.io .reveal { transform: none; transition: opacity 0.3s; }
  .ticker__track { animation: none; }
  .cta, .tag--work, .work__media img, .tag-header, body::after { transition: none; }
  html.js body { animation: none; }
}

/* ---------- 背の低い画面（高さ680px以下のノートPC等）：下げ札を短くしてワードマークに触れないようにする ---------- */
@media (min-width: 760px) and (max-height: 680px) {
  .tag-hang .tag__thread { height: calc(clamp(72px, 14vh, 200px) + var(--gutter) + 14px); }
  .tag--name { min-height: 180px; padding-top: 34px; }
}

/* ---------- タブレット ---------- */
@media (max-width: 1023px) {
  .hero__nav .cta { width: 168px; }
  .hero__catch { padding-right: 26%; }
  .tag-hang { right: calc(var(--pad-plane) + 168px + 32px); }   /* ナビ札幅168pxに追随 */
  .hero__skills { grid-area: 2 / 2 / 3 / 3; align-self: end; margin-bottom: 24px; }
}

/* ---------- スマホ（〜759px） ---------- */
@media (max-width: 759px) {
  :root { --fs-xl: clamp(56px, 18vw, 80px); }   /* 390px幅で「KUWASTUDIO」が内幅350pxにぎりぎり収まる */
  .hero {
    min-height: 0;                        /* 100dvh に引き伸ばさない＝キャッチとできることの間の空白を作らず、次の面の上端を覗かせる */
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px 28px;
  }
  .hero__nav { order: 1; align-self: flex-start; justify-items: start; padding-right: 110px; }
  .hero__nav .cta { width: 168px; }
  .hero__catch { order: 2; padding-right: 0; max-width: none; margin-top: 8px; letter-spacing: 0; }   /* 390px幅で「〜が、」を1行に収める（内幅318px） */
  .hero__skills { order: 3; text-align: left; align-self: flex-start; margin-top: 8px; margin-bottom: 0; }
  .hero__mark { order: 4; align-self: stretch; }
  .tag-hang { right: 10px; width: 88px; }
  .tag-hang .tag__thread { height: calc(72px + var(--gutter) + 14px); }
  .tag--name { min-height: 140px; padding: 24px 10px 14px; }
  .tag--name .tag__name { letter-spacing: 0.1em; }
  .tag-header { right: 10px; }
  .wid__item, .wid__item:nth-child(even) .wid__body, .wid__item:nth-child(even) .wid__num { grid-template-columns: 1fr; grid-column: auto; grid-row: auto; text-align: left; }
  .wid__item { padding: 40px 20px 28px; }
  .works, .app, .offer { grid-template-columns: 1fr; }
  .offer__cta { justify-self: start; }
  .tag--work { width: 150px; left: 12px; }
  .tag__face { padding: 16px 12px 10px; }
  .ticker__track { animation-duration: 45s; }
  .menu__list .h2-big { font-size: var(--fs-h); }
}

/* ---------- 黒地ならではの部品ルール ---------- */
/* 「MAIL TO」の大きな札は蛍光イエロー（サイトで唯一の大きな黄色い面） */
.cta--brand { background: var(--c-display); color: #141414; border-color: var(--c-display); }
.cta--brand .cta__hole { background: var(--c-paper); }
/* ヘッダー札は紙の札（黒い服に付いた下げ札） */
.tag-header__tag { background: var(--c-paper-2); color: var(--c-tag-ink); border-color: var(--c-line); }
.tag-header__tag::before { background: var(--c-ground); }
.tag-header__tag::after { background: radial-gradient(circle, var(--c-paper-2) 0 1.2px, var(--c-thread) 1.8px); }
/* 面の縁を薄く出す（黒地に黒の面だと輪郭が消える） */
.plane { border: 1px solid var(--c-paper-line); }

/* ---------- 太字英字（ワードマーク・見出し・番号）の検討用スイッチ（2026-09-07）
   URL に ?font=anton / ?font=montserrat / ?font=futura / ?font=heavy を付けると切り替わり、端末に記憶される。
   決定後は選んだ書体を --font-display に焼き込み、このブロックと4ページの切替スクリプトを消す ---------- */
html[data-font="anton"] {
  --font-display: "Anton", "Noto Sans JP", sans-serif;   /* 1ウェイトのみ・極太・字面が正方形に近い */
}
html[data-font="montserrat"] {
  --font-display: "Montserrat", "Noto Sans JP", sans-serif;   /* 900・幾何学的サンセリフ・Bebas/Antonよりゆったりした比率 */
}
html[data-font="futura"] {
  /* 本物のFutura（Bauer社権利）はGoogle Fontsに無いため、Futuraを手本に作られたJostで代用。
     本物が欲しければ Adobe Fonts に「Futura PT」があり、本人のCC契約で使える（Adobe Fontsでキット作成→<link>を追加） */
  --font-display: "Jost", "Noto Sans JP", sans-serif;
}
html[data-font="heavy"] {
  --font-display: "Big Shoulders Display", "Noto Sans JP", sans-serif;   /* 900・Bebasより幅広で潰れた極太（4案の中で一番重い） */
}
html[data-font="montserrat"] .wordmark,
html[data-font="montserrat"] .h2-big,
html[data-font="montserrat"] .wid__num,
html[data-font="montserrat"] .footer__mark,
html[data-font="montserrat"] .ticker {
  font-weight: 900;              /* Montserratは900でも横幅が広いので字間を締める */
  letter-spacing: -0.01em;
}
html[data-font="futura"] .wordmark,
html[data-font="futura"] .h2-big,
html[data-font="futura"] .wid__num,
html[data-font="futura"] .footer__mark,
html[data-font="futura"] .ticker {
  font-weight: 700;              /* Jostは900だと逆に丸まるため、幾何学的な直線が残る700を使う */
  letter-spacing: 0.01em;
}
html[data-font="heavy"] .wordmark,
html[data-font="heavy"] .h2-big,
html[data-font="heavy"] .wid__num,
html[data-font="heavy"] .footer__mark,
html[data-font="heavy"] .ticker {
  font-weight: 900;
  letter-spacing: 0;
}
html[data-font="montserrat"] .wordmark { font-size: calc(var(--fs-xl) * 0.53); }   /* 実測：Montserrat 900は同じフォントサイズでBebasの約1.9倍幅が出るため大きく縮小 */
html[data-font="anton"] .wordmark { font-size: calc(var(--fs-xl) * 0.84); }        /* 実測：Antonは同じフォントサイズでBebasの約1.2倍幅が出るため縮小 */
html[data-font="futura"] .wordmark { font-size: calc(var(--fs-xl) * 0.57); }       /* 実測：Jost 700は同じフォントサイズでBebasの約1.7倍幅が出るため縮小 */
html[data-font="heavy"] .wordmark { font-size: calc(var(--fs-xl) * 0.83); }        /* 実測：Big Shoulders Display 900は同じフォントサイズでBebasの約1.2倍幅が出るため縮小 */