/*
Theme Name: Nicole Sinkule Foundation
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for The Nicole Sinkule Foundation — domestic violence
  awareness, Oceanside, California. Built around a reader who may be being
  watched: quick exit, hotlines one tap from anywhere, and their own content
  rebuilt as scannable checklists.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: nicolesinkule
*/

@import url("assets/mechanics.css");

/* ===========================================================================
   TOKENS

   Palette source: their own assets, not a mood board. The violets are measured
   off the purple rose in AbuseisNotLove.jpg (hue 270-272) and the butterfly in
   their banner. The gold is the tealight in their "Let her story be a light in
   the dark" graphic, pushed from hue 25 to hue 40 so it cannot be mistaken for
   the agency's flame orange.

   Contrast, all verified with palette.py check:
     ink      on paper 14.13   paper-2 12.69
     ink-2    on paper  9.97   paper-2  8.95
     muted    on paper  6.37   paper-2  5.73
     plum     on paper  9.02   paper-2  8.10   lilac 6.41
     gold     on night  7.90
     ink      on gold   6.88   (white on gold is 2.24 — never use it)
     lilac    on night 11.54
     lilac-2  on night  7.40
   ========================================================================= */
:root{
  --nsf-ink:#2E1B47;
  --nsf-ink-2:#4A3360;
  --nsf-muted:#665080;
  --nsf-night:#1F1230;
  --nsf-night-2:#2A1942;
  --nsf-paper:#F7F4FA;
  --nsf-paper-2:#EDE7F2;
  --nsf-white:#FFFFFF;
  --nsf-rule:#DDD3E8;
  --nsf-gold:#E0A233;
  --nsf-gold-deep:#C98A1E;
  /* Small gold TEXT on a light ground. The brand gold is a fill colour: at
     13px on white it scores 2.94, which fails AA. This is the same hue taken
     down until it clears: 5.92 on white, 5.43 on paper. */
  --nsf-gold-ink:#8A5A08;
  --nsf-plum:#5B2E7E;
  --nsf-lilac:#D8CCE6;
  --nsf-lilac-2:#B3A0C9;

  /* the mechanics.css contract */
  --nsf-focus:#E0A233;
  --nsf-nav-bg:#1F1230;
  --nsf-burger:#F7F4FA;
  --nsf-header-h:76px;

  /* Shape language: one radius, no borders anywhere, and a soft diffuse violet
     bloom instead of a shadow. Deliberately the opposite of a hard-edged card
     — everything else about this subject already has hard edges. */
  --nsf-r:18px;
  --nsf-r-sm:12px;
  --nsf-glow:0 2px 24px rgba(46,27,71,.09);
  --nsf-glow-lift:0 6px 34px rgba(46,27,71,.15);

  /* The ribbon. Their banner trails three white curves behind the butterfly;
     every band seam on this site is that curve rather than a straight rule. */
  --nsf-seam-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none' fill='none' stroke='%23DDD3E8' stroke-width='1.4'%3E%3Cpath d='M0 38C200 8 400 56 600 30S1000 4 1200 26'/%3E%3Cpath d='M0 47C240 21 380 62 620 41S980 17 1200 37' stroke-opacity='.6'/%3E%3Cpath d='M0 29C180 53 420 11 640 33S1020 51 1200 19' stroke-opacity='.4'/%3E%3C/svg%3E");
  --nsf-seam-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none' fill='none' stroke='%23E0A233' stroke-width='1.4'%3E%3Cpath d='M0 38C200 8 400 56 600 30S1000 4 1200 26' stroke-opacity='.55'/%3E%3Cpath d='M0 47C240 21 380 62 620 41S980 17 1200 37' stroke-opacity='.3'/%3E%3Cpath d='M0 29C180 53 420 11 640 33S1020 51 1200 19' stroke-opacity='.2'/%3E%3C/svg%3E");

  /* The butterfly, as a mask so it takes currentColor anywhere. */
  --nsf-bf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M49 37C40 18 22 2 11 7C1 12 2 36 14 47C24 55 42 53 49 49Z'/%3E%3Cpath d='M49 52C40 56 23 58 16 67C9 76 14 92 27 90C39 88 47 72 49 61Z'/%3E%3Cpath d='M51 37C60 18 78 2 89 7C99 12 98 36 86 47C76 55 58 53 51 49Z'/%3E%3Cpath d='M51 52C60 56 77 58 84 67C91 76 86 92 73 90C61 88 53 72 51 61Z'/%3E%3Cpath d='M50 33C53 42 53 58 50 78C47 58 47 42 50 33Z'/%3E%3C/svg%3E");
}

body{background:var(--nsf-paper);color:var(--nsf-ink-2)}

/* The butterfly utility: a mask, so it is one colour and that colour is
   inherited. Used as the eyebrow glyph, the list bullet and the back-to-top. */
