/* Parenting tips (rebuild, 2026-09-29): a kitchen-table notebook. "Read this first" is a note
   taped down beside the notebook's index tabs; the three strategy lists are recipe cards laid on a
   gingham tablecloth, every tip numbered by hand; apps are cards with a little app tile; podcasts
   carry a sound wave that plays while you look at them; "when to bring in a professional" is a
   calm evening card; related guides stand on the shelf. Scoped to body.p-tips. */

.p-tips main :is(h1, h2, h3) { color: var(--navy); }
.p-tips .container { max-width: 1200px; padding-inline: clamp(16px, 4vw, 40px); }
.p-tips main h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0; }
.p-tips .card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.p-tips .card-actions .btn { white-space: normal; line-height: 1.25; }
.p-tips main a:not(.btn) { text-decoration: none; }

/* ---------- the tablecloth ---------- */
.p-tips .pt-table {
  position: relative;
  padding: clamp(10px, 2vw, 24px) 0 clamp(60px, 7vw, 100px);
}
.p-tips .pt-recipes {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
  padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(36px, 4.4vw, 56px);
  border-radius: var(--r-xl);
  background-color: #fbf6ea;
  background-image:
    repeating-linear-gradient(90deg, rgba(169, 84, 47, .07) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(0deg, rgba(169, 84, 47, .07) 0 22px, transparent 22px 44px);
  box-shadow: inset 0 0 0 1px rgba(169, 84, 47, .12), inset 0 18px 40px -20px rgba(122, 60, 20, .18), var(--shadow);
}

/* ---------- read this first + the notebook's index tabs ---------- */
.p-tips .pt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(22px, 3vw, 40px); align-items: center; margin: 0 0 clamp(34px, 4vw, 52px); }
.p-tips .pt-first {
  position: relative;
  padding: 34px clamp(22px, 3vw, 34px) 28px;
  background: #fbf0cf;
  border-radius: 4px;
  rotate: -1.2deg;
  box-shadow: 0 20px 30px -22px rgba(60, 40, 10, .55);
}
.p-tips .pt-first h2 { font: 400 calc(34px * .9)/1 var(--f-hand); color: var(--gold-dark); margin: 0 0 10px; }
.p-tips .pt-first p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text); }
.p-tips .pt-tape {
  position: absolute;
  top: -12px; left: 50%;
  width: 92px; height: 26px;
  margin-left: -46px;
  background: rgba(228, 233, 242, .88);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .15);
  rotate: -3deg;
}
.p-tips .pt-tabs-label { display: block; font: 400 calc(26px * .9)/1 var(--f-hand); color: var(--gold-dark); margin: 0 0 12px; rotate: -2deg; transform-origin: left bottom; }
.p-tips .pt-tabs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.p-tips .pt-tabs li { margin: 0; --tab: var(--gold-soft); }
.p-tips .pt-tabs li:nth-child(2) { --tab: var(--blue-soft); }
.p-tips .pt-tabs li:nth-child(3) { --tab: var(--brick-soft); }
.p-tips .pt-tabs li:nth-child(4) { --tab: var(--sage-soft); }
.p-tips .pt-tabs li:nth-child(5) { --tab: #efe6f0; }
.p-tips .pt-tabs li:nth-child(6) { --tab: #e9e3d3; }
.p-tips .pt-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 18px;
  border-radius: 14px 14px 4px 4px;
  background: var(--tab);
  box-shadow: inset 0 -3px 0 rgba(29, 44, 76, .08), 0 6px 10px -8px rgba(29, 44, 76, .4);
  font: 600 16px/1.2 var(--f-display);
  color: var(--navy);
}
.p-tips .pt-tabs a:hover { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .p-tips .pt-tabs a { transition: translate .3s var(--spring); }
  .p-tips .pt-tabs a:hover { translate: 0 -4px; }
}

/* ---------- recipe cards ---------- */
.p-tips .pt-recipe {
  --rule: var(--brick);
  position: relative;
  padding: 34px clamp(20px, 2.4vw, 28px) 26px;
  background-color: #fffdf6;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(143, 165, 198, .3) 31px 32px);
  background-position: 0 104px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 22px 30px -20px rgba(60, 40, 10, .55);
  rotate: -1deg;
  scroll-margin-top: calc(var(--osv-header-h) + 30px);
}
.p-tips .pt-recipe:nth-child(2) { --rule: var(--blue-ink); rotate: .8deg; margin-top: 18px; }
.p-tips .pt-recipe:nth-child(3) { --rule: var(--sage-ink); rotate: -.5deg; }
.p-tips .pt-recipe h2 { font-size: clamp(23px, 2.2vw, 27px); line-height: 1.15; min-height: 2.3em; display: flex; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--rule); }
.p-tips .pt-recipe ul { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: tip; display: grid; gap: 14px; }
.p-tips .pt-recipe li {
  counter-increment: tip;
  position: relative;
  margin: 0;
  padding-left: 46px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.p-tips .pt-recipe li::before {
  content: counter(tip);
  position: absolute;
  left: 0; top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 400 22px/1 var(--f-hand);
  color: var(--rule);
  box-shadow: inset 0 0 0 2px currentColor;
  rotate: -6deg;
}
.p-tips .pt-recipe .pt-tape { background: rgba(243, 229, 192, .9); rotate: 2deg; }
.p-tips .pt-recipe:nth-child(2) .pt-tape { background: rgba(244, 220, 205, .9); rotate: -4deg; }
.p-tips .pt-recipe:nth-child(3) .pt-tape { background: rgba(225, 231, 210, .95); rotate: 3deg; }
@media (prefers-reduced-motion: no-preference) {
  .p-tips .pt-recipe { transition: rotate .45s var(--spring), translate .45s var(--spring), box-shadow .45s var(--ease); }
  .p-tips .pt-recipe:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 30px 40px -24px rgba(60, 40, 10, .6); }
  .p-tips .pt-recipe li::before { transition: rotate .4s var(--spring), background-color .25s, color .25s; }
  .p-tips .pt-recipe li:hover::before { rotate: 0deg; background: var(--rule); color: #fff; }
  /* arriving from the index tabs, the card you asked for lifts off the table */
  .p-tips .pt-recipe:target { animation: pt-lift 1.2s var(--ease); }
}
@keyframes pt-lift { 30% { translate: 0 -12px; rotate: 0deg; box-shadow: 0 0 0 4px rgba(215, 164, 62, .45), 0 34px 44px -24px rgba(60, 40, 10, .6); } }

/* ---------- apps ---------- */
.p-tips .pt-apps { padding: 0 0 clamp(60px, 7vw, 100px); scroll-margin-top: calc(var(--osv-header-h) + 16px); }
.p-tips .pt-apps-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 14px 40px; align-items: end; margin: 0 0 clamp(26px, 3vw, 38px); }
.p-tips .pt-apps-head p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--text); }
.p-tips .pt-apps-head a { font-weight: 800; color: var(--navy); box-shadow: inset 0 -.4em 0 var(--gold-soft); }
.p-tips .pt-apps-head a:hover { box-shadow: inset 0 -1.2em 0 var(--gold-soft); }
.p-tips .pt-app-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.p-tips .pt-app {
  --tint: var(--gold-soft); --ink: var(--gold-dark);
  display: flex;
  flex-direction: column;
  padding: 22px 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.p-tips .pt-app:nth-child(2) { --tint: var(--blue-soft); --ink: var(--blue-ink); }
.p-tips .pt-app:nth-child(3) { --tint: var(--brick-soft); --ink: var(--brick-ink); }
.p-tips .pt-app:nth-child(4) { --tint: var(--sage-soft); --ink: var(--sage-ink); }
.p-tips .pt-app:nth-child(5) { --tint: #e9e3d3; --ink: var(--navy); }
.p-tips .pt-app-tile {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--tint);
  box-shadow: inset 0 -4px 0 rgba(29, 44, 76, .08);
  font: 600 28px/1 var(--f-display);
  color: var(--ink);
}
.p-tips .pt-app h3 { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.p-tips .pt-app p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.p-tips .pt-app .card-actions { margin-top: auto; padding-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .p-tips .pt-app { transition: translate .4s var(--spring), box-shadow .4s var(--ease); }
  .p-tips .pt-app-tile { transition: transform .45s var(--spring); }
  .p-tips .pt-app:is(:hover, :focus-within) { translate: 0 -6px; box-shadow: var(--shadow-lift); }
  .p-tips .pt-app:is(:hover, :focus-within) .pt-app-tile { transform: rotate(-8deg) scale(1.08); }
}

/* ---------- podcasts + a professional ---------- */
.p-tips .pt-last { padding: 0 0 clamp(50px, 6vw, 84px); }
.p-tips .pt-last-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); align-items: start; }
.p-tips .pt-pods { scroll-margin-top: calc(var(--osv-header-h) + 16px); }
.p-tips .pt-pods > h2 { margin-bottom: 22px; }
.p-tips .pt-pod {
  position: relative;
  padding: 24px 24px 24px 96px;
  margin: 0 0 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.p-tips .pt-pod h3 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.p-tips .pt-pod p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text); }
