/* BEASTS OF THE FIELD — beastsofthefield.com
   The Field Guide design system, print-shop edition. Same palette and type
   as the app (src/constants/theme.ts); assets are the app's real art. */

:root {
  --paper: #F5EFE1;
  --card: #EDE4CE;
  --well: #E3D7BC;
  --line: #CFC2A4;
  --ink: #2B2822;
  --ink-soft: #5C5448;
  --ink-faint: #8A8070;
  --seal: #A63A2E;
  --seal-pressed: #7E2B22;
  --brass: #B08D3E;
  --gilt: #C9B788;
  --leather: #414A33;
  --leather-deep: #2E3524;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* The paper grain rides everything on paper. */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/paper-grain.png') repeat;
  opacity: 0.5;
  pointer-events: none;
}

.stamp {
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ---------- HERO: the leather cover, opened to the world ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 50% -20%, #4d5840 0%, var(--leather) 45%, var(--leather-deep) 100%);
  color: var(--gilt);
  text-align: center;
  padding: 84px 24px 0;
  overflow: hidden;
}
/* Tooling rules echoing the cover's embossed border. */
.hero::after {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(201, 183, 136, 0.28);
  outline: 3px double rgba(201, 183, 136, 0.18);
  outline-offset: 6px;
  pointer-events: none;
}

.hero .emblem {
  width: 148px;
  height: 148px;
  border-radius: 32px;
  border: 2px solid rgba(201, 183, 136, 0.5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: rise 0.9s ease-out both;
}

.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 84px);
  line-height: 1.04;
  margin: 26px auto 14px;
  max-width: 700px;
  animation: rise 0.9s 0.15s ease-out both;
}

.hero .overline { color: rgba(201, 183, 136, 0.75); animation: rise 0.9s 0.05s ease-out both; }

.hero .lede {
  font-style: italic;
  font-size: clamp(17px, 2.4vw, 21px);
  color: rgba(235, 226, 200, 0.85);
  max-width: 520px;
  margin: 0 auto;
  animation: rise 0.9s 0.25s ease-out both;
}

.hero .cta {
  display: inline-block;
  margin: 34px 0 0;
  background: var(--seal);
  color: var(--paper);
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: 'Special Elite', monospace;
  letter-spacing: 2px;
  font-size: 14px;
  box-shadow: 0 6px 0 var(--seal-pressed), 0 14px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: rise 0.9s 0.35s ease-out both;
}
.hero .cta:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--seal-pressed), 0 10px 22px rgba(0,0,0,0.3); }
.hero .cta:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--seal-pressed); }

.hero .hero-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(235, 226, 200, 0.6);
  animation: rise 0.9s 0.45s ease-out both;
}
.hero .hero-note .android-link {
  color: rgba(235, 226, 200, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The journal itself, breaking out of the leather into the paper below. */
.hero .journal {
  display: block;
  width: min(330px, 68vw);
  margin: 56px auto -150px;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(-2.5deg);
  animation: rise 1s 0.45s ease-out both;
  position: relative;
  z-index: 2;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.hero .journal { animation-name: riseTilt; }
@keyframes riseTilt {
  from { opacity: 0; transform: translateY(40px) rotate(-2.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(-2.5deg); }
}

/* ---------- SECTIONS ON PAPER ---------- */

main { position: relative; }

section.page {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 96px 28px 40px;
}
section.page:first-of-type { padding-top: 200px; } /* room for the overhanging journal */

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-faint);
  margin-bottom: 44px;
}
.rule::before, .rule::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* The three field plates. */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.plate {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 26px 26px;
  box-shadow: 0 1px 0 rgba(43, 40, 34, 0.08);
}
/* Corner ticks, like the app's PlateFrame. */
.plate i {
  position: absolute; width: 14px; height: 14px; border-color: var(--ink); border-style: solid;
}
.plate i:nth-child(1) { top: 9px; left: 9px; border-width: 1.5px 0 0 1.5px; }
.plate i:nth-child(2) { top: 9px; right: 9px; border-width: 1.5px 1.5px 0 0; }
.plate i:nth-child(3) { bottom: 9px; left: 9px; border-width: 0 0 1.5px 1.5px; }
.plate i:nth-child(4) { bottom: 9px; right: 9px; border-width: 0 1.5px 1.5px 0; }

.plate .num { color: var(--seal); }
.plate h3 {
  font-family: 'Fraunces', serif;
  font-size: 25px;
  font-weight: 600;
  margin: 8px 0 10px;
}
.plate p { color: var(--ink-soft); font-size: 16px; }

/* The bout tableau: fox vs the training dummy, verdict stamped over it. */
.bout-exhibit {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  gap: 48px;
  align-items: center;
}
.bout-exhibit h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  margin-bottom: 18px;
}
.bout-exhibit p { color: var(--ink-soft); }
.bout-exhibit p + p { margin-top: 14px; }

.bout-ring {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 40px 18px 18px;
  transform: rotate(1.5deg);
  box-shadow: 8px 12px 0 rgba(43, 40, 34, 0.08);
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.bout-ring .corner { flex: 1; text-align: center; margin: 0; }
.bout-ring .corner img { width: 100%; max-width: 175px; display: inline-block; }
/* The fox art faces left; mirror it so the combatants square off. */
.bout-ring .corner:first-of-type img { transform: scaleX(-1); }
.bout-ring .corner figcaption { margin-top: 8px; color: var(--ink-faint); font-size: 10px; }
.bout-ring .vs { align-self: center; color: var(--seal); font-size: 17px; padding-bottom: 34px; }
/* The blow, mid-air: the same big red number the game flashes. */
.bout-ring .dmg {
  position: absolute;
  top: 8px;
  right: 16%;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 46px;
  color: var(--seal);
  transform: rotate(-6deg);
  text-shadow: 2px 2px 0 rgba(43, 40, 34, 0.12);
}
/* The referee's ruling, stamped across the plate corner. */
.bout-ring .verdict {
  position: absolute;
  top: -13px;
  left: -12px;
  background: var(--paper);
  border: 1.5px solid var(--seal);
  border-radius: 3px;
  color: var(--seal);
  padding: 4px 10px;
  font-size: 11px;
  transform: rotate(-4deg);
}

/* The fox exhibit. */
.exhibit {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 48px;
  align-items: center;
}
.exhibit .mount {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 26px 26px 18px;
  transform: rotate(-2deg);
  box-shadow: 8px 12px 0 rgba(43, 40, 34, 0.08);
  text-align: center;
}
.exhibit .mount img { width: 100%; }
.exhibit .mount figcaption { margin-top: 10px; color: var(--ink-faint); font-size: 11px; }
.exhibit h2, .voice h2, .contact h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  margin-bottom: 18px;
}
.exhibit p, .voice-quote p { color: var(--ink-soft); }
.exhibit p + p { margin-top: 14px; }
.footnote { color: var(--ink-faint); font-size: 14px; font-style: italic; margin-top: 18px; }

/* From the field: phone-framed screenshots. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
.phone {
  text-align: center;
}
.phone img {
  width: 100%;
  border-radius: 34px;
  border: 3px solid var(--ink);
  box-shadow: 0 16px 36px rgba(43, 40, 34, 0.22);
  display: block;
}
.phone:nth-child(2) { transform: translateY(22px); }
.phone figcaption { margin-top: 14px; color: var(--ink-faint); }

/* Beastmont speaks. */
.voice {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 24px;
  align-items: end;
}
.voice img { width: 100%; margin-bottom: -40px; }
.voice-quote {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 26px 28px;
  margin-bottom: 56px;
  position: relative;
}
.voice-quote .speaker { color: var(--seal); display: block; margin-bottom: 10px; }
.voice-quote p {
  font-family: 'Special Elite', monospace;
  font-size: 16.5px;
  line-height: 1.75;
}
.voice-quote p + p { margin-top: 12px; }

/* Contact card. */
.contact { text-align: center; padding-bottom: 110px; }
.contact a.mail {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 3.4vw, 30px);
  color: var(--seal);
  text-decoration: none;
  border-bottom: 2px solid var(--seal);
}
.contact a.mail:hover { color: var(--seal-pressed); border-color: var(--seal-pressed); }
.contact .small { color: var(--ink-faint); font-size: 14px; margin-top: 14px; }