.nsf-bf{
  display:inline-block;flex:0 0 auto;
  width:1em;height:1em;
  background:currentColor;
  -webkit-mask:var(--nsf-bf) center/contain no-repeat;
          mask:var(--nsf-bf) center/contain no-repeat;
}

/* ===========================================================================
   BANDS
   Rhythm: paper → paper-2 → paper → night → paper. A night band is never the
   last one before the night footer; the page closes on paper or on the
   journal band, which carries a photograph and so reads as its own slab.
   ========================================================================= */
.nsf-band{
  position:relative;
  padding-block:clamp(3.25rem,7vw,5.5rem);
  background:var(--nsf-paper);
}
.nsf-band--shade{background:var(--nsf-paper-2)}
.nsf-band--night{background:var(--nsf-night);color:var(--nsf-lilac)}
.nsf-band--tight{padding-block:clamp(2.25rem,4.5vw,3.25rem)}

/* mechanics.css sets `.nsf-band > * {margin-left: max(0px,(100% - contentSize)/2) !important}`
   to stop WordPress centring narrow paragraphs. Our own wrapper is the full
   band width, so that rule shunts it right by 176px at 1440 and the last card
   in a three-up grid hangs off the screen. It also leaves the wrapper with no
   side gutter, which clipped every heading on a 390px phone. Both fixed here,
   and the !important is required to beat the !important there. */
.nsf-band > .nsf-wrap{
  max-width:82rem;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-inline:1.25rem;
}
@media (min-width:52rem){ .nsf-band > .nsf-wrap{padding-inline:1.75rem} }

/* The ribbon seam sits on the top edge of a band and is purely decorative. */
.nsf-band--seam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:42px;
  background:var(--nsf-seam-light) center/100% 100% no-repeat;
  pointer-events:none;
}
.nsf-band--night.nsf-band--seam::before{background-image:var(--nsf-seam-dark)}
.nsf-band--seam{padding-top:calc(clamp(3.25rem,7vw,5.5rem) + 1.5rem)}

.nsf-band--night :is(h1,h2,h3,h4){color:var(--nsf-white)}
.nsf-band--night a:not(.nsf-btn):not(.nsf-tile){color:var(--nsf-gold)}
.nsf-band--night a:not(.nsf-btn):not(.nsf-tile):hover{color:var(--nsf-white)}
.nsf-band--night .nsf-lede{color:var(--nsf-lilac)}
.nsf-band--night .nsf-eyebrow{color:var(--nsf-gold)}
.nsf-band--night .nsf-note{color:var(--nsf-lilac-2)}

/* ===========================================================================
   TYPE
   ========================================================================= */
.nsf-eyebrow{
  display:flex;align-items:center;gap:.5rem;
  margin:0 0 .85rem;
  font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:800;line-height:1.3;
  color:var(--nsf-plum);
  /* Sentence case on purpose. An uppercase letterspaced eyebrow is one of the
     five things that make a page look like sitereboots.com. */
  text-transform:none;letter-spacing:0;
}
.nsf-eyebrow .nsf-bf{width:1.05em;height:1.05em;color:var(--nsf-gold)}
.nsf-band--night .nsf-eyebrow .nsf-bf{color:var(--nsf-gold)}

.nsf-lede{
  font-size:clamp(1.1875rem,2.1vw,1.4375rem);
  line-height:1.56;color:var(--nsf-ink-2);
  max-width:40ch;
}
.nsf-prose{max-width:66ch}
.nsf-prose > * + *{margin-top:1.15rem}
.nsf-prose h2{margin-top:2.5rem}
.nsf-prose h3{margin-top:2rem}
.nsf-prose :is(h2,h3) + *{margin-top:.75rem}
.nsf-prose a{text-underline-offset:3px;text-decoration-thickness:1px}

.nsf-note{font-size:.9375rem;line-height:1.6;color:var(--nsf-muted)}
.nsf-measure{max-width:52rem}
.nsf-center{text-align:center;margin-inline:auto}

/* A section head: eyebrow, heading, one line of standfirst. */
.nsf-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,2.75rem)}
.nsf-head.nsf-center{margin-inline:auto}
.nsf-head h2{margin:0}
.nsf-head p{margin:.85rem 0 0}

/* ===========================================================================
   BUTTONS — stadium pills, no border, gold fill with an INK label.
   White on gold is 2.24:1, so a white label is banned outright.
   ========================================================================= */
.nsf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:.85rem 1.6rem;
  border:0;border-radius:999px;
  font-family:var(--wp--preset--font-family--text);
  font-size:1.0625rem;font-weight:800;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.nsf-btn--gold{background:var(--nsf-gold);color:var(--nsf-ink);box-shadow:var(--nsf-glow)}
