/* ════════════════════════════════════════════════════════════════════
   The House of Tea & Madness — overlay on Source
   Layers dark/literary aesthetics over Source's gh-* classes.
   Loaded AFTER built/screen.css.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Tea & Madness palette */
    --ink-void:          #0d1320;
    --ink-floor:         #131a28;
    --ink-floor-up:      #1a2235;
    --bone:              #f3eee2;
    --bone-dim:          #c7c0b0;
    --bone-fade:         #8e8775;
    --bone-ghost:        #5a5648;
    --hairline:          rgb(243 238 226 / 0.10);
    --hairline-bright:   rgb(243 238 226 / 0.22);

    --cheshire:          oklch(0.82 0.14 195);
    --cheshire-deep:     oklch(0.55 0.12 195);
    --chain:             oklch(0.66 0.22 340);
    --maze:              oklch(0.62 0.18 295);
    --tea:               oklch(0.78 0.14 75);

    --font-display:      "EB Garamond", Georgia, Times, serif;
    --display-italic:    italic;
    --glow-mult:         1;
}

/* Accent variants (driven by @custom.accent_color_mood body class) */
.accent-chain  { --cheshire: var(--chain); --cheshire-deep: oklch(0.45 0.18 340); }
.accent-maze   { --cheshire: var(--maze);  --cheshire-deep: oklch(0.42 0.14 295); }
.accent-tea    { --cheshire: var(--tea);   --cheshire-deep: oklch(0.55 0.12 75); }

.glow-quiet      { --glow-mult: 0.45; }
.glow-lanternlit { --glow-mult: 1.5; }

/* Light-text root flip — extend Source's existing .has-light-text with T&M tones */
:root.has-light-text {
    --color-white: var(--bone);
    --color-lighter-gray: var(--hairline);
    --color-light-gray: var(--ink-floor-up);
    --color-mid-gray: var(--bone-fade);
    --color-dark-gray: var(--bone-dim);
    --color-darker-gray: var(--bone);
    --color-primary-text: var(--bone);
    --color-secondary-text: var(--bone-dim);
    --color-border: var(--hairline);
    --color-dark-border: var(--hairline-bright);
}

/* ── Body & global tone ─────────────────────────────────────────── */
body {
    background: var(--ink-void);
    color: var(--bone-dim);
}

::selection {
    background: var(--cheshire);
    color: var(--ink-void);
}

a { text-decoration: none; }

/* ── Navigation ─────────────────────────────────────────────────── */
.gh-navigation {
    border-bottom: 1px solid var(--hairline);
    background: color-mix(in oklab, var(--ink-void) 92%, transparent);
    backdrop-filter: saturate(140%) blur(6px);
}
.gh-navigation-actions a,
.gh-navigation-menu a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-fade);
}
.gh-navigation-menu a:hover,
.gh-navigation-actions a:hover { color: var(--bone); }
.gh-navigation .gh-button {
    background: transparent;
    border: 1px solid var(--cheshire);
    color: var(--cheshire);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 10px 16px;
}
.gh-navigation .gh-button:hover {
    background: var(--cheshire);
    color: var(--ink-void);
}
.gh-head-logo,
.gh-head-logo.no-image {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--bone);
}

/* ── Header (homepage hero) ─────────────────────────────────────── */
.gh-header {
    position: relative;
    border-bottom: 1px solid var(--hairline);
}
.gh-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 110%,
        color-mix(in oklch, var(--cheshire) calc(8% * var(--glow-mult, 1)), transparent),
        transparent 65%),
      linear-gradient(180deg, transparent 40%, color-mix(in oklch, var(--ink-floor) 60%, transparent));
}
.gh-header-content { position: relative; z-index: 1; }
.gh-header-title { letter-spacing: -0.018em; color: var(--bone); }
.gh-header-description { color: var(--bone-dim); }
.gh-header-button {
    background: var(--cheshire);
    color: var(--ink-void);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 14px 22px;
}
.gh-header-button:hover { background: var(--bone); color: var(--ink-void); }

/* ── Container titles ("Latest") ────────────────────────────────── */
.gh-container-title {
    font-family: var(--font-mono);
    font-size: 11px !important;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bone-fade);
    border-top: 1px solid var(--hairline);
    padding-top: 28px;
    margin-bottom: 32px;
}
.gh-container-title::before {
    content: "§ ";
    color: var(--cheshire);
    margin-right: 4px;
}

/* ── Post card / Lantern ────────────────────────────────────────── */
.gh-card {
    border-color: var(--hairline);
    background: var(--ink-floor);
    transition: border-color 0.15s, transform 0.15s;
    padding: 24px;
}
.gh-card:hover {
    border-color: var(--cheshire);
}
.gh-card-image {
    border-bottom: 1px solid var(--hairline);
    filter: saturate(0.88) brightness(0.92);
}
.gh-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--bone);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.gh-card-excerpt {
    color: var(--bone-dim);
    font-size: 15px;
    line-height: 1.55;
}
.gh-card-meta,
.gh-card-tags,
.gh-card-author,
.gh-card-date {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-ghost);
}
.gh-card-tag { color: var(--chain); }
.gh-card-meta { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }

/* Featured post highlight */
.gh-card.featured::before,
.gh-card[data-is-featured="true"]::before {
    content: "✦";
    color: var(--cheshire);
}

/* "See all →" pagination link */
.gh-more a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cheshire);
    border-top: 1px solid var(--hairline);
    padding-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.gh-more a:hover { color: var(--bone); }
.gh-more svg { width: 14px; height: 14px; }

/* ── Featured strip ─────────────────────────────────────────────── */
.gh-featured {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.gh-featured-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cheshire);
}
.gh-featured-title::before { content: "✦ "; }

/* ── CTA ────────────────────────────────────────────────────────── */
.gh-cta {
    background: var(--ink-floor);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}
.gh-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%,
        color-mix(in oklch, var(--cheshire) calc(10% * var(--glow-mult, 1)), transparent),
        transparent 60%);
}
.gh-cta-inner { position: relative; z-index: 1; }
.gh-cta-title {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--bone);
    letter-spacing: -0.015em;
}
.gh-cta-description, .gh-cta-text { color: var(--bone-dim); }
.gh-cta input[type="email"] {
    background: var(--ink-void);
    border: 1px solid var(--hairline-bright);
    color: var(--bone);
    border-radius: 0;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.gh-cta input[type="email"]:focus {
    outline: none;
    border-color: var(--cheshire);
}
.gh-cta .gh-button,
.gh-button {
    background: var(--cheshire);
    color: var(--ink-void) !important;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 14px 22px;
    border: none;
}
.gh-button:hover { background: var(--bone); }

/* ── Single post / page (article) ───────────────────────────────── */
.gh-article-title,
.is-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--bone);
    letter-spacing: -0.018em;
}
.gh-article-title em,
.is-title em {
    font-style: italic;
    color: var(--bone-dim);
    font-weight: 400;
}
.gh-article-excerpt {
    color: var(--bone-dim);
    font-family: var(--font-display);
    font-style: italic;
}
.gh-article-meta,
.gh-article-tag,
.gh-article-author-name,
.gh-article-date {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-fade);
}
.gh-article-tag { color: var(--chain); }

/* Page template (no header gating) — preserve T&M minimalism */
.gh-canvas {
    color: var(--bone-dim);
}

/* ── Content body (post + page) ─────────────────────────────────── */
.gh-content,
.gh-content.is-body {
    color: var(--bone-dim);
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.7;
}
.gh-content > p:first-of-type {
    color: var(--bone);
    font-size: 22px;
    line-height: 1.55;
}
.gh-content h2 {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cheshire);
    font-weight: 500;
    margin-top: 56px;
}
.gh-content h3 {
    font-family: var(--font-display);
    color: var(--bone);
    font-size: 28px;
    font-style: italic;
    font-weight: 500;
    margin-top: 48px;
}
.gh-content h4, .gh-content h5, .gh-content h6 {
    font-family: var(--font-display);
    color: var(--bone);
}
.gh-content a {
    color: var(--cheshire);
    border-bottom: 1px solid color-mix(in oklch, var(--cheshire) 40%, transparent);
}
.gh-content a:hover {
    color: var(--bone);
    border-bottom-color: var(--bone);
}
.gh-content blockquote {
    border-left: 1px solid var(--chain);
    padding: 8px 0 8px 24px;
    margin: 44px 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--bone);
    font-size: 26px;
    line-height: 1.35;
}
.gh-content code {
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    color: var(--bone);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.86em;
}
.gh-content pre {
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    color: var(--bone);
    border-radius: 0;
}
.gh-content hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 56px 0;
}
.gh-content figcaption {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bone-fade);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Drop cap variant — keep T&M tone */
.has-serif-body .gh-content > p:first-of-type::first-letter,
.gh-canvas[data-drop-cap] > p:first-of-type::first-letter {
    color: var(--cheshire);
}

/* ── Koenig editor cards — keep ink/floor surfaces ──────────────── */
.kg-bookmark-card,
.kg-callout-card,
.kg-toggle-card,
.kg-header-card,
.kg-product-card,
.kg-file-card,
.kg-signup-card,
.kg-nft-card {
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    color: var(--bone-dim);
}
.kg-bookmark-title,
.kg-product-card-title,
.kg-file-card-title { color: var(--bone); font-family: var(--font-display); }
.kg-bookmark-metadata,
.kg-file-card-metadata {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-fade);
}
.kg-callout-card { border-left: 2px solid var(--cheshire); }

/* ── Sidebar (gh-about) ─────────────────────────────────────────── */
.gh-sidebar { border-left: 1px solid var(--hairline); }
.gh-about-title { font-family: var(--font-display); color: var(--bone); }
.gh-about-description { color: var(--bone-dim); }
.gh-sidebar-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bone-fade);
}

/* ── Footer ─────────────────────────────────────────────────────── */
.gh-footer {
    border-top: 1px solid var(--hairline);
    background: var(--ink-void);
    color: var(--bone-dim);
}
.gh-footer a { color: var(--bone-fade); }
.gh-footer a:hover { color: var(--bone); }
.gh-footer-bar {
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bone-ghost);
}
.gh-footer-signup {
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    border-radius: 0;
}
.gh-footer-signup-title { font-family: var(--font-display); color: var(--bone); }
.gh-footer-signup-description { color: var(--bone-dim); }

/* ── Comments ───────────────────────────────────────────────────── */
.gh-comments-title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-fade);
}

/* ── Archive / tag / author ─────────────────────────────────────── */
.gh-archive-header {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 56px;
    margin-bottom: 56px;
}
.gh-archive-title { font-family: var(--font-display); color: var(--bone); letter-spacing: -0.015em; }
.gh-archive-description { color: var(--bone-dim); }
.gh-tag-meta,
.gh-author-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-fade);
}

/* ── Buttons & inputs (generic) ─────────────────────────────────── */
input, textarea {
    background: var(--ink-floor);
    border: 1px solid var(--hairline-bright);
    color: var(--bone);
    border-radius: 0;
}
input:focus, textarea:focus { outline: none; border-color: var(--cheshire); }

/* ── Hairlines between feed cards (List variant) ────────────────── */
.gh-feed.is-list .gh-card { border-bottom: 1px solid var(--hairline); }

/* ── Maze-floor decoration on Landing header (always on) ────────── */
.gh-header.is-landing::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 240px;
    background-image:
        linear-gradient(transparent, color-mix(in oklch, var(--cheshire) 6%, transparent)),
        repeating-linear-gradient(90deg, transparent 0 79px, var(--hairline) 79px 80px),
        repeating-linear-gradient(0deg, transparent 0 39px, var(--hairline) 39px 40px);
    transform: perspective(600px) rotateX(60deg) translateY(80px);
    transform-origin: center bottom;
    opacity: 0.55;
    pointer-events: none;
}

/* ── Misc T&M flourishes ────────────────────────────────────────── */
.gh-cta-inner::after {
    content: "⌬ — ⌬ — ⌬ — ⌬ — ⌬";
    display: block;
    text-align: center;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--bone-ghost);
}


/* ════════════════════════════════════════════════════════════════════
   THRESHOLD HOMEPAGE — landing built on three components:
   threshold (welcome) · lanterns-lit (featured) · corridor-index (list)
   All classes prefixed .tm- to avoid colliding with Source's .gh-*.
   ════════════════════════════════════════════════════════════════════ */

.tm-display {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--bone);
    letter-spacing: -0.018em;
    line-height: 1.02;
}
.tm-display em { font-style: italic; font-weight: 400; color: var(--bone-dim); }
.tm-dot { opacity: 0.45; margin: 0 0.4em; }

.tm-meta-line, .tm-sec-meta, .tm-card-head, .tm-card-foot,
.tm-btn-solid, .tm-btn-link, .tm-walk, .tm-walk-link, .tm-walk-full,
.tm-pace-tag, .tm-portrait-tag, .tm-portrait-caption, .tm-sec-eyebrow,
.tm-featured-id, .tm-featured-stamp, .tm-sig {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-fade);
}

/* ── THRESHOLD ──────────────────────────────────────────────────── */
.tm-threshold {
    position: relative;
    padding: 100px 56px 120px;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}
.tm-brk {
    position: absolute;
    width: 32px; height: 32px;
    border: 1px solid var(--cheshire);
    opacity: 0.7;
    pointer-events: none;
}
.tm-brk-tl { top: 24px; left: 24px;   border-right: none; border-bottom: none; }
.tm-brk-tr { top: 24px; right: 24px;  border-left: none;  border-bottom: none; }
.tm-brk-bl { bottom: 24px; left: 24px;  border-right: none; border-top: none; }
.tm-brk-br { bottom: 24px; right: 24px; border-left: none;  border-top: none; }

.tm-maze-floor {
    position: absolute;
    inset: auto 0 0 0;
    height: 280px;
    background-image:
        linear-gradient(transparent, color-mix(in oklch, var(--cheshire) 8%, transparent)),
        repeating-linear-gradient(90deg, transparent 0 79px, var(--hairline) 79px 80px),
        repeating-linear-gradient(0deg, transparent 0 39px, var(--hairline) 39px 40px);
    transform: perspective(700px) rotateX(62deg) translateY(40px);
    transform-origin: center bottom;
    opacity: 0.45;
    pointer-events: none;
}

.tm-threshold-grid {
    position: relative; z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 80px;
    align-items: start;
}

.tm-threshold-prose .tm-meta-line { margin-bottom: 56px; color: var(--cheshire); }
.tm-threshold-prose h1.tm-display {
    font-size: clamp(56px, 7vw, 96px);
    margin: 0 0 28px;
}

.tm-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.35;
    color: var(--bone);
    margin: 0 0 36px;
    max-width: 38ch;
}
.tm-prose-body {
    font-family: var(--font-serif, var(--font-display));
    font-size: 19px;
    line-height: 1.65;
    color: var(--bone-dim);
    max-width: 50ch;
}
.tm-prose-body p { margin: 0 0 18px; }
.tm-prose-body p:last-child { color: var(--bone); }

.tm-threshold-actions { display: flex; align-items: center; margin-top: 44px; }

