/* ═══════════════════════════════════════════════════════════════
   ピクセル・ポートフォリオ — スタイル
   Design Tokens（light / dark）+ 全コンポーネント
   border-radius は基本 0 / 影はハードシャドウ（ぼかし無し）
   ═══════════════════════════════════════════════════════════════ */

/* ─── Self-hosted fonts ─────────────────────────────────────── */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/vt323-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F;src:url("../assets/fonts/dotgothic16-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/dotgothic16-japanese-400-normal.woff2") format("woff2")}

/* ─── Reset ─────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

/* ─── Tokens (light) ────────────────────────────────────────── */
.pf-root{
  --bg:#eef4fc;--panel:#ffffff;--ink:#0d2540;--soft:#4a6a8f;--border:#0d2540;--brand:#003672;
  --accent:#003672;--accent-ink:#ffffff;--badge:#f2d579;--period:#79b2f2;--checker-a:#79b2f2;--checker-b:#eef4fc;
  --dot:rgba(13,37,64,0.13);
  --checker:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);
  --fdisp:'DotGothic16',monospace;--fbody:'DotGothic16',monospace;--fpix:'Press Start 2P','DotGothic16',monospace;
  color:var(--ink);
  font-family:var(--fbody);
  font-size:18px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:none;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1.6px,transparent 1.6px);
  background-size:22px 22px;
}
/* 英語時のフォント差し替え（JS が html[data-lang] を切替） */
html[data-lang="en"] .pf-root{
  --fdisp:'Press Start 2P','DotGothic16',monospace;
  --fbody:'VT323','DotGothic16',monospace;
}
/* グリッド背景 OFF */
.pf-root.pf-nogrid{--dot:transparent}

/* ─── Tokens (dark, OS 追従) ────────────────────────────────── */
@media (prefers-color-scheme: dark){
  .pf-root{
    --bg:#141417;--panel:#1c1e25;--ink:#e2e7e7;--soft:#838e9a;--border:#5f6579;--brand:#4f93d6;
    --accent:#4f93d6;--accent-ink:#141417;--badge:#1c1e25;--period:rgba(0,67,122,.32);
    --checker-a:#1c1e25;--checker-b:#141417;--dot:rgba(226,231,231,0.08);
  }
  .pf-root.pf-nogrid{--dot:transparent}
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes pf-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@keyframes pf-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ═══ HEADER / NAV ══════════════════════════════════════════ */
.pf-header{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:4px solid var(--border)}
.pf-header-inner{max-width:1080px;margin:0 auto;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 1.25rem;flex-wrap:wrap}
.pf-logo{font-family:var(--fpix);font-size:.75rem;color:var(--brand);text-decoration:none;white-space:nowrap}
.pf-nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
.pf-nav a{font-family:var(--fdisp);font-size:.95rem;text-decoration:none;padding:.35rem .1rem;border-bottom:3px solid transparent;color:var(--ink);white-space:nowrap}
.pf-nav a.pf-active{border-bottom-color:var(--brand);color:var(--brand)}
.pf-lang{font-family:var(--fpix);font-size:.6rem;padding:.5rem .7rem;background:var(--bg);color:var(--ink);border:2px solid var(--border);box-shadow:3px 3px 0 var(--border);cursor:pointer}
.pf-lang:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--border)}

/* ═══ HERO ══════════════════════════════════════════════════ */
.pf-hero{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:5rem 1.5rem}
.pf-hero-inner{max-width:980px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap-reverse;align-items:center;justify-content:space-between;gap:3rem}
.pf-hero-text{flex:1 1 360px;min-width:300px}
.pf-kicker{font-family:var(--fpix);font-size:.65rem;color:var(--accent);letter-spacing:.05em;margin:0 0 1rem}
.pf-name{font-family:var(--fdisp);font-weight:400;font-size:clamp(1.9rem,5.5vw,3rem);line-height:1.4;margin:0 0 .8rem}
.pf-caret{display:inline-block;width:.5ch;height:.85em;background:var(--accent);margin-left:.15em;vertical-align:-1px;animation:pf-blink 1.1s steps(1) infinite}
.pf-role{color:var(--accent);font-size:1.3rem;margin:0 0 1rem}
.pf-bio{color:var(--soft);font-size:1.25rem;line-height:1.7;margin:0 0 1.6rem;max-width:34ch}
.pf-hero-links{display:flex;flex-wrap:wrap;gap:.75rem}
.pf-hero-avatar{flex:0 0 auto;display:flex;justify-content:center;width:100%;max-width:280px;margin:0 auto}
.pf-avatar-frame{position:relative;width:min(260px,72vw);aspect-ratio:1/1;background-image:var(--checker);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:var(--checker-b);border:4px solid var(--border);box-shadow:7px 7px 0 var(--badge);overflow:hidden}
.pf-avatar-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.pf-avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.pf-avatar-cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--fpix);font-size:.5rem;letter-spacing:1px;color:var(--soft);background:color-mix(in srgb,var(--panel) 72%,transparent);padding:6px 4px;border-top:2px solid var(--border)}
.pf-scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);font-family:var(--fpix);font-size:.55rem;color:var(--soft);animation:pf-bounce 2.2s ease-in-out infinite}

