/* Steven Fan — personal site */
:root {
  --ink: #142018;
  --forest: #122018;
  --forest-soft: #1e3526;
  --paper: #eeeadd;
  --paper-bright: #f8f5eb;
  --clay: #d26d48;
  --moss: #9ea95f;
  --line: rgba(20, 32, 24, 0.18);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --shell: min(1240px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
::selection { background: var(--clay); color: var(--paper-bright); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 12px;
  transform: translateY(-140%);
  padding: 10px 16px;
  border-radius: 99px;
  color: white;
  background: var(--ink);
}
.skip-link:focus { transform: none; }

.noise {
  position: fixed;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.site-header {
  width: var(--shell);
  height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.monogram {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.monogram i {
  display: block;
  color: var(--clay);
  font-family: var(--serif);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.site-header nav { display: flex; gap: 34px; }
.site-header nav a,
.header-link,
.site-footer a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.site-header nav a { position: relative; }
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}
.site-header nav a:hover::after { right: 0; }
.header-link { justify-self: end; }
.header-link span { color: var(--clay); }

.hero {
  width: var(--shell);
  min-height: min(760px, calc(100svh - 92px));
  margin: 0 auto;
  padding: 84px 0 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
}
.eyebrow,
.kicker {
  margin: 0 0 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 5px rgba(210, 109, 72, .13);
}
.hero h1,
.section-heading h2,
.project-copy h2,
.closing h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .88;
  margin: 0;
}
.hero h1 { font-size: clamp(66px, 7.2vw, 112px); }
.hero h1 em { color: var(--clay); font-weight: 400; }
.hero-deck {
  max-width: 650px;
  margin: 36px 0 0;
  font-family: var(--serif);
  font-size: clamp(23px, 2.2vw, 34px);
  line-height: 1.22;
  letter-spacing: -.025em;
}
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 42px; }
.button {
  width: fit-content;
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--paper-bright); background: var(--forest); }
.button-primary:hover { background: var(--clay); }
.text-link {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.text-link span { color: var(--clay); }

.portrait-stage { min-height: 490px; position: relative; }
.portrait-backdrop {
  position: absolute;
  width: 78%;
  aspect-ratio: .78;
  top: 2%;
  right: 6%;
  background: var(--forest-soft) url("assets/forest-floor.jpg") center / cover;
  clip-path: polygon(13% 4%, 95% 0, 100% 85%, 44% 100%, 0 72%);
  filter: saturate(.75) contrast(1.05);
}
.portrait-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 34, 23, .26);
  mix-blend-mode: multiply;
}
.portrait-frame {
  position: absolute;
  width: clamp(245px, 25vw, 350px);
  aspect-ratio: 1;
  top: 50%;
  left: 7%;
  transform: translateY(-45%);
  border: 9px solid var(--paper);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(13, 25, 17, .25);
  z-index: 2;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.orbit { position: absolute; border: 1px solid rgba(238, 234, 221, .55); border-radius: 50%; z-index: 1; }
.orbit-one { width: 88%; aspect-ratio: 1; top: -10%; right: -29%; }
.orbit-two { width: 59%; aspect-ratio: 1; bottom: -11%; left: -7%; border-color: rgba(20, 32, 24, .25); }
.portrait-label {
  width: 205px;
  padding: 15px 17px 16px;
  position: absolute;
  z-index: 3;
  right: -3%;
  bottom: 7%;
  color: var(--forest);
  background: var(--paper-bright);
  border-left: 4px solid var(--clay);
  box-shadow: 0 14px 34px rgba(13, 25, 17, .18);
  transform: rotate(-2deg);
}
.portrait-label span {
  display: block;
  margin-bottom: 6px;
  color: var(--clay);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.portrait-label b {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.08;
}

.field-notes {
  width: 100%;
  overflow: hidden;
  color: var(--paper-bright);
  background: var(--clay);
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.marquee-track {
  width: max-content;
  height: 64px;
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 28s linear infinite;
}
.marquee-group {
  min-width: 100vw;
  padding-inline: 15px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: 30px;
}
.marquee-track span { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.marquee-track i { opacity: .65; font-style: normal; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.section-shell { width: var(--shell); margin: 0 auto; }
.now,
.signals {
  padding-top: 145px;
  padding-bottom: 150px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(70px, 11vw, 170px);
}
.section-heading { position: relative; }
.section-heading .kicker { color: var(--clay); }
.section-heading h2 { font-size: clamp(61px, 6.2vw, 94px); }
.thread-list { border-top: 1px solid var(--line); }
.thread {
  min-height: 178px;
  padding: 32px 0;
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: start;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease;
}
.thread:hover { padding-left: 12px; }
.thread-number { padding-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--clay); }
.thread h3 { margin: 0 0 11px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 41px); letter-spacing: -.035em; line-height: 1; }
.thread p { max-width: 520px; margin: 0; color: rgba(20,32,24,.68); font-size: 14px; }
.thread-symbol { font-family: var(--serif); font-size: 32px; color: var(--moss); }

.project-section {
  min-height: 810px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  color: var(--paper-bright);
  background: var(--forest);
}
.project-image { min-height: 650px; position: relative; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.06); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.project-image:hover img { transform: scale(1.035); }
.project-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,19,11,.68)); }
.project-image p {
  position: absolute;
  left: 40px;
  bottom: 35px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.65;
  text-transform: uppercase;
}
.project-copy { padding: clamp(70px, 8vw, 120px); display: flex; flex-direction: column; justify-content: space-between; }
.project-copy .kicker { color: var(--moss); }
.project-copy h2 { font-size: clamp(76px, 8vw, 126px); }
.project-bottom { max-width: 520px; margin-top: 80px; }
.project-bottom p { color: rgba(248,245,235,.64); font-size: 14px; }
.project-bottom .project-lede { margin: 0 0 28px; color: var(--paper-bright); font-family: var(--serif); font-size: clamp(26px, 2.7vw, 39px); line-height: 1.13; letter-spacing: -.03em; }
.button-light { margin-top: 28px; color: var(--forest); background: var(--paper-bright); }
.button-light:hover { color: var(--paper-bright); background: var(--clay); }

.signals { padding-top: 150px; }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signal {
  min-height: 310px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper-bright);
  border: 1px solid rgba(20,32,24,.08);
  overflow: hidden;
  position: relative;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}
