:root {
  --paper: #f2f2f5;
  --ink: #0b0b0e;
  --card: #fafafc;
  --line: rgba(11, 11, 14, .09);
  --sub: rgba(11, 11, 14, .55);
  --signal: #0b0b0e;
  --gold: #ad9257;
  --radius: 24px;
  --shadow: 0 18px 48px rgba(11, 11, 14, .07);
  --sans: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(11,11,14,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,14,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.72), transparent 38rem),
    var(--paper);
  background-size: 32px 32px, 32px 32px, auto, auto;
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 8px; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 14px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.glass-control {
  background: rgba(250,250,252,.72);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(11,11,14,.09), inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  backdrop-filter: blur(22px) saturate(1.28);
}
.site-nav {
  position: fixed; z-index: 10; top: 16px; left: max(16px, calc((100vw - 1320px) / 2)); right: max(16px, calc((100vw - 1320px) / 2));
  margin: auto; padding: 8px 10px 8px 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; text-decoration: none; letter-spacing: -.02em; }
.wordmark span, .kicker > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--signal); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { min-height: 44px; padding: 11px 15px; display: grid; place-items: center; text-decoration: none; border-radius: 999px; }
.nav-links a { transition: transform .22s var(--ease-out), background-color .22s; }
.nav-links a:hover { background: rgba(255,255,255,.72); transform: translateY(-1px); }
.nav-support { color: #fff !important; background: var(--ink) !important; padding-inline: 20px !important; }

.hero {
  min-height: min(940px, 100svh); max-width: 1440px; margin: auto;
  padding: 100px clamp(20px, 4vw, 60px) 40px;
  display: grid; grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr);
  align-items: center; gap: clamp(24px, 5vw, 72px); overflow: hidden;
}
.hero-copy, .hero-art { will-change: transform; transition: transform .18s linear; }
.kicker { margin: 0 0 14px; color: var(--sub); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero .kicker { display: flex; align-items: center; gap: 9px; }
.hero h1 { margin: 0; font: 700 clamp(6rem, 13vw, 12.5rem)/.72 var(--serif); letter-spacing: -.085em; }
.hero-line { margin: clamp(36px, 6vw, 72px) 0 32px; font: 600 clamp(1.7rem, 3vw, 3.2rem)/1.06 var(--serif); letter-spacing: -.035em; }
.primary-button {
  min-height: 54px; width: fit-content; padding: 14px 20px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 28px; background: var(--ink); color: #fff;
  font-weight: 720; text-decoration: none; box-shadow: 0 12px 25px rgba(11,11,14,.12);
  transition: transform .2s, filter .2s;
}
.primary-button:hover { transform: scale(.98); filter: brightness(1.12); }
.hero-art {
  min-height: 720px; height: calc(100svh - 140px); max-height: 820px; position: relative;
  border: 1px solid var(--line); border-radius: 34px; background: rgba(255,255,255,.76);
  overflow: hidden; box-shadow: var(--shadow);
}
.glass-orbit {
  position: absolute; z-index: 3; width: 128px; height: 48px; right: 34px; top: 34px;
  border-radius: 999px; pointer-events: none;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 30px rgba(11,11,14,.12), inset 0 1px rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.hero-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -80px 80px rgba(242,242,245,.55); pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.issue-label, .hero-note { position: absolute; z-index: 2; margin: 0; font: 650 .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.issue-label { top: 24px; left: 24px; }
.hero-note { right: 24px; bottom: 24px; text-align: right; }

.intro, .girls, .character-plate { max-width: 1320px; margin: auto; padding: clamp(90px, 12vw, 160px) clamp(20px, 4vw, 60px); }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 9vw, 130px); align-items: end; }
h2 { margin: 0; font: 650 clamp(2.6rem, 5vw, 5.4rem)/.97 var(--serif); letter-spacing: -.05em; }
.intro > p, .girls-copy > p { color: var(--sub); max-width: 50ch; font-size: clamp(1rem, 1.3vw, 1.18rem); }

.feature-grid {
  max-width: 1320px; margin: auto; padding: 0 clamp(20px, 4vw, 60px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.feature-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.8)); box-shadow: var(--shadow); }
.feature-card-wide { grid-column: 1 / -1; min-height: 620px; color: #fff; }
.feature-card-wide > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .65s var(--ease-out); }
.feature-card-wide::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, rgba(7,7,10,.8)); }
.feature-overlay { position: absolute; z-index: 2; left: clamp(24px, 5vw, 64px); right: clamp(24px, 5vw, 64px); bottom: clamp(24px, 5vw, 54px); }
.feature-overlay .kicker, .feature-overlay p { color: rgba(255,255,255,.72); }
.feature-overlay h2 { max-width: 12ch; }
.feature-overlay > p:last-child { max-width: 48ch; }
.feature-card-copy { min-height: 570px; padding: clamp(28px, 5vw, 58px); display: flex; flex-direction: column; }
.feature-card-copy h2 { font-size: clamp(2.4rem, 4vw, 4.2rem); }
.feature-card-copy > p:last-of-type { color: var(--sub); max-width: 39ch; }
.signal-dot { width: 10px; height: 10px; margin: 0 0 auto; border-radius: 50%; background: var(--signal); }
.route { min-height: 110px; margin-top: auto; display: flex; justify-content: space-between; align-items: center; position: relative; }
.route::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 1px dashed rgba(11,11,14,.3); }
.route i { z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(11,11,14,.22); }
.route i:nth-child(3) { border: 7px solid #fff; background: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.feature-card-image { min-height: 570px; }
.feature-card-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); }
.image-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 13px 16px; display: flex; justify-content: space-between; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(18px); font-size: .78rem; font-weight: 700; }