.tm-btn-solid {
    background: var(--cheshire);
    color: var(--ink-void) !important;
    padding: 14px 22px;
    display: inline-block;
    font-weight: 600;
    transition: background 0.15s;
}
.tm-btn-solid:hover { background: var(--bone); }
.tm-btn-link {
    color: var(--bone-fade) !important;
    border-bottom: 1px solid var(--hairline-bright);
    padding: 14px 0;
    margin-left: 24px;
}
.tm-btn-link:hover { color: var(--bone) !important; border-bottom-color: var(--cheshire); }

.tm-sig {
    margin-top: 48px;
    display: flex; gap: 12px; align-items: baseline;
    color: var(--bone-fade);
}
.tm-sig-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
}
.tm-sig-tail { color: var(--bone-ghost); }

/* portrait */
.tm-portrait { position: relative; }
.tm-portrait-frame {
    position: relative;
    padding: 18px;
    background: var(--ink-floor);
    border: 1px solid var(--hairline-bright);
}
.tm-pf-corner {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--chain);
    z-index: 2;
}
.tm-pf-tl { top: -1px;    left: -1px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.tm-pf-tr { top: -1px;    right: -1px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.tm-pf-bl { bottom: -1px; left: -1px;  clip-path: polygon(0 100%, 100% 100%, 0 0); }
.tm-pf-br { bottom: -1px; right: -1px; clip-path: polygon(100% 100%, 0 100%, 100% 0); }

.tm-portrait-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--ink-void);
    filter: saturate(0.92) brightness(0.95);
}
.tm-portrait-placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background:
        repeating-linear-gradient(135deg,
            transparent 0 12px,
            color-mix(in oklch, var(--cheshire) 7%, transparent) 12px 13px),
        var(--ink-void);
    color: var(--bone-fade);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 24px;
    line-height: 1.7;
}

.tm-portrait-tag {
    position: absolute;
    left: 18px; right: 18px; bottom: 28px;
    display: flex; gap: 14px; align-items: baseline;
    padding: 10px 14px;
    background: color-mix(in oklab, var(--ink-void) 85%, transparent);
    border: 1px solid var(--hairline-bright);
    color: var(--bone-dim);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tm-pt-id { color: var(--cheshire); }
.tm-pt-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
}
.tm-pt-role { color: var(--bone-ghost); margin-left: auto; }

.tm-portrait-caption {
    margin-top: 18px;
    display: flex; gap: 12px; align-items: center;
    color: var(--bone-ghost);
}
.tm-pc-line { flex: 0 0 28px; height: 1px; background: var(--bone-ghost); }

/* ── SHARED SECTION HEAD ───────────────────────────────────────── */
.tm-section-head {
    max-width: 1100px;
    margin: 0 auto 56px;
    padding: 0 56px;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 16px;
    align-items: center;
}
.tm-section-head-wide { max-width: 1280px; }
.tm-sec-symbol { color: var(--cheshire); font-size: 16px; }
.tm-sec-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bone);
}
.tm-sec-rule { height: 1px; background: var(--hairline-bright); }
.tm-sec-meta { color: var(--bone-ghost); }

/* ── LANTERNS LIT (featured) ───────────────────────────────────── */
.tm-lanterns {
    position: relative;
    padding: 100px 0 110px;
    border-bottom: 1px solid var(--hairline);
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in oklch, var(--cheshire) 6%, transparent), transparent 50%),
        var(--ink-void);
}
.tm-featured {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 56px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 72px;
    align-items: center;
}
.tm-featured-sigil {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
}
.tm-featured-sigil .tm-ring {
    width: 320px; height: 320px;
    filter: drop-shadow(0 0 30px color-mix(in oklch, var(--cheshire) 18%, transparent));
}
.tm-featured-sigil .tm-ring-mid {
    animation: tm-pulse 4s ease-in-out infinite;
    transform-origin: 160px 160px;
}
.tm-featured-sigil .tm-ring-outer {
    animation: tm-pulse-slow 6s ease-in-out infinite;
    transform-origin: 160px 160px;
}
@keyframes tm-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
@keyframes tm-pulse-slow { 0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:.85; transform:scale(1.02);} }

.tm-featured-id {
    text-align: center;
    color: var(--cheshire);
    letter-spacing: 0.28em;
}

.tm-featured-body { max-width: 56ch; }
.tm-featured-stamp {
    display: flex; align-items: center;
    margin-bottom: 24px;
    color: var(--cheshire);
}
.tm-featured-stamp .tm-dot { color: var(--bone-ghost); }
.tm-tag-chain { color: var(--chain) !important; }

.tm-featured-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--bone);
    margin: 0 0 24px;
}
.tm-featured-title a { color: inherit; }
.tm-featured-title em { font-style: italic; color: var(--bone-dim); font-weight: 400; }

.tm-featured-dek {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.55;
    color: var(--bone-dim);
    margin: 0 0 32px;
}

.tm-walk-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    color: var(--cheshire) !important;
    padding: 16px 0;
    border-top: 1px solid var(--hairline-bright);
    border-bottom: 1px solid var(--hairline-bright);
    transition: color 0.15s, border-color 0.15s;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.tm-walk-link:hover { color: var(--bone) !important; border-color: var(--cheshire); }
.tm-walk-link .tm-walk-rule { height: 1px; background: currentColor; opacity: 0.4; }
.tm-walk-link .tm-walk-meta { color: var(--bone-ghost); }

/* ── CORRIDOR INDEX ────────────────────────────────────────────── */
.tm-corridor {
    position: relative;
    padding: 100px 0 120px;
}
.tm-corridor-howto {
    max-width: 60ch;
    margin: -24px auto 60px;
    padding: 0 56px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--bone-dim);
}
.tm-corridor-howto em { color: var(--cheshire); font-style: italic; }

.tm-floor-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
    position: relative;
}

.tm-compass {
    position: absolute;
    top: -8px; right: 56px;
    width: 64px; height: 64px;
    display: grid; place-items: center;
}
.tm-compass-N {
    position: absolute; top: -4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--cheshire);
}
.tm-compass-dial {
    position: relative;
    width: 48px; height: 48px;
    border: 1px solid var(--hairline-bright);
    border-radius: 50%;
}
.tm-compass-dial::before {
    content: "";
    position: absolute;
    left: 50%; top: 4px;
    width: 1px; height: 18px;
    background: var(--cheshire);
    transform: translateX(-50%);
}
.tm-compass-dial::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    background: var(--cheshire);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.tm-floor {
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(var(--cheshire) 0 100%) no-repeat center / 1px 100%;
    background-color: transparent;
}
.tm-floor::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: calc(50% - 120px);
    border-left: 1px dashed var(--hairline);
    pointer-events: none;
}
.tm-floor::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: calc(50% - 120px);
    border-left: 1px dashed var(--hairline);
    pointer-events: none;
}

.tm-pace {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px 0;
    color: var(--bone-ghost);
}
.tm-pace-rule { flex: 0 0 80px; height: 1px; background: var(--hairline); }
.tm-pace-tag {
    background: var(--ink-void);
    padding: 2px 12px;
    color: var(--bone-ghost);
    letter-spacing: 0.22em;
}
.tm-pace-start .tm-pace-tag {
    color: var(--cheshire);
    border: 1px solid var(--cheshire);
    padding: 6px 14px;
}
.tm-pace-end {
    flex-direction: column;
    gap: 18px;
    padding-top: 40px;
}
.tm-pace-end .tm-pace-tag { color: var(--bone-fade); }
.tm-walk-full {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid var(--cheshire);
    color: var(--cheshire) !important;
    background: var(--ink-void);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}
.tm-walk-full:hover { background: var(--cheshire); color: var(--ink-void) !important; }

.tm-node {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    padding: 8px 0;
}
.tm-node-card {
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    padding: 24px 26px;
    max-width: 460px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.tm-node:hover .tm-node-card {
    border-color: var(--cheshire);
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--cheshire) 25%, transparent),
        0 30px 60px -20px color-mix(in oklch, var(--cheshire) 25%, transparent);
}
.tm-node-left  .tm-node-card { grid-column: 1; justify-self: end;   }
.tm-node-left  .tm-node-arm  { grid-column: 2; }
.tm-node-right .tm-node-arm  { grid-column: 2; }
.tm-node-right .tm-node-card { grid-column: 3; justify-self: start; }

.tm-node-arm {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
}
.tm-node-left .tm-node-arm::before,
.tm-node-right .tm-node-arm::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: var(--cheshire);
    opacity: 0.55;
}
.tm-node-left  .tm-node-arm::before { right: 50%; width: calc(50% + 4px); }
.tm-node-right .tm-node-arm::before { left: 50%;  width: calc(50% + 4px); }
.tm-node-arm::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    background: var(--chain);
    border-radius: 50%;
}
.tm-node-left  .tm-node-arm::after { right: 0; transform: translate(50%, -50%); }
.tm-node-right .tm-node-arm::after { left: 0;  transform: translate(-50%, -50%); }

.tm-node-sigil {
    position: relative; z-index: 1;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--ink-void);
    border-radius: 50%;
    color: var(--cheshire);
    box-shadow:
        0 0 0 1px var(--hairline-bright),
        0 0 20px color-mix(in oklch, var(--cheshire) 25%, transparent);
    transition: color 0.18s, box-shadow 0.18s;
}
.tm-node:hover .tm-node-sigil {
    box-shadow:
        0 0 0 1px var(--cheshire),
        0 0 30px color-mix(in oklch, var(--cheshire) 50%, transparent);
}
.tm-node-sigil svg { width: 40px; height: 40px; }
.tm-node-faint .tm-node-sigil { color: var(--cheshire-deep); opacity: 0.7; }
.tm-node-faint .tm-node-card  { background: color-mix(in oklab, var(--ink-floor) 80%, var(--ink-void)); }
.tm-node-faint .tm-card-title { color: var(--bone-dim); }

.tm-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: var(--bone-ghost);
}
.tm-card-num { color: var(--cheshire); }
.tm-tag-cheshire { color: var(--cheshire); }
.tm-tag-chain    { color: var(--chain); }
.tm-tag-maze     { color: var(--maze); }
.tm-tag-tea      { color: var(--tea); }
.tm-card-date { margin-left: auto; color: var(--bone-fade); }

.tm-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--bone);
    margin: 0 0 14px;
}
.tm-card-title a { color: inherit; border-bottom: none; }
.tm-card-title em { font-style: italic; color: var(--bone-dim); font-weight: 400; }

.tm-card-excerpt {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.5;
    color: var(--bone-dim);
    margin: 0 0 20px;
    max-width: 44ch;
}
.tm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tm-dur { color: var(--bone-fade); }
.tm-walk {
    color: var(--cheshire);
    transition: color 0.15s, letter-spacing 0.18s;
}
.tm-node:hover .tm-walk { color: var(--bone); letter-spacing: 0.24em; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .tm-threshold { padding: 64px 28px 84px; }
    .tm-threshold-grid { grid-template-columns: 1fr; gap: 48px; }
    .tm-threshold-prose h1.tm-display { font-size: clamp(44px, 9vw, 68px); }

    .tm-section-head { padding: 0 28px; }
    .tm-featured { grid-template-columns: 1fr; gap: 40px; padding: 0 28px; }
    .tm-featured-sigil .tm-ring { width: 220px; height: 220px; }

    .tm-floor-wrap { padding: 0 16px; }
    .tm-floor::before, .tm-floor::after { display: none; }
    .tm-node, .tm-node-left, .tm-node-right { grid-template-columns: 56px 1fr; }
    .tm-node-left .tm-node-card, .tm-node-right .tm-node-card {
        grid-column: 2; justify-self: stretch; max-width: none;
    }
    .tm-node-left .tm-node-arm, .tm-node-right .tm-node-arm { grid-column: 1; }
    .tm-node-left .tm-node-arm::before, .tm-node-right .tm-node-arm::before { display: none; }
    .tm-floor { background-position: 28px 0; background-size: 1px 100%; }
}


/* ════════════════════════════════════════════════════════════════════
   ARCHIVE / POSTS / AUTHOR / TAG PAGES
   ════════════════════════════════════════════════════════════════════ */

.tm-archive-page,
.tm-author-page {
    padding-bottom: 80px;
}

/* ── shared archive hero ──────────────────────────────────────── */
.tm-archive-hero {
    position: relative;
    padding: 100px 56px 80px;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}
.tm-archive-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 110%,
            color-mix(in oklch, var(--cheshire) calc(6% * var(--glow-mult, 1)), transparent),
            transparent 60%);
}
.tm-archive-hero-inner {
    position: relative; z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.tm-archive-eyebrow {
    justify-content: center;
    display: flex;
    color: var(--cheshire);
    margin-bottom: 32px;
}
.tm-archive-title {
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1.02;
    margin: 0 0 28px;
}
.tm-archive-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
    color: var(--bone-dim);
    margin: 0 auto 40px;
    max-width: 56ch;
}
.tm-archive-lede em { color: var(--cheshire); font-style: italic; }

.tm-archive-back {
    display: inline-block;
    margin-top: 16px;
}

/* ── search button ─────────────────────────────────────────────── */
.tm-search {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto;
    padding: 16px 22px;
    min-width: min(520px, 100%);
    background: var(--ink-floor);
    border: 1px solid var(--hairline-bright);
    color: var(--bone-fade);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tm-search:hover {
    border-color: var(--cheshire);
    color: var(--bone);
    background: var(--ink-floor-up);
}
.tm-search-icon {
    display: inline-flex;
    color: var(--cheshire);
}
.tm-search-icon svg { width: 16px; height: 16px; }
.tm-search-text {
    flex: 1;
    text-align: left;
    text-transform: none;
    letter-spacing: 0.02em;
}
.tm-search-kbd {
    display: inline-flex;
    gap: 4px;
    color: var(--bone-ghost);
}
.tm-search-kbd kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 6px;
    border: 1px solid var(--hairline-bright);
    background: var(--ink-void);
    color: var(--bone-fade);
    letter-spacing: 0;
}

/* ── featured strip ───────────────────────────────────────────── */
.tm-archive-featured {
    padding: 64px 0 32px;
    border-bottom: 1px solid var(--hairline);
}
.tm-featured-strip {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.tm-feat-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px;
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    color: inherit;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.tm-feat-card:hover {
    border-color: var(--cheshire);
    box-shadow: 0 30px 60px -30px color-mix(in oklch, var(--cheshire) 30%, transparent);
}
.tm-feat-card-sigil {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--ink-void);
    border-radius: 50%;
    color: var(--cheshire);
    box-shadow: 0 0 0 1px var(--hairline-bright),
                0 0 16px color-mix(in oklch, var(--cheshire) 22%, transparent);
}
.tm-feat-card-sigil svg { width: 36px; height: 36px; }
.tm-feat-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tm-feat-card-date { margin-left: auto; color: var(--bone-fade); }
.tm-feat-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--bone);
    margin: 0 0 12px;
}
.tm-feat-card:hover .tm-feat-card-title { color: var(--cheshire); }
.tm-feat-card-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-fade);
}

