:root { --ink:#0c1e2a; --paper:#f6f3ee; --sun:#d6a449; --blue:#355b79; --line:#d9d5ce; --serif:"Libre Baskerville", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; } a { color:inherit; text-decoration:none; } .content-width { width:min(1180px, calc(100% - 64px)); margin-inline:auto; } .skip-link { position:fixed; top:-100px; left:16px; z-index:10; background:white; padding:8px 12px; } .skip-link:focus { top:16px; }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; padding:16px max(32px, calc((100% - 1180px)/2)); background:var(--paper); position:sticky; top:0; z-index:5; border-bottom:1px solid rgba(12,30,42,.12); } .brand { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:-.04em; line-height:.9; font-size:17px; } .brand-mark { display:block; width:56px; height:42px; border-radius:6px; color:transparent; background:var(--ink) url("assets/white-buffalo.svg") center/90% no-repeat; font-size:0; letter-spacing:0; } .main-nav { display:flex; gap:31px; align-items:center; font-size:14px; font-weight:600; } .main-nav>a:not(.button) { opacity:.82; } .main-nav>a:not(.button):hover { color:var(--blue); } .menu-toggle { display:none; border:0; color:var(--ink); background:transparent; font:500 13px var(--mono); text-transform:uppercase; }
.button { display:inline-flex; gap:17px; align-items:center; justify-content:center; background:var(--ink); color:white; padding:15px 20px; font-weight:600; font-size:14px; transition:.2s ease; } .button:hover { transform:translateY(-2px); background:var(--blue); } .button-small { padding:11px 15px; font-size:13px; } .button span { font-size:17px; line-height:0; } .button-light { background:var(--paper); color:var(--ink); } .button-outline { background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.75); } .button-outline:hover { color:var(--ink); background:var(--paper); } .text-link { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:3px; } .text-link span { font-size:18px; transition:.2s; } .text-link:hover span { transform:translateX(4px); } .light { color:white; }
.hero { min-height:calc(100vh - 88px); position:relative; display:grid; align-items:end; overflow:hidden; color:white; background:var(--ink); } .hero>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,14,22,.88) 0%,rgba(4,14,22,.63) 41%,rgba(4,14,22,.1) 80%),linear-gradient(0deg,rgba(4,14,22,.65),transparent 55%); } .hero-content { position:relative; padding:100px 0 92px; max-width:1180px; } .eyebrow { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin:0 0 20px; color:var(--blue); } .eyebrow.light { color:#f5d894; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); letter-spacing:-.045em; line-height:1.11; } h1 { max-width:760px; margin-bottom:28px; font-size:clamp(48px,6.4vw,88px); font-weight:400; } .hero-copy { font-size:19px; max-width:548px; margin-bottom:38px; } .hero-actions { display:flex; align-items:center; gap:26px; } .hero-index { position:absolute; bottom:30px; right:32px; font:400 11px var(--mono); color:#d4dce2; }
.intro { padding:145px 0; } .intro-grid { display:grid; grid-template-columns:1.05fr .85fr; gap:11%; } h2 { font-size:clamp(34px,4vw,58px); font-weight:400; margin-bottom:26px; } .intro-grid>h2 { max-width:600px; } .intro-grid p { color:#3f4b53; font-size:17px; } .intro-grid .text-link { margin-top:11px; }
.issues { background:#e9e4da; padding:125px 0 128px; } .section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:55px; } .section-heading h2 { max-width:620px; margin:0; } .section-heading>p { max-width:345px; margin:0 0 7px; color:#4d565a; } .issue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfc8ba; } .issue-card { min-height:385px; padding:29px; background:var(--paper); display:flex; flex-direction:column; } .issue-card.featured { background:var(--ink); color:white; } .card-number,.project-count { font:500 11px var(--mono); letter-spacing:.08em; color:var(--sun); } .issue-card h3 { font-size:30px; font-weight:400; margin:58px 0 14px; } .issue-card>p:not(.card-number) { color:#526069; max-width:285px; } .featured>p:not(.card-number) { color:#d0d8dd; } .issue-card .text-link { margin-top:auto; align-self:flex-start; }
.projects { padding:145px 0; } .project-heading { margin-bottom:28px; } .project-heading .text-link { margin-bottom:12px; white-space:nowrap; } .project-card { color:white; min-height:440px; padding:31px; position:relative; overflow:hidden; display:grid; grid-template-columns:30% 1fr; margin-bottom:18px; background:linear-gradient(115deg,#243c4c,#172a36); } .project-card::after { content:""; position:absolute; inset:0; opacity:.48; background:radial-gradient(circle at 77% 50%, #d6a449 0, transparent 10%),radial-gradient(circle at 82% 54%, #668aa0 0, transparent 33%); } .project-two { background:#2e3e2f; } .project-two::after { background:radial-gradient(circle at 82% 45%,#efd181 0,transparent 8%),radial-gradient(circle at 82% 45%,#958642 0,transparent 27%),linear-gradient(100deg,transparent 30%,rgba(5,15,10,.6)); } .project-type,.project-content { position:relative; z-index:1; } .project-type { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:#f5d894; } .project-content { align-self:end; max-width:650px; } .project-content h3 { margin:9px 0 17px; font-size:clamp(33px,4vw,55px); font-weight:400; } .project-content>p:not(.project-count) { max-width:620px; color:#e0e8e9; font-size:16px; } .project-content .button { margin-top:14px; }
.support { padding:115px 0; color:white; background:var(--blue); } .support-grid { display:grid; grid-template-columns:1fr 1fr; gap:11%; } .support h2 { max-width:500px; } .support-grid>div:last-child { padding-top:40px; } .support-grid>div:last-child>p { max-width:470px; color:#e3ebee; font-size:17px; margin-bottom:30px; }
.site-footer { background:var(--ink); color:#e4e9e9; padding:68px 0 20px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:40px; padding-bottom:70px; } .footer-brand .brand-mark { background-color:transparent !important; color:transparent !important; background-position:center; background-size:contain; background-repeat:no-repeat; } .footer-label { font:500 11px var(--mono); color:#9facb3; text-transform:uppercase; letter-spacing:.08em; margin-bottom:13px; } .footer-grid>div>a { display:block; margin:7px 0; font-size:14px; } .footer-grid>div>a:hover { color:#f5d894; } .footer-bottom { border-top:1px solid rgba(228,233,233,.18); padding-top:18px; display:flex; justify-content:space-between; font:400 11px var(--mono); color:#aab7bd; }
.page-hero { background:var(--ink); color:white; padding:125px 0 95px; position:relative; overflow:hidden; } .page-hero::after { content:""; position:absolute; width:500px; height:500px; right:-140px; top:-120px; border:1px solid rgba(214,164,73,.4); border-radius:50%; box-shadow:0 0 0 52px rgba(214,164,73,.06),0 0 0 104px rgba(214,164,73,.04); } .page-hero .eyebrow { position:relative; z-index:1; } .page-hero h1 { position:relative; z-index:1; max-width:800px; margin:0; font-size:clamp(48px,6vw,80px); } .page-hero p:last-child { position:relative; z-index:1; max-width:610px; margin:28px 0 0; color:#cbd7dc; font-size:18px; }
.issue-detail { padding:95px 0; border-bottom:1px solid var(--line); } .issue-detail-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:8%; } .issue-detail h2 { margin:0; font-size:clamp(34px,4.5vw,58px); } .issue-detail-copy { max-width:700px; font-size:18px; color:#3f4b53; } .issue-detail-copy strong { color:var(--ink); } .issue-note { margin-top:32px; padding:18px 20px; border-left:3px solid var(--sun); background:#ebe5d9; font-size:14px; color:#435057; }
.process { background:#e9e4da; padding:105px 0; } .process-list { list-style:none; padding:0; margin:44px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; } .process-list li { border-top:1px solid #a9a298; padding-top:15px; } .process-list b { display:block; font:400 26px var(--serif); margin:10px 0 8px; } .process-list span { font-size:14px; color:#4a565d; }
.project-page { padding:90px 0 120px; } .project-detail { display:grid; grid-template-columns:1fr 1.15fr; min-height:590px; margin-bottom:30px; background:var(--ink); color:white; } .project-detail.visual-light { background:#314432; } .project-detail-visual { min-height:310px; background:linear-gradient(135deg,#172935,#355f72 50%,#d6a449); position:relative; overflow:hidden; } .project-detail-visual::before { content:""; position:absolute; width:58%; height:58%; border:20px solid rgba(255,255,255,.12); transform:rotate(45deg); right:9%; top:22%; } .visual-light .project-detail-visual { background:radial-gradient(circle at 55% 43%,#f1d681 0 2%,transparent 2.6%),radial-gradient(circle at 25% 65%,#f1d681 0 1.4%,transparent 2%),linear-gradient(135deg,#1f392a,#60804b); } .project-detail-content { padding:54px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .project-detail-content h2 { margin:12px 0 20px; font-size:clamp(36px,4vw,60px); } .project-detail-content p:not(.eyebrow) { max-width:550px; color:#d7e0e2; font-size:17px; } .project-detail-content .button { margin-top:14px; }
.support-page { padding:90px 0 125px; } .support-options { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:48px 0 70px; } .support-option { padding:30px; min-height:250px; border:1px solid var(--line); background:#fdfbf7; display:flex; flex-direction:column; } .support-option h2 { font-size:29px; margin:15px 0 10px; } .support-option p { color:#4e5b61; } .support-option .text-link { align-self:flex-start; margin-top:auto; } .donate-panel { display:grid; grid-template-columns:1.1fr .9fr; background:#e9e4da; } .donate-panel>div { padding:48px; } .donate-panel h2 { margin:0 0 18px; } .donate-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0 12px; } .amount { border:1px solid #a79f93; background:transparent; padding:14px; color:var(--ink); font:500 15px var(--mono); cursor:pointer; } .amount:hover,.amount.selected { background:var(--ink); color:white; } .donation-note { background:var(--ink); color:#dce4e5; display:flex; flex-direction:column; justify-content:center; } .donation-note .eyebrow { color:#f5d894; } .donation-note p { max-width:360px; }
.contact-page { padding:90px 0 125px; } .contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:11%; } .contact-grid h2 { margin-bottom:20px; } .contact-grid>div>p { color:#4b595e; font-size:17px; max-width:390px; } .contact-list { list-style:none; padding:10px 0 0; } .contact-list li { border-bottom:1px solid var(--line); padding:14px 0; font-size:15px; } .contact-list span { display:block; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:3px; } .contact-form { display:grid; gap:18px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .contact-form label { font-size:13px; font-weight:600; } .contact-form input,.contact-form textarea,.contact-form select { display:block; width:100%; border:1px solid #c5c1b8; background:#fcfaf6; padding:13px; margin-top:7px; font:400 15px var(--sans); color:var(--ink); border-radius:0; } .contact-form textarea { min-height:140px; resize:vertical; } .form-status { min-height:20px; margin:0; font-size:14px; color:var(--blue); }
.project-single { padding:90px 0 125px; } .breadcrumb { display:inline-flex; gap:8px; align-items:center; color:var(--blue); font:500 12px var(--mono); margin-bottom:55px; } .project-single-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:9%; align-items:start; } .project-single h1 { color:var(--ink); font-size:clamp(44px,6vw,76px); margin:0 0 30px; } .project-single .lead { color:#435159; font-size:20px; line-height:1.6; max-width:730px; } .project-statements { margin:36px 0 0; border-top:1px solid var(--line); } .project-statements div { padding:19px 0; border-bottom:1px solid var(--line); } .project-statements span { display:block; font:500 10px var(--mono); color:var(--blue); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; } .project-statements p { margin:0; color:#3f4d52; } .project-aside { background:var(--ink); color:white; padding:31px; position:sticky; top:110px; } .project-aside .eyebrow { color:#f5d894; } .project-aside h2 { font-size:30px; margin:12px 0 18px; } .project-aside p { color:#d2dcdf; font-size:15px; } .project-aside .button { width:100%; margin-top:15px; } .project-principles { background:#e9e4da; padding:100px 0; } .project-principles h2 { max-width:600px; } .principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfc8ba; margin-top:42px; } .principle-grid div { min-height:190px; padding:25px; background:var(--paper); } .principle-grid h3 { font:400 25px var(--serif); margin:11px 0 8px; } .principle-grid p { margin:0; color:#536067; font-size:14px; }
@media (max-width:760px) { .content-width { width:min(100% - 40px, 1180px); } .site-header { min-height:72px; padding:12px 20px; } .main-nav { display:none; position:absolute; top:71px; left:0; right:0; padding:20px; gap:18px; flex-direction:column; align-items:flex-start; background:var(--paper); border-bottom:1px solid var(--line); } .main-nav.open { display:flex; } .menu-toggle { display:block; } .hero { min-height:650px; } .hero-content { padding:100px 0 63px; } .hero-copy { font-size:16px; } .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; } .hero-index { right:20px; } .intro,.projects { padding:88px 0; } .intro-grid,.support-grid { grid-template-columns:1fr; gap:16px; } .issues { padding:82px 0; } .section-heading { align-items:start; flex-direction:column; gap:14px; margin-bottom:34px; } .issue-grid { grid-template-columns:1fr; } .issue-card { min-height:310px; } .issue-card h3 { margin-top:30px; } .project-card { min-height:520px; grid-template-columns:1fr; padding:24px; } .project-content { align-self:end; } .support { padding:80px 0; } .support-grid>div:last-child { padding-top:0; } .footer-grid { grid-template-columns:1fr; gap:26px; padding-bottom:45px; } .footer-bottom { gap:15px; flex-direction:column; } }
@media (max-width:760px) { .page-hero { padding:90px 0 72px; } .issue-detail { padding:72px 0; } .issue-detail-grid,.project-detail,.donate-panel,.contact-grid { grid-template-columns:1fr; gap:22px; } .process { padding:75px 0; } .process-list,.support-options { grid-template-columns:1fr; gap:18px; } .project-detail-content,.donate-panel>div { padding:31px 24px; } .project-detail { min-height:0; } .project-detail-content { min-height:430px; } .support-page,.contact-page,.project-page { padding:70px 0 85px; } .form-row { grid-template-columns:1fr; gap:18px; } }
@media (max-width:760px) { .project-single { padding:70px 0 85px; } .project-single-grid { grid-template-columns:1fr; gap:40px; } .project-aside { position:static; } .principle-grid { grid-template-columns:1fr; } .project-principles { padding:75px 0; } }
.issues-full { padding:88px 0 125px; } .issues-intro { max-width:830px; color:#405057; font-size:18px; margin:0 0 50px; } .issue-accordion { border-top:1px solid #bcb7ae; } .issue-accordion details { border-bottom:1px solid #bcb7ae; } .issue-accordion summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:23px 0; font:400 clamp(23px,3vw,35px) var(--serif); } .issue-accordion summary::-webkit-details-marker { display:none; } .issue-accordion summary::after { content:'+'; color:var(--blue); font:400 34px var(--sans); line-height:.7; } .issue-accordion details[open] summary::after { content:'−'; } .issue-accordion-body { max-width:880px; padding:0 0 38px; color:#3c4b51; font-size:16px; line-height:1.72; white-space:pre-line; } .issue-accordion-body.empty { color:#758187; font-style:italic; }
.project-directory { padding:86px 0 120px; } .directory-heading { text-align:center; margin-bottom:45px; } .directory-heading h1 { color:var(--ink); margin:0 0 20px; } .directory-filters { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; } .filter-button { border:1px solid var(--blue); color:var(--blue); background:transparent; padding:10px 18px; font:500 14px var(--sans); border-radius:22px; } .source-project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .source-project-card { border:1px solid #abb0ac; background:#fffdfa; overflow:hidden; display:flex; flex-direction:column; } .source-project-card img { display:block; width:100%; height:205px; object-fit:cover; } .source-project-card>div { padding:22px; display:flex; flex-direction:column; flex:1; } .source-project-card h2 { font-size:30px; margin:0 0 13px; } .source-project-card p { color:#526067; margin-bottom:22px; } .source-project-card .button { margin-top:auto; } .archived-control { display:block; margin:30px auto 0; } .project-workflow { background:#e9e4da; padding:100px 0; } .workflow-intro { text-align:center; max-width:750px; margin:0 auto 44px; } .workflow-intro h2 { margin-bottom:16px; } .workflow-options { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .workflow-option { background:var(--paper); padding:32px; border-top:4px solid var(--sun); } .workflow-option h3 { font-size:31px; margin:0 0 10px; } .workflow-option p { color:#526067; } .workflow-step { font:500 11px var(--mono); color:var(--blue); margin:25px 0 0; text-align:center; }.project-tools { padding:100px 0; } .tool-block { border-top:1px solid var(--line); padding:42px 0; } .tool-block>p { max-width:800px; color:#4c5a60; }.parameter-grid,.idea-grid,.phase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }.parameter-grid div,.idea-card,.phase-card { background:#fdfbf7; border:1px solid var(--line); padding:23px; }.parameter-grid h3,.idea-card h3,.phase-card h3 { font:400 23px var(--serif); margin:8px 0; }.parameter-grid p,.idea-card p,.phase-card p { margin:0; color:#536168; font-size:14px; }.idea-card .card-number { margin-bottom:20px; }.idea-status { display:inline-block; margin-top:20px; border:1px solid var(--blue); padding:5px 9px; color:var(--blue); font:500 11px var(--mono); }.phase-grid { grid-template-columns:repeat(4,1fr); }.phase-card .card-number { color:var(--blue); }
@media (max-width:760px) { .source-project-grid,.workflow-options,.parameter-grid,.idea-grid,.phase-grid { grid-template-columns:1fr; }.project-directory,.project-tools { padding:70px 0 85px; }.project-workflow { padding:75px 0; } }

/* On the dark footer, place the Wix logo on the same light canvas used by the header. */
.site-footer .footer-brand { width:max-content; padding:7px 10px 7px 6px; background:var(--paper); color:var(--ink); border-radius:2px; }
.site-footer .footer-brand .brand-mark { background-color:var(--paper) !important; }

/* Title case for the shared navigation, including pages with a cached script. */
.main-nav a[href="issues.html"],.site-footer a[href="issues.html"] { text-transform:capitalize; }
.site-footer .footer-grid > div:nth-of-type(2) > a:first-of-type,.site-footer .footer-grid > div:nth-of-type(2) > a:nth-of-type(2) { font-size:0; }
.site-footer .footer-grid > div:nth-of-type(2) > a:first-of-type::after { content:'Contact Us'; font-size:14px; }
.site-footer .footer-grid > div:nth-of-type(2) > a:nth-of-type(2)::after { content:'Start a Project'; font-size:14px; }

.agency-analysis-note { margin:18px 0 28px; padding:18px 20px; border-left:3px solid var(--sun); background:#eee8dc; color:#3f5056; line-height:1.6; }

.independent-project-notice { margin-top:-34px; margin-bottom:36px; padding:20px 24px; border-left:4px solid var(--sun); background:#eee8dc; color:#405057; line-height:1.65; }
.independent-project-notice p:last-child { margin:8px 0 0; }

/* Keep the header mark recognizable and identical to the footer mark. */
.site-header .brand-mark { background-size:contain !important; background-position:center; }