/* ==========================================================================
   Partnership for San Francisco — main.css
   Source: Figma "PfSF" › page "Final #2"

   SCALING
   The Figma frames are 3267px wide and desktop only. Every size here is in rem
   with 1rem = 100 Figma px, and the root font-size tracks the window width, so
   the whole page scales proportionally. To convert a Figma value: px / 100 = rem.
   ========================================================================== */

:root {
  /* Colour */
  --color-orange: #f04a00;       /* brand accent, footer */
  --color-black: #000;
  --color-ink: #1a1a1a;
  --color-white: #fff;
  --color-page: #fefefe;         /* Figma style "Neutral/0" */
  --color-card-blue: #e5eff8;    /* link cards above the footer */
  --color-footer-muted: #fbdfcb;

  /* Type */
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Layout (Figma px / 100) */
  --content-w: 26.465rem;        /* header and footer container */
}

html {
  font-size: calc(var(--page-w, 100vw) / 32.67);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: .5104rem;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: .04rem solid var(--color-orange); outline-offset: .06rem; }

.accent { color: var(--color-orange); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .2rem; top: -2rem; z-index: 10;
  padding: .12rem .2rem; background: var(--color-white); font-size: .34rem;
}
.skip-link:focus { top: .2rem; }

/* Header -------------------------------------------------------------------- */
.site-header {
  display: flex; justify-content: center;
  padding: .37808rem;
  background: var(--color-white);
}
.site-header__inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  width: var(--content-w);
  padding: .37808rem .68054rem;
}
.site-logo { display: block; flex: none; width: 4.53919rem; height: 1.19532rem; }
.site-logo img { width: 100%; height: 100%; }

.site-nav ul { display: flex; gap: .45369rem; padding: .18904rem 0; }
.site-nav a {
  display: block; padding: .22685rem;
  font-size: .37808rem; line-height: .404rem; letter-spacing: .002828rem;
  white-space: nowrap;
}
.site-nav li:last-child a { width: 4.1537rem; }   /* fixed-width text box in the Figma */

/* Hero banner (three photos, 2.5s each with a 0.7s crossfade, looping) ------------- */
.hero { position: relative; height: 11.7rem; overflow: hidden; background: var(--color-white); }
/* Three stacked photos; the 2nd and 3rd fade in and out over the 1st. Each photo fills the full width and the
   11.7rem box crops it; size and vertical position per page are taken from Figma. */
.hero__slide {
  position: absolute; left: 0; top: calc(-1 * var(--hero-shift, 0rem));
  width: var(--hero-vw, 100%); height: var(--hero-vh, 12.6086rem); max-width: none;
  object-fit: cover; object-position: 50% 0;
}
.hero__slide--2, .hero__slide--3 { opacity: 0; animation: 9.6s linear infinite both; will-change: opacity; }
.hero__slide--2 { animation-name: hero-slide-2; }
.hero__slide--3 { animation-name: hero-slide-3; }
/* 0-2.5s photo 1 | 2.5-3.2s fade to 2 | 3.2-5.7s photo 2 | 5.7-6.4s fade to 3 | 6.4-8.9s photo 3 | 8.9-9.6s fade back to 1 */
@keyframes hero-slide-2 {
  0%, 26.0417% { opacity: 0; animation-timing-function: cubic-bezier(.46, .4, .54, .6); }
  33.3333%, 75% { opacity: 1; }
  75.001%, 100% { opacity: 0; }
}
@keyframes hero-slide-3 {
  0%, 59.375% { opacity: 0; animation-timing-function: cubic-bezier(.46, .4, .54, .6); }
  66.6667% { opacity: 1; }
  92.7083% { opacity: 1; animation-timing-function: cubic-bezier(.46, .4, .54, .6); }
  100% { opacity: 0; }
}
.page-home .hero { --hero-shift: .14rem; }
.page-about .hero { --hero-shift: .91rem; }
.page-members .hero { --hero-shift: .42rem; --hero-vw: 32.78rem; --hero-vh: 12.651rem; }   /* photo is 11px wider than the page in Figma */
.page-insights .hero { --hero-shift: .564071rem; --hero-vh: 12.613rem; }
.page-metrics .hero { --hero-shift: .744071rem; --hero-vh: 12.613rem; }

/* Page title ---------------------------------------------------------------- */
.page-title {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  height: var(--title-h, 2.65rem);
  background: var(--color-white);
  font-weight: 700; font-size: .845rem; line-height: .917rem; letter-spacing: .0032rem;
  text-align: center; white-space: nowrap;
}
.page-home .page-title { --title-h: 3.47074rem; display: block; padding-top: .81825rem; }
.page-about .page-title { --title-h: 2.67rem; }
.page-members .page-title { --title-h: 2.42rem; }
.page-metrics .page-title,
.page-insights .page-title { --title-h: 2.42rem; color: var(--color-ink); letter-spacing: 0; }

