/* ============================================================
   NURTURE HER — SUBPAGE LAYER
   Styles for the multi-page build. Inherits every token from
   styles.css (fonts, palette, buttons, FAQ, footer). This file
   only adds: fixed-nav offset, the Specialties dropdown, the
   page hero, the prose column, conversion blocks, and reveals.
   ============================================================ */

/* ---------- Fixed nav offset + permanent solid nav ----------
   NOTE: no body padding here — ScrollSmoother fixes its wrapper to the
   viewport top and ignores body padding entirely. Like the homepage, the
   masthead itself pads past the fixed nav (see below). */
body.subpage .nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* The subpage nav carries five links + the CTA — keep it to ONE line so the
   fixed bar never grows past --nav-h and eats the hero (script included). */
body.subpage .nav__links { gap: 1.6rem; font-size: 0.64rem; letter-spacing: 0.22em; }
body.subpage .nav__links a { white-space: nowrap; }
body.subpage .nav__cta { white-space: nowrap; }
/* if it still can't fit on one line, drop to the burger menu early */
@media (max-width: 1180px) {
  body.subpage .nav__links, body.subpage .nav__cta { display: none; }
  body.subpage .nav__burger { display: flex; }
}

/* ---------- Specialties dropdown ---------- */
.nav__dd { position: relative; }
.nav__dd-label { cursor: pointer; }
.nav__dd-caret { font-size: 0.62em; margin-left: 0.4em; opacity: 0.55; }
.nav__dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  padding: 0.9rem 0;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(65, 74, 84, 0.10);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 60;
}
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* generous hover bridge so the menu doesn't vanish crossing the gap */
.nav__dd-menu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.nav__dd-menu a {
  display: block;
  padding: 0.55rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .25s, background .25s;
}
.nav__dd-menu a:hover { color: var(--denim-deep); background: var(--mist); }

/* ============================================================
   PAGE HERO — the homepage masthead itself, scaled for subpages.
   Reuses .masthead / .masthead__frame etc. from styles.css (blue
   watercolor stripes, double-frame white card, photo left, script
   over the photo, highlighted headline right). Only two tweaks:
   the body already offsets the fixed nav, and keyword H1s run a
   little longer than the homepage's, so the type steps down a notch.
   ============================================================ */
body.subpage .masthead {
  /* pad past the fixed nav from INSIDE the smooth-scroll content (body
     padding is ignored under ScrollSmoother) + generous headroom so the
     handwritten script above the photo never crops — same as the homepage */
  padding-top: calc(var(--nav-h) + clamp(2.4rem, 5vh, 3.8rem));
}

/* ---------- hero flavors ----------
   Each subpage hero keeps the framed-card language but wears its own
   texture from the site's existing vocabulary: the homepage's blue
   stripes stay the flagship default; the others borrow the notepad
   rules, the swiss dots, the greige wall, and a soft watercolor wash. */

/* wash — the gentlest: soft chambray watercolor clouds (pregnancy loss) */
.masthead--page.flavor-wash {
  background-color: #FBFBF8;
  background-image:
    radial-gradient(46rem 30rem at 12% 20%, rgba(164, 200, 225, 0.16), transparent 60%),
    radial-gradient(40rem 26rem at 88% 75%, rgba(164, 200, 225, 0.13), transparent 60%),
    radial-gradient(30rem 22rem at 70% 10%, rgba(233, 228, 216, 0.35), transparent 65%);
}

/* greige — the striped wall in the warm neutrals (infertility, about) */
.masthead--page.flavor-greige {
  background-color: #FBFAF6;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 96px,
      rgba(233, 228, 216, 0.55) 96px 192px),
    repeating-linear-gradient(90deg,
      transparent 0 95px,
      rgba(185, 173, 153, 0.28) 95px 96px,
      transparent 96px 191px,
      rgba(185, 173, 153, 0.28) 191px 192px);
}

/* ============================================================
   GARNISH TIER — small signature touches
   ============================================================ */

/* paper airplane (education) — a folded plane glides across the section
   on a dotted flight path, like the first lesson taking off */
