:root {
  color-scheme: light;
  --espresso: #201917;
  --parchment: #f2e9da;
  --walnut: #382a24;
  --oxblood: #612d3c;
  --brass: #b89a67;
  --ivory: #fff5e6;
  --paper: var(--parchment);
  --surface: #faf3e7;
  --beige: #e9ddca;
  --taupe: #ded0bd;
  --ink: #2d221e;
  --muted: #56453b;
  --cognac: #71462f;
  --on-dark: #e4d3bc;
  --rule: #cbbba6;
  --dark-rule: #75604f;
  --serif: 'Baskerville', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.72 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
.main-nav a, .button, .gallery-photo, .contact-arrow { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cognac); outline-offset: 5px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; }
.wrap { width: min(calc(100% - 104px), 1140px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; top: 12px; left: 12px; transform: translateY(-200%); padding: 10px 16px; background: var(--surface); }
.skip-link:focus { transform: translateY(0); }

.masthead { background: var(--espresso); color: var(--parchment); border-bottom: 1px solid var(--dark-rule); }
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font: 20px/1.15 var(--serif); white-space: nowrap; }
.wordmark img { flex: 0 0 auto; }
.main-nav { display: flex; align-items: center; gap: clamp(15px, 2.8vw, 36px); font-size: 14px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.main-nav a:hover { color: var(--brass); }
.main-nav .nav-contact { padding-inline: 16px; gap: 9px; border: 1px solid var(--dark-rule); border-radius: 2px; }
.main-nav .nav-contact:hover { color: var(--ivory); background: var(--walnut); border-color: var(--brass); }

.hero {
  overflow: hidden;
  background: radial-gradient(ellipse at 78% 36%, var(--walnut), var(--espresso) 66%);
  color: var(--ivory);
}
.hero-content {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(34px, 6vw, 88px);
  padding-block: clamp(68px, 7.4vw, 110px) clamp(40px, 5.5vw, 78px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero-kicker { color: var(--cognac); }
.hero-kicker > span { width: 30px; height: 1px; background: currentColor; }
.hero-kicker i { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }
.hero h1 {
  margin-top: 23px;
  font-size: clamp(65px, 8.3vw, 116px);
  letter-spacing: -.052em;
  line-height: .92;
}
.hero h1 span { color: var(--brass); }
.hero-titleline {
  max-width: 440px;
  margin-top: 25px;
  color: var(--parchment);
  font: italic clamp(20px, 2.2vw, 30px)/1.35 var(--serif);
  line-height: 1.5;
}
.hero-intro { max-width: 42ch; margin-top: 13px; color: var(--on-dark); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.47; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 23px; margin-top: 27px; }
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 10px 18px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
}
.button-primary { color: var(--surface); background: var(--espresso); }
.button-primary:hover { background: var(--walnut); }
.button span, .text-link span { font-size: 17px; line-height: 1; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cognac);
  font: 700 14px/1.4 var(--sans);
  cursor: pointer;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero-art { min-width: 0; width: min(100%, 510px); justify-self: end; }
.portrait-frame {
  aspect-ratio: .98;
  padding: clamp(8px, 1.15vw, 15px);
  border: 1px solid var(--brass);
  background: var(--parchment);
}
.hero-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; filter: saturate(.91) contrast(.98) sepia(.07); }
.portrait-caption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
  color: var(--brass);
  font: italic 19px/1.2 var(--serif);
}
.portrait-caption::before { content: ''; width: 27px; height: 1px; background: var(--brass); }
.hero-index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  min-height: 54px;
  padding-block: 10px;
  border-top: 1px solid var(--dark-rule);
  color: var(--on-dark);
}
.hero-index p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; background: var(--brass); border-radius: 50%; }
.separator { width: 12px; height: 1px; background: var(--brass); }

