/* Tickaboo — /guides/post-photos-of-children-safely/
 *
 * Linked by hand from the page head, as all nested routes must be.
 * Built 8 September 2026. The Phase 4 cornerstone.
 *
 * The shared guide chrome (.g-hero, .g-crumb, .cmp, .method, .flow) now lives
 * in components.css, extracted on this page because it is the third guide.
 * Only what is specific to this page is here.
 *
 * EVERY color-mix() below carries a solid declaration immediately before it.
 * A var() holding an unsupported function is invalid at computed-value time
 * and falls to the property's initial value, which for SVG fill is BLACK.
 * That shipped to production once (3 Sep 2026). It does not ship again.
 */

/* ═══════════════════════════════════════════════════════════════════
   THE SIGNATURE ILLUSTRATION
   One photo, and everything in it that is not the child: the room
   number, the name labels, the logo, the window, then the file's own
   hidden layer and the caption underneath. It argues the page's thesis
   before a word of it is read.
   Abstract figures only. Never a face, not even drawn (current.md §10).
   ═══════════════════════════════════════════════════════════════════ */
.ill--frame {
  --pf-wall: #E4EFE3;
  --pf-floor: #D3E3D3;
  --pf-solid: #C2D6C6;
  --pf-glass: #E9F1F4;
  --pf-figure: #93AF9D;
  --pf-strip: #F3EAE0;
  --pf-bag: #B7CDBB;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill--frame {
    --pf-wall: color-mix(in srgb, var(--color-surface) 52%, var(--color-surface-tint));
    --pf-floor: color-mix(in srgb, var(--color-surface) 78%, var(--color-surface-tint));
    --pf-solid: color-mix(in srgb, var(--color-primary) 24%, var(--color-surface-tint));
    --pf-glass: color-mix(in srgb, var(--color-surface-tint) 84%, var(--color-primary));
    --pf-figure: color-mix(in srgb, var(--color-primary) 48%, var(--color-surface-tint));
    --pf-strip: color-mix(in srgb, var(--color-paper) 76%, var(--color-surface-tint));
    --pf-bag: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface-tint));
  }
}

.pf__photo {
  fill: var(--pf-wall);
  stroke: var(--color-border);
  stroke-width: 1.5;
}
.pf__floor { fill: var(--pf-floor); }
.pf__win { fill: var(--pf-glass); }
.pf__winbar { fill: none; stroke: var(--pf-solid); stroke-width: 2.2; }
/* A roofline through the window. Backgrounds are how people work out where
   a photo was taken, which is the whole point of ring 4. */
.pf__roof { fill: var(--pf-solid); opacity: 0.55; }
.pf__door { fill: var(--pf-solid); }
.pf__handle { fill: var(--color-surface-tint); }
.pf__plate,
.pf__labels rect { fill: var(--color-surface-tint); }
.pf__bags rect { fill: var(--pf-bag); }
.pf__rail { fill: none; stroke: var(--pf-solid); stroke-width: 3.4; stroke-linecap: round; }
.pf__tinytext {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.75;
}
.pf__kid path, .pf__kid circle { fill: var(--pf-figure); }
.pf__logo { fill: var(--color-primary); }

/* The rings are the argument: each one circles something that identifies a
   child without showing a face. Outlines rather than fills, so they mark
   what is underneath instead of hiding it. */
.pf__ring {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.4;
}
.pf__badge circle {
  fill: var(--color-primary);
  stroke: var(--color-surface-tint);
  stroke-width: 2.5;
}
.pf__badge text {
  fill: var(--color-surface-tint);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  text-anchor: middle;
}
.pf__badge--dark circle { fill: var(--color-dark); }

/* The two layers under the photo: what the file carries, and what you type.
   Drawn as strips rather than more frames so they read as attached to the
   photo instead of as further photos. */
.pf__strip { fill: var(--pf-strip); }
.pf__cap { fill: var(--color-surface-tint); stroke: var(--color-border); stroke-width: 1.5; }
.pf__glyph { fill: var(--color-dark); }
.pf__glyphdot { fill: var(--pf-strip); }
.pf__avatar { fill: var(--pf-figure); }
.pf__stripline,
.pf__capline {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   THE SHORT ANSWER: six numbered steps
   Two columns on desktop so six steps do not become a long scroll,
   and so the section reads denser than the prose sections around it.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   FEBRUARY: split, because the scope note has to sit beside the claim
   rather than after it. Half the readers are schools and need to know
   in the same eyeful that this part is not about them.
   ═══════════════════════════════════════════════════════════════════ */
.pp-feb__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .pp-feb__inner { grid-template-columns: 1.45fr 1fr; } }
.pp-feb__copy h2 { margin-bottom: 1.1rem; }
.pp-feb__copy p { color: var(--color-muted); max-width: 62ch; }
.pp-feb__copy strong { color: var(--color-ink); }

