/** Shopify CDN: Minification failed

Line 811:0 Unexpected "<"

**/
/* ================================================================
   SYNERGETIC PRESS — OUR STORY
   assets/our-story.css

   CONTENTS:
   1. Custom properties (colors, spacing, type)
   2. Base & container
   3. Utilities (labels, headings, prose, pull quotes, images)
   4. Placeholders
   5. Scroll reveal animations
   6. Hero
   7. Where It Began
   8. Founder
   9. First Book
   10. Biosphere 2
   11. Psychedelic Reemergence
   12. More Than a Publisher
   13. Closing CTA
   14. Responsive
================================================================ */

/* ── 1. Custom properties ── */
.sp-page {
  --sp-ink:       #1a1510;
  --sp-cream:     #f6f1e9;
  --sp-warm:      #ece3d0;
  --sp-border:    #ddd3bc;
  --sp-rust:      #7a3018;
  --sp-gold:      #b08028;
  --sp-sage:      #3a4a2c;
  --sp-muted:     #6a5e50;
  --sp-dim:       #9a8e80;
  --sp-white:     #fdfaf4;
  --sp-dark:      #18120c;
  --sp-dark-2:    #221a10;

  --sp-font-head: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sp-font-body: 'Jost', 'DM Sans', system-ui, sans-serif;

  --sp-gap:       clamp(1.5rem, 4vw, 3rem);
  --sp-section:   clamp(4rem, 8vw, 7rem);
  --sp-max:       1200px;
  --sp-text-max:  680px;

  --sp-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Base & container ── */
.sp-page {
  font-family: var(--sp-font-body);
  color: var(--sp-ink);
  background: var(--sp-cream);
  line-height: 1.6;
  overflow-x: hidden;
}

.sp-page * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-container {
  width: 100%;
  max-width: var(--sp-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(1.25rem, 5vw, 3rem);
}

.sp-section {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

/* ── 3. Typography utilities ── */
.sp-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 1rem;
}

.sp-label--light {
  color: #c8a84a;
}

.sp-heading {
  font-family: var(--sp-font-head);
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--sp-ink);
  margin-bottom: 1.5rem;
  letter-spacing: -.01em;
}

.sp-heading em {
  font-style: italic;
  color: var(--sp-rust);
}

.sp-prose {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.85;
  color: var(--sp-muted);
  max-width: var(--sp-text-max);
}

.sp-prose p + p {
  margin-top: .875rem;
}

.sp-prose em {
  font-style: italic;
  color: var(--sp-ink);
}

.sp-prose--large {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
  color: var(--sp-ink);
}

.sp-prose--after-callout {
  margin-top: 1.5rem;
}

.sp-pull {
  border-left: 2px solid var(--sp-gold);
  margin: 2rem 0;
  padding: .75rem 0 .75rem 1.5rem;
}

.sp-pull p {
  font-family: var(--sp-font-head);
  font-size: clamp(18px, 2.5vw, 26px);
  font-style: italic;
  color: var(--sp-rust);
  line-height: 1.45;
  font-weight: 400;
}

.sp-caption {
  font-size: 11px;
  color: var(--sp-dim);
  margin-top: .625rem;
  letter-spacing: .04em;
  line-height: 1.5;
}

.sp-caption--center {
  text-align: center;
}

.sp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-img--book {
  object-fit: contain;
  background: var(--sp-warm);
}

.sp-callout {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  border: 1px solid var(--sp-border);
  border-left: 3px solid var(--sp-gold);
  background: var(--sp-white);
}

.sp-callout__text {
  font-family: var(--sp-font-head);
  font-size: clamp(16px, 2vw, 22px);
  font-style: italic;
  color: var(--sp-ink);
  line-height: 1.5;
}

/* ── 4. Placeholders ── */
.sp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-warm);
  border: 1px dashed var(--sp-border);
  width: 100%;
  padding: 2rem 1.5rem;
}

.sp-placeholder--hero    { height: 100%; min-height: 600px; }
.sp-placeholder--banner  { height: 100%; min-height: 420px; }
.sp-placeholder--tall    { aspect-ratio: 3 / 4; min-height: 320px; }
.sp-placeholder--portrait{ aspect-ratio: 3 / 4; min-height: 380px; }
.sp-placeholder--square  { aspect-ratio: 1 / 1; min-height: 200px; }
.sp-placeholder--book    { aspect-ratio: 2 / 3; min-height: 280px; max-width: 280px; margin: 0 auto; }
.sp-placeholder--wide    { aspect-ratio: 16 / 7; min-height: 160px; }
.sp-placeholder--timeline{ aspect-ratio: 4 / 3; min-height: 180px; }
.sp-placeholder--cta     { height: 100%; min-height: 520px; }

