/* josiahprice.com — 70s "full harvest" brand. Warm-black ground, cream text, harvest-gold accent, copper secondary. Archivo Black (display) / Archivo (body) / Space Mono (labels). Fonts loaded per-page in . */ :root{ --bg:#1A1712; --surface:#241F18; --cream:#F0E6CC; --muted:#B0A794; --gold:#E0A22A; --gold-dk:#C0851E; --copper:#C77A3A; --rule:#3A342A; --dark-border:#4A3C34; --maxw:78rem; } *{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:'Archivo',system-ui,sans-serif; background:var(--bg);color:var(--cream); line-height:1.6;font-size:1rem;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,6.25rem)} /* type helpers */ .display{font-family:'Archivo Black',sans-serif;font-weight:400;line-height:1.02;letter-spacing:-.01em} .label{font-family:'Space Mono',monospace;font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--copper)} .meta{font-family:'Space Mono',monospace;font-size:.82rem;letter-spacing:.02em;color:var(--muted);line-height:1.5} h2{font-family:'Archivo Black',sans-serif;font-weight:400;line-height:1.06;letter-spacing:-.01em;font-size:clamp(1.7rem,4.2vw,2.2rem)} /* ---------- Nav ---------- */ .topbar{position:sticky;top:0;z-index:50;background:rgba(26,23,18,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:4.25rem} .mono{font-family:'Archivo Black',sans-serif;font-size:1.15rem;letter-spacing:.02em} .mono .p{color:var(--gold)} .nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)} .nav a{font-family:'Space Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .nav a:hover{color:var(--cream)} .nav a.cta{background:var(--gold);color:var(--bg);padding:.6rem 1rem;letter-spacing:.08em} .nav a.cta:hover{color:var(--bg);background:var(--gold-dk)} @media (max-width:640px){.nav a.plain{display:none}} /* ---------- Buttons ---------- */ .btn{display:inline-block;font-family:'Space Mono',monospace;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;padding:.85rem 1.4rem;border-radius:1px} .btn-solid{background:var(--gold);color:var(--bg)} .btn-solid:hover{background:var(--gold-dk);color:var(--bg)} .btn-outline{border:1.5px solid var(--cream);color:var(--cream)} .btn-outline:hover{background:var(--cream);color:var(--bg)} /* ---------- Hero ---------- */ .hero{display:grid;grid-template-columns:1fr;min-height:calc(100vh - 4.25rem)} .hero-content{align-self:center;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,6.25rem);max-width:46rem} .hero-content .label{display:block;margin-bottom:1.4rem} .hero-name{font-size:clamp(3.4rem,13vw,7rem)} .hero-name .sur{color:var(--gold);display:block} .hero-roles{font-family:'Space Mono',monospace;font-size:clamp(.78rem,2.2vw,.95rem);text-transform:uppercase;letter-spacing:.14em;color:var(--copper);margin:1.5rem 0 1.25rem} .hero-sub{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:34rem;color:var(--cream)} .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem} .hero-figure{position:relative;background:var(--surface);aspect-ratio:4/5} .hero-figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0} @media (min-width:900px){ .hero{grid-template-columns:1fr minmax(340px,40%)} .hero-figure{aspect-ratio:auto;height:calc(100vh - 4.25rem)} .hero-content{padding-right:clamp(2rem,4vw,3.5rem)} } /* ---------- Section shell ---------- */ section{padding:clamp(3.5rem,8vw,6rem) 0} .sec-head{margin-bottom:clamp(2rem,4vw,3rem)} .sec-head .label{display:block;margin-bottom:.9rem} /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,4.5rem)} .about-grid .head-col .display{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--cream)} .about-grid .body-col p{font-size:1.1rem} .about-grid .body-col p+p{margin-top:1.1rem;color:var(--muted)} @media (min-width:820px){.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.about-grid .head-col .label{display:block;margin-bottom:1rem}} /* ---------- Practice ---------- */ .practice{background:var(--surface)} .cards{display:grid;grid-template-columns:1fr;gap:2rem} .card .tick{width:2.75rem;height:3px;background:var(--gold);margin-bottom:1rem} .card h3{font-family:'Archivo',sans-serif;font-weight:600;font-size:1.35rem;margin-bottom:.5rem;color:var(--cream)} .card p{color:var(--muted);font-size:.98rem} @media (min-width:560px){.cards{grid-template-columns:1fr 1fr}} @media (min-width:960px){.cards{grid-template-columns:repeat(4,1fr);gap:1.75rem}} /* ---------- Selected Work ---------- */ .work-cols{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem)} .work-col .sublabel{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--copper);display:block;margin-bottom:1rem} .credit{padding:1.15rem 0;border-top:1px solid var(--rule)} .credit .t{font-family:'Archivo',sans-serif;font-weight:500;font-size:1.2rem;margin-bottom:.35rem} @media (min-width:820px){.work-cols{grid-template-columns:1fr 1fr}} /* ---------- Ventures ---------- */ .ventures{background:var(--surface);color:var(--cream)} .ventures .label{color:var(--gold)} .ventures h2{color:var(--cream)} .vcards{display:grid;grid-template-columns:1fr;gap:1.25rem} .vcard{border:1px solid var(--dark-border);border-radius:2px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;transition:border-color .2s,transform .2s} a.vcard:hover{border-color:var(--gold);transform:translateY(-3px)} .vcard h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:1.15rem;line-height:1.15} .vcard p{color:var(--muted);font-size:.95rem;flex:1} .vcard .link{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.03em;color:var(--gold)} /* Each venture card wears its own brand — like the creativereach.art pillars */ @font-face{font-family:'De Bambeet';src:url('/assets/fonts/de-bambeet.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} /* Creative Reach — magnolia green */ .vcard[href="https://creativereach.art"]{background:#20402F;border-color:#2c5340} .vcard[href="https://creativereach.art"] h3{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:1.5rem;color:#F4EDE0} .vcard[href="https://creativereach.art"] p{color:rgba(244,237,224,.72)} .vcard[href="https://creativereach.art"] .link{color:#D9A441} a.vcard[href="https://creativereach.art"]:hover{border-color:#D9A441} /* The Juneteenth Story — antique */ .vcard[href="https://thejuneteenthstory.com"]{background:#efe2c9;border-color:#dcc79c} .vcard[href="https://thejuneteenthstory.com"] h3{font-family:'De Bambeet',Georgia,serif;font-weight:400;font-size:1.75rem;letter-spacing:.01em;color:#3a2110} .vcard[href="https://thejuneteenthstory.com"] p{color:#5a4327} .vcard[href="https://thejuneteenthstory.com"] .link{color:#8a5a24} a.vcard[href="https://thejuneteenthstory.com"]:hover{border-color:#472513} /* Calltime — ghost light dark + Apollo red */ .vcard[href="https://checkcalltime.art"]{background:#0E0E0E;border-color:#39393f} .vcard[href="https://checkcalltime.art"] h3{font-family:'Bungee',sans-serif;font-weight:400;font-size:1.05rem;letter-spacing:-.01em;color:#F4F1EC} .vcard[href="https://checkcalltime.art"] h3 .ct-dot{color:#E0301E} .vcard[href="https://checkcalltime.art"] p{color:#c9c6cf} .vcard[href="https://checkcalltime.art"] .link{color:#E0301E} a.vcard[href="https://checkcalltime.art"]:hover{border-color:#E0301E} /* Black Theatre Experience — Heritage Parc gold + black */ .vcard[href="https://heritageparc.org"]{background:#C4922E;border-color:#a87a22} .vcard[href="https://heritageparc.org"] h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.2;color:#141414} .vcard[href="https://heritageparc.org"] p{color:rgba(20,20,20,.74)} .vcard[href="https://heritageparc.org"] .link{color:#141414} a.vcard[href="https://heritageparc.org"]:hover{border-color:#141414} @media (min-width:560px){.vcards{grid-template-columns:1fr 1fr}} @media (min-width:1040px){.vcards{grid-template-columns:repeat(4,1fr)}} /* ---------- Contact ---------- */ .contact .big{font-size:clamp(2.4rem,7vw,4rem);margin:.6rem 0 1.6rem} .contact .email{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);color:var(--gold)} .contact .email:hover{text-decoration:underline} .contact .phone{font-size:1.2rem;margin-top:.4rem} .contact .rep{margin-top:1.5rem;font-family:'Space Mono',monospace;font-size:.85rem;letter-spacing:.03em;color:var(--muted)} .contact .rep a{color:var(--gold)} .contact .rep a:hover{text-decoration:underline} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--rule);padding:2.5rem 0} footer .row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} footer .fname{font-family:'Archivo Black',sans-serif;font-size:.95rem;letter-spacing:.04em} footer .copy{font-family:'Space Mono',monospace;font-size:.75rem;color:var(--muted);letter-spacing:.04em} /* ---------- Upcoming Events ---------- */ .event-list{display:grid;gap:1.25rem} .event-card{display:flex;flex-wrap:wrap;gap:clamp(1.1rem,4vw,2.4rem);align-items:center;background:var(--surface);border-top:3px solid var(--gold);border-radius:2px;padding:clamp(1.5rem,4vw,2.5rem)} .event-date{display:flex;flex-direction:column;line-height:1;font-family:'Archivo Black',sans-serif;flex:0 0 auto;width:clamp(4.75rem,13vw,6.5rem)} .event-date .mo{color:var(--gold);font-size:1.05rem;letter-spacing:.06em} .event-date .day{font-size:clamp(2.8rem,7vw,3.6rem);margin:.1rem 0} .event-date .yr{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--muted);letter-spacing:.12em} .event-body{flex:1;min-width:15rem} .event-body h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:clamp(1.4rem,3.4vw,1.95rem);line-height:1.08;margin-bottom:.5rem} .event-meta{font-family:'Space Mono',monospace;font-size:.82rem;color:var(--copper);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.35rem} .event-loc{color:var(--muted);margin-bottom:1.2rem} /* ---------- Past Productions carousel ---------- */ .sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem} .carousel-nav{display:flex;gap:.5rem;flex:0 0 auto} .cbtn{width:2.7rem;height:2.7rem;border:1.5px solid var(--cream);background:transparent;color:var(--cream);font-size:1.05rem;cursor:pointer;border-radius:2px;line-height:1;transition:background .15s,color .15s} .cbtn:hover{background:var(--cream);color:var(--bg)} .carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem clamp(1.25rem,5vw,6.25rem) 1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .carousel::-webkit-scrollbar{display:none} .slide{scroll-snap-align:start;flex:0 0 auto;display:flex;flex-direction:column;gap:.75rem} .slide .imgwrap{height:clamp(300px,48vh,460px);border-radius:3px;overflow:hidden;box-shadow:0 4px 22px rgba(0,0,0,.4)} .slide .imgwrap img{height:100%;width:auto;display:block} .slide .cap{width:0;min-width:100%;box-sizing:border-box;font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.03em;color:var(--muted)} /* ---------- Media ---------- */ .media-soon{font-size:1.1rem;color:var(--muted);border:1px dashed var(--rule);border-radius:2px;padding:clamp(1.5rem,4vw,2.25rem);text-align:center;font-family:'Space Mono',monospace;letter-spacing:.02em} .press-list{display:grid;grid-template-columns:1fr;gap:1.25rem} .press-item{display:flex;flex-direction:column;gap:.55rem;background:var(--surface);border-top:3px solid var(--gold);border-radius:2px;padding:clamp(1.4rem,3.5vw,2rem);transition:transform .2s,box-shadow .2s} a.press-item:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35)} .press-top{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .85rem} .press-kind{font-family:'Space Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bg);background:var(--gold);padding:.2rem .5rem;border-radius:1px} .press-outlet{font-family:'Space Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--copper)} .press-date{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.06em;color:var(--muted);margin-left:auto} .press-item h3{font-family:'Archivo',sans-serif;font-weight:500;font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.18;color:var(--cream)} .press-item p{color:var(--muted);font-size:.96rem} .press-link{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.03em;color:var(--gold);margin-top:.15rem} @media (min-width:760px){.press-list{grid-template-columns:1fr 1fr}}