/* about — page styles */

.story { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.story__body p + p { margin-top: 1.2rem; color: var(--fg-2); }
.story__drop { font-size: var(--step-1); line-height: 1.45; }
.story__drop::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.6em; line-height: 0.76; padding-right: 0.08em;
}

.story__plate { padding: 8px 8px 0; border: 1.5px solid var(--ink); margin-bottom: 1.75rem; }
.story__plate figcaption {
  border-top: 1.5px solid var(--ink); margin-top: 8px; padding: 0.55rem 0.15rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.spec { margin: 0; border-top: 1.5px solid var(--ink); }
.spec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--rule-thin); }
.spec dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.spec dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; text-align: right; }
@media (max-width: 880px) { .story { grid-template-columns: 1fr; } .story__side { max-width: 24rem; } }

.vals { padding-block: clamp(3.5rem, 6vw, 6rem); border-top: 1.5px solid var(--ink); }
.head h2 { margin-top: 1rem; }
.vals__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1.5px solid var(--on-ink); }
.val { padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--rule-inv); }
.val + .val { border-left: 1px solid var(--rule-inv); padding-left: 1.4rem; }
.val h3 { font-size: var(--step-1); color: var(--on-ink); margin-bottom: 0.45rem; }
.val p { font-size: 0.88rem; }

.join { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.join__fig { width: clamp(70px, 9vw, 110px); }
.join h2 { margin-block: 1rem 1rem; }
.join__b { color: var(--fg-2); max-width: 44ch; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .join { grid-template-columns: 1fr; } .join__fig { display: none; } }

.spec dd a:hover { text-decoration: underline; text-underline-offset: 3px; }