/*
  Giveaway terms page.
  Palette: sampled by eye and by pixel average from the visual reference (COMP.jpeg), so it is a stand-in.
  The GGNC logo and color folder was empty when this was built. When it has files, change only the tokens below.
*/
:root {
  --ink: #161b13;          /* page background, from the dark foliage in the reference */
  --green: #2b3f2b;        /* lawn green, panels */
  --green-deep: #1d2a1d;   /* darker panel */
  --paper: #f3f0e8;        /* warm white: text, and the light bar behind the black logos */
  --muted: #c9cdbf;        /* secondary text */
  --accent: #d2492f;       /* poppy red from the flowers in the reference */
  --accent-ink: #ffffff;
  --line: rgba(243, 240, 232, 0.22);
  --gutter: 20px;
  --measure: 46rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

.hero { position: relative; }
/* Photo behind the header and intro. It fades into the page color; the text sits on the darker lower part. */
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(22, 27, 19, 0.25) 0%, rgba(22, 27, 19, 0.55) 45%, var(--ink) 100%),
    url("assets/img/header-photo.jpg") center 45% / cover no-repeat;
}
.top, .intro { position: relative; }
.top { background: var(--paper); }
.top__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.logo { display: block; height: 52px; width: auto; max-width: 44vw; }

.intro__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 64px var(--gutter) 56px;
  text-align: center;
}
h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lede {
  max-width: 34rem;
  margin: 24px auto 32px;
  font-size: 1.0625rem;
}
.button {
  display: inline-block;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-decoration: none;
  border-radius: 4px;
}
.button:hover { filter: brightness(1.08); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.terms { background: var(--green); }
.terms__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 48px var(--gutter) 64px;
}
.terms__body p { margin: 0 0 1.1em; }
.terms__body p:last-child { margin-bottom: 0; }
.terms__body p, .terms__body li { max-width: 40rem; }
.terms__body ol, .terms__body ul { padding-left: 1.25rem; }

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .top__inner { padding-top: 20px; padding-bottom: 20px; gap: 56px; }
  .logo { height: 72px; max-width: none; }
  .intro__inner { padding-top: 96px; padding-bottom: 88px; }
  h1 { font-size: 3.25rem; }
  .terms__inner { padding-top: 72px; padding-bottom: 96px; }
}