/* ═══ SECTION 共通 ══════════════════════════════════════════ */
.pf-section{max-width:920px;margin:0 auto;padding:4.5rem 1.5rem;border-top:4px dashed var(--border);scroll-margin-top:80px}
.pf-sec-kicker{font-family:var(--fpix);font-size:.65rem;color:var(--accent);margin:0 0 .75rem}
.pf-sec-title{font-family:var(--fdisp);font-weight:400;font-size:clamp(1.3rem,3.5vw,1.9rem);margin:0 0 .6rem}
.pf-sec-lead{color:var(--soft);font-size:1.15rem;max-width:560px;margin:0 0 2rem}

/* ═══ ピクセルボタン（共通） ════════════════════════════════ */
.pf-btn{font-family:var(--fdisp);font-size:.95rem;color:var(--ink);background:var(--panel);border:3px solid var(--border);box-shadow:3px 3px 0 var(--border);padding:.6em 1em;text-decoration:none;display:inline-block;cursor:pointer}
.pf-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--border)}
.pf-btn-sm{padding:.5em .8em;font-size:.85rem}
.pf-btn-accent{color:var(--accent-ink);background:var(--accent)}

/* ═══ HIGHLIGHTS ════════════════════════════════════════════ */
.pf-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;margin-bottom:2.5rem}
.pf-badge{background:var(--badge);border:3px solid var(--border);box-shadow:3px 3px 0 var(--border);padding:1rem .75rem;text-align:center}
.pf-badge-val{display:block;font-family:var(--fpix);font-size:1.05rem;color:var(--ink);margin-bottom:.45rem}
.pf-badge-lb{font-size:.9rem;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}

/* ═══ カード（核） ══════════════════════════════════════════ */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.pf-card{background:var(--panel);border:3px solid var(--border);box-shadow:5px 5px 0 var(--border);display:flex;flex-direction:column;transition:transform .1s,box-shadow .1s}
.pf-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.pf-card-img{width:100%;aspect-ratio:16/9;border-bottom:3px solid var(--border);background-image:var(--checker);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--checker-b);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pf-card-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.pf-card-noimg{font-family:var(--fpix);font-size:.6rem;color:var(--soft)}
.pf-card-body{padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pf-pickup{align-self:flex-start;font-family:var(--fpix);font-size:.55rem;background:var(--badge);color:var(--ink);padding:.35em .6em}
.pf-period{align-self:flex-start;background:var(--period);color:var(--ink);font-size:.95rem;padding:.15em .55em}
.pf-card-title{font-family:var(--fdisp);font-weight:400;font-size:1.1rem;line-height:1.4;margin:0}
.pf-card-sub{color:var(--soft);font-size:1.05rem;margin:0}
.pf-card-desc{font-size:1.05rem;margin:0}
.pf-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.pf-tag{font-family:var(--fdisp);font-size:.85rem;border:2px solid var(--border);padding:.2em .55em;background:var(--bg)}
.pf-card-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.85rem}
.pf-tags-bottom{margin-top:auto;padding-top:.5rem}
.pf-toggle-wrap{text-align:center;margin-top:1.6rem}

/* ═══ RESEARCH（横型カード） ════════════════════════════════ */
.pf-research-list{display:flex;flex-direction:column;gap:1.5rem}
.pf-research-card{background:var(--panel);border:3px solid var(--border);box-shadow:3px 3px 0 var(--border);display:grid;grid-template-columns:140px 1fr}
.pf-research-period{background:var(--period);border-right:3px solid var(--border);padding:1rem .75rem;font-family:var(--fpix);font-size:.6rem;color:var(--ink);line-height:1.6}
.pf-research-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.pf-research-title{font-family:var(--fdisp);font-weight:400;font-size:1.05rem;line-height:1.45;margin:0}
.pf-research-desc{font-size:1.05rem;margin:0}
.pf-research-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.25rem}

/* ═══ CONTACT ═══════════════════════════════════════════════ */
.pf-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.pf-contact-card{display:flex;flex-direction:column;gap:.6rem;justify-content:space-between;min-height:120px;text-decoration:none;color:var(--ink);background:var(--panel);border:3px solid var(--border);box-shadow:5px 5px 0 var(--border);padding:1.1rem 1.15rem;transition:transform .1s,box-shadow .1s}
.pf-contact-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.pf-contact-label{font-family:var(--fpix);font-size:.65rem;color:var(--accent)}
.pf-contact-sub{font-size:1.05rem;color:var(--soft)}
.pf-contact-open{font-family:var(--fpix);font-size:.55rem;letter-spacing:1px}

