/* My School of Work — page-specific section styles. Header, footer,
   buttons, fonts and the generic .section/.page-wrap primitives already
   live in public/css/site.css (shared, loaded before this file) — not
   repeated here. Loaded on my-school-of-work.html only.

   FLUID-ENGINE GRID (Phase 7 tablet-fidelity rebuild, 17.09.26)
   ---------------------------------------------------------------
   Rebuilt on live's own Squarespace fluid-engine grid, same method as
   public/css/home.css and public/css/bray-new-student-offer.css: a CSS
   grid per section with a fixed row count, 11px row/column gaps, two
   flexible gutter columns and an explicit grid-area per block, at two
   breakpoints (<768px: 8 columns, rows minmax(24px, auto); >=768px: 24
   columns, rows minmax(container-width * 0.0215, auto)). The PREVIOUS
   version of this file used 1440-fixed font sizes, paddings and column
   widths (px values baked in from the desktop reference screenshot only)
   -- correct at 375/1440 but +1980px too long at 820 and +1103px too
   long at 1024 (Phase 7 tablet scan), because none of those fixed values
   scaled with viewport width the way live's own formulas do. Every
   number below is read straight from the live page's own inline
   fluid-engine CSS (raw capture: claude-workspace/working-files/website-
   netlify-migration/wayfinder/raw/my-school-of-work.html) and cross-
   checked against reference/my-school-of-work/measurements.json's own
   section heights/paddings at 375 and 1440 (hero and intro/practice
   padding-top/bottom match live to the sub-pixel once run through the
   formulas below -- see the fix-loop report for the arithmetic).

   Section anatomy (live -> build), same as bray-new-student-offer.css:
     section.page-section  -> section.section msw-*  padding-top = header
                              formula (hero only), padding-bottom = this
                              section's OWN live divider height (see
                              "Dividers" below -- NOT a uniform 6vw here,
                              my-school-of-work mixes 6vw and 12vw)
     .content-wrapper       -> .fe-wrap / .fe-wrap--medium  padding
                              3.3vmax (section-height--small: hero,
                              practice) or 6.6vmax (--medium: intro, cta)
                              top+bottom -- confirmed against live's own
                              data-current-styles sectionHeight per
                              section
     .fluid-engine           -> .fe .fe-s-*  the grid
     .fe-block > .sqs-block  -> .fe-block   grid item

   Type: live's own Squarespace 7.1 formulas (matches home.css/bray-new-
   student-offer.css exactly), so sizes track the viewport width AND
   height the way live does, not a fixed px per breakpoint:
     phone (portrait, <768px): (X - 1) * 0.012 * min(100vh, 900px) + 1rem
     desktop/landscape: min((X - 1) * 1.2vw + 1rem,
                            max((X - 1) * 0.012 * 1400px + 1rem, X * 1rem))
   Heading line-height = 1.2 * (1 + (1 - X) / 25); "large" body text 1.5
   uniformly at both widths (the previous version's mobile 1.28 was wrong
   -- reference/my-school-of-work/measurements.json's own paragraph
   lineHeight/fontSize ratio is exactly 1.5 at BOTH 375 and 1440).
   X per element (confirmed against measurements.json's own fontSize,
   and the H1's formula against live's marquee block's own
   --marquee-font-size-value: 4 -- read straight off the raw capture):
     H1 (hero) = 4   (line-height 1.056)
     marquee   = 4, same formula as H1, but line-height 1.4 (live's own
                 marquee treatment, per the raw block's inline style)
     h3        = 2.2 (line-height 1.1424)
     paragraphs (intro + all 3 practice subsections) = 1.4 "large" text
                 (line-height 1.5)
   At 375x812 / 1440x900 these give h1 45.232/66.4, h3 27.6928/36.16,
   large 19.8976/22.72 -- exactly measurements.json's own values.

   Dividers (reference/section-dividers.json + the raw capture's own
   data-current-context.divider per section -- each divider's config
   lives in the section ABOVE it, drawn at that section's own bottom
   edge): hero's own divider is wavy/6vw (orange stroke); intro's own is
   pointed/12vw; practice's own is slanted/12vw; cta has none (disabled).
   A section's own padding-bottom = its divider's height (or 0), matched
   here per section rather than a single site-wide constant -- confirmed
   against measurements.json: hero paddingBottom 22.5px(375)/86.4px(1440)
   = exactly 6vw both widths; intro AND practice paddingBottom
   45px(375)/172.8px(1440) = exactly 12vw both widths. */

/* ---------- Header overlay + scrim ----------
   Position: absolute is site.css's shared default -- see site.css's own
   comment on .site-header. This page still needs its own background,
   kept page-local because it's a real per-page difference, not a shared
   one: the header sits over a busy full-bleed hero photo here (every
   other page's header sits on plain cream/off-white), so it needs a
   legibility scrim the other pages don't.

   Live's own header config (data-current-styles, headerStyle:
   "gradient", gradientOptions.gradientType: "faded", backgroundColor:
   white, navigationColor: black) confirmed the live nav sits on a
   white-fade scrim confined to the header's own height, not a dark
   overlay across the whole hero. Sampled desktop-full.png at x=700:
   (250,247,245) at y=0 fading to raw image colour by y~90, matching the
   header's own ~82px/80.6px box almost exactly -- so the gradient is
   scoped to .site-header's own height, not a fixed px value, and needs
   no change if that height ever changes. */
body.page-my-school-of-work .site-header {
  background: linear-gradient(180deg, rgba(252, 249, 247, 0.94) 0%, rgba(252, 249, 247, 0) 100%);
}

/* ---------- The grid (same primitive as home.css / bray-new-student-
   offer.css, page-local so it can't collide -- only one page's CSS
   loads at a time anyway) ---------- */
.fe {
  --grid-gutter: calc(6vw - 11px);
  --cell-max-width: calc((1400px - 11px * 7) / 8);
  display: grid;
  position: relative;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11px;
  column-gap: 11px;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(2vw - 11px);
    --cell-max-width: calc((1400px - 11px * 23) / 24);
    --container-width: min(1400px, calc(100vw - 2vw * 2));
    --row: calc(var(--container-width) * 0.0215);
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}
.fe-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.fe-block > * { flex: 0 0 auto; margin: 0; }

/* content-wrapper padding -- live's own vertical rhythm per
   sectionHeight (small/medium), both top AND bottom, sitting inside the
   section's own header/divider padding above. */
.fe-wrap { padding: 3.3vmax 0; }
.fe-wrap--medium { padding: 6.6vmax 0; }

/* ---------- Type (live's own fluid formulas) ---------- */
.msw-hero h1,
.msw-marquee {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem);
}
.msw-hero h1 { line-height: 1.056; }
.msw-marquee { line-height: 1.4; white-space: nowrap; }
.practice-col-text h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.1424;
  font-size: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem);
}
.msw-intro-inner p,
.practice-col-text p,
.practice-full p {
  line-height: 1.5;
  font-size: calc(0.4 * 0.012 * min(100vh, 900px) + 1rem);
}
@media (min-width: 768px), (orientation: landscape) {
  .msw-hero h1,
  .msw-marquee { font-size: min(calc(3 * 1.2vw + 1rem), max(calc(3 * 0.012 * 1400px + 1rem), 4rem)); }
  .practice-col-text h3 { font-size: min(calc(1.2 * 1.2vw + 1rem), max(calc(1.2 * 0.012 * 1400px + 1rem), 2.2rem)); }
  .msw-intro-inner p,
  .practice-col-text p,
  .practice-full p { font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem)); }
}

/* ---------- Hero (section_id 64f96f65c5b2196e3dd6c373, section-height--
   small) ----------
   h1 over a full-bleed background image (Squarespace's "image as
   background" pattern — a real <img>, not a CSS background-image). */
