/* Parallel Path components.
   Live at https://parallelpath.studioparkside.co/_assets/css/pp.css.
   Loads after pp-tokens.css. A fork of the Studio Parkside system's
   parkside.css, carried over once. It does not link the Parkside system
   and Parkside changes are not pushed into it.

   Shared structure and every shared component: shell, header, cards,
   hero, contents list, rails, rows, pills, sections, closing card,
   theme control, breakpoints, Parallel Path color roles. Rules one
   page carries alone stay in that page's own <style> block, which
   loads after this file. Add, never rename or remove. */

/* ============================================================
   PARALLEL PATH BASE — START
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 12px;
  padding-top: calc(var(--header-h) + 12px);
}
a { color: var(--accent); text-underline-offset: 3px; }

.stack {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Fixed glass header. Parallel Path left, the client pill
     right, filled, centered against the logo. The shared date lives in
     the footer. ---------- */
.siteheader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 34px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border-bottom: 1px solid var(--outline);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .siteheader { background: var(--glass-solid); }
}
.hright { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pp-logo {
  display: block;
  height: 27px;
  width: auto;
  aspect-ratio: 1293 / 199.56;
  fill: var(--ink);
  flex: none;
}
.logo-link { display: block; flex: none; line-height: 0; text-decoration: none; border: 0; }
.pill-group { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 64px 72px;
}
.card.dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.card.dark a { color: var(--paper); }
.card.dark p { color: var(--paper); }

.botbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 28px 16px 40px;
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.botbar .pill-group { justify-content: flex-start; }
.pp-badge {
  display: block;
  height: 22px;
  width: auto;
  aspect-ratio: 510.42 / 429;
  fill: var(--ink);
  flex: none;
}

/* ---------- Wordmark at the foot. The Parallel Path wordmark across the
     full column under the footer, one tone off the ground, the bottom of
     the letters cropped by the edge of the window. Markup, after </main>:
     <div class="pp-mark" aria-hidden="true"><svg viewBox="0 0 1293 199.56"><use href="#pp-logo"></use></svg></div>
     ---------- */
.pp-mark { margin: 0 0 -12px; overflow: hidden; aspect-ratio: 1293 / 166; }
.pp-mark svg { display: block; width: 100%; height: auto; fill: color-mix(in srgb, var(--ink) 9%, var(--ground)); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.004em;
  padding: 7px 16px 6px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.pill.light { border-color: var(--outline); color: var(--ink); font-weight: 500; }
/* The shared date, last in the footer pill group. Outlined like the
   light tier, with tabular figures. */
.pill.meta {
  border-color: var(--outline);
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero ---------- */
.hero { padding: 88px 72px 80px; }
.hero-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.hero-main { flex: 1; min-width: 0; }
h1 {
  font-family: var(--headline);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: var(--ls-headline);
  font-weight: var(--w-headline);
  max-width: 13ch;
}
h1 .h1-sub { display: block; font-weight: var(--w-headline-sub); color: var(--paper); }
.hero-lede {
  margin-top: 30px;
  max-width: 46ch;
  font-family: var(--ui);
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.hero-lede + .hero-lede { margin-top: 17px; }

/* ---------- Closing card ---------- */
.close { padding: 72px; }
.close h2 {
  font-family: var(--headline);
  font-size: clamp(31px, 3.7vw, 45px);
  font-weight: var(--w-headline);
  letter-spacing: var(--ls-headline);
  line-height: 1.08;
  margin-bottom: 26px;
  color: var(--paper);
}
.close p {
  font-family: var(--lede);
  font-size: clamp(18.5px, 1.8vw, 21px);
  line-height: 1.5;
  letter-spacing: var(--ls-lede);
  max-width: 720px;
}
.close a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--paper-soft);
}
.close a:hover { border-bottom-color: var(--paper); }

/* ---------- Contents, a column beside the title ---------- */
.toc {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 320px;
  padding-top: 6px;
}
.toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 400;
  color: var(--paper);
  text-decoration: none;
  padding: 10.5px 2px 9.5px;
  letter-spacing: -0.004em;
}
.toc a + a { border-top: 1px solid var(--hairline-light); }
.toc a:hover { color: var(--paper); }
.toc-num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--paper); min-width: 26px; }

