/* Homepage (Concept A, owner-approved 2026-10-13). Front page only; every rule is scoped to body.tp-shell .tp-a. */

@font-face { font-family: "TPA Fraunces"; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-full.woff2") format("woff2"); }
@font-face { font-family: "TPA Atkinson"; font-weight: 200 800; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2"); }
body.tp-shell .tp-a { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --g: 48px; --max: 1280px; }
@media (max-width: 1023px) { body.tp-shell .tp-a { --g: 28px; } }
@media (max-width: 767px) { body.tp-shell .tp-a { --g: 18px; } }
body.tp-shell .tp-a *, body.tp-shell .tp-a *::before, body.tp-shell .tp-a *::after { box-sizing: border-box; }
body.tp-shell .tp-a { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--text); }
body.tp-shell .tp-a img { display: block; max-width: 100%; }
body.tp-shell .tp-a a { color: var(--action); text-underline-offset: 4px; }
body.tp-shell .tp-a :focus-visible { outline: 3px solid var(--focus, var(--action)); outline-offset: 2px; border-radius: 2px; }
body.tp-shell .tp-a h1, body.tp-shell .tp-a h2, body.tp-shell .tp-a h3 { margin: 0; font-family: var(--display); font-variation-settings: var(--axes, normal); color: var(--ink); text-wrap: balance; }
body.tp-shell .tp-a p { margin: 0; }
body.tp-shell .tp-a ul, body.tp-shell .tp-a ol, body.tp-shell .tp-a dl, body.tp-shell .tp-a figure, body.tp-shell .tp-a blockquote { margin: 0; }
body.tp-shell .tp-a .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.tp-shell .tp-a .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
body.tp-shell .tp-a .lab-frame { position: relative; overflow: hidden; background: var(--surface); margin: 0; }
body.tp-shell .tp-a .lab-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms var(--ease-out); }
body.tp-shell .tp-a .lab-layer.on { opacity: 1; }
body.tp-shell .tp-a .lab-layer img { width: 100%; height: 100%; object-fit: cover; }
body.tp-shell .tp-a .lab-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); }
body.tp-shell .tp-a .lab-mark path { fill: none; stroke: var(--mark); stroke-width: 3.5px; stroke-linecap: round; stroke-linejoin: round; }
body.tp-shell .tp-a .lab-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin-top: 10px; color: var(--muted); font: 400 13px/1.45 var(--text); }
body.tp-shell .tp-a .lab-look { color: var(--ink); font-weight: 600; font-size: 14px; }
body.tp-shell .tp-a .lab-key { display: inline-block; width: 11px; height: 9px; margin-right: 7px; border: 2px solid var(--mark); border-radius: 50%; vertical-align: -1px; transform: rotate(-8deg); }
body.tp-shell .tp-a .tpa-credits { max-width: var(--max); margin: 0 auto; padding: 0 var(--g) 40px; color: var(--muted); font-size: 14px; }
body.tp-shell .tp-a .tpa-credits summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--ink); }
body.tp-shell .tp-a .tpa-credits ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
body.tp-shell .tp-a .tpa-credits a { display: inline-flex; align-items: center; min-height: 24px; }
@media (prefers-reduced-motion: reduce) { body.tp-shell .tp-a *, body.tp-shell .tp-a *::before, body.tp-shell .tp-a *::after { transition-duration: 0ms !important; animation: none !important; } }
@media (forced-colors: active) { body.tp-shell .tp-a .lab-mark path { stroke: Highlight; } body.tp-shell .tp-a .lab-key { border-color: Highlight; } }


