:root {
  color-scheme: dark;
  --ink: #f8f1e8;
  --muted: #b9aca9;
  --paper: #150f13;
  --black: #08080a;
  --wine: #6e263b;
  --wine-deep: #281017;
  --gold: #e5b478;
  --line: rgba(255, 244, 235, 0.17);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--black); font-family: var(--sans); }
body::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(circle at 72% 5%, rgba(117, 39, 62, .22), transparent 34rem), radial-gradient(circle at 4% 60%, rgba(211, 135, 79, .09), transparent 32rem), var(--black); content: ""; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

.start-site { width: min(100% - 28px, 1320px); margin: 0 auto; padding: 18px 0 40px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px 18px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 10px; letter-spacing: .16em; }
.wordmark strong { font: 500 clamp(1.55rem, 4vw, 2.05rem)/1 Georgia, serif; }
.wordmark span { color: var(--muted); font-size: .53rem; letter-spacing: .17em; }
.language-switch { display: inline-flex; border: 1px solid var(--line); }
.language-switch a { padding: 9px 11px; color: var(--muted); font-size: .61rem; letter-spacing: .1em; transition: color .2s ease, background .2s ease; }
.language-switch a + a { border-left: 1px solid var(--line); }
.language-switch a[aria-current="page"] { color: #1c1418; background: var(--ink); }
.language-switch a:hover, .language-switch a:focus-visible { color: var(--ink); outline: 0; }
.language-switch a[aria-current="page"]:hover, .language-switch a[aria-current="page"]:focus-visible { color: #1c1418; }

.hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 34px 80px rgba(0, 0, 0, .32); }
.hero-media { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; background: #0c0b0d; }
.hero-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 10, .14), transparent 55%), linear-gradient(0deg, rgba(8, 8, 10, .34), transparent 50%); content: ""; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.03) saturate(.89); }
.hero-copy { position: relative; display: grid; gap: 17px; padding: 27px 23px 29px; background: linear-gradient(135deg, #120d11, #211018 61%, #4a1a2b); }
.eyebrow { color: var(--gold); font: 600 .58rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .17em; }
.hero h1 { display: grid; gap: 4px; font-family: var(--serif); font-weight: 400; letter-spacing: .095em; }
.hero h1 span { color: #dfd1c7; font: 500 .56rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .25em; }
.hero h1 { font-size: clamp(4.5rem, 17vw, 8.1rem); line-height: .82; }
.hero-hook { font: 400 clamp(1.5rem, 6vw, 2.45rem)/1.43 var(--serif); letter-spacing: .025em; }
.hero-text { max-width: 33em; color: #ded3d0; font: .91rem/1.95 var(--serif); letter-spacing: .02em; }
.hero-actions { display: grid; gap: 9px; margin-top: 3px; }
.button { display: flex; min-height: 57px; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 16px; border: 1px solid transparent; font-size: .72rem; letter-spacing: .105em; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.button b { font: 500 1rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.button:hover, .button:focus-visible { transform: translateY(-2px); outline: 0; }
.button-primary { color: #211015; background: var(--ink); }
.button-primary:hover, .button-primary:focus-visible { background: #fff; }
.button-quiet { border-color: rgba(255, 244, 235, .32); background: rgba(255, 244, 235, .04); }
.button-quiet:hover, .button-quiet:focus-visible { border-color: var(--ink); background: rgba(255, 244, 235, .12); }
.hero-index { display: none; }

.members-section { padding: 77px 2px 0; }
.section-heading { display: grid; gap: 23px; margin-bottom: 31px; }
.section-heading > div { display: grid; gap: 12px; }
.section-heading h2, .first-record h2, .afterword h2 { font: 400 clamp(2.05rem, 8vw, 4.2rem)/1.23 var(--serif); letter-spacing: .02em; }
.section-heading > p { max-width: 31em; color: var(--muted); font: .91rem/1.9 var(--serif); letter-spacing: .02em; }
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; scroll-margin-top: 14px; }
.member-card { position: relative; min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); background: #161216; box-shadow: 0 20px 50px rgba(0, 0, 0, .18); }
.member-card:nth-child(even) { margin-top: 34px; }
.member-card a { position: relative; display: block; height: 100%; overflow: hidden; }
.member-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .55s cubic-bezier(.2,.65,.2,1), filter .3s ease; }
.member-card a:hover img, .member-card a:focus-visible img { transform: scale(1.035); filter: brightness(1.07); }
.member-card-copy { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 5px; min-height: 44%; padding: 36px 13px 14px; background: linear-gradient(0deg, rgba(10, 8, 10, .98) 0%, rgba(15, 9, 12, .84) 64%, transparent 100%); }
.member-card-copy p { color: var(--gold); font: 600 .51rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .14em; }
.member-card-copy h3 { font: 400 clamp(1.18rem, 5vw, 1.7rem)/1.15 var(--serif); letter-spacing: .04em; }
.member-card-copy small { color: #d4c4bf; font-size: .5rem; letter-spacing: .11em; }
.member-card-copy strong { min-height: 3.3em; padding-top: 2px; color: #ece1da; font: 400 .72rem/1.62 var(--serif); letter-spacing: .02em; }
.member-card-copy span { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 244, 235, .18); color: var(--gold); font-size: .56rem; letter-spacing: .08em; }
.member-card-copy b { font: 400 .88rem/1 sans-serif; }
.member-reina { background: #2c121d; }.member-mizuki { background: #2e1b16; }.member-hiyori { background: #121c2d; }.member-risa { background: #1b1a1c; }

.first-record { position: relative; overflow: hidden; margin-top: 83px; padding: 32px 24px; border: 1px solid rgba(229, 180, 120, .48); background: linear-gradient(125deg, rgba(104, 33, 55, .86), rgba(26, 13, 18, .98) 57%, rgba(75, 34, 24, .83)); }
.first-record::after { position: absolute; top: -7rem; right: -3rem; width: 17rem; height: 17rem; border: 1px solid rgba(229, 180, 120, .24); border-radius: 50%; content: ""; }
.first-record-layout { position: relative; z-index: 1; display: grid; gap: 26px; }
.first-record-layout > div { display: grid; gap: 17px; }
.first-record-layout p { max-width: 35em; color: #e6d8d1; font: .9rem/1.9 var(--serif); }
.button-outline { border-color: rgba(255, 244, 235, .56); background: rgba(7, 7, 9, .2); }
.button-outline:hover, .button-outline:focus-visible { border-color: var(--ink); background: var(--ink); color: #201016; }

.afterword { display: grid; gap: 38px; padding: 78px 2px 16px; }
.observer-note, .reading-notice { display: grid; gap: 14px; }
.observer-note p:last-child, .reading-notice li { color: var(--muted); font: .84rem/1.9 var(--serif); letter-spacing: .02em; }
.reading-notice { padding: 22px 20px; border-left: 1px solid var(--gold); background: rgba(255, 244, 235, .035); }
.reading-notice h2 { font-family: var(--sans); font-size: .88rem; font-weight: 600; letter-spacing: .08em; }
.reading-notice ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.reading-notice li { position: relative; padding-left: 14px; }
.reading-notice li::before { position: absolute; left: 0; color: var(--gold); content: "—"; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 41px; padding: 17px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .56rem; letter-spacing: .13em; }
.site-footer a { color: var(--ink); }.site-footer a span { color: var(--gold); font-size: .88rem; }

@media (min-width: 720px) {
  .start-site { width: min(100% - 68px, 1320px); padding-top: 26px; }
  .site-header { padding-bottom: 25px; }
  .hero { min-height: clamp(580px, 48vw, 710px); }
  .hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-media::after { background: linear-gradient(90deg, rgba(8, 8, 10, .98) 0%, rgba(8, 8, 10, .87) 28%, rgba(8, 8, 10, .26) 58%, rgba(8, 8, 10, .05) 100%), linear-gradient(0deg, rgba(8, 8, 10, .4), transparent 48%); }
  .hero-media img { object-position: center; }
  .hero-copy { width: min(51%, 590px); min-height: inherit; align-content: center; padding: clamp(42px, 6vw, 84px); background: transparent; }
  .hero h1 { font-size: clamp(5.8rem, 10.2vw, 9rem); }
  .hero-actions { grid-template-columns: minmax(0, 1fr); max-width: 330px; }
  .hero-index { position: absolute; right: 24px; bottom: 22px; z-index: 1; display: block; margin: 0; color: rgba(255, 244, 235, .6); font: .5rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .15em; writing-mode: vertical-rl; }
  .members-section { padding-top: 118px; }
  .section-heading { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: end; gap: 48px; margin-bottom: 48px; }
  .member-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 24px); }
  .member-card:nth-child(even) { margin-top: 62px; }
  .member-card-copy { gap: 7px; min-height: 43%; padding: 52px 16px 18px; }
  .member-card-copy h3 { font-size: clamp(1.28rem, 2.2vw, 1.85rem); }
  .member-card-copy strong { min-height: 4.8em; font-size: .76rem; }
  .first-record { margin-top: 126px; padding: clamp(38px, 5vw, 74px); }
  .first-record-layout { grid-template-columns: minmax(0, 1.2fr) minmax(220px, .55fr); align-items: end; gap: 50px; }
  .afterword { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr); gap: clamp(54px, 8vw, 150px); padding-top: 116px; }
  .observer-note { max-width: 570px; }
}

@media (min-width: 1060px) {
  .hero-copy { width: 46%; }
  .hero h1 { font-size: 9.1rem; }
  .hero-hook { font-size: 2.55rem; }
  .member-card-copy { padding: 19px 18px 20px; }
  .member-card-copy strong { font-size: .83rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}