/* Method-A stripped-JS patches — yourjourneyawakens.com (Squarespace 7.1, Fluid Engine).
   Each rule below replaces one thing Squarespace's runtime JS used to do.
   Measured against live at 1440 and 390 on 2026-09-14; see qa/run-qa.py. */

/* ============================================================================
   MODULE 2 — unhide-animation-gated  (+ module 1's un-hide half)
   Squarespace ships animated blocks at opacity:0 and its JS adds the revealed
   state on scroll. The engine already flips the global gate class; this is the
   no-JS floor underneath it, so nothing can be left stuck invisible.
   ========================================================================= */
.tweak-global-animations-disabled [data-animation-role],
[data-animation-role],
.sqs-block,
.fluid-image-animation-wrapper,
img[data-load="false"],
.sqs-image-content,
.sqs-image img,
img.loaded {
  opacity: 1 !important;
}
[data-animation-role] {
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
/* Squarespace's other fade gate: .preFade{opacity:0}, un-hidden by JS adding
   .fadeIn. Anything captured with .preFade alone stays invisible forever. */
.preFade, .scaleIn, .slideIn { opacity: 1 !important; transform: none !important; }

/* ============================================================================
   MODULE 3 / 14 — fixed-size accent images + mobile fluid-engine geometry.
   THE fidelity fix on this site.

   Mechanism (measured, not guessed): every fluid image container is sized by
      .sqs-image-content { height: var(--image-component-container-height,100%) }
   and it is the imageFluid JS that publishes that variable. With the JS gone
   the fallback 100% resolves against a `minmax(24px, auto)` fluid-engine row,
   the row grows to the image's natural height, and the whole page below it
   slides down: /about's grid rows went 24px -> 99.5px and the page ran +336px.

   The fix restores what the JS computed, the way the platform computes it:
   take the container OUT of flow (absolute, inset 0) so it fills its block box
   and can never drive a grid row, and let the img's existing
   `object-fit: var(--image-component-object-fit)` do the contain/cover fit
   inside that box. That is exactly live's result — verified per element:
   /about collage 343x466 in a 343x504 block (contain), YJ_birds 340x312 in
   390x312, Emboss_YJ 231x48 filling its 231x48 block (cover).

   Desktop is left alone: it already matched live at dh +0 on all six routes,
   so the rule is gated to the same <=767px breakpoint the Fluid Engine uses
   to switch grid-areas. Pinning per element, not a blanket size — the
   documented anti-pattern is a blanket rule, and every value here came off a
   live measurement.
   ========================================================================= */
@media (max-width: 767px) {
  .sqs-block[data-definition-name="website.components.imageFluid"] .fluid-image-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .sqs-block[data-definition-name="website.components.imageFluid"] .js-content-mode-element-wrapper {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
  }
  .sqs-block[data-definition-name="website.components.imageFluid"] .fluid-image-container img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================================
   MODULE 14 — the header-offset padding baked in at capture width.
   The header is position:absolute, so Squarespace's JS writes an inline
   `padding-top: <header height>px` onto the first page section AND onto the
   burger overlay, recomputed per width. The mirror is the 1440 render, so both
   carry the DESKTOP header height (118.031px) forever. At 390 the live header
   is 107.5px (9.75 top + 88 inner + 9.75 bottom), which is why every route sat
   exactly +10px low after the image fix. Restore the mobile value; desktop is
   already correct, so leave >=768 alone.
   ========================================================================= */
/* SUPERSEDED 2026-09-15 — js/main.js now measures the header and applies its
   real height at every width. Two frozen constants (107.5 mobile / 118.031
   desktop) were only ever correct at 390 and 1440, the two widths the QA
   harness shoots: live pads 113px at 500, 123px at 700, 107.78px at 800 and
   112.59px at 1100, because the header height itself varies continuously. That
   left every route exactly -15px short at 700. Kept as a no-JS floor only. */
@media (max-width: 767px) {
  [style*="padding-top: 118.031px"] { padding-top: 107.5px; }
}

/* ============================================================================
   MODULE 2 (motion half) + MODULE 12 (placeholder note).
   The reveal floor above makes everything visible with JS off; main.js adds
   .ma-fade/.ma-in on top so the fade intent survives when JS runs.
   ========================================================================= */
.ma-fade { transition: opacity .6s ease, transform .6s ease; }
.ma-form-note {
  margin-top: 1em;
  font-size: .95em;
  line-height: 1.5;
}
.ma-form-note[data-state="error"] { color: #a4443a; }

/* ==========================================================================
   FOOTER — two deliberate DIVERGENCES from live. Everything else in this file
   restores what Squarespace's JS used to do; these two fix what it does wrong.

   1. The "Your Journey" wordmark is cropped on her live site at almost every
      window width. The art is 323x83 (aspect 3.89) but it sits in a fluid cell
      whose aspect runs from about 2.08 to 8.75 depending on viewport, with
      `object-fit: cover` — so cover fills the cell and throws away whatever
      does not fit. Measured on LIVE: sides cut at 800 and at 1920+, top and
      bottom cut from 1500-1750. It only ever fits where the cell happens to
      land on 3.89. `contain` fits the whole mark inside the cell instead;
      nothing is cropped at any width.

   2. The design credit wraps to two lines. It lives in a <pre><code> with
      `white-space: pre-wrap`, so it breaks at the space in
      "DESIGN | LAURIEINOUYEDESIGN.COM" as soon as its container is narrower
      than the ~157px the text needs — and that container gets NARROWER as the
      window gets WIDER (368px at 2000, 131px at 2560), the same inverted
      scaling as the body type. `nowrap` holds it on one line; every ancestor
      is overflow:visible, so nothing clips.

   Both are on HER live site too — worth showing her, and recorded against the
   open parity decision. Requested by Bruce 2026-09-15.
   ========================================================================== */
footer img[src*="Emboss_YJ"] {
  object-fit: contain !important;
  object-position: center !important;
}
/* ...but flush LEFT where the footer stacks. `contain` fits the mark inside a box
   that is wider than the mark needs (231x48 at 390 against an artwork aspect of
   3.89, so ~187px of art in a 231px box), and a centred object-position then
   floats it ~22px right of the nav links it should line up with. Live gets away
   with centring because `cover` fills the box — at the cost of cropping, which is
   the thing being fixed. Above the breakpoint the wordmark block is genuinely
   centred in the footer, so centre is correct there and only mobile changes. */
@media (max-width: 767px) {
  footer img[src*="Emboss_YJ"] { object-position: left center !important; }
}
footer a[href*="laurieinouyedesign"],
footer a[href*="laurieinouyedesign"] code,
footer pre:has(a[href*="laurieinouyedesign"]),
footer code:has(a[href*="laurieinouyedesign"]) {
  white-space: nowrap !important;
}

/* Between the 768px breakpoint and ~1000px the credit moves into a narrow
   right-hand column (132-177px) while the one-line text needs 217px, so nowrap
   alone pushes it past the right edge of the WINDOW and it is visually cut off.
   Right-aligning the line box makes an over-wide inline box overflow to the LEFT
   instead — into empty footer space — so the text stays on one line AND stays on
   screen. Bounded to that band on purpose: below 768 the block is wide enough to
   left-align as live does, and above ~1000 the overflow lands harmlessly in the
   gutter, so neither needs moving. */
@media (min-width: 768px) and (max-width: 1000px) {
  /* text-align:right is NOT enough — an inline-block wider than its line box
     keeps its start edge and still overflows right (verified: computed
     text-align was `right` and the box still began at the block's left edge).
     `direction: rtl` moves the start edge itself to the right, so the overflow
     genuinely goes left. The anchor is put back to ltr and isolated so the text
     still reads left to right. */
  footer pre:has(a[href*="laurieinouyedesign"]),
  footer code:has(a[href*="laurieinouyedesign"]) {
    direction: rtl !important;
    text-align: right !important;
  }
  footer a[href*="laurieinouyedesign"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }
}