@font-face {
  font-family:"Everett";
  src:url(everett-regular.otf) format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---- Base ---- */
html,body {
  margin:0;
  height:100%;
  background:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}
.stage { position:relative; height:100%; isolation:isolate; }

/* Canvas */
#trail-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:auto; touch-action:none; cursor:crosshair; z-index:1;
}


/* Logo  */
.logo-container{ 
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  z-index:10000; 
  pointer-events:none; 
}
.logo{ 
  display:block; 
  height:90px; 
  width:auto; 
  margin:15px 16px; 
  mix-blend-mode:difference; 
  filter: brightness(0) invert(1); /* Makes PNG white */
  transition: filter 0.4s ease;
}

/* Gray after first interaction */
body.interacted .logo{
  filter: brightness(0) invert(0.72); /* Makes PNG gray (#b8b8b8) */
}

@media (max-width:640px){ 
  .logo{ 
    height:72px; 
    margin:10px 14px; 
  } 
}

/* ---- Top horizontal nav ---- */
.topnav{
  position:fixed;
  top:20px;
  right:20px;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:10002;
  pointer-events:auto;
}
.topnav-item{
  text-decoration:none;
  font-family:"Everett",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size:15px;
  color:#fff; /* White by default */
  mix-blend-mode:difference;
  padding:6px 8px;
  border-radius:0;
  transition: color 0.8s ease;
}
/* Gray after first interaction */
.topnav.interacted .topnav-item{
  color:#b8b8b8;
}
.topnav-item:focus-visible{
  outline:.5px solid currentColor;
  outline-offset:2px;
}
.topnav-item:hover{ opacity:.85; }
@supports not (mix-blend-mode:difference){
  .topnav-item{ color:#000; mix-blend-mode:normal; }
}

/* Corner captions - White by default, gray after interaction */
.corner-text{
  position:absolute; left:30px; bottom:30px; max-width:min(38ch,40vw);
  margin:0; line-height:1.5; font-size:14px; color:#fff; mix-blend-mode:difference;
  z-index:2; pointer-events:none; user-select:text; display:none;
  transition: color 0.4s ease;
}
.corner-text.is-visible{ display:block; }

/* Gray after first interaction */
body.interacted .corner-text{
  color:#b8b8b8;
}

@supports not (mix-blend-mode:difference){
  .corner-text{ color:var(--corner-fg,#000); text-shadow:0 1px 2px #ffffff73; mix-blend-mode:normal; }
}

/* Onboarding hint */
.onboarding-hint{
  position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:10003; opacity:0;
  font-family:"Everett",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:900;
  letter-spacing:.02em; font-size:clamp(16px,2.2vw,22px);
  color:#fff; mix-blend-mode:difference; text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.onboarding-hint.is-visible{ animation:hintFade 2100ms ease-out forwards; }
@keyframes hintFade{ 0%{opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{opacity:0;} }

/* ---- SHEETS ---- */
.sheet{
  --drag-ty: 0px;
  position:fixed; left:0; right:0; top:20px; bottom:0; background:#fff;
  border-top-left-radius:0;
  border-top-right-radius:0;
  box-shadow:0 -12px 28px rgba(0,0,0,.18), 0 -2px 8px rgba(0,0,0,.12);
  transform:translateY(calc(100% + 60px));
  transition:transform 460ms cubic-bezier(.2,.7,.2,1);
  z-index:10003; display:grid; grid-template-rows:auto 1fr;
  pointer-events:none;
}
.sheet.is-open{
  transform:translateY(var(--drag-ty, 0px));
  pointer-events:auto;
}

.sheet__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 10px 18px; border-bottom:1px solid #eeeeef;
  touch-action:none;
  cursor:ns-resize;
  position:relative;
  user-select:none;
}
.sheet__grabber{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:48px; height:5px; border-radius:3px; background:transparent;
  opacity:0;
}
.sheet__header h2{
  margin:0; font-family:"Everett",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:18px; letter-spacing:.01em;
}
.sheet__close{
  border:none; background:transparent; font-size:30px; line-height:1;
  padding:6px 8px; border-radius:0;
  cursor:pointer; color:#111;
}
.sheet__close:focus-visible{ outline:2px solid #000; outline-offset:2px; }

.sheet__body{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:18px; font-size:15px; line-height:1.55;
}

/* Posters */
.poster{ max-width:1100px; margin:0 auto; padding:18px 18px 0 18px; background:#fff; }
.poster--narrow{ max-width:900px; }
.poster__frame{ background:#fff; padding:22px; }
.poster__image{
  display:block; max-width:80%; margin:0 auto; height:auto;
  border-radius:0;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.poster__caption{ margin:10px 22px 0 22px; font-size:14px; line-height:1.35; color:#111; }
.cap-title{
  font-weight:700;
  font-size:18px; margin-bottom:2px;
  font-family:"Everett",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.cap-venue{ margin-top:6px; font-weight:700; letter-spacing:.02em; }
.muted{ color:#666; font-size:13px; }

.install-text{ max-width:820px; margin:18px auto 40px auto; padding:0 24px; font-size:15px; line-height:1.6; }
ul.tight{ margin:0 0 10px 18px; padding:0; }
ul.tight li{ margin:4px 0; }

/* CodePen embed */
.embed-wrap{
  position: relative;
  max-width: 1100px;
  margin: 10px auto 20px auto;
  padding: 0 18px;
}
.embed-wrap,
.embed-wrap .codepen{
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.embed-hide-ui{
  --cp-top-ui: 56px;
  --cp-bottom-ui: 46px;
  background: #fff;
}
.embed-hide-ui::before,
.embed-hide-ui::after{
  content: "";
  position: absolute;
  left: 0; right: 0; z-index: 3; background:#fff; pointer-events:auto;
}
.embed-hide-ui::before{ top: 0; height: var(--cp-top-ui); }
.embed-hide-ui::after{ bottom: 0; height: calc(var(--cp-bottom-ui) - 3px); }
.embed-wrap iframe,
.embed-wrap .cp_embed_iframe{ width:100% !important; height:min(70vh, 600px) !important; display:block; border:0; }

@media (max-width:640px){
  .poster__image{ max-width:70%; }
  .embed-hide-ui{ --cp-top-ui:48px; --cp-bottom-ui:40px; }
  .embed-wrap iframe,
  .embed-wrap .cp_embed_iframe{ height:60vh !important; }

  /* Mobile: hide desktop topnav */
  .topnav { display: none; }

  /* Smaller logo on phone */
  .logo { height:72px; margin:20px 18px; }
}

/* Contact PAGE STYLING */
.contact-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  text-align: center;
  gap: 0.6rem;
}

/* Centered bio text block */
.contact-bio {
  max-width: 70ch;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #111;
}

/* Links */
.contact-link {
  font-size: 1.2rem;
  font-weight: 300;
  color: #000;
  text-decoration: none;
}
.contact-link:hover {
  color: #555;
  transform: scale(1.05);
}

/* Centered logo below links (dedicated class to avoid mix-blend) */
.contact-logo { margin-top: 1rem; display: flex; justify-content: center; }
.contact-logo-img { width: 100px; height: auto; display: block; }

/* Hint anim (duplicate kept for safety if bundlers split files) */
@keyframes hintFade{ 0%{opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{opacity:0;} }

/* ========= PHONE MENU BUTTON & PANEL ========= */
.mobile-menu-btn{
  position:fixed;
  top:28px;
  right:20px;
  width:40px;
  height:32px;
  z-index:10002;
  background:transparent;
  border:none;
  padding:0;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  mix-blend-mode:difference;
}
.mobile-menu-btn .bar{
  position:absolute;
  width:24px;
  height:2px;
  background:#fff;
  transition:transform 240ms ease, opacity 180ms ease, background 0.4s ease;
}

/* Gray after first interaction */
body.interacted .mobile-menu-btn .bar{
  background:#b8b8b8;
}

.mobile-menu-btn .bar:first-child{ transform:translateY(-5px); }
.mobile-menu-btn .bar:last-child{  transform:translateY(5px);  }
/* turn "=" into "X" */
.mobile-menu-btn.is-open .bar:first-child{ transform:rotate(45deg); }
.mobile-menu-btn.is-open .bar:last-child{  transform:rotate(-45deg); }

@supports not (mix-blend-mode:difference){
  .mobile-menu-btn .bar{ background:#000; }
}

/* transparent menu, RTL text <<< */
.mobile-menu{
  position:fixed;
  top:70px;
  right:20px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:10002;
  min-width:180px;
  direction: rtl;
  text-align: right;
  mix-blend-mode: difference;
}
.mobile-menu.is-open{ display:flex; }

.mobile-menu-item{
  display:block;
  padding:8px 0 8px 8px;
  text-decoration:none;
  color:#fff;
  font-family:"Everett",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:15px;
  border-radius:6px;
  text-align:right;
  transition: color 0.4s ease;
}

/* Gray after first interaction */
body.interacted .mobile-menu-item{
  color:#b8b8b8;
}

.mobile-menu-item:active,
.mobile-menu-item:hover{
  background: transparent;
  opacity:.85;
}

@supports not (mix-blend-mode:difference){
  .mobile-menu{ mix-blend-mode:normal; }
  .mobile-menu-item{ color:#000; }
}

/* Show phone UI only on small screens */
@media (max-width:640px){
  .mobile-menu-btn{ 
    display:flex;
    mix-blend-mode:normal;
  }
  .mobile-menu-btn .bar{
    background:#fff;
    transition:transform 240ms ease, opacity 180ms ease, background 0.4s ease;
  }
  /* Gray after first interaction - PHONE */
  body.interacted .mobile-menu-btn .bar{
    background:#b8b8b8 !important;
  }
  
  .mobile-menu{
    display:none;
    mix-blend-mode:normal;
  }
  .mobile-menu-item{
    color:#fff;
    transition: color 0.4s ease;
  }
  /* Gray after first interaction - PHONE */
  body.interacted .mobile-menu-item{
    color:#b8b8b8 !important;
  }
}
/* === EPSAA block (scoped to the sheet) === */
#sheet-epsaa .epsaa-hero {
  display: grid;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

#sheet-epsaa .epsaa-hero__title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0.25rem 0 0;
  font-family: "Everett", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

#sheet-epsaa .epsaa-hero__subtitle {
  color: var(--muted, #888);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

#sheet-epsaa .epsaa-hero__media { margin: 0; }

#sheet-epsaa .epsaa-video {
  width: 100%;
  max-width: 960px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin-inline: auto;
  outline: none;
}

/* (optional) caption color */
#sheet-epsaa .epsaa-hero__caption {
  font-size: 0.9rem;
  color: var(--muted, #888);
  margin-top: 0.5rem;
}

/* Make the sheet animation extra solid (no display:none anywhere) */
.sheet { will-change: transform; backface-visibility: hidden; }