.plane-lane {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.plane-lane__path {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.plane-lane__plane {
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 26px;
  opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 3px 5px rgba(65, 74, 84, 0.14));
}

/* La Belle Aurore's descenders sweep left — keep the hero script clear of the
   viewport edge so glyphs like "y" never get shaved off */
.masthead--page .masthead__script {
  left: 0;
  padding-left: 0.15em;
  padding-bottom: 0.18em;
}
@media (max-width: 900px) {
  .masthead--page .masthead__script { left: 0.1em; }
}

/* poppy — hand-drawn coastal-blue floral wallpaper, the Nancy Meyers
   powder room (trusted providers) */
.masthead--page.flavor-poppy {
  background-color: #FDFCF8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'380' height%3D'480' viewBox%3D'0 0 380 480'%3E%3Cg fill%3D'none' stroke%3D'%239FBACF' stroke-width%3D'1.3' stroke-linecap%3D'round' stroke-linejoin%3D'round'%3E%3Cpath d%3D'M88.0 480.0 C86.7 466.7 79.3 430.0 80.0 400.0 C80.7 370.0 91.3 331.7 92.0 300.0 C92.7 268.3 84.3 230.7 84.0 210.0 C83.7 189.3 89.0 181.7 90.0 176.0'%2F%3E%3Cpath d%3D'M140.7 142.7 C139.7 144.1 137.5 148.7 135.1 151.0 C132.7 153.2 129.5 155.2 126.0 156.1 C122.6 157.0 117.6 155.8 114.6 156.5 C111.6 157.2 110.0 158.0 108.1 160.3 C106.3 162.6 105.6 167.7 103.4 170.5 C101.2 173.2 98.0 175.8 94.8 177.0 C91.7 178.2 88.0 177.7 84.5 177.8 C80.9 178.0 76.9 178.7 73.6 177.7 C70.3 176.8 66.6 175.0 64.7 172.0 C62.7 169.0 62.8 163.2 62.1 159.6 C61.3 156.1 61.8 152.9 60.2 150.7 C58.7 148.5 55.1 148.2 52.6 146.5 C50.2 144.8 47.4 142.8 45.4 140.5 C43.5 138.1 42.7 135.3 41.0 132.3 C39.3 129.3 36.2 126.0 35.1 122.6 C34.1 119.2 33.0 114.8 34.8 111.9 C36.5 109.1 41.9 107.0 45.7 105.4 C49.4 103.9 54.4 103.9 57.4 102.6 C60.4 101.3 61.6 99.2 63.7 97.6 C65.9 96.0 67.9 94.2 70.3 92.8 C72.6 91.4 75.2 91.1 77.7 89.1 C80.2 87.1 82.3 83.3 85.3 80.8 C88.4 78.2 92.5 74.2 96.0 73.8 C99.5 73.3 103.5 75.8 106.4 78.2 C109.2 80.6 111.0 85.1 113.1 87.9 C115.2 90.7 117.4 92.6 119.1 95.1 C120.7 97.6 122.0 100.3 122.9 102.9 C123.8 105.5 122.9 108.7 124.4 110.9 C125.9 113.2 128.8 114.2 132.0 116.3 C135.1 118.3 141.1 120.5 143.4 123.3 C145.7 126.2 146.3 130.2 145.8 133.5 C145.4 136.7 142.4 139.8 140.7 142.7 C138.9 145.6 136.0 149.6 135.1 151.0 Z'%2F%3E%3Cpath d%3D'M95.4 138.1 Q99.1 151.3 108.5 162.2'%2F%3E%3Cpath d%3D'M79.3 133.1 Q65.2 136.5 53.6 145.4'%2F%3E%3Cpath d%3D'M84.6 117.9 Q80.9 104.7 71.5 93.8'%2F%3E%3Cpath d%3D'M100.7 122.9 Q114.8 119.5 126.4 110.6'%2F%3E%3Cpath d%3D'M97.9 133.1 L105.1 137.7 M92.6 136.7 L95.8 147.5 M81.3 131.9 L66.8 138.4 M80.7 125.8 L65.0 122.0 M90.7 119.0 L91.7 107.5 M96.7 121.6 L103.0 115.5'%2F%3E%3Ccircle cx%3D'90.0' cy%3D'128.0' r%3D'4.3'%2F%3E%3Cpath d%3D'M96.7 131.5 l0.1 0.1 M91.3 135.1 l0.1 0.1 M84.9 133.4 l0.1 0.1 M82.3 127.6 l0.1 0.1 M85.5 122.1 l0.1 0.1 M92.1 121.1 l0.1 0.1 M97.1 125.2 l0.1 0.1'%2F%3E%3Cpath d%3D'M84.0 385.0 L85.6 376.1 L81.7 372.0 L86.8 358.6 L78.1 359.8 L84.5 342.6 L72.9 348.8 L78.6 329.5 L66.1 339.3 L69.5 320.5 L58.0 331.6 L58.3 315.9 L48.9 325.7 L46.2 315.6 L39.3 321.3 L34.5 318.3 L29.4 317.3 L24.3 314.7 L19.1 312.3 L13.6 310.0 L8.0 308.0 L13.6 310.0 L19.1 312.3 L24.3 314.7 L29.4 317.3 L32.7 321.2 L37.4 324.2 L33.9 332.1 L43.9 331.7 L35.1 341.3 L50.2 339.3 L37.8 348.7 L56.5 347.0 L43.4 355.2 L63.2 355.2 L52.3 361.7 L70.2 364.0 L63.9 369.4 L77.2 373.9 L77.2 379.2 L84.0 385.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M84.0 385.0 Q65.2 327.5 8.0 308.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M88.0 435.0 L95.8 432.0 L97.3 427.4 L110.5 427.5 L106.4 420.8 L122.7 424.1 L115.1 415.0 L131.5 420.4 L123.2 409.6 L137.3 415.1 L130.8 404.2 L141.0 407.8 L138.5 398.9 L144.3 398.4 L146.8 393.9 L151.9 392.6 L157.2 391.5 L162.5 390.7 L168.0 390.0 L162.5 390.7 L157.2 391.5 L151.9 392.6 L146.8 393.9 L142.0 391.5 L137.0 394.8 L131.8 386.8 L127.2 396.9 L120.7 385.6 L117.7 400.8 L109.8 389.2 L108.7 406.8 L100.3 397.9 L100.7 414.7 L93.4 410.8 L93.8 424.3 L89.2 426.6 L88.0 435.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M88.0 435.0 Q118.1 394.9 168.0 390.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M90.0 292.0 L98.2 294.6 L102.2 291.3 L114.5 297.7 L113.8 289.1 L129.4 297.2 L124.4 285.3 L141.3 292.5 L133.6 279.9 L149.1 284.3 L141.3 273.0 L152.8 273.7 L147.5 265.2 L152.8 262.2 L152.7 256.8 L156.2 252.9 L159.6 248.8 L162.9 244.5 L166.0 240.0 L162.9 244.5 L159.6 248.8 L156.2 252.9 L152.7 256.8 L147.5 256.8 L144.4 261.8 L137.5 255.1 L136.2 266.2 L129.0 254.9 L127.9 270.6 L121.7 257.6 L119.4 275.5 L114.4 264.2 L110.5 280.9 L106.1 274.0 L100.7 286.6 L95.9 285.9 L90.0 292.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M90.0 292.0 Q138.4 281.2 166.0 240.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M212.0 480.0 C213.3 466.7 220.7 425.0 220.0 400.0 C219.3 375.0 208.7 352.3 208.0 330.0 C207.3 307.7 214.7 276.7 216.0 266.0'%2F%3E%3Cpath d%3D'M216.0 260.0 L173.2 240.9 C173.6 239.9 174.4 236.7 175.6 235.0 C176.8 233.3 178.5 231.8 180.2 230.6 C181.9 229.4 184.1 228.6 186.0 227.8 C188.0 227.1 190.1 226.7 191.9 226.1 C193.8 225.4 195.5 224.9 197.2 224.1 C198.8 223.4 200.3 222.4 201.9 221.3 C203.5 220.2 205.0 218.8 206.7 217.7 C208.4 216.5 210.2 215.2 212.2 214.3 C214.1 213.5 216.3 212.8 218.4 212.7 C220.4 212.6 222.6 212.9 224.6 213.6 C226.6 214.3 228.5 215.6 230.1 216.9 C231.8 218.2 233.2 219.9 234.6 221.4 C236.0 222.9 237.2 224.5 238.5 225.8 C239.9 227.2 241.1 228.3 242.7 229.4 C244.2 230.5 246.7 231.8 247.5 232.3 L216.0 260.0 Z'%2F%3E%3Cpath d%3D'M216.0 260.0 L185.7 239.8 M216.0 260.0 L195.3 232.7 M216.0 260.0 L208.0 235.7 M216.0 260.0 L216.5 227.8 M216.0 260.0 L228.8 224.8 M216.0 260.0 L233.8 238.2'%2F%3E%3Cpath d%3D'M214.0 420.0 C211.0 413.7 203.0 393.0 196.0 382.0 C189.0 371.0 177.0 362.3 172.0 354.0 C167.0 345.7 167.0 335.7 166.0 332.0'%2F%3E%3Cpath d%3D'M170.9 324.3 C170.4 325.0 169.0 327.2 167.9 328.4 C166.8 329.5 165.5 330.5 164.2 331.1 C162.9 331.8 161.5 332.1 160.3 332.2 C159.0 332.2 157.8 332.0 156.8 331.4 C155.8 330.9 154.8 330.0 154.2 328.9 C153.6 327.8 153.2 326.4 153.0 325.0 C152.9 323.6 153.0 321.9 153.3 320.4 C153.7 318.8 154.3 317.1 155.1 315.7 C155.9 314.2 157.0 312.8 158.1 311.6 C159.2 310.5 160.5 309.5 161.8 308.9 C163.1 308.2 164.5 307.9 165.7 307.8 C167.0 307.8 168.2 308.0 169.2 308.6 C170.2 309.1 171.2 310.0 171.8 311.1 C172.4 312.2 172.8 313.6 173.0 315.0 C173.1 316.4 173.0 318.1 172.7 319.6 C172.3 321.2 171.7 322.9 170.9 324.3 C170.1 325.8 168.4 327.7 167.9 328.4 Z'%2F%3E%3Cpath d%3D'M160.8 310.9 C158.5 318.7 159.8 325.2 162.1 329.8'%2F%3E%3Cpath d%3D'M210.0 374.0 L218.8 370.8 L221.1 365.6 L235.2 366.4 L231.9 358.8 L248.2 363.2 L242.1 353.0 L257.3 359.2 L251.7 347.6 L263.4 352.8 L261.2 342.5 L268.7 343.8 L271.2 337.8 L277.0 336.6 L283.2 336.0 L289.5 335.9 L296.0 336.0 L289.5 335.9 L283.2 336.0 L277.0 336.6 L271.0 337.0 L266.0 332.4 L259.6 337.2 L254.1 327.6 L248.1 339.4 L241.1 327.9 L236.9 344.3 L228.7 334.8 L226.7 352.0 L218.8 347.6 L217.7 362.1 L212.1 364.7 L210.0 374.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M210.0 374.0 Q243.5 333.5 296.0 336.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M330.0 0.0 C331.3 10.0 338.7 36.7 338.0 60.0 C337.3 83.3 326.7 114.3 326.0 140.0 C325.3 165.7 333.7 196.3 334.0 214.0 C334.3 231.7 329.0 240.7 328.0 246.0'%2F%3E%3Cpath d%3D'M330.0 300.0 C328.7 311.7 321.3 340.0 322.0 370.0 C322.7 400.0 332.0 461.7 334.0 480.0'%2F%3E%3Cpath d%3D'M343.4 298.7 C342.8 300.0 341.4 304.4 339.7 306.4 C338.0 308.4 335.5 310.0 333.1 310.9 C330.7 311.7 327.9 311.3 325.3 311.4 C322.6 311.4 319.6 312.0 317.1 311.2 C314.7 310.4 312.0 308.8 310.7 306.4 C309.3 304.0 309.6 299.7 309.0 297.0 C308.5 294.4 308.7 292.3 307.4 290.7 C306.1 289.2 303.3 289.0 301.5 287.6 C299.6 286.3 297.7 284.7 296.3 282.9 C294.9 281.1 294.3 279.0 293.0 276.7 C291.7 274.5 289.3 271.9 288.6 269.4 C287.9 266.8 287.4 263.5 288.9 261.4 C290.4 259.4 294.7 258.0 297.5 256.9 C300.4 255.8 303.8 255.7 306.0 254.7 C308.2 253.7 309.0 252.1 310.6 250.9 C312.2 249.7 313.9 248.5 315.6 247.4 C317.4 246.4 319.3 246.1 321.2 244.5 C323.1 242.9 324.7 239.9 327.0 238.0 C329.3 236.2 332.5 233.4 335.1 233.3 C337.8 233.1 340.7 235.3 342.7 237.2 C344.8 239.0 346.1 242.3 347.6 244.4 C349.2 246.5 350.9 247.8 352.1 249.7 C353.3 251.6 354.1 253.7 354.8 255.7 C355.4 257.6 354.8 259.9 356.0 261.6 C357.2 263.2 359.7 263.9 362.1 265.5 C364.6 267.1 368.9 268.8 370.5 271.0 C372.1 273.2 372.2 276.2 371.7 278.7 C371.2 281.1 369.0 283.4 367.7 285.5 C366.3 287.7 365.3 290.0 363.5 291.6 C361.6 293.2 359.0 294.6 356.4 295.2 C353.8 295.8 350.1 294.8 347.9 295.4 C345.8 296.0 344.7 296.9 343.4 298.7 C342.0 300.5 340.3 305.1 339.7 306.4 Z'%2F%3E%3Cpath d%3D'M327.1 282.0 Q321.4 290.8 320.1 301.2'%2F%3E%3Cpath d%3D'M321.5 271.3 Q312.2 265.9 301.0 264.7'%2F%3E%3Cpath d%3D'M332.9 266.0 Q338.6 257.2 339.9 246.8'%2F%3E%3Cpath d%3D'M338.5 276.7 Q347.8 282.1 359.0 283.3'%2F%3E%3Cpath d%3D'M331.2 280.7 L332.3 286.7 M326.4 279.8 L321.9 287.1 M323.2 271.7 L311.9 267.7 M326.4 268.1 L320.4 258.2 M335.5 269.7 L342.6 264.1 M337.2 274.0 L344.0 274.0'%2F%3E%3Ccircle cx%3D'330.0' cy%3D'274.0' r%3D'3.2'%2F%3E%3Cpath d%3D'M335.1 276.6 l0.1 0.1 M331.0 279.3 l0.1 0.1 M326.2 278.1 l0.1 0.1 M324.2 273.7 l0.1 0.1 M326.6 269.6 l0.1 0.1 M331.6 268.8 l0.1 0.1 M335.3 271.9 l0.1 0.1'%2F%3E%3Cpath d%3D'M332.0 120.0 C334.7 114.0 344.0 93.3 348.0 84.0 C352.0 74.7 354.7 67.3 356.0 64.0'%2F%3E%3Cpath d%3D'M365.4 48.9 C365.6 49.6 366.4 51.9 366.6 53.4 C366.8 54.8 366.8 56.3 366.5 57.6 C366.3 58.9 365.8 60.1 365.1 61.0 C364.5 61.9 363.6 62.7 362.7 63.1 C361.7 63.5 360.6 63.6 359.5 63.4 C358.4 63.2 357.2 62.7 356.1 62.0 C355.0 61.3 353.9 60.3 353.0 59.1 C352.1 58.0 351.2 56.5 350.6 55.1 C350.0 53.7 349.6 52.1 349.4 50.6 C349.2 49.2 349.2 47.7 349.5 46.4 C349.7 45.1 350.2 43.9 350.9 43.0 C351.5 42.1 352.4 41.3 353.3 40.9 C354.3 40.5 355.4 40.4 356.5 40.6 C357.6 40.8 358.8 41.3 359.9 42.0 C361.0 42.7 362.1 43.7 363.0 44.9 C363.9 46.0 364.8 47.5 365.4 48.9 C366.0 50.3 366.4 52.6 366.6 53.4 Z'%2F%3E%3Cpath d%3D'M356.0 43.6 C354.0 50.8 355.2 56.8 357.2 61.0'%2F%3E%3Cpath d%3D'M328.0 412.0 L326.9 403.4 L322.2 400.8 L322.8 387.3 L315.3 390.9 L315.7 374.0 L307.1 382.8 L305.9 365.2 L297.9 376.8 L294.5 361.6 L288.1 373.0 L283.1 363.1 L278.1 371.2 L272.8 368.1 L268.0 370.7 L262.7 369.6 L257.3 368.8 L251.7 368.3 L246.0 368.0 L251.7 368.3 L257.3 368.8 L262.7 369.6 L268.0 370.7 L270.8 375.1 L276.7 375.3 L274.6 384.3 L284.7 380.4 L278.5 391.5 L292.5 385.7 L284.3 396.5 L300.7 391.1 L293.2 400.1 L309.5 397.0 L305.4 403.7 L318.7 403.9 L320.2 408.7 L328.0 412.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M328.0 412.0 Q298.0 369.5 246.0 368.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M332.0 182.0 L339.0 176.9 L338.9 172.1 L351.8 168.8 L345.7 163.4 L360.8 162.2 L351.8 155.5 L365.0 155.4 L357.3 147.8 L365.5 146.7 L362.8 140.0 L366.1 136.3 L370.5 133.4 L375.1 130.6 L380.0 128.0 L375.1 130.6 L370.5 133.4 L366.1 136.3 L361.6 138.5 L355.0 134.9 L352.8 143.2 L343.7 136.5 L344.9 150.0 L334.8 144.0 L338.7 159.1 L330.2 157.0 L334.4 170.0 L330.5 173.4 L332.0 182.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M332.0 182.0 Q345.2 145.4 380.0 128.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M150.0 0.0 C151.0 6.7 156.3 25.0 156.0 40.0 C155.7 55.0 149.3 81.7 148.0 90.0'%2F%3E%3Cpath d%3D'M148.0 94.0 L124.6 71.2 C125.3 71.0 127.5 70.2 128.9 69.8 C130.3 69.3 131.7 69.0 132.9 68.5 C134.2 68.0 135.3 67.4 136.5 66.7 C137.6 66.0 138.7 65.1 139.9 64.2 C141.1 63.4 142.3 62.3 143.7 61.6 C145.0 60.9 146.5 60.2 148.0 59.8 C149.5 59.5 151.1 59.5 152.6 59.8 C154.1 60.1 155.6 60.8 156.9 61.6 C158.2 62.4 159.3 63.6 160.4 64.7 C161.5 65.7 162.4 67.0 163.3 68.0 C164.3 69.0 165.2 70.0 166.2 70.9 C167.2 71.7 168.3 72.4 169.5 73.1 C170.7 73.8 172.1 74.4 173.4 75.2 C174.7 76.0 176.1 76.8 177.3 77.9 C178.4 78.9 179.7 80.9 180.1 81.5 L148.0 94.0 Z'%2F%3E%3Cpath d%3D'M148.0 94.0 L133.5 74.2 M148.0 94.0 L142.5 76.3 M148.0 94.0 L148.8 70.2 M148.0 94.0 L157.7 68.7 M148.0 94.0 L161.0 78.6 M148.0 94.0 L165.6 83.5'%2F%3E%3Cpath d%3D'M152.0 32.0 L158.9 37.1 L163.9 36.0 L170.6 47.0 L174.6 40.3 L179.9 53.9 L184.4 44.4 L188.2 56.5 L193.7 48.0 L197.3 55.4 L203.1 51.7 L207.7 54.1 L212.0 57.8 L216.0 61.8 L220.0 66.0 L216.0 61.8 L212.0 57.8 L207.7 54.1 L204.2 50.2 L205.4 43.0 L196.8 42.7 L200.2 32.6 L187.6 36.8 L190.1 25.9 L176.8 32.9 L176.1 24.6 L164.7 31.4 L160.0 28.6 L152.0 32.0' stroke-width%3D'1.05'%2F%3E%3Cpath d%3D'M152.0 32.0 Q192.8 35.4 220.0 66.0' stroke-width%3D'0.9'%2F%3E%3Cpath d%3D'M24.0 480.0 C25.0 473.7 30.3 453.7 30.0 442.0 C29.7 430.3 23.3 415.3 22.0 410.0'%2F%3E%3Cpath d%3D'M11.1 408.4 C10.7 407.4 9.0 404.3 8.4 402.2 C7.9 400.2 8.6 397.5 7.9 396.0 C7.3 394.5 6.0 394.1 4.7 393.2 C3.4 392.3 1.3 391.6 0.0 390.4 C-1.2 389.2 -1.7 387.6 -2.7 386.0 C-3.6 384.5 -4.9 382.8 -5.7 381.0 C-6.6 379.1 -8.1 376.7 -7.8 374.9 C-7.4 373.1 -5.4 371.3 -3.5 370.2 C-1.6 369.1 1.8 369.0 3.8 368.3 C5.7 367.6 6.9 366.9 8.2 366.0 C9.5 365.1 10.3 363.8 11.5 363.0 C12.8 362.1 14.3 361.9 15.7 361.0 C17.1 360.1 18.2 358.8 19.8 357.3 C21.3 355.9 23.2 353.1 25.2 352.3 C27.1 351.5 29.7 351.5 31.5 352.4 C33.2 353.3 34.5 356.1 35.8 357.7 C37.1 359.3 38.2 360.8 39.2 362.2 C40.2 363.6 41.4 364.8 42.0 366.2 C42.7 367.7 42.3 369.7 42.9 371.0 C43.5 372.4 44.1 373.3 45.6 374.4 C47.1 375.6 50.4 376.3 52.1 377.7 C53.8 379.2 55.4 381.3 55.7 383.1 C55.9 384.9 54.5 386.9 53.6 388.6 C52.7 390.3 51.7 392.0 50.5 393.4 C49.3 394.8 48.1 396.4 46.4 397.2 C44.6 398.0 41.8 397.8 39.9 398.1 C38.0 398.3 36.3 397.9 35.1 398.9 C33.9 399.9 33.7 402.2 32.6 403.8 C31.6 405.5 30.2 407.8 28.6 408.8 C27.0 409.8 24.9 409.8 22.9 410.0 C21.0 410.2 18.9 410.4 16.9 410.1 C14.9 409.9 12.5 409.7 11.1 408.4 C9.7 407.1 8.9 403.3 8.4 402.2 Z'%2F%3E%3Cpath d%3D'M17.6 384.1 Q9.5 385.1 2.4 389.2'%2F%3E%3Cpath d%3D'M21.7 376.0 Q20.7 368.4 16.3 361.7'%2F%3E%3Cpath d%3D'M30.4 379.9 Q38.5 378.9 45.6 374.8'%2F%3E%3Cpath d%3D'M26.3 388.0 Q27.3 395.6 31.7 402.3'%2F%3E%3Cpath d%3D'M20.4 385.8 L17.2 389.2 M18.7 382.7 L12.0 383.6 M22.3 377.2 L19.5 369.1 M26.0 377.3 L29.4 369.3 M29.3 383.0 L36.0 384.4 M27.3 386.0 L30.5 389.7'%2F%3E%3Ccircle cx%3D'24.0' cy%3D'382.0' r%3D'2.4'%2F%3E%3Cpath d%3D'M27.8 383.9 l0.1 0.1 M24.7 386.0 l0.1 0.1 M21.1 385.0 l0.1 0.1 M19.7 381.8 l0.1 0.1 M21.5 378.7 l0.1 0.1 M25.2 378.1 l0.1 0.1 M28.0 380.4 l0.1 0.1'%2F%3E%3Cpath d%3D'M30.0 0.0 C29.3 6.7 24.3 27.0 26.0 40.0 C27.7 53.0 35.7 69.3 40.0 78.0 C44.3 86.7 50.0 89.7 52.0 92.0'%2F%3E%3Cpath d%3D'M63.0 106.3 C62.3 106.7 60.3 108.1 59.0 108.6 C57.6 109.2 56.2 109.6 54.9 109.7 C53.6 109.8 52.3 109.7 51.2 109.3 C50.2 108.9 49.2 108.3 48.6 107.5 C48.0 106.7 47.5 105.6 47.4 104.5 C47.3 103.4 47.4 102.1 47.8 100.8 C48.2 99.6 48.9 98.2 49.8 97.1 C50.7 95.9 51.8 94.7 53.0 93.7 C54.2 92.8 55.7 91.9 57.0 91.4 C58.4 90.8 59.8 90.4 61.1 90.3 C62.4 90.2 63.7 90.3 64.8 90.7 C65.8 91.1 66.8 91.7 67.4 92.5 C68.0 93.3 68.5 94.4 68.6 95.5 C68.7 96.6 68.6 97.9 68.2 99.2 C67.8 100.4 67.1 101.8 66.2 102.9 C65.3 104.1 64.2 105.3 63.0 106.3 C61.8 107.2 59.7 108.2 59.0 108.6 Z'%2F%3E%3Cpath d%3D'M56.0 91.6 C54.0 98.8 55.2 104.8 57.2 109.0'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 356px 450px;
}

/* dots — the swiss-dot field from "ways we can work," in chambray (identity, fees) */
.masthead--page.flavor-dots {
  background-color: #FDFDFB;
  background-image: radial-gradient(rgba(164, 200, 225, 0.5) 1.1px, transparent 1.5px);
  background-size: 26px 26px;
}

/* rules — the therapist's notepad: ruled lines + denim margin rule (parent coaching) */
.masthead--page.flavor-rules {
  background-color: #FDFCF8;
  background-image:
    linear-gradient(90deg, transparent calc(6% - 1px), rgba(88, 120, 163, 0.20) calc(6% - 1px), rgba(88, 120, 163, 0.20) 6%, transparent 6%),
    repeating-linear-gradient(180deg,
      transparent 0 43px,
      rgba(164, 200, 225, 0.35) 43px 44px);
}

/* ============================================================
   CONFIDENT GIRLS CLUB KIT — the brochure's spirit, layered on:
   pastel wash hero, scalloped bands, and flowers & stars falling
   like confetti in the wind. Scoped to the CGC page only.
   ============================================================ */
.flavor-cgc {
  position: relative;
  background-color: #FCF8F3;
  background-image:
    radial-gradient(42rem 26rem at 10% 12%, rgba(242, 169, 190, 0.14), transparent 60%),
    radial-gradient(38rem 24rem at 92% 80%, rgba(168, 216, 194, 0.16), transparent 60%),
    radial-gradient(30rem 20rem at 80% 8%, rgba(201, 188, 232, 0.13), transparent 65%),
    radial-gradient(rgba(240, 206, 115, 0.35) 1px, transparent 1.4px);
  background-size: auto, auto, auto, 30px 30px;
  overflow: hidden;
}
/* scalloped ribbon pinned to the top of the hero, like the brochure header */
.flavor-cgc::before {
  content: "";
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  height: 22px;
  background: #F6D7DF;
  z-index: 1;
}
.flavor-cgc::after {
  content: "";
  position: absolute; top: calc(var(--nav-h) + 22px); left: 0; right: 0;
  height: 15px;
  background-image: radial-gradient(circle at 50% 0%, #F6D7DF 58%, transparent 62%);
  background-size: 30px 15px;
  background-repeat: repeat-x;
  z-index: 1;
}
/* falling flowers & stars — a fixed full-viewport layer (page.js lifts it
   out of the smooth-scroll wrapper so `fixed` works), so the confetti keeps
   drifting down over the WHOLE page as you scroll. Under the nav (z 900),
   over the content, pointer-events off so it never blocks a tap. */
.cgc-fall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.cgc-fall i {
  position: absolute;
  top: -60px;
  width: 26px; height: 26px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  animation: cgc-fall var(--d, 16s) linear var(--dl, 0s) infinite;
}
@keyframes cgc-fall {
  0%   { transform: translate(0, -8%) rotate(0deg); }
  30%  { transform: translate(26px, 32vh) rotate(110deg); }
  60%  { transform: translate(-20px, 64vh) rotate(210deg); }
  100% { transform: translate(14px, 108vh) rotate(340deg); }
}
/* the brochure's five-petal flowers + stars, in its pastel palette */
.cgc-fall .f-blush  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23F2A9BE'%3E%3Ccircle cx='50' cy='24' r='19'/%3E%3Ccircle cx='75' cy='42' r='19'/%3E%3Ccircle cx='66' cy='72' r='19'/%3E%3Ccircle cx='34' cy='72' r='19'/%3E%3Ccircle cx='25' cy='42' r='19'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='11' fill='%23FCF8F3'/%3E%3C/svg%3E"); }
.cgc-fall .f-butter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23F0CE73'%3E%3Ccircle cx='50' cy='24' r='19'/%3E%3Ccircle cx='75' cy='42' r='19'/%3E%3Ccircle cx='66' cy='72' r='19'/%3E%3Ccircle cx='34' cy='72' r='19'/%3E%3Ccircle cx='25' cy='42' r='19'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='11' fill='%23FCF8F3'/%3E%3C/svg%3E"); }
.cgc-fall .f-lav    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23C9BCE8'%3E%3Ccircle cx='50' cy='24' r='19'/%3E%3Ccircle cx='75' cy='42' r='19'/%3E%3Ccircle cx='66' cy='72' r='19'/%3E%3Ccircle cx='34' cy='72' r='19'/%3E%3Ccircle cx='25' cy='42' r='19'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='11' fill='%23FCF8F3'/%3E%3C/svg%3E"); }
.cgc-fall .f-deep   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23E77FA0'%3E%3Ccircle cx='50' cy='24' r='19'/%3E%3Ccircle cx='75' cy='42' r='19'/%3E%3Ccircle cx='66' cy='72' r='19'/%3E%3Ccircle cx='34' cy='72' r='19'/%3E%3Ccircle cx='25' cy='42' r='19'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='11' fill='%23FCF8F3'/%3E%3C/svg%3E"); }
.cgc-fall .s-cham   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23A4C8E1' d='M50 5 61 38 95 38 67 58 78 92 50 71 22 92 33 58 5 38 39 38z'/%3E%3C/svg%3E"); }
.cgc-fall .s-mint   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23A8D8C2' d='M50 5 61 38 95 38 67 58 78 92 50 71 22 92 33 58 5 38 39 38z'/%3E%3C/svg%3E"); }
.cgc-fall .s-butter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23F0CE73' d='M50 5 61 38 95 38 67 58 78 92 50 71 22 92 33 58 5 38 39 38z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .cgc-fall i { animation: none; opacity: 0.35; top: auto; } }

/* scalloped mint band divider (above the CTA — the brochure's footer) */
.cgc-band {
  position: relative;
  height: 26px;
  background: #D9EEE4;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.cgc-band::before {
  content: "";
  position: absolute; bottom: 100%; left: 0; right: 0;
  height: 15px;
  background-image: radial-gradient(circle at 50% 100%, #D9EEE4 58%, transparent 62%);
  background-size: 30px 15px;
  background-repeat: repeat-x;
}
/* pastel chips — the brochure's "what she'll explore" pills */
.cgc-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; max-width: 640px; margin: 1.4rem auto 0; padding-inline: 5vw; }
.cgc-chips span {
  padding: 0.38rem 1rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
}
.cgc-chips span:nth-child(8n+1) { background: #F9DCE4; }
.cgc-chips span:nth-child(8n+2) { background: #DCE7F7; }
.cgc-chips span:nth-child(8n+3) { background: #E7ECC9; }
.cgc-chips span:nth-child(8n+4) { background: #FBE4CB; }
.cgc-chips span:nth-child(8n+5) { background: #D5EEE1; }
.cgc-chips span:nth-child(8n+6) { background: #E6DFF6; }
.cgc-chips span:nth-child(8n+7) { background: #F9D9DE; }
.cgc-chips span:nth-child(8n+8) { background: #D8E4F6; }

/* ============================================================
   PENCIL TRAIL (parent coaching) — a hand-drawn line that draws
   itself down the page as you scroll, past handwritten waypoint
   labels, with a little pencil riding the tip. Desktop only.
   ============================================================ */
body.subpage main { position: relative; }
.pencil-trail { display: none; }   /* notes now live inside their sections */

/* the note sits in normal flow above its heading, aligned to the content
   column and nudged left so it reads caddy-corner */
.lab-row {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 5vw;
  pointer-events: none;
}
.pencil-trail svg { display: block; overflow: visible; }
.lab--pencil {
  position: relative;
  display: inline-block;
  margin: 0 0 0.7rem -110px;
  font-family: var(--font-script);
  font-size: 2.6rem;                  /* sits above the heading — reads as a real note */
  color: #525D68;                     /* graphite */
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-6.5deg) translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  text-shadow: 0 0 0.4px rgba(91, 102, 114, 0.5);
}
.lab--pencil.is-on { opacity: 0.95; transform: rotate(-6.5deg) translateY(0); }
.lab--pencil .lab__ulwrap {
  display: block;
  height: 18px;
  margin-top: -12px;
  margin-left: 66px;
}
.lab--pencil .lab__underline { display: block; width: 100%; height: 100%; }
.lab--pencil .lab__text {
  display: inline-block;
  vertical-align: baseline;
  /* the write-on clip runs to the box edge (negative inset() clamps to 0),
     so the box must be tall enough to hold La Belle Aurore's long
     ascenders and descenders — otherwise a 'y' or 'q' gets shaved */
  padding: 0.30em 0.06em 0.42em;
}
.lab--pencil .lab__no {
  position: relative;
  display: inline-block;
  width: 50px; height: 50px;
  margin-right: 16px;
  vertical-align: middle;
}
.lab--pencil .lab__digit {
  position: absolute; inset: -20% 0;
  display: grid; place-content: center;
  font-family: var(--font-script);
  font-size: 2.1rem;
  color: #525D68;
}
.lab--pencil .lab__circle {
  position: absolute;
  inset: -5px;
  width: 60px; height: 60px;
}
.lab--pencil .lab__pen {
  position: absolute;
  left: 0; top: 0;
  width: 52px; height: 13px;
  transform-origin: 0 50%;
}

/* Phones and tablets. Two things have to change or the note runs off the
   screen: there's no left margin to hang into, and at 2.6rem the longest
   phrase is 422px wide against ~337px of usable width on a 375px phone.
   So: sit flush in the column, and scale the whole note — text, number
   badge and underline together, or the pieces drift apart.
   MUST stay below the .lab--pencil rules above: same specificity, so the
   later one wins, and putting it earlier would silently do nothing. */
@media (max-width: 1100px) {
  .lab--pencil {
    margin-left: 0;
    font-size: clamp(1.35rem, 5.6vw, 2.2rem);
  }
  .lab--pencil .lab__no { width: 34px; height: 34px; margin-right: 10px; }
  .lab--pencil .lab__digit { font-size: 1.4rem; }
  .lab--pencil .lab__circle { inset: -4px; width: 42px; height: 42px; }
  .lab--pencil .lab__ulwrap { margin-left: 44px; height: 13px; margin-top: -8px; }
  .lab--pencil .lab__pen { width: 34px; height: 9px; }
}


/* ============================================================
   IN-PAGE THERAPY PHRASES (.phrase-field) — phrases anchored in
   the page margins beside each section; they scroll WITH the page
   and fade in/out as they pass through the viewport. Organic.
   ============================================================ */
.phrase-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.phrase-field span {
  position: absolute;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  color: var(--denim);
  white-space: nowrap;
  transform: rotate(-3deg);
  opacity: 0;                     /* GSAP scrubs these in and out */
}
@media (max-width: 1100px) { .phrase-field { display: none; } }

/* ============================================================
   DEVELOPING FILM (mom identity) — photos surface from white like
   instant film; faint script words sharpen from blur into focus.
   ============================================================ */
.focus-field { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.focus-field span {
  position: absolute;
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  color: var(--denim);
  white-space: nowrap;
  transform: rotate(-3deg);
  opacity: 0;
  filter: blur(8px);
}
@media (max-width: 1100px) { .focus-field { display: none; } }

/* ============================================================
   THE 2AM SKY (postpartum) — tiny stars twinkling in the hero
   like the ones you stare at during night feeds, plus a slow
   breathing watercolor wash behind the body sections.
   ============================================================ */
.pp-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pp-star {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--denim);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0.25;
  animation: pp-twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite;
}
.pp-moon {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 9px 5px 0 0 rgba(88, 120, 163, 0.55);
  transform: rotate(-18deg);
  animation: pp-moonglow 9s ease-in-out infinite;
}
@keyframes pp-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50%       { opacity: 0.85; transform: scale(1.15); }
}
@keyframes pp-moonglow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.95; }
}
.pp-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.pp-breathe {
  position: absolute;
  width: min(52rem, 80vw); height: 30rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(164, 200, 225, 0.16), transparent 72%);
  animation: pp-breathe 7.5s ease-in-out infinite alternate;
}
@keyframes pp-breathe {
  from { transform: scale(1);    opacity: 0.55; }
  to   { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-star, .pp-moon, .pp-breathe { animation: none; }
}

/* ============================================================
   DANDELION SEEDS (pregnancy loss) — sparse seeds drifting slowly
   UPWARD and dissolving. Releasing, remembering. Lifted to <body>
   by page.js so they keep rising as you scroll.
   ============================================================ */
.loss-drift {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 28;
}
.loss-drift i {
  position: absolute;
  bottom: -70px;
  width: 30px; height: 44px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cg stroke='%239FB4C9' stroke-width='1.7' stroke-linecap='round' fill='none'%3E%3Cline x1='20' y1='58' x2='20' y2='27'/%3E%3Cpath d='M20 27 L8 13 M20 27 L14 8 M20 27 L20 5 M20 27 L26 8 M20 27 L32 13'/%3E%3C/g%3E%3Cg fill='%239FB4C9'%3E%3Ccircle cx='8' cy='13' r='1.8'/%3E%3Ccircle cx='14' cy='8' r='1.8'/%3E%3Ccircle cx='20' cy='5' r='1.8'/%3E%3Ccircle cx='26' cy='8' r='1.8'/%3E%3Ccircle cx='32' cy='13' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  animation: loss-rise var(--d, 24s) linear var(--dl, 0s) infinite;
}
@keyframes loss-rise {
  0%   { transform: translate(0, 6vh) rotate(-8deg);   opacity: 0; }
  12%  { opacity: 0.5; }
  35%  { transform: translate(-20px, -32vh) rotate(4deg); }
  65%  { transform: translate(24px, -68vh) rotate(-5deg); opacity: 0.45; }
  100% { transform: translate(-10px, -112vh) rotate(9deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .loss-drift i { animation: none; opacity: 0; } }

/* check — fine windowpane linen grid, the Nancy Meyers tablecloth (about) */
.masthead--page.flavor-check {
  background-color: #FCFBF7;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 95px,
      rgba(185, 173, 153, 0.30) 95px 96px,
      transparent 96px 191px,
      rgba(185, 173, 153, 0.18) 191px 192px),
    repeating-linear-gradient(180deg,
      transparent 0 95px,
      rgba(164, 200, 225, 0.28) 95px 96px,
      transparent 96px 191px,
      rgba(185, 173, 153, 0.18) 191px 192px);
}

/* linen — wide horizontal bands, calm and airy (perimenopause) */
.masthead--page.flavor-linen {
  background-color: #FBFBF8;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 88px,
      rgba(233, 228, 216, 0.5) 88px 176px),
    repeating-linear-gradient(180deg,
      transparent 0 87px,
      rgba(164, 200, 225, 0.22) 87px 88px,
      transparent 88px 175px,
      rgba(164, 200, 225, 0.22) 175px 176px);
}
.masthead--page .masthead__title {
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  line-height: 1.18;
}
.masthead--page .masthead__sub { max-width: 46ch; }
.masthead--page .masthead__note {
  margin-top: 1.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ============================================================
   PROSE — the reading column
   ============================================================ */
.psection { padding: clamp(2.8rem, 6vw, 4.6rem) 0; }
/* sections that carry a pencil note need headroom for it to live in */
@media (min-width: 1101px) {
  .psection[data-pencil] { padding-top: clamp(10rem, 16vh, 13rem); }
  .pcta[data-pencil] { padding-top: clamp(10rem, 16vh, 13rem); }
}
.psection--tint { background: var(--snow); border-block: 1px solid var(--line); }
.prose { max-width: 720px; margin-inline: auto; padding-inline: 5vw; }
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.22;
  color: var(--ink);
  margin: 2.6rem 0 1rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .script { font-size: 1.15em; color: var(--denim-deep); margin-right: 0.25em; }
.prose h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.8rem 0 0.6rem;
}
.prose p { margin: 0 0 1.05em; color: var(--gray); }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose em { color: var(--ink); }
.prose ul { margin: 0 0 1.3em; padding: 0; }
.prose ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.55em;
  color: var(--gray);
}
.prose ul li::before {
  content: "\2014";
  position: absolute; left: 0;
  color: var(--chambray);
}
.prose a { color: var(--denim-deep); border-bottom: 1px solid rgba(68, 97, 140, 0.35); transition: border-color .25s; }
.prose a:hover { border-color: var(--denim-deep); }

/* handwritten pull-line between sections */
.pq {
  /* rotating a full-width block throws its corners past the viewport and
     creates a phantom horizontal scrollbar — keep it narrower than the screen */
  max-width: min(900px, 88vw);
  margin: 2.4rem auto;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--denim);
  transform: rotate(-1.5deg);
  line-height: 1.3;
}

/* mid-page framed photo moment — the homepage polaroid language.
   Pairs a double-outlined photo with a handwritten caption. */
.pphoto {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) 5vw 0;
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}
.pphoto .framed { transform: rotate(-1.4deg); }
.pphoto figcaption {
  margin-top: 0.7rem;
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--denim-deep);
}
.pphoto__text { color: var(--gray); font-size: 0.98rem; }
.pphoto__text em { color: var(--ink); }
@media (max-width: 640px) {
  .pphoto { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pphoto .framed { max-width: 260px; }
}

/* ============================================================
   CARD CAROUSEL — the kind-words rotator language, for content:
   framed white cards with a handwritten lead, circle arrows, dots.
   All cards stay in the DOM (Google reads every one).
   ============================================================ */
.pcar { max-width: 680px; margin: 2rem auto 0; padding-inline: 5vw; }
.pcar__stage { position: relative; }
.pcar__card {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  background: var(--white);
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 4px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.6rem);
  text-align: center;
}
.pcar__card.is-on { position: relative; opacity: 1; visibility: visible; transform: none; }
.pcar__lead {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--denim-deep);
  transform: rotate(-1.6deg);
  margin-bottom: 0.55rem;
  line-height: 1.15;
}
.pcar__card p { color: var(--gray); font-size: 0.97rem; margin: 0; }
.pcar__card p em, .pcar__card p strong { color: var(--ink); }
.pcar__nav {
  margin-top: 1.3rem;
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
}
.pcar__arrow {
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.pcar__arrow:hover { border-color: var(--denim-deep); color: var(--denim-deep); }
.pcar__dots { display: flex; gap: 0.55rem; }
.pcar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(65, 74, 84, 0.22);
  transition: background .3s, transform .3s;
}
.pcar__dot.is-on { background: var(--denim-deep); transform: scale(1.25); }
.pcar__count {
  font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray); text-align: center; margin-top: 0.8rem;
}

