/* HtPi — global stylesheet. Tokens + base + helpers + chrome + responsive.
Fonts are linked in (preconnect) for performance; tokens below. */
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
/* ── Base ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[x-cloak] { display: none !important; }
::selection { background: var(--accent); color: var(--paper); }
/* Page-level dark/ink variants set bg + text on via data-page-bg. */
body[data-page="ink"] { background: var(--ink); color: var(--paper); }
body[data-page="petrol"]{ background: #0C1718; color: var(--paper); }
body[data-page="deep"] { background: #15110D; color: var(--paper); }
/* ── Bilingual toggle (in-place, no round-trip) ────────────────────────── */
html[data-lang="en"] .lang-zh { display: none !important; }
html[data-lang="zh"] .lang-en { display: none !important; }
.lang-zh { font-family: var(--font-zh); } /* clean Heiti CJK everywhere */
/* ── Motion ────────────────────────────────────────────────────────────── */
@keyframes htpi-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes htpi-bob { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(7px); opacity: 1; } }
.rise { animation: htpi-rise 1s ease both; }
.wf { animation: htpi-rise .9s ease both; }
@media (prefers-reduced-motion: reduce) {
.rise, .wf { animation: none; }
html { scroll-behavior: auto; }
}
/* ── Interactive primitives ────────────────────────────────────────────── */
.btn { transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.navlink { transition: color 160ms ease; }
.navlink:hover { color: var(--bronze); }
.lnk { transition: color 160ms ease; cursor: pointer; }
.lnk:hover { color: var(--accent) !important; }
.field { transition: border-color 160ms ease; }
.field:focus { outline: none; border-color: var(--accent) !important; }
.artrow:hover .arttitle { color: var(--accent); }
.artrow:hover .artarrow { opacity: 1; transform: translateX(0); }
.tier:hover { border-color: var(--bronze) !important; }
.clscard { transition: border-color 200ms ease, transform 200ms ease; }
.clscard:hover { border-color: var(--bronze) !important; transform: translateY(-2px); }
.step:hover { border-color: var(--bronze) !important; }
/* Filter chips (Writing / Community) */
.chip { color: var(--ink-soft); background: transparent; border: 1px solid #C7BBAA; padding: 9px 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.chip.is-on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.chip-dark { color: rgba(243,236,224,.7); background: transparent; border: 1px solid rgba(243,236,224,.25); padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.chip-dark.is-on { color: #211C17; background: #C9A05C; border-color: #C9A05C; }
/* Long-form prose (article) + story columns (about) */
.prose p { margin: 0 0 26px; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.8; color: #2C261F; }
.prose p.lead, .prose .lead p { font-size: 24px; line-height: 1.66; color: var(--ink); }
.prose h2 { margin: 44px 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.2; color: var(--ink); }
.prose h3 { margin: 40px 0 16px; font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1.25; color: var(--ink); }
.prose blockquote { margin: 36px 0; padding: 6px 0 6px 26px; border-left: 2px solid var(--bronze); font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.5; color: var(--ink-soft); }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(123,44,36,.35); }
.prose ul, .prose ol { font-family: var(--font-display); font-size: 19px; line-height: 1.8; color: #2C261F; padding-left: 1.2em; }
.prose code { font-family: var(--font-mono); font-size: .85em; background: var(--sand); padding: 2px 6px; border-radius: 3px; }
.prose pre { background: var(--ink); color: var(--paper); padding: 20px; border-radius: 6px; overflow-x: auto; }
.prose pre code { background: none; color: inherit; }
.prose h4 { margin: 34px 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--ink); }
.prose table { width: 100%; margin: 34px 0; border-collapse: collapse; border: 1px solid #DCD2C2; background: #F8F3E9; font-family: var(--font-display); font-size: 17px; line-height: 1.7; color: #2C261F; }
.prose th { text-align: left; font-weight: 500; color: var(--ink); background: #EDE4D5; }
.prose th, .prose td { padding: 14px 18px; border: 1px solid #DCD2C2; vertical-align: top; }
.prose figure { margin: 40px 0; }
.prose figure img { display: block; width: 100%; height: auto; background: #EDE4D5; filter: grayscale(1) sepia(.16) contrast(1.04); }
.prose figure figcaption { margin-top: 12px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: #8A7F70; }
.prose img { max-width: 100%; height: auto; }
/* Designed article blocks — span-class hooks styled here so bodies stay
sanitised Markdown (the bleach allow-list is untouched: span[class] only). */
.prose h2 .chapno { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
margin-right: 14px; border: 1px solid #7B2C24; border-radius: 50%; color: #7B2C24;
font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; vertical-align: 0.2em; }
/* Principle cards: text
, stacked flush. */
.prose p:has(> span.p-label) { margin: 0 0 -1px; border: 1px solid #DCD2C2; background: #F8F3E9;
padding: 25px 28px; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: #6B6256; }
.prose :not(p:has(> span.p-label)) + p:has(> span.p-label) { margin-top: 36px; }
/* Space AFTER a card stack — written as a next-sibling rule because :has()
cannot nest inside :has() (the nested form is invalid and gets dropped,
which is exactly how the missing gap bug happened). */
.prose p:has(> span.p-label) + :not(p:has(> span.p-label)) { margin-top: 40px; }
.prose span.p-label { display: block; margin-bottom: 11px; color: #7B2C24;
font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.prose span.p-title { display: block; margin: 0 0 11px; font-family: var(--font-display);
font-weight: 500; font-size: 25px; line-height: 1.3; color: var(--ink); }
/* Checker rows: a table whose first cells carry mono predicates. */
.prose table:has(span.op) { background: #FBF7EF; }
.prose table:has(span.op) td { border-left: 0; border-right: 0; padding: 18px 20px;
font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: #4A4239; }
.prose table:has(span.op) td:first-child { width: 150px; }
.prose td > span.op { color: #7B2C24; font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }
/* Dark closing statement: blockquote carrying span.close-dark. */
.prose blockquote:has(span.close-dark) { margin: 64px 0 44px; padding: clamp(38px, 6vw, 72px);
border-left: 0; background: #7B2C24; font-style: normal; }
.prose blockquote:has(span.close-dark) p { margin: 0; }
.prose span.close-dark { display: block; color: #FFF2E3; font-family: var(--font-display);
font-weight: 300; font-size: clamp(24px, 3.8vw, 40px); line-height: 1.5; }
.prose span.close-sub { display: block; margin-top: 22px; color: #E5C4B7;
font-family: var(--font-body); font-style: normal; font-size: 14px; line-height: 1.65; }
/* Scope-note panel: …body…
— wash background
with a bronze left rule, closing-disclaimer register. */
.prose p:has(> span.note-label) { margin: 48px 0 36px; padding: 26px 30px; background: #EDE4D5;
border-left: 3px solid #C9A05C; font-family: var(--font-body); font-size: 15px;
line-height: 1.85; color: #4A4239; }
.prose span.note-label { display: block; margin-bottom: 12px; color: var(--ink);
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; }
/* Footnote line (small muted note under a diagram) + mono section eyebrow. */
.prose span.footnote { display: block; margin: 0 0 6px; color: #8A7F70;
font-family: var(--font-body); font-size: 12.5px; line-height: 1.65; }
.prose span.footnote code { font-size: 11.5px; }
.prose span.eyebrow { display: block; margin: 44px 0 -30px; color: #7B2C24;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.prose span.tl-year { color: #7B2C24; margin-right: 12px; }
/* Timeline rows (built from tl-year marks by article.html JS): year | copy. */
.prose .tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0;
border-bottom: 1px solid #DCD2C2; margin: 0; }
.prose :not(.tl-item) + .tl-item { border-top: 1px solid #DCD2C2; margin-top: 26px; }
.prose .tl-yearcol { color: #7B2C24; font-family: var(--font-display); font-weight: 400;
font-size: 24px; line-height: 1.25; }
.prose .tl-item h3 { margin: 0 0 8px; font-size: 24px; }
.prose .tl-copy p { margin: 0 0 10px; font-family: var(--font-body); font-size: 15px;
line-height: 1.72; color: #6B6256; }
.prose .tl-copy p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .prose .tl-item { grid-template-columns: 78px 1fr; gap: 14px; } }
/* Foundation list (span.fl-mark in the first item): numbered ruled rows.
No grid — the li keeps normal inline flow (grid would scatter the li's
loose inline children into cells); the counter hangs in the left gutter. */
.prose ol:has(span.fl-mark) { margin: 35px 0 50px; padding: 0; list-style: none; counter-reset: fl; }
.prose ol:has(span.fl-mark) > li { counter-increment: fl; position: relative; margin: 0;
padding: 23px 0 23px 52px; border-bottom: 1px solid #DCD2C2; }
.prose ol:has(span.fl-mark) > li::before { content: "0" counter(fl); position: absolute; left: 0; top: 27px;
color: #7B2C24; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
@media (max-width: 640px) { .prose ol:has(span.fl-mark) > li { padding-left: 38px; } }
/* Drawers: trusted page JS folds an h3>span.drawer section into
(see article.html); these style the result. No-JS fallback: open section. */
.prose details.adrawer { margin: 34px 0 44px; border: 1px solid #DCD2C2; background: rgba(251,247,239,.64); }
.prose .adrawer summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start;
gap: 14px; padding: 19px 22px; color: var(--ink); font-family: var(--font-display);
font-weight: 500; font-size: 19px; line-height: 1.5; }
.prose .adrawer summary > .lang-en, .prose .adrawer summary > .lang-zh { flex: 1; }
.prose .adrawer summary .tapico { flex: none; width: 18px; height: 18px; margin-top: 5px; color: #7B2C24; }
.prose .adrawer summary:hover .tapico { color: #C9A05C; }
.prose .adrawer summary::-webkit-details-marker { display: none; }
.prose .adrawer summary::after { content: "+"; color: #7B2C24; font-family: var(--font-display); font-size: 24px; line-height: 1; flex: none; }
.prose .adrawer[open] summary::after { content: "−"; }
.prose .adrawer .adrawer-body { padding: 20px 22px 6px; border-top: 1px solid #DCD2C2; }
/* Display number: 52! ≈ …
— large garnet figure. */
.prose p:has(> span.bignum) { margin: 36px 0 8px; }
.prose span.bignum { display: block; color: #7B2C24; font-family: var(--font-display);
font-weight: 400; font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em;
overflow-wrap: anywhere; }
.prose span.bignum.mid { font-size: clamp(26px, 5vw, 46px); }
/* Centered pull-quote: blockquote carrying span.pull — bronze rules, garnet. */
.prose blockquote:has(span.pull) { margin: 64px -40px; padding: 34px 48px; border-left: 0;
border-top: 1px solid #C9A05C; border-bottom: 1px solid #C9A05C; font-style: normal;
text-align: center; }
.prose blockquote:has(span.pull) p { margin: 0; }
.prose span.pull { display: block; color: #7B2C24; font-family: var(--font-display);
font-weight: 400; font-size: clamp(24px, 3.6vw, 37px); line-height: 1.5; }
@media (max-width: 760px) { .prose blockquote:has(span.pull) { margin: 48px 0; padding: 26px 14px; } }
/* Caution note: leadbody…
— garnet rule, wash panel. */
.prose p:has(> span.cnote) { margin: 44px 0; padding: 24px 28px; background: #EDE4D5;
border-left: 3px solid #7B2C24; font-family: var(--font-body); font-size: 16px;
line-height: 1.8; color: #4A4239; }
.prose span.cnote { display: block; margin-bottom: 8px; color: var(--ink);
font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.5; }
.story p { margin: 0 0 24px; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.8; color: #2C261F; }
/* Flash messages */
.flash { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 11px 14px; border-radius: 4px; }
.flash--error { background: rgba(123,44,36,.1); color: var(--accent); border: 1px solid rgba(123,44,36,.3); }
.flash--ok { background: rgba(31,111,74,.1); color: #1F6F4A; border: 1px solid rgba(31,111,74,.3); }
/* ── Header / nav / mobile drawer ──────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--hairline); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header.is-over { position: fixed; left: 0; right: 0; }
.hdr-light { background: rgba(243,236,224,.82); border-color: var(--hairline); }
.hdr-dark { background: rgba(21,17,13,.7); border-color: rgba(243,236,224,.12); }
.hdr-over { background: rgba(12,16,16,.55); border-color: rgba(243,236,224,.12); }
.hdr-inner { max-width: 1180px; margin: 0 auto; padding: 15px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup img { height: 28px; width: auto; }
.brand-word { font-weight: 500; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav .navlink { font-size: 14px; }
.nav-sep { width: 1px; height: 18px; }
.lang-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; background: transparent; border: 1px solid; padding: 7px 11px; cursor: pointer; }
.cta { font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 9px 17px; }
/* light header palette */
.hdr-light .brand-word, .hdr-light .nav .navlink { color: var(--ink-soft); }
.hdr-light .nav-sep { background: var(--hairline); }
.hdr-light .lang-btn { color: var(--ink-soft); border-color: #C7BBAA; }
/* dark / over header palette */
.hdr-dark .brand-word, .hdr-over .brand-word,
.hdr-dark .nav .navlink, .hdr-over .nav .navlink { color: rgba(243,236,224,.82); }
.hdr-dark .nav-sep, .hdr-over .nav-sep { background: rgba(243,236,224,.18); }
.hdr-dark .lang-btn, .hdr-over .lang-btn { color: rgba(243,236,224,.7); border-color: rgba(243,236,224,.28); }
.navlink.is-active { color: var(--accent); }
.hdr-dark .navlink.is-active, .hdr-over .navlink.is-active { color: var(--bronze); }
.burger { display: none; }
.menu-scrim { display: none; }
@media (max-width: 640px) {
/* No backdrop blur on mobile → make the solid headers fully opaque, otherwise
page content ghosts through behind the logo as it scrolls under the header. */
.site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hdr-light { background: #F3ECE0; }
.hdr-dark { background: #15110D; }
/* Featured article card: full-bleed and stacked (art on top) on phones. */
.featured-section { padding-left: 0 !important; padding-right: 0 !important; padding-top: 28px !important; }
.featured-card { grid-template-columns: 1fr !important; gap: 0 !important; border-radius: 0 !important; }
.featured-card .feat-art { min-height: 180px !important; }
.featured-card .feat-body { padding: 28px 24px 32px !important; }
.burger { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; cursor: pointer; position: relative; z-index: 60; color: var(--muted); background: none; border: 0; font-size: 24px; line-height: 1; }
.nav {
position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 320px);
background: #15110D; flex-direction: column; align-items: flex-start;
justify-content: flex-start; gap: 4px; padding: 82px 26px 26px;
transform: translateX(100%); z-index: 55;
/* Closed drawer is off-screen AND removed from the tab order / a11y tree
(visibility:hidden). It flips hidden only AFTER the .3s slide-out, so the
animation is preserved. */
visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
}
/* Shadow only while open. The drawer is position:fixed, so its box-shadow is
NOT clipped by the body's overflow-x:hidden; left on the closed (off-screen)
drawer, the soft -26px shadow bleeds back onto the page's right edge. */
.nav.is-open { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s; box-shadow: -26px 0 60px rgba(0,0,0,.5); }
.nav .navlink { display: block; font-size: 18px !important; padding: 11px 0; color: #F3ECE0 !important; }
.nav .nav-sep { display: none; }
/* Language toggle pinned to the drawer's top-right, beside the ✕ — not
stranded in the middle of the link list. */
.nav .lang-btn { position: absolute; top: 19px; right: 84px; margin: 0; color: #F3ECE0 !important; border-color: rgba(243,236,224,.35) !important; }
.nav .cta { margin-top: 10px; }
.menu-scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 54; }
}
/* ── Layout grids (semantic; stack on small screens) ───────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.grid-portrait { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
.grid-checkout { display: grid; grid-template-columns: 1fr 1fr; }
.grid-dash { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.grid-community{ display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.grid-auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.grid-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 40px; }
.row-rec { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 30px; align-items: baseline; }
.row-rec-3 { display: grid; grid-template-columns: 118px 1fr auto; gap: 30px; align-items: baseline; }
.row-past { display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center; }
.featured-card { grid-template-columns: 1.1fr 1fr; } /* writing page hero card; stacks on phones */
@media (max-width: 768px) {
.grid-2, .grid-split, .grid-portrait, .grid-checkout,
.grid-dash, .grid-community { grid-template-columns: 1fr !important; }
/* Once these grids stack, a sticky side column would pin over the content
that scrolls up beside it (About portrait overlapping the bio). Release it. */
.about-aside { position: static !important; top: auto !important; }
.grid-footer { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
.row-rec, .row-rec-3, .row-past { grid-template-columns: 1fr !important; gap: 8px !important; }
}
@media (max-width: 860px) { .grid-auth { grid-template-columns: 1fr !important; } .auth-art { display: none !important; } }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr !important; } }
/* utility */
.measure { max-width: 1180px; margin: 0 auto; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
/* Flex helpers. Alpine's x-show toggles the *inline* `display` property, so an
element that relies on inline `display:flex` loses its layout the moment it's
shown (it falls back to its default display). Keep the shown display in a
class so x-show only flips between `display:none` and these. */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; }
/* Soft cross-document navigation (progressive enhancement; Chromium today). */
@view-transition { navigation: auto; }