/* Harvard: Math and AI — presentation styles. No external fonts or image hosts. */
:root {
  --ink:#222723;
  --muted:#62645c;
  --paper:#f7f5ee;
  --white:#fffefa;
  --red:#a51c30;
  --red-dark:#811b2b;
  --line:#d8d8cd;
  --gold:#bc9b60;
  --dark:#191e1d;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

button,input,select {
  font:inherit
}

button,a,summary,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #cf783b;
  outline-offset:5px
}

button {
  color:inherit
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12
}

p {
  max-width:74ch
}

svg {
  display:block;
  width:100%
}

[hidden] {
  display:none!important
}

.wrap {
  max-width:1240px;
  margin:auto;
  padding:0 48px
}

.eyebrow {
  font:600 11px/1.5 var(--sans);
  letter-spacing:2.2px;
  text-transform:uppercase
}

.section {
  padding:92px 0
}

.section-head {
  display:flex;
  gap:50px;
  align-items:end;
  justify-content:space-between;
  margin-bottom:36px
}

.section-head h2 {
  font-size:44px;
  max-width:650px;
  letter-spacing:-1.4px;
  margin-top:14px
}

.section-head>p {
  max-width:325px;
  color:var(--muted);
  font-size:15px
}

.section-no {
  font-size:11px;
  color:var(--red);
  margin-right:12px;
  letter-spacing:1px
}

.text-link {
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid currentColor;
  padding:0 0 5px
}

.text-link:hover {
  text-decoration:none;
  color:var(--red)
}

.arrow {
  font-family:var(--sans);
  font-weight:400
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:14px 22px;
  font-size:13px;
  font-weight:600;
  border:1px solid var(--red);
  background:var(--red);
  color:white;
  transition:background .15s
}

.btn:hover {
  text-decoration:none;
  background:var(--red-dark)
}

.btn-outline {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}

.btn-outline:hover {
  background:#eae7dd
}

.skip {
  position:absolute;
  top:-100px;
  left:12px;
  z-index:99;
  padding:12px;
  background:white;
  color:black
}

.skip:focus {
  top:12px
}

.preview-bar {
  background:#ece9df;
  color:#52554c;
  font-size:11px;
  line-height:1.5;
  padding:8px 24px;
  text-align:center;
  letter-spacing:.15px
}

.preview-bar b {
  font-weight:600
}

.preview-bar a {
  text-decoration:underline;
  text-underline-offset:3px
}

.topbar {
  background:var(--dark);
  color:#d5d7d0;
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase
}

.topbar .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:9px;
  padding-bottom:9px
}

.topbar-links {
  display:flex;
  gap:25px
}

.masthead {
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line)
}

.masthead .wrap {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  min-height:87px
}

.brand {
  font:24px/1.2 var(--serif);
  letter-spacing:-.5px;
  white-space:nowrap
}

.brand strong {
  color:var(--red);
  font-weight:400
}

.brand small {
  display:block;
  font:9px/1.6 var(--sans);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:6px;
  color:var(--muted)
}

.nav {
  display:flex;
  gap:26px;
  align-items:center
}

.nav a {
  font-size:12px;
  font-weight:600
}

.nav a:hover {
  color:var(--red)
}

.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:9px 13px;
  font-size:12px
}

.hero {
  background:var(--dark);
  color:var(--paper);
  overflow:hidden;
  position:relative
}

.hero .wrap {
  position:relative
}

.hero-main {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  gap:25px;
  min-height:605px;
  align-items:center;
  padding:63px 0 58px
}

.hero .eyebrow {
  color:#d0bda3
}

.hero h1 {
  font-size:76px;
  line-height:1.01;
  letter-spacing:-3px;
  margin-top:27px;
  max-width:620px
}

.hero h1 em {
  font-weight:400;
  color:#e5c4ae
}

.hero-copy {
  position:relative;
  z-index:2
}

.hero-copy>p {
  color:#c7cbc4;
  font-size:17px;
  line-height:1.7;
  max-width:480px;
  margin-top:28px
}

.hero-actions {
  display:flex;
  gap:25px;
  align-items:center;
  margin-top:30px;
  flex-wrap:wrap
}

.hero-actions .text-link {
  color:#ebe8df
}

.hero-actions .btn {
  background:var(--red);
  border-color:var(--red)
}

.hero-visual {
  position:relative;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  background-image:radial-gradient(#78807655 .65px,transparent .65px);
  background-size:22px 22px;
  isolation:isolate
}

.hero-visual:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse,transparent 35%,var(--dark) 73%);
  z-index:-1
}