/* ═══ TIMELINE ══════════════════════════════════════════════ */
.pf-timeline{position:relative;padding-left:2.5rem;margin-top:.5rem}
.pf-timeline-line{position:absolute;left:.55rem;top:.4rem;bottom:.4rem;border-left:3px dashed var(--border)}
.pf-timeline-entry{position:relative;margin-bottom:2rem}
.pf-timeline-node{position:absolute;left:-2.5rem;top:.35rem;width:.85rem;height:.85rem;background:var(--accent);border:2px solid var(--border)}
.pf-timeline-card{background:var(--panel);border:3px solid var(--border);box-shadow:3px 3px 0 var(--border);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.pf-timeline-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pf-timeline-pickup{font-family:var(--fpix);font-size:.5rem;background:var(--badge);color:var(--ink);padding:.35em .55em}
.pf-timeline-title{font-family:var(--fdisp);font-weight:400;font-size:1rem;line-height:1.45;margin:0}
.pf-timeline-sub{color:var(--soft);font-size:1rem;margin:0}
.pf-timeline-desc{font-size:1.02rem;margin:0}

/* ═══ FOOTER ════════════════════════════════════════════════ */
.pf-footer{text-align:center;padding:3rem 1.5rem 4rem;color:var(--soft);font-size:1rem;border-top:4px dashed var(--border)}
.pf-footer p{margin:0 0 .5rem}
.pf-footer-copy{margin:0 !important;font-family:var(--fpix);font-size:.55rem}

.pf-hidden{display:none !important}

/* トグル列の二次リンク（トップ→/works 導線など） */
.pf-toggle-link{display:inline-block;margin-top:.9rem;font-family:var(--fpix);font-size:.6rem;letter-spacing:1px;color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent)}
.pf-toggle-link:hover{background:var(--accent);color:var(--accent-ink)}

/* ═══ WORKS（成果物一覧ページ /works） ═════════════════════ */
/* フィルタチップ */
.pf-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.6rem}
.pf-filter-chip{font-family:var(--fdisp);font-size:.9rem;color:var(--ink);background:var(--panel);border:2px solid var(--border);box-shadow:2px 2px 0 var(--border);padding:.35em .8em;cursor:pointer}
.pf-filter-chip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.pf-filter-chip.pf-on{color:var(--accent-ink);background:var(--accent)}
.pf-works-count{color:var(--soft);font-size:1rem;margin:0 0 1.2rem}
/* 密グリッド + 画面外カードのレンダリングをスキップ（大量表示でも軽量） */
.pf-works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.pf-works-grid .pf-card{content-visibility:auto;contain-intrinsic-size:auto 360px}
.pf-works-empty{color:var(--soft);font-size:1.1rem;padding:2rem 0}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
/* タブレット以下: ヘッダーを縦に整理、グリッド幅を緩める */
@media (max-width: 760px){
  .pf-header-inner{padding:.5rem 1rem;gap:.6rem}
  .pf-nav{gap:.9rem;width:100%;order:3}
  .pf-lang{order:2}
  .pf-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
}

/* スマホ: 余白・本文サイズを圧縮、研究カードを縦積み */
@media (max-width: 560px){
  .pf-root{font-size:16px}
  .pf-header-inner{flex-wrap:nowrap;justify-content:flex-start;gap:.75rem}
  .pf-logo{font-size:.65rem}
  .pf-nav{display:none}                         /* 狭幅ではナビ非表示（ロゴ→#top で代替） */
  .pf-lang{margin-left:auto;order:0}
  .pf-hero{padding:3.5rem 1.25rem;min-height:auto}
  .pf-hero-inner{gap:2rem}
  .pf-section{padding:3.5rem 1.25rem}
  .pf-bio{font-size:1.15rem}
  .pf-role{font-size:1.15rem}
  .pf-grid{grid-template-columns:1fr;gap:1.25rem}
  .pf-works-grid{grid-template-columns:1fr;gap:1.25rem}
  .pf-highlights{grid-template-columns:repeat(2,1fr)}
  .pf-research-card{grid-template-columns:1fr}
  .pf-research-period{border-right:none;border-bottom:3px solid var(--border);font-size:.55rem}
  .pf-contact-grid{grid-template-columns:1fr}
  .pf-timeline{padding-left:2rem}
}

/* 極小幅: HEROボタンとタグの折返しを安定化 */
@media (max-width: 380px){
  .pf-hero-links{gap:.5rem}
  .pf-hero-links .pf-btn{padding:.55em .8em;font-size:.85rem}
  .pf-highlights{grid-template-columns:1fr 1fr;gap:.75rem}
}

/* タッチ端末ではホバーの浮き上がりを無効化（誤作動防止） */
@media (hover: none){
  .pf-card:hover,.pf-contact-card:hover{transform:none;box-shadow:5px 5px 0 var(--border)}
}