/* pfp-pages.css: Plan for Planning page-level styles, loaded after
   pfp-tokens-v1.1.css. Colors come only from the token variables in
   :root (pfp-tokens-v1.1.css); no new hex values in this file. */

/* ---- Hero with photographic backdrop (JR direction, Oct 17 2026) ----
   Plate 1.2, The White City, full bleed. The text sits on the solid
   Paper panel (.pfp-hero-panel in the tokens file); the plate credit
   sits on a solid Slate chip. Both keep every word fully legible over
   the photograph. This overrides the handoff's texture-only hero rule
   for the hero only; see DESIGN-NOTES. */
.pfp-hero--image{position:relative;background:var(--pfp-slate);overflow:hidden}
.pfp-hero-media{position:absolute;inset:0;display:block}
.pfp-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.pfp-hero--image .pfp-hero{position:relative;z-index:1;padding-top:clamp(54px,7vw,100px);padding-bottom:clamp(110px,11vw,150px)}
.pfp-hero--image .pfp-hero-panel{box-shadow:0 30px 70px -20px rgba(15,23,42,.55)}


@media (max-width:640px){
  /* Stack: the plate gets its own band on top, the panel overlaps it,
     and the credit chip sits beneath the panel. */
  .pfp-hero--image{display:flex;flex-direction:column}
  .pfp-hero-media{position:relative;inset:auto;height:290px;flex:none}
  .pfp-hero-media img{object-position:center 28%}
  .pfp-hero--image .pfp-hero{padding-top:0;padding-bottom:22px;margin-top:-54px}
  
}

/* ============ Phase 2: multi-page system (Oct 17, 2026) ============ */

/* Nav */
.pfp-nav { border-top: 1px solid var(--pfp-border); }
.pfp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.35rem; }
.pfp-nav a { display: inline-block; padding: 0.55rem 0.1rem; color: var(--pfp-slate); text-decoration: none; font-weight: 600; font-size: 0.98rem; }
.pfp-nav a:hover { color: var(--pfp-link); text-decoration: underline; text-underline-offset: 4px; }
.pfp-nav a[aria-current="page"] { color: var(--pfp-link); box-shadow: inset 0 -3px 0 var(--pfp-cyber); }

/* Subpage heads */
.pfp-pagehead { padding: 2.6rem 0 2.2rem; }
.pfp-pagehead h1 { font-size: clamp(2rem, 4.6vw, 3rem); max-width: 22em; }
.pfp-pagehead .pfp-lede { margin-top: 0.9rem; }

/* Long-form prose column */
.pfp-prose { max-width: 68ch; }
.pfp-prose p { margin: 0 0 1.05rem; }
.pfp-prose h2 { margin: 2rem 0 0.8rem; }
.pfp-prose h2:first-child { margin-top: 0.4rem; }

/* Book pull quotes in site copy */
.pfp-pull { margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.2rem; border-left: 4px solid var(--pfp-cyber); }
.pfp-pull p { font-size: 1.22rem; line-height: 1.5; font-weight: 600; color: var(--pfp-slate); margin: 0; }
.pfp-pull cite { display: block; margin-top: 0.55rem; font-style: normal; font-size: 0.9rem; color: var(--pfp-text-2); }

/* Why page */
.pfp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Story acts */
.pfp-story-act { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; margin: 0 0 3rem; }
.pfp-story-act .pfp-figure { margin: 0.4rem 0 0; }
.pfp-story-act .pfp-prose h2 { margin-top: 0.3rem; }
.pfp-sketch img { border: 1px solid var(--pfp-border); }

/* Method */
.pfp-pillar-card h3 { font-size: 1.45rem; }
.pfp-gloss { font-weight: 700; color: var(--pfp-slate-mid); margin: 0.2rem 0 0.8rem; }
.pfp-frombook { color: var(--pfp-slate); }
.pfp-practice { margin-top: 1.1rem; padding: 1rem 1.1rem; background: var(--pfp-tint); border-radius: var(--pfp-radius); }
.pfp-practice h4 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pfp-slate); margin: 0 0 0.5rem; }
.pfp-practice p { margin: 0; font-size: 0.98rem; }

/* Infographic figures */
.pfp-infofig { background: var(--pfp-white); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius); padding: 1.4rem 1.4rem 1.1rem; margin: 2.2rem 0; }
.pfp-infofig svg { width: 100%; height: auto; display: block; }
.pfp-fig-dl { margin: 0.9rem 0 0; font-size: 0.95rem; }
.pfp-figtable { overflow-x: auto; margin-bottom: 0.6rem; }
.pfp-figtable table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; background: var(--pfp-white); }
.pfp-figtable th, .pfp-figtable td { border: 1px solid var(--pfp-border); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.pfp-figtable thead th { background: var(--pfp-tint); color: var(--pfp-slate); }
.pfp-figtable tbody tr:last-child { background: var(--pfp-tint); font-weight: 600; }

/* Reader pages (ICS report layout) */
.pfp-reader-title { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin: 0.4rem 0 1.8rem; max-width: 24em; }
.pfp-reader { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.6rem; align-items: start; }
.pfp-reader-side { position: sticky; top: 1.2rem; display: grid; gap: 1.4rem; }
.pfp-reader-toc { background: var(--pfp-white); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius); padding: 1.1rem 1.2rem; }
.pfp-reader-toc-title { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.6rem; }
.pfp-reader-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.pfp-reading-col { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; }
.pfp-reading-col p { margin: 0 0 1.1rem; }
.pfp-reading-col h3 { margin: 2.2rem 0 0.9rem; font-size: 1.5rem; }
.pfp-reading-col li { margin-bottom: 0.5rem; }
.pfp-reading-col .pfp-pull { margin: 1.8rem 0; }
.pfp-platefig img { border: 1px solid var(--pfp-border); }
.pfp-prevnext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--pfp-border); }
.pfp-prevnext-spacer { flex: 0 0 auto; }

/* Link cards (About) */
.pfp-linkcards { margin-top: 1.6rem; }

/* Donate band */
.pfp-donate { margin-top: 2.6rem; background: var(--pfp-tint); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius); padding: 2rem 2.2rem; }
.pfp-donate h2 { margin-top: 0; }
.pfp-donate p { max-width: 62ch; }
.pfp-donate-note { font-size: 0.92rem; color: var(--pfp-text-2); margin-bottom: 0; }

/* Credits */
.pfp-credits-list { display: grid; gap: 1.1rem; }
.pfp-credit-entry { display: grid; grid-template-columns: 168px 1fr; gap: 1.3rem; background: var(--pfp-white); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius); padding: 1.1rem 1.2rem; align-items: start; }
.pfp-credit-entry img { width: 168px; height: 118px; object-fit: cover; border: 1px solid var(--pfp-border); border-radius: 4px; }
.pfp-credit-entry h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.pfp-credit-entry p { margin: 0 0 0.4rem; font-size: 0.98rem; }
.pfp-credit-lic { color: var(--pfp-text-2); font-size: 0.9rem; margin-bottom: 0; }

@media (max-width: 900px) {
  .pfp-story-act { grid-template-columns: 1fr; gap: 1.2rem; }
  .pfp-reader { grid-template-columns: 1fr; gap: 1.6rem; }
  .pfp-reader-side { position: static; order: 2; }
  .pfp-credit-entry { grid-template-columns: 1fr; }
  .pfp-credit-entry img { width: 100%; height: auto; max-height: 220px; }
  .pfp-donate { padding: 1.5rem 1.2rem; }
}

/* ============ Homepage fix pass (Theo Direction v1 fixes, Oct 17 2026) ============
   JR adopted Theo's Direction v1 with the White City duotone hero kept.
   These rules implement fixes 5, 8, 9, 12, 13, 14, 16, 17, 19 and 21 for
   the homepage. Where a fix requires the kit value the reconstructed
   tokens file lacks (the 4px radius), the value is set here directly;
   colors still come only from the token variables. */

/* Fix 5: keep the title phrase "of the Plan" together; balance the wrap */
.pfp-nowrap { white-space: nowrap; }
.pfp-hero-panel h1 { text-wrap: balance; }

/* Fix 8: flat hero panel, 4px radius, no drop shadow */
.pfp-hero--image .pfp-hero-panel { border-radius: 4px; box-shadow: none; border: 1px solid var(--pfp-tint); }

/* Fix 9: buttons at the 4px kit radius (min height 44px and up already) */
.pfp-btn { border-radius: 4px; }

/* Fix 13: section markers at kit size 72px (48px on small screens) */
.pfp-marker--1, .pfp-marker--2, .pfp-marker--3, .pfp-marker--4 { width: 72px; height: 72px; }

/* Fix 14: plan-row divider at its ruled 12px height, never scaled up */
.pfp-motif--plan-row { width: auto; height: 12px; margin: 0 auto; }

