/* ============================================================
   Hiatus page (October 2026). While the band is on hiatus the
   whole public site is index.html, styled here on top of the
   tokens in style.css. Delete this file when the full site
   comes back (see "Hiatus mode" at the top of README.md).
   ============================================================ */

.hiatus {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
  overflow: hidden;
}

/* sits above the red/blue stage glows borrowed from .hero__glow */
.hiatus__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 2rem;
  text-align: center;
}

/* Stage lights without blur filters. The shared .hero__glow uses
   filter: blur(), which iPhone Safari can clip to a hard-edged box
   inside this overflow:hidden section; plain gradients look the
   same and can't. */
.hiatus .hero__glow { filter: none; opacity: .3; }
.hiatus .hero__glow--red {
  background: radial-gradient(circle closest-side,
    rgba(193, 18, 47, 1) 0%, rgba(193, 18, 47, .55) 40%, rgba(193, 18, 47, 0) 100%);
}
.hiatus .hero__glow--blue {
  background: radial-gradient(circle closest-side,
    rgba(42, 168, 255, 1) 0%, rgba(42, 168, 255, .55) 40%, rgba(42, 168, 255, 0) 100%);
}

/* The logo melts into the page: its dark outer outline is already faded
   in the image file itself (assets/logo-canceled-3.*), and this soft dark
   pocket behind it keeps any remaining dark edge sitting on near-black
   instead of on top of the red glow. No drop-shadow: on phones its blur
   could clip to a visible box, the same Safari issue as the glows. */
.hiatus__art {
  position: relative;
  display: block;
}

.hiatus__art::before {
  content: "";
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  background: radial-gradient(closest-side,
    rgba(8, 8, 13, .88) 0%, rgba(8, 8, 13, .7) 55%, rgba(8, 8, 13, 0) 100%);
  pointer-events: none;
}

.hiatus__logo {
  width: min(360px, 74vw);
  height: auto;
}

.hiatus__copy { max-width: 600px; }

.hiatus__kicker {
  font-family: var(--font-display);
  color: var(--flare);
  text-shadow: 0 0 14px rgba(255, 184, 77, .45);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.hiatus__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.hiatus__facts {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin-top: 1.8rem;
}

.hiatus__facts li {
  padding: .85rem 1.1rem;
  border: 1px solid rgba(255, 46, 76, .38);
  background: rgba(255, 46, 76, .08);
  border-radius: 10px;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
}

.hiatus__facts strong { font-weight: 600; }

.hiatus__thanks {
  margin-top: 1.4rem;
  color: var(--text-dim);
  font-size: 1.02rem;
}

/* the Facebook warning: amber, like the portal's conflict alerts */
.hiatus__notice {
  margin-top: 1.8rem;
  text-align: left;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--flare);
  background: rgba(255, 184, 77, .08);
  border-radius: 0 10px 10px 0;
}

.hiatus__notice h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--flare);
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.hiatus__notice p { font-size: .98rem; }
.hiatus__notice p + p { margin-top: .6rem; }

/* faint design-credit watermark under the footer (lang="tr" in the HTML so
   uppercase "i" becomes the Turkish dotted "İ") */
.watermark {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  color: var(--text-dim);
  opacity: .42;
  text-transform: uppercase;
  transition: opacity .3s;
}

.watermark:hover { opacity: .8; }

.watermark__mark {
  width: 26px;
  height: 12px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linecap: round;
  margin-bottom: .2rem;
}

.watermark__label {
  font-size: .62rem;
  letter-spacing: .32em;
}

.watermark__name {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .2em;
  line-height: 1.5;
}

/* "Page last updated" line, the very last thing on the page */
.updated {
  margin-top: 1.4rem;
  font-size: .75rem;
  color: var(--text-dim);
  opacity: .6;
}

/* wide screens: logo beside the message, everything above the fold */
@media (min-width: 900px) {
  .hiatus__stage {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 3.5rem;
    text-align: left;
  }

  .hiatus__logo { width: min(420px, 38vw); }
}