.p-tips .pt-wave {
  position: absolute;
  left: 22px; top: 24px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.p-tips .pt-pod:nth-of-type(2) .pt-wave { background: var(--brick); }
.p-tips .pt-wave i { display: block; width: 4px; height: 12px; border-radius: 4px; background: var(--gold); transform-origin: 50% 50%; }
.p-tips .pt-pod:nth-of-type(2) .pt-wave i { background: var(--paper); }
.p-tips .pt-wave i:nth-child(2) { height: 22px; } .p-tips .pt-wave i:nth-child(3) { height: 16px; } .p-tips .pt-wave i:nth-child(4) { height: 24px; } .p-tips .pt-wave i:nth-child(5) { height: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .p-tips .pt-pod { transition: translate .4s var(--spring), box-shadow .4s var(--ease); }
  .p-tips .pt-pod:is(:hover, :focus-within) { translate: 0 -5px; box-shadow: var(--shadow-lift); }
  /* the show "plays" while you look at it */
  .p-tips .pt-pod:is(:hover, :focus-within) .pt-wave i { animation: pt-play .9s ease-in-out infinite; }
  .p-tips .pt-wave i:nth-child(2) { animation-delay: -.2s !important; } .p-tips .pt-wave i:nth-child(3) { animation-delay: -.5s !important; }
  .p-tips .pt-wave i:nth-child(4) { animation-delay: -.35s !important; } .p-tips .pt-wave i:nth-child(5) { animation-delay: -.65s !important; }
}
@keyframes pt-play { 50% { transform: scaleY(.35); } }

.p-tips .pt-pro {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 46px);
  border-radius: var(--r-xl);
  color: var(--on-dark);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 28% 74%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 46% 14%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 66% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(700px 360px at 80% 0%, rgba(143, 165, 198, .22), transparent 70%),
    var(--navy-deep);
  box-shadow: var(--shadow-lift);
  scroll-margin-top: calc(var(--osv-header-h) + 16px);
}
.p-tips .pt-pro-moon { position: absolute; top: 24px; right: 28px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffaf0, #efe2c2 60%, #d9c79c); box-shadow: 0 0 50px 12px rgba(247, 226, 176, .2); }
.p-tips .pt-pro h2 { color: var(--paper); padding-right: 70px; margin-bottom: 16px; }
.p-tips .pt-pro p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--on-dark); }
.p-tips .pt-pro .card-actions { margin-top: 26px; gap: 14px; }