.sp-placeholder__label {
  font-size: 11px;
  color: var(--sp-dim);
  text-align: center;
  line-height: 1.6;
  max-width: 200px;
  font-style: italic;
}

/* ── 5. Scroll reveal ── */
.sp-reveal,
.sp-reveal-delay,
.sp-reveal-delay-2 {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--sp-ease), transform .7s var(--sp-ease);
}

.sp-reveal-delay  { transition-delay: .15s; }
.sp-reveal-delay-2{ transition-delay: .3s; }

.sp-reveal.sp-visible,
.sp-reveal-delay.sp-visible,
.sp-reveal-delay-2.sp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 6. Hero ── */
.sp-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.sp-hero__bg {
  position: absolute;
  inset: 0;
}

.sp-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: sp-hero-drift 18s ease-in-out infinite alternate;
}

@keyframes sp-hero-drift {
  from { transform: scale(1.04) translate(0,0); }
  to   { transform: scale(1.04) translate(-1%,-1%); }
}

.sp-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 12, 6, .95) 0%,
    rgba(18, 12, 6, .55) 45%,
    rgba(18, 12, 6, .2)  100%
  );
}

.sp-hero__body {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.sp-hero__inner {
  max-width: 820px;
}

.sp-hero__title {
  font-family: var(--sp-font-head);
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  color: #fdfaf4;
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}

.sp-hero__sub {
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(255,255,255,.6);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.sp-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  transition: color .2s;
}

.sp-hero__scroll:hover { color: rgba(255,255,255,.8); }

.sp-hero__scroll-line {
  display: block;
  width: 40px;
  height: 1px;
  background: currentColor;
  animation: sp-scroll-pulse 2.2s ease-in-out infinite;
}

@keyframes sp-scroll-pulse {
  0%, 100% { width: 40px; opacity: 1; }
  50%       { width: 60px; opacity: .6; }
}

/* ── 7. Where It Began ── */
.sp-began {
  background: var(--sp-white);
}

.sp-began__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.sp-began__images {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

.sp-began__img-main {
  overflow: hidden;
}

.sp-began__img-main .sp-placeholder {
  aspect-ratio: 4 / 5;
  min-height: 360px;
}

.sp-began__img-main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--sp-ease);
}

.sp-began__img-main:hover img {
  transform: scale(1.03);
}

.sp-began__img-sub img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* ── 8. Founder ── */
.sp-founder {
  background: var(--sp-dark);
}

.sp-founder .sp-heading {
  color: #fdfaf4;
}

.sp-founder .sp-label {
  color: #c8a84a;
}

.sp-founder .sp-prose {
  color: rgba(255,255,255,.55);
}

.sp-founder .sp-pull p {
  color: #e8c878;
}

.sp-founder .sp-pull {
  border-left-color: var(--sp-gold);
}

.sp-founder__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.sp-founder__portrait {
  position: relative;
}

.sp-founder__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.sp-founder__portrait .sp-placeholder {
  aspect-ratio: 3 / 4;
  min-height: 480px;
  background: var(--sp-dark-2);
  border-color: rgba(255,255,255,.1);
}

.sp-founder__portrait .sp-placeholder__label {
  color: rgba(255,255,255,.3);
}

.sp-founder__credit {
  margin-top: 1rem;
}

.sp-founder__name {
  font-family: var(--sp-font-head);
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,255,.7);
}

.sp-founder__role {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-top: 4px;
}

.sp-founder__text {
  padding-top: 1rem;
}

/* ── 9. First Book ── */
.sp-firstbook {
  background: var(--sp-cream);
}

.sp-firstbook__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.sp-firstbook__book {
  position: relative;
}

.sp-firstbook__book img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

.sp-firstbook__book .sp-placeholder--book {
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
}

/* ── 10. Biosphere ── */
.sp-bio {
  background: var(--sp-dark);
  padding: 0;
  overflow: hidden;
}

.sp-bio .sp-section {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

.sp-bio__banner {
  position: relative;
  height: clamp(360px, 50vh, 560px);
  overflow: hidden;
}

.sp-bio__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.sp-bio__banner .sp-placeholder--banner {
  position: absolute;
  inset: 0;
  border: none;
  background: #101820;
}

.sp-bio__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,12,6,.9) 0%, rgba(18,12,6,.35) 70%);
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.sp-bio__banner-title {
  font-family: var(--sp-font-head);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 400;
  color: #fdfaf4;
  line-height: 1.15;
  max-width: 700px;
}