/* Fix 16: footer logo rendered at the kit ratio (238 by 40) */
.pfp-footer .pfp-logo img { height: 40px; }

/* Fix 17: the four-parts strip is a real <ol> now; strip list chrome */
ol.pfp-parts { list-style: none; margin: 1.8rem 0 0; padding: 0; }

/* Go deeper band (Theo sitemap, home page) */
.pfp-deeper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.6rem; }
.pfp-deeper .pfp-card h3 { margin-top: 0; }
.pfp-deeper .pfp-card p { font-size: 0.99rem; line-height: 1.6; }
.pfp-card-link { margin-top: 0.9rem; font-family: 'DM Sans', sans-serif; font-weight: 700; }

/* Fix 21 superseded in Round 2: the Substack iframe embed rendered as an
   empty white box and was replaced by a native subscribe form; its styles
   now live in the Homepage round 2 block at the end of this file. */

/* Footer nav: footer repeats the site links, plus About / ICS and Credits */
.pfp-footer-nav { margin-top: 1.5rem; }
.pfp-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; }
.pfp-footer-nav a { color: var(--pfp-slate-light); text-decoration: none; font-size: 0.92rem; }
.pfp-footer-nav a:hover { color: var(--pfp-link); text-decoration: underline; text-underline-offset: 3px; }

/* Fix 12 support: the header button's short label, swapped in at 600px */
.pfp-btn-short { display: none; }

@media (max-width: 900px) {
  .pfp-deeper { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pfp-marker--1, .pfp-marker--2, .pfp-marker--3, .pfp-marker--4 { width: 48px; height: 48px; }
  .pfp-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pfp-nav ul::-webkit-scrollbar { display: none; }
  .pfp-nav li { flex: none; }
  .pfp-nav a { white-space: nowrap; }
  .pfp-hero--image .pfp-hero-panel { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 600px) {
  /* Fix 12: one-row header, 64px target: 36px logo, short PDF button */
  .pfp-header-in { flex-wrap: nowrap; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .pfp-header .pfp-logo img { height: 36px; }
  .pfp-btn-full { display: none; }
  .pfp-btn-short { display: inline; }
  /* Fix 19: the hero kicker fits on one line on mobile */
  .pfp-hero-panel .pfp-kicker { letter-spacing: 0.07em; font-size: 0.6rem; }
}

/* ============ Phase 2 v2: Theo Direction v1 alignment (Oct 17, 2026) ============ */
.pfp-lede-cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.95rem; font-weight: 600; color: var(--pfp-slate-mid); }
.pfp-why-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
.pfp-cn { border: 2px dashed var(--pfp-slate-mid); background: var(--pfp-tint); border-radius: var(--pfp-radius); padding: 1.2rem 1.4rem; max-width: 68ch; }
.pfp-cn-tag { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pfp-slate); }
.pfp-cn h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.pfp-cn p { margin: 0; }
.pfp-footer-nav { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #dbe4ee; }
.pfp-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; }
.pfp-footer-nav a { color: var(--pfp-slate); font-weight: 600; text-decoration: none; }
.pfp-footer-nav a:hover { color: var(--pfp-link); text-decoration: underline; text-underline-offset: 3px; }
.pfp-endorse-label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pfp-text-2); margin-bottom: 0.3rem; }
.pfp-figequiv { border-top: 1px solid var(--pfp-border); margin-top: 1rem; padding-top: 0.8rem; }
.pfp-figequiv-title { font-weight: 700; margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pfp-slate-mid); }
.pfp-figequiv p { margin: 0; font-size: 0.95rem; color: var(--pfp-slate); }
.pfp-figlabel { display: inline-block; background: var(--pfp-tint); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius); padding: 0.25rem 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--pfp-slate); }
.pfp-beat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.2rem; align-items: start; margin: 0 0 2.8rem; }
.pfp-beat .pfp-prose h2 { margin-top: 0.3rem; }
.pfp-beat-sketch { margin: 0.4rem 0 0; }
.pfp-beat-sketch img { border: 1px solid var(--pfp-border); background: var(--pfp-paper); }
.pfp-book-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.pfp-contents { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 760px; }
.pfp-contents li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--pfp-border); }
.pfp-contents-page { font-weight: 700; color: var(--pfp-slate-mid); }
.pfp-credit-entry { grid-template-columns: 168px minmax(0, 1fr); }
.pfp-credit-entry p { overflow-wrap: anywhere; }
.pfp-credit-type { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pfp-slate-mid); }
.pfp-cite h2.pfp-cite-h, .pfp-cite h3.pfp-cite-h { font-family: 'DM Sans', 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--pfp-slate); margin: 0 0 0.6rem; text-transform: none; letter-spacing: normal; }
.pfp-signoff { margin-top: 1.6rem; font-weight: 600; color: var(--pfp-slate); }
@media (max-width: 900px) {
  .pfp-why-cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .pfp-beat { grid-template-columns: 1fr; gap: 1.1rem; }
  .pfp-book-grid { grid-template-columns: 1fr; }
  .pfp-book-grid .pfp-cover { max-width: 300px; }
}