.msw-hero {
  position: relative;
  overflow: visible; /* the orange wavy divider straddles this section's own bottom edge */
  display: flex;
  flex-direction: column;
  justify-content: center; /* live's own verticalAlignment: middle -- see the "min-height floor" note above .msw-cta */
  min-height: 33vh; /* live's section-height--small floor (Squarespace 7.1's classic small/medium preset = 33vh/66vh of the real, uncapped viewport height) -- never binds in the 375-1920 range tested, kept for correctness at extreme aspect ratios */
  padding: calc(37px + 12vw) 0 6vw; /* top: live's fluid header-height formula; bottom: this section's own 6vw wavy-divider space */
  text-align: left; /* live computed text-align: start */
}
@media (min-width: 800px) {
  .msw-hero { padding-top: calc(48.96875px + 2.20052vw); }
}
@media (min-width: 800px) and (max-width: 875.98px) {
  .msw-hero { padding-top: calc(54.34375px + 2.20052vw); } /* header's own 800-875.98px two-line wrap band, see site.css's .header-inner comment */
}
.msw-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Straddles the hero/intro boundary -- site.css's .wave svg is a fixed
   40px tall, viewBox midline at 20px from its own top. Colour sampled
   off the reference screenshots as the site's own --orange accent. */
.msw-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  z-index: 2;
}
.fe-s-hero { grid-template-rows: repeat(9, minmax(24px, auto)); }
.b-hero-h1 { grid-area: 1/2/9/10; }
@media (min-width: 768px) {
  .fe-s-hero { grid-template-rows: repeat(7, minmax(var(--row), auto)); }
  .b-hero-h1 { grid-area: 4/3/8/23; }
}
.msw-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  /* Fix loop 1: was inheriting body's var(--text-navy) -- illegible on
     the busy image. Sampled the reference screenshot's H1 pixels
     directly: brightest pixel (252,249,247) == var(--body-bg) exactly. */
  color: var(--body-bg);
}

/* ---------- Intro (section_id 64f96f65c5b2196e3dd6c376, heading null,
   section-height--medium) ----------
   Two lead paragraphs, no heading -- one live HTML block. */
.msw-intro {
  position: relative;
  overflow: visible; /* the pointed divider straddles this section's own bottom edge */
  display: flex;
  flex-direction: column;
  justify-content: center; /* live's own verticalAlignment: middle -- see the min-height note below */
  /* Live sets a real min-height floor on THIS section (getComputedStyle,
     Playwright, 17.09.26): section-height--medium = 66vh of the actual
     (uncapped) viewport height -- Squarespace 7.1's own small/medium/
     large preset (33vh/66vh/100vh), not a formula visible anywhere in
     the static HTML capture (it's applied by live's own runtime JS, so
     this was found by measuring, not reading markup). Confirmed exact
     at 5 widths (768/820/900/1024/1440): intro and .msw-cta (also
     medium) land on the EXACT SAME height at 768/820/900 (675.83/
     778.8/660) -- both floor-bound there, since 0.66 * that viewport's
     own height matches to the sub-pixel; at 1024/1200/1440 intro's own
     paragraph content exceeds the floor and content wins instead
     (600.41/684.8/799.77), also matching live exactly. Content still
     centers within the floor via this flex rule when the floor binds
     -- confirmed by the content-wrapper's own measured y-offset. */
  min-height: 66vh;
  padding: 0 0 12vw; /* this section's own 12vw pointed-divider space */
}
.fe-s-intro { grid-template-rows: repeat(14, minmax(24px, auto)); }
.b-intro-text { grid-area: 1/2/15/10; }
@media (min-width: 768px) {
  .fe-s-intro { grid-template-rows: repeat(11, minmax(var(--row), auto)); }
  .b-intro-text { grid-area: 1/5/12/23; }
}

/* ---------- Body / Mind / Spirit (section_id 64f96f65c5b2196e3dd6c379,
   section-height--small) ----------
   One live section, 12 fluid-engine blocks (image/heading/paragraphs x3
   subsections) -- kept as one .section to match content.json's single
   "The Body (Soma)" entry; DOM order = live's own block order (image,
   heading, lead paragraphs, "practice-full" paragraphs) per subsection,
   which is also phone reading order. Do not reorder or split. */
