/* Proesy overrides for Source. Loaded after built/screen.css; edit freely, no build needed.
   Source sets html{font-size:62.5%}, so 1rem = 10px. */

:root {
    --px-ink: #191817;
    --px-paper: #FCFBF8;
    --px-red: #B53A2F;
    --px-red-on-ink: #E0533F;
    --px-blue: #2448C9;          /* Journal only */
    --px-rule: #D9D5CC;
    --px-muted: #6B6862;
    --px-head: "Archivo Narrow", "Arial Narrow", sans-serif;
    --px-body: Newsreader, Georgia, serif;
    --px-mono: "JetBrains Mono", Menlo, Consolas, monospace;

    --ghost-accent-color: var(--px-red);
    --color-darker-gray: var(--px-ink);
    --color-secondary-text: var(--px-muted);
    --color-border: var(--px-rule);
    --font-serif: var(--px-body);
}

/* ---------- Type ---------- */
body .is-title,
body .gh-content :is(h1, h2, h3) {
    font-family: var(--px-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.02;
}
body .gh-content :is(h4, h5, h6) { font-family: var(--px-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.3rem; }
body .is-body, body .gh-content { font-family: var(--px-body); }
.gh-content { font-size: 2rem; line-height: 1.6; }
.gh-content > p { max-width: 68ch; }
.gh-content a { color: var(--px-ink); text-decoration-color: var(--px-red); text-underline-offset: 3px; }
.gh-content a:hover { color: var(--px-red); }
.gh-content blockquote { border-left: 0; padding-left: 0; font-style: italic; font-size: 2.4rem; line-height: 1.35; }
.gh-content blockquote::before { content: "/"; color: var(--px-red); font-family: var(--px-head); font-style: normal; margin-right: 0.4em; }
.gh-content hr { border: 0; height: auto; background: none; text-align: center; }
.gh-content hr::after { content: "/"; font-family: var(--px-head); font-weight: 700; font-size: 2.4rem; color: var(--px-red); }
.gh-content figcaption, .gh-content table { font-family: var(--px-mono); font-size: 1.3rem; }
.gh-content table th { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; border-bottom: 2px solid var(--px-ink); }
.gh-content table td { border-bottom: 1px solid var(--px-rule); font-variant-numeric: tabular-nums; }
.gh-content .kg-callout-card { background: transparent; border: 1px solid var(--px-rule); border-left: 3px solid var(--px-ink); border-radius: 0; font-family: var(--px-mono); font-size: 1.4rem; }
.drop-cap > p:first-of-type::first-letter { font-family: var(--px-head); color: var(--px-ink); }

.px-mono { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-muted); }
.px-mono a { color: inherit; text-decoration: underline; text-decoration-color: var(--px-rule); text-underline-offset: 3px; }
.px-mono a:hover { color: var(--px-red); }

/* ---------- Kicker: "P / ROOM" ---------- */
.px-kicker, .gh-card-tag.px-kicker {
    display: block;
    margin: 0 0 12px;
    font-family: var(--px-mono);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--px-ink);
}
.px-slash { color: var(--px-red); font-weight: 700; }
a.px-kicker:hover { color: var(--px-red); }

/* ---------- Navigation ---------- */
.gh-navigation { border-bottom: 1px solid var(--px-rule); }
.gh-navigation-logo { display: inline-flex; align-items: center; gap: 10px; }
.px-mark { width: 32px; height: 32px; flex: none; }
.px-wordmark { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 2.2rem; }
.gh-navigation-menu .nav a, .gh-footer-menu a { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; }
.gh-navigation-menu .nav-current a { box-shadow: 0 2px 0 var(--px-red); }
.gh-button { border-radius: 0; font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; }
.gh-navigation-members .gh-button { font-size: 1.2rem; font-weight: 500; }

