/* My SEO system (2026-10-11). The brand is Hayden's own: get found, get understood, get chosen.
   The board is the whole system on one screen: three columns, five labeled blocks each, every block a
   link to its detail. Colors hold one meaning: blue is found, green is understood, red is chosen. */
.sysp-hero { padding-block: clamp(20px, 5vw, 56px) clamp(32px, 5vw, 64px); }
.sysp-hero h1 { margin: 0; max-width: 18em; font-size: var(--h1-page); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; font-stretch: 112%;}

.board { display: grid; gap: 14px; margin-top: 28px; padding: 8px; background: #0e1014;
  border-radius: 3px; box-shadow: inset 0 0 0 2px #2a2e38; }
@media (min-width: 860px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; } }
.board-col { --tile: var(--piece-j); --tile-ink: #0d2236; display: grid; grid-template-rows: auto 1fr; gap: 6px; min-width: 0; }
.board-col--s { --tile: var(--piece-s); --tile-ink: #1d2a0a; } .board-col--z { --tile: var(--piece-z); --tile-ink: #2c0a04; }
.board-head { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; }
.board-head a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px 4px; color: var(--bone); text-decoration: none; }
@media (hover: hover) { .board-head a:hover { color: var(--tile); } }
.board-n { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--tile); color: var(--tile-ink); font-size: .85rem; font-weight: 800; border-radius: 2px; }
.board-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.board-pieces li:last-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .board-pieces { grid-template-columns: 1fr; } }
.board .board-piece { display: flex; align-items: center; min-height: 52px; height: 100%; padding: 8px 10px; background: var(--tile); color: var(--tile-ink);
  font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none; border-radius: 2px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), inset 0 3px 0 rgba(255, 255, 255, .22); }
@media (min-width: 700px) { .board-piece { min-height: 60px; padding: 10px 14px; } }
@media (hover: hover) { .board .board-piece:hover { filter: brightness(1.08); } }
.board-piece:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
.sysp-also { margin: 18px 0 0; color: var(--bone-soft); }
.sysp-also a { color: var(--number); font-weight: 700; }

/* One section per outcome; its five pieces as cards. The cards are not links, so they sit flat;
   only the two links at the bottom of each card behave like links. */