.hero-art {
  width:118%;
  flex-shrink:0;
  filter:drop-shadow(0 0 22px #c1855b22)
}

.art-marker {
  position:absolute;
  border-top:1px solid #6a7166;
  color:#c5c9bb;
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding-top:8px;
  min-width:110px
}

.art-marker.one {
  top:42px;
  right:4px
}

.art-marker.two {
  bottom:55px;
  left:7px
}

.art-index {
  position:absolute;
  right:4px;
  bottom:24px;
  color:#848c80;
  font:10px/1.5 monospace;
  letter-spacing:1px
}

.hero-index {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #43493f
}

.hero-index a {
  display:flex;
  align-items:center;
  gap:17px;
  padding:22px 20px 24px 0;
  font-size:12px
}

.hero-index a+ a {
  border-left:1px solid #43493f;
  padding-left:28px
}

.hero-index span {
  color:#ad987b;
  font:11px monospace
}

.hero-index b {
  font-weight:500
}

.hero-index i {
  margin-left:auto;
  font-style:normal;
  color:#bdc3b6
}

.hero-index a:hover {
  text-decoration:none;
  color:#ebcfa9
}

.reports-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.report-card {
  border:1px solid var(--line);
  background:var(--white);
  padding:32px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}

.report-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  margin-bottom:38px
}

.report-card .tag {
  color:var(--red);
  border-color:#d2b1b6;
  background:#fbf0f0
}

.tag {
  border:1px solid var(--line);
  display:inline-block;
  padding:3px 8px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  line-height:1.5
}

.report-card h3 {
  font-size:32px;
  letter-spacing:-.6px;
  max-width:390px;
  margin-bottom:20px
}

.report-card>p {
  font-size:14px;
  color:var(--muted);
  max-width:420px
}

.report-card .organizers {
  font-size:11px;
  line-height:1.7;
  color:#5c6056;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #e3e2d9
}

.organizers b {
  font-weight:600;
  color:var(--ink)
}

.report-links {
  display:flex;
  flex-wrap:wrap;
  gap:18px 24px;
  align-items:center;
  margin-top:auto;
  padding-top:27px
}

.report-links .text-link {
  font-size:11px;
  gap:12px
}

.report-number {
  position:absolute;
  right:24px;
  top:73px;
  color:#f0ede3;
  font:110px/1 var(--serif);
  pointer-events:none
}

.report-card h3,.report-card>p {
  position:relative
}

.reports-note {
  margin-top:20px;
  font-size:12px;
  color:var(--muted)
}

.initiatives {
  border-top:1px solid var(--line);
  background:#eeeee6
}

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

.initiative {
  padding:28px;
  background:var(--white);
  border-top:3px solid var(--red);
  display:flex;
  flex-direction:column
}

.initiative-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px
}

.initiative-mark {
  font:32px/1 var(--serif);
  color:var(--red)
}

.initiative-mark.hex {
  width:32px;
  height:35px
}

.initiative .eyebrow {
  font-size:9px;
  color:var(--muted);
  letter-spacing:1.5px
}

.initiative h3 {
  font-size:31px;
  letter-spacing:-.5px
}

.initiative>p {
  font-size:13px;
  color:var(--muted);
  margin-top:17px;
  line-height:1.75
}

.role {
  margin-top:24px;
  padding:17px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:11px
}

.role strong {
  display:block;
  font-size:12px;
  color:var(--ink);
  font-weight:600
}

.role span {
  display:block;
  color:var(--red);
  font-size:11px;
  margin-top:4px
}

.initiative-links {
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:start;
  flex-direction:column;
  gap:14px
}

.initiative-links .text-link {
  font-size:12px
}

.small-link {
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--muted)
}

.initiative-note {
  font-size:12px;
  color:var(--muted);
  margin-top:23px
}

.impact {
  background:#6d1e2a;
  color:#fff7ed;
  padding:64px 0
}

.impact-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  align-items:center
}

.impact .eyebrow {
  color:#e8c3b0
}

.impact h2 {
  font-size:40px;
  line-height:1.15;
  letter-spacing:-1px;
  margin-top:15px
}

.impact p {
  font-size:14px;
  color:#ead5cf;
  margin-top:20px
}

.impact-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  margin-top:23px
}

.impact .text-link {
  margin-top:0;
  color:#fff6e9;
  font-size:12px
}

.impact .text-link:hover {
  color:white
}

.impact-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}

.stat {
  border-top:1px solid #ac7480;
  padding-top:22px
}

.stat strong {
  font:76px/1 var(--serif);
  display:block;
  letter-spacing:-3px
}

.stat span {
  display:block;
  font-size:12px;
  color:#ead5cf;
  line-height:1.5;
  margin-top:10px
}

.events-section .section-head {
  align-items:start
}

.events-section .section-head>p {
  margin-top:26px
}

.featured {
  display:grid;
  grid-template-columns:180px 1fr auto;
  gap:35px;
  background:#e8e9df;
  border-left:4px solid var(--red);
  padding:30px;
  margin-bottom:34px;
  align-items:center
}

.featured-date {
  font:52px/1 var(--serif);
  letter-spacing:-2px
}

.featured-date small {
  font:11px/1.5 var(--sans);
  display:block;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-top:12px;
  color:var(--muted)
}

.featured .eyebrow {
  font-size:9px;
  letter-spacing:1.6px;
  color:var(--red);
  margin-bottom:9px
}

.featured h3 {
  font-size:26px
}

.featured p {
  font-size:12px;
  color:var(--muted);
  margin-top:9px
}

.featured .btn {
  font-size:11px;
  gap:18px;
  white-space:nowrap
}

.event-tools {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:20px
}

.filters {
  display:flex;
  gap:5px
}

.filter {
  border:1px solid transparent;
  background:transparent;
  padding:9px 14px;
  font-size:12px;
  font-weight:500
}

.filter[aria-pressed=true] {
  background:var(--ink);
  color:white
}

.filter:hover {
  border-color:var(--ink)
}

.search-field {
  position:relative;
  width:285px
}

.search-field input {
  width:100%;
  border:1px solid var(--line);
  background:var(--white);
  padding:10px 12px 10px 33px;
  font-size:12px;
  color:var(--ink);
  border-radius:0
}

.search-field:before {
  content:'⌕';
  position:absolute;
  left:12px;
  top:5px;
  font-size:21px;
  color:var(--muted)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.events-summary {
  font-size:11px;
  color:var(--muted);
  margin:16px 0 4px;
  min-height:18px
}

.event-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px
}

.event-row {
  padding:24px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:58px 1fr;
  gap:22px;
  align-items:start
}

.event-date {
  color:var(--red);
  text-align:center;
  padding:6px 0
}

.event-date span {
  display:block;
  font-size:9px;
  letter-spacing:1.2px
}

.event-date b {
  display:block;
  font:37px/1.25 var(--serif);
  letter-spacing:-1px
}

.event-date b.small-date {
  font-size:22px;
  line-height:2;
  letter-spacing:-.7px
}

.event-date span:last-child {
  color:var(--muted);
  font-size:9px;
  letter-spacing:.5px
}

.event-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px
}

.event-state {
  font-size:9px;
  color:var(--muted)
}

.event-body h3 {
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.3px
}

.event-body h3 a span {
  font-size:13px;
  white-space:nowrap;
  color:var(--red)
}

.event-person {
  font-size:12px;
  line-height:1.6;
  margin-top:9px
}

.event-location {
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.event-row details {
  font-size:11px;
  margin-top:10px;
  color:var(--muted)
}

.event-row summary {
  cursor:pointer;
  width:fit-content
}

.event-row details p {
  margin-top:8px;
  line-height:1.7
}

.event-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:28px
}

.event-bottom .btn {
  font-size:11px;
  padding:11px 20px
}

.event-bottom p {
  font-size:11px;
  color:var(--muted);
  max-width:460px
}

.no-events {
  padding:32px 0;
  color:var(--muted)
}

.learn {
  border-top:1px solid var(--line);
  background:#eeeee6
}

.learn-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px
}

.learn-col .eyebrow {
  color:var(--red);
  margin-bottom:25px
}

.seminar {
  padding-bottom:23px;
  margin-bottom:23px;
  border-bottom:1px solid #d2d4c8
}

.seminar h3 {
  font-size:27px;
  line-height:1.2
}

.seminar p {
  font-size:13px;
  color:var(--muted);
  margin-top:13px
}

.seminar-links {
  display:flex;
  gap:20px;
  margin-top:17px;
  flex-wrap:wrap
}

.seminar-links a {
  font-size:11px
}

.recording {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid #d2d4c8
}

.recording:first-of-type {
  padding-top:0
}

.play {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid #a8ad9e;
  border-radius:50%;
  font-size:13px;
  color:var(--red)
}

.recording h3 {
  font:18px/1.4 var(--serif)
}

.recording p {
  font-size:11px;
  color:var(--muted);
  margin-top:5px
}

.recording a:hover h3 {
  text-decoration:underline;
  text-underline-offset:4px
}

.recording>a {
  display:contents
}

.news-section {
  border-top:1px solid var(--line)
}

.news-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.news-card {
  border:1px solid var(--line);
  padding:30px;
  background:var(--white);
  display:flex;
  flex-direction:column
}

.news-card .eyebrow {
  font-size:9px;
  color:var(--red)
}

.news-card h3 {
  font-size:27px;
  line-height:1.2;
  margin-top:15px
}

.news-card p {
  color:var(--muted);
  font-size:13px;
  margin-top:17px
}

.news-card .review-note {
  padding:12px;
  background:#f5eee0;
  font-size:11px;
  color:#604c28
}

.news-card .news-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:25px
}

.news-card .text-link {
  font-size:11px
}

.review-banner {
  padding:15px 20px;
  background:#eee4cd;
  border-left:3px solid #9b7131;
  color:#604c28;
  font-size:12px;
  margin-bottom:28px
}

.footer {
  background:var(--dark);
  color:#d5d8cc;
  padding:53px 0 28px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:45px;
  align-items:start
}

.footer-title {
  font:31px/1.2 var(--serif);
  color:#fbf7e9;
  letter-spacing:-.5px
}

.footer p {
  max-width:475px;
  font-size:12px;
  color:#aeb4a5;
  margin-top:15px
}

.footer-links {
  display:flex;
  flex-direction:column;
  gap:11px;
  font-size:12px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid #41483d;
  margin-top:40px;
  padding-top:22px;
  font-size:10px;
  color:#aeb4a5
}

.footer-bottom a {
  text-decoration:underline;
  text-underline-offset:3px
}

@media(min-width:1450px) {
  .wrap {
    max-width:1336px
  }

  .hero-main {
    min-height:650px
  }

  .hero h1 {
    font-size:84px
  }

}

