/* ==========================================================
   依頼者ごとの装飾
   style.css の後に読み込まれ、同じセレクタなら、こちらが勝つ。
   テンプレート側も setup-site も、このファイルは触らない。依頼者ごとの見た目の作り込みは、すべてここに書く
   (Claude Code に「こうしたい」と頼めば、ここに書く。setup-site は brief.md だけを入力にするので、ここは触らない)
   (style.css を直接変えると、テンプレートの修正を取り込むときに衝突するため)。
   配色・フォント・角丸は、ここではなく brief.md の「デザイン方針」で変える(文字の読みやすさの検査を通すため)。
   ========================================================== */

/* 狼煙ジン: キービジュアルの台紙の続きに、ステッカーを貼っていくページ。
   キービジュアル6枚は、どれも IRIAM の「フォローしてね」の自己紹介ポスターで、白いフチの切り抜きステッカー・
   大きな欧文・「My name is」の名札・タグのテープ・網点を、淡いピンクの台紙に貼っている。その作りをページに延ばす。
   Why not 煙・墨・マッチ箱・火種: キービジュアルのどこにも無い見立てで、絵とちぐはぐに見えた */

:root {
  /* 和文は Zen Kaku Gothic New、大きな欧文は Playfair Display の太字の斜体(キービジュアルの欧文に寄せる)
     Why not 筆の書体(Yuji Boku): カタカナの線が細くかすれ、「ジン」「リンク」が弱く見えた */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --font-display: "Playfair Display", "Times New Roman", serif;
  /* キービジュアルから拾った色。台紙・ステッカーの影・暗い帯(文字に使うのは --maroon の上の白と、台紙の上の --ink・--accent だけ) */
  --sheet: #f6e9e8;
  --rose: #d29090;
  --rose-deep: #c86162;
  --maroon: #332121;
  --salmon: #f2c9c4;
  --enji: rgba(122, 28, 34, .18);
  /* ステッカーの共通の影: ぼかさず、ずらして厚みを出す */
  --sticker-shadow: 4px 5px 0 var(--rose);
}

html { overflow-x: clip; }
body {
  position: relative;
  /* Why not body の overflow-x: hidden だけ: iPhone の Safari では効かず、ページが画面より広がって左に寄って見える */
  overflow-x: clip;
  font-size: 16px;
  background: var(--sheet);
}

/* ---------- 表紙 ----------
   スマホ: 大きな欧文(上)→ キービジュアル → 足跡と「Jin」→ 吹き出し → 名札 → テープ の縦積み。
   広い画面(1024px 以上): キービジュアルを中央の柱にし、左に名札、右に吹き出しとテープ。大きな欧文は絵の後ろで対角に割る */
