/* Shared, progressively enhanced foundations. Page composition lives in subpages.css / immersive.css. */
:root {
  --ink: #141218; --ink-deep: #0d0c10; --ink-soft: #211c28;
  --gold: #a994c5; --gold-light: #d6c7ed; --gold-dim: #62536f;
  --grey: #e5e0e7; --lavender: #d4baf2; --muted: #b7aebf;
  --border: rgba(188,167,211,.25);
  --serif-en: 'Cormorant Garamond', Georgia, serif;
  --serif-jp: 'Noto Serif JP', 'Yu Mincho', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--ink); color: var(--grey); font: 400 16px/2 var(--serif-jp); }
/* A faint, static film-grain wash over everything — texture, not motion. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 96; pointer-events: none;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 130px 130px;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 150; padding: 10px 20px; background: var(--lavender); color: var(--ink); }
.skip-link:focus { top: 12px; }
.sr-only, .sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:where(a,button,input,summary):focus-visible { outline: 2px solid var(--lavender); outline-offset: 5px; }
.gilded-button, .outline-button, .gold-button { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--border); background: transparent; color: var(--lavender); line-height: 1.6; transition: background .25s, border-color .25s; }
.gilded-button:hover, .outline-button:hover { background: #a582c41f; border-color: var(--lavender); }
.join-form input { width: 100%; min-height: 52px; padding: 12px 18px; border: 1px solid var(--border); background: var(--ink); color: var(--grey); border-radius: 0; }
.join-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.form-message { min-height: 24px; margin: 10px 0 0; font-size: 14px; }
.reveal { opacity: 1; transform: none; }
@media (max-width: 767px) { .join-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }