/* ============================================================
   ToneThread Blog — theme.css
   Design tokens, nav/footer chrome, and new page utilities.
   Coexists with main.css (post page styles).
   ============================================================ */

:root,
[data-mode="light"] {
  --bg:        #f7f5f0;
  --surface:   #ffffff;
  --surface2:  #f1ede4;
  --ink:       #1a1814;
  --ink2:      #383530;
  --ink3:      #58524a;
  --ink4:      #8a8378;
  --rule:      #e6e0d3;
  --rule2:     #d6cfc0;
  --acc:       #7c3aed;
  --acc2:      #6d9ef7;
  --acc3:      #4fc3f7;
  --tag-bg:    #efe9da;
  --tag-fg:    #4a4538;
  --serif:     'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --mono:      'DM Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r:         8px;
  --rl:        12px;
}

[data-mode="bark"] {
  --bg:        #07060d;
  --surface:   #110f1a;
  --surface2:  #1a1828;
  --ink:       #f5f2ec;
  --ink2:      #d6d1c4;
  --ink3:      #b6ad9d;
  --ink4:      #948d80;
  --rule:      #2a2740;
  --rule2:     #36334d;
  --acc:       #a78bfa;
  --acc2:      #93c5fd;
  --acc3:      #7dd3fc;
  --tag-bg:    #2a2640;
  --tag-fg:    #e6e1d3;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--acc); }

.tt-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ── SHELL — centered 960 column that contains nav, content, footer ── */
.tt-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}

/* ── NAV — sits as a card-style header at top of the shell ── */
.tt-nav {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.7rem 2.25rem;
  background: transparent;
  border: 0;
  border-radius: var(--rl);
  position: sticky; top: 0.5rem; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
}
[data-mode="bark"] .tt-nav { background: var(--surface); }
.tt-nav-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink);
}
.tt-nav-wordmark {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #7c3aed, #6d9ef7 50%, #4fc3f7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tt-nav-links {
  display: flex; gap: 1.1rem; margin-left: 1rem;
}
.tt-nav-links a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3); text-decoration: none;
  padding: 0.4rem 0.2rem; border-bottom: 1px solid transparent;
}
.tt-nav-links a:hover { color: var(--ink); }
.tt-nav-links a[aria-current="page"] {
  color: var(--acc); border-bottom-color: var(--acc);
}
.tt-nav-right {
  margin-left: auto; display: flex; align-items: center; gap: 0.6rem;
}
.tt-bark-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink3);
  background: transparent; border: 1px solid var(--rule2);
  border-radius: 4px; padding: 0.45rem 0.8rem; cursor: pointer;
}
.tt-bark-btn:hover { color: var(--ink); border-color: var(--ink3); }
.tt-sub-btn {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--acc);
  border-radius: 4px; padding: 0.45rem 0.95rem; text-decoration: none;
}
.tt-sub-btn:hover { background: #6c2bd9; }

/* ── FOOTER — sits inside the shell, card-styled ── */
.tt-footer {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: transparent;
  color: var(--ink3);
  border: 0;
  border-radius: var(--rl);
  margin: 2rem 0 1rem;
}
.tt-footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.tt-footer-wordmark {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--ink);
}
.tt-footer-links {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: 1.5rem;
}
.tt-footer-links a {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3); text-decoration: none;
}
.tt-footer-links a:hover { color: var(--ink); }
.tt-footer-cert {
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  margin-left: auto; letter-spacing: 0.06em;
}

/* ── PAGE UTILITIES ──────────────────────────────────────── */
.tt-page-hero {}
.tt-page-wrap {}
.tt-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6d9ef7 50%, #4fc3f7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Scoped helpers used by the new pages */
.tt-zone-pills, .tt-zone-pill { box-sizing: border-box; }
.tt-axis-table-wrap { box-sizing: border-box; }

/* ── HOMEPAGE FEED (works alongside main.css existing cards) ── */
.tt-feed-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--rl);
  overflow: hidden; margin-top: 1.5rem;
}
.tt-feed-grid .tt-card,
.tt-feed-grid .tt-card-featured {
  background: var(--surface); padding: 1.25rem;
  display: block; text-decoration: none; color: inherit;
}
.tt-card-featured { grid-column: 1 / -1; }
.tt-card:hover, .tt-card-featured:hover { background: var(--surface2); }
.tt-card-bar, .tt-feat-bar, .tt-post-top-bar {
  height: 3px; background: linear-gradient(90deg, #7c3aed, #6d9ef7, #4fc3f7);
  border-radius: 2px; margin-bottom: 0.85rem;
}

/* ── HOMEPAGE — hero, featured fingerprint card, scatter, feed ── */
.tt-hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
.tt-hero-inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem;
  max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 3.25rem;
  align-items: start;
}
.tt-hero-kicker {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink4);
  margin: 0 0 1.25rem; display: inline-flex; gap: 0.5rem;
}
.tt-dot { color: var(--ink4); }
.tt-hero-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}
.tt-hero-sub {
  color: var(--ink2); font-size: 0.95rem; line-height: 1.7;
  max-width: 460px; margin: 0 0 1.5rem;
}
.tt-hero-ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tt-btn-ghost {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink2);
  background: transparent; border: 1px solid var(--rule2);
  border-radius: var(--r); padding: 0.65rem 1rem; text-decoration: none;
}
.tt-btn-ghost:hover { color: var(--ink); border-color: var(--ink3); background: var(--surface2); }

/* Featured tonal fingerprint card */
.tt-feat-card {
  background: var(--surface2);
  border: 1px solid var(--rule);
  border-radius: var(--rl);
  padding: 1.25rem 1.35rem 1.1rem;
  position: relative;
}
.tt-feat-head {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--ink4); margin-bottom: 1rem; text-transform: uppercase;
}
.tt-axes { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.1rem; }
.tt-axis-row { display: grid; grid-template-columns: 26px 1fr 36px; align-items: center; gap: 0.7rem; }
.tt-axis-code { font-family: var(--mono); font-size: 0.65rem; color: var(--ink3); letter-spacing: 0.06em; }
.tt-axis-track { background: var(--rule); height: 6px; border-radius: 3px; overflow: hidden; }
.tt-axis-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.tt-axis-val { font-family: var(--mono); font-size: 0.68rem; color: var(--ink3); text-align: right; }
.tt-feat-fp {
  font-family: var(--mono); font-size: 0.78rem; color: var(--acc);
  letter-spacing: 0.04em; padding-top: 0.55rem;
  border-top: 1px solid var(--rule); word-break: break-all;
}
.tt-feat-meta {
  display: inline-flex; gap: 0.5rem; align-items: center;
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  letter-spacing: 0.06em; margin-top: 0.35rem; text-transform: uppercase;
}

/* Tonal landscape (scatter) */
.tt-landscape {
  max-width: 1100px; margin: 0 auto; padding: 2.25rem 2rem 1.5rem;
}
.tt-landscape-head {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem;
}
.tt-rule { flex: 1; height: 1px; background: var(--rule); margin-left: 0.5rem; }
.tt-scatter {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rl);
  padding: 1.25rem 1.5rem 1.5rem;
}
.tt-scatter-svg {
  display: block; width: 100%; height: 220px;
  overflow: visible;
}
.tt-scatter-axis { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.tt-axis-label {
  position: absolute; font-family: var(--mono); font-size: 0.55rem;
  color: var(--ink4); letter-spacing: 0.1em; text-transform: uppercase;
}
.tt-tl { top: 0.55rem; left: 1.1rem; }
.tt-bl { bottom: 0.55rem; left: 1.1rem; }
.tt-br { bottom: 0.55rem; right: 1.1rem; }

.tt-scroll-cue {
  display: flex; justify-content: center; margin: 1.25rem auto 0;
}
.tt-scroll-cue a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--bg); text-decoration: none;
}

/* Latest signal feed */
.tt-feed { max-width: 1100px; margin: 0 auto; padding: 1.75rem 2rem 0.5rem; }
.tt-feed-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--rl);
  overflow: hidden;
}
.tt-feed-card {
  display: flex; align-items: stretch; gap: 1rem;
  padding: 1rem 1.15rem; background: var(--surface);
  text-decoration: none; color: inherit;
}
.tt-feed-card:hover { background: var(--surface2); }
.tt-feed-bar { width: 3px; flex-shrink: 0; border-radius: 2px; }
.tt-feed-body { flex: 1; min-width: 0; }
.tt-feed-meta {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.tt-feed-meta time {
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4); letter-spacing: 0.06em;
}
.tt-tag {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--tag-bg); color: var(--tag-fg);
  padding: 2px 7px; border-radius: 3px;
}
.tt-feed-zone {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.58rem; color: var(--ink4);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tt-feed-pip { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.tt-feed-title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 0.3rem; color: var(--ink); line-height: 1.3;
}
.tt-feed-excerpt {
  margin: 0; color: var(--ink3); font-size: 0.82rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-feed-fp {
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  align-self: center; white-space: nowrap; letter-spacing: 0.04em;
}
.tt-feed-empty { text-align: center; color: var(--ink4); padding: 2rem; }

/* Subscribe block (homepage) */
.tt-sub-block {
  max-width: 1100px; margin: 3rem auto 0; padding: 2.5rem 2rem;
  background: var(--surface); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tt-sub-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.tt-sub-kicker {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: var(--ink4); margin: 0 0 0.6rem;
}
.tt-sub-title {
  font-family: var(--serif); font-size: 1.4rem; font-weight: normal;
  color: var(--ink); margin: 0 0 1.25rem; line-height: 1.35;
}
.tt-sub-form { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; }
.tt-sub-form input {
  flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--rule2);
  border-radius: var(--r); background: var(--bg); color: var(--ink); font-size: 0.9rem;
}
.tt-sub-form button {
  padding: 0.75rem 1.1rem; border: 0; border-radius: var(--r);
  background: var(--acc); color: #fff; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.tt-sub-confirm {
  margin-top: 1rem; color: var(--acc); font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.06em;
}

@media (max-width: 860px) {
  .tt-hero-inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.25rem 2rem; }
  .tt-feat-card { order: 2; }
  .tt-feed-fp { display: none; }
}

/* ── Shared page hero + prose used by Signal / About / Archive / Subscribe ── */
.tt-page-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.tt-page-hero-inner {
  padding: 3rem 2rem 2.75rem;
}
.tt-page-hero-inner > * { max-width: 760px; }
.tt-page-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink4);
  margin: 0 0 1.1rem;
}
.tt-page-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 1rem; max-width: 720px;
}
.tt-page-lede {
  color: var(--ink2); font-size: 0.98rem; line-height: 1.7;
  max-width: 620px; margin: 0;
}

.tt-prose-wrap {
  padding: 2.5rem 2rem 1rem;
}
.tt-prose-wrap > * { max-width: 760px; }
.tt-prose-section { margin-bottom: 2.75rem; }
.tt-prose-h2 {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  color: var(--ink); margin: 0 0 1rem; padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule); letter-spacing: -0.005em;
}
.tt-prose-section p {
  font-size: 0.95rem; color: var(--ink2); line-height: 1.8;
  margin: 0 0 0.95rem;
}
.tt-prose-section p:last-child { margin-bottom: 0; }
.tt-prose-section a { color: var(--acc); text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.tt-prose-section code, .tt-inline-code {
  font-family: var(--mono); font-size: 0.82rem;
  background: var(--surface2); color: var(--acc);
  padding: 2px 6px; border-radius: 3px;
}

.tt-callout {
  background: var(--surface2); border: 1px solid var(--rule);
  border-radius: var(--rl); padding: 1.4rem 1.5rem;
  margin-bottom: 2.75rem;
}
.tt-callout .tt-prose-h2 {
  font-size: 1.1rem; border: 0; padding: 0; margin-bottom: 0.6rem;
}
.tt-callout p {
  font-size: 0.88rem; color: var(--ink2); line-height: 1.75; margin: 0 0 0.6rem;
}
.tt-callout p:last-child { margin-bottom: 0; }

/* List of axes / tools (used on signal & about) */
.tt-list-card {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--rl); overflow: hidden;
}
.tt-list-card-row {
  background: var(--surface); padding: 1.1rem 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.tt-list-pip {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.tt-list-name {
  font-size: 0.92rem; font-weight: 600; color: var(--ink);
  margin: 0 0 0.25rem;
}
.tt-list-desc {
  font-size: 0.83rem; color: var(--ink3); line-height: 1.7; margin: 0;
}
.tt-list-meta {
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  letter-spacing: 0.06em; margin-left: 0.6rem;
}

/* About: 2-col tools grid */
.tt-tools-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--rl); overflow: hidden;
}
.tt-tool-card {
  background: var(--surface); padding: 1.1rem 1.2rem;
}
.tt-tool-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 0.45rem;
}
.tt-tool-name {
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
.tt-tool-desc {
  font-size: 0.78rem; color: var(--ink3); line-height: 1.65; margin: 0;
}
@media (max-width: 700px) { .tt-tools-grid { grid-template-columns: 1fr; } }

/* Subscribe page form */
.tt-sub-page-form {
  display: flex; flex-direction: column; gap: 0.75rem;
  max-width: 480px;
}
.tt-sub-page-form input {
  padding: 0.85rem 1rem; border: 1px solid var(--rule2);
  border-radius: var(--r); background: var(--surface);
  color: var(--ink); font-size: 0.95rem; font-family: var(--sans);
}
.tt-sub-page-form input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.tt-sub-page-form button {
  padding: 0.9rem 1rem; border: 0; border-radius: var(--r);
  background: var(--acc); color: #fff;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
}
.tt-sub-page-form button:hover { background: #6c2bd9; }
.tt-form-notice {
  background: var(--surface2); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1rem 1.2rem;
  color: var(--ink2); margin: 0 0 1.25rem; max-width: 480px;
  font-size: 0.9rem;
}
.tt-form-notice--error {
  background: #fdecec; border-color: #f5c6c6; color: #8a2222;
}
[data-mode="bark"] .tt-form-notice--error {
  background: #2a1010; border-color: #5a1a1a; color: #ffb4b4;
}

/* ============================================================
   HOMEPAGE v2 — centered frame, polished hero, rich signal cards
   ============================================================ */

.tt-frame {
  margin: 1rem 0 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--rl);
  overflow: hidden;
}
/* Generic padded inner block for subpages using .tt-frame */
.tt-frame-pad { padding: 2rem 2.25rem; }
@media (max-width: 800px) {
  .tt-frame-pad { padding: 1.5rem 1.25rem; }
}
[data-mode="bark"] .tt-frame { background: var(--surface); border-color: var(--rule); }

/* ── Hero v2 ── */
.tt-hero-v2 {
  position: relative;
  background: var(--surface);
}
.tt-hero-v2 .tt-hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem;
  padding: 2.75rem 2.25rem 3rem;
  align-items: start;
}
.tt-hero-v2 .tt-hero-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem); line-height: 1.08;
  margin: 0 0 1rem; letter-spacing: -0.01em;
}
.tt-hero-v2 .tt-hero-sub {
  color: var(--ink2); font-size: 0.9rem; line-height: 1.65;
  max-width: 380px; margin: 0 0 1.5rem;
}
.tt-btn-primary {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  background: var(--acc); color: #fff;
  border: 0; border-radius: 999px; padding: 0.55rem 1.15rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(124,58,237,0.25);
}
.tt-btn-primary:hover { background: #6c2bd9; }
.tt-btn-pill {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  color: var(--ink2); background: transparent;
  border: 1px solid var(--rule2); border-radius: 999px;
  padding: 0.55rem 1.15rem; text-decoration: none;
}
.tt-btn-pill:hover { color: var(--ink); border-color: var(--ink3); }

/* hero wave divider */
.tt-hero-wave {
  display: block; width: 100%; height: 28px;
  background: var(--bg); pointer-events: none;
}
.tt-hero-wave path {
  fill: var(--surface);
  opacity: 0.55;
}
[data-mode="bark"] .tt-hero-wave path { fill: #1a1828; opacity: 1; }

/* ── Tonal landscape v2 ── */
.tt-landscape-v2 {
  padding: 1.6rem 2.25rem 1.5rem;
  background: var(--bg);
}
.tt-landscape-v2 .tt-landscape-head { margin-bottom: 1rem; }
.tt-scatter-2col {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--rl); overflow: hidden;
  height: 220px;
}
.tt-scatter-pane {
  position: relative;
  border-right: 1px dashed var(--rule);
}
.tt-scatter-pane:last-child { border-right: 0; }
.tt-scatter-pane svg {
  display: block; width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.tt-scatter-2col .tt-axis-label { z-index: 2; }
.tt-axlbl-tl { position: absolute; top: 10px;    left: 12px; }
.tt-axlbl-bl { position: absolute; bottom: 10px; left: 12px; }
.tt-axlbl-br { position: absolute; bottom: 10px; right: 12px; }

/* ── Latest signal — rich card ── */
.tt-feed-v2 {
  padding: 1.6rem 2.25rem 2rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.tt-feed-v2 .tt-landscape-head { margin-bottom: 1rem; }
.tt-rich-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--rl); overflow: hidden;
  margin-bottom: 1rem;
}
.tt-rich-card:hover { border-color: var(--rule2); }
.tt-rich-bar {
  height: 4px;
  background: linear-gradient(90deg,
    #ec4899 0%, #f59e0b 25%, #10b981 50%, #4fc3f7 75%, #7c3aed 100%);
}
.tt-rich-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0;
}
.tt-rich-left  { padding: 1.4rem 1.5rem; border-right: 1px solid var(--rule); }
.tt-rich-right { padding: 1.4rem 1.5rem; background: var(--surface); }
.tt-rich-meta {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  letter-spacing: 0.06em;
}
.tt-rich-meta .tt-tag { font-size: 0.55rem; }
.tt-rich-meta time { margin-left: auto; }
.tt-rich-title {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); margin: 0 0 0.5rem; line-height: 1.25;
  letter-spacing: -0.005em;
}
.tt-rich-excerpt {
  margin: 0 0 1rem; color: var(--ink2);
  font-size: 0.9rem; line-height: 1.6;
}
.tt-rich-fpchip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.65rem; color: var(--acc2);
  background: var(--surface2); border: 1px solid var(--rule);
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.04em;
}
.tt-rich-fpchip-pip { width: 6px; height: 6px; border-radius: 50%; }