@media(max-width:1050px) {
  .wrap {
    padding-left:32px;
    padding-right:32px
  }

  .nav {
    gap:17px
  }

  .hero h1 {
    font-size:65px
  }

  .hero-main {
    min-height:555px
  }

  .hero-copy>p {
    font-size:15px
  }

  .section-head h2 {
    font-size:39px
  }

  .initiative {
    padding:23px
  }

  .featured {
    grid-template-columns:140px 1fr;
    gap:25px
  }

  .featured>.btn {
    grid-column:2;
    justify-self:start
  }

  .featured-date {
    grid-row:1/3
  }

  .impact-layout {
    gap:38px
  }

  .event-list {
    column-gap:28px
  }

}

@media(max-width:760px) {
  html {
    scroll-padding-top:90px
  }

  .wrap {
    padding-left:24px;
    padding-right:24px
  }

  .topbar .wrap {
    justify-content:center
  }

  .topbar-label {
    display:none
  }

  .topbar-links {
    gap:20px;
    font-size:9px
  }

  .preview-bar {
    font-size:10px;
    padding:7px 20px
  }

  .masthead .wrap {
    min-height:75px;
    flex-wrap:wrap;
    gap:0
  }

  .brand {
    font-size:21px
  }

  .brand small {
    font-size:8px;
    letter-spacing:1.4px
  }

  .js .menu-toggle {
    display:block
  }

  .nav {
    width:100%;
    padding:18px 0;
    flex-wrap:wrap;
    gap:15px 25px
  }

  .js .nav:not(.open) {
    display:none
  }

  .nav a {
    font-size:12px
  }

  .hero-main {
    grid-template-columns:1fr;
    min-height:0;
    padding:47px 0 15px;
    gap:0
  }

  .hero h1 {
    font-size:62px;
    max-width:540px;
    letter-spacing:-2.5px;
    margin-top:22px
  }

  .hero-copy>p {
    max-width:490px;
    font-size:15px;
    margin-top:23px
  }

  .hero-actions {
    gap:25px;
    margin-top:25px
  }

  .hero-visual {
    height:280px;
    margin-top:10px
  }

  .hero-art {
    max-width:360px;
    width:100%
  }

  .art-marker.one {
    top:32px;
    right:0;
    font-size:8px;
    min-width:85px
  }

  .art-marker.two {
    left:0;
    bottom:45px;
    font-size:8px;
    min-width:85px
  }

  .art-index {
    font-size:8px;
    bottom:15px
  }

  .hero-index {
    grid-template-columns:1fr
  }

  .hero-index a {
    padding:17px 0!important;
    border-left:0!important;
    border-bottom:1px solid #43493f
  }

  .hero-index a:last-child {
    border-bottom:0
  }

  .hero-index b {
    font-size:12px
  }

  .section {
    padding:61px 0
  }

  .section-head {
    display:block;
    margin-bottom:28px
  }

  .section-head h2 {
    font-size:35px;
    letter-spacing:-.8px;
    margin-top:12px
  }

  .section-head>p {
    max-width:530px;
    font-size:14px;
    margin-top:20px!important
  }

  .reports-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .report-card {
    padding:27px
  }

  .report-card h3 {
    font-size:29px
  }

  .report-meta {
    margin-bottom:29px
  }

  .report-number {
    font-size:95px;
    top:60px
  }

  .report-card>p {
    max-width:100%
  }

  .initiatives-grid {
    grid-template-columns:1fr;
    gap:20px
  }

  .initiative {
    padding:28px
  }

  .initiative-top {
    margin-bottom:20px
  }

  .initiative h3 {
    font-size:30px
  }

  .initiative>p {
    font-size:14px
  }

  .initiative-links {
    flex-direction:row;
    flex-wrap:wrap;
    gap:15px 25px;
    align-items:center
  }

  .impact {
    padding:49px 0
  }

  .impact-layout {
    grid-template-columns:1fr;
    gap:34px
  }

  .impact h2 {
    font-size:35px
  }

  .impact-stats {
    gap:24px
  }

  .stat strong {
    font-size:67px
  }

  .featured {
    grid-template-columns:1fr;
    gap:15px;
    padding:25px
  }

  .featured-date {
    grid-row:auto;
    font-size:36px;
    display:flex;
    align-items:baseline;
    gap:14px;
    letter-spacing:-1px
  }

  .featured-date small {
    font-size:9px;
    letter-spacing:.7px
  }

  .featured>.btn {
    grid-column:auto
  }

  .featured h3 {
    font-size:27px
  }

  .event-tools {
    flex-direction:column;
    align-items:stretch;
    gap:16px
  }

  .filters {
    justify-content:start
  }

  .filter {
    padding:9px 14px
  }

  .search-field {
    width:100%
  }

  .event-list {
    grid-template-columns:1fr
  }

  .event-row {
    gap:20px
  }

  .event-body h3 {
    font-size:21px
  }

  .event-bottom {
    align-items:start;
    flex-direction:column
  }

  .learn-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .learn-col .eyebrow {
    margin-bottom:23px
  }

  .news-grid {
    grid-template-columns:1fr
  }

  .footer-top {
    flex-direction:column;
    gap:30px
  }

  .footer-bottom {
    flex-direction:column;
    gap:12px;
    margin-top:30px
  }

  .footer-title {
    font-size:29px
  }

}

