/*
  Design tokens below were measured from the live site's computed styles
  (annie-staggs.squarespace.com), not guessed. See .design-reference/ for
  screenshots taken at the same time.

  Fonts: the real nav/body/heading fonts (brandon-grotesque via HVD Fonts,
  chevin-pro via Fenotype) are commercial with no free source and no license
  here, so every role uses Montserrat instead — chosen by comparing rendered
  letterforms (R, O, G, S) against the squarespace screenshots in
  .design-reference/, closer than Poppins/Jost/Questrial. Headings previously
  used Chivo, but its condensed proportions read too narrow next to the rest
  of the type system; Montserrat at 700 gives headings presence without
  introducing a second family. Swap in an Adobe Fonts/Typekit kit link in
  base.njk if a license is obtained later; these variables pick it up from
  there.

  --color-filter-gold is NOT the real site's filter-nav yellow (#EDE30D) —
  that fails WCAG AA badly (~1.35:1 against white, see .design-reference/
  layout-notes.md). This is a darkened substitute in the same gold/olive
  hue family that clears ~5.5:1.

  --color-primary is sampled directly from the circular mark in logo.png
  (solid #114459 across every pixel of the mark, verified with a pixel
  histogram) — the one teal/blue used site-wide for headings, links, and
  nav. There is deliberately no second "hover" teal anymore; interactive
  states use opacity instead of a second hue so nothing drifts off-brand.
*/
:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-primary: #114459;
  --color-heading: var(--color-primary);
  --color-body-text: #616161;
  --color-accent: #b9b779;
  --color-accent-contrast: #ffffff;
  --color-line: #e5e5e0;
  --color-filter-gold: #7a6800;
  /* Sampled directly from the "GRAPHIC DESIGNER" text in logo.png (#e3d84c) —
     the real, bright brand yellow. Reserved for the top nav's active-page
     state only. Note this is NOT WCAG-safe as text on white (~1.5:1
     contrast, same problem as the raw filter-bar yellow documented below)
     — acceptable here per explicit direction to match the brand color
     exactly, but don't reuse it anywhere contrast matters more. */
  --color-brand-gold: #e3d84c;

  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-nav: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: 49px;
  --fs-project-title: 24.65px;
  --fs-nav: 18px;
  --fs-grid-caption: 13.225px;
  --fs-body: 16px;
  --fs-filter: 12px;

  --lh-body: 1.8;
  --ls-nav: 0.36px;
  --ls-caption: 0.63px;
  --ls-hero: -0.98px;
  --ls-button: 0.9px;
  --ls-filter: 0.72px;

  --space-side: 43.2px;
  --grid-gap: 60px;
  --gallery-gap: 100px;

  --button-radius: 300px;
  --button-padding: 18px 45px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body-text);
  background: var(--color-bg);
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); margin: 0; }

/* Header: centered wordmark above a centered nav, generous vertical air,
   matching the source's ~230px-tall centered header. Gap between the
   logo/wordmark and the nav measured at 42px in
   .design-reference/squarespace-home.png (gap between the bottom of
   "GRAPHIC DESIGNER" and the top of the nav row). */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.625rem;
  padding: 3rem var(--space-side) 2.5rem;
  text-align: center;
}

.site-logo { display: inline-block; }

.site-logo img {
  width: 100px;
  height: auto;
  display: block;
}

.site-nav {
  display: flex;
  gap: 2rem;
  font-family: var(--font-nav);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
}

.site-nav a { color: var(--color-primary); }
.site-nav a:hover { opacity: 0.65; }
.site-nav a.active { color: var(--color-brand-gold); }

.site-main { padding: 0 var(--space-side) 3rem; min-height: 60vh; }

.site-footer {
  padding: 1.5rem var(--space-side);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-nav);
  font-size: 0.85rem;
  color: var(--color-primary);
}

.placeholder-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.placeholder-hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-hero);
}

/* Comfortable centered reading column for text-heavy pages (About), instead
   of stretching to the full site width like the grids do. No About-specific
   screenshot exists in .design-reference/ to measure exactly, so 720px is a
   judgment call sized to the body copy's line length — adjust if it reads
   too narrow/wide against the real site once you compare. */
.content-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  align-items: center;
  gap: var(--grid-gap);
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
}

.about-photo {
  aspect-ratio: 3 / 4;
  background: var(--color-line);
  width: 100%;
  object-fit: cover;
  display: block;
}

.about-bio p { margin: 0; }

.about-tagline {
  margin-top: 1.25rem;
  font-size: var(--fs-nav);
  color: var(--color-accent);
}

/* Both grids (Portfolio, Design/home) are a fixed 2-column layout of
   equally-sized tiles, matching the real site (see .design-reference/
   squarespace-portfolio.png and squarespace-home.png) — the image never
   dictates tile size. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; }
}

.project-card { display: block; }

.project-card img {
  width: 100%;
  display: block;
  transition: opacity 1s cubic-bezier(0.33, 0, 0.2, 1);
}

.project-card:hover img { opacity: 0.85; }

/* Design grid: photographic mockups fill and crop to a standardized
   landscape tile (measured ~3:2 on the real site's home grid). */
.design-grid .project-card img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Portfolio grid: client logos are never cropped — they float centered
   and untouched inside a standardized tile (measured ~4:3 on the real
   site's portfolio grid), so `contain` + padding does the centering.
   Padding trimmed from the original 2.5rem so logos fill more of the
   tile — at 2.5rem the surrounding whitespace made the (identical)
   caption below read as smaller than the Design grid's by contrast. */
.portfolio-grid .project-card img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 1.5rem;
  box-sizing: border-box;
  background: var(--color-bg);
  transition: background-color 0.2s ease, opacity 1s cubic-bezier(0.33, 0, 0.2, 1);
}

.portfolio-grid .project-card:hover img { background: #f7f6f2; }

.project-card h3 {
  margin-top: 1.5rem;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: var(--fs-grid-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-primary);
  transition: opacity 0.2s ease;
}

.project-card:hover h3 { opacity: 0.65; }

.project-card .category {
  margin: 0.25rem 0 0;
  font-family: var(--font-nav);
  font-size: 0.85rem;
  color: var(--color-body-text);
}

/* Individual project page: full-width stacked gallery images */
.project h1 {
  font-size: var(--fs-project-title);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.project .meta {
  font-family: var(--font-nav);
  font-weight: 400;
  color: var(--color-body-text);
  margin-bottom: 2rem;
}

.project-images {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}

.project-images img { width: 100%; display: block; }

/* Bottom-of-page filter nav: ALL • PROJECT • PROJECT..., scoped to whichever
   section (Design/Portfolio) the current project belongs to. */
.project-filter-nav {
  text-align: center;
  margin: 6rem 0 2rem;
  font-family: var(--font-nav);
  font-size: var(--fs-filter);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--ls-filter);
}

.project-filter-nav a {
  color: var(--color-filter-gold);
  margin: 0 0.4em;
}

.project-filter-nav a.project-link::before {
  content: "•";
  margin-right: 0.4em;
}

.project-filter-nav a.active {
  color: var(--color-primary);
}

/* Pill button, matching the real contact-form submit button */
.button,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  font-family: var(--font-nav);
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  cursor: pointer;
  transition: background-color 0.1s linear, color 0.1s linear;
}

.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}