/* creators.thefemalequotient.com — page styles on top of the FQ brand kit (brand/css/fq-brand.css)
   Look (from the Creator Collective campaign graphic): the nude gradient as the page background,
   centered layout, and type filled with the Rose Gold With Overlay texture. */

:root {
  --rg-texture: url('/brand/textures/rose-gold-with-overlay.webp');
  --nude-bg: url('/brand/textures/nude-gradient.webp');
  /* Solid fallbacks and form accents, close to the textured type. --rg-ink passes 4.5:1 on the nude gradient. */
  --rg-ink: #74473d;
  --rg-ink-soft: #8a5a4f;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--rg-ink); background-color: #ebe7e1; }
/* Nude gradient pinned behind the page. A fixed layer (rather than background-attachment: fixed)
   so it also stays put on iOS, where fixed backgrounds aren't supported. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #ebe7e1 var(--nude-bg) center / cover no-repeat;
}
@media (max-width: 760px) { body::before { background-image: url('/brand/textures/nude-gradient-mobile.webp'); } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 1080px; margin: 0 auto; }
.center { text-align: center; }

/* ---------- Rose gold textured type ----------
   Like the graphic, each line of type gets its own copy of the texture, sized to cover that line
   (--tex-pos picks which part of the texture shows). --tex-shade lays a tint over the texture:
   light on the big display type, as in the graphic, and stronger on smaller text so it stays readable. */
.metal {
  --tex-shade: rgba(70, 36, 29, 0.1);
  --tex-pos: center;
  color: var(--rg-ink);
  background-image: linear-gradient(var(--tex-shade), var(--tex-shade)), var(--rg-texture);
  background-size: cover;
  background-position: var(--tex-pos);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metal-mid  { --tex-shade: rgba(70, 36, 29, 0.3); }
.metal-body { --tex-shade: rgba(70, 36, 29, 0.56); }
.deadline.metal { --tex-shade: rgba(70, 36, 29, 0.64); }
/* Which part of the texture each display line shows, matched to the graphic:
   CALLING ALL darker on the left, CREATORS lighter on the left */
.display-top.metal  { --tex-shade: rgba(70, 36, 29, 0.2); --tex-pos: 50% 100%; }
.display-main.metal { --tex-pos: 50% 33%; }
.title.metal { --tex-shade: rgba(70, 36, 29, 0.28); --tex-pos: 50% 33%; }
.lede.metal { --tex-shade: rgba(70, 36, 29, 0.38); --tex-pos: 50% 30%; }
.lede strong.metal  { --tex-shade: rgba(70, 36, 29, 0.3); --tex-pos: 50% 30%; }
/* Size block-level textured lines to their words, so the texture maps onto the letters
   rather than the full column width */
.metal.title, .metal.display-top, .metal.display-main, .lede strong.metal { width: fit-content; margin-left: auto; margin-right: auto; }
@media (forced-colors: active) { .metal { -webkit-text-fill-color: currentColor; background: none; } }

/* Display headings for this campaign: bold, upright tracking (overrides the brand's Thin headings) */
.display-top {
  display: block;
  font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display-main {
  display: block;
  font-size: clamp(2.9rem, 1.3rem + 6.2vw, 6.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.title {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ---------- Header ---------- */
.site-header { padding: 32px 0 0; }
.site-header img { width: clamp(80px, 6vw, 112px); }

/* ---------- Buttons ---------- */
.fq-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 19px 36px;
  color: var(--fq-ivory);
  background: linear-gradient(rgba(60, 30, 24, 0.32), rgba(60, 30, 24, 0.32)), var(--rg-texture) center / cover;
  border: 0;
  box-shadow: 0 14px 30px -16px rgba(111, 68, 58, 0.8);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.fq-btn:hover { color: var(--fq-ivory); background: linear-gradient(rgba(60, 30, 24, 0.32), rgba(60, 30, 24, 0.32)), var(--rg-texture) center / cover; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 34px -16px rgba(111, 68, 58, 0.9); }
.fq-btn .arrow { transition: transform var(--transition-fast); }
.fq-btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); text-align: center; }
.hero h1 { margin: 0; }
.hero .lede { margin-top: clamp(24px, 3vw, 44px); font-size: clamp(1.2rem, 0.95rem + 1.1vw, 2rem); font-weight: 500; line-height: 1.3; }
.hero .display-main { margin-top: clamp(6px, 2vw, 32px); }
.hero .lede strong { display: block; font-size: 1.15em; font-weight: 800; letter-spacing: -0.01em; margin-top: 0.15em; }
.hero .fq-btn { margin-top: clamp(28px, 3.5vw, 44px); }
.deadline { margin-top: 18px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; text-align: center; }
.section h2 { margin-bottom: clamp(24px, 3.5vw, 40px); }
.divider { width: 72px; height: 2px; margin: 0 auto; border: 0; background: var(--rg-texture) center / cover; }

.about p { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); font-weight: 400; line-height: 1.55; }

.together ul { list-style: none; padding: 0; display: grid; gap: 14px; justify-items: center; }
.together li { font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.5rem); font-weight: 500; line-height: 1.4; max-width: 64ch; }
.together li::before { content: "•"; margin-right: 0.6em; }

.closing h2 { margin-bottom: 16px; }
.closing p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); font-weight: 500; }
.closing .fq-btn { margin-top: 36px; }

/* ---------- Footer ----------
   Ported from ladies-who-code/female-quotient-rebuild (css/styles.css, "19. FOOTER").
   There it sits on the page-wide rose gold texture; here it carries that texture itself (.fq-bg-rosegold). */
