/* ─────────────────────────────────────────────────────────────
   theCofC — shared design tokens & site chrome
   Edit the values in :root to re-theme the entire site (e.g. a
   future rebrand to royal blue / bright yellow) from this one file.
   ───────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --ink:#1B2A4A; --ink-deep:#111C33; --ink-soft:#3A4557;
  --brass:#B08635; --brass-deep:#9A722A; --brass-wash:#F3EAD6; --brass-hover:#C79A44; --on-brass:#241A06;
  --sage:#47624F; --sage-wash:#E7EEE7;
  --paper:#FBF9F4; --surface:#FFFFFF;
  --line:#E5E0D4; --line-strong:#D4CDBD;
  --muted:#5B6472; --muted-soft:#828A96; --muted-on-dark:#A9B2C2;
  --neutral-wash:#EEF0F4;
  --map-bg:#E8EAED;
  --grad-ink-a:#233457; --grad-ink-b:#33456B; --grad-ink-c:#1D2C49;
  --grad-sage-a:#3A4A3D; --grad-sage-b:#4F6353; --grad-sage-c:#324035;
  --shadow:0 1px 2px rgba(17,28,51,.06), 0 8px 24px rgba(17,28,51,.06);
  --shadow-lift:0 8px 30px rgba(17,28,51,.14);
  --radius:14px;
  --font-display:"Fraunces",serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{height:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
input,select,textarea,button{font-family:inherit}
a{color:inherit}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── header / nav ── */
header.top{flex:0 0 auto; background:var(--ink-deep); color:#fff; display:flex; align-items:center; gap:26px;
  padding:0 26px; height:62px; border-bottom:3px solid var(--brass); position:sticky; top:0; z-index:600}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:#fff; flex:0 0 auto}
