/* Shared primitives: layout containers, buttons, headings, form controls. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 96px; scroll-margin-top: var(--nav-h); }
.section--light { background: var(--light); }
.section--ink   { background: var(--ink); color: var(--white); }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.section--ink .eyebrow { color: var(--mint); }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.5px;
}

.section-sub {
  margin-top: 16px;
  font-size: 17px;
  color: var(--grey);
}
.section--ink .section-sub { color: rgba(255, 255, 255, .62); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  /* A <button> otherwise keeps the browser's light face, which a ghost button's
     white text disappears into. */
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary { background: var(--teal); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--teal-d); box-shadow: var(--shadow-md); }

.btn--mint { background: var(--mint); color: var(--deeper); }
.btn--mint:hover { background: #B4F0E7; }

.btn--ghost { border-color: rgba(255, 255, 255, .35); color: var(--white); }
.btn--ghost:hover { border-color: var(--mint); background: rgba(154, 232, 221, .1); }

.btn--block { width: 100%; }

/* Visible keyboard focus everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The browser's own [hidden] is display: none at the very bottom of the
   cascade, so *any* author rule that sets display beats it — .a-field is a flex
   column, and a field a Stimulus controller had hidden stayed on screen. Said
   once and globally, since four stylesheets had already written their own
   scoped copy of this rule and the fifth component to need it would have had to
   find out the same way. */
[hidden] { display: none !important; }

/* Scroll reveal — opt-in, neutralized under reduced motion by 00_tokens.css. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }