/*
 * ALQQAMAR — The Story / The Dream page
 * Figma source node: 360:9134  "💙 THE STORY"
 * Desktop frame:     361:9682  (1440 × 3782 px)
 * Mobile frame:      361:10056 (390  × 6216 px)
 * OPTIMIZED clones:  987:4213  (desktop) · 987:4254 (mobile)
 *
 * All spatial values from absoluteRenderBounds (ARB) or
 * absoluteBoundingBox (ABB) where noted. Para gaps use ABB
 * (= CSS margin-bottom equivalent between text nodes).
 * Typography updated 2026-07-09 to 390px → 1440px fluid scale.
 *
 * LAYOUT ARCHITECTURE
 * · td-wrap is full-viewport-width (no max-width) so that the
 *   50vw/translateX(−50vw) break-out for td-block--1/2 lands at x=0.
 * · Block--0 (THE DREAM) is centred via its own max-width: 760px.
 * · Pull quote / blocks 1–2 are full-width / full-bleed.
 *
 * CLAMP FORMULA BASIS:
 * All fluid values anchor to 390px (mobile) and 1440px (desktop).
 * Divisor = 1050px. slope = Δ / 1050. A = min − slope × 3.9 (× 10 for vw).
 */


/* ══════════════════════════════════════════════════════════════════
   §1  PAGE STRUCTURE — td-wrap · hidden H1
   ══════════════════════════════════════════════════════════════════ */

.td-wrap {
  width: 100%;
  box-sizing: border-box;
  padding-top: clamp(44px, calc(-3.914px + 12.286vw), 173px);
}

.td-header { margin: 0; padding: 0; }
.td-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.td-content { display: block; }

/* Lead paragraph desktop line-break spans — hidden by default, block at 1440px */
.td-lead-break { display: none; }
@media (min-width: 1440px) {
  .td-lead-break { display: block; height: 0; line-height: 0; }
}


/* ══════════════════════════════════════════════════════════════════
   §2  HEADING TYPOGRAPHY — base overrides (all blocks)
   Typography scale: 390px → 1440px (divisor 1050)
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-block__title {
  font-family: var(--font-primary);
  font-weight: 300 !important;
  color: #000 !important;
  margin-bottom: 24px !important;
}

/* Block 0 — THE DREAM: 56px @390 → 96px @1440
   slope = 40/1050 = 3.80952vw  A = 56 − 3.80952×3.9 = 41.143
   line-height: 67px → 117px  slope = 50/1050 = 4.7619vw  A = 67 − 4.7619×3.9 = 48.429
   margin-bottom: 46px → 60px  slope = 14/1050 = 1.333vw  A = 46 − 1.333×3.9 = 40.800 */
.td-wrap .td-block--0 .td-block__title {
  font-size: clamp(56px, calc(41.143px + 3.80952vw), 96px) !important;
  line-height: clamp(67px, calc(48.429px + 4.7619vw), 117px) !important;
  letter-spacing: clamp(0px, calc(-1.486px + 0.381vw), 4px) !important;
  text-align: center !important;
  text-box: trim-both cap alphabetic;
  -webkit-text-box: trim-both cap alphabetic;
  leading-trim: both;
  text-edge: cap alphabetic;
  margin-bottom: clamp(46px, calc(40.800px + 1.333vw), 60px) !important;
}

/* Block 1 — TAROT & ORACLE: 36px @390 → 56px @1440
   slope = 20/1050 = 1.90476vw  A = 36 − 1.90476×3.9 = 28.571
   line-height: 43px → 68px  slope = 25/1050 = 2.381vw  A = 43 − 2.381×3.9 = 33.714 */
.td-wrap .td-block--1 .td-block__title {
  font-size: clamp(36px, calc(28.571px + 1.90476vw), 56px) !important;
  line-height: clamp(43px, calc(33.714px + 2.381vw), 68px) !important;
  letter-spacing: clamp(0px, calc(5.486px - 0.381vw), 4px) !important;
}

/* Block 2 — ABOUT THE FOUNDER: 32px @390 → 36px @1440
   slope = 4/1050 = 0.38095vw  A = 32 − 0.38095×3.9 = 30.514
   line-height: 38px → 44px  slope = 6/1050 = 0.571vw  A = 38 − 0.571×3.9 = 35.771 */
.td-wrap .td-block--2 .td-block__title {
  font-size: clamp(32px, calc(30.514px + 0.38095vw), 36px) !important;
  line-height: clamp(38px, calc(35.771px + 0.571vw), 44px) !important;
  letter-spacing: clamp(0px, calc(-1.486px + 0.381vw), 4px) !important;
}


/* ══════════════════════════════════════════════════════════════════
   §3  BODY TYPOGRAPHY — unified across all blocks
   font-size:   18px @390 → 20px @1440  slope = 2/1050 = 0.19048vw  A = 17.257
   line-height: 29px @390 → 32px @1440  slope = 3/1050 = 0.28571vw  A = 27.886
   Paragraph gaps per block — from Figma OPTIMIZED ABB measurements.
   Per frames 987:4213 (desktop) · 987:4254 (mobile).
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-block__text,
.td-wrap .td-block__text p {
  font-family: var(--font-primary) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, calc(17.257px + 0.19048vw), 20px) !important;
  line-height: clamp(29px, calc(27.886px + 0.28571vw), 32px) !important;
  text-align: left !important;
  color: #000 !important;
}

/* Lead paragraph — italic, centred; size inherits from parent rule above.
   Gap after lead (ABB): 40px @390 → 52px @1440.
     slope = 12/1050 = 1.14286 → A = 40 − 1.14286×3.9 = 35.543 */
.td-wrap .td-block--0 .td-block__text p:first-child {
  font-weight: 300 !important;
  font-style: italic !important;
  text-align: center !important;
  margin-bottom: clamp(40px, calc(35.543px + 1.14286vw), 52px) !important;
}

/* Inline links inherit body size */
.td-wrap .td-block__text a { font-size: inherit; }

/* Paragraph rhythm — per block, from Figma OPTIMIZED ABB gaps */

/* Block 0 body paras: 36px @390 → 44px @1440
     slope = 8/1050 = 0.76190 → A = 36 − 0.76190×3.9 = 33.029 */
.td-wrap .td-block--0 .td-block__text p {
  margin-bottom: clamp(36px, calc(33.029px + 0.76190vw), 44px) !important;
}

/* Block 1 paras: 32px @390 → 36px @1440
     slope = 4/1050 = 0.38095 → A = 32 − 0.38095×3.9 = 30.514 */
.td-wrap .td-block--1 .td-block__text p {
  margin-bottom: clamp(32px, calc(30.514px + 0.38095vw), 36px) !important;
}

/* Block 2 paras: 32px fixed (identical at both breakpoints) */
.td-wrap .td-block--2 .td-block__text p {
  margin-bottom: 32px !important;
}


/* ══════════════════════════════════════════════════════════════════
   §4  BLOCK 0 — THE DREAM — layout & spacing
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-block--0 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: clamp(98px, calc(90.943px + 1.810vw), 117px);
  padding-bottom: 73px;
}
@media (min-width: 760px) {
  .td-wrap .td-block--0 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Blockquote — "A naming theorist" paragraph.
   Blue left border removed per Anissa direction 2026-07-07.
   Renders identically to all other body paragraphs. */
.td-wrap .td-block--0 .td-block__text blockquote {
  margin: 0;
  padding: 0;
  border: none;
}