/* ---------- related guides + suggest ---------- */
.p-tips .pt-more .guide-related { margin: 0 0 30px; }
.p-tips .pt-more .guide-related h2 { margin-bottom: 22px; }
.p-tips .pt-more .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; }
.p-tips .pt-more .related-card { display: flex; flex-direction: column; gap: 6px; color: var(--navy); }
.p-tips .pt-more .related-card span { color: var(--text); font-size: 16px; line-height: 1.5; }
.p-tips .pt-suggest { text-align: center; margin: 10px 0 0; }

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .p-tips .pt-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-tips .pt-recipes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .p-tips .pt-recipe:nth-child(2) { margin-top: 0; }
  .p-tips .pt-recipe h2 { min-height: 0; }
  .p-tips .pt-top, .p-tips .pt-apps-head, .p-tips .pt-last-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .p-tips .pt-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-tips .pt-more .related-grid { grid-template-columns: 1fr; }
  .p-tips .pt-recipes { padding-inline: 14px; border-radius: var(--r-lg); }
  .p-tips .pt-recipe { background-position: 0 0; }
}
@media (max-width: 480px) {
  .p-tips .pt-app-grid { grid-template-columns: 1fr; }
  .p-tips .pt-app { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; }
  .p-tips .pt-app-tile { grid-row: 1 / span 3; margin: 0; }
  .p-tips .pt-app .card-actions { padding-top: 12px; }
  .p-tips .pt-pod { padding: 84px 20px 22px; }
  .p-tips .pt-wave { left: 20px; top: 20px; }
  .p-tips .pt-tabs a { font-size: 15px; padding: 8px 14px; }
  .p-tips .pt-recipe li { padding-left: 42px; font-size: 16.5px; }
}
@media print { .p-tips .pt-tape, .p-tips .pt-wave, .p-tips .pt-pro-moon { display: none; } .p-tips .pt-recipes { background: none; box-shadow: none; } }