/* ============================================================
   TOPIC CHIPS — the homepage "go a little deeper" pattern:
   pill chips that swap a story panel underneath.
   ============================================================ */
.pchips { max-width: 720px; margin: 1.8rem auto 0; padding-inline: 5vw; }
.pchips__row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.pchips__chip {
  padding: 0.5rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--frame);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s, color .35s;
}
.pchips__chip:hover { border-color: var(--denim-deep); color: var(--denim-deep); }
.pchips__chip.is-active { background: var(--denim-deep); border-color: var(--denim-deep); color: var(--white); }
.pchips__panel { overflow: hidden; }
.pchips__content {
  margin-top: 1.3rem;
  padding: 1.4rem 1.6rem;
  background: var(--snow);
  border: 1px solid var(--line);
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--gray);
}
.pchips__content .pchips__lead {
  display: block;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--denim-deep);
  margin-bottom: 0.5rem;
  transform: rotate(-1.5deg);
}
.pchips__content em { color: var(--ink); }

/* ============================================================
   HORIZONTAL CLICK-THROUGH (.psnap) — side-scrolling framed
   cards with peeking edges, scroll-snap, and circle arrows.
   ============================================================ */
.psnap { max-width: 860px; margin: 2rem auto 0; padding-inline: 5vw; }
.psnap__track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 8px 14px;   /* room for the outline frames */
}
.psnap__track::-webkit-scrollbar { display: none; }
.psnap__card {
  flex: 0 0 min(78%, 420px);
  scroll-snap-align: center;
  background: var(--white);
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 4px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.psnap__step {
  display: block;
  font-family: var(--font-script);
  font-size: 1.1rem;
  color: var(--denim);
  margin-bottom: 0.5rem;
}
.psnap__card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.psnap__card p { color: var(--gray); font-size: 0.94rem; margin: 0; }
.psnap__nav { margin-top: 0.9rem; display: flex; justify-content: center; gap: 1.1rem; }

/* ============================================================
   FLIP CARDS (.pflip) — real 3D: the card people say / the truth.
   Click (or focus+enter) flips with a perspective rotate.
   ============================================================ */
.pflip {
  max-width: 860px;
  margin: 2rem auto 0;
  padding-inline: 5vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.pflip__card { perspective: 1100px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pflip__inner {
  position: relative;
  width: 100%;
  min-height: 190px;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.pflip__card.is-flipped .pflip__inner { transform: rotateY(180deg); }
.pflip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid; place-content: center;
  text-align: center;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 4px;
  background: var(--white);
}
.pflip__face--front .pflip__say {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
  line-height: 1.4;
}
.pflip__face--front .pflip__hint {
  margin-top: 0.9rem;
  font-family: var(--font-script);
  font-size: 1.05rem;
  color: var(--denim);
}
.pflip__face--back {
  transform: rotateY(180deg);
  background: var(--denim-deep);
  border-color: var(--denim-deep);
  outline-color: var(--denim-deep);
}
.pflip__face--back p { color: #FDFCF8; font-size: 0.95rem; line-height: 1.65; margin: 0; }
.pflip__face--back .pflip__lead {
  display: block;
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--chambray);
  margin-bottom: 0.45rem;
}

/* ============================================================
   SELF-CHECK QUIZ (.pquiz) — tap the ones that sound like you;
   a handwritten tally answers back.
   ============================================================ */
.pquiz { max-width: 720px; margin: 2rem auto 0; padding-inline: 5vw; }
.pquiz__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; }
.pquiz__item {
  position: relative;
  text-align: left;
  padding: 1rem 1.1rem 1rem 2.6rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.pquiz__item::before {
  content: "";
  position: absolute; left: 0.9rem; top: 1.05rem;
  width: 15px; height: 15px;
  border: 1.5px solid var(--frame);
  border-radius: 3px;
  transition: background .3s, border-color .3s;
}
.pquiz__item.is-checked {
  border-color: var(--denim-deep);
  color: var(--ink);
  background: rgba(164, 200, 225, 0.10);
}
.pquiz__item.is-checked::before {
  background: var(--denim-deep);
  border-color: var(--denim-deep);
}
.pquiz__item.is-checked::after {
  content: "\2713";
  position: absolute; left: 1.05rem; top: 0.92rem;
  color: #fff; font-size: 0.7rem;
}
.pquiz__tally {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--denim-deep);
  transform: rotate(-1.5deg);
  min-height: 1.4em;
  transition: opacity .4s;
}

/* ============================================================
   COUNT-UP STAT (.pstat) — a big serif number that counts up
   when it scrolls into view, script caption beneath.
   ============================================================ */
/* Big corner feature: stat sits at the top left (or right, .pstat--right)
   of the section that follows, like a margin note grown up. */
.pstat {
  text-align: left;
  max-width: 1240px;
  margin: 3.4rem auto 0;
  padding-inline: clamp(1.4rem, 6vw, 5.5rem);
}
.pstat--right { text-align: right; }
.pstat__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(4rem, 10vw, 7.4rem);
  line-height: 1;
  color: var(--ink);
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0.02em 0.14em;
}
.pstat__num em {
  font-style: normal;
  color: var(--denim-deep);
  display: inline-block;
}
/* the highlighter sweeps across the WHOLE stat once the number lands */
.pstat__num::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.06em 0.04em -0.04em;
  background: rgba(164, 200, 225, 0.45);
  border-radius: 0.35em 0.5em 0.4em 0.55em / 0.5em 0.4em 0.55em 0.35em;
  transform: rotate(-1.2deg) scaleX(var(--sweep, 0));
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
  z-index: -1;
}
.pstat--right .pstat__num::before { transform-origin: right center; }
/* a tiny satisfied "pop" as it lands */
.pstat.is-hit .pstat__num { animation: pstat-pop 0.45s var(--ease); }
@keyframes pstat-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pstat__num::before { transform: rotate(-1.2deg) scaleX(1); }
  .pstat.is-hit .pstat__num { animation: none; }
}
.pstat.is-hit .pstat__num { --sweep: 1; }
@media (max-width: 700px) {
  .pstat, .pstat--right { text-align: center; }
}
.pstat__cap {
  margin-top: 0.5rem;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--denim);
  transform: rotate(-1.5deg);
  display: inline-block;
}
.pstat__src { display: block; margin-top: 0.7rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); }