/* ---------- Article header ---------- */
.gh-article-header { border-top: 3px solid var(--px-ink); padding-top: 20px; }
.gh-article-title { font-size: clamp(4rem, 4.2vw + 2.4rem, 8rem); letter-spacing: 0; }
.gh-article-excerpt { font-style: italic; color: var(--px-muted); font-size: clamp(2rem, 0.5vw + 1.8rem, 2.4rem); line-height: 1.35; letter-spacing: 0; }
.gh-article-author-image { display: none; }
.gh-article-meta { margin-left: 0; }
.gh-article-meta-wrapper { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.gh-article-author-name, .gh-article-meta-content { font-family: var(--px-mono); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.gh-meta-share { border-top: 1px solid var(--px-rule); border-bottom: 1px solid var(--px-rule); padding: 10px 0; }

/* ---------- Reading progress: one red rule ---------- */
.px-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; pointer-events: none; }
.px-progress span { display: block; height: 100%; background: var(--px-red); transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .px-progress span { transition: transform 80ms linear; } }

/* ---------- End matter ---------- */
.px-endmatter { margin-top: 56px; }
.px-endmatter > * { grid-column: main; }
.px-signoff { border-top: 3px solid var(--px-ink); padding-top: 24px; }
.px-signoff-phrase { margin: 0; font-family: var(--px-body); font-style: italic; font-size: 2.6rem; line-height: 1.2; }
.px-signoff-name { margin: 2px 0 12px; font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.6rem; letter-spacing: 0.02em; }
.px-signoff-name a { color: var(--px-ink); }
.px-signoff-meta { margin: 0; }

.px-letter { margin-top: 40px; padding: 28px; background: var(--px-ink); color: var(--px-paper); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.px-letter > div { flex: 1 1 260px; }
.px-letter > .gh-form { flex: 1 1 320px; max-width: none; border-radius: 0; }
.px-letter .px-kicker { color: var(--px-paper); }
.px-letter .px-slash { color: var(--px-red-on-ink); }
.px-letter-title { margin: 0 0 6px; font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 3.6rem; line-height: 1; color: var(--px-paper); }
.px-letter-deck { margin: 0; font-family: var(--px-body); font-style: italic; font-size: 1.8rem; line-height: 1.4; color: #cfcac0; }
.px-letter .gh-form-input { border-radius: 0; background: var(--px-paper); color: var(--px-ink); }
.px-letter .gh-button { background: var(--px-red-on-ink); color: var(--px-ink); }

.px-room { margin: 48px 0 72px; }
.px-room > * { grid-column: main; }
.px-room-list { list-style: none; margin: 0; padding: 0; counter-reset: room; border-top: 1px solid var(--px-rule); }
.px-room-list li { counter-increment: room; border-bottom: 1px solid var(--px-rule); }
.px-room-list a { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 14px 0; min-height: 44px; color: var(--px-ink); }
.px-room-list a::before { content: counter(room, decimal-leading-zero); font-family: var(--px-mono); font-size: 1.2rem; color: var(--px-red); }
.px-room-title { flex: 1; font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.2rem; line-height: 1.1; }
.px-room-list a:hover .px-room-title { color: var(--px-red); }
.px-room-list time { white-space: nowrap; }

/* ---------- Cards and archives ---------- */
.gh-card-tag.px-kicker { margin-bottom: 6px; }
.gh-card-title { letter-spacing: 0; line-height: 1.02; }
.gh-card-excerpt { font-style: italic; }
.gh-card-meta { font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.gh-card-image img, .gh-article-image img { border-radius: 0; }
.gh-archive { border-top: 3px solid var(--px-ink); padding-top: 20px; }
.gh-container-title { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.gh-footer { border-top: 3px solid var(--px-ink); }
.gh-footer-logo { display: inline-flex; align-items: center; gap: 10px; }
.gh-footer-signup-header { font-size: clamp(4rem, 4vw + 2rem, 7rem); }
.gh-footer-signup-subhead { font-style: italic; }
.gh-footer .gh-form, .gh-footer .gh-form-input { border-radius: 0; }

/* ---------- Tool template: wider canvas, quieter page ---------- */
.px-tool { --container-width: 1280px; }
.px-tool .gh-content > :is(.kg-html-card, iframe, form, table) { grid-column: wide; }
.px-tool .gh-content :is(input, select, button, textarea) { min-height: 44px; font-family: var(--px-mono); font-size: 1.5rem; border-radius: 0; }

/* ---------- Journal room uses blue instead of red ---------- */
.tag-journal { --px-red: var(--px-blue); --ghost-accent-color: var(--px-blue); }

@media (max-width: 767px) {
    .gh-content { font-size: 1.85rem; }
    .px-room-list time { display: none; }
    .px-letter { padding: 22px; }
}

/* ---------- Masthead: sections with plain descriptions ---------- */
.px-masthead { border-bottom: 2px solid var(--px-ink); padding-top: 2.4rem; padding-bottom: 2.4rem; }
.px-masthead-line { font-family: var(--px-body); font-size: 2rem; margin: 0 0 1.6rem; }
.px-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--px-rule); }
.px-sections li { border-right: 1px solid var(--px-rule); }
.px-sections li:last-child { border-right: 0; }
.px-sections a { display: block; padding: 1.4rem 1.4rem 1.4rem 0; color: var(--px-ink); text-decoration: none; }
.px-sections li + li a { padding-left: 1.4rem; }
.px-sec-name { display: block; font-family: var(--px-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 2rem; line-height: 1.1; }
.px-sec-desc { display: block; font-family: var(--px-body); font-size: 1.5rem; line-height: 1.35; color: var(--px-muted); margin-top: 0.4rem; }
.px-sections a:hover .px-sec-name { color: var(--px-red); }
@media (max-width: 767px) {
    .px-sections { grid-template-columns: 1fr; }
    .px-sections li { border-right: 0; border-bottom: 1px solid var(--px-rule); }
    .px-sections a, .px-sections li + li a { padding: 1.2rem 0; display: grid; grid-template-columns: 15.5rem 1fr; gap: 1.6rem; align-items: baseline; }
    .px-sec-name { font-size: 1.7rem; }
    .px-sec-desc { margin-top: 0; }
}

/* ---------- From the desk ---------- */
.px-desk { padding-top: 3.2rem; padding-bottom: 3.2rem; border-bottom: 1px solid var(--px-rule); }
.px-desk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin-top: 1.6rem; }
.px-desk-col { border-top: 2px solid var(--px-ink); padding-top: 1.2rem; }
.px-desk-title { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2rem; letter-spacing: 0.04em; margin: 0 0 0.8rem; }
.px-desk-body { font-family: var(--px-body); font-size: 1.6rem; line-height: 1.4; }
.px-desk-body ul, .px-desk-body ol { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.px-desk-body li { padding: 0.7rem 0; border-bottom: 1px solid var(--px-rule); }
.px-desk-body li strong { font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--px-ink); padding: 0.1rem 0.5rem; margin-left: 0.4rem; white-space: nowrap; }
.px-desk-body p { margin: 0 0 0.8rem; }
.px-desk-journal { border-top-color: var(--px-blue); }
.px-desk-journal .px-desk-title { color: var(--px-blue); }
@media (max-width: 991px) { .px-desk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .px-desk-grid { grid-template-columns: 1fr; } }

.px-desk-reading { order: 1; } .px-desk-submissions { order: 2; } .px-desk-upcoming { order: 3; } .px-desk-journal { order: 4; }

/* ---------- Icons ---------- */
.px-icon { width: 2.2rem; height: 2.2rem; flex: none; vertical-align: -0.35rem; margin-right: 0.8rem; color: var(--px-ink); }
.px-sections a:hover .px-icon { color: var(--px-red); }
.px-icon-journal { color: var(--px-blue); }

/* ---------- Coming up (scheduled posts) ---------- */
.px-upcoming { background: var(--px-ink); color: var(--px-paper); padding-top: 2.4rem; padding-bottom: 2.4rem; }
.px-upcoming-title { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 2rem; margin: 0 0 1.2rem; color: var(--px-paper); }
.px-upcoming-title .px-icon { color: var(--px-red-on-ink); }
.px-upcoming-body ul, .px-upcoming-body ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.4rem; }
.px-upcoming-body li { font-family: var(--px-body); font-size: 1.7rem; line-height: 1.35; padding: 1.2rem 0; border-top: 1px solid rgba(252,251,248,0.25); }
.px-upcoming-body li strong { display: block; font-family: var(--px-mono); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-red-on-ink); margin-bottom: 0.3rem; }
.px-upcoming-body li em { font-family: var(--px-mono); font-style: normal; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-left: 0.6rem; }
.px-upcoming-body p { margin: 0; }
@media (max-width: 991px) { .px-upcoming-body ul, .px-upcoming-body ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .px-upcoming-body ul, .px-upcoming-body ol { grid-template-columns: 1fr; } }

.px-sec-name { display: flex; align-items: flex-start; } .px-sec-name .px-icon { margin-top: 0.1rem; }

/* ---------- Masthead v2: one slim strip (overrides the tall version above) ---------- */
.px-masthead { padding-top: 0; padding-bottom: 0; border-bottom: 1px solid var(--px-ink); }
.px-sections { display: flex; grid-template-columns: none; border-top: 0; gap: 0 2.8rem; overflow-x: auto; scrollbar-width: none; }
.px-sections::-webkit-scrollbar { display: none; }
.px-sections li, .px-sections li:last-child { border: 0; flex: none; }
.px-sections a, .px-sections li + li a { display: flex; align-items: baseline; gap: 0.8rem; padding: 1rem 0; grid-template-columns: none; }
.px-sec-name { display: inline-flex; align-items: center; font-size: 1.4rem; letter-spacing: 0.08em; white-space: nowrap; }
.px-sec-name .px-icon { width: 1.5rem; height: 1.5rem; margin: 0 0.5rem 0 0; }
.px-sec-desc { display: inline; margin: 0; font-size: 1.3rem; white-space: nowrap; }
@media (max-width: 991px) { .px-sec-desc { display: none; } .px-sections { gap: 0 2rem; } .px-sections a, .px-sections li + li a { padding: 0.9rem 0; } }

/* ---------- Masthead v3: two lines per section (overrides v2) ---------- */
.px-sections { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 2rem; overflow: visible; }
.px-sections a, .px-sections li + li a { display: block; padding: 1.2rem 0 1.3rem; }
.px-sec-name { display: flex; font-size: 1.7rem; letter-spacing: 0.05em; }
.px-sec-name .px-icon { width: 1.8rem; height: 1.8rem; margin: 0.1rem 0.6rem 0 0; }
.px-sec-desc { display: block; white-space: normal; font-size: 1.35rem; line-height: 1.3; margin-top: 0.3rem; }
@media (max-width: 991px) { .px-sections { grid-template-columns: repeat(2, 1fr); gap: 0 1.6rem; } .px-sec-desc { display: block; font-size: 1.25rem; } .px-sections a, .px-sections li + li a { padding: 0.9rem 0; } .px-sec-name { font-size: 1.5rem; } }

/* ---------- Section pages ---------- */
.px-section-image { margin-top: 2.4rem; }
.px-section-latest { margin-top: 4rem; }
.px-section-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--px-ink); }
.px-section-list a { display: flex; justify-content: space-between; gap: 1.6rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--px-rule); color: var(--px-ink); text-decoration: none; font-family: var(--px-body); font-size: 1.9rem; }
.px-section-list a:hover { color: var(--px-red); }

