/* ============================================================
   Toasty — toastyentertainment.com
   Design rationale: _PLAN/01_DESIGN_REVIEW_BY_PERSONA.md §5

   Sierra's definition, 2026-09-09: POSITIVE melanated entertainment
   news, focused on what Black creators are actually making — the
   little-known things, small shows, online shows, work that got one
   press release and deserved more. A discovery and signal-boosting
   publication, NOT celebrity news and NOT gossip.

   THE CONCEPT IS A SPOTLIGHT — warm light thrown deliberately onto
   someone who has been working in the dark. The palette is literal:
     · Ground: deep warm aubergine-black. A theatre before the lights
       come up. Dark, but warm and rich — never the cold near-black
       of a news site, because urgency is the wrong register for
       "here is something lovely you haven't seen."
     · Marigold IS the spotlight. It carries featured work and
       nothing else, so the eye learns gold means "look at this."
     · Coral for format tags and secondary interface.
     · Cream, not white, for body — white on dark is harsh at length.

   Distinct from Brown Girl Book Club's dark palette on purpose:
   that one is restrained and literary (oxblood, brass, quiet).
   This is vivid and celebratory. Same brightness, opposite
   temperament.

   REJECTED: the red/black/green pan-African palette. It is the
   default shorthand for anything Black-audience-facing, it signals
   politics rather than entertainment, and it would flatten a
   specific editorial idea into a generic one.

   Contrast (WCAG 2.2 AA):
     --cream    on --stage    = 14.6:1
     --cream-2  on --stage    =  9.3:1
     --marigold on --stage    = 10.4:1
     --coral    on --stage    =  7.1:1
     --stage    on --marigold = 10.4:1
   ============================================================ */

:root {
  --stage:    #221420;   /* deep warm aubergine-black */
  --stage-2:  #2f1c2c;   /* raised panels */
  --stage-3:  #452c41;   /* hairlines */

  --cream:    #f7efe6;
  --cream-2:  #c9b3bf;

  --marigold: #f0b429;   /* the spotlight */
  --coral:    #ef7f6b;

  --accent:     var(--marigold);
  --accent-ink: #221420;
  --ink:        var(--cream);
  --paper:      var(--stage);
  --focus:      #f7efe6;

  --display: 'Fraunces', 'Recoleta', Georgia, 'Times New Roman', serif;
  --body:    'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure: 64ch;
}

/* ============ Document ============ */
body {
  background: var(--stage);
  color: var(--cream);
  font-family: var(--body);
  font-size: 1.07rem;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 3.25rem 0 1rem; }
h3 { font-size: clamp(1.12rem, 2.1vw, 1.35rem); margin: 1.75rem 0 0.5rem; }

p { margin-bottom: 1.2rem; }
ul, ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
li { margin-bottom: 0.5rem; }
strong { font-weight: 650; color: var(--marigold); }

a { color: var(--marigold); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: none; border-top: 1px solid var(--stage-3); margin: 3rem 0; }

/* ============ Layout ============ */
.wrap         { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 700px);  margin-inline: auto; }
.section      { padding: 4rem 0; }
.section--alt { background: var(--stage-2); }

/* ============ Header ============ */
.site-header {
  background: var(--stage);
  border-bottom: 1px solid var(--stage-3);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.05rem 0; flex-wrap: wrap;
}
.site-logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-decoration: none;
}
.site-logo span { color: var(--marigold); }
.site-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-2);
  text-decoration: none;
  padding: 0.7rem 0;
  display: inline-block;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--marigold); }

/* ============ THE SPOTLIGHT — the design signature ============
   One piece of work, enormous, with the single most important
   utility on the page: where to actually watch it. Discovery
   content fails when it excites someone and then makes them hunt. */
.spotlight {
  padding: 3.5rem 0 3rem;
  position: relative;
}
/* The light itself — a soft warm wash from above */
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22rem;
  background: radial-gradient(60% 100% at 50% 0%, rgba(240, 180, 41, 0.16), transparent 70%);
  pointer-events: none;
}
.spotlight > * { position: relative; }

