/* MUSOU concepts: shared foundation (tokens, reset, cursor, menu, grain).
   Palette and type follow the MUSOU Brand Guidelines v1.0. */
:root {
  --wine: #6E1423;
  --ivory: #FBF7F1;
  --pearl: #FCF9F6;
  --blush: #F3E7E3;
  --ink: #1F1B1D;
  --gold: #A8843A;       /* ornament, rules, large numerals only */
  --gold-text: #7E6224;  /* gold at text size */
  --muted: #5D5558;
  --line: rgba(31, 27, 29, .14);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --label: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(18px, 3.2vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* expo out */
  --ease-io: cubic-bezier(.76, 0, .24, 1);     /* expo in-out */
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--wine); color: var(--ivory); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.label { font: 500 12px/1.35 var(--label); letter-spacing: .22em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 2000; background: var(--wine); color: var(--ivory); padding: 12px 18px; }
.skip:focus { top: 12px; }

/* SplitText line masks */
.ln-mask, .ln { display: block; }

/* ---------- custom cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 1500; pointer-events: none; opacity: 0; transition: opacity .4s; }
.cursor.is-on { opacity: 1; }
.cursor__ring, .cursor__dot, .cursor__label { position: absolute; left: 0; top: 0; }
.cursor__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1px solid var(--cursor-c, rgba(110, 20, 35, .55));
  transition: width .6s var(--ease-out), height .6s var(--ease-out), margin .6s var(--ease-out), background-color .4s, border-color .4s, opacity .3s;
}
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cursor-dot, var(--wine)); transition: opacity .3s, transform .4s var(--ease-out); }
.cursor__label {
  transform: translate(-50%, -50%); font: 500 11px/1 var(--label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cursor-label, var(--ivory)); opacity: 0; transition: opacity .3s; white-space: nowrap;
}
.cursor[data-state='view'] .cursor__ring, .cursor[data-state='drag'] .cursor__ring, .cursor[data-state='shop'] .cursor__ring {
  width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--cursor-fill, var(--wine)); border-color: transparent;
}
.cursor[data-state='view'] .cursor__dot, .cursor[data-state='drag'] .cursor__dot, .cursor[data-state='shop'] .cursor__dot { opacity: 0; }
.cursor[data-state='view'] .cursor__label, .cursor[data-state='drag'] .cursor__label, .cursor[data-state='shop'] .cursor__label { opacity: 1; }
.cursor[data-state='link'] .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor[data-state='hide'] .cursor__ring, .cursor[data-state='hide'] .cursor__dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 1200; visibility: hidden;
  background: var(--menu-bg, var(--wine)); color: var(--menu-fg, var(--ivory));
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 14vh var(--pad) 6vh; gap: 4vw;
}
.menu__list { display: flex; flex-direction: column; gap: .4vh; }
.menu__item { overflow: hidden; }
.menu__link {
  display: inline-block; font: 300 clamp(40px, 6.4vw, 104px)/1.02 var(--serif); letter-spacing: -.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50; transition: font-variation-settings .6s var(--ease-out), opacity .4s;
}
.menu__list:hover .menu__link { opacity: .45; }
.menu__list .menu__link:hover { opacity: 1; font-style: italic; }
.menu__aside { display: flex; flex-direction: column; gap: 14px; justify-self: end; text-align: right; }
.menu__aside a { opacity: .8; } .menu__aside a:hover { opacity: 1; }
@media (max-width: 760px) { .menu { grid-template-columns: 1fr; align-content: end; } .menu__aside { justify-self: start; text-align: left; } }

/* ---------- film grain ---------- */
.grain { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; opacity: var(--grain-o, .06); }
.grain::before {
  content: ''; position: absolute; inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 6%); } 40% { transform: translate(5%, -9%); }
  60% { transform: translate(-6%, -4%); } 80% { transform: translate(9%, 7%); } 100% { transform: translate(0, 0); }
}

/* ---------- concept switcher (prototype chrome) ---------- */
.switch {
  position: fixed; right: 14px; bottom: 14px; z-index: 1300; display: flex; gap: 4px; padding: 4px;
  background: rgba(31, 27, 29, .82); backdrop-filter: blur(8px); border-radius: 99px;
  font: 500 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase;
}
.switch a { color: rgba(251, 247, 241, .7); padding: 9px 12px; border-radius: 99px; }
.switch a[aria-current='page'] { background: var(--ivory); color: var(--ink); }
.switch a:hover { color: var(--ivory); }
@media (max-width: 600px) { .switch { right: 10px; bottom: 10px; } .switch .sw-l { display: none; } .switch a { padding: 8px 11px; } }
.switch a[aria-current='page']:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .grain::before { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.no-js .pre, .no-motion .pre { display: none !important; }