/* ============================================================
   THE COURAGE STUDIO — SITE STYLES
   Direction: A (cream canvas, coral voltage) + C (topic colors)
   Palette: coral #E8603C · cream #FAF7EA · gold #F2A93B
            lavender #9485BE · charcoal #332F2B
   ============================================================ */

:root{
  --coral:#E8603C;
  --cream:#FAF7EA;
  --gold:#F2A93B;
  --lavender:#9485BE;
  --charcoal:#332F2B;
  --bc:'Barlow Condensed',sans-serif;
  --pj:'Plus Jakarta Sans',sans-serif;
  --rb:'Reenie Beanie',cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--charcoal);font-family:var(--pj);overflow-x:hidden;line-height:1.6}
img{max-width:100%}
a{color:inherit}

/* ---------- NAV ---------- */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 4vw;position:sticky;top:0;background:var(--cream);z-index:50;border-bottom:2px solid var(--charcoal)}
.site-nav .logo img{height:76px;width:auto;margin:-10px 0;display:block}
.nav-links{display:flex;gap:2.1rem;align-items:center}
.nav-links a{font-family:var(--bc);font-weight:700;font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;position:relative}
.nav-links a:not(.hub-btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;background:var(--coral);transition:width .25s}
.nav-links a:not(.hub-btn):hover::after,.nav-links a.active:not(.hub-btn)::after{width:100%}
.nav-links a:not(.hub-btn):hover{color:var(--coral)}
.hub-btn{background:var(--coral);color:var(--cream)!important;padding:.5rem 1.4rem;border-radius:999px;transition:transform .2s,background .2s}
.hub-btn:hover{background:var(--charcoal);transform:scale(1.06)}
.nav-toggle{display:none;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--charcoal)}
/* ---------- NAV DROPDOWN ---------- */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-dropdown{position:absolute;top:100%;left:0;transform:translateY(6px);display:flex;flex-direction:column;background:var(--charcoal);padding:.6rem 0;min-width:230px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:60}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{font-family:var(--bc);font-weight:700;font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);text-decoration:none;padding:.6rem 1.4rem;white-space:nowrap;transition:background .15s,color .15s}
.nav-dropdown a::after{display:none!important}
.nav-links .nav-dropdown a:hover{background:var(--coral);color:var(--cream)}
@media(max-width:720px){
  .site-nav .logo img{height:64px;margin:-8px 0}
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;padding:1.5rem 4vw;border-bottom:2px solid var(--charcoal);gap:1.2rem}
  .nav-links.open{display:flex}
  .nav-item{display:flex;flex-direction:column;align-items:flex-start}
  .nav-dropdown{position:static;transform:none;opacity:1;visibility:visible;background:none;padding:.4rem 0 0 1rem;min-width:0}
  .nav-dropdown a{color:var(--charcoal);padding:.35rem 0}
  .nav-dropdown a:hover{background:none;color:var(--coral)}
}

/* ---------- DISPLAY TYPE ---------- */
.display-xl{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,9.5vw,8.5rem);line-height:.9;letter-spacing:-.01em;text-wrap:balance}
.display-lg{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,8vw,7rem);line-height:.92;text-wrap:balance}
.display-md{font-family:var(--bc);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3.6rem);line-height:.98;text-wrap:balance}
.accent-coral{color:var(--coral)}
.accent-gold{color:var(--gold)}
.accent-lavender{color:var(--lavender)}
.annotation{font-family:var(--rb);font-size:clamp(1.7rem,3.2vw,2.8rem);transform:rotate(-3.5deg);display:inline-block}

/* ---------- SECTIONS ---------- */
.section{padding:9vh 4vw}
.hero{padding:9vh 4vw 6vh}
.hero .lede{max-width:580px;margin:2.8rem 0 0;font-size:1.14rem;line-height:1.65}
.eyebrow{font-family:var(--bc);font-weight:700;font-size:1.2rem;letter-spacing:.18em;text-transform:uppercase;display:inline-block;margin-bottom:1.2rem}

/* ---------- DARK HERO (homepage) ---------- */
.hero-dark{background:var(--charcoal);color:var(--cream)}
.hero-coral{background:var(--coral);color:var(--cream)}
.hero-coral .accent-coral{color:var(--charcoal)}
.marquee-dark{background:var(--charcoal)}