.spotlight__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--marigold);
  padding: 0.35rem 0.8rem;
  margin-bottom: 1.35rem;
}
.spotlight h1 { max-width: 16ch; margin-bottom: 0.75rem; }
.spotlight__by {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--cream-2);
  margin-bottom: 1.5rem;
}
.spotlight__blurb { font-size: 1.12rem; max-width: 52ch; }

/* Where to watch — the utility that makes discovery work */
.watch {
  border: 1px solid var(--marigold);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0 0;
  max-width: 34rem;
}
.watch__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marigold);
  display: block;
  margin-bottom: 0.7rem;
}
.watch ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.watch li { margin: 0; }

/* ============ Format tags — the navigational system ============ */
.format {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  border: 1px solid var(--coral);
  padding: 0.22rem 0.6rem;
  margin-bottom: 0.7rem;
}

/* ============ Discovery grid — the archive IS the product ============
   Not a reverse-chronological feed. Nothing here expires: a good web
   series from eighteen months ago is still a discovery to someone who
   has not seen it. */
.discover {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2rem;
}
.find {
  background: var(--stage-2);
  border: 1px solid var(--stage-3);
  padding: 1.5rem 1.45rem 1.65rem;
  display: flex;
  flex-direction: column;
}
.find h3 { margin: 0 0 0.3rem; }
.find h3 a { color: var(--cream); text-decoration: none; }
.find h3 a:hover { color: var(--marigold); }
.find__by { color: var(--cream-2); font-size: 0.94rem; margin-bottom: 0.7rem; }
.find p { color: var(--cream-2); font-size: 0.97rem; margin-bottom: 0; flex-grow: 1; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.95rem 1.8rem;
  background: var(--marigold);
  color: var(--accent-ink);
  border: 2px solid var(--marigold);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #ffc849; border-color: #ffc849; color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--marigold); }
.btn--ghost:hover { background: var(--marigold); color: var(--accent-ink); }

/* ============ Callout / disclosure ============ */
.callout, .disclosure {
  background: var(--stage-2);
  border-left: 3px solid var(--coral);
  padding: 1.35rem 1.6rem;
  margin: 2.25rem 0;
  max-width: var(--measure);
}
.disclosure { border-left-color: var(--marigold); font-size: 0.94rem; margin-bottom: 2rem; }
.callout p:last-child, .disclosure p:last-child { margin-bottom: 0; }

/* ============ Signup ============ */
.signup {
  border: 1px solid var(--stage-3);
  background: var(--stage-2);
  padding: 2.25rem 2rem;
  max-width: 42rem;
}
.signup h2 { margin-top: 0; }
.signup__form { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.3rem; align-items: flex-end; }
.signup label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-bottom: 0.45rem;
}
.signup input[type="email"], .signup input[type="text"], .signup textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: var(--stage);
  border: 1px solid var(--stage-3);
  border-radius: 0;
  color: var(--cream);
}
.signup input:focus-visible, .signup textarea:focus-visible { border-color: var(--marigold); }
.signup__note { font-size: 0.89rem; color: var(--cream-2); margin: 1rem 0 0; }

/* ============ Submission form ============ */
.field { margin-bottom: 1.25rem; }
.field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-bottom: 0.45rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--stage);
  border: 1px solid var(--stage-3);
  border-radius: 0;
  color: var(--cream);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--marigold); }
.field__hint { font-size: 0.87rem; color: var(--cream-2); margin: 0.4rem 0 0; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--stage-3);
  padding: 3rem 0;
  margin-top: 4.5rem;
  font-size: 0.89rem;
}
.site-footer ul { display: flex; gap: 1.4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.site-footer a { color: var(--cream-2); text-decoration: none; padding: 0.35rem 0; display: inline-block; }
.site-footer a:hover { color: var(--marigold); }
.site-footer p { color: var(--cream-2); margin: 0; max-width: none; }