/* ============================================================
   portfolio.css ── 発表と受賞の記録（portfolio.html 専用）
   出典: V11_ポートフォリオ新設・トップ再調整設計.md ／ 見本 _見本_V11_ポートフォリオ.html
   思想（参考md採用）: 「受賞者一覧」ではなく「学びのポートフォリオ」。
     ・合格実績風の数字誇示にしない。文学作品の展覧会・美術館アーカイブの静けさで見せる
     ・金メダル・王冠は使わない。紙・原稿・余白・明朝で組む
     ・今後の追加充実が前提＝ギャラリーは data-f 駆動でカード追記だけで増やせる
   規範: 色・寸法は tokens.css の var() のみ参照（hex直書き禁止）。site.css の後に読み込む。
   ============================================================ */

/* --- 押せるものの統一様式（v6b.css の .golink と同一。単独ページ用に再定義） --- */
.golink {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  transition: color .2s;
}
.golink::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
}
.golink span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent); padding-bottom: .15em; }
.golink:hover { color: var(--alpe-red-deep); }

/* 写真スロット（C-32の転用可否が確認できるまで、全ての写真はこの枠で待つ） */
.pf-slot {
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  background: repeating-linear-gradient(45deg,
      var(--alpe-paper-dim) 0 12px,
      color-mix(in srgb, var(--alpe-paper-dim) 88%, var(--alpe-gold)) 12px 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--alpe-ink-faint);
  font-size: calc(var(--fs-small) * .85);
  letter-spacing: .12em; text-align: center; padding: 1em; line-height: 1.7;
}

/* ============ P1 ヒーロー（美術館の扉） ============ */
.pf-hero { position: relative; overflow: hidden; border-bottom: var(--rule-gold); background: var(--alpe-paper); }
.pf-hero .container { position: relative; z-index: 1; max-width: 60rem; padding-block: var(--sp-section-hero) var(--sp-section); }
.pf-hero .eyebrow {
  font-family: var(--font-gothic); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: var(--ls-wide); color: var(--alpe-gold); text-transform: uppercase;
}
.pf-hero h1 {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(24px, 4vw, 44px); line-height: 1.7;
  letter-spacing: var(--ls-head); color: var(--alpe-ink);
  margin: .6em 0 .8em; text-wrap: balance;
}
.pf-hero .lead { font-size: var(--fs-lead); color: var(--alpe-ink-soft); max-width: 38em; }
/* 舞台装置の遺伝子: 輪郭だけの巨大文字を1つ（FVと同じ語彙・ごく薄く） */
.pf-hero-mon {
  position: absolute; right: -.05em; bottom: -.3em; z-index: 0;
  font-family: var(--font-mincho); font-weight: 800;
  font-size: clamp(120px, 18vw, 260px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--alpe-red) 12%, transparent);
  pointer-events: none; user-select: none;
}

/* ============ P2 静かな数字（誇示しない） ============ */
.pf-facts { background: var(--alpe-white); border-bottom: var(--rule-gold); }
.pf-facts .container { display: flex; flex-wrap: wrap; gap: 1em 4em; padding-block: 1.6em; }
.pf-facts dl { display: flex; align-items: baseline; gap: .8em; }
.pf-facts dt { font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; color: var(--alpe-ink-soft); }
.pf-facts dd { font-family: var(--font-mincho); font-weight: 700; font-size: 1.5em; color: var(--alpe-red); letter-spacing: .06em; }
.pf-facts dd small { font-family: var(--font-gothic); font-size: .55em; color: var(--alpe-ink-soft); letter-spacing: .1em; }

/* ============ P3 代表的な三つの記録 ============ */
.pf-sec { padding-block: var(--sp-section); }
.pf-en {
  font-family: var(--font-gothic); font-size: calc(var(--fs-small) * .82); font-weight: 700;
  letter-spacing: var(--ls-wide); color: var(--alpe-gold); text-transform: uppercase;
}
.pf-title {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(20px, 2.8vw, 32px); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); margin: .4em 0 1.4em;
}
.feat-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 54em) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  background: var(--alpe-white);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 50%, transparent);
  border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.feat:hover { transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in srgb, var(--alpe-ink) 9%, transparent); }