@media(max-width:370px) {
  .wrap {
    padding-left:19px;
    padding-right:19px
  }

  .hero h1 {
    font-size:54px
  }

  .hero-actions {
    align-items:start;
    flex-direction:column;
    gap:18px
  }

  .report-links {
    align-items:start;
    flex-direction:column
  }

  .brand {
    font-size:19px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

@media print {
  .preview-bar,.topbar,.masthead,.hero-visual,.hero-index,.event-tools,.event-bottom button,.menu-toggle {
    display:none!important
  }

  .wrap {
    padding:0;
    max-width:none
  }

  .section {
    padding:25px 0
  }

  .hero,.impact,.footer {
    background:white!important;
    color:black!important
  }

  .hero-main {
    display:block;
    min-height:0;
    padding:20px 0
  }

  .hero h1 {
    font-size:42px;
    color:black
  }

  .hero h1 em,.hero p,.impact p,.impact .eyebrow,.impact a,.stat span {
    color:black!important
  }

  .hero-actions {
    display:none
  }

  .section-head h2 {
    font-size:28px
  }

  .report-card,.initiative,.event-row {
    break-inside:avoid
  }

  .event-list {
    display:block
  }

  .event-row[hidden] {
    display:grid!important
  }

  .footer {
    padding:20px 0
  }

  .footer p,.footer-title,.footer-bottom {
    color:black!important
  }

  .footer-links {
    display:none
  }

  .recording .play {
    display:none
  }

  .recording {
    display:block
  }

}

/* Photographs supplied by Melanie Matchett Wood; original files are in ../images/. */
.hero-main {
  grid-template-columns:1fr 1fr;
  gap:46px;
  min-height:620px
}

.hero h1 {
  font-size:72px
}

.hero-photo {
  margin:0;
  min-width:0;
  align-self:center;
  position:relative;
  padding-top:18px
}

.hero-photo:before {
  content:'';
  position:absolute;
  width:90px;
  height:90px;
  right:-12px;
  top:6px;
  border-top:1px solid #9d7c65;
  border-right:1px solid #9d7c65
}

.photo-open {
  padding:0;
  border:0;
  background:transparent;
  display:block;
  width:100%;
  position:relative;
  text-align:left
}

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

.hero-photo .photo-open {
  height:365px
}

.hero-photo img {
  object-position:50% 58%
}

.expand-icon {
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  background:#f8f5eeda;
  color:#20251f;
  font-size:17px;
  transition:background .15s
}

.photo-open:hover .expand-icon {
  background:white
}

.hero-photo figcaption {
  font-size:9px;
  line-height:1.8;
  color:#b1b9ab;
  margin-top:14px;
  letter-spacing:.15px
}

.hero-photo figcaption span {
  display:block;
  color:#f5ead9;
  font:22px/1.3 var(--serif);
  margin-bottom:4px
}

.photo-story {
  padding:66px 0;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

.photo-story-head {
  display:flex;
  gap:60px;
  justify-content:space-between;
  align-items:end;
  margin-bottom:26px
}

.photo-story h2 {
  font-size:36px;
  letter-spacing:-.8px;
  margin-top:13px
}

.photo-story .eyebrow {
  color:var(--red);
  font-size:10px
}

.photo-story-head p {
  font-size:13px;
  color:var(--muted);
  max-width:370px
}

.photo-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:15px
}

.photo-grid figure {
  margin:0;
  min-width:0
}

.photo-grid .photo-open {
  height:242px
}

.photo-grid img {
  object-position:center 64%
}

.gallery-caption {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:start;
  margin-top:18px;
  font-size:10px;
  line-height:1.8;
  color:var(--muted)
}

.gallery-caption .text-link {
  font-size:11px;
  color:var(--ink)
}

.photo-dialog {
  border:0;
  background:#191e1d;
  color:white;
  padding:18px;
  max-width:min(95vw,1200px);
  max-height:94vh;
  width:1200px
}

.photo-dialog::backdrop {
  background:#0a0c0be8
}

.photo-dialog img {
  display:block;
  width:100%;
  max-height:75vh;
  object-fit:contain
}

.dialog-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
  font-size:12px
}

.dialog-bar button {
  border:1px solid #70786a;
  background:none;
  color:white;
  padding:7px 13px
}

.photo-dialog p {
  font-size:11px;
  color:#c4cabc;
  margin-top:13px
}

.photo-dialog nav {
  display:flex;
  gap:8px
}

.video-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--dark);
  color:var(--paper);
  margin-bottom:45px
}