/* ── tag filter bar ───────────────────────────────────────────── */
.tm-tagbar-section {
    padding: 64px 0 32px;
    border-bottom: 1px solid var(--hairline);
}
.tm-tagbar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tm-tagpill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    color: var(--bone-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tm-tagpill:hover {
    border-color: var(--cheshire);
    color: var(--bone);
}
.tm-tagpill.is-active {
    border-color: var(--cheshire);
    color: var(--ink-void);
    background: var(--cheshire);
}
.tm-tagpill.is-active .tm-tagpill-dot { background: var(--ink-void); }
.tm-tagpill.is-active .tm-tagpill-count {
    background: color-mix(in oklab, var(--ink-void) 30%, transparent);
    color: var(--ink-void);
}
.tm-tagpill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cheshire);
}
.tm-tagpill[data-color="0"] .tm-tagpill-dot { background: var(--cheshire); }
.tm-tagpill[data-color="1"] .tm-tagpill-dot { background: var(--chain); }
.tm-tagpill[data-color="2"] .tm-tagpill-dot { background: var(--maze); }
.tm-tagpill[data-color="3"] .tm-tagpill-dot { background: var(--tea); }
.tm-tagpill[data-color="4"] .tm-tagpill-dot { background: var(--cheshire); }
.tm-tagpill[data-color="5"] .tm-tagpill-dot { background: var(--chain); }
.tm-tagpill[data-color="6"] .tm-tagpill-dot { background: var(--maze); }
.tm-tagpill[data-color="7"] .tm-tagpill-dot { background: var(--tea); }

.tm-tagpill-all .tm-tagpill-dot {
    background: transparent;
    border: 1px solid var(--cheshire);
}
.tm-tagpill-count {
    margin-left: 2px;
    padding: 1px 6px;
    background: var(--ink-void);
    border-radius: 999px;
    color: var(--bone-fade);
    font-size: 10px;
    letter-spacing: 0;
}

/* ── archive grid ─────────────────────────────────────────────── */
.tm-archive-grid-section {
    padding: 64px 0 32px;
}
.tm-archive-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.tm-acard {
    position: relative;
    background: var(--ink-floor);
    border: 1px solid var(--hairline);
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.tm-acard:hover {
    border-color: var(--cheshire);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--cheshire) 25%, transparent),
        0 30px 60px -30px color-mix(in oklch, var(--cheshire) 30%, transparent);
}
.tm-acard-link {
    display: block;
    padding: 26px 26px 22px;
    color: inherit;
}
.tm-acard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-ghost);
}
.tm-acard-num { color: var(--cheshire); }
.tm-acard-tag { padding-left: 0; }
.tm-acard-tag[data-color="0"] { color: var(--cheshire); }
.tm-acard-tag[data-color="1"] { color: var(--chain); }
.tm-acard-tag[data-color="2"] { color: var(--maze); }
.tm-acard-tag[data-color="3"] { color: var(--tea); }
.tm-acard-tag[data-color="4"] { color: var(--cheshire); }
.tm-acard-tag[data-color="5"] { color: var(--chain); }
.tm-acard-tag[data-color="6"] { color: var(--maze); }
.tm-acard-tag[data-color="7"] { color: var(--tea); }
.tm-acard-date { margin-left: auto; color: var(--bone-fade); }

.tm-acard-sigil {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--cheshire);
    margin-bottom: 14px;
}
.tm-acard-sigil svg { width: 40px; height: 40px; }

.tm-acard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--bone);
    margin: 0 0 12px;
}
.tm-acard:hover .tm-acard-title { color: var(--cheshire); }
.tm-acard-title em { font-style: italic; color: var(--bone-dim); font-weight: 400; }

.tm-acard-excerpt {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.45;
    color: var(--bone-dim);
    margin: 0 0 22px;
    /* clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm-acard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tm-acard-dur { color: var(--bone-fade); }
.tm-acard-walk {
    color: var(--cheshire);
    transition: letter-spacing 0.18s;
}
.tm-acard:hover .tm-acard-walk { letter-spacing: 0.24em; }

/* ── pagination ───────────────────────────────────────────────── */
.tm-pagination {
    max-width: 1280px;
    margin: 56px auto 0;
    padding: 32px 56px 0;
    border-top: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.tm-pag-link {
    color: var(--cheshire);
    transition: color 0.15s;
}
.tm-pag-link:hover { color: var(--bone); }
.tm-pag-link.is-disabled { color: var(--bone-ghost); pointer-events: none; }
.tm-pagination > .tm-pag-link:last-child { text-align: right; justify-self: end; }
.tm-pag-status { color: var(--bone-fade); justify-self: center; }

/* ═══════════════════════════════════════════════════════════════
   AUTHOR PAGE
   ═══════════════════════════════════════════════════════════════ */
.tm-author-hero {
    position: relative;
    padding: 100px 56px 100px;
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}
.tm-author-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 80% 0%,
            color-mix(in oklch, var(--cheshire) calc(6% * var(--glow-mult, 1)), transparent),
            transparent 55%);
}
.tm-author-grid {
    position: relative; z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: start;
}
.tm-author-eyebrow {
    color: var(--cheshire);
    margin-bottom: 40px;
}
.tm-author-name {
    font-size: clamp(56px, 7vw, 96px);
    line-height: 1.0;
    margin: 0 0 32px;
}
.tm-author-bio {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.4;
    color: var(--bone);
    margin: 0 0 40px;
    max-width: 50ch;
}

