/* ============================================================
   LUNCHBOX.KIDS — ABOUT
   Loads AFTER styles.css + home.css. Namespaced .ab-* classes
   so it never collides with home.css's .home-about styles.
   ============================================================ */

/* ---- shared section intro (label + headline) ---- */
.ab-section { background: var(--cream); }
.ab-lead {
  max-width: 1120px;
  margin: 0 auto;
}
.ab-eyebrow { margin-bottom: 48px; }

/* =========================================================
   01 · WHY LUNCHBOX EXISTS
   ========================================================= */
.ab-why { padding-top: 88px; padding-bottom: 56px; }
.ab-why .ab-eyebrow { margin-bottom: 48px; }
.ab-why-doodle {
  display: block;
  width: clamp(247px, 22vw, 320px);
  transform: rotate(-7deg);
  margin-top: 8px;
  margin-bottom: -16px;
  pointer-events: none;
}
.ab-why .ab-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px 72px;
  align-items: start;
}
.ab-why h1 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(36px, 7vw, 60px);
  line-height: 1.0;
  letter-spacing: -2px;
  color: var(--navy);
  text-wrap: balance;
}
.ab-why h1 .alt { color: var(--peri-dark); }
.ab-why h1 .up { font-style: normal; }
.ab-accent { font-style: italic; color: var(--peri-dark); }
.ab-why-body .body-copy { font-size: 16px; margin-bottom: 18px; max-width: 50ch; }
.ab-why-body .lead-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 18px;
}
.ab-why-body .body-copy:last-child { margin-bottom: 0; }
.ab-why-body strong { font-weight: 600; color: var(--navy); }
@media (max-width: 920px) {
  .ab-why { padding-top: 88px; padding-bottom: 56px; }
  .ab-why-doodle { display: none; }
  .ab-why .ab-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   02 · MEET HANNAH
   ========================================================= */
.ab-hannah { background: var(--cream); position: relative; overflow: hidden; }
.ab-hannah-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* masthead — headline + lede balanced against the portrait */
.ab-hannah-masthead {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 72px;
  align-items: center;
}
.ab-hannah-intro .ab-eyebrow { margin-bottom: 48px; }
.ab-hannah-intro h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  color: var(--navy);
  margin: 0 0 26px;
  max-width: 18ch;
}
.ab-hannah-intro h2 .alt { color: var(--peri-dark); }
.ab-hannah-intro .ab-lede {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--ink-mid);
  max-width: 42ch;
  margin: 0;
  white-space: pre-line;
}
.ab-portrait-col { justify-self: end; }
.ab-portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  transform: rotate(-1.6deg);
  transition: transform .4s;
}
.ab-portrait:hover { transform: rotate(0); }
.ab-portrait .ab-photo {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(18,52,87,.05) 0 12px, rgba(18,52,87,.02) 12px 24px),
    var(--peri-soft);
  display: grid;
  place-items: center;
  box-shadow: 0 24px 60px -28px rgba(18,52,87,.55), 0 6px 16px -10px rgba(18,52,87,.25);
}
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-photo .ph-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.ab-portrait .circle-stamp {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 116px;
  height: 116px;
  z-index: 3;
  transform: rotate(11deg);
  filter: drop-shadow(0 8px 16px rgba(18,52,87,.22));
  animation: stampFloat 6s ease-in-out infinite;
}
.ab-portrait .circle-stamp svg { width: 100%; height: 100%; display: block; }

