*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.7;font-size:16px;letter-spacing:.01em;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--teal-700);outline-offset:3px;}
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:8;
  background:linear-gradient(90deg,var(--teal-300),var(--teal-700));}
/* 背景Canvas(#backdrop, z:0)より前面にコンテンツを置く */
body > header,body > section,body > footer,body > hr{position:relative;z-index:1;}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal-700);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--teal-500);display:inline-block;}
/* キーボード用スキップリンク：フォーカス時のみ表示 */
.skip-link{position:absolute;left:8px;top:-48px;z-index:20;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.06em;background:var(--white);color:var(--teal-900);padding:.5rem .85rem;border-radius:6px;
  box-shadow:0 8px 20px -8px rgba(20,30,32,.4);transition:top .2s var(--ease-quint);}
.skip-link:focus{top:8px;}
/* セクション見出し：ティールのグラデで馴染ませる（少し小さく・切れ/重なり対策） */
.sec-h{display:inline-block;vertical-align:top;
  font-family:var(--serif-latin);font-weight:400;font-size:clamp(2rem,5.2vw,3.8rem);
  line-height:1.24;letter-spacing:.005em;margin:0 0 1.6rem;padding:.1em 0 .18em;white-space:nowrap;
  background:linear-gradient(120deg,var(--teal-500),var(--teal-900));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
/* 見出しのマスク登場：reveal に入ると左→右に塗り（clip-path）＋僅かに立ち上がる。
   clip-path は .sec-h 自身に適用＝グラデ文字と共存。display:inline-block でワイプ幅＝文字幅。
   観測対象は親 .reveal（面積あり）なので、過去のIO×面積ゼロclip-pathの不具合は起きない。 */
.reveal:not(.in) .sec-h{clip-path:inset(0 100% 0 0);transform:translateY(.16em);}
.reveal.in .sec-h{clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path 1s var(--ease-quint),transform 1s var(--ease-quint);}

/* カード登場（各カードが視界に入ると個別に出現） */
.cardfx{opacity:0;transform:translateY(42px) scale(.94);
  transition:opacity .7s ease, transform .85s var(--ease-quint);}
.cardfx.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.cardfx{transform:translateY(12px);transition-duration:.5s;}}
.about-bio{text-wrap:pretty;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-quint),transform .9s var(--ease-quint);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  /* C案: reveal は“軽いフェード”として残す（大きな動きは motion.js 側で抑制） */
  .reveal{transform:translateY(10px);transition-duration:.6s;}
  /* マスク見出し/本文ワイプは無効化＝最初から可視（不要なトランジションも止める） */
  .reveal:not(.in) .sec-h,.reveal.in .sec-h{clip-path:none;transform:none;transition:none;}
  .reveal:not(.in) .about-bio .bio-line,.reveal.in .about-bio .bio-line{clip-path:none;transform:none;transition:none;}
}