.video-poster {
  aspect-ratio:16/9;
  min-height:260px;
  position:relative;
  background:radial-gradient(ellipse at 20% 0%,#a63b46,transparent 65%),repeating-radial-gradient(ellipse at 55% 100%,transparent 0 20px,#f7ead31b 21px 22px,transparent 23px 44px),#3a252b;
  display:flex;
  align-items:center;
  justify-content:center
}

.video-launch {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  background:transparent;
  border:0;
  color:#fff8ed;
  font-size:12px;
  width:100%;
  height:100%;
  padding:35px
}

.video-play {
  width:68px;
  height:68px;
  border:1px solid #e8d7bc;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:32px;
  padding-left:4px
}

.video-launch:hover .video-play {
  background:#f7edd522
}

.video-feature-copy {
  padding:32px 38px
}

.video-feature .eyebrow {
  color:#d3bda3;
  font-size:10px
}

.video-feature h3 {
  font-size:30px;
  margin:14px 0 17px
}

.video-feature p {
  font-size:12px;
  color:#bfc6b6
}

.video-feature .text-link {
  margin-top:20px;
  font-size:11px
}

.video-poster iframe {
  border:0;
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.archive-link {
  margin-bottom:23px
}

.archive-link .text-link {
  font-size:11px
}

@media(min-width:1450px) {
  .hero h1 {
    font-size:80px
  }

  .hero-photo .photo-open {
    height:395px
  }

}

@media(max-width:1050px) {
  .hero h1 {
    font-size:60px
  }

  .hero-main {
    gap:30px
  }

  .hero-photo .photo-open {
    height:330px
  }

  .photo-grid .photo-open {
    height:205px
  }

  .photo-story-head {
    gap:35px
  }

  .video-feature-copy {
    padding:26px
  }

  .video-feature h3 {
    font-size:27px
  }

}

@media(max-width:760px) {
  .hero-main {
    grid-template-columns:1fr;
    min-height:0;
    gap:30px;
    padding-bottom:30px
  }

  .hero h1 {
    font-size:62px
  }

  .hero-photo {
    padding-top:0;
    margin-top:5px
  }

  .hero-photo:before {
    top:-12px;
    right:-10px
  }

  .hero-photo .photo-open {
    height:auto;
    aspect-ratio:4/3
  }

  .hero-photo figcaption {
    font-size:9px
  }

  .hero-photo figcaption span {
    font-size:21px
  }

  .photo-story {
    padding:48px 0
  }

  .photo-story-head {
    display:block
  }

  .photo-story h2 {
    font-size:31px
  }

  .photo-story-head p {
    margin-top:18px;
    font-size:13px;
    max-width:100%
  }

  .photo-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }

  .photo-grid figure:first-child {
    grid-column:1/-1
  }

  .photo-grid .photo-open {
    height:auto;
    aspect-ratio:1/1
  }

  .photo-grid figure:first-child .photo-open {
    aspect-ratio:4/3
  }

  .photo-grid img {
    object-position:center
  }

  .gallery-caption {
    flex-direction:column;
    gap:14px
  }

  .video-feature {
    grid-template-columns:1fr
  }

  .video-poster {
    min-height:0
  }

  .video-feature-copy {
    padding:27px
  }

  .dialog-bar {
    gap:10px;
    font-size:10px;
    flex-wrap:wrap
  }

  .dialog-bar button {
    font-size:12px;
    padding:9px 12px
  }

  .photo-dialog {
    padding:12px
  }

  .photo-dialog img {
    max-height:65vh
  }

}

@media(max-width:370px) {
  .hero h1 {
    font-size:54px
  }

}

@media print {
  .hero-photo,.photo-story,.video-feature,.photo-dialog {
    display:none!important
  }

}

/* Institutional identities, extended initiatives, and compact First Proof video. */
.institution-bar {
  background:#fff;
  border-bottom:1px solid var(--line)
}

.institution-bar .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:15px;
  padding-bottom:15px
}

.institution {
  display:flex;
  align-items:center;
  gap:15px;
  color:var(--ink);
  min-width:0
}

.institution img {
  object-fit:contain;
  flex-shrink:0;
  display:block
}

.harvard-shield {
  width:44px;
  height:52px
}

.cmsa-logo {
  width:68px;
  height:68px
}

.institution b {
  display:block;
  font:21px/1.2 var(--serif);
  font-weight:400;
  letter-spacing:.1px
}

.institution small {
  display:block;
  font:10px/1.5 var(--sans);
  margin-top:4px;
  color:var(--muted)
}

.cmsa-identity b {
  font:600 12px/1.3 var(--sans);
  letter-spacing:2px
}

.cmsa-identity small {
  font-size:10px
}

.brand small {
  font-size:8px;
  letter-spacing:1.5px
}

.masthead .wrap {
  gap:20px
}

.nav {
  gap:20px
}

.initiatives-grid {
  grid-template-columns:1fr 1fr
}

.initiative-featured {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:38px
}

.initiative-copy {
  display:flex;
  flex-direction:column;
  min-width:0
}

.initiative-copy>p {
  font-size:13px;
  color:var(--muted);
  margin-top:17px;
  line-height:1.75
}

.initiative-video {
  min-width:0;
  border-left:1px solid var(--line);
  padding-left:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px
}

.initiative-video>.eyebrow {
  color:var(--red)
}

.initiative-video>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7
}

.initiative-video .video-poster {
  min-height:200px;
  aspect-ratio:16/10
}

.initiative-video .video-play {
  width:47px;
  height:47px;
  font-size:24px
}

.initiative-video .video-launch {
  padding:22px 12px;
  gap:13px;
  font-size:11px;
  text-align:center;
  text-decoration:none
}

.initiative-video .video-launch:hover {
  text-decoration:none;
  background:#ffffff0d
}