/* Intro paragraph ----------------------------------------------------------- */
.lede-section {
  height: var(--lede-h); padding-top: var(--lede-pt);
  background: var(--color-white);
}
.lede {
  width: var(--lede-w, 24.159rem); margin: 0 auto;
  font-size: .5104rem; line-height: .73725rem; text-align: center;
}
.lede--left { width: 24.44rem; margin: 0 0 0 4.12rem; text-align: left; font-size: .50868rem; line-height: .73477rem; }
.lede--left p + p { margin-top: .73477rem; }
.page-about .lede-section { --lede-h: 5.63rem; --lede-pt: .606rem; }
.page-members .lede-section { --lede-h: 2.72083rem; --lede-pt: .617rem; --lede-w: 26.92rem; }
.page-insights .lede-section { --lede-h: 3.84rem; --lede-pt: .806rem; --lede-w: 25.25rem; }

/* Home: "Our Mission" / "Our Focus" ------------------------------------------ */
.statement { background: var(--color-white); }
.statement__label {
  height: 1.43rem; padding-top: .226rem;
  color: var(--color-orange);
  font-weight: 800; font-size: .45rem; line-height: .96rem; letter-spacing: .02rem;
  text-align: center; text-transform: uppercase;
}
.statement--mission { height: 5.91rem; }
.statement--mission .lede { padding-top: .506rem; }
.statement--focus { height: 3.24rem; }
.statement--focus .lede { padding-top: .166rem; }

/* Section heading (orange, uppercase) --------------------------------------- */
.section-heading {
  color: var(--color-orange);
  font-weight: 800; font-size: .69985rem; line-height: 1.158rem;
  text-transform: uppercase; white-space: nowrap;
}

/* Who We Are ---------------------------------------------------------------- */
.leadership { height: 23.68rem; padding: 1.641rem 0 0 4.78rem; background: var(--color-white); }
.leadership__group--team { margin-top: 1.097rem; }
.people {
  display: grid; grid-template-columns: 10.47rem 10.47rem;
  margin-top: 1.099rem;
  font-size: .52603rem; line-height: .63123rem;
}
.people--team { margin-top: .714rem; }
.person { margin-bottom: 2.374rem; }
.person:nth-last-child(-n+2) { margin-bottom: 0; }
.person--solo { grid-column: 1 / -1; margin-bottom: 1.2255rem; }
.person--nudge { margin-top: .111rem; }   /* sits 11px lower than its neighbour in the Figma */
.person span { display: block; }
.person__name { font-weight: 700; }
.person__org { font-weight: 700; color: var(--color-orange); }

/* Members ------------------------------------------------------------------- */
.members { padding: .466rem 0 .305rem; }
.members .section-heading { margin-left: 4.3458rem; font-size: .69738rem; line-height: 1.15393rem; }
.members__grid {
  display: grid; grid-template-columns: 7.887rem 7.978rem 1fr;
  margin-top: 1.8395rem; padding-left: 4.428rem;
  background: var(--color-white);
}
.member { height: 3.7815rem; }
.member span { display: block; }
.member__name { font-weight: 700; font-size: .54483rem; }
.member__role { margin-top: .195rem; font-size: .46471rem; }
.member__org { max-width: 7.02rem; margin-top: .082rem; font-weight: 700; font-size: .46471rem; color: var(--color-orange); }
.member--two-line-role .member__org { margin-top: .171rem; }

/* San Francisco Metrics ------------------------------------------------------ */
.dashboard { display: flex; align-items: center; justify-content: center; height: 34.22rem; background: var(--color-white); }
.dashboard img { width: 29.69rem; height: 33.12rem; max-width: none; }
.dashboard-note {
  display: flex; align-items: center; justify-content: center;
  height: 1.01rem; background: var(--color-white);
  font-size: .51016rem; line-height: .73689rem;
}

/* Link cards above the footer ----------------------------------------------- */
.cta { height: 3.55497rem; overflow: hidden; background: var(--color-white); }
.cta__list { display: flex; gap: .3565rem; padding: 1.1444rem 0 0 4.5237rem; }
.cta-card {
  display: block; width: 5.60247rem; height: 2.59751rem; padding: .1537rem .277rem 0;
  background: var(--color-card-blue);
}
.cta__list li:first-child .cta-card { width: 5.6534rem; margin-right: .051rem; }   /* first card is 5px wider in the Figma */
.cta-card__title {
  display: block;
  color: var(--color-orange);
  font-weight: 700; font-size: .36rem; line-height: .79575rem; letter-spacing: .018904rem;
  text-transform: uppercase; white-space: nowrap;
}
.cta-card__text { display: block; width: 4.56rem; margin: .026rem 0 0 .012rem; font-size: .34027rem; line-height: 1.257; }

/* Footer -------------------------------------------------------------------- */
.site-footer {
  display: flex; justify-content: center;
  padding: .37808rem;
  background: var(--color-orange); color: var(--color-white);
}
.site-footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  width: var(--content-w); padding: .75615rem;
}
.site-footer__name { font-weight: 700; font-size: .28356rem; line-height: .32136rem; letter-spacing: .034888rem; text-transform: uppercase; }
.site-footer__meta { font-size: .26465rem; line-height: .3185rem; text-align: right; }
.site-footer__meta a { font-style: italic; }
.site-footer__copyright { color: var(--color-footer-muted); }