/* ══════════════════════════════════════════════════════════════════
   §5  PULL QUOTE BAND — full-width cobalt section
   Pull quote: 28px @390 → 40px @1440
   slope = 12/1050 = 1.14286vw  A = 28 − 1.14286×3.9 = 23.543
   line-height: 34px → 48px  slope = 14/1050 = 1.33333vw  A = 34 − 1.33333×3.9 = 28.800
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-pullquote {
  background: var(--color-cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(0px, calc(-23.771px + 6.095vw), 64px);
  min-height: clamp(192px, calc(319.543px - 8.857vw), 285px);
}
.td-wrap .td-pullquote__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(28px, calc(23.543px + 1.14286vw), 40px) !important;
  line-height: clamp(34px, calc(28.800px + 1.33333vw), 48px) !important;
  letter-spacing: 0;
  color: var(--color-white);
  max-width: clamp(293px, calc(78.690px + 54.952vw), 870px);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════
   §6  BLOCK 1 — TAROT & ORACLE CURATION — mobile layout
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-block--1 {
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: clamp(48px, calc(45.143px + 0.667vw), 55px);
}

.td-wrap .td-block--1 .td-block__title    { order: 1; }
.td-wrap .td-block--1 .td-block__img-wrap { order: 2; }
.td-wrap .td-block--1 .td-block__text     { order: 3; }

.td-wrap .td-block--1 .td-block__img-wrap {
  width: 100%;
  height: 320px;
  overflow: hidden;
  margin-top: 60px;
}
.td-wrap .td-block--1 .td-block__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.td-wrap .td-block--1 .td-block__text { margin-top: 51px; }


/* ══════════════════════════════════════════════════════════════════
   §7  BLOCK 2 — ABOUT THE FOUNDER — mobile layout
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-block--2 {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
}

.td-wrap .td-block--2 .td-block__img-wrap {
  width: calc(100% + 80px);
  margin-left: -40px;
  height: 480px;
  overflow: hidden;
}
.td-wrap .td-block--2 .td-block__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.td-wrap .td-block--2 .td-block__title { margin-top: 87px; }


/* ══════════════════════════════════════════════════════════════════
   §8  CTA SECTIONS
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-cta { text-align: center; padding: 33px 24px; }
.td-wrap .td-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 33px;
  background: #000;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.44px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.td-wrap .td-cta__btn:hover { opacity: 0.85; color: var(--color-white); }
.td-cta__btn { letter-spacing: 0.44px !important; }
.td-cta--readings { margin-bottom: 80px !important; }

/* Boutique CTA — button centred under the text column, not the full viewport.
   Mobile: 40px side padding → button centred in 310px content area (x=87).
   Desktop 1440px: text column x=120, w=560, centre=400 → button left=292px. */
.td-wrap .td-cta--boutique {
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
}

@media (min-width: 1440px) {
  .td-wrap .td-cta--boutique {
    text-align: left;
    padding-left: 292px;
    padding-right: 0;
  }
}


/* ══════════════════════════════════════════════════════════════════
   §9  TWO-COLUMN GRID — ≥1024 px
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  .td-wrap .td-block--1,
  .td-wrap .td-block--2 {
    display: grid;
    column-gap: 48px;
    align-items: start;
    padding-left: 0;
    padding-right: 0;
  }

  .td-wrap .td-block--1 {
    grid-template-columns: 1fr 42%;
  }
  .td-wrap .td-block--1 .td-block__title {
    grid-column: 1 / span 2;
    grid-row: 1;
    text-align: center !important;
    margin-bottom: 52px !important;
  }
  .td-wrap .td-block--1 .td-block__img-wrap {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    height: 400px;
    overflow: hidden;
  }
  .td-wrap .td-block--1 .td-block__text {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .td-wrap .td-block--2 {
    grid-template-columns: 42% 1fr;
  }
  .td-wrap .td-block--2 .td-block__img-wrap {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    width: auto;
    margin-left: 0;
    height: auto;
    min-height: 400px;
    overflow: hidden;
  }
  .td-wrap .td-block--2 .td-block__title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .td-wrap .td-block--2 .td-block__text {
    grid-column: 2;
    grid-row: 2;
  }

}


/* ══════════════════════════════════════════════════════════════════
   §10  FULL-BLEED EXACT MATCH AT 1440 px
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {

  .td-wrap .td-block--1,
  .td-wrap .td-block--2 {
    position: relative;
    left: 50vw;
    transform: translateX(-50vw);
    width: 100vw;
    max-width: 1440px;
    box-sizing: border-box;
    column-gap: 0;
  }

  .td-wrap .td-block--1 {
    grid-template-columns: 640px 560px;
    padding: 55px 120px 0;
  }
  .td-wrap .td-block--1 .td-block__img-wrap {
    height: 500px;
  }

  .td-wrap .td-block--2 {
    grid-template-columns: 520px 680px;
    padding: 40px 80px;
    column-gap: 80px;
  }
  .td-wrap .td-block--2 .td-block__img-wrap {
    height: 700px;
  }
  .td-wrap .td-block--2 .td-block__img-wrap img {
    height: 700px !important;
    object-fit: cover !important;
  }

}


/* ══════════════════════════════════════════════════════════════════
   §11  .btn_filled
   ══════════════════════════════════════════════════════════════════ */

.btn_filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  background: #000;
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
}
.btn_filled:hover { opacity: 0.85; color: #fff; }