/* Creative Reach — shared design system. Source: Figma Foundation / cr-tokens. Linked by every page. Fonts are loaded per-page in . */ :root{ --cr-green-core:#20402F; --cr-green-deep:#16301F; --cr-green-tint:#DCE5DD; --cr-cream-core:#F4EDE0; --cr-cream-deep:#E9DFCC; --cr-brick-core:#B4552D; --cr-brick-text:#8F3F1E; --cr-gold-core:#D9A441; --cr-indigo:#2E4270; --cr-ink-core:#241E1A; --radius:14px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ font-family:'Public Sans',system-ui,sans-serif; background:var(--cr-cream-core); color:var(--cr-ink-core); line-height:1.6;font-size:1rem; -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:var(--cr-brick-text)} a:focus-visible,button:focus-visible{outline:3px solid var(--cr-brick-core);outline-offset:3px;border-radius:4px} .on-green a:focus-visible,.on-green button:focus-visible{outline-color:var(--cr-gold-core)} .wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem} h1,h2{font-family:'Fraunces',serif;font-variation-settings:'SOFT' 0,'WONK' 0;line-height:1.1} h1{font-weight:900;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0} h2{font-weight:600;font-variation-settings:'opsz' 40,'SOFT' 0,'WONK' 0;font-size:clamp(1.6rem,4.5vw,2rem);margin-bottom:.75rem} h3{font-family:'Fraunces',serif;font-weight:600;font-variation-settings:'opsz' 40,'SOFT' 0,'WONK' 0;line-height:1.12} section{padding:3rem 0} p + p{margin-top:1rem} .eyebrow{font-family:'Public Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem} .data{font-family:'Space Grotesk',sans-serif;font-weight:500;font-variant-numeric:tabular-nums} /* shared-REA stacked wordmark: Fraunces 900 caps, line gap .98, REACH indent .6705em */ .cr-wordmark{font-family:'Fraunces',serif;font-weight:900;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;text-transform:uppercase;line-height:.98;letter-spacing:0;color:var(--cr-green-core);text-decoration:none;display:inline-block;text-align:left} .cr-wordmark .l2{display:block;padding-left:.6705em} .cr-wordmark em{font-style:normal;color:var(--cr-brick-core)} .on-green .cr-wordmark,.cr-wordmark.reversed{color:var(--cr-cream-core)} .on-green .cr-wordmark em,.cr-wordmark.reversed em{color:var(--cr-gold-core)} /* Signature move: wordmark arrival. The stacked mark rises and settles as one, then REA warms green->brick. Keeps .l2 as display:block so the lockup stays stacked. */ .hero .cr-wordmark.animate{opacity:0;transform:translateY(.3em);animation:cr-rise .8s cubic-bezier(.2,.7,.2,1) forwards} .hero .cr-wordmark.animate em{color:var(--cr-green-core);animation:cr-warm .6s ease forwards;animation-delay:.55s} @keyframes cr-rise{to{opacity:1;transform:translateY(0)}} @keyframes cr-warm{to{color:var(--cr-brick-core)}} /* CR monogram (small mark) */ .cr-mono{font-family:'Fraunces',serif;font-weight:900;font-variation-settings:'opsz' 40,'SOFT' 0,'WONK' 0;font-size:1.5rem;text-decoration:none;letter-spacing:.01em} .cr-mono .c{color:var(--cr-green-core)} .cr-mono .r{color:var(--cr-brick-core)} .pattern-strip{display:block;width:100%;height:26px;object-fit:cover;object-position:top} /* Temporary campaign banner */ .banner{background:var(--cr-green-deep);color:var(--cr-cream-core);padding:.8rem 0;font-size:.95rem} .banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .banner strong{font-weight:700} .banner a{font-family:'Public Sans',sans-serif;font-weight:800;font-size:.85rem;white-space:nowrap;background:var(--cr-gold-core);color:var(--cr-ink-core);text-decoration:none;padding:.45rem .9rem;border-radius:999px} /* Top nav */ .topbar{border-bottom:1px solid var(--cr-cream-deep);padding:1rem 0} nav.site{display:flex;align-items:center;justify-content:space-between;gap:1rem} nav.site .navlinks{display:flex;align-items:center;gap:1.2rem} nav.site a.navlink{font-weight:700;font-size:.9rem;color:var(--cr-brick-text);text-decoration:none} nav.site a.navlink:hover{text-decoration:underline} /* Hero */ .hero{padding:4.5rem 0 3.25rem} .hero .cr-wordmark{font-size:clamp(2.6rem,9vw,4.2rem)} .hero .tagline{font-family:'Fraunces',serif;font-weight:600;font-variation-settings:'opsz' 40,'SOFT' 0,'WONK' 0;font-size:clamp(1.3rem,3.5vw,1.7rem);color:var(--cr-green-core);margin-top:1.4rem} .hero p.lede{max-width:37rem;margin-top:.9rem;font-size:1.05rem} /* Centered hero variant (home) */ .hero-center .wrap{text-align:center} .hero-center .lede{margin-left:auto;margin-right:auto} /* Tagline initials spell REA: brick, left-aligned into a centered column */ .hero-center .tagline{width:fit-content;margin-left:auto;margin-right:auto;text-align:left} .tagline .ti{color:var(--cr-brick-core)} /* Section intro */ .section-intro{max-width:38rem;margin-bottom:1.6rem} .section-intro .eyebrow{color:var(--cr-brick-text)} .section-intro h2{margin-top:.5rem} /* Pillar cards */ .pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem} .pillar-card{display:flex;flex-direction:column;gap:.55rem;background:var(--cr-cream-core);border:1.5px solid var(--cr-cream-deep);border-radius:var(--radius);padding:1.4rem;text-decoration:none;color:var(--cr-ink-core);transition:border-color .15s ease,transform .15s ease} .pillar-card:hover,.pillar-card:focus-visible{border-color:var(--cr-green-core);transform:translateY(-2px)} .pillar-card .idxrow{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem} .pillar-card .idx{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.8rem;color:var(--cr-brick-text);font-variant-numeric:tabular-nums} .pillar-card .kind{font-family:'Public Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;color:var(--cr-green-core)} .pillar-card h3{font-size:1.35rem} /* Each product wears its own brand type */ @font-face{font-family:'De Bambeet';src:url('/assets/fonts/de-bambeet.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} .pillar-card[href="/juneteenth"] h3{font-family:'De Bambeet','Rozha One',Georgia,serif;font-weight:400;font-size:1.7rem;line-height:1.16} .pillar-card[href="/calltime"] h3{font-family:'Bungee',sans-serif;font-weight:400;font-size:1.1rem;letter-spacing:-.005em;color:#F4F1EC} .pillar-card[href="/director"] h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:1.2rem;letter-spacing:-.01em;line-height:1.14} /* Each square wears its own brand's colors */ .pillar-card[href="/juneteenth"]{background:#efe2c9;border-color:#dcc79c;color:#3a2110} .pillar-card[href="/juneteenth"] .idx{color:#8a5a24} .pillar-card[href="/juneteenth"] .kind{color:#5c3a17} .pillar-card[href="/juneteenth"] .go{color:#8a5a24} .pillar-card[href="/juneteenth"]:hover,.pillar-card[href="/juneteenth"]:focus-visible{border-color:#472513} .pillar-card[href="/calltime"]{background:#18161c;border-color:#2e2b34;color:#c9c6cf} .pillar-card[href="/calltime"] .idx{color:#E0301E} .pillar-card[href="/calltime"] .kind{color:#E0301E} .pillar-card[href="/calltime"] .go{color:#E0301E} .pillar-card[href="/calltime"]:hover,.pillar-card[href="/calltime"]:focus-visible{border-color:#E0301E} .pillar-card[href="/young-artists"]{background:var(--cr-green-tint);border-color:#c4d3bf;color:#20402F} .pillar-card[href="/young-artists"] .idx{color:#4a6b4e} .pillar-card[href="/young-artists"] .kind{color:#20402F} .pillar-card[href="/young-artists"] .go{color:#2f5540} .pillar-card[href="/young-artists"]:hover,.pillar-card[href="/young-artists"]:focus-visible{border-color:#20402F} .pillar-card[href="/director"]{background:#ECE4D6;border-color:#ddd1bf;color:#1C1815} .pillar-card[href="/director"] .idx{color:#7E2B22} .pillar-card[href="/director"] .kind{color:#7E2B22} .pillar-card[href="/director"] .go{color:#7E2B22} .pillar-card[href="/director"]:hover,.pillar-card[href="/director"]:focus-visible{border-color:#7E2B22} .pillar-card p{font-size:.95rem} .pillar-card .go{margin-top:auto;font-weight:700;font-size:.85rem;color:var(--cr-brick-core)} .pillar-card:hover .go{text-decoration:underline} /* Prose blocks (About) */ .prose{max-width:38rem} .prose h2{margin-top:2.2rem} .prose h2:first-child{margin-top:0} .prose p{margin-top:1rem} .prose .lead{font-size:1.15rem;color:var(--cr-green-core)} /* Campaign band */ .campaign{background:var(--cr-green-tint);border-top:1px solid var(--cr-cream-deep);border-bottom:1px solid var(--cr-cream-deep);padding:3rem 0} .campaign .eyebrow{color:var(--cr-green-core)} .campaign h2{margin:.6rem 0 .8rem} .campaign p{max-width:36rem} .pills{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0 1.6rem} .pill{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.85rem;font-variant-numeric:tabular-nums;padding:.4rem .8rem;border-radius:999px;border:1.5px solid var(--cr-green-core);color:var(--cr-green-core)} .pill.hot{background:var(--cr-green-core);color:var(--cr-cream-core);font-weight:700} /* Buttons */ .btn{display:inline-block;font-family:'Public Sans',sans-serif;font-weight:800;font-size:1.125rem;text-decoration:none;background:var(--cr-brick-core);color:var(--cr-cream-core);padding:.95rem 1.7rem;border-radius:12px;transition:transform .12s ease} .btn:active{transform:scale(.98)} /* Contact band (on green) */ .contact{background:var(--cr-green-core);color:var(--cr-cream-core);padding:3.4rem 0} .contact .eyebrow{color:var(--cr-gold-core)} .contact h2,.contact p{color:var(--cr-cream-core)} .contact p{max-width:34rem} .contact .lines{margin-top:1.3rem;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.05rem;line-height:2} .contact .lines a{color:var(--cr-cream-core);text-decoration:none;border-bottom:1px solid var(--cr-gold-core)} /* Footer */ footer{padding:2.6rem 0 3rem;font-size:.9rem} footer p{margin-top:.6rem;color:var(--cr-brick-text)} footer nav.foot{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:1rem 0} footer nav.foot a{color:var(--cr-brick-text);text-decoration:none;font-weight:700;font-size:.85rem} footer nav.foot a:hover{text-decoration:underline} footer .entity{color:var(--cr-ink-core);opacity:.75} /* Pillar pages ("one house, distinct rooms"): each page sets --accent */ .pillar-hero{padding:3.5rem 0 0} .pillar-hero .eyebrow{color:var(--accent,var(--cr-brick-text))} .pillar-hero h1{font-size:clamp(2.2rem,7vw,3.4rem);margin:.4rem 0 0} /* Pillar page titles wear their brand's type */ .pillar-hero h1.t-tjs{font-family:'De Bambeet','Rozha One',Georgia,serif;font-size:clamp(2.6rem,8vw,4.2rem);letter-spacing:.01em} .pillar-hero h1.t-calltime{font-family:'Bungee',sans-serif;font-size:clamp(1.9rem,5.5vw,2.7rem);letter-spacing:-.01em} .pillar-hero h1.t-director{font-family:'Archivo Black',sans-serif;font-size:clamp(2rem,6vw,3rem);letter-spacing:-.01em} .accent-rule{width:3.5rem;height:4px;background:var(--accent,var(--cr-brick-core));border-radius:2px;margin:1.1rem 0 0} .btn-accent{display:inline-block;font-family:'Public Sans',sans-serif;font-weight:800;font-size:1.05rem;text-decoration:none;background:var(--accent,var(--cr-brick-core));color:var(--cr-cream-core);padding:.9rem 1.6rem;border-radius:12px;transition:transform .12s ease} .btn-accent:active{transform:scale(.98)} .ecosystem-note{font-size:.9rem;color:var(--cr-brick-text);margin-top:1.8rem} .ecosystem-note a{font-weight:700} .attribution{font-size:.9rem;color:var(--cr-ink-core);opacity:.8;margin-top:1.4rem;font-style:italic} /* Work-with-us entry points */ .entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:1.7rem} .entry{background:var(--cr-cream-core);border:1.5px solid var(--cr-cream-deep);border-radius:var(--radius);padding:1.3rem} .entry h3{font-size:1.2rem;margin-bottom:.35rem} .entry p{font-size:.95rem} .entry a{font-weight:700;color:var(--cr-brick-core)}