/* =========================================================
   Theme: Think Tank — "Research brief, not marketing page"
   Clean sans, hard rules, disciplined spacing, editorial structure.
   ========================================================= */

:root{
  --tt-bg: #ffffff;
  --tt-text: #0b1220;
  --tt-muted: #475569;
  --tt-border: #d9e1ea;
  --tt-soft: #f6f8fb;

  --tt-ink: #013355;     /* DRG deep navy */
  --tt-link: #136daa;    /* DRG blue */
  --tt-accent: #0b5cab;  /* slightly sharper blue */
  --tt-paper: #fcfdff;

  --tt-font-body: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --tt-font-head: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* spacing discipline */
  --tt-measure: 72ch;
}

body{
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-font-body);
}

/* Links */
a{
  color: var(--tt-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover{
  color: var(--tt-ink);
  text-decoration-thickness: 2px;
}

/* =========================================================
   Header — "masthead + section tabs"
   ========================================================= */

.site-header--think{
  background: var(--tt-paper);
  border-bottom: 1px solid var(--tt-border);
}

.site-header--think .wrap{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header-bar--think{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1.25rem;
}

/* logo: smaller and calmer than activist */
.brand-lockup__box--think{
  display:block;
  height: clamp(32px, 5vw, 88px);
  max-width: min(52vw, 360px);
}
.brand-lockup__img--think{
  display:block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* nav looks like report tabs */
.topnav--think{
  display:flex;
  align-items:center;
  gap: .5rem;
  font-weight: 700;
  color: var(--tt-muted);
  white-space: nowrap;
}

.topnav--think a{
  text-decoration: none;
  color: var(--tt-muted);
  padding: .35rem .55rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

.topnav--think a:hover{
  color: var(--tt-ink);
  background: var(--tt-soft);
  border-color: var(--tt-border);
}

.topnav__cta{
  border: 1px solid var(--tt-border);
  background: #fff;
  color: var(--tt-ink) !important;
}
.topnav__cta:hover{
  border-color: var(--tt-link) !important;
  color: var(--tt-link) !important;
}

@media (max-width: 720px){
  .topnav--think{
    gap: .25rem;
    font-size: .95rem;
  }
  .topnav--think a{
    padding: .25rem .4rem;
  }
}
@media (max-width: 560px){
  .topnav--think{ display:none; }
}

/* =========================================================
   Hero — "Abstract + Key points"
   Uses existing markup: .hero__copy + .hero__panel
   ========================================================= */

.hero{
  background:
    linear-gradient(180deg, var(--tt-soft), #fff 55%);
  border-bottom: 1px solid var(--tt-border);
}

/* grid feels like a brief */
.hero__inner{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.25rem;
  align-items:start;
  padding-top: 3.25rem;
  padding-bottom: 2.75rem;
}

/* kicker becomes "series label" */
.kicker{
  margin: 0 0 .9rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--tt-muted);
}

/* headline: confident, not loud */
.hero h1{
  margin: 0 0 1rem;
  font-family: var(--tt-font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tt-ink);
  font-size: clamp(2.15rem, 3.5vw, 3rem);
  max-width: 22ch;
}

/* lede reads like an abstract */
.lede{
  color: var(--tt-muted);
  font-size: 1.125rem;
  max-width: var(--tt-measure);
}

/* CTAs: make them look like “report actions”, not buttons */
.hero__cta{
  display:flex;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .55rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--tt-border);
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  text-decoration: none;
  background: #fff;
  color: var(--tt-ink);
}

.btn--primary{
  background: var(--tt-ink);
  border-color: var(--tt-ink);
  color: #fff;
}
.btn--primary:hover{
  background: var(--tt-link);
  border-color: var(--tt-link);
  color: #fff;
}

.btn--ghost{
  background: #fff;
  color: var(--tt-ink);
}
.btn--ghost:hover{
  border-color: var(--tt-link);
  color: var(--tt-link);
}

/* sidebar panel: "Key points" box */
.panel{
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  background: #fff;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 18px 35px rgba(1,51,85,0.07);
}

/* panel title looks like a section heading */
.panel__title{
  margin: 0 0 .75rem;
  font-family: var(--tt-font-head);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--tt-ink);
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--tt-border);
}

.panel__list{
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  color: var(--tt-muted);
}
.panel__list li{ margin: .4rem 0; }

@media (max-width: 900px){
  .hero__inner{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Sections — like a report: rules + consistent measure
   ========================================================= */

.section{
  padding: 2.75rem 0;
  background: #fff;
}

/* give every section a subtle top rule (except the first after hero) */
.section + .section{
  border-top: 1px solid var(--tt-border);
}

.section__inner h2{
  margin: 0 0 1rem;
  font-family: var(--tt-font-head);
  font-weight: 800;
  color: var(--tt-ink);
  letter-spacing: -0.01em;
}

/* keep paragraphs on a disciplined measure */
.section__inner p{
  max-width: var(--tt-measure);
}

/* lists feel like bullet points from a brief */
.list{
  max-width: var(--tt-measure);
}

.list li{
  margin-bottom: .9rem;
}

.list strong{
  color: var(--tt-text);
}

/* contact section framed like “footer note” */
.section--contact{
  background: var(--tt-soft);
  border-top: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
}

/* =========================================================
   Small-screen polish
   ========================================================= */

@media (max-width: 520px){
  .site-header--think .wrap{
    padding-top: .9rem;
    padding-bottom: .9rem;
  }
  .hero__inner{
    padding-top: 2.5rem;
    padding-bottom: 2.25rem;
  }
}