/* Clever Stegosaur. One stylesheet for the whole site.

   The three stripes (indigo, teal, amber, always in that order, left to right)
   come from the show's set backdrop. They are the hero background, the spine
   of every card, the mark beside every section label, and the order in which
   the page's sections change color. */

@font-face {
  font-family: "Arvo";
  src: url("../fonts/arvo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arvo";
  src: url("../fonts/arvo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sampled from the set backdrop */
  --indigo: #21193F;
  --teal: #427E8E;
  --amber: #EBB571;

  --teal-ink: #2F6472;   /* teal dark enough for small text on cream */
  --orange: #F85525;     /* from the logo; buttons only */
  --cream: #FDF7ED;

  /* The backdrop, with the stripe widths it was built at */
  --stripes: linear-gradient(to right,
    var(--indigo) 0 31.7%,
    var(--teal) 31.7% 66.4%,
    var(--amber) 66.4% 100%);

  --gutter: clamp(20px, 4vw, 48px);
  --measure: 62ch;
  --radius: 22px;
  --line: 3px solid var(--indigo);

  --display: "Arvo", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--indigo);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--indigo); }

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

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--indigo); color: var(--cream);
  padding: 10px 16px; border-radius: 8px; z-index: 20;
}
.skip-link:focus { left: 8px; color: var(--cream); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Section label, with the three stripes as its mark */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 30px; height: 22px;
  background: var(--stripes);
  border: 2px solid var(--cream);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--indigo);
}

.mark {
  background: linear-gradient(transparent 62%, var(--amber) 62% 92%, transparent 92%);
  padding: 0 0.08em;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: var(--line);
  border-radius: 999px;
  background: var(--orange);
  color: var(--indigo);
  box-shadow: 4px 4px 0 var(--indigo);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--indigo); color: var(--indigo); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--indigo); }
.btn--quiet { background: var(--amber); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Hero: the set backdrop, with the headline and logo standing in front of it */
.hero {
  background: var(--stripes);
  padding: clamp(40px, 7vw, 92px) 0;
  border-bottom: var(--line);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.hero__panel {
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--indigo);
  padding: clamp(24px, 4vw, 46px);
}
.hero__lede { font-size: 1.15rem; margin-top: 20px; }
.hero__logo {
  transform: rotate(4deg);
  justify-self: center;
  width: min(100%, 380px);
  filter: drop-shadow(6px 8px 0 rgba(33, 25, 63, 0.35));
}

/* Sections take the stripe colors in stripe order: indigo, teal, amber, repeat. */
.band { padding: clamp(48px, 7vw, 88px) 0; --shadow: var(--indigo); }
.band--indigo { background: var(--indigo); color: var(--cream); --shadow: var(--amber); }
.band--teal { background: var(--teal); color: var(--cream); }
.band--amber { background: var(--amber); color: var(--indigo); }
.band__head { margin-bottom: clamp(24px, 4vw, 40px); }
.band__lede { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.4; max-width: 34ch; }
.band__lede + .band__lede { margin-top: 0.8em; }
.band--indigo .band__lede strong { color: var(--amber); font-weight: 700; }
.band--indigo a { color: var(--amber); }
.band--indigo a:hover { color: var(--cream); }

/* Cards: cream, with the stripes down the spine */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--indigo);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: clamp(22px, 3vw, 34px);
  padding-left: calc(clamp(22px, 3vw, 34px) + 24px);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 24px;
  background: var(--stripes);
  border-right: var(--line);
}
.card a { color: var(--teal-ink); }
.card a:hover { color: var(--indigo); }
.card__tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--indigo);
  color: var(--cream);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 10px; }

.note {
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.3rem);
  line-height: 1.45;
  max-width: 46ch;
}

/* Sample questions */
.questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: q; }
.questions li {
  counter-increment: q;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.3;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--indigo);
  padding: 18px 22px;
}
.questions li::before {
  content: "Q" counter(q);
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--cream);
  border: var(--line);
  background: var(--indigo);
}
.questions li:nth-child(3n+2)::before { background: var(--teal); }
.questions li:nth-child(3n)::before { background: var(--amber); color: var(--indigo); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
.about__photo { border: var(--line); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--amber); transform: rotate(-2deg); }
.about__credit { font-weight: 700; margin-top: 16px; }
.about h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

/* Take part */
.takepart__sub { margin-top: 14px; font-size: 1.15rem; }
.form-frame {
  margin-top: 28px;
  background: var(--cream);
  color: var(--indigo);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--indigo);
  overflow: hidden;
}
.form-frame iframe { display: block; width: 100%; height: 780px; border: 0; background: transparent; }
.form-alt { margin-top: 22px; font-size: 0.95rem; }
.form-alt a { color: var(--indigo); font-weight: 600; }

/* Confirmation page: what happens next */
.hero--tall { min-height: calc(100vh - 150px); display: grid; align-items: center; padding-bottom: clamp(80px, 9vw, 120px); }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.steps li::before {
  content: counter(s);
  font-weight: 800;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: var(--line);
  background: var(--indigo);
  color: var(--cream);
}
.steps li:nth-child(2)::before { background: var(--teal); }
.steps li:nth-child(3)::before { background: var(--amber); color: var(--indigo); }

/* Footer, with a ridge of plates along its back */
.site-footer { background: var(--indigo); color: var(--cream); position: relative; padding: 56px 0 40px; }
.ridge {
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='44' viewBox='0 0 88 44'%3E%3Cpath d='M8 46 Q28 34 44 4 Q60 34 80 46 Z' fill='%23F85525' stroke='%2321193F' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center bottom;
}
.site-footer__grid { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.site-footer__logo { width: 96px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--amber); font-weight: 600; }
.site-footer a:hover { color: var(--cream); }
.site-footer small { display: block; margin-top: 14px; font-size: 0.85rem; color: var(--cream); opacity: 0.8; }

/* Plain text pages (privacy, 404): a strip of the backdrop on top */
.page-top { background: var(--stripes); border-bottom: var(--line); padding: 26px 0; }
.page-top__logo { width: 132px; filter: drop-shadow(4px 5px 0 rgba(33, 25, 63, 0.35)); }
.page { padding: clamp(36px, 6vw, 64px) 0 clamp(80px, 9vw, 110px); min-height: calc(100vh - 420px); }
.page h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 20px; }
.page h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.page .btn-row { margin-top: 30px; }

/* Small screens */
@media (max-width: 760px) {
  .hero__grid, .cards, .about, .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__logo { order: -1; width: min(62%, 250px); transform: rotate(-3deg); }
  .about__photo { max-width: 220px; }
  .btn { padding: 14px 24px; font-size: 0.98rem; }
  .questions li { grid-template-columns: 1fr; gap: 10px; }
  .card { padding-left: calc(clamp(22px, 3vw, 34px) + 18px); }
  .card::before { width: 18px; }
  .form-frame iframe { height: 1020px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}