.sp-bio__body {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

.sp-bio__intro {
  max-width: 780px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  color: rgba(255,255,255,.72);
}

.sp-bio__intro p { color: rgba(255,255,255,.72); }

.sp-bio__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.sp-bio__split-text .sp-prose {
  color: rgba(255,255,255,.55);
}

.sp-bio__split-images {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

.sp-bio__img-a img,
.sp-bio__img-b img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.sp-bio__img-a img { aspect-ratio: 4 / 3; }
.sp-bio__img-b img { aspect-ratio: 3 / 2; }

.sp-bio__img-a .sp-placeholder { aspect-ratio: 4 / 3; min-height: 220px; background: #18202a; border-color: rgba(255,255,255,.08); }
.sp-bio__img-b .sp-placeholder { aspect-ratio: 3 / 2; min-height: 160px; background: #18202a; border-color: rgba(255,255,255,.08); }
.sp-bio__img-a .sp-placeholder__label,
.sp-bio__img-b .sp-placeholder__label { color: rgba(255,255,255,.25); }

.sp-bio__milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(255,255,255,.1);
}

.sp-bio__milestone {
  padding-top: 1.25rem;
}

.sp-bio__milestone-year {
  display: block;
  font-family: var(--sp-font-head);
  font-size: 28px;
  font-style: italic;
  color: var(--sp-gold);
  margin-bottom: .75rem;
}

.sp-bio__milestone-text {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.75;
}

/* ── 11. Psychedelic Reemergence ── */
 .sp-psych {
    background: #fdfaf5;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
  }

  /* Header */
  .sp-psych__header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    max-width: 760px;
  }

  /* Two-column editorial grid */
  .sp-psych__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  /* Images column */
  .sp-psych__images {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .sp-psych__img-wrap { overflow: hidden; }

  .sp-psych__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sp-psych__img-wrap:hover .sp-psych__img {
    transform: scale(1.03);
  }

  .sp-psych__img-wrap--primary .sp-psych__img {
    aspect-ratio: 4 / 5;
  }

  .sp-psych__img-wrap--secondary .sp-psych__img {
    aspect-ratio: 3 / 2;
  }

  /* Placeholders */
  .sp-psych__placeholder {
    background: #ece3d0;
    border: 1px dashed #c8b898;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .sp-psych__placeholder--tall  { aspect-ratio: 4 / 5; min-height: 280px; }
  .sp-psych__placeholder--wide  { aspect-ratio: 3 / 2; min-height: 160px; }

  .sp-psych__placeholder p {
    font-family: sans-serif;
    font-size: 12px;
    color: #8a7a62;
    line-height: 1.6;
    font-style: italic;
  }

  .sp-psych__placeholder p span {
    display: block;
    opacity: 0.65;
    margin-top: 3px;
  }

  /* Caption */
  .sp-psych__caption {
    font-size: 11px;
    color: #9a8878;
    margin-top: 8px;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }

  /* Text column */
  .sp-psych__text {
    padding-top: 0.5rem;
  }

  .sp-psych__prose {
    font-family: 'Jost', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.85;
    color: #6a5e50;
    max-width: 580px;
  }

  .sp-psych__prose p + p {
    margin-top: 0.875rem;
  }

  /* Pull quote — matches sp-pull from main CSS */
  .sp-psych__pull {
    border-left: 2px solid #b08028;
    margin: 2rem 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-radius: 0;
  }

  .sp-psych__pull p {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(17px, 2.2vw, 22px);
    font-style: italic;
    color: #7a3018;
    line-height: 1.45;
    font-weight: 400;
  }

  /* Partners */
  .sp-psych__partners {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ddd0b8;
  }

  .sp-psych__partners-label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9a8878;
    margin-bottom: 0.875rem;
  }

  .sp-psych__partner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .sp-psych__partner-item {
    display: inline-flex;
    align-items: center;
  }

  /* Text pill (no logo uploaded) */
  .sp-psych__partner-tag {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #ddd0b8;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a5e50;
    background: #f6f1e9;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
  }

  .sp-psych__partner-tag:hover {
    border-color: #b08028;
    color: #1a1510;
  }

  /* Logo (if uploaded) */
  .sp-psych__partner-logo {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.2s;
  }

  .sp-psych__partner-logo:hover {
    opacity: 1;
  }

  /* ── Responsive ── */
  @media (max-width: 900px) {
    .sp-psych__grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 600px) {
    .sp-psych__placeholder--tall  { min-height: 200px; }
    .sp-psych__partner-list       { gap: 6px; }
    .sp-psych__partner-tag        { font-size: 10px; padding: 4px 11px; }
  }
</style>


/* ── 12. More Than a Publisher ── */
.sp-more {
  background: var(--sp-white);
}

.sp-more__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.sp-more__img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

.sp-more__img-a { grid-column: 1; grid-row: 1; }
.sp-more__img-b { grid-column: 2; grid-row: 1 / 3; }
.sp-more__img-c { grid-column: 1; grid-row: 2; }

.sp-more__img-a img,
.sp-more__img-c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.sp-more__img-b img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-more__img-a.sp-placeholder { aspect-ratio: 4 / 3; }
.sp-more__img-b.sp-placeholder { min-height: 300px; }
.sp-more__img-c.sp-placeholder { aspect-ratio: 4 / 3; }

/* ── 13. Closing CTA ── */
.sp-cta {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.sp-cta__bg {
  position: absolute;
  inset: 0;
}

.sp-cta__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
}

.sp-cta__bg .sp-placeholder--cta {
  position: absolute;
  inset: 0;
  border: none;
  background: var(--sp-dark);
}

.sp-cta__veil {
  position: absolute;
  inset: 0;
  background: var(--sp-dark);
  opacity: .82;
}

.sp-cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  max-width: 760px;
  margin: 0 auto;
}

.sp-cta__eyebrow {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-gold);
  display: block;
  margin-bottom: 1.5rem;
}

.sp-cta__title {
  font-family: var(--sp-font-head);
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 400;
  font-style: italic;
  color: #fdfaf4;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.sp-cta__body {
  font-size: 15px;
  color: rgba(255,255,255,.52);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}

.sp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem;
  margin-bottom: 2.5rem;
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-size: 11px;
  font-family: var(--sp-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: all .2s var(--sp-ease);
  white-space: nowrap;
}

.sp-btn--primary {
  background: var(--sp-gold);
  color: var(--sp-dark);
  border: 1px solid var(--sp-gold);
}

.sp-btn--primary:hover {
  background: #c89430;
  border-color: #c89430;
}

.sp-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.22);
}

