:root {
  --black: #050505;
  --white: var(--puls-white, #f0f1e9);
  --green: var(--puls-green-bright, #8cff49);
  --yellow: var(--puls-yellow, #dfff45);
  --yellow-highlight: var(--puls-yellow-highlight, #b2cc37);
  --on-yellow: var(--puls-on-yellow, #10120f);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--white);
  background: var(--black);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--black); }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: .8rem 1rem; background: var(--yellow); color: var(--black); font-weight: 800; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: stretch;
  min-height: 5.5rem;
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.wordmark { display: flex; align-items: center; padding: 0 clamp(1rem,3vw,3rem); border-right: 1px solid rgba(255,255,255,.45); text-decoration: none; }
.wordmark img { width: clamp(5.5rem,8vw,7.5rem); height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
nav { display: grid; grid-template-columns: repeat(3,1fr); }
nav a { display: flex; align-items: center; justify-content: center; padding: 1rem; border-right: 1px solid rgba(255,255,255,.45); font-size: clamp(.82rem,1.2vw,1.05rem); font-weight: 700; text-decoration: none; text-transform: lowercase; }
nav a:last-child { border-right: 0; }
nav a:hover, nav a:focus-visible { background: var(--yellow-highlight); color: var(--black); }
/* Landing page only: two extra links (Log in / Become a member) alongside
   About us/Events/Our facilities, so the base 3-column `nav` rule above —
   which the frozen site/index.html prototype still relies on — stays
   untouched. */
nav.nav-account { grid-template-columns: repeat(5,1fr); }
nav.nav-account .nav-account-cta { background: var(--green); color: var(--black); }
nav.nav-account .nav-account-cta:hover, nav.nav-account .nav-account-cta:focus-visible { background: var(--yellow-highlight); }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 8rem clamp(1rem,3vw,3rem) 2rem; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75)); }
.aurora-canvas,.aurora-fallback { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.aurora-canvas { display: block; }
.aurora-fallback { background: radial-gradient(ellipse at 65% 35%,#73e43b 0%,#17512a 25%,#04120b 58%,#050505 78%); }
.aurora-ready + .aurora-fallback { display: none; }
.aurora-controls { position: absolute; top: 7rem; right: clamp(1rem,3vw,3rem); z-index: 3; width: min(29rem,calc(100% - 2rem)); border: 1px solid rgba(223,255,69,.4); background: rgba(4,18,11,.72); color: #d9edcf; box-shadow: 0 18px 70px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
.aurora-controls summary { display: flex; justify-content: space-between; padding: .8rem 1rem; cursor: pointer; font-family: "Courier New",monospace; font-size: .68rem; font-weight: 700; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.aurora-controls summary::-webkit-details-marker { display: none; }
.aurora-controls[open] summary { border-bottom: 1px solid rgba(223,255,69,.25); }
.aurora-controls[open] summary span { transform: rotate(45deg); }
.control-body { display: grid; gap: 1rem; padding: 1rem; }
.control-body fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.control-body legend,.range-controls label > span { display: flex; justify-content: space-between; width: 100%; margin-bottom: .45rem; color: #afc1a6; font-family: "Courier New",monospace; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.palette-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.palette-presets legend { flex-basis: 100%; }
.preset,.control-actions button { padding: .45rem .58rem; border: 1px solid rgba(223,255,69,.25); border-radius: 2px; background: rgba(223,255,69,.06); color: inherit; font: 700 .62rem "Courier New",monospace; cursor: pointer; text-transform: uppercase; }
.preset { display: inline-flex; align-items: center; gap: .35rem; }
.preset i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--swatch,#95ff50); }
.preset[data-palette="toxic"] { --swatch:#e7ff00; }.preset[data-palette="ocean"] { --swatch:#27d7ff; }.preset[data-palette="ultraviolet"] { --swatch:#be5bff; }.preset[data-palette="ember"] { --swatch:#ff6a24; }
.preset:hover,.preset.active,.control-actions button:hover { border-color: var(--yellow); background: var(--yellow-highlight); color: var(--black); }
.color-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.color-controls legend { grid-column: 1/-1; }
.color-controls label { display: grid; gap: .25rem; color: #afc1a6; font: .6rem "Courier New",monospace; text-align: center; text-transform: uppercase; }
.color-controls input { width: 100%; height: 2.2rem; padding: 2px; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; background: none; cursor: pointer; }
.range-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.range-controls label { min-width: 0; }.range-controls output { color: var(--yellow); }
.range-controls input { width: 100%; accent-color: var(--yellow); cursor: pointer; }
.control-actions { display: flex; gap: .45rem; }.control-actions button:first-child { margin-right: auto; }

.kicker { margin: 0 0 .3rem; font-family: "Courier New",monospace; font-size: clamp(.72rem,1vw,.9rem); letter-spacing: .12em; text-transform: uppercase; }
.hero-logo { width: min(78vw,72rem); margin: 0; line-height: 0; }
.hero-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1rem 3rem rgba(0,0,0,.2)); }
.hero-line { align-self: flex-end; margin: 0; font-family: "Courier New",monospace; font-size: clamp(.72rem,1.2vw,1rem); letter-spacing: .12em; text-transform: uppercase; }

/* Landing-page-only: down-arrow scroll hint on the first "PULS" screen. Kept
   in this shared stylesheet (site/index.html loads it too) but scoped to the
   .scroll-hint class, which only templates/accounts/landing.html emits, so
   the frozen prototype's markup/look is unaffected. */
.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-left: -1.5rem;
  border: 1px solid rgba(140,255,73,.55);
  border-radius: 50%;
  background: rgba(5,5,5,.35);
  color: var(--green);
  text-decoration: none;
  backdrop-filter: blur(6px);
  animation: scroll-hint-bob 2.2s ease-in-out infinite;
}
.scroll-hint:hover, .scroll-hint:focus-visible { border-color: var(--green); background: rgba(140,255,73,.14); }
@keyframes scroll-hint-bob { 0%,100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(.4rem); opacity: 1; } }

.photo-strip { overflow: hidden; border-block: 1px solid var(--yellow); background: var(--yellow); color: var(--black); }
.photo-track { display: flex; width: max-content; padding: .75rem 0; animation: photo-scroll 48s linear infinite; }
.photo-track figure { position: relative; width: clamp(18rem,36vw,38rem); aspect-ratio: 4/3; flex: none; margin: 0 .75rem 0 0; overflow: hidden; background: #171717; }
.photo-track figure.portrait { width: clamp(15rem,27vw,28rem); }
.photo-track img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.12); transition: filter .25s ease; }
.photo-track figure:hover img { filter: saturate(1.1) contrast(1.05); }
/* A slide is a click target only when it has a link (owner, 2026-09-06);
   the hover brightening above stays on the figure so an unlinked slide
   still comes alive on hover without pretending to be clickable. */
.photo-track .slide-link { display: block; width: 100%; height: 100%; }
.photo-track figcaption { position: absolute; inset: auto .6rem .6rem; width: max-content; max-width: calc(100% - 1.2rem); padding: .35rem .45rem; background: var(--yellow); font-family: "Courier New",monospace; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@keyframes photo-scroll { to { transform: translateX(-50%); } }
/* Three independent scrollers (landing page only): same seamless -50% loop,
   varied speed/direction so they read as distinct bands rather than three
   copies of one animation. */
.photo-strip .photo-track { animation: none; }
.photo-sequence { display: flex; flex: none; }
.photo-strip .photo-track--ready { animation: photo-scroll 48s linear infinite; }
.photo-strip--b .photo-track--ready { animation-duration: 58s; animation-direction: reverse; }
.photo-strip--c .photo-track--ready { animation-duration: 66s; }

.text-section { display: grid; grid-template-columns: minmax(9rem,1fr) 3fr; gap: clamp(2rem,5vw,6rem); padding: clamp(5rem,11vw,11rem) clamp(1rem,3vw,3rem); border-bottom: 1px solid rgba(255,255,255,.35); }
.section-label { margin: .4rem 0 0; font-family: "Courier New",monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.text-section h2 { max-width: 15ch; margin: 0 0 3rem; font-size: clamp(3rem,7.2vw,8rem); line-height: .91; letter-spacing: -.07em; }
.text-section div > p { max-width: 42rem; margin: 0 0 2rem; font-size: clamp(1.15rem,2vw,1.65rem); line-height: 1.5; }
.arrow-link { display: inline-block; padding-bottom: .25rem; border-bottom: 1px solid; font-family: "Courier New",monospace; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.acid { background: linear-gradient(125deg,var(--green),var(--yellow)); color: var(--black); }

/* Instagram, made prominent (landing page only): a bordered pill with an
   icon instead of the plain underlined text link .arrow-link gave it. */
.instagram-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: .5rem; padding: .85rem 1.5rem; border: 2px solid var(--black); border-radius: 999px; background: var(--black); color: var(--green); font-family: "Courier New",monospace; font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.instagram-link svg { flex: none; }
.instagram-link:hover, .instagram-link:focus-visible { background: var(--green); color: var(--black); }

/* Public events, listed inside the existing "Events" section. */
.public-events { margin-top: 1rem; }
.public-events h3 { margin: 0 0 1rem; font-family: "Courier New",monospace; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.public-events-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.public-events-list li { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem; padding: 1.1rem 1.4rem; border: 1px solid var(--black); background: rgba(5,5,5,.92); color: var(--white); }
.public-event-date { font-family: "Courier New",monospace; font-size: .8rem; font-weight: 700; color: var(--green); }
.public-event-title { grid-column: 2; font-size: 1.15rem; font-weight: 800; }
.public-event-location { grid-column: 2; font-family: "Courier New",monospace; font-size: .78rem; letter-spacing: .04em; opacity: .75; text-transform: uppercase; }
.public-event-description { grid-column: 1/-1; margin: .4rem 0 0; font-size: 1rem; line-height: 1.45; }
.public-events-empty { margin: 0; font-family: "Courier New",monospace; font-size: .85rem; }

footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem,3vw,3rem); font-family: "Courier New",monospace; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
footer p { margin: 0; }
footer a { text-underline-offset: .25rem; }
.prototype-link { margin: -.75rem 0; padding: .75rem 1rem; border: 1px solid var(--yellow); color: var(--yellow); font-weight: 700; text-decoration: none; }
.prototype-link:hover, .prototype-link:focus-visible { background: var(--yellow-highlight); color: var(--black); }

@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr; position: relative; }
  .wordmark { min-height: 4.5rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.45); }
  nav a { min-height: 4rem; padding: .6rem; text-align: center; }
  .hero { min-height: 72svh; padding-top: 5rem; padding-bottom: 4.5rem; }
  .aurora-controls { top: 1rem; }
  .range-controls { grid-template-columns: 1fr; }
  .hero-logo { width: 94vw; }
  .text-section { grid-template-columns: 1fr; gap: 2rem; }
  .text-section h2 { margin-bottom: 2rem; }
  footer { flex-direction: column; }
  nav.nav-account { grid-template-columns: repeat(3,1fr); }
  .scroll-hint { bottom: .85rem; left: 1rem; width: 2.5rem; height: 2.5rem; margin-left: 0; }
  .public-events-list li { grid-template-columns: 1fr; }
  .public-event-title, .public-event-location { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .photo-track { animation: none; }
  .photo-track, .photo-sequence { flex-wrap: wrap; width: 100%; }
  .photo-track figure { width: calc(50% - .75rem); }
  .scroll-hint { animation: none; }
}

/* Default checkbox for the whole site: a square black box with a heavy white
   outline and a grey inner block, which fills with PULS yellow and shows a
   black tick when checked. `.toggle input` is excluded because it is a
   switch, not a checkbox. Native appearance is dropped so the control reads
   the same in every browser.

   1.35rem, not the 1.05rem it started at: at the old size it disappeared
   beside its own label and read as the browser's own checkbox rather than as
   part of this design (owner feedback, poster studio and the event form). If
   a checkbox ever looks native again, check the stylesheet actually loaded —
   this rule is the only thing standing between it and the browser default. */
input[type="checkbox"]:not(.toggle input){appearance:none;position:relative;width:1.35rem;height:1.35rem;flex:none;border:2px solid var(--white);border-radius:0;background:#000;cursor:pointer}
input[type="checkbox"]:not(.toggle input)::after{content:"";position:absolute;inset:3px;background:#6b716a}
input[type="checkbox"]:not(.toggle input):hover{border-color:var(--yellow)}
input[type="checkbox"]:not(.toggle input):checked{border-color:var(--yellow);background:var(--yellow)}
input[type="checkbox"]:not(.toggle input):checked::after{inset:auto;left:50%;top:46%;width:.3rem;height:.62rem;border:solid var(--on-yellow);border-width:0 3px 3px 0;background:none;transform:translate(-50%,-50%) rotate(45deg)}
input[type="checkbox"]:not(.toggle input):focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
input[type="checkbox"]:not(.toggle input):disabled{cursor:not-allowed;opacity:.55}