/* Artwork and editorial refinements shared across the four-page site. */

.contact-heading-art { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: center; margin-top: 32px; }
.contact-heading-art h2 { margin-top: 0; padding-right: 0; font-size: clamp(65px, 7.7vw, 116px); }
.contact-sculpture { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) and (min-width: 761px) {
  .contact-heading-art { grid-template-columns: 1fr 240px; gap: 20px; }
  .contact-heading-art h2 { font-size: clamp(53px, 7.7vw, 77px); }
}
@media (max-width: 760px) {
  .contact-heading-art { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .contact-heading-art h2 { font-size: clamp(53px, 10.9vw, 81px); }
  .contact-sculpture { width: 210px; max-width: 65%; justify-self: start; }
}
.antilibrary-illustration { display: block; flex: none; width: 96px; height: 64px; object-fit: contain; background: transparent; }
@media (max-width: 400px) { #antilibrary-builder .development-identity { gap: 14px; } .antilibrary-illustration { width: 84px; height: 56px; } }
.question-dot {
  display: inline-block;
  padding-right: .1em;
  margin-right: -.1em;
  background: linear-gradient(to bottom, var(--ink) 74%, var(--vermilion) 74%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.method-page .intro-grid { grid-template-columns: 1.1fr 1fr; gap: 8%; align-items: center; }
.method-page .page-intro h1 { font-size: clamp(64px, 6.6vw, 100px); line-height: 1.04; }
.method-page .intro-copy { max-width: none; }
.method-ribbon { display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; margin-bottom: 30px; }
.method-page .intro-copy .lead { font-size: clamp(27px, 2.6vw, 36px); }
.method-page .intro-copy > p { max-width: 490px; }
@media (min-width: 1000px) {
  .method-page .intro-grid { grid-template-columns: 1.05fr 1fr; gap: 5%; }
  .method-page .intro-copy { padding-right: clamp(32px, 4vw, 64px); }
}
@media (max-width: 760px) {
  .method-page .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .method-page .page-intro h1 { font-size: clamp(49px, 11.8vw, 80px); }
  .method-ribbon { max-width: 460px; margin: 0 0 24px; }
}

.principles-ribbon { display: block; width: 90%; max-width: 468px; height: auto; aspect-ratio: 5 / 1; object-fit: cover; margin: 28px 0; }
@media (max-width: 760px) {
  .principles-ribbon { max-width: 414px; margin-block: 24px; }
}

/* About: one reading column beside the sculpture, then the founder. */
.about-hero { padding-bottom: 48px; }
.about-title-art { min-width: 0; }
.about-ribbon { display: block; width: 92%; height: auto; margin-top: 18px; transform: translateY(32px); }
.about-page .purpose { padding-block: 64px 68px; }
.purpose-composition { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7%; align-items: center; }
.purpose-text, .purpose-art { min-width: 0; }
.purpose-art { margin: 0; }
.purpose-art img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.purpose-text > .eyebrow { margin-bottom: 30px; text-align: right; color: var(--muted); }
.about-page .purpose-statement h2 {
  max-width: none;
  text-align: right;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -.055em;
  font-weight: 500;
}
.purpose-lead { text-align: right; margin-top: 26px; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -.025em; color: var(--ink); }
.purpose-detail { margin-top: 32px; }
.purpose-detail p { font-size: 18px; line-height: 1.7; color: var(--muted); }
.purpose-detail p + p { margin-top: 22px; }
.founder-grid { grid-template-columns: .85fr 1.15fr; column-gap: 8%; row-gap: 36px; align-items: start; }
.founder-label { grid-column: 1 / -1; margin: 0; }
.founder .body-copy { padding-top: 0; max-width: 620px; }
@media (max-width: 900px) {
  .purpose-composition { grid-template-columns: 1fr; gap: 34px; }
  .purpose-art { max-width: 460px; width: 100%; justify-self: center; }
  .purpose-text > .eyebrow { margin-bottom: 24px; }
  .about-page .purpose-statement h2 { font-size: clamp(38px, 6.5vw, 58px); }
}
@media (max-width: 760px) {
  .about-hero { padding-bottom: 36px; }
  .about-ribbon { width: 100%; max-width: 460px; margin-top: 12px; transform: none; }
  .about-page .purpose { padding-block: 44px 48px; }
  .purpose-detail p { font-size: 17px; }
  .founder-grid { grid-template-columns: 1fr; row-gap: 30px; }
}

/* The same curve marks major boundaries; its fills follow the section colors. */
.major-section { position: relative; --boundary-current: var(--paper); --boundary-next: #f0eee7; }
.section-divider { display: block; position: absolute; left: 0; bottom: -10px; width: 100%; height: 20px; pointer-events: none; z-index: 2; color: var(--rule); }
.divider-current { fill: var(--boundary-current); }
.divider-next { fill: var(--boundary-next); }
.divider-line { fill: none; stroke: currentColor; stroke-width: 1; }
.home-page .hero { border-bottom-color: transparent; }
.home-page .hero > .section-divider { color: var(--ink); }
.work, .services, .process, .principles, .founder { --boundary-next: #262925; }
.about-opening { --boundary-current: #171a18; }
.purpose { --boundary-next: color-mix(in srgb, var(--paper) 90%, var(--ink)); }
.founder { --boundary-current: color-mix(in srgb, var(--paper) 90%, var(--ink)); }
main > .section-dark:last-child > .section-divider { color: #a7a99f; }
.principle:last-child { border-bottom: 0; }

/* The faint straight rule separates page links from the true footer. */
.footer { padding-block: 12px 14px; }
.footer-links { padding-block: 12px; border-top-color: transparent; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); gap: 12px 30px; }
.footer-main { padding-top: 10px; }
@media (max-width: 480px) {
  .footer-links { gap: 10px 14px; font-size: 12px; }
}