/* ==========================================================================
   layout.css — section/container model, shared section head, header, footer

   Container model (see section-architecture):
     Layer 1  <section>   full viewport width, owns background +
                          padding-block (vertical rhythm) + padding-inline (gutter)
     Layer 2  .container  max-width + margin-inline:auto, NO padding

   Sections never carry margins. All vertical spacing between sections comes
   from each section's own padding-block.
   ========================================================================== */

.section {
  padding-block: var(--section-space-m);
  padding-inline: var(--gutter);
}

.section--tight {
  padding-block: var(--section-space-s);
}

.section--roomy {
  padding-block: var(--section-space-l);
}

.container {
  max-width: var(--container-width);
  margin-inline: auto;
}

/* Most sections stack a heading block above their content. Flex + gap keeps
   the rhythm in one place instead of scattering margins across children. */
.container--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ==========================================================================
   Shared section head (eyebrow + title + lead)
   ========================================================================== */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  text-align: center;
}

/* Eyebrow and title are semantically linked, so they sit in a tighter group */
.section-head__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.section-head__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--blue);
}

.section-head__title {
  font-size: var(--text-4xl);
  line-height: 1.1;
  color: var(--black);
}

.section-head__lead {
  max-width: var(--measure);
  font-size: var(--text-l);
  line-height: 1.5;
  color: var(--ink-70);
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  /* The rainbow rule is an absolutely positioned pseudo-element, so it spans
     the full viewport width regardless of the header's inline padding. */
  padding-block: var(--space-2xs) calc(var(--space-2xs) + 3px);
  background: rgb(255 255 255 / 95%);
  border-bottom: 1px solid var(--ink-15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--navy) 0 20%,
    var(--blue) 20% 40%,
    var(--purple) 40% 60%,
    var(--teal) 60% 80%,
    var(--yellow) 80% 100%
  );
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.site-header__brand {
  display: block;
  flex-shrink: 1;
  min-width: 0;
}

.site-header__logo {
  height: clamp(2.25rem, 1.8rem + 2vw, 3rem); /* 36 -> 48 */
  width: auto;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-2xl) var(--space-m);
  padding-inline: var(--gutter);
  background: var(--black);
  color: rgb(255 255 255 / 70%);
  border-top: 4px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--navy) 0 20%,
      var(--blue) 20% 40%,
      var(--purple) 40% 60%,
      var(--teal) 60% 80%,
      var(--yellow) 80% 100%
    )
    1;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-xl);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__heading {
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.site-footer__links a {
  display: block;
  padding-block: var(--space-3xs);
  font-size: var(--text-s);
  color: rgb(255 255 255 / 70%);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__links a:hover {
  color: var(--paper);
}

.site-footer__brand {
  gap: var(--space-s);
  max-width: 24rem;
}

.site-footer__brand p {
  font-size: var(--text-s);
  line-height: 1.6;
}

.site-footer__tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--teal);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 10%);
  font-size: var(--text-s);
}

.site-footer__hashtag {
  color: var(--yellow);
  font-weight: 700;
}

/* ==========================================================================
   Survey modal

   Native <dialog>, so focus trapping, Esc-to-close, background inerting and
   the backdrop all come from the browser rather than hand-rolled JS.
   ========================================================================== */

.survey-modal {
  width: min(100% - 2 * var(--gutter), 34rem);
  max-height: min(90dvh, 44rem);
  /* The global reset zeroes margins, which removes the UA rule that centres a
     modal dialog in its viewport-sized containing block. Put it back. */
  margin: auto;
  padding: 0;
  overflow: hidden auto;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--ink-90);
}

.survey-modal::backdrop {
  background: rgb(19 15 45 / 72%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.survey-modal__rule {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--blue) 25%,
    var(--purple) 50%,
    var(--teal) 75%,
    var(--yellow) 100%
  );
}

.survey-modal__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-xl) var(--space-l) var(--space-l);
  text-align: center;
}

.survey-modal__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 2.25rem;
  height: 2.25rem;
  background: var(--paper-mid);
  border-radius: 50%;
  color: var(--ink-70);
  transform: rotate(45deg);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.survey-modal__close:hover {
  background: var(--navy);
  color: var(--paper);
}

.survey-modal__signal {
  width: 3rem;
  height: 3rem;
}

.survey-modal__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
}

.survey-modal__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--blue);
}

.survey-modal__title {
  font-size: var(--text-3xl);
  color: var(--black);
}

.survey-modal__title .serif-accent {
  color: var(--purple);
}

.survey-modal__lead {
  max-width: 28rem;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-70);
}

.survey-modal__note {
  padding-top: var(--space-s);
  border-top: 1px solid var(--ink-15);
  width: 100%;
  font-size: var(--text-s);
  color: var(--ink-50);
}

/* Swap this container's contents for the Typeform embed when it exists. */
.survey-modal__embed {
  display: contents;
}

@keyframes survey-modal-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }
}

@keyframes survey-backdrop-in {
  from {
    opacity: 0;
  }
}

.survey-modal[open] {
  animation: survey-modal-in var(--duration-normal) var(--ease-out);
}

.survey-modal[open]::backdrop {
  animation: survey-backdrop-in var(--duration-normal) var(--ease-out);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (width <= 60rem) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 35rem) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}