/* ============================================================
   SCREEN 03 — the venue.

   The establishing shot. The facade fills the window edge to edge
   and the page dissolves into it at the top and out of it at the
   bottom, so the photograph is never a rectangle laid on a ground:
   there is no frame, no inset, no radius and no edge anywhere.

   The picture is 1536 x 1024 and the window is rarely that shape,
   so what survives the crop is chosen rather than left to chance.
   Measured off the file, the facade sits at:

     the lit arches        x  263-1152    the letters  x 515-909
     "Palace" in script    x  920-1162
     the entrance canopy   x  172-606
     dark marble storey    y   55-85%

   A phone shows the full height of the building and a 473px column
   of it, so the column is placed on the lettered arches; a desktop
   shows the full width and loses only sky and road. The name is set
   over the dark marble, clear of the lit arches either way.

     1. Tokens and ground
     2. The screen
     3. The photograph
     4. The fall into black
     5. The name over it
     6. View location
     7. Composition — tablet and desktop
     8. Entrance
     9. Reduced motion
   ============================================================ */

/* ---------- 1. Tokens and ground -------------------------- */
:root {
  --ink-03:        #000000;
  --ivory-03:      #F4F1EC;
  --ivory-soft:    #B8B2A8;   /* 8.0:1 on black */
  --ivory-faint:   #8C867C;   /* 4.7:1 on black */

  --t-venue: clamp(2.4rem, 11.6vw, 4.5rem);   /* "EMIR PALACE"  7.382em */
}

/* The ground follows whichever screen holds the middle of the viewport,
   so the page itself — overscroll included — is never the wrong colour. */
html[data-ground="ink"],
html[data-ground="ink"] body { background: var(--ink-03); }

/* The switch is the one element that crosses both grounds. */
html[data-top="ink"] .lang { color: var(--ivory-03); }
html[data-top="ink"] .lang__b:focus-visible { outline-color: var(--ivory-03); }

/* ---------- 2. The screen --------------------------------- */
.screen--venue {
  position: relative;
  height: 100vh;                 /* fallback for engines without svh */
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  cursor: default;
  background: var(--ink-03);
  color: var(--ivory-03);
  padding: 0;
  display: block;
}

/* ---------- 3. The photograph ----------------------------- */
/* Edge to edge, and monochrome: the file is already all but grey —
   0.13 of saturation — and the last of the warmth is taken out here
   rather than in the file, so the photograph in the repository is
   still the photograph that was supplied. */
.venue__shot {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  transform-origin: 50% 46%;
}
.venue__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The lettered arches, at 48% across, are what a narrow window keeps. */
  object-position: 48% 50%;
  filter: grayscale(1) contrast(1.06) brightness(.96);
  border: 0;
}

/* ---------- 4. The fall into black ------------------------ */
/* Above, the picture rises out of the black the invitation arrives
   on; below, it falls back into the black the evening begins on. In
   between, just enough weight under the name to hold it. */
.venue__fall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--ink-03) 0%, rgba(0,0,0,.55) 9%, rgba(0,0,0,0) 26%),
    linear-gradient(to top,
      var(--ink-03) 0%, rgba(0,0,0,.9) 16%, rgba(0,0,0,.54) 36%, rgba(0,0,0,0) 62%);
}

/* ---------- 5. The name over it --------------------------- */
.venue__type {
  position: absolute;
  left: 0; right: 0;
  bottom: max(var(--pad), env(safe-area-inset-bottom, 0px));
  padding-inline: var(--pad);
  z-index: 1;
}

.venue__eyebrow {
  font-family: var(--ui);
  font-weight: 300;
  font-size: var(--t-note);
  letter-spacing: .45em;
  text-indent: .45em;
  text-transform: uppercase;
  color: var(--ivory-soft);
  margin: 0;
}

/* Heavier than the rest of the invitation's display type and cut at a
   smaller optical size: a hairline Bodoni disappears over a photograph,
   however large it is set. */
