/* Base + background */
html, body { height: 100%; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: rgba(220,213,205,0.98);                  /* full-screen background */
  color: #111;
  font-family: "Baskerville", "Libre Baskerville", "Times New Roman", serif;
  font-weight: 600;                      /* Baskerville Semibold (or nearest) */
  line-height: 1.33;                     /* 33% more vertical spacing */
}

/* Headings per spec */
h1, h2, h3 { margin: 0; line-height: 1.33; }
h2 { font-size: 1em;   letter-spacing: 0.45em; }
h1 { font-size: 4em;   letter-spacing: 1.09em; }
h3 {
  font-size: 0.6em;      /* desktop/base */
  letter-spacing: 0.40em;
  font-weight: 500;      /* override body’s semibold */
}

/* --- Desktop-first layout: hero + menu fit one screen --- */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto; /* hero expands, menu sized by content */
}

/* Hero fills remaining viewport space */
.hero {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;                         /* allow image to shrink within grid */
  padding: 0 16px;                       /* default horizontal padding */
}

/* SVG/image scales to fit entire viewport area without cropping */
.hero-svg {
  max-width: 90vw;
  max-height: 90vh;                     /* important for desktop fit */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Menu: single line if space allows; wraps on small screens automatically */
.menu {
  display: flex;
  justify-content: center;
  padding: 12px 16px 20px;
}
.menu-row {
  display: flex;
  flex-wrap: wrap;                       /* enables wrap when narrow */
  gap: 1rem 2.5rem;
  justify-content: center;
}
.menu-row a {
  text-decoration: none;
  color: inherit;
  padding: 0.25rem 0;
}
.menu-row a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* --- Mobile behavior: hero fits screen width (vertical image), menu below on scroll --- */
@media (max-width: 768px) {
  .page {
    display: block;                      /* normal flow; allows scrolling */
    min-height: auto;
  }
  .hero {
    padding-top: 40px;                          /* edge-to-edge image width */
  }
  .hero-svg {
    width: 90%;
    height: auto;                        /* fit width; vertical image can be tall */
    max-height: none;                    /* allow natural height so menu is below on scroll */
  }
  .menu {
    padding: 40px 0;                       /* keep comfortable spacing under image */
  }
  h3 {
    font-size: 1em;
    font-weight: 600; 
  }
}

/* Desktop-only hover underline (1px black, animated) */
@media (hover: hover) and (pointer: fine) {
  .menu-row a {
    position: relative;
  }
  .menu-row a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;              /* tweak offset if needed */
    height: 1px;
    background: #000;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms ease; /* animation */
  }
  .menu-row a:hover::after {
    transform: scaleX(1);
  }
}