.signal:hover { color: var(--paper-bright); background: var(--clay); transform: translateY(-4px); }
.signal-featured { grid-column: 1 / -1; min-height: 355px; }
.signal-meta { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); transition: color .3s ease; }
.signal:hover .signal-meta { color: rgba(255,255,255,.68); }
.signal blockquote { max-width: 760px; margin: 45px 0 0; font-family: var(--serif); font-size: clamp(27px, 3.1vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
.signal:not(.signal-featured) blockquote { font-size: clamp(24px, 2.3vw, 34px); }
.signal-arrow { align-self: flex-end; font-size: 20px; }
.signal-photo { color: var(--paper-bright); }
.signal-photo-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(15,27,18,.38), rgba(15,27,18,.76)), url("assets/forest-floor.jpg") center / cover;
  transition: transform .8s ease;
}
.signal-photo:hover .signal-photo-bg { transform: scale(1.05); }
.signal-photo-copy, .signal-photo .signal-arrow { position: relative; z-index: 1; }
.signal-photo .signal-meta { color: var(--moss); }

.closing {
  min-height: 650px;
  padding: 130px 32px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--paper-bright);
}
.closing-copy { position: relative; z-index: 2; }
.closing .kicker { color: var(--clay); }
.closing h2 { font-size: clamp(65px, 8vw, 116px); }
.closing .button { margin: 45px auto 0; }
.closing-shape { position: absolute; border: 1px solid rgba(20,32,24,.12); border-radius: 50%; }
.closing-shape-one { width: 610px; height: 610px; left: -270px; top: -160px; }
.closing-shape-two { width: 440px; height: 440px; right: -170px; bottom: -110px; box-shadow: 0 0 0 55px rgba(158,169,95,.06), 0 0 0 110px rgba(158,169,95,.035); }

