/* GOLDINU — gallery waiting room. Standalone page; no dependencies. */

:root {
  --ink: #17130F;
  --ink-soft: #3A322A;
  --muted: #5A5047;
  --gold: #A77B32;
  --gold-line: rgba(167, 123, 50, 0.82);
  --ivory: 247, 243, 236;           /* rgb triplet for translucent washes */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Desktop / landscape composition */
  --pad-x: max(1.5rem, 6.5vw, env(safe-area-inset-left));
  --pad-top: clamp(1.1rem, 3.6vh, 2.4rem);
  --pad-bottom: max(clamp(0.9rem, 2.4vh, 2rem), env(safe-area-inset-bottom));
  --reserve: 40svh;                 /* minimum room kept clear for the exhibit above the copy */
  --scene-min: 100svh;
  --photo-pos: 46% 55%;
  --h1: clamp(2.4rem, min(4.6vw, 7vh), 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: #EFE8DD;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Scene: photo and copy share one grid ---------- */

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(var(--reserve), 1fr) auto;
  min-height: 100vh;               /* fallback */
  min-height: var(--scene-min);
  overflow: hidden;
}

.scene__photo,
.scene__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__photo { z-index: -2; }
.scene__photo img {
  object-fit: cover;               /* never stretched */
  object-position: var(--photo-pos);
}

/* Localised ivory washes: a soft band at the very top and a glow behind the copy only */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--ivory), 0.55) 0, rgba(var(--ivory), 0) clamp(4.5rem, 12vh, 8rem)),
    radial-gradient(ellipse 46% 50% at 0% 100%, rgba(var(--ivory), 0.62) 0%, rgba(var(--ivory), 0.34) 45%, rgba(var(--ivory), 0) 100%);
}

/* ---------- Top line ---------- */

.topline {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: var(--pad-top) var(--pad-x) 0;
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
}
.topline p {
  margin: 0;
  text-shadow: 0 0 14px rgba(var(--ivory), 0.95), 0 0 3px rgba(var(--ivory), 0.8);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  letter-spacing: 0.14em;
  line-height: 1;
}

.status {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: -0.32em;           /* optically align tracked text to the edge */
}

/* ---------- Copy ---------- */

.copy {
  grid-row: 3;
  align-self: end;
  padding: 0 var(--pad-x) var(--pad-bottom);
  max-width: calc(36rem + var(--pad-x));
}

.headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.headline span { display: block; }

.rule {
  width: 4.75rem;
  height: 0;
  margin: clamp(0.9rem, 2vh, 1.5rem) 0 clamp(0.75rem, 1.6vh, 1.1rem);
  border: 0;
  border-top: 1.5px solid var(--gold);
}

.lede {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.links {
  list-style: none;
  margin: clamp(1.1rem, 2.5vh, 1.8rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 3rem;                /* 48px touch target */
  padding: 0.7rem 1.45rem;
  border: 1px solid var(--gold-line);
  background: rgba(var(--ivory), 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.btn svg {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 180ms ease;
}
.btn:hover { background: rgba(var(--ivory), 0.62); border-color: var(--gold); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { background: rgba(167, 123, 50, 0.14); }
.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  background: rgba(var(--ivory), 0.62);
}

.domain p {
  margin: clamp(1rem, 2.2vh, 2rem) 0 0;
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Portrait phones: dedicated portrait photograph ----------
   Must match the <source media> in index.html. The scene is at least as tall as the
   portrait image at full width (852×1846 → 216.67vw), so nothing is cropped; the
   exhibit keeps its reserved height and the copy sits on the marble below it. */
@media (max-width: 600px) and (max-aspect-ratio: 3/4) {
  :root {
    --pad-x: max(1.25rem, 7vw);
    --pad-top: max(1.1rem, env(safe-area-inset-top));
    --pad-bottom: max(1.25rem, env(safe-area-inset-bottom));
    --scene-min: max(100svh, 216.67vw);
    --reserve: calc(216.67vw * 0.655 - 3.25rem);   /* keep the pedestal, side flowers and right-hand couple clear */
    --photo-pos: 50% 0%;
    --h1: clamp(2.35rem, 11.2vw, 3.3rem);
  }

  .scene::after {
    background:
      linear-gradient(to bottom, rgba(var(--ivory), 0.72) 0, rgba(var(--ivory), 0.38) 2.6rem, rgba(var(--ivory), 0) 5.5rem),
      linear-gradient(to top, rgba(var(--ivory), 0.5) 0, rgba(var(--ivory), 0.22) 32%, rgba(var(--ivory), 0) 48%);
  }

  .wordmark { font-size: 1.2rem; }
  .status { font-size: 0.66rem; letter-spacing: 0.28em; margin-right: -0.28em; }

  .copy { max-width: none; }
  .lede { font-size: 1.05rem; }
  .links { gap: 0.7rem; }
  .links li { flex: 1 1 9.25rem; }
  .btn { width: 100%; padding-inline: 0.9rem; letter-spacing: 0.13em; font-size: 0.74rem; }
  .domain p { text-align: center; margin-top: 1.9rem; font-size: 0.85rem; }
}

/* When the scene must grow taller than the photograph (portrait phones, short
   landscape screens, enlarged text), keep the photo at its natural proportions
   anchored to the top so the exhibit and guests stay exactly where the layout
   reserves room for them; the plain marble floor fades into a matching tone. */
@media (max-width: 600px) and (max-aspect-ratio: 3/4), (orientation: landscape) and (max-height: 500px) {
  .scene { background: #EDE3DA; }
  .scene__photo img {
    height: auto;
    bottom: auto;
    object-fit: fill;              /* width:100% + height:auto keeps the true aspect ratio */
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }
  .scene__photo { bottom: 0; }
}

/* ---------- Portrait tablets: landscape photograph, larger type ---------- */
@media (min-width: 601px) and (orientation: portrait) {
  :root { --h1: clamp(2.8rem, 6.8vw, 4.75rem); --photo-pos: 44% 50%; }
  .lede { font-size: 1.15rem; }
}

/* ---------- Short landscape screens (phones on their side) ----------
   Too short for the full composition: let the scene keep the photograph's own
   proportions and scroll, rather than shrinking type over the guests. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --scene-min: max(100svh, 56.25vw);
    --reserve: calc(56.25vw * 0.62);
    --h1: 2.2rem;
  }
}

/* ---------- One-time entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .topline, .copy { animation: arrive 1100ms cubic-bezier(.2, .7, .2, 1) both; }
  .copy { animation-delay: 150ms; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}