/* Feral Fashion brand r1: Night black ground, Oat text, one Feral orange accent, flat colour only. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/figtree-600.woff2") format("woff2"); }

:root {
  --night: #0c0c0a;
  --umber: #241a13;
  --orange: #d48534;
  --oat: #fcf5f0;
  --heading: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--night);
  color: var(--oat);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 72rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 48px;
}

.masthead a { display: inline-block; border-radius: 4px; }
.logo { display: block; width: clamp(112px, 22vw, 168px); height: auto; }

.intro { align-self: center; max-width: 46rem; }
.label {
  margin: 0 0 16px;
  font: 600 0.875rem/1.4 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oat);
}
h1 {
  margin: 0;
  font: 800 clamp(2.5rem, 8vw, 5.5rem)/1.02 var(--heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.accent { color: var(--orange); }
.lede {
  margin: 24px 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--oat);
}
.lede a { color: var(--oat); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--umber);
}
.signoff p { margin: 0; }
.motto { font: 800 1.25rem/1.3 var(--heading); }
.small { font-size: 0.875rem; color: var(--oat); }

a:focus-visible { outline: 2px solid var(--oat); outline-offset: 4px; }

@media (min-width: 768px) {
  .page { padding: 48px 48px 40px; gap: 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro { animation: rise 600ms ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}