.site-footer {
  min-height: 110px;
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
}
.site-footer p { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.site-footer > div { justify-self: end; display: flex; gap: 24px; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 940px) {
  :root { --shell: min(100% - 40px, 760px); }
  .site-header { grid-template-columns: 1fr 1fr; }
  .site-header nav { display: none; }
  .hero { min-height: auto; padding: 75px 0 85px; grid-template-columns: 1fr; }
  .hero-copy { position: relative; z-index: 4; }
  .portrait-stage { width: min(560px, 100%); min-height: 500px; margin: 10px auto 0; }
  .now, .signals { grid-template-columns: 1fr; gap: 70px; }
  .project-section { grid-template-columns: 1fr; }
  .project-image { min-height: 620px; }
  .project-copy { min-height: 680px; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 32px); }
  .site-header { height: 74px; }
  .header-link { font-size: 10px; }
  .hero { padding-top: 58px; gap: 50px; }
  .hero h1 { font-size: clamp(55px, 16vw, 76px); }
  .hero-deck { font-size: 24px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .portrait-stage { min-height: 410px; }
  .portrait-frame { width: 240px; left: 1%; }
  .portrait-backdrop { width: 85%; right: 0; }
  .portrait-label { right: 0; bottom: 3%; }
  .field-notes .marquee-track { height: 54px; }
  .now, .signals { padding-top: 100px; padding-bottom: 105px; }
  .section-heading h2 { font-size: 62px; }
  .thread { grid-template-columns: 35px 1fr; min-height: 200px; }
  .thread-symbol { display: none; }
  .project-image { min-height: 460px; }
  .project-image p { left: 24px; bottom: 23px; }
  .project-copy { min-height: 650px; padding: 70px 24px; }
  .project-copy h2 { font-size: 78px; }
  .project-bottom { margin-top: 60px; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-featured { grid-column: auto; }
  .signal, .signal-featured { min-height: 320px; }
  .signal blockquote, .signal:not(.signal-featured) blockquote { font-size: 28px; }
  .closing { min-height: 580px; }
  .closing h2 { font-size: 58px; }
  .site-footer { min-height: 160px; padding: 28px 0; grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; }
  .site-footer > div { gap: 14px; }
  .site-footer a { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .project-image img, .signal, .signal-photo-bg { transition: none; }
}

/* Portfolio / discovery revision */
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(62px, 6.7vw, 102px); }
.hero h1 em,
.work-intro h2 em,
.invitation h2 em { color: var(--clay); font-weight: 400; }

.purpose {
  padding-top: 132px;
  padding-bottom: 132px;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(70px, 11vw, 170px);
  border-bottom: 1px solid var(--line);
}
.purpose-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
}
.purpose-label .kicker { color: var(--clay); }
.purpose-index {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(20, 32, 24, .42);
}
.purpose-copy { max-width: 780px; }
.purpose-lede {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: clamp(48px, 5.3vw, 78px);
  line-height: .98;
  letter-spacing: -.045em;
}
.purpose-copy > p:last-child {
  max-width: 690px;
  margin: 0;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.58;
  color: rgba(20, 32, 24, .68);
}

.work-intro {
  padding-top: 145px;
  padding-bottom: 105px;
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: end;
  gap: clamp(60px, 10vw, 150px);
}
.work-intro .section-heading .kicker { color: var(--clay); }
.work-intro .section-heading h2 { font-size: clamp(67px, 7vw, 104px); }
.work-deck {
  max-width: 520px;
  margin: 0 0 5px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.portfolio {
  padding-top: 18px;
  padding-bottom: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.portfolio-card {
  min-height: 650px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20, 32, 24, .09);
  isolation: isolate;
}
.card-link:hover b,
.card-link:focus-visible b { transform: translate(3px, -3px); }
.card-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card-copy { max-width: 630px; position: relative; z-index: 3; }
.card-copy h3 {
  margin: 0 0 25px;
  font-family: var(--serif);
  font-size: clamp(50px, 5.2vw, 76px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.045em;
}
.card-copy p { max-width: 610px; margin: 0; font-size: 14px; line-height: 1.75; }
.card-link {
  width: fit-content;
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.card-link b { font-size: 17px; transition: transform .2s ease; }

.community-card {
  grid-column: 1 / -1;
  min-height: 610px;
  color: var(--forest);
  background: #d97955;
}
.community-card .card-copy { max-width: 720px; }
.community-card .card-copy p { color: rgba(20,32,24,.69); }
.table-mark {
  width: min(48vw, 610px);
  height: 280px;
  position: absolute;
  right: -3%;
  top: 10%;
  z-index: 1;
  border: 1px solid rgba(20,32,24,.3);
  border-radius: 50%;
  transform: rotate(-5deg);
}
.table-mark::before,
.table-mark::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(20,32,24,.13);
  border-radius: 50%;
}
.table-mark::after { inset: 23%; }
.table-mark i {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(20,32,24,.16);
}
.table-mark i:nth-child(1) { top: -26px; left: 24%; }
.table-mark i:nth-child(2) { top: -24px; right: 22%; }
.table-mark i:nth-child(3) { top: 41%; right: -25px; }
.table-mark i:nth-child(4) { bottom: -25px; right: 25%; }
.table-mark i:nth-child(5) { bottom: -23px; left: 23%; }
.table-mark i:nth-child(6) { top: 41%; left: -26px; }

.geoship-card {
  color: var(--paper-bright);
  background: #17382f;
}
.geoship-card:focus-within { background: #1d463a; }
.geoship-card .card-topline { color: var(--moss); }
.geoship-card .card-copy p { color: rgba(248,245,235,.66); }
.dome-mark {
  width: 82%;
  aspect-ratio: 2 / 1;
  position: absolute;
  left: 9%;
  top: 15%;
  overflow: hidden;
  border: 1px solid rgba(248,245,235,.32);
  border-radius: 100% 100% 0 0;
  opacity: .9;
}
.dome-mark::before,
.dome-mark::after,
.dome-line {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(248,245,235,.15);
  transform-origin: 50% 100%;
}
.dome-mark::before { transform: rotate(30deg); }
.dome-mark::after { transform: rotate(-30deg); }
.dome-one { transform: rotate(60deg); }
.dome-two { transform: rotate(-60deg); }
.dome-three { width: 1px; left: 50%; border: 0; border-left: 1px solid rgba(248,245,235,.23); }
.dome-four { inset: 42% -20% -30%; border-radius: 50%; }

.lab-card { background: var(--paper-bright); }
.lab-card .card-topline { color: var(--clay); }
.lab-card .card-copy p { color: rgba(20,32,24,.65); }
.lab-diagram {
  height: 240px;
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  z-index: 1;
}
.lab-diagram svg { width: 100%; height: 100%; fill: none; stroke: rgba(20,32,24,.19); stroke-width: 1; }
.node {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(20,32,24,.24);
  border-radius: 50%;
  color: rgba(20,32,24,.62);
  background: var(--paper-bright);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.node-a { left: 3%; top: 35%; }
.node-b { left: calc(50% - 33px); top: 0; }
.node-c { right: 3%; top: 36%; color: var(--paper-bright); background: var(--clay); border-color: var(--clay); }

.invitation {
  padding: 145px 0 140px;
  color: var(--paper-bright);
  background: var(--forest);
}
.invitation-heading {
  margin-bottom: 90px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
}
.invitation-heading .kicker { color: var(--moss); }
.invitation-heading h2 {
  max-width: 920px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(70px, 7.8vw, 116px);
  font-weight: 400;
  line-height: .89;
  letter-spacing: -.055em;
}
.invitation-list { border-top: 1px solid rgba(248,245,235,.19); }
.invite-row {
  min-height: 180px;
  padding: 34px 0;
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid rgba(248,245,235,.19);
}
.invite-number { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--moss); }
.invite-row h3 {
  max-width: 940px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 47px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.025em;
}
.invite-arrow { font-size: 24px; }

.closing-copy > p:not(.kicker) {
  max-width: 540px;
  margin: 30px auto 0;
  color: rgba(20,32,24,.64);
  font-size: 15px;
}
.closing .button { margin-top: 34px; }

@media (max-width: 940px) {
  .purpose { grid-template-columns: 1fr; gap: 40px; }
  .purpose-label { min-height: auto; flex-direction: row; }
  .work-intro { grid-template-columns: 1fr; gap: 55px; }
  .portfolio { grid-template-columns: 1fr; }
  .community-card { grid-column: auto; }
  .portfolio-card { min-height: 620px; }
  .table-mark { width: 72vw; max-width: 580px; right: -12%; }
  .invitation-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(54px, 15vw, 72px); }
  .purpose { padding-top: 95px; padding-bottom: 95px; }
  .purpose-lede { font-size: 51px; }
  .purpose-copy > p:last-child { font-size: 16px; }
  .work-intro { padding-top: 100px; padding-bottom: 75px; }
  .work-intro .section-heading h2 { font-size: 62px; }
  .work-deck { font-size: 27px; }
  .portfolio { padding-bottom: 100px; }
  .portfolio-card { min-height: 590px; padding: 24px; }
  .card-topline { font-size: 8px; }
  .card-copy h3 { font-size: 48px; }
  .table-mark { width: 390px; height: 190px; top: 18%; right: -45%; }
  .table-mark i { width: 36px; height: 36px; }
  .table-mark i:nth-child(1), .table-mark i:nth-child(2) { top: -19px; }
  .table-mark i:nth-child(3) { right: -19px; }
  .table-mark i:nth-child(4), .table-mark i:nth-child(5) { bottom: -18px; }
  .table-mark i:nth-child(6) { left: -19px; }
  .dome-mark { width: 92%; left: 4%; top: 18%; }
  .lab-diagram { left: 4%; right: 4%; top: 17%; }
  .invitation { padding-top: 100px; padding-bottom: 95px; }
  .invitation-heading { margin-bottom: 65px; }
  .invitation-heading h2 { font-size: 60px; }
  .invite-row { min-height: 200px; grid-template-columns: 35px 1fr; gap: 12px; }
  .invite-row h3 { font-size: 27px; }
  .invite-arrow { font-size: 18px; }
  .site-footer > div { flex-wrap: wrap; justify-content: flex-end; }
}

/* Source-driven portfolio revision */
.purpose-copy { max-width: 850px; }
.purpose-copy > p:last-child { max-width: 790px; }

.potluck-wrap { padding-top: 0; padding-bottom: 115px; }
.potluck-card { min-height: 690px; }
.potluck-card .card-copy { max-width: 750px; }
.potluck-card .card-copy p { max-width: 735px; }
.potluck-stat {
  position: absolute;
  z-index: 2;
  left: 34px;
  top: 104px;
  display: flex;
  align-items: baseline;
  gap: 15px;
}
.potluck-stat strong {
  font-family: var(--serif);
  font-size: clamp(100px, 14vw, 206px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.075em;
}
.potluck-stat span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.potluck-card .table-mark {
  width: min(46vw, 630px);
  height: 290px;
  right: -4%;
  top: 17%;
  opacity: .8;
}

.cascade-project { min-height: 920px; }
.cascade-project .project-copy { padding: clamp(64px, 6vw, 98px); }
.cascade-project .project-bottom { margin-top: 58px; }
.project-stats {
  margin: 34px 0 6px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  border-top: 1px solid rgba(248,245,235,.18);
  border-bottom: 1px solid rgba(248,245,235,.18);
}
.project-stats div { display: flex; flex-direction: column; gap: 4px; }
.project-stats strong {
  color: var(--paper-bright);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}
.project-stats span {
  color: rgba(248,245,235,.48);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.geoship-wrap { padding-top: 115px; padding-bottom: 145px; }
.wide-card { grid-column: 1 / -1; min-height: 760px; }
.wide-card .card-copy { max-width: 830px; }
.wide-card .card-copy h3 { font-size: clamp(58px, 6.6vw, 98px); }
.wide-card .card-copy p { max-width: 800px; font-size: 15px; }
.card-kicker {
  margin: 0 0 24px !important;
  color: var(--moss) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.wide-card .dome-mark {
  width: min(58vw, 790px);
  left: auto;
  right: -3%;
  top: 7%;
  opacity: .56;
}

.lab-section {
  padding: 145px 0 155px;
  background: #dfdacb;
  border-top: 1px solid var(--line);
}
.lab-heading {
  display: grid;
  grid-template-columns: 1.25fr .65fr;
  align-items: end;
  gap: clamp(60px, 10vw, 145px);
}
.lab-heading .kicker { color: var(--clay); }
.lab-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(58px, 6.6vw, 96px);
  font-weight: 400;
  line-height: .93;
  letter-spacing: -.052em;
}
.lab-heading h2 em { color: var(--clay); font-weight: 400; }
.lab-heading > p {
  max-width: 500px;
  margin: 0 0 4px;
  color: rgba(20,32,24,.66);
  font-size: 15px;
  line-height: 1.72;
}
.project-index {
  margin-top: 95px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lab-project {
  min-height: 435px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid rgba(20,32,24,.09);
}
.lab-project-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--clay);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.lab-project h3 {
  max-width: 540px;
  margin: auto 0 26px;
  font-family: var(--serif);
  font-size: clamp(49px, 5.4vw, 78px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.045em;
}
.lab-project p {
  max-width: 550px;
  margin: 0 0 31px;
  color: rgba(20,32,24,.64);
  font-size: 14px;
  line-height: 1.68;
}
.lab-project > p:last-child { margin-bottom: 0; }
.knowledge-project .project-pair:last-child { margin-bottom: 0; }
.project-status {
  width: fit-content;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dome-project { color: var(--paper-bright); background: #17382f; }
.dome-project .lab-project-meta { color: var(--moss); }
.dome-project p { max-width: 510px; color: rgba(248,245,235,.63); }
.dome-project .project-status { border-color: rgba(248,245,235,.2); }
.mini-dome {
  width: 330px;
  height: 165px;
  position: absolute;
  right: -60px;
  top: 74px;
  overflow: hidden;
  border: 1px solid rgba(248,245,235,.25);
  border-radius: 100% 100% 0 0;
  opacity: .65;
}
.mini-dome::before,
.mini-dome::after,
.mini-dome i {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(248,245,235,.12);
  transform-origin: 50% 100%;
}
.mini-dome::before { transform: rotate(30deg); }
.mini-dome::after { transform: rotate(-30deg); }
.mini-dome i:nth-child(1) { transform: rotate(60deg); }
.mini-dome i:nth-child(2) { transform: rotate(-60deg); }
.mini-dome i:nth-child(3) { inset: 45% -20% -30%; border-radius: 50%; }

.writing {
  margin-top: 115px;
  padding-top: 80px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(65px, 10vw, 145px);
  border-top: 1px solid var(--line);
}
.writing-intro .kicker { color: var(--clay); }
.writing-intro h3 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(46px, 5vw, 70px);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.04em;
}
.writing-intro > p:last-child { max-width: 390px; margin: 0; color: rgba(20,32,24,.6); font-size: 13px; line-height: 1.65; }
.writing-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.writing-list li {
  min-height: 96px;
  padding: 21px 0;
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.writing-list span { color: var(--clay); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.writing-list p {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

@media (max-width: 940px) {
  .potluck-card { min-height: 720px; }
  .potluck-card .table-mark { width: 72vw; right: -14%; }
  .wide-card { grid-column: auto; min-height: 760px; }
  .wide-card .dome-mark { width: 82vw; right: -20%; }
  .lab-heading { grid-template-columns: 1fr; gap: 45px; }
  .project-index { grid-template-columns: 1fr; }
  .lab-project { min-height: 410px; }
  .writing { grid-template-columns: 1fr; gap: 55px; }
}

@media (max-width: 620px) {
  .purpose-lede { font-size: 47px; }
  .potluck-wrap { padding-bottom: 85px; }
  .potluck-card { min-height: 710px; }
  .potluck-stat { left: 24px; top: 105px; flex-direction: column; gap: 12px; }
  .potluck-stat strong { font-size: 116px; }
  .potluck-card .table-mark { width: 410px; height: 200px; top: 27%; right: -57%; }
  .potluck-card .card-copy h3 { font-size: 46px; }
  .cascade-project { min-height: auto; }
  .cascade-project .project-copy { min-height: 850px; padding: 70px 24px; }
  .project-stats { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .project-stats div:last-child { grid-column: 1 / -1; }
  .geoship-wrap { padding-top: 85px; padding-bottom: 100px; }
  .wide-card { min-height: 800px; }
  .wide-card .card-topline { align-items: flex-start; flex-direction: column; }
  .wide-card .dome-mark { width: 470px; right: -70%; top: 14%; }
  .wide-card .card-copy h3 { font-size: 49px; }
  .wide-card .card-copy p { font-size: 13px; }
  .lab-section { padding-top: 100px; padding-bottom: 105px; }
  .lab-heading h2 { font-size: 57px; }
  .project-index { margin-top: 65px; }
  .lab-project { min-height: 440px; padding: 24px; }
  .lab-project h3 { font-size: 48px; }
  .mini-dome { width: 260px; height: 130px; right: -85px; }
  .writing { margin-top: 80px; padding-top: 65px; }
  .writing-list li { grid-template-columns: 30px 1fr; }
  .writing-list p { font-size: 23px; }
}

/* Physical-lab emphasis */
.lab-project-featured {
  grid-column: 1 / -1;
  min-height: 500px;
  color: var(--forest);
  background: #d97955;
}
.lab-project-featured .lab-project-meta { color: rgba(20,32,24,.58); }
.lab-project-copy {
  max-width: 670px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}
.lab-project-featured h3 {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(70px, 8vw, 116px);
}
.lab-project-featured p {
  max-width: 660px;
  color: rgba(20,32,24,.7);
}
.microfluidic-map {
  width: min(61%, 750px);
  height: 280px;
  position: absolute;
  z-index: 1;
  right: -2%;
  top: 66px;
  opacity: .54;
}
.microfluidic-map svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #eeeadd;
  stroke: rgba(20,32,24,.65);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.microfluidic-map path { fill: none; }
.robotics-project { background: #d9d6a4; }
.robotics-project .lab-project-meta { color: rgba(20,32,24,.55); }

@media (max-width: 940px) {
  .lab-project-featured { grid-column: auto; }
  .microfluidic-map { width: 74%; right: -12%; }
}

@media (max-width: 620px) {
  .lab-project-featured { min-height: 620px; }
  .lab-project-featured h3 { font-size: 68px; }
  .microfluidic-map { width: 540px; height: 210px; right: -82%; top: 92px; opacity: .4; }
}

/* Dialed-in lab hierarchy */
.microfluidics-project {
  color: var(--forest);
  background: #d97955;
}
.microfluidics-project > *:not(.microfluidic-map) { position: relative; z-index: 2; }
.microfluidics-project .lab-project-meta { color: rgba(20,32,24,.58); }
.microfluidics-project p { color: rgba(20,32,24,.7); }
.microfluidics-project .microfluidic-map {
  width: 94%;
  height: 230px;
  right: -24%;
  top: 58px;
  opacity: .27;
}
.knowledge-project {
  color: var(--paper-bright);
  background: #17382f;
}
.knowledge-project .lab-project-meta { color: var(--moss); }
.knowledge-project h3 { margin-top: 72px; }
.knowledge-project p { color: rgba(248,245,235,.66); }
.knowledge-project .project-status { border-color: rgba(248,245,235,.2); }
.project-pair {
  margin: 0 0 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.project-pair span {
  padding: 7px 11px;
  border: 1px solid rgba(248,245,235,.25);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.language-project {
  grid-column: 1 / -1;
  min-height: 380px;
  background: var(--paper-bright);
}
.language-project h3 { max-width: 920px; font-size: clamp(44px, 6.3vw, 90px); }
.language-project p { max-width: 760px; }

@media (max-width: 940px) {
  .language-project { grid-column: auto; }
}

@media (max-width: 620px) {
  .microfluidics-project .microfluidic-map {
    width: 470px;
    height: 190px;
    right: -82%;
    top: 78px;
    opacity: .22;
  }
  .knowledge-project h3 { margin-top: 54px; }
  .language-project { min-height: 460px; }
}

/* Hedron: community organized around shared capability */
.hedron-wrap {
  padding-top: 10px;
  padding-bottom: 150px;
}
.hedron-card {
  min-height: 750px;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  color: var(--paper-bright);
  background: #17382f;
  border: 1px solid rgba(20,32,24,.09);
}
.hedron-visual {
  min-height: 750px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: var(--forest);
  background: #d97955;
  border-right: 1px solid rgba(20,32,24,.18);
}
.hedron-epoch {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hedron-epoch b {
  font-family: var(--serif);
  font-size: clamp(28px,3.2vw,46px);
  font-weight: 400;
  letter-spacing: -.035em;
}
.hedron-wire {
  width: min(92%, 510px);
  position: absolute;
  left: 50%;
  top: 50%;
  fill: none;
  stroke: rgba(20,32,24,.53);
  stroke-width: 1.25;
  transform: translate(-50%,-50%) rotate(-5deg);
}
.hedron-wire circle { fill: var(--paper); stroke: var(--forest); }
.hedron-tool-index {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hedron-tool-index span {
  width: fit-content;
  padding-top: 8px;
  border-top: 1px solid rgba(20,32,24,.35);
}
.hedron-copy {
  min-width: 0;
  padding: 34px clamp(34px,5vw,74px) clamp(48px,6vw,82px);
  display: flex;
  flex-direction: column;
}
.hedron-copy .card-topline { color: var(--moss); }
.hedron-copy-main {
  max-width: 820px;
  margin-top: auto;
}
.hedron-copy-main h2 {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-size: clamp(58px,6.3vw,94px);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -.052em;
}
.hedron-copy-main h2 em { color: #e89b78; font-weight: 400; }
.hedron-copy-main > p:not(.card-kicker) {
  max-width: 740px;
  margin: 0;
  color: rgba(248,245,235,.67);
  font-size: 15px;
  line-height: 1.78;
}
.hedron-copy-main .card-link { color: var(--paper-bright); }

@media (max-width: 940px) {
  .hedron-card { grid-template-columns: 1fr; }
  .hedron-visual { min-height: 520px; border-right: 0; border-bottom: 1px solid rgba(20,32,24,.18); }
  .hedron-wire { width: min(70%,500px); }
  .hedron-copy { min-height: 660px; }
}

@media (max-width: 620px) {
  .hedron-wrap { padding-bottom: 100px; }
  .hedron-visual { min-height: 400px; padding: 24px; }
  .hedron-wire { width: 88%; }
  .hedron-tool-index { gap: 5px; }
  .hedron-copy { min-height: 650px; padding: 25px 24px 42px; }
  .hedron-copy .card-topline { flex-direction: column; gap: 7px; }
  .hedron-copy-main h2 { font-size: 54px; }
  .hedron-copy-main > p:not(.card-kicker) { font-size: 14px; }
}