/* Caslon Media — accent locked 2026-07-18: deep editorial green #0E4E3F (do not change casually) */
@font-face{font-family:'Libre Caslon';src:url('/fonts/librecaslon-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon';src:url('/fonts/librecaslon-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon';src:url('/fonts/librecaslon-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#FAF9F5; --bg2:#F1EFE8; --ink:#15171A; --muted:#5B6066; --accent:#0E4E3F; --accent-2:#12664F;
  --hair:#E3E0D7; --card:#FFFFFF; --link:#0E4E3F;
  --serif:'Libre Caslon', Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#101214; --bg2:#16191C; --ink:#EBE9E2; --muted:#9BA1A8; --accent:#5FB79C; --accent-2:#7CC7AF;
        --hair:#26292E; --card:#181B1E; --link:#5FB79C}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.wordmark,.wordmark-sm{font-family:var(--serif);font-weight:700;letter-spacing:.005em}

/* header */
.site-head{border-bottom:1px solid var(--hair);background:var(--bg)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;flex-wrap:wrap}
.wordmark{font-size:1.35rem;color:var(--ink)}
.wordmark:hover{text-decoration:none;color:var(--accent)}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:.95rem}
.nav a:hover{color:var(--accent);text-decoration:none}

/* hero */
.hero{padding:84px 0 64px;background:var(--bg)}
.hero.small{padding:56px 0 32px}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.12;max-width:21ch}
.lede{margin-top:20px;font-size:1.15rem;color:var(--muted);max-width:62ch}
.statline{margin-top:26px;font-size:.95rem;color:var(--accent);font-weight:600;letter-spacing:.02em}

/* bands */
.band{padding:56px 0;border-top:1px solid var(--hair)}
.band.alt{background:var(--bg2)}
.band h2, .fam h2{font-size:1.6rem;margin-bottom:8px}
.more{margin-top:22px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:22px}
.card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:20px;transition:border-color .15s}
.card:hover{border-color:var(--accent);text-decoration:none}
.card-name{font-family:var(--serif);font-weight:700;font-size:1.08rem;color:var(--ink)}
.card-desc{color:var(--muted);font-size:.95rem;flex:1}
.card-go{color:var(--accent);font-size:.9rem;font-weight:600}

/* how-we-work */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:24px}
.step h3{font-size:1.05rem;color:var(--accent);margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}

/* brands page */
.fam{padding:34px 0;border-top:1px solid var(--hair)}
.fam:first-child{border-top:0}
.famdesc{color:var(--muted);max-width:66ch}
.famdesc.also{line-height:2}

/* prose pages */
.prose{padding:8px 20px 64px;max-width:740px}
.prose h2{font-size:1.35rem;margin:34px 0 10px}
.prose p{margin:0 0 16px;max-width:66ch}
.prose ul{margin:0 0 16px 20px}
.sig{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:28px}
.timeline{list-style:none;margin:8px 0 24px}
.timeline li{padding:14px 0;border-bottom:1px solid var(--hair);max-width:66ch}
.tdate{font-weight:700;color:var(--accent)}

/* footer */
.site-foot{border-top:1px solid var(--hair);background:var(--bg2);padding:40px 0 48px;margin-top:24px}
.fm{font-size:.98rem}
.wordmark-sm{font-size:1.02rem}
.fl{margin-top:10px;font-size:.92rem;color:var(--muted)}
.fl a{color:var(--muted)}
.fl a:hover{color:var(--accent)}
.fc{margin-top:14px;font-size:.85rem;color:var(--muted)}

@media (max-width:520px){
  .hero{padding:56px 0 44px}
  .head-in{padding:14px 16px}
  .nav{gap:12px}
  body{font-size:16px}
}