/* Shared styles for every page. Design rules: SPEC.md "Design system". */
:root {
  --ground: #15161a;
  --surface: #1d1f24;
  --surface-2: #262930;
  --text-hi: #f1ede7;
  --text-lo: #9c978f;
  --accent: #f2872e;
  --accent-dim: #b85f17;
  --live: #3ecf8e;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text-hi);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

h1 {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
  color: var(--text-hi);
}

p { margin: 0; }

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

/* ---------- header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(21, 22, 26, 0.86);
  backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.wordmark::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}

.links {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.links a {
  text-decoration: none;
  color: var(--text-lo);
}
.links a:hover,
.links a[aria-current="page"] { color: var(--text-hi); }
.links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.status-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 18%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status-dot, .wordmark::before { animation: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- hero ---------- */
main { flex: 1; display: flex; }

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 10vw, 7rem);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 60% 40%;
  opacity: 0;
  filter: contrast(1.08) saturate(1.12);
  transition: opacity 3.5s ease-in-out;
}
.hero-bg.is-on { opacity: 1; }
/* Black vignette over every photo: clear in the middle for punch, falling
   to the page ground at the edges so the photo dissolves into it. An
   edgeless shadow pooled behind the text block separates it from the photo. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 85% at 55% 48%,
      transparent 0%,
      color-mix(in srgb, var(--ground) 15%, transparent) 55%,
      color-mix(in srgb, var(--ground) 75%, transparent) 85%,
      var(--ground) 100%),
    radial-gradient(ellipse 48% 42% at 24% 52%,
      color-mix(in srgb, var(--ground) 72%, transparent) 0%,
      color-mix(in srgb, var(--ground) 45%, transparent) 50%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--ground) 0%,
      transparent 12%,
      transparent 76%,
      var(--ground) 98%);
}

@media (max-width: 640px) {
  .hero::before {
    background:
      radial-gradient(ellipse 90% 85% at 55% 48%,
        transparent 0%,
        color-mix(in srgb, var(--ground) 15%, transparent) 55%,
        color-mix(in srgb, var(--ground) 75%, transparent) 85%,
        var(--ground) 100%),
      radial-gradient(ellipse 95% 38% at 40% 52%,
        color-mix(in srgb, var(--ground) 72%, transparent) 0%,
        color-mix(in srgb, var(--ground) 45%, transparent) 55%,
        transparent 100%),
      linear-gradient(to bottom,
      var(--ground) 0%,
      transparent 12%,
      transparent 76%,
      var(--ground) 98%);
  }
}

.hero canvas {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  width: 100%;
  opacity: 0.72;
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  max-width: 16ch;
}

/* Second line of the headline: smaller, set apart by a short amber rule. */
.tagline {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-hi);
}
.tagline::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--accent);
}

.services {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 52rem;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--text-lo);
}
/* Over photos, the small text uses a brighter off-white than --text-lo. */
.services { color: color-mix(in srgb, var(--text-hi) 80%, var(--text-lo)); }

.services span + span::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.85em;
  vertical-align: 0.15em;
  border-radius: 1px;
  background: var(--accent);
}

/* ---------- footer ---------- */
footer.bottom {
  padding-block: 1.5rem;
  border-top: 1px solid var(--surface-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-lo);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
footer.bottom a { text-decoration: none; }
footer.bottom a:hover { color: var(--accent); }

/* ---------- sub-page hero copy (Comms) ---------- */
.intro {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  max-width: 38rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: color-mix(in srgb, var(--text-hi) 85%, var(--text-lo));
}

.actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn {
  display: inline-block;
  padding: 0.8rem 1.3rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
}
.btn-primary { background: var(--accent); color: var(--ground); }
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-ghost { color: var(--text-hi); }
.btn-ghost:hover { color: var(--accent); }

/* A photo whose subject sits on the left: on wide screens it takes the right
   side of the hero and fades in from the left, so the subject sits beside the
   text instead of under it. Full width on phones. */
@media (min-width: 900px) {
  .hero-bg.hero-bg--right {
    left: auto;
    width: 64%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
    mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  }
}