.initiative-video .video-direct {
  align-self:start;
  font-size:11px
}

.initiative-video .video-help {
  font-size:10px;
  line-height:1.6
}

.initiative h3 {
  overflow-wrap:break-word
}

@media(min-width:761px) and (max-width:1050px) {
  .masthead .wrap {
    flex-wrap:wrap;
    gap:0;
    min-height:87px
  }

  .js .menu-toggle {
    display:block
  }

  .nav {
    width:100%;
    padding:18px 0;
    flex-wrap:wrap
  }

  .js .nav:not(.open) {
    display:none
  }

  .initiatives-grid {
    grid-template-columns:1fr 1fr
  }

  .initiative-featured {
    grid-column:1/-1
  }

}

@media(max-width:760px) {
  .initiatives-grid {
    grid-template-columns:1fr
  }

  .institution-bar .wrap {
    gap:18px;
    padding-top:14px;
    padding-bottom:14px
  }

  .institution {
    gap:10px
  }

  .harvard-shield {
    width:33px;
    height:40px
  }

  .cmsa-logo {
    width:50px;
    height:50px
  }

  .institution b {
    font-size:16px
  }

  .institution small {
    font-size:9px
  }

  .cmsa-identity b {
    font-size:11px
  }

  .cmsa-identity small {
    display:none
  }

  .brand small {
    font-size:7px;
    letter-spacing:.8px
  }

  .initiative-featured {
    grid-column:auto;
    grid-template-columns:1fr;
    gap:26px
  }

  .initiative-video {
    padding:23px 0 0;
    border-left:0;
    border-top:1px solid var(--line)
  }

  .initiative-video .video-poster {
    aspect-ratio:16/9
  }

  .initiative-copy>p {
    font-size:14px
  }

  .initiative-video>p {
    font-size:13px
  }

}

@media(max-width:370px) {
  .institution small {
    font-size:8px
  }

  .institution b {
    font-size:14px
  }

  .cmsa-identity {
    gap:6px
  }

  .cmsa-logo {
    width:42px;
    height:42px
  }

  .cmsa-identity b {
    font-size:10px
  }

  .brand small {
    font-size:6.2px;
    letter-spacing:.6px
  }

  .brand {
    font-size:19px
  }

  .menu-toggle {
    padding:8px 10px
  }

}

@media print {
  .institution-bar,.initiative-video {
    display:none!important
  }

  .initiative-featured {
    display:block
  }

}

/* Approved news photography and additional imagery from Harvard sources. */
.news-image {
  margin:-30px -30px 24px
}

.news-image>a {
  display:block;
  overflow:hidden;
  background:#e4e5dc
}

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

.news-image figcaption {
  padding:8px 15px 0;
  font-size:9px;
  line-height:1.5;
  color:var(--muted)
}

.role-with-photo {
  display:flex;
  align-items:center;
  gap:17px
}

.role-with-photo>img {
  display:block;
  width:76px;
  height:76px;
  object-fit:cover;
  object-position:center 30%;
  border-radius:50%;
  flex-shrink:0
}

.portrait-source {
  font-size:9px;
  line-height:1.5;
  text-decoration:underline;
  color:var(--muted);
  display:inline-block;
  margin-top:8px
}

.cmsa-archive-photo {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  margin:0 0 44px;
  background:var(--white);
  border:1px solid var(--line)
}

.cmsa-archive-photo>a {
  display:block;
  min-width:0
}

.cmsa-archive-photo img {
  display:block;
  width:100%;
  height:290px;
  object-fit:cover
}

.cmsa-archive-photo figcaption {
  padding:33px 38px;
  align-self:center
}

.cmsa-archive-photo .eyebrow {
  display:block;
  color:var(--red);
  font-size:9px
}

.cmsa-archive-photo strong {
  display:block;
  font:33px/1.15 var(--serif);
  font-weight:400;
  letter-spacing:-.7px;
  margin-top:15px
}

.cmsa-archive-photo p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin-top:15px
}

.cmsa-archive-photo .text-link {
  font-size:11px;
  margin-top:20px
}

@media(max-width:760px) {
  .cmsa-archive-photo {
    grid-template-columns:1fr;
    margin-bottom:34px
  }

  .cmsa-archive-photo img {
    height:auto;
    aspect-ratio:3/2
  }

  .cmsa-archive-photo figcaption {
    padding:26px
  }

  .cmsa-archive-photo strong {
    font-size:30px
  }

  .news-image img {
    height:auto;
    aspect-ratio:16/10
  }

}

.featured .featured-organizers {
  color:var(--ink);
  font-size:12px;
  line-height:1.6;
  margin-top:12px
}

/* Portrait and logos load from local image files. */
.initiative-video .video-poster {
  background:var(--paper);
  aspect-ratio:16/9;
  min-height:0;
  overflow:hidden
}

.video-thumbnail {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%
}

.video-photo-credit {
  font-size:9px;
  line-height:1.5;
  color:var(--muted);
  text-decoration:underline;
  align-self:start;
  margin-top:-7px
}

.event-bottom {
  flex-wrap:wrap
}

.calendar-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 24px
}

.calendar-links .text-link {
  font-size:11px;
  white-space:nowrap
}

