/* ============================================================
   #SayMyName — Design tokens
   Sampled from SAY_MY_NAME_INFOGRAPHIC_ENGLISH.pdf
   ============================================================ */
:root{
  /* neutrals — page ground is WHITE; cream is the alternating band only */
  --cream:#FAF7F2; --paper:#FFFFFF; --ink:#274563; --ink-muted:#61738A; --hairline:#E3E8ED;

  /* mark palette — logo artwork only, never UI */
  --brand-navy:#274563; --brand-maroon:#AB2D4B; --brand-pink:#FF63C9;
  --brand-cyan:#15CFD5; --brand-green:#03BD60; --brand-sky:#87CFFF;

  /* six themes: core / tint / deep
     Deeps nudged 2-3% darker than the Figma values: the originals clear
     4.5:1 on white by a hair (4.50-4.61) but drop to 4.21-4.31 on the
     cream band, under the floor. Darkening also improves white-on-deep. */
  --maroon:#AB2D4B; --maroon-tint:#F2E0E4; --maroon-deep:#AB2D4B;
  --orange:#FF7521; --orange-tint:#FFEADE; --orange-deep:#B55317;
  --yellow:#FFE157; --yellow-tint:#FFFAE6; --yellow-deep:#7F702B;
  --green:#03BD60;  --green-tint:#D9F5E7;  --green-deep:#028142;
  --sky:#87CFFF;    --sky-tint:#EDF8FF;    --sky-deep:#4C7590;
  --purple:#9F6FFF; --purple-tint:#F1E9FF; --purple-deep:#8157D6;

  /* shape */
  --r-card:28px; --r-pill:999px; --r-input:16px;

  /* type */
  --display:"Chewy", "Comic Sans MS", cursive;
  /* Names carry diacritics that Chewy does not ship: ā (U+0101) and ş
     (U+015F) are Latin Extended-A, ễ (U+1EC5) is Vietnamese. Chewy is
     latin-only, so those three letters fell back mid-word. Comfortaa
     covers Latin, Latin Extended and Vietnamese, verified against its
     unicode-range declarations, and is fully rounded. Fallbacks are chosen for the same coverage. */
  --names:"Permanent Marker", "Comic Sans MS", cursive;
  --body:"Nunito", system-ui, -apple-system, sans-serif;

  /* layout */
  --content:1140px; --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(56px,8vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:var(--purple-deep)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--purple); outline-offset:2px; border-radius:6px;
}

/* ---------- type scale ---------- */
.t-h1{font:400 clamp(40px,6vw,68px)/1.08 var(--display); letter-spacing:.5px}
.t-h2{font:800 clamp(28px,3.4vw,40px)/1.2 var(--body); letter-spacing:-.2px}
.t-h3{font:700 21px/1.3 var(--body)}
.t-lead{font:400 20px/1.6 var(--body)}
.t-body{font:400 17px/1.65 var(--body)}
.t-eyebrow{font:700 13px/1 var(--body); letter-spacing:1.2px; text-transform:uppercase}
.t-meta{font:600 14px/1.4 var(--body); color:var(--ink-muted)}
.t-cloud{font:400 clamp(20px,2.2vw,30px)/1 var(--display); letter-spacing:1px; text-transform:uppercase}

/* ---------- orphan / widow control ----------
   balance  : headings — evens the lines, no single-word last line
   pretty   : body     — protects the last line only, no reflow cost
   Both degrade to normal wrapping where unsupported, so the
     fallback in §2.5 still matters for critical headlines. */
h1,h2,h3,h4,
.t-h1,.t-h2,.t-h3,.t-cloud,.t-lead,
.mcard__body .t-h3,.person__name,.person__role,
.acc__q,.callout__l,.stat__l,.t-eyebrow{
  text-wrap:balance;
}
p,li,figcaption,blockquote,.t-body,.t-meta,.field__hint,.ph__l{
  text-wrap:pretty;
}
/* short labels must never break at all */
.badge,.tag,.btn,.nav__link,.tl__month{text-wrap:nowrap}
@supports not (text-wrap:balance){
  .t-h1,.t-h2{max-width:22ch; margin-inline:auto}
}

/* ============================================================
   THE SIGNATURE: cloud shape
   Scalloped blob. JS walks a rounded-rect centreline and joins
   evenly spaced points with outward semicircular arcs.
   Fallback with no JS: a plain pill.
   ============================================================ */
.cloud{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:20px 38px; color:var(--cloudink,var(--ink));
  background:var(--cloud,var(--purple)); border-radius:var(--r-pill);
  isolation:isolate;
}
.cloud.is-drawn{background:transparent}
.cloud > svg{position:absolute; inset:0; width:100%; height:100%; z-index:-1; overflow:visible; pointer-events:none}
.cloud > span{position:relative}
.cloud--sm{padding:12px 22px}
.cloud--dot{padding:0; width:26px; height:26px; flex:none}

a.cloud,button.cloud{cursor:pointer; border:0; transition:transform .18s ease}
a.cloud:hover,button.cloud:hover{transform:translateY(-2px)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:700 16px/1 var(--body); letter-spacing:.2px;
  padding:0 28px; min-height:48px; border-radius:var(--r-pill);
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color .15s ease, transform .12s ease, color .15s ease;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--btn,var(--purple-deep)); color:#fff}
.btn--primary:hover{filter:brightness(.9)}
.btn--secondary{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink); color:var(--cream)}
.btn--ghost{background:transparent; color:var(--ink); padding:0 8px}
.btn--ghost:hover{text-decoration:underline; text-underline-offset:4px}
.btn--oncolor{background:#fff; color:var(--ink)}
.btn--oncolor:hover{filter:brightness(.94)}
.btn--sm{min-height:40px; font-size:15px; padding:0 20px}
.btn--lg{min-height:56px; font-size:17px; padding:0 34px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* ============================================================
   Pills / badges / tags
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font:700 12px/1 var(--body); letter-spacing:.4px; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--r-pill);
  /* deep-on-tint measures 4.29:1 at 12px; ink on tint is 8.4:1 and the
     tint alone still carries the theme colour. */
  background:var(--tint,var(--sky-tint)); color:var(--ink);
}
.badge--solid{background:var(--deep,var(--sky-deep)); color:#fff}
.tag{
  display:inline-flex; font:600 14px/1 var(--body);
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--hairline); color:var(--ink);
}

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap{max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter)}
.band{padding-block:var(--section-y)}
.band--tint{background:var(--band,var(--green-tint))}
.stack-8>*+*{margin-top:8px}
.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}
.stack-32>*+*{margin-top:32px}
.grid-3{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

.rule{height:2px; background:var(--hairline); border:0; border-radius:2px}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-card); padding:28px;
}
.card--tint{background:var(--tint,var(--green-tint)); border-color:transparent}
.card__num{font:400 34px/1 var(--display); color:var(--deep,var(--green-deep)); display:block}

/* ============================================================
   Q-row — the signature layout from the infographic
   ============================================================ */
.qrow{display:grid; gap:20px; grid-template-columns:1fr; align-items:center; margin-bottom:20px}
.qrow__panel{background:var(--tint); border-radius:var(--r-card); padding:clamp(22px,3vw,34px)}
.qrow__cloud{display:flex; justify-content:center}
@media(min-width:820px){
  .qrow{grid-template-columns:1fr 300px; gap:28px}
  .qrow--flip .qrow__panel{order:2}
  .qrow--flip .qrow__cloud{order:1}
  .qrow--flip{grid-template-columns:300px 1fr}
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--cream); padding:14px 22px; border-radius:var(--r-pill);
  border:1px solid var(--hairline);
}
.nav__brand{display:flex; align-items:center; gap:10px; font:400 22px/1 var(--display); text-decoration:none; color:var(--ink)}
.nav__links{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.nav__link{
  font:600 16px/1 var(--body); color:var(--ink); text-decoration:none;
  padding:11px 16px; border-radius:var(--r-pill);
}
.nav__link:hover{background:var(--purple-tint)}
/* Active state kept the purple-tint pill but set deep purple on it —
   3.86:1, under the floor for 16px. The pill alone marks the current
   page, so the label stays ink. */
.nav__link[aria-current="page"]{background:var(--purple-tint); color:var(--ink)}

/* ============================================================
   Timeline
   ============================================================ */
.tl{position:relative; padding-left:34px}
.tl::before{content:""; position:absolute; left:12px; top:6px; bottom:6px; width:2px; background:var(--hairline)}
.tl__item{position:relative; padding:0 0 26px 0}
.tl__dot{position:absolute; left:-34px; top:4px; width:26px; height:26px; border-radius:50%;
  background:var(--dot,var(--green)); border:4px solid var(--cream)}
.tl__month{font:700 13px/1 var(--body); letter-spacing:1.2px; text-transform:uppercase; color:var(--deep,var(--green-deep))}

/* ============================================================
   Stats
   ============================================================ */
.stat__n{font:400 clamp(44px,6vw,64px)/1 var(--display); display:block}
.stat__l{display:block; margin-top:8px; font:700 13px/1 var(--body); letter-spacing:1.2px; text-transform:uppercase}

/* ============================================================
   Accordion
   ============================================================ */
.acc{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden}
.acc+.acc{margin-top:12px}
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font:700 18px/1.4 var(--body); text-align:left; color:var(--ink);
  background:none; border:0; padding:22px 26px; cursor:pointer;
}
.acc__mark{flex:none; width:30px; height:30px; border-radius:50%; background:var(--purple-tint);
  color:var(--purple-deep); display:grid; place-items:center; font:700 20px/1 var(--body); transition:transform .2s ease}