.girls { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
.girls-copy h2 { margin-bottom: 28px; }
.text-link { display: inline-flex; gap: 20px; margin-top: 20px; font-weight: 750; }
.signal-post { padding: clamp(18px, 3vw, 34px); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.post-head strong, .post-head small { display: block; }
.post-head small { color: var(--sub); }
.post-head em { margin-left: auto; color: var(--signal); font-style: normal; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.post-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.post-actions { display: flex; gap: 10px; margin-top: 18px; }
.post-actions span { min-width: 72px; padding: 9px 14px; border-radius: 999px; background: rgba(11,11,14,.05); text-align: center; }
.post-actions .accent { color: var(--ink); background: rgba(11,11,14,.08); }

.character-plate { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 110px); align-items: center; }
.character-art { height: min(720px, 75vw); border: 1px solid var(--line); border-radius: 28px; background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.character-art img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.character-copy h2 { font-size: clamp(4.5rem, 10vw, 9rem); }
.character-copy > p:last-child { max-width: 42ch; color: var(--sub); }
.rarity { color: var(--gold); font-weight: 800; letter-spacing: .08em; }
.rarity span { margin-left: 12px; letter-spacing: 0; }

.interactive-plate, .signal-post {
  transform: translateY(0);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.interactive-plate:hover, .signal-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(11,11,14,.11);
}
.feature-card-wide:hover > img, .feature-card-image:hover > img { transform: scale(1.014); }
.reveal {
  opacity: 1;
  transform: none;
}
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.glass-scroll {
  position: fixed; z-index: 9; right: 22px; bottom: 22px; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-out);
}
.glass-scroll.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.support-main { min-height: calc(100svh - 190px); max-width: 1200px; margin: auto; padding: 150px clamp(20px, 4vw, 60px) 90px; }
.support-hero { max-width: 850px; }
.support-hero h1 { margin: 0 0 26px; font: 650 clamp(4.2rem, 10vw, 9rem)/.84 var(--serif); letter-spacing: -.07em; }
.support-hero > p { max-width: 50ch; color: var(--sub); font-size: 1.1rem; }
.support-hero .primary-button { margin-top: 22px; }
.support-details { margin-top: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.support-details article { min-height: 330px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); box-shadow: var(--shadow); }
.support-details h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); }
.support-details article > p:last-child { color: var(--sub); max-width: 42ch; }

footer { max-width: 1320px; margin: auto; padding: 34px clamp(20px, 4vw, 60px) 48px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 34px; }
footer nav { margin-left: auto; display: flex; gap: 24px; }
footer p { margin: 0; color: var(--sub); font-size: .78rem; }

@media (max-width: 820px) {
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 130px; }
  .hero-copy { padding-bottom: 20px; }
  .hero-art { min-height: 620px; height: 72svh; }
  .intro, .girls, .character-plate { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card-wide { min-height: 520px; }
  .feature-card-copy, .feature-card-image { min-height: 500px; }
  .character-art { height: 670px; }
}

@media (max-width: 600px) {
  body {
    background-size: 24px 24px, 24px 24px, auto, auto;
  }
  .site-nav { top: 10px; left: 12px; right: 12px; padding: 7px 8px 7px 14px; }
  .nav-links a:not(.nav-support) { display: none; }
  .hero h1 { font-size: clamp(5.5rem, 30vw, 7.3rem); }
  .hero-line { font-size: 1.65rem; }
  .primary-button { max-width: 100%; gap: 18px; }
  .hero-art { min-height: 520px; height: 66svh; border-radius: 26px; }
  .feature-card-wide { min-height: 470px; }
  .feature-overlay h2 { font-size: 2.8rem; }
  .girls { padding-top: 110px; }
  .post-head em { display: none; }
  .character-art { height: 520px; }
  .support-details { grid-template-columns: 1fr; margin-top: 70px; }
  footer { align-items: flex-start; flex-wrap: wrap; }
  footer nav { width: 100%; margin: 0; flex-wrap: wrap; gap: 16px 24px; }
  .glass-orbit { width: 94px; height: 38px; right: 20px; top: 20px; }
  .glass-scroll { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-copy, .hero-art, .interactive-plate, .signal-post, .reveal { transform: none !important; opacity: 1 !important; }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .glass-control, .glass-orbit {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}