/* ---------- TOPIC HEROES (project pages, direction C) ---------- */
.topic-hero{padding:12vh 4vw 8vh;position:relative;overflow:hidden}
.topic-hero .display-xl{font-size:clamp(2.8rem,8vw,7rem)}
.topic-hero .lede{max-width:600px;margin-top:2.4rem;font-size:1.2rem;font-weight:600;line-height:1.6}
.topic-hero .ghost-word{position:absolute;bottom:-1.8rem;right:-.5rem;font-family:var(--bc);font-weight:900;font-size:clamp(4rem,10vw,9rem);text-transform:uppercase;opacity:.12;pointer-events:none;line-height:1}
.bg-coral{background:var(--coral);color:var(--cream)}
.bg-gold{background:var(--gold);color:var(--charcoal)}
.bg-lavender{background:var(--lavender);color:var(--charcoal)}
.bg-charcoal{background:var(--charcoal);color:var(--cream)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;font-family:var(--bc);font-weight:800;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.8rem 2.1rem;border-radius:999px;transition:transform .2s,background .2s,color .2s;border:none;cursor:pointer}
.btn-coral{background:var(--coral);color:var(--cream)}
.btn-coral:hover{background:var(--charcoal);color:var(--cream);transform:scale(1.05) rotate(-1deg)}
.btn-charcoal{background:var(--charcoal);color:var(--cream)}
.btn-charcoal:hover{background:var(--coral);transform:scale(1.05)}
.btn-cream{background:var(--cream);color:var(--charcoal)}
.btn-cream:hover{transform:scale(1.05) rotate(1deg)}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--coral);color:var(--cream);overflow:hidden;padding:1.05rem 0;border-top:2px solid var(--charcoal);border-bottom:2px solid var(--charcoal)}
.marquee-track{display:flex;width:max-content;animation:marquee 22s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--bc);font-weight:800;font-size:1.9rem;text-transform:uppercase;letter-spacing:.08em;padding-right:3rem;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- TOPIC PANELS (projects index) ---------- */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));min-height:72vh}
.panel{padding:3.5rem 2.4rem;display:flex;flex-direction:column;text-decoration:none;transition:filter .25s;position:relative;overflow:hidden}
.panel:hover{filter:brightness(1.08)}
.panel p{font-size:1.2rem;font-weight:700;line-height:1.5}
.panel .num{font-family:var(--bc);font-weight:900;font-size:1.15rem;letter-spacing:.15em;opacity:.85}
.panel h3{font-family:var(--bc);font-weight:900;font-size:clamp(2.4rem,4.2vw,3.8rem);text-transform:uppercase;line-height:.95;margin:1.3rem 0}
.panel ul{list-style:none;margin-top:auto}
.panel li{border-top:2px solid currentColor}
.panel li a{font-family:var(--bc);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;padding:.8rem 0;display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:inherit}
.panel li a .go{transition:transform .2s}
.panel li a:hover .go{transform:translateX(6px)}

/* ---------- CARDS (home) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem}
.card{border:3px solid var(--charcoal);border-radius:18px;padding:2rem 1.7rem;background:var(--cream);color:var(--charcoal);transition:transform .25s,background .25s,color .25s;text-decoration:none;position:relative;display:block}
.card:hover{transform:translateY(-8px) rotate(-.5deg)}
.card.hover-coral:hover{background:var(--coral);color:var(--cream)}
.card.hover-gold:hover{background:var(--gold);color:var(--charcoal)}
.card.hover-lavender:hover{background:var(--lavender);color:var(--cream)}
.card .tag{display:inline-block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.3rem .85rem;border-radius:999px;margin-bottom:1.3rem}
.tag-coral{background:var(--coral);color:var(--cream)}
.tag-gold{background:var(--gold);color:var(--charcoal)}
.tag-lavender{background:var(--lavender);color:var(--cream)}
.card:hover .tag{background:var(--cream);color:var(--charcoal)}
.card h3{font-family:var(--bc);font-weight:800;font-size:2rem;text-transform:uppercase;line-height:1;margin-bottom:.7rem}
.card p{font-size:.96rem;line-height:1.55}
.card .arrow{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;transition:transform .25s}
.card:hover .arrow{transform:translate(4px,-4px)}

/* ---------- PROSE ---------- */
.prose{max-width:680px}
.prose p{margin-bottom:1.3rem;font-size:1.08rem}
.prose h2{font-family:var(--bc);font-weight:900;font-size:clamp(2.4rem,5vw,4rem);text-transform:uppercase;line-height:.95;margin:3rem 0 1.4rem;text-wrap:balance}
.prose h2:first-child{margin-top:0}

