/* Shared editorial content within the three established visual identities. */
.about-page { --about-ink: #101418; --about-paper: #f3f0e9; --about-line: #c8c7c0; color: var(--about-ink); background: var(--about-paper); }
.about-page * { min-width: 0; }
.about-wrap { width: min(calc(100% - 96px), 1200px); margin-inline: auto; }
.about-section { padding-block: clamp(56px, 7vw, 104px); }
.about-page h1, .about-page h2, .about-page h3 { text-wrap: balance; overflow-wrap: anywhere; letter-spacing: -.03em; }
.about-page h1 { max-width: 17ch; margin: 0; font-size: clamp(2.6rem, 6vw, 5.75rem); line-height: 1.03; }
.about-page h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.1; }
.about-page h3 { margin: 0 0 1.2rem; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; }
.about-prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.about-prose p { margin: 0 0 1.25em; }
.about-prose p:last-child { margin-bottom: 0; }
.about-hero .about-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7%; align-items: start; }
.about-hero-copy p:first-child { font-size: 1.3rem; line-height: 1.55; }
.about-editorial { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8%; align-items: start; }
.about-editorial > h2 { max-width: 14ch; margin: 0; }
.about-story { border-top: 1px solid var(--about-line); }
.about-philosophy { background: #e3e6e3; }
.about-working-list > article + article, .about-working-list > details + details { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--about-line); }
.about-working summary { cursor: pointer; padding: .4rem 0; }
.about-working summary h3 { display: inline; }
.about-working details[open] summary { margin-bottom: 1.5rem; }
.about-evidence { border-top: 1px solid var(--about-line); }
.about-evidence > .about-wrap > h2 { max-width: 20ch; margin: 0 0 3rem; }
.about-project { display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; gap: 7%; }
.about-project + .about-project { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--about-line); }
.about-project img { display: block; width: 100%; height: auto; }
.about-project-status { margin: -.3rem 0 1.5rem; font-size: .9rem; font-weight: 650; }
.about-link { display: inline-block; margin-top: 1.5rem; padding-block: .5rem; color: inherit; text-decoration: underline; text-underline-offset: .3em; font-weight: 650; }
.about-link:hover { text-decoration-thickness: 2px; }
.about-closing { background: #101418; color: #f3f0e9; }
.about-closing .button { margin-top: 2rem; }

/* Modernist: an editorial reading spine, blue rules and quiet evidence. */
.about-page--editorial .about-hero { padding-block: clamp(72px, 9vw, 136px); }
.about-page--editorial .about-hero h1 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.about-page--editorial .about-hero-copy { padding-top: 24px; border-top: 3px solid var(--blue); }
.about-page--editorial .about-editorial > h2 { padding-top: 20px; border-top: 3px solid var(--blue); }
.about-page--editorial .about-philosophy { background: var(--mist); }
.about-page--editorial .about-project { grid-template-columns: .8fr 1.2fr; }
.about-page--editorial .about-project img { border: 1px solid var(--about-line); }
.about-page--editorial .about-closing .about-editorial > h2 { border-color: #8997ff; }

/* Retro-Futurism: connected chronology and warm, curved instrument panels. */
html[data-perspective='retro-futurist'] .about-page { --about-ink: #0c1b22; --about-paper: #eee7d7; --about-line: #b9b4a7; }
.about-page--dossier h1, .about-page--dossier h2, .about-page--dossier h3 { font-family: var(--p-heading); }
.about-page--dossier .about-hero { background: #0c1b22; color: #eee7d7; }
.about-page--dossier .about-hero .about-wrap { grid-template-columns: 1.25fr 1fr; align-items: center; gap: 52px 8%; }
html[data-perspective='retro-futurist'] .about-page--dossier .about-hero h1 { max-width: 16ch; color: #eab465; font-weight: 500; line-height: 1.04; }
.about-page--dossier .about-hero-copy { grid-column: 2; grid-row: 1 / 3; padding: 40px 32px; border: 1px solid #75817e; border-radius: 64px 0; }
.about-orbit { position: relative; width: 190px; height: 64px; border: 1px solid #eab465; border-radius: 999px; }
.about-orbit::before, .about-orbit::after { content: ''; position: absolute; width: 64px; height: 64px; top: -1px; border: 1px solid #eab465; border-radius: 50%; }
.about-orbit::before { left: 39px; background: #eab465; }
.about-orbit::after { right: 39px; background: #c24c27; }
.about-page--dossier .about-story { border: 0; }
.about-page--dossier .about-story .about-editorial { align-items: start; }
.about-page--dossier .about-story-copy { padding: 40px; border: 1px solid var(--about-line); border-radius: 56px 0; }
.about-page--dossier .about-story h2 { max-width: none; margin-bottom: 56px; }
.about-page--dossier .about-philosophy { padding-block: 0; background: var(--about-paper); }
.about-page--dossier .about-philosophy .about-wrap { padding: 64px; background: #dbd3c1; border-radius: 0 80px; }
.about-page--dossier .about-philosophy h2 { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.about-page--dossier .about-working-list { border-top: 1px solid var(--about-line); }
.about-page--dossier .about-working details { padding-block: 24px; border-bottom: 1px solid var(--about-line); }
.about-page--dossier .about-working details + details { margin: 0; padding-top: 24px; border-top: 0; }
.about-page--dossier .about-working summary { padding: 10px 0; color: #873719; }
.about-page--dossier .about-working summary:hover { color: #0c1b22; }
.about-page--dossier .about-working summary::marker { color: #873719; }
.about-page--dossier .about-working details .about-prose { padding-top: 8px; }
.about-page--dossier .about-evidence { background: #0c1b22; color: #eee7d7; border: 0; }
.about-page--dossier .about-evidence > .about-wrap > h2 { color: #eab465; }
.about-page--dossier .about-project { grid-template-columns: .85fr 1.15fr; align-items: center; }
.about-page--dossier .about-project + .about-project { border-color: #75817e; }
.about-page--dossier .about-project img { border-radius: 64px 0; }
.about-page--dossier .about-project:nth-of-type(2) img { border-radius: 0 64px; }
.about-page--dossier .about-project-status { color: #eab465; }
.about-page--dossier .about-closing { background: #dbd3c1; color: #0c1b22; }
html[data-perspective='retro-futurist'] .about-page--dossier .about-closing .button { background: #c24c27; color: #fff; }
html[data-perspective='retro-futurist'] .about-page--dossier .about-closing .button:hover { background: #0c1b22; color: #eee7d7; }

/* Expressionist: monumental type, opposing planes and a stepped reading order. */
html[data-perspective='expressionist'] .about-page { --about-ink: #141413; --about-paper: #eeeae2; --about-line: #b9b5ac; }
.about-page--dialogue h1, .about-page--dialogue h2, .about-page--dialogue h3 { font-family: var(--p-heading); text-transform: uppercase; font-weight: 700; line-height: .95; }
.about-page--dialogue .about-hero { background: #141413; color: #eeeae2; padding-block: 72px 64px; }
.about-page--dialogue .about-hero .about-wrap { grid-template-columns: .7fr 1fr; gap: 48px 8%; }
html[data-perspective='expressionist'] .about-page--dialogue .about-hero h1 { grid-column: 1 / -1; max-width: 20ch; font-size: clamp(3.5rem, 10vw, 9rem); line-height: .9; }
.about-page--dialogue .about-hero-copy { grid-column: 2; max-width: 57ch; padding-top: 28px; border-top: 8px solid #ff692e; }
.about-page--dialogue .about-story { border: 0; }
.about-page--dialogue .about-story .about-editorial { align-items: start; }
.about-page--dialogue .about-story-copy { padding-top: 28px; border-top: 2px solid #141413; }
.about-page--dialogue .about-story h2 { max-width: 15ch; margin-bottom: 56px; font-size: clamp(3rem, 6vw, 6rem); }
.about-page--dialogue .about-philosophy { background: #ff692e; color: #141413; }
.about-page--dialogue .about-philosophy .about-editorial { grid-template-columns: 1fr 1fr; align-items: end; }
.about-page--dialogue .about-philosophy h2 { max-width: 12ch; font-size: clamp(3rem, 6vw, 6rem); }
.about-page--dialogue .about-working { background: #141413; color: #eeeae2; }
.about-page--dialogue .about-working .about-editorial { grid-template-columns: .7fr 1fr; }
.about-page--dialogue .about-working h2 { color: #ff996e; font-size: clamp(3rem, 6vw, 6rem); }
.about-page--dialogue .about-working-list > article { padding-top: 28px; border-top: 2px solid #eeeae2; }
.about-page--dialogue .about-working-list > article + article { margin-top: 40px; }
.about-page--dialogue .about-working h3 { max-width: 23ch; font-size: clamp(2rem, 3vw, 3rem); }
.about-page--dialogue .about-evidence { border: 0; }
.about-page--dialogue .about-evidence > .about-wrap > h2 { max-width: 17ch; font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 64px; }
.about-page--dialogue .about-project { grid-template-columns: .8fr 1.2fr; align-items: center; }
.about-page--dialogue .about-project + .about-project { border-top: 3px solid #141413; }
.about-page--dialogue .about-project:nth-of-type(2) { grid-template-columns: 1.2fr .8fr; }
.about-page--dialogue .about-project:nth-of-type(2) .about-project-copy { grid-column: 2; grid-row: 1; }
.about-page--dialogue .about-project:nth-of-type(2) img { grid-column: 1; grid-row: 1; }
.about-page--dialogue .about-project img { border-top: 10px solid #ff692e; }
.about-page--dialogue .about-project h3 { font-size: clamp(2.5rem, 4vw, 4rem); }
.about-page--dialogue .about-closing { background: #ff692e; color: #141413; }
.about-page--dialogue .about-closing h2 { font-size: clamp(3rem, 6vw, 6rem); max-width: 12ch; }
html[data-perspective='expressionist'] .about-page--dialogue .about-closing .button { background: #141413; color: #eeeae2; }
html[data-perspective='expressionist'] .about-page--dialogue .about-closing .button:hover { background: #eeeae2; color: #141413; }
.about-page :is(summary, a):focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #101418; }

@media (max-width: 1000px) {
  .about-wrap { width: calc(100% - 56px); }
  .about-page--dossier .about-hero .about-wrap { gap: 36px 5%; }
  .about-page--dossier .about-hero-copy { padding: 32px 24px; border-radius: 40px 0; }
  .about-page--dossier .about-philosophy .about-wrap { padding: 40px; }
}
@media (max-width: 900px) {
  .about-hero .about-wrap, .about-editorial,
  .about-page--dialogue .about-hero .about-wrap,
  .about-page--dialogue .about-philosophy .about-editorial,
  .about-page--dialogue .about-working .about-editorial { grid-template-columns: 1fr; gap: 2.25rem; }
  .about-editorial > h2 { max-width: 22ch; }
  .about-hero h1 { max-width: 20ch; }
  .about-hero-copy { max-width: 68ch; }
  .about-page--dossier .about-hero .about-wrap { grid-template-columns: 1fr; }
  .about-page--dossier .about-hero-copy { grid-column: auto; grid-row: auto; max-width: none; }
  .about-orbit { grid-row: 2; }
  .about-page--dialogue .about-hero-copy { grid-column: auto; }
  .about-project, .about-page--editorial .about-project, .about-page--dossier .about-project,
  .about-page--dialogue .about-project, .about-page--dialogue .about-project:nth-of-type(2) { grid-template-columns: 1fr; gap: 2rem; }
  .about-page--dialogue .about-project:nth-of-type(2) .about-project-copy,
  .about-page--dialogue .about-project:nth-of-type(2) img { grid-column: auto; grid-row: auto; }
  .about-project img { max-width: 800px; }
}
@media (max-width: 620px) {
  .about-wrap { width: calc(100% - 40px); }
  html[data-perspective='retro-futurist'] .about-page--dossier .about-hero h1 { font-size: clamp(2.6rem, 9vw, 3.5rem); }
  .about-page--dossier .about-story-copy { padding: 28px 24px; border-radius: 32px 0; }
  .about-page--dossier .about-philosophy .about-wrap { padding: 40px 24px; border-radius: 0 40px; }
  .about-page--dossier .about-project img, .about-page--dossier .about-project:nth-of-type(2) img { border-radius: 32px 0; }
  .about-page--dialogue .about-hero { padding-block: 56px; }
  html[data-perspective='expressionist'] .about-page--dialogue .about-hero h1 { font-size: clamp(3.1rem, 12vw, 4.5rem); }
  .about-page--dialogue .about-story h2 { margin-bottom: 36px; }
}