/* ---------- Page guide blocks (pasted as HTML cards) ---------- */
.px-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin: 3.2rem 0; }
.px-guide > div { border-top: 2px solid var(--px-ink); padding-top: 1rem; }
.px-guide h3 { font-family: var(--px-head); text-transform: uppercase; font-size: 1.9rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; }
.px-guide p, .px-guide li { font-size: 1.7rem; line-height: 1.45; margin: 0 0 0.6rem; }
.px-guide ol, .px-guide ul { padding-left: 2rem; margin: 0; }
@media (max-width: 767px) { .px-guide { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Animated primer: three scenes on a 15s loop ---------- */
.px-primer { position: relative; background: var(--px-ink); color: var(--px-paper); aspect-ratio: 16 / 9; overflow: hidden; margin: 3.2rem 0; }
.px-primer-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6% 8%; opacity: 0; animation: px-scene 15s infinite; }
.px-primer-scene:nth-child(2) { animation-delay: 5s; } .px-primer-scene:nth-child(3) { animation-delay: 10s; }
.px-primer-step { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-red-on-ink); }
.px-primer .px-primer-head { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.02; margin: 0.8rem 0 1.2rem; color: var(--px-paper); max-width: 78%; }
.px-primer .px-primer-line { font-family: var(--px-body); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.35; max-width: 34em; margin: 0; color: var(--px-paper); }
.px-primer .px-icon { position: absolute; right: 6%; top: 10%; width: 16%; height: auto; color: var(--px-red-on-ink); stroke-dasharray: 80; animation: px-draw 5s ease-out infinite; margin: 0; }
.px-primer-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--px-red-on-ink); animation: px-bar 15s linear infinite; }
.px-primer:hover .px-primer-scene, .px-primer:hover .px-primer-bar, .px-primer:hover .px-icon { animation-play-state: paused; }
@keyframes px-scene { 0% { opacity: 0; transform: translateY(12px); } 3% { opacity: 1; transform: none; } 31% { opacity: 1; transform: none; } 34% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 0; } }
@keyframes px-draw { 0% { stroke-dashoffset: 80; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes px-bar { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .px-primer { aspect-ratio: auto; } .px-primer-scene { position: static; opacity: 1; animation: none; padding: 2.4rem; } .px-primer .px-icon, .px-primer-bar { display: none; } }
/* ---------- Index pages (v4) ---------- */
.gh-content .px-group { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-muted); margin: 4rem 0 0.8rem; font-weight: 500; }
.gh-content .px-group b { color: var(--px-red); font-weight: 500; }
.gh-content .px-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--px-ink); }
.gh-content .px-index li { margin: 0; padding: 0; }
.gh-content .px-index li > a, .gh-content .px-index li > div { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 2rem; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--px-rule); color: var(--px-ink); text-decoration: none; }
.px-index-name { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.3rem; line-height: 1.1; letter-spacing: 0.02em; }
.px-index-desc { grid-column: 1; font-family: var(--px-body); font-size: 1.7rem; line-height: 1.4; color: var(--px-muted); }
.px-index-tag { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-red); white-space: nowrap; }
.px-index li > a:hover .px-index-name { color: var(--px-red); }
.px-index li > div .px-index-name { color: var(--px-muted); } .px-index li > div .px-index-tag { color: var(--px-muted); }
.gh-canvas > .px-wide { grid-column: wide; }
.px-embed { margin: 2.4rem 0; border: 2px solid var(--px-ink); background: var(--px-paper); }
.px-embed iframe { display: block; width: 100%; height: 82vh; min-height: 620px; border: 0; }
.px-embed-bar { display: flex; justify-content: space-between; gap: 1.6rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--px-rule); font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; }
.px-embed-bar a { color: var(--px-red); text-decoration: none; }
.px-video { margin: 2.4rem 0; } .px-video video { display: block; width: 100%; height: auto; background: var(--px-ink); }
.px-tablewrap { overflow-x: auto; margin: 2rem 0 3rem; }
.gh-content .px-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--px-ink); font-family: var(--px-body); font-size: 1.6rem; line-height: 1.35; margin: 0; display: table; }
.gh-content .px-table th { font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--px-muted); text-align: left; padding: 0.8rem 1.4rem 0.8rem 0; border-bottom: 1px solid var(--px-ink); background: none; white-space: nowrap; }
.gh-content .px-table td { padding: 0.9rem 1.4rem 0.9rem 0; border: 0; border-bottom: 1px solid var(--px-rule); vertical-align: top; background: none; }
.gh-content .px-table td:first-child { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; white-space: nowrap; }
.px-table .px-star { color: var(--px-red); }
.px-note { font-family: var(--px-mono); font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--px-muted); border-left: 3px solid var(--px-red); padding-left: 1.2rem; margin: 2rem 0; }
.px-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2.4rem 0; }
.px-stats > div { border-top: 2px solid var(--px-ink); padding-top: 0.8rem; }
.px-stats b { display: block; font-family: var(--px-head); font-size: 4.4rem; line-height: 1; color: var(--px-red); }
.px-stats span { font-family: var(--px-body); font-size: 1.6rem; line-height: 1.35; color: var(--px-muted); }
@media (max-width: 767px) { .px-stats { grid-template-columns: 1fr; } .px-index-name { font-size: 2rem; } .px-embed iframe { height: 78vh; min-height: 520px; } }

