/* ---------------------------------------------------------------------------
   Aimee's Oven

   Palette sampled directly from the logo PNG:
     --cream  #F5F0E8  the logo's own background, so the image blends seamlessly
     --rose   #E5B29D  the whisk, florals and "Aimee's" script
     --gold   #D8B180  the "OVEN" serif

   The rose and gold are decorative only. Against the cream they measure
   1.65:1 and 1.76:1, far below the 4.5:1 needed for text, so anything
   readable uses the darkened variants below.
   --------------------------------------------------------------------------- */

:root {
  --cream: #f5f0e8;
  --rose: #e5b29d;
  --gold: #d8b180;

  --ink: #5a4034; /* 8.35:1 on cream */
  --ink-rose: #8a4e36; /* 5.74:1 on cream */

  /* The logo is a light-mode asset with a baked-in background, so opting out
     of dark mode keeps the blend exact rather than letting the UA shift it. */
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  line-height: 1.6;
}

/* Full-viewport centring. svh is the small viewport height, which excludes
   mobile browser chrome, so the logo never sits behind a collapsing toolbar.
   The vh line above it is the fallback for browsers without svh support. */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2rem);

  min-height: 100vh;
  min-height: 100svh;

  padding: clamp(1rem, 5vw, 3rem);
  text-align: center;
}

/* The logo is square, so capping width by viewport height as well as width
   guarantees it fits in landscape and on short screens, without needing a
   max-height that would depend on a definite parent height. */
.logo {
  display: block;
  width: min(520px, 80vw, 80vh);
  width: min(520px, 80vw, 80svh);
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: rise 700ms ease-out both;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* --- error page ----------------------------------------------------------- */

/* The error page pairs the logo with copy, so it needs a little less of it. */
.error-page .logo {
  width: min(340px, 60vw, 45vh);
  width: min(340px, 60vw, 45svh);
}

.error-message {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}

.error-link {
  color: var(--ink-rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.error-link:hover,
.error-link:focus-visible {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink-rose);
  outline-offset: 4px;
}