/*
 * 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-08-02 to 320px → 1920px 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 320px (mobile) and 1920px (desktop).
 * Divisor = 1600px. slope = Δ × 100/1600. A = min − Δ × 320/1600.
 */


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

.td-wrap {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--alq-header-h);
}

.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: 320px → 1920px (divisor 1600)
   ══════════════════════════════════════════════════════════════════ */

.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 @320 → 96px @1920
   slope = 40 × 100/1600 = 2.5vw   A = 56 − 40 × 320/1600 = 48px
   line-height: 67px → 117px  slope = 50 × 100/1600 = 3.125vw  A = 67 − 50 × 320/1600 = 57px
   letter-spacing: 0 → 4px  slope = 0.25vw  A = 0 − 4 × 320/1600 = −0.8px
   margin-bottom: 46px → 60px  slope = 14 × 100/1600 = 0.875vw  A = 46 − 14 × 320/1600 = 43.2px */
.td-wrap .td-block--0 .td-block__title {
  font-size: clamp(56px, calc(48px + 2.5vw), 96px) !important;
  line-height: clamp(67px, calc(57px + 3.125vw), 117px) !important;
  letter-spacing: clamp(0px, calc(-0.8px + 0.25vw), 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(43.2px + 0.875vw), 60px) !important;
}

/* Block 1 — TAROT & ORACLE: 36px @320 → 56px @1920
   slope = 20 × 100/1600 = 1.25vw  A = 36 − 20 × 320/1600 = 32px
   line-height: 43px → 68px  slope = 25 × 100/1600 = 1.5625vw  A = 43 − 25 × 320/1600 = 38px
   letter-spacing: inverted 4px @320 → 0px @1920  A = 4.8px  slope = −0.25vw */
.td-wrap .td-block--1 .td-block__title {
  font-size: clamp(36px, calc(32px + 1.25vw), 56px) !important;
  line-height: clamp(43px, calc(38px + 1.5625vw), 68px) !important;
  letter-spacing: clamp(0px, calc(4.8px - 0.25vw), 4px) !important;
}

/* Block 2 — ABOUT THE FOUNDER: 32px @320 → 36px @1920
   slope = 4 × 100/1600 = 0.25vw  A = 32 − 4 × 320/1600 = 31.2px
   line-height: 38px → 44px  slope = 6 × 100/1600 = 0.375vw  A = 38 − 6 × 320/1600 = 36.8px */
.td-wrap .td-block--2 .td-block__title {
  font-size: clamp(32px, calc(31.2px + 0.25vw), 36px) !important;
  line-height: clamp(38px, calc(36.8px + 0.375vw), 44px) !important;
  letter-spacing: clamp(0px, calc(-0.8px + 0.25vw), 4px) !important;
}


/* ══════════════════════════════════════════════════════════════════
   §3  BODY TYPOGRAPHY — unified across all blocks
   font-size:   18px @320 → 20px @1920  slope = 2 × 100/1600 = 0.125vw  A = 18 − 2 × 320/1600 = 17.6px
   line-height: 29px @320 → 32px @1920  slope = 3 × 100/1600 = 0.1875vw  A = 29 − 3 × 320/1600 = 28.4px
   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.6px + 0.125vw), 20px) !important;
  line-height: clamp(29px, calc(28.4px + 0.1875vw), 32px) !important;
  text-align: left !important;
  color: #000 !important;
}

/* Lead paragraph — italic, centred; size inherits from parent rule above.
   Gap after lead (ABB): 40px @320 → 52px @1920.
   slope = 12 × 100/1600 = 0.75vw  A = 40 − 12 × 320/1600 = 37.6px */
.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(37.6px + 0.75vw), 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 @320 → 44px @1920
   slope = 8 × 100/1600 = 0.5vw  A = 36 − 8 × 320/1600 = 34.4px */
.td-wrap .td-block--0 .td-block__text p {
  margin-bottom: clamp(36px, calc(34.4px + 0.5vw), 44px) !important;
}

/* Block 1 paras: 32px @320 → 36px @1920
   slope = 4 × 100/1600 = 0.25vw  A = 32 − 4 × 320/1600 = 31.2px */
.td-wrap .td-block--1 .td-block__text p {
  margin-bottom: clamp(32px, calc(31.2px + 0.25vw), 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(94.2px + 1.1875vw), 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 @320 → 40px @1920
   slope = 12 × 100/1600 = 0.75vw  A = 28 − 12 × 320/1600 = 25.6px
   line-height: 34px → 48px  slope = 14 × 100/1600 = 0.875vw  A = 34 − 14 × 320/1600 = 31.2px
   padding: 0 → 64px  slope = 4vw  A = 0 − 64 × 320/1600 = −12.8px
   min-height inverted: 285px @320 → 192px @1920
     slope = −93 × 100/1600 = −5.8125vw  A = 285 + 93 × 320/1600 = 303.6px
   max-width: 293px → 870px  slope = 577 × 100/1600 = 36.0625vw  A = 293 − 577 × 320/1600 = 177.6px
   ══════════════════════════════════════════════════════════════════ */

.td-wrap .td-pullquote {
  background: var(--color-cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(0px, calc(-12.8px + 4vw), 64px);
  min-height: clamp(192px, calc(303.6px - 5.8125vw), 285px);
}
.td-wrap .td-pullquote__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(28px, calc(25.6px + 0.75vw), 40px) !important;
  line-height: clamp(34px, calc(31.2px + 0.875vw), 48px) !important;
  letter-spacing: 0;
  color: var(--color-white);
  max-width: clamp(293px, calc(177.6px + 36.0625vw), 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(46.6px + 0.4375vw), 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; }