.section { padding-block: clamp(76px, 9vw, 128px); }
.section h2 { font-size: clamp(43px, 5.45vw, 76px); line-height: 1.04; letter-spacing: -.045em; }
.section-label { margin-bottom: 18px; color: var(--cognac); }
.section-label > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border-bottom: 1px solid var(--brass);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.about { background: var(--parchment); }
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: start; gap: clamp(30px, 7vw, 94px); }
.about-copy { padding-top: 36px; max-width: 63ch; color: var(--muted); font-size: clamp(16px, 1.48vw, 19px); }
.about-copy > p + p { margin-top: 15px; }
.profile-quote {
  max-width: 37ch;
  margin-top: 21px;
  padding-left: 14px;
  border-left: 1px solid var(--brass);
  color: var(--cognac);
  font: italic clamp(18px, 2vw, 23px)/1.4 var(--serif);
}
.bio-control { display: flex; align-items: baseline; gap: 0 18px; flex-wrap: wrap; margin-top: 10px; }
.copy-bio[hidden] { display: none; }
.copy-status { font-size: 13px; }
#short-bio { margin-top: 12px; font-size: 15px; }

.work { background: var(--paper); border-block: 1px solid var(--rule); }
.section-heading {
  display: grid;
  grid-template-columns: 1.5fr .7fr;
  align-items: end;
  gap: 18px 35px;
  margin-bottom: 33px;
}
.section-heading > p { max-width: 39ch; color: var(--muted); padding-bottom: 2px; }
.career-group { margin-bottom: 12px; color: var(--cognac); font: 700 11px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.work-list + .career-group { margin-top: 33px; }
.work-list { border-block: 1px solid var(--rule); }
.work-row {
  display: grid;
  grid-template-columns: 140px .95fr 1.13fr;
  align-items: start;
  gap: 9px 23px;
  padding: 24px 0;
}
.work-row + .work-row { border-top: 1px solid var(--rule); }
.work-date { padding-top: 5px; color: var(--cognac); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .075em; text-transform: uppercase; }
.work-name h3 { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.1; letter-spacing: -.04em; }
.work-name p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.work-name p span { width: 3px; height: 3px; background: var(--cognac); border-radius: 50%; }
.work-description { max-width: 56ch; color: var(--muted); font-size: 15px; }

.credentials { background: var(--taupe); }
.credential-grid { display: grid; grid-template-columns: 1fr 1fr .94fr; gap: 14px; }
.credential-column { padding: clamp(19px, 2.4vw, 30px); border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
.credential-column h3 { margin-bottom: 13px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.04em; line-height: 1.13; }
.credential-column > p { margin-top: 12px; color: var(--muted); font-size: 15px; }
.qualification-list, .skill-list { list-style: none; padding: 0; margin: 0; }
.qualification-list li { padding-block: 9px; line-height: 1.45; }
.qualification-list li + li { border-top: 1px solid var(--rule); }
.qualification-list strong { display: block; font-size: 15px; }
.qualification-list li span { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-list li { padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 12px; line-height: 1.5; }

.rotary { background: var(--espresso); color: var(--parchment); }
.rotary .section-label, .rotary-links a, .project-source { color: var(--brass); }
.footer :focus-visible { outline-color: var(--on-dark); }
.rotary-title-row { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 25px 42px; margin-bottom: 43px; }
.rotary h2 { font-size: clamp(52px, 7.4vw, 100px); }
.rotary h2 em { color: var(--brass); }
.rotary-role { color: var(--brass); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rotary-club { margin-top: 7px; font: 400 clamp(21px, 2.5vw, 32px)/1.18 var(--serif); letter-spacing: -.035em; }
.rotary-intro { max-width: 46ch; margin-top: 11px; color: var(--on-dark); }
.rotary-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 5px; }
.project-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 13px; margin-bottom: 12px; }
.project-heading h3 { font-size: clamp(31px, 4vw, 49px); letter-spacing: -.045em; line-height: 1.1; }
.project-heading > p { color: var(--brass); font-size: 11px; letter-spacing: .13em; }
.impact-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: 12px; }
.impact-feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: 2px;
  background: var(--oxblood);
  border: 1px solid var(--dark-rule);
  color: var(--ivory);
}
.impact-label { color: var(--brass); gap: 7px; font-size: 10px; letter-spacing: .11em; }
.impact-label span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex: 0 0 auto; }
.impact-feature .impact-label { color: var(--on-dark); }
.impact-metric { color: var(--on-dark); }
.impact-feature .impact-label { color: var(--on-dark); }
.impact-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 12px;
  margin-top: 16px;
  font: 400 clamp(23px, 3vw, 37px)/1.05 var(--serif);
  letter-spacing: -.05em;
}
.impact-metric span { font-size: clamp(65px, 10vw, 130px); line-height: .93; }
.impact-grid h4 { margin-top: 11px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.impact-grid h4 + p, .impact-grid .gallery-link + p { margin-top: 9px; max-width: 50ch; color: var(--on-dark); font-size: 15px; }
.impact-grid .gallery-link { align-self: flex-start; margin-top: 14px; }
.impact-feature .gallery-link + p { margin-top: 11px; }
.impact-notes .gallery-link { color: var(--parchment); background: transparent; border-color: var(--dark-rule); }
.impact-notes .gallery-link:hover { background: var(--espresso); border-color: var(--brass); }
.impact-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.impact-notes article { padding: clamp(17px, 2vw, 24px); border: 1px solid var(--dark-rule); border-radius: 2px; background: var(--walnut); }
.impact-grid > .impact-notes article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.impact-notes h4 { font-size: clamp(21px, 2.35vw, 30px); }
.project-source { min-height: 35px; margin-top: 5px; font-size: 13px; }
.project-next {
  margin-top: clamp(36px, 6vw, 76px);
  padding-top: clamp(24px, 4vw, 44px);
  border-top: 1px solid var(--brass);
}
.project-next .project-heading { flex-wrap: wrap; }
.project-next-intro { max-width: 66ch; margin-bottom: 20px; color: var(--on-dark); }
.project-next .impact-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-next article > p + p { margin-top: 9px; color: var(--on-dark); font-size: 15px; }
.project-next strong { color: var(--ivory); }

.installation { background: var(--paper); }
.installation-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 25px clamp(27px, 6vw, 76px); }
.installation h2 { max-width: 11ch; }
.installation-story { grid-column: 1; color: var(--muted); }
.installation-feature { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.installation-meta { color: var(--cognac); letter-spacing: .11em; }
.installation-story > p + p { margin-top: 12px; }

.beyond-work { background: var(--walnut); color: var(--parchment); }
.beyond-work .section-label { color: var(--brass); }
.beyond-work .about-grid { grid-template-columns: .75fr 1.25fr; }
.beyond-work .about-copy { padding: clamp(20px, 3.5vw, 40px); border-left: 1px solid var(--brass); color: var(--on-dark); }
.beyond-work .about-copy > p:first-child { color: var(--ivory); font: 400 clamp(20px, 2.2vw, 27px)/1.45 var(--serif); }

.connect { background: var(--parchment); }
.connect-grid { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 24px clamp(28px, 7vw, 95px); }
.connect-intro { max-width: 41ch; margin-top: 17px; color: var(--muted); }
.contact-links { display: grid; border-top: 1px solid var(--rule); }
.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-links strong { display: block; font: 400 clamp(22px, 2.55vw, 31px)/1.13 var(--serif); letter-spacing: -.035em; }
.contact-links small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.contact-arrow { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: var(--cognac); font-size: 20px; }
.contact-links a:hover .contact-arrow { color: var(--oxblood); }

.footer { background: var(--espresso); color: var(--surface); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 88px; padding-block: 14px; }
.footer-inner p { color: var(--on-dark); font-size: 13px; }
.footer .wordmark { font-size: 18px; }
.footer .wordmark img { border: 1px solid var(--brass); border-radius: 50%; }
.back-to-top { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--on-dark); font-size: 13px; }
.back-to-top:hover { text-decoration: underline; text-underline-offset: 4px; }