.hero {
  position: relative;
  display: grid;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
/* 表紙の右上に、キービジュアルの網点をぼかして1か所 */
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 360px; z-index: 0;
  background: radial-gradient(circle, rgba(179, 32, 42, .22) 1.3px, transparent 1.9px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
  pointer-events: none;
}
.hero-big {
  position: relative; z-index: 0;
  margin: 0; padding: 0 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 25vw; line-height: .85; letter-spacing: -.02em;
  color: var(--rose-deep);
  pointer-events: none; user-select: none;
}
.hero-big-1 { margin-bottom: -.22em; }
.hero-big-2 { justify-self: end; margin-top: -.62em; }

.hero-visual { position: relative; z-index: 1; margin: 0 23px; }
/* キービジュアルを、白いフチのステッカーにする(絵は切らない・上に何も重ねない) */
.hero-visual .kv {
  border-radius: 14px;
  box-shadow: 0 0 0 7px #fff, 7px 9px 0 7px var(--rose);
}
/* 2枚目以降は1枚目より横長(0.75・0.80)。上下にぼかしの帯が出ないよう、枠いっぱいに広げる(左右が数%切れる) */
.kv-slide img { object-fit: cover; }

/* 前後のボタン: 絵の左右の端に重ねた、白い丸のステッカー */
.kv-side { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; }
.kv-side-prev { left: -12px; }
.kv-side-next { right: -12px; }
.kv-nav {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  color: var(--accent); background: #fff; border: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--maroon), 3px 4px 0 2px var(--rose);
}
.kv-nav svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 5; }
.kv-nav:active { color: #fff; background: var(--accent); }
@media (hover: hover) { .kv-nav:hover { color: #fff; background: var(--accent); } }

/* ドットは狼の足跡。絵の下に並べる(今の1枚だけ、赤に白いフチ) */
.kv-controls { display: flex; justify-content: flex-start; margin-top: 22px; }
.kv-dots { display: flex; flex-direction: row; gap: 6px; --kv-hit-x: 6px; }
.kv-dot {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 0;
}
.kv-dot svg { width: 22px; height: 22px; rotate: 90deg; overflow: visible; }
.kv-dot:nth-child(even) svg { translate: 0 -4px; }
.kv-dot .paw { fill: var(--rose); }
.kv-dot[aria-current="true"] .paw { fill: var(--accent); stroke: #fff; stroke-width: 1.6; paint-order: stroke; }
@media (prefers-reduced-motion: no-preference) {
  .kv-dot .paw { transition: fill .3s ease; }
}

/* 挨拶の吹き出し(キービジュアルの「TAP」) */
.hero-greet {
  position: relative; z-index: 2;
  justify-self: end; margin: 8px 24px 0; padding: 8px 18px;
  font-size: 18px; font-weight: 700; color: var(--accent); background: #fff;
  border-radius: 20px; rotate: 3deg;
  filter: drop-shadow(3px 4px 0 var(--rose));
}
.hero-greet::before {
  /* 吹き出しの尻尾(名札の方を向く) */
  content: ""; position: absolute; left: 22px; bottom: -10px; width: 18px; height: 12px;
  background: #fff; clip-path: polygon(0 0, 100% 0, 20% 100%);
}

/* 名札のステッカー(キービジュアルの「My name is」の札) */
.hero-title {
  position: relative; z-index: 2;
  display: grid; justify-items: start; gap: 2px;
  margin: 18px 20px 0; padding: 0 20px 18px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--sticker-shadow);
  rotate: -2deg;
}
.nametag-head {
  justify-self: stretch; margin: 0 -20px 10px; padding: 6px 20px;
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 18px;
  color: #fff; background: var(--accent);
}
.hero-name {
  margin: 0;
  font-weight: 900;
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--ink);
}
.hero-en {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 22px; line-height: 1.2; color: var(--accent);
}
.hero-catch { margin: 8px 0 0; font-size: 15px; font-weight: 700; }

/* タグのテープ(キービジュアルの、黒い帯に白抜きの #タグ)。両端は鋏で斜めに切った形 */
/* スマホは横に並べ、名札の下端に少し重ねて貼る(縦に積むと間延びする)。広い画面は縦に積む */
.hero-tags { position: relative; z-index: 3; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin: -14px 16px 0; padding: 0; }
.hero-tags li {
  padding: 7px 22px;
  font-size: 16px; font-weight: 700; color: #fff; background: var(--maroon);
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  rotate: -2deg;
}
.hero-tags li { padding: 6px 16px; font-size: 15px; }
.hero-tags li:nth-child(2) { rotate: 2deg; translate: 0 4px; }
.hero-tags li:nth-child(3) { rotate: -1deg; }

@media (min-width: 1024px) {
  .hero {
    max-width: 1160px; padding: 48px 24px 72px;
    grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 48px;
  }
  .hero::before { width: 40%; height: 480px; }
  /* 大きな欧文は、絵の後ろで対角に割る(左上に Noroshi、右下に Jin) */
  .hero-big { position: absolute; padding: 0; font-size: clamp(120px, 13vw, 180px); }
  .hero-big-1 { top: 12px; left: 24px; margin: 0; }
  .hero-big-2 { right: 24px; bottom: 28px; margin: 0; }
  .hero-visual { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .kv-controls { justify-content: center; }
  .hero-greet { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; margin: 120px 0 0; }
  .hero-tags { grid-column: 3; grid-row: 2; display: grid; justify-items: start; justify-content: start; margin: 28px 0 0; }
  .hero-tags li { padding: 7px 22px; font-size: 16px; }
  .hero-tags li:nth-child(2) { rotate: 1deg; translate: 14px 0; }
  .hero-tags li:nth-child(3) { rotate: -1deg; translate: 6px 0; }
  .hero-title { grid-column: 1; grid-row: 1 / span 3; align-self: end; justify-self: end; margin: 0 0 120px; max-width: 360px; }
}

/* ---------- 節と見出し ---------- */
main { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.sec { position: relative; padding: 56px 0 24px; }
.sec-tight { padding-top: 24px; }
/* 見出しは、白いフチとずらした影を付けた、ステッカーの文字。左肩に赤い ✦ */
.sec-title {
  position: relative;
  margin: 0 0 28px; padding-left: 40px;
  font-weight: 900;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--ink);
  /* 白いフチ(8方向)と、その下のローズの影。Why not -webkit-text-stroke: 縁が字の内側も削り、細く見える */
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
    6px 7px 0 var(--rose);
}
.sec-title::before {
  /* 4点の星 ✦(キービジュアルのきらめき) */
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -55%; width: 28px; height: 28px;
  background: var(--accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ---------- リンク: IRIAM と X は横並びの、赤い楕円の「FOLLOW」ステッカー。その他は白いラベル ---------- */
.links-main, .links-sub { list-style: none; margin: 0; padding: 0; }
.links-main { display: grid; gap: 18px; }
@media (min-width: 600px) { .links-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 16px 26px; min-height: 64px; box-sizing: border-box;
  color: #fff; background: var(--accent); text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 0 0 4px #fff, 4px 5px 0 4px var(--rose);
  transition: translate .15s ease, box-shadow .15s ease;
}
.links-main li:nth-child(1) .link-card { rotate: -1.5deg; }
.links-main li:nth-child(2) .link-card { rotate: 1deg; }
.link-name { display: grid; gap: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.link-name small { font-size: 14px; font-weight: 400; color: #fbe3e3; }
.link-arrow { font-size: 20px; }
.link-card:active { translate: 3px 4px; box-shadow: 0 0 0 4px #fff, 1px 1px 0 4px var(--rose); }
@media (hover: hover) { .link-card:hover { translate: -1px -2px; box-shadow: 0 0 0 4px #fff, 6px 8px 0 4px var(--rose); } }
.link-card:focus-visible, .link-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.links-sub { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.link-chip {
  display: inline-block; padding: 8px 18px; font-size: 15px; font-weight: 700;
  color: var(--ink); text-decoration: none; background: #fff;
  border: 2px solid var(--maroon); border-radius: 8px;
  box-shadow: 3px 4px 0 var(--rose);
}
@media (hover: hover) { .link-chip:hover { color: var(--accent); } }

/* おすすめ動画: 白い余白の付いた写真のステッカー。題名はその余白に書く
   Why not ボタン(.yt-play)に枠を付ける: 再生するとボタンが iframe に差し替わり、枠が消える */
.yt-lite {
  margin-top: 36px; padding: 10px 10px 14px;
  background: #fff; border-radius: 14px; box-shadow: var(--sticker-shadow);
}
.yt-play { border-radius: 8px; overflow: hidden; }
.yt-lite figcaption { margin-top: 10px; padding: 0 4px; font-size: 15px; font-weight: 700; }
.yt-lite figcaption a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* ---------- プロフィール: キービジュアルのサーモンピンクと網点の帯。上端に市松の帯 ---------- */
#profile {
  margin-top: 72px; margin-inline: calc(50% - 50vw);
  padding: 80px max(20px, calc(50vw - 420px)) 88px;
  background:
    radial-gradient(circle, var(--enji) 1.3px, transparent 1.8px) 0 0 / 9px 9px,
    var(--salmon);
}
#profile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-conic-gradient(var(--maroon) 0 25%, #fff 0 50%) 0 0 / 20px 20px;
}
/* 帯の上では、ピンクと同化しないよう影を濃いローズにする(帯の上に赤い文字は置かない: 4.41 で基準未満) */
#profile .sec-title {
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
    6px 7px 0 var(--rose-deep);
}
.facts { gap: 18px; }
/* カードの段: スマホは2列(ハッシュタグは横いっぱい)、700px 以上は2列でハッシュタグも1枚分、1000px 以上は3列。
   ハッシュタグを1枚分にすると、ファンネームの右の空きに入る(横いっぱいにすると、下に間延びした段ができる)。
   Why not 700px から3列: カードが狭く、タグとコピーボタンが横に収まらず、ボタンの位置がそろわなかった */
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) {
  .label-card[data-key="hashtags"] { grid-column: auto; }
  /* タグは1行のまま崩さず、ボタンを右端にそろえる */
  .label-card[data-key="hashtags"] .copy-list { grid-template-columns: minmax(0, 1fr); }
  .label-card[data-key="hashtags"] .copy-list .copy-row { display: flex; justify-content: space-between; gap: 8px; }
  .label-card[data-key="hashtags"] .copy-text { font-size: 16px; white-space: nowrap; }
  .label-card[data-key="hashtags"] .copy-btn { padding: 4px 8px; }
}

/* 名札のシール: 白地に、上の赤い帯がラベル。傾けない
   Why not マッチ箱: キービジュアルに無い見立てだった */
.label-card {
  display: grid; align-content: start;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 4px 5px 0 3px var(--rose-deep);
}
.label-card dt { padding: 5px 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--accent); }
.label-card dd { padding: 12px 14px 14px; font-size: 18px; font-weight: 700; }
.label-card dd small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.label-card dd a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
/* 名前は1行全体を使い、大きく太く */
.label-card[data-key="name"] { grid-column: 1 / -1; }
.label-card[data-key="name"] dd { font-size: 32px; font-weight: 900; line-height: 1.2; }
.label-card[data-key="fanMark"] dd { font-size: 28px; }
/* コピーボタンは、値より目立たない赤い線の札 */
.copy-btn {
  display: inline-grid; justify-items: center; white-space: nowrap;
  padding: 4px 12px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--accent); background: none; border: 1.5px solid currentColor; border-radius: var(--radius);
}
.copy-label, .copy-btn::after { grid-area: 1 / 1; }
.copy-btn::after { content: "コピーしました"; visibility: hidden; }
.copy-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.copy-btn:active { color: #fff; background: var(--accent); }
@media (hover: hover) { .copy-btn:hover { color: #fff; background: var(--accent); } }
.copy-text-large { font-size: 28px; }
/* ハッシュタグ: タグの長さが違っても、コピーボタンの縦の位置をそろえる(リスト全体を2列にし、各行をその列に合わせる) */
.label-card .copy-list { grid-template-columns: max-content max-content; column-gap: 14px; align-items: center; }
.label-card .copy-list .copy-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.tag-link { color: var(--accent); text-underline-offset: 4px; }

/* ---------- フッター: キービジュアルの上端の暗い帯。背後に大きな欧文の名前 ---------- */
.footer {
  position: relative; overflow: hidden;
  margin-top: 0; padding: 56px 20px 56px;
  text-align: center; font-size: 14px;
  color: #f3e9e8; background: var(--maroon);
}
.footer::before {
  /* 飾りの文字。代替テキストを空にして読み上げさせない(この書き方に対応しないブラウザでは、飾りが出ないだけ) */
  content: "Noroshi Jin" / "";
  position: absolute; left: -2vw; bottom: -.28em; z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(96px, 22vw, 240px); line-height: 1; white-space: nowrap;
  color: #4a2c2d; pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }
.footer-note { margin: 0 0 8px; }
.footer a { color: #fff; text-underline-offset: 3px; }
.footer .credits-entry {
  display: inline-block; margin-bottom: 28px; padding: 10px 22px;
  font-weight: 700; text-decoration: none;
  color: var(--maroon); background: #fff; border-radius: 8px;
  box-shadow: 3px 4px 0 var(--rose-deep);
}
@media (hover: hover) { .footer .credits-entry:hover { color: var(--accent); } }
.copy { margin: 16px 0 0; font-size: 13px; letter-spacing: .08em; }

/* ---------- クレジットページ(表紙と同じ素材でそろえる) ---------- */
.credits-head { max-width: 880px; margin: 0 auto; padding: 24px 20px 0; }
.credits-brand {
  display: inline-block; padding: 14px 18px 8px; font-size: 24px; font-weight: 900;
  color: var(--ink); text-decoration: none; background: #fff; border-radius: 12px;
  border-top: 8px solid var(--accent); box-shadow: var(--sticker-shadow); rotate: -2deg;
}
.page-credits main { padding-bottom: 40px; }
.page-credits .footer { margin-top: 40px; }
.credits-lead { margin: 0 0 32px; }
.credit { margin-top: 48px; }
/* 作者名は、表紙のタグと同じテープ */
.credit-heading {
  display: inline-block; margin: 0 0 12px; padding: 6px 22px;
  font-size: 22px; font-weight: 700; color: #fff; background: var(--maroon);
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); rotate: -1.5deg;
}
/* 見出しを作者名にしたので、「制作: 名前」は読み上げにだけ残す(同じ名前を2回見せない) */
.credit-creator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.credit-links { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.credit-links a {
  display: inline-block; padding: 4px 14px; font-size: 14px; font-weight: 700;
  color: var(--ink); text-decoration: none; background: #fff;
  border: 2px solid var(--maroon); border-radius: 8px; box-shadow: 3px 4px 0 var(--rose);
}
.credit-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 32px 24px; }
.credit-work { margin: 0 8px; }
/* 作品は、白いフチの写真ステッカー */
.credit-zoom {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: #fff; border: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 8px #fff, 6px 8px 0 8px var(--rose);
}
.credit-zoom img { display: block; width: 100%; height: auto; }
.credit-title { display: block; margin-top: 18px; font-size: 15px; font-weight: 700; }
.credit-title a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.back-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5;
  display: grid; place-items: center; width: 64px; height: 64px; padding: 0;
  font-weight: 700; color: #fff; background: var(--accent); text-decoration: none;
  border-radius: 50%; box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--rose);
}

/* 拡大表示の前後ボタン: 主色の地 + 白い縁(白い作品の上でも、暗い背景の上でも見える) */
.lb-close, .lb-nav { background: var(--accent); }
.lb-nav:active, .lb-close:active { background: var(--maroon); }
@media (hover: hover) { .lb-nav:hover, .lb-close:hover { background: var(--maroon); } }