:root{ --bg:#fff; --fg:#111; --accent:#ffd400 }
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:#fff;color:#111;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}

/* Global header */
.header{position:fixed;top:0;left:0;right:0;height:72px;z-index:100;background:#fff}
.brand{position:absolute;left:50%;transform:translateX(-50%);top:22px;
  font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px)}
.info-link{position:absolute;right:16px;top:18px;display:inline-block;padding:6px 10px}
.info-link span{font-family:"Times New Roman",Times,serif;font-style:italic;font-weight:700;font-size:28px;line-height:1}

/* Home */
.landing{min-height:100vh;display:grid;place-items:center}
.links-vertical{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:-20px}
.links-vertical a{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(28px,5.5vw,48px)}

/* Content pages */
.container{max-width:720px;margin:0 auto;padding:clamp(24px,10vh,120px) 20px 96px;text-align:center}
.container img{width:100%;height:auto;display:block;margin:16px 0 18px}
.container p{margin:14px 0;font-size:clamp(17px,2.4vw,18px)}

.social{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
.social .ig{display:inline-block;width:18px;height:18px}
.social .ig svg{display:block;width:18px;height:18px}

/* Center the About page block vertically */
body.about-page main.container{min-height:calc(100vh - 72px);display:flex;flex-direction:column;justify-content:center}
/* Hide the 'i' link on all non-home pages */
body.about-page .info-link{ display:none !important; }

/* Desktop sizing to match reference */
@media (min-width: 1024px){
  .brand{ font-size: 40px; letter-spacing:.20em }
  .links-vertical a{ font-size: 72px }
}

/* Hover states (brand, nav, info 'i') */
.brand a:hover,
.links-vertical a:hover,
.info-link:hover span{ color: var(--accent); fill: var(--accent) }

/* === Full-screen animated spiral background (Home only) === */
body.home-page::before{ content:none; }

/* softer grain overlay */
body.home-page::after{ content:none; }
/* fine grain noise over everything for the hazy feel */
body.home-page::after{ content:none; }
@keyframes spin{
  0%{ transform: rotate(0deg) scale(1.02); }
  100%{ transform: rotate(360deg) scale(1.02); }
}
/* Ensure the main links stay on top */
.landing{ position:relative; z-index:1 }

/* Home header transparent */
body.home-page .header{ background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* Canvas background for Home */
#bg-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* behind content */
  display:block;
}

/* optional super subtle film grain overlay */
.home-noise{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 25% 25%, rgba(0,0,0,.03) 0 1px, transparent 1px),
    radial-gradient(1px 1px at 75% 75%, rgba(0,0,0,.03) 0 1px, transparent 1px);
  background-size:8px 8px, 8px 8px;
  mix-blend-mode: overlay;
}