.about-hero { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 2%; padding-top: 65px; padding-bottom: 68px; min-height: 650px; }
.about-hero-copy { position: relative; z-index: 1; }
.about-hero-copy .eyebrow { margin-bottom: 30px; font-size: 10px; }
.about-hero h1 { font-family: 'Anton', Impact, sans-serif; font-size: clamp(75px, 7.2vw, 113px); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.about-hero h1 span { color: #7953e6; }
.about-hero-copy > p { font-size: 24px; line-height: 1.5; letter-spacing: -.035em; max-width: 430px; margin-top: 29px; }
.about-hero-copy .text-button { margin-top: 23px; }
.about-status { display: block; font-size: 13px; color: var(--muted); margin-top: 20px; }
.about-hero-scene { background: #e9efac; padding: 18px 0 0; margin-right: calc(-1 * var(--pad)); align-self: stretch; display: flex; align-items: flex-end; }
.about-hero-scene img { width: 112%; max-width: none; margin-left: -9%; margin-bottom: 5%; }
.about-ribbon { padding: 26px var(--pad); display: flex; justify-content: space-between; gap: 30px; color: var(--paper); background: var(--violet); font-size: 16px; font-weight: 750; letter-spacing: .09em; }
.about-why { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding-block: 110px; }
.about-page section .eyebrow { margin-bottom: 25px; }
.about-why h2 { font-size: clamp(52px, 5.1vw, 78px); }
.about-prose { padding-top: 38px; }
.about-prose p, .about-first-copy > p { font-size: 18px; line-height: 1.7; margin-bottom: 20px; }
.about-prose .large-copy { font-size: 28px; line-height: 1.35; letter-spacing: -.035em; font-weight: 600; margin-bottom: 25px; }
.about-first { background: var(--lilac); display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; }
.about-first-art { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.about-first-art > .eyebrow { align-self: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 12px; transform: rotate(-5deg); font-size: 10px; }
.about-first-art img { width: 108%; max-width: none; margin-left: -6%; }
.about-first-copy h2 { font-size: clamp(66px, 6.8vw, 98px); margin-bottom: 28px; line-height: 1.08; }
.about-first-copy h2 span { color: #603ec4; }
.about-first-copy > p { max-width: 500px; }
.about-first-copy .text-button { margin-top: 9px; }
.about-principles { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; }
.about-principles h2 { font-size: clamp(65px, 6.8vw, 98px); }
.about-principles h2 span { color: #e9efac; }
.about-principles-heading img { width: 88%; margin-top: 15px; }
.principle-list { list-style: none; padding: 0; margin: 25px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 42px 36px; align-content: center; }
.principle-list li { border-top: 1px solid #938698; padding-top: 22px; }
.principle-number { display: block; font-family: 'Anton', sans-serif; color: #e9efac; font-size: 49px; line-height: 1; margin-bottom: 22px; }
.principle-list h3 { font-size: 25px; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 17px; }
.principle-list p { color: #d7cedd; font-size: 16px; line-height: 1.6; }
.about-now { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; padding-block: 110px; }
.about-now h2 { font-size: clamp(50px, 4.8vw, 72px); }
.about-now > div > p { font-size: 20px; line-height: 1.55; max-width: 420px; margin-top: 26px; }
.about-status-board { border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--lilac); }
.about-status-board > div { padding: 30px; }
.about-status-board > div:first-child { background: #e9efac; border-bottom: 2px solid var(--ink); }
.status-label { font-size: 10px; letter-spacing: .12em; font-weight: 750; }
.about-status-board h3 { font-size: 28px; letter-spacing: -.04em; margin: 15px 0 11px; }
.about-status-board p { font-size: 16px; line-height: 1.6; }
.about-invite { background: var(--coral); display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.about-invite h2 { font-size: clamp(62px, 6.5vw, 96px); }
.about-invite .button { background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); min-width: 270px; }
.about-invite .button:hover { background: var(--lilac); }
.about-invite > div > p { font-size: 14px; margin-top: 22px; text-align: center; }
@media (max-width: 1100px) and (min-width: 761px) {
  .about-hero { grid-template-columns: 1fr 1fr; min-height: 570px; }
  .about-hero h1 { font-size: 8.4vw; }
  .about-hero-copy > p { font-size: 21px; }
  .about-hero-scene img { width: 115%; margin-left: -14%; margin-bottom: 12%; }
  .about-ribbon { font-size: 12px; gap: 20px; }
  .about-principles { grid-template-columns: 1fr; }
  .about-principles-heading { display: grid; grid-template-columns: 1fr 1fr; }
  .about-principles-heading > .eyebrow { grid-column: 1; }
  .about-principles-heading img { grid-column: 2; grid-row: 1 / 3; width: 75%; justify-self: end; margin: -30px 0; }
  .principle-list { margin-top: 40px; gap: 38px; }
  .about-first { gap: 5%; }
  .about-why, .about-now { gap: 6%; }
}
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; gap: 34px; padding-top: 31px; padding-bottom: 0; min-height: 0; }
  .about-hero h1 { font-size: clamp(46px, 14.8vw, 103px); }
  .about-page section .eyebrow { font-size: 9px; margin-bottom: 21px; }
  .about-hero-copy > p { font-size: 21px; margin-top: 24px; }
  .about-hero-copy .text-button { font-size: 16px; margin-top: 19px; }
  .about-status { font-size: 12px; margin-top: 17px; }
  .about-hero-scene { margin-left: calc(-1 * var(--pad)); padding: 8px 20px 0; }
  .about-hero-scene img { width: 100%; margin: 0 0 12px; }
  .about-ribbon { flex-direction: column; align-items: center; gap: 8px; padding-block: 23px; font-size: 11px; }
  .about-why, .about-first, .about-principles, .about-now { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 65px; }
  .about-why h2, .about-now h2 { font-size: clamp(43px, 11.1vw, 65px); }
  .about-prose { padding-top: 0; }
  .about-prose .large-copy { font-size: 24px; }
  .about-prose p, .about-first-copy > p { font-size: 17px; }
  .about-first-copy { grid-row: 1; }
  .about-first-copy h2 { font-size: clamp(63px, 16vw, 90px); }
  .about-first-art > .eyebrow { display: none; }
  .about-first-art img { width: 95%; margin-left: 2%; }
  .about-principles h2 { font-size: clamp(68px, 17vw, 95px); }
  .about-principles-heading img { width: 85%; margin: 24px auto 0; }
  .principle-list { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
  .principle-list li { display: grid; grid-template-columns: 49px 1fr; gap: 0 18px; }
  .principle-number { grid-row: 1 / 3; font-size: 40px; margin: 0; }
  .principle-list h3 { font-size: 24px; margin-bottom: 11px; }
  .principle-list p { font-size: 16px; }
  .about-now > div > p { font-size: 18px; margin-top: 25px; }
  .about-status-board { box-shadow: 6px 6px 0 var(--lilac); }
  .about-status-board > div { padding: 24px; }
  .about-status-board h3 { font-size: 26px; }
  .about-invite { display: block; padding-block: 62px; }
  .about-invite h2 { font-size: clamp(51px, 12vw, 74px); }
  .about-invite .button { min-width: 0; width: 100%; margin-top: 35px; font-size: 20px; }
}