/* ---------- Sections ---------- */
.section-grid { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: baseline; }
.rail-number {
  font-family: var(--headline);
  font-size: 32px;
  font-weight: var(--w-headline-sub);
  line-height: 1;
  letter-spacing: var(--ls-headline);
  font-variant-numeric: tabular-nums;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.section-body h2 {
  font-family: var(--headline);
  font-size: clamp(31px, 3.7vw, 45px);
  font-weight: var(--w-headline);
  letter-spacing: var(--ls-headline);
  line-height: 1.08;
  margin-bottom: 30px;
  max-width: 20ch;
}
.h2-emoji {
  font-size: 0.72em;
  line-height: 1;
  margin-right: 0.18em;
  vertical-align: 0.01em;
  letter-spacing: 0;
}
/* In-page links. A hairline under the label that darkens on hover. */
.section-body a, .row-text a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}
.section-body a:hover, .row-text a:hover { border-bottom-color: var(--ink); }

.section-body p { max-width: var(--measure); margin-bottom: 25px; }
.section-body p:last-child { margin-bottom: 0; }
.section-body p strong { font-weight: var(--body-bold); }

/* Section and label intros. Direct children only, so row copy inside
   .rows and .weekbody stays Halyard. The serif only ever carries a
   sentence Michael is saying in his own voice. */
.section-body > p {
  font-family: var(--lede);
  font-size: clamp(18.5px, 1.8vw, 21px);
  line-height: 1.5;
  letter-spacing: var(--ls-lede);
  max-width: 720px;
  margin-bottom: 26px;
}
.section-body > p strong { font-weight: 600; }

/* ---------- Label, sentence case at reading size ---------- */
.label {
  font-family: var(--subhead);
  font-size: 23px;
  font-weight: var(--w-subhead);
  letter-spacing: var(--ls-subhead);
  line-height: 1.26;
  color: var(--ink);
  margin-bottom: 8px;
}
.section-body .label { margin-top: 48px; }
.section-body h2 + .label { margin-top: 5px; }
.label + .rows { margin-top: 14px; }


/* ---------- Ruled rows ---------- */
.rows {
  margin: 26px 0;
  background: var(--card-bright);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 6px 40px 6px 32px;
}
.row { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 19px 0; }
.rows .row + .row { border-top: 1px solid var(--hairline); }
.rows.flat .row { grid-template-columns: 1fr; gap: 0; }
.section-body .rows:last-child { margin-bottom: 0; }
.row-num {
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.004em;
  font-variant-numeric: tabular-nums;
  /* Match the row copy's line box so the two baselines land together.
     A padding nudge cannot do this, since the number and the copy are
     different sizes in different faces. */
  line-height: calc(var(--body-size) * var(--body-lh));
  white-space: nowrap;
}
.row-text { max-width: var(--measure); line-height: 1.52; }
.row-text strong { font-weight: var(--body-bold); letter-spacing: 0; }
.row-text p { margin: 0; }
.row-text p + p { margin-top: 10px; }
.row-text ul { margin: 0; padding-left: 19px; }
.row-text ul li::marker { content: "\00B7\2002"; }
.row-text li { margin-bottom: 7px; line-height: 1.45; }
.row-text li:last-child { margin-bottom: 0; }

.li-text { display: block; max-width: var(--measure); }

/* ---------- Month rows. Wider left column for a month name. ---------- */
.rows.months .row { grid-template-columns: 104px 1fr; }

/* ---------- Reference tiles. A point of reference for how much is in
     progress at once, for people who don't do creative work. ---------- */
.refgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 26px 0;
}
.ref {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
  background: var(--card-bright);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 26px 28px 28px;
}
.ref-lab {
  font-family: var(--subhead);
  font-size: 23px;
  font-weight: var(--w-subhead);
  letter-spacing: var(--ls-subhead);
  line-height: 1.26;
}
.ref-text {
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  margin-top: 0;
  max-width: var(--measure);
}

/* ---------- People columns. One group per tile, a checkbox per name
     marking who has met. ---------- */
.people .ref-lab { margin-bottom: 14px; }
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.004em;
}
.person + .person { border-top: 1px solid var(--hairline); }
/* Full-width card, names in three columns. */
.namegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 26px;
  padding: 14px 40px 14px 32px;
}
.namegrid .person { padding: 10px 0; }
.namegrid .person + .person { border-top: 0; }
.namegrid .person:nth-child(n+4) { border-top: 1px solid var(--hairline); }
.cbox {
  display: block;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  flex: none;
}
/* The names tick on click. Nothing is stored, so a reload returns the
   page to the state written into the markup. */
.person[role="checkbox"] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.person[role="checkbox"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.cbox.on { background: var(--ink); position: relative; }
.cbox.on::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--paper);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}

/* ---------- Mode tags. The word names the kind of work. The fill says
     whether it is happening this week: solid for yes, outline for no.
     Sized and padded to sit under the cap height of the name beside it.
     Matches .pill.solid in system/index.html. ---------- */
.tag {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 13px 3px;
  border-color: var(--ink-soft);
  color: var(--ink);
  margin-left: 9px;
  vertical-align: 2px;
}
.tag.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Name above the row copy, tag on its own line below it, so the tags
   line up as a column down the section. */
.prow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.prow-head strong { font-weight: var(--body-bold); }
.rows .row.prow { grid-template-columns: 52px 1fr 130px; }
.prow-tag { padding-top: 3px; }
.prow-tag .tag { margin-left: 0; vertical-align: 0; }

/* ---------- Weekly status. One block per meeting, newest on top.
     Older weeks get the open attribute removed so they start closed. ---------- */
.week {
  margin-top: 26px;
  background: var(--card-bright);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
}
.week + .week { margin-top: 12px; }
.week summary.weekhead {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--radius);
  padding: 22px 40px 22px 32px;
  font-family: var(--subhead);
  font-size: 23px;
  font-weight: var(--w-subhead);
  letter-spacing: var(--ls-subhead);
  line-height: 1.26;
}
.week[open] summary.weekhead {
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius) var(--radius) 0 0;
}
.week summary::-webkit-details-marker { display: none; }
.week summary.weekhead::after {
  content: "";
  width: 9px;
  height: 9px;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-3px);
  flex: none;
}
.week[open] summary.weekhead::after { transform: rotate(225deg) translateY(2px); }
.week:not([open]) summary.weekhead { color: var(--ink-soft); }
/* Body inside the week card. Inner rows drop their own card so the
   whole share reads as one surface. */
.weekbody { padding: 4px 40px 32px 32px; }
.weekbody .label { margin-top: 32px; }
/* The filled and outline tags are a visual distinction with no word on
   them, so this line is the key. It goes with the rows, not in the
   section intro, so each week's block reads on its own. */
.weeknote {
  margin: 22px 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 16px;
}
.weekbody .rows {
  margin: 16px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.weekbody .rows .row:first-child { padding-top: 0; }

/* ---------- Presentation read. Sections sit further apart and each one
     catches the top of the screen.
     Delete this block to return the page to a continuous scroll. ---------- */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: calc(var(--header-h) + 14px);
}
.stack { gap: 80px; }
.stack > .card { scroll-snap-align: start; }
@media (max-width: 820px) {
  .stack { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* ---------- Parallel Path color roles. Where the brand colors land.
     Night on light, Linen on dark, through --accent. Muted lime
     on dark only through --highlight: section numbers, contents
     numbers, the client pills, and the theme control. ---------- */
.rail-number { color: var(--highlight); }
.row-num { color: var(--accent); }
.toc-num { color: var(--accent-deep); }
.pill { border-color: var(--accent); color: var(--accent); }
.pill.light { border-color: var(--outline); color: var(--accent); }
.pill.meta { color: var(--accent); }
/* The client in the footer. Filled with the highlight, text in the contrast ink. */
.pill.filled { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); }
/* The client in the header. Outlined on light, filled with the highlight
   while dark is on, keyed off data-theme the way the theme control is. */
:root[data-theme="dark"] .siteheader .pill.light { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .siteheader .pill.light { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); font-weight: 600; }
}
/* The header pill is always filled, in both themes, whatever class the
   page gives it. Night on light, lime on dark. */