/* System 1, Field Notebook (refined): warm paper, ink, production green for actions, terracotta for marks only. */
body.tp-shell .tp-a { --bg: #FAF6F0; --surface: #F3EDE3; --raised: #FFFDF9; --ink: #211D19; --muted: #57504A; --rule: #D8CFC1; --action: #1F6F5C; --action-dark: #15503F;
  --tint: #E7F2EE; --mark: #D96B45; --rust: #A8452A; --display: "TPA Fraunces", Georgia, serif; --text: "TPA Atkinson", system-ui, sans-serif; --axes: "SOFT" 50, "WONK" 0; }

/* 1. Contents hero */
body.tp-shell .tp-a .hero { padding: 48px 0 64px; }
body.tp-shell .tp-a .hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
body.tp-shell .tp-a .intro { grid-column: 1 / span 5; position: sticky; top: 88px; }
body.tp-shell .tp-a .label { color: var(--rust); font: 600 14px/1.35 var(--text); }
body.tp-shell .tp-a .intro h1 { margin-top: 14px; font-size: clamp(40px, 3.4vw + 12px, 64px); line-height: 1.02; font-weight: 540; letter-spacing: -0.028em; }
body.tp-shell .tp-a .intro .lead { margin-top: 18px; max-width: 30em; color: var(--muted); font-size: 18px; }
body.tp-shell .tp-a .intro .lab-frame { margin-top: 28px; aspect-ratio: 4 / 3; }
body.tp-shell .tp-a .contents { grid-column: 6 / span 7; }
body.tp-shell .tp-a .contents h2 { font-size: clamp(28px, 1.2vw + 18px, 36px); line-height: 1.1; font-weight: 560; letter-spacing: -0.02em; }
body.tp-shell .tp-a .contents h2 .pen svg { position: absolute; left: -2%; bottom: -10px; width: 104%; height: 14px; overflow: visible; }
body.tp-shell .tp-a .contents h2 .pen path { fill: none; stroke: var(--mark); stroke-width: 3px; stroke-linecap: round; }
body.tp-shell .tp-a .group { margin-top: 30px; }
body.tp-shell .tp-a .group h3 { font: 600 14px/1.3 var(--text); color: var(--rust); letter-spacing: 0.01em; }
body.tp-shell .tp-a .gdesc { margin-top: 2px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
body.tp-shell .tp-a .gdesc .gcat { color: var(--ink); font-weight: 700; }
body.tp-shell .tp-a .rows { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
body.tp-shell .tp-a .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 14px; padding: 14px 2px 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-height: 56px; position: relative; }
body.tp-shell .tp-a .row .s { font: 450 21px/1.3 var(--display); font-variation-settings: var(--axes); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; }
body.tp-shell .tp-a .row .s .t { flex: 0 1 auto; }
body.tp-shell .tp-a .row .s .dots { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); }
body.tp-shell .tp-a .row .my { color: var(--muted); }
body.tp-shell .tp-a .row .g { color: var(--action); font: 600 14px/1.3 var(--text); white-space: nowrap; }
body.tp-shell .tp-a .row .g::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform 200ms ease; }
body.tp-shell .tp-a .row .thumb { display: none; }
body.tp-shell .tp-a .row:hover .t, body.tp-shell .tp-a .row:focus-visible .t { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { body.tp-shell .tp-a .row:hover .g::after { transform: translateX(3px); } }
body.tp-shell .tp-a .row:active { transform: scale(0.99); transition: transform 160ms var(--ease-out); }
body.tp-shell .tp-a .soon { margin-top: 22px; color: var(--muted); font-size: 15px; }
body.tp-shell .tp-a .soon strong { color: var(--ink); }

/* 1b. Usually normal, and when to ask for help. Sticky scrollytelling (desktop): a stage holds one big line per beat while
   the evidence scrolls beside it. Every quote is verbatim from a published guide. No links: the contents list is the way in.
   Mobile, no JS: one linear read. Motion: assets/watch-story.js (IntersectionObserver only). */
body.tp-shell .tp-a .watch { --ease-story: cubic-bezier(0.16, 1, 0.3, 1); padding: 88px 0 96px; border-top: 1px solid var(--rule); }
body.tp-shell .tp-a .w-head { max-width: 46rem; }
body.tp-shell .tp-a .watch h2 { font-size: clamp(28px, 1.2vw + 18px, 38px); line-height: 1.12; font-weight: 560; letter-spacing: -0.02em; max-width: 22ch; }
body.tp-shell .tp-a .watch .pen, body.tp-shell .tp-a .contents h2 .pen { position: relative; white-space: nowrap; }
body.tp-shell .tp-a .watch .pen svg { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.3em; min-height: 10px; overflow: visible; }
body.tp-shell .tp-a .watch .pen path { fill: none; stroke: var(--mark); stroke-width: 3px; stroke-linecap: round; }
body.tp-shell .tp-a .watch .intro-line { margin-top: 18px; color: var(--muted); max-width: 40em; }
body.tp-shell .tp-a .watch q { quotes: none; }
body.tp-shell .tp-a .watch q::before, body.tp-shell .tp-a .watch q::after { content: none; }

/* Steps: the readable sequence (the only content screen readers get). */
body.tp-shell .tp-a .story { margin-top: 44px; }
body.tp-shell .tp-a .steps { list-style: none; margin: 0; padding: 0; }
body.tp-shell .tp-a .st { padding: 28px 0 32px; border-top: 1px solid var(--rule); }
body.tp-shell .tp-a .st-h { font: 500 clamp(26px, 1vw + 20px, 32px)/1.15 var(--display); font-variation-settings: var(--axes); letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }
body.tp-shell .tp-a .st.turn .st-h { color: var(--rust); }
body.tp-shell .tp-a .norm { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
body.tp-shell .tp-a .brand-mark { flex: none; }
body.tp-shell .tp-a .norm q, body.tp-shell .tp-a .ev q { font: 400 19px/1.45 var(--display); font-variation-settings: var(--axes); }
body.tp-shell .tp-a .ev { margin-top: 16px; max-width: 34em; }
body.tp-shell .tp-a .ask { margin: 18px 0 0; }
body.tp-shell .tp-a .ask::before { content: ""; display: block; border-top: 3px double var(--ink); transform-origin: left; }
body.tp-shell .tp-a .ask > div { padding: 14px 0 12px; border-bottom: 1px solid var(--rule); }
body.tp-shell .tp-a .ask dt { font: 700 15px/1.5 var(--text); color: var(--rust); }
body.tp-shell .tp-a .ask dd { margin: 4px 0 0; font-size: 16px; line-height: 1.55; }
body.tp-shell .tp-a .w-note { margin-top: 24px; color: var(--muted); font-size: 14px; max-width: 40em; }
body.tp-shell .tp-a .stage { display: none; }

/* Desktop, staged: sticky stage left, evidence right. */
@media (min-width: 1024px) {
  body.tp-shell .tp-a .watch.is-staged .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; margin-top: 8px; }
  body.tp-shell .tp-a .watch.is-staged .stage { display: flex; flex-direction: column; justify-content: center; grid-column: 1 / span 6; position: sticky; top: 14vh; height: 72vh; padding-left: 52px; }
  body.tp-shell .tp-a .watch.is-staged .steps { grid-column: 8 / span 5; padding: 18vh 0 10vh; }
  body.tp-shell .tp-a .watch.is-staged .st { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: 40px 0 40px 22px; border-left: 2px solid var(--rule); transition: border-color 400ms var(--ease-story); }
  body.tp-shell .tp-a .watch.is-staged .st.on { border-left-color: var(--mark); }
  body.tp-shell .tp-a .watch.is-staged .st:not(.on) q, body.tp-shell .tp-a .watch.is-staged .st:not(.on) .ask dd { color: var(--muted); }
  body.tp-shell .tp-a .watch.is-staged .st-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.tp-shell .tp-a .watch.is-staged .st q, body.tp-shell .tp-a .watch.is-staged .st .ask dd { transition: color 400ms var(--ease-story); }
}
body.tp-shell .tp-a .rail { position: absolute !important; left: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
body.tp-shell .tp-a .rail i { display: block; width: 3px; height: 34px; border-radius: 2px; background: var(--rule); transform-origin: top; transition: background-color 400ms var(--ease-story); }
body.tp-shell .tp-a .rail i.done, body.tp-shell .tp-a .rail i.on { background: var(--mark); }
body.tp-shell .tp-a .stage-k { font: 600 14px/1.3 var(--text); color: var(--rust); letter-spacing: 0.01em; min-height: 1.3em; }
/* The watch number sits behind the line as a large, faint figure and rolls 1 > 2 > 3. */
body.tp-shell .tp-a .stage-n { position: absolute; right: -56px; top: 50%; margin-top: -0.62em; height: 1em; overflow: hidden; font: 500 clamp(300px, 26vw, 400px)/1 var(--display); font-variation-settings: var(--axes); color: #F6E6DC; opacity: 0; transition: opacity 400ms var(--ease-story); pointer-events: none; }
body.tp-shell .tp-a .stage > :not(.stage-n) { position: relative; }
body.tp-shell .tp-a .rail { z-index: 1; }
body.tp-shell .tp-a .stage-n span { display: block; height: 1em; transform: translateY(calc(var(--n, 0) * -100%)); transition: transform 650ms var(--ease-story); }
body.tp-shell .tp-a .stage.has-n .stage-n { opacity: 1; }
body.tp-shell .tp-a .stage-lines { display: grid; margin-top: 18px; }
body.tp-shell .tp-a .stage-lines .line { grid-area: 1 / 1; align-self: start; font: 520 clamp(42px, 2.6vw + 14px, 62px)/1.06 var(--display); font-variation-settings: var(--axes); letter-spacing: -0.028em; color: var(--ink); max-width: 13ch; padding-bottom: 0.25em; }


@media (prefers-reduced-motion: no-preference) {
  /* Stage: each beat's line is revealed upward; the old line lifts away. */
  body.tp-shell .tp-a .stage-lines .line { animation: w-line-in 620ms 140ms var(--ease-story) both; }
  body.tp-shell .tp-a .stage-lines .line.out { animation: w-line-out 200ms ease-in both; }
  @keyframes w-line-in { from { opacity: 0; transform: translateY(22px); clip-path: inset(100% -10% -40% -10%); } to { opacity: 1; transform: none; clip-path: inset(-20% -10% -40% -10%); } }
  @keyframes w-line-out { to { opacity: 0; transform: translateY(-16px); } }
  body.tp-shell .tp-a .rail i.on { animation: w-tick 500ms var(--ease-story) both; }
  @keyframes w-tick { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  /* The pen marks the key words, as if by hand. */
  body.tp-shell .tp-a .watch.js .pen path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  body.tp-shell .tp-a .watch.js .r-head.seen .pen path, body.tp-shell .tp-a .watch.js .st.seen .st-h .pen path, body.tp-shell .tp-a .stage-lines .line .pen path { animation: w-draw 720ms 260ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  @keyframes w-draw { to { stroke-dashoffset: 0; } }
  /* Evidence arrives in order once the step is reached. */
  body.tp-shell .tp-a .watch.js .r { opacity: 0; }
  body.tp-shell .tp-a .watch.js .st.seen .r { animation: w-rise 640ms var(--ease-story) both; animation-delay: calc(120ms + var(--i, 0) * 80ms); }
  @keyframes w-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  body.tp-shell .tp-a .watch.js .ask::before { transform: scaleX(0); transition: transform 800ms 150ms var(--ease-story); }
  body.tp-shell .tp-a .watch.js .st.seen .ask::before { transform: scaleX(1); }
}
@media (max-width: 767px) {
  body.tp-shell .tp-a .watch { padding: 56px 0 60px; }
  body.tp-shell .tp-a .watch h2 { font-size: 26px; }
  body.tp-shell .tp-a .st-h { font-size: 25px; }
  body.tp-shell .tp-a .norm q, body.tp-shell .tp-a .ev q { font-size: 18px; }
}

/* Guide names stay for screen readers; on screen the closing line names the sources once. */
body.tp-shell .tp-a .watch .tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* Card language for this section: paper card, ink hairline, 16px radius, offset paper shadow. The intro card is the playful one. */
body.tp-shell .tp-a .card { background: var(--raised); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 #E6DCCB; }
body.tp-shell .tp-a .ask-card { position: relative; margin-top: 30px; max-width: 34rem; padding: 26px 30px 24px 132px; background: #FBE7DC; border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); transform: rotate(-1.2deg); }
body.tp-shell .tp-a .mascot { position: absolute; left: 18px; top: 50%; width: 100px; height: 73px; margin-top: -40px; overflow: visible; transform-origin: 50% 90%; }
body.tp-shell .tp-a .ask-q { font: 500 clamp(22px, 0.8vw + 16px, 27px)/1.2 var(--display); font-variation-settings: var(--axes); letter-spacing: -0.015em; color: var(--ink); }
body.tp-shell .tp-a .ask-a { margin-top: 6px; color: #5A3D30; font-size: 16px; }
/* Usually normal: one box, pen-dash bullets. */
body.tp-shell .tp-a .norm.card { padding: 22px 26px; gap: 0; }
body.tp-shell .tp-a .norm.card li { position: relative; padding: 12px 0 12px 26px; }
body.tp-shell .tp-a .norm.card li + li { border-top: 1px dashed var(--rule); }
body.tp-shell .tp-a .norm.card li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 14px; height: 2.5px; border-radius: 2px; background: var(--mark); transform: rotate(-8deg); }
/* Watch 1 > 2 > 3: boxes joined by pen arrows. */
body.tp-shell .tp-a .wcard { position: relative; padding: 24px 24px 22px 26px; }
body.tp-shell .tp-a .st[data-n="1"], body.tp-shell .tp-a .st[data-n="2"] { padding-bottom: 0; }
body.tp-shell .tp-a .st[data-n="2"], body.tp-shell .tp-a .st[data-n="3"] { border-top: 0; padding-top: 22px; }
body.tp-shell .tp-a .wcard::before { content: attr(data-n); position: absolute; top: -18px; left: 20px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--mark); color: #FFFDF9; font: 600 18px/1 var(--display); border: 1.5px solid var(--ink); }
body.tp-shell .tp-a .wcard .st-h { font-size: 21px; max-width: none; }
body.tp-shell .tp-a .wcard .ev { margin-top: 10px; }
body.tp-shell .tp-a .wcard .ev q { font-size: 17.5px; }
body.tp-shell .tp-a .flow { position: relative; height: 72px; margin-left: 38px; }
body.tp-shell .tp-a .flow::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 30px; border-left: 2.5px dashed var(--mark); transform-origin: top; }
body.tp-shell .tp-a .flow::after { content: ""; position: absolute; left: -5px; bottom: 28px; width: 12px; height: 12px; border-right: 2.5px solid var(--mark); border-bottom: 2.5px solid var(--mark); transform: rotate(45deg); }
@media (min-width: 1024px) {
  body.tp-shell .tp-a .watch.is-staged .st[data-n] { justify-content: flex-start; min-height: 0; padding: 0 0 0 4px; border-left: 0; }
  body.tp-shell .tp-a .watch.is-staged .st[data-n] .flow { height: 30vh; }
  body.tp-shell .tp-a .watch.is-staged .st[data-n="1"] { padding-top: 14vh; }
  body.tp-shell .tp-a .watch.is-staged .st[data-n="3"] { padding-bottom: 14vh; }
  body.tp-shell .tp-a .watch.is-staged .st.on .card { box-shadow: 6px 6px 0 #F2C9B5; border-color: var(--rust); }
  body.tp-shell .tp-a .watch.is-staged .card { transition: box-shadow 400ms var(--ease-story), border-color 400ms var(--ease-story); }
}
/* The turn: a real puppy, as a round portrait that tilts its head, saying the three things in a bubble. */
body.tp-shell .tp-a .scene { position: relative; margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: end; max-width: 31rem; }
body.tp-shell .tp-a .bubble { grid-column: 1 / -1; grid-row: 1; justify-self: start; position: relative; max-width: 21rem; padding: 18px 22px 18px; background: var(--raised); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 #E6DCCB; transform-origin: 85% 100%; }
body.tp-shell .tp-a .bubble::after { content: ""; position: absolute; right: 26px; bottom: -11px; width: 18px; height: 18px; background: var(--raised); border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(40deg) skewX(8deg); }
body.tp-shell .tp-a .b-say { font: 600 14px/1.3 var(--text); color: var(--rust); letter-spacing: 0.01em; }
body.tp-shell .tp-a .bubble ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: b; display: grid; gap: 6px; }
body.tp-shell .tp-a .bubble li { counter-increment: b; display: grid; grid-template-columns: 26px minmax(0, 1fr); font: 500 19px/1.3 var(--display); font-variation-settings: var(--axes); color: var(--ink); }
body.tp-shell .tp-a .bubble li::before { content: counter(b); color: var(--mark); }
/* Ask for help first: a warning, not plain text. */
body.tp-shell .tp-a .warn-ico { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 0.35em; vertical-align: 0.08em; border-radius: 50%; background: var(--rust); color: #FFFDF9; font: 700 0.72em/1 var(--text); }
body.tp-shell .tp-a .stage-lines .line .warn-ico { width: 1.05em; height: 1.05em; font-size: 0.62em; vertical-align: 0.25em; }
body.tp-shell .tp-a .st.end .st-h, body.tp-shell .tp-a .stage.is-warn .stage-lines .line { color: var(--rust); }
body.tp-shell .tp-a .ask.alert { position: relative; margin-top: 20px; padding: 0 22px 8px; background: #FCEBE3; border: 2px solid var(--rust); border-radius: 16px; box-shadow: 6px 6px 0 var(--rust); overflow: hidden; }
body.tp-shell .tp-a .ask.alert::before { content: ""; display: block; height: 10px; margin: 0 -22px 4px; border: 0; background: repeating-linear-gradient(-45deg, var(--rust) 0 9px, #FCEBE3 9px 18px); transform-origin: left; }
body.tp-shell .tp-a .ask.alert > div { position: relative; padding: 14px 0 12px 40px; border-bottom: 1px dashed #E2AE98; }
body.tp-shell .tp-a .ask.alert > div:last-child { border-bottom: 0; }
body.tp-shell .tp-a .ask.alert > div::before { content: "!"; position: absolute; left: 0; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: #FFFDF9; font: 700 15px/1 var(--text); }
body.tp-shell .tp-a .ask.alert dt { font: 700 16px/1.45 var(--text); color: #8A3520; letter-spacing: 0.005em; }
body.tp-shell .tp-a .ask.alert dd { margin-top: 4px; color: var(--ink); font-size: 16px; line-height: 1.55; }
body.tp-shell .tp-a .watch.is-staged .st.end:not(.on) .ask.alert dd { color: var(--ink); }
/* Illustrations drawn for this section: the character at the turn, one concept per watch card. */
body.tp-shell .tp-a .ill { overflow: visible; }
body.tp-shell .tp-a .ill .fur { fill: var(--raised); stroke: var(--ink); stroke-width: 2.5; }
body.tp-shell .tp-a .ill .patch { fill: #F2DCCF; }
body.tp-shell .tp-a .ill .ear { fill: var(--mark); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
body.tp-shell .tp-a .ill .eyes circle, body.tp-shell .tp-a .ill .nose { fill: var(--ink); }
body.tp-shell .tp-a .ill .glint { fill: var(--raised); }
body.tp-shell .tp-a .ill .snout { fill: #FFF8EE; stroke: var(--ink); stroke-width: 2; }
body.tp-shell .tp-a .ill .line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
body.tp-shell .tp-a .ill .tongue, body.tp-shell .tp-a .ill .tagdot { fill: var(--mark); }
body.tp-shell .tp-a .ill .tail { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
body.tp-shell .tp-a .ill .collar { fill: none; stroke: var(--action); stroke-width: 7; stroke-linecap: round; }
body.tp-shell .tp-a .ill .ground { fill: #EFE6D8; }
body.tp-shell .tp-a .ill .paper { fill: var(--raised); stroke: var(--ink); stroke-width: 2; }
body.tp-shell .tp-a .ill .rule { stroke: var(--rule); stroke-width: 1.5; }
body.tp-shell .tp-a .ill .cells rect { fill: #F6F0E6; stroke: var(--rule); stroke-width: 1.2; }
body.tp-shell .tp-a .ill .calbar { fill: var(--action); }
body.tp-shell .tp-a .ill .trend, body.tp-shell .tp-a .ill .loop, body.tp-shell .tp-a .ill .mline { fill: none; stroke: var(--mark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.tp-shell .tp-a .ill .tick { fill: none; stroke: var(--action); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.tp-shell .tp-a .ill .qm { font: 600 22px/1 var(--display); fill: var(--rust); }
body.tp-shell .tp-a .ill .head, body.tp-shell .tp-a .ill .eyes, body.tp-shell .tp-a .ill .bow { transform-box: fill-box; }
body.tp-shell .tp-a .ill .head { transform-origin: 50% 88%; }
body.tp-shell .tp-a .ill .eyes { transform-origin: center; }
body.tp-shell .tp-a .ill .tail { transform-box: fill-box; transform-origin: 0% 100%; }
body.tp-shell .tp-a .pup { grid-column: 2; grid-row: 2; width: 240px; height: 240px; margin-top: -6px; }
body.tp-shell .tp-a .wcard { padding-right: 168px; min-height: 132px; }
body.tp-shell .tp-a .wart { position: absolute; right: 8px; top: -58px; width: 160px; height: 136px; pointer-events: none; }
@media (min-width: 1024px) { body.tp-shell .tp-a .watch.is-staged .scene { margin-top: 0; } }
@media (max-width: 767px) {
  body.tp-shell .tp-a .ask-card { padding: 84px 20px 20px; transform: rotate(-0.8deg); box-shadow: 5px 5px 0 var(--ink); }
  body.tp-shell .tp-a .mascot { left: 18px; top: 16px; margin-top: 0; width: 80px; height: 58px; }
  body.tp-shell .tp-a .scene { grid-template-columns: minmax(0, 1fr) 168px; }
  body.tp-shell .tp-a .pup { width: 170px; height: 170px; }
  body.tp-shell .tp-a .wcard { padding-right: 112px; }
  body.tp-shell .tp-a .wart { width: 112px; height: 96px; top: -40px; right: 4px; }
  body.tp-shell .tp-a .ask.alert { padding: 0 16px 6px; }
  body.tp-shell .tp-a .ask.alert::before { margin: 0 -16px 4px; }
  body.tp-shell .tp-a .bubble li { font-size: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Intro card lands like a sticker; the mascot looks up. */
  body.tp-shell .tp-a .watch.js .r-head .ask-card { opacity: 0; }
  body.tp-shell .tp-a .watch.js .r-head.seen .ask-card { animation: w-stick 820ms 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  body.tp-shell .tp-a .watch.js .r-head.seen .mascot { animation: w-look 2.6s 1s ease-in-out 2; }
  @keyframes w-stick { from { opacity: 0; transform: rotate(-7deg) translateY(26px) scale(0.94); } to { opacity: 1; transform: rotate(-1.2deg); } }
  @keyframes w-look { 0%, 100% { transform: none; } 25%, 45% { transform: rotate(-12deg); } 65% { transform: rotate(6deg); } }
  /* Arrows draw down to the next box once the box is reached. */
  body.tp-shell .tp-a .watch.js .flow::before { transform: scaleY(0); transition: transform 900ms 250ms var(--ease-story); }
  body.tp-shell .tp-a .watch.js .flow::after { opacity: 0; transition: opacity 250ms 1050ms; }
  body.tp-shell .tp-a .watch.js .st.seen .flow::before { transform: scaleY(1); }
  body.tp-shell .tp-a .watch.js .st.seen .flow::after { opacity: 1; }
  /* The puppy: slides in, the bubble pops, then the head tilts now and then while the beat is current. */
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .bubble, body.tp-shell .tp-a .watch.is-staged .st.turn.on .bubble { animation: w-pop 520ms 620ms var(--ease-story) both; }
  body.tp-shell .tp-a .watch.js .st.turn .bubble li { opacity: 0; }
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .bubble li, body.tp-shell .tp-a .watch.is-staged .st.turn.on .bubble li { animation: w-rise 460ms var(--ease-story) both; }
  body.tp-shell .tp-a .watch.js .st.turn .bubble li:nth-child(1) { animation-delay: 900ms; }
  body.tp-shell .tp-a .watch.js .st.turn .bubble li:nth-child(2) { animation-delay: 1060ms; }
  body.tp-shell .tp-a .watch.js .st.turn .bubble li:nth-child(3) { animation-delay: 1220ms; }
  /* The warning lands with a short nudge, and each mark pops in turn. */
  body.tp-shell .tp-a .watch.js .st.end.seen .ask.alert { animation: w-nudge 520ms 700ms ease-in-out both; }
  body.tp-shell .tp-a .watch.js .st.end .ask.alert > div::before { transform: scale(0); }
  body.tp-shell .tp-a .watch.js .st.end.seen .ask.alert > div::before { animation: w-pop-mark 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(500ms + var(--i, 0) * 120ms); }
  @keyframes w-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px) rotate(-0.6deg); } 50% { transform: translateX(5px) rotate(0.4deg); } 75% { transform: translateX(-3px); } }
  @keyframes w-pop-mark { from { transform: scale(0); } to { transform: scale(1); } }
  /* The character at the turn: slides in, then tilts its head, blinks and wags while the beat is current. */
  body.tp-shell .tp-a .watch.js .st.turn .pup { opacity: 0; transform: translateX(80px); }
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .pup, body.tp-shell .tp-a .watch.is-staged .st.turn.on .pup { animation: w-pup-in 760ms var(--ease-story) both; }
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .pup .head, body.tp-shell .tp-a .watch.is-staged .st.turn.on .pup .head { animation: w-tilt 4.2s 700ms ease-in-out infinite; }
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .pup .eyes, body.tp-shell .tp-a .watch.is-staged .st.turn.on .pup .eyes { animation: w-blink 4.2s 1.6s infinite; }
  body.tp-shell .tp-a .watch.js:not(.is-staged) .st.turn.seen .pup .tail, body.tp-shell .tp-a .watch.is-staged .st.turn.on .pup .tail { animation: w-wag 420ms 760ms ease-in-out 8 alternate; }
  /* Watch cards: each illustration pops out of its card, then does the one thing it is about. */
  body.tp-shell .tp-a .watch.js .wart { opacity: 0; }
  body.tp-shell .tp-a .watch.js .st.seen .wart { animation: w-art-in 720ms 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-1 .bow { animation: w-bounce 520ms 1000ms ease-in-out 6 alternate; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-1 .tail { animation: w-wag 300ms 1000ms ease-in-out 12 alternate; }
  body.tp-shell .tp-a .watch.js .wart-2 .trend, body.tp-shell .tp-a .watch.js .wart-3 .loop { stroke-dasharray: 1; stroke-dashoffset: 1; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-2 .trend { animation: w-draw 1300ms 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-2 .head { animation: w-nod 1300ms 900ms ease-in-out 2; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-3 .loop { animation: w-draw 900ms 1000ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
  body.tp-shell .tp-a .watch.js .st.seen .wart-3 .head { animation: w-tilt 4.2s 1400ms ease-in-out 3; }
  @keyframes w-art-in { from { opacity: 0; transform: translateY(18px) scale(0.86) rotate(-5deg); } to { opacity: 1; transform: none; } }
  @keyframes w-bounce { from { transform: none; } to { transform: translateY(-4px) rotate(-1.5deg); } }
  @keyframes w-nod { 0%, 100% { transform: none; } 30% { transform: rotate(10deg); } 60% { transform: rotate(-4deg); } }
  @keyframes w-tilt { 0%, 100% { transform: none; } 10%, 30% { transform: rotate(-15deg); } 42% { transform: rotate(7deg); } 54% { transform: none; } }
  @keyframes w-blink { 0%, 90%, 100% { transform: none; } 93% { transform: scaleY(0.1); } }
  @keyframes w-wag { from { transform: rotate(-8deg); } to { transform: rotate(16deg); } }
  @keyframes w-pup-in { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
  @keyframes w-pop { from { opacity: 0; transform: scale(0.86) translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Guides in preparation: listed in their group, never linked (Drafts awaiting professional review). */
body.tp-shell .tp-a .row.is-soon { cursor: default; }
body.tp-shell .tp-a .row.is-soon .t, body.tp-shell .tp-a .row.is-soon .my { color: var(--muted); }
body.tp-shell .tp-a .row.is-soon:hover .t { text-decoration: none; }
body.tp-shell .tp-a .row.is-soon .g { color: var(--muted); font-weight: 600; }
body.tp-shell .tp-a .soon-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px dashed #C9B9A3; border-radius: 999px; color: var(--rust); font: 600 12px/1.5 var(--text); vertical-align: 1px; }

/* 2. How a guide reads */
body.tp-shell .tp-a .reads { background: var(--surface); padding: 80px 0; border-top: 1px solid var(--rule); }
body.tp-shell .tp-a .reads h2 { font-size: clamp(28px, 1.2vw + 18px, 38px); font-weight: 560; letter-spacing: -0.02em; max-width: 20ch; }
body.tp-shell .tp-a .reads .intro-line { margin-top: 12px; color: var(--muted); max-width: 40em; }
body.tp-shell .tp-a .sheet { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 0; grid-auto-flow: row dense; }
body.tp-shell .tp-a .pair { display: contents; }
body.tp-shell .tp-a .pair .ex { grid-column: 1; grid-row: auto; position: relative; padding: 22px 64px 22px 34px; background: var(--raised); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color 200ms ease; }
body.tp-shell .tp-a .pair.first .ex { border-top: 1px solid var(--rule); padding-top: 30px; }
body.tp-shell .tp-a .pair.last .ex { padding-bottom: 30px; }
/* The bracket: a pen line on the right edge, exactly as tall as the part it names. */
body.tp-shell .tp-a .pair .ex::after { content: ""; position: absolute; top: 14px; bottom: 14px; right: 18px; width: 9px; border: 2.5px solid var(--mark); border-left: 0; border-radius: 0 8px 8px 0; }
body.tp-shell .tp-a .pair.first .ex::after { top: 22px; } body.tp-shell .tp-a .pair.last .ex::after { bottom: 22px; }
body.tp-shell .tp-a .pair .note { grid-column: 2; display: flex; align-items: center; gap: 10px; align-self: center; margin: 0 0 0 -14px; padding: 8px 0; font: 500 19px/1.35 var(--display); font-variation-settings: var(--axes); transition: color 200ms ease; }
body.tp-shell .tp-a .pair .note .arrow { flex: none; width: 60px; height: 24px; overflow: visible; }
body.tp-shell .tp-a .pair .note .arrow path { fill: none; stroke: var(--mark); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
body.tp-shell .tp-a .pair:hover .ex { background: #FFF8EE; }
body.tp-shell .tp-a .pair:hover .note { color: var(--rust); }
body.tp-shell .tp-a .excap { margin-top: 10px; color: var(--muted); font-size: 14px; }
/* Excerpt switcher (tabs as plain text with a pen underline, not pills) */
body.tp-shell .tp-a .extabs { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
body.tp-shell .tp-a .extabs .tl { color: var(--muted); font: 600 14px/1.3 var(--text); }
body.tp-shell .tp-a .tabrow { display: flex; flex-wrap: wrap; gap: 2px 4px; }
body.tp-shell .tp-a .tabrow button { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--muted); font: 600 16px/1 var(--text); cursor: pointer; border-bottom: 3px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
body.tp-shell .tp-a .tabrow button:hover { color: var(--ink); }
body.tp-shell .tp-a .tabrow button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--mark); }
body.tp-shell .tp-a .exwrap .ex { transition: opacity 140ms var(--ease-out); }
body.tp-shell .tp-a .exwrap.swapping .ex, body.tp-shell .tp-a .exwrap .sheet.swapping .ex { opacity: 0.25; }
/* Notes that lead into the guide */
body.tp-shell .tp-a .note-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; }
body.tp-shell .tp-a .note-link:hover, body.tp-shell .tp-a .note-link:focus-visible { color: var(--action); text-decoration-color: currentColor; }
/* Scope peek under the photo (desktop) */
body.tp-shell .tp-a .peek { min-height: 3.2em; margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--action); color: var(--ink); font-size: 15px; line-height: 1.5; opacity: 0; transition: opacity 200ms var(--ease-out); }
body.tp-shell .tp-a .peek.on { opacity: 1; }
body.tp-shell .tp-a .peek .pk-t { display: block; color: var(--action); font: 600 13px/1.3 var(--text); }
body.tp-shell .tp-a .ex .gt { font: 600 13px/1.3 var(--text); color: var(--rust); }
body.tp-shell .tp-a .ex .ans { margin-top: 8px; font: 400 20px/1.5 var(--display); font-variation-settings: var(--axes); }
body.tp-shell .tp-a .ex .fit { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--action); font-size: 15.5px; }
body.tp-shell .tp-a .ex .else { margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--rust); font-size: 15.5px; }
body.tp-shell .tp-a .ex .step { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 18px; background: var(--action); color: #fff; border-radius: 8px; font: 600 16px/1.2 var(--text); text-decoration: none; }
body.tp-shell .tp-a .ex .step:hover { background: var(--action-dark); }
body.tp-shell .tp-a .ex .sym { font: 500 18px/1.35 var(--display); }
body.tp-shell .tp-a .ex dl { margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-size: 15.5px; }
body.tp-shell .tp-a .ex dt { font-weight: 700; color: var(--action-dark); }
body.tp-shell .tp-a .ex dd { margin: 0; }
body.tp-shell .tp-a .ex .bound { font-size: 15.5px; border-top: 3px double var(--ink); padding-top: 12px; }
body.tp-shell .tp-a .ex .src { margin-top: 10px; color: var(--muted); font-size: 14px; }
body.tp-shell .tp-a .ex .gt + .sym { margin-top: 8px; }
body.tp-shell .tp-a .ex .stx { margin: 6px 0 16px; font-size: 15.5px; max-width: 36em; }
body.tp-shell .tp-a .ex .srcl { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 0; font-size: 15px; }
body.tp-shell .tp-a .ex .srcl a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--rule); }
body.tp-shell .tp-a .ex .srcl span { color: var(--muted); font-size: 13.5px; }
body.tp-shell .tp-a .reads .more { margin-top: 28px; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* 3. Scope */
body.tp-shell .tp-a .scope { padding: 80px 0; }
body.tp-shell .tp-a .scope .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
body.tp-shell .tp-a .scope h2 { grid-column: 1 / -1; font-size: 30px; font-weight: 560; margin-bottom: 22px; }
body.tp-shell .tp-a .scope .big { font: 400 clamp(21px, 0.8vw + 16px, 27px)/1.4 var(--display); font-variation-settings: var(--axes); }
body.tp-shell .tp-a .scope ul { margin: 10px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ink); list-style: none; display: grid; gap: 8px; }

@media (max-width: 1023px) {
  body.tp-shell .tp-a .hero .wrap { display: block; }
  body.tp-shell .tp-a .intro { position: static; }
  body.tp-shell .tp-a .intro .lab-frame, body.tp-shell .tp-a .intro .lab-cap, body.tp-shell .tp-a .intro .peek { display: none; }
  body.tp-shell .tp-a .contents { margin-top: 32px; }
  body.tp-shell .tp-a .row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
  body.tp-shell .tp-a .row .thumb { display: block; width: 56px; height: 56px; object-fit: cover; }
  body.tp-shell .tp-a .sheet { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 767px) {
  body.tp-shell .tp-a .hero { padding: 22px 0 40px; }
  body.tp-shell .tp-a .intro h1 { font-size: 34px; }
  body.tp-shell .tp-a .intro .lead, body.tp-shell .tp-a .intro .lab-frame, body.tp-shell .tp-a .intro .lab-cap { display: none; }
  body.tp-shell .tp-a .lead-m { display: block !important; margin-top: 24px; color: var(--muted); font-size: 16px; }
  body.tp-shell .tp-a .contents { margin-top: 22px; }
  body.tp-shell .tp-a .contents h2 { font-size: 24px; }
  body.tp-shell .tp-a .group { margin-top: 20px; }
  body.tp-shell .tp-a .row { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0; min-height: 76px; }
  body.tp-shell .tp-a .row .thumb { display: block; grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: cover; }
  body.tp-shell .tp-a .row .s { font-size: 18px; display: block; }
  body.tp-shell .tp-a .row .s .dots { display: none; }
  body.tp-shell .tp-a .row .g { font-size: 13px; }
  body.tp-shell .tp-a .reads, body.tp-shell .tp-a .scope { padding: 52px 0; }
  body.tp-shell .tp-a .sheet { display: block; }
  body.tp-shell .tp-a .pair { display: block; }
  body.tp-shell .tp-a .pair .note { margin: 22px 0 8px; padding: 0; font-size: 17px; }
  body.tp-shell .tp-a .pair .note .arrow { width: 34px; height: 24px; transform: rotate(-90deg) scaleY(-1); }
  body.tp-shell .tp-a .pair .ex { padding: 18px 44px 18px 16px; border-top: 1px solid var(--rule); }
  body.tp-shell .tp-a .pair .ex::after { right: 12px; }
  body.tp-shell .tp-a .ex dl { grid-template-columns: 1fr; }
  body.tp-shell .tp-a .scope .wrap { display: block; }
  body.tp-shell .tp-a .scope .big { margin-bottom: 18px; }
}
body.tp-shell .tp-a .lead-m { display: none; }