/* pull quote — editorial focal divider */
.ab-pullquote {
  position: relative;
  margin: 76px 0 60px;
  padding: 50px 0;
  border-top: 1.5px solid var(--rule-strong);
  border-bottom: 1.5px solid var(--rule-strong);
  text-align: center;
}
.ab-pullquote::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 92px;
  line-height: .4;
  color: var(--peri);
  margin-bottom: 20px;
}
.ab-pullquote blockquote {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -1px;
  color: var(--navy);
}
.ab-pullquote blockquote .alt { color: var(--peri-dark); }
.ab-pq-doodle {
  position: absolute;
  right: -66px;
  top: 40%;
  width: clamp(144px, 15.6vw, 214px);
  opacity: 1;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

/* article — two-column magazine flow */
.ab-hannah-article {
  columns: 2;
  column-gap: 64px;
}
.ab-hannah-article .body-copy {
  margin: 0 0 18px;
  max-width: none;
  break-inside: auto;
  orphans: 3;
  widows: 3;
}
.ab-hannah-article .body-copy:last-child { margin-bottom: 0; }
.ab-hannah-article .body-copy strong { font-weight: 600; color: var(--navy); }

/* stats strip */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1.5px solid var(--rule-strong);
}
.ab-stat:nth-child(1) { text-align: left; }
.ab-stat:nth-child(2) { text-align: center; }
.ab-stat:nth-child(3) { text-align: right; }
.ab-stat .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--peri-dark);
}
.ab-stat .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--ink-mid);
  margin-top: 8px;
  line-height: 1.5;
}
.ab-hannah-doodle {
  position: absolute;
  left: -10px;
  bottom: 40px;
  width: clamp(90px, 9vw, 120px);
  opacity: .5;
  transform: rotate(-8deg);
  pointer-events: none;
}
@media (max-width: 920px) {
  .ab-hannah-masthead { grid-template-columns: 1fr; gap: 36px; }
  .ab-portrait-col { justify-self: start; }
  .ab-portrait { margin: 0 auto; }
  .ab-hannah-article { columns: 1; }
  .ab-pullquote { margin: 56px 0 44px; padding: 38px 0; }
  .ab-pq-doodle { display: none; }
}
@media (max-width: 560px) {
  .ab-stats { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   03 · WHAT LUNCHBOX BELIEVES (NAVY)
   ========================================================= */
.ab-beliefs { background: var(--navy); color: var(--cream); }
.ab-beliefs .sec-head { margin-bottom: 24px; }
.ab-beliefs-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 80px;
  align-items: start;
}

/* left intro panel */
.ab-beliefs-intro { position: sticky; top: 56px; }
.ab-beliefs-intro h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: var(--cream);
  max-width: 14ch;
  margin: 0;
}
.ab-beliefs-intro h2 .alt { color: var(--peri); font-style: italic; }
.ab-beliefs-art {
  margin-top: 40px;
  width: 100%;
  max-width: 340px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}
.ab-art-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(248,244,236,.5);
}

/* right manifesto list */
.ab-belief-list { list-style: none; margin: 0; padding: 0; }
.ab-belief-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid rgba(248,244,236,.16);
  align-items: baseline;
}
.ab-belief-row:first-child { padding-top: 0; border-top: none; }
.ab-belief-row:last-child { padding-bottom: 0; }
.ab-belief-row .b-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--peri);
}
.ab-belief-row h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.6px;
  color: var(--cream);
  margin: 0 0 8px;
}
.ab-belief-row p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(248,244,236,.72);
  max-width: 50ch;
  margin: 0;
}
@media (max-width: 860px) {
  .ab-beliefs-inner { grid-template-columns: 1fr; gap: 44px; }
  .ab-beliefs-intro { position: static; }
  .ab-beliefs-art { max-width: 420px; aspect-ratio: 16 / 9; }
}

/* =========================================================
   04 · WHAT YOU'LL FIND HERE (CREAM)
   ========================================================= */
.ab-find-head {
  max-width: 1120px;
  margin: 0 auto 60px;
  align-items: start;
  position: relative;
}
.ab-find-doodle {
  position: absolute;
  right: 80px;
  bottom: -10px;
  width: clamp(182px, 18vw, 255px);
  transform: rotate(8deg);
  pointer-events: none;
  opacity: .88;
  transition: transform .4s ease;
}
.ab-find-doodle:hover {
  transform: rotate(-2deg) scale(1.04);
}
@media (max-width: 920px) {
  .ab-find-doodle { display: none; }
}
.ab-find-head .ab-eyebrow { margin-bottom: 48px; }
.ab-find h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -1.8px;
  color: var(--navy);
  margin: 0;
}
.ab-find h2 .alt { color: var(--peri-dark); font-style: italic; }
.ab-find-lede {
  font-size: 16px;
  margin: 20px 0 0;
  max-width: 50ch;
  color: var(--ink-mid);
}

