/* ============================================================
   THE BEAUMONT — base layer
   Tokens, fonts, reset, base typography
   ============================================================ */

/* ---- Fonts: Moniqa Black Narrow (display) ---- */
@font-face {
  font-family: "Moniqa Black Narrow";
  src: url("../fonts/Moniqa-BlackNarrowDisplay.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moniqa Black Narrow Head";
  src: url("../fonts/Moniqa-BlackNarrowHeading.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moniqa Black Narrow";
  src: url("../fonts/Moniqa-BlackNarrowItaDisplay.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Grounds — light only ever appears as amber pools on these */
  --ink:        #150c0a;
  --ink-2:      #1a0f0d;
  --wine:       #3a1518;
  --wine-2:     #4a1a1e;
  --wine-deep:  #2a0f12;

  /* Light */
  --brass:      #c9862f;
  --brass-soft: #a9722c;
  --amber:      #e6b876;
  --amber-hi:   #f2d29a;

  /* Accents (used sparingly) */
  --terracotta: #b6572f;
  --burnt:      #9c451f;
  --olive:      #7c7a4e;
  --tile:       #4f6b5a;

  /* Words */
  --cream:      #f2e9dc;
  --cream-dim:  #cdbfae;
  --cream-faint:#8a7d70;

  /* Type — two display optical sizes of Moniqa Black Narrow + typewriter body */
  --font-display: "Moniqa Black Narrow", "Times New Roman", serif;        /* large display */
  --font-display-head: "Moniqa Black Narrow Head", "Moniqa Black Narrow", serif; /* mid headings */
  --font-body: "Courier Prime", "Courier New", Courier, monospace;

  /* Spacing scale (8pt rhythm) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-8: 6rem;
  --s-10: 8rem;

  --maxw: 62rem;
  --hairline: rgba(201, 134, 47, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* slow ease-out */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Contain sideways bleed (e.g. the hero pressing) without creating a
     scroll trap. `clip` is preferred; `hidden` is the fallback for old Safari. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--wine) 0%, var(--wine-deep) 38%, var(--ink) 78%, var(--ink) 100%);
  background-color: var(--ink);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: rgba(201, 134, 47, 0.35); color: var(--cream); }

/* ---- Typographic primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--cream);
}
/* mid-size heading optical cut */
.display-head {
  font-family: var(--font-display-head);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.display-ita {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  color: var(--cream);
}

/* Small tracked-out typewriter labels — echoes the brief's mono caps */
.label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
}

.body-lg { font-size: 1.05rem; line-height: 1.85; color: var(--cream-dim); }
.body    { font-size: 1rem;  line-height: 1.75; color: var(--cream-dim); }

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Shared container ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---- CTA: the door ---- */
.knock {
  --ring: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--amber-hi);
  padding: 1.05em 2.2em;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: rgba(201, 134, 47, 0.04);
  cursor: pointer;
  transition: background 320ms var(--ease), color 320ms var(--ease),
              border-color 320ms var(--ease), box-shadow 480ms var(--ease);
  min-height: 44px;
}
.knock:hover, .knock:focus-visible {
  background: rgba(230, 184, 118, 0.12);
  border-color: var(--amber);
  box-shadow: 0 0 44px -8px rgba(230, 184, 118, 0.45);
  color: var(--cream);
}
.knock .knuckle {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}

/* ---- Reduced motion base ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}