/* ============================================================
   PHRASE MARQUEE (.pmarq) — the homepage's drifting handwritten
   phrases, as a gentle full-bleed strip.
   ============================================================ */
.pmarq {
  overflow: hidden;
  margin: 2.6rem 0 0;
  padding: 1.2rem 0;
  border-block: 1px solid var(--line);
  background: var(--snow);
}
.pmarq__track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: pmarq-drift 46s linear infinite;
}
.pmarq:hover .pmarq__track { animation-play-state: paused; }
.pmarq__track span {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  color: var(--denim);
  opacity: 0.75;
  white-space: nowrap;
}
.pmarq__track span:nth-child(even) { color: var(--denim-deep); transform: rotate(-1.2deg); }
@keyframes pmarq-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pmarq__track { animation: none; } }

/* ============================================================
   NUMBERED JOURNEY (.pjourney) — the homepage's "no. 1" editorial
   numbering as connected steps.
   ============================================================ */
.pjourney { max-width: 680px; margin: 2rem auto 0; padding-inline: 5vw; }
.pjourney__step {
  position: relative;
  padding: 0 0 1.9rem 3.4rem;
}
.pjourney__step:not(:last-child)::before {
  content: "";
  position: absolute; left: 1.05rem; top: 2.2rem; bottom: 0.3rem;
  width: 1px; background: var(--frame);
}
.pjourney__no {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--denim-deep);
  transform: rotate(-6deg);
}
.pjourney__step h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
.pjourney__step p { color: var(--gray); font-size: 0.95rem; margin: 0; }
.pjourney__step p a { color: var(--denim-deep); border-bottom: 1px solid rgba(68,97,140,.35); }

/* ============================================================
   SPLIT PROSE (.psplit) — a reading column with a framed photo
   (or placeholder) riding alongside; flip alternates the side.
   ============================================================ */
.psplit {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 5vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
  gap: clamp(1.8rem, 4.5vw, 3.4rem);
  align-items: center;
}
.psplit--flip { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.psplit--flip .psplit__media { order: -1; }
.psplit .prose { max-width: none; padding-inline: 0; margin-inline: 0; }
.psplit__media { text-align: center; }
.psplit__media .framed { transform: rotate(-1.6deg); }
.psplit--flip .psplit__media .framed { transform: rotate(1.6deg); }
.psplit__media figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--denim-deep);
}
@media (max-width: 720px) {
  .psplit, .psplit--flip { grid-template-columns: 1fr; }
  .psplit--flip .psplit__media { order: 0; }
  .psplit__media { max-width: 260px; margin-inline: auto; }
}

/* ============================================================
   EDITORIAL TABS (.ptabs) — chip row swapping framed panels.
   All panels stay in the DOM for Google.
   ============================================================ */
.ptabs { max-width: 760px; margin: 2rem auto 0; padding-inline: 5vw; }
.ptabs__row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1.4rem; }
.ptabs__tab {
  padding: 0.55rem 1.3rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--frame);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s, color .35s;
}
.ptabs__tab:hover { border-color: var(--denim-deep); color: var(--denim-deep); }
.ptabs__tab.is-active { background: var(--denim-deep); border-color: var(--denim-deep); color: var(--white); }
.ptabs__panel {
  display: none;
  background: var(--white);
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 4px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.ptabs__panel.is-active { display: block; }
.ptabs__panel h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
.ptabs__panel p { color: var(--gray); font-size: 0.96rem; margin: 0 0 0.8em; }
.ptabs__panel p:last-child { margin-bottom: 0; }
.ptabs__panel em { color: var(--ink); }
.ptabs__lead {
  display: block;
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--denim-deep);
  margin-bottom: 0.4rem;
  transform: rotate(-1.5deg);
}

