:root {
  --bg: #090909;
  --surface: #11100e;
  --surface-light: #171510;
  --gold: #c9a764;
  --gold-bright: #e6c682;
  --gold-muted: #8c6f3b;
  --text: #eee8dc;
  --text-muted: #a49d91;
  --line: rgba(201, 167, 100, 0.34);
  --serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --jp-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: radial-gradient(ellipse 70% 45% at 50% 10%, #231c10 0%, var(--bg) 66%);
  font-family: var(--jp-serif);
}
button { font: inherit; }

.session-app { width: min(100% - 40px, 930px); margin: 0 auto; padding: 58px 0 42px; }
.app-header { text-align: center; margin-bottom: 58px; }
.eyebrow, .header-subtitle, .panel-kicker, .card-number { color: var(--gold); letter-spacing: .19em; }
.eyebrow { margin: 0 0 8px; font: 500 11px/1 var(--serif); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; color: var(--gold-bright); font: 500 clamp(37px, 6vw, 59px)/.9 var(--serif); letter-spacing: .08em; }
.header-subtitle { margin: 0; color: var(--text-muted); font: 500 11px/1 var(--serif); }

.stella-section { padding-bottom: 56px; }
.stella-selector { margin-bottom: 31px; }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 30px; }
.section-heading h2 { flex: none; margin: 0; color: var(--gold-bright); font: 500 24px/1 var(--serif); letter-spacing: .12em; }
.heading-line { width: min(16vw, 112px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-muted)); }
.heading-line:last-child { background: linear-gradient(90deg, var(--gold-muted), transparent); }
.stella-content, .tail-card-area { display: flex; flex-direction: column; align-items: center; }

.card-frame { position: relative; width: clamp(240px, 34vw, 300px); padding: 5px; border: 1px solid var(--gold-muted); background: #080806; box-shadow: 0 16px 35px rgba(0, 0, 0, .38), 0 0 20px rgba(201, 167, 100, .05); }
.card-frame::before, .card-frame::after { position: absolute; z-index: 1; width: 13px; height: 13px; border-color: var(--gold-bright); content: ""; pointer-events: none; }
.card-frame::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.card-frame::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }

.card-frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: #080806; }
.card-caption { padding-top: 16px; text-align: center; }
.card-number { margin-bottom: 5px; font: 500 11px/1.2 var(--serif); }
.card-number span { color: var(--gold-bright); font-size: 15px; }
.card-caption h3 { margin: 0; color: var(--text); font: 500 20px/1 var(--serif); letter-spacing: .1em; }

.tail-section { padding: 40px 0 62px; border-top: 1px solid var(--line); }
.year-selector { display: grid; grid-template-columns: 35px minmax(0, 1fr) 35px; align-items: center; width: min(100%, 610px); margin: 0 auto 42px; }
.selector-arrow { width: 35px; height: 38px; border: 0; color: var(--gold); background: transparent; cursor: pointer; font: 400 38px/.8 var(--serif); }
.selector-arrow:hover { color: var(--gold-bright); }
.year-scroll { overflow-x: auto; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.year-scroll::-webkit-scrollbar { display: none; }
.year-scroll.is-dragging { cursor: grabbing; user-select: none; }
.year-list { display: flex; justify-content: center; gap: 7px; width: max-content; min-width: 100%; padding: 2px 12px; }
.year-button { flex: 0 0 auto; width: 39px; height: 39px; border: 1px solid transparent; color: var(--text-muted); background: transparent; cursor: pointer; font: 500 19px/1 var(--serif); transition: color .15s, border-color .15s, background .15s; }
.year-button:hover { color: var(--gold-bright); }
.year-button.is-active { border-color: var(--gold); color: #17120a; background: var(--gold-bright); }

.details-grid { display: grid; grid-template-columns: 1.35fr 1fr; align-items: start; gap: 16px; border-top: 1px solid var(--line); padding-top: 30px; }
.detail-panel { min-height: 196px; padding: 26px 29px; border: 1px solid rgba(201, 167, 100, .28); background: linear-gradient(135deg, rgba(255,255,255,.025), transparent); }
.panel-kicker { margin-bottom: 9px; font: 500 10px/1 var(--serif); }
.detail-panel h2 { margin-bottom: 18px; color: var(--gold-bright); font: 500 22px/1 var(--jp-serif); }
.detail-panel p:last-child, .detail-panel li { color: var(--text-muted); font-size: 16px; line-height: 2.05; }
.detail-panel p:last-child { white-space: pre-line; }
.detail-panel p:last-child { margin-bottom: 0; }
.detail-panel ul { margin: 0; padding: 0; list-style: none; }
.detail-panel li::before { color: var(--gold); content: "・"; }
.action-group { margin-top: 25px; padding-top: 19px; border-top: 1px solid rgba(201, 167, 100, .22); }
.action-group h3 { margin: 0 0 12px; color: var(--gold); font: 500 15px/1.4 var(--jp-serif); }
footer { margin-top: 58px; color: #756e62; text-align: center; font: 500 9px/1 var(--serif); letter-spacing: .18em; }

@media (max-width: 620px) {
  .session-app { width: min(100% - 28px, 530px); padding-top: 42px; }
  .app-header { margin-bottom: 44px; }
  .stella-section { padding-bottom: 45px; }
  .tail-section { padding: 34px 0 48px; }
  .year-selector { margin-bottom: 34px; }
  .year-list { justify-content: flex-start; }
  .year-button { width: 37px; height: 37px; }
  .details-grid { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; }
  .detail-panel { min-height: 0; padding: 23px; }
}

@media (max-width: 380px) {
  .session-app { width: min(100% - 20px, 530px); }
  .year-selector { grid-template-columns: 29px minmax(0, 1fr) 29px; }
  .selector-arrow { width: 29px; }
}