/* ---------- Hero ---------- */
.story-hero {
  padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; border-bottom: 1px solid var(--line);
}
.story-hero__meta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.story-hero__text { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.story-hero__title { max-width: 770px; }
.story-hero { padding-top: 128px; }
.story-hero__title .ink { display: block; }
.story-hero__lead { max-width: 860px; }
.story-hero__lead .ink { color: var(--ink); }

/* ---------- Story sections ---------- */
.story { border-bottom: 1px solid var(--line); }
.story__head--center { align-items: center; text-align: center; }
.story__head--center .story__title { max-width: 900px; }
.story__title .ink { color: var(--ink); }
.story__row .t-h2 { max-width: 640px; }
.story__row .story__lead { max-width: 550px; text-align: left; }

.story__body { padding: 60px; border-top: 1px solid var(--line); }
.story__copy { display: flex; flex-direction: column; gap: 20px; }
.story__copy p { font-size: 18px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: var(--ink); max-width: 939px; }
.story__copy--center { max-width: 900px; margin: 0 auto; }
.story__copy--signed { gap: 28px; }

/* Founder photo + signature */
.story__founder { display: flex; justify-content: center; align-items: flex-start; gap: 60px; }
.founder { flex: 0 0 281px; display: flex; flex-direction: column; gap: 40px; }
.founder__photo { width: 281px; height: 358px; object-fit: cover; }
.signature { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.signature img { width: 141px; height: 33px; object-fit: cover; }
.signature .t-small { font-size: 14px; line-height: 19px; }
.story__founder .story__copy { flex: 1 1 939px; min-width: 0; }

/* Principles list */
.principles { display: flex; flex-direction: column; gap: 32px; max-width: 1000px; }
.principle { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Banner ---------- */
.story-banner { position: relative; overflow: hidden; padding: 120px 60px; display: flex; justify-content: center; }
.story-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.story-banner__inner { position: relative; max-width: 500px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.story-banner__title { font-size: 44px; line-height: 48px; letter-spacing: -1.76px; font-weight: 500; color: var(--ink); }
.story-banner__text { margin-top: 12px; font-size: 16px; line-height: 21.7px; font-weight: 400; color: var(--ink); }
.story-banner .btn { margin-top: 32px; }

/* ---------- Footer spacing (matches source rhythm on this page) ---------- */
.site-footer nav li li a, .site-footer nav ul ul a { display: inline-block; line-height: 25px; padding-block: 0.5px; }
.site-footer nav ul ul { margin-top: 5px; }
.site-footer__legal { margin-top: 36px; }

/* ================= Tablet ================= */
@media (max-width: 1199px) {
  .story-hero { padding: 123px 40px 60px; }
  .story-hero__lead { font-size: 16px; line-height: 22px; }
  .story__head--center { padding: 48px 40px; }
  .story__row .t-h2 { max-width: 420px; }
  .story__row .story__lead { max-width: 400px; }
  .story__body { padding: 40px; }
  .story__copy p { font-size: 16px; line-height: 22px; }
  .story__founder { gap: 60px; }
  .founder { flex-basis: 200px; gap: 32px; }
  .founder__photo { width: 200px; height: 256px; }
  .principle .t-title { font-size: 20px; line-height: 27px; letter-spacing: -0.6px; }
  .story-banner__title { font-size: 36px; line-height: 40px; letter-spacing: -1.4px; }
}

/* ================= Phone ================= */
@media (max-width: 809px) {
  .story-hero { padding: 127px 16px 60px; gap: 24px; }
  .story-hero__meta { gap: 14px; }
  .story-hero__title, .story__title { text-wrap: wrap; }
  .story-hero__meta .t-small { font-size: 12px; line-height: 18px; }
  .story-hero__title { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
  .story-hero__lead { font-size: 14px; line-height: 19px; }

  .story__head--center { padding: 32px 20px 40px; align-items: flex-start; text-align: left; }
  .story__row .t-h2, .story__row .story__lead { max-width: none; }
  .story__title br { display: none; }
  .story__title .muted, .story__title .ink { display: block; }

  .story__body { padding: 40px 20px; }
  .story__copy { gap: 20px; }
  .story__copy p { font-size: 14px; line-height: 19px; }
  .story__copy--signed { gap: 24px; }

  .story__founder { flex-direction: column; align-items: stretch; gap: 40px; }
  .story__founder .story__copy { flex: none; }
  .founder { order: 1; flex: none; align-items: center; gap: 24px; }
  .founder__photo { width: 170px; height: 192px; }
  .story__founder .signature { align-items: center; }

  .principles { gap: 24px; }
  .principle .t-small { font-size: 14px; line-height: 19px; }

  .story-banner { padding: 36px 20px 40px; }
  .story-banner__title { font-size: 36px; line-height: 39px; }
  .story-banner__text { margin-top: 16px; font-size: 16px; line-height: 21.3px; }
  .story-banner .btn { margin-top: 28px; }
}