/* ============ Homepage round 2 (team review fixes, Oct 17 2026) ============
   Token variables only (base set in pfp-tokens-v1.1.css); the 4px radius
   is set literally, as in the fix pass, because the reconstructed tokens
   file lacks the kit's 4px radius token. */

/* Fix 6: two-column splits rebalance the lower page: cover beside
   Download, Cite this beside the Newsletter form. Stacks at 390. */
.pfp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 60px); align-items: start; }
.pfp-download-cover { margin: 0; width: 100%; max-width: 340px; justify-self: end; }

/* Fix 2: native Substack subscribe form, styled to the site (Paper and
   Blue Tint system, 4px controls), posting to Substack's subscribe
   endpoint; the plain Substack link stays beneath as backup. */
.pfp-subform { margin-top: 1.3rem; background: var(--pfp-white); border: 1px solid var(--pfp-tint); border-radius: 4px; padding: 1.3rem 1.4rem 1.4rem; }
.pfp-subform-label { display: block; font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--pfp-slate); margin-bottom: 0.55rem; }
.pfp-subform-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pfp-subform input[type="email"] { flex: 1 1 230px; font: inherit; color: var(--pfp-slate); background: var(--pfp-paper); border: 1px solid var(--pfp-slate-mid); border-radius: 4px; padding: 0.72rem 0.9rem; }
.pfp-subform input[type="email"]:focus-visible { outline: 3px solid var(--pfp-link); outline-offset: 2px; }
.pfp-subform .pfp-fineprint { margin-top: 0.7rem; }

/* Fix 7: the Artist's Method checklist as a working tool on the home
   page: four checkable disciplines, two columns on wide screens. */
.pfp-checklist { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pfp-check-item { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--pfp-tint); border-radius: 4px; padding: 1.05rem 1.15rem; }
.pfp-check-item input[type="checkbox"] { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; accent-color: var(--pfp-link); }
.pfp-check-item label { cursor: pointer; line-height: 1.55; }
.pfp-check-item strong { font-family: 'DM Sans', sans-serif; color: var(--pfp-slate); }

@media (max-width: 900px) {
  .pfp-split { grid-template-columns: 1fr; }
  .pfp-download-cover { justify-self: start; }
  .pfp-checklist { grid-template-columns: 1fr; }
}

:root { --pfp-border: #C4E7FF; }

.pfp-cards { display: grid; gap: 1.2rem; }
@media (min-width: 901px) {
  .pfp-cards { grid-template-columns: repeat(3, 1fr); }
  .pfp-cards--pillars { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Homepage round 3 (team review, Oct 17 2026) ============
   "What the book is": the cover sits SMALL beside the text (the big
   cover lives at Download). Scoped to the homepage variant class so
   the shared .pfp-book-grid on book.html is untouched. The text takes
   the wide track (its own .pfp-reading cap of 68ch still applies). */
.pfp-book-grid--small { grid-template-columns: minmax(0, 68ch) 200px; }
@media (max-width: 900px) {
  .pfp-book-grid--small { grid-template-columns: 1fr; }
  .pfp-book-grid--small .pfp-figure { max-width: 200px; }
}

/* ============ Homepage round 4 (JR, Oct 17 2026) ============
   The Artist's Method cards ARE the checklist: each card's pillar
   heading is the label for its own checkbox (JR: "Make the Method
   cards themselves the checklist"). Same native interaction and
   checkbox styling as the round 2 checklist section, which is
   removed; .pfp-card-check markup exists on the homepage only. */
.pfp-card-check { display: flex; align-items: center; gap: 0.7rem; margin: 0.7rem 0 0.55rem; }
.pfp-card-check h3 { margin: 0; }
.pfp-card-check input[type="checkbox"] { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--pfp-link); cursor: pointer; }
.pfp-card-check label { cursor: pointer; }