/* About page only (about.html). From the Paste-up prototype. */
.about-hero { padding-top: clamp(32px, 6vw, 88px); }
.about-hero .display { max-width: 15em; }
.founders-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); margin-top: clamp(36px, 5vw, 72px); align-items: start; }
.fp:nth-child(1) { rotate: -1.4deg; }
.fp:nth-child(2) { margin-top: clamp(56px, 9vw, 140px); rotate: 1.2deg; }
.fp:nth-child(3) { margin-top: clamp(20px, 3.5vw, 52px); rotate: -.6deg; }
.fp img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); filter: var(--art-filter); }
.fp figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; margin-top: 18px; }
.fp .plateno { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink3); }
.fp figcaption b { font-weight: 800; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.04em; line-height: 1.05; }
.fp .role { align-self: center; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fp .sch { grid-column: 1 / -1; color: var(--ink2); font-weight: 550; }
.fp .site { grid-column: 1 / -1; justify-self: start; color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
@media (max-width: 760px) { .founders-wall { grid-template-columns: 1fr; } .fp:nth-child(2), .fp:nth-child(3) { margin-top: 24px; } }

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 34px; align-items: start; }
.fact { margin: 0; padding: 10px 10px 16px; rotate: var(--tilt); transition: rotate 400ms var(--ease-out); }
.fact:nth-child(2) { margin-top: 26px; } .fact:nth-child(3) { margin-top: 8px; }
.fact .art { aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: none; }
.fact figcaption { padding: 12px 4px 0; }
.fact .fno { display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.fact b { display: block; margin-top: 2px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.fact small { display: block; margin-top: 4px; color: var(--ink2); font-size: 14.5px; line-height: 1.4; }
@media (hover: hover) { .fact:hover { rotate: 0deg; } }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { grid-column: 1 / -1; width: 72%; justify-self: center; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 14px; } .fact:nth-child(n) { grid-column: auto; margin-top: 0; width: auto; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px 12px 10px; } .fact .art { aspect-ratio: 1; } .fact figcaption { padding: 0; } }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

.made-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.mi-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mi-plates .art:nth-child(2n) { transform: translateY(22px); }
@media (max-width: 900px) { .made-in { grid-template-columns: 1fr; } }

/* Live-site additions */
.about-trust .trust { margin-top: 24px; flex-direction: column; gap: 10px; }

/* Meet the team: three taped prints, staggered like the founders' plates. */
.team-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin-top: clamp(26px, 4vw, 48px); align-items: start; }
.tm { margin: 0; padding: 10px 10px 18px; rotate: var(--tilt); transition: rotate 400ms var(--ease-out); }
.tm:nth-child(2) { margin-top: clamp(28px, 5vw, 72px); } .tm:nth-child(3) { margin-top: clamp(10px, 2vw, 28px); }
.tm img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tm figcaption { display: grid; gap: 4px; padding: 14px 6px 0; }
.tm .plateno { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.tm b { font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.tm .role { justify-self: start; display: inline-flex; align-items: center; height: 28px; margin-top: 4px; padding: 0 12px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) { .tm:hover { rotate: 0deg; } }
@media (max-width: 760px) { .team-wall { grid-template-columns: 1fr 1fr; } .tm:nth-child(3) { grid-column: 1 / -1; width: 62%; justify-self: center; margin-top: 8px; } }
@media (max-width: 460px) { .team-wall { grid-template-columns: 1fr; } .tm:nth-child(n) { width: auto; margin-top: 0; } }