.initiative-video .video-launch {
  position:absolute;
  inset:0;
  justify-content:flex-end;
  align-items:flex-end;
  padding:13px;
  background:transparent
}

.initiative-video .video-play {
  width:43px;
  height:43px;
  background:var(--red);
  border:1px solid var(--red);
  color:white;
  box-shadow:0 2px 10px #0002
}

.video-action-label {
  font-size:10px;
  background:var(--dark);
  color:white;
  padding:4px 8px
}

.initiative-video .video-launch:hover {
  background:#ffffff0a
}

.initiative-video .video-launch:hover .video-play {
  background:var(--red-dark)
}

.news-grid {
  grid-template-columns:repeat(6,minmax(0,1fr))
}

.news-card {
  grid-column:span 3
}

.news-card:nth-child(-n+2) {
  grid-column:span 3
}

.news-card:nth-child(n+3) h3 {
  font-size:23px
}

.news-card:nth-child(n+3) .news-image img {
  height:205px
}

.cmsa-archive-photo.photo-unavailable {
  grid-template-columns:1fr
}

.cmsa-archive-photo.photo-unavailable>a {
  display:none
}

@media(max-width:1050px) {
  .news-grid {
    grid-template-columns:1fr 1fr
  }

  .news-card,.news-card:nth-child(-n+2) {
    grid-column:auto
  }

  .news-card:last-child:nth-child(odd) {
    grid-column:1/-1
  }

}

@media(max-width:760px) {
  .news-grid {
    grid-template-columns:1fr
  }

  .news-card,.news-card:nth-child(-n+2),.news-card:last-child:nth-child(odd) {
    grid-column:auto
  }

  .news-card:nth-child(n+3) .news-image img {
    height:auto
  }

}

/* Compact faculty contributions: add another contribution-row for future entries. */
.faculty-contributions {
  margin-top:48px;
  padding-top:34px;
  border-top:1px solid var(--line)
}

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

.contributions-heading h3 {
  font-size:29px;
  letter-spacing:-.5px
}

.contributions-heading p {
  font-size:12px;
  color:var(--muted);
  max-width:365px
}

.contribution-row {
  display:grid;
  grid-template-columns:185px minmax(0,1fr);
  gap:34px;
  padding:27px 0;
  border-top:1px solid var(--line)
}

.contribution-meta .eyebrow {
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--red)
}

.contribution-meta p {
  font-size:12px;
  color:var(--muted);
  margin-top:10px
}

.contribution-body h4 {
  font:400 25px/1.2 var(--serif);
  letter-spacing:-.35px;
  margin:0;
  max-width:680px
}

.contribution-role {
  font-size:12px;
  margin-top:15px;
  color:var(--ink)
}

.contribution-role strong {
  font-weight:600
}

.contribution-description {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin-top:11px;
  max-width:690px
}

.contribution-body .text-link {
  font-size:11px;
  margin-top:18px;
  gap:14px
}

@media(max-width:760px) {
  .faculty-contributions {
    margin-top:36px;
    padding-top:29px
  }

  .contributions-heading {
    display:block
  }

  .contributions-heading h3 {
    font-size:27px
  }

  .contributions-heading p {
    margin-top:13px
  }

  .contribution-row {
    grid-template-columns:1fr;
    gap:17px;
    padding-top:24px
  }

  .contribution-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px 20px
  }

  .contribution-meta p {
    margin:0
  }

  .contribution-body h4 {
    font-size:24px
  }

}

.photo-grid figcaption {
  padding-top:12px;
  font-size:10px;
  line-height:1.6;
  color:var(--muted)
}

.photo-grid figcaption a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}

.photo-grid figcaption span {
  display:block;
  margin-top:4px
}

.photo-grid .archive-gallery-photo img {
  object-position:center
}

/* One photographed feature, followed by text-only news cards. */
.news-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.news-card,.news-card:nth-child(-n+2),.news-card:last-child:nth-child(odd) {
  grid-column:auto
}

.news-card:last-child:nth-child(even),.news-card.news-featured {
  grid-column:1/-1
}

.news-copy {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0
}

.news-card.news-featured {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  padding:0
}

.news-featured .news-copy {
  padding:32px
}

.news-featured .news-image {
  margin:0;
  display:flex;
  flex-direction:column;
  background:#f2f1ea
}

.news-featured .news-image>a {
  flex:1;
  min-height:270px
}

.news-featured .news-image img {
  height:100%;
  min-height:270px;
  object-fit:cover
}

.news-featured .news-image figcaption {
  padding:10px 15px
}

.news-card:not(.news-featured) h3 {
  font-size:25px
}

@media(max-width:760px) {
  .news-grid {
    grid-template-columns:1fr
  }

  .news-card.news-featured {
    grid-template-columns:1fr
  }

  .news-featured .news-copy {
    padding:27px
  }

  .news-featured .news-image>a {
    min-height:0
  }

  .news-featured .news-image img {
    height:auto;
    min-height:0;
    aspect-ratio:840/520
  }

  .news-card:not(.news-featured) h3 {
    font-size:24px
  }

}

.no-script-note {
  font-size:14px;
  color:var(--muted);
  margin:20px 0
}