.site-footer {
  color: var(--fq-white);
  padding: 2em 0;
  font-family: var(--font-primary);
}
.site-footer .container { max-width: var(--container-max); padding-left: 1.5em; padding-right: 1.5em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.3s ease; }
.site-footer a:hover { color: var(--fq-white); }

.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-top: 1em;
  padding-bottom: 2em;
}
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__col--logo { align-items: flex-start; }
.site-footer__logo { width: 120px; height: auto; }

.site-footer__heading {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fq-white);
  margin: 0 0 1.25rem;
}
.site-footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__links a { font-size: 1.05rem; font-weight: 500; line-height: 1.6; }

.btn--footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  margin-bottom: 1.5rem;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--fq-ivory);
}
.site-footer a.btn--footer-cta, .site-footer a.btn--footer-cta:hover { color: var(--fq-ivory); }
.btn--footer-cta .btn__arrow { display: inline-block; transition: transform 0.3s ease; }
.btn--footer-cta:hover .btn__arrow { transform: translateX(4px); }

.site-footer__social { display: flex; align-items: center; gap: 1rem; }
.site-footer__social a { display: flex; align-items: center; justify-content: center; color: var(--fq-white); transition: opacity 0.3s ease; }
.site-footer__social a:hover { opacity: 0.7; }
.site-footer__social svg { height: 1.3rem; width: auto; display: block; }

.site-footer__bottom { padding-top: 0; }
.site-footer__separator { border: none; border-top: 2px solid rgba(255, 255, 255, 0.35); margin: 0 0 1.5rem; }
.site-footer__copyright { text-align: center; font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); margin: 0; }

@media (max-width: 1199px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .site-footer { padding: 1.5em 0; }
}
@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo logo" "cta cta" "nav legal";
    gap: 1.5rem 2rem;
    text-align: center;
  }
  .site-footer__col--logo { grid-area: logo; justify-content: center; align-items: center; }
  .site-footer__col--logo .site-footer__logo { max-width: 140px; }
  .site-footer__col--cta { grid-area: cta; align-items: center; text-align: center; padding-bottom: 1.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.35); }
  .site-footer__col--nav { grid-area: nav; align-items: flex-start; text-align: left; }
  .site-footer__col--legal { grid-area: legal; align-items: flex-start; text-align: left; }
  .btn--footer-cta { align-self: center; }
  .site-footer__social { justify-content: center; }
}

/* ---------- Application page ---------- */
.apply-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); text-align: center; }
.apply-hero .display-top { font-size: clamp(1.3rem, 1rem + 1.5vw, 2.3rem); }
.apply-hero .display-main { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 4.8rem); }
.apply-hero p { margin-top: 24px; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); font-weight: 500; }

.apply-main { padding-bottom: clamp(72px, 9vw, 120px); }
.form-card { background: rgba(255, 255, 255, 0.86); max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 64px); box-shadow: 0 30px 60px -34px rgba(111, 68, 58, 0.45); color: var(--fq-obsidian); }

.form-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-step + .form-step { margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(116, 71, 61, 0.2); }
.form-step > legend { float: left; width: 100%; padding: 0; margin-bottom: 32px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--rg-ink); }
.form-step > legend + * { clear: both; }
.form-step > legend span { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: var(--rg-ink-soft); margin-right: 12px; vertical-align: 3px; }

.field { margin-bottom: 32px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > fieldset > legend { display: block; font-size: 17px; font-weight: 500; line-height: 1.35; margin-bottom: 12px; padding: 0; }
.field > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field .hint { display: block; margin-top: 4px; font-size: 15px; font-weight: 300; color: var(--fq-grey); }
.req { color: var(--rg-ink); margin-left: 2px; }

.field input[type=text], .field input[type=email], .field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  color: var(--fq-obsidian);
  background: var(--fq-ivory);
  border: 1px solid #d9cfc6;
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--rg-ink); background: var(--fq-white); }

.row-2 { display: grid; gap: 0 24px; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } }

.counter { margin-top: 8px; font-size: 14px; color: var(--fq-grey); text-align: right; }
.counter.over { color: #a3352b; font-weight: 500; }

.options { display: grid; gap: 10px; }
@media (min-width: 560px) { .options { grid-template-columns: 1fr 1fr; } }
.option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #d9cfc6; background: var(--fq-ivory); cursor: pointer; font-size: 16px; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.option:hover { border-color: var(--rg-ink-soft); }
.option input { width: 18px; height: 18px; margin: 0; accent-color: var(--rg-ink); flex: none; }
.option:has(input:checked) { border-color: var(--rg-ink); background: var(--fq-white); }
.option--wide { grid-column: 1 / -1; }

.field.invalid input, .field.invalid textarea, .field.invalid .option { border-color: #a3352b; }
.field-error { margin-top: 8px; font-size: 14px; font-weight: 500; color: #a3352b; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.actions { margin-top: 48px; display: grid; gap: 16px; justify-items: start; }
.actions .fq-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.form-status { font-size: 15px; font-weight: 500; color: #a3352b; }
.form-status:empty { display: none; }

.thanks, .closed { text-align: center; padding: 24px 0; }
.thanks h2, .closed h2 { margin-bottom: 20px; }
.thanks p, .closed p { max-width: 36ch; margin: 0 auto 32px; font-size: 18px; color: var(--rg-ink); }
.thanks:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Open / closed (see assets/js/deadline.js) ---------- */
[data-closed-only] { display: none; }
.apps-closed [data-open-only] { display: none; }
.apps-closed [data-closed-only] { display: block; }