/* ==========================================================================
   Patterns and Perspective — Stylesheet (light theme)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=Baloo+2:wght@600;700;800&family=Caveat:wght@500;600;700&family=Kalam:wght@400;700&family=Permanent+Marker&family=Space+Mono:wght@400;700&family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Archivo+Black&family=Archivo:wght@500;600;700;800&display=swap');

:root {
  /* Color — Pattern & Perspective bold palette (beige retired) */
  --bg: #FFFFFF;
  --bg-soft: #F5F5F8;
  --ink: #1A1720;
  --ink-soft: #58525F;
  --rust: #C1552C;
  --rust-deep: #963F1D;
  --indigo: #453D72;
  --gold: #C99A2E;
  --line: rgba(26, 23, 32, 0.12);

  /* Bold accent family — used across the editorial + creative worlds */
  --coral: #FF6B52;
  --coral-deep: #E14B33;
  --turquoise: #1AA6A0;
  --turquoise-deep: #0F7D78;
  --sunflower: #FFC93C;
  --plum: #6C4AB6;
  --plum-deep: #523690;
  --pink: #FF6FA0;

  /* Type — the editorial family is the site default; other "worlds"
     (Doodles, My Mind My World, Parent Perspectives, Little/Teen
     Perspectives) lock their own further down. */
  --display: 'Fraunces', 'Space Grotesk', serif;
  --sans: 'Work Sans', -apple-system, sans-serif;

  /* Layout */
  --max-w: 720px;
  --max-w-wide: 960px;
  --pad: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--ink); }

a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover, a:focus-visible { border-bottom-color: var(--rust); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

img { max-width: 100%; display: block; }

/* Pattern motif divider */
.motif { display: flex; align-items: center; gap: 6px; margin: 48px 0; }
.motif::before, .motif::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.motif-marks { display: flex; gap: 5px; }
.motif-marks span { width: 5px; height: 5px; background: var(--rust); transform: rotate(45deg); display: inline-block; }
.motif-marks span:nth-child(2) { background: var(--indigo); }
.motif-marks span:nth-child(3) { background: var(--gold); }

/* Header / Nav */
.site-header { padding: 28px var(--pad) 20px; border-bottom: 1px solid var(--line); }
.site-header-inner {
  max-width: var(--max-w-wide); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px 28px;
}
.site-title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  color: var(--ink); border-bottom: none;
}
.site-title:hover { border-bottom: none; }
.site-nav { font-family: var(--sans); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 18px 22px; }
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rust); }

/* Layout helpers */
main { max-width: var(--max-w); margin: 0 auto; padding: 56px var(--pad) 40px; }
main.wide { max-width: var(--max-w-wide); }

.eyebrow { font-family: var(--sans); font-size: 0.82rem; color: var(--rust); margin: 0 0 10px; font-weight: 600; }

h1 {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.15; margin: 0 0 8px; font-weight: 700;
}
h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; margin: 0 0 14px; }

.dek { color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; margin: 0 0 8px; }
p { margin: 0 0 20px; }
.meta { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }

blockquote {
  border-left: 3px solid var(--rust);
  margin: 32px 0; padding: 4px 0 4px 22px;
  color: var(--ink-soft); font-size: 1.05rem;
}
blockquote cite { display: block; margin-top: 10px; font-style: italic; font-size: 0.9rem; }

/* Hero / home */
.hero { padding: 64px var(--pad) 40px; max-width: var(--max-w-wide); margin: 0 auto; }
.hero h1 { max-width: 16ch; }
.hero .dek { font-size: 1.15rem; max-width: 55ch; }

.section-grid {
  max-width: var(--max-w-wide); margin: 0 auto; padding: 0 var(--pad) 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
}
.tile {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-soft);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--rust); transform: translateY(-2px); }
.tile-label { font-family: var(--sans); font-size: 0.8rem; color: var(--rust); font-weight: 600; }
.tile h3 { font-family: var(--display); font-size: 1.25rem; margin: 0; font-weight: 700; color: var(--ink); }
.tile p { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.tile-link { font-family: var(--sans); font-size: 0.88rem; margin-top: auto; padding-top: 6px; font-weight: 600; }

.tile.little-perspectives { border-color: var(--lp-red); background: #FFFDF8; }
.tile.little-perspectives .tile-label { color: var(--lp-red); }
.tile.little-perspectives:hover { border-color: var(--lp-red); }

/* Post list + article */
.post-list { display: flex; flex-direction: column; }
.post-item { padding: 28px 0; border-bottom: 1px solid var(--line); }
.post-item:first-child { padding-top: 0; }
.post-item h2 { font-size: 1.35rem; margin-bottom: 6px; }
.post-item .meta { margin-bottom: 10px; }
.post-item .excerpt { color: var(--ink-soft); }
.read-more { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; }

article.post h1 { margin-bottom: 6px; }
article.post .meta { margin-bottom: 32px; }
article.post p { max-width: 68ch; }
.img-placeholder {
  border: 1px dashed var(--line); background: var(--bg-soft);
  padding: 40px 20px; text-align: center; font-family: var(--sans);
  font-size: 0.85rem; color: var(--ink-soft); margin: 28px 0;
}
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 28px 0; background: var(--bg-soft); border: 1px solid var(--line); }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.back-link { font-family: var(--sans); font-size: 0.88rem; display: inline-block; margin-bottom: 32px; font-weight: 600; }

/* Little Perspectives — kid theme */
body.lp-page {
  --lp-red: #E8543F; --lp-yellow: #F4B942; --lp-blue: #3E8FD1; --lp-green: #4CAF7D;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    repeating-linear-gradient(180deg, var(--lp-red) 0 40px, var(--lp-yellow) 40px 80px, var(--lp-blue) 80px 120px, var(--lp-green) 120px 160px) 0 0 / 10px 100% no-repeat;
  background-position: left top, left top;
}
body.lp-page main { padding-left: calc(var(--pad) + 14px); }
body.lp-page h1, body.lp-page h2, body.lp-page .site-title { font-family: 'Baloo 2', var(--display); }
body.lp-page .eyebrow { color: var(--lp-red); }
body.lp-page .site-nav a[aria-current="page"] { border-bottom-color: var(--lp-red); }
body.lp-page .tile-link, body.lp-page .read-more, body.lp-page a { color: var(--lp-blue); }
body.lp-page a:hover { border-bottom-color: var(--lp-blue); }

.crayon-row { display: flex; gap: 8px; margin-bottom: 28px; }
.crayon { width: 28px; height: 10px; border-radius: 5px; }
.crayon.c1 { background: #E8543F; } .crayon.c2 { background: #F4B942; }
.crayon.c3 { background: #3E8FD1; } .crayon.c4 { background: #4CAF7D; }
.crayon.c5 { background: #A15FD1; }

.lp-callout {
  border: 2px dashed #3E8FD1; border-radius: 8px;
  padding: 22px 24px; margin: 32px 0; font-size: 0.97rem; background: #F5FAFF;
}
.lp-callout strong { color: #3E8FD1; }

.age-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 28px 0;
}
.age-card {
  border: 2px solid var(--line); border-radius: 10px; padding: 20px;
}
.age-card h3 { font-family: 'Baloo 2'; margin: 0 0 8px; font-size: 1.1rem; }
.age-card p { font-size: 0.9rem; margin: 0; color: var(--ink-soft); }
.age-card.younger { border-color: #E8543F; background: #FFF6F4; }
.age-card.older { border-color: #3E8FD1; background: #F5FAFF; }
body.teen-page .age-card.older { border-color: #1B6E68; background: #F2F8F7; }

body.lp-page a.teen-button {
  color: #fff !important;
}
a.teen-button {
  display: inline-block; margin: 8px 0 36px; padding: 12px 22px;
  border-radius: 8px; background: #3E8FD1; color: #fff; font-weight: 600;
  border-bottom: none; font-family: 'Baloo 2';
}
.teen-button:hover { background: #2E76B0; border-bottom: none; }

/* Teen Perspective theme */
body.teen-page { --teen: #1B6E68; }
body.teen-page h1, body.teen-page h2, body.teen-page .site-title { font-family: 'Space Grotesk', sans-serif; }
body.teen-page .eyebrow { color: var(--teen); }
body.teen-page .site-nav a[aria-current="page"] { border-bottom-color: var(--teen); }
body.teen-page a { color: var(--teen); }
body.teen-page a:hover { border-bottom-color: var(--teen); }
.teen-callout {
  border-left: 3px solid #1B6E68; padding: 20px 22px; margin: 32px 0;
  background: #F2F8F7; font-size: 0.95rem;
}
.teen-callout strong { color: #1B6E68; }
body.teen-page a.back-to-lp {
  color: #fff !important;
}
.back-to-lp {
  display: inline-block; margin: 8px 0 36px; padding: 10px 20px;
  border-radius: 6px; background: #1B6E68; color: #fff; font-weight: 600; border-bottom: none;
}
.back-to-lp:hover { background: #145550; border-bottom: none; }

/* Books */
.book-card {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.book-cover {
  width: 100%; aspect-ratio: 2/3; background: var(--bg-soft);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); text-align: center; padding: 8px;
}
.book-status { font-family: var(--sans); font-size: 0.78rem; color: var(--rust); margin-bottom: 8px; display: inline-block; font-weight: 600; }
.buy-link { font-family: var(--sans); font-size: 0.9rem; display: inline-block; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--rust); color: var(--ink); border-radius: 4px; }
.buy-link:hover { background: var(--rust); color: #fff; border-bottom: 1px solid var(--rust); }
.buy-link.disabled { border-color: var(--line); color: var(--ink-soft); pointer-events: none; }
@media (max-width: 520px) { .book-card { grid-template-columns: 100px 1fr; } }

/* About */
.about-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-bottom: 28px; border: 1px solid var(--line); }

/* Legal */
.legal h2 { font-size: 1.1rem; margin-top: 40px; }
.legal p, .legal li { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); }
.legal ul { padding-left: 20px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px var(--pad) 48px; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.site-footer-inner { max-width: var(--max-w-wide); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }

.template-note {
  font-family: var(--sans); font-size: 0.82rem; color: var(--rust-deep);
  border: 1px dashed var(--rust); padding: 10px 14px; margin-bottom: 20px; border-radius: 4px;
}

/* About page contact row */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 4px;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  border-bottom-color: transparent;
}
.contact-link svg { flex-shrink: 0; color: var(--ink); }
.contact-link:hover { color: var(--rust); border-bottom-color: var(--rust); }
.contact-link:hover svg { color: var(--rust); }

/* Prompt image galleries (Little Perspectives / Teen Perspective) */
.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 28px 0 40px;
}
.prompt-card {
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prompt-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.prompt-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.prompt-card-body h3 {
  font-size: 1.05rem;
  margin: 0;
}
body.lp-page .prompt-card-body h3 { font-family: 'Baloo 2'; }
.prompt-card-body .read-more { margin-top: auto; }

/* Parent Perspectives theme */
body.parent-page { --parent: #E2637A; }
body.parent-page h1, body.parent-page h2, body.parent-page .site-title { font-family: 'Lora', serif; font-style: italic; font-weight: 600; }
body.parent-page h1 { font-style: normal; }
body.parent-page .eyebrow { color: var(--parent); }
body.parent-page .site-nav a[aria-current="page"] { border-bottom-color: var(--parent); }
body.parent-page a { color: var(--parent); }
body.parent-page a:hover { border-bottom-color: var(--parent); }
.parent-callout {
  border-left: 3px solid #E2637A; padding: 20px 22px; margin: 32px 0;
  background: #FFF0F2; font-size: 0.95rem;
}
.parent-callout strong { color: #E2637A; }
.prompt-callout {
  border: 1px solid var(--line); padding: 24px 26px; margin: 32px 0 40px;
  background: var(--bg-soft);
}
.prompt-callout .eyebrow { margin-bottom: 6px; }
.prompt-callout h2 { margin-bottom: 10px; }
a.parent-button, a.teen-button {
  color: #fff !important;
}
a.parent-button {
  display: inline-block; margin: 8px 10px 36px 0; padding: 12px 22px;
  border-radius: 8px; background: #E2637A; font-weight: 600;
  border-bottom: none; font-family: 'Baloo 2';
}
a.parent-button:hover { background: #C13F58; border-bottom: none; }
body.parent-page a.back-to-lp.parent-back {
  color: #fff !important;
}
.back-to-lp.parent-back { background: #E2637A; }
.back-to-lp.parent-back:hover { background: #C13F58; }

/* Custom subscribe form (replaces HubSpot embed) */
.pp-hp { position: absolute; left: -9999px; top: -9999px; }

.subscribe-form {
  max-width: 440px;
  margin: 20px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subscribe-form label {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
  display: block;
}
.subscribe-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--ink);
}
.subscribe-form input:focus {
  outline: none;
  border-color: var(--rust);
}
.subscribe-form button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  background: var(--rust);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.subscribe-form button:hover:not(:disabled) { background: var(--rust-deep); }
.subscribe-form button:disabled { opacity: 0.7; cursor: default; }
.subscribe-message {
  font-family: var(--sans);
  font-size: 0.88rem;
  min-height: 1.2em;
}
.subscribe-message.success { color: #2E7D4F; }
.subscribe-message.error { color: var(--rust-deep); }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; padding: 0;
  border-bottom: 1px solid transparent;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--ink); border-bottom-color: var(--rust); }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 10px;
  background: var(--bg); border: 1px solid var(--line); min-width: 190px;
  padding: 8px 0; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 9px 16px; font-size: 0.9rem; color: var(--ink-soft); border-bottom: none;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }

/* Share Your Perspective form section */
.share-perspective {
  border: 1px solid var(--line); background: var(--bg-soft);
  padding: 32px 28px; margin: 48px 0 16px;
}
.share-perspective h2 { margin-bottom: 6px; }
.share-perspective select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--sans); font-size: 0.95rem; background: var(--bg); color: var(--ink);
}

/* Downloadable prompt images */
.prompt-download {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft);
  display: inline-block; margin-top: 6px; border-bottom: 1px dotted var(--ink-soft);
}
.prompt-download:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Coming soon library box */
.library-coming-soon {
  border: 1px dashed var(--line); padding: 22px 24px; margin: 36px 0;
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); text-align: center;
}
.library-coming-soon strong { color: var(--ink); display: block; margin-bottom: 4px; font-family: var(--display); font-size: 1.05rem; }
.library-coming-soon a { border-bottom: none; }
.library-coming-soon a strong { color: var(--rust); transition: color 0.15s ease; }
.library-coming-soon a:hover strong { color: var(--rust-deep); text-decoration: underline; }
body.teen-page .library-coming-soon a strong { color: #1B6E68; }
body.teen-page .library-coming-soon a:hover strong { color: #145550; }

/* Resource-hub / feature CTA buttons */
a.learnplay-button, a.learnstudy-button, a.understand-button, a.library-button {
  display: inline-block; margin: 8px 10px 20px 0; padding: 12px 22px;
  border-radius: 8px; color: #fff !important; font-weight: 600;
  border-bottom: none; font-family: 'Baloo 2';
}
a.learnplay-button { background: #4A9B6E; }
a.learnplay-button:hover { background: #3B7D58; border-bottom: none; }
a.learnstudy-button { background: #7A2331; }
a.learnstudy-button:hover { background: #5E1A26; border-bottom: none; }
a.understand-button { background: #6B2D5C; }
a.understand-button:hover { background: #4F2144; border-bottom: none; }
a.library-button { background: #E8543F; }
a.library-button:hover { background: #C43F2C; border-bottom: none; }
body.teen-page a.library-button { background: #96690E; }
body.teen-page a.library-button:hover { background: #7A5610; }
body.parent-page a.library-button { background: #2F6B5E; }
body.parent-page a.library-button:hover { background: #234F45; }

/* Teen topic tag chips */
.topic-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 32px; }
.topic-tag {
  font-family: var(--sans); font-size: 0.85rem; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 20px; color: var(--ink-soft);
}
body.teen-page .topic-tag { border-color: #1B6E68; color: #1B6E68; }
body.lp-page .topic-tag { border-color: #E8543F; color: #E8543F; }
body.parent-page .topic-tag { border-color: var(--parent); color: var(--parent); }
a.topic-tag { border-bottom: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
body.lp-page a.topic-tag:hover { background: #E8543F; color: #fff; }
body.teen-page a.topic-tag:hover { background: #1B6E68; color: #fff; }
body.parent-page a.topic-tag:hover { background: var(--parent); color: #fff; }

/* Expandable topic/category sections — used for library categories and
   grouped prompts, so long lists don't turn into endless scrolling */
.topic-details { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; overflow: hidden; scroll-margin-top: 20px; }
.topic-details summary {
  cursor: pointer; list-style: none; padding: 18px 22px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--display); font-size: 1.1rem; color: var(--ink);
}
.topic-details summary::-webkit-details-marker { display: none; }
.topic-details summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.3rem; color: var(--rust); flex-shrink: 0;
}
.topic-details[open] summary::after { content: "−"; }
body.teen-page .topic-details summary::after { color: var(--teen); }
body.parent-page .topic-details summary::after { color: var(--parent); }
body.lp-page .topic-details summary::after { color: #E8543F; }
.topic-details-count {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; white-space: nowrap;
}
.topic-details-body { padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.topic-details-intro { color: var(--ink-soft); font-size: 0.95rem; max-width: 68ch; margin: 18px 0 20px; }

.cta-button { display: inline-block; margin-top: 12px; padding: 14px 28px; background: var(--rust); color: #fff; border-radius: 4px; font-family: var(--sans); font-weight: 600; border-bottom: none; }
.cta-button:hover { background: var(--rust-deep); border-bottom: none; }
.cta-button-outline { display: inline-block; margin-top: 12px; padding: 13px 26px; background: transparent; color: var(--rust); border: 1px solid var(--rust); border-radius: 4px; font-family: var(--sans); font-weight: 600; }
.cta-button-outline:hover { background: var(--rust); color: #fff; border-bottom: 1px solid var(--rust); }

.service-hub-box {
  max-width: 960px; margin: 0 auto 48px; padding: 40px var(--pad);
  border: 1px solid var(--line); background: var(--bg-soft); text-align: center;
}
.service-hub-box h2 { margin-bottom: 10px; }
.service-hub-box .dek { margin-left: auto; margin-right: auto; }
.service-hub-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

.subscribe-form .consent-row {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 4px;
}
.subscribe-form .consent-row input[type="checkbox"] {
  width: auto; margin-top: 3px; flex-shrink: 0;
}
.subscribe-form .consent-row label {
  margin-bottom: 0; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer;
}
.subscribe-form .consent-intro {
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin: 4px 0 0;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* -------------------------------------------------------------------------
   Cookie consent banner
   ------------------------------------------------------------------------- */

#cookie-consent-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 640px;
  z-index: 999;
  background: var(--ink);
  color: var(--bg);
  padding: 18px 22px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  font-family: var(--sans);
  font-size: 0.9rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

#cookie-consent-banner p {
  margin: 0;
  max-width: 60ch;
  text-align: center;
}

#cookie-consent-banner a {
  color: var(--gold);
}
#cookie-consent-banner a:hover {
  border-bottom-color: var(--gold);
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
}

.cookie-consent-actions button {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}

#cookie-consent-accept {
  background: var(--rust);
  color: #fff;
}
#cookie-consent-accept:hover { background: var(--rust-deep); }

#cookie-consent-decline {
  background: transparent;
  color: var(--bg);
  border-color: rgba(255,255,255,0.4);
}
#cookie-consent-decline:hover { border-color: #fff; }

@media (max-width: 560px) {
  #cookie-consent-banner { width: calc(100% - 32px); padding: 16px 18px; }
}

/* ==========================================================================
   Perspectives — visual personality system
   Signature abstract shapes, editorial pull-quotes and handwritten
   annotations for Little / Teen / Parent Perspectives. Decorative only:
   pointer-events:none, negative z-index, never affects layout, forms
   or navigation. Scoped to .lp-page / .teen-page / .parent-page.
   ========================================================================== */

body.lp-page main,
body.teen-page main,
body.parent-page main { position: relative; }

.pp-shape {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  display: block;
}
.pp-shape.shape-a { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
.pp-shape.shape-b { border-radius: 58% 42% 38% 62% / 62% 40% 60% 38%; }
.pp-shape.shape-c { border-radius: 30% 70% 55% 45% / 55% 35% 65% 45%; }
.pp-shape.shape-d { border-radius: 65% 35% 42% 58% / 40% 62% 38% 60%; }

.pp-shape.size-sm { width: 64px; height: 64px; }
.pp-shape.size-md { width: 130px; height: 130px; }
.pp-shape.size-lg { width: 240px; height: 240px; }
.pp-shape.size-xl { width: 340px; height: 340px; }

/* Little Perspectives palette */
.pp-shape.lp-a { background: var(--lp-red, #E8543F); opacity: 0.14; }
.pp-shape.lp-b { background: var(--lp-yellow, #F4B942); opacity: 0.20; }
.pp-shape.lp-c { background: var(--lp-blue, #3E8FD1); opacity: 0.13; }
.pp-shape.lp-d { background: var(--lp-green, #4CAF7D); opacity: 0.16; }

/* Teen Perspectives palette */
.pp-shape.teen-a { background: var(--teen, #1B6E68); opacity: 0.09; }
.pp-shape.teen-b { background: var(--gold); opacity: 0.15; }
.pp-shape.teen-c { background: var(--indigo); opacity: 0.08; }

/* Parent Perspectives palette — kept quiet and few */
.pp-shape.parent-a { background: var(--parent, #E2637A); opacity: 0.20; }
.pp-shape.parent-b { background: var(--sunflower); opacity: 0.22; }
.pp-shape.parent-c { background: var(--plum); opacity: 0.12; }

@media (max-width: 720px) {
  .pp-shape.size-xl { width: 200px; height: 200px; }
  .pp-shape.size-lg { width: 150px; height: 150px; }
  .pp-shape.size-md { width: 90px; height: 90px; }
  .pp-shape.shape-tuck { display: none; } /* smaller decorative extras drop off first on mobile */
}

/* Hand-drawn doodle icons (LP only) — stroke-based, inherits currentColor */
.lp-doodle {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Handwritten annotation — small, occasional, never a whole sentence of copy */
.pp-note {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  display: inline-block;
  transform: rotate(-3deg);
}
body.lp-page .pp-note { color: var(--lp-red, #E8543F); }
body.teen-page .pp-note { color: var(--gold); }
body.parent-page .pp-note { color: var(--parent, #E2637A); }

/* Editorial pull-quote — one per page, used sparingly */
.pp-pullquote {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.35;
  max-width: 34ch;
  margin: 44px 0 44px;
  padding-left: 6px;
}
.pp-pullquote::before {
  content: '“';
  position: absolute;
  left: -0.02em;
  top: 0.28em;
  font-family: Georgia, serif;
  font-size: 2.8em;
  line-height: 0;
  opacity: 0.15;
}
body.lp-page .pp-pullquote::before { color: var(--lp-red); }
body.teen-page .pp-pullquote::before { color: var(--teen); }
body.parent-page .pp-pullquote::before { color: var(--parent); }
body.teen-page .pp-pullquote { font-size: clamp(1.5rem, 4.5vw, 2.3rem); max-width: 30ch; }

/* Little Perspectives — hero personality */
body.lp-page .lp-hero-wrap { position: relative; padding-top: 4px; }
body.lp-page .lp-hero-wrap h1 { position: relative; z-index: 1; max-width: 18ch; }

/* Teen Perspectives — bolder, editorial, slightly oversized eyebrow */
body.teen-page .eyebrow {
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.teen-page h1 { max-width: 15ch; }
body.teen-page .prompt-callout {
  position: relative;
  border-left: 3px solid var(--teen);
  background: #F2F8F7;
}

/* Parent Perspectives — calm, a single quiet accent, nothing more */
body.parent-page h1 { max-width: 17ch; }

/* ==========================================================================
   Site-wide editorial design system (Home, About, Deep Dives, My Mind My
   World, Doodles, Books, Service Hub). Same shape language as Perspectives,
   restrained palette drawn from the core brand colors.
   ========================================================================== */

.pp-relative { position: relative; }

/* Core shape palette — rust / indigo / gold, kept quiet on professional pages */
.pp-shape.core-a { background: var(--rust); opacity: 0.08; }
.pp-shape.core-b { background: var(--indigo); opacity: 0.07; }
.pp-shape.core-c { background: var(--gold); opacity: 0.15; }

/* Default pull-quote mark color outside the Perspectives sections */
.pp-pullquote::before { color: var(--rust); }

/* Featured content block — Deep Dives' featured essay */
.pp-feature {
  position: relative;
  border-left: 3px solid var(--rust);
  padding: 6px 0 6px 26px;
  margin: 10px 0 40px;
}
.pp-feature .feature-label {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust);
  margin-bottom: 8px; display: block;
}
.pp-feature h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 10px; }
.pp-feature .post-item { border-bottom: none; padding: 0; }

/* Home / About / Deep Dives — section tiles get one quiet accent each,
   so the "chapters of the same publication" read without extra copy */
.tile.deep-dives { border-top: 3px solid var(--turquoise); }
.tile.mymind { border-top: 3px solid var(--pink); }
.tile.doodles-tile { border-top: 3px solid var(--sunflower); }
.tile.books-tile { border-top: 3px solid var(--plum); }

/* Personal / creative touches — My Mind My World, Doodles, Books */
.pp-ink-mark { display: inline-block; margin: 4px 0 20px; }
.pp-ink-mark svg { display: block; }

.pp-tape {
  position: absolute;
  width: 88px; height: 28px;
  background: rgba(201, 154, 46, 0.32);
  box-shadow: 0 2px 5px rgba(0,0,0,0.07);
  pointer-events: none;
  z-index: 0;
}

.post-item.pp-latest .feature-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--rust); display: block; margin-bottom: 6px;
}

/* Books — a literary drop cap on the opening excerpt paragraph */
.pp-dropcap:first-letter {
  font-family: var(--display); font-size: 3.1em; float: left; line-height: 0.82;
  padding: 5px 7px 0 0; color: var(--rust-deep);
}

/* Service Hub — a quiet accent bar identifies each major service family */
.service-group > h2 { position: relative; padding-left: 18px; }
.service-group > h2::before {
  content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em;
  width: 4px; background: var(--rust); border-radius: 2px;
}

@media (max-width: 720px) {
  .pp-tape { transform-origin: center; }
}

/* ==========================================================================
   PATTERN & PERSPECTIVE — complete visual world reset
   Bold colour fields, an expanded shape library, per-section typographic
   "worlds" (Editorial / Artistic / Diary / Parent), recurring pattern
   motifs, and restrained motion. Beige retired as a primary surface.
   ========================================================================== */

/* ---- Bold colour fields — full-bleed bands behind a hero, one per page ---- */
.pp-field {
  position: relative;
  margin: -1px calc(var(--pad) * -1) 40px;
  padding: 56px var(--pad) 48px;
  overflow: hidden;
}
main.wide .pp-field { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
.pp-field h1, .pp-field .eyebrow { position: relative; z-index: 1; }
.pp-field .dek { position: relative; z-index: 1; }
.pp-field.on-dark { color: #fff; }
.pp-field.on-dark .eyebrow { color: rgba(255,255,255,0.85); }
.pp-field.on-dark .dek { color: rgba(255,255,255,0.88); }
.pp-field.on-dark h1 { color: #fff; }

.pp-field.field-coral { background: linear-gradient(155deg, var(--coral) 0%, var(--coral-deep) 100%); }
.pp-field.field-turquoise { background: linear-gradient(155deg, var(--turquoise) 0%, var(--turquoise-deep) 100%); }
.pp-field.field-plum { background: linear-gradient(155deg, var(--plum) 0%, var(--plum-deep) 100%); }
.pp-field.field-indigo { background: linear-gradient(155deg, #574B8C 0%, var(--indigo) 100%); }
.pp-field.field-sunflower { background: linear-gradient(155deg, var(--sunflower) 0%, #F2A93C 100%); color: var(--ink); }
.pp-field.field-sunflower .eyebrow { color: rgba(26,23,32,0.65); }
.pp-field.field-pink { background: linear-gradient(155deg, var(--pink) 0%, #E14F86 100%); }
.pp-field.field-paper { background: linear-gradient(155deg, #F3ECE0 0%, #E8DCC8 100%); color: var(--ink); }
.pp-field.field-paper .eyebrow { color: var(--plum); }

@media (max-width: 720px) {
  .pp-field { padding: 42px var(--pad) 36px; }
}

/* ---- Expanded shape library — more variety than a single blob type ---- */
.pp-shape.shape-e { border-radius: 55% 45% 70% 30% / 30% 60% 40% 70%; }
.pp-shape.shape-f { border-radius: 20% 80% 45% 55% / 60% 35% 65% 40%; }

/* A soft asymmetric ribbon — rotated rounded bar, not a generic pill */
.pp-shape.ribbon {
  border-radius: 999px 40% 999px 40%;
}

/* Paint splash — small irregular cluster, used on Doodles / Diary */
.pp-splash {
  position: absolute; pointer-events: none; z-index: 0;
}
.pp-splash span {
  position: absolute; border-radius: 50%;
}

/* On-field shapes get more presence than the quiet editorial ones */
.pp-field .pp-shape { opacity: 0.9; }
.pp-field .pp-shape.tint-light { background: rgba(255,255,255,0.16); }
.pp-field .pp-shape.tint-dark { background: rgba(26,23,32,0.14); }
.pp-field .pp-shape.tint-sunflower { background: rgba(255,201,60,0.55); }
.pp-field .pp-shape.tint-coral { background: rgba(255,107,82,0.55); }
.pp-field .pp-shape.tint-pink { background: rgba(255,111,160,0.55); }
.pp-field .pp-shape.tint-plum { background: rgba(108,74,182,0.5); }

/* ---- Recurring pattern motifs — dots / stripes, used sparingly ---- */
.pp-pattern-dots {
  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}
.pp-pattern-stripes {
  background-image: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 14px);
}

/* ---- Restrained motion — a pleasant surprise, not everywhere ---- */
@keyframes pp-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.pp-float { animation: pp-drift 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pp-float { animation: none; }
}

/* ==========================================================================
   ARTISTIC WORLD — Doodles — paper, brush marks, and paint
   ========================================================================== */
body.doodle-page {
  --doodle-paper: #EDE6D8;
  --doodle-paper-deep: #E2D8C4;
  --doodle-ink: #262220;
  --doodle-teal: #1E9E93;
  --doodle-teal-deep: #16766D;
  --doodle-yellow: #F0B429;
  --doodle-pink: #F2708C;
  --doodle-pink-deep: #DB4F6E;
  --doodle-strip: #DED3BC;
  background-color: var(--doodle-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--doodle-ink);
}
body.doodle-page main { padding-top: 44px; }
body.doodle-page h1, body.doodle-page .site-title {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
}
body.doodle-page h2 { font-family: 'Fraunces', serif; font-weight: 700; }
body.doodle-page .eyebrow { color: var(--doodle-teal-deep); font-family: 'Kalam', cursive; font-size: 1.05rem; }
body.doodle-page a { color: var(--doodle-teal-deep); }
body.doodle-page a:hover { border-bottom-color: var(--doodle-teal-deep); }
body.doodle-page .site-nav a[aria-current="page"] { border-bottom-color: var(--doodle-yellow); }
body.doodle-page .dek, body.doodle-page p { color: #4A4238; }
body.doodle-page .motif::before, body.doodle-page .motif::after { background: rgba(38,34,32,0.15); }

.doodle-wordmark {
  font-size: clamp(3rem, 13vw, 5.8rem);
  line-height: 0.85;
  transform: rotate(-1.2deg);
  display: inline-block;
  margin: 0 0 6px;
}
.doodle-underline { display: block; margin: -6px 0 18px -4px; }
.doodle-subtitle {
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.35;
  color: var(--doodle-ink);
  margin: 0 0 20px;
  max-width: 26ch;
}

.pp-brush-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 26px;
  color: var(--doodle-ink);
  border-bottom: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s ease;
}
.pp-brush-btn:hover { transform: translateY(-2px); border-bottom: none !important; }
.pp-brush-btn.brush-teal { background: var(--doodle-teal); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; color: #10231F; }
.pp-brush-btn.brush-pink { background: var(--doodle-pink); border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px; color: #3A0B16; }

.doodle-steps {
  background: var(--doodle-strip);
  border-radius: 22px;
  padding: 30px 28px;
  margin: 40px 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.doodle-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 130px; }
.doodle-step svg { stroke: var(--doodle-ink); }
.doodle-step span { font-family: 'Baloo 2', cursive; font-weight: 700; font-style: italic; font-size: 0.95rem; line-height: 1.3; }
.doodle-arrow { opacity: 0.55; flex-shrink: 0; }
@media (max-width: 640px) { .doodle-arrow { transform: rotate(90deg); } }

.doodle-section-heading { position: relative; display: inline-block; margin-bottom: 4px; }
.doodle-squiggle { display: block; margin: -4px 0 24px 2px; }

.doodle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin: 0 0 48px;
}
.doodle-card { position: relative; }
.doodle-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--doodle-paper-deep);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(38,34,32,0.35);
  border: 1px dashed rgba(38,34,32,0.25);
}
.doodle-tape {
  position: absolute;
  top: -12px;
  width: 66px;
  height: 24px;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.14);
  opacity: 0.88;
  z-index: 1;
}
.doodle-tape.tape-blue { background: #8FB8E0; left: 14px; transform: rotate(-7deg); }
.doodle-tape.tape-yellow { background: var(--doodle-yellow); left: 40%; transform: rotate(4deg); }
.doodle-tape.tape-teal { background: var(--doodle-teal); right: 16px; transform: rotate(6deg); }
.doodle-tape.tape-pink { background: var(--doodle-pink); right: 30%; transform: rotate(-5deg); }
.doodle-card h3 { font-family: 'Fraunces', serif; font-size: 1.1rem; margin: 16px 0 3px; font-weight: 600; }
.doodle-card .doodle-prompt { font-family: var(--sans); font-size: 0.85rem; color: #6B6155; margin: 0 0 8px; }
.doodle-card .view-guide { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 640px) {
  body.doodle-page main { padding-top: 30px; }
}

.pp-sticker {
  display: inline-block;
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 4px 14px 4px 14px;
  transform: rotate(-4deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.pp-sticker.sticker-coral { background: var(--coral); color: #fff; }
.pp-sticker.sticker-turquoise { background: var(--turquoise); color: #fff; }
.pp-sticker.sticker-sunflower { background: var(--sunflower); color: var(--ink); }

/* ==========================================================================
   DIARY WORLD — My Mind, My World
   ========================================================================== */
body.diary-page h1, body.diary-page .site-title {
  font-family: 'Kalam', cursive;
  font-weight: 700;
}
body.diary-page h2 { font-family: 'Kalam', cursive; font-weight: 700; }
body.diary-page .eyebrow {
  font-family: 'Space Mono', monospace; color: var(--pink);
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em;
}
body.diary-page .meta { font-family: 'Space Mono', monospace; font-size: 0.78rem; }
body.diary-page a { color: var(--turquoise-deep); }
body.diary-page a:hover { border-bottom-color: var(--turquoise-deep); }
body.diary-page .site-nav a[aria-current="page"] { border-bottom-color: var(--pink); }

body.diary-page .post-item {
  position: relative;
}
body.diary-page .post-item.pp-latest {
  background: #FFF7FA;
  border: 1px solid rgba(255,111,160,0.35);
  border-radius: 4px 16px 4px 16px;
  padding: 20px 22px;
  margin-bottom: 8px;
}
body.diary-page .post-item.pp-latest .feature-label {
  font-family: 'Space Mono', monospace; color: var(--pink);
}
body.diary-page .post-item h2 a { text-decoration-color: var(--pink); }
body.diary-page .excerpt { position: relative; display: inline-block; }
body.diary-page .post-item.pp-latest .excerpt {
  background: linear-gradient(transparent 60%, rgba(255,201,60,0.45) 60%);
  padding: 0 2px;
}

/* ---- Diary entry pages (the individual rants) — written on a notebook ---- */
body.diary-page {
  background: linear-gradient(180deg, #FFF8FB 0%, #FFF2F7 100%);
}
body.diary-page .back-link { color: var(--pink); font-family: 'Space Mono', monospace; font-size: 0.82rem; }
body.diary-page .back-link:hover { border-bottom-color: var(--pink); }

body.diary-page article.post {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 46px, rgba(226,99,122,0.35) 46px 47px, transparent 47px)
    ,repeating-linear-gradient(
      180deg,
      #fff 0,
      #fff 35px,
      #E8E2EC 35px 36px
    );
  border-radius: 4px 22px 4px 22px;
  box-shadow: 0 10px 26px rgba(90, 60, 90, 0.12);
  padding: 40px 34px 34px 62px;
  margin-bottom: 8px;
}
body.diary-page article.post::before {
  content: '';
  position: absolute;
  left: 20px; top: 30px; bottom: 30px;
  width: 6px;
  background-image: radial-gradient(circle, #D9D2C8 3px, transparent 3.5px);
  background-size: 100% 30px;
  background-repeat: repeat-y;
  opacity: 0.8;
}
body.diary-page article.post h1 { margin-bottom: 4px; }
body.diary-page article.post .meta { margin-bottom: 24px; }
body.diary-page article.post p {
  font-family: 'Kalam', cursive;
  font-size: 1.14rem;
  line-height: 1.7;
  color: #3A3040;
  max-width: 66ch;
}
@media (max-width: 640px) {
  body.diary-page article.post { padding: 32px 22px 28px 46px; }
  body.diary-page article.post::before { left: 12px; }
}

/* ==========================================================================
   PARENT PERSPECTIVES — brighter, warmer, more editorial than before
   ========================================================================== */
body.parent-page .prompt-callout { border: none; background: #FFF0F2; }

/* ==========================================================================
   LITTLE / TEEN / PARENT PERSPECTIVES — STRONG REDESIGN PASS
   A much bigger visual swing than the first attempt: colourful full-page
   backgrounds (no more white/beige canvas), bolder hero colour fields,
   more shapes and illustrated icons, and — for Teen — a completely new
   typographic identity. Rules here are intentionally later in the
   cascade so they take over from the quieter first-pass rules above.
   ========================================================================== */

/* ---- Little Perspectives: premium, bright, playful ---- */
body.lp-page {
  background: #FFFBF3;
}
body.lp-page main { padding-left: var(--pad); }
body.lp-page h1 { font-size: clamp(2rem, 5.5vw, 2.8rem); }

.lp-wave-band {
  position: relative;
  margin: -1px calc(var(--pad) * -1) 40px;
  padding: 46px var(--pad) 50px;
  overflow: hidden;
  background-color: #E9DFF7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='140' viewBox='0 0 320 140'%3E%3Cpath d='M0 70 Q80 20 160 70 T320 70 V140 H0 Z' fill='%23C9B3EE' fill-opacity='0.55'/%3E%3Cpath d='M0 100 Q80 55 160 100 T320 100 V140 H0 Z' fill='%23B79CE6' fill-opacity='0.45'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 320px 140px;
  background-position: left bottom;
  border-radius: 0 0 32px 32px;
}
.lp-island {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 26px;
  padding: 34px 30px;
  box-shadow: 0 14px 30px rgba(90, 60, 130, 0.14);
}
.lp-island .eyebrow { color: var(--lp-red); }
.lp-script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--lp-blue);
  font-size: 1.25em;
  display: inline-block;
  transform: rotate(-3deg);
  padding: 0 2px;
}

.lp-wedge {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.lp-tag-pill {
  position: absolute;
  z-index: 3;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 7px 15px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  white-space: nowrap;
}
.lp-tag-pill.pill-red { background: var(--lp-red); }
.lp-tag-pill.pill-blue { background: var(--lp-blue); }
.lp-tag-pill.pill-green { background: var(--lp-green); }
.lp-tag-pill.pill-purple { background: #A15FD1; }
@media (max-width: 640px) { .lp-tag-pill.hide-mobile { display: none; } }

/* Icon-row accordion — City-Kids-style expandable value rows */
.lp-value-list { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.lp-value-row {
  border: none; border-radius: 16px; background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  overflow: hidden;
}
.lp-value-row summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
}
.lp-value-row summary::-webkit-details-marker { display: none; }
.lp-value-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-value-row summary h3 { margin: 0; flex: 1; font-family: 'Baloo 2'; font-size: 1.05rem; }
.lp-value-row summary .lp-expand { font-size: 1.3rem; color: var(--lp-red); font-family: var(--sans); flex-shrink: 0; }
.lp-value-row[open] summary .lp-expand { transform: rotate(45deg); }
.lp-value-row .lp-value-body { padding: 0 20px 20px 76px; font-size: 0.92rem; color: var(--ink-soft); }

/* Colourful photo cards for prompt images */
.lp-story-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px; margin: 24px 0 36px;
}
.lp-story-card {
  position: relative; border-radius: 20px; padding: 16px 16px 18px;
  overflow: visible;
}
.lp-story-card.card-green { background: #DCF2E3; }
.lp-story-card.card-blue { background: #DCEBFB; }
.lp-story-card.card-pink { background: #FBE0EC; }
.lp-story-card .lp-story-photo {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.lp-story-card .lp-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-age-badge {
  display: inline-block; background: rgba(255,255,255,0.85); font-family: 'Baloo 2';
  font-size: 0.72rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  margin-bottom: 6px; color: var(--ink);
}
.lp-story-card h3 { font-family: 'Baloo 2'; font-size: 1.05rem; margin: 0 0 10px; }
.lp-story-star { position: absolute; top: -10px; right: 10px; }

@media (max-width: 640px) {
  .lp-wave-band { padding: 34px var(--pad) 40px; }
  .lp-island { padding: 26px 22px; }
}

.lp-icon { display: inline-block; vertical-align: middle; }
.lp-icon svg { display: block; }

/* ---- Teen Perspectives: a completely new typographic + colour identity ---- */
body.teen-page { --teen: #2D4FD6; --teen-pop: #FFC93C; }
body.teen-page {
  background: linear-gradient(180deg, #F3F6FF 0%, #EFF3FF 100%);
}
body.teen-page h1, body.teen-page .site-title {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  text-transform: none;
  letter-spacing: -0.01em;
}
body.teen-page h2 { font-family: 'Archivo', sans-serif; font-weight: 800; }
body.teen-page .eyebrow {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teen);
}
body.teen-page a { color: var(--teen); }
body.teen-page a:hover { border-bottom-color: var(--teen); }
body.teen-page .site-nav a[aria-current="page"] { border-bottom-color: var(--teen); }
body.teen-page .topic-tag { border-color: var(--teen); color: var(--teen); }
body.teen-page a.topic-tag:hover { background: var(--teen); color: #fff; }
body.teen-page .topic-details summary::after { color: var(--teen); }
body.teen-page .library-coming-soon a strong { color: var(--teen); }
body.teen-page .library-coming-soon a:hover strong { color: #1A38A0; }
body.teen-page .pp-pullquote::before { color: var(--teen); }
body.teen-page h1 { max-width: none; }

.pp-field.field-teen1 { background: linear-gradient(150deg, var(--teen) 0%, #1B3AA8 100%); }
.pp-field.field-teen2 { background: linear-gradient(150deg, #FF5E7A 0%, var(--teen) 100%); }

body.teen-page a.library-button { background: var(--teen); }
body.teen-page a.library-button:hover { background: #1B3AA8; }
body.teen-page .back-to-lp { background: var(--teen); }
body.teen-page .back-to-lp:hover { background: #1B3AA8; }

/* ---- Parents' Perspectives: mature, warm, richly coloured ---- */
body.parent-page {
  background: linear-gradient(180deg, #FFF4EC 0%, #FFF0F0 100%);
}
body.parent-page h1, body.parent-page h2, body.parent-page .site-title {
  font-family: 'Lora', serif; font-style: normal; font-weight: 600;
}
body.parent-page .eyebrow { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--parent); }
.pp-field.field-parent1 { background: linear-gradient(150deg, #D96B3E 0%, var(--parent) 100%); } /* terracotta → pink */
.pp-field.field-parent2 { background: linear-gradient(150deg, #1B7A72 0%, #E8A33D 100%); } /* teal → warm yellow */

/* ---- Shared: illustrated icon strokes, sized for hero use ---- */
.pp-illustration { display: inline-block; vertical-align: middle; }
.pp-illustration svg { display: block; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 720px) {
  body.lp-page .pp-field, body.teen-page .pp-field, body.parent-page .pp-field { padding: 36px var(--pad) 32px; }
}


/* ========================================================================
   2026 ART-DIRECTION PASS — PROFESSIONAL / PERSPECTIVES
   These rules refine the existing site rather than replacing functionality.
   ======================================================================== */

/* ---- Professional / editorial world: white + black + hot pink/purple ---- */
body.editorial-page {
  --editorial-pink: #E62A8A;
  --editorial-purple: #8B4DE8;
  --editorial-black: #111111;
  --editorial-paper: #FFFFFF;
  background: var(--editorial-paper);
  color: var(--editorial-black);
}
body.editorial-page .site-header {
  border-bottom-color: rgba(17,17,17,.18);
  background: #fff;
}
body.editorial-page .site-title,
body.editorial-page h1,
body.editorial-page h2,
body.editorial-page h3 { color: var(--editorial-black); }
body.editorial-page .site-title { font-family: 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
body.editorial-page h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 900; letter-spacing: -.035em; }
body.editorial-page h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
body.editorial-page .eyebrow,
body.editorial-page .feature-label,
body.editorial-page .tile-label { color: var(--editorial-pink); }
body.editorial-page a { color: var(--editorial-pink); }
body.editorial-page a:hover { border-bottom-color: var(--editorial-pink); }
body.editorial-page .site-nav a[aria-current="page"] { border-bottom-color: var(--editorial-pink); }

/* Magazine-like hero: the colour is an accent, not a coloured rectangle. */
body.editorial-page .pp-field {
  margin-top: -1px;
  background: #fff !important;
  color: var(--editorial-black) !important;
  border-top: 1px solid rgba(17,17,17,.18);
  border-bottom: 1px solid rgba(17,17,17,.18);
  min-height: 360px;
  padding: clamp(54px,8vw,92px) clamp(24px,6vw,72px) clamp(48px,7vw,72px);
  overflow: hidden;
  isolation: isolate;
}
body.editorial-page .pp-field::before {
  content: '';
  position: absolute;
  width: min(38vw, 360px);
  height: min(38vw, 360px);
  right: -80px;
  top: -110px;
  background: var(--editorial-pink);
  border-radius: 50% 44% 58% 42% / 46% 56% 44% 54%;
  transform: rotate(12deg);
  z-index: -1;
  opacity: .88;
}
body.editorial-page .pp-field::after {
  content: '';
  position: absolute;
  width: 42%;
  height: 10px;
  left: -2%;
  bottom: 30px;
  background: var(--editorial-purple);
  transform: rotate(-2deg);
  z-index: -1;
}
body.editorial-page .pp-field.on-dark h1,
body.editorial-page .pp-field.on-dark .dek,
body.editorial-page .pp-field.on-dark .eyebrow { color: var(--editorial-black) !important; }
body.editorial-page .pp-field .eyebrow {
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
  font-weight: 700;
}
body.editorial-page .pp-field h1 {
  font-size: clamp(2.8rem, 8vw, 6rem) !important;
  line-height: .96;
  max-width: 11ch;
}
body.editorial-page .pp-field .dek {
  color: #3E3942 !important;
  max-width: 62ch;
}
body.editorial-page .pp-field .pp-shape { opacity: .18 !important; }
body.editorial-page .pp-field .tint-light { background: var(--editorial-purple) !important; }
body.editorial-page .pp-field .tint-sunflower,
body.editorial-page .pp-field .tint-coral,
body.editorial-page .pp-field .tint-pink { background: var(--editorial-pink) !important; }

/* Home: editorial publication rather than a conventional landing page. */
body.editorial-page .hero { max-width: none; padding: 0; }
body.editorial-page .hero .pp-field { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; }
body.editorial-page .service-hub-box {
  border: 0;
  border-top: 1px solid rgba(17,17,17,.18);
  border-bottom: 1px solid rgba(17,17,17,.18);
  background: #fff;
  text-align: left;
  padding: 52px var(--pad);
  position: relative;
}
body.editorial-page .service-hub-box::after {
  content: '01'; position: absolute; right: 24px; top: 44px;
  font-family: 'Fraunces',serif; font-size: 5rem; line-height: 1; font-weight: 900;
  color: rgba(230,42,138,.13);
}
body.editorial-page .section-grid { grid-template-columns: repeat(12, 1fr); gap: 0; padding-bottom: 72px; }
body.editorial-page .tile {
  border: 0; border-top: 1px solid rgba(17,17,17,.18); border-radius: 0;
  background: #fff; padding: 34px 26px 38px; min-height: 220px;
}
body.editorial-page .tile:nth-child(1) { grid-column: span 7; }
body.editorial-page .tile:nth-child(2) { grid-column: span 5; }
body.editorial-page .tile:nth-child(3) { grid-column: span 5; }
body.editorial-page .tile:nth-child(4) { grid-column: span 7; }
body.editorial-page .tile:nth-child(5) { grid-column: span 12; }
body.editorial-page .tile:hover { transform: none; border-color: rgba(17,17,17,.18); }
body.editorial-page .tile h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
body.editorial-page .tile p { max-width: 46ch; }
body.editorial-page .tile-link { font-weight: 700; }
body.editorial-page .pp-subscribe-form { max-width: 620px; }

/* Professional forms: magazine/editorial paper, not SaaS cards. */
body.editorial-page .subscribe-form,
body.parent-page .subscribe-form {
  background: #fff;
  border-top: 3px solid var(--editorial-pink, #E62A8A);
  padding: 28px 0 0;
}
body.editorial-page .subscribe-form input,
body.editorial-page .subscribe-form select,
body.editorial-page .subscribe-form textarea,
body.parent-page .subscribe-form input,
body.parent-page .subscribe-form select,
body.parent-page .subscribe-form textarea {
  border: 1px solid rgba(17,17,17,.28) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111 !important;
}
body.editorial-page .subscribe-form input:focus,
body.editorial-page .subscribe-form select:focus,
body.editorial-page .subscribe-form textarea:focus,
body.parent-page .subscribe-form input:focus,
body.parent-page .subscribe-form select:focus,
body.parent-page .subscribe-form textarea:focus { border-color: var(--editorial-pink, #E62A8A) !important; }
body.editorial-page .subscribe-form button,
body.parent-page .subscribe-form button {
  background: #111 !important; color: #fff; border-radius: 0; padding: 13px 24px;
}
body.editorial-page .subscribe-form button:hover,
body.parent-page .subscribe-form button:hover { background: var(--editorial-pink, #E62A8A) !important; }

/* ---- Little Perspectives: full-bleed lilac field + paper panel ---- */
body.lp-page { background: #fff; }
body.lp-page .lp-wave-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  border-radius: 0;
  min-height: 520px;
  padding: 70px clamp(24px, 7vw, 90px) 74px;
  background-color: #DCD0F5;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(255,107,82,.72) 0 42px, transparent 43px),
    radial-gradient(circle at 88% 22%, rgba(76,175,125,.72) 0 34px, transparent 35px),
    linear-gradient(155deg, transparent 0 54%, rgba(181,154,230,.52) 54% 72%, transparent 72%);
}
body.lp-page .lp-island {
  max-width: 820px;
  margin: 0 auto;
  border-radius: 4px 24px 4px 24px;
  padding: clamp(32px,5vw,60px);
  box-shadow: 0 18px 38px rgba(67,45,105,.16);
  border: 1px solid rgba(44,30,70,.08);
}
body.lp-page .lp-island h1 { font-size: clamp(2.2rem,5.5vw,4rem); line-height: 1; }
body.lp-page .lp-island .dek { font-size: 1rem; }
body.lp-page .lp-tag-pill { padding: 9px 18px; font-size: .78rem; box-shadow: 0 5px 12px rgba(50,30,80,.12); }
body.lp-page .lp-topic-heading { margin-top: 36px; }
body.lp-page .lp-browse-heading { margin-top: 26px; }
body.lp-page .lp-picture-month { margin: 0 0 22px; }
body.lp-page .lp-feature-topic {
  display: inline-block; margin: 0 0 10px; font-family: 'Baloo 2', cursive;
  color: #5D3BA6; font-size: 1.1rem; font-weight: 800;
}
body.lp-page .lp-topic-buttons { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 34px; }
body.lp-page .lp-topic-button {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(62,143,209,.22);
  border-radius: 14px; padding: 14px 18px; font-family: 'Baloo 2',cursive; font-weight: 700;
  box-shadow: 0 3px 10px rgba(40,50,80,.05);
}
body.lp-page .lp-value-list { margin-top: 12px; }
body.lp-page .lp-value-row { border: 1px solid rgba(62,143,209,.18); border-radius: 14px; }

/* ---- Teen Perspectives: contemporary youth editorial ---- */
body.teen-page { background: #fff; --teen-pink: #E62A8A; --teen-purple: #7B43D6; --teen-yellow: #FFD43B; --teen-blue: #2D4FD6; }
body.teen-page .pp-field.field-teen1 {
  background: #fff !important; color: #111 !important; border-bottom: 1px solid #111;
  min-height: 430px; display: flex; flex-direction: column; justify-content: center; isolation: isolate;
}
body.teen-page .pp-field.field-teen1::before {
  content:''; position:absolute; right:-80px; top:-100px; width:340px; height:340px;
  background: var(--teen-pink); border-radius: 46% 54% 62% 38% / 54% 38% 62% 46%; transform: rotate(14deg); z-index:-1;
}
body.teen-page .pp-field.field-teen1::after {
  content:''; position:absolute; left:-30px; bottom:28px; width:240px; height:22px;
  background: var(--teen-yellow); transform: rotate(-7deg); z-index:-1;
}
body.teen-page .pp-field.field-teen1 h1,
body.teen-page .pp-field.field-teen1 .dek,
body.teen-page .pp-field.field-teen1 .eyebrow { color:#111 !important; }
body.teen-page .pp-field.field-teen1 h1 { font-family:'Archivo Black','Archivo',sans-serif; font-size:clamp(3rem,8vw,6.4rem) !important; line-height:.88; max-width:12ch; letter-spacing:-.045em; }
body.teen-page .pp-field.field-teen1 .eyebrow { color:var(--teen-pink) !important; }
body.teen-page .pp-field .pp-shape { opacity:.12 !important; }
body.teen-page .teen-editorial-feature {
  display:grid; grid-template-columns: 1fr minmax(230px, 330px); gap:28px; align-items:stretch;
  margin: -24px 0 46px; position:relative; z-index:4;
}
body.teen-page .teen-feature-copy {
  background:#111; color:#fff; padding:30px; min-height:240px; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
}
body.teen-page .teen-feature-kicker { font-family:'Archivo',sans-serif; font-size:.72rem; letter-spacing:.12em; font-weight:800; color:var(--teen-yellow); position:absolute; top:24px; left:28px; }
body.teen-page .teen-feature-number { font-family:'Archivo Black',sans-serif; font-size:5rem; line-height:1; color:var(--teen-pink); position:absolute; right:22px; top:18px; }
body.teen-page .teen-feature-copy p { font-family:'Archivo',sans-serif; font-size:clamp(1.4rem,3vw,2.3rem); line-height:1.05; max-width:12ch; margin:0; }
body.teen-page .teen-feature-art { background:var(--teen-purple); padding:18px; transform:rotate(2deg); }
body.teen-page .teen-feature-art img { width:100%; height:100%; object-fit:cover; object-position:center; background:#fff; }
body.teen-page .topic-tag { border-radius:0; padding:8px 13px; border-color:#111; color:#111; font-family:'Archivo',sans-serif; font-weight:600; }
body.teen-page a.topic-tag:hover { background:#111; color:#fff; }
body.teen-page .prompt-callout { background:#F6F2FF; border-left-color:var(--teen-purple); border-radius:0; }
body.teen-page .teen-callout { border-left-color:var(--teen-pink); background:#FFF2F8; border-radius:0; }

/* ---- Parents' Perspectives: same professional magazine DNA ---- */
body.parent-page { background:#fff; --parent-pink:#E62A8A; --parent-purple:#7B43D6; }
body.parent-page .pp-field.field-parent1 {
  background:#fff !important; color:#111 !important; border-bottom:1px solid #111; isolation:isolate; min-height:380px;
  display:flex; flex-direction:column; justify-content:center;
}
body.parent-page .pp-field.field-parent1::before {
  content:''; position:absolute; right:-90px; top:-90px; width:330px; height:330px;
  background:var(--parent-pink); border-radius:58% 42% 40% 60% / 45% 60% 40% 55%; transform:rotate(10deg); z-index:-1;
}
body.parent-page .pp-field.field-parent1::after {
  content:''; position:absolute; left:-20px; bottom:30px; width:280px; height:14px; background:var(--parent-purple); transform:rotate(-3deg); z-index:-1;
}
body.parent-page .pp-field.field-parent1 h1,
body.parent-page .pp-field.field-parent1 .dek,
body.parent-page .pp-field.field-parent1 .eyebrow { color:#111 !important; }
body.parent-page .pp-field.field-parent1 h1 { font-family:'Fraunces',Georgia,serif; font-size:clamp(2.8rem,7vw,5.2rem) !important; line-height:.98; max-width:13ch; }
body.parent-page .pp-field.field-parent1 .eyebrow { color:var(--parent-pink) !important; }
body.parent-page h2 { font-family:'Fraunces',Georgia,serif; color:#111; }
body.parent-page .topic-tag { border-radius:0; border-color:#111; color:#111; }
body.parent-page .topic-tag:hover { background:#111; color:#fff; }
body.parent-page .prompt-callout,
body.parent-page .parent-callout,
body.parent-page .share-perspective { border-radius:0; background:#fff; border-color:rgba(17,17,17,.2); }
body.parent-page .prompt-callout { border-top:3px solid var(--parent-pink); }
body.parent-page .parent-callout { border-left:3px solid var(--parent-purple); }
body.parent-page .share-perspective { border-top:3px solid var(--parent-pink); }

/* ---- My Mind, My World individual entries: plain old handwritten paper ---- */
body.diary-page article.post {
  background: #FFFDF8 !important;
  border: 1px solid rgba(61,48,38,.16);
  border-radius: 2px 18px 2px 18px;
  box-shadow: 0 10px 24px rgba(60,45,35,.10);
  padding: 42px 42px 40px !important;
}
body.diary-page article.post::before { display:none !important; }
body.diary-page article.post::after {
  content:''; position:absolute; top:18px; right:22px; width:46px; height:12px;
  background:rgba(230,42,138,.20); transform:rotate(3deg);
}
body.diary-page article.post p {
  font-family:'Kalam',cursive !important;
  font-size:1.18rem !important;
  line-height:1.8 !important;
  color:#332B2B !important;
  max-width:68ch;
}
body.diary-page article.post h1 { font-family:'Kalam',cursive; }

@media (max-width: 760px) {
  body.editorial-page .section-grid { grid-template-columns:1fr; }
  body.editorial-page .tile:nth-child(n) { grid-column:span 1; }
  body.teen-page .teen-editorial-feature { grid-template-columns:1fr; margin-top:0; }
  body.teen-page .teen-feature-art { transform:none; max-width:360px; }
  body.lp-page .lp-wave-band { padding-left:20px; padding-right:20px; }
  body.diary-page article.post { padding:34px 24px 30px !important; }
}

/* ========================================================================
   FINAL CONSISTENCY PASS — September 2026
   ======================================================================== */

/* Site-wide: retire the old diamond/line motif. */
.motif { display: none !important; }

/* Shared professional accent: pink replaces rust/mustard for section markers. */
body.editorial-page,
body.parent-page {
  --editorial-pink: #E62A8A;
  --editorial-purple: #8B4DE8;
  --editorial-black: #111111;
}
body.editorial-page .service-group > h2::before,
body.editorial-page .workflow-step .step-num,
body.editorial-page .not-do-box,
body.editorial-page blockquote,
body.parent-page blockquote,
body.editorial-page .pp-pullquote,
body.parent-page .pp-pullquote {
  border-left-color: var(--editorial-pink) !important;
}
body.editorial-page .workflow-step .step-num,
body.editorial-page .feature-label,
body.editorial-page .tile-label,
body.editorial-page .eyebrow,
body.editorial-page .service-group > h2::before {
  color: var(--editorial-pink) !important;
}
body.editorial-page .not-do-box { border-left-color: var(--editorial-pink) !important; }
body.editorial-page .cta-button,
body.editorial-page .cta-button-outline:hover,
body.editorial-page .subscribe-form button,
body.editorial-page .service-hub-ctas a {
  background: #111 !important;
  color: #E62A8A !important;
  border-color: #111 !important;
}
body.editorial-page .cta-button:hover,
body.editorial-page .subscribe-form button:hover { background: #E62A8A !important; color: #111 !important; }
body.editorial-page .cta-button-outline { color: #111 !important; border-color: #111 !important; }
body.editorial-page .cta-button-outline:hover { color: #E62A8A !important; }

/* Deep Dives: the explanatory copy on the white hero must remain readable. */
body.editorial-page .pp-field .dek,
body.editorial-page .pp-field.on-dark .dek,
body.editorial-page .pp-field blockquote,
body.editorial-page .pp-field blockquote cite {
  color: #111 !important;
}

/* My Mind, My World: use the established site pink, with green instead of yellow tape/stickers. */
body.diary-page {
  --diary-pink: #E62A8A;
  --diary-green: #4CAF7D;
}
body.diary-page .pp-field.field-pink { background: #E62A8A !important; }
body.diary-page .pp-tape { background: rgba(76,175,125,.58) !important; }
body.diary-page .pp-sticker.sticker-sunflower { background: var(--diary-green) !important; color: #111 !important; }
body.diary-page .feature-label,
body.diary-page a { color: var(--diary-pink); }

/* Little Perspectives: make the tag labels larger, more playful and slightly irregular. */
body.lp-page .lp-tag-pill {
  padding: 12px 22px !important;
  min-width: 116px;
  text-align: center;
  transform-origin: center;
  font-size: .86rem !important;
}
body.lp-page .lp-tag-pill.pill-blue { transform: rotate(5deg) !important; }
body.lp-page .lp-tag-pill.pill-purple { transform: rotate(-5deg) !important; }
body.lp-page .lp-tag-pill.pill-green { transform: rotate(7deg) !important; }
body.lp-page .lp-topic-heading + .dek { display:none !important; }
body.lp-page .lp-topic-button {
  color: #111 !important;
  font-family: 'Baloo 2', cursive;
}
body.lp-page .lp-topic-button::before {
  content: '♡';
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background: #F8D8E8; color: #E62A8A; font-size: 1.05rem; flex: 0 0 30px;
}
body.lp-page .lp-topic-button:nth-child(2)::before { content:'⌂'; background:#DDF0E5; color:#4CAF7D; }
body.lp-page .lp-topic-button:nth-child(3)::before { content:'↗'; background:#DDF0E5; color:#4CAF7D; }
body.lp-page .lp-topic-button:nth-child(4)::before { content:'✦'; background:#F8D8E8; color:#E62A8A; }
body.lp-page .lp-value-row h3 { font-family:'Baloo 2',cursive; }
body.lp-page .lp-value-row h3 { font-size:1.12rem; }

/* Little Perspectives forms: playful page palette, still clean and readable. */
body.lp-page .subscribe-form {
  background:#fff !important;
  border:2px solid #DCD0F5 !important;
  border-top:5px solid #A15FD1 !important;
  border-radius:14px !important;
  padding:28px !important;
}
body.lp-page .subscribe-form input,
body.lp-page .subscribe-form select,
body.lp-page .subscribe-form textarea {
  border-color:#BDA8E8 !important;
  border-radius:10px !important;
}
body.lp-page .subscribe-form input:focus,
body.lp-page .subscribe-form select:focus,
body.lp-page .subscribe-form textarea:focus { border-color:#A15FD1 !important; }
body.lp-page .subscribe-form button { background:#A15FD1 !important; color:#fff !important; border-radius:10px !important; }
body.lp-page .subscribe-form button:hover { background:#7B43D6 !important; }

/* Teen Perspectives: black/pink/white with restrained yellow, plus cut-paper collage. */
body.teen-page {
  --teen-pink:#E62A8A;
  --teen-yellow:#FFD43B;
  --teen-purple:#7B43D6;
  --teen-black:#111111;
  background:#fff !important;
}
body.teen-page .site-nav a[aria-current="page"] { border-bottom-color:var(--teen-pink) !important; }
body.teen-page a { color:var(--teen-pink); }
body.teen-page .pp-field.field-teen1 {
  background:#fff !important;
  border-bottom:2px solid #111 !important;
  padding-bottom:clamp(70px,9vw,110px) !important;
}
body.teen-page .pp-field.field-teen1::before { background:var(--teen-pink) !important; }
body.teen-page .pp-field.field-teen1::after { background:var(--teen-yellow) !important; height:16px !important; }
body.teen-page .pp-field.field-teen1 .dek { color:#111 !important; }
body.teen-page .teen-editorial-feature { margin-top:-12px !important; }
body.teen-page .teen-feature-copy { background:#111 !important; color:#fff !important; }
body.teen-page .teen-feature-copy p { color:#fff !important; }
body.teen-page .teen-feature-art {
  background:var(--teen-pink) !important;
  padding:14px !important;
  transform:rotate(3deg) !important;
  position:relative;
  clip-path:polygon(3% 0,97% 4%,100% 94%,5% 100%,0 8%);
}
body.teen-page .teen-feature-art::before {
  content:''; position:absolute; inset:8px; background:#fff;
  transform:rotate(-2deg); z-index:-1;
}
body.teen-page .teen-feature-art img {
  clip-path:polygon(2% 3%,98% 0,96% 98%,0 95%);
  border:6px solid #fff;
}
body.teen-page .pp-shape.tint-light { background:#fff !important; }
body.teen-page .pp-shape.tint-coral { background:var(--teen-pink) !important; }
body.teen-page .pp-shape.tint-sunflower { background:var(--teen-yellow) !important; }
body.teen-page .topic-tag { border-color:#111 !important; color:#111 !important; }
body.teen-page a.topic-tag:hover { background:#111 !important; color:#fff !important; }
body.teen-page .prompt-callout {
  background:#111 !important; color:#fff !important; border:0 !important;
  border-left:8px solid var(--teen-pink) !important;
  padding:30px !important;
}
body.teen-page .prompt-callout h2,
body.teen-page .prompt-callout .dek { color:#fff !important; }
body.teen-page .prompt-callout .eyebrow { color:var(--teen-yellow) !important; }
body.teen-page .teen-callout { border-left:5px solid var(--teen-pink) !important; background:#fff !important; color:#111 !important; }
body.teen-page .teen-callout strong { color:var(--teen-pink) !important; }
body.teen-page .subscribe-form { background:#111 !important; border:0 !important; border-top:5px solid var(--teen-pink) !important; border-radius:0 !important; padding:28px !important; color:#fff; }
body.teen-page .subscribe-form label { color:#fff !important; }
body.teen-page .subscribe-form input,
body.teen-page .subscribe-form select,
body.teen-page .subscribe-form textarea { background:#fff !important; color:#111 !important; border:2px solid var(--teen-pink) !important; border-radius:0 !important; }
body.teen-page .subscribe-form button { background:var(--teen-pink) !important; color:#111 !important; border-radius:0 !important; }
body.teen-page .subscribe-form button:hover { background:var(--teen-yellow) !important; }

/* Parents: professional black/white/pink/purple; remove warm/beige influence. */
body.parent-page { background:#fff !important; color:#111 !important; }
body.parent-page .pp-shape.tint-light { background:#fff !important; }
body.parent-page .pp-shape.tint-sunflower { background:var(--parent-pink) !important; }
body.parent-page .pp-field.field-parent1::before { background:var(--parent-pink) !important; }
body.parent-page .pp-field.field-parent1::after { background:var(--parent-purple) !important; }
body.parent-page .parent-callout { border-left-color:var(--parent-pink) !important; background:#fff !important; }
body.parent-page .parent-callout strong { color:var(--parent-pink) !important; }
body.parent-page .subscribe-form { border-top-color:var(--parent-pink) !important; }
body.parent-page .subscribe-form button { background:#111 !important; color:var(--parent-pink) !important; }
body.parent-page .subscribe-form button:hover { background:var(--parent-pink) !important; color:#111 !important; }

/* Doodles: keep the art-paper character but remove the warm brown cast. */
body.doodle-page { background:#F7F3EC !important; color:#201C22 !important; }
body.doodle-page .site-header,
body.doodle-page .site-footer { background:#F7F3EC !important; }
body.doodle-page .doodle-section-heading,
body.doodle-page .doodle-wordmark { color:#111 !important; }

/* All themed forms: no generic mustard/rust buttons. */
body.lp-page .subscribe-form button,
body.teen-page .subscribe-form button,
body.parent-page .subscribe-form button,
body.editorial-page .subscribe-form button { font-weight:800; }

/* Remove redundant page-name eyebrow labels where they only repeat navigation. */

/* ========================================================================
   FINAL MOBILE + THEME CONSISTENCY PASS — September 17, 2026
   ======================================================================== */

/* One type system across the site: editorial display + clean body copy.
   Small handwritten annotations remain available where they are part of
   the content treatment, but headings and controls share one hierarchy. */
body,
button,
input,
select,
textarea { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; }
body h1,
body h2,
body h3,
body .site-title,
body .book-status,
body .project-status,
body .resource-card h3,
body .topic-details summary { font-family: 'Fraunces', Georgia, serif !important; }
body .eyebrow,
body .meta,
body .site-nav,
body .dek,
body p,
body li,
body label,
body a,
body button,
body input,
body select,
body textarea { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; }

/* No old mustard/gold/rust section markers in the professional world. */
body.editorial-page .pp-shape.core-a,
body.editorial-page .pp-shape.core-b,
body.editorial-page .pp-shape.core-c { background: var(--editorial-pink, #E62A8A) !important; opacity: .14 !important; }
body.editorial-page .pp-shape.tint-plum { background: #4CAF7D !important; opacity: .22 !important; }
body.editorial-page .pp-shape.tint-coral,
body.editorial-page .pp-shape.tint-sunflower { background: #E62A8A !important; opacity: .24 !important; }
body.editorial-page .pp-field.field-paper { background:#fff !important; color:#111 !important; }
body.editorial-page .pp-field.field-paper .eyebrow { color:#E62A8A !important; }
body.editorial-page .book-status,
body.editorial-page .project-status { color:#E62A8A !important; }

/* Service Hub: every topic introduction line is the same pink. */
body.editorial-page .service-group > h2::before,
body.editorial-page .service-group > h2 { border-left-color:#E62A8A !important; }
body.editorial-page .workflow-step .step-num { color:#E62A8A !important; }

/* Home mobile: give the introduction breathing room from the viewport edge. */
@media (max-width: 720px) {
  body.editorial-page .hero .pp-field {
    padding-left: 36px !important;
    padding-right: 28px !important;
  }
  body.editorial-page .hero .pp-field h1 { max-width: 12ch; }
}

/* ------------------------------------------------------------------------
   LITTLE PERSPECTIVES — pink/green/black system
   ------------------------------------------------------------------------ */
body.lp-page { background:#fff !important; color:#111 !important; }
body.lp-page .pp-shape.lp-a,
body.lp-page .pp-shape.lp-b,
body.lp-page .pp-shape.lp-c,
body.lp-page .pp-shape.lp-d { background:#E62A8A !important; opacity:.16 !important; }
body.lp-page .pp-shape.lp-d { background:#4CAF7D !important; opacity:.18 !important; }
body.lp-page .pp-shape.tint-sunflower,
body.lp-page .pp-shape.tint-coral { background:#E62A8A !important; opacity:.18 !important; }
body.lp-page .pp-shape.tint-light { background:#4CAF7D !important; opacity:.16 !important; }
body.lp-page .lp-wave-band { background-color:#EDE8FB !important; }
body.lp-page .lp-tag-pill.pill-red,
body.lp-page .lp-tag-pill.pill-purple { background:#E62A8A !important; }
body.lp-page .lp-tag-pill.pill-blue,
body.lp-page .lp-tag-pill.pill-green { background:#4CAF7D !important; }
body.lp-page .lp-topic-button { color:#111 !important; }
body.lp-page .lp-topic-button::before,
body.lp-page .lp-topic-button:nth-child(4)::before { background:#F8D8E8 !important; color:#E62A8A !important; }
body.lp-page .lp-topic-button:nth-child(2)::before,
body.lp-page .lp-topic-button:nth-child(3)::before { background:#DDF0E5 !important; color:#4CAF7D !important; }

/* Little topic/resource/library controls: black + yellow, with pink hover. */
body.lp-page a.learnplay-button,
body.lp-page a.library-button,
body.lp-page a.teen-button,
body.lp-page .back-to-lp,
body.lp-page .resource-link {
  background:#111 !important;
  color:#FFD43B !important;
  border-color:#111 !important;
}
body.lp-page a.learnplay-button:hover,
body.lp-page a.library-button:hover,
body.lp-page a.teen-button:hover,
body.lp-page .back-to-lp:hover,
body.lp-page .resource-link:hover {
  background:#E62A8A !important;
  color:#111 !important;
  border-bottom-color:#E62A8A !important;
}
body.lp-page .topic-details,
body.lp-page .resource-card,
body.lp-page .lp-callout { border-color:rgba(76,175,125,.35) !important; }
body.lp-page .topic-details summary::after { color:#E62A8A !important; }
body.lp-page .topic-details-body { border-top-color:rgba(76,175,125,.25) !important; }

/* ------------------------------------------------------------------------
   TEEN PERSPECTIVES — black / pink / white + restrained yellow
   ------------------------------------------------------------------------ */
body.teen-page { background:#fff !important; color:#111 !important; }
body.teen-page .pp-shape.tint-light { background:#4CAF7D !important; opacity:.18 !important; }
body.teen-page .pp-shape.tint-coral { background:#E62A8A !important; opacity:.24 !important; }
body.teen-page .pp-shape.tint-sunflower { background:#FFD43B !important; opacity:.24 !important; }
body.teen-page .pp-shape.teen-a { background:#4CAF7D !important; opacity:.16 !important; }
body.teen-page .pp-shape.teen-b { background:#E62A8A !important; opacity:.16 !important; }
body.teen-page .pp-shape.teen-c { background:#E62A8A !important; opacity:.10 !important; }
body.teen-page .site-nav a[aria-current="page"] { border-bottom-color:#E62A8A !important; }
body.teen-page .topic-tag { font-family:'Work Sans', sans-serif !important; }

/* All Teen action buttons use the same black/pink/yellow language. */
body.teen-page a.learnstudy-button,
body.teen-page a.understand-button,
body.teen-page a.library-button,
body.teen-page .back-to-lp,
body.teen-page .idu-option,
body.teen-page .idu-back,
body.teen-page .resource-link {
  background:#111 !important;
  color:#E62A8A !important;
  border-color:#111 !important;
}
body.teen-page a.learnstudy-button:hover,
body.teen-page a.understand-button:hover,
body.teen-page a.library-button:hover,
body.teen-page .back-to-lp:hover,
body.teen-page .idu-option:hover,
body.teen-page .idu-back:hover,
body.teen-page .resource-link:hover {
  background:#FFD43B !important;
  color:#111 !important;
  border-bottom-color:#FFD43B !important;
}

/* Teen forms: white and pink, not black. */
body.teen-page .subscribe-form {
  background:#fff !important;
  color:#111 !important;
  border:2px solid #E62A8A !important;
  border-top:7px solid #E62A8A !important;
  border-radius:0 !important;
  padding:28px !important;
  box-shadow:none !important;
}
body.teen-page .subscribe-form label { color:#111 !important; }
body.teen-page .subscribe-form input,
body.teen-page .subscribe-form select,
body.teen-page .subscribe-form textarea {
  background:#fff !important;
  color:#111 !important;
  border:2px solid #E62A8A !important;
  border-radius:0 !important;
}
body.teen-page .subscribe-form button {
  background:#111 !important;
  color:#E62A8A !important;
  border:2px solid #111 !important;
  border-radius:0 !important;
  font-weight:800 !important;
}
body.teen-page .subscribe-form button:hover {
  background:#FFD43B !important;
  color:#111 !important;
}

/* Teen libraries/resources: clean cards, no warm beige. */
body.teen-page .resource-card,
body.teen-page .topic-details {
  background:#fff !important;
  border:1px solid rgba(230,42,138,.30) !important;
  border-radius:0 !important;
}
body.teen-page .topic-details summary::after { color:#E62A8A !important; }
body.teen-page .topic-details-body { border-top-color:rgba(230,42,138,.25) !important; }
body.teen-page .library-coming-soon { background:#111 !important; border-color:#E62A8A !important; color:#fff !important; }
body.teen-page .library-coming-soon strong,
body.teen-page .library-coming-soon a strong { color:#E62A8A !important; }

/* I Didn't Understand This: keep the interaction unmistakably Teen. */
body.teen-page .idu-explain-box,
body.teen-page .idu-resource-card { background:#fff !important; border-color:rgba(230,42,138,.35) !important; }
body.teen-page .idu-explain-box { border-left:6px solid #E62A8A !important; border-radius:0 !important; }
body.teen-page .idu-option { border-radius:0 !important; }

/* ------------------------------------------------------------------------
   PARENT PERSPECTIVES — white + yellow + pink accents
   ------------------------------------------------------------------------ */
body.parent-page { background:#fff !important; color:#111 !important; }
body.parent-page .pp-shape.tint-light { background:#4CAF7D !important; opacity:.17 !important; }
body.parent-page .pp-shape.tint-sunflower { background:#E62A8A !important; opacity:.20 !important; }
body.parent-page .pp-shape.parent-a { background:#E62A8A !important; opacity:.17 !important; }
body.parent-page .pp-shape.parent-b { background:#4CAF7D !important; opacity:.17 !important; }
body.parent-page .pp-shape.parent-c { background:#E62A8A !important; opacity:.10 !important; }
body.parent-page .resource-card,
body.parent-page .topic-details { background:#fff !important; border-color:rgba(76,175,125,.35) !important; border-radius:0 !important; }
body.parent-page .topic-details summary::after { color:#E62A8A !important; }

/* Parent form = white/yellow; action remains black with yellow lettering. */
body.parent-page .subscribe-form {
  background:#fff !important;
  color:#111 !important;
  border:2px solid #FFD43B !important;
  border-top:7px solid #FFD43B !important;
  border-radius:0 !important;
  padding:28px !important;
}
body.parent-page .subscribe-form label { color:#111 !important; }
body.parent-page .subscribe-form input,
body.parent-page .subscribe-form select,
body.parent-page .subscribe-form textarea {
  background:#fff !important;
  color:#111 !important;
  border:2px solid #FFD43B !important;
  border-radius:0 !important;
}
body.parent-page .subscribe-form button {
  background:#111 !important;
  color:#FFD43B !important;
  border:2px solid #111 !important;
  border-radius:0 !important;
  font-weight:800 !important;
}
body.parent-page .subscribe-form button:hover { background:#E62A8A !important; color:#111 !important; }
body.parent-page a.library-button,
body.parent-page .parent-button,
body.parent-page .back-to-lp {
  background:#111 !important; color:#FFD43B !important; border-color:#111 !important;
}
body.parent-page a.library-button:hover,
body.parent-page .parent-button:hover,
body.parent-page .back-to-lp:hover { background:#E62A8A !important; color:#111 !important; }

/* ------------------------------------------------------------------------
   DOODLES — white paper, green/pink/yellow accents; clearer mobile arrows
   ------------------------------------------------------------------------ */
body.doodle-page {
  background:#fff !important;
  color:#201C22 !important;
  --doodle-paper:#fff;
  --doodle-paper-deep:#F5F7F6;
  --doodle-strip:#E7F5F1;
}
body.doodle-page .site-header,
body.doodle-page .site-footer { background:#fff !important; }
body.doodle-page .doodle-wordmark,
body.doodle-page h1,
body.doodle-page h2,
body.doodle-page h3 { font-family:'Fraunces', Georgia, serif !important; color:#111 !important; }
body.doodle-page .doodle-subtitle,
body.doodle-page .doodle-step span { font-family:'Work Sans', sans-serif !important; }
body.doodle-page .doodle-steps {
  background:#E7F5F1 !important;
  border:2px solid rgba(76,175,125,.30) !important;
  border-radius:18px !important;
}
body.doodle-page .doodle-arrow {
  opacity:1 !important;
  stroke:#E62A8A !important;
  stroke-width:2.4 !important;
  width:38px !important;
  height:30px !important;
}
@media (max-width:640px) {
  body.doodle-page .doodle-steps {
    flex-direction:column !important;
    gap:6px !important;
    padding:26px 18px !important;
  }
  body.doodle-page .doodle-step { width:100% !important; }
  body.doodle-page .doodle-arrow {
    transform:rotate(90deg) !important;
    width:42px !important;
    height:32px !important;
    margin:2px 0 !important;
  }
}
body.doodle-page .pp-brush-btn.brush-teal { background:#4CAF7D !important; color:#111 !important; }
body.doodle-page .pp-brush-btn.brush-pink { background:#E62A8A !important; color:#111 !important; }
body.doodle-page .doodle-card-media { background:#F5F7F6 !important; border:1px solid rgba(76,175,125,.25) !important; }
body.doodle-page .doodle-squiggle path,
body.doodle-page .doodle-underline path { stroke:#E62A8A !important; }

/* ------------------------------------------------------------------------
   BOOKS + BOOK PREVIEW — one editorial treatment
   ------------------------------------------------------------------------ */
body.editorial-page .book-card {
  border-bottom:1px solid rgba(17,17,17,.18) !important;
}
body.editorial-page .book-cover {
  background:#F5F7F6 !important;
  border-color:rgba(76,175,125,.28) !important;
}
body.editorial-page .buy-link,
body.editorial-page .back-link {
  border-color:#111 !important;
}
body.editorial-page .buy-link {
  background:#111 !important;
  color:#E62A8A !important;
  border:2px solid #111 !important;
  border-radius:0 !important;
  font-weight:800 !important;
}
body.editorial-page .buy-link:hover { background:#E62A8A !important; color:#111 !important; border-color:#E62A8A !important; }
body.editorial-page .buy-link.disabled { background:#F5F7F6 !important; color:#58525F !important; border-color:#D9E4DF !important; }
body.editorial-page .book-hero img { border-color:rgba(76,175,125,.28) !important; }
body.editorial-page .coming-soon-block {
  background:#fff !important;
  border:2px solid #E62A8A !important;
  border-top:7px solid #E62A8A !important;
}

/* ------------------------------------------------------------------------
   INDEPENDENT PROJECTS — remove remaining mustard labels
   ------------------------------------------------------------------------ */
body.editorial-page .project-card {
  background:#fff !important;
  border:1px solid rgba(17,17,17,.18) !important;
  border-top:4px solid #4CAF7D !important;
}
body.editorial-page .project-status { color:#E62A8A !important; }
body.editorial-page .project-field strong { color:#111 !important; }
body.editorial-page .tool-tag {
  border-color:rgba(230,42,138,.35) !important;
  color:#111 !important;
  border-radius:0 !important;
  background:#fff !important;
}

/* ------------------------------------------------------------------------
   LEARN & PLAY / LEARN, STUDY & EXPLORE / I DIDN'T UNDERSTAND THIS
   ------------------------------------------------------------------------ */
body.lp-page .resource-section h2,
body.teen-page .resource-section h2 { color:#111 !important; }
body.lp-page .resource-card,
body.teen-page .resource-card {
  border-radius:0 !important;
  padding:20px !important;
  box-shadow:none !important;
}
body.lp-page .resource-link,
body.teen-page .resource-link {
  display:inline-block !important;
  padding:10px 14px !important;
  margin-top:4px !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
body.teen-page .resource-link { background:#111 !important; color:#E62A8A !important; }
body.lp-page .resource-link { background:#111 !important; color:#FFD43B !important; }

/* ------------------------------------------------------------------------
   DEEP DIVE ARTICLE TEMPLATE + "THE PATTERN THAT LED ME HERE"
   ------------------------------------------------------------------------ */
body.editorial-page article.post {
  background:#fff !important;
  color:#111 !important;
}
body.editorial-page article.post p { color:#2F2B33 !important; }
body.editorial-page .template-note {
  color:#111 !important;
  border-color:#E62A8A !important;
  background:#fff !important;
  border-left:5px solid #E62A8A !important;
  border-radius:0 !important;
}
body.editorial-page article.post blockquote,
body.editorial-page .pp-pullquote { border-left-color:#E62A8A !important; }
body.editorial-page .read-more,
body.editorial-page .back-link { color:#E62A8A !important; }
body.editorial-page .back-link:hover { border-bottom-color:#E62A8A !important; }

/* Ensure the reusable essay template has the same editorial body class. */


/* ========================================================================
   FINAL USER REQUEST PASS — September 18, 2026
   ======================================================================== */

/* Founder signature: established Pattern & Perspective pink, not the old rust. */
body.editorial-page .pp-note,
body.editorial-page .about-founder .pp-note { color:#E62A8A !important; }

/* Service Hub: the vertical section markers are pink. The original rule used
   rust as a background on the pseudo-element, so border-color alone was not enough. */
body.editorial-page .service-group > h2::before { background:#E62A8A !important; }

/* Little Perspectives: the four additional topics should look like the two
   expandable topic rows above them: white cards, icon circles, label and plus. */
body.lp-page .lp-topic-buttons { gap:12px; }
body.lp-page .lp-topic-button {
  width:100%; min-height:76px; box-sizing:border-box;
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center;
  gap:14px; padding:14px 18px !important;
  background:#fff !important;
  border:1px solid rgba(62,143,209,.18) !important;
  border-radius:14px !important;
  box-shadow:0 3px 10px rgba(40,50,80,.05) !important;
  font-family:'Baloo 2',cursive !important;
  font-size:1.12rem !important; font-weight:700 !important;
  color:#111 !important; text-align:left;
}
body.lp-page .lp-topic-button::before {
  content:'♡' !important;
  width:44px; height:44px; border-radius:50%;
  display:flex !important; align-items:center; justify-content:center;
  background:#FBE0EC !important; color:#E62A8A !important;
  font-family:var(--sans); font-size:1.35rem; line-height:1;
}
body.lp-page .lp-topic-button:nth-child(2)::before {
  content:'⌂' !important; background:#DCF2E3 !important; color:#4CAF7D !important;
}
body.lp-page .lp-topic-button:nth-child(3)::before {
  content:'↗' !important; background:#DCF2E3 !important; color:#4CAF7D !important;
}
body.lp-page .lp-topic-button:nth-child(4)::before {
  content:'✦' !important; background:#FBE0EC !important; color:#E62A8A !important;
}
body.lp-page .lp-topic-button::after {
  content:'+' !important;
  font-family:var(--sans); font-size:1.5rem; font-weight:500;
  color:#E8543F; line-height:1; justify-self:end;
}
body.lp-page .lp-topic-button:hover {
  border-color:rgba(230,42,138,.35) !important; transform:translateY(-1px);
}

/* Doodles: make the process arrows unambiguous on mobile. */
body.doodle-page .doodle-steps {
  display:flex; align-items:center; justify-content:center; gap:22px;
}
body.doodle-page .doodle-arrow {
  display:block !important; width:44px !important; height:30px !important;
  opacity:1 !important; stroke:#E62A8A !important; flex:0 0 auto;
}
@media (max-width:640px) {
  body.doodle-page .doodle-steps {
    flex-direction:column !important; gap:12px !important; padding:26px 18px !important;
  }
  body.doodle-page .doodle-step { width:150px !important; }
  body.doodle-page .doodle-arrow {
    width:38px !important; height:34px !important;
    transform:rotate(90deg) !important; margin:0 !important;
  }
}

/* Remove the accidental literal text above the Teen Perspectives 01 card. */
body.teen-page .teen-editorial-feature { margin-top:-12px !important; }

/* Parent Perspectives Library: same current black/white/pink/purple editorial
   language as Parent Perspectives, not the retired teal/yellow gradient. */
body.parent-page .pp-field.field-parent2 {
  position:relative; overflow:hidden;
  background:#fff !important; color:#111 !important;
  border-bottom:2px solid #111;
  min-height:380px; padding:72px var(--pad) 72px !important;
  display:flex; flex-direction:column; justify-content:center; isolation:isolate;
}
body.parent-page .pp-field.field-parent2::before {
  content:''; position:absolute; right:-90px; top:-90px;
  width:330px; height:330px; background:#E62A8A;
  border-radius:58% 42% 40% 60% / 45% 60% 40% 55%; transform:rotate(10deg); z-index:-1;
}
body.parent-page .pp-field.field-parent2::after {
  content:''; position:absolute; left:-20px; bottom:30px;
  width:280px; height:14px; background:#7B43D6; transform:rotate(-3deg); z-index:-1;
}
body.parent-page .pp-field.field-parent2 > .pp-shape { display:none !important; }
body.parent-page .pp-field.field-parent2 .parent-back {
  align-self:flex-start; background:#111 !important; color:#E62A8A !important;
  border:0 !important; border-radius:0 !important; padding:14px 22px !important;
  margin-bottom:30px;
}
body.parent-page .pp-field.field-parent2 .eyebrow,
body.parent-page .pp-field.field-parent2 h1 { color:#111 !important; }
body.parent-page .pp-field.field-parent2 .eyebrow { color:#E62A8A !important; }
body.parent-page .pp-field.field-parent2 h1 {
  font-family:'Fraunces',Georgia,serif; font-style:normal;
  font-size:clamp(2.8rem,7vw,5.2rem) !important; line-height:.98; max-width:13ch;
}
@media (max-width:640px) {
  body.parent-page .pp-field.field-parent2 { padding:44px 20px 52px !important; min-height:420px; }
  body.parent-page .pp-field.field-parent2::before { right:-135px; top:-90px; width:280px; height:280px; }
  body.parent-page .pp-field.field-parent2::after { left:-40px; bottom:24px; width:210px; }
}


/* ------------------------------------------------------------------------
   FINAL TARGETED FIXES — September 18, 2026
   Desktop-only homepage alignment: leave mobile positioning untouched.
   ------------------------------------------------------------------------ */
@media (min-width: 761px) {
  body.editorial-page .service-hub-box {
    text-align: center;
  }
  body.editorial-page .service-hub-box .eyebrow,
  body.editorial-page .service-hub-box h2,
  body.editorial-page .service-hub-box .dek {
    margin-left: auto;
    margin-right: auto;
  }
  body.editorial-page .service-hub-box h2 {
    max-width: 24ch;
  }
  body.editorial-page .service-hub-box .dek {
    max-width: 62ch;
  }
}

/* Desktop-only Teen hero spacing. */
@media (min-width: 761px) {
  body.teen-page .pp-field.field-teen1 h1 {
    margin-bottom: 30px !important;
  }
}

/* Little Perspectives topic buttons should all have the same lift/elevation
   as the first two expandable topic rows. */
body.lp-page .lp-topic-button {
  box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
}

/* Distinguish the two Little Perspectives forms while keeping the same family. */
body.lp-page form[name="little-perspectives-submission"] {
  border-color: #DCD0F5 !important;
  border-top-color: #A15FD1 !important;
}
body.lp-page form[name="little-perspectives-submission"] input,
body.lp-page form[name="little-perspectives-submission"] select,
body.lp-page form[name="little-perspectives-submission"] textarea {
  border-color: #BDA8E8 !important;
}
body.lp-page form[name="share-your-perspective"] {
  border-color: #DDF0E5 !important;
  border-top-color: #4CAF7D !important;
}
body.lp-page form[name="share-your-perspective"] input,
body.lp-page form[name="share-your-perspective"] select,
body.lp-page form[name="share-your-perspective"] textarea {
  border-color: #9FD2B5 !important;
}
body.lp-page form[name="share-your-perspective"] input:focus,
body.lp-page form[name="share-your-perspective"] select:focus,
body.lp-page form[name="share-your-perspective"] textarea:focus {
  border-color: #4CAF7D !important;
}
body.lp-page form[name="share-your-perspective"] button {
  background: #111 !important;
  color: #4CAF7D !important;
}

/* Distinguish the two Teen Perspectives forms: pink submission, purple sharing. */
body.teen-page form[name="teen-essay-submission"] {
  border-color: #E62A8A !important;
  border-top-color: #E62A8A !important;
}
body.teen-page form[name="teen-essay-submission"] input,
body.teen-page form[name="teen-essay-submission"] select,
body.teen-page form[name="teen-essay-submission"] textarea {
  border-color: #E62A8A !important;
}
body.teen-page form[name="share-your-perspective"] {
  border-color: #7B43D6 !important;
  border-top-color: #7B43D6 !important;
}
body.teen-page form[name="share-your-perspective"] input,
body.teen-page form[name="share-your-perspective"] select,
body.teen-page form[name="share-your-perspective"] textarea {
  border-color: #B9A1E7 !important;
}
body.teen-page form[name="share-your-perspective"] input:focus,
body.teen-page form[name="share-your-perspective"] select:focus,
body.teen-page form[name="share-your-perspective"] textarea:focus {
  border-color: #7B43D6 !important;
}
body.teen-page form[name="share-your-perspective"] button {
  background: #111 !important;
  color: #E62A8A !important;
}

/* My Mind, My World — mobile only: highlight the words, not the full line box. */
@media (max-width: 760px) {
  body.diary-page .post-item.pp-latest .excerpt {
    display: inline !important;
    padding: 0 2px !important;
    background: linear-gradient(transparent 55%, rgba(255,201,60,0.45) 55%) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* Little Perspectives — mobile only: reveal all three playful hashtag pills. */
@media (max-width: 640px) {
  body.lp-page .lp-tag-pill.hide-mobile {
    display: inline-block !important;
  }
  body.lp-page .lp-tag-pill.pill-blue {
    top: 10px !important;
    left: 6% !important;
    transform: rotate(-5deg) !important;
  }
  body.lp-page .lp-tag-pill.pill-purple {
    top: 10px !important;
    right: 5% !important;
    transform: rotate(5deg) !important;
  }
  body.lp-page .lp-tag-pill.pill-green {
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(4deg) !important;
  }
}

/* Doodles — robust text arrows: desktop uses →, mobile uses ↓. */
.doodle-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 34px !important;
  color: #E62A8A !important;
  font-family: Arial, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}
@media (max-width: 640px) {
  .doodle-arrow {
    width: 34px !important;
    height: 34px !important;
    font-size: 2rem !important;
  }
  .doodle-arrow::before { content: '↓'; }
  .doodle-arrow { font-size: 0 !important; }
}

/* Teen Perspectives sub-pages (e.g. the Library): same white/pink/yellow hero as the
   main Teen Perspectives page, with a headline sized for a longer sentence. */
body.teen-page .pp-field.field-teen1.field-teen-sub { min-height: 0; justify-content: flex-start; }
body.teen-page .pp-field.field-teen1.field-teen-sub h1 {
  font-size: clamp(2.1rem, 6.5vw, 3.6rem) !important;
  line-height: .95; max-width: 18ch;
}
body.teen-page .pp-field.field-teen1.field-teen-sub .eyebrow { color: #111 !important; }


/* Deep Dive Brain Trigger — kept visually separate from the essay. */
.brain-trigger {
  margin: 42px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brain-trigger h2 { margin-bottom: 10px; }
.brain-trigger p { max-width: 68ch; }
.content-note {
  padding: 16px 18px;
  border-left: 3px solid var(--line);
  background: var(--bg-soft);
}
article.post h3 { margin-top: 28px; margin-bottom: 10px; }
article.post ul { max-width: 68ch; padding-left: 1.2rem; }
article.post li { margin-bottom: 8px; }

/* Teen Perspectives prompt library */
.teen-prompt-library { margin-top: 28px; }
.teen-prompt-grid .prompt-card { background: #fff; }
.teen-prompt-grid .prompt-card img { aspect-ratio: 1 / 1; object-fit: cover; }
.teen-prompt-grid .prompt-card-body .eyebrow { margin: 0; font-size: .72rem; line-height: 1.3; }
.teen-prompt-grid .prompt-card-body h3 { line-height: 1.2; }

/* Teen Perspectives topic accordions */
.teen-topic-list { display:flex; flex-direction:column; gap:10px; margin:24px 0 36px; }
.teen-topic-row { border:1px solid rgba(0,0,0,.14); background:#fff; overflow:hidden; }
.teen-topic-row summary { list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:14px; }
.teen-topic-row summary::-webkit-details-marker { display:none; }
.teen-topic-row summary h3 { margin:0; flex:1; font-family:'Work Sans', sans-serif; font-size:1.05rem; }
.teen-topic-row .topic-details-count { font-size:.78rem; opacity:.65; }
.teen-topic-expand { font-size:1.35rem; line-height:1; flex-shrink:0; transition:transform .15s ease; }
.teen-topic-row[open] .teen-topic-expand { transform:rotate(45deg); }
.teen-topic-body { padding:0 18px 20px; }
.teen-topic-prompt-grid { margin:4px 0 0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.teen-topic-empty { margin:4px 0 0; color:var(--ink-soft); }

/* Logo mark beside the site title */
.site-title { display: inline-flex; align-items: center; gap: 10px; }
.site-title-mark { width: 26px; height: 26px; flex-shrink: 0; display: block; }