.sp-btn--ghost:hover {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.sp-cta__stamp {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}

/* ── 14. Responsive ── */
@media (max-width: 1024px) {
  .sp-founder__grid {
    grid-template-columns: 340px 1fr;
  }
}

@media (max-width: 900px) {
  .sp-began__grid,
  .sp-founder__grid,
  .sp-firstbook__grid,
  .sp-bio__split,
  .sp-more__grid,
  .sp-timeline__panel-inner {
    grid-template-columns: 1fr;
  }

  .sp-founder__grid { gap: 2.5rem; }
  .sp-founder__portrait img { aspect-ratio: 4 / 3; }
  .sp-founder__portrait .sp-placeholder { aspect-ratio: 4 / 3; min-height: 260px; }

  .sp-firstbook__grid { grid-template-columns: 1fr; }
  .sp-firstbook__book { max-width: 280px; margin: 0 auto; }

  .sp-bio__milestones { grid-template-columns: 1fr; gap: 1.25rem; }

  .sp-more__img-grid { grid-template-columns: 1fr 1fr; }
  .sp-more__img-b { grid-row: auto; }
  .sp-more__img-b img { aspect-ratio: 4 / 3; }
  .sp-more__img-b.sp-placeholder { aspect-ratio: 4 / 3; min-height: auto; }

  .sp-timeline__panel-inner { grid-template-columns: 1fr; }
  .sp-timeline__panel-img { max-width: 400px; }
}

@media (max-width: 640px) {
  .sp-hero { min-height: 80vh; }
  .sp-hero__title { letter-spacing: -.01em; }

  .sp-began__images { gap: 1rem; }

  .sp-bio__split-images { grid-template-rows: auto; }

  .sp-more__img-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .sp-more__img-a,
  .sp-more__img-b,
  .sp-more__img-c { grid-column: 1; grid-row: auto; }
  .sp-more__img-b img { aspect-ratio: 4 / 3; height: auto; }

  .sp-cta__buttons { flex-direction: column; align-items: center; }
  .sp-btn { width: 100%; max-width: 280px; justify-content: center; }

  .sp-timeline__trigger { min-width: 64px; padding: 0 1rem; }
  .sp-timeline__year { font-size: 12px; }
}