/* Paired About pages: shared identity, an editorial manuscript illustration and readable prose. */
.about-page .breadcrumb {
  color: var(--body);
}

.about-hero {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.about-hero__layout,
.about-story__layout,
.about-principle__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
}

.about-hero__layout {
  align-items: center;
}

.about-hero h1 {
  max-width: 10ch;
  font-size: clamp(2.75rem, 5.8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.about-hero__purpose {
  margin: 20px 0 26px;
  color: var(--ink);
  line-height: 1.7;
}

/* Decorative pencil work stays softer than the localized, readable labels. */
.about-writing-context {
  --about-pencil: color-mix(in srgb, var(--ink) 58%, var(--paper));
  --about-thread: color-mix(in srgb, var(--coral-ink) 48%, var(--body));
  container-type: inline-size;
  width: min(100%, 520px);
  min-width: 0;
  margin: 0 auto;
}

.about-writing-context__scene {
  position: relative;
  aspect-ratio: 1;
  isolation: isolate;
}

.about-writing-context__drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-writing-context__thread {
  stroke: var(--about-thread);
  stroke-opacity: 0.72;
  stroke-width: 1.15;
}

.about-writing-context__pencil {
  stroke: var(--about-pencil);
  stroke-width: 1.2;
}

.about-writing-context__retrace {
  stroke-opacity: 0.4;
  stroke-width: 0.7;
}

.about-writing-context__sheet {
  fill: var(--paper);
  stroke: var(--about-pencil);
  stroke-opacity: 0.72;
  stroke-width: 0.9;
}

.about-writing-context__sheet--back {
  fill: var(--paper);
  fill-opacity: 0.72;
  stroke-opacity: 0.5;
}

.about-writing-context__hatching {
  stroke: var(--about-pencil);
  stroke-opacity: 0.55;
  stroke-width: 0.7;
}

.about-writing-context__note {
  position: absolute;
  color: var(--body);
  font-family: var(--serif);
  font-size: clamp(0.9375rem, 4.4cqi, 1.375rem);
  font-weight: var(--weight-display-regular);
  line-height: 1.25;
  text-wrap: balance;
}

.about-writing-context__note--ideas {
  top: 18%;
  left: 3%;
  max-width: 32%;
  transform: rotate(-7deg);
}

.about-writing-context__note--world {
  top: 17%;
  right: 1%;
  max-width: 35%;
  transform: rotate(5deg);
}

.about-writing-context__note--readers {
  right: 3%;
  bottom: 2%;
  max-width: 40%;
  transform: rotate(-3deg);
}

.about-writing-context__paper {
  position: absolute;
  top: 24%;
  left: 23%;
  width: 47%;
  aspect-ratio: 0.8;
  transform: rotate(-5deg);
}

.about-writing-context__title {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  display: block;
  color: var(--body);
  font-family: var(--serif);
  font-size: clamp(1rem, 5.8cqi, 1.875rem);
  font-weight: var(--weight-display-regular);
  line-height: 1.12;
}

.about-writing-context__prose {
  position: absolute;
  top: 37%;
  left: 10%;
  display: block;
  width: 80%;
  height: 43%;
  stroke: var(--about-pencil);
  stroke-opacity: 0.65;
  stroke-width: 0.75;
  stroke-linecap: round;
}

.about-writing-context__revision {
  stroke: var(--about-thread);
  stroke-opacity: 0.75;
  stroke-width: 1.15;
}

.about-writing-context__signature {
  position: absolute;
  left: 45%;
  bottom: 8%;
  opacity: 0.6;
  display: block;
  width: 10%;
  height: auto;
}

.about-writing-context figcaption {
  max-width: 45ch;
  margin: 20px auto 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

.about-story__layout,
.about-principle__layout {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.about-page .h2 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.about-story__heading p,
.about-story__body p,
.about-principle p {
  max-width: 65ch;
  margin: 20px 0 0;
  line-height: 1.8;
  text-wrap: pretty;
}

.about-story__body > p:first-child,
.about-principle p:first-child {
  margin-top: 0;
}

.about-story__body h3 {
  margin: 36px 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: var(--weight-title);
  line-height: 1.4;
  text-wrap: balance;
}

.about-story__body h3 + p {
  margin-top: 0;
}

.about-story__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 15px;
}

.about-story__body > .text-link {
  display: inline-block;
  margin-top: 15px;
}

.about-principle {
  padding: clamp(64px, 9vw, 100px) 0;
  color: var(--dark-copy);
  background: var(--surface-dark);
}

.about-principle .h2 {
  color: var(--paper-2);
}

.about-principle p {
  font-weight: var(--weight-light);
}

.about-principle .text-link {
  display: inline-block;
  margin-top: 26px;
}

.about-principle a:focus-visible {
  outline-color: var(--white);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 800px) {
  .about-hero__layout,
  .about-story__layout,
  .about-principle__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-hero h1,
  .about-page .h2 {
    max-width: 20ch;
  }

}

@media (max-width: 420px) {

  .about-cta__actions .button {
    width: 100%;
  }
}