/* =====================================================================
   PYROTACTICS GAMES: SITE STYLES
   ---------------------------------------------------------------------
   DESIGNERS: start here. Everything in the "DESIGN SETTINGS" block below
   is safe to change: colors, fonts, sizes, spacing, corners.
   Change a value, save, refresh the page in a browser to see it.
   Below that block is the layout itself; you don't need to touch it
   for a restyle. See DESIGNER-GUIDE.md for more.
   ===================================================================== */

:root {
  /* ---------- DESIGN SETTINGS: colors ---------- */
  --color-page:        #ffffff;   /* main page background */
  --color-band:        #faf5ef;   /* background of every other section */
  --color-ink:         #161412;   /* main text */
  --color-ink-soft:    #5a534c;   /* secondary text, captions */
  --color-brand:       #ef4f1a;   /* the logo's orange: buttons, links, accents */
  --color-brand-dark:  #c8341a;   /* button hover, pressed */
  --color-on-brand:    #ffffff;   /* text on orange buttons */
  --color-line:        #e7ddd2;   /* thin borders and dividers */
  --color-card:        #ffffff;   /* card background */
  --color-footer:      #161412;   /* footer background */
  --color-on-footer:   #e9e3dc;   /* footer text */

  /* ---------- DESIGN SETTINGS: fonts ---------- */
  /* Fonts load from Google Fonts in index.html and privacy.html (the <link> line). */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;   /* headings */
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif; /* everything else */

  /* ---------- DESIGN SETTINGS: sizes ---------- */
  --text-base:  1.0625rem;  /* body text (17px) */
  --text-small: 0.9rem;
  --h1-size:    clamp(2rem, 5vw, 3.25rem);
  --h2-size:    clamp(1.6rem, 3.5vw, 2.25rem);
  --h3-size:    1.2rem;

  /* ---------- DESIGN SETTINGS: shape and spacing ---------- */
  --radius:          10px;    /* corner rounding of cards, buttons, inputs */
  --section-padding: clamp(3.5rem, 8vw, 6rem);  /* space above/below each section */
  --page-width:      1080px;  /* max width of the content */
  --gutter:          1.25rem; /* space at the screen edges on phones */
}

/* =====================================================================
   LAYOUT (no need to change for a restyle)
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--color-brand); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: 0.02em; }
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
p { margin: 0 0 1rem; }

.container { width: min(var(--page-width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-padding); }
.section--band { background: var(--color-band); }
.section__intro { max-width: 46rem; color: var(--color-ink-soft); }
.eyebrow { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brand-dark); font-weight: 700; margin-bottom: 0.5rem; }

/* skip link for keyboard users */
.skip { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff; padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--color-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-ink); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }
.brand img { width: 40px; height: 40px; }
.nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nav a { color: var(--color-ink); text-decoration: none; font-size: var(--text-small); font-weight: 600; }
.nav a:hover { color: var(--color-brand-dark); }
@media (max-width: 720px) { .nav { display: none; } }

/* ---------- hero + newsletter ---------- */
.hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-padding); }
.hero__logo { width: min(340px, 75vw); margin: 0 auto 1.5rem; }
.hero__tagline { font-size: 1.2rem; color: var(--color-ink-soft); max-width: 36rem; margin: 0 auto 2rem; }

.signup { max-width: 34rem; margin: 0 auto; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.75rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.06); text-align: left; }
.signup h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.signup p { color: var(--color-ink-soft); }
.signup__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signup input[type="email"] { flex: 1 1 14rem; min-width: 0; font: inherit; padding: 0.8rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; color: var(--color-ink); }
.signup input[type="email"]:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.signup__note { font-size: var(--text-small); margin: 0.75rem 0 0; }
.signup__status { font-weight: 600; margin: 0.75rem 0 0; min-height: 1.5em; }
.signup__status.is-error { color: var(--color-brand-dark); }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: var(--radius); border: 2px solid var(--color-brand); background: var(--color-brand); color: var(--color-on-brand); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-on-brand); }
.button--ghost { background: transparent; color: var(--color-brand-dark); }
.button--ghost:hover { color: var(--color-on-brand); }
.button[aria-disabled="true"] { background: transparent; border-color: var(--color-line); color: var(--color-ink-soft); cursor: default; pointer-events: none; }

/* ---------- cards (projects, stores, press) ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); margin-top: 2rem; }
.card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.card p { margin: 0; color: var(--color-ink-soft); }
.card .button { margin-top: auto; align-self: flex-start; }
.tag { align-self: flex-start; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-dark); background: color-mix(in srgb, var(--color-brand) 12%, transparent); padding: 0.2rem 0.6rem; border-radius: 999px; }

/* ---------- small playtest line ---------- */
.playtest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px dashed var(--color-line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 2.5rem; }
.playtest p { margin: 0; color: var(--color-ink-soft); }

/* ---------- press kit ---------- */
.press-thumb { background: #fff; border: 1px solid var(--color-line); border-radius: calc(var(--radius) - 4px); padding: 1rem; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.press-thumb img { max-height: 100%; width: auto; }
.press-bio { max-width: 46rem; margin-top: 2rem; padding: 1.5rem; border-left: 4px solid var(--color-brand); background: var(--color-card); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--color-footer); color: var(--color-on-footer); padding-block: 2.5rem; font-size: var(--text-small); }
.site-footer a { color: var(--color-on-footer); }
.site-footer .container { display: grid; gap: 0.75rem; }
.site-footer p { margin: 0; opacity: 0.85; }

/* ---------- privacy page ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; }

/* placeholders Preston still has to write: easy to spot, remove the class when the text is final */
.todo { background: #fff3c4; outline: 1px dashed #d9a400; border-radius: 4px; padding: 0 0.2em; }