.pp-quote {
  margin: 1.6rem 0;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.75rem);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-surface-tint);
}
.pp-quote p {
  margin: 0 0 0.7rem;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.pp-quote cite { font-style: normal; font-size: 0.8125rem; color: var(--color-muted); }
.pp-quote cite a { color: var(--color-primary); }

.pp-scope {
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: #EFF6EE;
  background: color-mix(in srgb, var(--color-surface) 42%, var(--color-surface-tint));
}
.pp-scope h3 { margin: 0 0 0.8rem; font-size: 1.0625rem; }
.pp-scope p { margin: 0 0 0.9rem; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; }
.pp-scope strong { color: var(--color-ink); }
.pp-scope__note {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════
   THE FRAME: six layers, one of which is the one everyone stops at
   ═══════════════════════════════════════════════════════════════════ */
.pp-frame__title {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: clamp(2rem, 1.75rem + 1.5vw, 2.7rem);
}
.pp-frame .section-lead { max-width: 66ch; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   THE DARK DRENCH — the page's one dark value (page-craft §2)
   It sits at 5 of 9 rather than in the lower half, on purpose: the
   procedure that follows is only worth reading if you already believe
   the cleanup does not reliably exist.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   THE PROCEDURE — the page's uncopyable asset
   ═══════════════════════════════════════════════════════════════════ */
.pp-no__title {
  text-align: center;
  max-width: 24ch;
  margin: 0 auto clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: clamp(2rem, 1.75rem + 1.5vw, 2.7rem);
}
.pp-no .section-lead { max-width: 66ch; margin-inline: auto; }

.pp-first {
  max-width: 52rem;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}
.pp-first h3 { margin: 0 0 0.7rem; font-size: 1.1875rem; }
.pp-first p { color: var(--color-muted); margin: 0 0 1rem; }
.pp-first strong { color: var(--color-ink); }

.dests { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 720px) { .dests { grid-template-columns: 1fr 1fr; } }
.dests li {
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--color-surface-tint);
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.dests li span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.9375rem;
  margin-bottom: 0.15rem;
}
.pp-first__note { margin: 0; font-size: 0.9375rem; }

/* The branches. A hairline rail down the left so five cases read as one
   sequence rather than five unrelated cards. */
.branches {
  list-style: none;
  max-width: 52rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  padding: 0 0 0 clamp(1.1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--color-border);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}
.branch { position: relative; }
.branch::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.1rem, 2.5vw, 1.75rem) - 6px);
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}
.branch__case {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-ink);
}
.branch__do { margin: 0; color: var(--color-muted); line-height: 1.65; }
.branch__do strong { color: var(--color-dark); }

.branch--hard::before { background: var(--color-dark); }
.subs {
  list-style: none;
  margin: 1rem 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: #EFF6EE;
  background: color-mix(in srgb, var(--color-surface) 42%, var(--color-surface-tint));
  display: grid;
  gap: 0.85rem;
}
.subs li { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; }
.subs strong { color: var(--color-ink); }

.pp-ask,
.pp-honest,
.pp-school {
  max-width: 52rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
}
.pp-ask h3, .pp-honest h3, .pp-school h3 { margin: 0 0 0.7rem; font-size: 1.1875rem; }
.pp-ask p, .pp-honest p, .pp-school p { color: var(--color-muted); margin: 0 0 0.9rem; }
.pp-ask p:last-child, .pp-school p:last-child { margin-bottom: 0; }
.pp-ask strong, .pp-honest strong, .pp-school strong { color: var(--color-ink); }
.pp-ask__crop {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

/* The concessions block. Tinted rather than white so it reads as the
   page arguing against its own product on purpose, not as a footnote. */
.pp-honest { background: var(--color-paper); border-color: transparent; }
.honest__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.honest__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.honest__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   THE BACK CATALOGUE
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   METHOD additions (the .method block itself is in components.css)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   CLOSE — flat white, no wash, no hairline (current.md §7)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .branches { padding-left: 1rem; }
  .branch::before { left: -1.31rem; }
}