/* Page: Staff (staff.html) */

/* Palette (monotone refined) */
:root{ --staff-bg:#0f1115; --staff-panel:#121418; --staff-ink:#e8ebf1; --staff-muted:#b7bdc8; --staff-line:rgba(255,255,255,.08) }

/* Page background & footer harmonize */
body{ background: var(--staff-bg); }
.footer{ background: var(--staff-bg); border-top:1px solid var(--staff-line) }
.footer p{ color: var(--staff-ink); opacity:.9 }

/* Hero */
.staff-hero{ padding-block: clamp(80px,10vw,120px); background:
  radial-gradient(1200px 380px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
  linear-gradient(135deg,#151820,#0f1115);
  color:var(--staff-ink); border-bottom:1px solid var(--staff-line) }
.staff-title{ font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(30px, 5.6vw, 50px); font-weight:900; letter-spacing:.04em; margin:0 0 8px 0 }
.staff-subtitle{ font-size:15px; color:var(--staff-muted); margin:0 }

/* List */
.staff-list{ padding-block: clamp(60px,8vw,100px); background: var(--staff-bg); color:var(--staff-ink) }
.staff-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:24px }

.staff-card{ grid-column: span 6; display:grid; grid-template-columns: 160px 1fr; gap:18px; background:
  linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
  linear-gradient(180deg,#14171d,#11141a);
  border:1px solid var(--staff-line); border-radius:18px; padding:20px; box-shadow:0 10px 26px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.staff-card:hover{ transform: translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.42); border-color: rgba(255,255,255,.12) }

/* Featured (president / vice-president) */
.staff-card--featured{ grid-column: span 12; grid-template-columns: 260px 1fr }
.staff-card--featured .staff-photo{ width:260px; height:260px; border-radius:16px }

/* Image style tweaks */
.staff-photo{ object-fit: cover; display:block }

/* Blur-up transition */
.staff-photo{ filter: grayscale(100%) blur(6px); transition: filter .6s ease, box-shadow .2s ease }
.staff-photo[src^="https"]{ filter: grayscale(100%) blur(0) }

/* Ensure text wraps and doesn't overlap image */
.staff-info{ min-width:0 }

.staff-info{ display:flex; flex-direction:column; gap:10px }
.staff-role{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.16em; color:var(--staff-muted); border:1px solid rgba(255,255,255,.14); padding:4px 10px; border-radius:999px; text-transform:uppercase }
.staff-name{ font-family: "Noto Serif JP", Georgia, serif; font-size:22px; font-weight:900; margin:0; letter-spacing:.02em; color:var(--staff-ink) }
.staff-bio{ font-size:14px; color:#cfd5df; line-height:1.9; margin:0 }
.staff-comment{ margin:2px 0 0 0; color:#d8dee9; font-style:italic; border-left:3px solid rgba(255,255,255,.12); padding-left:12px }

/* Prevent overlap */
.staff-card{ align-items:start }
.staff-photo{ flex-shrink:0; min-width:160px }
.staff-card--featured .staff-photo{ min-width:260px }

/* Image sizing */
.staff-card:not(.staff-card--featured) .staff-photo{ width:160px; height:160px; border-radius:14px }

@media (max-width: 1024px){ .staff-card{ grid-column: span 12 } }
@media (max-width: 880px){
  .staff-card--featured{ grid-template-columns:1fr }
  .staff-card--featured .staff-photo{ width:100%; height:300px; min-width:0 }
}