/*
 * ILELAN website — About page (story.html): About, What we do, Mission.
 * Only layout lives here; type, colour, buttons, header and footer come from site.css and tokens.css.
 * One idea per section, lots of dark, short lines (guide §6, §8). Nothing moves on its own (§7).
 */
.st-sec { padding: 168px var(--gutter) 160px; border-top: 1px solid var(--hairline); }
.st-sec.alt { background: var(--onyx); }
.st-open { min-height: 100vh; display: flex; align-items: center; border-top: none; padding-top: 180px; }
.st-wrap { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.st-label { margin: 0; font-weight: 400; }
.st-head { max-width: 16em; font-size: clamp(36px, 4.4vw, 64px); text-wrap: balance; }
/* The body text sits in a narrow column to the right of the headline's start, under it. */
.st-body { display: flex; flex-direction: column; gap: 22px; max-width: 34em; margin: 28px 0 0 auto; width: 100%; }
.st-line { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--champagne); text-wrap: balance; }

.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.st-two > div { display: flex; flex-direction: column; gap: 16px; padding: 44px 48px 48px 0; }
.st-two > div + div { padding-left: 48px; padding-right: 0; border-left: 1px solid var(--hairline); }
.st-cta { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.st-cta span { font-size: 13px; color: var(--text-dim); }
.st-dont { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.st-dont .a-p { color: var(--text-dim); }

.story .site-footer .st-x { color: var(--text-dim); text-decoration: none; }
.story .site-footer .st-x:hover, .story .site-footer .st-x:focus-visible { color: var(--text); }

@media (max-width: 1100px) {
  .st-body { margin-left: 0; }
}
@media (max-width: 760px) {
  .st-sec { padding: 112px var(--gutter) 96px; scroll-margin-top: 96px; }
  .st-open { min-height: 0; padding-top: 148px; }
  .st-head { font-size: clamp(30px, 8vw, 40px); }
  .st-body { margin-top: 12px; gap: 18px; }
  .st-line { font-size: 18px; }
  .st-two { grid-template-columns: 1fr; margin-top: 12px; }
  .st-two > div { padding: 32px 0; }
  .st-two > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--hairline); }
}