:root{
  /* palette */
  --aegean: #1C335B;
  --terra:  #C85C5C;
  --olive:  #D1B38E;
  --lime:   #FAF6F0;
  --indigo: #523E78;

  --wrap: 980px;
  --pad: clamp(1.2rem, 3vw, 2.2rem);

  --body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --display: "EB Garamond", serif;
  --meta: "IBM Plex Sans", system-ui, sans-serif;

  /* Stronger atmosphere gradients + Interference waves layer */
  --g-sky: radial-gradient(900px 900px at 20% 20%, #c85c5c60, transparent 55%),
           radial-gradient(1200px 800px at 80% 25%, #523e7859, transparent 58%),
           radial-gradient(900px 900px at 75% 65%, #d1b38e66, transparent 60%),
           linear-gradient(180deg, #3a6bbfcb, #7149bbb9);

  --g-interf:
    repeating-radial-gradient(circle at 35% 30%,
      #faf6f02e 0px,
      #faf6f02e 1px,
      transparent 12px,
      transparent 22px
    ),
    repeating-radial-gradient(circle at 65% 65%,
      #d1b38e24 0px,
      #d1b38e24 1px,
      transparent 14px,
      transparent 26px
    );

    /* --g-interf:
  repeating-radial-gradient(circle at 35% 30%,
    transparent 0 10px,
    rgba(250,246,240,0.18) 10px 11px,
    rgba(250,246,240,0.06) 11px 12px,
    transparent 12px 22px
  ),
  repeating-radial-gradient(circle at 65% 65%,
    transparent 0 12px,
    rgba(209,179,142,0.16) 12px 13px,
    rgba(209,179,142,0.05) 13px 14px,
    transparent 14px 26px
  ); */

  /* faint measurement grid */
  /* --g-grid:
    linear-gradient(to right, #faf6f01a 1px, transparent 1px),
    linear-gradient(to bottom, #faf6f01a 1px, transparent 1px); */
}

*{ box-sizing: border-box; }
html{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body{
  margin: 0;
  font-family: var(--body);
  background: #000;
}

/* Full-page hero */
.hero{
  min-height: 100svh;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--lime);
  background: var(--g-sky);
}

/* Interference overlay */
/* .hero::before{
  content:"";
  position:absolute;
  inset:-35%;
  opacity:.85;
  background: var(--g-interf);
  transform: rotate(-8deg);
  pointer-events:none;
} */

.hero::before{
  content:"";
  position:absolute;
  inset:-35%;
  opacity:.75;                      /* slightly lower = softer */
  background: var(--g-interf);
  transform: rotate(-8deg) translateZ(0);
  will-change: transform, filter;
  filter: blur(0.7px) contrast(0.92) saturate(0.95);
  pointer-events:none;
}


/* Grid overlay */
.hero::after{
  content:"";
  position:absolute;
  inset:-25%;
  opacity:.21;
  background: var(--g-grid);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 30% 20%, black 0%, transparent 70%);
  filter: blur(0.25px);
  transform: translateZ(0);
  pointer-events:none;
}

.hero::before, .hero::after{ z-index: 0; }
.hero-inner{ z-index: 1; }

.wrap{
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  padding: var(--pad);
}

.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 900px;
  text-align: center;
}

.kicker{
  margin: 0 0 .7rem;
  font-family: var(--meta);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(.85rem, .7rem + .6vw, 1rem);
  color: rgba(250,246,240,.82);
}

h1{
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.03;
  font-size: clamp(2.9rem, 1.7rem + 4.6vw, 5.1rem);
  text-shadow: 0 18px 60px rgba(0,0,0,.35);
  text-align: center;
}

.intro-box{
  margin: clamp(1rem, 3vh, 2rem) auto clamp(1.2rem, 3.5vh, 2.4rem);
  max-width: 50ch;
  padding: clamp(.9rem, 2.5vw, 1.3rem) clamp(1rem, 3vw, 1.6rem);

  /* border-radius: 18px;
  background:
    radial-gradient(600px 240px at 15% 20%, rgba(209,179,142,.18), transparent 55%),
    radial-gradient(600px 240px at 80% 60%, rgba(200,92,92,.16), transparent 55%),
    rgba(250,246,240,.08);

  border: 1px solid rgba(250,246,240,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.22); */

  text-align: center;
}

.intro-box p{
  margin: 0;
  font-size: clamp(1rem, .9rem + .6vw, 1.15rem);
  line-height: 1.45;
  color: rgba(250,246,240,.88);
}

.intro-box p + p{
  margin-top: .45rem;
}

/* Meta row */
.meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(250,246,240,.20);
  margin: 0 0 1.4rem;
}
.meta dt{
  font-family: var(--meta);
  font-size: .8rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(250,246,240,.70);
}
.meta dd{
  margin: .25rem 0 0;
  color: rgba(250,246,240,.92);
  font-size: 1.02rem;
}

/* Under construction box */
.notice{
  border-radius: 15px;
  border: 1px solid #c85c5ca5;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(200,92,92,.16), transparent 55%),
    radial-gradient(900px 420px at 80% 60%, rgba(209,179,142,.12), transparent 55%),
    #c85c5c4e;
  padding: 1.05rem 1.1rem;
  max-width: 72ch;
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  margin: 3rem auto;
  text-align: center; /* keep centered always */
}

.notice-title{
  margin: 0 0 .25rem;
  font-family: var(--meta);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .86rem;
  color: rgba(250,246,240,.92);
}
.notice-body{
  margin: 0;
  color: rgba(250,246,240,.78);
}
.notice-body + .notice-body{
  margin-top: .6rem;
}

.email{
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid rgba(209,179,142,.45);
  padding-bottom: .05rem;
}
.email:hover{
  color: rgba(250,246,240,.95);
  border-bottom-color: rgba(250,246,240,.55);
}

.fine{
  margin: 1.2rem 0 0;
  font-family: var(--meta);
  font-size: .78rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(250,246,240,.62);
}

/* Responsive */
@media (max-width: 900px){
  .meta{ grid-template-columns: 1fr; }
}

.footer{
  margin-top: 10rem;
}

.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Logos row (grid) */
.footer-logos{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: clamp(1.rem, 6vw, 4rem);
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.footer-logos img{
  height: 75px;
  width: 160px;
  object-fit: contain;
  display: block;
  opacity: .85;
  filter: brightness(0) invert(1) hue-rotate(90deg);
}

.footer-logos img:hover{
  opacity: 1;
}

@media (max-width: 700px){
  .wrap{ padding: 1.1rem; }

  h1{
    font-size: clamp(2.2rem, 8.2vw, 3.1rem);
    line-height: 1.06;
    margin-bottom: 1rem;
  }

  .intro-box{
    padding: .9rem 1rem;
  }

  .meta{
    gap: .75rem;
    padding-top: .9rem;
    margin-bottom: 1.1rem;
  }
  .meta dd{ font-size: 1rem; }

  .notice{
    padding: .95rem .95rem;
    border-radius: 16px;
    text-align: center; /* ✅ no sudden left align */
  }

  .footer{
    margin-top: 5rem;
  }

  /* ✅ Logos: switch grid to one column */
  .footer-logos{
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 100%;
  }

  /* ✅ Override fixed logo sizing for phones */
  .footer-logos img{
    height: 65px;
    width: min(320px, 80vw);
  }
}