/* topics, stages, coming up (v5) */
.px-topic { display: grid; grid-template-columns: 22rem 1fr; gap: 0 3rem; margin: 5rem 0 0; border-top: 3px solid var(--px-ink); padding-top: 1.4rem; }
.px-topic-num { font-family: var(--px-head); font-weight: 700; font-size: 6.4rem; line-height: 0.95; color: var(--px-red); }
.px-topic-cap { font-family: var(--px-body); font-size: 1.5rem; line-height: 1.35; color: var(--px-muted); margin-top: 0.6rem; }
.gh-content .px-topic h2 { font-family: var(--px-head); text-transform: uppercase; font-size: 3.4rem; line-height: 1; margin: 0 0 0.6rem; }
.px-topic > div > p { font-size: 1.8rem; line-height: 1.45; margin: 0 0 1.2rem; }
.gh-content .px-topic .px-index { border-top-width: 1px; }
.gh-content .px-journey { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.4rem 0; padding: 0; list-style: none; counter-reset: st; }
.gh-content .px-journey li { margin: 0; padding: 0; }
.px-journey a { display: inline-flex; align-items: baseline; gap: 0.6rem; border: 2px solid var(--px-ink); padding: 0.6rem 1.2rem; font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; letter-spacing: 0.04em; color: var(--px-ink); text-decoration: none; }
.px-journey a::before { counter-increment: st; content: counter(st); font-family: var(--px-mono); font-size: 1.1rem; color: var(--px-red); }
.px-journey a:hover { background: var(--px-ink); color: var(--px-paper); }
.px-stage { margin: 5rem 0 0; border-top: 3px solid var(--px-ink); padding-top: 1.2rem; scroll-margin-top: 2rem; }
.px-stage-k { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-red); }
.gh-content .px-stage h2 { font-family: var(--px-head); text-transform: uppercase; font-size: 4rem; line-height: 1; margin: 0.4rem 0 0.4rem; }
.px-stage > p { font-size: 1.8rem; line-height: 1.45; color: var(--px-muted); margin: 0 0 1.2rem; }
.gh-content .px-stage .px-index { border-top-width: 1px; }
.px-stageline { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-muted); margin: 0 0 2rem; }
.px-stageline a { color: var(--px-red); text-decoration: none; }
.px-coming { margin-top: 4rem; } .px-coming-stage { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-muted); }
.px-coming-body ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--px-ink); }
.px-coming-body li { margin: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--px-rule); font-family: var(--px-body); font-size: 1.8rem; line-height: 1.35; }
.px-coming-body li strong { font-family: var(--px-mono); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-red); margin-right: 1rem; }
@media (max-width: 767px) { .px-topic { grid-template-columns: 1fr; } .px-topic-num { font-size: 5.2rem; } .px-topic-cap { margin-bottom: 1.2rem; } .gh-content .px-stage h2 { font-size: 3.2rem; } }
/* ---------- v6: wide sections, cards, home ---------- */
.px-section-head { padding-top: 4.8rem; padding-bottom: 2.4rem; }
.px-section-title { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: clamp(5rem, 9vw, 9.6rem); line-height: 0.95; margin: 0; letter-spacing: 0.01em; }
.px-section-dek { font-family: var(--px-body); font-size: 2.2rem; line-height: 1.35; color: var(--px-muted); max-width: 72rem; margin: 1.2rem 0 0; }
.px-section-body { padding-bottom: 6.4rem; }
.px-section-body .gh-content { display: block; max-width: none; }
.px-section-body .gh-content > p { max-width: 72rem; }
.px-section-body .px-wide { grid-column: auto; }
.px-section-latest { margin: 0 0 6.4rem; }
.px-home-title, .gh-content .px-group { font-family: var(--px-mono); font-size: 1.3rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--px-ink); border-bottom: 2px solid var(--px-ink); padding-bottom: 0.8rem; margin: 5.6rem 0 0; }
.px-home-title { margin-top: 0; }
.gh-content .px-group b { color: var(--px-red); }
.px-cards, .gh-content .px-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.2rem; }
.px-cards li, .gh-content .px-cards li { margin: 0; padding: 0; }
.px-cards li > a, .px-cards li > div { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; box-sizing: border-box; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--px-rule); color: var(--px-ink); text-decoration: none; }
.px-cards .px-index-tag { order: -1; align-self: flex-start; font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-red); }
.px-cards .px-index-name { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.4rem; line-height: 1.08; }
.px-cards .px-index-desc { font-family: var(--px-body); font-size: 1.7rem; line-height: 1.4; color: var(--px-muted); }
.px-cards li > a:hover .px-index-name { color: var(--px-red); }
.px-cards li > div .px-index-name, .px-cards li > div .px-index-tag { color: var(--px-muted); }
.px-home-tools { padding-top: 5.6rem; padding-bottom: 5.6rem; }
.px-section-body .px-topic { margin-top: 4rem; }
.px-section-body .px-topic .px-index { border-top: 1px solid var(--px-rule); }
.px-section-body .px-tablewrap, .px-section-body .px-stats { max-width: none; }
@media (max-width: 991px) { .px-cards, .gh-content .px-cards { grid-template-columns: repeat(2, 1fr); gap: 0 2.4rem; } }
@media (max-width: 600px) { .px-cards, .gh-content .px-cards { grid-template-columns: 1fr; } .px-section-head { padding-top: 3.2rem; } .px-section-dek { font-size: 1.9rem; } }

