.about-hero {
position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(5.5rem, 10vw, 8.5rem) 0 clamp(2rem, 4vw, 3.5rem);
      color: var(--ink);
      background:
        radial-gradient(
          circle at 84% 25%,
          var(--sun) 0 7%,
          transparent 7.2%
        ),
        linear-gradient(
          108deg,
          #f8f3df 0 67%,
          rgba(154, 183, 91, .24) 67% 83%,
          rgba(116, 173, 179, .22) 83% 100%
        );
      border-bottom: 3px solid var(--ink);
}

.about-hero::before,
    .about-hero::after {
content: none;
}

.about-hero-inner {
width: min(100%, var(--page-max));
}

.about-title {
position: relative;
      display: inline-block;
      max-width: 900px;
      margin-bottom: 1.5rem;
      color: var(--clay);
      z-index: 0;
}

.about-title-first {
color: var(--forest);
}

.about-title-second {
position: relative;
      color: var(--clay);
      z-index: 0;
}

.about-title-second::after {
content: "";
      position: absolute;
      left: 2%;
      right: -2%;
      bottom: .01em;
      z-index: -1;
      height: .24em;
      background: var(--sun-soft);
      clip-path: polygon(0 28%, 100% 0, 97% 78%, 3% 100%);
      transform: rotate(-1.5deg);
}

.about-content {
padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
      background: var(--paper);
}

.about-intro {
max-width: 860px;
      margin-bottom: clamp(4rem, 7vw, 6rem);
      color: var(--ink-soft);
      font-size: clamp(1.05rem, 1.7vw, 1.18rem);
      line-height: 1.8;
}

.editor-note {
padding-top: clamp(2rem, 4vw, 3rem);
      border-top: 2px solid var(--ink);
}

.editor-note h2 {
margin-bottom: clamp(2rem, 4vw, 3rem);
      color: var(--forest);
}

.editor-note-copy {
column-count: 2;
      column-gap: clamp(2.5rem, 6vw, 5rem);
      column-rule: 0;
      color: var(--ink-soft);
      font-size: 1.04rem;
      line-height: 1.82;
}

.editor-note-copy p {
margin: 0 0 1.4rem;
      break-inside: avoid;
}

.editor-column-break {
break-before: column;
}

.editor-signoff {
width: fit-content;
      margin: clamp(1rem, 2vw, 1.5rem) 0 0 auto;
      padding-top: .85rem;
      border-top: 2px solid var(--sun-soft);
      color: var(--ink);
}

.editor-signature,
.editor-role {
display: block;
}

.editor-signature {
margin-bottom: .2rem;
      color: var(--forest);
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.15;
}

.editor-role {
color: var(--ink-soft);
      font-family: 'Space Mono', monospace;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
}

.explore-about {
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(5.5rem, 10vw, 8.5rem);
      background: var(--paper);
}

.about-note {
width: 100%;
      max-width: none;
      margin: 0;
      padding: clamp(1.8rem, 4vw, 2.6rem);
      background: var(--paper-soft);
      border: 2px solid var(--ink);
      box-shadow:
        8px 8px 0 var(--sun-soft),
        11px 11px 0 var(--ink);
      text-align: left;
}

.about-note h2 {
margin-bottom: .8rem;
      color: var(--forest);
      font-size: clamp(2rem, 3.5vw, 3rem);
}

.about-note p {
max-width: 760px;
      margin-bottom: 0;
      color: var(--ink-soft);
      line-height: 1.7;
}

.about-note a {
font-weight: 700;
}

@media (max-width: 650px) {
.about-hero {
padding-top: 4.5rem;
}

.about-title {
width: 100%;
        max-width: 100%;
        font-size: clamp(3rem, 15vw, 4.4rem);
        overflow-wrap: anywhere;
}

.editor-note-copy {
column-count: 1;
        column-rule: 0;
}

.editor-column-break {
break-before: auto;
}

.editor-signoff {
margin-left: 0;
}

.about-title em {
white-space: normal;
}

.about-note {
padding: 1.4rem;
}

}