.brand .mark{font-family:var(--font-display); font-weight:600; font-size:22px; display:flex; align-items:baseline; gap:2px}
.brand .the{color:#c9d0dd; font-weight:400; font-style:italic; font-size:18px}
.brand .div{width:1px; height:22px; background:rgba(255,255,255,.22)}
.brand .kicker{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:600}

nav.hub{display:flex; gap:4px; margin-left:8px; flex-wrap:wrap}
/* Future sections (e.g. Directory) just add another <a> here — no other change needed. */
nav.hub a{color:#c9d0dd; text-decoration:none; font-size:14px; font-weight:600; padding:8px 13px; border-radius:8px; white-space:nowrap}
nav.hub a:hover{background:rgba(255,255,255,.08); color:#fff}
nav.hub a.active{color:#fff; background:rgba(176,134,53,.22)}

header.top .spacer{flex:1}

/* mobile nav toggle — hidden on desktop, shown + wired to nav.hub below 720px */
.nav-toggle{display:none; flex:0 0 auto; background:none; border:none; padding:8px; margin:0; cursor:pointer}
.nav-toggle svg{width:24px; height:24px; stroke:#fff; display:block}

@media (max-width:720px){
  nav.hub{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--ink-deep); border-bottom:3px solid var(--brass); padding:8px 20px 14px;
    box-shadow:var(--shadow-lift); z-index:599; margin-left:0}
  nav.hub.open{display:flex}
  nav.hub a{padding:13px 4px; border-radius:0; border-bottom:1px solid rgba(255,255,255,.1)}
  nav.hub a:last-child{border-bottom:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
}

/* ── footer (site-wide: Contact + Privacy live here, not the top nav) ── */
footer.site{flex:0 0 auto; background:var(--ink-deep); color:var(--muted-on-dark); border-top:3px solid var(--brass)}
footer.site .foot-wrap{max-width:1080px; margin:0 auto; padding:16px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
footer.site .foot-brand{font-family:var(--font-display); font-size:14px; color:#fff; font-weight:600}
footer.site .foot-links{display:flex; gap:18px; flex-wrap:wrap}
footer.site .foot-links a{color:var(--muted-on-dark); text-decoration:none; font-size:13px; font-weight:600}
footer.site .foot-links a:hover{color:#fff}
footer.site .foot-copy{font-size:12px; color:#8b93a4}
/* Partner credits — add more by adding another <a> inside .foot-partners,
   nothing else needs to change; the comma separator is automatic. */
footer.site .foot-partners{display:flex; align-items:center; gap:4px; font-size:12px; color:#8b93a4}
footer.site .foot-partners .label{white-space:nowrap}
footer.site .foot-partners a{color:var(--muted-on-dark); text-decoration:none; font-weight:600}
footer.site .foot-partners a:hover{color:#fff}
footer.site .foot-partners a:not(:last-child):after{content:","}
footer.site .foot-social{display:flex; align-items:center; gap:14px}
footer.site .foot-social a{color:var(--muted-on-dark); display:inline-flex}
footer.site .foot-social a:hover{color:#fff}

/* ── page shell (marketing pages) ── */
.wrap{max-width:1080px; margin:0 auto; padding:34px 26px 40px}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep)}
h1.page{font-family:var(--font-display); font-weight:600; font-size:38px; line-height:1.05; margin:8px 0 8px; letter-spacing:-.01em}
.lede{font-size:16px; color:var(--muted); max-width:60ch; line-height:1.55}
.section-label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-soft); margin:34px 0 14px}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:9px;
  padding:12px 22px; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn-primary, .btn-post{background:var(--brass); color:var(--on-brass)}
.btn-primary:hover, .btn-post:hover{background:var(--brass-hover)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-deep)}
.btn-ghost{background:var(--brass-wash); color:var(--brass-deep)}
.btn-outline{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn-outline:hover{border-color:#fff}

/* ── hub cards (homepage / section link cards) ── */
.hub-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
.hub-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:var(--shadow); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px;
  transition:transform .16s, box-shadow .16s, border-color .16s}
.hub-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--line-strong)}
.hub-card .ic{width:42px; height:42px; border-radius:11px; background:var(--brass-wash); display:flex;
  align-items:center; justify-content:center; margin-bottom:4px}
.hub-card .ic svg{width:20px; height:20px; stroke:var(--brass-deep)}
.hub-card h3{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0}
.hub-card p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5}
.hub-card .go{font-size:12.5px; font-weight:700; color:var(--brass-deep); margin-top:auto}

/* ── coming soon ── */
.coming-soon{border:1px dashed var(--line-strong); border-radius:18px; padding:60px 30px; text-align:center;
  margin-top:20px; background:var(--surface)}
.coming-soon .icon{width:52px; height:52px; border-radius:14px; background:var(--brass-wash); display:flex;
  align-items:center; justify-content:center; margin:0 auto 16px}
.coming-soon .icon svg{width:26px; height:26px; stroke:var(--brass-deep)}
.coming-soon h2{font-family:var(--font-display); font-size:22px; font-weight:600; margin:0 0 8px}
.coming-soon p{font-size:14px; color:var(--muted); max-width:44ch; margin:0 auto}

/* ── newsletter signup strip ── */
.newsletter{background:var(--ink-deep); color:#fff; border-radius:18px; padding:30px 32px; display:flex;
  align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.newsletter .nl-copy h3{font-family:var(--font-display); font-size:20px; font-weight:600; margin:0 0 4px}
.newsletter .nl-copy p{font-size:13.5px; color:var(--muted-on-dark); margin:0; max-width:44ch}
.newsletter .nl-actions{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input[type=email]{height:44px; border-radius:9px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:#fff; padding:0 14px; font-size:14px; min-width:220px}
.newsletter input[type=email]::placeholder{color:var(--muted-on-dark)}
.newsletter input[type=email]:focus{outline:2px solid var(--brass); outline-offset:1px}
.newsletter .btn-primary{height:44px; padding:0 22px}

/* ── contact card (contact page + speaker booking sections) ── */
.contact-card{margin-top:28px; max-width:520px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:28px; box-shadow:var(--shadow)}
.contact-card .ic{width:46px; height:46px; border-radius:12px; background:var(--brass-wash); display:flex;
  align-items:center; justify-content:center; margin-bottom:14px}
.contact-card .ic svg{width:22px; height:22px; stroke:var(--brass-deep)}
.contact-card h2{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 6px}
.contact-card p{font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 18px}
.contact-card a.email{font-size:16px; font-weight:700; color:var(--brass-deep); text-decoration:none; word-break:break-all}
.contact-card a.email:hover{text-decoration:underline}

/* ── blog index ── */
.post-list{display:flex; flex-direction:column}
.post-item{padding:26px 0; border-bottom:1px solid var(--line); display:flex; gap:20px; align-items:flex-start}
.post-item:first-child{padding-top:0}
.post-thumb{width:120px; height:120px; object-fit:cover; border-radius:12px; flex:0 0 auto; box-shadow:var(--shadow)}
.post-item-body{flex:1 1 auto; min-width:0}
@media (max-width:480px){ .post-thumb{width:84px; height:84px} }
.post-meta{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-soft)}
.post-item h2{font-family:var(--font-display); font-size:23px; font-weight:600; margin:6px 0 8px; line-height:1.2}
.post-item h2 a{color:var(--ink); text-decoration:none}
.post-item h2 a:hover{color:var(--brass-deep)}
.post-excerpt{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 10px; max-width:65ch}
.post-more{font-size:13px; font-weight:700; color:var(--brass-deep); text-decoration:none}
.post-more:hover{text-decoration:underline}

/* ── article (single post) ── */
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted);
  text-decoration:none; margin-bottom:22px}
.back-link:hover{color:var(--brass-deep)}
.article{max-width:70ch}
.article .byline{font-size:13px; color:var(--muted); margin:10px 0 28px}
.article p{font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 18px}
.article h2{font-family:var(--font-display); font-size:22px; font-weight:600; margin:32px 0 12px}
.article h3{font-family:var(--font-display); font-size:18px; font-weight:600; margin:26px 0 10px}
.article blockquote{margin:20px 0; padding:2px 0 2px 18px; border-left:3px solid var(--brass); font-style:italic; color:var(--ink)}
.article a{color:var(--brass-deep)}
.article ul, .article ol{margin:0 0 18px; padding-left:22px}
.article li{font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:6px}
.article-hero{display:block; width:100%; max-width:440px; height:auto; margin:22px auto 30px;
  border-radius:var(--radius); box-shadow:var(--shadow)}

/* ── speaker / author page ── */
.speaker-hero{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; margin-top:6px}
.speaker-photo{width:140px; height:140px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow)}
.speaker-photo .glyph{font-family:var(--font-display); font-size:52px; font-weight:600; color:#fff}
.speaker-intro{flex:1 1 260px; min-width:240px; padding-top:4px}
.speaker-intro h1.page{margin-bottom:4px}
.speaker-role{font-size:14.5px; font-weight:600; color:var(--brass-deep); margin-bottom:10px}
.speaker-block{margin-top:36px; max-width:70ch}
.speaker-block h2{font-family:var(--font-display); font-size:20px; font-weight:600; margin:0 0 12px}
.speaker-block p{font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 12px}
.topic-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.topic-chip{background:var(--brass-wash); color:var(--brass-deep); font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px}
.works-list{display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0}
.work-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:14px; color:var(--ink-soft)}
.work-item .work-title{font-weight:700; color:var(--ink)}
.placeholder-note{font-size:13px; color:var(--muted-soft); font-style:italic}

@media (max-width:640px){
  h1.page{font-size:28px}
  .newsletter{flex-direction:column; align-items:flex-start}
  .speaker-hero{flex-direction:column; align-items:flex-start}
}