/* ============================================================
   POLAROID STACK (.pstack) — a fanned deck of framed photos;
   click/tap sends the top one to the back of the pile.
   ============================================================ */
/* the polaroids are rotated, so the stack needs slack inside the viewport */
.pstack { position: relative; max-width: min(340px, 82vw); margin: 2.2rem auto 0; aspect-ratio: 4/4.6; cursor: pointer; }
.pstack__item {
  position: absolute; inset: 0;
  background: var(--white);
  border: 1px solid var(--frame);
  padding: 0.7rem 0.7rem 2.6rem;
  box-shadow: 0 14px 34px rgba(65, 74, 84, 0.12);
  transition: transform .55s var(--ease), z-index 0s .2s, opacity .55s;
}
.pstack__item img, .pstack__item .pplace__box { width: 100%; aspect-ratio: 4/3.6; object-fit: cover; }
.pstack__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0.55rem;
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--denim-deep);
}
.pstack__item.is-1 { z-index: 3; transform: rotate(-2deg); }
.pstack__item.is-2 { z-index: 2; transform: rotate(2.4deg) translate(4%, 2%); }
.pstack__item.is-3 { z-index: 1; transform: rotate(-5deg) translate(-4%, 3%); }
.pstack__item.is-4 { z-index: 0; transform: rotate(4deg) translate(2%, -2%); opacity: 0; }
.pstack__hint {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray);
}

