/* Source Sans Pro, self-hosted (latin subset) so the site renders identically offline */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ssp-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ssp-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ssp-normal-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/ssp-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/ssp-italic-700.woff2') format('woff2'); }
/* Open Sans, self-hosted (latin subset): live headings use Open Sans, body uses Source Sans Pro */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/os-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/os-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/os-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/os-700-italic.woff2') format('woff2'); }

/* Clean rebuild styles for exposingfamilyabuse.com preview.
   Approximates the live Squarespace look: Open Sans / Source Sans Pro,
   centered content column, full-width images, plain black text on white. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Source Sans Pro', 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 27.44px;
  line-height: 1.5;
  color: #111;
  background: #fff;
}
a { color: #1a3a6b; }
a:visited { color: #3d3d8a; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; margin: 1.2em auto; }
figure { margin: 1.5em 0; }
figcaption { font-size: 0.9em; color: #555; text-align: center; margin-top: 0.4em; }
h1, h2, h3, h4 {
  font-family: 'Open Sans', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  margin: 1.2em 0 0.5em;
  overflow-wrap: break-word;
}
h1 { font-size: 62.72px; }
h2 { font-size: 52.64px; }
h3 { font-size: 30.8px; }
h4 { font-size: 25.76px; }
/* Squarespace rich-text size classes, measured on live */
p.sqsrte-large, .sqsrte-large { font-size: 62.72px; line-height: 1.5; }
p.sqsrte-small, .sqsrte-small { font-size: 19.04px; line-height: 1.5; }
/* Text block with a Squarespace background color: shrink-to-fit like live,
   padding ~0.25em (measured: 15px at 62.72px type, 7px at 30.8px type) */