/* horizontal image-led index */
.ab-find-index {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.ab-find-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ab-find-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--peri-soft);
  border: 1px solid var(--rule);
  object-fit: cover;
  width: 100%;
  display: block;
  margin-bottom: 22px;
}
.ab-find-thumb--small {
  object-fit: contain;
  background: transparent;
  width: 100%;
  padding: 6%;
}
.ab-find-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.2;
}
.ab-find-card p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
  max-width: 26ch;
}
@media (max-width: 920px) {
  .ab-find-head { grid-template-columns: 1fr; gap: 28px; }
  .ab-find-index { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 520px) {
  .ab-find-index { grid-template-columns: 1fr; }
}

/* =========================================================
   05 · CTA — A CLEARER PLACE TO START (PERIWINKLE)
   ========================================================= */
.ab-cta { background: var(--peri); position: relative; overflow: hidden; }
.ab-cta-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  align-items: center;
}
.ab-cta-text { text-align: left; }
.ab-cta .num-label { color: var(--navy); }
.ab-cta h2 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: var(--navy);
  margin: 0 0 20px;
  max-width: 15ch;
  text-wrap: balance;
}
.ab-cta h2 .alt { color: var(--peri-dark); font-style: italic; }
.ab-cta p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(18,52,87,.82);
  max-width: 46ch;
  margin: 0 0 28px;
}
.ab-cta .cta-form {
  background: rgba(255,255,255,.22);
  border-color: rgba(18,52,87,.16);
}
.ab-cta .cta-form:focus-within { border-color: var(--peri-dark); }
.ab-cta .cta-btn .disc { background: var(--cream); }
.ab-cta .cta-btn:hover .disc { background: var(--mint); }
.ab-cta .form-note {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .3px;
  text-transform: none;
  color: #3a5071b3;
}
.ab-cta .legal-optin {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .3px;
  margin: 0;
  color: #3a5071b3;
}
.ab-cta .formula-cta-form { max-width: 520px; }
.ab-cta .formula-cta-form .form-note,
.ab-cta .formula-cta-form .legal-optin { max-width: none; }
.ab-cta .formula-cta-form .legal-optin span { max-width: none; }


/* freebie cover */
.ab-cta-visual { position: relative; justify-self: center; }
.ab-cta-photo {
  width: clamp(240px, 25vw, 340px);
  display: block;
  border-radius: 18px;
  object-fit: cover;
  transform: rotate(-2deg);
  transition: transform .4s ease;
  box-shadow:
    0 2px 0 rgba(18,52,87,.04),
    0 24px 60px -20px rgba(18,52,87,.22);
}
.ab-cta-photo:hover { transform: rotate(0deg); }

.ab-cta-stamp {
  position: absolute;
  top: -24px;
  right: -30px;
  width: 110px;
  height: 110px;
  pointer-events: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 4px 12px rgba(18,52,87,.12));
}

/* scattered star doodles */
.ab-cta-star {
  position: absolute;
  pointer-events: none;
  opacity: .08;
  z-index: 0;
}
.ab-cta-star--1 {
  width: clamp(48px, 5vw, 72px);
  top: 12%;
  left: 6%;
  transform: rotate(-18deg);
}
.ab-cta-star--2 {
  width: clamp(32px, 3.5vw, 50px);
  bottom: 16%;
  right: 8%;
  transform: rotate(22deg);
}
.ab-cta-star--3 {
  width: clamp(24px, 2.5vw, 38px);
  top: 60%;
  left: 52%;
  transform: rotate(8deg);
}
.ab-guide:hover { transform: rotate(0); }
.ab-guide-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--peri-dark);
}
.ab-guide-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.04;
  letter-spacing: -.8px;
  color: var(--navy);
  margin: 10px 0 0;
}
.ab-guide-art { margin-top: auto; display: grid; place-items: center; }
.ab-guide-art img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  display: block;
}
.ab-free-badge {
  position: absolute;
  top: -18px;
  right: -16px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  letter-spacing: -.5px;
  transform: rotate(12deg);
  box-shadow: 0 12px 26px -12px rgba(18,52,87,.45);
  z-index: 3;
}
.ab-cta-doodle {
  position: absolute;
  left: -36px;
  bottom: 7%;
  width: clamp(68px, 7vw, 92px);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 2;
}
.ab-cta-doodle-bg {
  position: absolute;
  right: 5%;
  top: 14%;
  width: clamp(56px, 6vw, 84px);
  opacity: .35;
  transform: rotate(14deg);
  pointer-events: none;
}
@media (max-width: 1000px) {
  .ab-cta-inner { grid-template-columns: 1fr; gap: 48px; }
  .ab-cta-visual { justify-self: start; }
  .ab-cta-doodle-bg { display: none; }
}
@media (max-width: 640px) {
  .ab-guide { width: 244px; }
}