.acc[open] .acc__mark{transform:rotate(45deg)}
.acc__a{padding:0 26px 24px; max-width:64ch}
.acc summary{list-style:none}
.acc summary::-webkit-details-marker{display:none}

/* ============================================================
   Forms
   ============================================================ */
.field{display:block; margin-bottom:18px}
.field__label{display:block; font:600 14px/1.4 var(--body); margin-bottom:7px}
.field__hint{font:400 14px/1.5 var(--body); color:var(--ink-muted); margin-top:6px}
.input,.select,.textarea{
  width:100%; font:400 17px/1.4 var(--body); color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-input); padding:14px 18px;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-muted)}
.textarea{min-height:120px; resize:vertical}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px; background-size:6px 6px; background-repeat:no-repeat; padding-right:46px}
.check{display:flex; gap:12px; align-items:flex-start; font:400 17px/1.5 var(--body); cursor:pointer; margin-bottom:12px}
.check input{flex:none; width:22px; height:22px; margin:2px 0 0; accent-color:var(--purple-deep)}
.field--error .input{border-color:var(--maroon-deep); border-width:2px}
.err{margin-top:8px; background:var(--maroon-tint); border-left:4px solid var(--maroon-deep);
  border-radius:0 12px 12px 0; padding:12px 16px; font:600 15px/1.5 var(--body)}

/* ============================================================
   Callout
   ============================================================ */
.callout{background:var(--tint,var(--yellow-tint)); border-left:4px solid var(--deep,var(--yellow-deep));
  border-radius:0 var(--r-card) var(--r-card) 0; padding:22px 26px}
.callout__l{font:700 13px/1 var(--body); letter-spacing:1.2px; text-transform:uppercase; color:var(--deep,var(--yellow-deep)); display:block; margin-bottom:8px}

/* ============================================================
   Benefit list (replaces the one-pager's emoji ticks)
   ============================================================ */
.benefit{display:flex; gap:16px; align-items:center; background:var(--tint); border-radius:var(--r-pill); padding:14px 22px 14px 14px}
.benefit__mark{flex:none; width:34px; height:34px; border-radius:50%; background:var(--core); display:grid; place-items:center}
.benefit__mark svg{width:17px; height:17px}

/* ============================================================
   Media card — image on top
   Photo, overlaid badge, tinted body. The workhorse for
   activities, resources and news.
   ============================================================ */
.mcard{
  display:flex; flex-direction:column;
  background:var(--tint,var(--cream)); border-radius:var(--r-card);
  overflow:hidden; height:100%;
}
.mcard--paper{background:var(--paper); border:1px solid var(--hairline)}
.mcard__media{position:relative; aspect-ratio:4/3; overflow:hidden;
  margin:0; padding:0; background:var(--core,var(--green));
  border-radius:var(--r-card) var(--r-card) 0 0}
.mcard__media img{width:100%; height:100%; object-fit:cover; display:block}
.mcard__badge{position:absolute; left:20px; bottom:20px; z-index:2}
.mcard__body{padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:6px}
.mcard__body .t-h3{font-size:clamp(24px,2.6vw,30px); font-weight:800; line-height:1.15; margin-bottom:6px}
.mcard__when{font:700 17px/1.4 var(--body)}
.mcard__time{font:400 17px/1.4 var(--body); color:var(--ink-muted)}
.mcard__desc{margin-top:12px}

/* horizontal variant — resource lists, search results */
.mcard--row{flex-direction:row; align-items:stretch}
.mcard--row .mcard__media{aspect-ratio:auto; flex:0 0 38%; min-height:150px}
.mcard--row .mcard__body{flex:1 1 auto; justify-content:center}
@media(max-width:620px){
  .mcard--row{flex-direction:column}
  .mcard--row .mcard__media{aspect-ratio:16/9; flex:none}
}

