/* How I think. Its own block: three pieces that interlock into one row (data, creativity, data),
   because the point is that neither side works alone. Every section: a plain line, then the reasoning. */
.think-hero { padding-block: clamp(20px, 5vw, 64px) clamp(32px, 5vw, 64px); }
.think-crumb { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; margin-bottom: 14px; color: var(--bone-soft); font-size: .95rem; }
.think-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
/* The full trail is still in the HTML and schema. A phone gets the useful back step, not four
   squeezed labels before the answer. The wordmark and menu provide Home and About. */
@media (max-width: 600px) { .think-crumb > :not(a:last-of-type) { display: none; } }
.think-hero h1 { margin: 0; font-size: var(--h1-page); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; font-stretch: 112%;}
.think-lede { margin: 16px 0 0; max-width: 46em; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; color: #dfe3e9; }

/* The loop: three whole blocks, one step each (2026-10-11: notched pieces read as cut-off corners). */
.loop { margin-top: 32px; }
.think-jump { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.think-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); background: var(--field-2); color: var(--bone); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 2px #3a3f4b; }

/* The two-layer copy: a plain line anyone follows, then the reasoning for people in the field. */
.plain { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 600; margin: 0 0 10px; }
.reasoning { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.reasoning span { display: block; margin-bottom: 2px; font-size: .85rem; font-weight: 800; }
.paper .reasoning { color: var(--ink-soft); } .paper .reasoning span { color: var(--ink); }
.field .reasoning { color: var(--bone-soft); } .field .reasoning span { color: var(--bone); font-weight: 800; }
.think-system, .think-learn, .think-projects, .think-geo, .think-room, .think-ai { padding-block: var(--section); }
.think h2 { margin: 0 0 18px; font-size: var(--h2); line-height: 1.1; font-weight: 800; font-stretch: 112%; }

.geo-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .geo-grid { grid-template-columns: 1.2fr 1fr; } }
.geo-quote { margin: 0; padding: 24px; background: var(--field-2); border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35); }
.geo-quote blockquote { margin: 0; }
.geo-quote blockquote p { margin: 0; font-size: 1.2rem; line-height: 1.45; color: var(--bone); }
.geo-quote figcaption { margin-top: 12px; color: var(--bone-soft); font-size: .9rem; line-height: 1.5; }
.geo-quote a, .think-ai .reasoning a { color: var(--number); }

