/* 日本語の折り返し制御。文節単位で折り返し(auto-phrase)、禁則を厳格化(line-break)した上で、
   段落末尾の孤立行を抑える(pretty)。未対応ブラウザでは通常の折り返しに落ちるだけで壊れない。
   個々の要素にインラインで書かれてはいたが指定漏れがあり（見出し・職務経歴の箇条書き・
   StreamNote ページの Spec カード）、そこだけ「自動で拾/う。」「文字起/こし」のように
   語中で割れていた。ページ間で挙動を揃えるため、正はここに置く。
   text-wrap:balance は使わない。auto-phrase の文節境界を無視して語中で割るため。 */
h1, h2, h3, p, li, dt, dd {
  word-break: auto-phrase;
  line-break: strict;
}

h1, h2, h3, p, li {
  text-wrap: pretty;
}

/* auto-phrase が幅によって文節境界を取り落とすことがあるので、割れてほしくない語を個別に守る */
.nw {
  white-space: nowrap;
}

/* 視覚上は非表示のまま支援技術へ公開する（label / sr-only 見出し用） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードフォーカスの可視化。ブラウザ既定のリング色はページの配色を考慮せず
   （Chrome はライト向けのほぼ黒いリング色を使う）、暗背景ではほとんど視認できない。
   このサイトは明暗どちらの背景も持ち、単色では全背景を満たせない。暗背景 #141416 が
   リング輝度に L>=0.121 を要求して緑 #297d58 の暗側（L<=0.020）を潰し、残る緑の明側
   （L>=0.575）は白カードの上限 L<=0.300 と矛盾するため。
   そこで二重リングにする。outline-offset の隙間に box-shadow の暗色帯が入るので、
   暗背景では #f4f2ec の輪が、明背景では #141416 の輪が立つ。背景ごとの色分けは不要になる。
   forced-colors では box-shadow が none に強制され outline だけが残るため、
   可視側の輪を outline に割り当てている（入れ替えるとハイコントラストでリングが消える） */
:focus-visible {
  outline: 2px solid #f4f2ec;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #141416;
}

/* ナビは横溢れ用に overflow-x:auto を持つが、これは overflow-y も auto に変換するため、
   リンクの高さが親と同じだとフォーカスリングが上下でクリップされる（左右の縦線だけが残る）。
   リング分（offset 2px + 幅 2px）の余地を padding で作り、negative margin で位置を戻す */
.nav-links {
  padding: 4px;
  margin: -4px;
  /* 横スクロールできること自体は仕様だが、スクロールバーが出ると帯が見えて崩れて見えるので隠す。
     操作性は残る（タッチのスワイプ・トラックパッドの横スクロールはそのまま効く）。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

/* 溢れている向きの端をフェードさせ、「切れている」ではなく「続きがある」と読めるようにする。
   data-fade は main.js がスクロール位置に応じて付け替える（溢れていなければ属性ごと none）。
   端までスクロールするとその側のフェードは消えるので、フォーカスリングが霞んだままにはならない。 */
.nav-links[data-fade="right"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.nav-links[data-fade="left"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}

.nav-links[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* hover / focus rules (DC の style-hover / style-focus をクラス化) */

.nav-link {
  white-space: nowrap;
  /* WCAG 2.2 の Target Size (Minimum) は 24x24 CSS px。文字だけだと高さ 16〜19px しかないため
     padding で確保する。negative margin は使わない（親の overflow-x でクリップされるため）。 */
  display: inline-block;
  padding-block: 4px;
}

.nav-link:hover {
  color: #f4f2ec;
  opacity: 1;
}

/* 単独で置かれるリンクは WCAG 2.2 の Target Size (Minimum) 24x24 を満たすよう縦の余白で稼ぐ
   （文中のインラインリンクは同基準の例外なので対象外）。 */
.gh-link,
.contact-link {
  display: inline-block;
  padding-block: 6px;
}

.gh-link:hover {
  color: #f4f2ec;
  opacity: 1;
}

/* インライン border だと :hover の border-color を常に上書きしてしまうため、平常時の border はここで定義する */
.project-card-amenbo,
.project-card-bpsr,
.project-card-streamnote {
  border: 1px solid rgba(244, 242, 236, .09);
}

.project-card-amenbo:hover {
  border-color: #33996c;
  opacity: 1;
}

.project-card-bpsr:hover {
  border-color: #7e9c34;
  opacity: 1;
}

.project-card-streamnote:hover {
  border-color: #33996c;
  opacity: 1;
}

.contact-link:hover {
  color: #fff;
  opacity: 1;
}

/* デザイン原本では textarea に style-focus 指定なし。指定漏れと判断し input と統一 */
.form-field:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .2);
}

/* bot 対策のハニーポット欄。display:none は bot に無視されうるため、視覚上のみ画面外へ退避 */
.hp-field {
  position: absolute;
  left: -9999px;
}

.submit-btn:hover {
  background: #7e9c34;
  opacity: 1;
}

/* 狭い画面ではロゴの文字部分を視覚的に隠してマークだけにする。ナビ項目に回せる幅が約 60px 増え、
   横スクロールで隠れる項目を減らせる。読み上げには残す（.sr-only と同じ手法）。 */
@media (max-width: 480px) {
  .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}