.txtbg { width: fit-content; max-width: 100%; padding: 0.25em; }
.txtbg-center { margin-left: auto; margin-right: auto; }
p { margin: 0.7em 0; overflow-wrap: break-word; }
blockquote {
  margin: 1em 0 1em 1.2em;
  padding-left: 1em;
  border-left: 3px solid #999;
  color: #333;
}
/* Blockquote inside a dark section (e.g. homepage TRANSCRIPT) renders light on live */
.pg-section-dark blockquote { color: #fafafa; }
ul, ol { margin: 0.7em 0; padding-left: 1.6em; }
hr { border: 0; border-top: 1px solid #ccc; margin: 2em 0; }
.skip { position: absolute; left: -9999px; top: 0; background: #111; color: #fff; padding: 0.5em 1em; z-index: 10; }
.skip:focus { left: 0; color: #fff; }

/* Header: black bar like the live site. Flex row: logo at left (vertically
   centered), nav to its right filling the rest, wrapping within its column. */
header { background: #000; color: #fff; text-align: left; padding: 14px 58px; border-bottom: 0; display: flex; align-items: center; }
header .logo { flex: 0 0 auto; }
header .logo img { width: 157px; max-width: 157px; margin: 0; display: block; }
header nav { flex: 1; margin-left: 86px; }
header nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  max-width: none;
}
/* Live nav items carry margin-right 56.16px (the trailing margin counts toward
   the row width, which is what makes the wrapping match live). */
header nav > ul > li { display: flex; align-items: center; height: 32px; font-size: 19.04px; line-height: 1.5; margin-right: 56.16px; }
header nav > ul > li:last-child { margin-right: 0; }
header nav a { letter-spacing: 0.01em; }
/* "ABUSE DISCLOSURES" folder: children hidden in a dropdown until hover, like live */
header nav > ul > li.folder { display: block; position: relative; height: 32px; }
header nav > ul > li.folder > a { line-height: 32px; }
header nav > ul > li.folder > ul {
  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
  background: #000; list-style: none; margin: 0; padding: 0.5em 0; min-width: 340px;
  border-top: 1px solid #333;
}
header nav > ul > li.folder:hover > ul, header nav > ul > li.folder:focus-within > ul { display: block; }
header nav > ul > li.folder > ul li { display: block; height: auto; margin: 0; padding: 0.35em 1em; font-size: 19.04px; line-height: 1.5; white-space: nowrap; }
header nav a { color: #fff; text-decoration: none; }
header nav a:hover { text-decoration: underline; }
header nav li.active a { font-weight: 700; text-decoration: underline; }

/* Main content column: live content spans ~1325px at 1440w viewport */
main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1em 58px 3em;
  letter-spacing: 0.01em;
}
main > h1:first-child { margin-top: 0.4em; }

/* Scrolling announcement banners (Squarespace marquee blocks) */
.marquee {
  overflow: hidden; white-space: nowrap;
  background: #111; color: #fff;
  margin: 1.2em -58px; padding: 0.55em 0;
  font-weight: 400; letter-spacing: 0.02em;
  font-size: 112px;
}
.marquee a { color: #fff; text-decoration: none; }
.marquee-track { display: inline-block; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee-track span { padding-right: 2em; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Top disclosure banner on the homepage: big red band, huge black text, full width, like live */
.marquee-red {
  overflow: hidden; white-space: nowrap;
  background: #f00; color: #000;
  margin: 0; padding: 0.22em 0;
  font-weight: 400; line-height: 1.2;
  font-size: 112px;
  font-family: 'Source Sans Pro', 'Open Sans', Helvetica, Arial, sans-serif;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-red a { color: #000; text-decoration: none; }
.marquee-red .marquee-track { animation-duration: 25s; }
.marquee-red .marquee-track span { padding-right: 0.5em; }

/* Videos */
figure.video video { width: 100%; max-width: 520px; margin: 0 auto; background: #000; }

/* Placeholder where a video file is still being confirmed (third homepage clip) */
.video-placeholder {
  width: 100%; max-width: 520px; margin: 0 auto;
  background: #111; color: #fff; text-align: center;
  padding: 4em 1.2em; border: 2px dashed #888;
}
.video-placeholder p { margin: 0.4em 0; }

/* Gallery sections (Squarespace masonry/grid galleries): 3-across grid */
figure.gallery-item { display: inline-block; width: 31%; vertical-align: top; margin: 0.5%; }
figure.gallery-item img { margin: 0; }

/* List-section stories ("Real Life Family Abuse Stories") */
article.story { margin: 2em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ddd; }
article.story img { margin: 0.5em auto; }
article.story h3 { margin-top: 0.5em; }
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 800px; margin: 0 auto; }
.embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.audio-embed { margin: 1.5em 0; }

/* Buttons (PDF links etc.) */
.button {
  display: inline-block; background: #111; color: #fff;
  padding: 0.7em 1.2em; text-decoration: none; font-weight: 700;
  margin: 0.5em 0;
}
.button:hover { background: #333; }
.button.coming-soon { background: #888; cursor: default; }
.button.coming-soon:hover { background: #888; }

/* Homepage story grid: live is a 4-col grid of 297px cards, 45px gaps */
.story-grid { display: grid; grid-template-columns: repeat(4, 297px); column-gap: 45px; row-gap: 54px; }
.story-heading { font-size: 52.64px; line-height: 78.96px; text-align: center; color: #fff; font-weight: 400; margin: 0 0 59px; }
article.story { margin: 0; padding-bottom: 0; border-bottom: 0; width: 297px; text-align: center; }
article.story img { width: 297px; height: 224px; object-fit: cover; display: block; margin: 0 0 21px; }
article.story h3 { font-size: 39.2px; line-height: 49.83px; color: #dcdcdc; width: 223px; margin: 0 auto 11px; font-weight: 400; }
article.story p { margin: 0 auto; }
article.story h3 + p { font-size: 20.72px; line-height: 31.08px; color: #fff; width: 223px; margin-bottom: 12px; }
article.story .button { font-size: 14px; padding: 19px 22px; margin: 0; }

/* Joe page: live video + intro paragraph sit in a ~777px column at x270 */
.joe-intro { width: 777px; margin-left: 212px; }
.joe-intro figure.video { margin: 0; }
.joe-intro p { width: 773px; }

/* Homepage side-by-side text+image rows (sec4): live pairs text and photo in flex rows */
.side-row { display: flex; align-items: flex-start; justify-content: center; margin: 1.2em 0 1.2em 25px; }
.side-row .txtbg { flex: 0 0 auto; margin: 0; background: transparent !important; padding: 0 11px; }
.side-row .txtbg h3 { margin: 0; line-height: 41.4px; }
.side-row figure { margin: 0; flex: 0 0 auto; }
.side-row figure img { margin: 0; display: block; }
.side-row-a { margin-left: 39px; }
.side-row-a .txtbg { width: 552px; }
.side-row-a figure { margin-left: -55px; }
.side-row-a figure img { width: 386px; }
.side-row-b { gap: 46px; margin-left: 29px; }
.side-row-b .txtbg { width: 870px; }
.side-row-b figure img { width: 253px; }

/* Blog index */
.post-list { list-style: none; padding: 0; }
.post-list li { margin: 0.8em 0; font-size: 1.15em; }

/* Footer: live has NO footer text, just an empty 31px lavender strip on every page */
footer { border-top: 0; background: #d9d1f5; height: 31px; padding: 0; text-align: center; }
footer p { display: none; }
footer a { color: #555; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6em; }
  header { padding: 10px 16px; gap: 0; }
  header nav { margin-left: 16px; }
  header .logo img { width: 120px; max-width: 120px; }
  .marquee-red { font-size: 32px; }
}

/* Two-column hero rows (Squarespace Fluid Engine image+text side by side):
   left text column + right photo, as on the profile pages. */
.hero-row { display: flex; justify-content: center; align-items: flex-start; gap: 0; margin: 1.2em 0; }
.hero-row .hero-text { display: flex; flex-direction: column; }
.hero-row .hero-text .txtbg { width: auto; margin: 0; }
.hero-row figure { margin: 0; flex: 0 0 auto; }
.hero-row figure img { margin: 0; width: 100%; height: auto; display: block; }

/* Video grids (Squarespace video blocks side by side on a dark section) */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #000; padding: 12px; margin: 1.5em 0; }
.video-grid figure.video { margin: 0; }
.video-grid figure.video video { width: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; }
.video-grid figcaption { color: #fff; }

/* Three-across image row (Squarespace image blocks side by side) */
.img-row-3 { display: flex; justify-content: center; align-items: flex-start; gap: 24px; margin: 1.5em 0; }
.img-row-3 figure { margin: 0; flex: 0 0 331px; }
.img-row-3 figure img { margin: 0; width: 100%; height: auto; display: block; }

/* Full-bleed page sections (Squarespace section backgrounds): break out of
   main's 58px padding so the background spans the viewport width. */
.pg-section { margin-left: -58px; margin-right: -58px; padding-left: 58px; padding-right: 58px; }
.pg-section-dark a { color: #fff; }
/* Squarespace "light accent" on this template renders white on live (verified
   by pixel sampling the BRIAN WINTER link on the homepage); without this rule
   the global dark-blue link colour makes such links unreadable on dark bg. */
.sqsrte-text-color--lightAccent { color: #ffffff; }
.sqsrte-text-color--darkAccent { color: #1c1c1c; }
/* Squarespace accent on this template renders #dcdcdc on live (measured on paul-thompson, jason-veras, paulahaygarth); without this rule accent spans inherit body color. */
.sqsrte-text-color--accent { color: #dcdcdc; }
.pg-section figure img { margin-left: auto; margin-right: auto; }

/* Generic side-by-side image row (Squarespace image blocks in a row) */
.img-row { display: flex; justify-content: center; align-items: flex-start; gap: 12px; margin: 1.5em 0; flex-wrap: wrap; }
.img-row figure { margin: 0; }
.img-row figure img { margin: 0; width: 100%; height: auto; display: block; }

/* Two-column image grid (Squarespace images in a 2-col Fluid Engine layout) */
.fig-grid-2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 1.5em 0; }
.fig-grid-2 figure { margin: 0; flex: 0 0 379px; max-width: 379px; }
.fig-grid-2 figure img { margin: 0; width: 100%; height: auto; display: block; }

/* Homepage s3/s4/s5 fixes (measured from live) */
.sqsrte-text-highlight { background-color: #ffffff; padding: 0 0.15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Text inside a light text-block background must render dark, not inherit
   the dark section's white text colour. */
.txtbg .sqsrte-text-color--darkAccent { color: #1c1c1c; }
.txtbg .sqsrte-text-color--black { color: #000000; }
/* Narrow centred quote column (live: 758px wide) */
.narrow-quote { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Two screenshots side by side (live: 345px + 406px, 259px gap, centred) */
.shot-row { display: flex; justify-content: center; align-items: flex-start;
  gap: 259px; margin: 1.5em 0; }
.shot-row figure { margin: 0; flex: 0 0 auto; }
.shot-row figure img { width: 100%; height: auto; display: block; }