.nsf-btn--gold:hover{background:var(--nsf-ink);color:var(--nsf-gold);box-shadow:var(--nsf-glow-lift)}
.nsf-btn--ink{background:var(--nsf-ink);color:var(--nsf-white)}
.nsf-btn--ink:hover{background:var(--nsf-plum);color:var(--nsf-white)}
.nsf-btn--quiet{background:rgba(247,244,250,.10);color:var(--nsf-white);box-shadow:inset 0 0 0 1.5px rgba(216,204,230,.42)}
.nsf-btn--quiet:hover{background:rgba(247,244,250,.19);color:var(--nsf-white)}
.nsf-btn--light{background:var(--nsf-white);color:var(--nsf-ink);box-shadow:var(--nsf-glow)}
.nsf-btn--light:hover{background:var(--nsf-ink);color:var(--nsf-white)}
.nsf-btn__num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
@media (prefers-reduced-motion:reduce){.nsf-btn{transition:none}}

.nsf-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* ===========================================================================
   HEADER
   Night bar. On a phone the order is brand, QUICK EXIT, burger — the exit
   never goes behind the hamburger, because the one control a frightened
   reader needs cannot be two taps away.
   ========================================================================= */
.nsf-header{background:var(--nsf-night);color:var(--nsf-lilac)}
.nsf-headbar{
  /* A literal value. --nsf-header-h is an OUTPUT of this element: feeding it
     back in as min-height makes the bar grow a few pixels on every settle. */
  min-height:64px;
  max-width:82rem;margin-inline:auto;
  padding:.6rem 1.25rem;
  gap:.75rem;
}
.nsf-brand{flex:0 0 auto;gap:.6rem;color:var(--nsf-white)}
.nsf-brand .nsf-bf{width:30px;height:30px;color:var(--nsf-gold)}
.nsf-brand__name{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-size:1.0625rem;font-weight:600;line-height:1.1;letter-spacing:.005em;
  color:var(--nsf-white);white-space:nowrap;
}
/* Under ~26rem the full name cannot sit beside Quick exit and the burger, and
   the exit is the one thing that must never be squeezed. Measured: at 360px
   the bar wanted 402px, so the gaps, the gutter and the exit padding all come
   in too, and below 21.5rem the wordmark goes entirely and the butterfly
   carries the link home. */
@media (max-width:25.9375rem){
  .nsf-brand__name{font-size:.9375rem;white-space:normal;max-width:7rem;line-height:1.15}
  .nsf-brand .nsf-bf{width:26px;height:26px}
  .nsf-headbar{gap:.5rem;padding-inline:.85rem}
  .nsf-exit{padding-inline:.6rem;font-size:.875rem;gap:.3rem}
}
@media (max-width:21.5rem){
  .nsf-brand__name{display:none}
}
.nsf-brand__sub{display:none}

.nsf-nav__link{
  color:var(--nsf-lilac);text-decoration:none;
  font-size:1rem;font-weight:600;
  border-radius:999px;
}
.nsf-nav__link:hover{color:var(--nsf-white)}
.nsf-nav__link[aria-current="page"]{color:var(--nsf-gold)}

/* The quick exit control. Light on the night bar so it is the brightest
   non-gold thing in the header and cannot be mistaken for navigation. */
.nsf-exit{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;padding:.4rem .9rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--nsf-white);color:var(--nsf-ink);
  font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:800;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease;
}
.nsf-exit:hover{background:var(--nsf-gold);color:var(--nsf-ink)}
.nsf-exit__x{font-size:1.05em;line-height:1}
.nsf-exit__kbd{display:none}
@media (min-width:46rem){
  .nsf-exit__kbd{
    display:inline;opacity:.62;font-weight:600;font-size:.8125rem;
    padding-left:.15rem;
  }
}

/* The header hotline chip. Gold, tabular, and a real tel: link. */
.nsf-hot{
  display:none;align-items:center;gap:.45rem;
  min-height:42px;padding:.4rem .95rem;
  border-radius:999px;background:rgba(224,162,51,.14);
  color:var(--nsf-gold);text-decoration:none;
  font-size:.9375rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}
.nsf-hot:hover{background:var(--nsf-gold);color:var(--nsf-ink)}
.nsf-hot > span{white-space:nowrap}
.nsf-hot small{display:block;font-weight:600;opacity:.85;font-size:.78em}

/* --- desktop navigation. Scoped, per the mechanics.css contract: an unscoped
   display rule here would override the mobile panel at EVERY width. --- */
@media (min-width:64.0625rem){
  .nsf-headbar{min-height:76px;padding-inline:1.75rem}
  .nsf-brand .nsf-bf{width:34px;height:34px}
  .nsf-brand__name{font-size:1.3125rem}
  .nsf-brand__sub{
    display:block;font-family:var(--wp--preset--font-family--text);
    font-size:.75rem;font-weight:700;color:var(--nsf-lilac-2);
    margin-top:.15rem;
  }
  /* The spring goes on the NAV, not the brand — mechanics.css puts
     margin-right:auto on .nsf-brand, which shoves the logo hard left and
     crushes the links against the buttons. 0,2,0 beats it. */
  .nsf-header .nsf-brand{margin-right:1.5rem}
  .nsf-header .nsf-nav{margin-right:auto}
  /* nowrap: a second row of links makes the bar grow, and the bar's height is
     what scroll-padding and the mobile panel offset are measured from. */
  .nsf-header .nsf-nav__inner{display:flex;align-items:center;gap:.1rem;flex-wrap:nowrap}
  .nsf-header .nsf-nav__link{padding:.5rem .7rem;min-height:40px;display:inline-flex;align-items:center}
  .nsf-hot{display:inline-flex}
}
/* The tightest desktop band, where the full nav, the chip and the exit have
   the least room. Checked at 833px, 900px and 1024px. */
