/* The temporary homepage: bare header, a full-bleed scene holding the headline, and a parchment footer strip. */
.ze-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.ze-home-hero {
  --ze-deckle: clamp(52px, 6.5vw, 120px);
  position: relative;
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 560px;
  padding: clamp(56px, 9vh, 104px) 24px 0;
  isolation: isolate;
}
/* The poster and the watercolour canvas over it (HomeWatercolour.astro) share one box, and one torn watercolour
   bottom edge: the deckle mask here and the pigment tide line in ::after, both cut from the same contour. */
.ze-home-scene,
.ze-home-paint {
  position: absolute;
  top: calc(-1 * var(--ze-splash-reach));
  left: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: calc(100% + var(--ze-splash-reach));
  object-fit: cover;
  object-position: 0 70%;
  mask-image: linear-gradient(#000, #000), url("masks/deckle-bottom.png");
  mask-size: 100% calc(100% - var(--ze-deckle) + 1px), 100% var(--ze-deckle);
  mask-position: top, bottom;
  mask-repeat: no-repeat;
}
.ze-home-paint {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
@media (min-width: 801px) {
  /* Wide crop: shift the scene left so Link stands clear of the headline column. */
  .ze-home-scene,
  .ze-home-paint,
  .ze-home-hero::after {
    left: -14%;
    width: 114%;
    max-width: none;
  }
}
/* A first visit (`ze-paint`, set in the head) keeps the poster back while the canvas draws it in pencil and paints
   it; if the canvas never goes live the poster fades in after 6s anyway, and at once on a failure. */
.ze-paint .ze-home-scene {
  opacity: 0;
  animation: ze-poster-in 0.4s 6s forwards;
}
.ze-paint-live .ze-home-scene {
  animation: none;
}
.ze-paint-fallback .ze-home-scene {
  animation: ze-poster-in 0.4s forwards;
}
.ze-paint-live .ze-home-paint {
  opacity: 1;
}
.ze-paint-fallback .ze-home-paint {
  visibility: hidden;
}
@keyframes ze-poster-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* The scene runs up under the header (so the hero never clips it). Warm evening light behind the headline and the
   torn edge into the footer strip are CSS, never baked into the art. */
.ze-home-hero::before,
.ze-home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.ze-home-hero::before {
  inset: 0;
  background: radial-gradient(ellipse 34% 50% at 50% 30%, #fff3dcf0 0%, #fbe7c6d6 46%, #f6d8ad70 74%, transparent 100%);
}
.ze-home-hero::after {
  inset: auto 0 0;
  height: var(--ze-deckle);
  background: url("masks/deckle-bottom-rim.png") 0 0 / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}
.ze-home-intro {
  display: grid;
  justify-items: center;
  width: min(560px, 100%);
  text-align: center;
  color: var(--ze-ink);
}
.ze-home-kicker,
.ze-home-dates {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(520px, 100%);
  margin: 0;
  color: var(--ze-muted);
}
.ze-home-kicker::before,
.ze-home-kicker::after,
.ze-home-dates::before,
.ze-home-dates::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ze-brass) 18%, var(--ze-brass));
}
.ze-home-kicker::after,
.ze-home-dates::after {
  transform: scaleX(-1);
}
.ze-home-kicker span {
  font: 600 0.8rem/1.4 var(--ze-font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ze-oxblood-deep);
}
.ze-home-intro h1 {
  margin: 18px 0 16px;
  font: 700 clamp(2.4rem, 5.2vw, 3.5rem)/1.02 var(--ze-font-display);
  letter-spacing: -0.03em;
  color: var(--ze-ink);
  text-wrap: balance;
}
.ze-home-lede {
  max-width: 29em;
  margin: 0 0 26px;
  font: 400 clamp(1.05rem, 1.6vw, 1.2rem)/1.55 var(--ze-font-body);
  color: var(--ze-body-ink);
  text-wrap: pretty;
}
.ze-home-enter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 28px;
  border: 1px solid #d3ba80;
  border-radius: 3px;
  background: linear-gradient(#84313f, var(--ze-oxblood-deep));
  box-shadow: inset 0 0 0 2px #54202b, inset 0 0 0 3px #d3ba8066, 0 2px 6px #2a14144d;
  color: var(--ze-vellum);
  font: 600 1.2rem/1.2 var(--ze-font-display);
  text-decoration: none;
}
.ze-home-enter svg,
.ze-strip a svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
}
.ze-home-enter:hover {
  background: linear-gradient(#963a49, #622330);
  color: #fff;
}
.ze-home-enter:focus-visible {
  outline-color: var(--ze-vellum);
  outline-offset: 4px;
}
.ze-home-dates {
  margin-top: 24px;
}
.ze-home-dates span {
  font: 600 0.95rem/1.4 var(--ze-font-display);
  color: var(--ze-ink);
}
/* The parchment strip under the scene: gilt rule, a centred Triforce and the two footer items. */
.ze-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 64px;
  padding: 14px 24px;
  --ze-strip-gap: 24px;
  background:
    linear-gradient(90deg, #5a421d calc(50% - var(--ze-strip-gap)), transparent 0 calc(50% + var(--ze-strip-gap)), #5a421d 0) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--ze-gold) calc(50% - var(--ze-strip-gap)), transparent 0 calc(50% + var(--ze-strip-gap)), var(--ze-gold) 0) 0 1px / 100% 2px no-repeat,
    linear-gradient(90deg, #fff4d8 calc(50% - var(--ze-strip-gap)), transparent 0 calc(50% + var(--ze-strip-gap)), #fff4d8 0) 0 3px / 100% 1px no-repeat;
  font: 400 0.95rem/1.4 var(--ze-font-body);
  color: var(--ze-body-ink);
}
.ze-strip::before,
.ze-strip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(22vw, 300px);
  height: 1px;
  background: linear-gradient(90deg, var(--ze-brass), transparent);
}
.ze-strip::before {
  left: 32px;
}
.ze-strip::after {
  right: 32px;
  transform: scaleX(-1);
}
.ze-strip-mark {
  position: absolute;
  top: -10px;
  left: calc(50% - 11px);
  width: 22px;
  height: 20px;
  color: var(--ze-brass);
  fill: currentColor;
}
.ze-strip p {
  margin: 0;
  padding-right: 24px;
  border-right: 1px solid var(--ze-rule);
}
.ze-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-left: 24px;
  color: var(--ze-ink);
  text-decoration: none;
}
.ze-strip a:hover {
  color: var(--ze-oxblood);
  text-decoration: underline;
}
.ze-header-inner--centred .ze-logo {
  width: 300px;
}
/* On a phone the scene is a band across the top, running up under the header with Link in view, and the headline
   sits on the parchment below it. */
@media (max-width: 800px) {
  .ze-home-hero {
    min-height: 0;
    padding: 300px 20px 40px;
  }
  /* The band's torn edge ends just above the kicker (the hero's 300px top padding). */
  .ze-home-scene,
  .ze-home-paint {
    height: calc(var(--ze-splash-reach) + var(--ze-home-band));
    object-position: 17% 40%;
  }
  .ze-home-hero {
    --ze-deckle: 44px;
    --ze-home-band: 292px;
  }
  .ze-home-hero::before {
    content: none;
  }
  .ze-home-hero::after {
    top: calc(var(--ze-home-band) - var(--ze-deckle));
    bottom: auto;
  }
  .ze-strip {
    flex-direction: column;
    gap: 2px;
    padding: 22px 20px 12px;
  }
  .ze-strip::before,
  .ze-strip::after {
    content: none;
  }
  .ze-strip p {
    padding: 0;
    border: 0;
  }
  .ze-strip a {
    padding: 0;
  }
}