/* ============================================================================
   YORK RUN — brand tokens
   ----------------------------------------------------------------------------
   Colours are sampled from the York Run artwork (../brand/brand-source.png):
   charcoal #17181C ground, warm cream #FBF1E1 type.

   Changing the palette means this block plus four other locations, none of
   which can read CSS variables:
       assets/wordmark.svg     fill="#FBF1E1"
       assets/favicon.svg      #17181C ground, #FBF1E1 type
       index.html              <meta name="theme-color">
       404.html                <meta name="theme-color">
   and regenerating assets/og.png from the artwork.

   Check with:  grep -n '#[0-9A-Fa-f]\{3,8\}' index.html 404.html assets/*.svg

   Typeface. The wordmark is traced vector artwork, so it is exactly the letters
   in the original file. The rest of the page is set in Cormorant Garamond,
   which matches those letterforms — the same fine hairlines, delicate bracketed
   serifs and kicked-out R leg. Playfair and Bodoni were tried and are visibly
   heavier. It is self-hosted (SIL Open Font License, see assets/fonts/OFL.txt),
   18 KB, and variable across 300-700 so weight is a CSS value rather than
   another file. It is subset to printable ASCII plus the punctuation this brand
   uses, deliberately wider than the current copy needs: an earlier subset was
   cut to exactly the characters then on the page, and the next copy change
   introduced an ampersand that silently rendered in a fallback face.
   ========================================================================= */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground:     #17181C;
  --cream:      #FBF1E1;
  --cream-dim:  #9A948A;

  --font-body: "Cormorant Garamond", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;

  --track-wide: 0.34em;
  --gutter:     clamp(1.4rem, 5vw, 3rem);
}

/* ========================================================================= */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 500;      /* Cormorant is light by default; 500 holds up on screen */
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--cream-dim);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.05em;
}
a:hover,
a:focus-visible { text-decoration-color: var(--cream); }

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

/* ============================================================================
   The page: the mark alone in a field of ground, as in the artwork
   ========================================================================= */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 12vh, 7rem) var(--gutter) clamp(2rem, 8vh, 4rem);
}

.mark {
  margin: 0;
  font-size: 0;          /* the h1's text is the image's alt text */
  line-height: 0;
}

.mark img {
  display: block;
  width: min(30rem, 74vw);
  height: auto;
}

.tagline {
  margin: clamp(1.7rem, 4.5vw, 2.6rem) 0 0;
  font-size: 1rem;
  letter-spacing: var(--track-wide);
  text-indent: var(--track-wide);   /* offset the trailing letterspace */
  text-transform: uppercase;
  color: var(--cream-dim);
  text-wrap: balance;    /* on a phone this breaks to two lines; keep them even
                            rather than stranding ADVISORY on its own */
}

/* the 404 page's way back, still in the stage */
.contact {
  margin: clamp(3rem, 9vh, 5rem) 0 0;
  font-size: clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
}

/* Contact sits above the copyright: the legal line is conventionally a page's
   last element, and a reader scanning up from the bottom finds the address
   before the boilerplate. */
.foot {
  padding: 0 var(--gutter) clamp(1.6rem, 5vh, 2.6rem);
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--cream-dim);
}

.foot p { margin: 0; }

.foot .email {
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--cream);
}

.foot .copyright {
  margin-top: 0.75em;
}