.siteheader .pill { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); font-weight: 600; }
.section-body a, .row-text a { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.section-body a:hover, .row-text a:hover { border-bottom-color: var(--accent); }
.tag.on { color: var(--ink-contrast); }
.cbox.on::after { border-color: var(--ink-contrast); }
.card.dark { background: var(--deep); border-color: var(--deep); }

/* ---------- Theme control. The P badge at the foot of the page toggles
     light and dark. It sits in a pill the height of the pills beside it:
     outline on light, filled with the highlight while dark is on, keyed off
     data-theme so it is right on first paint. ---------- */
.theme-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 13px;
  height: 30px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.theme-btn .pp-badge { fill: currentColor; height: 18px; }
.theme-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:root[data-theme="dark"] .theme-btn { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); }
:root[data-theme="dark"] .theme-btn:hover { background: color-mix(in srgb, var(--highlight) 85%, var(--ink)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn { background: var(--highlight); border-color: var(--highlight); color: var(--ink-contrast); }
}

@media (max-width: 820px) {
  body { font-size: 17px; padding: 8px; padding-top: calc(var(--header-h) + 8px); }
  .stack { gap: 8px; }
  .siteheader { padding: 0 18px; gap: 14px; }
  .hright { gap: 12px; }
  .pp-logo { height: 20px; }
  .pill { font-size: 11.5px; padding: 5px 11px 4px; }
  .siteheader .pill-group { flex-wrap: nowrap; }
  .card { padding: 40px 26px; }
  .hero { padding: 56px 26px 52px; }
  .close { padding: 40px 26px; }
  .hero-grid { flex-direction: column; gap: 0; }
  .hero-lede { font-size: 19px; margin-top: 22px; max-width: none; }
  .section-body > p { font-size: 18.5px; max-width: none; margin-bottom: 22px; }
  .close p { font-size: 18.5px; max-width: none; }
  .section-grid { grid-template-columns: 1fr; gap: 6px; }
  .rail-number { position: static; font-size: 28px; margin-bottom: 8px; }
  .rows { padding: 2px 20px; }
  .week summary.weekhead { padding: 18px 20px; font-size: 20px; }
  .weekbody { padding: 2px 20px 22px; }
  .weekbody .label { margin-top: 24px; }
  .row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .rows .row.prow { grid-template-columns: 1fr; }
  .prow-tag { padding-top: 0; margin-top: 9px; }
  .row-num { font-size: 15px; line-height: var(--body-lh); }
  .ref { grid-template-columns: 1fr; gap: 5px; }
  .toc { min-width: 0; width: 100%; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hairline-light); }
  .toc a { font-size: 15.5px; padding: 9px 0 8px; }
  .label { font-size: 20.5px; }
  .ref-lab { font-size: 20.5px; }
  .section-body .label { margin-top: 36px; }
  .rows.months .row { grid-template-columns: 1fr; }
  .refgrid { grid-template-columns: 1fr; gap: 8px; }
  .namegrid { grid-template-columns: 1fr; }
  .namegrid .person + .person { border-top: 1px solid var(--hairline); }
  .ref { padding: 22px 22px 24px; }
  .botbar { gap: 12px; padding: 20px 8px 28px; font-size: 15px; }
  /* Badge on its own line, the pills in a row beneath it, flush left. */
  .botbar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   PARALLEL PATH BASE — END
   ============================================================ */