/* ---------- CTA BAND ---------- */
.band{background:var(--coral);color:var(--cream);text-align:center;padding:11vh 4vw;border-top:2px solid var(--charcoal)}
.band .display-lg{font-size:clamp(3rem,9vw,7.5rem)}
.band .annotation{margin-top:1.1rem}
.band .btn{margin-top:2.2rem}

/* ---------- FORMS ---------- */
.form{max-width:560px}
.form label{font-family:var(--bc);font-weight:700;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin:1.4rem 0 .4rem}
.form input,.form select,.form textarea{width:100%;padding:.85rem 1rem;border:3px solid var(--charcoal);border-radius:12px;background:#fff;font-family:var(--pj);font-size:1rem;color:var(--charcoal)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--coral);outline-offset:2px}
.form .btn{margin-top:1.8rem}
.form-note{font-size:.88rem;margin-top:1rem;opacity:.75}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--charcoal);color:var(--cream);padding:3rem 4vw 2.2rem}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;margin-bottom:2rem}
.site-footer img{height:52px}
.footer-links{display:flex;gap:1.8rem;flex-wrap:wrap}
.footer-links a{font-family:var(--bc);font-weight:700;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{font-size:.83rem;opacity:.7;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.footer-bottom a{color:inherit}

/* ---------- FOCUS ---------- */
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
.bg-coral a:focus-visible,.band a:focus-visible,.hero-coral a:focus-visible{outline-color:var(--charcoal)}

/* ---------- MOTION ---------- */
html.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- FOUNDER / PORTRAIT ---------- */
.founder-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(200px,300px);gap:3rem;align-items:start}
@media(max-width:760px){.founder-grid{grid-template-columns:1fr}}
.portrait{width:100%;border-radius:18px;display:block}

/* ---------- HERO WITH MEDIA (fills the right column) ---------- */
.hero.has-media{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero.has-media .hero-copy{min-width:0}
.hero-media{align-self:stretch;display:flex}
.hero-media .img-ph{width:100%}
@media(max-width:860px){
  .hero.has-media{grid-template-columns:1fr}
  .hero-media{margin-top:2.5rem;min-height:340px}
}

/* ---------- IMAGE PLACEHOLDERS (where real photos go) ---------- */
.img-ph{position:relative;background:rgba(51,47,43,.07);border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:var(--charcoal);min-height:240px;overflow:hidden}
.img-ph.on-dark{background:rgba(250,247,234,.09);color:var(--cream)}
.img-ph.on-coral{background:rgba(51,47,43,.14);color:var(--cream)}
.img-ph.on-lavender{background:rgba(51,47,43,.12);color:var(--charcoal)}
.img-ph.on-gold{background:rgba(51,47,43,.10);color:var(--charcoal)}
.img-ph.ratio-portrait{aspect-ratio:4/5}
.img-ph.ratio-square{aspect-ratio:1/1}
.img-ph.ratio-wide{aspect-ratio:16/9}
.img-ph-label{font-family:var(--bc);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;line-height:1.5;opacity:.72;max-width:26ch}
.img-ph-label .kind{display:block;font-size:1.15rem;letter-spacing:.2em;margin-bottom:.5rem;opacity:.9}
.img-ph-label .note{display:block;font-family:var(--pj);font-weight:500;text-transform:none;letter-spacing:0;font-size:.82rem;opacity:.85;margin-top:.55rem;line-height:1.45}

/* ---------- SPLIT MEDIA SECTION (copy + photo) ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,5vw,4rem);align-items:center}
.split.media-first .split-media{order:-1}
@media(max-width:760px){.split.media-first .split-media{order:0}}