.gh-content .px-tools { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.gh-content .px-tools li { margin: 0; padding: 2.4rem; border: 2px solid var(--px-ink); display: flex; flex-direction: column; gap: 0.6rem; background: var(--px-paper); }
.px-tools .px-index-tag { align-self: flex-start; font-family: var(--px-mono); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-red); }
.px-tools .px-index-name { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.8rem; line-height: 1.05; }
.px-tools .px-index-desc { font-family: var(--px-body); font-size: 1.7rem; line-height: 1.4; color: var(--px-muted); flex: 1; }
.px-tools .px-btn { align-self: flex-start; margin-top: 1.2rem; background: var(--px-red); color: var(--px-paper); font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1rem 1.6rem; text-decoration: none; }
.px-tools a.px-btn:hover { background: var(--px-ink); color: var(--px-paper); }
.px-tools .px-btn.is-off { background: none; color: var(--px-muted); border: 1px solid var(--px-rule); }
.px-tools li:has(.is-off) { border-color: var(--px-rule); } .px-tools li:has(.is-off) .px-index-name { color: var(--px-muted); }
.px-section-posts { margin-bottom: 4rem; }
@media (max-width: 991px) { .gh-content .px-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gh-content .px-tools { grid-template-columns: 1fr; gap: 1.6rem; } }