.tt-rich-section-h {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink4); margin: 0 0 0.7rem;
}
.tt-rich-axes { margin-bottom: 1rem; }
.tt-rich-axes .tt-axis-row { grid-template-columns: 24px 1fr 38px; gap: 0.6rem; }
.tt-rich-axes .tt-axis-track { background: var(--rule); }

.tt-rich-cert {
  display: grid; grid-template-columns: auto 1fr;
  row-gap: 0.42rem; column-gap: 1rem;
  font-family: var(--mono); font-size: 0.7rem;
  margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--rule);
}
.tt-rich-cert dt { color: var(--ink4); letter-spacing: 0.04em; }
.tt-rich-cert dd { color: var(--ink); margin: 0; text-align: right; letter-spacing: 0.03em; }
.tt-rich-cert dd.is-zone { color: var(--acc2); }
.tt-rich-cert dd.is-ok   { color: #10b981; }

@media (max-width: 800px) {
  .tt-frame { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .tt-hero-v2 .tt-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.25rem 2.25rem; }
  .tt-landscape-v2, .tt-feed-v2 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tt-rich-grid { grid-template-columns: 1fr; }
  .tt-rich-left { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ============================================================
   HOMEPAGE v2 — secondary grid + certificate verification
   ============================================================ */

.tt-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 1rem;
}
.tt-mini-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--rl); overflow: hidden;
  display: flex; flex-direction: column;
}
.tt-mini-card:hover { border-color: var(--rule2); }
.tt-mini-bar { height: 3px;
  background: linear-gradient(90deg,
    #ec4899 0%, #f59e0b 25%, #10b981 50%, #4fc3f7 75%, #7c3aed 100%);
}
.tt-mini-body { padding: 1rem 1.1rem 0.9rem; flex: 1;
  display: flex; flex-direction: column; }
.tt-mini-meta {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.55rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--ink4);
  letter-spacing: 0.06em;
}
.tt-mini-meta time { margin-left: auto; }
.tt-mini-title {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  color: var(--ink); margin: 0 0 0.45rem; line-height: 1.25;
}
.tt-mini-excerpt {
  margin: 0 0 0.85rem; color: var(--ink2);
  font-size: 0.78rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-mini-foot {
  margin-top: auto; padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.62rem; color: var(--acc2);
  letter-spacing: 0.04em;
}
.tt-mini-pip { width: 6px; height: 6px; border-radius: 50%; }
.tt-mini-spark { margin-left: auto; opacity: 0.85; }

/* ── Certificate verification ── */
.tt-verify-block {
  background: var(--surface);
  padding: 1.6rem 2.25rem 1.9rem;
  border-top: 1px solid var(--rule);
}
.tt-verify-block .tt-landscape-head { margin-bottom: 1.1rem; }
.tt-verify-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  border: 1px solid var(--rule); border-radius: var(--rl);
  padding: 1.1rem;
  background: var(--bg);
}
.tt-vstep {
  text-align: center;
  padding: 0.9rem 0.5rem;
  border-radius: 10px;
  background: transparent;
}
.tt-vstep.is-active { background: var(--surface2); border: 1px solid var(--rule); }
.tt-vstep-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  margin: 0 auto 0.55rem;
  font-family: var(--mono); font-size: 0.85rem;
}
.tt-vstep-icon.is-ok { background: rgba(16,185,129,0.12); color: #10b981;
  border: 1px solid rgba(16,185,129,0.4); }
.tt-vstep-icon.is-run { background: rgba(124,58,237,0.12); color: var(--acc);
  border: 1px solid rgba(124,58,237,0.45); }
.tt-vstep-icon.is-pending { background: var(--surface2); color: var(--ink4);
  border: 1px solid var(--rule); }
.tt-vstep-label {
  display: block;
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--ink); letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.tt-vstep-sub {
  display: block;
  font-family: var(--mono); font-size: 0.58rem;
  color: var(--ink4); letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .tt-grid-3 { grid-template-columns: 1fr; }
  .tt-verify-block { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tt-verify-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Bare frame variant: no internal padding (used by post.njk + verify.njk
     where .post-single owns its own internal layout). ── */
.tt-frame.tt-frame--bare { padding: 0; overflow: visible; background: transparent; border: none; box-shadow: none; }
[data-mode="bark"] .tt-frame.tt-frame--bare { background: transparent; border: none; }