/* ---------- Font ---------- */
@font-face {
  font-family: "GT Era Text";
  src: url("assets/fonts/GT-Era-Text-Regular.woff2") format("woff2"),
       url("assets/fonts/GT-Era-Text-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:    #f5f3eb;
  --ink:   #101010;
  --hover: #90876c;

  --margin: 40px;
  --gap: 130px;                  /* target clear space between lockup and text */
  --label-h: 22px;              /* approx height of the top label row */
  --footer-h: 44px;            /* approx height of the footer row */
  --w-share: 30.9028vw;        /* card width as a share of viewport (445/1440) */

  /* Vertical room to reserve so the lockup keeps ~130px clear of the chrome.
     svh (smallest viewport height) keeps the whole layout inside the screen
     even when mobile browser UI is shown, avoiding show/hide jank. */
  --reserve: calc(2 * var(--margin) + var(--label-h) + var(--footer-h) + 2 * var(--gap));

  /* Minimum lockup height. Below this the lockup does NOT shrink — instead the
     gaps contract toward the stage `gap` and then the page scrolls. */
  --card-min-h: 420px;

  /* Centre lockup: keeps its share of viewport width (grows unbounded), and is
     height-capped so it stays ~130px clear of the chrome — but never smaller
     than --card-min-h (at which point it scrolls rather than shrinking). */
  --card-w: max(
    calc(var(--card-min-h) * 0.7177419),
    min(var(--w-share), calc((100svh - var(--reserve)) * 0.7177419))
  );
  --logo-w: calc(var(--card-w) * 1.3662921);   /* 608/445 */
  --logo-h: calc(var(--logo-w) * 0.28125);      /* 171/608 */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "GT Era Text", "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 220ms ease, text-underline-offset 220ms ease;
}
/* hover: colour shift + the underline drops ~2px */
a:hover { color: var(--hover); text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; border-radius: 1px; }

/* Telephone: keep it a clickable link but with no underline, overriding the
   default underline that iOS/Safari forces on tel: links. */
a[href^="tel:"] { text-decoration: none; -webkit-text-decoration: none; }
a[href^="tel:"]:hover { text-decoration: none; -webkit-text-decoration: none; }

/* ---------- Layout (flow column: label / lockup / footer) ---------- */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* lockup centred between the pinned chrome */
  gap: 24px;
  min-height: 100svh;
  /* respect iOS safe areas (viewport-fit=cover) so nothing hides behind notch/home bar */
  padding: max(var(--margin), env(safe-area-inset-top))
           max(var(--margin), env(safe-area-inset-right))
           max(var(--margin), env(safe-area-inset-bottom))
           max(var(--margin), env(safe-area-inset-left));
}

.label {
  flex: 0 0 auto;
  text-align: center;
  opacity: 0;
  transition: opacity 700ms ease-out;
}

/* ---------- Centre lockup ---------- */
.composition {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  aspect-ratio: 445 / 620;
  font-size: 0;
}

.card {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate; /* contain the slides' z-indices so the logo stays on top */
}
.card picture { display: contents; }

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* pure crossfade — no movement */
  transition: opacity 700ms ease;
  will-change: opacity;
}
.slide.show { opacity: 1; }

.logo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--logo-w);
  height: var(--logo-h);
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.logo img { display: block; width: 100%; height: 100%; }
.logo-in .logo { opacity: 1; }

/* ---------- Footer ---------- */
.footer {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 51.3% auto;
  align-items: end;
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.chrome-in .label,
.chrome-in .footer { opacity: 1; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root {
    --margin: 24px;
    --gap: 64px;                /* a little less clearance is OK on small screens */
    --label-h: 40px;          /* label can wrap to two lines */
    --footer-h: 120px;        /* footer blocks stack */
    --w-share: calc((100vw - 2 * var(--margin)) / 1.3662921); /* logo fits the width */
    /* On mobile, keep the logo at full width — never shrink width-wise; if it
       doesn't fit vertically, the page scrolls instead. */
    --card-w: var(--w-share);
  }
  .footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .slide, .logo, .label, .footer { transition: none; }
}