/* In The Game Creations LLC — shared site styles */

:root {
  --navy: #1b2733;
  --navy-soft: #2a3946;
  --bg: #f5f6f7;
  --white: #ffffff;
  --orange: #f0653d;
  --orange-dark: #d94f28;
  --text-muted: #5b6570;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--navy);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}

nav.main-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

nav.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  opacity: 0.8;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  opacity: 1;
  color: var(--orange);
}

/* Hero */
.hero {
  padding: 60px 0 40px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 20px;
  color: var(--navy);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 16px;
}

.subhead {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 18px;
}

p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 640px;
}

.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  margin-top: 12px;
}

.btn:hover { background: var(--orange-dark); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 27px;
  border-radius: 6px;
  border: 2px solid var(--navy);
  margin-top: 12px;
}

/* Sections */
section {
  padding: 50px 0;
}

.section-alt {
  background: var(--white);
}

/* Cards / grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 30px;
}

.card {
  background: var(--white);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(27, 39, 51, 0.06);
}

.card .num {
  font-weight: 800;
  color: var(--orange);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.card h3 {
  margin: 10px 0 10px;
  font-size: 1.3rem;
}

.card p {
  font-size: 0.98rem;
  margin: 0;
}

.placeholder {
  background: var(--white);
  border: 2px dashed #d8dce0;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  margin-top: 24px;
}

.placeholder h3 {
  color: var(--navy);
  margin-bottom: 8px;
}

/* Form */
form.contact-form {
  max-width: 520px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form.contact-form label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  display: block;
}

form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #d8dce0;
  font-family: inherit;
  font-size: 1rem;
  background: var(--white);
}

form.contact-form textarea { min-height: 140px; resize: vertical; }

#form-status {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Footer */
footer.site-footer {
  background: var(--navy);
  color: #cdd4da;
  padding: 40px 0;
  margin-top: 40px;
}

footer.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

footer.site-footer .foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

footer.site-footer a { opacity: 0.85; }
footer.site-footer a:hover { opacity: 1; color: var(--orange); }

footer.site-footer .copyright {
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 8px;
}

@media (max-width: 640px) {
  nav.main-nav { gap: 16px; }
  header.site-header { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Added 2026-09-09. The header must read IN THE GAME CREATIONS in full: LOCKUP-SETTLED.md
   says CREATIONS is never smaller than IN THE GAME in any form at any size, and bare
   IN THE GAME is a clearance Stop. Wrap to two lines rather than shrinking the word. */
@media (max-width: 600px) {
  .logo { white-space: normal; max-width: 8ch; line-height: 1.05; }
}

/* ------------------------------------------------------------------
   Added 2026-09-09 with the four-pathway reframe.

   The site went from three lines to four, and the homepage stopped being
   a product list. That needed a four-up grid, a two-up grid, a lede
   paragraph that reads as a stand-first rather than body copy, and a way
   to mark the honest-status sentences so they carry visual weight instead
   of hiding at the bottom of a section.

   Palette note, deliberately not acted on here: the site palette and the
   settled company mark are different palettes (site navy against
   Nightfall, near-white against Boxwood cream, and two different reds),
   and the type is Poppins against EB Garamond in the wordmark. That
   reconciliation belongs with the mark work, and it should move toward
   the mark, because the mark is settled and this CSS is not.
   ------------------------------------------------------------------ */

/* A stand-first. Larger than body, still not a heading. */
.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--navy);
  max-width: 720px;
  margin: 0 0 18px;
}

.hero .lede { max-width: 760px; }

/* Four pathways at one altitude. Never let the fourth wrap alone on a
   desktop width — two-by-two is a set, three-plus-one is an afterthought. */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 30px;
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
}

/* The status eyebrow carries a count, so it must not wrap mid-figure. */
.card .num {
  display: block;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-link {
  margin-top: auto;
  padding-top: 16px;
}

.card-link a {
  color: var(--orange);
  font-weight: 700;
}

.card-link a:hover { color: var(--orange-dark); }

/* Honest-status sentences. The policy is the product, so give it a rule
   rather than letting it read as small print. */
.honest {
  border-left: 3px solid var(--orange);
  padding: 2px 0 2px 16px;
  color: var(--navy);
  max-width: 680px;
}

/* Two buttons side by side need room to breathe on a phone. */
.btn + .btn-outline,
.btn-outline + .btn { margin-left: 10px; }

@media (max-width: 520px) {
  .btn, .btn-outline { display: block; margin-left: 0; text-align: center; }
  .btn + .btn-outline, .btn-outline + .btn { margin-left: 0; }
}

/* Seven nav items is one more than this header was built for. */
@media (max-width: 860px) {
  header.site-header { flex-wrap: wrap; row-gap: 8px; }
  .main-nav { flex-wrap: wrap; }
}

/* Body copy sits at 640px, which is right for reading. Section intros
   that follow an h2 were inheriting it and reading as narrower than the
   heading above them. */
section > .wrap > p { max-width: 720px; }

/* The status eyebrows wrap to different line counts across the four
   pathway cards, which pushed the headings out of alignment. Reserve two
   lines so the h3s sit on one baseline regardless of eyebrow length. */
.grid-4 .card .num {
  min-height: 2.4em;
  line-height: 1.2;
}

/* Founder portrait, about.html hero. Added 2026-09-09, the first image on
   this site. Two columns on desktop, stacked on narrow. The portrait sits
   second in the source order so a screen reader and a phone both get the
   name and the sentence before the picture. */
.hero-founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: center;
}

.hero-founder-text { min-width: 0; }

.founder-portrait {
  margin: 0;
  justify-self: end;
}

.founder-portrait img {
  display: block;
  width: 340px;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  /* Navy rather than a grey shadow: the portrait's own ground is navy and a
     neutral shadow reads as a dropped-in stock photo against this palette. */
  box-shadow: 0 10px 30px rgba(27, 39, 51, 0.22);
}

@media (max-width: 760px) {
  .hero-founder {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .founder-portrait { justify-self: start; }
  .founder-portrait img { width: 220px; }
}