/* photo slot placeholder — swap for a real <img>, which sits flush the same way */
.ph{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px}
.ph__l{font:700 12px/1.5 var(--body); letter-spacing:1.2px; text-transform:uppercase; color:var(--ink)}

/* ============================================================
   Page hero — centred, doodle field behind
   L3 put scattered letterforms behind its hero. Here the field
   is scattered NAMES, tone-on-tone in cream. On-theme, and it
   stays a texture rather than a picture.
   ============================================================ */
.phero{position:relative; overflow:hidden; background:var(--cream); text-align:center}
.phero__field{position:absolute; inset:0; z-index:0; pointer-events:none;
  color:#F0EAE0; font:400 clamp(30px,4vw,46px)/1 var(--display); user-select:none}
.phero__field span{position:absolute; white-space:nowrap; font-family:var(--names)}
.phero__inner{position:relative; z-index:1; padding-block:clamp(56px,8vw,96px)}
.phero__lede{max-width:56ch; margin:20px auto 0}
.phero__mark{display:block; margin:18px auto 0}

/* ============================================================
   Underline mark — short line under centred headings.
   Two paths available: WAVE (default, symmetric, calm) and
   KINK (hand-drawn, closer to the L3 original). Same class,
   same stroke; only the path `d` differs.
   Subordinate accent — the cloud stays the signature, this is
   punctuation, and it is small enough that it cannot compete.
   ============================================================ */
.squiggle{display:block; width:clamp(84px,9vw,116px); height:auto; overflow:visible}
.squiggle path{fill:none; stroke:var(--squiggle,var(--purple)); stroke-width:5.5;
  stroke-linecap:round; stroke-linejoin:round}

/* ============================================================
   Split section — copy one side, media the other
   ============================================================ */
.split{display:grid; gap:clamp(28px,5vw,64px); align-items:center; grid-template-columns:1fr}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__copy{order:2}
  .split--flip .split__media{order:1}
}
.split__media{position:relative; aspect-ratio:1/1; border-radius:var(--r-card);
  overflow:hidden; background:var(--core,var(--green))}
.split__media img{width:100%; height:100%; object-fit:cover; display:block}
.split__copy .t-h2{margin:10px 0 18px}

/* ============================================================
   Stats band on a photo
   Scrim is MANDATORY — see the note in the kit.
   ============================================================ */
.photoband{position:relative; border-radius:var(--r-card); overflow:hidden;
  background:var(--ink); isolation:isolate}
.photoband__img{position:absolute; inset:0; z-index:0}
.photoband__img img{width:100%; height:100%; object-fit:cover}
/* Scrim raised from .78 to .88. The 78% figure was calculated against
   the old near-black ink; the new ink is navy #274563, and at 78% the
   yellow labels fell to 4.07:1 over a white photo. At 88%: white 7.0:1,
   yellow 5.4:1, meta 5.7:1 — worst case, so the photo can still be
   swapped without re-testing. */
.photoband__scrim{position:absolute; inset:0; z-index:1; background:var(--ink); opacity:.88}
.photoband__inner{position:relative; z-index:2; padding:clamp(36px,6vw,68px) clamp(24px,4vw,48px)}
.photoband .stat__n{color:#fff}
.photoband .stat__l{color:var(--yellow)}
.photoband .t-meta{color:rgba(255,255,255,.86)}

/* ============================================================
   Person card — instructors, authors, psychologists
   ============================================================ */
.person{text-align:center}
.person__photo{position:relative; aspect-ratio:1/1; border-radius:var(--r-card);
  overflow:hidden; background:var(--core,var(--sky-tint)); margin-bottom:18px}
.person__photo img{width:100%; height:100%; object-fit:cover; display:block}
.person__name{font:800 22px/1.25 var(--body); color:var(--purple-deep)}
.person__role{font:400 16px/1.4 var(--body); color:var(--ink); margin-top:4px}
.person__cta{margin-top:16px}

/* ============================================================
   Band-straddle — white above, cream below, element crossing
   the seam. Gradient hard-stop, not overlapping DOM sections:
   survives content reflow, negative margins do not.
   ============================================================ */
.straddle{background:linear-gradient(to bottom, var(--paper) 0 50%, var(--cream) 50% 100%);
  padding-block:clamp(28px,4vw,48px)}
.straddle > *{max-width:86%; margin-inline:auto}
@media(max-width:700px){.straddle > *{max-width:100%}}