.room { width: 100%; margin-top: 22px; border-collapse: collapse; }
.room caption { text-align: left; font-weight: 800; padding-bottom: 8px; }
.room th, .room td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--paper-line); line-height: 1.5; }
.room thead th { font-size: .9rem; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.room tbody th { width: 9em; font-weight: 800; }
@media (max-width: 599px) {
  .room thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .room tbody tr, .room tbody th, .room tbody td { display: block; }
  .room tbody th { width: auto; padding-bottom: 0; border: 0; }
  .room tbody td { padding-top: 4px; }
}
.think-aside { margin: 18px 0 0; font-size: 1.05rem; }

.split { display: grid; gap: 14px; margin: 18px 0 22px; }
@media (min-width: 700px) { .split { grid-template-columns: 1fr 1fr; } }
.split-side { padding: 20px 22px; border-radius: 3px; }
.split-side h3 { margin: 0 0 10px; font-size: 1.15rem; }
.split-side ul { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.split-side--machine { background: var(--field-2); box-shadow: inset 0 0 0 2px #3a3f4b; }
.split-side--human { background: var(--piece-o); color: var(--ink); }
.think-next { margin: 26px 0 0; }
.think-plain { margin: 18px 0 0; color: var(--bone-soft); }
.think-plain a { color: var(--number); font-weight: 700; }
.geo-proof { margin: 16px 0 0; padding: 12px 14px; background: var(--field-2); border-top: 4px solid var(--piece-s); border-radius: 3px; line-height: 1.5; color: var(--bone); }
.geo-proof strong { color: var(--piece-s); font-size: 1.25rem; }
.geo-proof a { color: var(--number); }

/* The system (2026-10-11): seven steps, one block piece each, in order. Each step is a whole row:
   what it is on the left, what it took here and the bar for moving on at the right. */
.sys { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.sys-step { --tile: var(--piece-j); display: grid; gap: 14px 40px; padding: 22px; background: var(--sheet, #fff); border-top: 8px solid var(--tile);
  border-radius: 3px; box-shadow: 0 1px 0 var(--paper-line), 0 10px 24px rgba(20, 22, 28, .08); }
@media (min-width: 900px) { .sys-step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 28px 32px; } }
.sys-step--i { --tile: var(--piece-i); } .sys-step--o { --tile: var(--piece-o); } .sys-step--t { --tile: #cdb98f; }
.sys-step--s { --tile: var(--piece-s); } .sys-step--z { --tile: var(--piece-z); } .sys-step--l { --tile: var(--piece-l); }
.sys-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; align-content: start; }
.sys-piece { width: 72px; height: 36px; grid-row: span 2; fill: var(--tile); }
.sys-piece rect { stroke: rgba(20, 22, 28, .35); stroke-width: .06; }
.sys-n { font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.sys-head h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; }
.sys-plain { grid-column: 1 / -1; margin: 12px 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.sys-detail { display: grid; gap: 12px; align-content: start; }
.sys-here, .sys-gate { margin: 0; line-height: 1.6; }
.sys-here { color: var(--ink-soft); font-size: 1rem; }
.sys-gate { font-size: 1.02rem; }
.sys-here span, .sys-gate span { display: block; margin-bottom: 2px; font-size: .85rem; font-weight: 800; color: var(--ink); }
.sys-gate { padding: 12px 16px; background: var(--field, #1d2027); color: var(--bone); border-radius: 3px; font-weight: 600; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); }
.sys-gate span { color: var(--tile); }
.sys-step--t .sys-gate span { color: var(--piece-t); }

/* How a mistake makes the system better: three real ones, each read top to bottom. */
.lessons { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .lessons { grid-template-columns: repeat(2, 1fr); } }
.lesson { padding: 20px 22px; background: var(--field-2); border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35); }
.lesson-where { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 800; }
.lesson-where svg { width: 32px; height: 32px; flex: none; }
.lesson-where a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); }
.lesson dl { display: grid; gap: 12px; margin: 0; }
.lesson-row dt { font-size: .85rem; font-weight: 800; color: var(--bone-soft); }
.lesson-row dd { margin: 2px 0 0; line-height: 1.55; color: var(--bone); }
.lesson-row--now { padding-top: 12px; border-top: 2px solid #3a3f4b; }
.lesson-row--now dt { color: inherit; font-weight: 800; }
.lesson-row--now dd { font-weight: 700; }
.compound { margin-top: 28px; padding: 22px 24px; background: var(--bone); color: var(--ink); border-radius: 3px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), 6px 6px 0 rgba(0, 0, 0, .35); }
.compound-line { margin: 0; max-width: 52em; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; font-weight: 600; }
.compound q { font-weight: 800; }

/* Same system, different sites: a table on wide screens, one card per site on a phone. */
.proj-scroll { margin-top: 22px; }
.proj { width: 100%; border-collapse: collapse; }
.proj caption { text-align: left; font-weight: 800; padding-bottom: 8px; }
.proj th, .proj td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--paper-line); line-height: 1.5; }
.proj thead th { font-size: .9rem; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.proj tbody th { width: 12em; }
.proj tbody th a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--work-ink); font-weight: 800; }
.proj tbody th svg { width: 32px; height: 32px; flex: none; }
.proj td:last-child { font-weight: 600; color: var(--ink); }
@media (max-width: 799px) {
  .proj thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .proj tbody tr { display: block; margin-bottom: 14px; padding: 6px 16px 10px; background: var(--sheet, #fff); border-radius: 3px; box-shadow: 0 1px 0 var(--paper-line), 0 8px 20px rgba(20, 22, 28, .07); }
  .proj tbody th, .proj tbody td { display: block; width: auto; padding: 8px 0; }
  .proj tbody td::before { content: attr(data-label); display: block; font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
  .proj tbody tr > :last-child { border-bottom: 0; }
}
.think-projects .think-aside a { color: var(--work-ink); font-weight: 700; }
.think-room a, .think-aside a { color: var(--work-ink); font-weight: 700; }
.compound { display: grid; gap: 22px; align-items: center; }
@media (min-width: 700px) { .compound { grid-template-columns: 180px 1fr; } }
.compound-photo { max-width: 180px; }
.compound-photo .pframe-img img { aspect-ratio: 1; }

/* The pointer to /seo-system/ (the system moved to its own page, 2026-10-11). */
.think-pointer { padding-block: var(--section); }
.pointer-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .pointer-grid { grid-template-columns: 1fr 1fr; } }

/* The three outcomes in the hero: the same grammar as /seo-system/ (color = outcome). */
.outcomes { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .outcomes { grid-template-columns: repeat(3, 1fr); } }
.outcome { --tile: var(--found); --tile-ink: #0d2236; } .outcome--understood { --tile: var(--understood); --tile-ink: #1d2a0a; } .outcome--chosen { --tile: var(--chosen); --tile-ink: #2c0a04; }
.outcome a { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; height: 100%; padding: 16px 18px; background: var(--tile); color: var(--tile-ink);
  text-decoration: none; border-radius: 3px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .35); }
@media (hover: hover) { .outcome a:hover { filter: brightness(1.06); } }
.outcome-n { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(20, 22, 28, .85); color: var(--bone); font-weight: 800; border-radius: 2px; }
.outcome strong { font-size: 1.3rem; }
.outcome-q { grid-column: 1 / -1; font-weight: 600; line-height: 1.4; }
.pointer-grid { grid-template-columns: 1fr; }

/* Steps are the "how", so they're neutral: the shape tells the step, color stays reserved for outcomes. */
.sys-step, .sys-step--i, .sys-step--o, .sys-step--t, .sys-step--s, .sys-step--z, .sys-step--l, .sys-step--j { --tile: var(--step); }
.sys-step .sys-piece { fill: #4a505c; }
.sys-step .sys-gate span, .sys-step--t .sys-gate span { color: var(--step); }
@media (min-width: 900px) { .lessons > .lesson:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* What I've changed my mind about (2026-10-12): then -> now, each with its evidence. */
.think-changed { padding-block: var(--section, 64px); }
.changed-list, .open-list { max-width: min(1100px, 100%); margin: 24px auto 0; padding: 0; list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .changed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.changed-list li { padding: 16px 18px; background: var(--sheet, #fff); border: 2px solid var(--ink, #1d2027); border-radius: 6px; box-shadow: 4px 4px 0 var(--step, #c9ced8); }
.changed-list p { margin: 0 0 8px; }
.changed-then { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: #d4553f; text-decoration-thickness: 2px; }
.changed-list a, .open-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.changed-sub { max-width: var(--measure); margin: 40px auto 0; font: 800 clamp(1.2rem, 1rem + .8vw, 1.5rem)/1.2 var(--face); }
.open-list { max-width: var(--measure); gap: 4px; }
.open-list li { padding: 10px 0; border-bottom: 1px solid var(--paper-line, #d0d6de); }
.open-list li::before { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; background: var(--number, #f2b544); color: #1d2027; font-weight: 850; border-radius: 3px; }
.room th .room-q { display: block; margin-top: 6px; font-weight: 400; color: var(--ink-soft); }