/* Inflaboo · base layer
   Reset, primitives and shared components.
   Every colour, font and radius here reads from a custom property defined in
   static/css/direction-<id>.css, which build.py generates from
   content/site.json. Nothing is hardcoded, so a palette change is a JSON edit.
   ------------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--ink, #111);
  background: var(--paper, #fff);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: var(--display-weight, 800);
  letter-spacing: var(--display-tracking, -0.02em);
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 12vw, 7rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 3.25rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); }

p { margin: 0 0 1em; }
a { color: inherit; }

.h-xl { font-size: clamp(2.25rem, 7vw, 4.5rem); }

.wrap {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 760px); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 13px bold counts as normal text, not large, so this needs the deep
     magenta. The plain brand magenta sits at 3.53:1 on white. */
  color: var(--brand-1-deep);
  margin: 0 0 0.75rem;
}

.lede { font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.5; }

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.62;
  margin-top: 1rem;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 800);
  text-decoration: none;
  /* White on the plain brand magenta is 3.53:1. A .btn label is 16px bold,
     which is normal text under WCAG, so it needs the deep magenta. */
  background: var(--brand-1-deep);
  color: #fff;
  border: 0;
  border-radius: var(--radius, 24px);
  padding: 0.85em 1.6em;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 0 0 color-mix(in srgb, var(--brand-1-deep) 65%, black);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 0 color-mix(in srgb, var(--brand-1-deep) 65%, black); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 0 color-mix(in srgb, var(--brand-1-deep) 65%, black); }
.btn--lg { font-size: clamp(1.05rem, 2.2vw, 1.35rem); padding: 1em 2em; }
.btn--sm { font-size: 0.9rem; padding: 0.7em 1.2em; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--brand-1-deep) 65%, black); }

/* "To be confirmed" chips.
   Deliberately visible: date, venue and prices are unresolved, and a
   placeholder that looks like a placeholder is what stops a guess shipping. */

.tbc {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--ink) 8%, transparent) 0 6px,
    transparent 6px 12px
  );
  border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  margin: 0 0.35rem 0.35rem 0;
}

/* Photo placeholders.
   The text inside each one is the shot the pre-shoot has to produce. It is
   the same string that build.py writes into PRESHOOT-SHOTLIST.md, so the
   design and the shot list cannot drift apart. */

.shot {
  margin: 0;
  aspect-ratio: var(--ratio, 4/3);
  border-radius: var(--radius, 24px);
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-2) 30%, var(--paper)),
      color-mix(in srgb, var(--brand-1) 22%, var(--paper)) 55%,
      color-mix(in srgb, var(--brand-3) 30%, var(--paper)));
  border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  display: grid;
  place-items: center;
  position: relative;
}
.shot__inner {
  padding: clamp(1rem, 3vw, 2rem);
  max-width: 46ch;
  text-align: center;
}
.shot__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.35em 0.8em;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.shot__text {
  margin: 0;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

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

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