/* ============================================================
   THE JOURNAL (.pjournal) — publication-style blog index:
   magazine masthead, featured story, framed article-card grid.
   Cards carry a handwritten "coming soon" until posts publish.
   ============================================================ */
.pjournal { padding: calc(var(--nav-h) + clamp(2.6rem, 6vh, 4.4rem)) 0 clamp(3rem, 6vw, 5rem); }
.pjournal__head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.4rem, 5vw, 4rem); padding-inline: 5vw; }
.pjournal__head .kicker { margin-bottom: 1rem; }
.pjournal__title {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: var(--ink);
  padding-bottom: 1.6rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.pjournal__title::before {
  content: "";
  position: absolute; left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 72px; height: 5px;
  background: var(--white);
  border-block: 1px solid var(--line);   /* double-rule, magazine style */
}
.pjournal__soon {
  position: absolute;
  right: 2%;
  top: -1.9em;
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--denim-deep);
  transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.pjournal__sub { color: var(--gray); font-size: 1rem; max-width: 560px; margin-inline: auto; }

/* featured story — one wide editorial panel */
.pjfeature {
  max-width: 1020px;
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
  padding-inline: 5vw;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.pjfeature__media { position: relative; }
.pjfeature__media img, .pjfeature__media .pplace__box { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pjcard__soon {
  position: absolute;
  top: -1rem; right: -0.6rem;
  z-index: 2;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--denim-deep);
  background: var(--white);
  border: 1px solid var(--frame);
  padding: 0.35rem 0.9rem 0.3rem;
  transform: rotate(4deg);
  box-shadow: 0 8px 22px rgba(65, 74, 84, 0.10);
  white-space: nowrap;
}
.pjfeature__kicker, .pjcard__kicker {
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--denim-deep);
  margin-bottom: 0.7rem;
}
.pjfeature__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.pjfeature__excerpt { color: var(--gray); font-size: 0.98rem; margin-bottom: 1.1rem; }
.pjfeature__meta, .pjcard__meta {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
}

/* the grid of article cards */
.pjgrid {
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: 5vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}
.pjcard { position: relative; }
.pjcard__media { position: relative; margin-bottom: 1rem; }
.pjcard__media img, .pjcard__media .pplace__box { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pjcard__media .framed { transform: none; }
.pjcard__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.pjcard__excerpt { color: var(--gray); font-size: 0.9rem; line-height: 1.65; margin-bottom: 0.6rem; }
.pjcard:hover .framed { border-color: var(--denim); }
.pjcard:hover .pjcard__title { color: var(--denim-deep); }

/* hairline between featured and grid, magazine-style */
.pjrule {
  max-width: 1020px;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
  padding-inline: 5vw;
  display: flex; align-items: center; gap: 1.2rem;
}
.pjrule::before, .pjrule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pjrule span {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--denim);
  transform: rotate(-2deg);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .pjfeature { grid-template-columns: 1fr; }
  .pjournal__soon { position: static; display: inline-block; margin-bottom: 0.4rem; }
}

/* ============================================================
   ARTICLE (.particle) — a single journal post: reading column,
   byline, editorial rules. Pairs with .pauthor at the bottom.
   ============================================================ */
.particle { padding: calc(var(--nav-h) + clamp(2.6rem, 6vh, 4.4rem)) 0 0; }
.particle__head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); padding-inline: 5vw; text-align: center; }
.particle__head .kicker { color: var(--denim-deep); margin-bottom: 0.9rem; }
.particle__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}
.particle__byline {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.particle__byline img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--frame);
}
.particle__hero { max-width: 860px; margin: 0 auto clamp(2rem, 4vw, 3rem); padding-inline: 5vw; }
.particle__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.particle__hero figcaption {
  text-align: center; margin-top: 0.7rem;
  font-family: var(--font-script); font-size: 1.25rem; color: var(--denim);
}
/* drop cap on the opening paragraph */
.prose .dropcap::first-letter {
  font-family: var(--font-serif);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--denim-deep);
}

