/* ---------- caster (shared by home teaser + caster.html) ---------- */
.wrap--narrow { width: min(100% - 32px, 820px); }
.page-title { font-family: var(--f-serif); font-weight: 800; font-size: clamp(26px, 4vw, 36px); margin: 4px 0 0; color: var(--navy); }

.c-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 99px; line-height: 1.7; }
.c-status.is-offer { color: var(--alert); border: 1px solid var(--alert); background: var(--white); }
.c-status.is-confirmed { color: var(--navy); background: var(--gold-lt); }
.c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-role { font-size: 12px; letter-spacing: .12em; color: var(--gold-ink); font-weight: 700; }
.c-name { font-family: var(--f-serif); font-weight: 800; font-size: 26px; line-height: 1.3; margin: 2px 0 0; color: var(--navy); }
.c-name small { display: block; font-family: var(--f-sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--ink-sub); }
.c-name.is-lg { font-size: clamp(30px, 5vw, 40px); }
.c-title { margin: 6px 0 0; font-size: 14px; color: var(--ink-sub); }

.c-avatar { flex: none; border-radius: 50%; object-fit: cover; }
.c-avatar.is-md { width: 120px; height: 120px; }
.c-avatar.is-lg { width: 168px; height: 168px; }
.c-avatar.is-mono {
  display: grid; place-content: center; text-align: center; color: var(--gold-lt);
  background: radial-gradient(circle at 35% 30%, var(--navy-3), var(--navy)); border: 3px solid var(--gold); box-shadow: 0 0 0 5px var(--gold-pale);
}
.c-avatar.is-mono span { font-family: var(--f-serif); font-weight: 800; line-height: 1; }
.c-avatar.is-md span { font-size: 48px; }
.c-avatar.is-lg span { font-size: 68px; }
.c-avatar.is-mono small { margin-top: 6px; font-size: 11px; letter-spacing: .08em; color: var(--beige); }

/* home teaser */
.c-teaser { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--white); color: var(--ink); padding: 28px; border-top: 3px solid var(--gold); box-shadow: var(--shadow); }
.c-lead { margin: 12px 0 16px; font-size: 15px; }

/* profile page */
.c-profile { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 32px; }
.c-profile + .c-profile { margin-top: 32px; }
.c-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; padding: 10px 14px; background: var(--alert-pale); font-size: 14px; }
.c-head { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.c-genres { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.c-genres li { font-size: 12px; padding: 1px 10px; border: 1px solid var(--line); background: var(--paper); border-radius: 99px; }
.c-links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; }
.c-links a { color: var(--navy); font-weight: 700; }
.c-sec { margin-top: 32px; }
.c-sec h3 { font-family: var(--f-serif); font-size: 18px; color: var(--navy); margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--gold); }
.c-sec p { margin: 0 0 10px; }
.c-assign { font-weight: 700; }
.c-history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.c-history li { display: grid; grid-template-columns: 48px 96px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.c-history .y { font-family: var(--f-serif); font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.c-history .cat { font-size: 12px; color: var(--ink-sub); }
.c-source { margin: 28px 0 0; font-size: 12px; color: var(--ink-sub); }
.c-source a { color: var(--navy); }

@media (max-width: 640px) {
  .c-teaser { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 16px; }
  .c-teaser .c-meta { justify-content: center; }
  .c-teaser .btn { width: 100%; }
  .c-profile { padding: 20px 16px; }
  .c-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .c-head .c-meta, .c-genres, .c-links { justify-content: center; }
  .c-history li { grid-template-columns: 44px 1fr; }
  .c-history .t { grid-column: 1 / -1; }
}