.msw-practice {
  position: relative;
  overflow: visible; /* the slanted divider straddles this section's own bottom edge */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 33vh; /* section-height--small floor, see .msw-hero's own comment -- never binds in the tested range, kept for correctness */
  padding: 0 0 12vw; /* this section's own 12vw slanted-divider space */
  background: var(--hero-cream); /* live-measured (252,238,220), not the default --body-bg */
}
.fe-s-practice { grid-template-rows: repeat(157, minmax(24px, auto)); }
.b-body-img   { grid-area: 1/2/14/10; z-index: 0; }
.b-body-h3    { grid-area: 14/2/16/10; z-index: 1; }
.b-body-p1    { grid-area: 16/2/44/10; z-index: 2; }
.b-body-full  { grid-area: 44/2/75/10; z-index: 5; }
.b-mind-img   { grid-area: 75/2/88/10; z-index: 1; }
.b-mind-h3    { grid-area: 88/2/90/10; z-index: 2; }
.b-mind-p1    { grid-area: 90/2/110/10; z-index: 3; }
.b-mind-full  { grid-area: 110/2/120/10; z-index: 6; }
.b-spirit-img { grid-area: 121/2/134/10; z-index: 2; }
.b-spirit-h3  { grid-area: 134/2/136/10; z-index: 3; }
.b-spirit-p1  { grid-area: 136/2/158/10; z-index: 4; }
@media (min-width: 768px) {
  .fe-s-practice { grid-template-rows: repeat(94, minmax(var(--row), auto)); }
  .b-body-img   { grid-area: 7/16/24/26; }
  .b-body-h3    { grid-area: 2/3/4/14; }
  .b-body-p1    { grid-area: 4/3/29/15; }
  .b-body-full  { grid-area: 28/3/43/25; }
  .b-mind-img   { grid-area: 45/3/63/13; }
  .b-mind-h3    { grid-area: 44/14/46/25; }
  .b-mind-p1    { grid-area: 46/14/64/25; }
  .b-mind-full  { grid-area: 64/3/69/25; }
  .b-spirit-img { grid-area: 72/15/92/25; }
  .b-spirit-h3  { grid-area: 70/3/72/14; }
  .b-spirit-p1  { grid-area: 72/3/95/14; }
}
/* Image blocks: live fills the WHOLE grid-area box with the photo
   (object-fit: cover), not a fixed aspect-ratio guess -- the block's own
   grid-area (rows x cols) determines the crop, exactly as home.css's
   .about-photo pattern, minus the "never crop" special case that only
   applies to home's square art. .fe-block itself stretches to its grid
   area's full height (CSS Grid's own align-items: stretch default). */
.practice-col-image { position: relative; }
.practice-col-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Defect fix, this rebuild (18.09.26): live's own image wrapper
     (getComputedStyle, .fluid-image-container) is 40px, not the 4px an
     earlier version of this file used -- caught by a live crop
     comparison at 820px, invisible to build_compare/box_compare (both
     score box position only, not corner radius). Same 40px value
     home.css's .about-photo already uses for the same live convention. */
  border-radius: 40px;
}
/* Live-measured (getComputedStyle, 820x1180): h3 margin-bottom is 0
   (each heading is alone in its own live block, per the grid-areas
   above) and paragraph margin-bottom is a flat 16px at every width (not
   responsive, and NOT site.css's generic 24px p rule) -- both wrong in
   an earlier version of this rule (16/20px h3, 18/22px p), which added
   an extra ~6-12px per text block and was the whole cause of the
   practice section's remaining tablet drift (up to 60px at 768-900,
   even though 375/1440/1200/1920 already matched -- flex items don't
   collapse trailing child margins, so the excess showed up as real
   height). :last-child keeps each block's own trailing paragraph
   flush, matching live's block-tight sizing exactly. */
.practice-col-text h3 { margin: 0; }
.msw-intro-inner p,
.practice-col-text p,
.practice-full p { margin: 0 0 16px; }
.msw-intro-inner p:last-child,
.practice-col-text p:last-child,
.practice-full p:last-child { margin-bottom: 0; }