.px-topic-sec { margin-bottom: 5.6rem; }
.px-topic-sec > .gh-inner > p { font-family: var(--px-body); font-size: 1.9rem; color: var(--px-muted); margin: 1rem 0 0; }
.px-data-grid { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.4rem; }
.px-data-grid a { display: block; color: var(--px-ink); text-decoration: none; }
.px-data-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border: 2px solid var(--px-ink); background: var(--px-paper); }
.px-data-grid h3 { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 2.8rem; line-height: 1.05; margin: 1.4rem 0 0.4rem; }
.px-data-grid p { font-family: var(--px-body); font-size: 1.7rem; line-height: 1.4; color: var(--px-muted); margin: 0; }
.px-data-grid .px-go { display: inline-block; margin-top: 1rem; font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-red); }
.px-data-grid a:hover h3 { color: var(--px-red); } .px-data-grid a:hover img { border-color: var(--px-red); }
.px-embed iframe { height: 900px; }
@media (max-width: 991px) { .px-data-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .px-data-grid { grid-template-columns: 1fr; } }

.px-data-grid .px-no { display: block; margin-top: 1.4rem; font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-red); }
.px-data-grid .px-no + h3 { margin-top: 0.4rem; }

/* v9 data rows */
.px-drows { list-style: none; margin: 0; padding: 0; }
.px-drows li { margin: 0; padding: 0; }
.px-drows a { display: grid; grid-template-columns: 30rem 1fr 28rem; gap: 0 4rem; align-items: start; padding: 2.8rem 0 3.2rem; border-top: 3px solid var(--px-ink); color: var(--px-ink); text-decoration: none; }
.px-drows li:first-child a { border-top: 0; }
.px-dstat { display: block; }
.px-dnum { display: block; white-space: nowrap; font-family: var(--px-head); font-weight: 700; font-size: 6.4rem; line-height: 0.95; color: var(--px-red); letter-spacing: -0.01em; }
.px-dcap { display: block; font-family: var(--px-body); font-size: 1.6rem; line-height: 1.35; color: var(--px-muted); margin-top: 0.8rem; max-width: 26rem; }
.px-dbody { display: flex; flex-direction: column; gap: 0.6rem; }
.px-drows .px-no { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-red); }
.px-dtitle { font-family: var(--px-head); font-weight: 700; text-transform: uppercase; font-size: 4rem; line-height: 1; }
.px-ddek { font-family: var(--px-body); font-size: 2rem; line-height: 1.4; }
.px-drows .px-go { font-family: var(--px-mono); font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--px-red); margin-top: 0.8rem; }
.px-drows img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 2px solid var(--px-ink); }
.px-drows a:hover .px-dtitle { color: var(--px-red); } .px-drows a:hover img { border-color: var(--px-red); }
.tag-data .gh-article-image, .tag-data .gh-article-header .gh-article-image { display: none; }
@media (max-width: 991px) { .px-drows a { grid-template-columns: 22rem 1fr; } .px-drows img { display: none; } .px-dnum { font-size: 5.6rem; } .px-dtitle { font-size: 3.2rem; } }
@media (max-width: 600px) { .px-drows a { grid-template-columns: 1fr; gap: 1.6rem; } .px-drows img { display: block; } }

/* v11: posts that embed a tool show the tool, not its screenshot */
.gh-article:has(.px-embed) .gh-article-image, .post-template:has(.px-embed) .gh-article-image { display: none !important; }

/* v12: section subheader */
.px-section-sub { font-family: var(--px-head); font-weight: 700; font-size: clamp(2.6rem, 3.6vw, 3.8rem); line-height: 1.08; letter-spacing: 0.005em; color: var(--px-ink); max-width: 30ch; margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 3px solid var(--px-red); }
.px-section-sub + .px-section-dek { font-size: 2rem; line-height: 1.5; max-width: 66ch; margin-top: 1.2rem; }
@media (max-width: 600px) { .px-section-sub + .px-section-dek { font-size: 1.8rem; } }