@media (min-width:64.0625rem) and (max-width:84rem){
  .nsf-headbar{gap:.5rem;padding-inline:1.25rem}
  .nsf-header .nsf-brand{margin-right:.9rem}
  .nsf-header .nsf-nav__link{font-size:.875rem;padding-inline:.4rem}
  .nsf-brand__name{font-size:1rem}
  .nsf-brand__sub{display:none}
  .nsf-hot{padding-inline:.65rem;font-size:.875rem}
  .nsf-hot small{display:none}
  .nsf-exit{padding-inline:.7rem}
}
@media (min-width:64.0625rem) and (max-width:72rem){
  .nsf-header .nsf-nav__link{font-size:.8125rem;padding-inline:.3rem}
}

/* --- the mobile panel, painted on top of the mechanics --- */
@media (max-width:64rem){
  .nsf-header .nsf-nav{background:var(--nsf-night)}
  .nsf-header .nsf-nav__link{
    font-size:1.1875rem;font-weight:600;
    padding:.55rem .25rem;
    border-bottom:1px solid rgba(216,204,230,.14);
  }
  .nsf-header .nsf-nav__foot{display:grid;gap:.65rem}
  .nsf-header .nsf-nav__foot .nsf-btn{width:100%}
}

/* ===========================================================================
   THE SAFETY STRIP
   Under the header on every page. Their own home page opens with this warning
   before it says who they are, so it belongs everywhere, not on page six.
   ========================================================================= */
.nsf-safety{
  background:var(--nsf-night-2);
  color:var(--nsf-lilac);
  font-size:.875rem;line-height:1.5;
}
.nsf-safety__in{
  max-width:82rem;margin-inline:auto;padding:.6rem 1.25rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
/* This strip is inside the sticky header, so every line it takes is a line
   the reader never gets back. Measured at 390px it ran to 107px and the whole
   header occupied 21% of the viewport; the middle clause is the one that can
   go, because the Quick exit page explains it in full anyway. */
.nsf-safety__more{display:none}
@media (min-width:64.0625rem){ .nsf-safety__more{display:inline} }
@media (max-width:64rem){
  .nsf-safety{font-size:.8125rem}
  .nsf-safety__in{padding:.5rem 1.25rem;gap:.45rem}
  .nsf-safety .nsf-bf{display:none}
}
.nsf-safety b{color:var(--nsf-white);font-weight:800}
.nsf-safety a{color:var(--nsf-gold);text-underline-offset:3px}
.nsf-safety a:hover{color:var(--nsf-white)}

/* ===========================================================================
   HERO — the candle.
   A dark band with one warm bloom low and left, their own sentence set large,
   and the two controls. No photograph: photos.py says nothing they own is
   hero-grade, and a face under a gradient would turn this into a memorial page
   when its first job is to be useful.
   ========================================================================= */
.nsf-hero{
  position:relative;overflow:hidden;
  background:var(--nsf-night);
  color:var(--nsf-lilac);
  padding-block:clamp(3.5rem,9vw,7rem);
}
.nsf-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58rem 42rem at 16% 108%, rgba(224,162,51,.26), rgba(224,162,51,0) 62%),
    radial-gradient(22rem 18rem at 11% 104%, rgba(255,214,140,.16), rgba(255,214,140,0) 58%),
    radial-gradient(44rem 34rem at 88% -8%,  rgba(143,96,196,.26), rgba(143,96,196,0) 65%);
}
.nsf-hero__in{position:relative;max-width:82rem;margin-inline:auto;padding-inline:1.25rem}
.nsf-hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:60rem){
  .nsf-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .nsf-hero__in{padding-inline:1.75rem}
}
.nsf-hero h1{
  margin:0;
  font-size:clamp(2.375rem,6.2vw,4.25rem);
  font-weight:700;line-height:1.03;letter-spacing:-.012em;
  color:var(--nsf-white);
  max-width:16ch;
}
.nsf-hero h1 em{font-style:italic;color:var(--nsf-gold);font-weight:600}
.nsf-hero__sub{
  margin:1.35rem 0 0;max-width:46ch;
  font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.6;
  color:var(--nsf-lilac);
}
.nsf-hero__who{
  margin:0 0 1.5rem;
  font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:700;color:var(--nsf-gold);
  display:flex;align-items:center;gap:.5rem;
}
.nsf-hero__who .nsf-bf{width:1.1em;height:1.1em}