.gallery-shell { background: var(--espresso); color: var(--parchment); }
.gallery-page { padding-block: 28px 60px; }
.gallery-navigation, .gallery-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 20px;
}
.gallery-navigation .eyebrow, .gallery-details .eyebrow { color: var(--brass); }
.gallery-heading { margin: clamp(22px, 4vw, 48px) 0 25px; }
.gallery-heading h1 { font-size: clamp(43px, 6vw, 77px); line-height: 1.02; letter-spacing: -.057em; }
.gallery-details { margin-top: 12px; color: var(--on-dark); }
.gallery-details span { padding-inline: 4px; }
.gallery-intro { max-width: 75ch; margin-bottom: 24px; color: var(--on-dark); }
.gallery-story {
  margin-bottom: 24px;
  padding: clamp(19px, 3vw, 34px);
  border-left: 1px solid var(--oxblood);
  background: var(--beige);
}
.gallery-story h2 { margin-bottom: 12px; color: var(--oxblood); font-size: clamp(28px, 3.25vw, 42px); line-height: 1.12; }
.gallery-story p { max-width: 82ch; color: var(--muted); }
.gallery-story p + p { margin-top: 8px; }
.gallery-story--fellowship { border-color: var(--brass); background: var(--parchment); }
.gallery-story--fellowship h2 { color: var(--walnut); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery-photo {
  display: block;
  padding: 7px;
  border: 1px solid var(--dark-rule);
  border-radius: 2px;
  background: var(--walnut);
}
.gallery-photo:hover { border-color: var(--brass); }
.gallery-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--espresso); filter: saturate(.92) contrast(.98) sepia(.06); }
.gallery-photo-label { display: flex; justify-content: space-between; gap: 7px; padding: 6px 3px 0; color: var(--on-dark); font-size: 13px; font-weight: 700; }
.installation-story .gallery-link { margin-top: 16px; }
.gallery-credit { margin-top: 12px; color: var(--on-dark); font-size: 13px; }
.gallery-return { margin-top: 20px; }

