/* =====================================================================
   Pride Is For Every Body — hand-built static site
   Brand: Pride Purple #750786 + Pride Pink #E11453 (+ pride spectrum)
   Type: Roboto Slab (display) + Roboto (body) — Google Fonts
   An initiative of Out.Vote, a project of A Great Idea.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root {
  --blue:#750786; --blue-700:#5B0668; --red:#E11453; --red-700:#B30F43;
  --ink:#252525; --muted:#5f6470; --slate:#7A7A7A; --border:#D9D9D9; --paper:#F4F7FB; --white:#fff;
  --display:'Roboto Slab',Georgia,'Times New Roman',serif;
  --body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow-md:0 4px 16px rgba(117,7,134,.10);
  --shadow-lg:0 14px 34px rgba(117,7,134,.16);
  --wrap:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--body); font-size:17px; line-height:1.6; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--blue); }
h1,h2,h3 { font-family:var(--display); font-weight:800; line-height:1.08; margin:0 0 .5em; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* red-white-blue accent bar */
.flag-bar { height:6px; border:0; margin:0; background:linear-gradient(90deg,#E30303,#F6DC1E,#008026,#5092CE,#750786,#E11453,#E30303); background-size:200% 100%; animation:flag-slide 22s linear infinite; }
@keyframes flag-slide { from { background-position:0 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .flag-bar { animation:none; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:700; font-size:16px; padding:14px 26px; border-radius:8px; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--red); color:#fff; box-shadow:var(--shadow-md); }
.btn--primary:hover { background:var(--red-700); box-shadow:var(--shadow-lg); }
.btn--blue { background:var(--blue); color:#fff; }
.btn--blue:hover { background:var(--blue-700); }
.btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.8); }
.btn--ghost:hover { background:rgba(255,255,255,.15); }
.btn--outline { background:#fff; color:var(--blue); border-color:var(--blue); }
.btn--outline:hover { background:var(--paper); }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; }
.site-header .logo img { height:38px; width:auto; }
.site-header .btn { padding:10px 20px; font-size:15px; }

/* Hero — bold diagonal block (drifting pattern) + rotating photo on the right */
.hero { position:relative; color:#fff; overflow:hidden; min-height:clamp(540px,84vh,720px); display:flex; align-items:center; }
/* Photos live in a dedicated right panel so each subject stays centered + visible */
.hero__bg { position:absolute; top:0; right:0; bottom:0; width:54%; background:#26082F; overflow:hidden; }
.hero__slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; opacity:0; will-change:opacity, transform; animation:hero-fade 18s linear infinite; animation-delay:calc(var(--i) * -6s); }
@keyframes hero-fade { 0% { opacity:0; transform:scale(1.04); } 5% { opacity:1; } 28% { opacity:1; } 33% { opacity:0; transform:scale(1.10); } 100% { opacity:0; transform:scale(1.10); } }
.hero__block { position:absolute; inset:0; width:56%; background:#3A0F52; clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.hero__block::before { content:""; position:absolute; inset:0; background:#3A0F52 url('/assets/img/pife-pattern.png') repeat; background-size:320px; background-blend-mode:luminosity; opacity:.13; animation:hero-drift 60s linear infinite; }
.hero__accent { position:absolute; top:0; bottom:0; left:56%; width:20px; background:var(--red); transform:skewX(-11deg); transform-origin:top; }
@keyframes hero-drift { from { background-position:0 0; } to { background-position:320px 540px; } }
.hero__inner { position:relative; max-width:var(--wrap); width:100%; margin:0 auto; padding:0 24px; }
.hero__text { max-width:600px; padding:72px 0; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px; color:#fff; background:var(--red); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.hero h1 { font-size:clamp(48px,7.4vw,94px); font-weight:900; line-height:.98; letter-spacing:-.015em; margin-bottom:.28em; text-shadow:0 2px 22px rgba(0,0,0,.30); }
.hero h1 .em { position:relative; white-space:nowrap; }
.hero h1 .em::after { content:""; position:absolute; left:-2px; right:-2px; bottom:.07em; height:.16em; background:var(--red); border-radius:3px; z-index:-1; }
.hero__sub { font-size:clamp(18px,2.3vw,23px); font-weight:400; max-width:520px; margin:0 0 32px; color:rgba(255,255,255,.95); }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero__eyebrow, .hero h1, .hero__sub, .hero__cta { animation:hero-in .8s cubic-bezier(.16,1,.3,1) both; }
.hero h1 { animation-delay:.07s; } .hero__sub { animation-delay:.15s; } .hero__cta { animation-delay:.23s; }
@keyframes hero-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero__slide { animation:none; opacity:0; }
  .hero__slide:first-child { opacity:1; }
  .hero__block::before { animation:none; }
  .hero__eyebrow, .hero h1, .hero__sub, .hero__cta { animation:none; }
}

/* Sections */
.section { padding:88px 0; }
.section--paper { background:var(--paper); }
.section--blue { background:var(--blue); color:#fff; }
.eyebrow { font-family:var(--body); font-weight:700; letter-spacing:.15em; text-transform:uppercase; font-size:13px; color:var(--red); margin:0 0 14px; }
.section--blue .eyebrow { color:#fff; opacity:.9; }
.section h2 { font-size:clamp(30px,4.2vw,46px); max-width:18ch; }
.lede { font-size:20px; color:var(--muted); max-width:62ch; }
.section--blue .lede { color:rgba(255,255,255,.9); }

/* Three movements — alternating image rows */
.movements { margin-top:54px; display:grid; gap:56px; }
.movement { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.movement:nth-child(even) .movement__media { order:2; }
.movement__media { position:relative; }
.movement__media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-lg); display:block; }
.movement__media::before { content:""; position:absolute; left:-16px; top:-16px; width:72px; height:72px; background:url('/assets/img/star.png') center/contain no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
.movement__text h3 { font-size:clamp(26px,3.3vw,38px); font-weight:900; margin:0 0 12px; line-height:1.08; }
.movement__text p { font-size:19px; color:var(--muted); margin:0; max-width:46ch; line-height:1.55; }

/* Share your why — 5 community tips with star-style icons */
.tips { margin-top:44px; display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.tip { text-align:center; }
.tip__icon { width:98px; height:98px; margin:0 auto 18px; border-radius:999px; background:#fff; display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.tip__icon svg { width:58px; height:58px; }
.tip h3 { font-size:17px; font-weight:800; margin:0 0 6px; color:#fff; font-family:var(--display); }
.tip p { margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.85); }

/* 10 ways — video action cards */
.action-cards { margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.action-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
.action-card__body { padding:20px 24px 24px; }
.action-card__n { font-family:var(--display); font-weight:800; font-size:13px; color:var(--red); letter-spacing:.12em; }
.action-card__body h3 { font-family:var(--display); font-size:20px; font-weight:800; margin:3px 0 8px; line-height:1.2; }
.action-card__body p { margin:0; color:var(--muted); font-size:15.5px; line-height:1.55; }
.ways-cta { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* Newsletter */
.signup { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; max-width:480px; }
.signup input[type=email] { flex:1; min-width:220px; font-family:var(--body); font-size:16px; padding:14px 16px; border-radius:8px; border:2px solid var(--border); background:#fff; color:var(--ink); }
.signup input[type=email]:focus { outline:none; border-color:var(--blue); }
.signup .btn--primary { background:var(--red); }
.act__note { font-size:14px; color:var(--muted); margin-top:12px; }

/* FAQ */
.faq__list { margin-top:34px; display:grid; gap:14px; max-width:860px; }
.faq__item { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 26px; box-shadow:var(--shadow-md); }
.faq__q { font-size:20px; font-weight:800; margin:0 0 8px; color:var(--ink); }
.faq__a { margin:0; color:#3a3a42; font-size:16.5px; line-height:1.6; font-family:var(--body); }
.faq__a a { color:var(--blue); font-weight:600; }

/* Video (in action cards) */
.video { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d2444; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.action-card { transition:transform .2s ease, box-shadow .2s ease; }
.action-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

/* Pattern border strip */
.pattern-band { height:18px; border:0; margin:0; background:#750786 url('/assets/img/pife-pattern.png') repeat; background-size:210px; background-blend-mode:luminosity; }

/* Scroll reveal (progressive enhancement — only active once JS adds .reveal-on) */
.reveal { transition:opacity .6s ease, transform .6s ease; }
.reveal-on .reveal { opacity:0; transform:translateY(20px); }
.reveal-on .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal-on .reveal{opacity:1; transform:none;} }

/* Footer */
.site-footer { position:relative; overflow:hidden; background:#1E0A2C; color:rgba(255,255,255,.72); padding:56px 0 40px; }
.site-footer::before { content:""; position:absolute; inset:0; background:#1E0A2C url('/assets/img/pife-pattern.png') repeat; background-size:440px; background-blend-mode:luminosity; opacity:.16; pointer-events:none; }
.site-footer .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.site-footer .fmark img { height:32px; width:auto; margin-bottom:16px; }
.site-footer .attrib { font-size:14.5px; line-height:1.7; }
.site-footer .attrib a { color:#fff; font-weight:600; }
.social { display:flex; gap:12px; }
.social a { width:40px; height:40px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.10); color:#fff; transition:background .15s ease; }
.social a:hover { background:var(--red); }
.social svg { width:18px; height:18px; fill:currentColor; }
.copyright { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.14); margin-top:12px; padding-top:22px; font-size:13px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-legal a { color:rgba(255,255,255,.72); margin-left:16px; }

/* Legal / prose */
.legal-hero { background:var(--blue); color:#fff; padding:64px 0 40px; }
.legal-hero h1 { font-size:clamp(34px,5vw,52px); margin:0 0 8px; }
.legal-hero p { margin:0; font-weight:500; color:rgba(255,255,255,.85); }
.legal { padding:56px 0 80px; }
.legal .prose { max-width:760px; }
.legal .prose h2 { font-size:26px; margin:44px 0 10px; padding-top:20px; border-top:1px solid var(--border); }
.legal .prose h2:first-of-type { border-top:0; padding-top:0; margin-top:8px; }
.legal .prose h3 { font-size:19px; font-weight:700; font-family:var(--body); margin:26px 0 6px; }
.legal .prose p, .legal .prose li { color:#33333a; font-size:16.5px; }
.legal .prose ul { padding-left:22px; }
.legal .prose li { margin:6px 0; }
.legal .toc { background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:8px; }
.legal .toc strong { display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.legal .toc a { display:inline-block; margin:2px 16px 2px 0; font-weight:600; text-decoration:none; }
.legal .muted { color:var(--muted); font-size:14px; }

/* Responsive */
@media (max-width:980px){
  .tips{grid-template-columns:repeat(3,1fr); gap:28px 18px;}
}
@media (max-width:860px){
  .section{padding:60px 0;}
  .action-cards{grid-template-columns:1fr;}
  .movement{grid-template-columns:1fr; gap:22px;}
  .movement:nth-child(even) .movement__media{order:0;}
  .movement__media::before{width:56px; height:56px; left:-8px; top:-8px;}
  .tips{grid-template-columns:repeat(2,1fr);}
  .site-footer .wrap{grid-template-columns:1fr;}
  /* Hero on mobile: block covers full width (keeps the pattern), photo faint behind */
  .hero{min-height:auto;}
  .hero__block{width:100%; clip-path:none; opacity:.92;}
  .hero__accent{display:none;}
  .hero__text{padding:80px 0 72px; max-width:none;}
}
@media (max-width:520px){
  .tips{grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .btn:hover{transform:none;} }