.stage { --tile: var(--piece-j); padding-block: var(--section); scroll-margin-top: 72px; }
.stage--s { --tile: var(--piece-s); } .stage--z { --tile: var(--piece-z); }
.paper--alt { background: #e7ebef; }
.stage-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; max-width: 60em; }
.stage-piece { grid-row: span 2; }
.stage-n { margin: 0; font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.stage-head h2 { margin: 0; }
.stage-q { grid-column: 1 / -1; margin: 14px 0 0; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; font-weight: 700; color: var(--ink); }
.stage-plain { grid-column: 1 / -1; margin: 8px 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.pieces { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
/* Five cards, always whole rows: 2+2+1 (the last one wide) on tablets, 3+2 on wide screens. */
@media (min-width: 760px) { .pieces { grid-template-columns: repeat(2, 1fr); } .piece:last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .pieces { grid-template-columns: repeat(6, 1fr); } .piece { grid-column: span 2; } .piece:nth-child(n+4) { grid-column: span 3; } }
.piece { display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; gap: 12px; padding: 20px 22px; background: var(--sheet, #fff); border-top: 6px solid var(--tile);
  border-radius: 3px; box-shadow: 0 1px 0 var(--paper-line), 0 8px 20px rgba(20, 22, 28, .07); scroll-margin-top: 80px; }
.piece:target { box-shadow: 0 0 0 3px var(--tile), 0 8px 20px rgba(20, 22, 28, .12); }
.piece h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.piece-ask, .piece-think { margin: 0; line-height: 1.55; }
.piece-ask { font-weight: 600; color: var(--ink); }
.piece-ask span, .piece-think > span { display: block; margin-bottom: 2px; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.piece-think ul { margin: 0; padding-left: 1.1em; color: var(--ink-soft); }
.piece-think li + li { margin-top: 4px; }
.piece-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding-top: 10px; border-top: 1px solid var(--paper-line); }
.piece-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--work-ink); font-weight: 700; }
.sysp-next { padding-block: var(--section); }
.sysp .think-system, .sysp .think-learn, .sysp .think-projects { scroll-margin-top: 72px; }
.piece-example { margin: 0; padding: 10px 12px; background: #eef1f4; border-radius: 3px; line-height: 1.55; color: var(--ink); }
.piece-example span { display: block; margin-bottom: 2px; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.piece-example a { color: var(--work-ink); font-weight: 700; }
.piece-links-label { display: inline-flex; align-items: center; min-height: 44px; margin-right: -6px; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
/* More proof: amber means proof, so each line carries an amber block. */
.piece-proof { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.piece-proof li { position: relative; padding-left: 20px; line-height: 1.55; color: var(--ink); }
.piece-proof li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--proof); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.piece-proof b { display: block; font-size: .82rem; color: var(--number-ink); }
.piece-proof span { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-soft); }

/* How the pieces compound: one site's chain, each link in its outcome's color, stacking like rows. */
.chain { padding-block: var(--section); }
.chain-links { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: chain; }
@media (min-width: 1000px) { .chain-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.chain-link { --tile: var(--step); --tile-ink: #1d2027; position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; background: var(--tile); color: var(--tile-ink);
  border-radius: 3px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .35); }
.chain-link--found { --tile: var(--found); --tile-ink: #0d2236; } .chain-link--understood { --tile: var(--understood); --tile-ink: #1d2a0a; } .chain-link--chosen { --tile: var(--chosen); --tile-ink: #2c0a04; }
@media (min-width: 1000px) { .chain-link:nth-child(2) { margin-top: 24px; } .chain-link:nth-child(3) { margin-top: 48px; } .chain-link:nth-child(4) { margin-top: 72px; } .chain-link:nth-child(5) { margin-top: 96px; } }
.chain-n { display: grid; place-items: center; width: 28px; height: 28px; background: rgba(20, 22, 28, .85); color: var(--bone); font-weight: 800; border-radius: 2px; }
.chain-link h3 { margin: 0; font-size: 1.2rem; }
.chain-link h3 a { color: inherit; }
.chain-link p { margin: 0; line-height: 1.5; font-weight: 600; }
.chain-link .chain-src { font-size: .8rem; font-weight: 700; }
.chain-more { margin: 22px 0 0; }
.chain-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--number); font-weight: 800; }

/* The measurement layer: three steps, the first with the tools. */
.measure { padding-block: var(--section); }
.measure-layers { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .measure-layers { grid-template-columns: 1fr 1fr; } .measure-layer:first-child { grid-column: 1 / -1; } }
.measure-layer { display: grid; align-content: start; gap: 8px; padding: 22px; background: var(--sheet, #fff); border-top: 6px solid var(--proof); border-radius: 3px; box-shadow: 0 1px 0 var(--paper-line), 0 8px 20px rgba(20, 22, 28, .07); }
.measure-n { font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.measure-layer h3 { margin: 0; font-size: 1.3rem; }
.measure-layer p { margin: 0; line-height: 1.6; color: var(--ink); }
.measure-tools { display: grid; gap: 8px 32px; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .measure-tools { grid-template-columns: repeat(2, 1fr); } }
.measure-tools li { position: relative; padding-left: 20px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.measure-tools li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--ink-soft); }

/* Proof studs (2026-10-11): one amber block per dated proof point on each board piece; an outlined
   block where a piece has none yet. Amber means proof, everywhere. */
.board .board-piece { justify-content: space-between; gap: 8px; }
.studs { display: inline-flex; flex-wrap: wrap; gap: 3px; flex: none; max-width: 52px; justify-content: flex-end; }
.studs i { width: 9px; height: 9px; background: var(--proof); box-shadow: 0 0 0 1.5px rgba(20, 22, 28, .7); }
.studs i.stud-empty { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 22, 28, .55); }
.sysp-key { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--bone-soft); }
.sysp-key .studs { max-width: none; }

/* The compounding chain: each step's marker is a stack that grows by one row, bottom up. */
.chain-stack { display: flex; flex-direction: column-reverse; gap: 3px; width: 48px; }
.chain-row { display: block; height: 9px; background: var(--step); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1.5px rgba(20, 22, 28, .6); }
.chain-row--found { background: var(--found); } .chain-row--understood { background: var(--understood); } .chain-row--chosen { background: var(--chosen); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chain-stack .chain-row:last-child { animation: row-lock linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    @keyframes row-lock { 0% { transform: translateY(-36px); } 100% { transform: none; } }
    .chain-stack .chain-row:last-child { animation-timing-function: steps(4, end); }
  }
}
.piece-field { margin: 0; padding: 10px 12px; border-left: 0; background: #f3f0e8; border-radius: 3px; line-height: 1.55; color: var(--ink); }
.piece-field span { display: block; font-size: .82rem; font-weight: 800; color: var(--ink-soft); }
.piece-field a { color: var(--work-ink); font-weight: 700; white-space: nowrap; }
/* 2026-10-12: two piece names ran past their block at 320. */
.board-piece-name { hyphens: auto; -webkit-hyphens: auto; min-width: 0; }
@media (max-width: 359px) { .board .board-piece { font-size: .85rem; padding: 8px 6px; } }
/* 2026-10-12: the page ran 33,637px on a phone. Each card keeps its question, example and lead proof
   open; the thinking, field note and extra proof fold behind one disclosure. */
.piece-proof--lead { position: relative; padding-left: 20px; line-height: 1.55; color: var(--ink); }
.piece-proof--lead::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--proof); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.piece-more { display: grid; gap: 12px; }
.piece-more > summary { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 750; cursor: pointer; text-decoration: underline; text-decoration-color: var(--paper-line, #c3cad3); text-underline-offset: .2em; }
.piece-more[open] > summary { margin-bottom: 4px; }
/* Question and plain line sit under the heading, sharing its left edge (2026-10-12 reading-column rule). */
@media (min-width: 600px) { .stage-head > :is(.stage-q, .stage-plain) { grid-column: 2; } }

/* The six pillars (2026-10-12 rebuild). Hero board: six tiles, a letter block and the outcomes each serves. */
.pboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; max-width: var(--measure); margin: 24px auto 0; padding: 0; list-style: none; }
.pboard-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; background: var(--field-2); border-top: 4px solid #d7dbe3; color: var(--bone); text-decoration: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); }
@media (hover: hover) { .pboard-tile:hover { background: #272b34; } }
.pboard-letter, .pillar-letter { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--bone); color: #1d2027; font: 850 1rem/1 var(--face); border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.pboard-name { font-weight: 750; line-height: 1.25; }
.pboard-oc { display: flex; gap: 3px; }
.oc-dot { display: block; width: 10px; height: 10px; border-radius: 2px; }
.oc-dot--found, .oc--found { --oc: #6aa9d8; } .oc-dot--understood, .oc--understood { --oc: #8fb04a; } .oc-dot--chosen, .oc--chosen { --oc: #e0563b; }
.oc-dot { background: var(--oc); }
/* Pillar cards: one column on phones, two on wide screens; the quote is his own words, dated. */
.pillars { padding-block: var(--section, 64px); }
.pillar-list { display: grid; gap: 18px; max-width: 1180px; margin: 28px auto 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .pillar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { display: grid; align-content: start; gap: 10px; padding: 18px 20px; background: var(--sheet, #fff); border: 2px solid var(--ink, #1d2027); border-radius: 6px; box-shadow: 5px 5px 0 var(--step, #c9ced8); scroll-margin-top: 80px; }
.pillar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.oc { padding: 3px 8px; color: #1d2027; border-radius: 3px; font-size: .85rem; font-weight: 750; }
.oc--found { background: #dceaf6; } .oc--understood { background: #e5edd3; } .oc--chosen { background: #f8d9d2; }
.pillar h3 { margin: 0; font: 800 clamp(1.25rem, 1rem + .9vw, 1.6rem)/1.15 var(--face); }
.pillar-quote { margin: 0; padding: 0; }
.pillar-quote p { margin: 0; font-size: 1.08rem; font-style: italic; line-height: 1.5; }
.pillar-quote footer { margin-top: 4px; color: var(--ink-soft); font-size: .9rem; }
.pillar-ex { margin: 0; line-height: 1.55; }
.pillar-ex a, .pillar-shown a { font-weight: 700; text-underline-offset: .2em; }
.pillar-shown { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
/* One disclosure style for the whole page: a full-width row with a clear plus that turns to a minus. */
.pillar-more > summary, .piece-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; background: var(--paper-2, #ecebe5); border: 2px solid var(--ink, #1d2027); border-radius: 4px; font-weight: 750; text-decoration: none; cursor: pointer; list-style: none; }
.pillar-more > summary::-webkit-details-marker, .piece-more > summary::-webkit-details-marker { display: none; }
.pillar-more > summary::after, .piece-more > summary::after { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink, #1d2027); color: #fff; font: 850 1.1rem/1 var(--face); border-radius: 3px; }
.pillar-more[open] > summary::after, .piece-more[open] > summary::after { content: "-"; }
@media (hover: hover) { .pillar-more > summary:hover, .piece-more > summary:hover { background: #e3e1d9; } }
.pillar-more-n { margin-left: auto; color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.pillar-more dl { margin: 12px 2px 4px; }
.pillar-more dt { margin-top: 10px; font-weight: 800; }
.pillar-more dd { margin: 2px 0 0; color: var(--ink-soft); line-height: 1.5; }
.piece-part { margin: -4px 0 6px; font-size: .95rem; color: var(--ink-soft); } .piece-part a { font-weight: 750; } .piece-ask { font-weight: 700; }
.piece-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: .95rem; } .piece-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: inherit; }

/* Two of Hayden's own messages under each pillar (2026-10-12: "did all of our hardcore prompt collection work pay off?
   i'm not seeing that system show itself in a strong enough way"). Word for word, dated, linked to the library. */
.pillar-prompts { display: grid; gap: 8px; margin: 12px 0 4px; padding: 0; list-style: none; }
.pillar-prompts a { display: grid; gap: 4px; padding: 10px 12px; background: rgba(0,0,0,.04); border-radius: 6px; color: inherit; text-decoration: none; }
.pillar-prompts q { font: 500 .95rem/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; quotes: none; }
.pillar-prompts span { font-size: .8rem; font-weight: 700; opacity: .7; }
@media (hover: hover) { .pillar-prompts a:hover { background: rgba(0,0,0,.08); } }
/* "Where it shows up" as tidy chips instead of a comma list that wrapped badly on phones (Hayden, 2026-10-12). */
.pillar-shown { margin-top: 12px; }
.pillar-shown-h, .piece-links-label { display: block; margin: 0 0 6px; font-size: .8rem; font-weight: 800; color: #47505f; }
.pillar-shown ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pillar-shown a, .piece-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.15); border-radius: 18px; font-size: .88rem; font-weight: 650; color: inherit; text-decoration: none; }
.piece-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (hover: hover) { .pillar-shown a:hover, .piece-links a:hover { background: rgba(0,0,0,.1); } }

/* Accordions instead of a wall (Hayden, 2026-10-12: "the system page is also very broken, and is a wall of text, make
   sure you're using accordions"): each pillar, piece and step folds to its name and one line; the first pillar and
   first step start open. Links to a piece or pillar open it (menu.js). */
.acc > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 48px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ""; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231d2027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  border: 1.5px solid rgba(29, 32, 39, .35);
}
.acc[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .acc > summary::after { transition: transform var(--m-in, 200ms) var(--ease-out, ease); } }
.acc-title { display: grid; gap: 4px; min-width: 0; }
.acc-title h3 { margin: 0; }
.acc-sub { font-size: .95rem; line-height: 1.45; color: #47505f; font-weight: 500; }
.acc[open] > summary { margin-bottom: 10px; }
.piece-acc[open] .acc-sub { color: inherit; }
.step-acc > summary.sys-head { display: flex; flex-wrap: wrap; }
.step-acc > summary.sys-head::after { order: 9; }
@media (hover: hover) { .acc > summary:hover::after { border-color: #1d2027; } }
.pieces { align-items: start !important; }
.pieces > .piece { display: block !important; min-height: 0 !important; height: auto !important; }
.pillar-list > .pillar, .sys > .sys-step { display: block !important; }
.pillar-prompts-h { margin: 12px 0 0; font-size: .85rem; font-weight: 750; color: #47505f; }