/* ============================================================
   AUTHOR CARD (.pauthor) — "written by" block at the end of a
   post. Reusable for guest providers: swap photo, name, bio.
   ============================================================ */
.pauthor {
  max-width: 720px;
  margin: clamp(2.4rem, 5vw, 3.6rem) auto 0;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.6rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 5px;
}
.pauthor__photo { position: relative; }
.pauthor__photo img { width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--frame); }
.pauthor__script {
  position: absolute; top: -1.1rem; left: -0.9rem;
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--denim-deep);
  transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.pauthor__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
}
.pauthor__creds { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); margin: 0.2rem 0 0.6rem; }
.pauthor__bio { color: var(--gray); font-size: 0.9rem; line-height: 1.65; }
.pauthor__bio a { color: var(--denim-deep); border-bottom: 1px solid rgba(68,97,140,.35); }
@media (max-width: 560px) {
  .pauthor { grid-template-columns: 1fr; text-align: center; }
  .pauthor__photo { margin-inline: auto; }
}

/* ============================================================
   PHOTO PLACEHOLDER (.pplace) — a framed spot waiting for a real
   photo; swap the placeholder div for an <img> when it arrives.
   ============================================================ */
.pplace { max-width: 300px; margin-inline: auto; }
.pplace .framed { transform: rotate(-1.4deg); }
.pplace__box {
  aspect-ratio: 4 / 5;
  display: grid; place-content: center; gap: 0.4rem;
  background: var(--mist);
  text-align: center;
  padding: 1rem;
}
.pplace__box .script { font-size: 1.4rem; color: var(--denim); }
.pplace__box small {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray);
}

/* ============================================================
   CONVERSION BLOCKS — on every page
   ============================================================ */
/* slim credentials / logistics strip */
.pfacts {
  max-width: 720px;
  margin: 2.6rem auto 0;
  padding: 1.3rem 5vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.2rem;
  justify-content: center;
  border-block: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  text-align: center;
}

/* final CTA panel — double-frame card, like the site's photo frames */
.pcta { padding: clamp(3rem, 6vw, 5rem) 5vw; }
.pcta__card {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame);
  outline-offset: 5px;
}
.pcta__script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  color: var(--denim-deep);
  transform: rotate(-2deg);
  margin-bottom: 0.1em;
}
.pcta__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink);
  line-height: 1.2;
}
.pcta__sub { max-width: 520px; margin: 0.9rem auto 1.6rem; color: var(--gray); font-size: 0.98rem; }
.pcta__meta { margin-top: 1.2rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.pcta__meta a { color: var(--denim-deep); }

/* FAQ block inherits .faq styles from styles.css */
.pfaq { max-width: 720px; margin-inline: auto; padding-inline: 5vw; }
.pfaq h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  color: var(--ink);
  margin-bottom: 1.4rem;
}

/* the stacked guilt questions — quiet, unbulleted, a thought each */
.plist--quiet {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  text-align: center;
}
.plist--quiet li {
  margin: 0.5rem 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--denim-deep);
}

/* the line the whole piece lands on */
.particle__closer {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
  margin: 0.6rem auto 0;
  max-width: 34ch;
}

/* the next-up teaser reads as a promise, not a published piece */
.pjcard--next .pjcard__soon { color: var(--denim-deep); }
.pjcard--next .pjcard__title { color: var(--gray); }

/* PRESS — a CV-style list of appearances */
.presslist {
  list-style: none;
  max-width: 760px;
  margin: 1.8rem auto 0;
  padding-inline: 5vw;
}
.presslist__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.presslist__item:last-child { border-bottom: 0; }
.presslist__year {
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.24em;
  color: var(--gray); padding-top: 0.4rem;
}
.presslist__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}
.presslist__title a { border-bottom: 1px solid var(--frame); transition: color .3s, border-color .3s; }
.presslist__title a:hover { color: var(--denim-deep); border-color: var(--denim); }
.presslist__meta {
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--denim);
}
.presslist__note { margin-top: 0.5rem; font-size: 0.92rem; color: var(--gray); }
@media (max-width: 560px) {
  .presslist__item { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* THE VILLAGE — provider cards with a logo beside each blurb */
.village {
  max-width: 900px;
  margin: 2.2rem auto 0;
  padding-inline: 5vw;
  display: grid;
  gap: 2.2rem;
}
.village__item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.4rem;
  align-items: center;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
.village__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* no frame — let each logo sit on the page at full size, like a press wall */
.village__logo {
  position: relative;
  display: grid;
  place-items: center;
}
.village__logo img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}
/* until a real logo file is dropped in, show a quiet monogram instead */
.village__initials { display: none; font-family: var(--font-serif); font-size: 2.6rem; color: var(--frame); }
.village__logo.is-empty .village__initials { display: block; }
.village__body h3 { margin-top: 0; }
.village__body p { font-size: 0.95rem; color: var(--gray); }
.village__link { margin-top: 0.5rem; }
.village__link a { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 640px) {
  .village__item { grid-template-columns: 1fr; gap: 1rem; }
  .village__logo { justify-items: start; }
  .village__logo img { max-height: 96px; }
}

/* the Confident Girls Club flyer — a real printable, shown at readable size */
.cgc-flyer { max-width: 620px; margin: 2.6rem auto 0; padding-inline: 5vw; }
.cgc-flyer img { display: block; width: 100%; height: auto; }
.cgc-flyer figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--denim);
  transform: rotate(-1.5deg);
}

/* ============================================================
   FOOTER extensions (full nav + contact line)
   ============================================================ */
.footer__nav--full {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1.6rem;
  max-width: 780px;
  margin-inline: auto;
}
.footer__contact {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: var(--gray);
}
.footer__contact a:hover { color: var(--denim-deep); }

/* ============================================================
   REVEALS — lightweight IntersectionObserver (no GSAP here)
   ============================================================ */
html.js .r { opacity: 0; transform: translateY(18px); }
html.js .r.in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .r { opacity: 1; transform: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .nav__dd-menu { display: none; }  /* mobile uses the burger menu */
}