/* The help card: the single most useful object on the site, so it sits in the
   hero rather than on a resources page. */
.nsf-helpcard{
  background:rgba(247,244,250,.07);
  border-radius:var(--nsf-r);
  padding:clamp(1.35rem,3vw,1.85rem);
  box-shadow:inset 0 0 0 1.5px rgba(216,204,230,.20);
}
.nsf-helpcard h2{
  margin:0 0 .3rem;font-size:1.1875rem;font-weight:700;color:var(--nsf-white);
}
.nsf-helpcard > p{margin:0 0 1.15rem;font-size:.9375rem;color:var(--nsf-lilac-2)}
.nsf-helpcard__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.nsf-dial{
  display:flex;align-items:center;gap:.9rem;
  min-height:60px;padding:.7rem 1rem;
  background:rgba(247,244,250,.06);
  border-radius:var(--nsf-r-sm);
  color:var(--nsf-white);text-decoration:none;
  transition:background-color .15s ease;
}
.nsf-dial:hover{background:rgba(224,162,51,.18)}
.nsf-dial__n{
  font-family:var(--wp--preset--font-family--text);
  font-size:1.0625rem;font-weight:800;color:var(--nsf-gold);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.nsf-dial__l{font-size:.875rem;line-height:1.35;color:var(--nsf-lilac)}
.nsf-dial--999 .nsf-dial__n{font-size:1.25rem}

/* ===========================================================================
   PANELS — 18px, no border, soft bloom. Never a 2px dark border: that is one
   of the agency's five tells.
   ========================================================================= */
.nsf-panel{
  background:var(--nsf-white);
  border-radius:var(--nsf-r);
  padding:clamp(1.35rem,2.8vw,1.9rem);
  box-shadow:var(--nsf-glow);
}
.nsf-band--shade .nsf-panel{box-shadow:0 2px 24px rgba(46,27,71,.07)}
.nsf-band--night .nsf-panel{
  background:rgba(247,244,250,.06);color:var(--nsf-lilac);
  box-shadow:inset 0 0 0 1.5px rgba(216,204,230,.16);
}
.nsf-panel h3{margin:0 0 .6rem}
.nsf-panel > :last-child{margin-bottom:0}

/* A grid item defaults to min-width:auto, so one long word or a padded panel
   can push its own track wider than the container and the whole column
   overflows. Only showed up at 320px on the contact page. */
.nsf-grid > *,.nsf-split > *,.nsf-lines > *,.nsf-clips > *,
.nsf-list > *,.nsf-steps > *,.nsf-facts > *{min-width:0}
.nsf-grid{display:grid;gap:clamp(1rem,2vw,1.35rem)}
@media (min-width:44rem){ .nsf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:60rem){ .nsf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:44rem) and (max-width:59.99rem){ .nsf-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:52rem){ .nsf-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:34rem) and (max-width:51.99rem){ .nsf-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===========================================================================
   THE CHECKLIST — the primary content type on this site.

   Their strongest material is already four lists: 14 signs of an abusive
   relationship, 10 signs an abuser is not changing, Claudia's 11 steps, and 11
   online and real-life safety measures. Built for a reader who is skimming
   under stress: one idea per row, a big target, and a butterfly marker instead
   of a bullet.
   ========================================================================= */
.nsf-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.nsf-list li{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.9rem 1.1rem;
  background:var(--nsf-white);
  border-radius:var(--nsf-r-sm);
  box-shadow:var(--nsf-glow);
  line-height:1.56;
}
.nsf-band--shade .nsf-list li{box-shadow:0 2px 20px rgba(46,27,71,.06)}
.nsf-list li::before{
  content:"";flex:0 0 auto;
  width:1.05em;height:1.05em;margin-top:.3em;
  background:var(--nsf-gold);
  -webkit-mask:var(--nsf-bf) center/contain no-repeat;
          mask:var(--nsf-bf) center/contain no-repeat;
}
.nsf-list b{color:var(--nsf-ink);font-weight:800}
.nsf-band--night .nsf-list li{
  background:rgba(247,244,250,.06);color:var(--nsf-lilac);
  box-shadow:inset 0 0 0 1.5px rgba(216,204,230,.14);
}
@media (min-width:52rem){
  .nsf-list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* A numbered variant for the eleven steps, which are an order, not a set. */
.nsf-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:.5rem}
@media (min-width:52rem){ .nsf-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
.nsf-steps li{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.9rem 1.1rem;
  background:var(--nsf-white);border-radius:var(--nsf-r-sm);
  box-shadow:var(--nsf-glow);line-height:1.56;
}
.nsf-band--shade .nsf-steps li{box-shadow:0 2px 20px rgba(46,27,71,.06)}
.nsf-steps li::before{
  counter-increment:step;content:counter(step);
  flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--nsf-paper-2);color:var(--nsf-plum);
  font-family:var(--wp--preset--font-family--text);
  font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.nsf-steps b{display:block;color:var(--nsf-ink);font-weight:800}

/* ===========================================================================
   HOTLINE DIRECTORY
   Every entry is a tel: link with a 60px target. A phone number that is not
   tappable is a phone number you have to write down while someone watches.
   ========================================================================= */
.nsf-lines{display:grid;gap:.6rem}
@media (min-width:46rem){ .nsf-lines{grid-template-columns:repeat(2,minmax(0,1fr))} }
.nsf-line{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:72px;padding:.9rem 1.2rem;
  background:var(--nsf-white);border-radius:var(--nsf-r-sm);
  box-shadow:var(--nsf-glow);
  color:var(--nsf-ink-2);text-decoration:none;
  transition:box-shadow .15s ease,transform .15s ease;
}
.nsf-line:hover{box-shadow:var(--nsf-glow-lift);transform:translateY(-1px)}
.nsf-line__t{min-width:0}
.nsf-line__name{display:block;font-weight:800;color:var(--nsf-ink);line-height:1.34}
.nsf-line__meta{display:block;font-size:.8125rem;color:var(--nsf-muted);margin-top:.15rem}
.nsf-line__n{
  flex:0 0 auto;
  font-family:var(--wp--preset--font-family--text);
  font-size:1.0625rem;font-weight:800;color:var(--nsf-plum);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.nsf-line:hover .nsf-line__n{color:var(--nsf-ink)}
@media (prefers-reduced-motion:reduce){.nsf-line{transition:none}}
@media (max-width:30rem){
  .nsf-line{flex-direction:column;align-items:flex-start;gap:.35rem}
}

/* ===========================================================================
   NICOLE'S OWN WORDS
   Her journal, scanned. The single most persuasive thing on the site for a
   reader in the same position, so it gets a band of its own and no decoration
   that competes with it.
   ========================================================================= */
.nsf-journal{
  background:var(--nsf-white);
  border-radius:var(--nsf-r);
  padding:clamp(1.1rem,2.6vw,1.75rem);
  box-shadow:var(--nsf-glow);
}
.nsf-journal img{display:block;width:100%;height:auto;border-radius:var(--nsf-r-sm)}
.nsf-journal figcaption{
  margin-top:1rem;font-size:.9375rem;line-height:1.6;color:var(--nsf-muted);
}
.nsf-journal figcaption b{color:var(--nsf-ink);font-weight:800}

.nsf-pull{
  margin:0;
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.5rem,3.4vw,2.25rem);
  font-style:italic;font-weight:500;line-height:1.3;
  color:var(--nsf-ink);
}
.nsf-band--night .nsf-pull{color:var(--nsf-white)}
.nsf-pull + .nsf-attrib{
  margin:1rem 0 0;font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:700;color:var(--nsf-muted);
}
.nsf-band--night .nsf-attrib{color:var(--nsf-lilac-2)}

/* ===========================================================================
   FIGURES AND THE PRESS ARCHIVE
   ========================================================================= */
.nsf-fig{margin:0}
.nsf-fig img{
  display:block;width:100%;height:auto;
  border-radius:var(--nsf-r);box-shadow:var(--nsf-glow);
}
.nsf-fig figcaption{margin-top:.8rem;font-size:.875rem;line-height:1.55;color:var(--nsf-muted)}
.nsf-band--night .nsf-fig figcaption{color:var(--nsf-lilac-2)}

/* The clippings are graphic. They open behind a deliberate click with a
   content note, never on the home page. */
.nsf-reveal{
  background:var(--nsf-paper-2);
  border-radius:var(--nsf-r);
  padding:clamp(1.1rem,2.4vw,1.5rem);
}
.nsf-reveal > summary{
  display:flex;align-items:center;gap:.6rem;
  cursor:pointer;list-style:none;
  min-height:48px;
  font-family:var(--wp--preset--font-family--text);
  font-weight:800;color:var(--nsf-plum);
}
.nsf-reveal > summary::-webkit-details-marker{display:none}
.nsf-reveal > summary::after{
  content:"";width:.6em;height:.6em;margin-left:.1rem;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);
  transition:transform .18s ease;
}
.nsf-reveal[open] > summary::after{transform:rotate(-135deg) translateY(-.05em)}
.nsf-reveal > summary:hover{color:var(--nsf-ink)}
.nsf-reveal__body{padding-top:1.25rem}
@media (prefers-reduced-motion:reduce){.nsf-reveal > summary::after{transition:none}}

.nsf-clips{display:grid;gap:clamp(.9rem,2vw,1.25rem);margin:0;padding:0;list-style:none}
@media (min-width:40rem){ .nsf-clips{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:62rem){ .nsf-clips{grid-template-columns:repeat(3,minmax(0,1fr))} }
.nsf-clip{
  display:block;background:var(--nsf-white);border-radius:var(--nsf-r);
  overflow:hidden;box-shadow:var(--nsf-glow);text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;
}
.nsf-clip:hover{box-shadow:var(--nsf-glow-lift);transform:translateY(-2px)}
.nsf-clip img{display:block;width:100%;height:auto;aspect-ratio:62/44;object-fit:cover;object-position:top}
.nsf-clip__t{padding:.9rem 1.1rem 1.1rem}
.nsf-clip__d{
  display:block;font-family:var(--wp--preset--font-family--text);
  font-size:.8125rem;font-weight:800;color:var(--nsf-gold-ink);
  font-variant-numeric:tabular-nums;
}
.nsf-clip__h{display:block;margin-top:.2rem;font-weight:700;color:var(--nsf-ink);line-height:1.38}
.nsf-clip__s{display:block;margin-top:.3rem;font-size:.8125rem;color:var(--nsf-muted)}
@media (prefers-reduced-motion:reduce){.nsf-clip{transition:none}}

/* ===========================================================================
   TILES — the way into each section from the home page.
   ========================================================================= */
.nsf-tile{
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.25rem,2.6vw,1.6rem);
  background:var(--nsf-white);border-radius:var(--nsf-r);
  box-shadow:var(--nsf-glow);text-decoration:none;color:var(--nsf-ink-2);
  transition:box-shadow .15s ease,transform .15s ease;
}
.nsf-tile:hover{box-shadow:var(--nsf-glow-lift);transform:translateY(-2px)}
.nsf-tile .nsf-bf{width:28px;height:28px;color:var(--nsf-gold)}
.nsf-tile h3{margin:.25rem 0 0;color:var(--nsf-ink);font-size:1.25rem}
.nsf-tile p{margin:0;font-size:.9375rem;line-height:1.55}
.nsf-tile__go{
  margin-top:auto;padding-top:.6rem;
  font-family:var(--wp--preset--font-family--text);
  font-size:.9375rem;font-weight:800;color:var(--nsf-plum);
}
.nsf-tile:hover .nsf-tile__go{color:var(--nsf-ink)}
.nsf-band--night .nsf-tile{
  background:rgba(247,244,250,.06);color:var(--nsf-lilac);
  box-shadow:inset 0 0 0 1.5px rgba(216,204,230,.16);
}
.nsf-band--night .nsf-tile h3{color:var(--nsf-white)}
.nsf-band--night .nsf-tile__go{color:var(--nsf-gold)}
@media (prefers-reduced-motion:reduce){.nsf-tile{transition:none}}

/* ===========================================================================
   FACT STRIP — the few hard numbers they publish.
   ========================================================================= */
.nsf-facts{
  display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.nsf-fact__n{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(2rem,4.2vw,2.75rem);font-weight:700;line-height:1;
  color:var(--nsf-gold);font-variant-numeric:tabular-nums;
}
.nsf-fact__l{display:block;margin-top:.5rem;font-size:.9375rem;line-height:1.5;color:var(--nsf-lilac)}
.nsf-band:not(.nsf-band--night) .nsf-fact__n{color:var(--nsf-plum)}
.nsf-band:not(.nsf-band--night) .nsf-fact__l{color:var(--nsf-muted)}

/* ===========================================================================
   SPLIT — text beside an image.
   ========================================================================= */
.nsf-split{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
/* A split whose long side is a form wants its columns top-aligned, or the
   short side floats to the middle of a very tall row. */
.nsf-split--top{align-items:start}
@media (min-width:56rem){
  .nsf-split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nsf-split--wide-l{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .nsf-split--wide-r{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .nsf-split--flip > :first-child{order:2}
}

/* ===========================================================================
   FORM
   ========================================================================= */
.nsf-form{display:grid;gap:1rem}
@media (min-width:44rem){ .nsf-form__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} }
.nsf-field{display:grid;gap:.4rem}
.nsf-field > label{font-size:.9375rem;font-weight:800;color:var(--nsf-ink)}
.nsf-field > label span{font-weight:600;color:var(--nsf-muted)}
.nsf-field :is(input,textarea,select){
  width:100%;min-height:52px;padding:.8rem 1rem;
  background:var(--nsf-white);
  border:0;border-radius:var(--nsf-r-sm);
  box-shadow:inset 0 0 0 1.5px var(--nsf-rule);
  font-family:var(--wp--preset--font-family--text);
  font-size:1.0625rem;color:var(--nsf-ink);
}
.nsf-field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.nsf-field :is(input,textarea,select):focus{
  outline:3px solid var(--nsf-gold);outline-offset:2px;
  box-shadow:inset 0 0 0 1.5px var(--nsf-plum);
}
.nsf-field :is(input,textarea)::placeholder{color:#9A88AE}
.nsf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.nsf-form__note{font-size:.875rem;line-height:1.6;color:var(--nsf-muted)}
.nsf-alert{
  padding:1rem 1.2rem;border-radius:var(--nsf-r-sm);
  background:var(--nsf-paper-2);color:var(--nsf-ink);
  box-shadow:inset 0 0 0 1.5px var(--nsf-rule);
}
.nsf-alert--ok{background:rgba(224,162,51,.16);box-shadow:inset 0 0 0 1.5px rgba(201,138,30,.5)}

/* ===========================================================================
   FOOTER
   ========================================================================= */
.nsf-footer{background:var(--nsf-night);color:var(--nsf-lilac);padding-block:clamp(2.75rem,5vw,4rem)}
.nsf-footer__in{max-width:82rem;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:52rem){ .nsf-footer__in{padding-inline:1.75rem} }
.nsf-footer__grid{display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
@media (min-width:52rem){ .nsf-footer__grid{grid-template-columns:1.3fr .85fr .85fr 1fr} }
.nsf-footer h2{font-size:1rem;font-weight:800;color:var(--nsf-white);margin:0 0 .9rem;
  font-family:var(--wp--preset--font-family--text)}
.nsf-footer ul{list-style:none;margin:0;padding:0}
.nsf-footer a{color:var(--nsf-lilac);text-decoration:none}
.nsf-footer a:hover{color:var(--nsf-gold);text-decoration:underline;text-underline-offset:3px}
.nsf-footer__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.nsf-footer__brand .nsf-bf{width:32px;height:32px;color:var(--nsf-gold)}
.nsf-footer__brand strong{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.1875rem;font-weight:600;color:var(--nsf-white);
}
.nsf-footer p{font-size:.9375rem;line-height:1.6;color:var(--nsf-lilac-2);margin:0 0 .9rem}
.nsf-footer__num{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:800;color:var(--nsf-gold)!important;font-variant-numeric:tabular-nums;
}
.nsf-footer__bar{
  margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.5rem;
  border-top:1px solid rgba(216,204,230,.16);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:var(--nsf-lilac-2);
}
.nsf-footer__bar a{color:var(--nsf-lilac-2)}

/* ===========================================================================
   MOBILE ACTION BAR + BACK TO TOP
   The two things that matter, a thumb-tap away: a hotline and the exit.
   ========================================================================= */
.nsf-ab{border-radius:999px;font-weight:800;font-size:1rem;box-shadow:0 6px 24px rgba(31,18,48,.3)}
.nsf-ab--gold{background:var(--nsf-gold);color:var(--nsf-ink)}
.nsf-ab--exit{background:var(--nsf-white);color:var(--nsf-ink)}
.nsf-top{
  border:0;border-radius:999px;
  background:var(--nsf-night);color:var(--nsf-gold);
  box-shadow:0 6px 24px rgba(31,18,48,.32);
}
.nsf-top .nsf-bf{width:22px;height:22px}
.nsf-top:hover{background:var(--nsf-plum);color:var(--nsf-white)}

/* ===========================================================================
   PAGE FURNITURE
   ========================================================================= */
.nsf-pagehead{
  background:var(--nsf-night);color:var(--nsf-lilac);
  padding-block:clamp(2.5rem,5.5vw,4rem);
  position:relative;overflow:hidden;
}
.nsf-pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40rem 26rem at 10% 118%, rgba(224,162,51,.20), rgba(224,162,51,0) 62%);
}
.nsf-pagehead__in{position:relative;max-width:82rem;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:52rem){ .nsf-pagehead__in{padding-inline:1.75rem} }
.nsf-pagehead h1{margin:0;max-width:20ch;color:var(--nsf-white);
  font-size:clamp(2rem,4.6vw,3.125rem);line-height:1.08}
.nsf-pagehead p{margin:1rem 0 0;max-width:52ch;font-size:clamp(1.0625rem,1.7vw,1.1875rem);
  line-height:1.6;color:var(--nsf-lilac)}
.nsf-crumbs{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  margin:0 0 .9rem;font-size:.875rem;color:var(--nsf-lilac-2);
}
.nsf-crumbs a{color:var(--nsf-lilac-2);text-decoration:none}
.nsf-crumbs a:hover{color:var(--nsf-gold);text-decoration:underline}

/* ===========================================================================
   EDITOR + PRINT
   ========================================================================= */
.editor-styles-wrapper{background:var(--nsf-paper)}

@media print{
  .nsf-header,.nsf-safety,.nsf-actionbar,.nsf-top,.nsf-footer__bar{display:none!important}
  .nsf-band,.nsf-hero,.nsf-pagehead{background:#fff!important;color:#000!important;padding-block:1rem}
  .nsf-hero::before,.nsf-pagehead::before,.nsf-band--seam::before{display:none}
  .nsf-hero h1,.nsf-pagehead h1,.nsf-band--night :is(h1,h2,h3){color:#000!important}
  .nsf-panel,.nsf-list li,.nsf-steps li,.nsf-line{box-shadow:none!important;border:1px solid #999}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:.8em}
}