.venue__name {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 48;
  font-size: var(--t-venue);
  line-height: 1;
  letter-spacing: .07em;
  text-indent: .07em;
  text-transform: uppercase;
  text-wrap: nowrap;
  margin: clamp(.75rem, 2.4vw, 1.4rem) 0 0;

  /* The name rises out of a mask, padded so the mask never cuts it. */
  overflow: hidden;
  padding: .1em .3em .08em 0;
  margin-right: -.3em;
}
.venue__name > span { display: block; }

.venue__where {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 11;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ivory-soft);
  margin: clamp(.9rem, 2.4vw, 1.35rem) 0 0;
}
.venue__where span { display: block; }

/* ---------- 6. View location ------------------------------ */
/* A mark and a word. No fill, no pill, no border — it is found by
   looking, and it answers to a finger. */
.venue__map {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-top: clamp(1.35rem, 3.4vw, 2rem);
  padding: .55rem 0;
  min-height: 44px;

  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--t-note);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory-03);
  text-decoration: none;
  opacity: .82;
  transition: opacity .45s ease;
}
.venue__map:hover { opacity: 1; }
.venue__map:focus-visible {
  outline: 1px solid var(--ivory-03);
  outline-offset: .55rem;
}
.venue__pin {
  width: .82em;
  height: 1.09em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  overflow: visible;
}

/* ---------- 7. Composition — tablet and desktop ----------- */
/* A tablet keeps a wider column of the facade, so the crop moves back
   to the middle and the type grows with the window rather than with
   the phone's own measure. */
@media (min-width: 700px) {
  :root { --t-venue: clamp(3.2rem, 7.6vw, 6.5rem); }
  .venue__shot img { object-position: 50% 48%; }
  .venue__type { bottom: clamp(2.25rem, 5svh, 4rem); }
  .venue__fall {
    background:
      linear-gradient(to bottom, var(--ink-03) 0%, rgba(0,0,0,.5) 8%, rgba(0,0,0,0) 24%),
      linear-gradient(to top, var(--ink-03) 0%, rgba(0,0,0,.86) 15%, rgba(0,0,0,.46) 34%, rgba(0,0,0,0) 58%);
  }
}

@media (min-width: 1100px) {
  :root { --t-venue: clamp(4rem, 7.2vw, 9rem); }
  .venue__type { bottom: clamp(2.5rem, 6svh, 5rem); }
  /* The whole width of the facade is on screen here, so the picture is
     held a little above centre and the road is what the crop loses. */
  .venue__shot img { object-position: 50% 44%; }
}

/* A window much wider than the picture takes it past its own size; the
   name is held to a measure so it never runs the full sheet. */
@media (min-width: 1600px) {
  .venue__type { padding-inline: clamp(var(--pad), 8vw, 12rem); }
}

/* ---------- 8. Entrance ----------------------------------- */
/* The picture settles out of a very slow four per cent; the name comes
   up from under its mask; the address and then the link follow it. */
.venue__shot {
  transform: scale(1.04);
  transition: transform 2600ms cubic-bezier(.22,.61,.24,1);
}
.screen--venue.is-in .venue__shot { transform: scale(1); }

.venue__name > span {
  transform: translateY(110%);
  transition: transform 1400ms cubic-bezier(.22,.61,.24,1) 260ms;
}
.screen--venue.is-in .venue__name > span { transform: none; }

.venue__eyebrow,
.venue__where,
.venue__map {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1200ms cubic-bezier(.32,.08,.24,1) calc(var(--i, 0) * 220ms),
    transform 1200ms cubic-bezier(.32,.08,.24,1) calc(var(--i, 0) * 220ms);
}
.screen--venue.is-in .venue__eyebrow,
.screen--venue.is-in .venue__where { opacity: 1; transform: none; }
.screen--venue.is-in .venue__map   { opacity: .82; transform: none; }

/* ---------- 9. Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .venue__shot,
  .venue__name > span,
  .venue__eyebrow,
  .venue__where,
  .venue__map {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  .screen--venue.is-in .venue__eyebrow,
  .screen--venue.is-in .venue__where { opacity: 1; }
  .screen--venue.is-in .venue__map { opacity: .82; }
}