/* ==========================================================================
   Base — reset, document defaults, shared text utilities.
   Nothing here knows about a specific section of the page.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-600);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The `hidden` attribute is how JS shows/hides the quote form panels and the
   lightbox, so it has to beat any component display rule. */
[hidden] {
  display: none !important;
}

/* Set by js/lightbox.js: the page must not scroll behind an open photo.
   `overflow: hidden` alone is ignored by iOS Safari, so the body is pinned
   instead — the script writes a matching negative `top` to hold the scroll
   position and restores it on close. */
body.is-lightbox-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

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

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-link-hover);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::placeholder {
  color: var(--color-placeholder);
}

:focus-visible {
  outline: var(--stroke) solid var(--color-accent);
  outline-offset: 3px;
}


/* --- Text utilities ------------------------------------------------------ */

/* Small uppercase kicker above a heading */
.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.eyebrow--on-accent {
  color: var(--color-on-accent-soft);
}

.eyebrow--spaced {
  margin-bottom: var(--space-sm);
}

/* Oversized display type is the one thing narrow enough to overflow a phone
   gutter, so every heading is allowed to break inside a word as a last
   resort rather than push the page sideways. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

/* Oversized editorial section heading */
.section-title {
  margin: 0 0 var(--heading-mb);
  color: var(--color-accent);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.section-title--roomy {
  margin-bottom: var(--heading-mb-lg);
}

/* Hollow lettering: transparent fill with a stroked outline */
.outline {
  color: transparent;
  -webkit-text-stroke-width: var(--stroke);
  -webkit-text-stroke-color: var(--color-accent);
}

.outline--thin {
  -webkit-text-stroke-width: var(--stroke-thin);
}

.outline--thick {
  -webkit-text-stroke-width: var(--stroke-thick);
}

/* On the orange bands the outline is drawn in ink instead of accent */
.outline--ink {
  -webkit-text-stroke-width: var(--stroke-thick);
  -webkit-text-stroke-color: var(--color-on-accent);
}

.outline--hero {
  -webkit-text-stroke-width: var(--stroke-hero);
  -webkit-text-stroke-color: var(--color-on-accent);
}

/* Without text-stroke support a transparent fill would erase the words */
@supports not (-webkit-text-stroke-width: 1px) {
  .outline {
    color: inherit;
  }
}