:root{
  --navy:#08294f;
  --navy2:#041b35;
  --navy3:#0c355f;
  --gold:#dfa72e;
  --gold2:#f2c45b;
  --ink:#10233b;
  --muted:#667488;
  --line:#dfe4ea;
  --paper:#ffffff;
  --soft:#f5f7f9;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(92%,var(--max));margin:auto}
.section{padding:54px 0}
.soft{background:var(--soft)}
.label{
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-head{text-align:center;margin-bottom:30px}
.section-head h2{
  margin:0;
  font-size:26px;
  line-height:1.1;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.section-head h2:after{
  content:"";
  width:36px;height:2px;background:var(--gold);
  display:block;margin:9px auto 0;
}
.section-head p{max-width:650px;margin:13px auto 0;color:var(--muted);font-size:14px}

/* HEADER */
.topbar{
  position:sticky;top:0;z-index:1000;
  background:var(--navy2);
  box-shadow:0 2px 14px rgba(0,0,0,.17);
}
.nav{
  min-height:62px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.brand{color:#fff;font-weight:800;font-size:16px;white-space:nowrap;letter-spacing:.02em}
.brand span{font-size:12px;font-weight:500}
.navlinks{display:flex;align-items:center;gap:20px;list-style:none;padding:0;margin:0}
.navlinks a{
  color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em
}
.navlinks a:hover{color:var(--gold2)}
.navlinks .contact{border:1px solid var(--gold);padding:8px 14px}
.nav-toggle{display:none;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer}

/* HERO — compact image + strong text, like the first mockup */
.hero{
  position:relative;
  min-height:455px;
  overflow:hidden;
  background:
    radial-gradient(circle at 77% 26%,rgba(73,134,178,.34),transparent 28%),
    linear-gradient(115deg,#0b345c 0%,#082a4f 48%,#061f3b 100%);
}
.hero:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:75px;
  background:linear-gradient(transparent,rgba(0,0,0,.13));
  pointer-events:none;
}
.hero-grid{
  min-height:455px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:end;
  gap:36px;
}
.hero-copy{
  color:#fff;
  padding:50px 0 43px;
  align-self:center;
  position:relative;z-index:2;
}
.hero-copy .identity{
  color:var(--gold2);
  font-size:13px;font-weight:700;
  margin:0 0 14px;
}
.hero h1{
  font-size:42px;line-height:1.02;margin:0 0 7px;font-weight:800;letter-spacing:-.02em
}
.hero h1 small{font-size:24px;font-weight:500}
.roles{font-size:17px;font-weight:600;margin-bottom:13px}
.roles b{color:var(--gold2);margin:0 6px}
.rule{width:42px;height:2px;background:var(--gold);margin:0 0 14px}
.hero-copy>p:not(.identity){
  max-width:520px;font-size:14px;color:rgba(255,255,255,.9);margin:0 0 19px
}
.actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:11px 17px;
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em
}
.btn-gold{background:var(--gold);color:var(--navy2)}
.btn-gold:hover{background:var(--gold2)}
.btn-outline{border:1px solid rgba(255,255,255,.88);color:#fff}
.btn-outline:hover{background:#fff;color:var(--navy2)}
.crc{
  display:flex;align-items:center;gap:11px;
  margin-top:20px;font-size:11px
}
.crc-image {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
}

.crc-image img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.hero-photo{
  position:relative;z-index:2;
  align-self:end;
  height:390px;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:4px 4px 0 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.photo-placeholder{
  width:100%;height:100%;
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.13)),
    radial-gradient(circle at 55% 24%,rgba(255,255,255,.19) 0 10%,transparent 11%),
    linear-gradient(135deg,#204c70,#0a2d50);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:rgba(255,255,255,.82);
  font-weight:700;font-size:13px;padding:30px;
}

/* RESEARCH */
.research-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:13px
}
.research-card{
  border:1px solid var(--line);background:#fff;
  padding:20px 14px;text-align:center;min-height:180px;
  box-shadow:0 3px 12px rgba(5,28,52,.035);
  transition:.2s ease
}
.research-card:hover{transform:translateY(-3px);border-color:#d9bd7c;box-shadow:0 10px 24px rgba(5,28,52,.08)}
.ricon{
  width:40px;height:40px;margin:0 auto 12px;
  border:1.5px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:16px
}
.research-card h3{font-size:13px;color:var(--navy);line-height:1.2;margin:0 0 8px}
.research-card p{font-size:11px;color:var(--muted);line-height:1.45;margin:0 0 10px}
.more{font-size:9px;color:#2a5f9f;text-transform:uppercase;font-weight:900}

/* LATEST WORK */
.row-title{
  display:flex;align-items:end;justify-content:space-between;
  margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:9px
}
.row-title h2{margin:0;color:var(--navy);font-size:21px;text-transform:uppercase}
.row-title h2:after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:7px}
.row-title a{font-size:9px;text-transform:uppercase;color:#2a5f9f;font-weight:900}
.latest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.article{
  display:grid;grid-template-columns:90px 1fr;gap:11px;align-items:start
}
.article-visual{
  aspect-ratio:1/1.18;
  border-radius:1px;
  background:linear-gradient(145deg,var(--navy3),#1f79a7);
  color:#fff;display:grid;place-items:center;
  font-size:27px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.10)
}
.article:nth-child(2) .article-visual{background:linear-gradient(145deg,#755c43,#d3ac72)}
.article:nth-child(3) .article-visual{background:linear-gradient(145deg,#211d1e,#825c58)}
.article:nth-child(4) .article-visual{background:linear-gradient(145deg,#0b3155,#087fa8)}
.article-date{font-size:8px;font-weight:900;text-transform:uppercase;color:#526075;margin-bottom:4px}
.article h3{font-size:11px;line-height:1.32;color:var(--navy);margin:0 0 6px}
.article p{font-size:9.5px;line-height:1.45;color:var(--muted);margin:0 0 6px}
.article a{font-size:8px;color:#2b61a4;font-weight:900;text-transform:uppercase}

/* STATS */
.stats{background:linear-gradient(90deg,#061e3a,#082d54,#061e3a);padding:29px 0;color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:4px 18px;border-right:1px solid rgba(255,255,255,.28)}
.stat:last-child{border:0}
.stat .ico{font-size:17px;margin-bottom:5px;color:#fff}
.stat .number{font-size:23px;color:var(--gold2);font-weight:900;line-height:1}
.stat .text{font-size:9.5px;line-height:1.35;margin-top:6px;color:rgba(255,255,255,.9)}

/* =========================
   RESEARCH PAGE
========================= */


/* INTRO */

.research-intro {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}

.research-intro h2,
.research-section-heading h2,
.research-impact h2,
.research-crc h2,
.research-contact h2 {
  color: var(--navy);
  font-size: 34px;
  line-height: 1.2;
  margin: 7px 0 0;
}

.research-lead p {
  color: var(--dark);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
}

.research-lead .research-lead-first {
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
}


/* SECTION HEADING */

.research-section-heading {
  margin-bottom: 38px;
  max-width: 800px;
}


/* STATS */

.research-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 45px;
}

.research-stat {
  background: #fff;
  padding: 27px 20px;
  text-align: center;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.06);
}

.research-stat strong {
  display: block;
  color: var(--navy);
  font-size: 34px;
  line-height: 1;
  margin-bottom: 9px;
}

.research-stat span {
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}


/* GENERAL TEXT */

.research-wide {
  max-width: 900px;
}

.research-wide p,
.research-impact p,
.research-columns p,
.research-crc p,
.research-contact p {
  color: var(--dark);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 18px;
}

/* =========================
   SPEAKING PAGE
========================= */


/* INTRO */

.speaking-intro {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}

.speaking-intro h2,
.speaking-section-heading h2,
.speaking-philosophy h2,
.speaking-cta h2 {
  color: var(--navy);
  font-size: 34px;
  line-height: 1.2;
  margin: 7px 0 0;
}

.speaking-lead p,
.speaking-philosophy p {
  color: var(--dark);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 18px;
}

.speaking-lead .speaking-lead-first {
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
}


/* SECTION HEADINGS */

.speaking-section-heading {
  max-width: 820px;
  margin-bottom: 40px;
}

.speaking-section-heading p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
  margin: 14px 0 0;
}


/* BIG STATS */

.speaking-big-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.speaking-big-stat {
  background: #fff;
  padding: 30px 20px;
  text-align: center;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.06);
}

.speaking-big-stat strong {
  display: block;
  color: var(--navy);
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}

.speaking-big-stat span {
  color: var(--gray);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.speaking-stat-note {
  color: var(--gray);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  margin: 18px 0 0;
}


/* PRESENTATION RECORD */

.presentation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.presentation-card {
  background: #fff;
  padding: 30px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.presentation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.presentation-number {
  color: var(--gold);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 15px;
}

.presentation-card h3 {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.presentation-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 18px;
}

.presentation-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--light-gray);
  color: var(--gray);
  font-size: 11px;
  font-weight: 700;
}


/* FEATURED ENGAGEMENTS */

.speaking-feature {
  background: var(--navy);
}

.light-heading h2 {
  color: #fff;
}

.light-heading p {
  color: rgba(255,255,255,.75);
}

.speaking-feature .label {
  color: var(--gold-light);
}

.speaking-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.speaking-feature-card {
  padding: 27px;
  border-top: 3px solid var(--gold);
  background: rgba(255,255,255,.06);
}

.speaking-feature-icon {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 18px;
}

.speaking-feature-card h3 {
  color: #fff;
  font-size: 19px;
  margin: 0 0 12px;
}

.speaking-feature-card p {
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}


/* TOPICS */

.speaking-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.speaking-topic-card {
  background: #fff;
  padding: 27px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  min-height: 190px;
}

.speaking-topic-card h3 {
  color: var(--navy);
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 11px;
}

.speaking-topic-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}


/* AUDIENCES */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 35px;
}

.audience-item {
  padding: 20px 0;
  border-top: 2px solid var(--gold);
}

.audience-item strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  margin-bottom: 7px;
}

.audience-item span {
  color: var(--gray);
  font-size: 13px;
  line-height: 1.55;
}


/* PHILOSOPHY */

.speaking-philosophy {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}


/* CTA */

.speaking-cta {
  background: var(--off-white);
}

.speaking-cta-inner {
  display: grid;
  grid-template-columns: 1.5fr .7fr;
  gap: 60px;
  align-items: center;
}

.speaking-cta p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.7;
  max-width: 650px;
  margin: 14px 0 0;
}

.speaking-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

  .speaking-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 900px) {

  .speaking-intro,
  .speaking-philosophy,
  .speaking-cta-inner {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .speaking-big-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .presentation-grid,
  .speaking-topic-grid,
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .speaking-cta-buttons {
    justify-content: flex-start;
  }

}


@media (max-width: 600px) {

  .speaking-big-stats,
  .presentation-grid,
  .speaking-feature-grid,
  .speaking-topic-grid,
  .audience-grid {
    grid-template-columns: 1fr;
  }

  .speaking-intro h2,
  .speaking-section-heading h2,
  .speaking-philosophy h2,
  .speaking-cta h2 {
    font-size: 28px;
  }

}


/* RESEARCH TOPIC CARDS */

.research-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.research-card {
  background: #fff;
  padding: 28px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  min-height: 190px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.research-card h3 {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.research-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}


/* IMPACT */

.research-impact {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}


/* CORRELATES + THEORY */

.research-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.research-columns h3,
.research-practice h3 {
  color: var(--navy);
  font-size: 20px;
  margin: 0 0 14px;
}

.research-practice {
  margin-top: 45px;
  padding-top: 35px;
  border-top: 1px solid var(--light-gray);
}


/* CRC */

.research-crc {
  background: var(--navy);
}

.research-crc .label {
  color: var(--gold-light);
}

.research-crc h2 {
  color: #fff;
}

.research-crc p {
  color: rgba(255,255,255,.82);
}

.research-crc-grid {
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  gap: 70px;
  align-items: center;
}

.research-crc-callout {
  padding: 35px;
  border-left: 4px solid var(--gold);
  background: rgba(255,255,255,.06);
}

.research-crc-callout strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 14px;
}

.research-crc-callout p {
  margin: 0;
}


/* CONTACT */

.research-contact {
  max-width: 850px;
}

.research-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .research-intro,
  .research-impact,
  .research-crc-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .research-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .research-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 600px) {

  .research-stats,
  .research-card-grid,
  .research-columns {
    grid-template-columns: 1fr;
  }

  .research-intro h2,
  .research-section-heading h2,
  .research-impact h2,
  .research-crc h2,
  .research-contact h2 {
    font-size: 28px;
  }

}


/* =========================
   FEATURED ENGAGEMENTS
========================= */

.speaking-feature {
  background: var(--navy);
  color: #fff;
}

.speaking-feature .label {
  color: var(--gold-light);
}

.speaking-feature .speaking-section-heading h2 {
  color: #fff;
}

.speaking-feature .speaking-section-heading p {
  color: rgba(255,255,255,.82);
}

.speaking-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.speaking-feature-card {
  padding: 27px;
  border-top: 3px solid var(--gold);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.speaking-feature-card .speaking-feature-icon {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 18px;
}

.speaking-feature-card h3 {
  color: #fff;
  font-size: 19px;
  margin: 0 0 12px;
}

.speaking-feature-card p {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* =========================
   TEACHING PAGE
========================= */

.teaching-intro {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}

.teaching-intro h2,
.teaching-section-heading h2,
.teaching-goal h2 {
  color: var(--navy);
  font-size: 34px;
  line-height: 1.2;
  margin: 7px 0 0;
}

.teaching-lead p {
  color: var(--dark);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
}

.teaching-lead p:first-child {
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
}


/* SECTION HEADINGS */

.teaching-section-heading {
  margin-bottom: 38px;
  max-width: 760px;
}


/* TWO COLUMN CONTENT */

.teaching-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 65px;
}

.teaching-columns h3,
.teaching-wide h3 {
  color: var(--navy);
  font-size: 20px;
  margin: 0 0 14px;
}

.teaching-columns p,
.teaching-wide p,
.teaching-goal p {
  color: var(--dark);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 17px;
}


/* ACTIVE LEARNING */

.teaching-wide {
  max-width: 900px;
  margin-top: 45px;
  padding-top: 35px;
  border-top: 1px solid var(--light-gray);
}


/* TEACHING GOAL */

.teaching-goal {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: 70px;
  align-items: start;
}


/* COURSES */

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.course-card {
  background: #fff;
  padding: 28px 24px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  min-height: 145px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.course-number {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.course-card h3 {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .teaching-intro,
  .teaching-goal {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .teaching-columns {
    gap: 35px;
  }

  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 600px) {

  .teaching-columns {
    grid-template-columns: 1fr;
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .teaching-intro h2,
  .teaching-section-heading h2,
  .teaching-goal h2 {
    font-size: 28px;
  }

}


/* =========================
   BOOKS
========================= */

.books-grid {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  gap: 35px;
  align-items: start;
  justify-content: center;
}

.book {
  text-align: center;
}

.cover {
  width: 140px;
  height: 210px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,.16);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* SPEAKING */
.speaking-box{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:#fff;border:1px solid var(--line)
}
.speaking-copy{padding:34px 36px}
.speaking-copy h2{font-size:22px;text-transform:uppercase;color:var(--navy);margin:0 0 9px}
.speaking-copy h2:after{content:"";display:block;width:35px;height:2px;background:var(--gold);margin-top:7px}
.speaking-copy p{font-size:12px;color:var(--muted);max-width:540px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px;margin:17px 0 20px;font-size:10px;font-weight:700}
.topics span:before{content:"✓";color:var(--gold);margin-right:7px}
.speaking-photo{
  min-height:270px;
  background:
    linear-gradient(rgba(5,28,52,.06),rgba(5,28,52,.06)),
    url("https://justinpatchin.com/IL_1b600.jpg") center/cover no-repeat;
}

/* ABOUT */
.about-strip{
  display:grid;grid-template-columns:270px 1fr;gap:42px;align-items:center
}
.about-photo {
  width: 270px;
  height: 330px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: 0 9px 24px rgba(0,0,0,.1);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-copy h2{font-size:27px;color:var(--navy);margin:0 0 12px}
.about-copy h2:after{content:"";display:block;width:37px;height:2px;background:var(--gold);margin-top:7px}
.about-copy p{font-size:12px;color:var(--muted);margin:0 0 10px;max-width:720px}

/* PHOTO MOSAIC */
.photo-section{background:var(--navy2);color:#fff}
.photo-section .section-head h2{color:#fff}
.photo-section .section-head p{color:rgba(255,255,255,.7)}
.photo-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:145px 145px;gap:8px
}
.ph{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#214b68,#78a3b6)
}
.ph:first-child{grid-row:span 2}
.ph:nth-child(2){background:linear-gradient(135deg,#687d8e,#bac6ce)}
.ph:nth-child(3){background:linear-gradient(135deg,#514d3e,#a09d78)}
.ph:nth-child(4){background:linear-gradient(135deg,#1c4654,#80a7af)}
.ph:nth-child(5){background:linear-gradient(135deg,#543a34,#a77b67)}
.ph span{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 13px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.73));
  font-size:11px;font-weight:800
}

/* FOOTER */
.footer{background:#021529;color:#fff;padding:33px 0 17px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr 1.4fr;gap:26px}
.footer h3{font-size:10px;text-transform:uppercase;color:var(--gold2);margin:0 0 9px}
.footer p,.footer a{font-size:9.5px;line-height:1.65;color:rgba(255,255,255,.7)}
.quote{font-family:Georgia,serif;font-style:italic;font-size:11px!important}
.copyright{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:24px;padding-top:12px;
  color:rgba(255,255,255,.45);font-size:8px;
  display:flex;justify-content:space-between
}

/* INNER PAGES */
.page-hero{background:linear-gradient(120deg,#082d54,#041b35);color:#fff;padding:50px 0}
.page-hero h1{font-size:36px;margin:0 0 6px}
.page-hero p{font-size:13px;color:rgba(255,255,255,.76);max-width:680px}
.content{max-width:800px}
.content h2{color:var(--navy);font-size:23px;margin:0 0 10px}
.content h3{color:var(--navy)}
.content p,.content li{color:var(--muted);font-size:13px}


/* =========================
   BOOKS PAGE
========================= */

.books-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}

.book-page-item {
  text-align: center;
}

.book-page-item img {
  width: 180px;
  height: 270px;
  object-fit: contain;
  display: block;
  margin: 0 auto 20px;
  background: var(--off-white);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.22));
	transition: transform .2s ease, box-shadow .2s ease;
}

.book-page-item img:hover {
  transform: translateY(-5px);
}

.book-page-info h3 {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 6px;
}

.book-page-info p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 3px 0;
}

.book-page-info .book-meta {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Tablet */
@media (max-width: 800px) {
  .books-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phone */
@media (max-width: 550px) {
  .books-page-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   CV PAGE
========================= */

.cv-section h2 {
  color: var(--navy);
  margin-bottom: 28px;
}

.cv-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.cv-intro h2 {
  color: var(--navy);
  font-size: 34px;
  line-height: 1.2;
  margin: 8px 0 16px;
}

.cv-updated {
  color: var(--gray);
  font-size: 13px;
  font-weight: 700;
}

.cv-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cv-summary div {
  padding: 22px;
  background: var(--off-white);
  border-left: 3px solid var(--gold);
}

.cv-summary strong {
  display: block;
  color: var(--navy);
  font-size: 28px;
  line-height: 1;
  margin-bottom: 7px;
}

.cv-summary span {
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
}


/* POSITIONS */

.cv-timeline {
  border-left: 2px solid var(--light-gray);
  margin-left: 90px;
}

.cv-position {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 25px;
  padding: 0 0 28px;
  position: relative;
  margin-left: -92px;
}

.cv-position::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 50%;
  position: absolute;
  left: 87px;
  top: 6px;
}

.cv-date {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.cv-position h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 17px;
}

.cv-position p {
  margin: 0;
  color: var(--gray);
  font-size: 14px;
}


/* EDUCATION */

.cv-education {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.cv-education div {
  border-top: 3px solid var(--gold);
  padding-top: 16px;
}

.cv-education strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 5px;
}

.cv-education span {
  color: var(--gray);
  font-size: 13px;
}


/* =========================
   WRITING PAGE
========================= */

.writing-intro {
  max-width: 760px;
  margin-bottom: 45px;
}

.writing-intro h2 {
  color: var(--navy);
  font-size: 34px;
  margin: 7px 0 14px;
}

.writing-intro p {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.7;
}

.writing-list {
  max-width: 950px;
}

.writing-item {
  display: grid;
  grid-template-columns: 130px 1fr 115px;
  gap: 25px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--light-gray);
}

.writing-item:first-child {
  border-top: 1px solid var(--light-gray);
}

.writing-date {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.writing-item h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.writing-item h3 a {
  color: var(--navy);
  text-decoration: none;
}

.writing-item h3 a:hover {
  color: var(--gold);
}

.writing-read {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.writing-read:hover {
  color: var(--navy);
}

.writing-more {
  max-width: 950px;
  text-align: center;
  margin-top: 55px;
  padding: 40px;
  background: var(--off-white);
}

.writing-more p {
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
}

@media (max-width: 700px) {

  .writing-item {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .writing-read {
    margin-top: 4px;
  }

}


/* =========================
   WRITING CARDS
   Used for Articles + Essays
========================= */

.writing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.writing-card {
  background: #fff;
  padding: 28px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.writing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.writing-card-meta {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}

.writing-card h3 {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.writing-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.writing-card a {
  margin-top: auto;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.writing-card a:hover {
  color: var(--navy);
}

.writing-more {
  text-align: center;
  margin-top: 55px;
  padding: 40px;
  background: var(--off-white);
}

.writing-more p {
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
}

@media (max-width: 900px) {
  .writing-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .writing-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   PERSONAL ESSAYS
========================= */

.essay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.essay-card {
  background: #fff;
  padding: 28px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 5px 18px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.essay-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.essay-meta {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}

.essay-card h3 {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.essay-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.essay-card a {
  margin-top: auto;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
}

.essay-card a:hover {
  color: var(--navy);
}

@media (max-width: 900px) {
  .essay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* PUBLICATIONS */

.cv-publications {
  max-width: 950px;
}

.cv-publications p {
  padding: 0 0 17px 22px;
  margin: 0 0 17px;
  border-bottom: 1px solid var(--light-gray);
  color: var(--dark);
  font-size: 14px;
  line-height: 1.7;
  position: relative;
}

.cv-publications p::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 0;
  top: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.cv-publications em {
  color: var(--navy);
}

/* =========================
   PUBLICATIONS PAGE
   Add this to style.css
========================= */

.publications-top {
  padding-top: 28px;
  padding-bottom: 28px;
}

.back-link {
  display: inline-block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 22px;
}

.back-link:hover {
  color: var(--gold);
}

.pub-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pub-jump a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--light-gray);
  color: var(--navy);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 3px;
}

.pub-jump a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pub-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 25px;
}

.pub-heading h2 {
  margin: 5px 0 0;
}

.back-top {
  flex: 0 0 auto;
  color: var(--gray);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.back-top:hover {
  color: var(--gold);
}

.pub-note {
  max-width: 800px;
  margin: -10px 0 28px;
  color: var(--gray);
  font-size: 13px;
}

.pub-year {
  display: inline-block;
  min-width: 48px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  vertical-align: top;
}

.pub-link {
  white-space: nowrap;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  margin-left: 5px;
}

.pub-link:hover {
  color: var(--navy);
}

@media (max-width: 600px) {
  .pub-heading {
    align-items: start;
  }

  .back-top {
    display: none;
  }

  .pub-year {
    display: block;
    margin-bottom: 3px;
  }
}



/* GENERAL */

.alt-section {
  background: var(--off-white);
}

.cv-lead {
  max-width: 850px;
  color: var(--gray);
  font-size: 17px;
  line-height: 1.7;
}

.cv-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: baseline;
}

.cv-highlight {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
}


/* HONORS */

.cv-honors {
  max-width: 850px;
}

.cv-honors > div {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--light-gray);
  padding: 15px 0;
}

.cv-honors span {
  color: var(--gold);
  font-weight: 800;
}

.cv-honors p {
  margin: 0;
}


/* PRESENTATIONS */

.cv-presentation-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.cv-presentation-grid div {
  text-align: center;
  padding: 25px 15px;
  border-top: 3px solid var(--gold);
}

.cv-presentation-grid strong {
  display: block;
  color: var(--navy);
  font-size: 32px;
  margin-bottom: 7px;
}

.cv-presentation-grid span {
  color: var(--gray);
  font-size: 12px;
  line-height: 1.4;
}


/* RESPONSIVE */

@media (max-width: 800px) {

  .cv-intro {
    grid-template-columns: 1fr;
  }

  .cv-education {
    grid-template-columns: 1fr;
  }

  .cv-presentation-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 550px) {

  .cv-summary {
    grid-template-columns: 1fr 1fr;
  }

  .cv-position {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-left: 0;
  }

  .cv-timeline {
    border-left: 0;
    margin-left: 0;
  }

  .cv-position::before {
    display: none;
  }

  .cv-presentation-grid {
    grid-template-columns: 1fr;
  }

}

/* RESPONSIVE */
@media(max-width:980px){
  .navlinks{gap:12px}
  .research-grid{grid-template-columns:repeat(3,1fr)}
  .latest-grid{grid-template-columns:repeat(2,1fr)}
  .books-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .navlinks{
    display:none;position:absolute;top:62px;left:0;right:0;
    background:var(--navy2);padding:20px;flex-direction:column;align-items:stretch
  }
  .navlinks.open{display:flex}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:42px 0 18px}
  .hero-photo{height:270px;width:min(100%,520px);margin:auto}
  .hero h1{font-size:38px}
  .research-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px 0}
  .stat{border:0}
  .speaking-box{grid-template-columns:1fr}
  .about-strip{grid-template-columns:1fr}
  .about-photo{max-width:260px}
  .photo-grid{grid-template-columns:1fr 1fr;grid-template-rows:150px 150px 150px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .section{padding:44px 0}
  .latest-grid,.research-grid{grid-template-columns:1fr}
  .books-grid{grid-template-columns:repeat(2,1fr)}
  .latest-grid .article{grid-template-columns:78px 1fr}
  .footer-grid{grid-template-columns:1fr}
  .copyright{flex-direction:column;gap:4px}
}