.feat .pf-slot { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent); }
.feat-body { padding: 1.4em 1.4em 1.3em; display: flex; flex-direction: column; gap: .5em; flex: 1; }
.f-year { font-family: var(--font-mincho); font-weight: 700; color: var(--alpe-gold); letter-spacing: .12em; font-size: .95em; }
.f-award { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; color: var(--alpe-red-deep); line-height: 1.8; }
.f-headline { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; }
.f-who { font-size: var(--fs-small); color: var(--alpe-ink-soft); }
.f-note {
  font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: 1.8;
  border-top: 1px dashed color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  padding-top: .7em; margin-top: auto;
}

/* ============ P4 記録のギャラリー（data-f駆動フィルタ） ============ */
.pf-gallery { background: var(--alpe-paper-dim); border-block: var(--rule-gold); }
.pf-tabs { display: flex; flex-wrap: wrap; gap: .6em; margin-bottom: 1.6em; }
.pf-tab {
  font-family: var(--font-gothic); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .08em; color: var(--alpe-ink-soft);
  background: var(--alpe-white);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 50%, transparent);
  border-radius: 999px; padding: .45em 1.1em; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.pf-tab:hover { color: var(--alpe-red); }
.pf-tab[aria-selected="true"] { background: var(--alpe-red-stage); border-color: var(--alpe-red-stage); color: var(--alpe-paper); }
.g-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62em) { .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .g-grid { grid-template-columns: 1fr; } }
.g-card {
  background: var(--alpe-white);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column; color: var(--alpe-ink);
  transition: transform .2s, box-shadow .2s;
}
.g-card:hover { color: var(--alpe-ink); transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--alpe-ink) 8%, transparent); }
.g-card .pf-slot { aspect-ratio: 16 / 10; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent); }
.g-body { padding: 1.1em 1.2em 1em; display: flex; flex-direction: column; gap: .35em; }
.g-meta { display: flex; gap: .9em; align-items: baseline; font-size: calc(var(--fs-small) * .88); letter-spacing: .1em; }
.g-year { font-family: var(--font-mincho); font-weight: 700; color: var(--alpe-gold); }
.g-cat { color: var(--alpe-ink-faint); }
.g-award { font-size: var(--fs-small); font-weight: 700; color: var(--alpe-red-deep); letter-spacing: .04em; line-height: 1.75; }
.g-who { font-size: calc(var(--fs-small) * .92); color: var(--alpe-ink-soft); }
.g-card[hidden] { display: none; }
.g-more { margin-top: 1.6em; font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* ============ P5 舞台の系譜 ============ */
.pf-history .container { max-width: 60rem; }
.pf-tl {
  border-left: 2px solid color-mix(in srgb, var(--alpe-gold) 60%, transparent);
  margin: 1.6em 0 0 .4em; padding-left: 1.6em;
  display: flex; flex-direction: column; gap: 1.5em; list-style: none;
}
.pf-tl li { position: relative; }
.pf-tl li::before {
  content: ''; position: absolute; left: calc(-1.6em - 6px); top: .55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--alpe-gold);
}
.t-year { font-family: var(--font-mincho); font-weight: 700; color: var(--alpe-red); letter-spacing: .08em; margin-right: .8em; }
.t-body { color: var(--alpe-ink); font-size: var(--fs-body); }
.t-sub { display: block; font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* ============ 結び（理念への接続） ============ */
.pf-creed { background: var(--alpe-red-night); color: var(--alpe-paper); text-align: center; padding-block: var(--sp-section-cta); }
.pf-creed blockquote {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(20px, 3vw, 32px); line-height: 1.9;
  letter-spacing: .06em; text-wrap: balance;
}
.pf-creed .cite { margin-top: 1em; font-size: var(--fs-small); letter-spacing: .12em; color: color-mix(in srgb, var(--alpe-paper) 65%, transparent); }
.pf-creed .acts { margin-top: 2em; display: flex; gap: 2.2em; justify-content: center; flex-wrap: wrap; }
.pf-creed .golink { color: var(--alpe-gold-pale); }
.pf-creed .golink span { border-bottom-color: color-mix(in srgb, var(--alpe-gold) 70%, transparent); }
.pf-creed .golink:hover { color: var(--alpe-paper); }