/* author stats */
.tm-author-stats {
    margin: 0 0 36px;
    padding: 24px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
}
.tm-author-stats div { display: flex; flex-direction: column; gap: 6px; }
.tm-author-stats dt {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-fade);
    margin: 0;
}
.tm-author-stats dd {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--bone);
    margin: 0;
    line-height: 1.2;
}
.tm-author-stats dd a {
    color: var(--cheshire);
    border-bottom: 1px solid color-mix(in oklch, var(--cheshire) 40%, transparent);
    font-size: 16px;
    word-break: break-all;
}

/* author social */
.tm-author-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}
.tm-author-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--hairline-bright);
    background: var(--ink-floor);
    color: var(--bone-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color 0.15s, color 0.15s;
}
.tm-author-social-link:hover {
    border-color: var(--cheshire);
    color: var(--cheshire);
}
.tm-author-social-link svg {
    width: 14px; height: 14px;
    fill: currentColor;
}

.tm-author-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-top: 8px;
}

/* author portrait — reuses .tm-portrait-frame */
.tm-author-portrait { position: relative; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .tm-archive-hero { padding: 56px 24px 56px; }
    .tm-archive-title { font-size: clamp(40px, 9vw, 60px); }
    .tm-search { min-width: 0; width: 100%; }

    .tm-featured-strip,
    .tm-tagbar,
    .tm-archive-grid {
        padding: 0 24px;
        grid-template-columns: 1fr;
    }
    .tm-tagbar { display: flex; }

    .tm-author-hero { padding: 56px 24px; }
    .tm-author-grid { grid-template-columns: 1fr; gap: 48px; }
    .tm-author-name { font-size: clamp(44px, 11vw, 72px); }

    .tm-pagination {
        padding: 32px 24px 0;
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px;
    }
    .tm-pagination > .tm-pag-link:last-child { text-align: center; justify-self: center; }
}

@media (max-width: 640px) {
    .tm-archive-grid { padding: 0 16px; }
    .tm-featured-strip { padding: 0 16px; }
    .tm-tagbar { padding: 0 16px; }
}


/* ── Subscribe form: inline confirmation panel ─────────────────────
   When the form submits successfully (Ghost has applied .success, OR
   the preview fallback runs), subscribe-form.js inserts a panel after
   the form with eyebrow + title + body + the email it was sent to.
   The form itself dims via existing .gh-form.success styles. */

.tm-sub-confirm {
    margin-top: 24px;
    padding: 28px 32px;
    border: 1px solid var(--hairline);
    background:
        radial-gradient(ellipse at 50% 0%,
            color-mix(in oklch, var(--cheshire) calc(10% * var(--glow-mult, 1)), transparent),
            transparent 65%),
        var(--ink-floor);
    color: var(--bone);
    position: relative;
}

/* A single hairline rule at the top so the panel reads as a continuation
   of the form, not a new card. */
.tm-sub-confirm::before {
    content: "";
    position: absolute;
    top: -1px; left: 16%; right: 16%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--cheshire) 50%,
        transparent);
    opacity: 0.65;
}

.tm-sub-confirm-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cheshire);
    margin-bottom: 12px;
}

.tm-sub-confirm-title {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.15;
    color: var(--bone);
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.tm-sub-confirm-body {
    font-family: var(--font-serif, "EB Garamond", Georgia, serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--bone-dim);
    margin: 0 0 22px;
    max-width: 56ch;
}

/* Footer row: the email it confirmed to + a hairline + the undo link. */
.tm-sub-confirm-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone-fade);
}
.tm-sub-confirm-email {
    color: var(--cheshire);
    letter-spacing: 0.02em;
    text-transform: none;
}
.tm-sub-confirm-rule {
    flex: 1;
    height: 1px;
    background: var(--hairline);
}
.tm-sub-confirm-undo {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--bone-ghost);
    font: inherit;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
    transition: color 0.15s, border-color 0.15s;
}
.tm-sub-confirm-undo:hover {
    color: var(--cheshire);
    border-bottom-color: var(--cheshire);
}

/* Error state — applied by subscribe-form.js when an invalid email is
   submitted in preview mode. Briefly highlights the input in cheshire-
   inverted hue (a soft warning ring rather than scary red). */
.gh-form.error,
.tm-foot-form.tm-sub-error {
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--chain) 55%, transparent);
    transition: box-shadow 0.2s;
}
.gh-form.error [data-members-error] {
    color: var(--chain);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
}

/* Footer subscribe (preview) — when the .tm-foot-form is in confirmed
   state, fade the inputs the way the gh-form fades. */
.tm-foot-form.tm-sub-done input,
.tm-foot-form.tm-sub-done button {
    opacity: 0.4;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 640px) {
    .tm-sub-confirm { padding: 22px 20px; }
    .tm-sub-confirm-title { font-size: 22px; }
    .tm-sub-confirm-foot { flex-wrap: wrap; gap: 10px; }
    .tm-sub-confirm-rule { display: none; }
}