/* Motor Mouth Pizza: pre-opening site. Mobile first; one shared stylesheet so
   the Terms and Privacy pages (and later pages) look the same.

   One centered column, like a poster on a garage door, read top to bottom:
   Chatter standing on the logo -> one calm headline line -> when and where (the accent) -> the list.
   Type has one job each: Mentori = the logo's lettering (logo, button); Danny Lasso = the headline;
   Sundae = the one script accent; Big Bird = small labels; Archivo = sentences and typing.
   Background: prototype camo made of squares (a nod to the pans), darkened behind the column. */

@font-face { font-family: 'Mentori'; src: url('/assets/fonts/Mentori-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Lasso'; src: url('/assets/fonts/TAYDannyLasso.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BigBird'; src: url('/assets/fonts/TAYBigBirdRegular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Sundae'; src: url('/assets/fonts/TAYSundae.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --black: #212322;
  --ink: #161817;
  --yellow: #F1BE48;
  --red: #E03C31;
  --white: #F6F5F1;
  --text: #E9E8E3;   /* sentences on dark */
  --label: #A9ADA9;  /* small labels */
  --faint: #8A8E8B;  /* fine print: readable, not bright */
  --line: rgba(246,245,241,.2);

  --f-logo: 'Mentori', 'Arial Narrow', sans-serif;
  --f-head: 'Lasso', 'Arial Narrow', sans-serif;
  --f-script: 'Sundae', 'Brush Script MT', cursive;
  --f-caps: 'BigBird', 'Courier New', monospace;
  --f-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: 16px;
  --column: 460px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(17,18,18,.82), rgba(17,18,18,.45) 65%, rgba(17,18,18,.2)),
    url('/assets/img/camo.svg') 0 0 / 480px 480px,
    var(--black);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }

.page {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px var(--gutter) 48px;
  text-align: center;
}

/* ---------- Chatter on the logo ---------- */
.mast { width: 100%; max-width: 920px; }
.mast__chatter {
  width: min(31vw, 196px);
  margin: 0 auto 6px;           /* he stands just above the lettering, never on it */
  transform: rotate(-2deg);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.mast__logo { margin: 0; }
.mast__logo img { width: 100%; }

/* ---------- The teaser ---------- */
.tease { width: 100%; max-width: var(--column); margin-top: 26px; }
.tease__line {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: clamp(19px, 6.4vw, 30px); line-height: 1.2; letter-spacing: .06em;
  color: var(--white);
}
.tease__line span { display: block; }
/* When and where: the most useful words on the page, so they're the accent. */
.tease__when {
  margin-top: 18px;
  font-family: var(--f-script);
  font-size: clamp(28px, 8.6vw, 46px); line-height: 1.08;
  color: var(--yellow);
}

/* ---------- The waiting list ---------- */
.join { width: 100%; max-width: var(--column); margin-top: 34px; }
.join__title {
  display: flex; align-items: center; gap: 14px;
  margin: 0;
  font-family: var(--f-caps); font-weight: normal; font-size: 15px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--white);
}
/* The one touch of red: a racing stripe either side of the label, well away from the yellow button. */
.join__title::before, .join__title::after { content: ""; flex: 1; height: 2px; background: var(--red); }
.join__lede {
  margin: 14px auto 20px;
  font-family: var(--f-caps); font-size: clamp(12px, 3.75vw, 15px); line-height: 1.6; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.join__lede span { display: block; white-space: nowrap; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; text-align: left; }
.field--wide { grid-column: 1 / -1; }
.field label {
  display: block; margin: 0 0 6px 2px;
  font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--label);
}
.field__opt { color: var(--faint); letter-spacing: .1em; text-transform: lowercase; }
.field input {
  width: 100%; height: 50px;
  padding: 0 14px;
  font-family: var(--f-body); font-size: 17px; color: var(--white);
  background: rgba(0,0,0,.42);
  border: 1px solid var(--line);
  border-radius: 10px;
  appearance: none;
}
.field input::placeholder { color: #6E726F; }
.field input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.field input[aria-invalid="true"] { border-color: #FF8A80; }
.field__error, .form-error { margin: 5px 0 0 2px; font-size: 13px; line-height: 1.3; color: #FF8A80; font-weight: 600; }
.form-error { text-align: center; margin-top: 10px; }

.btn {
  display: block; width: 100%;
  margin-top: 18px;
  padding: 15px 16px 13px;
  border: 0; border-radius: 10px;
  background: var(--yellow);
  color: var(--black);
  /* Mentori is the logo's lettering, so the button echoes the top of the page. */
  font-family: var(--f-logo); font-size: clamp(17px, 5.8vw, 24px); line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, transform .08s ease;
}
.btn:hover { background: #F5CB66; }
.btn:active { transform: translateY(1px); background: #DCA935; }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn[disabled] { opacity: .7; cursor: default; }

.consent { max-width: 48ch; margin: 14px auto 0; font-size: 11.5px; line-height: 1.55; color: var(--faint); }
.consent a { color: var(--label); }

.done { padding: 22px 0 6px; outline: none; }
.done__script { font-family: var(--f-head); font-size: 26px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.done__text { max-width: 30ch; margin: 10px auto 0; font-size: 17px; color: var(--text); }

/* ---------- Footer ---------- */
.foot {
  padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(12,13,13,.75);
  text-align: center; font-size: 13px; color: var(--faint);
}
.foot a { text-decoration: none; }
.foot__links { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-family: var(--f-caps); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.foot__links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bigger screens ---------- */
@media (min-width: 760px) {
  .page { padding: 34px 32px 72px; }
  .tease { max-width: 680px; margin-top: 34px; }
  .tease__line { font-size: 32px; }
  .tease__when { font-size: 48px; margin-top: 18px; }
  .join { margin-top: 44px; }
  .join__lede { font-size: 16px; }
}

/* The spam-bot trap: off screen, never seen or tabbed to by people. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Terms and Privacy ---------- */
/* Long reading on a calm, solid background: the camo stays faint at the edges only. */
.doc-page {
  background:
    linear-gradient(rgba(17,18,18,.9), rgba(17,18,18,.9)),
    url('/assets/img/camo.svg') 0 0 / 480px 480px,
    var(--black);
}
.doc-top { width: 100%; max-width: 720px; margin: 0 auto; padding: 22px var(--gutter) 0; }
.doc-top__logo { display: block; width: min(260px, 70vw); }
.doc {
  flex: 1;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 26px var(--gutter) 56px;
  font-size: 16.5px; line-height: 1.65; color: var(--text);
}
.doc h1 {
  margin: 0;
  font-family: var(--f-head); font-weight: normal; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(30px, 8vw, 44px); line-height: 1.1; color: var(--white);
}
.doc__date { margin: 8px 0 24px; font-family: var(--f-caps); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.doc h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 34px 0 10px;
  font-family: var(--f-head); font-weight: normal; text-transform: uppercase; letter-spacing: .08em;
  font-size: 19px; line-height: 1.2; color: var(--yellow);
}
.doc h2::after { content: ""; flex: 1; height: 2px; background: var(--red); opacity: .7; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--yellow); }
.doc strong { color: var(--white); font-weight: 600; }
.doc a { color: var(--yellow); text-underline-offset: 3px; }
.doc__back { margin-top: 36px !important; font-family: var(--f-caps); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 760px) { .doc-top { padding-top: 34px; } .doc { padding-top: 34px; font-size: 17px; } }

/* Small phones (iPhone SE): the two side-by-side fields get a little tighter so the sample number fits. */
@media (max-width: 359px) { .field input { padding: 0 10px; font-size: 16px; } }

/* A link styled as the button (the 404 page). */
.btn--link { text-decoration: none; text-align: center; }