/* ---------- Waitlist form (the launch post) ---------- */
.waitlist {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.waitlist input[type="email"] {
  font-family: 'Literata', serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--well);
  border: 1px solid rgba(43, 40, 34, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 260px;
}
.waitlist input[type="email"]:focus { outline: 2px solid var(--seal); outline-offset: 1px; }
.waitlist button {
  background: var(--seal);
  color: var(--paper);
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 999px;
  letter-spacing: 2px;
  font-size: 13px;
  box-shadow: 0 4px 0 var(--seal-pressed);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.waitlist button:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--seal-pressed); }
.waitlist button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--seal-pressed); }
.waitlist-note { min-height: 20px; }

/* ---------- Live register ticker ---------- */
.ticker-strip {
  background: var(--leather-deep);
  text-align: center;
}
.ticker-strip a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 14px 20px;
  text-decoration: none;
}
.ticker-strip .stamp { color: rgba(201, 183, 136, 0.85); font-size: 12px; }
.ticker-strip .ticker-cta { color: var(--paper); }
.ticker-strip a:hover .ticker-cta { text-decoration: underline; }

/* ---------- FOOTER: the ink band ---------- */

footer {
  background: var(--ink);
  color: var(--line);
  padding: 40px 24px 46px;
  text-align: center;
}
footer nav { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
footer a { color: var(--gilt); text-decoration: none; }
footer a:hover { color: var(--paper); }
footer .fine { font-size: 13px; color: var(--ink-faint); }

/* ---------- LEGAL PAGES: notices on the flyleaf ---------- */

.notice-body {
  background: url('assets/flyleaf-paper.png') center / cover fixed;
}
.notice {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 28px 90px;
}
.notice .crest { display: block; width: 84px; border-radius: 18px; margin: 0 auto 22px; box-shadow: 0 10px 26px rgba(43,40,34,0.25); }
.notice h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 44px);
  text-align: center;
  margin-bottom: 6px;
}
.notice .dated { text-align: center; color: var(--ink-faint); margin-bottom: 46px; }
.notice h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 23px;
  margin: 40px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.notice p, .notice li { color: var(--ink-soft); font-size: 16.5px; }
.notice p + p { margin-top: 12px; }
.notice ul { padding-left: 22px; margin-top: 10px; }
.notice li + li { margin-top: 8px; }
.notice strong { color: var(--ink); }
.notice .back { display: inline-block; margin-top: 54px; color: var(--seal); text-decoration: none; }
.notice .back:hover { color: var(--seal-pressed); }

/* ---------- MOTION MANNERS ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  .exhibit, .voice, .bout-exhibit { grid-template-columns: 1fr; }
  .bout-exhibit .bout-ring { order: -1; } /* the tableau leads on a phone */
  .voice img { max-width: 260px; margin: 0 auto -40px; }
  .hero .journal { margin-bottom: -110px; }
  section.page:first-of-type { padding-top: 150px; }
}