@media (max-width: 1000px) {
  .wrap { width: calc(100% - 70px); }
  .wide-break { display: none; }
  .work-row { grid-template-columns: 118px .94fr 1.06fr; gap: 9px 15px; }
  .impact-grid { grid-template-columns: 1fr 1.15fr; }
  .impact-notes { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 750px) {
  .wrap { width: calc(100% - 42px); }
  .header-inner { display: grid; justify-content: normal; min-height: 0; padding-block: 11px 3px; gap: 5px; }
  .header-inner .wordmark { justify-self: start; font-size: 18px; }
  .header-inner .wordmark img { width: 34px; height: 34px; }
  .main-nav { flex-wrap: wrap; justify-content: space-between; gap: 0 5px; }
  .main-nav a { min-height: 40px; padding-inline: 2px; font-size: 13px; }
  .main-nav .nav-contact { min-height: 33px; padding-inline: 8px; gap: 5px; }
  .hero-content { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 12px; }
  .hero h1 { margin-top: 17px; font-size: clamp(52px, 12vw, 88px); }
  .hero-titleline { margin-top: 17px; }
  .hero-links { margin-top: 20px; }
  .hero-art { justify-self: center; }
  .portrait-frame { aspect-ratio: 1.04; }
  .portrait-caption { min-height: 39px; font-size: 16px; }
  .hero-index p { font-size: 9px; gap: 6px; }
  .section { padding-block: 62px; }
  .section h2 { font-size: clamp(39px, 8.2vw, 62px); }
  .about-grid, .section-heading, .installation-grid, .beyond-work .about-grid, .connect-grid { grid-template-columns: 1fr; gap: 19px; }
  .about-copy { padding-top: 0; }
  .section-heading { margin-bottom: 22px; }
  .work-row { grid-template-columns: 1fr; padding-block: 17px; }
  .installation-feature { grid-column: 1; grid-row: auto; }
  .work-date { padding-top: 0; }
  .work-name p { margin-top: 5px; }
  .credential-grid { grid-template-columns: 1fr; }
  .rotary h2 { font-size: clamp(48px, 10.6vw, 74px); }
  .rotary-title-row { grid-template-columns: 1fr; gap: 17px; margin-bottom: 26px; }
  .impact-grid { grid-template-columns: 1fr; }
  .project-next .impact-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-notes { grid-template-columns: 1fr 1fr; }
  .installation h2 { max-width: 14ch; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
  .footer-inner p { grid-row: 2; }
  .back-to-top { grid-row: 1 / 3; grid-column: 2; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 460px) {
  .hero-index p:last-child { display: none; }
  .impact-notes { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .wrap { width: calc(100% - 32px); }
  .main-nav .nav-contact { padding-inline: 6px; }
  .hero-kicker { gap: 7px; font-size: 10px; }
  .hero-kicker > span { width: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .main-nav a, .button, .gallery-photo, .contact-arrow { transition: none; }
}

@media (max-width: 560px) {
  .project-next .impact-notes { grid-template-columns: 1fr; }
}

.main-nav a[aria-current="page"] { color: var(--brass); text-decoration: underline; text-underline-offset: 5px; }

.articles-hero { background: var(--walnut); color: var(--ivory); border-bottom: 1px solid var(--dark-rule); }
.articles-masthead {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: clamp(28px, 6vw, 92px);
  padding-block: clamp(56px, 10vw, 132px) clamp(48px, 8vw, 96px);
}
.articles-masthead h1 { margin-block: 15px 12px; font-size: clamp(58px, 9.4vw, 126px); line-height: .94; letter-spacing: -.055em; }
.articles-masthead h1 em { color: var(--brass); }
.articles-deck { color: var(--on-dark); font: clamp(18px, 2.3vw, 26px)/1.35 var(--serif); }
.articles-opening { border-left: 1px solid var(--dark-rule); padding-left: clamp(20px, 3vw, 43px); }
.articles-opening .eyebrow { color: var(--brass); }
.articles-topics .eyebrow { color: var(--cognac); }
.articles-opening h2, .articles-topics h2, .articles-subscribe h2 { margin-block: 7px 12px; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.055em; line-height: 1.05; }
.articles-opening > p:not(.eyebrow) { color: var(--on-dark); }
.articles-topic-list p { color: var(--muted); }
.articles-opening .text-link { margin-top: 10px; }
.articles-topics { display: grid; grid-template-columns: .75fr 1.25fr; gap: 26px 56px; padding-block: clamp(44px, 7vw, 92px); }
.articles-topic-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.articles-topic-list li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.articles-topic-list h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
.articles-topic-list p { grid-column: 2; }
.articles-subscribe {
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: center;
  gap: 24px 56px;
  margin-bottom: clamp(42px, 7vw, 85px);
  padding: clamp(26px, 5vw, 58px);
  border-radius: 2px;
  background: var(--espresso);
  color: var(--surface);
}
.articles-subscribe .eyebrow { color: var(--on-dark); }
.articles-subscribe .button { background: var(--paper); color: var(--espresso); }
.articles-subscribe .button:hover { background: var(--taupe); }
.articles-subscribe .button:focus-visible { outline-color: var(--on-dark); }
.articles-subscribe-note { max-width: 38ch; margin-top: 10px; font-size: 14px; color: var(--on-dark); }

@media (max-width: 760px) {
  .articles-masthead, .articles-topics, .articles-subscribe { grid-template-columns: 1fr; }
  .articles-opening { border-left: 0; border-top: 1px solid var(--dark-rule); padding: 22px 0 0; }
}

:is(.hero, .articles-hero, .rotary, .gallery-shell) .text-link,
.articles-hero .hero-kicker, .hero .hero-kicker { color: var(--brass); }
:is(.masthead, .hero, .rotary, .beyond-work, .articles-hero, .gallery-shell) :focus-visible {
  outline-color: var(--brass);
}
.hero .button-primary, .impact-feature .button-primary {
  background: var(--parchment);
  color: var(--espresso);
}
.hero .button-primary:hover, .impact-feature .button-primary:hover { background: var(--ivory); }

.installation-feature a, .installation-lead a {
  display: block;
  padding: clamp(6px, 1vw, 12px);
  border: 1px solid var(--brass);
  background: var(--parchment);
  transition: border-color .18s ease;
}
.installation-feature a:hover, .installation-lead a:hover { border-color: var(--cognac); }
.installation-feature img, .installation-lead img {
  width: 100%;
  height: auto;
  filter: saturate(.92) contrast(.98) sepia(.06);
}
.installation-feature figcaption, .installation-lead figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 14px;
  padding-top: 9px;
  font-size: 12px;
}
.installation-feature figcaption { color: var(--cognac); }
.installation-lead { margin: 0 0 clamp(25px, 5vw, 58px); }
.installation-lead figcaption { color: var(--on-dark); }
.installation-sequence { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 750px) {
  .installation-sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .installation-sequence { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .installation-feature a, .installation-lead a { transition: none; }
}