/* ============================================================
   kwyd — shared brand shell
   tokens · reset · grain · nav · mobile menu · footer · utilities
   Page-specific layout lives in each page's own <style> block.
   ============================================================ */

:root {
  /* surfaces — near-black, warmer & darker than the app */
  --void:    #08080a;
  --raise:   #0e0e12;
  --card:    #141418;

  /* type colors — warm off-white through to meta-gray */
  --text:    #f1efea;
  --mid:     #a8a6a1;
  --dim:     #6f6e72;

  /* brand */
  --coral:   #f49471;   /* decorative — logo, accents, large display */
  --coral-2: #d4614a;   /* deeper — buttons / white text on top */

  /* lines */
  --line:    rgba(241, 239, 234, 0.09);
  --line-2:  rgba(241, 239, 234, 0.045);

  /* type families */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand:   'Cherry Bomb One', var(--sans);

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --shell:   min(1320px, 100% - 11vw);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--coral); color: var(--void); }

/* fraunces optical defaults — high contrast, slightly soft terminals */
h1, h2, h3, .display { font-variation-settings: 'opsz' 144, 'SOFT' 24, 'WONK' 0; }

/* ---- scrollbar (subtle, branded) ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #222227; border-radius: 99px; border: 3px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: #2e2e35; }

/* ---- film grain overlay ---- */
.grain {
  position: fixed;
  inset: -120%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -5%); }
  60%  { transform: translate(-3%, 3%); }
  80%  { transform: translate(5%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---- shell / container ---- */
.shell { width: var(--shell); margin-inline: auto; }
.shell--narrow { width: min(820px, 100% - 11vw); margin-inline: auto; }

/* ============================================================
   nav
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(20px, 5.5vw, 64px);
  transition: background 0.5s var(--ease), border-color 0.5s, padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding-block: 18px;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line-2);
}
.nav__logo {
  font-family: var(--brand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--coral);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav__logo:hover { transform: rotate(-3deg) scale(1.04); }

.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  list-style: none;
}
.nav__links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  position: relative;
  padding-block: 4px;
  transition: color 0.25s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
}

/* ---- mobile menu overlay ---- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 8vw, 64px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute;
  top: 26px; right: clamp(20px, 5.5vw, 64px);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--mid);
  background: none; border: none; cursor: pointer;
}
.menu__links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.menu__links a {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.6rem, 13vw, 4rem);
  line-height: 1.1;
  color: var(--text);
  width: max-content;
  transform: translateY(14px);
  opacity: 0;
  transition: color 0.25s;
}
.menu.is-open .menu__links a {
  animation: menuIn 0.6s var(--ease) forwards;
}
.menu__links li:nth-child(1) a { animation-delay: 0.06s; }
.menu__links li:nth-child(2) a { animation-delay: 0.12s; }
.menu__links li:nth-child(3) a { animation-delay: 0.18s; }
.menu__links li:nth-child(4) a { animation-delay: 0.24s; }
.menu__links a:hover { color: var(--coral); }
.menu__foot {
  margin-top: 56px;
  display: inline-block;
  width: max-content;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--mid);
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.menu__foot:hover { color: var(--coral); }
@keyframes menuIn { to { transform: none; opacity: 1; } }

/* ============================================================
   footer
   ============================================================ */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 96px) 0 44px;
  margin-top: 40px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px 40px;
  align-items: start;
}
.footer__brand-logo {
  font-family: var(--brand);
  font-size: 2.6rem;
  color: var(--coral);
  line-height: 1;
  display: inline-block;
}
.footer__tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--mid);
  margin-top: 18px;
  max-width: 30ch;
}
.footer__col h4 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer__col a, .footer__col span {
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: var(--mid);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--coral); }
.footer__bottom {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* ============================================================
   reveal-on-scroll
   ============================================================ */
/* Reveals only hide when JS is active (the inline <head> snippet adds
   `.js`). Without JS the content stays visible — nothing can vanish. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--rd, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   mobile
   ============================================================ */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-block; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}