/* Single stylesheet for index.html. Everything brand-specific lives in the custom
   properties below — change those first, not the rules underneath. */

:root {
  --ink: #17181a;
  --ink-soft: #5b5f66;
  --paper: #f6f4f0;
  --plate: #1d1e20;   /* dark field the Underground Chuck's lockup needs to read */
  --accent: #64a70b;  /* O'Charley's green, taken from the brand mark */
  --line: #e2ded7;
  --radius: 10px;
}

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

/* The notice is short enough to centre in the viewport; svh so mobile browser chrome
   does not push the footer into a scroll. */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.notice {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 4.5rem) 20px;
}

/* Logos sit side by side and stack under ~560px. align-items: center keeps the two
   marks on a shared optical centreline even though the plate is the taller element. */
.logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 6vw, 3rem);
}

/* Heights, not widths — the files have different aspect ratios, so matching height is
   the only thing that makes them look the same size. Both marks are two-line lockups of
   similar proportion, so they share one height. Capped at 4.25rem because the Chuck's
   source is only 236px wide; any larger and it renders soft on a 2x display. */
.logo-och,
.logo-uc { height: clamp(3rem, 9vw, 4.25rem); width: auto; }

.logo-plate {
  background: var(--plate);
  border-radius: var(--radius);
  padding: clamp(.9rem, 3vw, 1.35rem) clamp(1.1rem, 4vw, 1.75rem);
}

.message {
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.35;
  text-wrap: balance;   /* keeps a single word off the last line */
  letter-spacing: -.01em;
  margin-bottom: 1.75rem;
}

/* Scaled down slightly so the address still fits on one line at 320px — break-word is
   only the fallback, because an address split mid-word is hard to transcribe. */
.contact { color: var(--ink-soft); margin: 0; font-size: clamp(.95rem, 4vw, 1rem); }
.contact a { word-break: break-word; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.25rem 20px;
  font-size: .85rem;
  color: var(--ink-soft);
}
.site-footer p { margin: 0; }