/* ---------- Study With Me CTA (section_id 64f96f65c5b2196e3dd6c37f,
   heading null, section-height--medium, no divider) ----------
   Fix loop 1 (16.09.26): live renders this as an animated Squarespace
   scrolling-marquee block -- rebuilt as the same static repeat-text +
   overflow:hidden technique home.css / studywithme.css already use, an
   approved, flagged decision at the time (this build deliberately did
   not animate it). Reversed 18.09.26 (defect fix) -- now animated, see
   `.msw-marquee`'s own scroll-animation rule below and site.css's
   shared @keyframes marquee-scroll-right comment for the source
   evidence (live's own DOM data attributes + Playwright speed probe).
   Font-size formula matches live's own --marquee-font-size-value: 4
   (the raw capture's own inline style on this block) -- the same X=4
   formula as the hero H1, confirmed by measurements.json (same
   fontSize at both widths), not a coincidence: live sizes this CTA
   marquee off the site's own H1 formula, with its own 1.4 line-height
   (marquee's own live-measured lineHeight/fontSize ratio), not the
   H1's 1.056. */
.msw-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* live's own verticalAlignment: middle */
  /* This section's own live padding is 0/0 (measured, no header, no
     divider) -- its ENTIRE measured height at every width tested
     (375/768/820/900/1024/1200/1440/1920) is the section-height--medium
     66vh floor (see .msw-intro's comment for how this was found): every
     one of those 8 widths matches 0.66 * that viewport's own height to
     within 0.02px, so the marquee+button content here never actually
     grows the section past the floor -- centered within it via the flex
     rule above. */
  min-height: 66vh;
  padding: 0;
  text-align: center;
}
.fe-s-cta { grid-template-rows: repeat(4, minmax(24px, auto)); }
.b-cta-marquee { grid-area: 1/2/3/10; z-index: 1; justify-content: center; }
.b-cta-button { grid-area: 3/3/5/9; z-index: 2; justify-content: center; }
@media (min-width: 768px) {
  .fe-s-cta { grid-template-rows: repeat(5, minmax(var(--row), auto)); }
  .b-cta-marquee { grid-area: 1/1/4/27; } /* live bleeds this block edge-to-edge on desktop, unlike every other block on this page */
  .b-cta-button { grid-area: 4/12/6/16; }
}
.marquee-wrap { overflow: hidden; }
/* Scroll animation (defect fix, 18.09.26 -- see site.css's own
   @keyframes marquee-scroll-right comment for the full source
   evidence). Text repeated 6x in the markup (my-school-of-work.html) --
   -16.6667% = 1/6 of this h1's own rendered width, one repeat unit.
   Duration holds live's own ~60px/s (data-animation-speed="1" x
   60px/s -- see site.css) against this element's own rendered repeat-
   unit width at each breakpoint (measured against this build's own
   rendering: 418.17px/6 mobile, 573.83px/6 desktop). */
.msw-marquee {
  --marquee-shift: -16.6667%;
  animation: marquee-scroll-right 7s linear infinite;
}
@media (min-width: 768px) {
  .msw-marquee { animation-duration: 9.6s; }
}
.msw-marquee:hover { animation-play-state: paused; } /* matches live's data-paused-on-hover="true" */
/* Button block: defect fix, this rebuild (18.09.26) -- live's own button
   here is NOT the generic site.css `.btn` padding-driven box (16px
   20.8px, ~59px flat); it's a live fluid-engine "button fills its whole
   2-row block" pattern, identical to home.css's own `.fe-btn-block`
   (same live convention, confirmed by matching heights exactly: 59px
   phone / 44.8px at 820 / 70.4px at 1440 = 2 grid rows + 1 gap at each
   width, not a fixed padding). Caught by a live crop + getComputedStyle
   check (padding showed 16px 20.8px in the build vs live's 0 20.8px),
   invisible to build_compare/box_compare (position-only tools). */
.b-cta-button > .btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0 20.8px;
  line-height: normal;
  text-align: center;
}