:root{
  --bg: #EDEBE5;
  --ink: #141414;
  --blue: #316890;
  --pink: #C24E8A;
  --line: rgba(20,20,20,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  text-align:center;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
::selection{ background: var(--ink); color: var(--bg); }
a{ color:inherit; text-decoration:none; }

/* ---- noise texture canvas ---- */
#noise-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  image-rendering:pixelated;
  mix-blend-mode:multiply;
  opacity:0.25;
}

/* ---- cursor glow ---- */
#cursor-glow{
  position:fixed; top:0; left:0; z-index:1;
  width:180px; height:180px; margin-left:-90px; margin-top:-90px;
  border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(20,20,20,0.025) 0%, rgba(20,20,20,0) 70%);
  will-change: transform;
}

/* ---- soap bubbles ---- */
#bubble-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:150; pointer-events:none;
}

/* everything else sits above the noise/glow/bubbles */
nav.main-nav, main, footer, #gate{ position:relative; z-index:2; }

/* ---- password gate ---- */
#gate{
  position:fixed; inset:0; z-index:100;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
  overflow:hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
html.pre-auth #gate{ display:none; }
#gate-noise{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  image-rendering:pixelated;
  mix-blend-mode:multiply;
  opacity:0.25;
}
#gate .gate-eyebrow, #gate .gate-title, #gate form{ position:relative; z-index:1; }
.gate-eyebrow{ font-size:11px; letter-spacing:0.32em; color: var(--blue); text-transform:uppercase; margin-bottom:16px; font-family: Arial, sans-serif; }
.gate-title{ font-size:clamp(24px,4vw,34px); font-weight:400; font-style:italic; margin-bottom:26px; color: var(--ink); }
#gate form{ display:flex; flex-direction:column; align-items:center; gap:14px; }
#gate input{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color: var(--ink); font-family: 'Times New Roman', Times, serif; font-size:16px; padding:10px 4px; width:220px;
  text-align:center; letter-spacing:0.35em; outline:none;
}
#gate input:focus{ border-bottom-color: var(--pink); }
#gate button{
  background:transparent; border:1px solid var(--line); color: var(--ink);
  font-family: Arial, sans-serif; font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  padding:10px 22px; cursor:pointer; transition: all 0.3s ease; margin-top:4px;
}
#gate button:hover{ border-color: var(--pink); color: var(--pink); }
#gate-error{ font-size:11px; color: var(--pink); height:16px; opacity:0; transition:opacity 0.3s ease; font-family: Arial, sans-serif; }
#gate-error.show{ opacity:1; }

/* ---- nav ---- */
nav.main-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:28px;
  padding:28px 20px; width:100%;
}
nav.main-nav a{
  font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  padding:4px 2px; border-bottom:1px solid transparent;
  font-family: Arial, sans-serif;
}
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--pink); border-bottom-color: var(--pink); }

main{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px 80px; }
main h1, main h2{ letter-spacing:0.06em; }
main p{ letter-spacing:0.03em; }

.wiggle{ display:inline-block; will-change:transform; }

footer{ padding:26px 20px; font-size:10px; letter-spacing:0.2em; color: var(--blue); text-transform:uppercase; font-family: Arial, sans-serif; }

@media (prefers-reduced-motion: reduce){ .wiggle{ transform:none !important; } #noise-canvas{ display:none; } }