:root {
  --black: #0b0b0b;
  --gray: #d8d6d3;
  --gray-dim: #a5a19c;
  --orange: #f7b58c;

  /* One value drives every footer gap, so the pairs stay visually matched. */
  --footer-gap: 2.25rem;
  --footer-stack-gap: 0.85rem;
  --edge: clamp(1.25rem, 4vw, 3rem);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--gray);
  font-family: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system,
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Background image plus a scrim, darkened top and bottom so the mark and the
   footer stay legible over the busiest part of the photo. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      to bottom,
      rgba(11, 11, 11, 0.62) 0%,
      rgba(11, 11, 11, 0.42) 30%,
      rgba(11, 11, 11, 0.42) 66%,
      rgba(11, 11, 11, 0.72) 100%
    ),
    url("../img/table.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.masthead {
  padding: var(--edge);
}

.mark {
  display: inline-block;
  line-height: 0;
}

.mark img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: block;
  transition: opacity 0.2s ease;
}

.mark:hover img,
.mark:focus-visible img {
  opacity: 0.75;
}

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1rem var(--edge);
}

.wordmark {
  margin: 0;
  /* Optical centering: the masthead adds weight up top, so lift the mark
     slightly above true center. */
  transform: translateY(-4%);
  font-size: clamp(2rem, 12vw, 11rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  /* letter-spacing pads the right edge; pull it back so the word reads centered. */
  text-indent: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem var(--footer-gap);
  padding: var(--edge);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gray-dim);
}

.footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--footer-gap);
}

.footer a {
  color: var(--gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--orange);
}

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

/* Narrow screens cannot hold four items on one line, and letting them wrap
   produces a ragged two-column block. Stack them deliberately instead: one row
   of links, then the contact, then the legal line, all centred. Each line is
   forced rather than wrapped, so the shape does not change with string length.
   The breakpoint is set where the single-row layout genuinely fits (measured
   at ~790px including the inter-group gap), not at a round guess. */
@media (max-width: 50rem) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--footer-stack-gap);
    font-size: 0.75rem;
  }

  .footer-group {
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* Links read better above the legal text on a stacked layout. */
  .footer-links {
    order: -1;
  }

  .footer-legal {
    flex-direction: column;
    gap: var(--footer-stack-gap);
  }

  /* Copyright reads as the closing line, so the contact sits above it. */
  .footer-legal a {
    order: -1;
  }
}